/* Phase 36 — App-wide stabilization + mobile enhancement pass */

:root {
  --cbs-keyboard-height: 0px;
}

html[data-keyboard-open="true"],
body[data-keyboard-open="true"] {
  --cbs-keyboard-open: 1;
}

html[data-keyboard-open="false"],
body[data-keyboard-open="false"] {
  --cbs-keyboard-open: 0;
}

html, body {
  overflow-x: hidden;
}

:where(img, canvas, video, svg) {
  max-width: 100%;
}

:where(.module-toolbar, .top-actions, .btn-group, .doc-topbar, .adt-commandbar, #props-toolbar, #budget-toolbar, #stripboard-toolbar, #doc-stats-bar, #cine-gaffer-toolbar, #cine-gear-cat-bar, #adt-subnav, .sched-summary-bar, .cs-action-bar, #scc-toolbar, #bottom-nav .bottom-nav-inner, #bottom-nav-inner) > * {
  flex: 0 0 auto;
}

:where(.modal, .popover, #sn-popover, [role="dialog"]) {
  max-width: min(96vw, 820px);
  max-height: min(88vh, 920px);
}

:where(textarea) {
  max-width: 100%;
}

@media (max-width: 1024px) {
  :where(.module-toolbar, .top-actions, .btn-group, .doc-topbar, .adt-commandbar, #props-toolbar, #budget-toolbar, #stripboard-toolbar, #doc-stats-bar, #cine-gaffer-toolbar, #cine-gear-cat-bar, #adt-subnav, .sched-summary-bar, .cs-action-bar, #scc-toolbar) {
    overflow-x: auto !important;
    overflow-y: hidden !important;
    -webkit-overflow-scrolling: touch !important;
    scrollbar-width: none;
  }
  :where(.module-toolbar, .top-actions, .btn-group, .doc-topbar, .adt-commandbar, #props-toolbar, #budget-toolbar, #stripboard-toolbar, #doc-stats-bar, #cine-gaffer-toolbar, #cine-gear-cat-bar, #adt-subnav, .sched-summary-bar, .cs-action-bar, #scc-toolbar)::-webkit-scrollbar {
    display: none;
  }
  :where(table, .table-wrap, [class*="table-wrap"], [class*="grid-scroll"], .stripboard-scroll, #callsheet-sheet, .scan-viewer) {
    max-width: 100% !important;
  }
  :where(.table-wrap, [class*="table-wrap"], .stripboard-scroll, #callsheet-sheet, .scan-viewer) {
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch !important;
  }
}

@media (max-width: 760px) {
  html[data-ui-tier="phone"] body {
    overscroll-behavior-x: none;
  }

  html[data-ui-tier="phone"] :where(#project-hub, #writer-app, #stripboard-app, #callsheet-app, #locations-app, #schedule-app, #storyboard-app, #corkboard-app, #wardrobe-app, #documentary-app, #pcc-app, #contacts-app, #props-app, #artdept-app, #auditions-app, #spatial-app, #adtreatment-app, #cine-app, #festival-app, #musicvideo-app) {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
  }

  html[data-ui-tier="phone"] :where(#project-hub *, #writer-app *, #stripboard-app *, #callsheet-app *, #locations-app *, #schedule-app *, #storyboard-app *, #corkboard-app *, #wardrobe-app *, #documentary-app *, #pcc-app *, #contacts-app *, #props-app *, #artdept-app *, #auditions-app *, #spatial-app *, #adtreatment-app *, #cine-app *, #festival-app *, #musicvideo-app *) {
    min-width: 0;
    box-sizing: border-box;
  }

  html[data-ui-tier="phone"] :where(input:not([type="checkbox"]):not([type="radio"]):not([type="range"]), select, textarea, button) {
    max-width: 100% !important;
  }

  html[data-ui-tier="phone"] :where(.card, .folder-body, .contact-card, .prop-card, .artdept-card, .audition-card, .sched-scene-card, .location-card, .pcc-card, .doc-card, .wardrobe-card) {
    border-radius: 14px !important;
  }

  html[data-ui-tier="phone"] :where(.module-toolbar, .top-actions, .btn-group, .doc-topbar, .adt-commandbar, #props-toolbar, #budget-toolbar, #stripboard-toolbar, #doc-stats-bar, #cine-gaffer-toolbar, #cine-gear-cat-bar, #adt-subnav, .sched-summary-bar, .cs-action-bar, #scc-toolbar) {
    padding-bottom: 2px;
  }

  html[data-ui-tier="phone"] :where(#props-body, #locations-body, #schedule-body, #artdept-schedule-body) {
    display: flex !important;
    flex-direction: column !important;
    gap: 12px !important;
    min-height: 0 !important;
  }

  html[data-ui-tier="phone"] body[data-active-view="writer-app"] #writer-app .script-page-sheet {
    border-radius: 12px !important;
  }

  html[data-ui-tier="phone"] body[data-active-view="writer-app"] .page-content {
    height: clamp(360px, calc(var(--cbs-mobile-vh, 100vh) - var(--cbs-mobile-header-height, 52px) - var(--cbs-bottom-nav-height, 66px) - 180px), 620px) !important;
    min-height: 360px !important;
  }

  html[data-ui-tier="phone"][data-keyboard-open="true"] #bottom-nav,
  body[data-ui-tier="phone"][data-keyboard-open="true"] #bottom-nav {
    transform: translateY(calc(100% + var(--sab, 0px))) !important;
    opacity: 0 !important;
    pointer-events: none !important;
  }

  html[data-ui-tier="phone"][data-keyboard-open="true"] :where(#mobile-format-bar, #tag-float-bar),
  body[data-ui-tier="phone"][data-keyboard-open="true"] :where(#mobile-format-bar, #tag-float-bar) {
    opacity: 0 !important;
    pointer-events: none !important;
  }

  html[data-ui-tier="phone"][data-keyboard-open="true"] body[data-active-view="writer-app"] #writer-mobile-hub,
  body[data-ui-tier="phone"][data-keyboard-open="true"][data-active-view="writer-app"] #writer-mobile-hub {
    bottom: max(10px, calc(var(--sab, 0px) + 10px)) !important;
  }

  html[data-ui-tier="phone"][data-keyboard-open="true"] body[data-active-view="writer-app"] #writer-mobile-hub .wmh-panel-shell,
  body[data-ui-tier="phone"][data-keyboard-open="true"][data-active-view="writer-app"] #writer-mobile-hub .wmh-panel-shell {
    bottom: 58px !important;
    max-height: min(54vh, 420px) !important;
  }

  html[data-ui-tier="phone"][data-keyboard-open="true"] body[data-active-view="writer-app"] .editor-statusbar,
  body[data-ui-tier="phone"][data-keyboard-open="true"][data-active-view="writer-app"] .editor-statusbar {
    bottom: max(8px, calc(var(--sab, 0px) + 8px)) !important;
  }

  html[data-ui-tier="phone"][data-keyboard-open="true"] :where(#project-hub, #writer-app, #stripboard-app, #callsheet-app, #locations-app, #schedule-app, #storyboard-app, #corkboard-app, #wardrobe-app, #documentary-app, #pcc-app, #contacts-app, #props-app, #artdept-app, #auditions-app, #spatial-app, #adtreatment-app, #cine-app, #festival-app, #musicvideo-app),
  body[data-ui-tier="phone"][data-keyboard-open="true"] :where(#project-hub, #writer-app, #stripboard-app, #callsheet-app, #locations-app, #schedule-app, #storyboard-app, #corkboard-app, #wardrobe-app, #documentary-app, #pcc-app, #contacts-app, #props-app, #artdept-app, #auditions-app, #spatial-app, #adtreatment-app, #cine-app, #festival-app, #musicvideo-app) {
    padding-bottom: max(12px, calc(var(--sab, 0px) + 12px)) !important;
  }
}