/*
 * responsive.css
 * ==============
 * Mobile / small-window adaptations. Loaded LAST (after tokens/app/views/
 * overlays) so its breakpoint rules override the desktop-first defaults.
 *
 * Breakpoints: <=1024 tablet · <=680 phone (main layer) · <=420 small phone.
 * Pure layout reflow — the Phase-Bands design, tokens, and RTL/LTR logical
 * properties all carry over unchanged.
 *
 * Phase 1 (this file so far): global touch hygiene + header/toolbar reflow.
 * Later phases (overlays as sheets, calendar grids, pages) get appended here.
 */

body { -webkit-tap-highlight-color: transparent; }

/* ====================================================================== */
/* Tablet (<=1024px)                                                      */
/* ====================================================================== */
@media (max-width: 1024px) {
  .app-header { gap: 12px; padding: 11px 16px; }
  .toolbar { gap: 12px; padding: 9px 16px; }
  /* The status legend is the most expendable toolbar item — drop it first. */
  .legend { display: none; }
}

/* ====================================================================== */
/* Phone (<=680px) — the main mobile layer                                */
/* ====================================================================== */
@media (max-width: 680px) {
  /* 16px inputs stop iOS Safari from auto-zooming when a field gets focus.
     Forced (!important) because per-component rules are more specific. */
  input, select, textarea { font-size: 16px !important; }

  /* Header → row 1: brand … bell + identity; row 2: full-width search.
     The flex:1 .header-spacer keeps brand and the bell/identity apart on row 1,
     and the search (order:99, full basis) wraps onto its own line below. */
  .app-header { flex-wrap: wrap; gap: 12px 10px; padding: 13px 14px; }
  /* Greeting + next shift gets its own full-width row (between the brand row and
     the search row), laid out horizontally so it stays compact. */
  .greet {
    order: 50; flex-basis: 100%;
    flex-direction: row; flex-wrap: wrap; align-items: baseline; gap: 2px 8px;
    border-inline-start: none; padding-inline: 0; margin-inline-start: 0;
  }
  .search { order: 99; flex-basis: 100%; max-width: none; }

  /* Toolbar wraps; drop the flexible spacer so items flow rather than getting
     pushed apart, and let actions fall to the next line. */
  .toolbar { flex-wrap: wrap; gap: 13px 10px; padding: 13px 14px; }
  .toolbar-spacer { display: none; }
  .range { min-width: 0; }
  .btn-new { padding: 8px 12px; }
  .summary .cell { padding: 0 10px; }
}

/* ====================================================================== */
/* Phase 2 — overlays become bottom sheets on phones                      */
/* ====================================================================== */
/* Slide up from the bottom edge instead of growing from center. */
@keyframes rsheet { from { transform: translateY(100%); } to { transform: translateY(0); } }

@media (max-width: 680px) {
  /* Dock the dialog to the bottom of the screen, edge-to-edge. */
  .overlay-modal,
  .overlay-inbox,
  .overlay-detail,
  .overlay-day { align-items: flex-end; padding: 0; }

  /* Both dialog kinds: full-width sheet, rounded top only, slide up. */
  .drawer,
  .modal-box {
    max-width: 100%;
    max-height: 92vh;
    border-radius: 18px 18px 0 0;
    animation: rsheet .26s cubic-bezier(.2, .8, .2, 1);
  }
  /* Beat the per-overlay fixed widths (.overlay-* .drawer = same specificity,
     so source order wins since responsive.css loads last). */
  .overlay-inbox .drawer,
  .overlay-detail .drawer,
  .overlay-day .drawer { width: 100%; }
  .modal-box { width: 100%; }

  /* The create / swap-confirm box has no internal scroll on desktop; give it
     one so a tall sheet scrolls its body while the footer buttons stay pinned. */
  .modal-box { display: flex; flex-direction: column; overflow: hidden; }
  .modal-body { flex: 1; min-height: 0; overflow: auto; }
}

/* The phone day-strip selector is hidden on desktop (shown in the phone layer). */
.wk-daystrip { display: none; }

/* ====================================================================== */
/* Phase 3a — Week one-day agenda; Team swipeable                          */
/* ====================================================================== */
@media (max-width: 680px) {
  /* Smooth horizontal swipe (Team); keep an edge-swipe from triggering back. */
  .view-area { overscroll-behavior-x: contain; -webkit-overflow-scrolling: touch; }

  /* ---- Week: ONE-DAY AGENDA ----
     The wide 7-day grid fights mobile/RTL sticky bugs, so on phones the Week
     shows one day at a time: hide the desktop header row, show the day-strip
     selector, and stack each phase band vertically (full-width gradient rail +
     the selected day's cell). week-mobile.js sets .wk-grid[data-active]; the CSS
     below keys off it. No horizontal scroll, no frozen columns. */
  .wk-scroll { padding: 0 12px 24px; overflow-x: hidden; }
  .wk-grid { min-width: 0; gap: 12px; }
  .wk-headrow { display: none; }

  .wk-daystrip {
    display: flex; gap: 6px; overflow-x: auto;
    padding: 10px 0; position: sticky; top: 0; z-index: 5; background: var(--bg);
    -webkit-overflow-scrolling: touch;
  }
  .wk-day-btn {
    flex: none; min-width: 54px;
    display: flex; flex-direction: column; align-items: center; gap: 1px;
    padding: 7px 10px; border-radius: 10px;
    border: 1px solid var(--line); background: var(--surface);
    font-family: inherit; color: var(--ink); cursor: pointer;
  }
  .wk-day-btn-name { font-size: 12px; font-weight: 800; }
  .wk-day-btn-date { font-size: 10.5px; font-weight: 600; color: var(--muted); white-space: nowrap; }
  .wk-day-btn.today:not(.active) { border-color: var(--accent); }
  .wk-day-btn.active { background: var(--accent); border-color: var(--accent); color: #fff; }
  .wk-day-btn.active .wk-day-btn-date { color: rgba(255, 255, 255, .85); }
  .wk-day-btn.past { opacity: .55; }

  /* Each band stacks vertically: full-width gradient rail, then the active cell. */
  .wk-band { display: flex; flex-direction: column; }

  /* Show only the active day's cell in each band (defaults to day 0 without JS). */
  .wk-cell { display: none; border-inline-end: none; padding: 12px; min-height: 0; }
  .wk-grid:not([data-active]) .wk-cell[data-day="0"],
  .wk-grid[data-active="0"] .wk-cell[data-day="0"],
  .wk-grid[data-active="1"] .wk-cell[data-day="1"],
  .wk-grid[data-active="2"] .wk-cell[data-day="2"],
  .wk-grid[data-active="3"] .wk-cell[data-day="3"],
  .wk-grid[data-active="4"] .wk-cell[data-day="4"],
  .wk-grid[data-active="5"] .wk-cell[data-day="5"],
  .wk-grid[data-active="6"] .wk-cell[data-day="6"] { display: flex; }

  /* ---- Team: keep its existing frozen worker column, just size it down ---- */
  .team-wrap { padding-inline: 0; }
  .team-card { min-width: 0; }
  .team-corner,
  .team-name-cell { width: 132px; }
  .team-day-head,
  .team-cell { min-width: 104px; }
}

/* ====================================================================== */
/* Phase 4 — standalone pages & forms                                     */
/* ====================================================================== */
@media (max-width: 680px) {
  /* Settings: tighter gutters; phase blocks already stack (keep the time row
     on one line by trimming its gap). */
  .settings-wrap { padding: 18px 14px 50px; }
  .settings-card { padding: 16px 14px; }
  .phase-line { gap: 16px; }

  /* Month: compact 7-col grid — small cells, a dot + count instead of the full
     phase label (the cells are ~46px wide on a phone). */
  .month-wrap { padding: 12px 8px 24px; }
  .month-names { gap: 3px; }
  .month-week { gap: 3px; margin-bottom: 3px; }
  .month-name { font-size: 11px; }
  .month-cell { min-height: 66px; padding: 5px 4px; border-radius: 8px; }
  .month-cell.empty { min-height: 66px; }
  .mc-date { font-size: 12.5px; }
  .mc-total { display: none; }
  .mc-body { gap: 2px; margin-top: 3px; }
  .mc-pill { padding: 1px 4px; font-size: 9px; gap: 3px; }
  .mc-pill-label { display: none; }          /* keep just the dot + count */
  .mc-mine, .mc-add { font-size: 9px; }

  /* Stats: tighter gutters (the charts already flex to width). */
  .stats-wrap { padding: 16px 14px 28px; }
  .hero-card { min-width: 120px; }
  .phase-bar-row { grid-template-columns: 74px 1fr auto; }

  /* Roster: tighter. */
  .roster-wrap { padding: 16px 12px 40px; }
  .roster-stats { gap: 14px; }

  /* Auth card: a touch less padding on small screens. */
  .login-card { padding: 26px 20px; }
}

/* ====================================================================== */
/* Phase 5 — polish (tap targets, edge cases)                             */
/* ====================================================================== */
@media (max-width: 680px) {
  /* Comfortable tap targets for small icon controls. */
  .nav-arrow { width: 34px; height: 34px; }
  .icon-btn { width: 38px; height: 38px; }
  /* Swap pick-mode banner wraps rather than squashing its two halves. */
  .pick-banner { flex-wrap: wrap; }
  /* Owner/admin portal gutters. */
  .admin-wrap { padding: 18px 14px 50px; }
}

/* ====================================================================== */
/* Small phone (<=420px) — fine-tuning                                    */
/* ====================================================================== */
@media (max-width: 420px) {
  .app-header { gap: 11px 8px; padding: 12px 11px; }
  .toolbar { gap: 11px 8px; padding: 12px 11px; }
  .brand-name { font-size: 16px; }
  .user-btn .meta .role { display: none; }   /* keep the name, drop the role line */
  .tab { padding: 6px 11px; font-size: 12.5px; }
  .nav-today { padding: 5px 8px; }
  .month-cell { min-height: 58px; }
  .mc-date { font-size: 11.5px; }
  .roster-stats { gap: 10px; }
}

/* ====================================================================== */
/* Laptop widths — let the toolbar wrap instead of running off the edge   */
/* ====================================================================== */
/* The toolbar is a single row. With the board tab (and, for a worker, the
   weekly-minimum hint) it no longer fits at ~1024-1280px, and a non-wrapping
   row simply clipped whatever came last. Wrapping keeps everything reachable. */
@media (max-width: 1280px) {
  .toolbar { flex-wrap: wrap; row-gap: 10px; }
}

/* ====================================================================== */
/* Board tab + coverage — phone tuning                                     */
/* ====================================================================== */
@media (max-width: 680px) {
  /* One more tab than before: let the tab strip scroll sideways rather than
     overflow the toolbar. */
  .tabs { max-width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch; }
  .tab { flex: none; white-space: nowrap; }
  .board-wrap { padding: 16px 14px 32px; }
  .mc-short { font-size: 9px; padding: 2px 4px; }
}

@media (max-width: 680px) {
  .callout-bar { padding: 10px 14px; }
  .callout-card form { flex: 1; }
  .callout-card .btn-sm { width: 100%; }
}