/* ============================================================
   SmarterWorkflow -- Custom Stylesheet
   Location: application/flask_app/app/static/css/sw-hub.css
   ============================================================ */

/* ── Corporate CSS Variables ─────────────────────────────── */
:root {
  /* SmarterWorker brand palette — sourced from smarterworker.co.uk + Mission Control */
  --sw-bg:           #f6f4ef;
  --sw-bg-alt:       #efeae0;
  --sw-white:        #ffffff;
  --sw-charcoal:     #131519;
  --sw-gold:         #b6892f;
  --sw-gold-bright:  #d0a447;
  --sw-gold-deep:    #8c6618;
  --sw-gold-tint:    rgba(182,137,47,.14);
  --sw-text:         #1a1c21;
  --sw-text-soft:    #565962;
  --sw-text-muted:   #8d909a;
  --sw-border:       #e8e4dc;
  --sw-green:        #3f9e6b;
  --sw-red:          #cf5a5a;
  --sw-blue:         #3b6db5;
  --sw-shadow:       0 1px 3px rgba(0,0,0,0.06);
  --sw-shadow-md:    0 4px 12px rgba(0,0,0,0.10);
  --sw-radius:       8px;

  /* Nav */
  --sw-nav-bg:       #131519;
  --sw-nav-text:     #f1efe9;
  --sw-nav-muted:    rgba(241,239,233,0.65);

  /* Typography */
  --sw-font:         "Manrope", system-ui, -apple-system, sans-serif;
  --sw-font-secondary: "Cormorant Garamond", "Cormorant", Georgia, serif;
  --sw-font-mono:    "JetBrains Mono", "SF Mono", ui-monospace, Menlo, monospace;

  /* Neutrals + sage. Promoted to real tokens in SW-008r when the legacy
     --wi-* alias block was retired. --sw-grey-700/-400 were previously
     referenced as undefined --wi-grey-700/-400 (rendering only via inline
     fallbacks, or nothing at all where no fallback was given). */
  --sw-sage:         #71777f;
  --sw-sage-tint:    rgba(113,119,127,.14);
  --sw-grey-700:     #495057;
  --sw-grey-400:     #9ca3af;

  /* Declared in CLAUDE.md §7 design tokens but never defined here, so
     `var(--sw-bg-secondary)` (dropdown-item hover) silently did nothing. */
  --sw-bg-secondary:   var(--sw-bg);
  --sw-text-secondary: #6b6560;

  /* [UI001-4] The two dominant hand-picked button colours found across
     the templates (68 of 71 colour-bearing inline button styles). Not a
     remap onto an existing token - both are more than 70 RGB units from
     every token above, so folding them onto one would repaint the most
     used buttons in the app. These record the colours the app already
     uses, not new design decisions. */
  --sw-navy:         #003366;
  --sw-teal:         #008080;

  /* [UI001-3b] Hover/active/focus and alert colours for the Bootstrap
     component-colour overrides below. These are NOT derived from their
     base colours (checked: no consistent darken, lighten, hue shift or
     colour-mix relationship exists between any base and its hover/active
     hex - see BRIEF_UI001_design_system.md Item 3b Step 0 for the
     measured deltas). They are a separate palette held over from before
     the brand's current tokens existed, recorded here exactly as found -
     hover on gold intentionally goes teal, not a darker gold. Anyone
     later looking for the formula should find this note instead and
     stop looking - there isn't one. */
  --sw-success-hover:   #006666;
  --sw-success-active:  #005555;
  --sw-info-hover:      #9e9878;
  --sw-warning-hover:   #7a3d00;
  --sw-secondary-hover: #6a6a6a;
  --sw-dark-hover:      #222222;
  --sw-dark-blue-hover: #002244;
  --sw-teal-hover:      #005f5f;

  --sw-alert-success-text:    #004040;
  --sw-alert-success-bg:      #e0f2f2;
  --sw-alert-success-border:  #b3d9d9;
  --sw-alert-info-text:       #5a5640;
  --sw-alert-info-bg:         #f5f4ed;
  --sw-alert-info-border:     #dddac8;
  --sw-alert-warning-text:    #5c2e00;
  --sw-alert-warning-bg:      #f9ece0;
  --sw-alert-warning-border:  #e8c4a0;

  /* [UI001-5b] Named so Tasks' --surface-muted (sw-tasks.css) points
     at a real token instead of a bare literal. Value matches the 9
     sites in sw-tasks.css that already carried a hardcoded fallback
     for the same undefined variable - not --sw-bg (#f6f4ef), which
     would have put the 50 newly-visible sites at a different shade
     than the 9 that already render today. */
  --sw-surface-muted: #f8f9fa;
}

/* ── Global typography ───────────────────────────────────── */
body {
  font-family: var(--sw-font);
}

/* All headings: corporate font, black, semibold */
h1, h2, h3, h4, h5, h6,
.h1, .h2, .h3, .h4, .h5, .h6 {
  font-family: var(--sw-font);
  color: var(--sw-text);
  font-weight: 600;
}
h1, .h1 { font-size: 2.5rem; }    /* 40px */
h2, .h2 { font-size: 2.25rem; }   /* 36px */
h3, .h3 { font-size: 1.75rem; }   /* 28px */
h4, .h4 { font-size: 1.5rem; }    /* 24px */
h5, .h5 { font-size: 1.25rem; }   /* 20px */
h6, .h6 { font-size: 1rem; }      /* 16px */

/* hgroup: removes default vertical spacing between h2 and its subtitle */
hgroup {
  margin-bottom: 1rem;
}
hgroup > h1, hgroup > h2, hgroup > h3,
hgroup > h4, hgroup > h5, hgroup > h6 {
  margin-bottom: 0;
}

/* Page subtitle — sits under the page-title heading inside <hgroup> */
.page-subtitle {
  font-family: var(--sw-font);
  color: var(--sw-text-soft);
  font-size: 1.3125rem;     /* 21px — 75% of previous 28px */
  font-weight: 400;
  margin-top: 0;
  margin-bottom: 0;
  line-height: 1.3;
}

/* [UI001-2] Shared page-header back-link. Replaces the hand-written
   style="color:#008080" every etl back-link previously hardcoded -
   one of the inline-colour instances named in Step 0 Q3. */
.sw-header-backlink {
  color: var(--sw-gold-deep);
}

/* ── Bootstrap root-token theming [UI001-1] ──────────────
   Redefines Bootstrap 5.3's own :root colour/body/border/link
   variables from this file's existing --sw-* tokens, so a component
   with NO override below (form-select, form-check-input, nav-pills,
   list-group, modal, accordion, progress, pagination, tooltip,
   popover, toast - confirmed via the vendored 5.3.2 CSS to have zero
   sw-hub.css coverage today) gets a branded default instead of
   Bootstrap's stock blue/grey, and utility classes that read
   var(--bs-*-rgb) directly (.text-primary, .bg-primary,
   .border-primary and their success/info/warning/secondary
   counterparts) resolve from these tokens without their own override
   block existing below.

   What this does NOT do, confirmed by testing on two live pages
   before writing this (ETL Dashboard, ETL Connections) with an
   obvious placeholder colour injected at :root: it does not touch
   ANY button, badge, or alert. Bootstrap 5.3.2's own compiled
   .btn-primary/.btn-success/etc. never reference var(--bs-primary) -
   each ships its own hardcoded --bs-btn-bg literal - and the
   component-local override blocks immediately below this one
   (.btn-primary, .btn-success, .bg-*, .badge.bg-*, .alert-*) load
   after Bootstrap's own CSS and win regardless of what is set here.
   Those stay the actual mechanism for buttons/badges/alerts; this
   block is additive, not a replacement for them.

   Token mapping matches this file's OWN existing colour-role remaps
   below (success→gold, info→sage, warning→gold-deep,
   secondary→text-soft, dark→text) so a component covered by both
   this block and a specific override agrees with itself. --bs-danger
   is deliberately left untouched - no --sw-danger token exists, and
   no danger override exists anywhere in this file today, so danger
   stays Bootstrap's stock red rather than inventing a mapping nobody
   has asked for. */
:root {
  --bs-primary:      var(--sw-gold);
  --bs-primary-rgb:  182, 137, 47;
  --bs-success:      var(--sw-gold);
  --bs-success-rgb:  182, 137, 47;
  --bs-info:         var(--sw-sage);
  --bs-info-rgb:     113, 119, 127;
  --bs-warning:      var(--sw-gold-deep);
  --bs-warning-rgb:  140, 102, 24;
  --bs-secondary:    var(--sw-text-soft);
  --bs-secondary-rgb:86, 89, 98;
  --bs-dark:         var(--sw-text);
  --bs-dark-rgb:     26, 28, 33;
  --bs-body-color:   var(--sw-text);
  --bs-body-bg:      var(--sw-bg);
  --bs-border-color: var(--sw-border);
  /* [UI001-2] Resting link colour uses gold-deep, not gold. Plain
     --sw-gold on white is 3.18:1 - below WCAG AA's 4.5:1 for body
     text, the same ratio the app's existing gold buttons already use,
     but buttons are bold/larger text closer to the 3:1 large-text
     threshold; inline link text is not. --sw-gold-deep is 5.21:1,
     passes AA, and is already an established token (warning's colour)
     rather than a new one invented for this - the small role overlap
     with warning is an acceptable trade against a sixth gold variant. */
  --bs-link-color:   var(--sw-gold-deep);
  --bs-link-color-rgb: 140, 102, 24;
  --bs-link-hover-color: var(--sw-gold-deep);
  --bs-link-hover-color-rgb: 140, 102, 24;
}

/* ── Bootstrap colour overrides ─────────────────────────── */

/* Success → Teal */
.btn-success {
  --bs-btn-bg:                var(--sw-gold);
  --bs-btn-border-color:      var(--sw-gold);
  --bs-btn-hover-bg:          var(--sw-success-hover);
  --bs-btn-hover-border-color:var(--sw-success-hover);
  --bs-btn-active-bg:         var(--sw-success-active);
  --bs-btn-color:             #fff;
  --bs-btn-hover-color:       #fff;
}

/* ── Auth-page gold overrides (login.html — extends base.html) ── */
.sw-auth-page .btn-primary {
  background-color: var(--sw-gold);
  border-color: var(--sw-gold);
  color: #ffffff;
}
.sw-auth-page .btn-primary:hover {
  background-color: var(--sw-gold-deep);
  border-color: var(--sw-gold-deep);
  color: #ffffff;
}
.sw-auth-page .btn-primary:focus {
  box-shadow: 0 0 0 0.2rem rgba(182, 137, 47, 0.4);
}

.btn-outline-success {
  --bs-btn-color:             var(--sw-gold);
  --bs-btn-border-color:      var(--sw-gold);
  --bs-btn-hover-bg:          var(--sw-gold);
  --bs-btn-hover-color:       #fff;
  --bs-btn-hover-border-color:var(--sw-gold);
}

.bg-success   { background-color: var(--sw-gold) !important; }
.text-success { color: var(--sw-gold) !important; }
.border-success { border-color: var(--sw-gold) !important; }
.badge.bg-success { background-color: var(--sw-gold) !important; }
.alert-success {
  --bs-alert-color:       var(--sw-alert-success-text);
  --bs-alert-bg:          var(--sw-alert-success-bg);
  --bs-alert-border-color:var(--sw-alert-success-border);
}

/* Info → Sage Green */
.btn-info {
  --bs-btn-bg:                var(--sw-sage);
  --bs-btn-border-color:      var(--sw-sage);
  --bs-btn-hover-bg:          var(--sw-info-hover);
  --bs-btn-hover-border-color:var(--sw-info-hover);
  --bs-btn-color:             #fff;
  --bs-btn-hover-color:       #fff;
}

.btn-outline-info {
  --bs-btn-color:             #6b6750;
  --bs-btn-border-color:      var(--sw-sage);
  --bs-btn-hover-bg:          var(--sw-sage);
  --bs-btn-hover-color:       #fff;
}

.bg-info   { background-color: var(--sw-sage) !important; }
.text-info { color: var(--sw-sage) !important; }
.border-info { border-color: var(--sw-sage) !important; }
.badge.bg-info { background-color: var(--sw-sage) !important; color: #fff !important; }
.alert-info {
  --bs-alert-color:       var(--sw-alert-info-text);
  --bs-alert-bg:          var(--sw-alert-info-bg);
  --bs-alert-border-color:var(--sw-alert-info-border);
}

/* Warning → Brown */
.btn-warning {
  --bs-btn-bg:                var(--sw-gold-deep);
  --bs-btn-border-color:      var(--sw-gold-deep);
  --bs-btn-hover-bg:          var(--sw-warning-hover);
  --bs-btn-hover-border-color:var(--sw-warning-hover);
  --bs-btn-color:             #fff;
  --bs-btn-hover-color:       #fff;
}

.btn-outline-warning {
  --bs-btn-color:             var(--sw-gold-deep);
  --bs-btn-border-color:      var(--sw-gold-deep);
  --bs-btn-hover-bg:          var(--sw-gold-deep);
  --bs-btn-hover-color:       #fff;
}

.bg-warning   { background-color: var(--sw-gold-deep) !important; }
.text-warning { color: var(--sw-gold-deep) !important; }
.border-warning { border-color: var(--sw-gold-deep) !important; }
.badge.bg-warning { background-color: var(--sw-gold-deep) !important; color: #fff !important; }
.alert-warning {
  --bs-alert-color:       var(--sw-alert-warning-text);
  --bs-alert-bg:          var(--sw-alert-warning-bg);
  --bs-alert-border-color:var(--sw-alert-warning-border);
}

/* Secondary → Grey */
.btn-secondary {
  --bs-btn-bg:                var(--sw-text-soft);
  --bs-btn-border-color:      var(--sw-text-soft);
  --bs-btn-hover-bg:          var(--sw-secondary-hover);
  --bs-btn-hover-border-color:var(--sw-secondary-hover);
  --bs-btn-color:             #fff;
  --bs-btn-hover-color:       #fff;
}

.btn-outline-secondary {
  --bs-btn-color:             var(--sw-text-soft);
  --bs-btn-border-color:      var(--sw-text-soft);
  --bs-btn-hover-bg:          var(--sw-text-soft);
  --bs-btn-hover-color:       #fff;
}

.bg-secondary   { background-color: var(--sw-text-soft) !important; }
.text-muted { color: var(--sw-text-soft) !important; }
.text-secondary { color: var(--sw-text-soft) !important; }
.border-secondary { border-color: var(--sw-text-soft) !important; }
.badge.bg-secondary { background-color: var(--sw-text-soft) !important; }

/* Dark → Black */
.btn-dark {
  --bs-btn-bg:                var(--sw-text);
  --bs-btn-border-color:      var(--sw-text);
  --bs-btn-hover-bg:          var(--sw-dark-hover);
  --bs-btn-hover-border-color:var(--sw-dark-hover);
  --bs-btn-color:             #fff;
  --bs-btn-hover-color:       #fff;
}

.btn-outline-dark {
  --bs-btn-color:             var(--sw-text);
  --bs-btn-border-color:      var(--sw-text);
  --bs-btn-hover-bg:          var(--sw-text);
  --bs-btn-hover-color:       #fff;
}

.bg-dark { background-color: var(--sw-text) !important; }
.text-dark { color: var(--sw-text) !important; }
.badge.bg-dark { background-color: var(--sw-text) !important; }
.navbar.bg-dark { background-color: var(--sw-text) !important; }
.table-dark { background-color: var(--sw-text) !important; }
.table-dark th, .table-dark td { color: #fff !important; }
.card-header.bg-dark { background-color: var(--sw-text) !important; }

/* Primary → Teal (remap btn-primary to teal throughout) */
.btn-primary {
  --bs-btn-bg:                var(--sw-gold);
  --bs-btn-border-color:      var(--sw-gold);
  --bs-btn-hover-bg:          var(--sw-success-hover);
  --bs-btn-hover-border-color:var(--sw-success-hover);
  --bs-btn-color:             #fff;
  --bs-btn-hover-color:       #fff;
}

/* [UI001-3] Gold-at-rest button that hovers silver instead of the default
   teal. Scoped modifier (not a global .btn-primary change) so only the
   flagged button is affected. Silver = --sw-grey-400. */
.btn-hover-silver {
  --bs-btn-hover-bg:          var(--sw-grey-400);
  --bs-btn-hover-border-color:var(--sw-grey-400);
  /* [UI002-2] Dark label on the silver hover — white-on-silver (#9ca3af)
     was ~1.9:1 and read as an invisible label. Charcoal gives ~7.2:1. */
  --bs-btn-hover-color:       var(--sw-charcoal);
}

.btn-outline-primary {
  --bs-btn-color:             var(--sw-gold);
  --bs-btn-border-color:      var(--sw-gold);
  --bs-btn-hover-bg:          var(--sw-gold);
  --bs-btn-hover-color:       #fff;
}

.bg-primary   { background-color: var(--sw-gold) !important; }
.text-primary { color: var(--sw-gold) !important; }
.border-primary { border-color: var(--sw-gold) !important; }
.badge.bg-primary { background-color: var(--sw-gold) !important; }
.alert-primary {
  --bs-alert-color:       var(--sw-alert-success-text);
  --bs-alert-bg:          var(--sw-alert-success-bg);
  --bs-alert-border-color:var(--sw-alert-success-border);
}

/* Pagination active → Teal */
.page-item.active .page-link {
  background-color: var(--sw-gold);
  border-color: var(--sw-gold);
}
.page-link { color: var(--sw-gold); }
.page-link:hover { color: #006666; }

/* ── Custom corporate button classes ─────────────────────── */

/* Orange -- Edit actions */
.btn-edit {
  background-color: var(--sw-gold);
  border-color: var(--sw-gold);
  color: #fff;
}
.btn-edit:hover {
  background-color: #c06a00;
  border-color: #c06a00;
  color: #fff;
}
.btn-outline-edit {
  color: var(--sw-gold);
  border-color: var(--sw-gold);
  background-color: transparent;
}
.btn-outline-edit:hover {
  background-color: var(--sw-gold);
  color: #fff;
}

/* Dark Blue -- TFI Send / bulk send actions */
.btn-dark-blue {
  background-color: var(--sw-charcoal);
  border-color: var(--sw-charcoal);
  color: #fff;
}
.btn-dark-blue:hover {
  background-color: var(--sw-dark-blue-hover);
  border-color: var(--sw-dark-blue-hover);
  color: #fff;
}

/* [UI001-4] Navy / teal -- replaces the hand-picked inline style="..."
   colours previously hardcoded per instance across admin, forms, chron,
   etl and reporting. */
.btn-navy {
  background-color: var(--sw-navy);
  color: #fff;
}
/* [UI001] No hover state existed here at all - Bootstrap's base .btn:hover
   reads --bs-btn-hover-bg/--bs-btn-hover-color, which .btn-navy never
   defines (unlike the ten .btn-{variant} pairs above, each with a matching
   hover colour). Mid-grey background, white text kept explicit rather
   than assumed. */
.btn-navy:hover,
.btn-navy:focus {
  background-color: #4a5568;
  color: #fff;
  border-color: transparent;
}
.btn-teal {
  background-color: var(--sw-teal);
  color: #fff;
}
/* [UI001] No hover state existed here, same gap btn-navy had before UI001.
   --sw-teal-hover is a deliberately picked, deeper shade (matching how
   every other hover colour in this file was chosen - see the note above
   on --sw-dark-blue-hover etc - not a computed darken of --sw-teal). */
.btn-teal:hover,
.btn-teal:focus {
  background-color: var(--sw-teal-hover);
  border-color: var(--sw-teal-hover);
  color: #fff;
}
.btn-teal-outline {
  background-color: var(--sw-teal);
  border-color: var(--sw-teal);
}
.btn-teal-outline:hover,
.btn-teal-outline:focus {
  background-color: var(--sw-teal-hover);
  border-color: var(--sw-teal-hover);
  color: #fff;
}

/* [UI001-4] Size-only utilities, extracted from the two most frequent
   exact-match inline size declarations across button instances. */
.btn-pill-sm {
  font-size: 0.7rem;
  padding: 2px 8px;
}
.btn-tight {
  padding: 0.25rem 0.5rem;
}

/* [UI001-4a] Small badge, normalising 8 near-duplicate inline
   font-size values (0.58rem-0.75rem) found on badges with no other
   inline declaration alongside. A visual change: every value other
   than 0.65rem itself shifts, by under 1.2px at the largest (0.58rem
   and 0.75rem). metadata_browser/compare.html's 0.85rem badges are
   deliberately excluded - they are uniform there, not drift, and
   noticeably larger than every other instance measured. */
.badge-sm {
  font-size: 0.65rem;
}

/* ── Navbar ──────────────────────────────────────────────── */
.navbar.navbar-dark.bg-dark {
  background-color: var(--sw-text) !important;
}

/* ── Cards ───────────────────────────────────────────────── */
.card {
  border: 1px solid var(--sw-border);
  border-radius: 6px;
}

.card-header {
  font-weight: 600;
  font-size: 0.9rem;
}

/* ── Tables ──────────────────────────────────────────────── */
.table-dark thead th {
  background-color: var(--sw-text) !important;
  color: #fff !important;
  font-weight: 600;
}

.table thead.table-dark th {
  background-color: var(--sw-text) !important;
  color: #fff !important;
}

/* ── KPI cards ───────────────────────────────────────────── */
.kpi-card-brand {
  border: none;
  border-radius: 8px;
  box-shadow: var(--sw-shadow);
  transition: transform 0.15s, box-shadow 0.15s;
  cursor: pointer;
}

.kpi-card-brand:hover {
  transform: translateY(-2px);
  box-shadow: var(--sw-shadow);
}

.kpi-card-brand .kpi-label {
  font-size: 0.72rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--sw-text-soft);
  margin-bottom: 0.3rem;
}

.kpi-card-brand .kpi-value {
  font-size: 2rem;
  font-weight: 800;
  line-height: 1;
}

.kpi-card-brand.active {
  box-shadow: 0 0 0 2px var(--sw-gold), var(--sw-shadow);
}

/* ── Breadcrumbs ─────────────────────────────────────────── */
.breadcrumb {
  background: transparent;
  padding: 0;
  margin-bottom: 0.5rem;
  font-size: 0.82rem;
}

.breadcrumb-item a {
  color: var(--sw-charcoal);
  text-decoration: none;
}

.breadcrumb-item a:hover {
  color: var(--sw-gold);
}

.breadcrumb-item.active {
  color: var(--sw-charcoal);
  font-weight: 600;
}

.breadcrumb-item + .breadcrumb-item::before {
  color: var(--sw-gold);
}

/* ── Page headings ───────────────────────────────────────── */
.sw-page-title {
  font-size: 1.35rem;
  font-weight: 700;
  color: var(--sw-text);
  margin-bottom: 0;
}

.sw-page-subtitle {
  font-size: 0.82rem;
  color: var(--sw-text-soft);
  margin-bottom: 0;
}

/* ── Results pill ────────────────────────────────────────── */
.results-pill {
  display: inline-block;
  background: var(--sw-bg);
  border: 1px solid var(--sw-border);
  border-radius: 20px;
  padding: 0.2rem 0.75rem;
  font-size: 0.82rem;
  color: var(--sw-text-soft);
  font-weight: 600;
}

/* ── Filter card header ──────────────────────────────────── */
.filter-card-header {
  background: var(--sw-bg);
  border-bottom: 1px solid var(--sw-border);
  padding: 0.6rem 1rem;
}

/* ── Transport-specific: status squares ──────────────────── */
.status-squares {
  display: flex;
  gap: 3px;
  align-items: center;
}

.status-sq {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  border-radius: 4px;
  font-size: 0.7rem;
  font-weight: 700;
  color: #fff;
}

.sq-green  { background: var(--sw-gold); }
.sq-red    { background: var(--bs-danger); }
.sq-amber  { background: var(--sw-gold-deep); }
.sq-blue   { background: var(--sw-charcoal); }
.sq-grey   { background: var(--sw-text-soft); }

.sq-icon { font-size: 0.65rem; }

/* ── Truncation helpers ──────────────────────────────────── */
.truncate-15  { max-width: 120px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.truncate-20  { max-width: 160px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.truncate-30  { max-width: 220px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* ── Weight dot (zero weight indicator) ─────────────────── */
.weight-dot {
  display: inline-block;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--bs-danger);
  margin-right: 4px;
}

.weight-zero { color: var(--bs-danger); font-weight: 600; }

/* ── Footer ──────────────────────────────────────────────── */
footer {
  background: var(--sw-bg);
  border-top: 1px solid var(--sw-border);
  color: var(--sw-text-soft);
  font-size: 0.8rem;
}

/* ── Responsive ──────────────────────────────────────────── */
@media (max-width: 768px) {
  .sw-page-title { font-size: 1.1rem; }
  .kpi-card-brand .kpi-value { font-size: 1.5rem; }
  .table-responsive { font-size: 0.8rem; }
  .btn-group-sm .btn { padding: 0.2rem 0.4rem; font-size: 0.75rem; }
}

/* ── Light grey navbar (combined logo + nav row) ─────────── */
.navbar[style*="background-color: #D3D3D3"] .nav-link,
.navbar[style*="background-color: #D3D3D3"] .navbar-nav .nav-link {
  color: #000 !important;
  font-size: 0.88rem;
  font-weight: 500;
}

.navbar[style*="background-color: #D3D3D3"] .nav-link:hover,
.navbar[style*="background-color: #D3D3D3"] .nav-link:focus {
  color: #000 !important;
  opacity: 0.7;
}

.navbar[style*="background-color: #D3D3D3"] .dropdown-toggle::after {
  border-top-color: #000;
}

/* Dropdown menus white with dark text */
.navbar[style*="background-color: #D3D3D3"] .dropdown-menu {
  background-color: #fff;
  border: 1px solid var(--sw-border);
  border-radius: 6px;
  box-shadow: var(--sw-shadow);
}

.navbar[style*="background-color: #D3D3D3"] .dropdown-item {
  color: #212529;
  font-size: 0.85rem;
}

.navbar[style*="background-color: #D3D3D3"] .dropdown-item:hover {
  background-color: var(--sw-bg);
  color: #000;
}

.navbar[style*="background-color: #D3D3D3"] .dropdown-divider {
  border-color: var(--sw-border);
}

/* User display name */
.navbar[style*="background-color: #D3D3D3"] .text-white-50 {
  color: rgba(0,0,0,0.55) !important;
}

/* Logout link */
.navbar[style*="background-color: #D3D3D3"] .nav-link[href*="logout"] {
    color: #DC3545 !important;
  color: #000 !important;
}

/* Table dark headers -- override Bootstrap 5 CSS variables */
.table-dark,
.table > thead.table-dark {
  --bs-table-bg:             #000000;
  --bs-table-color:          #ffffff;
  --bs-table-border-color:   #333333;
  --bs-table-striped-bg:     #111111;
  --bs-table-striped-color:  #ffffff;
  --bs-table-hover-bg:       #1a1a1a;
  --bs-table-hover-color:    #ffffff;
}

.table-dark th,
.table-dark td,
.table > thead.table-dark th,
.table > thead.table-dark td {
  background-color: #000000 !important;
  color: #ffffff !important;
  border-color: #333 !important;
}

/* Prevent text-muted/text-secondary from bleeding into dark table headers */
.table-dark th.text-muted,
.table-dark td.text-muted,
thead.table-dark th,
thead.table-dark td {
  color: #ffffff !important;
}
/* ── AG Grid striped rows (Phase 1 — P1.3) ────────────────────
   Applies to every ag-theme-alpine grid in SmarterWorkflow (report_run,
   report_detail, dashboard_view, staging browser, etc). Subtle
   alternate row background so dense grids are easier to read. */
.ag-theme-alpine .ag-row-odd {
    background-color: #f8f9fa;
}

/* ── SmarterWorker Nav ───────────────────────────────────── */
.sw-navbar {
  background-color: var(--sw-white) !important;
  border-bottom: 1px solid var(--sw-border);
  box-shadow: 0 1px 4px rgba(0,0,0,0.05);
}
.sw-navbar .nav-link {
  color: var(--sw-text-soft) !important;
  font-size: 14.5px;
  font-weight: 600;
  padding: 7px 12px;
  border-radius: 999px;
  transition: all .18s;
}
.sw-navbar .nav-link:hover,
.sw-navbar .nav-link:focus {
  color: var(--sw-text) !important;
  background: var(--sw-bg);
}
.sw-navbar .dropdown-menu {
  border: 1px solid var(--sw-border);
  box-shadow: var(--sw-shadow-md);
}

/* ── Navbar link sizing (SW-008k-fix3, kept) — text nav-links 20%
   smaller. Dropdown-item / menu / divider styling lives in the single
   consolidated block below (~line 900) — no duplicates here. */
.navbar .nav-link {
  font-size: 0.72rem;
  padding: 0.35rem 0.5rem;
  font-weight: 500;
}

/* ── Right-side nav icons (SW-008m) — 1rem (16px) standard navbar
   icon size. Light navbar → dark icon colour with gold hover.
   #timer/#avatar ids + !important so the glyph size wins over the
   base .navbar .nav-link (0.72rem) rule. */
.sw-nav-icon,
#timerToggleBtn,
#avatarSwatchBtn {
  font-size: 1rem !important;
  padding: 0.4rem 0.5rem !important;
}
.sw-nav-icon i,
#timerToggleBtn i,
#timerToggleIcon {
  font-size: 1rem !important;
}
.sw-navbar .sw-nav-icon {
  line-height: 1;
  display: inline-flex;
  align-items: center;
  color: var(--sw-text-soft) !important;
}
.sw-navbar .sw-nav-icon:hover,
.sw-navbar .sw-nav-icon:focus {
  color: var(--sw-gold) !important;
  background: transparent;
}
/* Badge colour dot — #avatarSwatchBtn rendered as a filled circle */
.sw-badge-dot {
  width: 12px !important;
  height: 12px !important;
  border-radius: 50%;
  padding: 0;
  border: 1px solid rgba(0,0,0,0.25);
  cursor: pointer;
  margin: 0 0.4rem;
  transition: transform .15s ease;
}
.sw-badge-dot:hover {
  transform: scale(1.2);
}

/* ── Brand block ─────────────────────────────────────────── */
.sw-brand {
  display: flex;
  align-items: center;
  gap: 12px;
  text-decoration: none;
}
.sw-brand-text {
  display: flex;
  flex-direction: column;
  line-height: 1.1;
}
.sw-brand-name {
  font-family: var(--sw-font);
  font-weight: 800;
  font-size: 21px;
  letter-spacing: -0.035em;
  line-height: 1;
}
.sw-smarter { color: #71777f; }
.sw-worker  { color: var(--sw-gold); }
.sw-brand-tagline {
  font-family: var(--sw-font-mono);
  /* Letter-spacing was 0.22em - roughly double what it should read as.
     Halved to 0.11em and font-size raised 10px -> 11.5px to compensate,
     so the tagline's total rendered width still spans approximately
     the wordmark's width above it (measured live: 188.3px vs the
     wordmark's own 189.1px stretched width - the two are supposed to
     line up, and still do). Do not "fix" this pair independently of
     each other; they were solved together against a live width
     measurement, not chosen separately. */
  font-size: 11.5px;
  letter-spacing: 0.11em;
  color: #8d909a;
  font-weight: 500;
  text-transform: uppercase;
}
.sw-logo { height: 54px; width: auto; }


/* ── Quick-access tile cards ─────────────────────────────── */
.sw-tile-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  border-top: 3px solid var(--sw-gold);
  border-left: none !important;
  text-align: center;
  padding: 1.25rem 1rem;
  cursor: pointer;
  transition: box-shadow 0.15s ease, transform 0.15s ease;
}

.sw-tile-card:hover {
  box-shadow: 0 4px 12px rgba(182, 137, 47, 0.2) !important;
  transform: translateY(-2px);
}

.sw-tile-card .tile-icon {
  font-size: 1.8rem;
  color: var(--sw-gold);
  margin-bottom: 0.5rem;
}

.sw-tile-card .tile-title {
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--sw-charcoal);
}

/* ── Home page heading / subheading ─────────────────────── */
.sw-home-heading {
  font-family: var(--sw-font-secondary), serif;
  font-size: 2rem;
  font-weight: 500;
  color: var(--sw-charcoal);
  margin-bottom: 0.25rem;
  letter-spacing: -0.01em;
}

.sw-home-subheading {
  font-size: 1.15rem;
  font-weight: 400;
  color: var(--sw-text-secondary, var(--sw-text-soft, #6b7280));
  margin-bottom: 0;
}

/* ── Orbiting logo animation ─────────────────────────────── */
/* Adapted from design_handoff_smarterworker_site/assets/site.css */
.sw-orbit-container {
  width: 100%;
  max-width: 340px;
  padding: 1rem 0;
}

.hero-visual {
  position: relative;
  aspect-ratio: 1;
  display: grid;
  place-items: center;
  width: 100%;
  max-width: 100%;
  margin: 0 auto;
}

.orbit-ring {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  border: 1px solid rgba(0,0,0,0.1);
}

.orbit-ring.r2 {
  inset: 12%;
  border-style: dashed;
  opacity: .7;
}

.orbit-ring.r3 {
  inset: 26%;
}

.hero-core {
  width: 46%;
  aspect-ratio: 1;
  border-radius: 50%;
  background: #ffffff;
  box-shadow: 0 4px 16px rgba(0,0,0,0.10);
  display: grid;
  place-items: center;
  position: relative;
  z-index: 3;
  border: 1px solid rgba(0,0,0,0.08);
  animation: corePulse 4.5s cubic-bezier(0.4,0,0.2,1) infinite;
}

.hero-core::after {
  content: "";
  position: absolute;
  inset: -10%;
  border-radius: 50%;
  box-shadow: 0 0 80px var(--sw-gold-tint);
}

.hero-core img {
  width: 72%;
  height: 72%;
  object-fit: contain;
  animation: corePulseImg 4.5s cubic-bezier(0.4,0,0.2,1) infinite;
}

@keyframes corePulse {
  0%,100% { transform: scale(.95); box-shadow: 0 2px 8px rgba(0,0,0,0.08); }
  50% { transform: scale(1.07); background: color-mix(in srgb, var(--sw-gold) 18%, #ffffff); box-shadow: 0 0 60px var(--sw-gold-tint); }
}

@keyframes corePulseImg {
  0%,100% { opacity: .8; }
  50% { opacity: 1; }
}

.node {
  position: absolute;
  z-index: 4;
  width: 54px;
  height: 54px;
  border-radius: 50%;
  background: #ffffff;
  border: 1px solid rgba(0,0,0,0.08);
  display: grid;
  place-items: center;
  font-size: 18px;
  color: var(--sw-gold);
  box-shadow: 0 2px 8px rgba(0,0,0,0.08);
  transform: translate(-50%, -50%);
}

.node img {
  width: 32px;
  height: 32px;
  object-fit: contain;
  filter: brightness(0) saturate(100%) invert(55%) sepia(48%) saturate(480%)
          hue-rotate(2deg) brightness(92%) contrast(89%);
}

.node.n1 { top: 8%;  left: 50%; }
.node.n2 { top: 29%; left: 86%; }
.node.n3 { top: 71%; left: 86%; }
.node.n4 { top: 92%; left: 50%; }
.node.n5 { top: 71%; left: 14%; }
.node.n6 { top: 29%; left: 14%; }

.orbiting {
  position: absolute;
  inset: 0;
  z-index: 4;
  animation: orbitSpin 34s linear infinite;
}

.orbiting .node img {
  animation: orbitSpinRev 34s linear infinite;
}

@keyframes orbitSpin    { to { transform: rotate(360deg); } }
@keyframes orbitSpinRev { to { transform: rotate(-360deg); } }

.hero-glow {
  position: absolute;
  width: 60%;
  height: 60%;
  border-radius: 50%;
  background: radial-gradient(circle, var(--sw-gold-tint), transparent 70%);
  filter: blur(20px);
  z-index: 0;
}

@media (prefers-reduced-motion: reduce) {
  .orbiting, .orbiting .node img, .hero-core, .hero-core img {
    animation: none !important;
  }
}

/* ── Profile dropdown ────────────────────────────────────── */
.sw-profile-toggle {
  color: var(--sw-nav-text) !important;
  font-weight: 500;
}

.sw-profile-menu {
  min-width: 200px;
  border: 1px solid var(--sw-border);
  box-shadow: 0 4px 12px rgba(0,0,0,0.1);
}

.sw-profile-menu .dropdown-item:hover {
  background-color: var(--sw-bg, #f8f9fa);
  color: var(--sw-gold);
}

.sw-profile-menu .dropdown-item i {
  width: 1.2rem;
  margin-right: 0.4rem;
  color: var(--sw-gold);
}

/* Nav dropdowns */
.navbar .dropdown-menu {
  border: 1px solid var(--sw-border);
  border-radius: 6px;
  box-shadow: 0 4px 12px rgba(0,0,0,0.1);
  min-width: 200px;
  padding: 0.4rem 0;
}

.navbar .dropdown-item {
  padding: 0.35rem 1rem;
  font-size: 0.7rem;
  line-height: 1;
  color: var(--sw-charcoal);
}

.navbar .dropdown-item:hover {
  background-color: var(--sw-bg-secondary);
  color: var(--sw-gold);
}

.navbar .dropdown-item i {
  width: 1.2rem;
  margin-right: 0.4rem;
  color: var(--sw-text-secondary, var(--sw-text-soft));
}

.navbar .dropdown-item:hover i {
  color: var(--sw-gold);
}

.navbar .dropdown-divider {
  border-color: #b7bcc4;
  width: 90%;
  margin: 0.2rem auto;
  opacity: 1;
}

/* ── Tag Tree Navigator (SW-011) ── */
.sw-tree-nav { font-size: 0.82rem; }
.sw-tree-list { padding: 0; }

.sw-tree-node-header {
  padding: 0.35rem 0.5rem;
  border-radius: 4px;
  cursor: pointer;
  user-select: none;
  transition: background 0.1s ease;
}
.sw-tree-node-header:hover { background: var(--sw-bg-secondary); }

.sw-tree-node-label {
  font-weight: 600;
  color: var(--sw-charcoal);
  font-size: 0.78rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.sw-tree-chevron {
  font-size: 0.65rem;
  color: var(--sw-text-secondary);
  transition: transform 0.15s ease;
}

.sw-tree-count {
  background: var(--sw-bg-secondary);
  color: var(--sw-text-secondary);
  font-size: 0.65rem;
  font-weight: 500;
  padding: 0.1rem 0.4rem;
  border-radius: 10px;
}

.sw-tree-item-link {
  display: block;
  padding: 0.28rem 0.5rem;
  color: var(--sw-text-primary);
  text-decoration: none;
  border-radius: 4px;
  font-size: 0.8rem;
  transition: background 0.1s ease, color 0.1s ease;
}
.sw-tree-item-link:hover { background: var(--sw-bg-secondary); color: var(--sw-gold); }
.sw-tree-item-link i { color: var(--sw-text-secondary); font-size: 0.72rem; }
.sw-tree-item-link:hover i { color: var(--sw-gold); }

.sw-tree-inactive .sw-tree-item-link { opacity: 0.5; }
.sw-tree-inactive-badge {
  font-size: 0.6rem;
  background: var(--sw-border);
  color: var(--sw-text-secondary);
  padding: 0 0.3rem;
  border-radius: 3px;
  margin-left: 0.3rem;
  vertical-align: middle;
}

.sw-tree-search .form-control {
  border-color: var(--sw-border);
  font-size: 0.78rem;
  background: #fff;
}
.sw-tree-search .form-control:focus {
  border-color: var(--sw-gold);
  box-shadow: 0 0 0 0.15rem rgba(182, 137, 47, 0.2);
}

/* ── Chron/ETL Module Shell (SW-014, Light Console) ── */

/* [BRIEF UI003 Step 5] Renamed from --chron- / --chron-side- to
   --sw-console- / --sw-console-side- (2026-09-26). These tokens were
   never chron-only: this shell and every one of these tokens is
   consumed identically by both the chron and etl module templates
   (confirmed - both layouts use the same 34 shared sw-sidebar,
   sw-module, sw-content and sw-panel classes, no per-module override
   exists anywhere). The old name was silently misleading ETL into
   consuming a namespace named after a different module. Pure rename -
   every value below is byte-identical to before; screenshotted every
   chron and etl page that references these tokens, before and after,
   to confirm. Accent uses sw-gold, not the design's teal. */
:root {
  --sw-console-bg:             #f5f6f8;
  --sw-console-panel:          #ffffff;
  --sw-console-border:         #e6e8ec;
  --sw-console-border2:        #cfd4db;
  --sw-console-head-soft:      #f7f8fa;
  --sw-console-head-bg:        #eef1f4;
  --sw-console-fg:             #1f2430;
  --sw-console-muted:          #6b7280;
  --sw-console-radius:         10px;
  --sw-console-side-bg:        #ffffff;
  --sw-console-side-border:    #e9ebef;
  --sw-console-side-title:     #1f2430;
  --sw-console-side-fg:        #3a4150;
  --sw-console-side-muted:     #8a92a3;
  --sw-console-side-search:    #f4f6f8;
  --sw-console-side-hover:     #f1f3f6;
  --sw-console-side-active-bg: #fdf6e8;
  --sw-console-side-active-fg: #b6892f;
}

/* Two-pane shell — full viewport height, no outer scroll */
.sw-module-layout {
  display: flex;
  height: calc(100vh - 56px); /* 56px = navbar height */
  overflow: hidden;
  background: var(--sw-console-bg);
}

/* Sidebar — 252px fixed, full height, independent scroll */
.sw-module-sidebar {
  width: 252px;
  min-width: 252px;
  flex: none;
  display: flex;
  flex-direction: column;
  background: var(--sw-console-side-bg);
  border-right: 1px solid var(--sw-console-side-border);
  height: 100%;
  overflow: hidden;
  z-index: 2;
}

/* Sidebar brand row */
.sw-sidebar-brand {
  height: 52px;
  flex: none;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 0 16px;
  border-bottom: 1px solid var(--sw-console-side-border);
}
.sw-sidebar-brand-icon {
  width: 26px; height: 26px;
  border-radius: 7px;
  background: var(--sw-gold);
  color: #fff;
  display: flex; align-items: center; justify-content: center;
  font-weight: 800; font-size: 13px; flex: none;
}
.sw-sidebar-brand-name {
  font-weight: 700; font-size: 14px;
  color: var(--sw-console-side-title); letter-spacing: -0.01em;
}
.sw-sidebar-brand-sub {
  margin-left: auto; font-size: 11px;
  color: var(--sw-console-side-muted); font-weight: 600;
}

/* Sidebar search */
.sw-sidebar-search { padding: 10px 12px 8px; flex: none; }
.sw-sidebar-search-inner {
  display: flex; align-items: center; gap: 8px;
  height: 32px; padding: 0 10px; border-radius: 8px;
  background: var(--sw-console-side-search);
  border: 1px solid var(--sw-console-side-border);
}
.sw-sidebar-search-inner i { color: var(--sw-console-side-muted); font-size: 0.8rem; flex: none; }
.sw-sidebar-search-inner input {
  flex: 1; border: none; outline: none; background: transparent;
  font-size: 12.5px; color: var(--sw-console-side-title); font-family: inherit; min-width: 0;
}
.sw-sidebar-search-inner input::placeholder { color: var(--sw-console-side-muted); }

/* Sidebar nav tree — scrollable */
.sw-sidebar-nav { flex: 1; overflow-y: auto; padding: 6px 0 10px; }

/* Space header row (CHRON / ETL label) */
.sw-sidebar-space {
  display: flex; align-items: center; gap: 8px;
  padding: 6px 14px 4px; cursor: pointer; user-select: none;
}
.sw-sidebar-space-dot {
  width: 15px; height: 15px; border-radius: 4px;
  background: var(--sw-gold); flex: none;
}
.sw-sidebar-space-label {
  font-size: 11px; font-weight: 700; color: var(--sw-console-side-muted);
  text-transform: uppercase; letter-spacing: 0.08em; flex: 1;
}
.sw-sidebar-space-chevron { font-size: 0.6rem; color: var(--sw-console-side-muted); }

/* Leaf nav items (depth 1) */
.sw-sidebar-leaf {
  display: flex; align-items: center; gap: 8px;
  margin: 1px 8px; border-radius: 8px; cursor: pointer;
  font-size: 13px; padding: 6px 10px; color: var(--sw-console-side-fg);
  text-decoration: none; font-weight: 500;
  transition: background 0.12s ease, color 0.12s ease;
}
.sw-sidebar-leaf:hover { background: var(--sw-console-side-hover); color: var(--sw-console-side-title); text-decoration: none; }
.sw-sidebar-leaf.active { background: var(--sw-console-side-active-bg); color: var(--sw-console-side-active-fg); font-weight: 600; }
.sw-sidebar-leaf i { font-size: 0.85rem; width: 16px; flex: none; opacity: 0.7; }
.sw-sidebar-leaf.active i { opacity: 1; }
.sw-sidebar-leaf-chevron { margin-left: auto; font-size: 0.6rem; opacity: 0.6; }

/* Child leaf items (depth 2 — tag children)
   [UI465, #465] Indent fixed: this sat at 28px, deeper than
   .sw-sidebar-grandchild's 24px below despite being the shallower of
   the two levels - backwards. Proper hierarchy now: leaf (level 1)
   10px, child (level 2) 20px, grandchild (level 3) 32px. */
.sw-sidebar-child {
  display: flex; align-items: center; gap: 8px;
  margin: 1px 8px; border-radius: 8px; cursor: pointer;
  font-size: 13px; padding: 6px 10px 6px 20px;
  color: var(--sw-console-side-fg); text-decoration: none;
  transition: background 0.12s ease, color 0.12s ease;
}
.sw-sidebar-child:hover { background: var(--sw-console-side-hover); color: var(--sw-console-side-title); text-decoration: none; }
.sw-sidebar-child.active { background: var(--sw-console-side-active-bg); color: var(--sw-console-side-active-fg); font-weight: 600; }
.sw-sidebar-child-count { margin-left: auto; font-size: 11px; color: var(--sw-console-side-muted); font-weight: 600; }

/* [UI004, #459] Third-level leaf — job row nested under a group.
   [UI465, #465] Indent fixed from 24px to 32px - see .sw-sidebar-child
   comment above for the full hierarchy. */
.sw-sidebar-grandchild {
  display: flex; align-items: center; gap: 6px;
  font-size: 12.5px; padding: 5px 10px 5px 32px;
  color: var(--sw-console-side-fg); text-decoration: none;
}
.sw-sidebar-grandchild:hover {
  background: var(--sw-console-side-hover);
  color: var(--sw-console-side-title); text-decoration: none;
}
.sw-sidebar-grandchild.active {
  background: var(--sw-console-side-active-bg);
  color: var(--sw-console-side-active-fg); font-weight: 600;
}

/* Sidebar user row (bottom) */
.sw-sidebar-user {
  flex: none; padding: 10px 14px;
  border-top: 1px solid var(--sw-console-side-border);
  display: flex; align-items: center; gap: 9px;
}
.sw-sidebar-user-avatar {
  width: 28px; height: 28px; border-radius: 50%;
  background: var(--sw-gold); color: #fff;
  display: flex; align-items: center; justify-content: center;
  font-size: 11px; font-weight: 700; flex: none;
}
.sw-sidebar-user-name {
  font-size: 12.5px; font-weight: 600; color: var(--sw-console-side-title);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.sw-sidebar-user-role { font-size: 11px; color: var(--sw-console-side-muted); }

/* Content pane — scrollable */
.sw-module-content {
  flex: 1; min-width: 0; overflow-y: auto;
  padding: 22px 26px 60px; background: var(--sw-console-bg);
}
.sw-module-content-inner { max-width: 1240px; margin: 0 auto; }

/* Content header row */
.sw-content-header {
  display: flex; align-items: flex-start; justify-content: space-between;
  margin-bottom: 20px;
}
.sw-content-header h1 {
  margin: 0; font-size: 23px; font-weight: 800;
  letter-spacing: -0.02em; color: var(--sw-console-fg);
}
.sw-content-header p { margin: 5px 0 0; font-size: 13px; color: var(--sw-console-muted); }
.sw-content-actions { display: flex; align-items: center; gap: 8px; flex: none; }

/* KPI cards */
.sw-kpi-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; margin-bottom: 20px; }
.sw-kpi-card {
  background: var(--sw-console-panel); border: 1px solid var(--sw-console-border);
  border-radius: var(--sw-console-radius); padding: 15px 16px;
  position: relative; overflow: hidden;
  transition: box-shadow 0.15s ease, transform 0.15s ease;
}
.sw-kpi-card:hover { box-shadow: 0 4px 12px rgba(0,0,0,0.12); transform: translateY(-2px); }
.sw-kpi-bar { position: absolute; top: 0; left: 0; bottom: 0; width: 3px; }
.sw-kpi-value { font-size: 26px; font-weight: 800; letter-spacing: -0.02em; }
.sw-kpi-label {
  font-size: 11.5px; font-weight: 600; color: var(--sw-console-muted);
  text-transform: uppercase; letter-spacing: 0.05em; margin-top: 2px;
}

/* Panel cards */
.sw-panel {
  background: var(--sw-console-panel); border: 1px solid var(--sw-console-border);
  border-radius: var(--sw-console-radius); overflow: hidden; margin-bottom: 16px;
}
.sw-panel-header {
  padding: 11px 15px; border-bottom: 1px solid var(--sw-console-border);
  display: flex; align-items: center; gap: 8px; background: var(--sw-console-head-soft);
}
.sw-panel-title { font-weight: 700; font-size: 13px; color: var(--sw-console-fg); }
.sw-panel-count {
  margin-left: auto; background: var(--sw-console-bg);
  border: 1px solid var(--sw-console-border); color: var(--sw-console-muted);
  font-size: 11px; font-weight: 700; border-radius: 999px; padding: 1px 9px;
}

/* Dense tables */
.sw-table { width: 100%; border-collapse: collapse; font-size: 12.5px; }
.sw-table th {
  background: var(--sw-console-head-bg); color: var(--sw-console-muted);
  font-size: 10.5px; font-weight: 700; text-transform: uppercase;
  letter-spacing: 0.05em; padding: 9px 13px;
  border-bottom: 1px solid var(--sw-console-border);
  position: sticky; top: 0; text-align: left; white-space: nowrap;
}
.sw-table td {
  padding: 9px 13px; border-bottom: 1px solid var(--sw-console-border);
  vertical-align: top; color: var(--sw-console-fg);
}
.sw-table tr:hover td { background: rgba(0, 123, 255, 0.05); }
.sw-table td.numeric { text-align: right; font-variant-numeric: tabular-nums; }

/* Status pills */
.sw-pill {
  display: inline-flex; align-items: center; padding: 2px 9px;
  border-radius: 999px; font-size: 11px; font-weight: 700; white-space: nowrap;
}
.sw-pill-success  { background: #dcfce7; color: #166534; }
.sw-pill-active   { background: #111827; color: #ffffff; }
.sw-pill-paused   { background: #fef3c7; color: #b45309; }
.sw-pill-inactive { background: #eef1f4; color: #64748b; }
.sw-pill-failed   { background: #fee2e2; color: #b91c1c; }
.sw-pill-tag      { background: var(--sw-console-head-bg); color: var(--sw-console-muted);
                    font-size: 11px; padding: 2px 8px; border-radius: 6px; }

/* Segmented control (All/Active/Paused tabs) */
.sw-seg {
  display: flex; background: var(--sw-console-bg);
  border: 1px solid var(--sw-console-border); border-radius: 9px; padding: 2px; gap: 2px;
}
.sw-seg-btn {
  border: none; border-radius: 7px; padding: 5px 12px;
  font-size: 12px; font-weight: 600; cursor: pointer; font-family: inherit;
  background: transparent; color: var(--sw-console-muted);
  transition: background 0.12s ease, color 0.12s ease, box-shadow 0.12s ease;
}
.sw-seg-btn.active { background: var(--sw-console-panel); color: var(--sw-console-fg); box-shadow: 0 1px 2px rgba(0,0,0,0.10); }

/* Ghost + primary + variant buttons [UI006, #461]
   Unified sizing across the whole .btn-chron-* family. Originally 20%
   smaller than the old .btn-chron-primary (7px 14px / 12.5px -> 5.6px
   11.2px / 10px); found too small in practice and increased 15% from
   that reduced size (5.6px 11.2px / 10px -> 6.44px 12.88px / 11.5px).
   Still one unified size across every variant below, including ghost,
   so "New Job" (primary) and its siblings (ghost) stay the same size
   by construction, not a special case. font-weight kept at 600
   uniformly too (primary's old 700 is removed) - the brief's own "no
   button larger than its siblings" success criterion reads as visual
   weight, not just box size. */
.btn-chron-ghost, .btn-chron-primary, .btn-chron-success,
.btn-chron-warning, .btn-chron-danger, .btn-chron-outline-danger {
  border-radius: 8px; padding: 6.44px 12.88px;
  font-size: 11.5px; font-weight: 600; cursor: pointer; font-family: inherit;
  white-space: nowrap; text-decoration: none;
  display: inline-flex; align-items: center; gap: 5px;
}
.btn-chron-ghost {
  background: var(--sw-console-panel); border: 1px solid var(--sw-console-border);
  color: var(--sw-console-fg);
}
.btn-chron-ghost:hover { background: var(--sw-console-head-soft); color: var(--sw-console-fg); text-decoration: none; }
.btn-chron-primary {
  background: var(--sw-gold); border: none; color: #fff;
}
.btn-chron-primary:hover { background: var(--sw-gold-deep); color: #fff; text-decoration: none; }

/* [UI006, #461] Real, distinguishable colours for the console button
   family - NOT the main app's gold-for-success/warning Bootstrap
   remap (sw-hub.css's own .btn-success/.btn-warning overrides both use
   --sw-gold/--sw-gold-deep, the same colour .btn-chron-primary already
   uses here; reusing that would make btn-chron-success visually
   identical to btn-chron-primary, defeating the point of a separate
   variant). The console is its own, newer design system, not bound by
   that earlier rebrand. */
.btn-chron-success {
  background: #1e7a4f; border: none; color: #fff;
}
.btn-chron-success:hover { background: #166239; color: #fff; text-decoration: none; }
.btn-chron-warning {
  background: #b5790a; border: none; color: #fff;
}
.btn-chron-warning:hover { background: #8f5f08; color: #fff; text-decoration: none; }
.btn-chron-danger {
  background: #c0392b; border: none; color: #fff;
}
.btn-chron-danger:hover { background: #992e23; color: #fff; text-decoration: none; }
.btn-chron-outline-danger {
  background: transparent; border: 1px solid #c0392b; color: #c0392b;
}
.btn-chron-outline-danger:hover { background: #c0392b; color: #fff; text-decoration: none; }

/* Task row actions (Edit/Deactivate/Delete on chron/task_library.html) -
   10% smaller than the standard btn-chron-* size (6.44px 12.88px /
   11.5px -> 5.8px 11.6px / 10.35px). Scoped to these three buttons only;
   the global .btn-chron-* rule above is unchanged. */
.btn-chron-sm {
  padding: 5.8px 11.6px;
  font-size: 10.35px;
}

/* Responsive */
@media (max-width: 768px) {
  .sw-module-layout { flex-direction: column; height: auto; }
  .sw-module-sidebar { width: 100%; height: auto; overflow: visible; }
  .sw-kpi-grid { grid-template-columns: repeat(2, 1fr); }
}