/*
 * Stillwell Design System — stillwell-theme.css
 * ─────────────────────────────────────────────
 * This file is the single source of truth for all Stillwell UI styles.
 * It is loaded by the Stillwell WordPress theme and replaces the copy
 * that was previously served by the stillwell-core plugin.
 *
 * Loaded by: functions.php → wp_enqueue_style('sw-theme', ...)
 */

/* ══════════════════════════════════════════════════════════════
   1. FONT CONFIGURATION
   ──────────────────────────────────────────────────────────────
   To swap fonts, change the values below AND update the Google
   Fonts URL in functions.php. Marketing owns this decision.

   Display font  → page titles, stat card values, large labels
   Body font     → all prose, table cells, UI text
   Mono font     → numbers, IDs, codes, part numbers
   ══════════════════════════════════════════════════════════════ */
:root {
  --sw-font-display : 'Bebas Neue', Impact, sans-serif;
  --sw-font         : 'Inter', 'Open Sans', Arial, sans-serif;   /* Inter = closest to Neue Haas Grotesk */
  --sw-font-mono    : 'DM Mono', 'Courier New', monospace;
}

/* ══════════════════════════════════════════════════════════════
   2. BRAND COLOR TOKENS
   ══════════════════════════════════════════════════════════════ */
:root {
  /* ── Brand primaries (Jan 2026 Brand Guide) */
  --sw-navy          : #1A2B45;   /* Prussian Blue   — header, primary buttons   */
  --sw-navy-deep     : #111d30;   /* Darker blue     — hover states              */
  --sw-navy-light    : #2a3f60;   /* Mid blue        — secondary hover           */
  --sw-red           : #8A181A;   /* Falu Red        — accent, active indicators */
  --sw-red-deep      : #6b1214;   /* Darker red      — hover on red elements     */

  /* ── Gold (retained as tertiary / data accent) */
  --sw-gold          : #c8991e;
  --sw-gold-light    : #f5e6b8;

  /* ── Status / data colors (do NOT use sw-red for these) */
  --sw-alert-red     : #c0392b;   /* Overdue, errors, danger states              */
  --sw-alert-red-bg  : #fdecea;
  --sw-green         : #2a7a52;
  --sw-green-bg      : #d5eddf;
  --sw-green-text    : #1a5c38;
  --sw-blue          : #1e5a94;
  --sw-blue-bg       : #ddeaf7;
  --sw-amber-bg      : #fde8d3;
  --sw-amber-text    : #7a3010;

  /* ── Backgrounds */
  --sw-bg-page       : #f1f3f6;   /* Neutral light gray — matches brand guide   */
  --sw-bg-warm       : #f7f8fa;
  --sw-bg            : #ffffff;

  /* ── Borders */
  --sw-border        : #e4e6ec;
  --sw-border-med    : #cfd3dc;

  /* ── Table headers (light — the primary lightening change) */
  --sw-th-bg         : #edf0f5;   /* Light blue-gray header fill                */
  --sw-th-color      : #1A2B45;   /* Navy text in headers                       */
  --sw-th-border     : #d1d6e0;

  /* ── Text */
  --sw-text          : #333333;
  --sw-text-muted    : #8a9aaa;
  --sw-text-hint     : #b0bac8;
  --sw-text-link     : #1e5a94;

  /* ── Shadows */
  --sw-shadow-card   : 0 2px 10px rgba(0,0,0,0.07);
  --sw-shadow-deep   : 0 8px 32px rgba(0,0,0,0.16);

  /* ── Radii */
  --sw-radius        : 8px;
  --sw-radius-sm     : 4px;
  --sw-radius-pill   : 20px;

  /* ── Dashboard accent aliases (used by production/sales pages) */
  --sw-prod          : #007a55;
  --sw-sales         : #1a6bbf;
}

/* ══════════════════════════════════════════════════════════════
   3. RESET & BASE
   ══════════════════════════════════════════════════════════════ */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

html { height: 100%; font-size: 13px; }

body.sw-app {
  font-family    : var(--sw-font);
  background     : var(--sw-bg-page);
  color          : var(--sw-text);
  height         : 100%;
  overflow-x     : hidden;
  -webkit-font-smoothing : antialiased;
}

/* WordPress admin bar offset */
body.admin-bar .sw-topbar  { top: 32px; }
body.admin-bar .sw-shell   { padding-top: 32px; }
@media screen and (max-width: 782px) {
  body.admin-bar .sw-topbar { top: 46px; }
  body.admin-bar .sw-shell  { padding-top: 46px; }
}

a { color: var(--sw-text-link); text-decoration: none; }
a:hover { text-decoration: underline; }
img { max-width: 100%; height: auto; display: block; }

/* ══════════════════════════════════════════════════════════════
   4. SHELL LAYOUT
   ══════════════════════════════════════════════════════════════ */
.sw-shell {
  display        : flex;
  flex-direction : column;
  min-height     : 100vh;
}

/* Full-height app mode (logged-in pages) */
body.sw-page-full .sw-shell {
  height         : 100vh;
  overflow       : hidden;
}

.sw-body {
  flex           : 1;
  overflow-y     : auto;
  display        : flex;
  flex-direction : column;
}

/* Page content wrapper — no max-width, full bleed */
.sw-page-content {
  flex           : 1;
  display        : flex;
  flex-direction : column;
  min-height     : 0;
}

/* ══════════════════════════════════════════════════════════════
   5. TOP BAR
   ══════════════════════════════════════════════════════════════ */
.sw-topbar {
  height         : 52px;
  background     : var(--sw-navy);
  display        : flex;
  align-items    : center;
  padding        : 0 20px;
  position       : sticky;
  top            : 0;
  z-index        : 500;
  box-shadow     : 0 2px 8px rgba(0,0,0,0.28);
  flex-shrink    : 0;
  gap            : 0;
}

/* Logo
 * ─────────────────────────────────────────────────────────────────────────────
 * To add the real logo:
 *   1. Export white versions from your brand files:
 *        logo-white.png  (horizontal lockup: S mark + Stillwell®)  ~300px wide
 *        logo-mark-white.png  (S mark only)  ~60px wide
 *   2. Drop both files into:  wp-content/themes/stillwell/assets/images/
 *   The PHP in header.php will detect them and switch from the CSS fallback
 *   to the image automatically — no further code changes needed.
 * ─────────────────────────────────────────────────────────────────────────────
 */
.sw-logo {
  display        : flex;
  align-items    : center;
  gap            : 10px;
  margin-right   : 24px;
  flex-shrink    : 0;
  text-decoration: none;
  line-height    : 0;
}
/* Image logo (real brand assets) */
.sw-logo-img {
  height         : 30px;
  width          : auto;
  display        : block;
  filter         : brightness(0) invert(1);
}
.sw-logo-mobile { display: none; }
/* Fallback: CSS letterform (shown when image files aren't present yet) */
.sw-logo-mark {
  width          : 30px;
  height         : 30px;
  background     : rgba(255,255,255,0.14);
  border         : 1.5px solid rgba(255,255,255,0.28);
  border-radius  : var(--sw-radius-sm);
  display        : flex;
  align-items    : center;
  justify-content: center;
  font-family    : var(--sw-font-display);
  font-size      : 18px;
  color          : #fff;
  flex-shrink    : 0;
}
.sw-logo-text {
  font-family    : var(--sw-font-display);
  font-size      : 17px;
  color          : #fff;
  letter-spacing : 0.14em;
}

/* Nav items */
.sw-nav {
  display        : flex;
  align-items    : stretch;
  flex           : 1;
  height         : 100%;
  overflow-x     : auto;
  scrollbar-width: none;
}
.sw-nav::-webkit-scrollbar { display: none; }

.sw-nav-item {
  display        : flex;
  align-items    : center;
  padding        : 0 13px;
  height         : 100%;
  cursor         : pointer;
  color          : rgba(255,255,255,0.72);
  font-size      : 11px;
  font-weight    : 700;
  letter-spacing : 0.1em;
  text-transform : uppercase;
  transition     : all 0.15s;
  gap            : 5px;
  white-space    : nowrap;
  border         : none;
  background     : transparent;
  border-bottom  : 3px solid transparent;
  font-family    : var(--sw-font);
}
.sw-nav-item:hover,
.sw-nav-item[aria-expanded="true"] {
  color          : #fff;
  background     : rgba(255,255,255,0.08);
  border-bottom-color: var(--sw-red);
}
.sw-nav-item.active {
  color          : #fff;
  border-bottom-color: var(--sw-red);
}
.sw-nav-item .sw-chevron {
  width          : 10px;
  height         : 10px;
  opacity        : 0.55;
  transition     : transform 0.18s;
  flex-shrink    : 0;
}
.sw-nav-item[aria-expanded="true"] .sw-chevron {
  transform      : rotate(180deg);
  opacity        : 1;
}

/* Right controls */
.sw-topbar-right {
  display        : flex;
  align-items    : center;
  gap            : 10px;
  margin-left    : auto;
  flex-shrink    : 0;
}
.sw-search-bar {
  background     : rgba(255,255,255,0.1);
  border         : 1px solid rgba(255,255,255,0.15);
  border-radius  : var(--sw-radius-sm);
  padding        : 6px 12px;
  color          : rgba(255,255,255,0.8);
  font-size      : 12px;
  font-family    : var(--sw-font);
  width          : 190px;
  outline        : none;
  transition     : all 0.2s;
}
.sw-search-bar:focus {
  background     : rgba(255,255,255,0.16);
  border-color   : rgba(255,255,255,0.4);
  color          : #fff;
}
.sw-search-bar::placeholder { color: rgba(255,255,255,0.4); }

.sw-icon-btn {
  width          : 32px;
  height         : 32px;
  border-radius  : var(--sw-radius-sm);
  display        : flex;
  align-items    : center;
  justify-content: center;
  color          : rgba(255,255,255,0.6);
  cursor         : pointer;
  transition     : all 0.15s;
  background     : transparent;
  border         : none;
  position       : relative;
}
.sw-icon-btn:hover { background: rgba(255,255,255,0.1); color: #fff; }

.sw-avatar {
  width          : 32px;
  height         : 32px;
  border-radius  : 50%;
  background     : rgba(255,255,255,0.14);
  border         : 1.5px solid rgba(255,255,255,0.28);
  display        : flex;
  align-items    : center;
  justify-content: center;
  font-weight    : 700;
  font-size      : 11px;
  color          : #fff;
  cursor         : pointer;
  flex-shrink    : 0;
  letter-spacing : 0.03em;
}

/* Hamburger (hidden on desktop) */
.sw-hamburger {
  display        : none;
  flex-direction : column;
  gap            : 5px;
  background     : transparent;
  border         : none;
  cursor         : pointer;
  padding        : 6px 4px;
}
.sw-hamburger span {
  display        : block;
  width          : 22px;
  height         : 2px;
  background     : rgba(255,255,255,0.8);
  border-radius  : 2px;
  transition     : all 0.2s;
}
.sw-hamburger.open span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.sw-hamburger.open span:nth-child(2) { opacity: 0; }
.sw-hamburger.open span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* ══════════════════════════════════════════════════════════════
   6. MEGA MENU (desktop dropdown)
   ══════════════════════════════════════════════════════════════ */
.sw-mega {
  position       : fixed;
  top            : 52px;
  left           : 0;
  right          : 0;
  background     : #fff;
  box-shadow     : var(--sw-shadow-deep);
  border-top     : 3px solid var(--sw-red);
  z-index        : 400;
  flex-direction : column;
  display        : none;
}
.sw-mega:not([hidden]) { display: flex; }

.sw-mega-inner {
  display        : flex;
  padding        : 22px 28px;
  gap            : 0;
}
.sw-mega-col {
  flex           : 1;
  padding        : 0 18px;
  border-right   : 1px solid var(--sw-border);
  min-width      : 0;
}
.sw-mega-col:first-child { padding-left: 0; }
.sw-mega-col:last-child  { border-right: none; }

.sw-mega-col-title {
  font-size      : 9.5px;
  font-weight    : 700;
  text-transform : uppercase;
  letter-spacing : 0.2em;
  color          : var(--sw-text-muted);
  margin-bottom  : 8px;
  padding-bottom : 6px;
  border-bottom  : 1px solid var(--sw-border);
}
.sw-mega-link {
  display        : flex;
  align-items    : center;
  gap            : 8px;
  padding        : 5px 6px;
  border-radius  : var(--sw-radius-sm);
  transition     : background 0.12s;
  color          : var(--sw-text);
  font-size      : 12px;
  text-decoration: none;
  cursor         : pointer;
  white-space    : nowrap;
}
.sw-mega-link:hover       { background: var(--sw-bg-warm); text-decoration: none; }
.sw-mega-link-active      { background: var(--sw-bg-warm); font-weight: 600; }
.sw-mega-link-disabled    { opacity: 0.55; cursor: default; color: var(--sw-text-muted); }
.sw-mega-link-disabled:hover { background: transparent; }

.sw-mega-link-icon {
  width          : 20px;
  height         : 20px;
  border-radius  : var(--sw-radius-sm);
  display        : flex;
  align-items    : center;
  justify-content: center;
  font-size      : 11px;
  flex-shrink    : 0;
}
.sw-mega-link-text { flex: 1; }
.sw-mega-link-soon {
  font-size      : 8.5px;
  font-weight    : 700;
  text-transform : uppercase;
  letter-spacing : 0.06em;
  padding        : 1px 5px;
  border-radius  : 3px;
  background     : var(--sw-bg-warm);
  color          : var(--sw-text-hint);
  flex-shrink    : 0;
  border         : 1px solid var(--sw-border-med);
}
.sw-mega-footer {
  border-top     : 1px solid var(--sw-border);
  padding        : 11px 28px;
  display        : flex;
  align-items    : center;
  gap            : 6px;
  background     : var(--sw-bg-warm);
  flex-wrap      : wrap;
}
.sw-mega-footer-label {
  font-size      : 10px;
  font-weight    : 700;
  text-transform : uppercase;
  letter-spacing : 0.15em;
  color          : var(--sw-text-muted);
  margin-right   : 4px;
}
.sw-mega-quick {
  font-size      : 11px;
  color          : var(--sw-blue);
  cursor         : pointer;
  padding        : 4px 10px;
  border-radius  : var(--sw-radius-sm);
  font-weight    : 600;
  transition     : background 0.12s;
  text-decoration: none;
}
.sw-mega-quick:hover        { background: var(--sw-blue-bg); text-decoration: none; }
.sw-mega-quick-disabled     { color: var(--sw-text-hint); cursor: default; opacity: 0.6; }
.sw-mega-quick-disabled:hover { background: transparent; }

/* ══════════════════════════════════════════════════════════════
   7. OVERLAY
   ══════════════════════════════════════════════════════════════ */
.sw-overlay {
  position       : fixed;
  inset          : 0;
  z-index        : 350;
  background     : rgba(0,0,0,0.1);
  display        : none;
}
.sw-overlay.active { display: block; }

/* ══════════════════════════════════════════════════════════════
   8. MOBILE DRAWER
   ══════════════════════════════════════════════════════════════ */
.sw-mobile-drawer {
  position       : fixed;
  top            : 0;
  left           : 0;
  bottom         : 0;
  width          : 280px;
  max-width      : 85vw;
  background     : var(--sw-navy);
  z-index        : 600;
  display        : flex;
  flex-direction : column;
  transform      : translateX(-100%);
  transition     : transform 0.25s ease;
  overflow-y     : auto;
}
.sw-mobile-drawer:not([hidden]) { display: flex; }
.sw-mobile-drawer.open          { transform: translateX(0); }

.sw-mobile-drawer-header {
  display        : flex;
  align-items    : center;
  justify-content: space-between;
  padding        : 16px 18px;
  border-bottom  : 1px solid rgba(255,255,255,0.1);
  flex-shrink    : 0;
}
.sw-mobile-close {
  background     : transparent;
  border         : none;
  color          : rgba(255,255,255,0.7);
  font-size      : 18px;
  cursor         : pointer;
  padding        : 4px;
  line-height    : 1;
}
.sw-mobile-close:hover { color: #fff; }

.sw-mobile-nav {
  flex           : 1;
  padding        : 8px 0;
}
.sw-mobile-module-btn {
  display        : flex;
  align-items    : center;
  justify-content: space-between;
  width          : 100%;
  padding        : 11px 18px;
  background     : transparent;
  border         : none;
  color          : rgba(255,255,255,0.8);
  font-size      : 12px;
  font-weight    : 700;
  text-transform : uppercase;
  letter-spacing : 0.1em;
  cursor         : pointer;
  font-family    : var(--sw-font);
  transition     : background 0.15s;
}
.sw-mobile-module-btn:hover { background: rgba(255,255,255,0.06); }
.sw-mobile-module.open .sw-mobile-module-btn { color: #fff; background: rgba(255,255,255,0.06); }
.sw-mobile-module.open .sw-chevron           { transform: rotate(180deg); }
.sw-mobile-module-btn .sw-chevron            { width: 10px; height: 10px; opacity: 0.5; transition: transform 0.18s; }

.sw-mobile-module-body {
  display        : none;
  padding-bottom : 4px;
}
.sw-mobile-module.open .sw-mobile-module-body { display: block; }

.sw-mobile-link {
  display        : flex;
  align-items    : center;
  justify-content: space-between;
  padding        : 7px 18px 7px 28px;
  color          : rgba(255,255,255,0.65);
  font-size      : 12px;
  text-decoration: none;
  transition     : all 0.12s;
}
.sw-mobile-link:hover         { color: #fff; background: rgba(255,255,255,0.06); text-decoration: none; }
.sw-mobile-link.active        { color: #fff; font-weight: 600; }
.sw-mobile-link-soon          { opacity: 0.4; cursor: default; }
.sw-mobile-soon-badge {
  font-size      : 8px;
  font-weight    : 700;
  text-transform : uppercase;
  letter-spacing : 0.06em;
  padding        : 1px 5px;
  border-radius  : 3px;
  background     : rgba(255,255,255,0.1);
  color          : rgba(255,255,255,0.5);
}

/* ══════════════════════════════════════════════════════════════
   9. SECONDARY NAV (subnav tabs — output by page templates)
   ══════════════════════════════════════════════════════════════ */
.sw-subnav {
  height         : 36px;
  background     : #fff;
  border-bottom  : 1px solid var(--sw-border-med);
  display        : flex;
  align-items    : center;
  padding        : 0 24px;
  flex-shrink    : 0;
  overflow-x     : auto;
  scrollbar-width: none;
}
.sw-subnav::-webkit-scrollbar { display: none; }

.sw-subnav-item {
  padding        : 0 13px;
  height         : 100%;
  display        : flex;
  align-items    : center;
  font-size      : 11px;
  font-weight    : 600;
  color          : var(--sw-text-muted);
  cursor         : pointer;
  border-bottom  : 2px solid transparent;
  transition     : all 0.15s;
  text-transform : uppercase;
  letter-spacing : 0.07em;
  white-space    : nowrap;
  text-decoration: none;
}
.sw-subnav-item:hover        { color: var(--sw-navy); text-decoration: none; }
.sw-subnav-item.active       { color: var(--sw-navy); border-bottom-color: var(--sw-red); font-weight: 700; }
.sw-subnav-right             { margin-left: auto; display: flex; align-items: center; gap: 8px; }

/* ══════════════════════════════════════════════════════════════
   10. PAGE CONTENT AREA
   ══════════════════════════════════════════════════════════════ */
.sw-content {
  padding        : 20px 24px;
  display        : flex;
  flex-direction : column;
  gap            : 16px;
  flex           : 1;
  min-height     : 0;
}
.sw-page-header {
  display        : flex;
  align-items    : flex-end;
  justify-content: space-between;
  gap            : 16px;
  flex-wrap      : wrap;
}
.sw-page-eyebrow {
  font-size      : 10px;
  font-weight    : 700;
  text-transform : uppercase;
  letter-spacing : 0.2em;
  color          : var(--sw-text-muted);
  margin-bottom  : 2px;
}
.sw-page-title {
  font-family    : var(--sw-font-display);
  font-size      : 28px;
  color          : var(--sw-navy);
  letter-spacing : 0.06em;
  line-height    : 1;
}
.sw-page-actions {
  display        : flex;
  gap            : 8px;
  align-items    : center;
  flex-wrap      : wrap;
}

/* ══════════════════════════════════════════════════════════════
   11. BUTTONS
   ══════════════════════════════════════════════════════════════ */
.sw-btn {
  padding        : 7px 16px;
  border-radius  : var(--sw-radius-sm);
  font-size      : 11.5px;
  font-weight    : 700;
  text-transform : uppercase;
  letter-spacing : 0.08em;
  cursor         : pointer;
  border         : none;
  transition     : all 0.15s;
  display        : inline-flex;
  align-items    : center;
  gap            : 6px;
  font-family    : var(--sw-font);
  white-space    : nowrap;
  text-decoration: none;
}
.sw-btn:hover { text-decoration: none; }
.sw-btn-navy  { background: var(--sw-navy); color: #fff; }
.sw-btn-navy:hover { background: var(--sw-navy-deep); color: #fff; }
.sw-btn-red   { background: var(--sw-red); color: #fff; }
.sw-btn-red:hover { background: var(--sw-red-deep); color: #fff; }
.sw-btn-gold  { background: var(--sw-gold); color: var(--sw-navy); }
.sw-btn-gold:hover { background: #b8890e; color: var(--sw-navy); }
.sw-btn-ghost { background: transparent; color: var(--sw-navy); border: 1.5px solid var(--sw-border-med); }
.sw-btn-ghost:hover { border-color: var(--sw-navy); background: var(--sw-bg-warm); color: var(--sw-navy); }
.sw-btn-sm    { padding: 4px 10px; font-size: 10.5px; }

/* ══════════════════════════════════════════════════════════════
   12. CARDS
   ══════════════════════════════════════════════════════════════ */
.sw-card {
  background     : var(--sw-bg);
  border-radius  : var(--sw-radius);
  box-shadow     : var(--sw-shadow-card);
  padding        : 20px 24px;
}
.sw-card-accent-navy  { border-top: 3px solid var(--sw-navy); }
.sw-card-accent-red   { border-top: 3px solid var(--sw-red); }
.sw-card-accent-gold  { border-top: 3px solid var(--sw-gold); }
.sw-card-accent-green { border-top: 3px solid var(--sw-green); }
.sw-card-accent-blue  { border-top: 3px solid var(--sw-blue); }

/* ══════════════════════════════════════════════════════════════
   13. STAT CARDS
   ══════════════════════════════════════════════════════════════ */
.sw-stat-row {
  display        : grid;
  grid-template-columns: repeat(4, 1fr);
  gap            : 12px;
}
.sw-stat {
  background     : var(--sw-bg);
  border-radius  : var(--sw-radius);
  border         : 1px solid var(--sw-border);
  padding        : 12px 16px;
  border-top     : 3px solid var(--sw-border-med);
}
.sw-stat.navy  { border-top-color: var(--sw-navy); }
.sw-stat.red   { border-top-color: var(--sw-alert-red); }
.sw-stat.gold  { border-top-color: var(--sw-gold); }
.sw-stat.green { border-top-color: var(--sw-green); }
.sw-stat.blue  { border-top-color: var(--sw-blue); }
.sw-stat-label {
  font-size      : 9.5px;
  font-weight    : 700;
  text-transform : uppercase;
  letter-spacing : 0.18em;
  color          : var(--sw-text-muted);
  margin-bottom  : 4px;
}
.sw-stat-value {
  font-family    : var(--sw-font-display);
  font-size      : 26px;
  color          : var(--sw-navy);
  letter-spacing : 0.04em;
  line-height    : 1;
}
.sw-stat-sub {
  font-size      : 10px;
  color          : var(--sw-text-muted);
  margin-top     : 3px;
  font-family    : var(--sw-font-mono);
}

/* ══════════════════════════════════════════════════════════════
   14. FILTER BAR
   ══════════════════════════════════════════════════════════════ */
.sw-filter-bar {
  background     : var(--sw-bg);
  border         : 1px solid var(--sw-border);
  border-radius  : var(--sw-radius);
  padding        : 10px 14px;
  display        : flex;
  align-items    : center;
  gap            : 10px;
  flex-wrap      : wrap;
  flex-shrink    : 0;
}
.sw-filter-label {
  font-size      : 10px;
  font-weight    : 700;
  text-transform : uppercase;
  letter-spacing : 0.15em;
  color          : var(--sw-text-muted);
  flex-shrink    : 0;
}
.sw-filter-sep {
  width          : 1px;
  height         : 20px;
  background     : var(--sw-border);
  flex-shrink    : 0;
}

/* Pills */
.sw-pill {
  padding        : 4px 10px;
  border-radius  : var(--sw-radius-pill);
  border         : 1.5px solid var(--sw-border-med);
  font-size      : 11px;
  font-weight    : 700;
  cursor         : pointer;
  transition     : all 0.15s;
  background     : #fff;
  color          : var(--sw-navy);
  user-select    : none;
  white-space    : nowrap;
}
.sw-pill:hover              { border-color: var(--sw-navy); }
.sw-pill.active             { background: var(--sw-navy); color: #fff; border-color: var(--sw-navy); }
.sw-pill-overdue            { border-color: #e8b4b0; color: var(--sw-alert-red); }
.sw-pill-overdue.active     { background: var(--sw-alert-red); color: #fff; border-color: var(--sw-alert-red); }
.sw-pill-cnt {
  display        : inline-block;
  font-size      : 9.5px;
  margin-left    : 3px;
  opacity        : 0.75;
}

/* ══════════════════════════════════════════════════════════════
   15. TABLES
   ══════════════════════════════════════════════════════════════ */
.sw-table-wrap {
  overflow-x     : auto;
  flex           : 1;
  min-height     : 0;
}
.sw-table {
  width          : 100%;
  border-collapse: collapse;
}
.sw-table thead { position: sticky; top: 0; z-index: 10; }
.sw-table th {
  background     : var(--sw-navy);
  color          : #fff;
  font-size      : 10px;
  font-weight    : 700;
  text-transform : uppercase;
  letter-spacing : 0.12em;
  padding        : 8px 12px;
  white-space    : nowrap;
  text-align     : left;
  cursor         : default;
  user-select    : none;
}
/* Sortable header */
.sw-table th.sw-sortable {
  cursor         : pointer;
  padding-right  : 22px;
  position       : relative;
}
.sw-table th.sw-sortable::after {
  content        : ' ⇅';
  position       : absolute;
  right          : 6px;
  opacity        : 0.4;
  font-size      : 9px;
  letter-spacing : 0;
}
.sw-table th.sw-sort-asc::after  { content: ' ↑'; opacity: 1; }
.sw-table th.sw-sort-desc::after { content: ' ↓'; opacity: 1; }
.sw-table th.sw-sortable:hover   { background: var(--sw-navy-light); }

.sw-table td {
  padding        : 6px 12px;
  border-bottom  : 1px solid var(--sw-border);
  font-size      : 12px;
  vertical-align : middle;
  white-space    : nowrap;
}
.sw-table tr:hover td { background: #f9f8f5; }
.sw-table .sw-section-row td {
  background     : var(--sw-bg-warm);
  font-size      : 10px;
  font-weight    : 700;
  text-transform : uppercase;
  letter-spacing : 0.12em;
  color          : var(--sw-text-muted);
}

/* Sticky columns */
.sw-col-sticky-1 {
  position       : sticky !important;
  left           : 0;
  z-index        : 5;
  background     : #fff;
}
.sw-col-sticky-2 {
  position       : sticky !important;
  left           : 88px;
  z-index        : 5;
  background     : #fff;
  box-shadow     : 2px 0 4px rgba(0,0,0,0.06);
}
.sw-table tr:hover .sw-col-sticky-1,
.sw-table tr:hover .sw-col-sticky-2 { background: #f9f8f5; }
.sw-table thead th.sw-col-sticky-1,
.sw-table thead th.sw-col-sticky-2  { background: var(--sw-navy); z-index: 15; }

/* Table utilities */
.sw-num  { font-family: var(--sw-font-mono); font-size: 11.5px; text-align: right; }
.sw-mono { font-family: var(--sw-font-mono); font-size: 11.5px; }
.sw-muted{ color: var(--sw-text-muted); }
.sw-link { color: var(--sw-blue); font-family: var(--sw-font-mono); font-size: 11px; }
.sw-overdue { color: var(--sw-alert-red); font-weight: 700; font-family: var(--sw-font-mono); font-size: 11.5px; }

/* Card wrapping a table */
.sw-table-card {
  background     : var(--sw-bg);
  border-radius  : var(--sw-radius);
  box-shadow     : var(--sw-shadow-card);
  overflow       : hidden;
  display        : flex;
  flex-direction : column;
  flex           : 1;
  min-height     : 0;
}
.sw-table-footer {
  display        : flex;
  align-items    : center;
  justify-content: space-between;
  padding        : 10px 16px;
  border-top     : 1px solid var(--sw-border);
  background     : var(--sw-bg-warm);
  flex-shrink    : 0;
  gap            : 12px;
  flex-wrap      : wrap;
}
.sw-table-summary { font-size: 11px; color: var(--sw-text-muted); font-family: var(--sw-font-mono); }

/* Pagination */
.sw-pagination { display: flex; gap: 4px; flex-wrap: wrap; }
.sw-page-btn {
  width          : 28px;
  height         : 28px;
  border-radius  : var(--sw-radius-sm);
  border         : 1px solid var(--sw-border-med);
  background     : #fff;
  font-size      : 11.5px;
  cursor         : pointer;
  display        : flex;
  align-items    : center;
  justify-content: center;
  color          : var(--sw-navy);
  transition     : all 0.15s;
  font-family    : var(--sw-font);
}
.sw-page-btn.active      { background: var(--sw-navy); color: #fff; border-color: var(--sw-navy); }
.sw-page-btn:hover:not(.active) { background: var(--sw-bg-warm); }

/* ══════════════════════════════════════════════════════════════
   16. BADGES
   ══════════════════════════════════════════════════════════════ */
.sw-badge {
  display        : inline-flex;
  align-items    : center;
  padding        : 2px 8px;
  border-radius  : var(--sw-radius-pill);
  font-size      : 10px;
  font-weight    : 700;
  white-space    : nowrap;
  letter-spacing : 0.03em;
}
.sw-badge-green  { background: var(--sw-green-bg);  color: var(--sw-green-text); }
.sw-badge-amber  { background: var(--sw-amber-bg);  color: var(--sw-amber-text); }
.sw-badge-blue   { background: var(--sw-blue-bg);   color: var(--sw-blue); }
.sw-badge-red    { background: var(--sw-alert-red-bg); color: var(--sw-alert-red); }
.sw-badge-muted  { background: var(--sw-bg-warm);   color: var(--sw-text-muted); }
.sw-badge-navy   { background: var(--sw-navy);       color: #fff; }

/* overdue-specific badge */
.oo-overdue-badge { background: var(--sw-alert-red-bg); color: var(--sw-alert-red); }

/* ══════════════════════════════════════════════════════════════
   17. PROGRESS BARS
   ══════════════════════════════════════════════════════════════ */
.sw-bar-track {
  width          : 100%;
  height         : 8px;
  background     : var(--sw-border);
  border-radius  : var(--sw-radius-sm);
  overflow       : hidden;
}
.sw-bar-fill {
  height         : 100%;
  border-radius  : var(--sw-radius-sm);
  background     : var(--sw-green);
  transition     : width 0.4s ease;
}
.sw-bar-fill.warn   { background: var(--sw-gold); }
.sw-bar-fill.danger { background: var(--sw-alert-red); }

/* Inline progress (table cell) */
.sw-prog-cell { display: flex; align-items: center; gap: 8px; min-width: 80px; }
.sw-prog-track { flex: 1; height: 5px; background: var(--sw-border); border-radius: 3px; }
.sw-prog-fill  { height: 100%; border-radius: 3px; background: var(--sw-green); }
.sw-prog-fill.warn   { background: var(--sw-gold); }
.sw-prog-fill.danger { background: var(--sw-alert-red); }
.sw-prog-pct   { font-size: 10px; font-family: var(--sw-font-mono); color: var(--sw-text-muted); flex-shrink: 0; width: 28px; text-align: right; }

/* ══════════════════════════════════════════════════════════════
   18. FORM INPUTS
   ══════════════════════════════════════════════════════════════ */
.sw-input, .sw-select {
  border         : 1px solid var(--sw-border-med);
  border-radius  : var(--sw-radius-sm);
  padding        : 6px 10px;
  font-size      : 12px;
  font-family    : var(--sw-font);
  color          : var(--sw-text);
  background     : #fff;
  outline        : none;
  transition     : border 0.15s;
  width          : 100%;
}
.sw-input:focus, .sw-select:focus { border-color: var(--sw-navy); }
.sw-input::placeholder { color: var(--sw-text-hint); }

.sw-select-group  { display: flex; flex-direction: column; gap: 4px; }
.sw-select-label  { font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.12em; color: var(--sw-text-muted); }

/* ══════════════════════════════════════════════════════════════
   19. SWCOMBO SEARCHABLE DROPDOWN
   ══════════════════════════════════════════════════════════════ */
.sw-combo-wrap       { position: relative; }
.sw-combo-input-row  { display: flex; align-items: center; }
.sw-combo-input-row input {
  border         : 1px solid var(--sw-border-med);
  border-radius  : var(--sw-radius-sm);
  padding        : 6px 10px;
  font-size      : 12px;
  font-family    : var(--sw-font);
  width          : 100%;
  outline        : none;
  transition     : border 0.15s;
}
.sw-combo-input-row input:focus { border-color: var(--sw-navy); }
.sw-combo-dropdown {
  position       : absolute;
  top            : calc(100% + 3px);
  left           : 0;
  min-width      : 100%;
  background     : #fff;
  border         : 1px solid var(--sw-border-med);
  border-radius  : var(--sw-radius-sm);
  box-shadow     : var(--sw-shadow-deep);
  z-index        : 9000;
  max-height     : 220px;
  overflow-y     : auto;
  display        : none;
}
.sw-combo-dropdown.open   { display: block; }
.sw-combo-option {
  padding        : 7px 12px;
  font-size      : 12px;
  cursor         : pointer;
  transition     : background 0.1s;
}
.sw-combo-option:hover, .sw-combo-option.highlighted { background: var(--sw-bg-warm); }
.sw-combo-option.selected { font-weight: 600; color: var(--sw-navy); }
.sw-combo-no-results      { padding: 7px 12px; font-size: 12px; color: var(--sw-text-hint); }

/* ══════════════════════════════════════════════════════════════
   20. LOADER / SPINNER
   ══════════════════════════════════════════════════════════════ */
.sw-loader {
  position       : fixed;
  inset          : 0;
  background     : rgba(238,237,234,0.85);
  display        : none;          /* shown by JS during AJAX — never visible on load */
  align-items    : center;
  justify-content: center;
  z-index        : 9999;
}
.sw-loader.is-loading {
  display        : flex;
}
.sw-loader-ring {
  width          : 40px;
  height         : 40px;
  border         : 4px solid var(--sw-border);
  border-top-color: var(--sw-navy);
  border-radius  : 50%;
  animation      : sw-spin 0.8s linear infinite;
}
@keyframes sw-spin { to { transform: rotate(360deg); } }

/* ══════════════════════════════════════════════════════════════
   21. TYPOGRAPHY UTILITIES
   ══════════════════════════════════════════════════════════════ */
.sw-eyebrow {
  font-size      : 10px;
  font-weight    : 700;
  text-transform : uppercase;
  letter-spacing : 0.2em;
  color          : var(--sw-text-muted);
}
.sw-title  { font-family: var(--sw-font-display); font-size: 36px; color: var(--sw-navy); letter-spacing: 0.06em; text-transform: uppercase; }
.sw-bold   { font-weight: 700; }
.sw-upper  { text-transform: uppercase; letter-spacing: 0.06em; }
.sw-mono   { font-family: var(--sw-font-mono); }
.sw-muted  { color: var(--sw-text-muted); }

/* ══════════════════════════════════════════════════════════════
   22. OVERDUE / STATUS CLASSES (used by existing page templates)
   ══════════════════════════════════════════════════════════════ */
.oo-overdue        { color: var(--sw-alert-red); font-weight: 600; }
.oo-card-overdue   { border-left: 3px solid var(--sw-alert-red) !important; }

/* ══════════════════════════════════════════════════════════════
   23. RESPONSIVE — MOBILE FIRST
   ══════════════════════════════════════════════════════════════ */

/* Tablet / small desktop */
@media (max-width: 1024px) {
  .sw-stat-row { grid-template-columns: repeat(2, 1fr); }
  .sw-search-bar { width: 140px; }
}

/* Mobile */
@media (max-width: 768px) {
  /* Hide desktop nav, show hamburger */
  .sw-nav         { displa