/* ============================================================================
   LogiCenter – global base styles
   ============================================================================
   Reset, typography, helper classes, the app shell grid, icons, page
   transitions and print rules. Lives in the `base` cascade layer, so any
   component or module stylesheet (later layers) can override it without
   fighting over selector specificity. Layer order is declared in index.html.
   ========================================================================== */
@layer base {

  /* --- Reset ----------------------------------------------------------- */
  *, *::before, *::after { box-sizing: border-box; }
  html, body { margin: 0; padding: 0; height: 100%; }
  html { accent-color: var(--c-primary); }              /* native checkboxes/radios in brand blue */
  body {
    font-family: var(--font);
    font-size: 14px;
    line-height: 1.45;
    color: var(--c-text);
    background: var(--c-bg);
    -webkit-font-smoothing: antialiased;
  }

  /* --- Typography ------------------------------------------------------ */
  h1, h2, h3, h4 { margin: 0 0 .5em; line-height: 1.25; text-wrap: balance; }  /* balance: no lonely last word */
  h1 { font-size: 1.35rem; }
  h2 { font-size: 1.15rem; }
  h3 { font-size: 1rem; }
  p { margin: 0 0 .75em; text-wrap: pretty; }
  a { color: var(--c-primary); }
  button, input, select, textarea { font: inherit; color: inherit; }
  :focus-visible { outline: 3px solid color-mix(in srgb, var(--c-primary) 55%, transparent); outline-offset: 2px; }

  /* --- Helper classes -------------------------------------------------- */
  .hidden { display: none !important; }                 /* toggled from JS */
  .sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  .muted { color: var(--c-text-2); }
  .small { font-size: .82rem; }
  .mono { font-family: var(--font-mono); }
  .row { display: flex; gap: .75rem; align-items: center; flex-wrap: wrap; }
  .row-between { display: flex; gap: .75rem; align-items: center; justify-content: space-between; flex-wrap: wrap; }
  .stack { display: flex; flex-direction: column; gap: .75rem; }
  .grow { flex: 1 1 auto; min-width: 0; }

  /* --- Icons (SVG sprite – see src/shared/icons/icons.js) ---------------
     Sized in `em`, so an icon is always as tall as the text next to it, and
     drawn with `currentColor`, so it takes the text colour (buttons, badges,
     dark mode) with no extra rules. */
  lc-icon { display: inline-flex; flex: none; }
  .icon {
    width: 1.15em; height: 1.15em; flex: none;
    vertical-align: -0.2em;                              /* sit on the text baseline */
    fill: none; stroke: currentColor; stroke-width: 2;
    stroke-linecap: round; stroke-linejoin: round;
  }
  .icon-lg { width: 1.6em; height: 1.6em; }
  .icon-xl { width: 2.4em; height: 2.4em; stroke-width: 1.6; }
  /* "icon + text" pair used inside headings, meta lines and list rows. */
  .with-icon { display: inline-flex; align-items: center; gap: .35em; }

  /* --- Boot screen (shown until the first route renders) --------------- */
  .boot-screen {
    min-height: 100vh; display: grid; place-content: center; justify-items: center; gap: 12px;
    color: var(--c-text-2);
  }
  .boot-logo {
    width: 64px; height: 64px; border-radius: 18px; background: var(--c-primary); color: #fff;
    display: grid; place-items: center; font-weight: 800; font-size: 1.4rem;
    animation: boot-pulse 1.2s var(--ease) infinite alternate;
  }
  @keyframes boot-pulse { from { transform: perspective(300px) rotateY(-18deg); } to { transform: perspective(300px) rotateY(18deg); } }

  /* --- Configuration warning banner (src/shared/components/config-banner) */
  .config-banner {
    display: flex; gap: 10px; align-items: flex-start; padding: 10px 14px;
    background: var(--c-warning-50); color: var(--c-text); border-bottom: 2px solid var(--c-warning);
    font-size: .85rem; position: relative; z-index: 70;
  }
  .config-banner .icon { color: var(--c-warning); margin-top: 1px; }
  .config-banner code { font-family: var(--font-mono); background: color-mix(in srgb, var(--c-warning) 15%, transparent); padding: 0 4px; border-radius: 4px; }

  /* --- App shell: sidebar + main column -------------------------------- */
  .shell { display: grid; grid-template-columns: var(--sidebar-w) 1fr; min-height: 100vh; }
  .shell-main { min-width: 0; display: flex; flex-direction: column; }
  .shell-content { padding: 20px 24px 40px; flex: 1; min-width: 0; }
  .shell-content.flush { padding: 0; }

  /* --- Page transitions --------------------------------------------------
     Modern browsers: the View Transitions API (src/shared/utils/transitions.js)
     snapshots the old page, swaps the DOM and cross-fades. The main content
     area has its own `view-transition-name`, so only it slides in while the
     sidebar and header stay perfectly still.
     Older browsers: the `.view-enter` keyframe animation below is used instead. */
  .shell-content, .driver-content { view-transition-name: main-content; }
  ::view-transition-old(root), ::view-transition-new(root) { animation-duration: .2s; }
  ::view-transition-old(main-content) { animation: vt-fade-out .12s ease-out both; }
  ::view-transition-new(main-content) { animation: vt-rise-in .32s var(--ease) both; }
  @keyframes vt-fade-out { to { opacity: 0; } }
  @keyframes vt-rise-in { from { opacity: 0; transform: translateY(8px); } }

  .view-enter { animation: view-in .35s var(--ease); }  /* fallback (no View Transitions) */
  @keyframes view-in {
    from { opacity: 0; transform: perspective(900px) translateY(8px) rotateX(3deg); }
    to { opacity: 1; transform: none; }
  }

  /* Respect "reduce motion" in the OS: no page animations at all. */
  @media (prefers-reduced-motion: reduce) {
    .view-enter, .boot-logo { animation: none; }
    ::view-transition-group(*), ::view-transition-old(*), ::view-transition-new(*) { animation: none !important; }
  }

  /* Narrow screens: sidebar becomes a bottom bar (see Sidebar.css). */
  @media (max-width: 900px) {
    .shell { grid-template-columns: 1fr; }
    .shell-content { padding: 14px 12px 90px; }
  }

  /* --- Page heading ---------------------------------------------------- */
  .page-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 12px; margin-bottom: 16px; flex-wrap: wrap; }
  .page-head h1 { margin: 0; }
  .page-head p { margin: 2px 0 0; color: var(--c-text-2); }

  /* --- Simple responsive grids ----------------------------------------- */
  .grid-2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
  .grid-3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
  .grid-4 { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; }
  @media (max-width: 1100px) { .grid-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); } .grid-3 { grid-template-columns: 1fr 1fr; } }
  @media (max-width: 700px) { .grid-2, .grid-3, .grid-4 { grid-template-columns: 1fr; } }

  /* --- Print (reports, service records) -------------------------------- */
  @media print {
    .no-print, .sidebar, .app-header, .config-banner { display: none !important; }
    .shell { display: block; }
    body { background: #fff; }
  }
}