/* ============================================================================
 * responsive.css — tablet / narrow-width pass (MARKET-READINESS cluster).
 *
 * Desktop-first product; this sheet makes the shipped surfaces USABLE (not
 * redesigned) at 1024px and 768px. Constraints (hard):
 *   - EVERY rule lives inside a max-width media query — nothing here can
 *     affect desktop widths (> 1024px).
 *   - Loaded LAST from base.html, after app.css and the per-surface sheets,
 *     so equal-specificity overrides here win the cascade at narrow widths.
 *   - No control is removed from the page in a way that loses function:
 *     hidden columns are low-value display columns; collapsed text keeps its
 *     accessible name (clip pattern) or has an aria-label on the control.
 *
 * Breakpoints:
 *   ≤ 1024px  tablet landscape — worklist sidebar becomes an icon rail, the
 *             Up-Next queue stacks below the table, the workstation stacks
 *             viewer over report panel with the rail as a slide-out drawer.
 *   ≤  768px  tablet portrait — top bars collapse search to an icon, the
 *             table drops the Received/SLA column too, dashboards/audit go
 *             single column, now-bar compresses.
 * ==========================================================================*/

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

  /* ------------------------------------------------ worklist: 2-col grid.
     Sidebar becomes a 76px icon rail spanning both rows; the Up-Next queue
     (hidden entirely by worklist.css at ≤1080px) comes BACK as a compact
     full-width row stacked below the table. The [data-upnext-toggle] control
     in the now-bar still collapses/expands it (`is-rightpanel-collapsed`). */
  .library,
  .library.is-sidebar-collapsed,
  .library.is-rightpanel-collapsed {
    grid-template-columns: 76px minmax(0, 1fr);
    grid-template-rows: minmax(0, 1fr) auto;
  }
  .library.is-sidebar-collapsed,
  .library.is-sidebar-collapsed.is-rightpanel-collapsed {
    grid-template-columns: 0 minmax(0, 1fr);
  }
  .library__sidebar {
    grid-column: 1;
    grid-row: 1 / -1;
  }
  .library.is-sidebar-collapsed .library__sidebar {
    min-width: 0;
    overflow: hidden;
    opacity: 0;
    pointer-events: none;
  }
  .library__main {
    grid-column: 2;
    grid-row: 1;
  }
  .library__rightpanel {
    grid-column: 2;
    grid-row: 2;
  }

  /* Up-Next queue: restore (worklist.css sets display:none ≤1080) and re-skin
     as a bottom strip; honour the user's collapse toggle. */
  .wl-queue {
    display: flex;
    border-left: 0;
    border-top: 1px solid var(--med-border);
  }
  .library.is-rightpanel-collapsed .wl-queue {
    display: none;
  }
  .wl-queue-inner {
    max-height: 224px;
  }
  /* "Now Reading" card + footer hint are duplicated by the bottom now-bar —
     drop them in the stacked strip so the queue rows get the space. */
  .wl-queue .wl-now-section,
  .wl-queue .wl-queue-foot,
  .wl-queue .wl-queue-head__sub {
    display: none;
  }
  .wl-queue-head {
    padding: 10px 16px 8px;
    border-bottom: 0;
  }

  /* ---------------------------------------------- worklist: icon sidebar */
  .wl-lib-head {
    padding: 10px 6px 8px;
  }
  .wl-lib-head__row {
    flex-direction: column;
    gap: 10px;
  }
  .wl-lib-head__title span,
  .wl-lib-search,
  .wl-lib-chips,
  .lib-section__head,
  .wl-lib-empty,
  .wl-lib-row__trail {
    display: none;
  }
  .wl-lib-list {
    padding: 6px 6px 16px;
  }
  .wl-lib-row,
  .wl-lib-row--create {
    position: relative;
    justify-content: center;
    padding: 6px;
    gap: 0;
  }
  /* Keep each worklist's name in the accessibility tree (clip, not none). */
  .wl-lib-row__text {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
  }
  /* The + composer can't fit inside a 76px rail: float it as a popover next
     to the rail instead (position:fixed escapes the rail's overflow clip).
     [hidden] still wins (app.css: [hidden]{display:none !important}). */
  .wl-create {
    position: fixed;
    left: 84px;
    top: 96px;
    width: 320px;
    max-width: calc(100vw - 98px);
    max-height: calc(100vh - 200px);
    overflow-y: auto;
    z-index: 60;
    margin: 0;
    box-shadow: 0 18px 44px rgba(0, 0, 0, 0.55);
  }

  /* ------------------------------------------------- worklist: hero/table */
  .wl-hero {
    padding: 18px 20px 14px;
    gap: 16px;
  }
  .wl-hero__art {
    width: 92px;
    height: 92px;
    border-radius: 12px;
  }
  .wl-hero__art svg {
    width: 42px;
    height: 42px;
  }
  .wl-hero__title {
    font-size: 34px;
  }
  .wl-actionbar {
    flex-wrap: wrap;
    row-gap: 8px;
    padding: 10px 16px;
  }
  .wl-smartbanner {
    margin: 10px 16px 0;
  }
  /* Hide the low-value Referrer column (header th carries .wl-th-ref; body
     cells are positional — 5th of the 9 row cells; the colspan empty-state
     row is untouched since its single td is :nth-child(1)). */
  .wl-table th.wl-th-ref,
  .wl-table tbody tr.wl-row td:nth-child(5) {
    display: none;
  }
  /* Row actions are hover-revealed on desktop — always visible on touch. */
  .wl-row .wl-row-btn {
    opacity: 1;
  }
  .wl-table-foot {
    padding: 10px 16px;
  }

  /* --------------------------------------------------- worklist: now bar */
  .wl-now-left,
  .wl-now-right {
    width: 280px;
  }
  .wl-now-progress {
    max-width: 34vw;
  }

  /* ------------------------------------------- workstation: stacked panes.
     Viewer over report panel; the left rail becomes a slide-out drawer with
     an 18px grab edge (opens on hover / focus-within — pure CSS; the panel
     cycle/reopen JS toggles keep working on the stacked rows). */
  .workstation.rpt-grid {
    position: relative;
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: minmax(0, 1.15fr) minmax(0, 1fr);
  }
  .workstation.rpt-grid.is-panel-expanded {
    grid-template-rows: minmax(0, 1fr) minmax(0, 1.8fr);
  }
  .workstation.rpt-grid.is-panel-collapsed {
    grid-template-rows: minmax(0, 1fr) 0;
  }
  .rpt-grid .workstation__center {
    grid-column: 1;
    grid-row: 1;
  }
  .rpt-grid .workstation__panel {
    grid-column: 1;
    grid-row: 2;
    border-left: 0;
    border-top: 1px solid var(--med-border);
  }
  .workstation.rpt-grid.is-panel-collapsed .workstation__panel {
    border-top: 0;
  }
  .rpt-grid .workstation__rail {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    width: min(320px, 78vw);
    z-index: 30;
    transform: translateX(calc(18px - 100%));
    transition: transform 0.16s ease;
    border-right: 1px solid var(--med-border);
    box-shadow: 24px 0 60px -28px rgba(0, 0, 0, 0.7);
  }
  .rpt-grid .workstation__rail:hover,
  .rpt-grid .workstation__rail:focus-within {
    transform: translateX(0);
  }
  /* drawer grab-edge label (decorative; the drawer itself is the control) */
  .rpt-grid .workstation__rail::after {
    content: "Worklist";
    position: absolute;
    top: 50%;
    right: 1px;
    transform: translateY(-50%);
    writing-mode: vertical-rl;
    font-size: 10px;
    font-weight: 600;
    letter-spacing: 0.03em;
    color: var(--med-text-muted);
    padding: 8px 2px;
    pointer-events: none;
  }
  .rpt-grid .workstation__rail:hover::after,
  .rpt-grid .workstation__rail:focus-within::after {
    content: none;
  }
}

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

  /* -------------------------------------------- shared topbar (base shell):
     the ⌘K search collapses to an icon button (same [data-search-trigger]
     handler; aria-label keeps its accessible name), brand drops the wordmark,
     the live-sync pill drops its label (dot stays). */
  .topbar {
    gap: 8px;
    padding: 0 10px;
  }
  .topbar .searchbar {
    width: 34px;
    max-width: 34px;
    flex: 0 0 34px;
    padding: 0;
    gap: 0;
    justify-content: center;
    cursor: pointer;
  }
  .topbar .searchbar > span {
    display: none;
  }
  .topbar .brand > span:not(.brand__logo) {
    display: none;
  }
  .topbar .status-live [data-sync-label] {
    display: none;
  }

  /* ------------------------------------------------ worklist topbar ditto */
  .wl-topbar {
    gap: 8px;
    padding: 0 10px;
  }
  .wl-search {
    width: 38px;
    min-width: 38px;
    max-width: 38px;
    padding: 0;
    gap: 0;
    justify-content: center;
  }
  .wl-search__ph,
  .wl-search .kbd {
    display: none;
  }
  .wl-brand__name {
    display: none;
  }
  .wl-topbar .status-live [data-sync-label] {
    display: none;
  }

  /* -------------------------------------------------- worklist hero/table */
  .wl-hero {
    padding: 14px 16px 12px;
    gap: 12px;
  }
  .wl-hero__art {
    width: 64px;
    height: 64px;
    border-radius: 10px;
  }
  .wl-hero__art svg {
    width: 30px;
    height: 30px;
  }
  .wl-hero__title {
    font-size: 26px;
  }
  .wl-hero__desc {
    font-size: 12.5px;
  }
  .wl-actionbar__startlabel {
    display: none;
  }
  /* Drop the Received/SLA display column too (6th of the 9 row cells). */
  .wl-table th.wl-th-rec,
  .wl-table tbody tr.wl-row td:nth-child(6) {
    display: none;
  }
  .wl-table thead th {
    padding: 8px 10px;
  }
  .wl-table tbody td {
    padding: 0 10px;
  }
  .wl-row {
    height: 56px;
  }
  /* legend: keep the key + swatches, drop the verbose explanations */
  .wl-legend__item .u-dim {
    display: none;
  }

  /* --------------------------------------------------- worklist: now bar */
  .wl-nowbar {
    gap: 10px;
    padding: 0 10px;
  }
  .wl-now-left {
    width: auto;
    flex: 1 1 auto;
    min-width: 0;
  }
  .wl-now-meta .nowbar__name {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  .wl-now-right {
    width: auto;
    flex: 0 0 auto;
  }
  .wl-now-center {
    flex: 0 0 auto;
  }
  .wl-now-controls {
    gap: 10px;
  }
  /* position readout duplicates the queue strip — drop the progress row */
  .wl-now-progress {
    display: none;
  }
  /* Up-Next toggle: icon + count only (aria-label keeps the name) */
  .wl-upnext-btn > span:not(.wl-upnext-count) {
    display: none;
  }

  /* --------------------------------------------------- workstation topbar */
  .rpt-topbar {
    gap: 8px;
    padding: 0 10px;
  }
  .rpt-tab,
  .rpt-tab-divider {
    display: none;
  }
  .patient-chip__agesex {
    display: none;
  }

  /* ------------------------------------------------------------ dashboard:
     header stacks, grid goes single column, cards full width. */
  .dash {
    padding: 18px 14px 40px;
  }
  .dash__head {
    flex-direction: column;
    align-items: stretch;
    gap: 12px;
  }
  .dash-grid {
    grid-template-columns: 1fr;
  }
  .dash-grid__wide {
    grid-column: span 1;
  }

  /* ---------------------------------------------------------------- audit:
     title row stacks, filter selects take the full row. */
  .audit-panel {
    padding: 18px 14px 48px;
  }
  .audit-panel__titlerow {
    flex-direction: column;
    align-items: flex-start;
    gap: 10px;
  }
  .audit-selects {
    width: 100%;
  }
  .audit-select {
    flex: 1 1 140px;
  }

  /* -------------------------------------------------------- notifications:
     comms.css already makes the panel full-width ≤860px and the pill tabs
     already wrap; just tighten the header padding on narrow screens. */
  .notif-center__head {
    padding: 14px 14px 10px;
  }
}