/* ═══════════════════════════════════════════════
   ALP PLATFORM — Enterprise Skin v1
   Design tokens + shared components from
   .claude/design/alp-crm-design-system.md.
   Load this AFTER every other stylesheet on the page —
   it deliberately overrides the per-module .btn-primary/
   .btn-secondary/.chip etc. rules that exist today via
   plain CSS cascade order, not specificity hacks.
   Reference: .claude/design/alp-crm-demo.html
   ═══════════════════════════════════════════════ */

:root{
  /* Brand chrome */
  --navy:#19223D;
  --navy-2:#222D4F;
  --blue:#22327D;
  --blue-soft:#E9EDF8;

  /* Canvas and surfaces */
  --bg:#F2F4F7;
  --surface:#FFFFFF;
  --border:#D8DDE6;
  --border-strong:#C3CAD6;

  /* Text */
  --text:#1F2733;
  --muted:#5B6472;
  --link:#22327D;

  /* Functional status only (RAG). Never decorative. */
  --green:#2E7D32;
  --amber:#B7791F;
  --red:#B3362B;

  --radius:6px;
}

body{
  font-family: Calibri, 'Segoe UI', Arial, sans-serif;
  font-size: 13px;
  color: var(--text);
}

/* ══════════════════════════════════════════════════════════
   Legacy variable remap — every module CSS file (taskboard.css,
   crm.css, tickets.css, etc — ~20 files) already uses a shared set
   of CSS custom property NAMES pervasively (thousands of call
   sites: var(--text-primary), var(--bg-secondary), var(--gold), …).
   Since enterprise.css loads last on every page, overriding those
   same names here re-colors every existing card/table/badge/button
   to the Enterprise Skin palette without editing each module file
   individually. This is the mechanism for "site-wide", not just
   the shell. Genuinely NEW components the old palette never had
   (metric strip, record chevron path, etc.) still need real markup
   changes per module — this only recolors what already exists.
   ══════════════════════════════════════════════════════════ */
:root{
  --text-primary: var(--text);
  --text-secondary: var(--muted);
  --text-muted: var(--muted);
  --text-dim: var(--muted);
  --text-tertiary: var(--muted);
  --text-inverse: #fff;
  --dim: var(--muted);

  --bg-primary: var(--bg);
  --bg-secondary: var(--surface);
  --bg-tertiary: #F7F8FA;
  --bg-input: #fff;
  --bg-hover: #EFF1F5;
  --bg-active: var(--blue-soft);
  --bg-overlay: rgba(25,34,61,.45);
  --bg2: var(--surface);
  --bg3: #F7F8FA;
  --bg-code: #F7F8FA;
  --panel-bg: var(--surface);
  --surface-alt: #F7F8FA;
  --sidebar-bg: var(--surface);
  --row-hover: #F5F7FB;

  --border-primary: var(--border);
  --border-subtle: var(--border);
  --border-secondary: var(--border);
  --border-focus: var(--blue);
  --border-active: var(--blue);
  --sidebar-border: var(--border);

  --blue2: var(--blue);
  --blue-dark: #1B2864;
  --blue-subtle: var(--blue-soft);
  --accent: var(--blue);
  --accent-glow: rgba(34,50,125,.15);
  --ac: var(--blue);

  --green-subtle: #E8F2E9;
  --gold: var(--amber);
  --orange: var(--amber);
  --purple: var(--blue);
  --cyan: var(--blue);

  --card-blue-bg: var(--blue-soft);
  --card-green-bg: #E8F2E9;
  --card-red-bg: #F9E7E5;
  --card-gold-bg: #FDF3E1;

  --sev-low-bg: #E8F2E9;
  --sev-high-bg: #FDF3E1;
  --sev-critical-bg: #F9E7E5;

  /* Spec: no drop shadows on resting elements */
  --panel-shadow: none;
  --panel-shadow-lg: none;
  --shadow: none;

  --scrollbar-thumb: #C9CFDA;
  --scrollbar-track: transparent;
  --track-bg: #EDF0F5;
}

h1{ font-size:19px; font-weight:bold; color:var(--navy); }

/* ── Buttons — retargets the existing .btn-primary/.btn-secondary/
   .btn-icon/.btn-danger/.btn-sm classes already used across every
   module rather than renaming them. ── */
.btn-primary{
  display:inline-flex; align-items:center; gap:6px;
  padding:6px 14px; border-radius:var(--radius); border:1px solid var(--blue);
  background:var(--blue); color:#fff;
  font-size:13px; font-weight:bold; cursor:pointer; font-family:inherit;
  transition:background .12s;
}
.btn-primary:hover{ background:#1B2864; opacity:1; transform:none; }

.btn-secondary{
  display:inline-flex; align-items:center; gap:6px;
  padding:6px 14px; border-radius:var(--radius);
  border:1px solid var(--border-strong); background:var(--surface);
  color:var(--blue); font-size:13px; font-weight:bold;
  cursor:pointer; font-family:inherit; transition:background .12s;
}
.btn-secondary:hover{ background:var(--blue-soft); border-color:var(--border-strong); color:var(--blue); transform:none; }

.btn-icon{
  display:inline-flex; align-items:center; justify-content:center;
  width:32px; height:32px; border-radius:4px; border:none;
  background:transparent; color:var(--muted); cursor:pointer; font-size:15px;
  transition:background .12s;
}
.btn-icon:hover{ background:#EFF1F5; color:var(--text); }

.btn-danger{
  display:inline-flex; align-items:center; gap:6px;
  padding:6px 14px; border-radius:var(--radius); border:1px solid var(--red);
  background:var(--red); color:#fff;
  font-size:13px; font-weight:bold; cursor:pointer; font-family:inherit;
  transition:background .12s;
}
.btn-danger:hover{ background:#8E2B22; }

.btn-primary.btn-sm, .btn-secondary.btn-sm, .btn-danger.btn-sm{ padding:3px 10px; font-size:12px; }
.btn-ghost-sm{ background:transparent; border:1px solid transparent; color:var(--muted); font-weight:normal; padding:3px 10px; font-size:12px; border-radius:var(--radius); cursor:pointer; font-family:inherit; }
.btn-ghost-sm:hover{ background:#EFF1F5; color:var(--text); }

/* ── Chips — labels, categories, packages ── */
.chip{
  display:inline-block; padding:2px 9px; border-radius:11px;
  font-size:11.5px; font-weight:bold;
  border:1px solid var(--border); color:var(--muted); background:#F7F8FA;
}
.chip.blue{ background:var(--blue-soft); border-color:#C9D3EE; color:var(--blue); }
.chip.managed{ background:var(--blue); border-color:var(--blue); color:#fff; }
.chip.g{ background:#E8F2E9; border-color:#CBE3CD; color:var(--green); }
.chip.a{ background:#FDF3E1; border-color:#F0DCB4; color:var(--amber); }
.chip.r{ background:#F9E7E5; border-color:#EFC9C4; color:var(--red); }

/* ── Status dots and health text ── */
.dot{ display:inline-block; width:8px; height:8px; border-radius:50%; margin-right:6px; vertical-align:1px; }
.dot.g{ background:var(--green); } .dot.a{ background:var(--amber); } .dot.r{ background:var(--red); }
.dot.b{ background:var(--blue); } .dot.grey{ background:#9AA3B0; }
.health{ font-weight:bold; }
.health.g{ color:var(--green); } .health.a{ color:var(--amber); } .health.r{ color:var(--red); }

/* ── Cards ── */
.card{ background:var(--surface); border:1px solid var(--border); border-radius:var(--radius); overflow:hidden; box-shadow:none; }
.card-h{ padding:10px 14px; border-bottom:1px solid var(--border); display:flex; align-items:center; gap:8px; }
.card-h h3{ font-size:13px; font-weight:bold; color:var(--navy); }
.card-b{ padding:12px 14px; }