/* =====================================================================
   BIRDC ERP — Authored Design System (anti-slop layer)  v2
   ---------------------------------------------------------------------
   Single source of truth for typography, colour, spacing, interaction
   states, motion and the accessibility floor. Loaded AFTER tabler/demo
   so its tokens win the cascade; it re-maps Tabler's own CSS variables
   so every stock component inherits the authored identity with no page
   edits. Synthesised from the design-system-skills engine (Anti-Slop
   Charter): font-selection, accessible-color-and-contrast,
   component-states, type-scale, error-empty-messaging, WCAG 2.2 + CWV.

     Display / headings ....... Spectral        (serif, authored)
     Body / UI ................ IBM Plex Sans    (engineered workhorse)
     Numerics / data / code ... IBM Plex Mono    (tabular figures)
     Brand .................... matooke green #15663a (AA+AAA on white)
   ===================================================================== */

/* ====================================================================
   1. TOKENS
   ==================================================================== */
:root {
  /* ---- Brand green scale (anchor #15663a at 700; hue held ~155deg) ---- */
  --app-green-50:  #eef6f1;
  --app-green-100: #d3e8dc;
  --app-green-200: #a9d2bb;
  --app-green-300: #76b693;
  --app-green-400: #45986d;
  --app-green-500: #1f8f4d;   /* decorative fills/borders (non-text) */
  --app-green-600: #1a7745;   /* hover */
  --app-green-700: #15663a;   /* PRIMARY — text on white ~7:1 (AA+AAA) */
  --app-green-800: #114e2d;
  --app-green-900: #0c3a22;   /* forest ink — headings */

  /* ---- Warm tinted neutrals (no pure #000/#fff/#808080) ---- */
  --app-canvas:    #f7f8f6;   /* app background (~60%) */
  --app-surface:   #fdfdfc;   /* cards / panels */
  --app-surface-2: #eef0ec;   /* sunken / striped rows */
  --app-line:      #d9ddd6;   /* hairlines */
  --app-line-strong:#bcc2b8;
  --app-muted:     #5c6358;   /* secondary text — ~6:1 */
  --app-ink:       #1d231c;   /* primary text — ~15:1, not pure black */

  /* ---- Semantic colours: fill / text-on-white (AA) / subtle bg ---- */
  --app-success:#1a7a45; --app-success-text:#136b3a; --app-success-bg:#e7f4ec;
  --app-warning:#c9870a; --app-warning-text:#8a5a00; --app-warning-bg:#fbf1dc;
  --app-danger: #c5362b; --app-danger-text: #b02a21; --app-danger-bg: #fbeae8;
  --app-info:   #1f6fb2; --app-info-text:   #1a5e96; --app-info-bg:   #e6f1fa;
  --app-gold-600:#b8860b; --app-gold-050:#fbf3dd;   /* ripe-matooke accent, never body text */

  /* ---- Type families ---- */
  --app-font-display: 'Spectral', Georgia, 'Times New Roman', serif;
  --app-font-body: 'IBM Plex Sans', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --app-font-mono: 'IBM Plex Mono', ui-monospace, SFMono-Regular, Menlo, monospace;

  /* ---- Modular type scale (base 15px, ratio 1.25; root stays 16px) ---- */
  --fs-caption: 0.75rem;   --lh-caption: 1.45;
  --fs-small:   0.8125rem; --lh-small:   1.5;
  --fs-body:    0.9375rem; --lh-body:    1.55;
  --fs-body-lg: 1.0625rem; --lh-body-lg: 1.5;
  --fs-h4:      1.1875rem; --lh-h4:      1.35;
  --fs-h3:      1.4375rem; --lh-h3:      1.3;
  --fs-h2:      1.8125rem; --lh-h2:      1.2;
  --fs-h1:      2.25rem;   --lh-h1:      1.15;
  --fs-display: 2.8125rem; --lh-display: 1.1;
  --measure: 70ch;

  /* ---- 8pt spacing scale ---- */
  --app-space-1:.25rem; --app-space-2:.5rem;  --app-space-3:.75rem; --app-space-4:1rem;
  --app-space-5:1.5rem; --app-space-6:2rem;   --app-space-7:2.5rem; --app-space-8:3rem;
  --app-space-9:4rem;   --app-space-10:5rem;
  --app-radius: .6rem;

  /* ---- Elevation (tinted green-black shadow, never pure black) ---- */
  --elev-0: none;
  --elev-1: 0 1px 2px rgba(20,40,25,.08), 0 1px 1px rgba(20,40,25,.04);
  --elev-2: 0 4px 10px rgba(20,40,25,.10), 0 1px 3px rgba(20,40,25,.06);
  --elev-3: 0 12px 24px rgba(20,40,25,.14), 0 4px 8px rgba(20,40,25,.08);

  /* ---- Motion (no bounce/elastic) ---- */
  --dur-fast: 120ms; --dur-base: 200ms; --dur-slow: 320ms;
  --ease-out: cubic-bezier(.22,.61,.36,1);
  --ease-in:  cubic-bezier(.4,0,1,1);
  --c-ring: rgba(21,102,58,.45);
  --sticky-h: 64px;   /* navbar height for focus-not-obscured */

  /* ====  Re-map Tabler's own variables so stock components inherit  ==== */
  --tblr-font-sans-serif: var(--app-font-body);
  --tblr-font-monospace: var(--app-font-mono);
  --tblr-primary: var(--app-green-700);
  --tblr-primary-rgb: 21, 102, 58;
  --tblr-green: var(--app-green-700);
  --tblr-green-rgb: 21, 102, 58;
  --tblr-body-color: var(--app-ink);
  --tblr-body-bg: var(--app-canvas);
  --tblr-border-color: var(--app-line);
  --tblr-link-color: var(--app-green-700);
  --tblr-link-hover-color: var(--app-green-900);
}

/* ====================================================================
   2. BASE TYPE & HEADINGS
   ==================================================================== */
body {
  font-family: var(--app-font-body);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  color: var(--app-ink);
  background: var(--app-canvas);
  font-feature-settings: "kern", "liga";
}

h1,h2,h3,h4,.h1,.h2,.h3,.h4,
.page-title,.card-title,.navbar-brand,.empty-title {
  font-family: var(--app-font-display);
  letter-spacing: -0.01em;
  color: var(--app-green-900);
}
h1,.h1,.page-title { font-size: var(--fs-h1); line-height: var(--lh-h1); font-weight: 700; }
h2,.h2            { font-size: var(--fs-h2); line-height: var(--lh-h2); font-weight: 700; }
h3,.h3            { font-size: var(--fs-h3); line-height: var(--lh-h3); font-weight: 600; }
h4,.h4,.card-title{ font-size: var(--fs-h4); line-height: var(--lh-h4); font-weight: 600; }
.text-secondary,.small,small { color: var(--app-muted); }

/* Constrain prose measure; tables/dashboards exempt */
p.prose, .prose p, .card-text.measured { max-width: var(--measure); }

/* Numerics: tabular mono for money, quantities, KPIs */
.num,.text-num,.metric,
td.text-end,.table tfoot td,
.display-1,.display-2 {
  font-family: var(--app-font-mono);
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum","zero";
}

/* ====================================================================
   3. COLOUR — brand + semantic, contrast-correct
   ==================================================================== */
.btn-primary,.btn-success,.btn-green {
  --tblr-btn-bg: var(--app-green-700);
  --tblr-btn-border-color: var(--app-green-700);
  --tblr-btn-hover-bg: var(--app-green-600);
  --tblr-btn-hover-border-color: var(--app-green-600);
  --tblr-btn-active-bg: var(--app-green-900);
  background-color: var(--app-green-700);
  border-color: var(--app-green-700);
  color: #fff;
}
.text-primary,.text-green { color: var(--app-green-700) !important; }
.bg-primary,.bg-green { background-color: var(--app-green-700) !important; color:#fff !important; }
a { color: var(--app-green-700); text-underline-offset: 2px; }
a:hover { color: var(--app-green-900); text-decoration-thickness: 2px; }

/* Status badges — AA-passing fills with white text (was #2fb344 ~2.6:1) */
.badge.bg-green,.badge.bg-primary,.badge.bg-success { background-color: var(--app-success) !important; color:#fff !important; }
.badge.bg-warning { background-color: var(--app-warning) !important; color:#fff !important; }
.badge.bg-danger  { background-color: var(--app-danger)  !important; color:#fff !important; }
.badge.bg-info    { background-color: var(--app-info)    !important; color:#fff !important; }

/* Semantic alert/subtle surfaces */
.alert-success,.bg-success-subtle { background: var(--app-success-bg); color: var(--app-success-text); }
.alert-warning,.bg-warning-subtle { background: var(--app-warning-bg); color: var(--app-warning-text); }
.alert-danger,.bg-danger-subtle   { background: var(--app-danger-bg);  color: var(--app-danger-text); }
.alert-info,.bg-info-subtle       { background: var(--app-info-bg);    color: var(--app-info-text); }

.text-accent { color: var(--app-gold-600) !important; }
.bg-accent-subtle { background: var(--app-gold-050); }

/* ====================================================================
   4. INTERACTION STATES (8 canonical) + ELEVATION
   ==================================================================== */
.btn,.form-control,.form-select,.card {
  transition: background-color var(--dur-fast) var(--ease-out),
              box-shadow var(--dur-fast) var(--ease-out),
              transform var(--dur-fast) var(--ease-out),
              border-color var(--dur-fast) var(--ease-out);
}
.btn-primary { box-shadow: var(--elev-1); }
.btn-primary:hover { background-color: var(--app-green-600); border-color: var(--app-green-600); box-shadow: var(--elev-2); }
.btn-primary:active { background-color: var(--app-green-900); transform: translateY(1px); box-shadow: var(--elev-1); }
.btn:disabled,.btn.disabled,.form-control:disabled { opacity:.5; cursor:not-allowed; box-shadow:none; }

/* Loading button: add .is-loading + aria-busy="true" */
.btn.is-loading { color: transparent !important; pointer-events: none; position: relative; }
.btn.is-loading::after {
  content:""; position:absolute; width:1em; height:1em; top:calc(50% - .5em); left:calc(50% - .5em);
  border:2px solid #fff; border-right-color:transparent; border-radius:50%;
  animation: app-spin .6s linear infinite;
}
@keyframes app-spin { to { transform: rotate(360deg); } }

/* Form validation — paired with icon/text, never colour alone */
.form-control.is-invalid,.form-select.is-invalid { border-color: var(--app-danger); box-shadow: 0 0 0 3px rgba(197,54,43,.18); }
.form-control.is-valid { border-color: var(--app-success); }
.form-control:focus,.form-select:focus { border-color: var(--app-green-600); box-shadow: 0 0 0 3px var(--c-ring); }

.card { box-shadow: var(--elev-1); border-color: var(--app-line); border-radius: var(--app-radius); }
.card.is-interactive:hover { box-shadow: var(--elev-2); transform: translateY(-2px); }

/* ====================================================================
   5. ACCESSIBILITY FLOOR (WCAG 2.2 AA)
   ==================================================================== */
/* Target size 2.5.8 — comfortable 44px; small/table buttons keep >=24px */
.btn,.form-control,.form-select,.page-link { min-height: 44px; }
.btn-sm,.table .btn,.btn-icon,.btn-group-sm > .btn {
  min-height: 28px; min-width: 28px;
  display: inline-flex; align-items: center; justify-content: center;
}

/* Visible focus 2.4.7 — never removed; mouse clicks stay clean */
:where(a,button,.btn,.form-control,.form-select,.form-check-input,.page-link,[tabindex]):focus-visible {
  outline: 3px solid var(--app-green-500);
  outline-offset: 2px;
  border-radius: 3px;
}
*:focus:not(:focus-visible) { outline: none; }

/* Icon action-links (e.g. password-visibility toggles) meet 2.5.8 target size */
.input-group .link-secondary,
a.link-secondary[title] {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 24px; min-height: 24px;
}

/* Focus not obscured by sticky navbar 2.4.11 */
html { scroll-padding-top: var(--sticky-h); }
:target { scroll-margin-top: var(--sticky-h); }

/* Skip-to-content link (target injected in foot.php) */
.skip-link {
  position: absolute; left: -9999px; top: 0; z-index: 2000;
  background: var(--app-green-900); color: #fff;
  padding: .6rem 1rem; border-radius: 0 0 6px 0; font-weight: 600;
}
.skip-link:focus { left: 0; }

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
  *,*::before,*::after {
    animation-duration:.01ms !important; animation-iteration-count:1 !important;
    transition-duration:.01ms !important; scroll-behavior:auto !important;
  }
  .btn:active,.card.is-interactive:hover { transform: none; }
}

/* ====================================================================
   6. SURFACE POLISH + EMPTY/LOADING HELPERS
   ==================================================================== */
.empty-title { color: var(--app-green-900); }
.empty-icon { color: var(--app-green-500); }
.skeleton { min-height: 1.2em; border-radius: 4px; background: var(--app-surface-2); }
/* Prevent CLS: media must reserve space (set width/height attrs too) */
img,video,iframe { max-width: 100%; height: auto; }
/* Utility used by the inline-style->utility migration (Bootstrap lacks it) */
.cursor-pointer { cursor: pointer; }

/* ====================================================================
   7. TAME STRAY TABLER ACCENT UTILITIES -> brand token system
   (neutralises ~218 bg-azure/bg-blue/text-azure occurrences app-wide
    without editing pages — the brand is green, blue is template leakage)
   ==================================================================== */
.bg-blue,.bg-azure,.bg-indigo { background-color: var(--app-green-700) !important; color:#fff !important; }
.bg-blue-lt,.bg-azure-lt,.bg-indigo-lt { background-color: var(--app-green-50) !important; color: var(--app-green-900) !important; }
.text-blue,.text-azure,.text-indigo { color: var(--app-green-700) !important; }
.badge.bg-azure,.badge.bg-blue { background-color: var(--app-green-700) !important; color:#fff !important; }

/* Fix common page-local sub-AA status colours (e.g. #28a745 green ~2.6:1) */
.variance-positive,.text-success.fw-bold,.amount-positive { color: var(--app-success-text) !important; }
.variance-negative,.amount-negative { color: var(--app-danger-text) !important; }

/* ====================================================================
   8. DATATABLES widgets -> tokenised + comfortable target sizes
   ==================================================================== */
.dataTables_wrapper .dataTables_filter input {
  min-height: 38px; border: 1px solid var(--app-line); border-radius: .4rem; padding: .25rem .6rem;
}
.dataTables_wrapper .dataTables_length select { min-height: 38px; border-color: var(--app-line); }
.dataTables_wrapper .dataTables_paginate .paginate_button {
  min-height: 36px; min-width: 36px; display: inline-flex; align-items: center; justify-content: center;
}
.dataTables_wrapper .dataTables_paginate .paginate_button.current {
  background: var(--app-green-700) !important; border-color: var(--app-green-700) !important; color:#fff !important;
}