/* ==========================================================================
   ElephAi Professional — theme.css
   Design system extracted from the live clinical dashboard.
   Version: 3.0
   Includes: tokens · gradients · base styles · utilities · components
   ========================================================================== */

/* ==========================================================================
   1. FONT IMPORTS
   Load Poppins (UI) and Instrument Serif (display).
   If self-hosting, remove this block and swap the @font-face below.
   ========================================================================== */
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700&family=Instrument+Serif:ital@0;1&display=swap');

/* Optional self-hosted fallbacks — uncomment and point to your font files.
@font-face {
  font-family: 'Poppins';
  src: url('/fonts/Poppins-Regular.woff2') format('woff2');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Instrument Serif';
  src: url('/fonts/InstrumentSerif-Regular.woff2') format('woff2');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
*/


/* ==========================================================================
   2. DESIGN TOKENS
   The single source of truth. Everything below references these.
   ========================================================================== */
:root {

  /* ------------------------------------------------------------------------
     2.1 Page & Surfaces
     ------------------------------------------------------------------------ */
  --bg-page:              #FCF8FF;                  /* App canvas — pale lavender white */
  --bg-card:              #FFFFFF;                  /* Cards, inputs, modals */
  --bg-elevated:          #FFFFFF;                  /* Overlays, popovers */
  --bg-sidebar:           #F5EDFF;                  /* Solid fallback under the gradient */
  --bg-sidebar-accent:    rgba(167, 139, 250, 0.08);/* Hover state for nav items */
  --bg-muted:             rgba(27, 21, 35, 0.04);   /* Neutral tinted surfaces */
  --bg-overlay:           rgba(27, 21, 35, 0.48);   /* Modal scrim */

  /* ------------------------------------------------------------------------
     2.2 Text
     ------------------------------------------------------------------------ */
  --foreground:           #1B1523;                  /* Headings, body, primary text */
  --muted-foreground:     #6F6B7A;                  /* Secondary text, metadata */
  --subtle:               #9A96A6;                  /* Eyebrows, placeholders */
  --foreground-inverse:   #FFFFFF;                  /* Text on dark/gradient surfaces */
  --foreground-on-dark:   #FCFBF8;

  /* ------------------------------------------------------------------------
     2.3 Borders
     ------------------------------------------------------------------------ */
  --border:               #EBE4F3;                  /* Default hairline */
  --border-soft:          rgba(27, 21, 35, 0.06);   /* Very subtle dividers */
  --border-strong:        #D8CCE7;                  /* Emphasised edges */
  --sidebar-border:       #E9DFF6;                  /* Right edge of sidebar */
  --input-border:         #EBE4F3;
  --input-border-focus:   #A78BFA;

  /* ------------------------------------------------------------------------
     2.4 Brand
     ------------------------------------------------------------------------ */
  --primary:              #A78BFA;                  /* Brand purple */
  --primary-hover:        #9678F0;
  --primary-active:       #8467E0;
  --primary-foreground:   #FFFFFF;
  --primary-soft:         rgba(167, 139, 250, 0.12);
  --accent:               #F0ABFC;                  /* Pink accent */
  --accent-soft:          rgba(240, 171, 252, 0.12);

  /* ------------------------------------------------------------------------
     2.5 Semantic
     ------------------------------------------------------------------------ */
  --success:              #10B981;
  --success-soft:         rgba(16, 185, 129, 0.10);
  --success-foreground:   #FFFFFF;

  --warning:              #F59E0B;
  --warning-soft:         rgba(245, 158, 11, 0.12);
  --warning-foreground:   #FFFFFF;

  --destructive:          #EF4444;
  --destructive-soft:     rgba(239, 68, 68, 0.10);
  --destructive-foreground: #FFFFFF;

  --info:                 #8B5CF6;
  --info-soft:            rgba(139, 92, 246, 0.10);
  --info-foreground:      #FFFFFF;

  /* ------------------------------------------------------------------------
     2.6 Alert / Notice (amber panel)
     The "Screening support — not a diagnosis" surface.
     ------------------------------------------------------------------------ */
  --alert-bg:             #FFF7ED;
  --alert-border:         #FED7AA;
  --alert-text:           #7C2D12;
  --alert-text-soft:      #9A3412;
  --alert-icon:           #EA580C;

  /* ------------------------------------------------------------------------
     2.7 Mood Scale — 5-step
     Always shipped with a text label.
     ------------------------------------------------------------------------ */
  --mood--2:              #EF4444;   /* Very low */
  --mood--1:              #F59E0B;   /* Low */
  --mood-0:               #9A96A6;   /* Neutral */
  --mood-1:               #10B981;   /* Good */
  --mood-2:               #059669;   /* Very good */

  /* ------------------------------------------------------------------------
     2.8 Named Gradients
     The two signature classes of the ElephAi system.
     ------------------------------------------------------------------------ */
  --elephai-gradient:       linear-gradient(90deg, #C4B5FD 0%, #FBCFE8 100%);
  --elephai-gradient-hover: linear-gradient(90deg, #B8A5FA 0%, #F8C0DD 100%);
  --elephai-gradient-soft:  linear-gradient(90deg, #EDE4FF 0%, #FDE8F2 100%);
  --patient-gradient-soft:  linear-gradient(180deg, #F5EDFF 0%, #FDF2F8 100%);

  /* ------------------------------------------------------------------------
     2.9 Typography
     ------------------------------------------------------------------------ */
  --font-body:            'Poppins', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --font-display:         'Instrument Serif', Georgia, 'Times New Roman', serif;
  --font-mono:            ui-monospace, 'SF Mono', SFMono-Regular, Menlo, Consolas, monospace;

  /* Type scale (rem, assuming 16px root) */
  --text-2xs:             0.625rem;   /* 10px — logo tag */
  --text-xs:              0.6875rem;  /* 11px — eyebrows */
  --text-sm:              0.75rem;    /* 12px — helper text */
  --text-base-sm:         0.8125rem;  /* 13px — dense body */
  --text-base:            0.875rem;   /* 14px — UI default */
  --text-md:              0.9375rem;  /* 15px — body copy */
  --text-lg:              1rem;       /* 16px — large body */
  --text-xl:              1.125rem;   /* 18px — h3 */
  --text-2xl:             1.5rem;     /* 24px — h2 */
  --text-3xl:             2rem;       /* 32px — h1 */
  --text-4xl:             2.5rem;     /* 40px — display */
  --text-5xl:             2.75rem;    /* 44px — serif display */

  /* Line heights */
  --leading-tight:        1.15;
  --leading-snug:         1.3;
  --leading-normal:       1.5;
  --leading-relaxed:      1.6;
  --leading-loose:        1.75;

  /* Letter spacing */
  --tracking-tight:       -0.02em;
  --tracking-snug:        -0.01em;
  --tracking-normal:      0;
  --tracking-wide:        0.05em;
  --tracking-wider:       0.15em;
  --tracking-widest:      0.2em;

  /* Font weights */
  --weight-light:         300;
  --weight-regular:       400;
  --weight-medium:        500;
  --weight-semibold:      600;
  --weight-bold:          700;

  /* ------------------------------------------------------------------------
     2.10 Spacing
     4px base unit. Matches Tailwind's default scale.
     ------------------------------------------------------------------------ */
  --space-0:              0;
  --space-1:              0.25rem;   /* 4px */
  --space-2:              0.5rem;    /* 8px */
  --space-3:              0.75rem;   /* 12px */
  --space-4:              1rem;      /* 16px */
  --space-5:              1.25rem;   /* 20px */
  --space-6:              1.5rem;    /* 24px */
  --space-8:              2rem;      /* 32px */
  --space-10:             2.5rem;    /* 40px */
  --space-12:             3rem;      /* 48px */
  --space-16:             4rem;      /* 64px */
  --space-20:             5rem;      /* 80px */

  /* ------------------------------------------------------------------------
     2.11 Radii
     ------------------------------------------------------------------------ */
  --radius-sm:            6px;
  --radius-md:            8px;
  --radius-lg:            12px;
  --radius-xl:            16px;
  --radius-2xl:           20px;
  --radius-3xl:           24px;
  --radius-pill:          999px;
  --radius-full:          9999px;

  /* ------------------------------------------------------------------------
     2.12 Shadows
     Warm-tinted to match the purple palette.
     ------------------------------------------------------------------------ */
  --shadow-xs:            0 1px 2px rgba(27, 21, 35, 0.04);
  --shadow-sm:            0 1px 2px rgba(27, 21, 35, 0.04),
                          0 2px 6px rgba(27, 21, 35, 0.03);
  --shadow-md:            0 4px 12px rgba(27, 21, 35, 0.06);
  --shadow-lg:            0 12px 32px rgba(27, 21, 35, 0.08);
  --shadow-xl:            0 24px 48px rgba(27, 21, 35, 0.10);
  --shadow-gradient:      0 4px 14px rgba(196, 181, 253, 0.35);
  --shadow-gradient-lg:   0 6px 20px rgba(196, 181, 253, 0.50);

  /* ------------------------------------------------------------------------
     2.13 Motion
     ------------------------------------------------------------------------ */
  --ease-out:             cubic-bezier(0.16, 1, 0.32, 1);
  --ease-in-out:          cubic-bezier(0.4, 0, 0.2, 1);
  --duration-fast:        100ms;
  --duration-base:        150ms;
  --duration-slow:        200ms;
  --duration-slower:      300ms;

  /* ------------------------------------------------------------------------
     2.14 Z-Index Scale
     ------------------------------------------------------------------------ */
  --z-base:               0;
  --z-dropdown:           100;
  --z-sticky:             200;
  --z-overlay:            300;
  --z-modal:              400;
  --z-toast:              500;
  --z-badge:              1000;

  /* ------------------------------------------------------------------------
     2.15 Layout
     ------------------------------------------------------------------------ */
  --sidebar-width:        264px;
  --topbar-height:        80px;
  --content-max-width:    1120px;
  --search-max-width:     480px;
}


/* ==========================================================================
   3. BASE / RESET
   ========================================================================== */
*,
*::before,
*::after {
  box-sizing: border-box;
  border-width: 0;
  border-style: solid;
  border-color: var(--border);
}

html {
  -webkit-text-size-adjust: 100%;
  -moz-text-size-adjust: 100%;
  text-size-adjust: 100%;
  scroll-behavior: smooth;
}

body {
  margin: 0;
  font-family: var(--font-body);
  font-size: var(--text-md);
  font-weight: var(--weight-regular);
  line-height: var(--leading-relaxed);
  color: var(--foreground);
  background-color: var(--bg-page);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  font-feature-settings: 'kern' 1, 'liga' 1;
}

h1, h2, h3, h4, h5, h6 {
  margin: 0;
  font-family: var(--font-body);
  font-weight: var(--weight-medium);
  line-height: var(--leading-snug);
  letter-spacing: var(--tracking-snug);
  color: var(--foreground);
}

h1 { font-size: var(--text-3xl); line-height: 1.2; }
h2 { font-size: var(--text-2xl); line-height: 1.3; }
h3 { font-size: var(--text-xl);  line-height: 1.4; }
h4 { font-size: var(--text-lg);  line-height: 1.4; }
h5 { font-size: var(--text-base); }
h6 { font-size: var(--text-base-sm); }

p {
  margin: 0 0 var(--space-4);
  color: var(--muted-foreground);
  max-width: 68ch;
}

a {
  color: var(--primary);
  text-decoration: none;
  transition: color var(--duration-base) var(--ease-out);
}
a:hover { color: var(--primary-hover); }

img, svg, video, canvas {
  display: block;
  max-width: 100%;
}

button, input, textarea, select {
  font: inherit;
  color: inherit;
}

button {
  background: none;
  border: 0;
  padding: 0;
  cursor: pointer;
}

code, kbd, samp, pre {
  font-family: var(--font-mono);
  font-size: 0.85em;
}

code {
  background: var(--primary-soft);
  color: #6D28D9;
  padding: 0.125em 0.4em;
  border-radius: var(--radius-sm);
  font-weight: var(--weight-medium);
}

hr {
  border: 0;
  border-top: 1px solid var(--border);
  margin: var(--space-6) 0;
}

::selection {
  background: var(--primary-soft);
  color: var(--foreground);
}


/* ==========================================================================
   4. FOCUS & ACCESSIBILITY
   ========================================================================== */
:focus { outline: none; }

:focus-visible {
  outline: 2px solid var(--primary);
  outline-offset: 2px;
  border-radius: var(--radius-sm);
}

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border-width: 0;
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

@media (prefers-contrast: high) {
  :root {
    --border: #1B1523;
    --muted-foreground: #3A3542;
  }
}


/* ==========================================================================
   5. NAMED GRADIENT UTILITIES
   The signature classes. Drop these on any element.
   ========================================================================== */
.bg-elephai-gradient {
  background-image: var(--elephai-gradient);
  color: var(--foreground-inverse);
}

.bg-elephai-gradient-hover:hover {
  background-image: var(--elephai-gradient-hover);
  box-shadow: var(--shadow-gradient-lg);
}

.bg-elephai-gradient-soft {
  background-image: var(--elephai-gradient-soft);
  color: var(--foreground);
}

.bg-patient-gradient-soft {
  background-image: var(--patient-gradient-soft);
}

.text-gradient {
  background-image: var(--elephai-gradient);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  -webkit-text-fill-color: transparent;
}


/* ==========================================================================
   6. TYPOGRAPHY UTILITIES
   ========================================================================== */
.font-display {
  font-family: var(--font-display);
  font-weight: var(--weight-regular);
  letter-spacing: 0;
}

.font-body { font-family: var(--font-body); }
.font-mono { font-family: var(--font-mono); }

.display-serif {
  font-family: var(--font-display);
  font-weight: var(--weight-regular);
  font-size: var(--text-5xl);
  line-height: 1.05;
  letter-spacing: var(--tracking-snug);
}

.display-serif em,
.display-serif .italic {
  font-style: italic;
}

.eyebrow {
  font-size: var(--text-xs);
  font-weight: var(--weight-medium);
  letter-spacing: var(--tracking-wider);
  text-transform: uppercase;
  color: var(--muted-foreground);
}

.logo-tag {
  font-size: var(--text-2xs);
  font-weight: var(--weight-medium);
  letter-spacing: var(--tracking-widest);
  text-transform: uppercase;
  color: var(--muted-foreground);
}

.text-metric {
  font-size: var(--text-2xl);
  font-weight: var(--weight-semibold);
  line-height: var(--leading-tight);
  font-variant-numeric: tabular-nums;
  color: var(--foreground);
}

.text-tabular { font-variant-numeric: tabular-nums; }
.text-muted   { color: var(--muted-foreground); }
.text-subtle  { color: var(--subtle); }
.text-primary { color: var(--primary); }
.text-success { color: var(--success); }
.text-warning { color: var(--warning); }
.text-danger  { color: var(--destructive); }


/* ==========================================================================
   7. LAYOUT PRIMITIVES
   ========================================================================== */
.app-shell {
  display: flex;
  min-height: 100vh;
  background-color: var(--bg-page);
}

.sidebar {
  width: var(--sidebar-width);
  flex-shrink: 0;
  background-image: var(--patient-gradient-soft);
  border-right: 1px solid var(--sidebar-border);
  display: flex;
  flex-direction: column;
  position: sticky;
  top: 0;
  height: 100vh;
  overflow-y: auto;
}

.main-area {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
}

.content {
  padding: var(--space-12) var(--space-10) var(--space-6);
  max-width: var(--content-max-width);
}

@media (max-width: 1100px) {
  .sidebar { display: none; }
  .content { padding: var(--space-8) var(--space-6) var(--space-6); }
}


/* ==========================================================================
   8. COMPONENT PRIMITIVES
   ========================================================================== */

/* --------------------------------------------------------------------------
   8.1 Brand Lockup
   -------------------------------------------------------------------------- */
.brand {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-6);
  text-decoration: none;
  color: inherit;
}

.brand-mark {
  width: 44px;
  height: 44px;
  border-radius: var(--radius-2xl);
  overflow: hidden;
  display: grid;
  place-items: center;
  flex-shrink: 0;
}

.brand-mark img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.brand-name {
  font-family: var(--font-body); /* Poppins */
  font-weight: var(--weight-medium);
  font-size: 1.625rem;
  line-height: 1;
  color: var(--foreground);
}

.brand-sub {
  font-size: var(--text-2xs);
  font-weight: var(--weight-medium);
  letter-spacing: var(--tracking-widest);
  text-transform: uppercase;
  color: var(--muted-foreground);
  margin-top: 6px;
}

/* --------------------------------------------------------------------------
   8.2 Nav Pill — the signature component
   -------------------------------------------------------------------------- */
.nav-list {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 0 var(--space-3);
  margin-top: var(--space-4);
}

.nav-item {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: 10px var(--space-4);
  border-radius: var(--radius-pill);
  font-size: var(--text-base);
  font-weight: var(--weight-medium);
  color: var(--foreground);
  opacity: 0.7;
  text-decoration: none;
  transition: background var(--duration-base) var(--ease-out),
              opacity var(--duration-base) var(--ease-out);
}

.nav-item:hover {
  background: var(--bg-sidebar-accent);
  opacity: 1;
}

.nav-item.active,
.nav-item[aria-current="page"] {
  background-image: var(--elephai-gradient);
  color: var(--foreground-inverse);
  opacity: 1;
  box-shadow: var(--shadow-xs);
}

.nav-item svg { flex-shrink: 0; }

/* --------------------------------------------------------------------------
   8.3 Buttons
   -------------------------------------------------------------------------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  height: 44px;
  padding: 0 var(--space-5);
  border-radius: var(--radius-pill);
  border: 1px solid transparent;
  font-family: var(--font-body);
  font-size: var(--text-base);
  font-weight: var(--weight-medium);
  line-height: 1;
  cursor: pointer;
  white-space: nowrap;
  transition: background var(--duration-slow) var(--ease-out),
              box-shadow var(--duration-slow) var(--ease-out),
              transform var(--duration-slow) var(--ease-out),
              border-color var(--duration-base) var(--ease-out);
}

.btn:disabled,
.btn[aria-disabled="true"] {
  opacity: 0.5;
  pointer-events: none;
  cursor: not-allowed;
}

.btn-sm { height: 36px; padding: 0 var(--space-4); font-size: var(--text-base-sm); }
.btn-lg { height: 52px; padding: 0 var(--space-6); font-size: var(--text-md); }
.btn-block { width: 100%; }

/* Primary — the gradient button */
.btn-primary {
  background-image: var(--elephai-gradient);
  color: var(--foreground-inverse);
  box-shadow: var(--shadow-gradient);
}
.btn-primary:hover {
  background-image: var(--elephai-gradient-hover);
  box-shadow: var(--shadow-gradient-lg);
  transform: translateY(-1px);
}
.btn-primary:active { transform: translateY(0); }

/* Secondary — white pill */
.btn-secondary {
  background: var(--bg-card);
  border-color: var(--border);
  color: var(--foreground);
}
.btn-secondary:hover { background: var(--bg-page); }

/* Ghost — text-only */
.btn-ghost {
  background: transparent;
  color: var(--primary);
}
.btn-ghost:hover { background: var(--primary-soft); }

/* Destructive — for confirmation steps only */
.btn-destructive {
  background: var(--destructive);
  color: var(--destructive-foreground);
}
.btn-destructive:hover { background: #DC2626; }

/* Icon button */
.btn-icon {
  width: 36px;
  height: 36px;
  padding: 0;
  border-radius: var(--radius-full);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  color: var(--foreground);
  position: relative;
  transition: background var(--duration-base) var(--ease-out);
}
.btn-icon:hover { background: var(--bg-sidebar-accent); }

/* --------------------------------------------------------------------------
   8.4 Inputs
   -------------------------------------------------------------------------- */
.field {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-bottom: var(--space-4);
}

.field label {
  font-size: var(--text-base-sm);
  font-weight: var(--weight-medium);
  color: var(--foreground);
}

.input,
.field input,
.field textarea,
.field select {
  width: 100%;
  height: 44px;
  padding: 0 var(--space-4);
  font-family: var(--font-body);
  font-size: var(--text-base);
  color: var(--foreground);
  background: var(--bg-card);
  border: 1px solid var(--input-border);
  border-radius: var(--radius-pill);
  box-shadow: var(--shadow-xs);
  transition: border-color var(--duration-base) var(--ease-out),
              box-shadow var(--duration-base) var(--ease-out);
}

.field textarea {
  height: auto;
  min-height: 100px;
  padding: var(--space-3) var(--space-4);
  border-radius: var(--radius-xl);
  resize: vertical;
  line-height: var(--leading-relaxed);
}

.input::placeholder,
.field input::placeholder,
.field textarea::placeholder {
  color: var(--subtle);
}

.input:focus,
.field input:focus,
.field textarea:focus,
.field select:focus {
  outline: none;
  border-color: var(--input-border-focus);
  box-shadow: 0 0 0 3px rgba(167, 139, 250, 0.15);
}

.field .helper {
  font-size: var(--text-sm);
  color: var(--muted-foreground);
}

.field.error input,
.field.error textarea {
  border-color: var(--destructive);
}
.field.error .helper {
  color: var(--destructive);
}

/* Search input with leading icon */
.search {
  position: relative;
  flex: 1;
  max-width: var(--search-max-width);
}
.search svg {
  position: absolute;
  left: 14px;
  top: 50%;
  transform: translateY(-50%);
  color: var(--muted-foreground);
  pointer-events: none;
}
.search input {
  padding-left: 40px;
}

/* --------------------------------------------------------------------------
   8.5 Cards
   -------------------------------------------------------------------------- */
.card {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius-2xl);
  padding: var(--space-6);
  box-shadow: var(--shadow-xs);
}

.card-title {
  font-size: var(--text-lg);
  font-weight: var(--weight-medium);
  line-height: var(--leading-snug);
  color: var(--foreground);
  margin-bottom: 6px;
}

.card-body {
  font-size: var(--text-base-sm);
  color: var(--muted-foreground);
  line-height: var(--leading-relaxed);
}

/* --------------------------------------------------------------------------
   8.6 Badges
   -------------------------------------------------------------------------- */
.badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 12px;
  border-radius: var(--radius-pill);
  font-size: var(--text-xs);
  font-weight: var(--weight-medium);
  line-height: 1.5;
  letter-spacing: 0.02em;
  white-space: nowrap;
}

.badge-success  { background: var(--success-soft);     color: var(--success); }
.badge-info     { background: var(--info-soft);        color: var(--info); }
.badge-warning  { background: var(--warning-soft);     color: var(--warning); }
.badge-critical { background: var(--destructive-soft); color: var(--destructive); }
.badge-neutral  { background: var(--bg-muted);         color: var(--muted-foreground); }

/* Status dot — pair with a label */
.status-dot {
  display: inline-block;
  width: 8px;
  height: 8px;
  border-radius: var(--radius-full);
  background: var(--success);
  flex-shrink: 0;
}
.status-dot.warning { background: var(--warning); }
.status-dot.danger  { background: var(--destructive); }
.status-dot.muted   { background: var(--subtle); }

/* --------------------------------------------------------------------------
   8.7 Alert / Screening Support Panel
   -------------------------------------------------------------------------- */
.alert {
  display: flex;
  gap: var(--space-3);
  align-items: flex-start;
  background: var(--alert-bg);
  border: 1px solid var(--alert-border);
  border-radius: var(--radius-2xl);
  padding: var(--space-4) var(--space-5);
}

.alert svg {
  flex-shrink: 0;
  margin-top: 2px;
  color: var(--alert-icon);
}

.alert-title {
  font-size: var(--text-base);
  font-weight: var(--weight-semibold);
  color: var(--alert-text);
  margin: 0 0 6px;
}

.alert p,
.alert-body {
  font-size: var(--text-base-sm);
  line-height: var(--leading-relaxed);
  color: var(--alert-text);
  margin: 0;
}

.alert-foot {
  font-size: var(--text-sm);
  color: var(--alert-text-soft);
  margin-top: var(--space-2);
}

/* --------------------------------------------------------------------------
   8.8 GDPR / Status Pill
   -------------------------------------------------------------------------- */
.status-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 3px 10px;
  font-size: var(--text-sm);
  font-weight: var(--weight-regular);
  color: var(--foreground);
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius-pill);
}

/* --------------------------------------------------------------------------
   8.9 Avatar
   -------------------------------------------------------------------------- */
.avatar {
  width: 40px;
  height: 40px;
  border-radius: var(--radius-full);
  display: grid;
  place-items: center;
  flex-shrink: 0;
  font-size: var(--text-sm);
  font-weight: var(--weight-medium);
  color: var(--foreground-inverse);
  background-image: var(--elephai-gradient);
  box-shadow: 0 0 0 2px rgba(167, 139, 250, 0.2);
}

.avatar-sm { width: 32px; height: 32px; font-size: var(--text-xs); }
.avatar-lg { width: 48px; height: 48px; font-size: var(--text-base); }

/* --------------------------------------------------------------------------
   8.10 Top Bar
   -------------------------------------------------------------------------- */
.topbar {
  position: sticky;
  top: 0;
  z-index: var(--z-sticky);
  min-height: var(--topbar-height);
  display: flex;
  align-items: center;
  gap: var(--space-4);
  padding: 0 var(--space-8);
  background: rgba(252, 248, 255, 0.95);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border-bottom: 1px solid var(--border-soft);
  box-shadow: var(--shadow-xs);
}

.topbar-divider {
  width: 1px;
  height: 32px;
  background: var(--border);
  flex-shrink: 0;
}

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

.user-name {
  font-size: var(--text-base);
  font-weight: var(--weight-medium);
  line-height: 1.25;
  color: var(--foreground);
}

.user-role {
  font-size: var(--text-sm);
  color: var(--muted-foreground);
}

.notif-dot {
  position: absolute;
  top: 9px;
  right: 9px;
  width: 8px;
  height: 8px;
  border-radius: var(--radius-full);
  background: var(--destructive);
}

/* --------------------------------------------------------------------------
   8.11 Integrations Card
   -------------------------------------------------------------------------- */
.integrations-card {
  background: var(--bg-card);
  border: 1px solid var(--sidebar-border);
  border-radius: var(--radius-2xl);
  padding: var(--space-4);
}

.integrations-head {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  font-size: var(--text-xs);
  font-weight: var(--weight-medium);
  color: var(--muted-foreground);
}

.integration {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: var(--text-xs);
}

.integration-icon { color: var(--muted-foreground); flex-shrink: 0; }
.integration-name { font-weight: var(--weight-medium); color: var(--foreground); }
.integration-meta { font-size: var(--text-2xs); color: var(--muted-foreground); }

/* --------------------------------------------------------------------------
   8.12 Toast
   -------------------------------------------------------------------------- */
.toast {
  position: fixed;
  bottom: 24px;
  left: 50%;
  transform: translateX(-50%) translateY(80px);
  padding: 10px 20px;
  background: var(--foreground);
  color: var(--foreground-inverse);
  font-size: var(--text-base-sm);
  font-weight: var(--weight-medium);
  border-radius: var(--radius-pill);
  box-shadow: var(--shadow-lg);
  opacity: 0;
  pointer-events: none;
  z-index: var(--z-toast);
  transition: opacity var(--duration-slow) var(--ease-out),
              transform var(--duration-slow) var(--ease-out);
}
.toast.show {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
}

/* --------------------------------------------------------------------------
   8.13 Modal
   -------------------------------------------------------------------------- */
.modal-scrim {
  position: fixed;
  inset: 0;
  background: var(--bg-overlay);
  z-index: var(--z-modal);
  display: grid;
  place-items: center;
  padding: var(--space-6);
}

.modal {
  background: var(--bg-card);
  border-radius: var(--radius-3xl);
  box-shadow: var(--shadow-xl);
  max-width: 520px;
  width: 100%;
  padding: var(--space-8);
}

/* --------------------------------------------------------------------------
   8.14 Divider / Section Heading
   -------------------------------------------------------------------------- */
.section-head {
  display: flex;
  align-items: baseline;
  gap: var(--space-4);
  padding-bottom: var(--space-5);
  margin-bottom: var(--space-8);
  border-bottom: 1px solid var(--border);
}

.section-num {
  font-family: var(--font-mono);
  font-size: var(--text-sm);
  font-weight: var(--weight-medium);
  color: var(--primary);
  letter-spacing: var(--tracking-wide);
}

.section-head h2 {
  font-family: var(--font-display);
  font-weight: var(--weight-regular);
  font-size: var(--text-3xl);
  line-height: 1.2;
}

/* --------------------------------------------------------------------------
   8.15 Data Table
   Wrap a <table class="data-table"> in <div class="table-card"><div class="table-scroll">
   so rounded corners clip cleanly while the table itself can still scroll on narrow screens.
   -------------------------------------------------------------------------- */
.table-card {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius-2xl);
  box-shadow: var(--shadow-xs);
  overflow: hidden;
}

.table-scroll {
  overflow-x: auto;
}

.data-table {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--text-base-sm);
}

.data-table thead th {
  padding: var(--space-3);
  font-size: var(--text-xs);
  font-weight: var(--weight-medium);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: var(--muted-foreground);
  text-align: left;
  white-space: nowrap;
  background: var(--bg-muted);
  border-bottom: 1px solid var(--border);
}

.data-table thead th:first-child { padding-left: var(--space-5); }
.data-table thead th:last-child  { padding-right: var(--space-5); }

.data-table tbody td {
  padding: var(--space-4) var(--space-3);
  border-bottom: 1px solid var(--border-soft);
  vertical-align: middle;
  color: var(--foreground);
}

.data-table tbody td:first-child { padding-left: var(--space-5); }
.data-table tbody td:last-child  { padding-right: var(--space-5); }

.data-table tbody tr:last-child td { border-bottom: 0; }

.data-table tbody tr {
  transition: background var(--duration-base) var(--ease-out);
}

.data-table tbody tr:hover td {
  background: var(--bg-muted);
}

/* Flagged row — a left accent stripe without disturbing border-collapse */
.data-table tbody tr.row-flagged td {
  background: var(--destructive-soft);
}

.data-table tbody tr.row-flagged:hover td {
  background: var(--destructive-soft);
}

.data-table tbody tr.row-flagged td:first-child {
  box-shadow: inset 3px 0 0 var(--destructive);
}

/* Small inline legend, e.g. a colour key inside a header cell */
.table-legend {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  text-transform: none;
  letter-spacing: 0;
  font-weight: var(--weight-regular);
  color: var(--muted-foreground);
}

.table-legend-swatch {
  width: 10px;
  height: 2px;
  display: inline-block;
  border-radius: 1px;
}


/* ==========================================================================
   9. UTILITIES — colors, spacing, radius, shadow
   ========================================================================== */

/* Backgrounds */
.bg-page    { background-color: var(--bg-page); }
.bg-card    { background-color: var(--bg-card); }
.bg-muted   { background-color: var(--bg-muted); }
.bg-primary-soft { background-color: var(--primary-soft); }

/* Border radius */
.rounded-sm   { border-radius: var(--radius-sm); }
.rounded-md   { border-radius: var(--radius-md); }
.rounded-lg   { border-radius: var(--radius-lg); }
.rounded-xl   { border-radius: var(--radius-xl); }
.rounded-2xl  { border-radius: var(--radius-2xl); }
.rounded-3xl  { border-radius: var(--radius-3xl); }
.rounded-pill { border-radius: var(--radius-pill); }
.rounded-full { border-radius: var(--radius-full); }

/* Shadows */
.shadow-xs { box-shadow: var(--shadow-xs); }
.shadow-sm { box-shadow: var(--shadow-sm); }
.shadow-md { box-shadow: var(--shadow-md); }
.shadow-lg { box-shadow: var(--shadow-lg); }
.shadow-xl { box-shadow: var(--shadow-xl); }
.shadow-none { box-shadow: none; }

/* Borders */
.border       { border: 1px solid var(--border); }
.border-t     { border-top: 1px solid var(--border); }
.border-b     { border-bottom: 1px solid var(--border); }
.border-l     { border-left: 1px solid var(--border); }
.border-r     { border-right: 1px solid var(--border); }
.border-soft  { border-color: var(--border-soft); }

/* Flex helpers */
.flex        { display: flex; }
.inline-flex { display: inline-flex; }
.flex-col    { flex-direction: column; }
.items-center { align-items: center; }
.items-start  { align-items: flex-start; }
.justify-center { justify-content: center; }
.justify-between { justify-content: space-between; }
.gap-1 { gap: var(--space-1); }
.gap-2 { gap: var(--space-2); }
.gap-3 { gap: var(--space-3); }
.gap-4 { gap: var(--space-4); }
.gap-6 { gap: var(--space-6); }

/* Grid */
.grid { display: grid; }
.grid-2 { grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: var(--space-4); }
.grid-3 { grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: var(--space-4); }
.grid-4 { grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: var(--space-4); }

/* Padding */
.p-2 { padding: var(--space-2); }
.p-3 { padding: var(--space-3); }
.p-4 { padding: var(--space-4); }
.p-6 { padding: var(--space-6); }
.p-8 { padding: var(--space-8); }

/* Margin */
.mb-2 { margin-bottom: var(--space-2); }
.mb-4 { margin-bottom: var(--space-4); }
.mb-6 { margin-bottom: var(--space-6); }
.mb-8 { margin-bottom: var(--space-8); }
.mt-4 { margin-top: var(--space-4); }
.mt-6 { margin-top: var(--space-6); }
.mt-auto { margin-top: auto; }


/* ==========================================================================
   10. SCROLLBARS
   ========================================================================== */
* {
  scrollbar-width: thin;
  scrollbar-color: rgba(167, 139, 250, 0.25) transparent;
}

*::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}

*::-webkit-scrollbar-track {
  background: transparent;
}

*::-webkit-scrollbar-thumb {
  background: rgba(167, 139, 250, 0.2);
  border-radius: var(--radius-pill);
}

*::-webkit-scrollbar-thumb:hover {
  background: rgba(167, 139, 250, 0.35);
}


/* ==========================================================================
   11. DARK MODE (optional)
   Opt-in via [data-theme="dark"] on <html>. The live app ships light-only,
   so use with caution — colours are tuned for light surfaces.
   ========================================================================== */
[data-theme="dark"] {
  --bg-page:              #14101C;
  --bg-card:              #1D1828;
  --bg-sidebar:           #1A1524;
  --bg-sidebar-accent:    rgba(167, 139, 250, 0.12);
  --bg-muted:             rgba(255, 255, 255, 0.04);
  --bg-overlay:           rgba(0, 0, 0, 0.65);

  --foreground:           #F5EDFF;
  --muted-foreground:     #A69CB5;
  --subtle:               #6F6B7A;
  --foreground-inverse:   #1B1523;

  --border:               #2A2338;
  --border-soft:          rgba(255, 255, 255, 0.06);
  --border-strong:        #3A3149;
  --sidebar-border:       #2A2338;
  --input-border:         #2A2338;

  --alert-bg:             #2A1F12;
  --alert-border:         #5C3A1A;
  --alert-text:           #FDE8C8;
  --alert-text-soft:      #E8C9A1;
  --alert-icon:           #FB923C;
}


/* ==========================================================================
   12. PRINT
   ========================================================================== */
@media print {
  :root {
    --bg-page: #FFFFFF;
    --shadow-xs: none;
    --shadow-sm: none;
    --shadow-md: none;
    --shadow-lg: none;
  }

  body {
    background: #FFFFFF;
    color: #1B1523;
  }

  .sidebar,
  .topbar,
  .toast,
  .modal-scrim {
    display: none !important;
  }

  .card,
  .alert {
    break-inside: avoid;
    box-shadow: none !important;
    border: 1px solid #EBE4F3;
  }

  a {
    color: #1B1523;
    text-decoration: none;
  }
}