/* ============================================================
   WAJANG — MOBILE FOUNDATION
   Loaded after wajang.css / productions.css / scout.css so it
   can correct them. Written against the EXISTING markup and
   class names — no HTML restructuring required, which means it
   improves every page that uses includes/header.php at once
   instead of needing 200 individual file edits.

   Breakpoint policy (matches what the codebase already uses,
   rather than inventing a new scale):
     900px — tablet / small laptop
     768px — large phone landscape
     600px — phone
     430px — small phone
   ============================================================ */

/* ── 0. Global hygiene ───────────────────────────────────────
   Horizontal scroll is the single most common mobile defect:
   one over-wide element drags the whole page sideways and
   every subsequent tap lands in the wrong place. */
@media (max-width: 900px) {
  html, body {
    max-width: 100%;
    overflow-x: hidden;
    /* Stop iOS inflating text in landscape */
    -webkit-text-size-adjust: 100%;
  }

  /* Media should never exceed its container */
  img, svg, video, canvas, iframe, table {
    max-width: 100%;
  }
  img, svg, video { height: auto; }

  /* Long unbroken strings (URLs, emails, file names, script
     slugs) are a frequent cause of sideways drag */
  body {
    overflow-wrap: break-word;
    word-wrap: break-word;
  }
}

/* ── 1. Safe-area insets (notched / rounded phones) ──────────
   header.php already sets viewport-fit=cover, which is what
   makes these variables meaningful — without the padding below
   content sits under the notch and home indicator. */
@media (max-width: 900px) {
  body {
    padding-left: env(safe-area-inset-left);
    padding-right: env(safe-area-inset-right);
  }
  .nav {
    padding-top: env(safe-area-inset-top);
  }
  /* Anything pinned to the bottom must clear the home indicator */
  .prod-mobile-bar,
  .mobile-action-bar,
  .modal-footer,
  .prod-modal-footer {
    padding-bottom: calc(12px + env(safe-area-inset-bottom));
  }
}

/* ── 2. Touch targets ────────────────────────────────────────
   Apple's HIG and Android's Material both put the practical
   floor at ~44px. Wajang's .btn-sm and icon-only buttons are
   well under that, which is why fiddly taps miss. min-height
   (not height) so nothing already taller gets squashed. */
@media (max-width: 900px) {
  .btn,
  button,
  input[type="submit"],
  input[type="button"],
  .nav-links a,
  .prod-nav-top,
  .prod-nav-drop-item,
  .feat-link,
  select {
    min-height: 44px;
  }

  /* Icon-only and tiny buttons need width too, not just height */
  .btn-sm,
  .person-btn,
  .checklist-action-btn,
  .modal-close,
  .prod-modal-close {
    min-height: 44px;
    min-width: 44px;
  }

  /* .btn-sm is often set to a tiny font inline; keep it legible
     while still visually secondary */
  .btn-sm { font-size: 0.72rem; }

  /* Bare ✕ / delete buttons rendered as unstyled <button> with
     inline styles — give them a real tap area */
  button[onclick*="delete"],
  button[onclick*="remove"],
  button[onclick*="revoke"] {
    min-height: 44px;
    min-width: 44px;
  }

  /* Spacing between adjacent controls so neighbours aren't
     mis-tapped */
  .prod-header-inner .btn + .btn,
  .prod-section-head .btn + .btn {
    margin-left: 8px;
  }
}

/* ── 3. Forms ────────────────────────────────────────────────
   The 16px rule is not cosmetic: iOS Safari force-zooms the
   viewport on focus for any input under 16px, which then
   leaves the page zoomed and horizontally scrolled. This is
   the most-reported "the site feels broken on my iPhone"
   cause and it is fixed purely by font-size. */
@media (max-width: 900px) {
  input[type="text"],
  input[type="email"],
  input[type="password"],
  input[type="number"],
  input[type="tel"],
  input[type="url"],
  input[type="search"],
  input[type="date"],
  input[type="time"],
  input[type="datetime-local"],
  select,
  textarea {
    font-size: 16px !important;
    max-width: 100%;
  }

  /* Comfortable tap/typing height */
  input, select, textarea {
    padding: 11px 12px;
  }

  /* Multi-column form grids collapse to one column.
     productions.css does this at 768 for .prod-form-grid;
     extended here to the other grid patterns in use. */
  .prod-form-grid,
  .prod-info-grid,
  .form-grid,
  .settings-grid,
  .scout-settings-form .form-row-2col {
    grid-template-columns: 1fr !important;
  }

  .prod-form-row,
  .form-row {
    margin-bottom: 14px;
  }

  /* Labels above fields, never beside, on narrow screens */
  .prod-form-row label,
  .form-row label {
    display: block;
    margin-bottom: 6px;
  }
}

/* ── 4. Tables → cards ───────────────────────────────────────
   20 files contain tables (budget, crew, cast, schedule,
   call sheets, team, DOOD, permissions...). A 6-column table
   cannot be read on a 390px screen.

   Strategy: mobile-enhance.js copies each column's <th> text
   onto every matching <td> as data-label, then this CSS
   restacks each row as a labelled card. No HTML edits needed
   in any of those 20 files.

   Tables that genuinely need their grid shape (call sheets,
   DOOD, print documents) can opt out with class="table-keep",
   and get momentum-scrolling instead. */
@media (max-width: 768px) {

  /* -- Opt-out path: preserve the grid, scroll it --
     mobile-enhance.js wraps wide tables in .table-scroll-mobile.
     Older pages may already use a non-table .table-keep wrapper,
     so both forms are supported. */
  .table-scroll-mobile,
  .table-keep:not(table) {
    display: block;
    width: 100%;
    max-width: 100%;
    overflow-x: auto;
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior-x: contain;
    border-radius: 8px;
    /* Hint that there is more to the right */
    background:
      linear-gradient(to right, var(--raised, #150e26) 30%, rgba(0,0,0,0)),
      linear-gradient(to left, var(--raised, #150e26) 30%, rgba(0,0,0,0)) 100% 0;
    background-repeat: no-repeat;
    background-size: 24px 100%;
    background-attachment: local, local;
  }
  .table-scroll-mobile > table,
  .table-keep:not(table) > table,
  table.table-keep {
    display: table;
    width: 100%;
    max-width: none;
    min-width: var(--mobile-table-min-width, 640px);
    table-layout: auto;
  }
  table.table-keep th,
  table.table-keep td {
    white-space: normal;
    overflow-wrap: break-word;
    word-break: normal;
  }

  /* -- Default path: reflow to cards -- */
  table.mobile-cards,
  .mobile-cards table {
    display: block;
    width: 100%;
  }
  table.mobile-cards thead,
  .mobile-cards table thead {
    /* Visually hidden, still read by screen readers */
    position: absolute;
    width: 1px; height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
  }
  table.mobile-cards tbody,
  table.mobile-cards tr,
  table.mobile-cards td,
  .mobile-cards table tbody,
  .mobile-cards table tr,
  .mobile-cards table td {
    display: block;
    width: auto;
  }

  table.mobile-cards tr,
  .mobile-cards table tr {
    margin-bottom: 12px;
    padding: 12px 14px;
    border: 1px solid rgba(201,138,32,0.18);
    border-radius: 8px;
    background: rgba(255,255,255,0.02);
  }

  table.mobile-cards td,
  .mobile-cards table td {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 14px;
    min-width: 0;
    padding: 7px 0;
    border: none;
    border-bottom: 1px solid rgba(201,138,32,0.08);
    text-align: right;
    overflow-wrap: break-word;
    word-break: normal;
  }
  table.mobile-cards td > *,
  .mobile-cards table td > * {
    min-width: 0;
    max-width: 100%;
  }
  table.mobile-cards td[data-label="Email"],
  .mobile-cards table td[data-label="Email"] {
    overflow-wrap: anywhere;
  }
  table.mobile-cards td:last-child,
  .mobile-cards table td:last-child {
    border-bottom: none;
  }

  /* The label injected by mobile-enhance.js */
  table.mobile-cards td::before,
  .mobile-cards table td::before {
    content: attr(data-label);
    flex: 0 0 42%;
    text-align: left;
    font-size: 0.68rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--text-dim, #8b7f9c);
    font-weight: 600;
  }

  /* Cells with no label (action buttons) span the full width */
  table.mobile-cards td[data-label=""],
  table.mobile-cards td:not([data-label]),
  .mobile-cards table td[data-label=""] {
    justify-content: flex-start;
    text-align: left;
  }
  table.mobile-cards td[data-label=""]::before,
  .mobile-cards table td:not([data-label])::before {
    display: none;
  }

  /* Empty cells collapse rather than leaving a bare label */
  table.mobile-cards td.is-empty,
  .mobile-cards table td.is-empty {
    display: none;
  }
}

/* Dashboard/room layouts containing tables must collapse before the
   table itself is reflowed. Otherwise the card conversion works but is
   trapped inside a half-width desktop column. */
@media (max-width: 900px) {
  .admin-dashboard-grid,
  .room-main-grid {
    grid-template-columns: minmax(0, 1fr) !important;
    gap: 16px !important;
  }
  .admin-dashboard-grid > *,
  .room-main-grid > * {
    min-width: 0;
    width: 100%;
    max-width: 100%;
  }
}

@media (max-width: 430px) {
  table.mobile-cards td,
  .mobile-cards table td {
    gap: 10px;
  }
  table.mobile-cards td::before,
  .mobile-cards table td::before {
    flex-basis: 34%;
  }
}

/* ── 5. Production tab bar ───────────────────────────────────
   The dropdown nav is the main way around a production and it
   has two touch problems: the row overflows on a phone, and
   dropdowns opened on :hover are unreliable on touch (a tap
   fires hover then immediately loses it). mobile-enhance.js
   converts them to click-toggle; this makes the bar itself
   usable. */
@media (max-width: 900px) {
  .prod-nav,
  .prod-nav-dropdowns {
    display: flex;
    flex-wrap: nowrap;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    gap: 2px;
    padding-bottom: 2px;
  }
  .prod-nav::-webkit-scrollbar,
  .prod-nav-dropdowns::-webkit-scrollbar { display: none; }

  .prod-nav-top {
    white-space: nowrap;
    flex: 0 0 auto;
    padding: 11px 13px;
  }

  /* Dropdown panels: anchor to the viewport edge rather than
     the button, so a panel opened from the far right of the
     scrolled bar doesn't render off-screen */
  .prod-nav-dropdown {
    position: fixed;
    left: 8px;
    right: 8px;
    width: auto;
    min-width: 0;
    max-height: 60vh;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    z-index: 2000;
  }
  .prod-nav-drop-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 13px 14px;
  }
}

/* ── 6. Main nav ─────────────────────────────────────────────
   The drawer itself is ALREADY fully implemented in wajang.css
   (.nav-links.mobile-open) and wajang.js (initMobileNav), and
   there is already an .app-bottom-nav tab bar with safe-area
   padding. None of that is redefined here — a second drawer
   using different class names would fight the working one.

   Only two additions, neither of which the existing rules
   cover: the toggle button's tap target, and locking
   background scroll while the drawer is open (wajang.js sets
   .nav-menu-open on <body> but nothing acts on it, so the page
   behind the drawer still scrolls under your finger). */
@media (max-width: 900px) {
  .nav-toggle {
    min-height: 44px;
    min-width: 44px;
    align-items: center;
    justify-content: center;
  }

  body.nav-menu-open {
    overflow: hidden;
    touch-action: none;
  }

  /* Drawer links: comfortable tap height. Scoped to the open
     drawer so the desktop inline nav is untouched. */
  .nav-links.mobile-open a {
    min-height: 46px;
    display: flex;
    align-items: center;
  }
}

/* ── 7. Modals ───────────────────────────────────────────────
   wajang.css already converts .modal / .modal-box to a bottom
   sheet at 600px (flex-end overlay, 90dvh, rounded top,
   slideUp). Not repeated here.

   What it doesn't do, and what's added below:
   a) the sheet is a plain block, so a long form scrolls the
      whole sheet including its header — and with the keyboard
      up the action buttons can end up unreachable. Making it
      a flex column with a scrollable body fixes that.
   b) .prod-modal-* (the production pages' own modal markup)
      isn't covered by those rules at all.
   c) footer buttons sit in a row and get cramped. */
@media (max-width: 600px) {
  /* (a) internal scroll structure */
  .modal-box,
  .prod-modal,
  .prod-modal-box {
    display: flex;
    flex-direction: column;
  }
  .modal-body,
  .prod-modal-body {
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    flex: 1 1 auto;
    min-height: 0; /* required for flex children to scroll */
  }
  .modal-header,
  .prod-modal-header,
  .modal-footer,
  .prod-modal-footer {
    flex: 0 0 auto;
  }

  /* (b) production modals get the same bottom-sheet treatment
         wajang.css gives the main ones */
  .prod-modal-overlay {
    align-items: flex-end;
    padding: 0;
  }
  .prod-modal,
  .prod-modal-box {
    width: 100%;
    max-width: 100%;
    max-height: 90dvh;
    margin: 0;
    border-radius: var(--radius-lg, 12px) var(--radius-lg, 12px) 0 0;
  }

  /* (c) stacked full-width actions, primary nearest the thumb */
  .modal-footer,
  .prod-modal-footer {
    display: flex;
    flex-direction: column-reverse;
    gap: 8px;
  }
  .modal-footer .btn,
  .prod-modal-footer .btn {
    width: 100%;
  }
}

/* ── 8. Layout & cards ───────────────────────────────────────*/
@media (max-width: 900px) {
  .prod-shell,
  .prod-body,
  .scout-shell {
    padding-left: 14px;
    padding-right: 14px;
  }

  /* Any fixed multi-column grid → single column */
  .prod-card-grid,
  .feat-grid,
  .card-grid,
  .scout-card-grid,
  .tr-cap-grid {
    grid-template-columns: 1fr !important;
  }

  /* Stat strips stay multi-column but shrink to fit */
  .prod-stat-row {
    grid-template-columns: repeat(2, 1fr) !important;
  }
  .prod-stat-row .prod-stat-num { font-size: 1.5rem; }

  /* Section headers: title and action button stack instead of
     squeezing */
  .prod-section-head {
    flex-wrap: wrap;
    gap: 8px;
  }
}

@media (max-width: 430px) {
  .prod-stat-row {
    grid-template-columns: repeat(2, 1fr) !important;
  }
  .prod-title { font-size: 1.4rem; }
}

/* ── 9. Typography ───────────────────────────────────────────
   The display font is heavily letter-spaced, which reads well
   at desktop sizes and turns into gaps and awkward wraps on a
   phone. Tighten as the screen narrows. */
@media (max-width: 600px) {
  body {
    font-size: 15px;
    line-height: 1.6;
  }
  h1, .prod-title, .scout-page-title, .tr-title {
    letter-spacing: 0.02em;
    line-height: 1.25;
  }
  h1 { font-size: 1.6rem; }
  h2 { font-size: 1.3rem; }
  h3 { font-size: 1.1rem; }

  /* Uppercase micro-labels become unreadable when both tiny
     and widely spaced */
  .prod-section-title,
  .scout-settings-head,
  .tr-panel-head {
    letter-spacing: 0.1em;
    font-size: 0.66rem;
  }
}

/* ── 11. Contrast fixes for mobile screens ───────────────────
   Several CSS variables are calibrated for desktop monitors at
   typical brightness (~200 nits). On a phone screen in daylight,
   or with auto-brightness at medium, the darker golds and muted
   text colours drop below readable contrast.

   Root causes:
   --gold-dim  now fixed sitewide at the :root level in wajang.css
               (was #5c3c04 → near-invisible; see wajang.css for detail).
               No mobile-only override needed for it any more — do NOT
               reintroduce one here, or it will shadow the real fix with
               a dimmer value on small screens.
   --gold-mid  #a06a08 → form labels, secondary actions
   --text-dim  #7a6858 → hints, meta text, secondary labels
   --text-ghost rgba(...,0.38) → placeholder text

   These overrides apply at ≤768px only — desktop is untouched. */
@media (max-width: 768px) {
  :root {
    /* Form labels and interactive gold elements */
    --gold-mid:  #c98a20;   /* was #a06a08 — now clearly readable */

    /* Body text tiers */
    --text-dim:  #a89070;   /* was #7a6858 */
    --text-mid:  #c4a882;   /* was #a89070 */
    --text-warm: #e0c8a8;   /* was #d4b896 */

    /* Placeholder / ghost text */
    --text-ghost: rgba(245,236,216,0.62); /* was 0.38–0.40 */
  }

  /* Production form labels (settings, crew, budget etc) */
  .prod-form-row label,
  .prod-form-label {
    color: var(--gold-mid) !important;
    font-size: 0.7rem !important;
    letter-spacing: 0.1em !important;
  }

  /* Placeholder text in production form inputs */
  .prod-form-row input::placeholder,
  .prod-form-row textarea::placeholder {
    color: rgba(245,236,216,0.55) !important;
  }

  /* General form labels */
  .form-label {
    color: var(--gold-mid) !important;
    font-size: 0.72rem !important;
    letter-spacing: 0.12em !important;
  }
  .form-hint,
  .form-note,
  .help-text {
    font-size: 0.85rem;
    color: var(--text-mid);
  }
  .form-control::placeholder {
    color: var(--text-ghost) !important;
  }

  /* Section headers inside production pages */
  .prod-section-title,
  .prod-settings-head,
  .scout-settings-head,
  .scout-mode-tag,
  .scout-contact-role {
    color: var(--gold-mid) !important;
  }

  /* Modal backdrop: less opaque so users see where they are */
  .modal-overlay {
    background: rgba(2,1,8,0.78); /* was 0.88 */
  }

  /* Input borders were nearly invisible */
  .prod-form-row input,
  .prod-form-row select,
  .prod-form-row textarea {
    border-color: rgba(140,92,16,0.55) !important;
  }
  .form-control {
    border-color: rgba(140,92,16,0.55);
  }
}
.mobile-only { display: none; }
@media (max-width: 768px) {
  .mobile-only { display: block; }
  .desktop-only { display: none !important; }
}

/* Respect reduced-motion preferences */
@media (prefers-reduced-motion: reduce) {
  .nav-links,
  .nav-scrim {
    transition: none;
  }
}