/**
 * Employee Roster — shared responsive overlay
 * ---------------------------------------------------------------------------
 * Loaded in BOTH contexts, after the base stylesheet in each:
 *
 *   admin    admin/css/admin.css   (EMPR_Admin::assets)
 *   frontend public/css/app.css    (EMPR_Public::maybe_assets)
 *
 * Those two base files are a forked copy of one shared core and have drifted,
 * but they still share the wpr-* class names — so every rule here serves both.
 * They also each carry their own 720px/480px blocks; this file loads last, so
 * it can correct them at equal specificity without !important.
 *
 * Two hard rules for anything added here:
 *
 *   1. Only ever add rules INSIDE a media query. Desktop must stay untouched —
 *      that is what makes this overlay safe to layer over working CSS.
 *   2. Write each rule once. Selectors for classes that only exist in one of
 *      the two contexts (.wpr-avail-grid2 is admin-only, .wpr-avail-row is
 *      frontend-only) are simply inert in the other, which is fine.
 *
 * Tiers: 1440/1200/1024 laptop→tablet · 768 large phone · 600 table card-stack
 *        · 480 phone.
 *
 * The laptop/tablet tiers below are floored at min-width:769px on purpose. This
 * file loads last, so an unfloored max-width:1440px rule would also win at
 * 400px and silently undo the tighter phone sizing both base files already set
 * in their own 720px/600px blocks.
 *
 * NOTE: this file must not live under the top-level assets/ directory — the
 * packaging step removes that folder, so it would 404 in the shipped plugin.
 */

/* ══════════════════ SHIFT CALENDAR — LAPTOP (769–1440px) ══════════════════ */
/*
 * Week view is the widest thing the plugin renders: the member column plus one
 * column per day. At the base minimums that is 176 + 7×140 = 1156px, which is
 * wider than the content area of a 1280 or 1366 laptop once the WP admin menu
 * is expanded — so .wpr-roster-wrap starts scrolling sideways on the most
 * common screen the roster is actually used on.
 *
 * Rather than step the minimums down per breakpoint, tie them to the viewport
 * so the fit is continuous. The 380px reserve (admin menu + page padding +
 * member column) is deliberately generous, and costs nothing when it
 * over-reserves: .wpr-roster-table is width:100%, so whatever room is left over
 * is redistributed across the columns anyway. min-width here is only a floor.
 */
@media (min-width: 769px) and (max-width: 1440px) {
  .wpr-roster-th,
  .wpr-roster-cell        { min-width: clamp(88px, calc((100vw - 380px) / 7), 140px); }
  .wpr-roster-th--member,
  .wpr-roster-member-cell { width:     clamp(120px, 12vw, 176px);
                            min-width: clamp(120px, 12vw, 176px); }
}

/* ══════════════════ SHIFT CALENDAR — SMALL LAPTOP (769–1200px) ══════════════════ */
@media (min-width: 769px) and (max-width: 1200px) {
  /* Once the day columns are down near 100px the base .75rem cell padding is a
     third of the column. */
  .wpr-roster-th,
  .wpr-roster-cell   { padding-left: .45rem; padding-right: .45rem; }
  .wpr-roster-shift  { padding: .3rem .4rem; }

  /* The base rule ellipsises shift titles on one line. That is right for a wide
     column and useless in a narrow one, where nearly every title becomes
     "Kitchen ass…" — wrap to a second line instead. */
  .wpr-rshift__title { white-space: normal; overflow-wrap: anywhere; }

  /* Day view: narrower cards so two still fit side by side. */
  .wpr-roster-table--day .wpr-roster-cell { grid-template-columns: repeat(auto-fill, minmax(min(180px, 100%), 1fr)); }
}

/* ══════════════════ TABLET (≤ 1024px) ══════════════════ */
@media (max-width: 1024px) {
  /* Two side-by-side analytics panels get too narrow to read before the
     720px block would otherwise rescue them. */
  .wpr-analytics-grid { grid-template-columns: 1fr; }
}

/* ══════════════════ SHIFT CALENDAR — TABLET (769–1024px) ══════════════════ */
@media (min-width: 769px) and (max-width: 1024px) {
  /* Month view: 7 columns behind a 700px floor. That floor is wider than the
     content area of a portrait tablet whenever something else is sharing the
     width (the WP admin menu expanded, or a theme sidebar on the shortcode
     page), and the grid scrolls sideways inside .wpr-calendar__scroll. 620px
     still leaves ~88px per day, which holds a legible pill. */
  .wpr-calendar__head,
  .wpr-calendar__grid { min-width: 620px; }
  .wpr-cal-cell       { min-height: 92px; padding: .3rem; }
  .wpr-cal-dow        { padding: .45rem .25rem; font-size: var(--wpr-text-xs); }
  .wpr-cal-cell__num  { width: 20px; height: 20px; font-size: var(--wpr-text-xs); }

  /* Day view: one card per row is the honest layout at this width. */
  .wpr-roster-table--day .wpr-roster-cell { grid-template-columns: repeat(auto-fill, minmax(min(150px, 100%), 1fr)); }

  /* Location is the least load-bearing line in a week-view block and the first
     one to wrap badly. Titles and times stay. */
  .wpr-roster-table--week .wpr-rshift__loc { display: none; }
}

/* ══════════════════ SHORT LAPTOP SCREENS ══════════════════ */
/*
 * A 1366×768 laptop gives the browser ~600px of viewport height. Six month rows
 * at the base 108px minimum is 648px of grid before the admin bar, the plugin
 * toolbar or the day-name header — so the month never fits on one screen on the
 * machine most of these installs run on. Trimming the row minimum keeps two
 * pills visible per day and brings the whole month back into view.
 */
@media (min-width: 1025px) and (max-height: 820px) {
  .wpr-cal-cell { min-height: 88px; }
}

/* ══════════════════ LARGE PHONE (≤ 768px) ══════════════════ */
@media (max-width: 768px) {

  /* ── iOS zoom-on-focus ──────────────────────────────────
     Mobile Safari zooms the viewport whenever a focused field is under 16px,
     and the base type scale puts inputs at 14px. This is the single rule that
     stops the whole plugin jumping around on every tap into a field. Covers the
     SPA (.wpr-input), the PHP settings page (WP form-table controls) and the
     setup wizard. */
  .wpr-input,
  select.wpr-input,
  textarea.wpr-input,
  .emr-settings-wrap input:not([type='checkbox']):not([type='radio']),
  .emr-settings-wrap select,
  .emr-settings-wrap textarea,
  .wpr-wizard input:not([type='checkbox']):not([type='radio']),
  .wpr-wizard select,
  .wpr-wizard textarea { font-size: 16px; }

  /* ── Touch targets ──────────────────────────────────────
     Apple/Google both put the comfortable minimum at ~44px. The row-action
     buttons in tables (.wpr-btn--xs, ~22px tall) are the most-tapped controls
     in the app and were the smallest. */
  .wpr-btn,
  .wpr-btn--sm,
  .wpr-btn--xs { min-height: 44px; }
  .wpr-btn--xs { padding: .35rem .7rem; font-size: var(--wpr-text-13); }
  .wpr-input,
  select.wpr-input { min-height: 44px; }
  .wpr-nav-item    { min-height: 44px; display: flex; align-items: center; }
  .wpr-modal__x    { min-width: 44px; min-height: 44px; }
  .wpr-vt-btn      { min-height: 40px; }
  /* Checkboxes in table headers/rows are otherwise ~13px. */
  .wpr-table input[type='checkbox'] { width: 20px; height: 20px; }

  /* ── Shell ──────────────────────────────────────────────
     The base files stack the shell at 720px; carry that up to 768px so the
     481–768 band is not left half-desktop. .wpr-content is restated because
     the unguarded "WP ADMIN CONTEXT" block in admin.css re-declares it after
     the 720px query and would otherwise win. */
  .wpr-shell        { flex-direction: column; min-height: auto; }
  .wpr-sidebar      { width: 100%; flex-direction: column; }
  .wpr-sidebar__nav { flex-direction: row; flex-wrap: wrap; padding: .5rem; gap: 2px; }
  .wpr-content      { padding: 1.25rem; max-height: none; }

  /* ── Grids ──────────────────────────────────────────────*/
  .wpr-form-grid   { grid-template-columns: 1fr; }
  .wpr-kpi-grid    { grid-template-columns: repeat(2, 1fr); }
  .wpr-shift-cards { grid-template-columns: 1fr; }
  .wpr-bal-card    { flex: 1 1 100%; }

  /* ── View toggle: the 481–720px dead zone ───────────────
     Both base files hide .wpr-view-toggle at ≤720px and only bring it back at
     ≤480px, so the day/week/month switcher vanished on every large phone in
     landscape and every small tablet. Restore it across the whole range. */
  .wpr-view-toggle { display: flex; width: 100%; }
  .wpr-vt-btn      { flex: 1; padding: .35rem .3rem; font-size: var(--wpr-text-xs); }

  /* ── Page header & toolbars ─────────────────────────────
     Login Logs crams five controls into .wpr-page-header__actions; the fixed
     min-widths below are what push it off-screen. */
  .wpr-page-header          { flex-direction: column; align-items: stretch; gap: .625rem; }
  .wpr-page-header__actions { width: 100%; flex-wrap: wrap; gap: .4rem; }
  .wpr-input--sm            { width: auto; min-width: 0; flex: 1 1 140px; }
  .wpr-ts-toolbar           { flex-wrap: wrap; justify-content: flex-start; }
  .wpr-ts-period-label      { min-width: 0; flex: 1; text-align: center; }
  .wpr-cal-nav              { width: 100%; justify-content: space-between; }
  .wpr-cal-month            { min-width: 0; flex: 1; text-align: center; }
  .wpr-ts-grand-total       { flex-direction: column; align-items: flex-start; gap: .35rem; }

  /* ── Settings page (PHP-rendered) ───────────────────────
     WP core already stacks .form-table below 782px, but the plugin's own
     settings CSS pins table-layout:fixed with a 150px label column, which
     survives that and squeezes every field. */
  .emr-card .form-table    { table-layout: auto; }
  .emr-card .form-table th { width: auto; padding-bottom: .25rem; }
}

/* ══════════════════ DATA TABLES → CARDS (≤ 600px) ══════════════════ */
/*
 * Below 600px the wide tables (Timesheets is 10 columns, Leave 9, Swaps 8)
 * stop being tables and become one card per row, with each cell labelled by its
 * column header. The label text comes from data-label, which stampTableLabels()
 * in app-core.js / public/js/app.js copies off the <thead> at render time.
 *
 * Opt a table out with .wpr-table--nostack to keep it scrolling horizontally.
 * The roster matrix is unaffected — it is .wpr-roster-table, not .wpr-table.
 */
@media (max-width: 600px) {
  .wpr-table:not(.wpr-table--nostack) thead { display: none; }

  /* box-sizing is required, not cosmetic: the plugin has no global border-box
     rule, so `width: 100%` on the card below would add its padding and border
     on top of the full width and spill ~26px past the table — silently clipped
     by .wpr-content's overflow-x:hidden. */
  .wpr-table:not(.wpr-table--nostack),
  .wpr-table:not(.wpr-table--nostack) tbody,
  .wpr-table:not(.wpr-table--nostack) tr,
  .wpr-table:not(.wpr-table--nostack) td { display: block; width: 100%; box-sizing: border-box; }

  .wpr-table:not(.wpr-table--nostack) tr {
    border: 1px solid var(--wpr-slate-200);
    border-radius: var(--wpr-r);
    margin-bottom: .625rem;
    padding: .25rem .75rem;
    background: var(--wpr-white);
  }
  /* The base rule paints a hover background on cells; on a card that reads as
     a stuck selection. */
  .wpr-table:not(.wpr-table--nostack) tr:hover td { background: transparent; }

  .wpr-table:not(.wpr-table--nostack) td {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: .5rem 0;
    text-align: right;
    border-bottom: 1px solid var(--wpr-slate-100);
    /* Long unbroken values — email addresses especially — have a min-content
       width of the whole string, so as a flex item they refuse to shrink and
       spill past the card. .wpr-content sets overflow-x:hidden, so that spill
       is silently CLIPPED rather than scrollable: the value just disappears.
       Allow the break instead. */
    overflow-wrap: anywhere;
  }
  .wpr-table:not(.wpr-table--nostack) tr td:last-child { border-bottom: 0; }

  .wpr-table:not(.wpr-table--nostack) td[data-label]::before {
    content: attr(data-label);
    flex: 0 0 40%;
    text-align: left;
    font-size: var(--wpr-text-sm);
    font-weight: var(--wpr-fw-bold);
    text-transform: uppercase;
    letter-spacing: var(--wpr-ls-caps);
    color: var(--wpr-muted);
  }

  /* Cells with no header text — the checkbox and row-action columns — carry no
     data-label, so they simply right-align with no prefix. */
  .wpr-table:not(.wpr-table--nostack) td:not([data-label]) { justify-content: flex-end; }

  /* Empty-state rows ("No records yet") span the table and stay centred. */
  .wpr-table:not(.wpr-table--nostack) td[colspan] {
    justify-content: center;
    text-align: center;
  }

  .wpr-table:not(.wpr-table--nostack) .wpr-table__actions {
    flex-wrap: wrap;
    justify-content: flex-end;
    white-space: normal;
    gap: .4rem;
  }
  /* Undo desktop column sizing that makes no sense once stacked. */
  .wpr-ts-list-table td:first-child { width: auto; }
  .wpr-table__reason { max-width: none; }

  /* Rows are cards now, so the wrapper has nothing left to scroll. */
  .wpr-table-wrap { overflow-x: visible; }
}

/* ══════════════════ PHONE (≤ 480px) ══════════════════ */
@media (max-width: 480px) {

  /* ── Modals become bottom sheets ────────────────────────
     .wpr-overlay--in .wpr-modal { transform: none } in the base file still wins
     on specificity, so the sheet slides up from the bottom on open. */
  .wpr-overlay { align-items: flex-end; }

  .wpr-modal,
  .wpr-modal--md,
  .wpr-modal--lg {
    width: 100%;
    max-width: 100%;
    max-height: 92vh;
    border-radius: var(--wpr-r-lg) var(--wpr-r-lg) 0 0;
    transform: translateY(100%);
  }
  .wpr-modal__head,
  .wpr-modal__foot { padding-left: 1rem; padding-right: 1rem; }
  .wpr-modal__body { padding: 1rem; }

  /* Footer actions stack full-width; DOM order puts the confirm action last,
     which lands it at the bottom — the easiest place to reach one-handed. */
  .wpr-modal__foot { flex-direction: column; gap: .5rem; }
  .wpr-modal__foot .wpr-btn { width: 100%; justify-content: center; }

  /* ── Filter controls get a row each ─────────────────────
     Two-up, the 16px font needed to stop iOS zooming no longer fits a label
     like "All departments" and the select silently truncates it. */
  .wpr-page-header__actions > .wpr-input,
  .wpr-page-header__actions > .wpr-input--sm { flex: 1 1 100%; width: 100%; }

  /* ── Toast spans the screen instead of a 340px card in the corner ── */
  .wpr-toast { left: 1rem; right: 1rem; bottom: 1rem; max-width: none; }

  /* ── Misc ───────────────────────────────────────────────*/
  .wpr-clock-panel   { max-width: 100%; }
  .wpr-profile-hcard { flex-direction: column; align-items: flex-start; }
  .wpr-pager         { flex-wrap: wrap; justify-content: center; }
  
}