/* Responsive layer: shell (Highland 2026-10-20 "compatible with various screen sizes").
   Loaded after app-shell.css. Tiers: wide >=1600, standard 1280-1599, compact 1024-1279,
   tablet 744-1023, phone <=743 (phone layout lives in styles.css/workspace.css).
   Covers the sidebar, page header, filter bar, totals strip, docks and phone chrome. */

/* ---- Tokens ----
   --sidebar-w is the sidebar column (the dock offset follows it). The type scale keeps UI text
   at 12px or larger and grows slightly with the window. The docks are slim tabs on the window's
   bottom edge, bottom-right: --dock-bar-h is their height and --dock-reserve is the room they
   need at the end of a scroll so the last card or row can be scrolled clear of them (never a
   strip across the page). */
:root {
  --sidebar-w: 132px;
  --shell-gutter: 14px;
  --shell-pad-y: 10px;
  --shell-gap: 8px;
  --dock-reserve: 0px;
  --dock-bar-h: 0px;
  --fs-xs: 12px;
  --fs-sm: clamp(12px, 0.7rem + 0.12vw, 13px);
  --fs-md: clamp(13px, 0.74rem + 0.2vw, 15px);
  --fs-lg: clamp(17px, 0.9rem + 0.3vw, 20px);
}
@media (min-width: 1024px) and (max-width: 1279px) {
  :root { --sidebar-w: 112px; }
}
@media (max-width: 1023px) {
  :root { --sidebar-w: 0px; }
}
@media (min-width: 744px) {
  /* Highland 2026-10-24 ("I don't like how these are floating... make them appear at the very
     bottom of the page and also make them thinner"): the collapsed Team Chat bar and the
     minimized-note tabs are 30px tabs attached to the bottom edge (square bottom, rounded top),
     right-aligned and left of the board's vertical scrollbar. Open panels grow upward from there.
     Room: bar + 4px. A board that scrolls sideways ends above them (app-shell.css). */
  :root { --dock-bar-h: 30px; }
  body:has(#globalChatDock:not(.hidden)) { --dock-reserve: calc(var(--dock-bar-h) + 4px); }
  body:has(#noteDockTabs:not(.hidden):not(:empty)) { --dock-reserve: calc(var(--dock-bar-h) + 4px); }
  .dock { right: calc(var(--shell-gutter, 14px) + 18px); bottom: 0; gap: 6px; }
  .dock-panel { border-bottom: 0; border-radius: 10px 10px 0 0; box-shadow: 0 -4px 22px rgba(15, 23, 42, 0.2); }
  .note-dock-tab,
  .global-chat-dock.collapsed { height: var(--dock-bar-h); border-bottom: 0; border-radius: 8px 8px 0 0; box-shadow: 0 -2px 10px rgba(15, 23, 42, 0.14); }
  .global-chat-dock.collapsed { width: 196px; flex: 0 0 196px; grid-template-rows: minmax(0, 1fr); border-color: transparent; }
  .global-chat-dock.collapsed > header { padding: 3px 4px 3px 12px; font-size: 13px; }
  .note-dock-tab { width: 208px; }
  .note-dock-tab .note-dock-open { padding: 0 4px 0 10px; gap: 6px; }
  .note-dock-tab .note-tab-label { gap: 8px; }
  .note-dock-tab strong { font-size: 13px; }
  .note-dock-tab .note-dock-close { width: 24px; height: 24px; min-width: 24px; min-height: 24px; margin-right: 3px; }
}

/* ---- Sidebar (its nav text uses --fs-sm, styles.css) ---- */
@media (min-width: 1024px) and (max-width: 1279px) {
  .sidebar { padding: 10px 8px; }
  .sidebar nav button { padding: 8px 4px; }
}

/* ---- Tablet (744-1023px): the sidebar becomes the phone drawer ----
   app.js (installNavDrawer, state.navDrawer) moves the Menu button into the page header and
   reuses setMobileNavOpen: aria-expanded on the button, Escape and the backdrop close it, focus
   moves into the drawer and back. The closed drawer is hidden from keyboard and screen readers. */
@media (min-width: 744px) and (max-width: 1023px) {
  .app { grid-template-columns: minmax(0, 1fr); }
  body.mobile-nav-open { overflow: hidden; }
  .sidebar {
    position: fixed;
    inset: 0 auto 0 0;
    z-index: 60;
    width: min(300px, 80vw);
    height: 100dvh;
    padding: 14px;
    transform: translateX(-105%);
    visibility: hidden;
    transition: transform 180ms ease, visibility 0s linear 180ms;
    overflow-y: auto;
    overscroll-behavior: contain;
    box-shadow: 16px 0 38px rgba(15, 23, 42, 0.34);
  }
  body.mobile-nav-open .sidebar { transform: none; visibility: visible; transition: transform 180ms ease; }
  .mobile-nav-backdrop { display: block; position: fixed; inset: 0; z-index: 55; padding: 0; border: 0; border-radius: 0; background: rgba(15, 23, 42, 0.58); }
  .sidebar .brand { grid-template-columns: 96px 1fr; justify-items: start; align-items: center; text-align: left; }
  .sidebar .brand strong { font-size: 15px; }
  .sidebar nav { gap: 4px; }
  .sidebar nav button,
  .sidebar .bottom-nav > button { min-height: 44px; padding: 10px 12px; text-align: left; font-size: 14px; }
  .sidebar .bottom-nav > .theme-toggle { display: flex; justify-content: center; gap: 12px; width: min(100%, 210px); margin-inline: auto; text-align: center; }
  .topbar .mobile-menu-button {
    display: inline-flex;
    flex: 0 0 auto;
    align-self: center;
    align-items: center;
    gap: 8px;
    min-height: 36px;
    padding: 6px 12px;
    border: 1px solid var(--line);
    border-radius: 6px;
    background: var(--panel);
    color: var(--ink);
    font-size: 14px;
    font-weight: 750;
  }
  .topbar .mobile-menu-button:hover { background: var(--row-hover); }
  .topbar .mobile-menu-icon { display: grid; gap: 3px; width: 18px; }
  .topbar .mobile-menu-icon i { display: block; height: 2px; border-radius: 2px; background: currentColor; }
  body .topbar > div:first-child { align-items: center; }
}
/* Phones: the closed drawer is off-screen; keep it out of the Tab order there too. */
@media (max-width: 743px) {
  .sidebar { visibility: hidden; transition: transform 180ms ease, visibility 0s linear 180ms; }
  body.mobile-nav-open .sidebar { visibility: visible; transition: transform 180ms ease; }
}

/* ---- Page header (desktop) ----
   Title first; the tools sit beside it when they fit and take their own right-aligned row when
   they do not. Toggle groups never shrink below their labels, so nothing slides under Quick Tools. */
@media (min-width: 744px) {
  body .topbar .toolbar-primary-controls,
  body .topbar .view-mode-buttons { flex-wrap: wrap; }
  body .topbar .card-detail-toggle,
  body .topbar .overview-view-toggle { flex: 0 0 auto; min-width: max-content; }
  body .topbar .notification-badge { min-width: 20px; height: 20px; font-size: var(--fs-xs); }
  /* CPU Check-In and Assembly Tracker: their tools are plain buttons in the bar (app.js syncInlinePageTools). */
  body .topbar .page-tools-bar { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; min-width: 0; }
  body .topbar .page-tools-bar.hidden { display: none; }
  body .topbar .page-tools-bar > button { width: auto; min-width: 0; min-height: 36px; padding: 6px 12px; font-size: 14px; white-space: nowrap; }
}
/* Pending pickup requests chip (CPU Check-In bar; a Quick Tools row on phones). A status-style
   pill, light in both themes like the status bubbles; the count is written out, not colour alone. */
button.pending-requests-chip {
  display: inline-flex; align-items: center; gap: 6px; width: auto; min-height: 32px; padding: 4px 12px 4px 5px;
  border: 0; border-radius: 999px; background-color: #fef0c7; color: #7a3e00; box-shadow: inset 0 0 0 1px #e9b949;
  font-size: 13px; font-weight: 800; line-height: 18px; text-align: left; white-space: nowrap;
}
button.pending-requests-chip:hover { background-color: #fde3a0; }
button.pending-requests-chip:focus-visible { outline: 2px solid #b54708; outline-offset: 2px; }
button.pending-requests-chip .pending-requests-count {
  position: static; min-width: 22px; height: 22px; padding: 0 6px; border-radius: 999px;
  background: #7a3e00; color: #fff; font-size: 12px; line-height: 22px;
}
body.dark-mode button.pending-requests-chip { background-color: #fef0c7; color: #7a3e00; box-shadow: inset 0 0 0 1px #e9b949; }
body.dark-mode button.pending-requests-chip:hover { background-color: #fde3a0; }
body.dark-mode button.pending-requests-chip:focus-visible { outline-color: #fcd34d; }
body .topbar .page-tools-bar > button.pending-requests-chip { min-height: 32px; padding: 4px 12px 4px 5px; font-size: 13px; }
body .workspace-actions-panel > button.pending-requests-chip { justify-self: start; min-height: 40px; }
/* Narrow desktops and tablets: the walk-in reason wraps beside its button instead of pushing tools to another row. */
@media (min-width: 744px) and (max-width: 1100px) {
  body .topbar #addWalkInReason { max-width: 18ch; line-height: 1.2; }
}

/* ---- Filter bar (desktop) ----
   One row: Today/week, the filters, then a grid whose search column takes the free space (1fr).
   app.js (filterBarFit) reads the --fb-* widths below and, when the row would not fit, moves
   Sort and Save View, then the filters, into the existing "Filters & sort" panel (data-fit). */
@media (min-width: 744px) {
  #overviewContent > .page-filter-bar {
    --fb-gap: 6px;
    --fb-control-h: 34px;
    --fb-day: 290px;
    --fb-filter: 100px;
    --fb-filter-wide: 112px;
    --fb-search-min: 240px;
    --fb-sort: 376px;
    --fb-panel: 116px;
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    gap: 6px var(--fb-gap);
    min-width: 0;
    min-height: 0;
    margin-top: 0;
    padding: 6px 10px;
  }
  #overviewContent > .page-filter-bar button:not(:where(.search-clear, .search-suggestions *)),
  #overviewContent > .page-filter-bar input:not(#dateFilter),
  #overviewContent > .page-filter-bar select,
  #overviewContent > .page-filter-bar summary { min-height: var(--fb-control-h); }
  /* Today, the week label over the previous arrow, the date, the next arrow. */
  #overviewContent > .page-filter-bar > .day-switcher { flex: 0 0 var(--fb-day); width: var(--fb-day); min-width: 0; align-items: flex-end; gap: 6px; }
  #overviewContent > .page-filter-bar .day-switcher > #todayBtn { padding-inline: 12px; }
  #overviewContent > .page-filter-bar .week-arrow-stack { position: relative; display: grid; grid-template-rows: 14px var(--fb-control-h); justify-items: center; align-items: end; gap: 2px; width: 40px; min-width: 40px; }
  #overviewContent > .page-filter-bar .week-arrow-stack > * { grid-area: auto; }
  #overviewContent > .page-filter-bar .date-filter-label { position: static; display: block; width: 40px; padding: 0; font-size: var(--fs-xs); font-weight: 750; line-height: 14px; text-align: center; }
  #overviewContent > .page-filter-bar .day-switcher .icon-btn { width: 36px; height: var(--fb-control-h); }
  #overviewContent > .page-filter-bar .week-arrow-stack .icon-btn { width: 40px; }
  #overviewContent > .page-filter-bar .current-date-label { flex: 1 1 auto; min-width: 0; white-space: nowrap; }
  /* Filters: a 12px caption over one control. */
  #overviewContent > .page-filter-bar > .labeled-filter { flex: 0 0 var(--fb-filter); width: var(--fb-filter); min-width: 0; grid-template-rows: 14px var(--fb-control-h); }
  #overviewContent > .page-filter-bar > #overviewAssemblyStatusFilterWrap,
  #overviewContent > .page-filter-bar > #assemblyStatusFilterWrap { flex-basis: var(--fb-filter-wide); width: var(--fb-filter-wide); }
  #overviewContent > .page-filter-bar .labeled-filter::before { font-size: var(--fs-xs); line-height: 14px; }
  #overviewContent > .page-filter-bar .labeled-filter > summary { height: var(--fb-control-h); padding: 6px 9px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  /* Search (1fr) followed by Sort, direction and Save View when they are in the row. */
  #overviewContent > .page-filter-bar > .toolbar-trailing-controls {
    display: grid;
    flex: 1 1 var(--fb-search-min);
    grid-template-columns: minmax(var(--fb-search-min), 640px);
    grid-auto-flow: column;
    grid-auto-columns: max-content;
    align-items: end;
    gap: var(--fb-gap);
    width: auto;
    min-width: 0;
    margin: 0;
  }
  /* The "Search" caption is .sr-only (it repeats the placeholder); it stays the accessible name. */
  #overviewContent > .page-filter-bar label.search { width: auto; min-width: 0; max-width: none; margin: 0; }
  #overviewContent > .page-filter-bar label.search input { width: 100%; min-width: 0; height: var(--fb-control-h); font-size: 14px; line-height: normal; }
  #overviewContent > .page-filter-bar #pageSortWrap { display: grid; grid-template-rows: 14px var(--fb-control-h); gap: 2px; width: 128px; min-width: 0; font-size: var(--fs-xs); font-weight: 750; line-height: 14px; }
  #overviewContent > .page-filter-bar #pageSortWrap select { width: 100%; height: var(--fb-control-h); padding-block: 0; font-size: 14px; line-height: normal; }
  #overviewContent > .page-filter-bar #pageSortDirection,
  #overviewContent > .page-filter-bar #savePageViewBtn { flex: none; order: 0; width: auto; min-width: 0; height: var(--fb-control-h); margin: 0; padding: 4px 10px; font-size: 13px; white-space: nowrap; }
  #overviewContent > .page-filter-bar #pageSortDirection { width: 96px; }
  #overviewContent > .page-filter-bar #savePageViewBtn { width: 140px; }
  /* The panel button only shows when the panel holds something. */
  #overviewContent > .page-filter-bar > #filterPanel { display: none; flex: 0 0 auto; }
  #overviewContent > .page-filter-bar:is([data-fit="sort"], [data-fit="panel"]) > #filterPanel { display: block; }
  #overviewContent > .page-filter-bar > #filterPanel > summary { min-height: var(--fb-control-h); padding: 6px 12px; font-size: 14px; white-space: nowrap; }
  #overviewContent > .page-filter-bar #filterPanel .workspace-filter-options { width: min(480px, calc(100vw - 32px)); padding: 14px; gap: 12px; }
  #overviewContent > .page-filter-bar #filterPanel .workspace-filter-options > :is(#pageSortWrap, #pageSortDirection, #savePageViewBtn) { width: auto; }
  #overviewContent > .page-filter-bar #filterPanel .workspace-filter-options > :is(#pageSortDirection, #savePageViewBtn) { align-self: end; }
  #overviewContent > .page-filter-bar > #activeFilterSummary { flex: 1 0 100%; }
  #overviewContent > .page-filter-bar .week-picker { z-index: 50; }
}

/* ---- Totals strip (desktop) ----
   One quiet line while it fits; below that, two balanced rows of three aligned columns
   (Overview: weekly totals over shipping totals). */
@media (min-width: 744px) {
  body.fixed-header-page #overviewContent > #stats { container: totals / inline-size; }
}
@container totals (max-width: 1060px) {
  body.fixed-header-page #overviewContent > #stats > .stats-group { flex: 1 0 100%; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 2px 24px; }
  body.fixed-header-page #overviewContent > #stats > .stats-group-shipping { padding: 4px 0 0; border-left: 0; border-top: 1px solid var(--line); }
  body.fixed-header-page #overviewContent > #stats > .stat { flex: 0 0 calc((100% - 48px) / 3); }
  body.fixed-header-page #overviewContent > #stats .stat span { overflow: hidden; text-overflow: ellipsis; }
}

/* ---- Short windows (<= 820px tall): slimmer header, filters and totals ---- */
@media (min-width: 744px) and (max-height: 820px) {
  :root { --shell-pad-y: 6px; --shell-gap: 6px; }
  body .topbar,
  body.overview-density .topbar { min-height: 46px; padding-block: 4px; }
  body.fixed-header-page #overviewContent { gap: 6px; }
  #overviewContent > .page-filter-bar { --fb-control-h: 32px; padding-block: 4px; }
  body.fixed-header-page #overviewContent > .stats { padding-block: 4px; }
}

/* ---- Search hint ----
   An empty box has no Clear button, so the whole hint can use its room; on phones the hint is
   13px so all of it fits beside "Filters & sort". */
#searchFilter:placeholder-shown { padding-right: 9px; }
@media (max-width: 743px) {
  #searchFilter::placeholder { font-size: 13px; }
}
/* Phones: on the order cards (Overview, My Orders) and CPU Check-In the collapsed Team Chat pill
   sits bottom-left, over card text rather than the right-hand chevrons and Check In / Close Out
   buttons. Tables with actions on the left (Assembly Tracker) keep it on the right. */
@media (max-width: 743px) {
  body:is(.overview-density, .cpu-checkin-page) #dock > #globalChatDock.collapsed { align-self: flex-start; margin-left: 8px; }
}
/* Totals chips that scroll sideways fade at the edge that has more to show. */
@property --hci-fade-start { syntax: "<length>"; inherits: false; initial-value: 0px; }
@property --hci-fade-end { syntax: "<length>"; inherits: false; initial-value: 0px; }
@keyframes hci-scroll-edge-fade {
  0% { --hci-fade-start: 0px; --hci-fade-end: 28px; }
  6% { --hci-fade-start: 28px; }
  94% { --hci-fade-end: 28px; }
  100% { --hci-fade-start: 28px; --hci-fade-end: 0px; }
}
@supports (animation-timeline: scroll()) {
  @media (max-width: 743px) {
    body #stats.stats:not(:has(> .stats-group)),
    body #stats.stats > .stats-group {
      -webkit-mask-image: linear-gradient(to right, transparent, #000 var(--hci-fade-start), #000 calc(100% - var(--hci-fade-end)), transparent);
      mask-image: linear-gradient(to right, transparent, #000 var(--hci-fade-start), #000 calc(100% - var(--hci-fade-end)), transparent);
      animation: hci-scroll-edge-fade linear both;
      animation-timeline: scroll(self inline);
    }
  }
}