/* ============================================================================
   19. Responsive (mobile-first hardening)
   ----------------------------------------------------------------------------
   One consistent breakpoint: 760px. Grids elsewhere already collapse via
   `auto-fit/auto-fill`; this section owns the topbar hamburger drawer, the
   scrollable wide tables, and the small-screen nips that stop horizontal
   overflow on phones.
   ========================================================================== */

@media (max-width: 760px) {

  /* ---- Topbar: hamburger + drawer ---- */
  main.container>nav.topbar {
    gap: 0.35rem;
    padding-inline: 1rem;
  }

  main.container>nav.topbar .nav-toggle {
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.28rem;
    width: 2.5rem;
    height: 2.5rem;
    margin-left: auto;
    padding: 0.55rem;
    border: 1px solid var(--ta-border);
    border-radius: var(--ta-r-sm);
    background: var(--ta-surface-2);
    color: var(--ta-text);
  }

  main.container>nav.topbar .nav-toggle .nav-toggle-bar {
    display: block;
    width: 100%;
    height: 2px;
    border-radius: 2px;
    background: currentColor;
    transition: transform 0.18s ease, opacity 0.18s ease;
  }

  main.container>nav.topbar.open .nav-toggle .nav-toggle-bar:nth-child(1) {
    transform: translateY(6px) rotate(45deg);
  }

  main.container>nav.topbar.open .nav-toggle .nav-toggle-bar:nth-child(2) {
    opacity: 0;
  }

  main.container>nav.topbar.open .nav-toggle .nav-toggle-bar:nth-child(3) {
    transform: translateY(-6px) rotate(-45deg);
  }

  /* Keep wide brand logos from crowding the hamburger. */
  main.container>nav.topbar .brand .brand-logo {
    max-width: 52vw;
  }

  /* Drawer: a full-width panel pinned under the sticky/fixed bar. */
  main.container>nav.topbar .topbar-menu {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    flex-direction: column;
    align-items: stretch;
    min-width: 0;
    padding: 0.4rem 0.75rem 0.9rem;
    background: var(--ta-surface);
    border-bottom: 1px solid var(--ta-border);
    box-shadow: var(--ta-shadow);
    z-index: 60;
  }

  main.container>nav.topbar.open .topbar-menu {
    display: flex;
  }

  main.container>nav.topbar .topbar-menu ul {
    flex-direction: column;
    align-items: stretch;
    flex-wrap: nowrap;
    width: 100%;
    min-width: 0;
    margin: 0;
    padding: 0;
    gap: 0.15rem;
  }

  main.container>nav.topbar .topbar-menu li {
    width: 100%;
    min-width: 0;
  }

  main.container>nav.topbar .topbar-menu ul.nav-links a {
    display: block;
    padding: 0.6rem 0.75rem;
    font-size: 0.98rem;
    white-space: normal;
  }

  main.container>nav.topbar .topbar-menu ul.nav-auth {
    margin-top: 0.4rem;
    padding-top: 0.5rem;
    border-top: 1px solid var(--ta-border);
    gap: 0.5rem;
  }

  main.container>nav.topbar .topbar-menu ul.nav-auth li a {
    width: 100%;
    padding: 0.6rem 1rem;
    font-size: 0.95rem;
  }

  /* Hero-overlay nav: the drawer flips to a dark panel with white text. */
  main.container>nav.topbar:not(.nav-scrolled):has(+ .hero.marketing) .nav-toggle {
    border-color: rgba(255, 255, 255, 0.4);
    background: rgba(255, 255, 255, 0.08);
    color: #fff;
  }

  main.container>nav.topbar:not(.nav-scrolled):has(+ .hero.marketing) .topbar-menu {
    background: rgba(9, 12, 17, 0.97);
    border-bottom-color: rgba(255, 255, 255, 0.14);
  }

  main.container>nav.topbar:not(.nav-scrolled):has(+ .hero.marketing) .topbar-menu ul.nav-auth {
    border-top-color: rgba(255, 255, 255, 0.14);
  }

  main.container>nav.topbar:not(.nav-scrolled):has(+ .hero.marketing) .topbar-menu ul.nav-links a,
  main.container>nav.topbar:not(.nav-scrolled):has(+ .hero.marketing) .topbar-menu ul.nav-auth a {
    color: rgba(255, 255, 255, 0.92);
  }

  main.container>nav.topbar:not(.nav-scrolled):has(+ .hero.marketing) .topbar-menu ul.nav-links a:hover {
    color: #fff;
    background: rgba(255, 255, 255, 0.12);
  }

  /* Long tab strips scroll horizontally inside their own band. */
  .tabs-list {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    padding-bottom: 0.25rem;
  }

  .tab-trigger {
    flex: none;
    white-space: nowrap;
  }

  /* ---- Page-level nips ---- */
  main.container {
    padding-inline: 1.125rem;
  }

  h1 {
    font-size: clamp(1.7rem, 7vw, 2.2rem);
  }

  h2 {
    font-size: clamp(1.2rem, 5vw, 1.5rem);
  }

  .calendar-cell {
    min-height: 4.75rem;
    padding: 0.3rem;
  }

  .section-heading h2 {
    font-size: 1.5rem;
  }

  .chart-canvas-wrap {
    height: 13rem;
  }
}

@media (max-width: 480px) {
  main.container {
    padding-inline: 1rem;
  }

  main.container>nav.topbar {
    padding-inline: 0.875rem;
  }

  .kpi-value {
    font-size: 1.6rem;
  }

  /* The dial is fluid up to its cap, so a narrow phone only needs a lower cap
     — a fixed width here would stop it shrinking with the pane. */
  .gauge-dial {
    max-width: 11rem;
  }
}

/* ============================================================================
   19b. Responsive components (reflow, not scroll)
   ----------------------------------------------------------------------------
   Wide data tables, kanban boards, case steppers and saved-view bars are
   reflowed on small screens so they never need a horizontal scrollbar:
   tables progressively drop low-priority columns (the first few plus the
   trailing actions column stay), boards and in-care columns stack, steppers
   turn vertical, and pill bars wrap. Anything still wider than its pane
   keeps scrolling in-band (bar hidden) rather than blowing out the page.
   ========================================================================== */

/* ── Data tables: drop columns, keep identity + actions ───────────────────
   The generic `.table-surface` table shrinks by hiding the least important
   columns on narrow screens: on a phone keep the first three data columns
   plus the trailing actions column, on a small tablet keep five. Hidden
   columns are still reachable on the record's detail page, so nothing is
   lost — the table just fits. `.table-scroll` standalone tables (admin /
   ops) get wrapping cells instead, so their text reflows instead of pushing
   the band wide. */
@media (max-width: 1024px) {

  .table-surface thead th:nth-child(n+6):not(:last-child),
  .table-surface tbody td:nth-child(n+6):not(:last-child) {
    display: none;
  }

  /* Auto layout sizes columns to their content's min-width, so a wide cell
     (long camera name, address) can never shrink below it — the table then
     outgrows its pane no matter how many columns are hidden. Fixed layout
     hands the available width to the columns equally and lets the cells'
     own ellipsis do the clipping, so the table always fits. */
  .table-surface table {
    table-layout: fixed;
  }
}

@media (max-width: 760px) {

  .table-surface thead th:nth-child(n+4):not(:last-child),
  .table-surface tbody td:nth-child(n+4):not(:last-child) {
    display: none;
  }

  /* Tighter rows + shorter truncation so the kept columns breathe. */
  .table-surface thead th {
    padding: 0.5rem 0.5rem;
    white-space: normal;
  }

  .table-surface tbody td {
    padding: 0.5rem 0.5rem;
  }

  /* The identity (title) column is the widest driver on phones — truncate
     it like the other text cells so the table actually fits; the full name
     is one tap away on the record page. */
  .table-surface tbody td .table-title {
    display: inline-block;
    max-width: 8rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    vertical-align: bottom;
  }

  .table-surface tbody td .cell-text {
    max-width: 8rem;
  }

  .table-surface tbody td .conf-cell {
    min-width: 0;
  }

  /* Row actions (Edit/Delete) compact so the trailing actions column fits
     the fixed-layout share on a phone. */
  .table-actions {
    gap: 0.125rem;
  }

  .table-actions .table-actions-btn {
    width: 1.75rem;
    height: 1.75rem;
  }

  .table-actions .table-actions-btn svg {
    width: 0.9375rem;
    height: 0.9375rem;
  }

  /* Standalone `.table-scroll` tables (admin, ops): wrap instead of scroll. */
  .table-scroll tbody td {
    white-space: normal;
  }
}

/* ── Kanban board + in-care columns: stack on phones ───────────────────── */
@media (max-width: 640px) {

  .board-columns,
  .in-care-columns {
    grid-auto-flow: row;
    grid-template-columns: 1fr;
    grid-auto-columns: 1fr;
    overflow-x: visible;
  }
}

/* ── Case stepper: vertical rail on phones ──────────────────────────────── */
@media (max-width: 640px) {
  .stepper-steps {
    flex-direction: column;
    gap: 0.4rem;
  }

  .stepper-step {
    flex: none;
    width: 100%;
  }

  /* The horizontal rail becomes a short vertical connector between steps,
     aligned under the marker's centre (24px dot → 11px to its centre). */
  .stepper-step .stepper-rail {
    flex: none;
    width: 2px;
    height: 1.1rem;
    margin: 0.1rem 0 0.1rem 0.6875rem;
  }

  .stepper-label {
    max-width: none;
    white-space: normal;
  }
}

/* ── Saved-view bar: wrap pills instead of scrolling ────────────────────── */
@media (max-width: 760px) {
  .view-bar {
    flex-wrap: wrap;
  }
}