/* SageDocs — design-system tokens and component classes. Values are lifted from the SageDocs app (PrimeNG Lara preset with the v7 green ramp, Figtree type, zinc neutrals). This file is the source of truth for the system's look; see readme.md. */
@import url('https://fonts.googleapis.com/css2?family=Figtree:ital,wght@0,400;0,500;0,600;0,700;1,400&display=swap');

:root {
  /* — roles — */
  --color-bg: #fbfbfc;          /* app canvas / page ground */
  --color-surface: #ffffff;     /* raised cards, panels, table body */
  --color-surface-sunken: #f7f8f9; /* sidebar, sub-headers */
  --color-surface-hover: #f4f4f6;
  --color-text: #18181b;
  --color-text-muted: #52525b;
  --color-text-subtle: #71717a;
  --color-text-faint: #a1a1aa;
  --color-accent: #12a150;      /* SageDocs green — the single brand action color */
  --color-accent-2: #0ea5e9;    /* supporting informational accent */
  --color-ink: #084b27;         /* deepest green — marketing slabs, deck grounds */
  --color-divider: #ececef;
  --color-border: #e2e2e6;

  /* — green ramp: the app's PrimeNG primary, unchanged — */
  --color-accent-50:  #e9f7ef;
  --color-accent-100: #c9ebd8;
  --color-accent-200: #a9e0c3;
  --color-accent-300: #79cfa1;
  --color-accent-400: #3fb87e;
  --color-accent-500: #12a150;
  --color-accent-600: #0e8a45;
  --color-accent-700: #0c7239;
  --color-accent-800: #0a5b2e;
  --color-accent-900: #084b27;
  --color-accent-950: #032a16;
  /* the soft green pair used for active nav, on-pills and selected chips */
  --color-accent-soft: #e7f6ee;
  --color-accent-soft-hover: #d7f0e2;

  /* — neutral ramp: zinc, as the app uses it — */
  --color-neutral-100: #f4f4f5;
  --color-neutral-200: #e4e4e7;
  --color-neutral-300: #d4d4d8;
  --color-neutral-400: #a1a1aa;
  --color-neutral-500: #71717a;
  --color-neutral-600: #52525b;
  --color-neutral-700: #3f3f46;
  --color-neutral-800: #27272a;
  --color-neutral-900: #18181b;

  /* — supporting accent ramp (info) — */
  --color-accent-2-100: #e0f2fe;
  --color-accent-2-200: #bae6fd;
  --color-accent-2-500: #0ea5e9;
  --color-accent-2-700: #0369a1;
  --color-accent-2-800: #075985;

  /* — semantics — */
  --color-success: #12a150;
  --color-success-soft: #e7f6ee;
  --color-warning: #d97706;
  --color-warning-soft: #fef3c7;
  --color-danger: #dc2626;
  --color-danger-soft: #fee2e2;

  --font-heading: "Figtree", -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif;
  --font-heading-weight: 600;
  --font-body: "Figtree", -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif;
  --font-mono: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  --tracking-tight: -0.02em;
  --tracking-body: -0.008em; /* the app's global letter-spacing */

  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-6: 24px;
  --space-8: 32px;

  --radius-sm: 4px;
  --radius-md: 6px;   /* inputs, buttons */
  --radius-lg: 10px;  /* cards, panels, menu items */
  --radius-pill: 999px;

  /* Elevation — the app's three-layer soft shadow; surfaces read as paper on the #fbfbfc canvas. */
  --shadow-sm: 0 1px 2px rgba(24, 24, 27, 0.05);
  --shadow-md: 0 3px 5px rgba(24, 24, 27, 0.02), 0 0 2px rgba(24, 24, 27, 0.05), 0 1px 4px rgba(24, 24, 27, 0.08);
  --shadow-lg: 0 12px 32px rgba(24, 24, 27, 0.12);
  --focus-ring: 0 0 0 3px var(--color-accent-100);
}

*, *::before, *::after { box-sizing: border-box; }
body { margin: 0; background: var(--color-bg); color: var(--color-text); font-family: var(--font-body); font-size: 14px; line-height: 1.55; font-weight: 400; letter-spacing: var(--tracking-body); -webkit-font-smoothing: antialiased; }
h1, h2, h3, h4, h5, h6 { font-family: var(--font-heading); font-weight: var(--font-heading-weight); line-height: 1.15; letter-spacing: var(--tracking-tight); margin: 0 0 var(--space-2); }
h1 { font-size: 34px }
h2 { font-size: 26px }
h3 { font-size: 20px }
h4 { font-size: 16px }
h5 { font-size: 14px }
h6 { font-size: 11px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--color-text-subtle) }
p { margin: 0 0 var(--space-3) }
a { color: var(--color-accent-600); text-underline-offset: 3px }
a:hover { color: var(--color-accent-700) }
img { display: block; max-width: 100% }
figure { margin: 0 }
figcaption { font-size: 11px; margin-top: var(--space-1); color: var(--color-text-faint) }
code { font-family: var(--font-mono); font-size: 0.92em }
.text-muted { color: var(--color-text-muted) }
.text-subtle { color: var(--color-text-subtle) }
:focus { outline: none }
:focus-visible { outline: 2px solid var(--color-accent); outline-offset: 2px }
::selection { background: var(--color-accent-100) }

/* — display type: for decks, landing heroes and document covers — */
.display-1 { font-family: var(--font-heading); font-weight: 700; font-size: 64px; line-height: 1.04; letter-spacing: -0.03em; margin: 0 }
.display-2 { font-family: var(--font-heading); font-weight: 600; font-size: 44px; line-height: 1.08; letter-spacing: -0.025em; margin: 0 }
.eyebrow { font-size: 11px; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; color: var(--color-accent-600) }
.lede { font-size: 17px; line-height: 1.6; color: var(--color-text-muted) }
.num { font-variant-numeric: tabular-nums }

/* — rules — */
.hr { height: 1px; border: 0; margin: var(--space-4) 0; background: var(--color-divider) }

/* — buttons — */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 6px; cursor: pointer; text-decoration: none; font-family: var(--font-body); font-weight: 600; font-size: 14px; line-height: 1.2; letter-spacing: var(--tracking-body); color: var(--color-text); background: transparent; border: 1px solid transparent; padding: 9px 14px; border-radius: var(--radius-md); transition: background .14s ease, border-color .14s ease, color .14s ease }
.btn svg { display: block }
.btn:disabled { opacity: .5; cursor: not-allowed }
.btn-primary { background: var(--color-accent); color: #fff }
.btn-primary:hover { background: var(--color-accent-600) }
.btn-primary:active { background: var(--color-accent-700) }
.btn-secondary { border-color: var(--color-border); background: var(--color-surface); color: var(--color-text-muted) }
.btn-secondary:hover { background: var(--color-surface-hover); color: var(--color-text) }
.btn-secondary:active { background: var(--color-neutral-200) }
.btn-ghost { color: var(--color-accent-600); padding-inline: 10px }
.btn-ghost:hover { background: var(--color-accent-soft) }
.btn-ghost:active { background: var(--color-accent-soft-hover) }
.btn-danger { background: var(--color-danger); color: #fff }
.btn-danger:hover { background: #b91c1c }
.btn-icon { width: 36px; height: 36px; padding: 0 }
.btn-sm { padding: 6px 10px; font-size: 13px }
.btn-lg { padding: 12px 20px; font-size: 15px }
.btn-block { width: 100%; margin-top: var(--space-2) }

/* — forms — */
.field > label { display: block; font-size: 13px; font-weight: 600; margin: 0 0 6px; line-height: 1.3; color: var(--color-text-muted) }
.input { width: 100%; min-height: 38px; padding: 8px 12px; font: inherit; font-size: 14px; letter-spacing: var(--tracking-body); color: var(--color-text); caret-color: var(--color-accent); background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-md); transition: border-color .14s ease, box-shadow .14s ease }
.input::placeholder { color: var(--color-text-faint); opacity: 1 }
.input:hover { border-color: var(--color-neutral-300) }
.input:focus-visible { border-color: var(--color-accent); box-shadow: var(--focus-ring); outline: none }
.input[readonly] { background: var(--color-bg); color: var(--color-text-muted); cursor: default }
textarea.input { min-height: 92px; resize: vertical }
.field-hint { display: block; margin-top: 6px; font-size: 12px; color: var(--color-text-faint) }
.field-error { display: block; margin-top: 6px; font-size: 12px; color: var(--color-danger) }
/* the app's code + read-only description pair — reads as one control */
.code-desc { display: flex; align-items: stretch; gap: var(--space-2) }
.code-desc .cd-code { flex: 0 0 140px }
.code-desc .cd-desc { flex: 1 1 0; min-width: 0 }
.radio { display: inline-flex; align-items: center; gap: 8px; cursor: pointer; font-size: 14px }
.radio input, .seg-opt input { position: absolute; opacity: 0; width: 0; height: 0; pointer-events: none }
.radio .dot { width: 18px; height: 18px; flex: none; border-radius: 50%; border: 1.5px solid var(--color-border); background: var(--color-surface) }
.radio:hover .dot { border-color: var(--color-accent) }
.radio input:checked + .dot { border-color: var(--color-accent); background: var(--color-accent); box-shadow: inset 0 0 0 4px #fff }
.radio input:focus-visible + .dot { outline: 2px solid var(--color-accent); outline-offset: 2px }
.seg { display: inline-flex; overflow: hidden; border: 1px solid var(--color-border); border-radius: var(--radius-md); background: var(--color-surface) }
.seg-opt { display: inline-flex; align-items: center; gap: 6px; padding: 8px 14px; font-size: 13px; font-weight: 500; color: var(--color-text-muted); cursor: pointer }
.seg-opt + .seg-opt { border-left: 1px solid var(--color-border) }
.seg-opt:has(input:checked) { background: var(--color-accent); color: #fff; font-weight: 600 }
.seg-opt:not(:has(input:checked)):hover { background: var(--color-surface-hover) }
.seg-opt:has(input:focus-visible) { outline: 2px solid var(--color-accent); outline-offset: -2px }
/* selectable classification chips */
.chip-group { display: flex; flex-wrap: wrap; gap: var(--space-2) }
.type-chip { display: inline-flex; align-items: center; gap: 6px; height: 34px; padding: 0 14px; border-radius: var(--radius-pill); border: 1px solid var(--color-border); background: var(--color-surface); color: var(--color-text-muted); font-size: 13px; font-weight: 500; cursor: pointer; transition: background .14s ease, border-color .14s ease, color .14s ease }
.type-chip:hover { background: var(--color-surface-hover) }
.type-chip.on { background: var(--color-accent-soft); border-color: var(--color-accent-200); color: var(--color-accent-600); font-weight: 600 }
/* toggle */
.switch { position: relative; display: inline-flex; align-items: center; width: 44px; height: 24px; flex: none; cursor: pointer }
.switch input { position: absolute; opacity: 0; width: 0; height: 0 }
.switch .slider { position: absolute; inset: 0; border-radius: var(--radius-pill); background: var(--color-neutral-300); transition: background .16s ease }
.switch .knob { position: absolute; top: 3px; left: 3px; width: 18px; height: 18px; border-radius: 50%; background: #fff; box-shadow: var(--shadow-sm); transition: transform .16s ease }
.switch input:checked ~ .slider { background: var(--color-accent) }
.switch input:checked ~ .knob { transform: translateX(20px) }

/* — cards & panels — */
.card { display: flex; flex-direction: column; gap: var(--space-2); padding: var(--space-4); border-radius: var(--radius-lg); background: var(--color-surface); border: 1px solid var(--color-divider) }
.card-kicker { font-size: 10px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: var(--color-accent-600) }
.card-title { font-family: var(--font-heading); font-weight: 600; font-size: 16px; line-height: 1.25; letter-spacing: var(--tracking-tight) }
.card-body { margin: 0; font-size: 13px; color: var(--color-text-muted); flex: 1 }
.card-meta { display: flex; align-items: center; gap: 6px; font-size: 11px; color: var(--color-text-faint) }
/* section card — the app's editor grouping: a white panel with a green rule at the head */
.section-card { background: var(--color-surface); border: 1px solid var(--color-divider); border-radius: var(--radius-lg); overflow: hidden }
.section-card > header { display: flex; align-items: center; gap: var(--space-2); padding: var(--space-3) var(--space-4); border-bottom: 1px solid var(--color-divider); border-left: 3px solid var(--color-accent); font-weight: 600; font-size: 14px }
.section-card > .body { padding: var(--space-4) }
.kpi { display: flex; flex-direction: column; gap: 2px; padding: var(--space-4); border-radius: var(--radius-lg); background: var(--color-surface); border: 1px solid var(--color-divider) }
.kpi-label { font-size: 11px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--color-text-faint) }
.kpi-value { font-family: var(--font-heading); font-weight: 600; font-size: 28px; letter-spacing: -0.02em; font-variant-numeric: tabular-nums }
.elev-sm { box-shadow: var(--shadow-sm) }
.elev-md { box-shadow: var(--shadow-md) }
.elev-lg { box-shadow: var(--shadow-lg) }

/* — tags, pills, badges — */
.tag { display: inline-flex; align-items: center; gap: 5px; font-size: 11px; font-weight: 600; letter-spacing: .01em; padding: 3px 10px; border-radius: var(--radius-pill) }
.tag-accent { background: var(--color-accent-soft); color: var(--color-accent-600) }
.tag-accent-2 { background: var(--color-accent-2-100); color: var(--color-accent-2-800) }
.tag-neutral { background: var(--color-neutral-100); color: var(--color-text-subtle) }
.tag-warning { background: var(--color-warning-soft); color: #92400e }
.tag-danger { background: var(--color-danger-soft); color: #991b1b }
.tag-outline { border: 1px solid var(--color-accent-200); color: var(--color-accent-600) }
/* the app's status pill — off by default, green when on */
.status-pill { font-size: 12px; font-weight: 600; padding: 2px 10px; border-radius: var(--radius-pill); background: var(--color-neutral-100); color: var(--color-text-subtle) }
.status-pill.on { background: var(--color-accent-soft); color: var(--color-accent-600) }

/* — navigation — */
.nav { display: flex; align-items: center; gap: var(--space-4); padding: 14px var(--space-6); background: var(--color-surface); border-bottom: 1px solid var(--color-divider) }
.nav-brand { display: flex; align-items: center; gap: var(--space-2); font-family: var(--font-heading); font-weight: 600; font-size: 17px; letter-spacing: var(--tracking-tight); margin-right: auto }
.nav a { color: var(--color-text-muted); text-decoration: none; font-size: 14px; font-weight: 500 }
.nav a:hover { color: var(--color-text) }
.nav a[aria-current='page'] { color: var(--color-accent-600) }
/* sidebar menu — light sunken rail, green-soft active item */
.side { display: flex; flex-direction: column; gap: 2px; padding: var(--space-3); background: var(--color-surface-sunken); border-right: 1px solid var(--color-divider) }
.side-label { padding: var(--space-3) 10px 6px; font-size: 10px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: var(--color-text-faint) }
.side-item { display: flex; align-items: center; gap: 10px; padding: 9px 10px; border-radius: 9px; font-size: 14px; font-weight: 500; color: var(--color-text-muted); text-decoration: none; cursor: pointer; transition: background .14s ease, color .14s ease }
.side-item svg { flex: none; color: var(--color-text-faint) }
.side-item:hover { background: var(--color-surface-hover); color: var(--color-text) }
.side-item:hover svg { color: var(--color-text-muted) }
.side-item.active { background: var(--color-accent-soft); color: var(--color-accent-600); font-weight: 600 }
.side-item.active svg { color: var(--color-accent) }
.side-item.active:hover { background: var(--color-accent-soft-hover) }
/* underline tabs — transparent until active, then a green rule */
.tabs { display: flex; gap: var(--space-6); border-bottom: 1px solid var(--color-neutral-200) }
.tab { padding: 10px 0; margin-bottom: -1px; border-bottom: 2px solid transparent; font-size: 14px; font-weight: 500; color: var(--color-text-subtle); text-decoration: none; cursor: pointer }
.tab:hover { color: var(--color-text) }
.tab.active { border-bottom-color: var(--color-accent); color: var(--color-accent-600); font-weight: 600 }
.crumbs { display: flex; align-items: center; gap: 8px; font-size: 12px; color: var(--color-text-faint) }
.crumbs a { color: inherit; text-decoration: none }
.crumbs a:hover { color: var(--color-text-muted) }

/* — tables — */
.table { width: 100%; border-collapse: collapse; font-size: 14px; background: var(--color-surface) }
.table th { text-align: left; font-size: 14px; font-weight: 700; color: var(--color-text-muted); padding: 10px var(--space-4); background: var(--color-surface); border-bottom: 1px solid var(--color-border) }
.table td { padding: 8px var(--space-4); border-bottom: 1px solid var(--color-divider); color: var(--color-text) }
.table tbody tr:hover { background: var(--color-bg) }
.table .num { text-align: right }

/* — dialog — */
.dialog-backdrop { position: fixed; inset: 0; display: grid; place-items: center; padding: var(--space-4); background: rgba(24, 24, 27, .45) }
.dialog { width: min(460px, 100%); display: flex; flex-direction: column; gap: var(--space-3); padding: var(--space-6); border-radius: 12px; background: var(--color-surface); box-shadow: var(--shadow-lg) }
.dialog-title { font-family: var(--font-heading); font-weight: 600; font-size: 19px; letter-spacing: var(--tracking-tight) }
.dialog-body { font-size: 14px; color: var(--color-text-muted) }
.dialog-actions { display: flex; justify-content: flex-end; gap: var(--space-2); margin-top: var(--space-2) }