/* ============================================================
   APPARITURA — Bootstrap 5.3 theme (CDN drop-in)
   Ported verbatim from the claude.ai/design project
   "Apparitura logo and palette" (brand/apparitura-bootstrap.css).
   Loaded AFTER bootstrap.min.css (see fragments/layout.html).
   Palette inherits the Hanson Law firm greens + one product accent (Signal).
   No blue, no purple, no gradients.
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Libre+Franklin:wght@400;500;600;700&family=IBM+Plex+Mono:wght@400;500;600&display=swap');

:root {
  /* --- brand ramp --- */
  --ap-forest:   #0C3B11;   /* primary  */
  --ap-pine:     #275A2C;   /* secondary */
  --ap-sage:     #579C5E;   /* accent / info */
  --ap-signal:   #1FB85C;   /* success / live state */
  --ap-signal-deep:#13934A;
  --ap-green-950:#07260B;   /* dark */
  --ap-ink:      #16201A;   /* body text */
  --ap-paper:    #F7F5EF;   /* page surface */
  --ap-paper-deep:#EFECE2;
  --ap-white:    #FFFFFF;

  /* supporting status hues kept on-system (muted, low-chroma) */
  --ap-amber:    #B8860B;   /* warning */
  --ap-brick:    #9B3B2E;   /* danger  */

  /* ---- Bootstrap theme color tokens ---- */
  --bs-primary:   var(--ap-forest);
  --bs-secondary: var(--ap-pine);
  --bs-success:   var(--ap-signal);
  --bs-info:      var(--ap-sage);
  --bs-warning:   var(--ap-amber);
  --bs-danger:    var(--ap-brick);
  --bs-light:     var(--ap-paper);
  --bs-dark:      var(--ap-green-950);

  --bs-primary-rgb:   12, 59, 17;
  --bs-secondary-rgb: 39, 90, 44;
  --bs-success-rgb:   31, 184, 92;
  --bs-info-rgb:      87, 156, 94;
  --bs-warning-rgb:   184, 134, 11;
  --bs-danger-rgb:    155, 59, 46;
  --bs-light-rgb:     247, 245, 239;
  --bs-dark-rgb:      7, 38, 11;

  /* ---- surfaces & text ---- */
  --bs-body-bg:        var(--ap-paper);
  --bs-body-color:     var(--ap-ink);
  --bs-body-color-rgb: 22, 32, 26;
  --bs-emphasis-color: var(--ap-green-950);
  --bs-secondary-bg:   var(--ap-paper-deep);
  --bs-tertiary-bg:    #f1eee6;
  --bs-border-color:   #d8d4c8;

  /* ---- links ---- */
  --bs-link-color:        var(--ap-pine);
  --bs-link-color-rgb:    39, 90, 44;
  --bs-link-hover-color:  var(--ap-forest);
  --bs-link-hover-color-rgb: 12, 59, 17;

  /* ---- type ---- */
  --bs-font-sans-serif: 'Libre Franklin', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --bs-font-monospace:  'IBM Plex Mono', ui-monospace, SFMono-Regular, Menlo, monospace;
  --bs-body-font-family: var(--bs-font-sans-serif);

  /* ---- shape ---- */
  --bs-border-radius:    .375rem;
  --bs-border-radius-sm: .25rem;
  --bs-border-radius-lg: .5rem;
}

/* ============================================================
   DARK THEME — forest-tinted charcoal surfaces, signal-green
   accent. Overrides the :root surface/text/link tokens only;
   the brand ramp (--ap-*) is unchanged. Signal (#1FB85C) does
   double duty as link + live-state on dark — intentional.
   No blue, no purple, no gradients.
   ============================================================ */
[data-bs-theme="dark"] {
  /* ---- surfaces & text ---- */
  --bs-body-bg:        #0A1A0E;   /* forest-tinted charcoal, base surface */
  --bs-body-color:     #E7EBE3;   /* warm off-white; not pure #fff */
  --bs-body-color-rgb: 231, 235, 227;
  --bs-emphasis-color: #F3F6F0;   /* near-white for emphasis/headings */
  --bs-secondary-bg:   #10281A;   /* elevated surface (cards, fields, dropdowns) */
  --bs-tertiary-bg:    #14301F;
  --bs-border-color:   #25402B;   /* pine-tinted divider */

  /* ---- links (signal) ---- */
  --bs-link-color:        #1FB85C;
  --bs-link-color-rgb:    31, 184, 92;
  --bs-link-hover-color:  #4ED584;   /* lightened signal */
  --bs-link-hover-color-rgb: 78, 213, 132;
}

/* Display / headings — sans, in the firm's forest voice */
h1,h2,h3,.h1,.h2,.h3,.display-1,.display-2,.display-3,.display-4,.display-5,.display-6,.navbar-brand {
  font-family: var(--bs-font-sans-serif);
  letter-spacing: .02em;
  color: var(--ap-forest);
}
.text-muted { color: #6c7670 !important; }

/* ============================================================
   BUTTONS  — each variant drives Bootstrap's --bs-btn-* tokens
   ============================================================ */
.btn-primary {
  --bs-btn-bg: var(--ap-forest);            --bs-btn-border-color: var(--ap-forest);
  --bs-btn-hover-bg: var(--ap-green-950);   --bs-btn-hover-border-color: var(--ap-green-950);
  --bs-btn-active-bg: var(--ap-green-950);  --bs-btn-active-border-color: var(--ap-green-950);
  --bs-btn-disabled-bg: var(--ap-forest);   --bs-btn-disabled-border-color: var(--ap-forest);
  --bs-btn-color: var(--ap-paper);          --bs-btn-hover-color:#fff; --bs-btn-active-color:#fff; --bs-btn-disabled-color:var(--ap-paper);
}
.btn-secondary {
  --bs-btn-bg: var(--ap-pine);              --bs-btn-border-color: var(--ap-pine);
  --bs-btn-hover-bg: #1c4220;               --bs-btn-hover-border-color:#1c4220;
  --bs-btn-active-bg:#1c4220;               --bs-btn-active-border-color:#1c4220;
  --bs-btn-color:#fff; --bs-btn-hover-color:#fff;
}
.btn-success {
  --bs-btn-bg: var(--ap-signal);            --bs-btn-border-color: var(--ap-signal);
  --bs-btn-hover-bg: var(--ap-signal-deep); --bs-btn-hover-border-color: var(--ap-signal-deep);
  --bs-btn-active-bg: var(--ap-signal-deep);--bs-btn-active-border-color: var(--ap-signal-deep);
  --bs-btn-color:#04210F; --bs-btn-hover-color:#04210F; --bs-btn-active-color:#04210F; --bs-btn-disabled-color:#04210F;
}
.btn-info {
  --bs-btn-bg: var(--ap-sage);              --bs-btn-border-color: var(--ap-sage);
  --bs-btn-hover-bg:#4a8b51;                --bs-btn-hover-border-color:#4a8b51;
  --bs-btn-color:#04210F; --bs-btn-hover-color:#04210F;
}
.btn-dark {
  --bs-btn-bg: var(--ap-green-950);         --bs-btn-border-color: var(--ap-green-950);
  --bs-btn-hover-bg:#020f04;                --bs-btn-hover-border-color:#020f04;
}
.btn-light {
  --bs-btn-bg: var(--ap-white);             --bs-btn-border-color: var(--bs-border-color);
  --bs-btn-hover-bg: var(--ap-paper-deep);  --bs-btn-hover-border-color:#cfcabb;
  --bs-btn-color: var(--ap-forest); --bs-btn-hover-color: var(--ap-forest);
}
.btn-outline-primary {
  --bs-btn-bg: var(--ap-white);
  --bs-btn-color: var(--ap-forest);         --bs-btn-border-color: var(--ap-forest);
  --bs-btn-hover-bg: var(--ap-forest);      --bs-btn-hover-border-color: var(--ap-forest); --bs-btn-hover-color: var(--ap-paper);
  --bs-btn-active-bg: var(--ap-forest);     --bs-btn-active-border-color: var(--ap-forest);
}

.btn-outline-success {
  --bs-btn-bg: var(--ap-white);
  --bs-btn-color: var(--ap-signal-deep);    --bs-btn-border-color: var(--ap-signal);
  --bs-btn-hover-bg: var(--ap-signal);      --bs-btn-hover-border-color: var(--ap-signal); --bs-btn-hover-color:#04210F;
}

.btn-outline-info {
  --bs-btn-bg: var(--ap-white);              --bs-btn-border-color: var(--ap-sage);
  --bs-btn-hover-bg: var(--ap-sage);         --bs-btn-hover-border-color: var(--ap-sage);
  --bs-btn-active-bg: var(--ap-sage);        --bs-btn-hover-color: var(--ap-paper);
}

/* ============================================================
   FORMS, FOCUS RINGS, LINKS
   ============================================================ */
:root {
  --bs-focus-ring-color: rgba(31, 184, 92, .35);
}
/* Lift interactive fields off the cream page surface.
   Excludes :disabled / [readonly] so Bootstrap's muted
   --bs-secondary-bg still signals inert fields. */
.form-control:not(:disabled):not([readonly]),
.form-select:not(:disabled):not([readonly]),
.form-check-input:not(:disabled) {
  background-color: var(--ap-white);
}
.form-control:focus, .form-select:focus, .form-check-input:focus {
  border-color: var(--ap-sage);
  box-shadow: 0 0 0 .25rem rgba(31, 184, 92, .25);
}
.form-check-input:checked {
  background-color: var(--ap-forest);
  border-color: var(--ap-forest);
}
.form-range::-webkit-slider-thumb { background: var(--ap-signal); }
.form-range::-moz-range-thumb { background: var(--ap-signal); }

a { text-underline-offset: .15em; }

/* ============================================================
   NAVBAR / NAV
   ============================================================ */
.navbar-brand { font-weight: 600; letter-spacing: .06em; }
.navbar.bg-dark, .navbar[data-bs-theme="dark"] {
  background-color: var(--ap-forest) !important;
}
.nav-pills {
  --bs-nav-pills-link-active-bg: var(--ap-forest);
}
.nav-link { --bs-nav-link-color: var(--ap-pine); --bs-nav-link-hover-color: var(--ap-forest); }

/* ============================================================
   BADGES / ALERTS / PROGRESS
   ============================================================ */
.badge.text-bg-success { background-color: var(--ap-signal) !important; color:#04210F !important; }
.badge.text-bg-primary { background-color: var(--ap-forest) !important; }
.badge.text-bg-secondary{ background-color: var(--ap-pine) !important; }

.alert-success { --bs-alert-color:#0e5e30; --bs-alert-bg:#e3f5ea; --bs-alert-border-color:#b9e6cb; }
.alert-primary { --bs-alert-color:#0c3b11; --bs-alert-bg:#e6efe7; --bs-alert-border-color:#c4dcc6; }

.progress { --bs-progress-bg: var(--ap-paper-deep); }
.progress-bar { background-color: var(--ap-signal); }

/* ============================================================
   CARDS / TABLES / LIST GROUPS / SURFACES
   ============================================================ */
.card { --bs-card-border-color: var(--bs-border-color); --bs-card-cap-bg: var(--ap-paper); }
.table { --bs-table-hover-bg: rgba(87,156,94,.07); }
.list-group { --bs-list-group-active-bg: var(--ap-forest); --bs-list-group-active-border-color: var(--ap-forest); }

.bg-primary-subtle   { background-color:#e6efe7 !important; }
.bg-success-subtle   { background-color:#e3f5ea !important; }
.text-primary        { color: var(--ap-forest) !important; }
.text-success        { color: var(--ap-signal-deep) !important; }

/* live-status pill, the brand's signature object */
.ap-runpill {
  display:inline-flex; align-items:center; gap:.5rem;
  font-family: var(--bs-font-monospace); font-size:.8rem;
  color: var(--ap-signal-deep); background:#eafaf0;
  border:1px solid var(--ap-signal); border-radius:999px; padding:.375rem .75rem;
}
.ap-runpill .dot{ width:.5rem; height:.5rem; border-radius:50%; background:var(--ap-signal);
  animation: ap-pulse 1.6s ease-in-out infinite; }
@keyframes ap-pulse { 0%,100%{ box-shadow:0 0 0 0 rgba(31,184,92,.6);} 50%{ box-shadow:0 0 0 .35rem rgba(31,184,92,0);} }

/* ============================================================
   DARK THEME — component overrides
   Flip every hardcoded light fill (var(--ap-white)/--ap-paper,
   light alert/subtle slabs, forced forest headings) to the
   forest-charcoal + signal palette so text reads light-on-dark.
   Green-bg components (.btn-primary/.btn-secondary/.btn-success,
   .text-bg-* badges, .navbar.bg-dark) already carry light text
   and are intentionally left untouched.
   ============================================================ */

/* Headings: :root forces color:var(--ap-forest), invisible on dark.
   Use a light sage-tinted heading color to keep the forest voice. */
[data-bs-theme="dark"] h1,
[data-bs-theme="dark"] h2,
[data-bs-theme="dark"] h3,
[data-bs-theme="dark"] .h1,
[data-bs-theme="dark"] .h2,
[data-bs-theme="dark"] .h3,
[data-bs-theme="dark"] .display-1,
[data-bs-theme="dark"] .display-2,
[data-bs-theme="dark"] .display-3,
[data-bs-theme="dark"] .display-4,
[data-bs-theme="dark"] .display-5,
[data-bs-theme="dark"] .display-6,
[data-bs-theme="dark"] .navbar-brand {
  color: #DDE8DD;
}

/* Muted text: desaturated sage-grey (legible on charcoal). */
[data-bs-theme="dark"] .text-muted { color: #9BA79A !important; }

/* Form fields: were var(--ap-white). Flip to elevated surface with
   light text + pine border. Keep the disabled/readonly guard so
   Bootstrap's muted --bs-secondary-bg still signals inert fields. */
[data-bs-theme="dark"] .form-control:not(:disabled):not([readonly]),
[data-bs-theme="dark"] .form-select:not(:disabled):not([readonly]),
[data-bs-theme="dark"] .form-check-input:not(:disabled) {
  background-color: #10281A;
  color: #E7EBE3;
  border-color: var(--bs-border-color);
}
/* Checked box must read on dark — use signal fill. */
[data-bs-theme="dark"] .form-check-input:checked {
  background-color: #1FB85C;
  border-color: #1FB85C;
}

/* Outline buttons set --bs-btn-bg: var(--ap-white) (a white slab on
   dark). Make the fill transparent and the label a light green so
   the outline reads. Hover fills stay as defined in :root. */
[data-bs-theme="dark"] .btn-outline-primary {
  --bs-btn-bg: transparent;
  --bs-btn-color: #4ED584;
  --bs-btn-border-color: #4ED584;
  --bs-btn-hover-color: #04210F;
}
[data-bs-theme="dark"] .btn-outline-success {
  --bs-btn-bg: transparent;
  --bs-btn-color: #1FB85C;
  --bs-btn-border-color: #1FB85C;
}
[data-bs-theme="dark"] .btn-outline-info {
  --bs-btn-bg: transparent;
  --bs-btn-color: #7FBF86;
}

/* Alerts: light slabs → dark signal/forest washes, light text. */
[data-bs-theme="dark"] .alert-success {
  --bs-alert-color: #E7EBE3;
  --bs-alert-bg: rgba(31,184,92,.14);
  --bs-alert-border-color: rgba(31,184,92,.30);
}
[data-bs-theme="dark"] .alert-primary {
  --bs-alert-color: #E7EBE3;
  --bs-alert-bg: rgba(12,59,17,.35);
  --bs-alert-border-color: rgba(12,59,17,.30);
}

/* Cards: --bs-card-cap-bg was var(--ap-paper) (light). Give the
   body an elevated fill and the cap a slightly lighter tertiary. */
[data-bs-theme="dark"] .card {
  --bs-card-bg: #10281A;
  --bs-card-cap-bg: #14301F;
}

/* Subtle fills: light slabs → dark washes. */
[data-bs-theme="dark"] .bg-primary-subtle { background-color: rgba(12,59,17,.35) !important; }
[data-bs-theme="dark"] .bg-success-subtle { background-color: rgba(31,184,92,.14) !important; }

/* Utility text colors: forest / signal-deep are too dark on dark. */
[data-bs-theme="dark"] .text-primary { color: #4E9E57 !important; }
[data-bs-theme="dark"] .text-success { color: #1FB85C !important; }

/* Runpill: light bg → dark signal wash, lightened-signal text.
   Border, dot, and pulse animation carry over unchanged. */
[data-bs-theme="dark"] .ap-runpill {
  background: rgba(31,184,92,.14);
  color: #4ED584;
}

/* Nav tabs / pills: :root sets --bs-nav-link-color to pine/forest
   (near-black), invisible on charcoal, and .nav-tabs borders inherit
   the #25402B divider (too dark to see against the body). Flip the
   inactive label to a legible-but-secondary light sage-grey, lift the
   nav-tabs divider + active-tab outline to a visible pine, and give
   the active tab an elevated card-like surface with light text. */
[data-bs-theme="dark"] .nav-link {
  --bs-nav-link-color: #AFC3AC;          /* inactive: light sage-grey, clearly secondary */
  --bs-nav-link-hover-color: #4ED584;    /* lightened signal, echoes dark link-hover */
  --bs-nav-link-disabled-color: #6E7D6E; /* disabled/inline-styled tabs: dim but still legible */
}
[data-bs-theme="dark"] .nav-tabs {
  --bs-nav-tabs-border-color: #2F5238;              /* lifted pine — strip bottom border + inactive outlines */
  --bs-nav-tabs-link-active-color: #E7EBE3;         /* light, reads on the elevated tab */
  --bs-nav-tabs-link-active-bg: #10281A;            /* elevated surface — active tab lifts like a card */
  --bs-nav-tabs-link-active-border-color: #2F5238;  /* matching lifted-pine so the active outline shows */
  --bs-nav-tabs-link-hover-border-color: #2F5238;   /* hovering an inactive tab reveals its outline */
}
/* Bootstrap makes inactive tabs `border:1px solid transparent` — invisible on
   charcoal, so they read as floating text with no outline. Give inactive
   (available) tabs a resting pine outline so they look like tabs. Disabled
   tabs are intentionally excluded — they stay borderless/inert. */
[data-bs-theme="dark"] .nav-tabs .nav-link:not(.active):not(.disabled) {
  border-color: #26492F;
}
[data-bs-theme="dark"] .nav-pills {
  --bs-nav-pills-link-active-color: #E7EBE3;  /* forest-bg pill keeps light text on dark */
}