/* ══════════════════════════════════════════════════════════════
   Station UI — compatibility layer
   ══════════════════════════════════════════════════════════════

   A BRIDGE, NOT A DESTINATION.

   498 pages still carry legacy chrome. Converting them all to real
   Station UI components takes many passes; this sheet makes them stop
   looking *off-brand* in the meantime, so the system reads as one
   product while the rollout proceeds.

   Two deliberate constraints:

   1. COLOR ONLY, NOT LAYOUT.
      This sheet repoints stray gradients, accents and hardcoded greys
      at the --st-* tokens. It does NOT restructure legacy components
      into .station-bar / .stat-rail / .launchpad — that is what the
      per-page migration does, page by page, with verification. A
      blanket layout rewrite across 498 unverified pages would be
      untestable and would break bespoke pages silently.

   2. SCOPED, NOT GLOBAL.
      Every rule sits under .station-scope. A page opts in by adding
      that class to its .page-content div — which the design spec's
      step 7 requires anyway. Nothing changes until a page asks for it,
      and any page can be backed out with a one-line revert.

   Specificity note: page-local <style> blocks load AFTER this linked
   stylesheet, so a bare .page-header rule (0,1,0) in the page would
   beat a bare .page-header rule here. Prefixing with .station-scope
   raises these to (0,2,0), which wins on specificity regardless of
   source order. That is why the scope class is load-bearing here and
   not merely organizational.

   A page graduates off this sheet when its module phase converts it:
   the legacy classes are deleted and the compat rules stop matching.
   ══════════════════════════════════════════════════════════════ */


/* ── Top-of-page spacing ───────────────────────────────────────
   The fixed 70px topbar is compensated THREE times over:

     1. topbar.php  body { padding-top: 70px }
     2. topbar.php  <div class="topbar-spacer"> — height matches the topbar
                    exactly at every breakpoint
     3. app.min.css .page-content { padding-top: calc(45px + 1.5rem) } = 69px

   Any one of those clears the header on its own; together they left ~149px
   of dead space above the first card (measured on list_invoices.php: topbar
   ends at 55px, page content began at 204px).

   (1) and (2) are unconditional and load-bearing — every page that renders a
   .page-content also includes layouts/menu.php, which emits the spacer — so
   the safe one to reclaim is (3), Velzon's assumption that nothing else had
   already made room. Replaced with a deliberate gap.

   Scoped to .station-scope, so pages not yet migrated keep the old spacing
   and this stays revertible per page. */
.page-content.station-scope {
  padding-top: 24px;
}

/* topbar.php also adds `margin-top: 20px` to the first hero/card on the page,
   which was compensating for the same problem from the other direction. */
.station-scope .page-header:first-of-type,
.station-scope .form-card:first-of-type,
.station-scope .filter-card:first-of-type {
  margin-top: 0;
}

/* The Velzon title box carries 19.2px of its own vertical padding on top of
   all this; trim it so the title sits closer to the card it introduces. */
.station-scope .page-title-box {
  padding-top: 0;
  padding-bottom: 12px;
}


/* ── Legacy hero banner (.page-header, ~112 pages) ─────────────
   Ships as a gradient banner in a different arbitrary color per page
   (purple #667eea/#764ba2, green #059669, violet #7c3aed, #8e44ad …).
   Keep the banner's geometry; replace the color with the brand gradient. */
.station-scope .page-header {
  background: var(--st-grad) !important;
  color: #fff;
  border-radius: var(--st-r-lg);
  box-shadow: var(--st-sh-1);
}
.station-scope .page-header h1,
.station-scope .page-header h2,
.station-scope .page-header h3,
.station-scope .page-header h4,
.station-scope .page-header h5,
.station-scope .page-header p {
  color: #fff;
}
/* Muted sub-copy inside the banner: Bootstrap's .text-muted resolves to a
   grey that is unreadable on the gradient. */
.station-scope .page-header .text-muted,
.station-scope .page-header small {
  color: rgba(255, 255, 255, 0.82) !important;
}


/* ── Velzon page title box (.page-title-box, ~350 pages) ───────
   Not a color problem — a typography one. Match the .sb-title /
   .sb-eyebrow scale so a legacy header sits at the same optical weight
   as a real station bar on an adjacent page. */
.station-scope .page-title-box h4 {
  /* app.min.css ships `.page-title-box h4 { font-size: 15px !important }`, so
     specificity alone does not win here — measured on list_invoices.php. Only
     font-size needs the override; weight and colour win on their own. */
  font-size: 20px !important;
  font-weight: 700;
  letter-spacing: -0.01em;
  color: var(--st-ink);
}
.station-scope .page-title-box .breadcrumb {
  font-size: 12px;
}
.station-scope .page-title-box .breadcrumb a {
  color: var(--st-teal-d);
  text-decoration: none;
}
.station-scope .page-title-box .breadcrumb-item.active {
  color: var(--st-ink-3);
}


/* ── Legacy KPI tiles (.stat-card ~87, .info-card ~27) ─────────
   Geometry left alone; surface/border/text repointed so they inherit
   dark mode instead of staying hardcoded white on #e2e8f0. */
.station-scope .stat-card,
.station-scope .info-card,
.station-scope .section-card,
.station-scope .metric-card {
  background: var(--st-surface);
  border: 1px solid var(--st-line);
  border-radius: var(--st-r-md);
  color: var(--st-ink);
  box-shadow: var(--st-sh-1);
}
.station-scope .stat-card .text-muted,
.station-scope .info-card .text-muted,
.station-scope .metric-card .text-muted {
  color: var(--st-ink-3) !important;
}


/* ── Sticky total / summary card (.summary-card, ~12 pages) ────
   A legitimate pattern (highlighted total) that inherited the same
   stray gradient. Per the spec: repoint, don't delete. Only the
   gradient variant is overridden — the plain grey variant is fine. */
.station-scope .summary-card {
  border-radius: var(--st-r-md);
}
.station-scope .summary-card[style*="gradient"],
.station-scope .summary-card.gradient {
  background: var(--st-grad) !important;
  color: #fff;
}


/* ── Legacy quick actions (.quick-action ~6, .action-btn ~25) ── */
.station-scope .quick-action,
.station-scope .action-btn {
  border-radius: var(--st-r-md);
  border-color: var(--st-line);
}
.station-scope .quick-action:hover,
.station-scope .action-btn:hover {
  border-color: var(--st-teal);
  box-shadow: var(--st-sh-1);
}


/* ── Bootstrap primaries inside a scoped page ──────────────────
   Velzon's default primary is a blue that reads as a second brand
   color next to sage/teal. Align it within scoped pages only. */
.station-scope .btn-primary {
  background-color: var(--st-teal);
  border-color: var(--st-teal);
}
.station-scope .btn-primary:hover,
.station-scope .btn-primary:focus {
  background-color: var(--st-teal-d);
  border-color: var(--st-teal-d);
}
.station-scope .btn-outline-primary {
  color: var(--st-teal-d);
  border-color: var(--st-teal);
}
.station-scope .btn-outline-primary:hover {
  background-color: var(--st-teal);
  border-color: var(--st-teal);
  color: #fff;
}
/* Legacy links pick up the brand colour. The exclusion list is load-bearing:
   any Station UI component rendered as an <a> must be named here or compat
   repaints it — .btn-st-solid would end up teal text on the teal gradient.
   Add new link-shaped components to this list. */
.station-scope a:not(:where(.btn, .btn-st, .icon-btn, .lp, .stat, .chip, .nav-link)) {
  color: var(--st-teal-d);
}
/* .seg items carry no class of their own, so they cannot be named above. The
   :where() wrapper is what makes this reachable: a plain :not() chain would
   score (0,7,1) and outrank every component rule in station-ui.css, while
   :where() contributes nothing, leaving the blanket rule at (0,1,1). */
.station-scope .seg > a { color: var(--st-ink-2); }
.station-scope .seg > a.active { color: var(--st-ink); }


/* ── Cards ─────────────────────────────────────────────────────
   Bring plain Bootstrap cards onto the panel surface treatment
   without forcing them to become .panel structurally. */
.station-scope .card {
  border: 1px solid var(--st-line);
  border-radius: var(--st-r-md);
  box-shadow: var(--st-sh-1);
}
.station-scope .card-header {
  background: var(--st-surface-2);
  border-bottom: 1px solid var(--st-line-soft);
  font-weight: 600;
  color: var(--st-ink);
}


/* ── Tables ────────────────────────────────────────────────────
   Match .qtable's header treatment and numeral alignment without
   requiring the markup to change. */
.station-scope .table > thead th {
  color: var(--st-ink-3);
  text-transform: uppercase;
  font-size: 11px;
  letter-spacing: 0.04em;
  font-weight: 600;
  border-bottom: 1px solid var(--st-line);
}
.station-scope .table td {
  color: var(--st-ink);
  border-color: var(--st-line-soft);
}