/* System font stack — no external font request. Production has no internet;
   this stack resolves to the OS-native UI font on every platform.
   Numeric/tabular text uses font-variant-numeric: tabular-nums instead of a
   monospace face, which preserves the column alignment a mono face was there for. */

/* ══════════════════════════════════════════════════════════
   SAACAR theme — UX4G Design System 3.0 semantic colour roles
   (Design.md §5 spacing/radius · §6 elevation · §7 colour · §9 a11y)

   Canvas/surfaces/text are a clean blue-grey neutral system (matches the
   #EDF2F9 reference design). Brand stays SAACAR maroon/brown — logo,
   wordmark, primary actions, focus ring. Every value below is mapped to a
   UX4G semantic role and contrast-checked against WCAG 2.1 AA: 4.5:1 for
   body text, 3:1 for non-text UI boundaries. Ratios recomputed against the
   real formula (relative luminance, not eyeballed) — see the number after
   each value.
   ══════════════════════════════════════════════════════════ */
:root,
[data-theme='light'] {
  color-scheme: light;

  /* ── Brand (Background/Brand/Primary/*, Action/Brand/*) ── */
  --primary-red: #682418;          /* Primary · 11.3:1 on card */
  --secondary-red: #863a2c;        /* Primary container / hover · 7.9:1 */
  --primary-hover: #55190f;        /* Action/Brand/Primary/Hover */
  --primary-soft: #f6ecea;         /* Tonal fill, de-warmed to sit on blue-grey */
  --primary-soft-border: #e6d1cc;
  --text-accent-brown: #4a2222;    /* Deep maroon · logo + department wordmark, unchanged */
  --on-primary: #ffffff;
  --primary-rgb: 104, 36, 24;      /* tint channel for translucent brand fills */
  --secondary-rgb: 134, 58, 44;

  /* ── Text/Neutral/* ── */
  --text-primary: #1a2233;         /* 15.9:1 on card, 14.1:1 on page */
  --text-secondary: #5a6884;       /* 5.6:1 on card, 5.0:1 on page */
  --text-tertiary: #5f6b85;        /* 5.4:1 on card, 4.8:1 on page */
  --text-inverse: #eef2fb;

  /* ── Background/Neutral/* — the #EDF2F9 blue-grey canvas ── */
  --bg-page: #edf2f9;              /* Default */
  --bg-card: #ffffff;              /* Elevated */
  --bg-header: #ffffff;
  --bg-sidebar: #ffffff;
  --surface-soft: #f4f7fb;         /* Soft */
  --surface-subtle: #e6ecf5;       /* Subtle */
  --surface-emphasis: #d8e1ee;     /* Emphasis */
  --inverse-surface: #202a3d;      /* Tooltips / dark chips */
  --inverse-on-surface: #eef2fb;
  --inverse-on-surface-muted: #b7c0d4;
  --inverse-border: #3d4a63;
  --inverse-danger: #ffb4a6;       /* Status text on an inverse surface */
  --inverse-success: #80da88;

  /* ── Border/Neutral/* ──
     UX4G §9 flags Control/Border/Default at low contrast as a release
     blocker. --border-control is repointed at a darker step (>=3.7:1) for
     any element whose boundary is the only thing showing its extent. */
  --border-light: #eef2f7;         /* Subtle · dividers inside bounded areas */
  --border-color: #dde5f0;         /* Default · card + container edges (decorative) */
  --border-control: #7885a0;       /* Strong · inputs, selects, checkboxes · 3.7:1 */

  /* ── Focus/Outline (§9 — visible focus on every interactive element) ── */
  --focus-ring: #682418;
  --focus-ring-width: 2px;
  --focus-ring-offset: 2px;

  /* ── Overlay/* ── */
  --overlay: rgba(20, 24, 33, 0.40);
  --overlay-strong: rgba(20, 24, 33, 0.70);

  /* ── Status (§7 semantic status colours) — hues kept, containers retuned
     off the old warm cast onto the new neutral field ── */
  --green-text: #00522c;           /* Success · 8.3:1 on its container */
  --green-bg: #e9f6ee;
  --green-border: #b8dcc6;

  --amber-text: #ad4e00;           /* Warning · 4.9:1 on its container */
  --amber-bg: #fdf3e6;
  --amber-border: #f0cfa0;

  --red-text: #8a1a16;             /* Error · 8.2:1 on its container */
  --red-bg: #fdedeb;
  --red-border: #f2b8b2;

  --info-text: #006d75;            /* Information · 6.9:1 on its container */
  --info-bg: #e6f4f5;
  --info-border: #a9d8da;

  --violet-text: #5b21a6;          /* Categorical accent (stage / phase) */
  --violet-bg: #f3effa;
  --violet-border: #d6c2ee;

  --blue-text: #1d4ed8;            /* Categorical accent (pipeline) */
  --blue-bg: #eaf1fd;
  --blue-border: #bcd2f7;

  --pink-text: #a3155a;            /* Categorical accent (gender split) */
  --gold: #f4e0a1;                 /* Soft gold highlight — same in both themes */
  --on-gold: #3e0501;              /* so its foreground must not flip either */

  /* ── Link (FIR Records victim names — kept exactly as the reference) ── */
  --link-victim: #2563eb;          /* 5.2:1 on card */
  --link-victim-hover: #1d4ed8;

  /* ── Urgency signal (aging bands, days-in-current-state) ──
     Row tints stay pale enough that --text-primary holds 4.5:1+ on top of
     them; the tint is a reinforcing cue, not the only signal (WCAG 1.4.1) —
     the Days number and Status badge always carry the same information. */
  --signal-ontrack: #14803c;       /* 5.0:1 on card · 0-15 days */
  --row-ontrack-bg: #f1faf4;
  --signal-warn: #b45309;          /* 5.0:1 on card · 16-30 days */
  --row-warn-bg: #fdf6ec;
  --signal-late: #c2261b;          /* 5.9:1 on card · 31-60 days */
  --row-late-bg: #fdf0ee;
  --signal-critical: #8a1a16;      /* 9.4:1 on card · 60+ days */
  --row-critical-bg: #fbe7e5;

  /* ── Elevation (§6) — every level is a key + ambient shadow pair ── */
  --shadow-rgb: 28, 40, 66;        /* cool navy, theme-bound (was warm maroon) */
  --shadow-sm: 0 1px 2px 0 rgba(var(--shadow-rgb), 0.05), 0 1px 2px 0 rgba(var(--shadow-rgb), 0.04);
  --shadow-md: 0 4px 8px 0 rgba(var(--shadow-rgb), 0.09), 0 1px 2px 0 rgba(var(--shadow-rgb), 0.05);
  --shadow-lg: 0 8px 16px 0 rgba(var(--shadow-rgb), 0.16), 0 4px 8px 0 rgba(var(--shadow-rgb), 0.09);
  --shadow-xl: 0 16px 32px 0 rgba(var(--shadow-rgb), 0.24), 0 8px 16px 0 rgba(var(--shadow-rgb), 0.16);

  /* ── Radius (§5 semantic scale) ── */
  --radius-sm: 4px;
  --radius-md: 8px;
  --radius-lg: 12px;
  --radius-full: 9999px;
}

/* ══════════════════════════════════════════════════════════
   Dark theme — identical key set to Light (Design.md §1: "Any new token
   must be added to both"). Neutrals are warm-tinted rather than UX4G's pure
   greys so the SAACAR brown identity survives the inversion.
   ══════════════════════════════════════════════════════════ */
[data-theme='dark'] {
  color-scheme: dark;

  /* Brand flips to the light-on-dark counterpart (DESIGN.md inverse-primary).
     A #682418 maroon on a dark surface would be unreadable. */
  --primary-red: #ffb4a6;          /* 9.6:1 on --bg-page */
  --secondary-red: #ffdad3;
  --primary-hover: #ffdad3;
  --primary-soft: #3a211c;
  --primary-soft-border: #56332b;
  --text-accent-brown: #ffdad3;
  --on-primary: #3e0501;           /* dark text sits on the light brand fill */
  --primary-rgb: 255, 180, 166;
  --secondary-rgb: 255, 218, 211;

  --text-primary: #e8eaf0;         /* 14.8:1 on --bg-page */
  --text-secondary: #b3bdd1;       /* 9.4:1 */
  --text-tertiary: #93a0ba;        /* 6.1:1 on --bg-card */
  --text-inverse: #1a2233;

  --bg-page: #141821;
  --bg-card: #1c212c;
  --bg-header: #1c212c;
  --bg-sidebar: #1c212c;
  --surface-soft: #222836;
  --surface-subtle: #2a3140;
  --surface-emphasis: #363f52;
  --inverse-surface: #e8eaf0;      /* tooltips invert to light-on-dark-page */
  --inverse-on-surface: #1a2233;
  --inverse-on-surface-muted: #5a6884;
  --inverse-border: #b3bdd1;
  --inverse-danger: #8a1a16;
  --inverse-success: #00522c;

  --border-light: #262d3b;
  --border-color: #303849;
  --border-control: #7885a0;        /* 4.3:1 on --bg-card — keeps 1.4.11 */

  --focus-ring: #ffb4a6;
  --focus-ring-width: 2px;
  --focus-ring-offset: 2px;

  --overlay: rgba(0, 0, 0, 0.60);
  --overlay-strong: rgba(0, 0, 0, 0.80);

  /* Status — UX4G §7 dark steps, on darkened neutral containers */
  --green-text: #80da88;
  --green-bg: #16281c;
  --green-border: #2f4f38;

  --amber-text: #ffc973;
  --amber-bg: #302213;
  --amber-border: #5a4224;

  --red-text: #ffb3ae;
  --red-bg: #331b1a;
  --red-border: #5e3330;

  --info-text: #91e8e0;
  --info-bg: #122b2c;
  --info-border: #2a4f50;

  --violet-text: #d6c2ee;
  --violet-bg: #271e33;
  --violet-border: #453357;

  --blue-text: #bcd2f7;
  --blue-bg: #17233a;
  --blue-border: #2d4470;

  --pink-text: #ffb1cd;
  --gold: #f4e0a1;
  --on-gold: #3e0501;

  --link-victim: #60a5fa;          /* 6.3:1 on --bg-card */
  --link-victim-hover: #93c5fd;

  --signal-ontrack: #4ade80;       /* 9.3:1 on --bg-card · 0-15 days */
  --row-ontrack-bg: #16281c;
  --signal-warn: #fbbf24;          /* 9.7:1 on --bg-card · 16-30 days */
  --row-warn-bg: #302213;
  --signal-late: #f87171;          /* 5.8:1 on --bg-card · 31-60 days */
  --row-late-bg: #331b1a;
  --signal-critical: #ffb3ae;      /* 60+ days */
  --row-critical-bg: #3d1e1c;

  /* §6: shadow colour is theme-bound — a black shadow is invisible in dark */
  --shadow-rgb: 0, 0, 0;
  --shadow-sm: 0 1px 2px 0 rgba(var(--shadow-rgb), 0.30), 0 1px 2px 0 rgba(var(--shadow-rgb), 0.24);
  --shadow-md: 0 4px 8px 0 rgba(var(--shadow-rgb), 0.40), 0 1px 2px 0 rgba(var(--shadow-rgb), 0.24);
  --shadow-lg: 0 8px 16px 0 rgba(var(--shadow-rgb), 0.50), 0 4px 8px 0 rgba(var(--shadow-rgb), 0.36);
  --shadow-xl: 0 16px 32px 0 rgba(var(--shadow-rgb), 0.60), 0 8px 16px 0 rgba(var(--shadow-rgb), 0.44);

  --radius-sm: 4px;
  --radius-md: 8px;
  --radius-lg: 12px;
  --radius-full: 9999px;
}

* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html, body {
  height: 100%;
  font-family: ui-sans-serif, system-ui, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji';
  color: var(--text-primary);
  background-color: var(--bg-page);
  overflow: hidden;
  -webkit-font-smoothing: antialiased;
}

/* ── Accessibility baseline (Design.md §9) ─────────────────
   Focus/Outline must be visible on every interactive element. Six components
   set `outline: none` for looks (.pay-input, .pay-search-input, .pay-textarea,
   .pay-dropzone, .btn-export-pdf, .sidebar-toggle-btn); this restores a
   keyboard-only ring without bringing back the mouse-click outline.

   NOT wrapped in :where() — that contributes zero specificity, so the
   component rules (0-1-0, and later in source order) won and the ring never
   rendered. Element+pseudo is 0-1-1 and [tabindex] is 0-2-0, both of which win. */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
[tabindex]:focus-visible {
  outline: var(--focus-ring-width) solid var(--focus-ring);
  outline-offset: var(--focus-ring-offset);
}

/* Control boundaries are set per-component to var(--border-control); a
   :where() rule here would lose to those same component rules. */

/* A native checkbox can't carry a pseudo-element while appearance is auto, so
   it can't be given an expanded hit area. Rebuilt with appearance:none: a 20px
   visual box centred inside a 44px target (§9). */
input[type='checkbox'],
input[type='radio'] {
  appearance: none;
  -webkit-appearance: none;
  position: relative;
  display: inline-grid;
  place-content: center;
  width: 44px;
  height: 44px;
  margin: 0;
  flex-shrink: 0;
  background: transparent;
  border: none;
  cursor: pointer;
}

input[type='checkbox']::before,
input[type='radio']::before {
  content: '';
  width: 20px;
  height: 20px;
  background-color: var(--bg-card);
  border: 1.5px solid var(--border-control);
  border-radius: var(--radius-sm);
  transition: background-color 0.15s ease, border-color 0.15s ease;
}

input[type='radio']::before {
  border-radius: var(--radius-full);
}

input[type='checkbox']:checked::before,
input[type='checkbox']:indeterminate::before,
input[type='radio']:checked::before {
  background-color: var(--primary-red);
  border-color: var(--primary-red);
}

input[type='checkbox']:hover::before,
input[type='radio']:hover::before {
  border-color: var(--primary-red);
}

input[type='checkbox']:disabled,
input[type='radio']:disabled {
  cursor: not-allowed;
}

input[type='checkbox']:disabled::before,
input[type='radio']:disabled::before {
  opacity: 0.45;
}

/* Tick */
input[type='checkbox']:checked::after {
  content: '';
  position: absolute;
  left: 50%;
  top: 50%;
  width: 5px;
  height: 10px;
  border: solid var(--on-primary);
  border-width: 0 2px 2px 0;
  transform: translate(-50%, -60%) rotate(45deg);
}

/* Indeterminate dash (used by the table select-all controls) */
input[type='checkbox']:indeterminate::after {
  content: '';
  position: absolute;
  left: 50%;
  top: 50%;
  width: 10px;
  height: 2px;
  background-color: var(--on-primary);
  transform: translate(-50%, -50%);
}

/* ── Target size: 44×44 minimum (Design.md §9) ─────────────
   Two strategies. Standalone controls grow their own box. Inline text links
   inside tables keep their visual size and gain a transparent expanded hit
   area, so row density survives. Table rows are raised to 44px so those
   overlays never spill into the neighbouring row and steal its clicks. */

/* 1. Standalone controls grow directly */
.theme-toggle-btn,
.sidebar-toggle-btn,
.fund-icon-btn,
.pay-icon-btn,
.fir-drawer-close,
.bulk-remove-btn,
.fir-row-open-btn {
  min-width: 44px;
  min-height: 44px;
}

/* 2. Buttons, tabs, inputs: raise the box without inflating the type */
.sidebar-item,
.btn-export-pdf,
.fir-csv-btn, .fir-clear-btn, .fir-action-btn, .fir-false-case-btn,
.fir-filter-select, .fir-search-input,
.fund-btn, .fund-clear-btn, .fund-stage-tab,
.fund-select, .fund-input, .fund-search-input, .fund-textarea,
.pay-btn, .pay-tab, .pay-filter-tab, .pay-action-btn,
.pay-input, .pay-textarea, .pay-search-input,
.filter-select, .date-input {
  min-height: 44px;
}

/* Short-labelled tabs ("All") also need the horizontal minimum */
.fund-stage-tab,
.pay-filter-tab,
.pay-tab {
  min-width: 44px;
}

/* 3. Table rows carry the 44px so inline actions have room */
.fir-table tbody td,
.fund-table tbody td,
.pay-table tbody td,
.bulk-table td,
.fir-modal-table td,
.slideover-table td,
.financial-table td {
  height: 44px;
}

/* 4. Inline text links: visual size unchanged, hit area expanded */
.pay-link-btn,
.pay-row-action,
.fund-link-btn,
.fir-doc-btn,
.fund-breadcrumb a,
.pay-breadcrumb a {
  position: relative;
}

.pay-link-btn::after,
.pay-row-action::after,
.fund-link-btn::after,
.fir-doc-btn::after,
.fund-breadcrumb a::after,
.pay-breadcrumb a::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  top: 50%;
  transform: translateY(-50%);
  height: 44px;
}

/* App Container Layout */
.app-container {
  display: flex;
  flex-direction: column;
  height: 100vh;
  width: 100vw;
}

/* Header Styles */
.header {
  box-shadow: var(--shadow-sm);
  display: flex;
  align-items: center;
  justify-content: space-between;
  background-color: var(--bg-header);
  padding: 12px 24px;
  border: 1px solid var(--border-color);
  border-radius: 12px;
  height: 80px;
  flex-shrink: 0;
  position: relative;
  z-index: 30; /* stacks above top header and page main content to allow dropdown overlays */
  margin: 12px 16px 0 16px;
}


.header-container1 {
  display: flex;
  align-items: center;
  gap: 15px;
}

.header-saacab-logo {
  width: 50px;
  height: auto;
  flex-shrink: 0;
}

.header-container2 {
  display: flex;
  flex-direction: column;
  text-align: left;
}

.header-text-heading {
  color: var(--primary-red);
  font-size: 18px;
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: -0.4px;
}

.header-text-container1 {
  color: var(--text-primary);
  font-size: 11px;
  font-weight: 600;
  line-height: 1.3;
  margin-top: 1px;
}

.header-text-container2 {
  color: var(--text-secondary);
  font-size: 10px;
  font-weight: 500;
  margin-top: 1px;
}

.header-nav {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 12px;
  font-weight: 600;
  color: var(--text-primary);
}

.header-date {
  font-size: 13px;
  font-weight: 500;
  color: var(--text-secondary);
  margin-right: 12px;
}
@media (max-width: 768px) {
  .header-date {
    display: none;
  }
}

/* Light/dark switch (Design.md §7 — data-theme on <html>) */
.theme-switch {
  width: 46px;
  height: 24px;
  border-radius: 9999px;
  background-color: var(--surface-soft);
  border: 1px solid var(--border-control);
  position: relative;
  cursor: pointer;
  transition: background-color 0.2s, border-color 0.2s;
  padding: 0;
  display: flex;
  align-items: center;
  margin-right: 12px;
  flex-shrink: 0;
}

.theme-switch:hover {
  border-color: var(--primary-red);
}

.theme-switch-slider {
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background-color: var(--text-secondary);
  position: absolute;
  left: 2px;
  transition: transform 0.2s, background-color 0.2s;
}

/* When dark mode is active */
[data-theme="dark"] #theme-toggle {
  background-color: var(--primary-red);
  border-color: var(--primary-red);
}

[data-theme="dark"] #theme-toggle .theme-switch-slider {
  transform: translateX(24px);
  background-color: #ffffff;
}


.header-iconify-icon {
  display: flex;
  flex-direction: column;
  gap: 2px;
  width: 16px;
  height: 16px;
  justify-content: center;
  align-items: center;
}

.header-img {
  width: 100%;
  height: auto;
}

/* Sidebar and Main Row Layout */
.sidebar-and-main {
  display: flex;
  flex: 1;
  min-height: 0;
  position: relative;
  z-index: 20; /* stacks above top header to allow tooltip overlay */
}

/* Sidebar Left Navigation */
.card-aside {
  width: 194px;
  background-color: var(--bg-sidebar);
  border: 1px solid var(--border-color);
  border-radius: 12px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: 16px 10px;
  flex-shrink: 0;
  overflow-y: auto;
  margin: 16px 8px 16px 16px;
  box-shadow: var(--shadow-sm);
}

.card-aside.ready {
  transition: width 0.3s cubic-bezier(0.4, 0, 0.2, 1), padding 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}


.card-aside-container1 {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

/* Collapse / expand control */
.sidebar-toggle-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  margin: 0 0 8px auto;
  flex-shrink: 0;
  background-color: var(--bg-card);
  border: 1px solid var(--border-color);
  border-radius: 8px;
  color: var(--text-secondary);
  cursor: pointer;
  outline: none;
  transition: all 0.2s ease;
}

.sidebar-toggle-btn:hover {
  color: var(--secondary-red);
  border-color: var(--secondary-red);
  background-color: rgba(var(--secondary-rgb), 0.06);
}

.sidebar-toggle-btn i,
.sidebar-toggle-btn svg {
  width: 16px;
  height: 16px;
}

/* ── Collapsed (icon-only) sidebar ────────────────────────── */
.card-aside.collapsed {
  width: 60px;
  padding: 16px 8px;
  align-items: center;
  overflow: visible; /* let the hover labels escape the rail */
}

.card-aside.collapsed .card-aside-container1 {
  width: 100%;
}

.card-aside.collapsed .sidebar-toggle-btn {
  margin: 0 auto 8px auto;
}

.card-aside.collapsed .sidebar-item {
  justify-content: center;
  padding: 10px 0;
  gap: 0;
  position: relative;
}

.card-aside.collapsed .card-aside-text-container {
  display: none;
}

.card-aside.collapsed .card-aside-bg1 {
  padding: 6px;
  width: 100%;
}

.card-aside.collapsed .card-aside-container2 {
  justify-content: center;
}

/* Labels become hover tooltips while collapsed */
.card-aside.collapsed .sidebar-item p {
  position: absolute;
  left: calc(100% + 10px);
  top: 50%;
  transform: translateY(-50%);
  background-color: var(--inverse-surface);
  color: var(--inverse-on-surface);
  padding: 5px 9px;
  border-radius: 8px;
  font-size: 11px;
  font-weight: 500;
  white-space: nowrap;
  overflow: visible;
  box-shadow: var(--shadow-md);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  z-index: 200;
}

.card-aside.collapsed .sidebar-item:hover p {
  opacity: 1;
  visibility: visible;
}

/* Sidebar Items */
.sidebar-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  border-radius: 10px;
  color: var(--text-secondary);
  font-size: 12.5px;
  font-weight: 500;
  text-decoration: none;
  cursor: pointer;
  transition: all 0.2s ease;
  border: 1px solid transparent;
  background-color: transparent;
  width: 100%;
  text-align: left;
  white-space: nowrap;
}

.sidebar-item p {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
}

.sidebar-item:hover {
  background-color: rgba(var(--secondary-rgb), 0.04);
  color: var(--text-primary);
}

.sidebar-item.active {
  color: var(--secondary-red);
  background-color: rgba(var(--secondary-rgb), 0.12);
  font-weight: 600;
}

/* Sidebar Icons styling */
.sidebar-item i,
.sidebar-item svg {
  width: 17px;
  height: 17px;
  color: var(--text-secondary);
  flex-shrink: 0;
  transition: color 0.2s ease;
}

.sidebar-item.active i {
  color: var(--secondary-red);
}

.sidebar-item:hover i {
  color: var(--text-primary);
}

/* Profile Section in Sidebar */
.card-aside-bg1 {
  position: relative;
  background-color: var(--bg-card);
  padding: 10px;
  border: 1px solid var(--border-light);
  border-radius: 16px;
  box-shadow: var(--shadow-sm);
  margin-top: auto;
}

.card-aside-overlay-plus {
  position: absolute;
  top: -1px;
  left: -1px;
  right: -1px;
  bottom: -1px;
  border-radius: 16px;
  pointer-events: none;
}

.card-aside-container2 {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  gap: 12px;
}

.card-aside-bg2 {
  width: 32px;
  height: 32px;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--on-gold);
  font-size: 10px;
  font-weight: 700;
  background-color: var(--gold);
  border-radius: 50%;
  letter-spacing: -0.2px;
}

.card-aside-text-container {
  color: var(--text-tertiary);
  font-size: 12px;
  font-weight: 400;
  line-height: 1.35;
}

/* Sidebar toggle button placement inside profile card */
.card-aside-container2 .sidebar-toggle-btn {
  margin: 0 0 0 auto;
}

.card-aside-container2 .sidebar-toggle-btn svg {
  transition: transform 0.2s ease;
}

.card-aside.collapsed .card-aside-bg2 {
  display: none;
}

.card-aside.collapsed .card-aside-container2 .sidebar-toggle-btn {
  margin: 0;
}

.card-aside.collapsed .card-aside-container2 .sidebar-toggle-btn svg {
  transform: rotate(180deg);
}


/* Main Content Wrapper */
.main-content {
  flex: 1;
  display: flex;
  flex-direction: column;
  min-width: 0;
  height: 100%;
  overflow-y: auto;
}

.main-header {
  display: flex;
  flex-direction: column;
  gap: 4px;
  background-color: var(--bg-page);
  padding: 16px 24px;
  border-bottom: 1px solid var(--border-light);
  flex-shrink: 0;
  position: sticky;
  top: 0;
  z-index: 20;
}

.main-header.flex-header {
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}

.header-titles {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.btn-export-pdf {
  display: flex;
  align-items: center;
  gap: 8px;
  background-color: transparent;
  color: var(--secondary-red);
  border: 1.5px solid var(--secondary-red);
  padding: 8px 16px;
  border-radius: 10px;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s ease;
  outline: none;
}

.btn-export-pdf:hover {
  background-color: var(--secondary-red);
  color: var(--on-primary);
  box-shadow: 0 4px 6px -1px rgba(var(--primary-rgb), 0.15), 0 2px 4px -1px rgba(var(--primary-rgb), 0.06);
}

.main-text-container1 {
  color: var(--text-accent-brown);
  font-size: 22px;
  font-weight: 600;
  line-height: 1.2;
  letter-spacing: -0.5px;
}

.main-text-container2 {
  color: var(--text-tertiary);
  font-size: 13px;
  font-weight: 400;
  line-height: 1.4;
}

/* Utility button hover classes */
.hover-bright:hover {
  filter: brightness(1.1);
}

.hover-dark:hover {
  filter: brightness(0.92);
}

/* Scrollbar utilities */
.scrollbar-none::-webkit-scrollbar {
  display: none;
}
.scrollbar-none {
  -ms-overflow-style: none;
  scrollbar-width: none;
}

/* ── Responsive shell ─────────────────────────────────────── */

/* Medium screens: trim the sidebar further */
@media (max-width: 1280px) {
  .card-aside {
    width: 180px;
  }

  .sidebar-item {
    font-size: 12px;
    padding: 9px 10px;
  }
}

/* Small desktop / tablet (sidebar itself is force-collapsed by sidebar.js) */
@media (max-width: 1024px) {
  .header {
    padding: 10px 14px;
  }

  .header-text-container1,
  .header-text-container2 {
    display: none;
  }

  .main-header,
  .main-header.flex-header {
    padding: 12px 16px;
  }

  .main-text-container1 {
    font-size: 18px;
  }
}

/* Phones: sidebar becomes a horizontal icon rail above the content */
@media (max-width: 640px) {
  .sidebar-and-main {
    flex-direction: column;
  }

  .card-aside,
  .card-aside.collapsed {
    width: 100%;
    flex-direction: row;
    justify-content: flex-start;
    align-items: center;
    border: none;
    border-bottom: 1px solid var(--border-color);
    border-radius: 0;
    padding: 8px 10px;
    margin: 0;
    box-shadow: none;
    animation: none;
    overflow-x: auto;
    overflow-y: hidden;
  }

  .card-aside-container1 {
    flex-direction: row;
    gap: 4px;
  }

  .sidebar-item {
    width: auto;
    padding: 8px 10px;
  }

  /* No room for the rail toggle or the profile chip on phones */
  .sidebar-toggle-btn,
  .card-aside-bg1 {
    display: none;
  }

  /* Hover labels are unusable on touch and would overflow the rail */
  .card-aside.collapsed .sidebar-item p {
    display: none;
  }

  .header {
    height: auto;
  }

  .main-header.flex-header {
    flex-wrap: wrap;
    gap: 10px;
  }
}

/* Universal Header Search Form */
.header-search-form {
  margin-right: 12px;
  flex: 1;
  max-width: 640px;
}

.header-search-input-wrap {
  position: relative;
  display: flex;
  align-items: center;
}

.header-search-input-wrap .search-icon {
  position: absolute;
  left: 12px;
  width: 14px;
  height: 14px;
  color: var(--text-tertiary);
  pointer-events: none;
}

.header-search-input {
  width: 100%;
  height: 36px;
  padding: 8px 12px 8px 36px;
  border-radius: var(--radius-lg);
  border: 1px solid var(--border-control);
  background-color: var(--surface-soft);
  color: var(--text-primary);
  font-family: 'Noto Sans', sans-serif;
  font-size: 13px;
  outline: none;
  transition: all 0.2s ease;
}

.header-search-input::placeholder {
  color: var(--text-tertiary);
}

.header-search-input:focus {
  border-color: var(--primary-red);
  background-color: var(--bg-card);
  box-shadow: 0 0 0 3px rgba(128, 0, 0, 0.1);
}

@media (max-width: 768px) {
  .header-search-form {
    display: none;
  }
}

/* Print styles for landscape dashboard printing */
@media print {
  @page {
    size: landscape;
    margin: 8mm 10mm;
  }

  /* Hide interactive/navigational elements completely */
  .card-aside,
  .header,
  .header-nav,
  .header-toggle-btn,
  .theme-switch,
  .theme-switch-slider,
  .icon-btn,
  .user-menu,
  .btn-export-pdf,
  .filter-row,
  .view-badge,
  .footer,
  .page-alert,
  .stat-tooltip {
    display: none !important;
  }

  /* Expand layout to fill page width */
  body, html, .app-container, .sidebar-and-main, .main-content {
    background: #ffffff !important;
    background-color: #ffffff !important;
    color: #000000 !important;
    box-shadow: none !important;
    border: none !important;
    margin: 0 !important;
    padding: 0 !important;
    width: 100% !important;
    max-width: 100% !important;
    float: none !important;
    position: static !important;
    display: block !important;
  }

  /* Main content layout overrides for printing */
  .main-content {
    padding: 0 !important;
  }

  /* Ensure card grids display horizontally in landscape */
  .stats-cards-row {
    display: grid !important;
    grid-template-columns: repeat(6, minmax(0, 1fr)) !important;
    gap: 8px !important;
    width: 100% !important;
    margin-bottom: 12px !important;
  }

  .flowchart-nodes-row {
    display: grid !important;
    grid-template-columns: repeat(6, minmax(0, 1fr)) !important;
    gap: 8px !important;
    width: 100% !important;
    margin-bottom: 12px !important;
  }

  .charts-grid-row {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 12px !important;
    width: 100% !important;
  }

  /* Ensure card backgrounds and borders print correctly */
  .stat-card, .flow-node, .workflow-pipeline-card, .chart-card, .card-section {
    background-color: #ffffff !important;
    border: 1px solid #dddddd !important;
    box-shadow: none !important;
    page-break-inside: avoid;
    break-inside: avoid;
  }

  /* Print values clearly in black/contrast */
  .stat-card-title, .stat-card-value, .flow-node-title, .flow-node-value {
    color: #000000 !important;
  }

  /* Force background colors to print if user has "Print Background Graphics" checked */
  * {
    -webkit-print-color-adjust: exact !important;
    print-color-adjust: exact !important;
  }
}

/* Print styles for landscape dashboard printing via HTML2PDF */
body.is-printing-pdf {
  background: #ffffff !important;
  color: #000000 !important;
}

body.is-printing-pdf .card-aside,
body.is-printing-pdf .header,
body.is-printing-pdf .header-nav,
body.is-printing-pdf .header-toggle-btn,
body.is-printing-pdf .theme-switch,
body.is-printing-pdf .theme-switch-slider,
body.is-printing-pdf .icon-btn,
body.is-printing-pdf .user-menu,
body.is-printing-pdf .btn-export-pdf,
body.is-printing-pdf .filter-row,
body.is-printing-pdf .view-badge,
body.is-printing-pdf .footer,
body.is-printing-pdf .page-alert,
body.is-printing-pdf .stat-tooltip,
body.is-printing-pdf .slideover-backdrop,
body.is-printing-pdf .slideover-panel {
  display: none !important;
}

body.is-printing-pdf .app-container,
body.is-printing-pdf .sidebar-and-main,
body.is-printing-pdf .main-content {
  background: #ffffff !important;
  box-shadow: none !important;
  border: none !important;
  margin: 0 !important;
  padding: 0 !important;
  width: 100% !important;
  max-width: 100% !important;
  float: none !important;
  position: static !important;
  display: block !important;
}

body.is-printing-pdf .main-content {
  padding: 0 !important;
}

body.is-printing-pdf .stats-cards-row {
  display: grid !important;
  grid-template-columns: repeat(6, minmax(0, 1fr)) !important;
  gap: 8px !important;
  width: 100% !important;
  margin-bottom: 12px !important;
}

body.is-printing-pdf .flowchart-nodes-row {
  display: grid !important;
  grid-template-columns: repeat(6, minmax(0, 1fr)) !important;
  gap: 8px !important;
  width: 100% !important;
  margin-bottom: 12px !important;
}

body.is-printing-pdf .charts-grid-row {
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  gap: 12px !important;
  width: 100% !important;
}

body.is-printing-pdf .stat-card,
body.is-printing-pdf .flow-node,
body.is-printing-pdf .workflow-pipeline-card,
body.is-printing-pdf .chart-card,
body.is-printing-pdf .card-section {
  background-color: #ffffff !important;
  border: 1px solid #dddddd !important;
  box-shadow: none !important;
}

body.is-printing-pdf .stat-card-title,
body.is-printing-pdf .stat-card-value,
body.is-printing-pdf .flow-node-title,
body.is-printing-pdf .flow-node-value {
  color: #000000 !important;
}

/* Notifications Wrapper & Components */
.notifications-wrapper {
  position: relative;
  display: flex;
  align-items: center;
}

.notification-bell-btn {
  position: relative;
}

/* Numeric unread badge — replaces the old plain dot. Capped display text
   ("99+") is set by portal.js; this just sizes/positions whatever it holds. */
.notification-badge {
  position: absolute;
  top: -3px;
  right: -3px;
  min-width: 16px;
  height: 16px;
  padding: 0 4px;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: var(--primary-red);
  color: var(--on-primary);
  border: 1.5px solid var(--bg-header);
  border-radius: 9999px;
  font-family: 'Noto Sans', sans-serif;
  font-variant-numeric: tabular-nums;
  font-size: 9px;
  font-weight: 700;
  line-height: 1;
  pointer-events: none;
}

.notification-badge[hidden] {
  display: none;
}

/* Flying toast stack (left of the bell icon) — a flex column so several
   real notifications arriving close together stack instead of only ever
   showing one at a time. Each toast is a static-flow child; the stack
   itself carries the absolute positioning. */
.flying-toast-stack {
  position: absolute;
  right: calc(100% + 12px);
  top: 50%;
  transform: translateY(-50%);
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 8px;
  pointer-events: none;
  z-index: 99999;
}

.flying-notification-toast {
  background-color: var(--gold);
  color: var(--on-gold);
  border: 1px solid var(--border-color);
  padding: 6px 12px;
  border-radius: var(--radius-lg);
  font-family: 'Noto Sans', sans-serif;
  font-size: 11.5px;
  font-weight: 600;
  display: flex;
  align-items: center;
  gap: 8px;
  box-shadow: var(--shadow-md);
  white-space: nowrap;
  animation: flyInRight 0.4s cubic-bezier(0.16, 1, 0.3, 1), fadeOutToast 0.4s ease forwards 4.5s;
}

.flying-notification-toast.error-toast {
  background-color: var(--secondary-red);
  color: #ffffff;
  border-color: var(--primary-red);
}

.toast-dot {
  width: 6px;
  height: 6px;
  background-color: currentColor;
  border-radius: 50%;
  animation: pulse-dot 1s infinite alternate;
  flex-shrink: 0;
}

@keyframes flyInRight {
  from {
    transform: translateX(20px);
    opacity: 0;
  }
  to {
    transform: translateX(0);
    opacity: 1;
  }
}

@keyframes fadeOutToast {
  to {
    transform: translateX(-10px);
    opacity: 0;
  }
}

@keyframes pulse-dot {
  from { opacity: 1; }
  to { opacity: 0.35; }
}

.notifications-dropdown {
  position: absolute;
  top: calc(100% + 10px);
  right: 0;
  width: 290px;
  background-color: var(--bg-card);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
  z-index: 1000;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  animation: fadeInDown 0.2s cubic-bezier(0.16, 1, 0.3, 1);
}

.notifications-dropdown[hidden] {
  display: none !important;
}

@keyframes fadeInDown {
  from {
    transform: translateY(-8px);
    opacity: 0;
  }
  to {
    transform: translateY(0);
    opacity: 1;
  }
}

.notifications-dropdown-header {
  padding: 10px 12px;
  border-bottom: 1px solid var(--border-color);
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-family: 'Noto Sans', sans-serif;
  font-size: 12px;
  font-weight: 700;
  color: var(--text-primary);
}

.notifications-dropdown-header button {
  background: none;
  border: none;
  color: var(--primary-red);
  font-size: 11px;
  font-weight: 600;
  cursor: pointer;
  padding: 0;
}

.notifications-dropdown-header button:hover {
  text-decoration: underline;
}

.notifications-list {
  max-height: 240px;
  overflow-y: auto;
}

.notification-item {
  padding: 10px 12px;
  border-bottom: 1px solid var(--border-color);
  display: flex;
  flex-direction: column;
  gap: 3px;
  font-family: 'Noto Sans', sans-serif;
  font-size: 11.5px;
  color: var(--text-primary);
  line-height: 1.4;
  transition: background-color 0.15s;
  cursor: pointer;
}

.notification-item:hover {
  background-color: var(--surface-subtle);
}

.notification-item.unread {
  background-color: var(--surface-soft);
  font-weight: 600;
}

.notification-item-text {
  color: inherit;
}

.notification-item-time {
  font-size: 10px;
  color: var(--text-tertiary);
  font-weight: 400;
}

.notifications-dropdown-footer {
  padding: 10px;
  text-align: center;
  border-top: 1px solid var(--border-color);
  background-color: var(--surface-subtle);
}

.notifications-dropdown-footer a {
  font-family: 'Noto Sans', sans-serif;
  font-size: 11px;
  font-weight: 700;
  color: var(--primary-red);
  text-decoration: none;
}

.notifications-dropdown-footer a:hover {
  text-decoration: underline;
}

.notifications-empty-state {
  padding: 24px 12px;
  text-align: center;
  color: var(--text-tertiary);
  font-family: 'Noto Sans', sans-serif;
  font-size: 11.5px;
}