/* =========================================================================
   spock-dash-ui (sui) — the Spock dashboard design system
   Single stylesheet: tokens + components for forms, modals, pages, lists,
   detail views, trees and charts. Class prefix: sui-  Token prefix: --sui-
   Source of truth: spockapp/spock-ui/  (docs, templates, examples, tests)
   Rules:
   - Every colour comes from a --sui-* token. No literals in components.
   - Flat classes, modifiers as a second class (.sui-btn.primary). Max two levels.
   - Spacing via flex/grid gap, never per-element margins.
   ========================================================================= */
:root {
  /* Ink */
  --sui-ink: #0E1326;
  --sui-ink-2: #3A4163;
  --sui-muted: #6B7396;
  --sui-faint: #9AA3BF;
  /* Surfaces */
  --sui-canvas: #F5F7FB;
  --sui-card: #FFFFFF;
  --sui-panel: #FBFCFE;
  --sui-border: #E5E8F2;
  --sui-hair: #EDF0F8;
  /* Accent (selection, custom state, focus) */
  --sui-accent: #3149E5;
  --sui-accent-bg: #EEF0FF;
  --sui-accent-border: #C7CDFA;
  --sui-focus-ring: rgba(49, 73, 229, 0.15);
  /* Primary action (matches .btn-std.submit-button) */
  --sui-primary: #3B86FF;
  --sui-primary-border: #3373DB;
  /* Semantic */
  --sui-green: #15A36E;
  --sui-green-bg: #E6F7EF;
  --sui-green-border: #B6E4CF;
  --sui-amber: #B97000;
  --sui-amber-ink: #7A4B00;
  --sui-amber-bg: #FFF4DA;
  --sui-amber-border: #F5DFA3;
  --sui-red: #B42318;
  --sui-red-bg: #FEE4E2;
  --sui-red-border: #F0B4AE;
  /* Elevation */
  --sui-shadow-card: 0 1px 0 rgba(15,19,38,.04), 0 10px 28px -18px rgba(15,19,38,.18);
  --sui-shadow-modal: 0 2px 0 rgba(15,19,38,.04), 0 24px 60px -24px rgba(15,19,38,.35);
  --sui-shadow-btn: 0 0 0 1px rgba(42,47,69,.10), 0 2px 5px rgba(42,47,69,.08), 0 1px 1.5px rgba(0,0,0,.07);
  /* Radii */
  --sui-radius-control: 8px;
  --sui-radius-block: 10px;
  --sui-radius-card: 12px;
  --sui-radius-modal: 16px;
}

/* =========================== FORMS AND MODALS =========================== */

/* ---------- Modal shell (adds to the shared Vue .modal-container) ---------- */
.modal-container.sui-modal                       { width: 560px; max-width: calc(100vw - 32px); border-radius: var(--sui-radius-modal); border: 1px solid var(--sui-border); box-shadow: var(--sui-shadow-modal); overflow: hidden; }
.sui-modal .modal-header                         { padding: 18px 24px 14px; border-bottom: 1px solid var(--sui-hair); }
.sui-modal .modal-body                           { padding: 20px 24px; background: var(--sui-card); }
.sui-modal .modal-footer                         { padding: 14px 24px 18px; border-top: 1px solid var(--sui-hair); display: flex; align-items: center; gap: 16px; }
.sui-title                                       { font-size: 16px; font-weight: 650; color: var(--sui-ink); letter-spacing: -0.01em; margin: 0; }
.sui-subtitle                                    { font-size: 12px; color: var(--sui-muted); margin: 2px 0 0; }

/* ---------- Layout primitives ---------- */
.sui-stack                                       { display: flex; flex-direction: column; gap: 18px; }
.sui-stack.tight                                 { gap: 10px; }
.sui-field                                       { display: flex; flex-direction: column; gap: 6px; }
.sui-label                                       { font-size: 13px; font-weight: 600; color: var(--sui-ink-2); margin: 0; }
.sui-label .optional                             { font-weight: 400; color: var(--sui-muted); margin-left: 4px; }
.sui-hint                                        { font-size: 12px; color: var(--sui-muted); line-height: 1.45; margin: 0; }
.sui-eyebrow                                     { font-size: 11px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--sui-muted); }
.sui-inline                                      { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.sui-inline .unit                                { font-size: 13px; color: var(--sui-muted); }

/* ---------- Text controls ---------- */
.sui-control                                     { font: inherit; font-size: 14px; height: 34px; padding: 0 10px; border: 1px solid var(--sui-border); border-radius: var(--sui-radius-control); background: var(--sui-card); color: var(--sui-ink); width: 100%; max-width: 100%; }
.sui-control.sm                                  { width: 120px; }
.sui-control.md                                  { width: 220px; }
textarea.sui-control                             { height: auto; min-height: 72px; padding: 8px 10px; resize: vertical; }
select.sui-control                               { padding-right: 28px; }
.sui-control:focus                               { outline: none; border-color: var(--sui-accent); box-shadow: 0 0 0 3px var(--sui-focus-ring); }
.sui-control:disabled                            { background: var(--sui-panel); color: var(--sui-muted); }
.sui-control.error                               { border-color: var(--sui-red); }
.sui-control::placeholder                        { color: var(--sui-faint); }

/* ---------- Checkbox with title and hint ---------- */
.sui-check                                       { display: flex; align-items: flex-start; gap: 9px; font-size: 13px; cursor: pointer; margin: 0; font-weight: 400; }
.sui-check input                                 { margin: 3px 0 0; accent-color: var(--sui-accent); width: 15px; height: 15px; flex: 0 0 auto; }
.sui-check .t                                    { display: flex; flex-direction: column; gap: 1px; }
.sui-check b                                     { font-weight: 600; color: var(--sui-ink); }

/* ---------- Segmented control (2 to 4 short options) ---------- */
.sui-seg                                         { display: inline-flex; border: 1px solid var(--sui-border); border-radius: var(--sui-radius-control); overflow: hidden; }
.sui-seg > button,
.sui-seg > label                                 { font: inherit; font-size: 13px; padding: 6px 14px; background: var(--sui-card); border: 0; border-right: 1px solid var(--sui-border); color: var(--sui-ink-2); cursor: pointer; margin: 0; line-height: 1.4; }
.sui-seg > button:last-child,
.sui-seg > label:last-child                      { border-right: 0; }
.sui-seg > label input                           { position: absolute; opacity: 0; width: 0; height: 0; }
.sui-seg > button[aria-pressed="true"],
.sui-seg > label.on                              { background: var(--sui-accent-bg); color: var(--sui-accent); font-weight: 600; }
.sui-seg > button:focus-visible,
.sui-seg > label:focus-within                    { outline: 2px solid var(--sui-accent); outline-offset: -2px; }

/* ---------- Choice cards (radio options with a description and a value) ---------- */
.sui-choice                                      { border: 1px solid var(--sui-border); border-radius: var(--sui-radius-block); overflow: hidden; }
.sui-choice-opt                                  { display: flex; gap: 10px; padding: 12px 14px; border-bottom: 1px solid var(--sui-hair); cursor: pointer; align-items: flex-start; margin: 0; font-weight: 400; background: var(--sui-card); }
.sui-choice-opt:last-child                       { border-bottom: 0; }
.sui-choice-opt input                            { margin: 3px 0 0; accent-color: var(--sui-accent); flex: 0 0 auto; }
.sui-choice-opt.on                               { background: var(--sui-accent-bg); }
.sui-choice-opt .t                               { display: flex; flex-direction: column; gap: 2px; flex: 1; min-width: 0; }
.sui-choice-opt .t b                             { font-weight: 600; font-size: 13px; color: var(--sui-ink); }
.sui-choice-opt .t span                          { font-size: 12px; color: var(--sui-muted); }
.sui-choice-opt .val                             { font-weight: 650; font-size: 14px; color: var(--sui-ink); font-variant-numeric: tabular-nums; white-space: nowrap; text-align: right; }
.sui-choice-opt .val small                       { display: block; color: var(--sui-muted); font-weight: 400; font-size: 12px; }
.sui-choice-body                                 { margin-top: 8px; }

/* ---------- Notes and callouts ---------- */
.sui-note                                        { border-radius: var(--sui-radius-block); padding: 12px 14px; font-size: 13px; line-height: 1.45; display: flex; flex-direction: column; gap: 8px; }
.sui-note b                                      { font-weight: 600; }
.sui-note.info                                   { background: var(--sui-panel); border: 1px solid var(--sui-border); color: var(--sui-ink-2); }
.sui-note.amber                                  { background: var(--sui-amber-bg); border: 1px solid var(--sui-amber-border); color: var(--sui-amber-ink); }
.sui-note.red                                    { background: var(--sui-red-bg); border: 1px solid var(--sui-red-border); color: var(--sui-red); }
.sui-note.green                                  { background: var(--sui-green-bg); border: 1px solid var(--sui-green-border); color: var(--sui-green); }

/* ---------- Summary tiles (before / after, this period / next period) ---------- */
.sui-tiles                                       { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 10px; }
.sui-tile                                        { border: 1px solid var(--sui-border); border-radius: var(--sui-radius-block); padding: 10px 12px; background: var(--sui-card); }
.sui-tile .y                                     { font-size: 11px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--sui-muted); }
.sui-tile .n                                     { font-size: 20px; font-weight: 650; letter-spacing: -0.02em; font-variant-numeric: tabular-nums; margin-top: 2px; color: var(--sui-ink); }
.sui-tile .n small                               { font-size: 12px; font-weight: 500; color: var(--sui-muted); margin-left: 4px; }
.sui-tile .d                                     { font-size: 12px; color: var(--sui-muted); }
.sui-tile.accent                                 { border-color: var(--sui-accent-border); background: var(--sui-accent-bg); }
.sui-tile.accent .n                              { color: var(--sui-accent); }

/* ---------- Pills and tags ---------- */
.sui-pill                                        { display: inline-block; font-size: 11px; font-weight: 600; padding: 2px 9px; border-radius: 999px; white-space: nowrap; line-height: 1.5; }
.sui-pill.default                                { background: var(--sui-hair); color: var(--sui-muted); }
.sui-pill.custom,
.sui-pill.accent                                 { background: var(--sui-accent-bg); color: var(--sui-accent); }
.sui-pill.green                                  { background: var(--sui-green-bg); color: var(--sui-green); }
.sui-pill.amber                                  { background: var(--sui-amber-bg); color: var(--sui-amber); }
.sui-pill.red                                    { background: var(--sui-red-bg); color: var(--sui-red); }
.sui-tag                                         { display: inline-block; font-size: 10px; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; padding: 1px 6px; border-radius: 999px; margin-left: 6px; vertical-align: 1px; }
.sui-tag.custom                                  { background: var(--sui-accent-bg); color: var(--sui-accent); }
.sui-tag.default                                 { background: var(--sui-hair); color: var(--sui-muted); }

/* ---------- Key/value rows (settings panels, read-only summaries) ---------- */
.sui-kv                                          { display: flex; flex-direction: column; gap: 6px; }
.sui-kv .row                                     { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; font-size: 13px; }
.sui-kv .k                                       { color: var(--sui-muted); }
.sui-kv .v                                       { font-weight: 500; color: var(--sui-ink); text-align: right; font-variant-numeric: tabular-nums; }
.sui-kv .v small                                 { color: var(--sui-muted); font-weight: 400; margin-left: 4px; }

/* ---------- Settings panel (title, status pill, rows, actions) ---------- */
.sui-panel                                       { padding: 16px 20px; display: flex; flex-direction: column; gap: 10px; }
.sui-panel-head                                  { display: flex; justify-content: space-between; align-items: center; }
.sui-panel-head .sui-eyebrow                      { color: var(--sui-ink-2); }
.sui-panel .sui-actions                           { margin-top: 2px; }

/* ---------- Buttons and action rows ---------- */
.sui-btn                                         { font: inherit; font-size: 13px; font-weight: 500; color: var(--sui-ink-2); background: var(--sui-card); border: 0; border-radius: 6px; padding: 5px 10px; box-shadow: var(--sui-shadow-btn); cursor: pointer; line-height: 1.5; white-space: nowrap; }
.sui-btn:hover                                   { color: var(--sui-ink); }
.sui-btn.primary                                 { background: var(--sui-primary); color: #FFFFFF; border: 1px solid var(--sui-primary-border); font-weight: 600; padding: 8px 16px; font-size: 14px; }
.sui-btn.danger                                  { background: var(--sui-red); color: #FFFFFF; border: 1px solid var(--sui-red); font-weight: 600; padding: 8px 16px; font-size: 14px; }
.sui-btn:disabled                                { opacity: .5; pointer-events: none; }
.sui-btn:focus-visible                           { outline: 2px solid var(--sui-accent); outline-offset: 2px; }
.sui-actions                                     { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; }
.sui-actions .cancel                             { color: var(--sui-muted); font-size: 13px; text-decoration: none; }
.sui-actions .cancel:hover                       { color: var(--sui-ink-2); }

/* ---------- Errors ---------- */
.sui-errors                                      { list-style: none; padding: 10px 14px; margin: 0; border-radius: var(--sui-radius-block); background: var(--sui-red-bg); border: 1px solid var(--sui-red-border); color: var(--sui-red); font-size: 13px; }

/* ---------- Motion ---------- */
@media (prefers-reduced-motion: no-preference) {
  .sui-choice-opt, .sui-seg > button, .sui-seg > label, .sui-btn, .sui-control { transition: background .15s ease, border-color .15s ease, box-shadow .15s ease; }
}

/* Part 2 tokens */
:root {
  --sui-filter-bg: #F0F3F5;      /* canonical filter band background */
  --sui-row-hover: #F8F9FC;
  --sui-grid: #EDF0F8;           /* chart grid lines */
  --sui-track: #E9EDF2;          /* meter track */
  --sui-spent: #C9D0DB;          /* meter spent segment */
  /* Categorical chart series, fixed order, validated (light surface). */
  --sui-series-1: #3149E5;
  --sui-series-2: #EB6834;
  --sui-series-3: #1BAF7A;
  --sui-series-4: #EDA100;
  --sui-series-5: #E87BA4;
  /* Presence */
  --sui-presence-available: #15A36E;
  --sui-presence-leave: #B97000;
  --sui-presence-off: #9AA3BF;
}

/* =========================== PAGES, LISTS, DATA =========================== */

/* ---------- Page shell ---------- */
.sui-page                                        { display: flex; flex-direction: column; gap: 24px; }
.sui-breadcrumb                                  { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; list-style: none; margin: 0; padding: 0; font-size: 12px; color: var(--sui-muted); }
.sui-breadcrumb li + li::before                  { content: "›"; margin-right: 6px; color: var(--sui-faint); }
.sui-breadcrumb a                                { color: var(--sui-muted); text-decoration: none; }
.sui-breadcrumb a:hover                          { color: var(--sui-ink-2); }
.sui-breadcrumb li[aria-current]                 { color: var(--sui-ink-2); font-weight: 600; }
.sui-page-head                                   { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; flex-wrap: wrap; }
.sui-page-title                                  { font-size: 22px; font-weight: 700; letter-spacing: -0.02em; margin: 0; color: var(--sui-ink); }
.sui-page-sub                                    { font-size: 13px; color: var(--sui-muted); margin: 2px 0 0; }
.sui-page-actions                                { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }

/* ---------- Tabs (underline) ---------- */
.sui-tabs                                        { display: flex; gap: 4px; border-bottom: 1px solid var(--sui-border); overflow-x: auto; margin: 0; padding: 0; list-style: none; }
.sui-tabs a,
.sui-tabs button                                 { font: inherit; font-size: 13px; font-weight: 500; color: var(--sui-muted); text-decoration: none; padding: 8px 12px 10px; border: 0; border-bottom: 2px solid transparent; margin-bottom: -1px; background: none; cursor: pointer; white-space: nowrap; display: inline-flex; align-items: center; gap: 6px; }
.sui-tabs a:hover,
.sui-tabs button:hover                           { color: var(--sui-ink-2); }
.sui-tabs .on                                    { color: var(--sui-ink); font-weight: 600; border-bottom-color: var(--sui-accent); }
.sui-tabs .n                                     { font-size: 11px; font-weight: 600; background: var(--sui-hair); color: var(--sui-muted); border-radius: 999px; padding: 0 7px; line-height: 18px; }
.sui-tabs .on .n                                 { background: var(--sui-accent-bg); color: var(--sui-accent); }
.sui-tabs a:focus-visible,
.sui-tabs button:focus-visible                   { outline: 2px solid var(--sui-accent); outline-offset: -2px; border-radius: 6px; }

/* ---------- Vertical navigation (settings, sub-sections) ---------- */
.sui-nav                                         { display: flex; flex-direction: column; gap: 2px; list-style: none; margin: 0; padding: 0; }
.sui-nav-label                                   { font-size: 11px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--sui-muted); padding: 12px 10px 4px; }
.sui-nav a                                       { display: flex; align-items: center; gap: 8px; font-size: 13px; font-weight: 500; color: var(--sui-ink-2); text-decoration: none; padding: 7px 10px; border-radius: 8px; }
.sui-nav a:hover                                 { background: var(--sui-hair); color: var(--sui-ink); }
.sui-nav a.on                                    { background: var(--sui-accent-bg); color: var(--sui-accent); font-weight: 600; }
.sui-nav a .n                                    { margin-left: auto; font-size: 11px; color: var(--sui-muted); }

/* ---------- Filter band ---------- */
.sui-filters                                     { background: var(--sui-filter-bg); border: 1px solid var(--sui-border); border-radius: var(--sui-radius-card); padding: 12px 16px; display: flex; flex-wrap: wrap; gap: 12px 16px; align-items: flex-end; }
.sui-filter                                      { display: flex; flex-direction: column; gap: 4px; min-width: 140px; flex: 1 1 140px; }
.sui-filter.grow                                 { flex: 2 1 220px; }
.sui-filters .sui-control                         { height: 34px; border-radius: 9px; }
.sui-filters-summary                             { flex: 1 0 100%; display: flex; justify-content: space-between; align-items: center; font-size: 12px; color: var(--sui-muted); }
.sui-filters-summary a                           { color: var(--sui-accent); text-decoration: none; }

/* ---------- Records list (grid rows in a card) ---------- */
.sui-list                                        { background: var(--sui-card); border: 1px solid var(--sui-border); border-radius: var(--sui-radius-card); box-shadow: var(--sui-shadow-card); overflow: hidden; }
.sui-list-scroll                                 { overflow-x: auto; }
.sui-list-head,
.sui-list-row                                    { display: grid; grid-template-columns: var(--cols, 1fr); gap: 12px; align-items: center; padding: 0 16px; min-width: var(--min, 0); }
.sui-list-head                                   { height: 40px; background: var(--sui-panel); border-bottom: 1px solid var(--sui-border); font-size: 11px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--sui-muted); }
.sui-list-row                                    { min-height: 52px; padding-block: 8px; border-bottom: 1px solid var(--sui-hair); font-size: 13px; color: var(--sui-ink); text-decoration: none; }
.sui-list-row:last-child                         { border-bottom: 0; }
a.sui-list-row:hover,
.sui-list-row.clickable:hover                    { background: var(--sui-row-hover); }
.sui-list-row.selected                           { background: var(--sui-accent-bg); }
.sui-list-row .num,
.sui-list-head .num                              { text-align: right; font-variant-numeric: tabular-nums; }
.sui-list-row .muted                             { color: var(--sui-muted); }
.sui-list-row .dash                              { color: var(--sui-faint); }
.sui-list-row .primary                           { font-weight: 600; }
.sui-list-row .sub                               { display: block; font-size: 12px; color: var(--sui-muted); font-weight: 400; }
.sui-sort                                        { font: inherit; background: none; border: 0; padding: 0; color: inherit; cursor: pointer; display: inline-flex; align-items: center; gap: 4px; text-transform: inherit; letter-spacing: inherit; font-weight: inherit; }
.sui-sort::after                                 { content: "↕"; color: var(--sui-faint); font-size: 11px; }
.sui-sort.asc::after                             { content: "↑"; color: var(--sui-accent); }
.sui-sort.desc::after                            { content: "↓"; color: var(--sui-accent); }
.sui-list .sui-check                              { gap: 0; }
.sui-list .sui-check input                        { margin: 0; }
.sui-bulkbar                                     { display: flex; align-items: center; gap: 12px; padding: 8px 16px; background: var(--sui-accent-bg); border-bottom: 1px solid var(--sui-accent-border); font-size: 13px; color: var(--sui-accent); font-weight: 600; }
.sui-bulkbar .sui-btn                             { font-size: 12px; }
.sui-list-foot                                   { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 10px 16px; border-top: 1px solid var(--sui-hair); font-size: 12px; color: var(--sui-muted); flex-wrap: wrap; }
.sui-pagination                                  { display: flex; gap: 4px; list-style: none; margin: 0; padding: 0; }
.sui-pagination a,
.sui-pagination span                             { display: inline-flex; align-items: center; justify-content: center; min-width: 28px; height: 28px; padding: 0 8px; border-radius: 7px; font-size: 12px; color: var(--sui-ink-2); text-decoration: none; }
.sui-pagination a:hover                          { background: var(--sui-hair); }
.sui-pagination .on                              { background: var(--sui-accent-bg); color: var(--sui-accent); font-weight: 600; }
.sui-empty                                       { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 6px; padding: 40px 20px; color: var(--sui-muted); }
.sui-empty b                                     { font-size: 14px; color: var(--sui-ink); font-weight: 600; }
.sui-empty p                                     { font-size: 13px; max-width: 40ch; margin: 0; }

/* ---------- People ---------- */
.sui-user                                        { display: flex; align-items: center; gap: 10px; min-width: 0; }
.sui-avatar                                      { width: 28px; height: 28px; border-radius: 50%; flex: 0 0 auto; box-shadow: 0 0 0 1px rgba(15,19,38,.08); background: var(--sui-hair); object-fit: cover; position: relative; display: inline-flex; align-items: center; justify-content: center; font-size: 11px; font-weight: 600; color: var(--sui-ink-2); }
.sui-avatar.lg                                   { width: 56px; height: 56px; font-size: 18px; }
.sui-avatar.sm                                   { width: 22px; height: 22px; font-size: 10px; }
.sui-user .name                                  { font-weight: 600; color: var(--sui-ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sui-user .handle                                { display: block; font-size: 12px; color: var(--sui-muted); font-weight: 400; }
.sui-presence                                    { display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: var(--sui-presence-off); box-shadow: 0 0 0 2px var(--sui-card); vertical-align: middle; }
.sui-presence.available                          { background: var(--sui-presence-available); }
.sui-presence.leave                              { background: var(--sui-presence-leave); }
.sui-chips                                       { display: flex; flex-wrap: wrap; gap: 6px; }
.sui-chip                                        { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 500; color: var(--sui-ink-2); background: var(--sui-hair); border-radius: 999px; padding: 2px 10px; text-decoration: none; }
.sui-chip:hover                                  { background: var(--sui-border); }

/* ---------- Detail layout and sections ---------- */
.sui-layout                                      { display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: 20px; align-items: start; }
.sui-layout.equal                                { grid-template-columns: 1fr 1fr; }
.sui-section                                     { background: var(--sui-card); border: 1px solid var(--sui-border); border-radius: var(--sui-radius-card); box-shadow: var(--sui-shadow-card); overflow: hidden; }
.sui-section-head                                { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 14px 20px; border-bottom: 1px solid var(--sui-hair); }
.sui-section-title                               { font-size: 14px; font-weight: 600; margin: 0; color: var(--sui-ink); display: flex; align-items: center; gap: 8px; }
.sui-section-body                                { padding: 16px 20px; display: flex; flex-direction: column; gap: 14px; }
.sui-section.flush .sui-section-body              { padding: 0; gap: 0; }
.sui-section-sub                                 { padding: 10px 20px 4px; }
.sui-identity                                    { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; }
.sui-identity .who                               { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.sui-identity .name                              { font-size: 18px; font-weight: 650; letter-spacing: -0.01em; color: var(--sui-ink); display: flex; align-items: center; gap: 8px; }
.sui-identity .sub                               { font-size: 13px; color: var(--sui-muted); }
.sui-kv.grid                                     { display: grid; grid-template-columns: max-content 1fr; gap: 8px 20px; margin: 0; }
.sui-kv.grid dt                                  { color: var(--sui-muted); font-size: 13px; }
.sui-kv.grid dd                                  { margin: 0; font-size: 13px; color: var(--sui-ink); font-weight: 500; }
.sui-kv.cols                                     { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 12px 20px; margin: 0; }
.sui-kv.cols > div                               { display: flex; flex-direction: column; gap: 2px; }
.sui-kv.cols dt                                  { font-size: 11px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--sui-muted); }
.sui-kv.cols dd                                  { margin: 0; font-size: 14px; font-weight: 500; color: var(--sui-ink); }
.sui-stats                                       { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); }
.sui-stat                                        { padding: 14px 20px; border-right: 1px solid var(--sui-hair); }
.sui-stat:last-child                             { border-right: 0; }
.sui-stat .l                                     { font-size: 11px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--sui-muted); }
.sui-stat .v                                     { font-size: 22px; font-weight: 650; letter-spacing: -0.02em; font-variant-numeric: tabular-nums; color: var(--sui-ink); margin-top: 2px; }
.sui-stat .v.pos                                 { color: var(--sui-green); }
.sui-stat .v.neg                                 { color: var(--sui-red); }
.sui-stat .v.muted                               { color: var(--sui-faint); }
.sui-stat .s                                     { font-size: 12px; color: var(--sui-muted); margin-top: 2px; }

/* ---------- Leave request: date flow and status ---------- */
.sui-dates                                       { display: flex; align-items: center; flex-wrap: wrap; gap: 10px 14px; }
.sui-dates .d                                    { font-size: 15px; font-weight: 600; color: var(--sui-ink); white-space: nowrap; }
.sui-dates .d small                              { display: block; font-size: 12px; font-weight: 400; color: var(--sui-muted); }
.sui-dates .arrow                                { display: flex; align-items: center; gap: 0; }
.sui-dates .arrow::before                        { content: ""; width: 28px; height: 2px; border-radius: 1px; background: var(--sui-border); }
.sui-dates .arrow::after                         { content: ""; width: 0; height: 0; border-left: 6px solid #D5DAEA; border-top: 5px solid transparent; border-bottom: 5px solid transparent; }
.sui-status                                      { display: inline-flex; align-items: center; gap: 6px; font-size: 11px; font-weight: 600; letter-spacing: .04em; padding: 3px 10px; border-radius: 999px; white-space: nowrap; }
.sui-status::before                              { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.sui-status.pending                              { background: #F4F0FF; color: #6941C6; }
.sui-status.approved                             { background: var(--sui-green-bg); color: var(--sui-green); }
.sui-status.rejected                             { background: var(--sui-red-bg); color: var(--sui-red); }
.sui-status.cancelled                            { background: var(--sui-hair); color: var(--sui-muted); }

/* ---------- Timeline (history, approvals) ---------- */
.sui-timeline                                    { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
.sui-timeline li                                 { display: grid; grid-template-columns: 16px 1fr; gap: 10px; padding-bottom: 14px; position: relative; }
.sui-timeline li::before                         { content: ""; position: absolute; left: 7px; top: 14px; bottom: 0; width: 2px; background: var(--sui-hair); }
.sui-timeline li:last-child::before              { display: none; }
.sui-timeline .dot                               { width: 16px; height: 16px; border-radius: 50%; background: var(--sui-card); border: 2px solid var(--sui-border); box-sizing: border-box; margin-top: 1px; }
.sui-timeline .dot.accent                        { border-color: var(--sui-accent); background: var(--sui-accent); }
.sui-timeline .dot.green                         { border-color: var(--sui-green); background: var(--sui-green); }
.sui-timeline .dot.red                           { border-color: var(--sui-red); background: var(--sui-red); }
.sui-timeline .t                                 { font-size: 13px; color: var(--sui-ink); }
.sui-timeline .t b                               { font-weight: 600; }
.sui-timeline .m                                 { font-size: 12px; color: var(--sui-muted); }

/* ---------- Tree (organization structure, groups) ---------- */
.sui-tree,
.sui-tree ul                                     { list-style: none; margin: 0; padding: 0; }
.sui-tree ul                                     { margin-left: 14px; padding-left: 18px; border-left: 2px solid var(--sui-hair); }
.sui-tree li                                     { position: relative; padding: 3px 0; }
.sui-tree ul > li::before                        { content: ""; position: absolute; left: -18px; top: 20px; width: 14px; height: 2px; background: var(--sui-hair); }
.sui-tree details > summary                      { list-style: none; cursor: pointer; }
.sui-tree details > summary::-webkit-details-marker { display: none; }
.sui-tree-node                                   { display: flex; align-items: center; gap: 10px; padding: 6px 10px; border-radius: 8px; min-height: 34px; }
.sui-tree-node:hover                             { background: var(--sui-hair); }
.sui-tree-node .caret                            { width: 14px; font-size: 11px; color: var(--sui-faint); transition: transform .15s ease; }
.sui-tree details[open] > summary .caret         { transform: rotate(90deg); }
.sui-tree-node .name                             { font-size: 13px; font-weight: 600; color: var(--sui-ink); }
.sui-tree-node .role                             { font-size: 12px; color: var(--sui-muted); }
.sui-tree-node .count                            { margin-left: auto; font-size: 11px; font-weight: 600; color: var(--sui-muted); background: var(--sui-hair); border-radius: 999px; padding: 1px 8px; }
.sui-tree-node.group .name                       { color: var(--sui-accent); }

/* ---------- Charts ---------- */
.sui-chart                                       { display: flex; flex-direction: column; gap: 10px; }
.sui-chart-head                                  { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; flex-wrap: wrap; }
.sui-chart-title                                 { font-size: 14px; font-weight: 600; margin: 0; color: var(--sui-ink); }
.sui-chart-sub                                   { font-size: 12px; color: var(--sui-muted); margin: 2px 0 0; }
.sui-legend                                      { display: flex; flex-wrap: wrap; gap: 6px 14px; font-size: 12px; color: var(--sui-ink-2); }
.sui-legend span::before                         { content: ""; display: inline-block; width: 10px; height: 10px; border-radius: 3px; background: var(--c, var(--sui-series-1)); margin-right: 6px; vertical-align: -1px; }
.sui-chart svg                                   { width: 100%; height: auto; display: block; }
.sui-chart svg text                              { font-family: inherit; font-size: 11px; fill: var(--sui-muted); }
.sui-chart .grid line                            { stroke: var(--sui-grid); stroke-width: 1; }
.sui-chart .axis line                            { stroke: var(--sui-border); }
.sui-chart .series path                          { fill: none; stroke: var(--c, var(--sui-series-1)); stroke-width: 2; stroke-linejoin: round; stroke-linecap: round; }
.sui-chart .series .area                         { fill: var(--c, var(--sui-series-1)); opacity: .08; stroke: none; }
.sui-chart .series circle                        { fill: var(--c, var(--sui-series-1)); stroke: var(--sui-card); stroke-width: 2; r: 4; }
.sui-chart .label                                { font-size: 11px; font-weight: 600; fill: var(--sui-ink-2); }
.sui-tooltip                                     { position: absolute; pointer-events: none; background: var(--sui-ink); color: #fff; font-size: 12px; padding: 6px 9px; border-radius: 7px; white-space: nowrap; transform: translate(-50%, calc(-100% - 10px)); opacity: 0; transition: opacity .1s ease; }
.sui-tooltip.on                                  { opacity: 1; }
.sui-tooltip b                                   { font-weight: 600; }
/* Horizontal bars in HTML (rank, share) */
.sui-bars                                        { display: grid; grid-template-columns: max-content 1fr max-content; gap: 8px 12px; align-items: center; font-size: 13px; }
.sui-bars .k                                     { color: var(--sui-ink-2); }
.sui-bars .track                                 { height: 10px; background: var(--sui-track); border-radius: 4px; overflow: hidden; }
.sui-bars .fill                                  { height: 100%; width: var(--w, 0%); background: var(--c, var(--sui-series-1)); border-radius: 0 4px 4px 0; }
.sui-bars .v                                     { font-variant-numeric: tabular-nums; font-weight: 600; color: var(--sui-ink); text-align: right; }
/* Utilization meter (spent / available / over) */
.sui-meter                                       { display: flex; height: 8px; border-radius: 4px; background: var(--sui-track); overflow: hidden; gap: 2px; }
.sui-meter .spent                                { background: var(--sui-spent); width: var(--w, 0%); }
.sui-meter .over                                 { background: var(--sui-red); width: var(--w, 0%); }
.sui-meter-row                                   { display: grid; grid-template-columns: 1fr auto; gap: 4px 12px; align-items: center; font-size: 12px; color: var(--sui-muted); }
.sui-meter-row .sui-meter                         { grid-column: 1 / -1; }
/* Hero number */
.sui-hero                                        { display: flex; flex-direction: column; gap: 2px; }
.sui-hero .l                                     { font-size: 11px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--sui-muted); }
.sui-hero .v                                     { font-size: 30px; font-weight: 700; letter-spacing: -0.03em; font-variant-numeric: tabular-nums; color: var(--sui-ink); line-height: 1.1; }
.sui-hero .d                                     { font-size: 12px; color: var(--sui-muted); }
.sui-hero .d .up                                 { color: var(--sui-green); font-weight: 600; }
.sui-hero .d .down                               { color: var(--sui-red); font-weight: 600; }

@media (max-width: 900px) {
  .sui-layout, .sui-layout.equal                  { grid-template-columns: 1fr; }
  .sui-stat:nth-child(2n)                        { border-right: 0; }
}