/* =====================================================================
   mobile.css — small screens and touch
   Loaded after every section stylesheet. Desktop styles stay where they
   are; this file only adds what phones and touch devices need.

   Phone query: (max-width: 820px), (max-height: 500px) and (pointer: coarse)
   Keep it in sync with PHONE_QUERY in js/mobile.js. navigation.css still has
   its own 820px drawer rule; the drawer rules below repeat what it sets so
   landscape phones (wider than 820px) get the drawer too.
   ===================================================================== */


/* ---------------------------------------------------------------------
   1. ALL SIZES
   --------------------------------------------------------------------- */

/* Dynamic viewport height: on mobile browsers 100vh includes the area
   under the URL bar, which pushed the bottom of every section off screen. */
#app,
.app,
.app-shell {
  height: 100vh;
  height: 100dvh;
}

/* Contact details rendered by Lina.telLink / mailLink / mapLink */
/* :where() keeps this at zero specificity so .contact-item colors still win */
:where(a.contact-link) {
  color: inherit;
}
a.contact-link {
  text-decoration: none;
  overflow-wrap: anywhere;
}
/* Stacked contact lines in list rows (were block <div>s before they became links) */
.cast-row .col-contact > a.contact-link,
.loc-row .col-loc-contact > a.contact-link {
  display: block;
}
a.contact-link:hover,
a.contact-link:focus-visible {
  text-decoration: underline;
  text-underline-offset: 2px;
}
.contact-email.contact-link {
  color: var(--accent);
}

/* Shot-row placeholders exist for the stacked phone layout; on desktop the
   column header already names each field. */
.shot-row input::placeholder {
  color: transparent;
}

/* Phone-only chrome, hidden on larger screens */
.drawer-head,
.drawer-logout,
.cs-mobile-back {
  display: none;
}

/* "Works best on a larger screen" note (js/mobile.js) */
.small-screen-notice {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 0 0 10px;
  padding: 10px 12px;
  border: 1px solid var(--border);
  border-left: 3px solid var(--accent);
  border-radius: 4px;
  background: var(--bg-panel);
  color: var(--text-secondary);
  font-size: 13px;
  line-height: 1.45;
}
.small-screen-notice p {
  margin: 0;
  flex: 1;
}
.small-screen-notice .btn {
  flex-shrink: 0;
}


/* ---------------------------------------------------------------------
   2. TOUCH INPUT (phones and tablets of any width)
   --------------------------------------------------------------------- */

@media (hover: none) {
  /* Controls that only appeared on hover were unreachable by touch. */
  .item-move,
  .item-remove,
  .bgt-sub-head .bgt-icon-btn,
  .bgt-row .bgt-row-actions .bgt-icon-btn,
  .cs-edit-panel-btn,
  .cs-resend-btn,
  .headshot-remove-btn,
  .note-card-actions,
  .outline-card-actions,
  .character-delete,
  .task-actions,
  .pcal-detail-delete,
  .storyboard-remove-image,
  .shot-row .shot-action {
    opacity: 1;
  }

  /* Hover tints stick after a tap on touch screens */
  .cast-row:hover:not(.cast-row-head),
  .crew-row:hover,
  .loc-row:hover:not(.loc-row-head),
  .shot-row:hover:not(.shot-row-head) {
    background: transparent;
  }
}

@media (pointer: coarse) {
  /* iOS zooms the page when a focused field's text is under 16px */
  input[type="text"],
  input[type="search"],
  input[type="email"],
  input[type="password"],
  input[type="tel"],
  input[type="number"],
  input[type="date"],
  input[type="time"],
  input[type="url"],
  select,
  textarea {
    font-size: 16px;
  }
}


/* ---------------------------------------------------------------------
   3. PHONES (≤ 820px wide, or a touch screen ≤ 500px tall: landscape phones)
   --------------------------------------------------------------------- */

@media (max-width: 820px), (max-height: 500px) and (pointer: coarse) {

  /* ---------- Top bar ---------- */

  .top-bar {
    height: auto;
    min-height: 52px;
    padding: env(safe-area-inset-top, 0px) max(8px, env(safe-area-inset-right, 0px)) 0 max(4px, env(safe-area-inset-left, 0px));
    gap: 8px;
    flex-shrink: 0;
  }

  .top-bar .project-title {
    font-size: 24px;
  }
  .top-bar .project-title img {
    max-height: 30px !important;
    margin-right: 6px !important;
  }

  .top-bar-meta {
    display: flex;
    align-items: center;
    gap: 6px;
    min-width: 0;
  }

  /* Project name moves into the drawer header */
  #projectName {
    display: none;
  }

  /* Cloud status becomes a dot; the label stays available as the title */
  .cloud-status {
    width: 10px;
    height: 10px;
    padding: 0;
    font-size: 0;
    margin: 0 6px;
    border-width: 0;
    background: var(--text-secondary);
  }
  .cloud-status[data-state="synced"] { background: #5ab45a; }
  .cloud-status[data-state="loading"],
  .cloud-status[data-state="saving"] { background: var(--accent); }
  .cloud-status[data-state="error"] { background: #e74c3c; }
  .cloud-status[data-state="offline"] { background: #777; }

  /* Feedback / Help: icon-only */
  #feedbackBtn,
  #contextHelpBtn {
    width: 40px;
    height: 40px;
    padding: 0;
    gap: 0;
    font-size: 0;
    justify-content: center;
  }
  #feedbackBtn svg,
  #contextHelpBtn svg {
    width: 18px;
    height: 18px;
  }

  /* Log out lives in the drawer */
  #authButton {
    display: none;
  }

  .sidebar-toggle-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
  }

  /* ---------- Drawer ---------- */

  .sidebar {
    position: fixed;
    top: 0;
    height: 100vh;
    height: 100dvh;
    z-index: 999;
    background: var(--bg-panel);
    overflow-y: auto;
    left: 0;
    width: min(300px, 86vw);
    min-width: 0;
    transform: translateX(-105%);
    transition: transform 0.25s ease;
    border-right: 1px solid var(--accent);
    padding-top: env(safe-area-inset-top, 0px);
    padding-bottom: env(safe-area-inset-bottom, 0px);
    overscroll-behavior: contain;
  }
  .sidebar.mobile-open {
    left: 0;
    transform: none;
  }

  body.drawer-open {
    overflow: hidden;
  }

  .drawer-head {
    display: flex;
    align-items: center;
    gap: 4px;
    padding: 10px 8px 10px 16px;
    border-bottom: 1px solid var(--border);
    margin-bottom: 6px;
  }

  .drawer-project {
    appearance: none;
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 2px;
    padding: 4px 0;
    background: none;
    border: none;
    color: var(--text-primary);
    text-align: left;
    cursor: pointer;
    font-family: var(--font-ui);
  }
  .drawer-project-label {
    font-size: 11px;
    color: var(--text-secondary);
  }
  .drawer-project-name {
    font-size: 16px;
    font-weight: 600;
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .drawer-close {
    appearance: none;
    width: 44px;
    height: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    background: none;
    border: none;
    border-radius: 6px;
    color: var(--text-secondary);
    cursor: pointer;
  }

  .sidebar li {
    min-height: 46px;
    padding: 0 18px;
    font-size: 15px;
  }
  .sidebar .nav-icon {
    width: 18px;
    height: 18px;
  }
  .sidebar-main li[data-section="locations"] {
    margin-bottom: 0 !important;
  }

  .sidebar-bottom li {
    display: flex;
    align-items: center;
    padding: 0 18px;
    font-size: 14px;
  }

  .drawer-logout {
    display: flex;
    align-items: center;
    width: 100%;
    min-height: 46px;
    padding: 0 18px;
    appearance: none;
    background: none;
    border: none;
    border-top: 1px solid #333;
    color: var(--text-secondary);
    font: 400 14px "Roboto", var(--font-ui);
    text-align: left;
    cursor: pointer;
  }

  .sidebar-copyright {
    display: flex;
    align-items: center;
    gap: 6px;
    padding-bottom: calc(16px + env(safe-area-inset-bottom, 0px));
  }

  /* ---------- Main area & section shell ---------- */

  main {
    padding: 0;
    padding-bottom: env(safe-area-inset-bottom, 0px);
    display: flex;
    flex-direction: column;
  }

  /* The section card goes full-bleed: the screen is the frame. */
  main > .screenplay-page {
    flex: 1 1 auto;
    height: auto;
    min-height: 0;
    border: none;
    border-radius: 0;
    box-shadow: none;
  }

  /* Banners that sit above the section */
  main > .small-screen-notice,
  main > .lina-readonly-banner {
    margin: 8px 10px 0;
    flex-shrink: 0;
  }

  .screenplay-header {
    height: auto;
    min-height: 52px;
    flex-wrap: wrap;
    gap: 6px 8px;
    padding: 6px 10px;
  }

  /* Title side and tool side each scroll sideways rather than overlapping */
  .screenplay-header-left,
  .screenplay-header-right {
    overflow-x: auto;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
  }
  .screenplay-header-left::-webkit-scrollbar,
  .screenplay-header-right::-webkit-scrollbar,
  .screenplay-header-center::-webkit-scrollbar {
    display: none;
  }

  .screenplay-header-left {
    flex: 0 1 auto;
    gap: 6px;
  }
  .screenplay-header-left > * {
    flex-shrink: 0;
  }

  .screenplay-header-right {
    flex: 1 1 0;
    justify-content: flex-start;
    gap: 4px;
  }
  /* margin-left:auto right-aligns without hiding overflow at the start
     (justify-content:flex-end would make the first buttons unreachable) */
  .screenplay-header-right > :first-child {
    margin-left: auto;
  }
  .screenplay-header-right > * {
    flex-shrink: 0;
  }

  /* Tabs, view toggles, filters: their own full-width row */
  .screenplay-header-center {
    order: 3;
    flex: 1 1 100%;
    min-width: 0;
    display: flex;
    justify-content: flex-start;
    overflow-x: auto;
    scrollbar-width: none;
  }
  .screenplay-header-center:empty {
    display: none;
  }

  .screenplay-page .tool-btn {
    width: 40px;
    height: 40px;
  }

  .screenplay-canvas {
    padding: 10px;
  }

  .section-scene-select {
    min-width: 0;
    max-width: 58vw;
  }

  /* ---------- Modals ---------- */

  /* Shared modals become bottom sheets that fit the screen and scroll */
  .modal-backdrop:not(#authModal) {
    align-items: flex-end;
    padding: 0;
  }
  .modal-backdrop:not(#authModal) > .modal {
    width: 100% !important;
    max-width: 100% !important;
    max-height: calc(100dvh - 24px - env(safe-area-inset-top, 0px));
    overflow-y: auto;
    overscroll-behavior: contain;
    border-radius: 12px 12px 0 0;
    padding-bottom: calc(16px + env(safe-area-inset-bottom, 0px));
  }
  .modal-wide .lina-modal {
    width: 100%;
  }

  .modal .form-row {
    flex-wrap: wrap;
  }
  .modal .form-row > .form-group {
    flex: 1 1 140px;
    min-width: 0;
  }
  /* Fixed-width fields (e.g. cast number) keep their size */
  .modal .form-row > .form-group[style*="width"] {
    flex: 0 0 auto;
  }
  .lina-modal-actions {
    flex-wrap: wrap;
  }

  /* Login / register panel */
  #authModal .auth-logo-type { font-size: 40px; }
  #authModal .auth-logo-icon { width: 60px; }
  #authModal .auth-landing { padding: max(16px, env(safe-area-inset-top, 0px)) 0 16px; }


  /* =================================================================
     SECTIONS
     ================================================================= */

  /* ---------- Cast & Crew ---------- */

  .castcrew-header .screenplay-header-center {
    order: 0;
    flex: 0 0 auto;
    overflow: visible;
  }

  .cast-row-head {
    display: none;
  }

  .cast-row {
    grid-template-columns: 30px 40px minmax(0, 1fr) auto;
    grid-template-areas:
      "num photo name    actions"
      "num photo role    status"
      "num photo contact contact";
    gap: 2px 10px;
    align-items: start;
    padding: 12px;
  }
  .cast-row .col-number  { grid-area: num; padding-top: 6px; }
  .cast-row .col-photo   { grid-area: photo; }
  .cast-row .col-name    { grid-area: name; font-weight: 600; align-self: center; }
  .cast-row .col-role    { grid-area: role; color: var(--text-secondary); font-size: 13px; align-self: center; }
  .cast-row .col-contact { grid-area: contact; display: flex; flex-wrap: wrap; gap: 2px 14px; margin-top: 4px; }
  .cast-row .col-status  { grid-area: status; justify-self: end; }
  .cast-row .col-actions { grid-area: actions; justify-self: end; }
  .cast-number { font-size: 16px; }

  .crew-row {
    grid-template-columns: minmax(0, 1fr) auto;
    grid-template-areas:
      "name     actions"
      "position status"
      "contact  rate";
    gap: 2px 10px;
    padding: 12px;
  }
  .crew-row .col-name     { grid-area: name; font-weight: 600; align-self: center; }
  .crew-row .col-position { grid-area: position; font-weight: 400; font-size: 13px; color: var(--text-secondary); }
  .crew-row .col-contact  { grid-area: contact; display: flex; flex-wrap: wrap; gap: 2px 14px; margin-top: 4px; }
  .crew-row .col-rate     { grid-area: rate; justify-self: end; align-self: end; font-size: 12px; }
  .crew-row .col-status   { grid-area: status; justify-self: end; }
  .crew-row .col-actions  { grid-area: actions; justify-self: end; }

  .cast-row .contact-item,
  .crew-row .contact-item {
    font-size: 13px;
    line-height: 1.8;
  }

  .crew-department-block {
    margin-bottom: 10px;
  }

  /* ---------- Locations ---------- */

  .loc-row-head {
    display: none;
  }

  .loc-row {
    grid-template-columns: minmax(0, 1fr) auto;
    grid-template-areas:
      "name    actions"
      "contact status"
      "contact scenes";
    gap: 4px 10px;
    padding: 12px;
    align-items: start;
  }
  .loc-row .col-loc-name    { grid-area: name; }
  .loc-row .col-loc-contact { grid-area: contact; font-size: 13px; line-height: 1.7; }
  .loc-row .col-loc-status  { grid-area: status; justify-self: end; }
  .loc-row .col-loc-scenes  {
    grid-area: scenes;
    justify-self: end;
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 12px;
    color: var(--text-secondary);
  }
  .loc-row .col-loc-scenes::before {
    content: "Scenes";
  }
  .loc-row .col-loc-actions { grid-area: actions; justify-self: end; }
  .loc-name-address {
    margin-top: 2px;
    font-size: 13px;
  }

  /* Row actions in list cards: comfortable tap size */
  .cast-row .col-actions .btn,
  .crew-row .col-actions .btn,
  .loc-row .col-loc-actions .btn {
    width: 36px;
    height: 36px;
  }
  .cast-row .col-actions,
  .crew-row .col-actions,
  .loc-row .col-loc-actions {
    display: flex;
    gap: 4px;
  }

  /* ---------- Screenplay ---------- */

  /* Lina.mobile.fitPagesToWidth scales the sheets to the screen
     (Screenplay viewer and editor, Lined Script) */
  .sp-fit-width {
    width: 8.5in;
    align-items: flex-start;
  }
  .screenplay-viewer-canvas,
  #linedCanvas {
    overflow-x: hidden;
    padding: 8px;
  }

  /* Reading only on phones: editing needs a keyboard and a full page.
     ScreenplayEditor.enterEditMode also refuses on phones. */
  #editScreenplayBtn,
  #saveScreenplayBtn,
  #exitEditBtn,
  #spSaveStatus,
  #focusModeBtn,
  #lockScriptBtn,
  #emptyStateNewBtn,
  #emptyStateNewBtnInline {
    display: none !important;
  }

  /* ---------- Lined Script ---------- */

  /* View-only on phones (see _lsViewOnly in linedScript.js): no drawing
     tools, and the page scrolls under a finger instead of capturing it. */
  .lined-script-header .screenplay-header-center {
    display: none;
  }
  /* !important: linedDraw.js sets touch-action:none inline on each overlay */
  .lined-overlay {
    touch-action: pan-y pinch-zoom !important;
  }

  /* ---------- Shot list ---------- */

  .shot-scene-header {
    gap: 10px;
  }

  /* Phone layout has no Shot column to line up with: keep the compact number. */
  .shot-scene-header .scene-number-large {
    flex: 0 0 auto;
    width: auto;
    min-width: 62px;
  }

  .shot-table {
    padding: 4px 6px 8px;
  }

  .shot-row-head {
    display: none;
  }

  .shot-row {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    grid-template-areas:
      "num     subject subject actions"
      "setup   type    angle   lens"
      "move    move    notes   notes";
    gap: 4px;
    padding: 8px 2px;
  }
  .shot-row > :nth-child(1) { grid-area: num; }
  .shot-row > [data-field="setup"]    { grid-area: setup; }
  .shot-row > [data-field="type"]     { grid-area: type; }
  .shot-row > [data-field="angle"]    { grid-area: angle; }
  .shot-row > [data-field="lens"]     { grid-area: lens; }
  .shot-row > [data-field="movement"] { grid-area: move; }
  .shot-row > [data-field="subject"]  { grid-area: subject; font-weight: 600; }
  .shot-row > [data-field="notes"]    { grid-area: notes; }
  .shot-row > .shot-actions           { grid-area: actions; justify-self: end; }

  .shot-row input::placeholder {
    color: var(--text-secondary);
    opacity: 0.55;
  }
  .shot-row input[type="text"] {
    height: 34px;
    text-align: left;
  }
  .shot-row .shot-number-label {
    font-size: 15px;
    font-weight: 700;
    color: var(--accent);
  }
  .shot-row .shot-action {
    width: 34px;
    height: 34px;
  }

  /* ---------- Schedule ---------- */

  .schedule-header .screenplay-header-center .view-toggle {
    flex-shrink: 0;
  }

  /* Drag-and-drop doesn't work with touch; the board is for reading here */
  .stripboard-layout {
    flex-direction: column;
    gap: 12px;
  }
  .unscheduled-panel {
    width: 100%;
    min-width: 0;
    max-height: 132px;
  }
  .unscheduled-panel:has(.pool-empty) {
    display: none;
  }
  /* Same as schedule.css's 768px rules, so landscape phones match portrait */
  .scene-strip .strip-cast,
  .day-strip .day-complexity-cell {
    display: none;
  }
  .day-strip .day-title-cell {
    flex: 1;
    width: auto;
  }

  /* Strips carry their own labels; the column header has nothing to align to */
  .stripboard-header,
  .stripboard-cols {
    display: none;
  }

  /* ---------- Call sheets ---------- */

  .callsheet-canvas {
    padding: 10px;
  }

  .callsheet-layout {
    display: block;
    height: auto;
    min-height: 0;
  }

  /* List first; tapping a sheet swaps to its detail (js/sections/callsheet.js) */
  .callsheet-list-panel {
    width: 100%;
    min-width: 0;
    max-width: none;
    max-height: none;
  }
  .callsheet-list {
    display: flex;
    flex-direction: column;
    flex-wrap: nowrap;
    gap: 6px;
    padding: 8px;
  }
  .callsheet-list-item {
    min-width: 0;
    padding: 12px 14px;
  }

  .callsheet-editor-panel {
    display: none;
    border: none;
    background: transparent;
  }
  .callsheet-layout.cs-show-detail .callsheet-list-panel {
    display: none;
  }
  .callsheet-layout.cs-show-detail .callsheet-editor-panel {
    display: block;
    overflow: visible;
  }

  .cs-mobile-back {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    min-height: 40px;
    margin: 0 0 6px -4px;
    padding: 0 8px 0 4px;
    appearance: none;
    background: none;
    border: none;
    color: var(--accent);
    font: 600 14px var(--font-ui);
    cursor: pointer;
  }

  .cs-editor-header {
    flex-wrap: wrap;
    padding: 8px 0 10px;
    gap: 8px;
  }

  .callsheet-editor {
    padding: 0;
  }

  .cs-production-header-top {
    flex-wrap: wrap;
    row-gap: 10px;
  }
  .cs-production-header-info {
    flex: 1 1 0;
    min-width: 0;
  }
  .cs-crew-call-display {
    order: 3;
    flex: 1 1 100%;
    display: flex;
    align-items: baseline;
    gap: 8px;
    margin: 0;
    padding: 10px 0 0;
    border-left: none !important;
    border-top: 1px solid var(--border);
    text-align: left;
  }

  /* Scene and cast tables stay tables; they scroll inside their card */
  #scenesTableContainer,
  .cs-section-body-grid {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }
  .cs-table {
    min-width: 640px;
  }
  .cs-readonly-value a.contact-link {
    color: var(--accent);
  }

  .cs-location-map {
    min-height: 180px;
  }

  /* ---------- Project Manager ---------- */

  .pm-project-card {
    flex-wrap: wrap;
  }
  .pm-project-info {
    flex: 1 1 100%;
  }
  .pm-project-actions {
    flex-wrap: wrap;
  }
  .pm-project-actions .btn {
    min-height: 36px;
  }
  .pm-project-actions .btn-icon-sm {
    min-width: 36px;
  }

  /* ---------- Production overview ---------- */

  .project-canvas {
    padding: 10px;
  }
}

/* Very narrow phones */
@media (max-width: 380px) {
  .top-bar .project-title {
    font-size: 0;
  }
}