/* Cinema Phase 9A - log-page-only responsive 100dvh workspace.
   Other pages, authentication, PocketBase and the period UI are untouched. */
body.cinema-logs-viewport {
  height: 100dvh;
  min-height: 0;
  overflow: hidden;
}
body.cinema-logs-viewport .shell,
body.cinema-logs-viewport .page-body {
  height: 100dvh;
  min-height: 0;
  overflow: hidden;
}
body.cinema-logs-viewport .page-body > main {
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
  min-height: 0;
  min-width: 0;
  overflow: hidden;
}
body.cinema-logs-viewport .topbar {
  min-height: 58px;
  height: 58px;
  flex-shrink: 0;
  padding-block: 7px;
}
body.cinema-logs-viewport .workspace {
  position: relative;
  max-width: none;
  min-height: 0;
  height: 100%;
  display: flex;
  flex-direction: column;
  padding: 10px 12px 12px;
  overflow: hidden;
}
body.cinema-logs-viewport .workspace > #notice-work:not([hidden]) {
  position: absolute;
  z-index: 30;
  inset: 9px 12px auto 12px;
  margin: 0;
  box-shadow: 0 5px 20px #1b2a4033;
  max-height: min(27dvh, 140px);
  overflow-wrap: anywhere;
  overflow-y: auto;
}
body.cinema-logs-viewport #view-logs {
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
  min-height: 0;
  min-width: 0;
  overflow: hidden;
}
body.cinema-logs-viewport #view-logs .screen-head {
  flex: 0 0 auto;
  padding: 8px 14px;
  margin-bottom: 9px;
  min-height: 62px;
  gap: 9px;
  border-radius: 12px;
}
body.cinema-logs-viewport #view-logs .screen-head h1 {
  font-size: clamp(15px, 1.4vw, 20px);
  line-height: 1.3;
  margin: 0;
}
body.cinema-logs-viewport #view-logs .screen-head .subtle,
body.cinema-logs-viewport #view-logs .screen-head .eyebrow { line-height: 1.25; font-size: 10px; }
body.cinema-logs-viewport #view-logs .screen-head .subtle { margin-top: 2px; }
body.cinema-logs-viewport #view-logs .btn { min-height: 36px; padding: 6px 11px; }
body.cinema-logs-viewport #view-logs .log-mode-tabs,
body.cinema-logs-viewport #view-logs .log-steps-progress { display: none; }
body.cinema-logs-viewport #view-logs .cinema-fit-grid {
  display: grid;
  flex: 1 1 auto;
  min-height: 0;
  min-width: 0;
  grid-template-columns: minmax(0, 1.12fr) minmax(0, .88fr);
  gap: 12px;
  align-items: stretch;
}
body.cinema-logs-viewport #view-logs .surface {
  min-width: 0;
  min-height: 0;
  padding: 12px 14px;
  border-radius: 13px;
}
body.cinema-logs-viewport #view-logs .surface-head {
  min-height: 28px;
  flex: 0 0 auto;
  margin-bottom: 8px;
  align-items: center;
}
body.cinema-logs-viewport #view-logs .surface-head h2 { font-size: 15px; line-height: 1.4; margin: 0; }
body.cinema-logs-viewport #view-logs .micro { font-size: 10px; line-height: 1.3; margin: 0; }
body.cinema-logs-viewport #view-logs .log-form-surface {
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
body.cinema-logs-viewport #view-logs .cinema-fit-form {
  display: flex;
  flex-direction: column;
  gap: 7px;
  min-height: 0;
  flex: 1 1 auto;
}
body.cinema-logs-viewport #view-logs .log-fields-grid {
  display: grid;
  grid-template-columns: minmax(0, .95fr) minmax(0, 1.05fr);
  gap: 12px;
  flex: 1 1 auto;
  min-height: 0;
}
body.cinema-logs-viewport #view-logs .log-step {
  display: flex;
  flex-direction: column;
  gap: 11px;
  min-width: 0;
  min-height: 0;
}
body.cinema-logs-viewport #view-logs .log-field {
  display: flex;
  flex-direction: column;
  gap: 3px;
  min-height: 0;
}
body.cinema-logs-viewport #view-logs .log-label {
  display: block;
  margin: 0;
  font-size: 12px;
  font-weight: 800;
  line-height: 1.35;
  color: #24374e;
}
body.cinema-logs-viewport #view-logs .segment { margin: 0; gap: 6px; }
body.cinema-logs-viewport #view-logs .segment span {
  font-size: 12px;
  min-height: 39px;
  padding: 4px;
}
body.cinema-logs-viewport #view-logs input:not([type=radio]),
body.cinema-logs-viewport #view-logs select,
body.cinema-logs-viewport #view-logs textarea {
  min-height: 39px;
  padding: 6px 10px;
  border-radius: 9px;
  font-size: 13px;
}
body.cinema-logs-viewport #view-logs .log-description-field { flex: 1 1 auto; }
body.cinema-logs-viewport #view-logs textarea {
  min-height: 60px;
  flex: 1 1 auto;
  resize: none;
}
body.cinema-logs-viewport #view-logs .hint {
  font-size: 10px;
  line-height: 1.3;
  margin: 0;
}
body.cinema-logs-viewport #view-logs .auto-fields {
  font-size: 10.5px;
  margin: 0;
  padding: 7px 9px;
  gap: 4px 10px;
  line-height: 1.3;
}
body.cinema-logs-viewport #view-logs .log-submit-actions {
  display: flex;
  flex: 0 0 auto;
  gap: 8px;
}
body.cinema-logs-viewport #view-logs .log-submit-actions #log-submit {
  flex: 1 1 auto;
  min-height: 42px;
}
body.cinema-logs-viewport #view-logs .cinema-fit-history {
  min-height: 0;
  display: grid;
  grid-template-rows: repeat(2, minmax(0, 1fr));
  gap: 12px;
}
body.cinema-logs-viewport #view-logs .cinema-fit-history > .surface {
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
body.cinema-logs-viewport #view-logs .records {
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
  min-height: 0;
  overflow: hidden;
}
body.cinema-logs-viewport #view-logs .record {
  min-height: 0;
  height: 100%;
  display: flex;
  flex-direction: column;
  border-radius: 9px;
  padding: 8px 10px;
  gap: 3px;
  overflow: hidden;
}
body.cinema-logs-viewport #view-logs .record-top { margin-bottom: 0; }
body.cinema-logs-viewport #view-logs .record-top strong { font-size: 12px; }
body.cinema-logs-viewport #view-logs .record-meta { font-size: 10px; gap: 4px; line-height: 1.3; }
body.cinema-logs-viewport #view-logs .record-date { font-size: 9px; }
body.cinema-logs-viewport #view-logs .log-record-preview {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  overflow: hidden;
  text-overflow: ellipsis;
  flex: 0 1 auto;
  min-height: 0;
  overflow-wrap: anywhere;
  font-size: 11px;
  line-height: 1.55;
  margin: 1px 0;
}
body.cinema-logs-viewport #view-logs .log-record-details {
  display: block;
  font: inherit;
  font-size: 10px;
  color: #1359b0;
  background: transparent;
  text-align: right;
  padding: 1px 0;
  border: 0;
  align-self: flex-start;
  margin-top: auto;
}
body.cinema-logs-viewport #view-logs .records .empty {
  flex: 1 1 auto;
  display: grid;
  place-items: center;
  padding: 9px;
  font-size: 11px;
  min-height: 0;
}
body.cinema-logs-viewport #view-logs .pager {
  flex: 0 0 auto;
  min-height: 34px;
  margin-top: 6px;
  padding-top: 6px;
  font-size: 10px;
}
body.cinema-logs-viewport #view-logs .pager .btn-small {
  min-height: 28px;
  padding: 3px 9px;
}
/* Constrain descriptions in a modal; switch pages instead of scrolling long text. */
body.cinema-logs-viewport #view-logs .log-details-dialog {
  position: fixed;
  border: 1px solid #cad9e9;
  background: #fff;
  color: #14243a;
  width: min(600px, calc(100vw - 20px));
  height: min(500px, calc(100dvh - 24px));
  max-height: none;
  padding: 16px;
  border-radius: 13px;
  box-shadow: 0 15px 48px #14243a44;
  overflow: hidden;
}
body.cinema-logs-viewport #view-logs .log-details-dialog[open] {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
body.cinema-logs-viewport #view-logs .log-details-dialog::backdrop { background: #15294699; }
body.cinema-logs-viewport #view-logs .log-details-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
}
body.cinema-logs-viewport #view-logs .log-details-head h2 { margin: 0; font-size: 16px; }
body.cinema-logs-viewport #view-logs .log-details-text {
  flex: 1 1 auto;
  min-height: 0;
  overflow: hidden;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
  font-size: 13px;
  line-height: 1.8;
  padding: 8px;
  border: 1px solid #e2e8f1;
  border-radius: 8px;
}
body.cinema-logs-viewport #view-logs .log-details-dialog > .pager { margin: 0; }
/* Use single viewport-sized panes on phones and narrow laptops. */
@media (max-width: 1180px), (max-height: 600px) {
  body.cinema-logs-viewport.is-logged-in .page-body { margin-right: 0; }
  body.cinema-logs-viewport .sidebar {
    transform: translateX(105%);
    visibility: hidden;
    transition: transform .2s;
    width: min(300px, 88vw);
  }
  body.cinema-logs-viewport.drawer-open .sidebar { transform: translateX(0); visibility: visible; }
  body.cinema-logs-viewport .hamburger,
  body.cinema-logs-viewport .mobile-only { display: inline-flex; align-items: center; justify-content: center; }
  body.cinema-logs-viewport .topbar-brand { display: flex !important; }
  body.cinema-logs-viewport .breadcrumb { display: none; }
  body.cinema-logs-viewport #view-logs .screen-head { min-height: 52px; padding: 6px 10px; margin-bottom: 7px; }
  body.cinema-logs-viewport #view-logs .screen-head .subtle,
  body.cinema-logs-viewport #view-logs .screen-head .eyebrow { display: none; }
  body.cinema-logs-viewport #view-logs .log-mode-tabs {
    flex: 0 0 auto;
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 5px;
    margin-bottom: 7px;
    border: 1px solid #d4dfeb;
    border-radius: 11px;
    background: #fff;
    padding: 4px;
    min-height: 42px;
  }
  body.cinema-logs-viewport #view-logs .log-mode-tab {
    border: 0;
    border-radius: 8px;
    min-width: 0;
    font-size: 11px;
    font-weight: 800;
    color: #50627a;
    background: transparent;
    padding: 5px;
    line-height: 1.2;
  }
  body.cinema-logs-viewport #view-logs .log-mode-tab.selected {
    color: #145ab2;
    background: #e8f1ff;
    box-shadow: 0 1px 4px #132f5320;
  }
  body.cinema-logs-viewport #view-logs .cinema-fit-grid {
    display: flex;
    flex-direction: column;
    min-height: 0;
    gap: 0;
  }
  body.cinema-logs-viewport #view-logs .cinema-fit-grid[data-log-panel-active="form"] .cinema-fit-history,
  body.cinema-logs-viewport #view-logs .cinema-fit-grid[data-log-panel-active="history"] .log-form-surface,
  body.cinema-logs-viewport #view-logs .cinema-fit-grid[data-log-panel-active="recent"] .log-form-surface { display: none; }
  body.cinema-logs-viewport #view-logs .cinema-fit-grid[data-log-panel-active="history"] .log-recent-surface,
  body.cinema-logs-viewport #view-logs .cinema-fit-grid[data-log-panel-active="recent"] .log-history-surface { display: none; }
  body.cinema-logs-viewport #view-logs .cinema-fit-history { display: flex; flex: 1 1 auto; }
  body.cinema-logs-viewport #view-logs .cinema-fit-history > .surface,
  body.cinema-logs-viewport #view-logs .log-form-surface { flex: 1 1 auto; }
  body.cinema-logs-viewport #view-logs .log-form-surface { padding: 10px 12px; }
  body.cinema-logs-viewport #view-logs .surface-head { margin-bottom: 4px; }
  body.cinema-logs-viewport #view-logs .surface-head .micro { display: none; }
  body.cinema-logs-viewport #view-logs .log-steps-progress {
    display: flex;
    flex: 0 0 auto;
    justify-content: space-between;
    align-items: center;
    color: #435872;
    font-size: 11px;
    gap: 10px;
    padding: 1px 2px 7px;
  }
  body.cinema-logs-viewport #view-logs .log-step-bars { display: flex; gap: 4px; }
  body.cinema-logs-viewport #view-logs .log-step-bars i {
    width: 22px;
    height: 5px;
    background: #d3ddeb;
    border-radius: 8px;
  }
  body.cinema-logs-viewport #view-logs .log-step-bars i.on { background: #1769cf; }
  body.cinema-logs-viewport #view-logs .log-fields-grid { display: block; flex: 1 1 auto; }
  body.cinema-logs-viewport #view-logs .log-step {
    height: 100%;
    gap: clamp(8px, 2dvh, 13px);
    min-height: 0;
  }
  body.cinema-logs-viewport #view-logs .log-step:not(.active-step) { display: none; }
  body.cinema-logs-viewport #view-logs .log-field { gap: 5px; }
  body.cinema-logs-viewport #view-logs .log-description-field { flex: 1 1 auto; }
  body.cinema-logs-viewport #view-logs .cinema-fit-form .log-submit-actions { flex: 0 0 auto; }
  body.cinema-logs-viewport #view-logs #log-step-back,
  body.cinema-logs-viewport #view-logs #log-step-next { flex: 1 1 auto; }
  body.cinema-logs-viewport #view-logs .cinema-fit-history .record { justify-content: flex-start; }
  body.cinema-logs-viewport #view-logs .cinema-fit-history .log-record-preview { -webkit-line-clamp: 4; line-clamp: 4; }
}
@media (max-width: 620px) {
  body.cinema-logs-viewport .topbar {
    height: 52px;
    min-height: 52px;
    padding: 5px 10px;
  }
  body.cinema-logs-viewport .topbar-brand strong { font-size: 13px; }
  body.cinema-logs-viewport .topbar-brand small { font-size: 9px; }
  body.cinema-logs-viewport .topbar-badge { width: 33px; height: 33px; font-size: 17px; }
  body.cinema-logs-viewport .workspace { padding: 6px 7px 7px; }
  body.cinema-logs-viewport #view-logs .screen-head h1 { font-size: 14px; }
  body.cinema-logs-viewport #view-logs .screen-head .btn { min-height: 32px; font-size: 10px; }
  body.cinema-logs-viewport #view-logs .surface { padding: 9px 11px; }
  body.cinema-logs-viewport #view-logs .surface-head h2 { font-size: 14px; }
  body.cinema-logs-viewport #view-logs .segment span { min-height: 40px; }
  body.cinema-logs-viewport #view-logs input:not([type=radio]),
  body.cinema-logs-viewport #view-logs select,
  body.cinema-logs-viewport #view-logs textarea { font-size: 16px; } /* iOS: prevent zoom-on-focus */
}
@media (max-height: 690px) {
  body.cinema-logs-viewport #view-logs .screen-head { min-height: 45px; }
  body.cinema-logs-viewport #view-logs .log-step { gap: 6px; }
  body.cinema-logs-viewport #view-logs .auto-fields { display: none; }
  body.cinema-logs-viewport #view-logs .log-steps-progress { padding-bottom: 4px; }
  body.cinema-logs-viewport #view-logs .surface-head { margin-bottom: 3px; }
  body.cinema-logs-viewport #view-logs textarea { min-height: 55px; }
}
/* Emergency accessibility fallback: extreme zoom / very short landscape screens.
   This keeps all controls reachable rather than silently clipping the submit button. */
@media (max-height: 420px) {
  body.cinema-logs-viewport #view-logs .log-form-surface { overflow-y: auto; }
  body.cinema-logs-viewport #view-logs .log-fields-grid { flex: 0 0 auto; }
  body.cinema-logs-viewport #view-logs .log-step { height: auto; }
  body.cinema-logs-viewport #view-logs .log-description-field textarea { min-height: 60px; }
}
/* Extra compact three-stage form for very short landscape viewports. */
body.cinema-logs-viewport .page-body footer { display: none; }
body.cinema-logs-viewport #view-logs .log-step-bars i:nth-child(3) { display: none; }
@media (max-height: 480px) {
  body.cinema-logs-viewport .topbar { height: 40px; min-height: 40px; padding-block: 2px; }
  body.cinema-logs-viewport .topbar-badge { width: 28px; height: 28px; font-size: 15px; }
  body.cinema-logs-viewport .topbar-brand small { display: none; }
  body.cinema-logs-viewport .workspace { padding: 3px 6px 4px; }
  body.cinema-logs-viewport #view-logs .screen-head { min-height: 34px; padding: 3px 8px; margin-bottom: 3px; }
  body.cinema-logs-viewport #view-logs .screen-head .btn { min-height: 27px; padding: 3px 8px; }
  body.cinema-logs-viewport #view-logs .log-mode-tabs { min-height: 31px; padding: 2px; margin-bottom: 4px; }
  body.cinema-logs-viewport #view-logs .log-mode-tab { padding: 2px; }
  body.cinema-logs-viewport #view-logs .surface { padding: 5px 9px; }
  body.cinema-logs-viewport #view-logs .surface-head { margin-bottom: 1px; min-height: 22px; }
  body.cinema-logs-viewport #view-logs .log-steps-progress { padding-bottom: 1px; font-size: 10px; }
  body.cinema-logs-viewport #view-logs .log-step-bars i:nth-child(3) { display: block; }
  body.cinema-logs-viewport #view-logs .log-fields-grid { display: flex; flex-direction: column; flex: 1 1 auto; }
  body.cinema-logs-viewport #view-logs .log-step,
  body.cinema-logs-viewport #view-logs .log-step:not(.active-step) { display: contents; }
  body.cinema-logs-viewport #view-logs .log-field,
  body.cinema-logs-viewport #view-logs .log-description-field { display: none; }
  body.cinema-logs-viewport #view-logs .cinema-fit-grid[data-short-step="1"] .log-field[data-short-step="1"],
  body.cinema-logs-viewport #view-logs .cinema-fit-grid[data-short-step="2"] .log-field[data-short-step="2"],
  body.cinema-logs-viewport #view-logs .cinema-fit-grid[data-short-step="3"] .log-field[data-short-step="3"] { display: flex; }
  body.cinema-logs-viewport #view-logs .cinema-fit-grid[data-short-step="1"] .log-fields-grid,
  body.cinema-logs-viewport #view-logs .cinema-fit-grid[data-short-step="2"] .log-fields-grid { justify-content: center; gap: 6px; }
  body.cinema-logs-viewport #view-logs .log-field { gap: 2px; }
  body.cinema-logs-viewport #view-logs .segment span { min-height: 31px; }
  body.cinema-logs-viewport #view-logs input:not([type=radio]),
  body.cinema-logs-viewport #view-logs select { min-height: 32px; padding: 3px 8px; }
  body.cinema-logs-viewport #view-logs .log-description-field textarea { flex: 1 1 auto; min-height: 40px; }
  body.cinema-logs-viewport #view-logs .log-submit-actions .btn { min-height: 30px; padding: 3px 8px; }
  body.cinema-logs-viewport #view-logs .log-submit-actions #log-submit { min-height: 30px; }
}