@charset "UTF-8";
/* ============================================================================
   Lyle Company house stylesheet — v1.1
   First deployment: Crown Billing (cb).  Intended to be reused as-is.

   Install:  cb/public/css/app.css
   Load order (vendor/head.php does this) — this file must come LAST:

     Bootstrap 5.3 (CDN)
     page stylesheets: DataTables, Buttons, Select, Editor
     css/app.css

   v1.1 (2026-09-30): the vendor bridge now targets Bootstrap 5.3, which the
   app has run since August; v1.0 bridged Bootstrap 3 and never loaded (head.php
   pointed at less/app.css, a 404). Bootstrap 5 is driven by --bs-* variables,
   so section 7 maps those to our tokens. Section 6 holds the Crown Billing
   dashboard. The v1.0 file is still at less/app.css if a Bootstrap 3 app needs
   it.

   ---------------------------------------------------------------------------
   BROWSER POLICY: Baseline Widely available only.
   Used here:  custom properties, @layer, :is()/:where()/:has(), oklch(),
               color-mix(), container queries (inline-size), logical properties,
               clamp(), gap, aspect-ratio, accent-color, :focus-visible, dvh.
   Deliberately NOT used (Baseline Newly available or narrower as of 2026-07):
               light-dark(), contrast-color(), relative color syntax
               `oklch(from …)`, @property, @scope, @starting-style,
               field-sizing, container style queries, scrollbar-gutter,
               text-wrap: balance (used once, guarded by @supports).
   Native CSS nesting is also avoided: it only reached Widely available in
   mid-2026, and flat selectors survive a LESS build pass unchanged.
   ---------------------------------------------------------------------------
   CASCADE NOTE — read before editing.
   Unlayered CSS beats ALL layered CSS, regardless of source order. Bootstrap 5
   and DataTables ship unlayered, so anything of ours that has to override them
   must ALSO be unlayered. That is why sections 1-6 are inside @layer (our own
   lc- prefixed components, which vendors never touch) and section 7 — the
   vendor bridge — is not.
   If you ever import Bootstrap into a layer, e.g.
       @import url("bootstrap.css") layer(vendor);
   then move section 7 into a layer declared after `vendor` and delete this note.
   ---------------------------------------------------------------------------
   NAMING: every class we own is prefixed `lc-` (Lyle Company), never `cb-`.
   The prefix is the reuse contract — it guarantees no collision with Bootstrap,
   DataTables, Editor, or tablesorter, in this app or the next one.
   ============================================================================ */

@layer lc.tokens, lc.base, lc.layout, lc.components, lc.project, lc.utilities;


/* ============================================================================
   1. TOKENS
   Primitives are raw color. Semantics are the only thing components may read.
   To rebrand for a future project, change the primitives and leave the rest.
   ============================================================================ */

@layer lc.tokens {

  :root {
    color-scheme: light dark;

    /* -- Primitives: neutrals -------------------------------------------------
       Cool steel gray, hue 250. Galvanized, not warm — this is infrastructure
       software, and a warm gray reads as marketing. Hex approximations are for
       anyone matching a color in a mail-merge or an Excel export. */
    --lc-gray-0:   oklch(99.2% 0.003 250);   /* ≈ #fbfcfe */
    --lc-gray-50:  oklch(97.6% 0.005 250);   /* ≈ #f4f6fa */
    --lc-gray-100: oklch(95.0% 0.008 250);   /* ≈ #eaeef6 */
    --lc-gray-200: oklch(91.0% 0.011 250);   /* ≈ #dde3ee */
    --lc-gray-300: oklch(85.0% 0.013 250);   /* ≈ #cbd3e2 */
    --lc-gray-400: oklch(72.0% 0.016 250);   /* ≈ #a3adc2 */
    --lc-gray-500: oklch(60.0% 0.018 250);   /* ≈ #808ba4 */
    --lc-gray-600: oklch(50.0% 0.019 250);   /* ≈ #656f88 */
    --lc-gray-700: oklch(40.0% 0.019 250);   /* ≈ #4c5570 */
    --lc-gray-800: oklch(30.0% 0.018 250);   /* ≈ #343c54 */
    --lc-gray-900: oklch(22.0% 0.017 250);   /* ≈ #222a3e */
    --lc-gray-950: oklch(16.0% 0.016 250);   /* ≈ #161c2c */

    /* -- Primitives: brand ---------------------------------------------------
       Deep indigo-steel. Reads as utility software rather than SaaS-blue. */
    --lc-brand-50:  oklch(96.5% 0.020 265);
    --lc-brand-100: oklch(93.0% 0.038 265);
    --lc-brand-200: oklch(86.0% 0.065 265);
    --lc-brand-400: oklch(62.0% 0.135 265);
    --lc-brand-500: oklch(53.0% 0.155 265);
    --lc-brand-600: oklch(46.0% 0.160 265);
    --lc-brand-700: oklch(39.0% 0.145 265);
    --lc-brand-900: oklch(26.0% 0.095 265);

    /* -- Primitives: the ledger axis ----------------------------------------
       SIGNATURE. This app moves money in two directions and the schema keeps
       them in mirrored table pairs (crown_invoice/vendor_invoice,
       ar_charge/ap_charge, ar_schedule/ap_schedule). Nearly every mistake a
       clerk can make is doing the right thing on the wrong side of the ledger.
       So direction gets a permanent, non-negotiable color:

         AR — receivable, billable to Crown, money IN  → teal
         AP — payable, commission out to the RPM, OUT  → ochre

       These two hues are reserved. Do not reuse them for status, validation,
       or decoration anywhere in the app. */
    --lc-ar-50:   oklch(96.5% 0.022 195);
    --lc-ar-100:  oklch(93.0% 0.042 195);
    --lc-ar-300:  oklch(78.0% 0.080 195);
    --lc-ar-600:  oklch(48.0% 0.100 195);
    --lc-ar-700:  oklch(41.0% 0.090 195);
    --lc-ar-900:  oklch(27.0% 0.060 195);

    --lc-ap-50:   oklch(96.5% 0.028 75);
    --lc-ap-100:  oklch(93.0% 0.052 75);
    --lc-ap-300:  oklch(80.0% 0.095 75);
    --lc-ap-600:  oklch(55.0% 0.110 75);
    --lc-ap-700:  oklch(47.0% 0.100 75);
    --lc-ap-900:  oklch(30.0% 0.065 75);

    /* -- Primitives: state ---------------------------------------------------
       Success is a green distinct from AR teal so "posted" never reads as
       "receivable". Danger is brick, not fire-engine — it appears next to
       dollar figures all day and must not scream. */
    --lc-ok-50:      oklch(96.5% 0.025 155);
    --lc-ok-100:     oklch(92.5% 0.050 155);
    --lc-ok-600:     oklch(52.0% 0.120 155);
    --lc-ok-700:     oklch(44.0% 0.110 155);

    --lc-warn-50:    oklch(97.0% 0.030 85);
    --lc-warn-100:   oklch(93.5% 0.060 85);
    --lc-warn-600:   oklch(60.0% 0.130 85);
    --lc-warn-700:   oklch(50.0% 0.115 85);

    --lc-danger-50:  oklch(96.5% 0.022 28);
    --lc-danger-100: oklch(93.0% 0.042 28);
    --lc-danger-600: oklch(51.0% 0.160 28);
    --lc-danger-700: oklch(43.0% 0.150 28);

    /* -- Semantics: surface & ink -------------------------------------------- */
    --lc-surface:          var(--lc-gray-0);
    --lc-surface-sunken:   var(--lc-gray-50);
    --lc-surface-raised:   #fff;
    --lc-surface-inset:    var(--lc-gray-100);
    --lc-surface-hover:    var(--lc-gray-50);
    --lc-surface-selected: var(--lc-brand-50);

    --lc-ink:          var(--lc-gray-900);
    --lc-ink-muted:    var(--lc-gray-600);
    --lc-ink-subtle:   var(--lc-gray-500);
    --lc-ink-inverted: var(--lc-gray-0);
    --lc-ink-link:     var(--lc-brand-600);

    --lc-border:        var(--lc-gray-200);
    --lc-border-strong: var(--lc-gray-300);
    --lc-border-input:  var(--lc-gray-300);

    --lc-accent:       var(--lc-brand-600);
    --lc-accent-hover: var(--lc-brand-700);
    --lc-accent-soft:  var(--lc-brand-50);
    --lc-focus-ring:   var(--lc-brand-500);

    /* Ledger accent. Set once on a page wrapper; every component below reads
       it. Defaults to neutral so a non-financial page is never tinted. */
    --lc-ledger:       var(--lc-gray-400);
    --lc-ledger-soft:  var(--lc-gray-100);
    --lc-ledger-ink:   var(--lc-gray-700);

    /* -- Semantics: type ------------------------------------------------------
       One family, three roles. A contrasting display serif would be wrong for a
       12-grid data-entry app — the typographic personality here lives in the
       NUMERALS (tabular, lining, accounting-negative), not in the headings.
       System stack means no webfont request and native Segoe UI Variable on the
       Windows workstations this runs on. */
    --lc-font-ui:   system-ui, -apple-system, "Segoe UI Variable Text",
                    "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    --lc-font-num:  ui-monospace, "Cascadia Mono", "SFMono-Regular", Consolas,
                    "Liberation Mono", Menlo, monospace;

    --lc-text-2xs:  0.6875rem;   /* 11px — table meta, column hints */
    --lc-text-xs:   0.75rem;     /* 12px — badges, captions */
    --lc-text-sm:   0.8125rem;   /* 13px — dense grid body */
    --lc-text-base: 0.875rem;    /* 14px — app default, matches BS3 */
    --lc-text-md:   1rem;
    --lc-text-lg:   1.125rem;
    --lc-text-xl:   1.375rem;
    --lc-text-2xl:  1.75rem;
    --lc-text-3xl:  clamp(1.75rem, 1.35rem + 1.4vw, 2.25rem);

    --lc-weight-normal: 400;
    --lc-weight-medium: 500;
    --lc-weight-semi:   600;
    --lc-weight-bold:   700;

    --lc-leading-tight: 1.25;
    --lc-leading-snug:  1.4;
    --lc-leading-body:  1.55;

    --lc-tracking-caps: 0.06em;

    /* -- Semantics: space (4px base) ------------------------------------------ */
    --lc-space-1:  0.25rem;
    --lc-space-2:  0.5rem;
    --lc-space-3:  0.75rem;
    --lc-space-4:  1rem;
    --lc-space-5:  1.25rem;
    --lc-space-6:  1.5rem;
    --lc-space-8:  2rem;
    --lc-space-10: 2.5rem;
    --lc-space-12: 3rem;

    /* -- Semantics: shape, depth, motion -------------------------------------- */
    --lc-radius-sm:   3px;
    --lc-radius-md:   5px;
    --lc-radius-lg:   8px;
    --lc-radius-pill: 999px;

    --lc-shadow-sm: 0 1px 2px oklch(22% 0.017 250 / 0.07);
    --lc-shadow-md: 0 1px 2px oklch(22% 0.017 250 / 0.06),
                    0 4px 12px oklch(22% 0.017 250 / 0.08);
    --lc-shadow-lg: 0 2px 4px oklch(22% 0.017 250 / 0.06),
                    0 12px 32px oklch(22% 0.017 250 / 0.14);

    --lc-motion-fast: 110ms;
    --lc-motion-base: 180ms;
    --lc-ease:        cubic-bezier(0.32, 0.72, 0, 1);

    --lc-z-sticky:  100;
    --lc-z-navbar:  200;
    --lc-z-overlay: 900;
    --lc-z-modal:   1000;
    --lc-z-toast:   1100;

    --lc-page-max: 100rem;
  }

  /* -- Dark theme -----------------------------------------------------------
     Two triggers: OS preference, and a manual [data-theme] on <html> for the
     user toggle. `[data-theme="light"]` lets someone on a dark OS force light,
     which matters when they are reading an invoice next to a paper copy.
     Semantics are remapped; primitives are untouched. */
  @media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) {
      --lc-surface:          var(--lc-gray-950);
      --lc-surface-sunken:   oklch(13% 0.015 250);
      --lc-surface-raised:   var(--lc-gray-900);
      --lc-surface-inset:    var(--lc-gray-800);
      --lc-surface-hover:    var(--lc-gray-800);
      --lc-surface-selected: var(--lc-brand-900);

      --lc-ink:          var(--lc-gray-100);
      --lc-ink-muted:    var(--lc-gray-400);
      --lc-ink-subtle:   var(--lc-gray-500);
      --lc-ink-inverted: var(--lc-gray-950);
      --lc-ink-link:     var(--lc-brand-200);

      --lc-border:        var(--lc-gray-800);
      --lc-border-strong: var(--lc-gray-700);
      --lc-border-input:  var(--lc-gray-700);

      --lc-accent:       var(--lc-brand-400);
      --lc-accent-hover: var(--lc-brand-200);
      --lc-accent-soft:  var(--lc-brand-900);
      --lc-focus-ring:   var(--lc-brand-400);

      --lc-ledger:      var(--lc-gray-500);
      --lc-ledger-soft: var(--lc-gray-800);
      --lc-ledger-ink:  var(--lc-gray-300);

      --lc-shadow-sm: 0 1px 2px oklch(0% 0 0 / 0.4);
      --lc-shadow-md: 0 1px 2px oklch(0% 0 0 / 0.3), 0 4px 12px oklch(0% 0 0 / 0.4);
      --lc-shadow-lg: 0 2px 4px oklch(0% 0 0 / 0.3), 0 12px 32px oklch(0% 0 0 / 0.5);
    }
  }

  :root[data-theme="dark"] {
    color-scheme: dark;
    --lc-surface:          var(--lc-gray-950);
    --lc-surface-sunken:   oklch(13% 0.015 250);
    --lc-surface-raised:   var(--lc-gray-900);
    --lc-surface-inset:    var(--lc-gray-800);
    --lc-surface-hover:    var(--lc-gray-800);
    --lc-surface-selected: var(--lc-brand-900);
    --lc-ink:          var(--lc-gray-100);
    --lc-ink-muted:    var(--lc-gray-400);
    --lc-ink-subtle:   var(--lc-gray-500);
    --lc-ink-inverted: var(--lc-gray-950);
    --lc-ink-link:     var(--lc-brand-200);
    --lc-border:        var(--lc-gray-800);
    --lc-border-strong: var(--lc-gray-700);
    --lc-border-input:  var(--lc-gray-700);
    --lc-accent:       var(--lc-brand-400);
    --lc-accent-hover: var(--lc-brand-200);
    --lc-accent-soft:  var(--lc-brand-900);
    --lc-focus-ring:   var(--lc-brand-400);
    --lc-ledger:      var(--lc-gray-500);
    --lc-ledger-soft: var(--lc-gray-800);
    --lc-ledger-ink:  var(--lc-gray-300);
    --lc-shadow-sm: 0 1px 2px oklch(0% 0 0 / 0.4);
    --lc-shadow-md: 0 1px 2px oklch(0% 0 0 / 0.3), 0 4px 12px oklch(0% 0 0 / 0.4);
    --lc-shadow-lg: 0 2px 4px oklch(0% 0 0 / 0.3), 0 12px 32px oklch(0% 0 0 / 0.5);
  }

  :root[data-theme="light"] { color-scheme: light; }
}


/* ============================================================================
   2. BASE
   Bootstrap 3 bundles Normalize and sets border-box globally, so this is
   deliberately thin — only what BS3 gets wrong or leaves undone.
   ============================================================================ */

@layer lc.base {

  html {
    -webkit-text-size-adjust: 100%;
    text-size-adjust: 100%;
  }

  body {
    background-color: var(--lc-surface-sunken);
    color: var(--lc-ink);
    font-family: var(--lc-font-ui);
    font-size: var(--lc-text-base);
    line-height: var(--lc-leading-body);
    min-block-size: 100dvh;
    -webkit-font-smoothing: antialiased;
  }

  /* BS3 leaves h1-h6 with browser margins and light weights. Tighten for
     density; every heading in this app sits above a table. */
  h1, h2, h3, h4, h5, h6 {
    color: var(--lc-ink);
    font-family: var(--lc-font-ui);
    font-weight: var(--lc-weight-semi);
    line-height: var(--lc-leading-tight);
    margin-block: 0 var(--lc-space-3);
  }

  h1 { font-size: var(--lc-text-2xl); letter-spacing: -0.015em; }
  h2 { font-size: var(--lc-text-xl);  letter-spacing: -0.01em; }
  h3 { font-size: var(--lc-text-lg); }
  h4 { font-size: var(--lc-text-md); }
  h5, h6 { font-size: var(--lc-text-base); }

  p { margin-block: 0 var(--lc-space-4); }
  p:last-child { margin-block-end: 0; }

  a {
    color: var(--lc-ink-link);
    text-decoration-thickness: 1px;
    text-underline-offset: 0.15em;
    transition: color var(--lc-motion-fast) var(--lc-ease);
  }
  a:hover { color: var(--lc-accent-hover); }

  /* One visible, consistent focus ring everywhere. BS3's default is a faint
     inset glow that fails on dark surfaces. */
  :where(a, button, input, select, textarea, summary, [tabindex]):focus-visible {
    outline: 2px solid var(--lc-focus-ring);
    outline-offset: 2px;
    border-radius: var(--lc-radius-sm);
  }
  :where(a, button, input, select, textarea, summary, [tabindex]):focus:not(:focus-visible) {
    outline: none;
  }

  ::selection {
    background-color: color-mix(in oklch, var(--lc-accent) 25%, transparent);
    color: var(--lc-ink);
  }

  hr {
    border: 0;
    border-block-start: 1px solid var(--lc-border);
    margin-block: var(--lc-space-6);
  }

  code, kbd, samp, pre { font-family: var(--lc-font-num); font-size: 0.9em; }

  input, select, textarea, button { font-family: inherit; }
  input, textarea, select { accent-color: var(--lc-accent); }

  /* Anything that is a dollar amount, a rate, a BUN, or a date lines up in a
     column. Tabular figures are not optional in a billing app. */
  input[type="number"],
  input[inputmode="decimal"],
  input[inputmode="numeric"] {
    font-variant-numeric: tabular-nums lining-nums;
    text-align: end;
  }

  @media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
      animation-duration: 0.01ms !important;
      animation-iteration-count: 1 !important;
      transition-duration: 0.01ms !important;
      scroll-behavior: auto !important;
    }
  }
}


/* ============================================================================
   3. LAYOUT
   Bootstrap 3's float grid still runs the page. These are the shells that sit
   inside a .container / .row and are never given a BS3 name.
   ============================================================================ */

@layer lc.layout {

  .lc-app {
    display: flex;
    flex-direction: column;
    min-block-size: 100dvh;
  }

  .lc-main {
    flex: 1 0 auto;
    padding-block: var(--lc-space-6) var(--lc-space-10);
  }

  .lc-page {
    inline-size: 100%;
    margin-inline: auto;
    max-inline-size: var(--lc-page-max);
    padding-inline: var(--lc-space-4);
  }

  .lc-page--narrow { max-inline-size: 52rem; }

  /* Page header: title, the ledger side it belongs to, and its actions. */
  .lc-page__head {
    align-items: flex-end;
    border-block-end: 1px solid var(--lc-border);
    display: flex;
    flex-wrap: wrap;
    gap: var(--lc-space-3) var(--lc-space-6);
    justify-content: space-between;
    margin-block-end: var(--lc-space-6);
    padding-block-end: var(--lc-space-4);
  }

  .lc-page__titles { min-inline-size: 0; }

  .lc-page__eyebrow {
    color: var(--lc-ledger-ink);
    display: block;
    font-size: var(--lc-text-2xs);
    font-weight: var(--lc-weight-semi);
    letter-spacing: var(--lc-tracking-caps);
    margin-block-end: var(--lc-space-1);
    text-transform: uppercase;
  }

  .lc-page__title {
    font-size: var(--lc-text-2xl);
    letter-spacing: -0.015em;
    margin: 0;
  }

  .lc-page__lede {
    color: var(--lc-ink-muted);
    margin-block-start: var(--lc-space-2);
    max-inline-size: 62ch;
  }

  .lc-page__actions {
    display: flex;
    flex-wrap: wrap;
    gap: var(--lc-space-2);
  }

  /* Generic composition helpers. */
  .lc-stack       { display: flex; flex-direction: column; gap: var(--lc-space-4); }
  .lc-stack--tight { gap: var(--lc-space-2); }
  .lc-stack--loose { gap: var(--lc-space-8); }

  .lc-cluster {
    align-items: center;
    display: flex;
    flex-wrap: wrap;
    gap: var(--lc-space-2) var(--lc-space-3);
  }
  .lc-cluster--between { justify-content: space-between; }

  .lc-grid {
    display: grid;
    gap: var(--lc-space-4);
    grid-template-columns: repeat(auto-fit, minmax(min(16rem, 100%), 1fr));
  }
}


/* ============================================================================
   4. COMPONENTS
   ============================================================================ */

@layer lc.components {

  /* -- Ledger side ----------------------------------------------------------
     THE signature. Put .lc-ledger--ar or .lc-ledger--ap on any wrapper — a
     page, a card, a modal — and everything inside inherits the direction of
     money. Nothing else in the app is allowed to use these two hues. */
  .lc-ledger--ar {
    --lc-ledger:      var(--lc-ar-600);
    --lc-ledger-soft: var(--lc-ar-50);
    --lc-ledger-ink:  var(--lc-ar-700);
  }
  .lc-ledger--ap {
    --lc-ledger:      var(--lc-ap-600);
    --lc-ledger-soft: var(--lc-ap-50);
    --lc-ledger-ink:  var(--lc-ap-700);
  }
  @media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) .lc-ledger--ar {
      --lc-ledger-soft: var(--lc-ar-900);
      --lc-ledger-ink:  var(--lc-ar-300);
    }
    :root:not([data-theme="light"]) .lc-ledger--ap {
      --lc-ledger-soft: var(--lc-ap-900);
      --lc-ledger-ink:  var(--lc-ap-300);
    }
  }
  :root[data-theme="dark"] .lc-ledger--ar {
    --lc-ledger-soft: var(--lc-ar-900);
    --lc-ledger-ink:  var(--lc-ar-300);
  }
  :root[data-theme="dark"] .lc-ledger--ap {
    --lc-ledger-soft: var(--lc-ap-900);
    --lc-ledger-ink:  var(--lc-ap-300);
  }

  /* A 3px rule down the inline-start edge of the page header is the whole
     tell. Cheap, always visible, impossible to misread. */
  .lc-ledger--ar .lc-page__head,
  .lc-ledger--ap .lc-page__head {
    border-inline-start: 3px solid var(--lc-ledger);
    padding-inline-start: var(--lc-space-4);
  }

  /* -- Card ------------------------------------------------------------------
     container-type: inline-size, never `size` — sizing on the block axis makes
     percentage heights inside unresolvable. */
  .lc-card {
    background-color: var(--lc-surface-raised);
    border: 1px solid var(--lc-border);
    border-radius: var(--lc-radius-lg);
    box-shadow: var(--lc-shadow-sm);
    container-type: inline-size;
    overflow: clip;
  }

  .lc-card__head {
    align-items: center;
    background-color: var(--lc-surface-sunken);
    border-block-end: 1px solid var(--lc-border);
    display: flex;
    flex-wrap: wrap;
    gap: var(--lc-space-2) var(--lc-space-4);
    justify-content: space-between;
    padding: var(--lc-space-3) var(--lc-space-4);
  }

  .lc-card__title {
    font-size: var(--lc-text-base);
    font-weight: var(--lc-weight-semi);
    margin: 0;
  }

  .lc-card__body { padding: var(--lc-space-4); }
  .lc-card__body--flush { padding: 0; }

  .lc-card__foot {
    background-color: var(--lc-surface-sunken);
    border-block-start: 1px solid var(--lc-border);
    color: var(--lc-ink-muted);
    font-size: var(--lc-text-xs);
    padding: var(--lc-space-3) var(--lc-space-4);
  }

  .lc-card--ledger { border-inline-start: 3px solid var(--lc-ledger); }
  .lc-card--ledger .lc-card__head {
    background-color: var(--lc-ledger-soft);
    color: var(--lc-ledger-ink);
  }

  /* -- Stat tile -------------------------------------------------------------
     For the dashboard: AR outstanding, payments MTD, unbilled commission. */
  .lc-stat {
    background-color: var(--lc-surface-raised);
    border: 1px solid var(--lc-border);
    border-inline-start: 3px solid var(--lc-ledger);
    border-radius: var(--lc-radius-lg);
    container-type: inline-size;
    display: flex;
    flex-direction: column;
    gap: var(--lc-space-1);
    padding: var(--lc-space-4);
  }

  .lc-stat__label {
    color: var(--lc-ink-muted);
    font-size: var(--lc-text-2xs);
    font-weight: var(--lc-weight-semi);
    letter-spacing: var(--lc-tracking-caps);
    text-transform: uppercase;
  }

  .lc-stat__value {
    font-family: var(--lc-font-num);
    font-size: var(--lc-text-2xl);
    font-variant-numeric: tabular-nums lining-nums;
    font-weight: var(--lc-weight-semi);
    letter-spacing: -0.02em;
    line-height: 1.1;
  }

  .lc-stat__meta {
    color: var(--lc-ink-subtle);
    font-size: var(--lc-text-xs);
  }

  /* Tile grows its number when it has room, without a viewport breakpoint —
     the same tile works in a 4-up dashboard row and a narrow sidebar. */
  @container (min-width: 20rem) {
    .lc-stat__value { font-size: var(--lc-text-3xl); }
  }

  /* -- Numbers ---------------------------------------------------------------
     Accounting convention: right-aligned, tabular, negatives in parentheses
     via .lc-num--neg. Wrap the digits only — never the currency symbol column. */
  .lc-num {
    font-family: var(--lc-font-num);
    font-variant-numeric: tabular-nums lining-nums;
    text-align: end;
    white-space: nowrap;
  }

  .lc-num--neg { color: var(--lc-danger-600); }
  .lc-num--neg::before { content: "("; }
  .lc-num--neg::after  { content: ")"; }

  .lc-num--zero { color: var(--lc-ink-subtle); }
  .lc-num--total {
    border-block-start: 1px solid var(--lc-border-strong);
    font-weight: var(--lc-weight-semi);
  }
  /* Double rule under a grand total, the way a ledger closes a column. */
  .lc-num--grand {
    border-block-end: 3px double var(--lc-ink);
    font-weight: var(--lc-weight-bold);
  }

  /* -- Badge -----------------------------------------------------------------
     Status only. Never used for AR/AP direction — that is the border's job. */
  .lc-badge {
    align-items: center;
    background-color: var(--lc-surface-inset);
    border-radius: var(--lc-radius-pill);
    color: var(--lc-ink-muted);
    display: inline-flex;
    font-size: var(--lc-text-2xs);
    font-weight: var(--lc-weight-semi);
    gap: var(--lc-space-1);
    letter-spacing: 0.02em;
    line-height: 1;
    padding: 0.3em 0.7em;
    text-transform: uppercase;
    white-space: nowrap;
  }

  .lc-badge--draft    { background-color: var(--lc-surface-inset);  color: var(--lc-ink-muted); }
  .lc-badge--open     { background-color: var(--lc-brand-50);       color: var(--lc-brand-700); }
  .lc-badge--sent     { background-color: var(--lc-brand-100);      color: var(--lc-brand-700); }
  .lc-badge--partial  { background-color: var(--lc-warn-50);        color: var(--lc-warn-700); }
  .lc-badge--paid     { background-color: var(--lc-ok-50);          color: var(--lc-ok-700); }
  .lc-badge--overdue  { background-color: var(--lc-danger-50);      color: var(--lc-danger-700); }
  .lc-badge--void     { background-color: var(--lc-surface-inset);  color: var(--lc-ink-subtle);
                        text-decoration: line-through; }

  /* -- Aging buckets ---------------------------------------------------------
     A real sequence, so it gets a real ramp: calm at current, brick at 90+.
     Matches vw_crown_ar_aging. */
  .lc-aging {
    border-radius: var(--lc-radius-sm);
    display: inline-block;
    font-family: var(--lc-font-num);
    font-size: var(--lc-text-xs);
    font-variant-numeric: tabular-nums lining-nums;
    padding: 0.15em 0.5em;
  }
  .lc-aging--current { background-color: var(--lc-ok-50);     color: var(--lc-ok-700); }
  .lc-aging--b30     { background-color: var(--lc-surface-inset); color: var(--lc-ink-muted); }
  .lc-aging--b60     { background-color: var(--lc-warn-50);   color: var(--lc-warn-700); }
  .lc-aging--b90     { background-color: var(--lc-warn-100);  color: var(--lc-warn-700); }
  .lc-aging--b90plus { background-color: var(--lc-danger-100); color: var(--lc-danger-700);
                       font-weight: var(--lc-weight-semi); }

  /* -- Definition list, for read-only invoice/deal detail panes -------------- */
  .lc-facts {
    display: grid;
    gap: var(--lc-space-1) var(--lc-space-4);
    grid-template-columns: minmax(8rem, max-content) 1fr;
    margin: 0;
  }
  .lc-facts dt {
    color: var(--lc-ink-muted);
    font-size: var(--lc-text-xs);
    font-weight: var(--lc-weight-medium);
  }
  .lc-facts dd { margin: 0; }
  @container (max-width: 26rem) {
    .lc-facts { grid-template-columns: 1fr; gap: 0; }
    .lc-facts dd { margin-block-end: var(--lc-space-2); }
  }

  /* -- Toolbar above a grid -------------------------------------------------- */
  .lc-toolbar {
    align-items: center;
    background-color: var(--lc-surface-raised);
    border: 1px solid var(--lc-border);
    border-radius: var(--lc-radius-md);
    display: flex;
    flex-wrap: wrap;
    gap: var(--lc-space-2) var(--lc-space-3);
    margin-block-end: var(--lc-space-4);
    padding: var(--lc-space-2) var(--lc-space-3);
  }
  .lc-toolbar__spacer { flex: 1 1 auto; }

  /* -- Field (for hand-built forms: login, filters — not Editor) ------------- */
  .lc-field { display: flex; flex-direction: column; gap: var(--lc-space-1); }

  .lc-field__label {
    color: var(--lc-ink);
    font-size: var(--lc-text-xs);
    font-weight: var(--lc-weight-semi);
  }

  .lc-field__hint { color: var(--lc-ink-subtle); font-size: var(--lc-text-xs); }

  .lc-field__error {
    color: var(--lc-danger-600);
    font-size: var(--lc-text-xs);
    font-weight: var(--lc-weight-medium);
  }

  /* Required marker reads to screen readers as text, not as a decorative star. */
  .lc-field__label[data-required]::after {
    color: var(--lc-danger-600);
    content: " *";
    font-weight: var(--lc-weight-bold);
  }

  /* -- Alert ----------------------------------------------------------------- */
  .lc-alert {
    border: 1px solid var(--lc-border);
    border-inline-start: 3px solid var(--lc-ink-muted);
    border-radius: var(--lc-radius-md);
    background-color: var(--lc-surface-raised);
    padding: var(--lc-space-3) var(--lc-space-4);
  }
  .lc-alert__title { font-weight: var(--lc-weight-semi); margin-block-end: var(--lc-space-1); }
  .lc-alert--info    { border-inline-start-color: var(--lc-brand-600);  background-color: var(--lc-brand-50); }
  .lc-alert--ok      { border-inline-start-color: var(--lc-ok-600);     background-color: var(--lc-ok-50); }
  .lc-alert--warn    { border-inline-start-color: var(--lc-warn-600);   background-color: var(--lc-warn-50); }
  .lc-alert--danger  { border-inline-start-color: var(--lc-danger-600); background-color: var(--lc-danger-50); }

  /* -- Empty state -----------------------------------------------------------
     An empty grid is an invitation to act, so it always carries the action. */
  .lc-empty {
    color: var(--lc-ink-muted);
    padding: var(--lc-space-10) var(--lc-space-4);
    text-align: center;
  }
  .lc-empty__title {
    color: var(--lc-ink);
    font-size: var(--lc-text-md);
    font-weight: var(--lc-weight-semi);
    margin-block-end: var(--lc-space-1);
  }
  .lc-empty__body { margin-inline: auto; max-inline-size: 44ch; }

  /* -- Login card ------------------------------------------------------------ */
  .lc-login {
    align-items: center;
    display: flex;
    justify-content: center;
    min-block-size: 100dvh;
    padding: var(--lc-space-6);
  }
  .lc-login__card {
    background-color: var(--lc-surface-raised);
    border: 1px solid var(--lc-border);
    border-radius: var(--lc-radius-lg);
    box-shadow: var(--lc-shadow-lg);
    inline-size: 100%;
    max-inline-size: 24rem;
    padding: var(--lc-space-8);
  }
  .lc-login__brand {
    color: var(--lc-ink-muted);
    font-size: var(--lc-text-2xs);
    font-weight: var(--lc-weight-semi);
    letter-spacing: var(--lc-tracking-caps);
    margin-block-end: var(--lc-space-2);
    text-transform: uppercase;
  }

  /* -- Sticky table head, for long grids ------------------------------------- */
  .lc-sticky-head thead th {
    background-color: var(--lc-surface-sunken);
    inset-block-start: 0;
    position: sticky;
    z-index: var(--lc-z-sticky);
  }
}


/* ============================================================================
   5. UTILITIES
   Deliberately short. Utilities are an escape hatch, not a system.
   ============================================================================ */

@layer lc.utilities {
  .lc-visually-hidden {
    block-size: 1px;
    clip-path: inset(50%);
    inline-size: 1px;
    overflow: hidden;
    position: absolute;
    white-space: nowrap;
  }
  .lc-visually-hidden:focus-visible {
    block-size: auto;
    clip-path: none;
    inline-size: auto;
    padding: var(--lc-space-2);
  }

  .lc-muted     { color: var(--lc-ink-muted); }
  .lc-subtle    { color: var(--lc-ink-subtle); }
  .lc-nowrap    { white-space: nowrap; }
  .lc-tabular   { font-variant-numeric: tabular-nums lining-nums; }
  .lc-text-end  { text-align: end; }
  .lc-caps {
    font-size: var(--lc-text-2xs);
    font-weight: var(--lc-weight-semi);
    letter-spacing: var(--lc-tracking-caps);
    text-transform: uppercase;
  }
  .lc-truncate {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
}

@supports (text-wrap: balance) {
  @layer lc.utilities {
    .lc-balance { text-wrap: balance; }
  }
}


/* ============================================================================
   6. PROJECT — Crown Billing only
   Layered like sections 1-5 (lc- classes only, no vendor to beat), in the
   lc.project layer declared between components and utilities. Everything
   above this section stays portable to the next app.
   ============================================================================ */

@layer lc.project {

  /* Page shell under the fixed-top navbar. */
  .lc-shell {
    margin-inline: auto;
    max-inline-size: var(--lc-page-max);
    padding: calc(52px + var(--lc-space-8)) var(--lc-space-4) var(--lc-space-10);
  }

  /* -- Dashboard stat tiles as links ---------------------------------------- */
  a.lc-stat {
    color: inherit;
    text-decoration: none;
    transition: border-color var(--lc-motion-fast) var(--lc-ease),
                box-shadow var(--lc-motion-base) var(--lc-ease),
                transform var(--lc-motion-base) var(--lc-ease);
  }
  a.lc-stat:hover {
    border-color: var(--lc-border-strong);
    box-shadow: var(--lc-shadow-md);
    color: inherit;
    transform: translateY(-1px);
  }
  .lc-stat__value--muted { color: var(--lc-ink-subtle); }

  /* -- Aging bar: one stacked bar, then a legend with the figures ----------- */
  .lc-agebar {
    background-color: var(--lc-surface-inset);
    border-radius: var(--lc-radius-pill);
    display: flex;
    block-size: 10px;
    margin-block: var(--lc-space-2) var(--lc-space-4);
    overflow: clip;
  }
  .lc-agebar__seg { block-size: 100%; min-inline-size: 3px; }
  .lc-agebar__seg--current { background-color: var(--lc-ok-600); }
  .lc-agebar__seg--b30     { background-color: var(--lc-gray-400); }
  .lc-agebar__seg--b60     { background-color: var(--lc-warn-600); }
  .lc-agebar__seg--b90plus { background-color: var(--lc-danger-600); }

  .lc-agelegend {
    display: grid;
    gap: var(--lc-space-2) var(--lc-space-4);
    grid-template-columns: repeat(auto-fit, minmax(9rem, 1fr));
    list-style: none;
    margin: 0;
    padding: 0;
  }
  .lc-agelegend li { display: flex; flex-direction: column; gap: 2px; }

  /* -- "Needs attention" list ------------------------------------------------ */
  .lc-attn { list-style: none; margin: 0; padding: 0; }
  .lc-attn li {
    align-items: center;
    border-block-end: 1px solid var(--lc-border);
    display: flex;
    gap: var(--lc-space-3);
    justify-content: space-between;
    padding: var(--lc-space-3) var(--lc-space-4);
  }
  .lc-attn li:last-child { border-block-end: 0; }
  .lc-attn__count {
    font-family: var(--lc-font-num);
    font-variant-numeric: tabular-nums lining-nums;
    font-weight: var(--lc-weight-semi);
    min-inline-size: 2.5ch;
    text-align: end;
  }
  .lc-attn__count--zero { color: var(--lc-ink-subtle); font-weight: var(--lc-weight-normal); }

  /* Two-column dashboard body; stacks on narrow screens. */
  .lc-dash-cols {
    display: grid;
    gap: var(--lc-space-4);
    grid-template-columns: repeat(auto-fit, minmax(min(26rem, 100%), 1fr));
    margin-block: var(--lc-space-4);
  }
  /* Side-by-side cards share a row height; the body takes the slack so each
     footer sits at the bottom instead of floating mid-card. */
  .lc-dash-cols > .lc-card { display: flex; flex-direction: column; }
  .lc-dash-cols > .lc-card > .lc-card__body { flex: 1 1 auto; }
  .lc-agelegend { grid-template-columns: repeat(auto-fit, minmax(7.5rem, 1fr)); }
}


/* ============================================================================
   7. VENDOR BRIDGE — UNLAYERED ON PURPOSE
   Bootstrap 5, DataTables and Editor ship unlayered CSS. Unlayered beats
   layered, so these overrides cannot live in a @layer or they will lose.
   Specificity here intentionally mirrors the vendor selector it replaces.
   ============================================================================ */

/* -- Bootstrap 5.3: theme variables -----------------------------------------
   Bootstrap 5 styles itself through --bs-* custom properties, declared
   unlayered on :root. Its reboot (body, headings, links) therefore beats the
   layered rules in section 2. Mapping the variables to our semantic tokens
   is what actually applies the house look; the component rules below only
   cover what the variables cannot reach.
   Selector mirrors Bootstrap's own, so this later sheet wins on source order.
   Light only for now: head.php sets data-theme="light" on <html>, because
   DataTables and Editor ship no dark styles we have verified. Remove that
   attribute (and add a data-bs-theme sync) to turn dark mode on later. */
:root,
[data-bs-theme="light"] {
  --bs-body-font-family:   var(--lc-font-ui);
  --bs-body-font-size:     var(--lc-text-base);
  --bs-body-line-height:   var(--lc-leading-body);
  --bs-body-color:         var(--lc-ink);
  --bs-body-bg:            var(--lc-surface-sunken);
  --bs-emphasis-color:     var(--lc-gray-950);
  --bs-secondary-color:    var(--lc-ink-muted);
  --bs-secondary-bg:       var(--lc-surface-inset);
  --bs-tertiary-color:     var(--lc-ink-subtle);
  --bs-tertiary-bg:        var(--lc-surface-sunken);
  --bs-heading-color:      var(--lc-ink);
  --bs-link-color:         var(--lc-ink-link);
  --bs-link-hover-color:   var(--lc-accent-hover);
  --bs-border-color:       var(--lc-border);
  --bs-border-color-translucent: var(--lc-border);
  --bs-border-radius:      var(--lc-radius-md);
  --bs-border-radius-sm:   var(--lc-radius-sm);
  --bs-border-radius-lg:   var(--lc-radius-lg);
  --bs-box-shadow-sm:      var(--lc-shadow-sm);
  --bs-box-shadow:         var(--lc-shadow-md);
  --bs-box-shadow-lg:      var(--lc-shadow-lg);
  --bs-focus-ring-color:   color-mix(in oklch, var(--lc-focus-ring) 25%, transparent);
}

body { -webkit-font-smoothing: antialiased; }

/* Reboot sizes headings with viewport calc() for marketing pages. This app
   is dense data entry; every heading sits above a grid. */
h1, .h1, h2, .h2, h3, .h3, h4, .h4, h5, .h5, h6, .h6 {
  font-weight: var(--lc-weight-semi);
  line-height: var(--lc-leading-tight);
  margin-block: 0 var(--lc-space-3);
}
h1, .h1 { font-size: var(--lc-text-2xl); letter-spacing: -0.015em; }
h2, .h2 { font-size: var(--lc-text-xl);  letter-spacing: -0.01em; }
h3, .h3 { font-size: var(--lc-text-lg); }
h4, .h4 { font-size: var(--lc-text-md); }
h5, .h5, h6, .h6 { font-size: var(--lc-text-base); }

/* The unlayered heading rules above would out-rank our layered title
   components, so their sizing is restated here, unlayered. */
.lc-page__title { font-size: var(--lc-text-2xl); margin: 0; }
.lc-card__title { font-size: var(--lc-text-base); margin: 0; }

/* Bootstrap 5.3 colours links from an RGB-triplet variable, which an oklch()
   token cannot feed, so links are set directly. Class-based components
   (.btn, .nav-link, .dropdown-item) out-rank this element selector. */
a { color: var(--lc-ink-link); text-underline-offset: 0.15em; }
a:hover { color: var(--lc-accent-hover); }

/* House components built on <a> and <ul>, restated unlayered: the reboot's
   element rules above (and Bootstrap's own ul padding) would otherwise beat
   their layered definitions in sections 4 and 6. */
a.lc-stat,
a.lc-stat:hover { color: inherit; text-decoration: none; }
.lc-attn,
.lc-agelegend { margin: 0; padding: 0; }

/* -- Bootstrap 5.3: buttons --------------------------------------------------- */
.btn {
  --bs-btn-padding-x: 14px;
  --bs-btn-padding-y: 6px;
  --bs-btn-font-size: var(--lc-text-base);
  --bs-btn-font-weight: var(--lc-weight-medium);
  --bs-btn-border-radius: var(--lc-radius-md);
  --bs-btn-focus-box-shadow: 0 0 0 3px color-mix(in oklch, var(--lc-focus-ring) 25%, transparent);
  transition: background-color var(--lc-motion-fast) var(--lc-ease),
              border-color var(--lc-motion-fast) var(--lc-ease),
              color var(--lc-motion-fast) var(--lc-ease);
}
.btn-sm {
  --bs-btn-padding-x: 10px;
  --bs-btn-padding-y: 4px;
  --bs-btn-font-size: var(--lc-text-xs);
}
.btn-primary {
  --bs-btn-color: #fff;
  --bs-btn-bg: var(--lc-accent);
  --bs-btn-border-color: var(--lc-accent);
  --bs-btn-hover-color: #fff;
  --bs-btn-hover-bg: var(--lc-accent-hover);
  --bs-btn-hover-border-color: var(--lc-accent-hover);
  --bs-btn-active-color: #fff;
  --bs-btn-active-bg: var(--lc-accent-hover);
  --bs-btn-active-border-color: var(--lc-accent-hover);
  --bs-btn-disabled-color: #fff;
  --bs-btn-disabled-bg: var(--lc-accent);
  --bs-btn-disabled-border-color: var(--lc-accent);
}
/* The neutral button. Bootstrap 5 dropped .btn-default; secondary and
   outline-secondary both render as the house neutral. */
.btn-secondary,
.btn-outline-secondary {
  --bs-btn-color: var(--lc-ink);
  --bs-btn-bg: var(--lc-surface-raised);
  --bs-btn-border-color: var(--lc-border-strong);
  --bs-btn-hover-color: var(--lc-ink);
  --bs-btn-hover-bg: var(--lc-surface-hover);
  --bs-btn-hover-border-color: var(--lc-gray-400);
  --bs-btn-active-color: var(--lc-ink);
  --bs-btn-active-bg: var(--lc-surface-inset);
  --bs-btn-active-border-color: var(--lc-gray-400);
  --bs-btn-disabled-color: var(--lc-ink-subtle);
  --bs-btn-disabled-bg: var(--lc-surface-raised);
  --bs-btn-disabled-border-color: var(--lc-border);
}
.btn-danger {
  --bs-btn-color: #fff;
  --bs-btn-bg: var(--lc-danger-600);
  --bs-btn-border-color: var(--lc-danger-600);
  --bs-btn-hover-color: #fff;
  --bs-btn-hover-bg: var(--lc-danger-700);
  --bs-btn-hover-border-color: var(--lc-danger-700);
  --bs-btn-active-bg: var(--lc-danger-700);
  --bs-btn-active-border-color: var(--lc-danger-700);
}
.btn-success {
  --bs-btn-color: #fff;
  --bs-btn-bg: var(--lc-ok-600);
  --bs-btn-border-color: var(--lc-ok-600);
  --bs-btn-hover-color: #fff;
  --bs-btn-hover-bg: var(--lc-ok-700);
  --bs-btn-hover-border-color: var(--lc-ok-700);
  --bs-btn-active-bg: var(--lc-ok-700);
  --bs-btn-active-border-color: var(--lc-ok-700);
}
/* On the dark navbar. */
.btn-outline-light {
  --bs-btn-color: var(--lc-gray-100);
  --bs-btn-border-color: var(--lc-gray-600);
  --bs-btn-hover-color: #fff;
  --bs-btn-hover-bg: var(--lc-gray-800);
  --bs-btn-hover-border-color: var(--lc-gray-500);
  --bs-btn-active-color: #fff;
  --bs-btn-active-bg: var(--lc-gray-700);
  --bs-btn-active-border-color: var(--lc-gray-500);
}
.btn-link { --bs-btn-color: var(--lc-ink-link); --bs-btn-hover-color: var(--lc-accent-hover); }

/* -- Bootstrap 5.3: forms ---------------------------------------------------- */
.form-control,
.form-select {
  background-color: var(--lc-surface-raised);
  border-color: var(--lc-border-input);
  border-radius: var(--lc-radius-md);
  color: var(--lc-ink);
  font-size: var(--lc-text-base);
  padding-block: 6px;
  padding-inline-start: 10px;
  transition: border-color var(--lc-motion-fast) var(--lc-ease),
              box-shadow var(--lc-motion-fast) var(--lc-ease);
}
.form-control { padding-inline-end: 10px; }
.form-control:focus,
.form-select:focus {
  border-color: var(--lc-focus-ring);
  box-shadow: 0 0 0 3px color-mix(in oklch, var(--lc-focus-ring) 22%, transparent);
}
.form-control::placeholder { color: var(--lc-ink-subtle); }
.form-control:disabled,
.form-control[readonly],
.form-select:disabled {
  background-color: var(--lc-surface-inset);
  color: var(--lc-ink-muted);
}
.form-label {
  color: var(--lc-ink);
  font-size: var(--lc-text-xs);
  font-weight: var(--lc-weight-semi);
  margin-block-end: var(--lc-space-1);
}
.form-text { color: var(--lc-ink-subtle); font-size: var(--lc-text-xs); }
.form-control.is-invalid,
.form-select.is-invalid { border-color: var(--lc-danger-600); }
.invalid-feedback {
  color: var(--lc-danger-600);
  font-size: var(--lc-text-xs);
  font-weight: var(--lc-weight-medium);
}
.form-check-input:checked { background-color: var(--lc-accent); border-color: var(--lc-accent); }
.form-check-input:focus {
  border-color: var(--lc-focus-ring);
  box-shadow: 0 0 0 3px color-mix(in oklch, var(--lc-focus-ring) 22%, transparent);
}

/* -- Bootstrap 5.3: navbar ----------------------------------------------------
   Markup: <nav class="navbar navbar-expand-lg navbar-dark lc-navbar fixed-top">.
   .navbar-dark supplies the light toggler icon; .lc-navbar is the steel bar. */
.lc-navbar {
  --bs-navbar-color: var(--lc-gray-300);
  --bs-navbar-hover-color: #fff;
  --bs-navbar-active-color: #fff;
  --bs-navbar-brand-color: var(--lc-gray-0);
  --bs-navbar-brand-hover-color: #fff;
  --bs-navbar-toggler-border-color: var(--lc-gray-700);
  --bs-navbar-padding-y: var(--lc-space-2);
  background-color: var(--lc-gray-900);
  border-block-end: 1px solid var(--lc-gray-800);
  box-shadow: var(--lc-shadow-sm);
  min-height: 52px;
}
.lc-navbar .navbar-brand {
  font-size: var(--lc-text-md);
  font-weight: var(--lc-weight-semi);
  letter-spacing: -0.01em;
}
.lc-navbar .nav-link {
  border-radius: var(--lc-radius-md);
  font-weight: var(--lc-weight-medium);
  padding-inline: var(--lc-space-3);
  transition: color var(--lc-motion-fast) var(--lc-ease),
              background-color var(--lc-motion-fast) var(--lc-ease);
}
.lc-navbar .nav-link:hover,
.lc-navbar .nav-link:focus-visible,
.lc-navbar .nav-link.show { background-color: var(--lc-gray-800); }
.lc-navbar .nav-link.active {
  background-color: var(--lc-gray-800);
  box-shadow: inset 0 -2px 0 var(--lc-brand-400);
}

/* -- Bootstrap 5.3: dropdowns ------------------------------------------------ */
.dropdown-menu {
  --bs-dropdown-bg: var(--lc-surface-raised);
  --bs-dropdown-border-color: var(--lc-border);
  --bs-dropdown-border-radius: var(--lc-radius-md);
  --bs-dropdown-font-size: var(--lc-text-base);
  --bs-dropdown-color: var(--lc-ink);
  --bs-dropdown-link-color: var(--lc-ink);
  --bs-dropdown-link-hover-color: var(--lc-ink);
  --bs-dropdown-link-hover-bg: var(--lc-surface-hover);
  --bs-dropdown-link-active-color: #fff;
  --bs-dropdown-link-active-bg: var(--lc-accent);
  --bs-dropdown-header-color: var(--lc-ink-subtle);
  --bs-dropdown-divider-bg: var(--lc-border);
  --bs-dropdown-item-padding-y: 6px;
  box-shadow: var(--lc-shadow-md);
}
.dropdown-header {
  font-size: var(--lc-text-2xs);
  letter-spacing: var(--lc-tracking-caps);
  text-transform: uppercase;
}

/* -- Bootstrap 5.3: cards, tables, badges, alerts, modals -------------------- */
.card {
  --bs-card-bg: var(--lc-surface-raised);
  --bs-card-border-color: var(--lc-border);
  --bs-card-border-radius: var(--lc-radius-lg);
  --bs-card-inner-border-radius: calc(var(--lc-radius-lg) - 1px);
  --bs-card-cap-bg: var(--lc-surface-sunken);
  --bs-card-cap-padding-y: var(--lc-space-3);
  --bs-card-cap-padding-x: var(--lc-space-4);
  box-shadow: var(--lc-shadow-sm);
}

.table {
  --bs-table-color: var(--lc-ink);
  --bs-table-bg: var(--lc-surface-raised);
  --bs-table-border-color: var(--lc-border);
  --bs-table-striped-color: var(--lc-ink);
  --bs-table-striped-bg: var(--lc-surface-sunken);
  --bs-table-hover-color: var(--lc-ink);
  --bs-table-hover-bg: var(--lc-surface-hover);
  --bs-table-active-color: var(--lc-ink);
  --bs-table-active-bg: var(--lc-surface-selected);
  font-size: var(--lc-text-sm);
}
.table > thead > tr > th {
  background-color: var(--lc-surface-sunken);
  border-block-end: 1px solid var(--lc-border-strong);
  color: var(--lc-ink-muted);
  font-size: var(--lc-text-2xs);
  font-weight: var(--lc-weight-semi);
  letter-spacing: var(--lc-tracking-caps);
  text-transform: uppercase;
  vertical-align: middle;
  white-space: nowrap;
}
.table > :not(caption) > * > * { padding: 7px 10px; vertical-align: middle; }

/* Money columns: mark the <th>/<td> and alignment plus tabular figures follow. */
.table th.lc-col-num,
.table td.lc-col-num {
  font-family: var(--lc-font-num);
  font-variant-numeric: tabular-nums lining-nums;
  text-align: end;
}

.badge {
  --bs-badge-font-size: var(--lc-text-2xs);
  --bs-badge-font-weight: var(--lc-weight-semi);
  --bs-badge-padding-x: 0.7em;
  --bs-badge-padding-y: 0.3em;
  --bs-badge-border-radius: var(--lc-radius-pill);
  letter-spacing: 0.02em;
  text-transform: uppercase;
}

.alert {
  --bs-alert-border-radius: var(--lc-radius-md);
  --bs-alert-padding-y: var(--lc-space-3);
  --bs-alert-padding-x: var(--lc-space-4);
  border-inline-start-width: 3px;
}
.alert-info    { --bs-alert-bg: var(--lc-brand-50);  --bs-alert-color: var(--lc-brand-700);  --bs-alert-border-color: var(--lc-border); border-inline-start-color: var(--lc-brand-600); }
.alert-success { --bs-alert-bg: var(--lc-ok-50);     --bs-alert-color: var(--lc-ok-700);     --bs-alert-border-color: var(--lc-border); border-inline-start-color: var(--lc-ok-600); }
.alert-warning { --bs-alert-bg: var(--lc-warn-50);   --bs-alert-color: var(--lc-warn-700);   --bs-alert-border-color: var(--lc-border); border-inline-start-color: var(--lc-warn-600); }
.alert-danger  { --bs-alert-bg: var(--lc-danger-50); --bs-alert-color: var(--lc-danger-700); --bs-alert-border-color: var(--lc-border); border-inline-start-color: var(--lc-danger-600); }

.modal {
  --bs-modal-bg: var(--lc-surface-raised);
  --bs-modal-border-color: var(--lc-border);
  --bs-modal-border-radius: var(--lc-radius-lg);
  --bs-modal-box-shadow: var(--lc-shadow-lg);
  --bs-modal-header-border-color: var(--lc-border);
  --bs-modal-footer-border-color: var(--lc-border);
}
.modal-backdrop { --bs-backdrop-opacity: 0.55; }

.breadcrumb {
  --bs-breadcrumb-font-size: var(--lc-text-xs);
  --bs-breadcrumb-divider-color: var(--lc-ink-subtle);
  --bs-breadcrumb-item-active-color: var(--lc-ink-muted);
}

/* -- DataTables ------------------------------------------------------------
   Both generations are covered. DataTables 2 renamed every element class to a
   dt- prefix (dataTables_wrapper → dt-container, dataTables_filter → dt-search,
   dataTables_paginate → dt-paging, and so on), so a 1.x-only sheet silently
   stops applying after an upgrade. Delete whichever block you are not on.
   ------------------------------------------------------------------------- */

/* DataTables 1.x */
.dataTables_wrapper { color: var(--lc-ink); }
.dataTables_length,
.dataTables_filter,
.dataTables_info,
.dataTables_paginate {
  color: var(--lc-ink-muted);
  font-size: var(--lc-text-xs);
}
.dataTables_filter input,
.dataTables_length select {
  background-color: var(--lc-surface-raised);
  border: 1px solid var(--lc-border-input);
  border-radius: var(--lc-radius-md);
  color: var(--lc-ink);
  padding: 4px 8px;
}
.dataTables_paginate .paginate_button {
  border-radius: var(--lc-radius-sm) !important;
  color: var(--lc-ink-muted) !important;
}
.dataTables_paginate .paginate_button.current {
  background: var(--lc-accent) !important;
  border-color: var(--lc-accent) !important;
  color: #fff !important;
}
.dataTables_empty { color: var(--lc-ink-subtle); padding: var(--lc-space-8) !important; }

/* DataTables 2.x */
.dt-container { color: var(--lc-ink); font-size: var(--lc-text-sm); }
.dt-layout-row { margin-block: var(--lc-space-2); }
.dt-search,
.dt-length,
.dt-info,
.dt-paging {
  color: var(--lc-ink-muted);
  font-size: var(--lc-text-xs);
}
.dt-input,
.dt-search input,
.dt-length select {
  background-color: var(--lc-surface-raised);
  border: 1px solid var(--lc-border-input);
  border-radius: var(--lc-radius-md);
  color: var(--lc-ink);
  padding: 4px 8px;
}
.dt-input:focus,
.dt-search input:focus {
  border-color: var(--lc-focus-ring);
  box-shadow: 0 0 0 3px color-mix(in oklch, var(--lc-focus-ring) 22%, transparent);
  outline: none;
}
.dt-paging-button {
  border-radius: var(--lc-radius-sm);
  color: var(--lc-ink-muted);
}
.dt-paging-button.current {
  background: var(--lc-accent);
  border-color: var(--lc-accent);
  color: #fff;
}
.dt-paging-button:hover:not(.disabled):not(.current) {
  background: var(--lc-surface-hover);
  color: var(--lc-ink);
}

/* Sort indicators, both generations. */
table.dataTable thead th {
  background-color: var(--lc-surface-sunken);
  border-block-end: 1px solid var(--lc-border-strong);
  color: var(--lc-ink-muted);
  font-size: var(--lc-text-2xs);
  font-weight: var(--lc-weight-semi);
  letter-spacing: var(--lc-tracking-caps);
  text-transform: uppercase;
  white-space: nowrap;
}
table.dataTable thead th.sorting_asc,
table.dataTable thead th.sorting_desc,
table.dataTable thead th.dt-ordering-asc,
table.dataTable thead th.dt-ordering-desc {
  box-shadow: inset 0 -2px 0 var(--lc-ledger);
  color: var(--lc-ink);
}
table.dataTable tbody tr.selected > * {
  box-shadow: inset 0 0 0 9999px var(--lc-surface-selected) !important;
  color: var(--lc-ink) !important;
}
table.dataTable tbody td { padding: 7px 10px; }

/* DataTables Buttons */
.dt-buttons { display: inline-flex; flex-wrap: wrap; gap: var(--lc-space-2); }
.dt-button {
  background: var(--lc-surface-raised) !important;
  background-image: none !important;
  border: 1px solid var(--lc-border-strong) !important;
  border-radius: var(--lc-radius-md) !important;
  color: var(--lc-ink) !important;
  font-size: var(--lc-text-xs) !important;
  font-weight: var(--lc-weight-medium) !important;
  padding: 5px 12px !important;
}
.dt-button:hover:not(.disabled) {
  background: var(--lc-surface-hover) !important;
  border-color: var(--lc-gray-400) !important;
}

/* -- DataTables Editor ------------------------------------------------------
   The 12 CRUD grids all render through this, so it carries the most weight.
   ------------------------------------------------------------------------- */
div.DTE_Header,
div.DTE_Header_Content {
  background-color: var(--lc-surface-sunken);
  border-block-end: 1px solid var(--lc-border);
  color: var(--lc-ink);
  font-size: var(--lc-text-md);
  font-weight: var(--lc-weight-semi);
}

div.DTE_Body,
div.DTE_Body_Content { background-color: var(--lc-surface-raised); }

div.DTE_Body div.DTE_Field {
  border-block-end: 1px solid var(--lc-border);
  padding: var(--lc-space-3) var(--lc-space-4);
}
div.DTE_Body div.DTE_Field:last-child { border-block-end: 0; }

div.DTE_Field > label,
div.DTE_Label {
  color: var(--lc-ink);
  font-size: var(--lc-text-xs);
  font-weight: var(--lc-weight-semi);
}

div.DTE_Field input[type="text"],
div.DTE_Field input[type="password"],
div.DTE_Field input[type="number"],
div.DTE_Field input[type="date"],
div.DTE_Field input[type="email"],
div.DTE_Field select,
div.DTE_Field textarea {
  background-color: var(--lc-surface-raised);
  border: 1px solid var(--lc-border-input);
  border-radius: var(--lc-radius-md);
  box-shadow: none;
  color: var(--lc-ink);
  font-family: inherit;
  font-size: var(--lc-text-base);
  padding: 6px 10px;
  width: 100%;
}
div.DTE_Field input:focus,
div.DTE_Field select:focus,
div.DTE_Field textarea:focus {
  border-color: var(--lc-focus-ring);
  box-shadow: 0 0 0 3px color-mix(in oklch, var(--lc-focus-ring) 22%, transparent);
  outline: none;
}

/* Money and rate inputs. Add class: "lc-col-num" to the Editor field def and
   the amount lines up with the column it will land in. */
div.DTE_Field.lc-col-num input {
  font-family: var(--lc-font-num);
  font-variant-numeric: tabular-nums lining-nums;
  text-align: end;
}

div.DTE_Field div.DTE_Field_Info,
div.DTE_Field div.DTE_Field_Message {
  color: var(--lc-ink-subtle);
  font-size: var(--lc-text-xs);
}

div.DTE_Field.DTE_Field_StateError input,
div.DTE_Field.DTE_Field_StateError select,
div.DTE_Field.DTE_Field_StateError textarea { border-color: var(--lc-danger-600); }
div.DTE_Field div.DTE_Field_Error {
  color: var(--lc-danger-600);
  font-size: var(--lc-text-xs);
  font-weight: var(--lc-weight-medium);
}

div.DTE_Footer,
div.DTE_Footer_Content {
  background-color: var(--lc-surface-sunken);
  border-block-start: 1px solid var(--lc-border);
}
div.DTE_Form_Error {
  color: var(--lc-danger-600);
  font-size: var(--lc-text-xs);
  font-weight: var(--lc-weight-medium);
}
div.DTE_Form_Buttons { display: flex; gap: var(--lc-space-2); justify-content: flex-end; }
div.DTE_Form_Buttons button {
  background-color: var(--lc-surface-raised);
  background-image: none;
  border: 1px solid var(--lc-border-strong);
  border-radius: var(--lc-radius-md);
  color: var(--lc-ink);
  font-size: var(--lc-text-base);
  font-weight: var(--lc-weight-medium);
  padding: 6px 16px;
  text-shadow: none;
}
/* Editor puts the confirming action last. Colour it by ledger side so a
   "Create" in the vendor_invoice grid can never be mistaken for a Crown one. */
div.DTE_Form_Buttons button:last-child {
  background-color: var(--lc-accent);
  border-color: var(--lc-accent);
  color: #fff;
}
div.DTE_Action_Remove div.DTE_Form_Buttons button:last-child {
  background-color: var(--lc-danger-600);
  border-color: var(--lc-danger-600);
}

/* Lightbox / envelope chrome */
div.DTED_Lightbox_Wrapper div.DTED_Lightbox_Container div.DTED_Lightbox_Content_Wrapper,
div.DTED_Envelope_Wrapper div.DTED_Envelope_Container {
  background-color: var(--lc-surface-raised);
  border: 1px solid var(--lc-border);
  border-radius: var(--lc-radius-lg);
  box-shadow: var(--lc-shadow-lg);
  overflow: clip;
}
div.DTED_Lightbox_Background > div { background: var(--lc-gray-950); opacity: 0.55; }
div.DTED_Lightbox_Close, div.DTED_Envelope_Close { opacity: 0.6; }
div.DTED_Lightbox_Close:hover, div.DTED_Envelope_Close:hover { opacity: 1; }

/* Inline and bubble editing */
div.DTE_Inline input,
div.DTE_Inline select {
  border: 1px solid var(--lc-focus-ring);
  border-radius: var(--lc-radius-sm);
  padding: 2px 6px;
}
div.DTE_Bubble div.DTE_Bubble_Liner {
  background-color: var(--lc-surface-raised);
  border: 1px solid var(--lc-border);
  border-radius: var(--lc-radius-md);
  box-shadow: var(--lc-shadow-lg);
}
div.DTE_Bubble div.DTE_Bubble_Triangle {
  background-color: var(--lc-surface-raised);
  border-inline-end: 1px solid var(--lc-border);
  border-block-end: 1px solid var(--lc-border);
}

/* Editor Select2/Chosen-style option lists, if used for the FK drop-downs. */
div.DTE_Field div.dt-select-list {
  background-color: var(--lc-surface-raised);
  border: 1px solid var(--lc-border);
  border-radius: var(--lc-radius-md);
}


/* ============================================================================
   8. PRINT
   Invoices and the AR aging report are printed and PDF'd. Anything that is
   chrome comes off; the ledger side survives as a rule, not a colour fill.
   ============================================================================ */

@media print {
  @page {
    margin: 14mm 12mm;
    size: letter portrait;
  }
  @page :first { margin-top: 10mm; }

  :root { color-scheme: light; }

  html, body {
    background: #fff !important;
    color: #000 !important;
    font-size: 10.5pt;
  }

  /* Chrome and interactive controls. */
  .navbar,
  .lc-toolbar,
  .lc-page__actions,
  .dt-buttons,
  .dataTables_filter, .dataTables_length, .dataTables_paginate,
  .dt-search, .dt-length, .dt-paging,
  .DTED_Lightbox_Wrapper, .DTED_Envelope_Wrapper,
  .modal, .modal-backdrop,
  .lc-no-print,
  form .btn, .btn-toolbar {
    display: none !important;
  }

  .lc-main   { padding: 0; }
  .lc-page   { max-inline-size: none; padding-inline: 0; }

  .lc-card,
  .card,
  .lc-stat {
    border: 1px solid #999 !important;
    box-shadow: none !important;
    break-inside: avoid;
  }
  .lc-card__head, .lc-card__foot,
  .card-header, .card-footer { background: none !important; }

  /* Ledger side must survive a mono printer, so it prints as a rule. */
  .lc-ledger--ar .lc-page__head { border-inline-start: 3px solid #000 !important; }
  .lc-ledger--ap .lc-page__head { border-inline-start: 3px double #000 !important; }

  .lc-page__head { break-after: avoid; }
  h1, h2, h3, h4 { break-after: avoid; }

  /* Tables: repeat the header on every page, never split a row. */
  table { border-collapse: collapse !important; width: 100% !important; }
  thead { display: table-header-group; }
  tfoot { display: table-footer-group; }
  tr, .lc-facts { break-inside: avoid; }
  .table > thead > tr > th,
  table.dataTable thead th {
    background: none !important;
    border-block-end: 1.5px solid #000 !important;
    color: #000 !important;
  }
  .table > tbody > tr > td { border-block-start: 0.5px solid #bbb !important; }
  .table-striped > tbody > tr:nth-of-type(odd) > * { --bs-table-bg-type: transparent !important; }

  /* Status and aging read as outlines, not fills — fills waste toner and go
     muddy on a mono laser. */
  .lc-badge, .badge, .lc-aging {
    background: none !important;
    border: 1px solid #000 !important;
    color: #000 !important;
  }

  .lc-num--neg { color: #000 !important; }
  .lc-num--grand { border-block-end: 3px double #000 !important; }

  a { color: #000 !important; text-decoration: none !important; }
  /* Link targets are deliberately NOT expanded: an invoice is a legal document
     and stray URLs after every anchor make it unreadable. */

  .lc-empty { display: none !important; }
}