/* ═══════════════════════════════════════════════════════════════════
   PRAXIVET — Global Design System

   A calm, trustworthy visual language for veterinary care.
   Saskatchewan-inspired: muted prairie greens, soft wheat gold,
   warm off-white backgrounds, and dark-gray readable type.

   Import this file in every page. All branding, spacing, typography,
   and component styles live here. Page-specific styles go below your
   <link> tag in a <style> block.
   ═══════════════════════════════════════════════════════════════════ */

/* ── Google Fonts (included here so any page just needs one <link>) ── */
@import url('https://fonts.googleapis.com/css2?family=Playfair+Display:ital,wght@0,400;0,600;1,400&family=IBM+Plex+Mono:wght@400;500&family=IBM+Plex+Sans:wght@300;400;500&display=swap');


/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   1. DESIGN TOKENS
   All visual values live here as CSS custom properties.
   Change a token, change the whole site.
   ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
:root {

  /* ── Color palette ─────────────────────────────────────────────
     Named after Saskatchewan natural elements.
     "Field" = prairie grass / sage / crop greens.
     "Wheat" = canola & grain gold tones.
  */

  /* Field greens — primary brand color */
  --field-50:   #f0f6ee;
  --field-100:  #dcebda;
  --field-200:  #b8d6b3;
  --field-300:  #8dba86;
  --field-400:  #669a5d;
  --field-500:  #4f8444;   /* ← Primary: muted prairie green */
  --field-600:  #3d6b35;
  --field-700:  #2d5128;
  --field-800:  #1e371b;
  --field-900:  #111e0f;

  /* Wheat golds — accent color */
  --wheat-50:   #fdf8eb;
  --wheat-100:  #faefc8;
  --wheat-200:  #f4dc90;
  --wheat-300:  #ebc85a;
  --wheat-400:  #ddb03a;
  --wheat-500:  #c49628;   /* ← Accent: soft wheat gold */
  --wheat-600:  #9f7820;
  --wheat-700:  #7a5c18;

  /* Warm neutrals — backgrounds and text */
  --stone-50:   #f8f7f3;   /* ← Page background (warm off-white) */
  --stone-100:  #eeecea;
  --stone-200:  #dedbd5;
  --stone-300:  #c8c4bd;
  --stone-400:  #a9a49c;
  --stone-500:  #88837a;
  --stone-600:  #69645c;
  --stone-700:  #4e4a43;
  --stone-800:  #35322c;
  --stone-900:  #1e1c18;   /* ← Rich near-black for headings */

  /* ── Semantic tokens ────────────────────────────────────────────
     Use these in component styles. Never hardcode raw hex values
     outside this :root block — use a semantic token instead.
  */

  /* Backgrounds */
  --bg-page:       var(--stone-50);       /* Main page background */
  --bg-subtle:     var(--stone-100);      /* Sidebar, stripes, alt sections */
  --bg-surface:    #fdfcf7;               /* Cards, modals, inputs — warm cream */
  --bg-primary:    var(--field-500);      /* Green fills (left panel, badges) */
  --bg-primary-hover: var(--field-600);
  --bg-primary-dark:  var(--field-700);
  --bg-accent:     var(--wheat-500);

  /* Text */
  --text-primary:   #1A1A1A;             /* Main body text */
  --text-secondary: #545c4d;             /* Secondary / descriptions */
  --text-muted:     #808977;             /* Placeholders, captions */
  --text-inverse:   #f8f7f3;            /* Text on dark/green backgrounds */
  --text-on-primary: #ffffff;            /* Text on --bg-primary */
  --text-accent:    var(--wheat-500);    /* Highlighted text */
  --text-link:      var(--field-600);
  --text-link-hover: var(--field-700);

  /* Borders */
  --border-subtle:  #e8e5e0;
  --border-base:    #d8d4cd;
  --border-strong:  #b8b3ac;
  --border-focus:   var(--field-400);    /* Focus ring color */
  --border-error:   rgba(180, 55, 38, 0.35);

  /* Error / Danger */
  --color-error:        #b43726;
  --color-error-bg:     #fdf1ef;
  --color-error-border: rgba(180, 55, 38, 0.2);

  /* Success */
  --color-success:        var(--field-600);
  --color-success-bg:     var(--field-50);
  --color-success-border: rgba(79, 132, 68, 0.2);

  /* ── Typography ─────────────────────────────────────────────── */
  --font-serif: 'Playfair Display', Georgia, 'Times New Roman', serif;
  --font-sans:  'IBM Plex Sans', 'Helvetica Neue', Arial, sans-serif;
  --font-mono:  'IBM Plex Mono', 'Courier New', Courier, monospace;

  /* Type scale (fluid-friendly rem units) */
  --text-xs:   0.6875rem;  /* 11px — labels, captions */
  --text-sm:   0.8125rem;  /* 13px — secondary text */
  --text-base: 0.9375rem;  /* 15px — body default */
  --text-md:   1rem;       /* 16px */
  --text-lg:   1.125rem;   /* 18px */
  --text-xl:   1.25rem;    /* 20px */
  --text-2xl:  1.5rem;     /* 24px */
  --text-3xl:  1.875rem;   /* 30px */
  --text-4xl:  2.25rem;    /* 36px */
  --text-5xl:  3rem;       /* 48px */
  --text-6xl:  3.75rem;    /* 60px */

  /* Line heights */
  --leading-tight:  1.25;
  --leading-snug:   1.375;
  --leading-normal: 1.6;
  --leading-relaxed: 1.75;

  /* Letter spacing */
  --tracking-tight:  -0.02em;
  --tracking-normal:  0;
  --tracking-wide:    0.04em;
  --tracking-wider:   0.08em;
  --tracking-widest:  0.12em;

  /* ── Spacing ────────────────────────────────────────────────── */
  --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 */
  --space-24: 6rem;      /* 96px */

  /* ── Geometry ───────────────────────────────────────────────── */
  --radius-sm:   4px;
  --radius-md:   8px;
  --radius-lg:   12px;
  --radius-xl:   18px;
  --radius-2xl:  24px;
  --radius-full: 9999px;

  /* ── Shadows ────────────────────────────────────────────────── */
  /* Subtle, warm-tinted shadows (slightly green-gray, not pure black) */
  --shadow-xs:  0 1px 2px rgba(28, 32, 24, 0.05);
  --shadow-sm:  0 1px 3px rgba(28, 32, 24, 0.07), 0 1px 2px rgba(28, 32, 24, 0.04);
  --shadow-md:  0 4px 8px rgba(28, 32, 24, 0.07), 0 2px 4px rgba(28, 32, 24, 0.04);
  --shadow-lg:  0 10px 20px rgba(28, 32, 24, 0.08), 0 4px 6px rgba(28, 32, 24, 0.04);
  --shadow-xl:  0 20px 40px rgba(28, 32, 24, 0.10), 0 8px 16px rgba(28, 32, 24, 0.05);
  --shadow-focus: 0 0 0 3px rgba(79, 132, 68, 0.22);  /* Focus ring */
  --shadow-focus-error: 0 0 0 3px rgba(180, 55, 38, 0.18);

  /* ── Motion ─────────────────────────────────────────────────── */
  --ease-out:    cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in-out: cubic-bezier(0.4, 0, 0.2, 1);
  --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);  /* Gentle spring */

  --duration-fast: 120ms;
  --duration-base: 200ms;
  --duration-slow: 360ms;

  /* ── App Shell Light Theme tokens ─────────────────────────────
     Used by authenticated app pages (app, admin, formulary, etc.).
     Matches the login page's prairie light palette.
     Never use raw hex values in components; reference these tokens.
  */
  --app-bg:              #F5F0E8;            /* Warm off-white page background */
  --app-surface:         #EDE8DE;            /* Card & panel backgrounds — deeper cream */
  --app-surface-alt:     #F0EBE1;            /* Alternate surface (hover states, alt panels) */
  --app-surface-raised:  var(--stone-50);   /* Panel headers, hovered rows */
  --app-surface-active:  var(--stone-100);  /* Active/selected item tint */
  --app-text:            #1A1A1A;            /* Primary text */
  --app-text-secondary:  #545c4d;
  --app-text-muted:      #5C5448;            /* Placeholder / caption */
  --app-border:          rgba(184, 151, 42, 0.2);
  --app-border-strong:   rgba(184, 151, 42, 0.4);

  /* Gold accent — parchment & aged leather tones */
  --gold:        #B8972A;
  --gold-light:  #D4AF5A;
  --gold-border: rgba(184, 151, 42, 0.35);
  --gold-bg:     rgba(184, 151, 42, 0.06);
  --app-accent:          var(--field-500);   /* #4f8444 — prairie green */
  --app-accent-light:    var(--field-600);   /* #3d6b35 — deeper green */
  --app-accent-bright:   var(--field-400);   /* #669a5d — lighter green */
  --app-green:           var(--field-400);   /* #669a5d — green accent */
  --app-green-light:     var(--field-300);   /* #8dba86 */

  /* App nav sidebar dimensions */
  --app-nav-width:           220px;
  --app-nav-width-collapsed:  60px;
}


/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   2. RESET & BASE
   ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */

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

html {
  font-size: 1.125rem;       /* ~18px */
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
}

body {
  background-color: var(--bg-page);
  color: var(--text-primary);
  font-family: var(--font-sans);
  font-weight: 400;
  font-size: var(--text-base);
  line-height: var(--leading-normal);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* Remove default list styles */
ul, ol { list-style: none; }

/* Images */
img, svg { display: block; max-width: 100%; }

/* Inherit fonts */
input, button, textarea, select {
  font: inherit;
}

/* Remove default button styles */
button {
  cursor: pointer;
  background: none;
  border: none;
}

/* Focus outline reset — we use custom focus styles */
:focus { outline: none; }
:focus-visible {
  outline: 2px solid var(--border-focus);
  outline-offset: 2px;
}


/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   3. TYPOGRAPHY
   ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */

/* Headings use Playfair Display for trustworthy, editorial feel */
h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-serif);
  color: var(--text-primary);
  line-height: var(--leading-tight);
  letter-spacing: var(--tracking-tight);
  font-weight: 600;
}

h1 { font-size: var(--text-5xl); }
h2 { font-size: var(--text-4xl); }
h3 { font-size: var(--text-3xl); }
h4 { font-size: var(--text-2xl); }
h5 { font-size: var(--text-xl); }
h6 { font-size: var(--text-lg); }

/* Italic headings use the elegant Playfair italic */
h1 em, h2 em, h3 em, h4 em {
  font-style: italic;
  color: var(--field-600);
}

p {
  color: var(--text-secondary);
  line-height: var(--leading-normal);
}

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

/* Small monospaced label — for form labels, metadata */
.label-mono {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  font-weight: 600;
  letter-spacing: var(--tracking-widest);
  text-transform: uppercase;
  color: var(--text-muted);
}

/* Eyebrow / section label */
.eyebrow {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  letter-spacing: var(--tracking-widest);
  text-transform: uppercase;
  color: var(--field-500);
  font-weight: 500;
}

strong, b { font-weight: 500; }


/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   4. BUTTONS
   Usage: <button class="btn btn-primary">Label</button>
          <a href="#" class="btn btn-outline btn-sm">Go</a>
   ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  padding: 0.65em 1.3em;
  font-family: var(--font-sans);
  font-size: var(--text-base);
  font-weight: 500;
  line-height: 1;
  letter-spacing: 0.01em;
  border-radius: var(--radius-md);
  border: 1.5px solid transparent;
  text-decoration: none;
  cursor: pointer;
  transition:
    background-color var(--duration-base) var(--ease-out),
    border-color     var(--duration-base) var(--ease-out),
    color            var(--duration-base) var(--ease-out),
    transform        var(--duration-fast) var(--ease-spring),
    box-shadow       var(--duration-base) var(--ease-out);
  user-select: none;
  white-space: nowrap;
}

.btn:hover   { transform: translateY(-1px); }
.btn:active  { transform: translateY(0); }
.btn:disabled, .btn[disabled] {
  opacity: 0.48;
  cursor: not-allowed;
  pointer-events: none;
}
.btn:focus-visible {
  box-shadow: var(--shadow-focus);
  outline: none;
}

/* ─ Sizes */
.btn-sm {
  font-size: var(--text-sm);
  padding: 0.5em 1em;
  border-radius: var(--radius-sm);
}
.btn-lg {
  font-size: var(--text-lg);
  padding: 0.75em 1.6em;
  border-radius: var(--radius-lg);
}

/* ─ Variants */

/* Primary: muted green — the default CTA */
.btn-primary {
  background-color: var(--bg-primary);
  border-color:     var(--gold-light);
  color:            var(--text-on-primary);
}
.btn-primary:hover {
  background-color: var(--bg-primary-hover);
  border-color:     var(--bg-primary-hover);
  color:            var(--text-on-primary);
}
.btn-primary:active {
  background-color: var(--bg-primary-dark);
}

/* Secondary: subtle green fill */
.btn-secondary {
  background-color: var(--field-50);
  border-color:     var(--field-200);
  color:            var(--field-700);
}
.btn-secondary:hover {
  background-color: var(--field-100);
  border-color:     var(--field-300);
  color:            var(--field-700);
}

/* Outline: bordered, transparent fill */
.btn-outline {
  background-color: transparent;
  border-color:     var(--border-base);
  color:            var(--text-secondary);
}
.btn-outline:hover {
  background-color: var(--bg-subtle);
  border-color:     var(--border-strong);
  color:            var(--text-primary);
}

/* Ghost: no border, no background */
.btn-ghost {
  background-color: transparent;
  border-color:     transparent;
  color:            var(--text-secondary);
}
.btn-ghost:hover {
  background-color: var(--bg-subtle);
  color:            var(--text-primary);
}

/* On dark/green backgrounds */
.btn-inverse {
  background-color: rgba(255,255,255,0.15);
  border-color:     rgba(255,255,255,0.25);
  color:            #ffffff;
  backdrop-filter:  blur(4px);
}
.btn-inverse:hover {
  background-color: rgba(255,255,255,0.25);
  border-color:     rgba(255,255,255,0.4);
}


/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   5. FORM ELEMENTS
   Usage:
     <div class="field">
       <label class="field-label" for="x">Email</label>
       <input class="field-input" id="x" type="email" …>
       <span class="field-hint">Some helper text</span>
     </div>
   ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */

.field {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.field-label {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  font-weight: 600;
  letter-spacing: var(--tracking-widest);
  text-transform: uppercase;
  color: var(--text-muted);
  display: block;
}

.field-input,
.field-select,
.field-textarea {
  width: 100%;
  background-color: var(--bg-surface);
  border: 1.5px solid var(--border-base);
  border-radius: var(--radius-md);
  padding: var(--space-3) var(--space-4);
  color: var(--text-primary);
  font-size: var(--text-base);
  font-weight: 500;
  line-height: var(--leading-normal);
  appearance: none;
  transition:
    border-color var(--duration-base) var(--ease-out),
    box-shadow   var(--duration-base) var(--ease-out);
}

.field-input::placeholder,
.field-textarea::placeholder {
  color: var(--text-muted);
  opacity: 0.65;
}

.field-input:hover,
.field-select:hover,
.field-textarea:hover {
  border-color: var(--border-strong);
}

.field-input:focus,
.field-select:focus,
.field-textarea:focus {
  border-color: var(--gold);
  box-shadow: 0 0 0 3px rgba(184, 151, 42, 0.15);
  outline: none;
}

/* Error state */
.field.is-error .field-input,
.field.is-error .field-select,
.field.is-error .field-textarea {
  border-color: var(--border-error);
}
.field.is-error .field-input:focus {
  box-shadow: var(--shadow-focus-error);
}

.field-hint {
  font-size: var(--text-sm);
  color: var(--text-muted);
  line-height: var(--leading-snug);
}

.field-error-msg {
  font-size: var(--text-sm);
  color: var(--color-error);
  line-height: var(--leading-snug);
}

/* Alert/banner style error */
.alert {
  padding: var(--space-3) var(--space-4);
  border-radius: var(--radius-md);
  font-size: var(--text-sm);
  line-height: var(--leading-snug);
  display: none;  /* shown via JS: .alert.visible { display: block } */
}
.alert.visible { display: block; }

.alert-error {
  background-color: var(--color-error-bg);
  border: 1px solid var(--color-error-border);
  color: var(--color-error);
  font-family: var(--font-mono);
}

.alert-success {
  background-color: var(--color-success-bg);
  border: 1px solid var(--color-success-border);
  color: var(--color-success);
}

/* Loading indicator */
.loading-text {
  text-align: center;
  font-family: var(--font-mono);
  font-size: var(--text-sm);
  color: var(--text-muted);
  display: none;
}
.loading-text.visible { display: block; }


/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   6. CARDS
   Usage: <div class="card">…</div>
          <div class="card card-lg">…</div>
   ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */

.card {
  background-color: var(--bg-surface);
  border: 1px solid var(--gold-border);
  border-radius: var(--radius-xl);
  padding: var(--space-8);
  box-shadow: var(--shadow-md);
}

.card-sm { padding: var(--space-5); border-radius: var(--radius-lg); }
.card-lg { padding: var(--space-12); }

/* Subtle card — blends more with background */
.card-subtle {
  background-color: var(--bg-subtle);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-lg);
  padding: var(--space-6);
  box-shadow: none;
}

/* Feature card with top accent */
.card-feature {
  background-color: var(--bg-surface);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-xl);
  padding: var(--space-8);
  box-shadow: var(--shadow-sm);
  transition:
    box-shadow  var(--duration-base) var(--ease-out),
    transform   var(--duration-base) var(--ease-spring),
    border-color var(--duration-base) var(--ease-out);
}
.card-feature:hover {
  box-shadow: var(--shadow-lg);
  transform: translateY(-2px);
  border-color: var(--field-200);
}


/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   7. LAYOUT UTILITIES
   ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */

/* Content container */
.container {
  width: 100%;
  max-width: 1160px;
  margin-inline: auto;
  padding-inline: var(--space-6);
}
.container-sm  { max-width: 720px; }
.container-xs  { max-width: 480px; }
.container-lg  { max-width: 1360px; }

/* Section spacing */
.section {
  padding-block: var(--space-20);
}
.section-sm {
  padding-block: var(--space-12);
}

/* Divider */
.divider {
  width: 100%;
  height: 1px;
  background: var(--border-subtle);
  border: none;
  margin-block: var(--space-8);
}

/* Dot marker — used in feature lists */
.dot {
  display: inline-block;
  width: 6px;
  height: 6px;
  border-radius: var(--radius-full);
  background-color: var(--field-400);
  flex-shrink: 0;
}

/* Badge / pill */
.badge {
  display: inline-flex;
  align-items: center;
  padding: 0.2em 0.7em;
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  font-weight: 500;
  letter-spacing: var(--tracking-wide);
  border-radius: var(--radius-full);
  background-color: var(--field-50);
  color: var(--field-700);
  border: 1px solid var(--field-200);
}

/* Navigation bar */
.nav {
  position: sticky;
  top: 0;
  z-index: 200;
  background-color: rgba(248, 247, 243, 0.9);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--border-subtle);
}

.nav-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 56px;
}

.nav-brand {
  font-family: var(--font-serif);
  font-size: var(--text-xl);
  font-weight: 600;
  color: var(--text-primary);
  letter-spacing: var(--tracking-tight);
  text-decoration: none;
}

.nav-brand:hover { color: var(--field-600); }

/* Page footer */
.page-footer {
  padding-block: var(--space-10);
  border-top: 1px solid var(--border-subtle);
  text-align: center;
}

.footer-text {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  color: var(--text-muted);
  letter-spacing: var(--tracking-wide);
  line-height: var(--leading-relaxed);
}


/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   8. ANIMATIONS
   All motion is intentionally gentle. No bouncing or sliding
   that would feel out of place in a clinical context.
   ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */

/* Fade up — primary entrance animation */
@keyframes fadeUp {
  from {
    opacity: 0;
    transform: translateY(14px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Fade in — simple opacity entrance */
@keyframes fadeIn {
  from { opacity: 0; }
  to   { opacity: 1; }
}

/* Gentle scale in — for cards and modals */
@keyframes scaleIn {
  from {
    opacity: 0;
    transform: scale(0.97);
  }
  to {
    opacity: 1;
    transform: scale(1);
  }
}

/* Helper animation classes */
.anim-fade-up {
  animation: fadeUp var(--duration-slow) var(--ease-out) both;
}
.anim-fade-in {
  animation: fadeIn var(--duration-slow) var(--ease-out) both;
}
.anim-scale-in {
  animation: scaleIn var(--duration-slow) var(--ease-out) both;
}

/* Staggered delays for sequential reveals */
.anim-delay-1 { animation-delay: 80ms; }
.anim-delay-2 { animation-delay: 160ms; }
.anim-delay-3 { animation-delay: 240ms; }
.anim-delay-4 { animation-delay: 320ms; }
.anim-delay-5 { animation-delay: 400ms; }

/* Respect reduced motion preference */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
  }
}


/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   9. SCROLLBAR (optional, subtle)
   ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
::-webkit-scrollbar { width: 8px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb {
  background: var(--stone-300);
  border-radius: var(--radius-full);
}
::-webkit-scrollbar-thumb:hover { background: var(--stone-400); }


/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   10. ACCESSIBILITY HELPERS
   ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */

/* Visually hidden but accessible to screen readers */
.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;
}

/* Skip link */
.skip-link {
  position: absolute;
  top: -100px;
  left: var(--space-4);
  z-index: 9999;
  padding: var(--space-2) var(--space-4);
  background: var(--bg-primary);
  color: var(--text-on-primary);
  border-radius: var(--radius-md);
  font-size: var(--text-sm);
  transition: top var(--duration-fast);
}
.skip-link:focus { top: var(--space-4); }


/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   11. RESPONSIVE HELPERS
   ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */

@media (max-width: 768px) {
  .container { padding-inline: var(--space-4); }
  .section    { padding-block: var(--space-12); }
  h1 { font-size: var(--text-4xl); }
  h2 { font-size: var(--text-3xl); }
  h3 { font-size: var(--text-2xl); }
}

@media (max-width: 480px) {
  h1 { font-size: var(--text-3xl); }
  .btn-lg { font-size: var(--text-base); padding: 0.7em 1.3em; }
}


/* ═══════════════════════════════════════════════════════════════════
   APP SHELL — SECTIONS 12–20
   Components for authenticated pages: app, admin, formulary,
   clinics, patients. All use the --app-* dark theme tokens above.

   HOW TO ADD A NEW APP PAGE
   ─────────────────────────
   1. <link rel="stylesheet" href="global.css">   ← one import
   2. <body class="app-body"> (or html/body height:100% override)
   3. Structure:
        <div class="app-shell">
          <nav class="app-nav" id="appNav"> … </nav>
          <div class="app-page-scroll">
            <div class="app-page"> … </div>
          </div>
        </div>
   4. Use only the tokens and component classes below.
      No hardcoded colors. No duplicate :root blocks.
   ═══════════════════════════════════════════════════════════════════ */


/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   12. APP SHELL LAYOUT
   ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */

/* Override base body for full-height app layout */
.app-body {
  height: 100%;
  overflow: hidden;
  background-color: var(--app-bg);
  color: var(--app-text);
  font-family: var(--font-sans);
  font-weight: 400;
  /* Subtle noise texture for depth */
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='300' height='300'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.75' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='300' height='300' filter='url(%23n)' opacity='0.03'/%3E%3C/svg%3E");
}

/* Full-viewport flex shell that holds sidebar + content */
.app-shell {
  display: flex;
  height: 100vh;
  overflow: hidden;
}

/* Scrollable main content column */
.app-page-scroll {
  flex: 1;
  overflow-y: auto;
  scrollbar-width: thin;
  scrollbar-color: var(--app-border-strong) transparent;
}

/* Page content wrapper with max-width and consistent spacing */
.app-page {
  max-width: 1140px;
  margin: 0 auto;
  padding: 44px 36px;
  display: flex;
  flex-direction: column;
  gap: 32px;
  animation: fadeUp var(--duration-base) var(--ease-out) both;
}

/* Page header row: title left, actions right */
.app-page-top {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--space-4);
}

.app-page-title {
  font-family: var(--font-serif);
  font-size: var(--text-4xl);
  color: var(--app-accent-light);
  letter-spacing: var(--tracking-tight);
  line-height: 1;
}

.app-page-subtitle {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  color: var(--app-text-muted);
  margin-top: var(--space-1);
}

/* Small refresh / action button in page header */
.btn-app-ghost {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  color: var(--app-text-muted);
  background: transparent;
  border: 1px solid var(--app-border);
  padding: 6px 14px;
  border-radius: var(--radius-full);
  cursor: pointer;
  transition: border-color var(--duration-fast) var(--ease-out),
              color var(--duration-fast) var(--ease-out);
  letter-spacing: var(--tracking-wide);
}
.btn-app-ghost:hover {
  border-color: var(--app-accent);
  color: var(--app-accent);
}

/* App-context danger button */
.btn-app-danger {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  color: var(--color-error);
  background: transparent;
  border: 1px solid rgba(180, 55, 38, 0.25);
  padding: 5px 12px;
  border-radius: var(--radius-full);
  cursor: pointer;
  transition: background-color var(--duration-fast) var(--ease-out),
              border-color var(--duration-fast) var(--ease-out);
  letter-spacing: var(--tracking-wide);
}
.btn-app-danger:hover {
  background-color: rgba(180, 55, 38, 0.1);
  border-color: rgba(180, 55, 38, 0.5);
}

/* App-context primary button (add / create) */
.btn-app-primary {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  color: var(--app-bg);
  background-color: var(--app-accent);
  border: 1px solid var(--app-accent);
  padding: 7px 16px;
  border-radius: var(--radius-full);
  cursor: pointer;
  letter-spacing: var(--tracking-wide);
  transition: background-color var(--duration-fast) var(--ease-out);
}
.btn-app-primary:hover {
  background-color: var(--app-accent-light);
  border-color: var(--app-accent-light);
}


/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   13. APP NAVIGATION SIDEBAR
   Usage: <nav class="app-nav" id="appNav">…</nav>
          JS: appNav.classList.toggle('collapsed')
   ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */

.app-nav {
  width: var(--app-nav-width);
  min-width: var(--app-nav-width);
  background: #E8E2D6;
  border-right: 1px solid var(--app-border);
  display: flex;
  flex-direction: column;
  transition:
    width    0.25s var(--ease-in-out),
    min-width 0.25s var(--ease-in-out);
  overflow: hidden;
  flex-shrink: 0;
}
.app-nav.collapsed {
  width: var(--app-nav-width-collapsed);
  min-width: var(--app-nav-width-collapsed);
}

/* ── Logo row at the top of the sidebar */
.app-nav-top {
  display: flex;
  align-items: center;
  padding: 16px 12px 14px;
  border-bottom: 1px solid var(--app-border);
  gap: var(--space-2);
  flex-shrink: 0;
  background: linear-gradient(180deg, rgba(201,168,76,0.05) 0%, transparent 100%);
}

.app-nav-logo {
  display: flex;
  align-items: center;
  gap: 10px;
  flex: 1;
  min-width: 0;
}

.app-nav-logo-icon {
  width: 34px;
  height: 34px;
  background: rgba(201, 168, 76, 0.1);
  border: 1px solid rgba(201, 168, 76, 0.25);
  border-radius: var(--radius-md);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.05rem;
  flex-shrink: 0;
}

.app-nav-logo-text { min-width: 0; overflow: hidden; }

.app-nav-logo-main {
  display: block;
  font-family: var(--font-serif);
  font-size: 1.05rem;
  font-weight: 600;
  color: var(--app-accent-light);
  letter-spacing: var(--tracking-tight);
  line-height: 1.2;
  white-space: nowrap;
}

.app-nav-logo-sub {
  display: block;
  font-family: var(--font-mono);
  font-size: 0.55rem;
  color: var(--app-text-muted);
  letter-spacing: var(--tracking-wider);
  text-transform: uppercase;
  white-space: nowrap;
}

/* ── Collapse toggle button */
.app-nav-toggle {
  background: transparent;
  border: 1px solid var(--app-border);
  border-radius: var(--radius-sm);
  width: 28px;
  height: 28px;
  cursor: pointer;
  color: var(--app-text-muted);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  transition: border-color var(--duration-fast) var(--ease-out),
              color var(--duration-fast) var(--ease-out),
              background-color var(--duration-fast) var(--ease-out);
  font-size: 0.85rem;
}
.app-nav-toggle:hover {
  border-color: var(--app-border-strong);
  color: var(--app-text);
  background: var(--app-surface-raised);
}

.app-nav-toggle-arrow {
  transition: transform 0.25s var(--ease-in-out);
  display: block;
}
.app-nav.collapsed .app-nav-toggle-arrow { transform: rotate(180deg); }

/* ── Scrollable nav body */
.app-nav-body {
  flex: 1;
  overflow-y: auto;
  overflow-x: hidden;
  padding: 10px 0 6px;
  display: flex;
  flex-direction: column;
  scrollbar-width: thin;
  scrollbar-color: var(--app-border-strong) transparent;
}

/* Nav entrance animation */
@keyframes navSlideIn {
  from { opacity: 0; transform: translateX(-8px); }
  to   { opacity: 1; transform: translateX(0); }
}

/* Section label (e.g. "Tools", "Patients", "Admin") */
.app-nav-section-label {
  font-family: var(--font-mono);
  font-size: 0.6rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--app-text-muted);
  padding: 16px 16px 4px;
  margin-top: 8px;
  white-space: nowrap;
  opacity: 0.65;
  transition: opacity 0.15s, max-height 0.2s, padding 0.2s;
  max-height: 30px;
  overflow: hidden;
}
.app-nav.collapsed .app-nav-section-label {
  opacity: 0;
  max-height: 0;
  padding-top: 0;
  padding-bottom: 0;
}

/* Individual nav item */
.app-nav-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 9px 12px;
  margin: 1px 8px;
  border-radius: var(--radius-md);
  cursor: pointer;
  background: transparent;
  border: none;
  border-left: 3px solid transparent;
  color: var(--app-text-muted);
  font-family: var(--font-sans);
  font-size: 0.82rem;
  font-weight: 500;
  width: calc(100% - 16px);
  text-align: left;
  text-decoration: none;
  transition: background var(--duration-fast), color var(--duration-fast), border-color var(--duration-fast), box-shadow var(--duration-fast);
  white-space: nowrap;
  position: relative;
  animation: navSlideIn 0.2s ease both;
}
.app-nav-item:hover:not(.disabled):not(.active) {
  background: var(--app-surface-raised);
  color: var(--app-text);
}
.app-nav-item.active {
  background: rgba(184, 151, 42, 0.12);
  color: var(--app-accent-light);
  font-weight: 600;
  box-shadow: inset 3px 0 0 var(--gold);
}

/* Stagger animation delays (nth-child within app-nav-body) */
.app-nav-body > .app-nav-item:nth-child(2)  { animation-delay: 0.10s; }
.app-nav-body > .app-nav-item:nth-child(3)  { animation-delay: 0.15s; }
.app-nav-body > .app-nav-item:nth-child(4)  { animation-delay: 0.20s; }
.app-nav-body > .app-nav-item:nth-child(7)  { animation-delay: 0.35s; }
.app-nav-body > .app-nav-item:nth-child(8)  { animation-delay: 0.40s; }
.app-nav-body > .app-nav-item:nth-child(9)  { animation-delay: 0.45s; }
.app-nav-body > .app-nav-item:nth-child(12) { animation-delay: 0.60s; }
.app-nav-body > .app-nav-item:nth-child(13) { animation-delay: 0.65s; }
.app-nav-body > .app-nav-item:nth-child(14) { animation-delay: 0.70s; }
.app-nav-body > .app-nav-item:nth-child(16) { animation-delay: 0.80s; }

/* Tool / Patients section items — vibrant green hover & active */
.app-nav-item.nav-tool:hover:not(.disabled):not(.active) {
  background: linear-gradient(135deg, #2D5A27, #4A7C3F);
  color: #FFFFFF;
  border-left: 3px solid var(--gold);
}
.app-nav-item.nav-tool.active {
  background: linear-gradient(135deg, #2D5A27, #4A7C3F);
  color: #FFFFFF;
  font-weight: 600;
  box-shadow: 0 2px 8px rgba(45, 90, 39, 0.25);
  border-left: 3px solid var(--gold);
}
.app-nav-item.nav-tool.active .app-nav-item-icon {
  filter: brightness(1.2);
}
.app-nav-item.disabled {
  opacity: 0.38;
  cursor: default;
  pointer-events: none;
}

.app-nav-item-icon {
  font-size: 1rem;
  width: 24px;
  text-align: center;
  flex-shrink: 0;
}
.app-nav-item-label {
  flex: 1;
  overflow: hidden;
  white-space: nowrap;
  transition: opacity var(--duration-base), width 0.25s;
}

/* "Soon" badge on disabled items */
.app-nav-soon {
  font-family: var(--font-mono);
  font-size: 0.52rem;
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  background: var(--app-surface-raised);
  border: 1px solid var(--app-border);
  color: var(--app-text-muted);
  padding: 1px 6px;
  border-radius: var(--radius-full);
  flex-shrink: 0;
  transition: opacity var(--duration-base);
}

/* Collapsed state: center icons, hide labels */
.app-nav.collapsed .app-nav-item {
  justify-content: center;
  padding: 10px 0;
  margin: 2px 8px;
  width: calc(100% - 16px);
}
.app-nav.collapsed .app-nav-item-label,
.app-nav.collapsed .app-nav-soon {
  opacity: 0;
  width: 0;
  overflow: hidden;
  padding: 0;
}

/* Tooltip on collapsed items */
.app-nav.collapsed .app-nav-item:hover::after {
  content: attr(data-tip);
  position: absolute;
  left: calc(100% + 10px);
  top: 50%;
  transform: translateY(-50%);
  background: var(--app-surface-raised);
  border: 1px solid var(--app-border-strong);
  color: var(--app-text);
  font-size: 0.76rem;
  font-family: var(--font-sans);
  padding: 5px 10px;
  border-radius: var(--radius-md);
  white-space: nowrap;
  z-index: 200;
  pointer-events: none;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.4);
}

/* Horizontal rule inside the nav */
.app-nav-divider {
  height: 1px;
  background: var(--app-border);
  margin: 8px 12px;
  flex-shrink: 0;
}

/* Footer area of the sidebar */
.app-nav-footer {
  border-top: 1px solid var(--app-border);
  padding: 8px 0 6px;
  flex-shrink: 0;
}

/* Clinic name row at the bottom */
.app-nav-clinic-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 7px 12px;
  margin: 0 8px 2px;
  border-radius: var(--radius-md);
  white-space: nowrap;
  overflow: hidden;
}
.app-nav.collapsed .app-nav-clinic-row { justify-content: center; padding: 7px 0; }

.app-nav-clinic-icon {
  font-size: 0.85rem;
  width: 24px;
  text-align: center;
  flex-shrink: 0;
}
.app-nav-clinic-name {
  font-family: var(--font-mono);
  font-size: 0.68rem;
  color: var(--app-accent);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  transition: opacity var(--duration-base), width 0.25s;
}
.app-nav.collapsed .app-nav-clinic-name { opacity: 0; width: 0; }


/* Section headings inside app pages get a subtle gold underline */
.app-page h2, .app-page h3, .section-title {
  border-bottom: 1px solid var(--gold-border);
  padding-bottom: 8px;
}


/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   14. APP STAT CARDS
   Usage: <div class="app-stats-grid">
            <div class="app-stat-card">…</div>
          </div>
   ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */

.app-stats-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
}

.app-stat-card {
  background: var(--app-surface);
  border: 1px solid var(--gold-border);
  border-radius: var(--radius-lg);
  padding: 24px;
  position: relative;
  overflow: hidden;
  transition: border-color var(--duration-base) var(--ease-out);
}
.app-stat-card:hover { border-color: var(--app-border-strong); }

/* Bottom gradient accent line */
.app-stat-card::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 2px;
  background: linear-gradient(90deg, var(--app-accent), var(--app-accent-bright));
  opacity: 0.4;
}
.app-stat-card.highlight::after { opacity: 0.8; }

.app-stat-label {
  font-family: var(--font-mono);
  font-size: 0.6rem;
  letter-spacing: var(--tracking-wider);
  text-transform: uppercase;
  color: var(--app-text-muted);
  margin-bottom: 12px;
}
.app-stat-num {
  font-family: var(--font-mono);
  font-size: 2.4rem;
  font-weight: 500;
  color: var(--app-accent-light);
  line-height: 1;
  letter-spacing: var(--tracking-tight);
}
.app-stat-card.highlight .app-stat-num { color: var(--app-accent-bright); }
.app-stat-sub {
  font-family: var(--font-mono);
  font-size: 0.68rem;
  color: var(--app-text-muted);
  margin-top: 8px;
}


/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   15. APP LAYOUT GRIDS
   ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */

.app-grid-2   { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
.app-grid-3-1 { display: grid; grid-template-columns: 2fr 1fr; gap: 20px; }
.app-grid-3   { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }


/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   16. APP PANELS
   Usage: <div class="app-panel">
            <div class="app-panel-head">
              <span class="app-panel-title">Title</span>
              <span class="app-panel-badge">badge</span>
            </div>
            <div class="app-panel-body">…</div>
          </div>
   ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */

.app-panel {
  background: var(--app-surface);
  border: 1px solid var(--gold-border);
  border-radius: var(--radius-lg);
  overflow: hidden;
}

.app-panel-head {
  padding: 18px 24px;
  border-bottom: 1px solid var(--app-border);
  background: var(--app-surface-raised);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.app-panel-title {
  font-family: var(--font-mono);
  font-size: 0.65rem;
  letter-spacing: var(--tracking-wider);
  text-transform: uppercase;
  color: var(--app-text-muted);
  font-weight: 600;
}

.app-panel-badge {
  font-family: var(--font-mono);
  font-size: 0.62rem;
  color: var(--app-accent);
  background: rgba(201, 168, 76, 0.08);
  border: 1px solid rgba(201, 168, 76, 0.2);
  padding: 2px 8px;
  border-radius: var(--radius-full);
}

.app-panel-body { padding: 0; }

/* Empty / loading state inside a panel */
.app-panel-empty {
  padding: 40px 24px;
  text-align: center;
  font-family: var(--font-mono);
  font-size: 0.78rem;
  color: var(--app-text-muted);
}


/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   17. DATA TABLE
   Usage: <div class="app-table-wrap"><table class="data-table">…</table></div>
   ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */

.app-table-wrap { overflow-x: auto; }

.data-table {
  width: 100%;
  border-collapse: collapse;
  font-family: var(--font-mono);
  font-size: 0.78rem;
  white-space: nowrap;
}

.data-table th {
  text-align: left;
  color: var(--app-text-muted);
  font-weight: 600;
  font-size: 0.6rem;
  letter-spacing: var(--tracking-wider);
  text-transform: uppercase;
  padding: 12px 20px;
  border-bottom: 2px solid var(--gold-border);
  background: var(--app-surface-raised);
}

.data-table td {
  padding: 11px 20px;
  border-bottom: 1px solid var(--app-border);
  color: var(--app-text);
}

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

.data-table tbody tr { transition: background var(--duration-fast); }
.data-table tbody tr:hover { background: rgba(201, 168, 76, 0.02); }

/* Semantic column color helpers */
.td-primary   { color: var(--app-accent-light); font-weight: 500; }
.td-accent    { color: var(--app-accent); }
.td-green     { color: var(--app-green-light); }
.td-muted     { color: var(--app-text-muted); font-size: 0.68rem; }
.td-danger    { color: var(--color-error); }

/* Legacy aliases used in existing pages */
.td-drug      { color: var(--app-accent-light); font-weight: 500; }
.td-dose      { color: var(--app-accent); }
.td-sp        { color: var(--app-green-light); }
.td-time      { color: var(--app-text-muted); font-size: 0.68rem; }
.td-weight    { color: var(--app-text); }


/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   18. CHART / RANKING COMPONENTS
   ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */

/* ── Ranked list (e.g. top drugs) */
.rank-list { padding: 6px 0; }

.rank-item {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 10px 24px;
  border-bottom: 1px solid var(--app-border);
  transition: background var(--duration-fast);
}
.rank-item:last-child { border-bottom: none; }
.rank-item:hover { background: rgba(201, 168, 76, 0.02); }

.rank-num {
  font-family: var(--font-mono);
  font-size: 0.62rem;
  color: var(--app-surface-active);
  width: 18px;
  text-align: right;
  flex-shrink: 0;
}
.rank-content { flex: 1; display: flex; flex-direction: column; gap: 5px; }
.rank-name { font-size: 0.85rem; color: var(--app-text); }

.rank-bar-bg {
  height: 3px;
  background: var(--app-surface-raised);
  border-radius: var(--radius-full);
  overflow: hidden;
}
.rank-bar {
  height: 100%;
  background: linear-gradient(90deg, var(--app-accent), var(--app-accent-bright));
  border-radius: var(--radius-full);
  transition: width 0.8s var(--ease-out);
}

.rank-count {
  font-family: var(--font-mono);
  font-size: 0.75rem;
  color: var(--app-accent);
  flex-shrink: 0;
  min-width: 24px;
  text-align: right;
}

/* ── Species breakdown list */
.sp-list { padding: 6px 0; }

.sp-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 11px 24px;
  border-bottom: 1px solid var(--app-border);
}
.sp-item:last-child { border-bottom: none; }

.sp-icon { font-size: 1.1rem; flex-shrink: 0; }
.sp-name { font-size: 0.85rem; color: var(--app-text); flex: 1; }

.sp-bar-bg {
  width: 90px;
  height: 3px;
  background: var(--app-surface-raised);
  border-radius: var(--radius-full);
  overflow: hidden;
  flex-shrink: 0;
}
.sp-bar {
  height: 100%;
  background: var(--app-green);
  border-radius: var(--radius-full);
  transition: width 0.8s var(--ease-out);
}
.sp-count {
  font-family: var(--font-mono);
  font-size: 0.75rem;
  color: var(--app-green-light);
  min-width: 28px;
  text-align: right;
  flex-shrink: 0;
}

/* ── Activity feed */
.activity-list { padding: 6px 0; }

.activity-item {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 12px 24px;
  border-bottom: 1px solid var(--app-border);
}
.activity-item:last-child { border-bottom: none; }

.activity-dot {
  width: 7px;
  height: 7px;
  border-radius: var(--radius-full);
  background: var(--app-accent);
  flex-shrink: 0;
  opacity: 0.6;
}
.activity-text {
  font-size: 0.83rem;
  color: var(--app-text);
  flex: 1;
  line-height: var(--leading-snug);
}
.activity-text strong { color: var(--app-accent-light); font-weight: 500; }
.activity-time {
  font-family: var(--font-mono);
  font-size: 0.65rem;
  color: var(--app-text-muted);
  flex-shrink: 0;
}


/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   19. APP SPINNER
   Usage: <span class="app-spinner"></span>
   ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */

@keyframes spin { to { transform: rotate(360deg); } }

.app-spinner {
  display: inline-block;
  width: 14px;
  height: 14px;
  border: 2px solid var(--app-border-strong);
  border-top-color: var(--app-accent);
  border-radius: var(--radius-full);
  animation: spin 0.7s linear infinite;
  margin-right: 8px;
  vertical-align: middle;
}


/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   20. APP FORM COMPONENTS (dark context)
   ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */

/* Dark-context input field */
.app-field {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.app-field-label {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  letter-spacing: var(--tracking-widest);
  text-transform: uppercase;
  color: var(--app-text-muted);
  font-weight: 600;
}

.app-field-input,
.app-field-select {
  width: 100%;
  background: var(--app-surface-raised);
  border: 1px solid var(--app-border-strong);
  border-radius: var(--radius-md);
  padding: var(--space-3) var(--space-4);
  color: var(--app-text);
  font-family: var(--font-sans);
  font-size: var(--text-sm);
  appearance: none;
  transition: border-color var(--duration-base) var(--ease-out),
              box-shadow   var(--duration-base) var(--ease-out);
}
.app-field-input::placeholder { color: var(--app-text-muted); opacity: 0.65; }
.app-field-input:focus,
.app-field-select:focus {
  border-color: var(--app-accent);
  box-shadow: 0 0 0 3px rgba(201, 168, 76, 0.15);
  outline: none;
}

/* App-context badge (for status labels in tables/panels) */
.app-badge {
  display: inline-flex;
  align-items: center;
  padding: 2px 8px;
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  font-weight: 500;
  border-radius: var(--radius-full);
  background: rgba(201, 168, 76, 0.1);
  color: var(--app-accent-light);
  border: 1px solid var(--app-border-strong);
  letter-spacing: var(--tracking-wide);
}
.app-badge-green {
  background: rgba(102, 154, 93, 0.15);
  color: var(--app-green-light);
  border-color: rgba(102, 154, 93, 0.25);
}
.app-badge-danger {
  background: rgba(180, 55, 38, 0.12);
  color: #e0786a;
  border-color: rgba(180, 55, 38, 0.25);
}

/* App-context alert inline */
.app-alert {
  padding: var(--space-3) var(--space-4);
  border-radius: var(--radius-md);
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  display: none;
}
.app-alert.visible { display: block; }
.app-alert-error {
  background: rgba(180, 55, 38, 0.1);
  border: 1px solid rgba(180, 55, 38, 0.25);
  color: #e0786a;
}
.app-alert-success {
  background: rgba(102, 154, 93, 0.1);
  border: 1px solid rgba(102, 154, 93, 0.25);
  color: var(--app-green-light);
}


/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   21. APP RESPONSIVE
   ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */

@media (max-width: 1000px) {
  .app-stats-grid   { grid-template-columns: repeat(2, 1fr); }
  .app-grid-3-1     { grid-template-columns: 1fr; }
  .app-grid-2       { grid-template-columns: 1fr; }
}

@media (max-width: 768px) {
  .app-nav          { display: none; }
  .app-page         { padding: 24px 20px; }
}

@media (max-width: 600px) {
  .app-page         { padding: 20px 16px; gap: 20px; }
  .app-stats-grid   { grid-template-columns: 1fr 1fr; }
}