/* ============================================================
   WorkFlura — Ethereal Workspace Design System v2.0
   Vanilla CSS | Manrope + Inter | Tonal Layering | No-Border Philosophy
   ============================================================ */

/* ── Imports ────────────────────────────────────────────────── */
@import url('https://fonts.googleapis.com/css2?family=Manrope:wght@400;600;700;800&family=Inter:wght@400;500;600;700&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:wght,FILL@100..700,0..1&display=swap');

/* ── Design Tokens ──────────────────────────────────────────── */
:root {
  /* — Primary palette — */
  --primary:                #5E6AD2;
  --primary-dim:            #4F58C0;
  --primary-container:      #EEF0FB;
  --on-primary:             #FFFFFF;
  --on-primary-container:   #1F2873;
  --on-primary-fixed:       #1F2873;
  --primary-fixed:          #5E6AD2;

  /* — Brand accent (WorkFlura orange — wordmark + at most one CTA) — */
  --brand:                  #E8703A;
  --brand-dim:              #C85B28;
  --brand-container:        #FBEEE5;
  --on-brand:               #FFFFFF;
  --on-brand-container:     #6A2A0E;

  /* — Secondary (deep mint) — */
  --secondary:              #006b5e;
  --secondary-dim:          #005e52;
  --secondary-container:    #93f4e0;
  --secondary-fixed:        #93f4e0;
  --secondary-fixed-dim:    #85e6d2;
  --on-secondary:           #e3fff7;
  --on-secondary-container: #005d51;

  /* — Tertiary (earthy clay) — */
  --tertiary:               #77584e;
  --tertiary-dim:           #6a4c43;
  --tertiary-container:     #f8cec2;
  --tertiary-fixed:         #f8cec2;
  --tertiary-fixed-dim:     #e9c0b5;
  --on-tertiary:            #fff7f5;
  --on-tertiary-container:  #61443b;

  /* — Surface hierarchy (core of tonal layering) — */
  --surface:                    #f8f9fa;
  --surface-dim:                #d5dbdd;
  --surface-bright:             #f8f9fa;
  --surface-container-lowest:   #ffffff;
  --surface-container-low:      #f1f4f5;
  --surface-container:          #ebeef0;
  --surface-container-high:     #e5e9eb;
  --surface-container-highest:  #dee3e6;

  /* — On-surface — */
  --on-surface:             #2d3335;
  --on-surface-variant:     #5a6062;
  --inverse-surface:        #0c0f10;

  /* — Outline — */
  --outline:                #767c7e;
  --outline-variant:        #adb3b5;

  /* — Error / Status — */
  --error:                  #a83836;
  --error-dim:              #67040d;
  --error-container:        #fa746f;
  --on-error:               #fff7f6;
  --on-error-container:     #6e0a12;
  --success:                #2e7d32;
  --success-dim:            #1b5e20;
  --success-bg:             #e8f5e9;
  --warning:                #b08800;
  --warning-bg:             #fff8e1;

  /* — Surface tint — */
  --surface-tint:           var(--primary);

  /* — Status visualisation (charts, tables, badges) — vibrant Tailwind palette — */
  --status-healthy:         #10B981;
  --status-healthy-bg:      #D1FAE5;
  --status-warning:         #F59E0B;
  --status-warning-bg:      #FEF3C7;
  --status-critical:        #EF4444;
  --status-critical-bg:     #FEE2E2;
  --status-neutral:         #9CA3AF;
  --status-neutral-bg:      #F3F4F6;
  --status-safe-text:       #059669;
  --status-breach-text:     #DC2626;

  /* — Chart series — eight-step blue palette — */
  --chart-series-1:         #1E3A8A;
  --chart-series-2:         #1E40AF;
  --chart-series-3:         #1D4ED8;
  --chart-series-4:         #2563EB;
  --chart-series-5:         #3B82F6;
  --chart-series-6:         #60A5FA;
  --chart-series-7:         #93C5FD;
  --chart-series-8:         #BFDBFE;

  /* — Separator (subtle line for in-sidebar group breaks etc.) — */
  --separator:              rgba(45, 51, 53, 0.08);

  /* — Frosted-glass surface (used by topbar and floating tray) — */
  --glass-surface:          rgba(255, 255, 255, 0.80);
  --glass-tray:             rgba(222, 227, 230, 0.70);
  --glass-border:           rgba(45, 51, 53, 0.08);

  /* — BPMN diagram status colours — distinct from --warning so the
       designer-chosen orange survives both themes. — */
  --bpmn-warning:           #e37400;
  --bpmn-warning-bg:        rgba(227, 116, 0, 0.10);

  /* — Chart label colour: always white, regardless of theme.
       Used for datalabels rendered on top of vibrant chart segments. — */
  --chart-label-on-fill:    #ffffff;

  /* — Soft error wash (rejected/invalid badge backgrounds) — */
  --error-soft-bg:          #ffebee;
  --error-soft-bg-strong:   #ffebeb;
  --error-soft-bg-hover:    #fff5f5;

  /* — Typography — */
  --font-headline:          'Manrope', sans-serif;
  --font-body:              'Inter', sans-serif;

  /* — Spacing scale — */
  --space-1:    0.25rem;
  --space-2:    0.5rem;
  --space-3:    0.75rem;
  --space-4:    1rem;
  --space-5:    1.25rem;
  --space-6:    1.5rem;
  --space-8:    2rem;
  --space-10:   2.5rem;
  --space-12:   3rem;
  --space-16:   4rem;
  --space-20:   5rem;

  /* — Radii — */
  --radius-sm:   0.25rem;
  --radius-md:   0.5rem;
  --radius-lg:   0.75rem;
  --radius-xl:   1rem;
  --radius-2xl:  1.5rem;
  --radius-full: 9999px;

  /* — Ambient shadows (never pure black) — */
  --shadow-sm:   0 1px 3px rgba(45, 51, 53, 0.04);
  --shadow-md:   0 4px 12px rgba(45, 51, 53, 0.06);
  --shadow-lg:   0 8px 24px rgba(45, 51, 53, 0.06);
  --shadow-xl:   0 16px 32px rgba(45, 51, 53, 0.08);
  --shadow-float: 0 12px 40px rgba(45, 51, 53, 0.12);

  /* — Layout — */
  --sidebar-width:  256px;
  --topbar-height:  64px;
}

/* ── Dark theme overrides ────────────────────────────────────
   Activated by setting `data-theme="dark"` on <html>. The
   pre-paint inline script in every page's <head> sets this
   before the first paint based on localStorage / system.
   ──────────────────────────────────────────────────────────── */
:root[data-theme="dark"] {
  /* — Primary palette (lifted for contrast on dark bg) — */
  --primary:                #8C95E6;
  --primary-dim:            #7C86E0;
  --primary-container:      #2A2F5C;
  --on-primary:             #0A0E3A;
  --on-primary-container:   #D6DAF5;

  /* — Brand accent (lifted for dark mode contrast) — */
  --brand:                  #F08A5A;
  --brand-dim:              #E8703A;
  --brand-container:        #2A1F18;
  --on-brand:               #2A1F18;
  --on-brand-container:     #FBEEE5;

  /* — Secondary — */
  --secondary:              #71d8c5;
  --secondary-dim:          #5fc3b0;
  --secondary-container:    #00504a;
  --on-secondary:           #003731;
  --on-secondary-container: #a0f0dc;

  /* — Tertiary — */
  --tertiary:               #e6bdaf;
  --tertiary-dim:           #d3a89a;
  --tertiary-container:     #5d4036;
  --on-tertiary:            #432a22;
  --on-tertiary-container:  #ffd9cb;

  /* — Surface hierarchy (inverted, near-black layers) — */
  --surface:                    #11151b;
  --surface-dim:                #0c0f10;
  --surface-bright:             #383f44;
  --surface-container-lowest:   #0c0f10;
  --surface-container-low:      #181d24;
  --surface-container:          #1e242c;
  --surface-container-high:     #232a32;
  --surface-container-highest:  #2e3741;

  /* — On-surface — */
  --on-surface:             #e0e3e5;
  --on-surface-variant:     #b9c0c4;
  --inverse-surface:        #f8f9fa;

  /* — Outline — */
  --outline:                #8b9396;
  --outline-variant:        #404950;

  /* — Error / Status — */
  --error:                  #ff8a85;
  --error-dim:              #ffafac;
  --error-container:        #6e0a12;
  --on-error:               #680010;
  --on-error-container:     #ffdad6;
  --success:                #80c784;
  --success-dim:            #66bb6a;
  --success-bg:             #1b3a1f;
  --warning:                #f5c842;
  --warning-bg:             #4d3800;

  --surface-tint:           var(--primary);

  /* — Status visualisation — slightly lifted for dark bg — */
  --status-healthy:         #34D399;
  --status-healthy-bg:      #064E3B;
  --status-warning:         #FBBF24;
  --status-warning-bg:      #78350F;
  --status-critical:        #F87171;
  --status-critical-bg:     #7F1D1D;
  --status-neutral:         #6B7280;
  --status-neutral-bg:      #1F2937;
  --status-safe-text:       #34D399;
  --status-breach-text:     #F87171;

  /* — Chart series — shifted lighter so even index 1 reads on dark bg — */
  --chart-series-1:         #2563EB;
  --chart-series-2:         #3B82F6;
  --chart-series-3:         #60A5FA;
  --chart-series-4:         #93C5FD;
  --chart-series-5:         #BFDBFE;
  --chart-series-6:         #DBEAFE;
  --chart-series-7:         #EFF6FF;
  --chart-series-8:         #F8FAFC;

  /* — Separator — */
  --separator:              rgba(255, 255, 255, 0.08);

  /* — Frosted-glass surface — dark equivalents — */
  --glass-surface:          rgba(17, 21, 27, 0.85);
  --glass-tray:             rgba(30, 36, 44, 0.85);
  --glass-border:           rgba(255, 255, 255, 0.08);

  /* — BPMN warning lifted for contrast on dark canvas — */
  --bpmn-warning:           #ffb74d;
  --bpmn-warning-bg:        rgba(255, 183, 77, 0.15);

  /* — Chart label stays white for legibility on vibrant fills — */
  --chart-label-on-fill:    #ffffff;

  /* — Soft error wash (dark) — */
  --error-soft-bg:          #3a1a1c;
  --error-soft-bg-strong:   #4a1f22;
  --error-soft-bg-hover:    #2c1314;

  /* — Shadows — pure black is fine on dark bg — */
  --shadow-sm:    0 1px 3px rgba(0, 0, 0, 0.5);
  --shadow-md:    0 4px 12px rgba(0, 0, 0, 0.45);
  --shadow-lg:    0 8px 24px rgba(0, 0, 0, 0.45);
  --shadow-xl:    0 16px 32px rgba(0, 0, 0, 0.5);
  --shadow-float: 0 12px 40px rgba(0, 0, 0, 0.6);
}

/* ================================================================
   BASE FORM ELEMENT STYLING — token-based for theme awareness.
   These are LOW-SPECIFICITY base rules; any class-based rule
   (e.g. .wfd-input, .wf-tenant-pill) wins automatically.
   We deliberately exclude file / checkbox / radio / range — those
   are best left to native browser rendering.
   ================================================================ */
select,
input[type="text"],
input[type="number"],
input[type="email"],
input[type="search"],
input[type="password"],
input[type="tel"],
input[type="url"],
input[type="date"],
input[type="time"],
input[type="datetime-local"],
input[type="month"],
input[type="week"],
textarea {
  background-color: var(--surface-container-lowest);
  color: var(--on-surface);
  border-color: var(--outline-variant);
}

/* Native dropdown <option> rendering. Only Firefox and Chrome on
   non-macOS platforms honour this fully — macOS Chrome and Safari
   use the OS picker UI which can't be styled. Acceptable trade-off
   given the dropdown is a transient interaction. */
select option {
  background-color: var(--surface-container-low);
  color: var(--on-surface);
}

/* Disabled state — keep slightly less prominent in both themes. */
select:disabled,
input:disabled,
textarea:disabled {
  background-color: var(--surface-container);
  color: var(--on-surface-variant);
  cursor: not-allowed;
}

/* ── Reset & Foundations ────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

html { font-size: 16px; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; }

body {
  font-family: var(--font-body);
  background-color: var(--surface);
  color: var(--on-surface);
  min-height: 100vh;
  line-height: 1.5;
}

h1, h2, h3, h4, h5, h6, .font-headline { font-family: var(--font-headline); }

/* Material Symbols baseline */
.material-symbols-outlined {
  font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24;
  vertical-align: middle;
}
.material-symbols-outlined.filled {
  font-variation-settings: 'FILL' 1, 'wght' 400, 'GRAD' 0, 'opsz' 24;
}

/* ── Scrollbar (subtle) ─────────────────────────────────────── */
::-webkit-scrollbar { width: 6px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: var(--outline-variant); border-radius: var(--radius-full); }
::-webkit-scrollbar-thumb:hover { background: var(--outline); }

/* ================================================================
   LAYOUT SHELL — Topbar + Sidebar + Main
   ================================================================ */

/* ── Top Navigation Bar (Glassmorphism) ─────────────────────── */
.wf-topbar {
  position: fixed;
  top: 0; left: 0; right: 0;
  height: var(--topbar-height);
  z-index: 100;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 var(--space-8);
  background: var(--glass-surface);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  box-shadow: 0 1px 0 var(--glass-border);
}

.wf-topbar__brand {
  font-family: var(--font-headline);
  font-size: 1.25rem;
  font-weight: 700;
  color: var(--brand);
  letter-spacing: -0.02em;
  text-decoration: none;
  user-select: none;
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
}
.wf-topbar__brand img {
  width: 28px;
  height: 28px;
  object-fit: contain;
  flex-shrink: 0;
}

.wf-topbar__nav {
  display: flex;
  align-items: center;
  gap: var(--space-6);
  margin-left: var(--space-8);
}

.wf-topbar__nav a {
  font-family: var(--font-headline);
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--on-surface-variant);
  text-decoration: none;
  padding-bottom: var(--space-1);
  border-bottom: 2px solid transparent;
  transition: color 0.2s, border-color 0.2s;
}
.wf-topbar__nav a:hover,
.wf-topbar__nav a.active {
  color: var(--primary);
  border-bottom-color: var(--primary);
}

.wf-topbar__left {
  display: flex;
  align-items: center;
}

.wf-topbar__right {
  display: flex;
  align-items: center;
  gap: var(--space-3);
}

.wf-topbar__icon-btn {
  width: 40px; height: 40px;
  display: flex; align-items: center; justify-content: center;
  border: none; background: transparent;
  color: var(--on-surface-variant);
  border-radius: var(--radius-full);
  cursor: pointer;
  transition: background 0.2s, color 0.2s;
  font-size: 0;
}
.wf-topbar__icon-btn { text-decoration: none; }
.wf-topbar__icon-btn:hover {
  background: var(--surface-container-low);
  color: var(--primary);
}
/* Intentional active state (current page) — colour, not a stray underline. */
.wf-topbar__icon-btn.active {
  color: var(--primary);
  background: var(--surface-container-low);
}
.wf-topbar__icon-btn .material-symbols-outlined { font-size: 22px; }

.wf-topbar__avatar {
  width: 36px; height: 36px;
  border-radius: var(--radius-full);
  object-fit: cover;
  border: 2px solid var(--surface-container-high);
  cursor: pointer;
}

/* ── Sidebar ────────────────────────────────────────────────── */
.wf-sidebar {
  position: fixed;
  top: var(--topbar-height);
  left: 0;
  bottom: 0;
  width: var(--sidebar-width);
  z-index: 90;
  background: var(--surface-container-low);
  display: flex;
  flex-direction: column;
  padding: var(--space-6) var(--space-4);
  overflow-y: auto;
}

.wf-sidebar__org {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  margin-bottom: var(--space-8);
  padding: 0 var(--space-2);
}
.wf-sidebar__org-icon {
  width: 40px; height: 40px;
  border-radius: var(--radius-lg);
  background: var(--primary-container);
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
}
.wf-sidebar__org-icon .material-symbols-outlined {
  color: var(--on-primary-container);
  font-size: 20px;
}
.wf-sidebar__org-name {
  font-family: var(--font-headline);
  font-weight: 800;
  font-size: 0.85rem;
  color: var(--on-surface);
  line-height: 1.2;
}
.wf-sidebar__org-sub {
  font-size: 0.625rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--on-surface-variant);
}

/* Section headers within the sidebar nav (User Mode / Admin Mode).
   Sit inside their respective group boxes. */
.wf-sidebar__section-header {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-2) var(--space-3) var(--space-1);
  font-family: var(--font-headline);
  font-weight: 800;
  font-size: 0.85rem;
  color: var(--on-surface);
  user-select: none;
}
.wf-sidebar__section-header .material-symbols-outlined {
  color: var(--on-surface-variant);
  font-size: 18px;
}

/* Group block — wraps a section header plus its links in a subtle
   rounded container that visually separates Admin Mode from User Mode. */
.wf-sidebar__group {
  background: var(--surface-container-lowest);
  border: 1px solid var(--separator);
  border-radius: var(--radius-lg);
  padding: var(--space-2) var(--space-1);
  margin: 0 var(--space-2) var(--space-3);
}
.wf-sidebar__group:last-of-type { margin-bottom: 0; }

/* Subtle separator (kept for any callers that still use it). */
.wf-sidebar__separator {
  height: 1px;
  background: var(--separator);
  margin: var(--space-2) var(--space-2);
}

.wf-sidebar__nav {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
  flex-grow: 1;
}

.wf-sidebar__link {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-3) var(--space-4);
  border-radius: var(--radius-lg);
  text-decoration: none;
  color: var(--on-surface-variant);
  font-size: 0.875rem;
  font-weight: 500;
  transition: background 0.2s, color 0.2s, transform 0.2s;
  cursor: pointer;
  border: none;
  background: none;
  width: 100%;
  text-align: left;
  font-family: var(--font-body);
}
.wf-sidebar__link:hover {
  background: var(--surface-container);
  color: var(--on-surface);
  transform: translateX(2px);
}
.wf-sidebar__link.active {
  background: var(--surface-container-lowest);
  color: var(--primary);
  font-weight: 700;
  box-shadow: var(--shadow-sm);
}
/* Configure System launches the setup page (reconfigure) — it is NOT an in-page
   view tab. Divide it off with a grey separator and never let it take the
   "selected" pill, so only the active view (e.g. Users) reads as selected. */
.wf-sidebar__link--launch {
  border-bottom: 1px solid var(--outline-variant);
  border-radius: 0;
  margin-bottom: var(--space-2);
  padding-bottom: var(--space-3);
}
.wf-sidebar__link--launch:hover {
  color: var(--on-surface);
  background: none;
  transform: none;
}
.wf-sidebar__link--launch.active,
.wf-sidebar__link--launch:focus-visible {
  background: none;
  color: var(--on-surface-variant);
  font-weight: 500;
  box-shadow: none;
}
.wf-sidebar__link .material-symbols-outlined { font-size: 20px; }

.wf-sidebar__spacer { flex-grow: 1; }

.wf-sidebar__footer {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
  padding-top: var(--space-4);
}

/* ── Main Content Area ──────────────────────────────────────── */
.wf-main {
  margin-left: var(--sidebar-width);
  margin-top: var(--topbar-height);
  padding: var(--space-8) var(--space-10);
  min-height: calc(100vh - var(--topbar-height));
  transition: margin-left 0.25s ease;
}

/* ================================================================
   TYPOGRAPHY
   ================================================================ */
.wf-display {
  font-family: var(--font-headline);
  font-size: 2.25rem;
  font-weight: 800;
  line-height: 1.2;
  letter-spacing: -0.02em;
  color: var(--on-surface);
}

.wf-headline {
  font-family: var(--font-headline);
  font-size: 1.5rem;
  font-weight: 700;
  line-height: 1.3;
  color: var(--on-surface);
}

.wf-title {
  font-family: var(--font-headline);
  font-size: 1.125rem;
  font-weight: 700;
  line-height: 1.4;
  color: var(--on-surface);
}

.wf-body {
  font-family: var(--font-body);
  font-size: 0.875rem;
  line-height: 1.6;
  color: var(--on-surface-variant);
}

.wf-label {
  font-family: var(--font-body);
  font-size: 0.75rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--on-surface-variant);
}

.wf-caption {
  font-family: var(--font-body);
  font-size: 0.6875rem;
  font-weight: 600;
  color: var(--outline);
}

/* ================================================================
   BUTTONS
   ================================================================ */
.btn {
  font-family: var(--font-body);
  font-size: 0.8125rem;
  font-weight: 600;
  border: none;
  border-radius: var(--radius-full);
  padding: 0.625rem 1.25rem;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  transition: all 0.2s ease;
  text-decoration: none;
  line-height: 1;
  white-space: nowrap;
}

.btn-primary {
  background: linear-gradient(135deg, var(--primary) 0%, var(--primary-dim) 100%);
  color: var(--on-primary);
  box-shadow: 0 2px 8px rgba(0, 96, 173, 0.25);
}
.btn-primary:hover {
  box-shadow: 0 4px 16px rgba(0, 96, 173, 0.35);
  transform: translateY(-1px);
}
.btn-primary:active { transform: scale(0.97); }
.btn-primary:disabled {
  background: var(--surface-container-high);
  color: var(--outline);
  box-shadow: none;
  cursor: not-allowed;
}

.btn-secondary {
  background: var(--surface-container-high);
  color: var(--on-surface-variant);
}
.btn-secondary:hover {
  background: var(--surface-container-highest);
  color: var(--on-surface);
}

.btn-tertiary {
  background: transparent;
  color: var(--primary);
  padding: 0.625rem 0.75rem;
}
.btn-tertiary:hover { background: rgba(0, 96, 173, 0.06); }

.btn-danger {
  background: var(--error);
  color: var(--on-error);
}
.btn-danger:hover { background: var(--error-dim); }

.btn-sm {
  font-size: 0.75rem;
  padding: 0.375rem 0.75rem;
}

.btn-lg {
  font-size: 0.9375rem;
  padding: 0.75rem 1.75rem;
}

.btn-icon {
  width: 36px; height: 36px;
  padding: 0;
  border-radius: var(--radius-full);
  display: flex; align-items: center; justify-content: center;
}

/* Legacy class support — map old names to new ones */
.button-primary {
  font-family: var(--font-body);
  font-size: 0.8125rem;
  font-weight: 600;
  border: none;
  border-radius: var(--radius-full);
  padding: 0.625rem 1.25rem;
  cursor: pointer;
  display: inline-flex; align-items: center; gap: var(--space-2);
  transition: all 0.2s ease;
  background: linear-gradient(135deg, var(--primary) 0%, var(--primary-dim) 100%);
  color: var(--on-primary);
  box-shadow: 0 2px 8px rgba(0, 96, 173, 0.25);
}
.button-primary:hover { box-shadow: 0 4px 16px rgba(0, 96, 173, 0.35); transform: translateY(-1px); }
.button-primary:disabled { background: var(--surface-container-high); color: var(--outline); box-shadow: none; cursor: not-allowed; }

.button-secondary {
  font-family: var(--font-body);
  font-size: 0.8125rem;
  font-weight: 600;
  border: none;
  border-radius: var(--radius-full);
  padding: 0.625rem 1.25rem;
  cursor: pointer;
  display: inline-flex; align-items: center; gap: var(--space-2);
  transition: all 0.2s ease;
  background: var(--surface-container-high);
  color: var(--on-surface-variant);
}
.button-secondary:hover { background: var(--surface-container-highest); color: var(--on-surface); }
.button-secondary.small { padding: 0.375rem 0.75rem; font-size: 0.75rem; }

/* ================================================================
   DASHBOARD — KPI Stat Cards
   ================================================================ */
.wf-stats-row {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--space-4);
  margin-bottom: var(--space-8);
}

.wf-stat-card {
  background: var(--surface-container-low);
  padding: var(--space-5) var(--space-6);
  border-radius: var(--radius-2xl);
  transition: transform 0.2s, box-shadow 0.2s;
  border: 1px solid var(--outline-variant);
}
.wf-stat-card:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-md);
}
.wf-stat-card__label {
  font-family: var(--font-body);
  font-size: 0.8125rem;
  font-weight: 500;
  color: var(--on-surface-variant);
  margin-bottom: var(--space-2);
}
.wf-stat-card__value {
  font-family: var(--font-headline);
  font-size: 2rem;
  font-weight: 800;
  color: var(--primary);
  line-height: 1;
  margin-bottom: var(--space-2);
}
.wf-stat-card__sub {
  font-size: 0.75rem;
  font-weight: 500;
  color: var(--secondary);
}
.wf-stat-card__sub.warn { color: var(--error); }

/* ================================================================
   DASHBOARD — Two-Column Content Layout
   ================================================================ */
.wf-dashboard-grid {
  display: grid;
  grid-template-columns: 1fr 340px;
  gap: var(--space-8);
  align-items: start;
}

@media (max-width: 1100px) {
  .wf-dashboard-grid { grid-template-columns: 1fr; }
  .wf-stats-row { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 768px) {
  .wf-sidebar { display: none; }
  .wf-main { margin-left: 0; }
  .wf-stats-row { grid-template-columns: 1fr; }
}

/* ================================================================
   SECTION HEADERS
   ================================================================ */
.wf-section-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: var(--space-6);
}

.wf-section-title {
  font-family: var(--font-headline);
  font-size: 1.375rem;
  font-weight: 700;
  color: var(--on-surface);
}

/* ── Filter pills ──────────────────────────────────────── */
.wf-filter-pills {
  display: flex;
  gap: var(--space-2);
}
.wf-filter-pill {
  font-family: var(--font-body);
  font-size: 0.75rem;
  font-weight: 600;
  padding: 0.375rem 0.875rem;
  border-radius: var(--radius-full);
  border: none;
  cursor: pointer;
  transition: all 0.2s;
  background: var(--surface-container-high);
  color: var(--on-surface-variant);
}
.wf-filter-pill:hover { background: var(--surface-container-highest); }
.wf-filter-pill.active {
  background: var(--primary);
  color: var(--on-primary);
}

/* ================================================================
   CARDS — Tonal Layering (No Borders)
   ================================================================ */
.wf-card {
  background: var(--surface-container-lowest);
  border-radius: var(--radius-2xl);
  padding: var(--space-6);
}
.wf-card--surface-low {
  background: var(--surface-container-low);
}

/* ── Flur list items ───────────────────────────────────── */
.wf-flur-list {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

.wf-flur-item {
  display: flex;
  align-items: center;
  gap: var(--space-4);
  padding: var(--space-4) var(--space-5);
  background: var(--surface-container-lowest);
  border-radius: var(--radius-xl);
  transition: transform 0.2s, box-shadow 0.2s;
  cursor: pointer;
}
.wf-flur-item:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-md);
}

.wf-flur-icon {
  width: 44px; height: 44px;
  border-radius: var(--radius-lg);
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
}
.wf-flur-icon.blue { background: rgba(0, 96, 173, 0.1); color: var(--primary); }
.wf-flur-icon.green { background: rgba(0, 107, 94, 0.1); color: var(--secondary); }
.wf-flur-icon.clay { background: rgba(119, 88, 78, 0.1); color: var(--tertiary); }

.wf-flur-info { flex-grow: 1; min-width: 0; }
.wf-flur-name {
  font-weight: 600;
  font-size: 0.9375rem;
  color: var(--on-surface);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.wf-flur-meta {
  font-size: 0.75rem;
  color: var(--on-surface-variant);
  margin-top: 2px;
}

/* ================================================================
   STATUS BADGES
   ================================================================ */
.wf-badge {
  display: inline-block;
  font-family: var(--font-body);
  font-size: 0.625rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  padding: 0.25rem 0.625rem;
  border-radius: var(--radius-sm);
  white-space: nowrap;
}
.wf-badge--pending     { background: var(--warning-bg); color: var(--warning); }
.wf-badge--approved    { background: var(--success-bg); color: var(--success); }
.wf-badge--rejected    { background: var(--error-soft-bg); color: var(--error); }
.wf-badge--draft       { background: var(--surface-container-highest); color: var(--on-surface-variant); }
.wf-badge--action      { background: var(--error-container); color: var(--on-error-container); }
.wf-badge--info        { background: var(--secondary-fixed); color: var(--on-secondary-container); }

/* Legacy status badge support */
.status-badge { padding: 4px 10px; border-radius: var(--radius-sm); font-size: 0.6875rem; font-weight: 700; text-transform: uppercase; display: inline-block; white-space: nowrap; }
.status-Pending   { background: var(--warning-bg); color: var(--warning); }
.status-Approved  { background: var(--success-bg); color: var(--success); }
.status-Rejected  { background: var(--error-soft-bg); color: var(--error); }
.status-Invalid   { background: var(--error-soft-bg); color: var(--error); }
.status-completed-blue { background: rgba(0, 96, 173, 0.1); color: var(--primary); }

.h-card-status { font-size: 0.6875rem; padding: 4px 12px; border-radius: var(--radius-full); font-weight: 700; text-transform: uppercase; text-align: center; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; display: inline-block; }

/* ================================================================
   APPROVAL QUEUE
   ================================================================ */
.wf-approval-queue {
  background: var(--surface-container-low);
  border-radius: var(--radius-2xl);
  padding: var(--space-6);
}

.wf-approval-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: var(--space-6);
}

.wf-approval-card {
  background: var(--surface-container-lowest);
  border-radius: var(--radius-xl);
  padding: var(--space-4);
  border-left: 4px solid var(--error);
  box-shadow: var(--shadow-sm);
  margin-bottom: var(--space-4);
}
.wf-approval-card--low {
  border-left-color: rgba(0, 96, 173, 0.4);
}

.wf-approval-type {
  font-size: 0.625rem;
  font-weight: 700;
  text-transform: uppercase;
  color: var(--error);
  margin-bottom: var(--space-1);
}
.wf-approval-type--low { color: var(--primary-dim); }

.wf-approval-title {
  font-weight: 700;
  font-size: 0.875rem;
  color: var(--on-surface);
  margin-bottom: var(--space-1);
}

.wf-approval-sub {
  font-size: 0.75rem;
  color: var(--on-surface-variant);
  margin-bottom: var(--space-3);
}

.wf-approval-actions {
  display: flex;
  gap: var(--space-2);
}

.wf-view-all-btn {
  display: block;
  width: 100%;
  margin-top: var(--space-4);
  padding: var(--space-3);
  text-align: center;
  font-family: var(--font-body);
  font-size: 0.8125rem;
  font-weight: 700;
  color: var(--primary);
  background: transparent;
  border: 1px solid rgba(0, 96, 173, 0.2);
  border-radius: var(--radius-lg);
  cursor: pointer;
  transition: background 0.2s;
}
.wf-view-all-btn:hover { background: rgba(0, 96, 173, 0.04); }

/* ================================================================
   METRICS DARK CARD
   ================================================================ */
.wf-metrics-dark {
  background: var(--surface-container-lowest);
  color: var(--on-surface);
  padding: var(--space-8);
  border-radius: var(--radius-2xl);
  position: relative;
  overflow: hidden;
  box-shadow: var(--shadow-sm);
  border: 1px solid var(--outline-variant);
  border-left: 3px solid var(--primary);
}
.wf-metrics-dark .btn-lg {
  background: var(--primary);
  color: var(--on-primary);
  border: 1px solid var(--primary);
  font-weight: 600;
  transition: background 0.15s, box-shadow 0.15s;
}
.wf-metrics-dark .btn-lg:hover {
  background: var(--primary-dim);
  border-color: var(--primary-dim);
  box-shadow: var(--shadow-md);
}
/* ── Efficiency Metrics block — dark mode comprehensive override ──
   The block uses tokens designed for "white text on dark blue card"
   which work in light mode but invert badly in dark mode. Override
   the parent surface AND every child's hardcoded colour. */
:root[data-theme="dark"] .wf-metrics-dark {
  background: var(--surface-container-highest);
  color: var(--on-surface);
  border: 1px solid var(--outline-variant);
  border-left: 3px solid var(--primary);
  box-shadow: var(--shadow-sm);
}
:root[data-theme="dark"] .wf-metrics-dark .wf-headline {
  color: var(--on-surface);
}
:root[data-theme="dark"] .wf-metrics-dark .wf-metric-label-row {
  color: var(--on-surface-variant);
}
:root[data-theme="dark"] .wf-metrics-dark .wf-metric-bar {
  background: var(--surface-container-low);
}
:root[data-theme="dark"] .wf-metrics-dark .wf-metric-stats {
  border-top-color: var(--outline-variant);
}
:root[data-theme="dark"] .wf-metrics-dark .wf-metric-stat__label {
  color: var(--on-surface-variant);
}
:root[data-theme="dark"] .wf-metrics-dark .wf-metric-stat__value {
  color: var(--on-surface);
}
:root[data-theme="dark"] .wf-metrics-dark .btn-lg {
  background: var(--primary-container);
  color: var(--on-primary-container);
  border: 1px solid var(--primary);
}
:root[data-theme="dark"] .wf-metrics-dark .btn-lg:hover {
  background: var(--primary);
  color: var(--on-primary);
  border-color: var(--primary);
}
:root[data-theme="dark"] .wf-metrics-dark::before {
  /* The decorative blue blur in the corner — keep but soften so it
     doesn't overpower the now-darker background. */
  background: rgba(149, 197, 255, 0.08);
}
.wf-metrics-dark::before {
  content: '';
  position: absolute;
  right: -40px; top: -40px;
  width: 160px; height: 160px;
  background: var(--primary-container);
  border-radius: 50%;
  filter: blur(48px);
  opacity: 0.35;
}
.wf-metrics-dark .wf-headline { color: var(--on-surface); position: relative; z-index: 1; margin-bottom: var(--space-6); }

.wf-metric-row {
  position: relative;
  z-index: 1;
  margin-bottom: var(--space-6);
}
.wf-metric-label-row {
  display: flex;
  justify-content: space-between;
  font-size: 0.6875rem;
  font-weight: 700;
  color: var(--on-surface-variant);
  text-transform: uppercase;
  margin-bottom: var(--space-2);
}
.wf-metric-bar {
  height: 6px;
  width: 100%;
  background: var(--surface-container-high);
  border-radius: var(--radius-full);
  overflow: hidden;
}
.wf-metric-bar__fill {
  height: 100%;
  border-radius: var(--radius-full);
  transition: width 0.6s ease;
}
.wf-metric-bar__fill--primary { background: var(--primary); }
.wf-metric-bar__fill--secondary { background: var(--secondary); }

.wf-metric-stats {
  display: flex;
  gap: var(--space-4);
  padding-top: var(--space-4);
  border-top: 1px solid var(--outline-variant);
  position: relative;
  z-index: 1;
}
.wf-metric-stat {
  flex: 1;
  text-align: center;
}
.wf-metric-stat__label {
  font-size: 0.625rem;
  font-weight: 700;
  color: var(--on-surface-variant);
  text-transform: uppercase;
  margin-bottom: var(--space-1);
}
.wf-metric-stat__value {
  font-family: var(--font-headline);
  font-size: 1.25rem;
  font-weight: 800;
  color: var(--on-surface);
}

.wf-metrics-dark .btn-lg {
  width: 100%;
  margin-top: var(--space-6);
  background: var(--surface-container-lowest);
  color: var(--on-primary-fixed);
  font-weight: 700;
  border-radius: var(--radius-2xl);
  justify-content: center;
  position: relative;
  z-index: 1;
}
.wf-metrics-dark .btn-lg:hover { transform: scale(1.02); }

/* ================================================================
   DATA COLLECTIONS (Glassmorphism Cards)
   ================================================================ */
.wf-collections-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--space-4);
}

.wf-collection-card {
  background: rgba(255, 255, 255, 0.45);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  padding: var(--space-6);
  border-radius: var(--radius-2xl);
  box-shadow: var(--shadow-sm);
  transition: transform 0.2s;
  /* Ghost border for accessibility */
  border: 1px solid rgba(173, 179, 181, 0.15);
}
.wf-collection-card:hover { transform: translateY(-3px); }

.wf-collection-card h4 {
  font-weight: 700;
  font-size: 0.9375rem;
  margin-bottom: var(--space-1);
}
.wf-collection-card p {
  font-size: 0.8125rem;
  color: var(--on-surface-variant);
  margin-bottom: var(--space-4);
  line-height: 1.5;
}

.wf-avatars {
  display: flex;
}
.wf-avatars img,
.wf-avatars .wf-avatar-more {
  width: 24px; height: 24px;
  border-radius: var(--radius-full);
  border: 2px solid var(--surface-container-lowest);
  margin-left: -6px;
}
.wf-avatars img:first-child,
.wf-avatars .wf-avatar-more:first-child { margin-left: 0; }
.wf-avatar-more {
  background: var(--surface-container-high);
  display: flex; align-items: center; justify-content: center;
  font-size: 0.625rem;
  font-weight: 700;
  color: var(--on-surface-variant);
}

/* ================================================================
   FLOATING ACTION TRAY (Signature Component)
   ================================================================ */
.wf-float-tray {
  position: fixed;
  bottom: var(--space-8);
  left: 50%;
  transform: translateX(-50%);
  z-index: 80;
  display: flex;
  align-items: center;
  gap: var(--space-8);
  padding: var(--space-3) var(--space-8);
  background: var(--glass-tray);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border-radius: var(--radius-full);
  box-shadow: var(--shadow-xl);
  border: 1px solid var(--glass-border);
}

.wf-float-tray__btn {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  background: none;
  border: none;
  cursor: pointer;
  color: var(--on-surface-variant);
  transition: color 0.2s;
  padding: var(--space-1);
}
.wf-float-tray__btn:hover { color: var(--primary); }
.wf-float-tray__btn .material-symbols-outlined { font-size: 22px; }
.wf-float-tray__btn span:last-child {
  font-size: 0.625rem;
  font-weight: 700;
  font-family: var(--font-body);
}

.wf-float-tray__divider {
  width: 1px;
  height: 32px;
  background: var(--separator);
}

.wf-float-tray__add {
  width: 48px; height: 48px;
  border-radius: var(--radius-full);
  background: linear-gradient(135deg, var(--primary) 0%, var(--primary-dim) 100%);
  color: var(--on-primary);
  border: none;
  display: flex; align-items: center; justify-content: center;
  cursor: pointer;
  box-shadow: 0 4px 16px rgba(0, 96, 173, 0.3);
  transition: transform 0.2s, box-shadow 0.2s;
}
.wf-float-tray__add:hover {
  transform: scale(1.1);
  box-shadow: 0 6px 24px rgba(0, 96, 173, 0.4);
}
.wf-float-tray__add:active { transform: scale(0.93); }

/* ================================================================
   MODALS — Ambient Shadow + Backdrop Blur
   ================================================================ */
.modal {
  display: none;
  position: fixed;
  z-index: 1000;
  left: 0; top: 0;
  width: 100%; height: 100%;
  overflow: auto;
  background: rgba(12, 15, 16, 0.55);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  align-items: center;
  justify-content: center;
}

.modal-content {
  background: var(--surface-container-lowest);
  margin: auto;
  padding: var(--space-8);
  border-radius: var(--radius-2xl);
  box-shadow: var(--shadow-float);
  width: 90%;
  max-width: 500px;
  position: relative;
  animation: modalSlideIn 0.3s ease;
}

@keyframes modalSlideIn {
  from { opacity: 0; transform: translateY(16px); }
  to   { opacity: 1; transform: translateY(0); }
}

.modal-content h3 {
  font-family: var(--font-headline);
  font-size: 1.25rem;
  font-weight: 700;
  margin: 0 0 var(--space-4) 0;
  padding: 0;
  border: none;
  color: var(--on-surface);
}

.close-button {
  position: absolute;
  top: var(--space-4);
  right: var(--space-6);
  font-size: 24px;
  font-weight: 600;
  color: var(--outline-variant);
  cursor: pointer;
  transition: color 0.2s;
  background: none;
  border: none;
  line-height: 1;
}
.close-button:hover { color: var(--on-surface); }

.large-modal { max-width: 800px; }

/* ================================================================
   FORMS
   ================================================================ */
.form-group { margin-bottom: var(--space-4); }

label {
  display: block;
  margin-bottom: var(--space-2);
  font-family: var(--font-body);
  font-size: 0.8125rem;
  font-weight: 600;
  color: var(--on-surface-variant);
}

input[type='text'],
input[type='date'],
input[type='number'],
input[type='email'],
input[type='tel'],
input[type='url'],
input[type='time'],
input[type='datetime-local'],
select,
textarea {
  width: 100%;
  padding: 0.75rem 1rem;
  border: 1px solid rgba(173, 179, 181, 0.3); /* ghost border */
  border-radius: var(--radius-lg);
  background: var(--surface-container-lowest);
  color: var(--on-surface);
  font-family: var(--font-body);
  font-size: 0.875rem;
  transition: border-color 0.2s, box-shadow 0.2s;
  box-sizing: border-box;
}
input:focus,
select:focus,
textarea:focus {
  outline: none;
  border-color: var(--primary);
  box-shadow: 0 0 0 3px rgba(0, 96, 173, 0.1);
}

.radio-group {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  margin: var(--space-6) 0;
}
.radio-group label {
  font-size: 0.875rem;
  display: flex;
  align-items: center;
  gap: var(--space-3);
  cursor: pointer;
  font-weight: 500;
}

.form-actions {
  display: flex;
  justify-content: flex-end;
  gap: var(--space-3);
  margin-top: var(--space-6);
}

/* ================================================================
   CARD GRID (Selection Modals)
   ================================================================ */
.card-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: var(--space-4);
  margin-top: var(--space-6);
}

.card {
  background: var(--surface-container-low);
  border-radius: var(--radius-xl);
  padding: var(--space-6);
  text-align: center;
  transition: all 0.2s ease;
}
.card.clickable { cursor: pointer; }
.card.clickable:hover {
  background: var(--surface-container);
  transform: translateY(-2px);
  box-shadow: var(--shadow-md);
}
.card-icon { font-size: 2rem; margin-bottom: var(--space-3); }
.card h4 { font-family: var(--font-headline); margin: var(--space-2) 0; font-size: 0.9375rem; }
.card p { font-size: 0.8125rem; color: var(--on-surface-variant); margin: 0; }

/* ================================================================
   HISTORY CARDS (Submissions / Approvals)
   ================================================================ */
.history-list {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

.history-card {
  display: grid;
  grid-template-columns: 2fr 1.5fr auto;
  align-items: center;
  gap: var(--space-4);
  background: var(--surface-container-low);
  border: 1px solid var(--outline-variant);
  border-radius: var(--radius-lg);
  padding: 0.85rem 1rem;
  cursor: pointer;
  transition: transform 0.2s, box-shadow 0.2s, border-color 0.2s;
}
.history-card:hover {
  transform: translateY(-1px);
  box-shadow: var(--shadow-md);
}

.history-card.legacy-item {
  cursor: default;
  opacity: 0.5;
  background: var(--surface-container);
}
.history-card.legacy-item:hover { transform: none; box-shadow: none; }

.h-card-flur {
  font-weight: 600;
  font-size: 0.9375rem;
  color: var(--primary);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  cursor: pointer;
  text-decoration: none;
  transition: color 0.2s;
}
.h-card-flur:hover { text-decoration: underline; color: var(--primary-dim); }

.h-card-date {
  font-size: 0.8125rem;
  color: var(--on-surface-variant);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  font-variant-numeric: tabular-nums;
}

/* gray out / bulk select styles */
.history-card.gray-card { opacity: 0.5; background: var(--surface-container); }
.history-card.gray-card:hover { transform: none; box-shadow: none; cursor: pointer; }

.history-card.bulk-deletable { cursor: pointer; border: 1px dashed var(--error); }
.history-card.bulk-deletable:hover { background: var(--error-soft-bg-hover); }
.history-card.selected-for-delete {
  background: var(--error-soft-bg-strong) !important;
  border: 2px solid var(--error) !important;
  position: relative;
}
.history-card.selected-for-delete::after {
  content: '✔'; position: absolute; right: -8px; top: -8px;
  background: var(--error); color: #fff; border-radius: 50%;
  width: 20px; height: 20px; font-size: 11px;
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 2px 4px rgba(0,0,0,0.2);
}

/* ================================================================
   ITEM LIST (used in Flur selection modals, forms list, etc.)
   ================================================================ */
.item-list {
  list-style: none;
  padding: 0;
  margin: 0;
}
.item-list li {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: var(--space-3) var(--space-2);
  border-radius: var(--radius-md);
  transition: background 0.2s;
}
.item-list li:hover {
  background: var(--surface-container-low);
  cursor: pointer;
}
.item-list .form-name {
  flex: 1 1 auto;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* ================================================================
   MODAL FORM GRID (Edit Submission)
   ================================================================ */
.modal-body-scroll { max-height: 65vh; overflow-y: auto; margin-bottom: var(--space-4); }

/* Flurs modal: scroll a long flur list instead of overflowing off-screen */
#flurs-modal #flurs-list { max-height: 65vh; overflow-y: auto; }
.modal-form-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-4);
  padding-right: 8px;
}
.response-field { display: flex; flex-direction: column; }
.response-field.full-width { grid-column: 1 / -1; }
.response-field label {
  font-size: 0.8125rem;
  text-transform: capitalize;
  letter-spacing: 0.02em;
  margin-bottom: var(--space-2);
}
.response-field input,
.response-field textarea {
  padding: 0.75rem;
  border: 1px solid rgba(173, 179, 181, 0.3);
  border-radius: var(--radius-md);
  font-size: 0.875rem;
  background: var(--surface-container-lowest);
  transition: border-color 0.2s, box-shadow 0.2s;
}
.response-field input:focus,
.response-field textarea:focus {
  border-color: var(--primary);
  box-shadow: 0 0 0 3px rgba(0, 96, 173, 0.1);
  outline: none;
}
@media (max-width: 600px) {
  .modal-form-grid { grid-template-columns: 1fr; }
}

/* ================================================================
   ESS LAYOUT (legacy split panel — kept for compatibility)
   ================================================================ */
.ess-layout {
  display: grid;
  grid-template-columns: 260px 1fr;
  gap: var(--space-8);
  align-items: start;
}
@media (max-width: 900px) { .ess-layout { grid-template-columns: 1fr; } }

.ess-panel {
  background: var(--surface-container-lowest);
  border-radius: var(--radius-2xl);
  padding: var(--space-6);
}
.ess-panel h3 {
  margin-top: 0;
  font-size: 1.125rem;
  font-family: var(--font-headline);
  color: var(--primary);
  border: none;
  padding: 0;
}

/* ================================================================
   NOTIFICATIONS / TOASTS
   ================================================================ */
#notification-container {
  position: fixed;
  top: calc(var(--topbar-height) + var(--space-4));
  right: var(--space-8);
  z-index: 2000;
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

.notification {
  padding: var(--space-4) var(--space-5);
  border-radius: var(--radius-lg);
  font-size: 0.875rem;
  box-shadow: var(--shadow-lg);
  opacity: 0;
  transform: translateX(100%);
  animation: slideIn 0.4s forwards;
  max-width: 360px;
  overflow-wrap: anywhere;   /* long file names wrap instead of crowding */
}
@keyframes slideIn  { to { opacity: 1; transform: translateX(0); } }
@keyframes slideOut { to { opacity: 0; transform: translateX(100%); } }

.success { background: var(--secondary-fixed); color: var(--on-secondary-container); }
.error   { background: var(--error-soft-bg); color: var(--error); }

/* Info / progress toast (e.g. "Uploading…") — needs a solid background or the
   text shows straight through onto the page and looks garbled. */
.notification.info { background: #323232; color: #ffffff; }

/* High-visibility error TOAST — scoped to .notification so generic .error text
   elsewhere keeps its soft styling. Swap #d32f2f for var(--error) if you'd
   rather track the theme. */
.notification.error {
  background: #d32f2f;
  color: #ffffff;
  font-weight: 700;
  border: 1px solid #b71c1c;
}

/* ================================================================
   BPMN VIEWER OVERRIDES
   ================================================================ */
.status-blue .djs-visual > :first-child { stroke: var(--primary) !important; stroke-width: 3px !important; fill: rgba(0, 96, 173, 0.1) !important; }
.status-blue .djs-label { fill: var(--primary) !important; font-weight: bold; }
.status-orange .djs-visual > :first-child { stroke: var(--warning) !important; stroke-width: 3px !important; fill: var(--warning-bg) !important; stroke-dasharray: 5, 5; }
.status-orange .djs-label { fill: var(--bpmn-warning) !important; font-weight: bold; }

/* ================================================================
   DROPDOWN (legacy support for submit dropdown)
   ================================================================ */
.submit-dropdown { position: relative; z-index: 2; }
#edit-submission-modal { z-index: 1050 !important; }

/* ================================================================
   USER.HTML CHART PAGE STYLES (kept from user.css)
   ================================================================ */
#full-screen-view {
  width: 98%; height: 90vh; margin: 0 auto;
  display: flex; flex-direction: column; animation: fadeIn 0.3s ease-in-out;
}
@keyframes fadeIn { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } }

.fs-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 10px; padding-bottom: 5px; border-bottom: 1px solid var(--surface-container-high); }
.btn-back { background: var(--surface-container-lowest); border: 1px solid var(--surface-container-high); color: var(--on-surface-variant); padding: 6px 12px; border-radius: var(--radius-md); cursor: pointer; font-weight: 600; font-size: 13px; display: flex; align-items: center; gap: 5px; }
.btn-back:hover { background: var(--surface-container-low); }

.fs-content-box {
  background: var(--surface-container-lowest); padding: 10px 20px 20px 20px; border-radius: var(--radius-xl);
  box-shadow: var(--shadow-lg); flex-grow: 1; display: flex; flex-direction: column; overflow: hidden; position: relative;
}
.chart-container-large { flex-grow: 1; position: relative; width: 100%; min-height: 0; }
.fs-actions { display: flex; gap: 10px; align-items: center; }
.btn-mini { background: var(--surface-container-high); color: var(--on-surface-variant); border: none; padding: 6px 10px; border-radius: var(--radius-sm); cursor: pointer; font-size: 11px; font-weight: bold; }
.btn-mini:hover { background: var(--surface-container-highest); }

.pagination-container { display: flex; align-items: center; gap: 8px; margin-right: 15px; }
.page-text { font-size: 12px; color: var(--on-surface-variant); font-weight: 600; min-width: 40px; text-align: center; }

.chart-legend { display: flex; justify-content: center; gap: 20px; margin-bottom: 10px; padding: 5px; border-bottom: 1px solid var(--surface-container-low); }
.legend-item { display: flex; align-items: center; gap: 6px; font-size: 12px; color: var(--on-surface); }
.dot { width: 10px; height: 10px; border-radius: 50%; }

.dropdown { position: relative; display: inline-block; }
.dropbtn { background-color: var(--inverse-surface); color: white; padding: 6px 12px; font-size: 12px; border: none; border-radius: var(--radius-sm); cursor: pointer; font-weight: bold; }
.dropdown-content { display: none; position: absolute; right: 0; background-color: var(--surface-container-lowest); min-width: 100px; box-shadow: var(--shadow-lg); z-index: 10; border-radius: var(--radius-md); }
.dropdown-content a { color: var(--on-surface); padding: 8px 12px; text-decoration: none; display: block; font-size: 12px; cursor: pointer; }
.dropdown-content a:hover { background: var(--surface-container-low); }
.dropdown:hover .dropdown-content { display: block; }

#drillDownOverlay { display: none; position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(12,15,16,0.6); z-index: 2000; justify-content: center; align-items: center; backdrop-filter: blur(2px); }
#drillDownBox { background: var(--surface-container-lowest); width: 700px; padding: 25px; border-radius: var(--radius-2xl); box-shadow: var(--shadow-float); max-height: 80vh; overflow-y: auto; }
.dd-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 15px; padding-bottom: 10px; border-bottom: 1px solid var(--surface-container-high); }
.close-btn { cursor: pointer; font-size: 24px; color: var(--outline-variant); font-weight: bold; line-height: 1; }

table { width: 100%; border-collapse: collapse; font-size: 13px; }
th { text-align: left; padding: 10px; background: var(--surface-container-low); color: var(--on-surface-variant); font-weight: 700; border-bottom: 2px solid var(--surface-container-high); }
td { padding: 10px; border-bottom: 1px solid var(--surface-container); color: var(--on-surface); }

/* ================================================================
   MENU GRID (user.html landing)
   ================================================================ */
.header-row { display: flex; justify-content: space-between; align-items: center; margin-bottom: 20px; padding-bottom: 10px; }
.header-row h2 { margin: 0; color: var(--on-surface); font-size: 20px; font-family: var(--font-headline); }

.menu-grid { display: flex; justify-content: center; gap: 20px; max-width: 1000px; margin: 20px auto; flex-wrap: wrap; }
.menu-card {
  background: var(--surface-container-lowest); padding: 20px; border-radius: var(--radius-2xl);
  box-shadow: var(--shadow-sm); cursor: pointer; transition: transform 0.2s, box-shadow 0.2s;
  display: flex; flex-direction: column; align-items: flex-start; width: 240px; height: 180px;
}
.menu-card:hover { transform: translateY(-3px); box-shadow: var(--shadow-md); }
.menu-icon { font-size: 24px; margin-bottom: 10px; background: rgba(0, 96, 173, 0.08); padding: 8px; border-radius: var(--radius-lg); }
.menu-card h3 { margin: 0 0 8px 0; color: var(--on-surface); font-size: 16px; font-weight: 700; font-family: var(--font-headline); border: none; padding: 0; }
.menu-card p { margin: 0 0 10px 0; color: var(--on-surface-variant); font-size: 12px; line-height: 1.4; flex-grow: 1; overflow: hidden; }
.btn-link { color: var(--primary); font-weight: bold; font-size: 12px; text-decoration: none; }

/* ================================================================
   ACCOUNT STATUS (legacy)
   ================================================================ */
.account-status {
  padding: var(--space-5);
  background: var(--surface-container-low);
  border-radius: var(--radius-xl);
  margin: var(--space-6) 0;
}
.account-status p { margin: var(--space-2) 0; }
.account-status strong { font-size: 0.8125rem; color: var(--on-surface-variant); }

/* ================================================================
   UTILITY — Hide auth when logged in, etc.
   ================================================================ */
#auth-container,
#main-content {
  display: none;
}

/* User info header (legacy) */
.user-info {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: var(--space-4);
}
.user-info p { font-size: 0.9375rem; color: var(--on-surface); }

/* Portal nav (legacy — now replaced by sidebar) */
.portal-nav {
  display: flex;
  gap: var(--space-3);
  padding: var(--space-4) 0;
  margin-bottom: var(--space-4);
}

/* ================================================================
   ANIMATION — Page transition
   ================================================================ */
@keyframes pageIn {
  from { opacity: 0; transform: translateY(12px); }
  to   { opacity: 1; transform: translateY(0); }
}
.wf-main { animation: pageIn 0.4s ease; }

/* ================================================================
   AUTH CARD (login screen)
   ================================================================ */
.wf-auth-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-height: 100vh;
  max-width: 420px;
  margin: 0 auto;
  text-align: center;
  padding: var(--space-12);
}
.wf-auth-icon { font-size: 48px; color: var(--primary); margin-bottom: var(--space-8); }
.wf-auth-title { font-size: 1.75rem; margin-bottom: var(--space-2); }
.wf-auth-subtitle { margin-bottom: var(--space-8); }
.wf-auth-btn { width: 100%; justify-content: center; }

/* ================================================================
   LIST HEADERS (column headers above history lists)
   ================================================================ */
.wf-list-header {
  display: grid;
  grid-template-columns: 220px 56px 120px 120px 1fr;
  padding: 0 var(--space-4);
  margin-bottom: var(--space-2);
  font-size: 0.75rem;
  color: var(--on-surface-variant);
  font-weight: 700;
  gap: var(--space-4);
  align-items: center;
}
.wf-list-header--approvals {
  grid-template-columns: 2fr 1fr 100px;
}
/* My Submissions header — matches .wf-history-card (adds the Download rail). */
.wf-list-header--history {
  grid-template-columns: 220px 56px 120px 120px 220px auto 1fr;
}

/* ── Per-row download button (My Submissions) ─────────────── */
.h-card-download { display: flex; justify-content: center; margin-left: var(--space-4); }
.h-card-dl-btn {
  display: inline-flex; align-items: center; justify-content: center;
  width: 30px; height: 30px; padding: 0;
  border: none; border-radius: var(--radius-full);
  background: transparent; color: var(--on-surface-variant);
  cursor: pointer; transition: background 0.15s, color 0.15s;
}
.h-card-dl-btn:hover { background: var(--surface-container-high); color: var(--primary); }
.h-card-dl-btn .material-symbols-outlined { font-size: 20px; }

/* ── Download chooser modal (PDF / CSV) ───────────────────── */
.wf-dl-overlay {
  position: fixed; inset: 0; z-index: 10000;
  display: flex; align-items: center; justify-content: center;
  background: rgba(12,15,16,0.5);
  backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px);
}
.wf-dl-box {
  background: var(--surface-container-lowest); color: var(--on-surface);
  border-radius: var(--radius-2xl); padding: var(--space-6);
  width: 90%; max-width: 360px; box-shadow: var(--shadow-xl);
  text-align: center;
}
.wf-dl-title {
  font-family: var(--font-headline); font-size: 1.05rem; font-weight: 700;
  margin-bottom: var(--space-4);
}
.wf-dl-actions { display: flex; gap: var(--space-4); justify-content: center; }
.wf-dl-btn {
  display: flex; flex-direction: column; align-items: center; gap: 6px;
  min-width: 92px; padding: var(--space-4);
  border: 1px solid var(--outline-variant); border-radius: var(--radius-lg);
  background: var(--surface-container-lowest); color: var(--on-surface);
  font-weight: 600; font-size: 0.85rem; cursor: pointer;
  transition: border-color 0.15s, background 0.15s;
}
.wf-dl-btn:hover { border-color: var(--primary); background: var(--surface-container-low); }
.wf-dl-ic { font-size: 30px; }
.wf-dl-ic--pdf { color: var(--error); }
.wf-dl-ic--csv { color: var(--success); }
.wf-dl-cancel {
  margin-top: var(--space-4); border: none; background: none;
  color: var(--on-surface-variant); font-size: 0.85rem; cursor: pointer;
}
.wf-dl-cancel:hover { color: var(--on-surface); text-decoration: underline; }

/* ================================================================
   HISTORY CARD VARIANTS (new design states)
   ================================================================ */
.wf-history-card {
  display: grid;
  grid-template-columns: 220px 56px 120px 120px 220px auto 1fr;
  align-items: center;
  gap: var(--space-4);
}
.wf-history-card--submitted {
  background: var(--surface-container-low);
}
.wf-history-card--invalid {
  border-left: 4px solid var(--error);
}
.wf-history-card--revision {
  border-left: 4px solid var(--warning);
}

/* Approval row in full approvals list */
.wf-approval-row {
  display: grid;
  grid-template-columns: 1.4fr 2fr 110px;
  align-items: center;
  gap: var(--space-4);
  cursor: default;
}

/* ================================================================
   APPROVALS: aligned row + robust hover tooltip for Current Stage
   ================================================================ */

/* Align the row's horizontal padding to the header (.wf-list-header uses
   padding: 0 var(--space-4)). .history-card adds 0.85rem 1rem which offsets
   the columns from the header; override the horizontal padding to match so
   Request Title / Current Stage / Action line up with their headers. */
.wf-approval-row.history-card {
  padding-left: var(--space-4);
  padding-right: var(--space-4);
}

/* Current Stage cell: truncate + LEFT-align (task names are
   variable-length and often long — left alignment scans like a label
   list). Applies to both .wf-history-card (My Submissions) and
   .wf-approval-row (My Pending Approvals). Hosts the CSS tooltip —
   overflow must stay visible so the ::after element isn't clipped.

   Uses flex layout rather than relying solely on the parent grid's
   align-items: center, because the inner .h-card-stage <span> has
   overflow: hidden (for ellipsis). Per the CSS spec, that puts its
   baseline at the bottom margin edge instead of the text baseline —
   which visibly shifts the task text down a couple of pixels relative
   to the date and pill cells. align-items: center on the flex parent
   neutralises that baseline quirk so everything sits exactly on the
   row midline. justify-content: flex-start preserves left alignment
   (text-align doesn't apply to flex items, so it's omitted here). */
.wf-stage-cell {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  font-size: 0.9rem;
  color: var(--on-surface-variant);
  position: relative;
  overflow: visible;
  min-width: 0;
}
.wf-stage-cell > .wf-stage-text {
  display: block;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Tooltip appears on hover anywhere over the cell, instantly, styled. */
/* Generic tooltip host for cells that keep their own inner truncation
   (e.g. the status pill / stage span in My Submissions). Must not clip. */
.wf-tip { position: relative; overflow: visible; }

.wf-stage-cell[data-tooltip]:hover::after,
.wf-tip[data-tooltip]:hover::after {
  content: attr(data-tooltip);
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translateX(-50%);
  margin-top: 6px;
  background: #fffacd;                       /* very light lemon yellow */
  color: #333;                               /* dark text for readability */
  font-size: 0.8125rem;                      /* slightly bigger than the original 0.75rem */
  font-weight: 400;                          /* not bold */
  line-height: 1.3;
  white-space: normal;
  width: max-content;
  max-width: 280px;
  padding: 6px 10px;
  border-radius: var(--radius-md, 6px);
  border: 1px solid rgba(0, 0, 0, 0.08);     /* subtle edge on the pale bg */
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.12);
  z-index: 1000;
  pointer-events: none;
}

/* ================================================================
   INLINE ELEMENTS (badges, submitted indicator, dropdowns)
   ================================================================ */
.wf-submitted-yes {
  color: var(--success);
  font-weight: 700;
  font-size: 0.8125rem;
}
.wf-submitted-no {
  color: var(--outline-variant);
  font-size: 0.8125rem;
}
.wf-submit-select {
  font-size: 0.8125rem;
  padding: 0.25rem 0.5rem;
  border-radius: var(--radius-md);
  border: 1px solid var(--outline-variant);
  background: var(--surface-container-lowest);
  cursor: pointer;
}

.wf-attachment-badge {
  display: inline-block;
  min-width: 30px;
  padding: 4px 0;
  text-align: center;
  border-radius: var(--radius-full);
  font-size: 0.75rem;
  font-weight: 700;
  background: var(--surface-container-high);
  color: var(--outline);
}
.wf-attachment-badge--has {
  background: rgba(0, 96, 173, 0.1);
  color: var(--on-primary-container);
}

/* ================================================================
   EMPTY / ERROR STATES
   ================================================================ */
.wf-empty-state {
  text-align: center;
  padding: var(--space-8);
  color: var(--on-surface-variant);
  font-size: 0.875rem;
}
.wf-error-state {
  text-align: center;
  padding: var(--space-8);
  color: var(--error);
  font-size: 0.875rem;
}
/* ════════════════════════════════════════════════════════════
   Tenant Identity Pill
   Used on standalone pages (MIS, Reports) to show active tenant
   ════════════════════════════════════════════════════════════ */
.wf-tenant-id {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
}
.wf-tenant-pill {
    display: inline-flex;
    align-items: center;
    padding: 6px 14px;
    background: var(--surface-container);
    color: var(--on-surface);
    border: 1px solid var(--outline-variant);
    border-radius: 999px;
    font-size: 13px;
    font-weight: 600;
    white-space: nowrap;
    max-width: 280px;
    overflow: hidden;
    text-overflow: ellipsis;
}
.wf-tenant-pill--interactive {
    cursor: pointer;
    transition: background 0.2s, border-color 0.2s;
    padding-right: 28px;
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%23445'%3E%3Cpath d='M6 9l6 6 6-6' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 10px center;
}
.wf-tenant-pill--interactive:hover {
    background-color: var(--surface-container-high);
    border-color: var(--outline);
}
.wf-tenant-logo {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    object-fit: cover;
}
/* When the underlying control is a real <select>, hide its native chrome
   but keep it clickable. The styled pill sits on top via wrapper layout. */
select.wf-tenant-pill {
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
}
/* ── Topbar avatar — Google photo or deterministic initials ──────
   The button wraps an <img> (used when a photo URL is set) and a
   <span> fallback (used when no photo). JS toggles which is visible
   via the .has-photo class on the button. */
.wf-topbar__avatar-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  padding: 0;
  background: transparent;
  border: none;
  border-radius: 50%;
  cursor: pointer;
  position: relative;
  transition: box-shadow 0.15s;
}
.wf-topbar__avatar-btn:hover {
  box-shadow: 0 0 0 2px var(--outline-variant);
}
.wf-topbar__avatar-btn:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px var(--primary-container);
}
.wf-topbar__avatar {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  object-fit: cover;
  display: block;
}
.wf-topbar__avatar-fallback {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-headline);
  font-size: 0.8125rem;
  font-weight: 700;
  letter-spacing: 0;
  /* background and color set inline by JS */
}
.wf-topbar__avatar-btn.has-photo .wf-topbar__avatar-fallback { display: none; }
.wf-topbar__avatar-btn:not(.has-photo) .wf-topbar__avatar { display: none; }
/* ── Phase 1.5 + Phase 3 — My Submissions row enhancements ──
   New: stacked Flur (name + ID), Stage badge, relative date,
   paperclip attachment indicator, clickable Draft pill. */

/* Flur cell — name on line 1, submission ID on line 2 */
.h-card-flur-block {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}
.h-card-flur-block .h-card-flur {
  display: inline-block;
  max-width: 100%;
}

/* Stage indicator — small inline text */
.h-card-stage {
  font-size: 0.8125rem;
  color: var(--on-surface);
  font-weight: 500;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.h-card-stage--draft   { color: var(--on-surface-variant); font-style: italic; }
.h-card-stage--done    { color: var(--success); font-weight: 600; }
.h-card-stage--neutral { color: var(--on-surface-variant); }

/* Submitted-on date — tabular numerals so columns align */
.h-card-date {
  font-size: 0.8125rem;
  color: var(--on-surface-variant);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
  text-align: center;
}
.h-card-date--empty { color: var(--outline); }

/* Attachments — paperclip with count.
   When count is 0, paperclip turns warning amber to nudge the user
   to attach files (esp. for expense / leave / reimbursement flows). */
.h-card-attach {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 0.8125rem;
  color: var(--on-surface-variant);
  justify-content: center;
}
.h-card-attach .material-symbols-outlined {
  font-size: 18px;
  line-height: 1;
}
.h-card-attach--empty {
  color: var(--warning);
}
.h-card-attach--empty .material-symbols-outlined {
  color: var(--warning);
}
.h-card-attach--has {
  color: var(--on-surface);
  font-weight: 600;
}

/* Draft status pill — clickable affordance to open the preflight modal.
   Styled like a warning chip but with hover/focus states to signal interactivity. */
.h-card-status.status-Draft {
  background: var(--warning-bg);
  color: var(--warning);
  cursor: pointer;
  transition: background 0.15s, transform 0.1s, box-shadow 0.15s;
  border: 1px solid transparent;
}
.h-card-status.status-Draft:hover {
  background: var(--warning-bg);
  box-shadow: 0 0 0 2px var(--warning);
  transform: translateY(-1px);
}
.h-card-status.status-Draft:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px var(--primary-container);
}

/* Revision Required — clickable, like Draft. This is the only route back into the
   workflow after a reviewer sends a request back, so it has to read as an action.
   Same interaction treatment as .status-Draft, in the error palette rather than the
   warning one, because the request has come back rather than never having left. */
.h-card-status.status-Revision-Required {
  background: var(--error-soft-bg);
  color: var(--error);
  cursor: pointer;
  transition: background 0.15s, transform 0.1s, box-shadow 0.15s;
  border: 1px solid transparent;
}
.h-card-status.status-Revision-Required:hover {
  background: var(--error-soft-bg-hover);
  box-shadow: 0 0 0 2px var(--error);
  transform: translateY(-1px);
}
.h-card-status.status-Revision-Required:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px var(--primary-container);
}

.h-card-status.status-Submitted {
  background: var(--primary-container);
  color: var(--on-primary-container);
}

/* In Progress — submitted and moving through the workflow. Soft-blue
   like Completed but slightly more muted, so the lifecycle reads:
   Draft (amber) → In Progress (soft blue) → Approved (green) /
   Rejected (red). The literal task name lives in the Stage column. */
.h-card-status.status-InProgress {
  background: var(--primary-container);
  color: var(--on-primary-container);
}

/* Status column header + cell are LEFT-aligned for the pill anchor;
   the pill itself stays visually centered within its track. Stage
   column is LEFT-aligned (it carries up-to-50-char task names that
   wrap into the remaining grid width). */
.wf-list-header > span:nth-child(4),
.wf-history-card > div:nth-child(4) {
  text-align: center;
}
.wf-list-header > span:nth-child(5),
.wf-history-card > .wf-stage-cell {
  text-align: left;
}

/* Stage cell — allow the task name to use the full remaining track
   width, ellipsise cleanly if it overflows the 50-char cap set in
   historyFrontend.js. */
.wf-stage-cell {
  min-width: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Review action — pure text link (replaces the heavier filled button).
   Inherits primary color, underlines on hover, no fill or shadow. */
.wf-review-link {
  color: var(--primary);
  font-weight: 600;
  font-size: 0.875rem;
  text-decoration: none;
  cursor: pointer;
  padding: 4px 8px;
  border-radius: var(--radius-sm);
  transition: color 0.15s, background 0.15s;
}
.wf-review-link:hover {
  color: var(--primary-dim);
  text-decoration: underline;
}
.wf-review-link:focus-visible {
  outline: none;
  box-shadow: 0 0 0 2px var(--primary-container);
}

/* ── Attachment popover for non-Draft rows in My Submissions ─────
   Triggered by clicking the paperclip on a submitted/completed row.
   Draft-row paperclicks open the edit modal instead. */
.wf-attach-popover {
  position: fixed;
  z-index: 5000;
  background: var(--surface-container-lowest);
  border: 1px solid var(--outline-variant);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
  padding: var(--space-3);
  min-width: 240px;
  max-width: 360px;
  max-height: 320px;
  overflow-y: auto;
  font-size: 0.8125rem;
}
.wf-attach-popover__header {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  font-weight: 600;
  color: var(--on-surface);
  padding-bottom: var(--space-2);
  margin-bottom: var(--space-2);
  border-bottom: 1px solid var(--outline-variant);
}
.wf-attach-popover__header .material-symbols-outlined {
  font-size: 18px;
  color: var(--primary);
}
.wf-attach-popover__list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.wf-attach-popover__list li a {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-2);
  border-radius: var(--radius-sm);
  color: var(--on-surface);
  text-decoration: none;
  transition: background 0.12s;
}
.wf-attach-popover__list li a:hover {
  background: var(--surface-container);
  color: var(--primary);
}
.wf-attach-popover__list li a .material-symbols-outlined {
  font-size: 16px;
  color: var(--on-surface-variant);
  flex-shrink: 0;
}
.wf-attach-popover__empty {
  color: var(--on-surface-variant);
  font-style: italic;
  text-align: center;
  padding: var(--space-3) 0;
}