/* =========================================================================
   Application shell — navigation rail, top bar, page frame
   ========================================================================= */

@layer layout {

  .app {
    display: grid;
    grid-template-columns: var(--rail-w) minmax(0, 1fr);
    min-height: 100vh;
  }

  /* The drawer scrim is a child of .app, so at any width where it is not in
     use it must be out of the grid entirely — left as a normal element it
     takes the first column for itself and pushes the rail and the page into
     the wrong tracks. It is only ever displayed at drawer width, below. */
  .nav-scrim { display: none; }

  /* ---------------------------------------------------------------------
     The rail
     ---------------------------------------------------------------------
     Solid navy, edge to edge — the brand plate extended down the side of
     the screen, with the dealer's logo printed on it. It is the one large
     field of brand colour in the interface,
     which is what lets everything to the right of it stay achromatic and let
     the status colours do their job.
     ------------------------------------------------------------------- */

  .rail {
    position: sticky;
    top: 0;
    height: 100vh;
    display: flex;
    flex-direction: column;
    background: var(--brand);
    color: var(--brand-on);
    /* A hairline in the deeper navy rather than a shadow: the plate should
       read as printed, not as floating. */
    border-right: 1px solid var(--brand-deep);
    overflow: hidden;
  }

  .rail__brand {
    display: flex;
    align-items: center;
    /* Centred in the band rather than ranged left with the nav labels below:
       it reads as the plate's masthead, not as one more list item. */
    justify-content: center;
    height: 5rem;
    padding-inline: 0.75rem;
    flex: none;
    border-bottom: 1px solid rgba(255, 255, 255, 0.14);
  }

  .rail__mark {
    display: flex;
    align-items: center;
    min-width: 0;
    text-decoration: none;
    border-radius: var(--r-sm);
  }

  .rail__logo {
    /* Fill the brand band while preserving each company's artwork proportions. */
    width: 14rem;
    max-width: 100%;
    max-height: 3.5rem;
    height: auto;
    object-fit: contain;
  }

  /* Shown only when the rail is collapsed to icons. */
  .rail__mark-icon { display: none; width: 2.25rem; height: 2.25rem; object-fit: contain; }

  .rail__nav {
    flex: 1;
    overflow-y: auto;
    overscroll-behavior: contain;
    padding: var(--s4) var(--s3) var(--s5);
  }

  .rail__section {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-top: var(--s5);
    margin-bottom: var(--s2);
    padding-inline: var(--s3);
    min-height: 1.85rem;
    font-size: var(--t-sm);
    font-weight: 600;
    letter-spacing: var(--track-label);
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.5);
    list-style: none;
    cursor: pointer;
    user-select: none;
  }
  .rail__section::-webkit-details-marker { display: none; }
  .rail__section::marker { content: ''; }
  .rail__section:hover { color: rgba(255, 255, 255, 0.85); }
  .rail__chevron { font-size: 1rem; line-height: 1; transition: transform 0.12s var(--ease); }
  .rail__group[open] > .rail__section .rail__chevron { transform: rotate(90deg); }
  .rail__section:first-child { margin-top: 0; }

  .rail__link {
    display: flex;
    align-items: center;
    gap: var(--s3);
    padding: 0.4375rem var(--s3);
    border-radius: var(--r);
    color: rgba(255, 255, 255, 0.82);
    font-size: var(--t-base);
    text-decoration: none;
    white-space: nowrap;
    transition: background-color 0.12s var(--ease), color 0.12s var(--ease);
  }

  .rail__link:hover { background: rgba(255, 255, 255, 0.10); color: #fff; }

  /* Current section. The left marker is what actually communicates position —
     the background alone is too subtle at a glance across a navy field. */
  .rail__link[aria-current="page"] {
    background: rgba(255, 255, 255, 0.15);
    color: #fff;
    font-weight: 500;
    box-shadow: inset 3px 0 0 #fff;
  }

  .rail__link svg { flex: none; width: 1.0625rem; height: 1.0625rem; opacity: 0.85; }
  .rail__link[aria-current="page"] svg { opacity: 1; }

  .rail__count {
    margin-left: auto;
    font-family: var(--font-mono);
    font-size: var(--t-xs);
    font-variant-numeric: tabular-nums;
    background: rgba(255, 255, 255, 0.18);
    padding: 0 0.375rem;
    border-radius: 999px;
  }

  .rail__foot {
    flex: none;
    padding: var(--s3);
    border-top: 1px solid rgba(255, 255, 255, 0.14);
    font-size: var(--t-xs);
    color: rgba(255, 255, 255, 0.6);
  }

  /* ---------------------------------------------------------------------
     Main column
     ------------------------------------------------------------------- */

  .main { display: flex; flex-direction: column; min-width: 0; }

  .topbar {
    position: sticky;
    top: 0;
    z-index: 20;
    display: flex;
    align-items: center;
    gap: var(--s4);
    height: var(--topbar-h);
    padding-inline: var(--s5);
    background: color-mix(in srgb, var(--paper) 88%, transparent);
    backdrop-filter: blur(8px);
    border-bottom: 1px solid var(--rule);
  }

  .topbar__nav { min-width: 0; flex: 1; }

  .topbar__crumbs {
    display: flex;
    align-items: center;
    gap: var(--s2);
    font-size: var(--t-sm);
    color: var(--ink-faint);
    min-width: 0;
    overflow: hidden;
    white-space: nowrap;
  }
  .topbar__crumbs a { text-decoration: none; }
  .topbar__crumbs a:hover { text-decoration: underline; color: var(--ink); }
  .topbar__crumbs li { display: flex; align-items: center; gap: var(--s2); min-width: 0; }
  .topbar__crumbs li + li::before { content: '/'; color: var(--rule-strong); }
  .topbar__crumbs [aria-current] {
    color: var(--ink);
    font-weight: 500;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  /* The search affordance. A button rather than a second input, so it cannot
     compete with the palette's own field for focus or for the shortcut key. */
  .topbar__search {
    display: flex;
    align-items: center;
    gap: var(--s2);
    min-width: 14rem;
    padding: 0.375rem 0.5rem 0.375rem 0.625rem;
    font-size: var(--t-sm);
    color: var(--ink-faint);
    background: var(--surface);
    border: 1px solid var(--rule-strong);
    border-radius: var(--r);
    transition: border-color 0.12s var(--ease), color 0.12s var(--ease);
  }
  .topbar__search:hover { border-color: var(--ink-faint); color: var(--ink-muted); }
  .topbar__search span { flex: 1; text-align: left; }
  .topbar__search svg { opacity: 0.7; }

  .kbd {
    font-family: var(--font-mono);
    font-size: var(--t-2xs);
    line-height: 1;
    padding: 0.1875rem 0.3125rem;
    color: var(--ink-muted);
    background: var(--surface-alt);
    border: 1px solid var(--rule-strong);
    border-bottom-width: 2px;
    border-radius: 3px;
  }

  @media (max-width: 960px) {
    /* The search collapses to its icon before the breadcrumb has to truncate:
       the crumb says where you are, which is the more perishable information. */
    .topbar__search { min-width: 0; }
    .topbar__search span, .topbar__search .kbd { display: none; }
    .topbar__username { display: none; }
  }

  @media (max-width: 700px) {
    .topbar__crumbs li:not(:last-child) { display: none; }
  }

  .page {
    flex: 1;
    width: 100%;
    max-width: var(--content-max);
    margin-inline: auto;
    padding: var(--s5) var(--s5) var(--s8);
  }

  .page__head {
    display: flex;
    align-items: flex-start;
    gap: var(--s4);
    flex-wrap: wrap;
    margin-bottom: var(--s5);
  }

  .page__title {
    font-size: var(--t-xl);
    letter-spacing: -0.011em;
    line-height: 1.15;
  }

  .page__sub { margin-top: var(--s1); color: var(--ink-muted); font-size: var(--t-sm); }

  .page__actions { margin-left: auto; display: flex; gap: var(--s2); flex-wrap: wrap; }

  /* --- generic arrangements ------------------------------------------- */

  .stack   { display: flex; flex-direction: column; gap: var(--s4); }
  .stack-2 { display: flex; flex-direction: column; gap: var(--s2); }
  .stack-5 { display: flex; flex-direction: column; gap: var(--s5); }
  .row     { display: flex; align-items: center; gap: var(--s3); flex-wrap: wrap; }
  .row-tight { display: flex; align-items: center; gap: var(--s2); }

  /* Detail pages: the record on the left, its context on the right. Collapses
     to one column before the sidebar gets too narrow to be worth having. */
  .split {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 20rem;
    gap: var(--s5);
    align-items: start;
  }

  .grid-2 { display: grid; grid-template-columns: repeat(auto-fit, minmax(18rem, 1fr)); gap: var(--s4); }
  .grid-3 { display: grid; grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr)); gap: var(--s4); }
  .grid-4 { display: grid; grid-template-columns: repeat(auto-fit, minmax(10.5rem, 1fr)); gap: var(--s3); }

  /* The dashboard row carries up to seven figures. At 10.5rem only six fit a
     desktop, and the seventh sat alone on a row of its own — which reads as a
     different, lesser kind of number. */
  .grid-4--tiles { grid-template-columns: repeat(auto-fit, minmax(8.75rem, 1fr)); }

  /* ---------------------------------------------------------------------
     Responsive
     ---------------------------------------------------------------------
     Two steps. Below 1100px the rail collapses to icons — a technician on a
     laptop in a van needs the screen width more than the labels. Below 820px
     it becomes an off-canvas drawer.
     ------------------------------------------------------------------- */

  @media (max-width: 1180px) {
    .split { grid-template-columns: minmax(0, 1fr); }
  }

  @media (max-width: 1100px) and (min-width: 821px) {
    .app { grid-template-columns: var(--rail-w-collapsed) minmax(0, 1fr); }
    .rail__link { justify-content: center; padding-inline: 0; }
    .rail__link span, .rail__count, .rail__foot, .rail__logo { display: none; }
    .rail__section { justify-content: center; margin-top: var(--s3); padding: 0; }
    .rail__section > span:first-child, .rail__chevron { display: none; }
    /* A group's initial is its toggle at this width. Drawn as a small badge
       rather than a bare letter, which read as a rendering fault. */
    .rail__section::before {
      content: attr(data-short);
      display: grid;
      place-items: center;
      width: 1.75rem;
      height: 1.25rem;
      font-size: var(--t-2xs);
      font-weight: 600;
      letter-spacing: 0.04em;
      border: 1px solid color-mix(in srgb, currentColor 35%, transparent);
      border-radius: 999px;
    }
    .rail__group[open] > .rail__section::before { background: color-mix(in srgb, currentColor 18%, transparent); }
    .rail__group-links .rail__link { margin-top: 2px; }
    .rail__brand { height: var(--topbar-h); justify-content: center; padding-inline: 0; }
    .rail__mark-icon { display: block; }
  }

  @media (max-width: 820px) {
    .app { grid-template-columns: minmax(0, 1fr); }

    .rail {
      position: fixed;
      inset: 0 auto 0 0;
      width: min(var(--rail-w), 80vw);
      z-index: 60;
      transform: translateX(-100%);
      transition: transform 0.2s var(--ease);
      box-shadow: var(--shadow-3);
    }
    .app[data-nav="open"] .rail { transform: translateX(0); }

    .nav-scrim {
      display: block;
      position: fixed;
      inset: 0;
      z-index: 50;
      background: rgba(10, 12, 24, 0.5);
      opacity: 0;
      pointer-events: none;
      transition: opacity 0.2s var(--ease);
    }
    .app[data-nav="open"] .nav-scrim { opacity: 1; pointer-events: auto; }

    .page { padding: var(--s4) var(--s4) var(--s7); }
    .topbar { padding-inline: var(--s4); }
  }

}

/* The drawer toggle only exists at drawer width.
 *
 * In the `utilities` layer rather than `layout`, because the button also
 * carries `.btn`, whose `display: inline-flex` lives in the later
 * `components` layer and would otherwise win regardless of specificity. */
@layer utilities {
  .nav-toggle { display: none; }
  @media (max-width: 820px) { .nav-toggle { display: inline-flex; } }
}

@layer layout {

  /* The running-clock indicator. Amber because it is a state that needs
     ending, not an error — and it is a link, because the only useful response
     to seeing it is to go and stop it. */
  .topbar__clock {
    display: flex;
    align-items: center;
    gap: 0.375rem;
    padding: 0.3125rem 0.5rem;
    font-size: var(--t-xs);
    font-weight: 500;
    color: var(--warn);
    background: var(--warn-tint);
    border: 1px solid color-mix(in srgb, var(--warn) 35%, transparent);
    border-radius: var(--r);
    text-decoration: none;
    white-space: nowrap;
  }
  .topbar__clock:hover { border-color: var(--warn); }
  .topbar__clock-since { opacity: 0.8; }

  @media (max-width: 960px) {
    .topbar__clock-since { display: none; }
  }
}