/* ═══════════════════════════════════════════════════════════════════════
   slds-theme.css — Salesforce Lightning–style design system
   Reusable across all QuantKraft pages. Clean white canvas, SLDS blue,
   bordered cards, data tables, pills, tabs. Rev. 01 · 2026.06
   ═══════════════════════════════════════════════════════════════════════ */

/* ── 1. TOKENS ──────────────────────────────────────────────────────────── */
:root {
  /* Brand */
  --slds-brand:         #0176d3;
  --slds-brand-hover:   #005fb2;
  --slds-brand-dark:    #014486;
  --slds-brand-darker:  #032d60;
  --slds-link:          #0b5cab;

  /* Neutrals */
  --slds-bg:            #f3f3f3;  /* app background */
  --slds-surface:       #ffffff;  /* cards / tables */
  --slds-surface-alt:   #fafaf9;  /* table headers, subtle fills */
  --slds-surface-blue:  #ecf5fc;  /* selected nav / hover-brand */
  --slds-border:        #e5e5e5;
  --slds-border-strong: #c9c9c9;
  --slds-text:          #181818;
  --slds-text-weak:     #444444;
  --slds-text-weaker:   #747474;
  --slds-text-inverse:  #ffffff;

  /* Status */
  --slds-success:       #2e844a;
  --slds-success-bg:    #cdefc4;
  --slds-warning:       #a86403;
  --slds-warning-fg:    #dd7a01;
  --slds-warning-bg:    #fef0cd;
  --slds-error:         #ba0517;
  --slds-error-bg:      #feded8;
  --slds-offline:       #747474;

  /* Typography */
  --slds-font:      'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
  --slds-font-mono: 'SF Mono', 'JetBrains Mono', Menlo, Consolas, monospace;

  /* Shape */
  --slds-radius:        0.25rem;
  --slds-radius-pill:   15rem;
  --slds-shadow-card:   0 2px 2px 0 rgba(0,0,0,0.05);
  --slds-shadow-pop:    0 2px 3px 0 rgba(0,0,0,0.16);

  /* Layout */
  --slds-gutter:        1.5rem;
  --slds-inner:         1280px;
}

/* ── 2. RESET / BASE ────────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }

body {
  background: var(--slds-bg);
  color: var(--slds-text);
  font-family: var(--slds-font);
  font-size: 13px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

a { color: var(--slds-link); text-decoration: none; }
a:hover { text-decoration: underline; }

h1, h2, h3, h4 { font-weight: 700; color: var(--slds-text); line-height: 1.25; }

/* ── 3. GLOBAL HEADER (top brand bar) ───────────────────────────────────── */
.slds-header {
  position: sticky; top: 0; z-index: 300;
  height: 50px; display: flex; align-items: center; justify-content: space-between;
  padding: 0 var(--slds-gutter);
  background: var(--slds-surface);
  border-bottom: 1px solid var(--slds-border);
  box-shadow: var(--slds-shadow-card);
}
.slds-brand {
  font-size: 15px; font-weight: 700; letter-spacing: -0.01em;
  color: var(--slds-brand-darker); text-decoration: none;
}
.slds-brand em { font-style: normal; color: var(--slds-brand); }
.slds-header-nav { display: flex; gap: 4px; list-style: none; align-items: center; }
.slds-header-nav a {
  font-size: 13px; color: var(--slds-text-weak); text-decoration: none;
  padding: 6px 12px; border-radius: var(--slds-radius); white-space: nowrap;
  transition: background 0.1s, color 0.1s;
}
.slds-header-nav a:hover { background: var(--slds-bg); color: var(--slds-text); text-decoration: none; }
.slds-header-nav a[aria-current="page"],
.slds-header-nav a.active { color: var(--slds-brand); font-weight: 600; }

/* ── 4. LAYOUT ──────────────────────────────────────────────────────────── */
.slds-page { max-width: var(--slds-inner); margin: 0 auto; padding: var(--slds-gutter); }
.slds-stack > * + * { margin-top: var(--slds-gutter); }

/* ── 5. PAGE HEADER (record-style banner) ───────────────────────────────── */
.slds-page-header {
  background: var(--slds-surface);
  border: 1px solid var(--slds-border);
  border-radius: var(--slds-radius);
  box-shadow: var(--slds-shadow-card);
  padding: 0.75rem 1rem;
}
.slds-page-header__eyebrow {
  font-size: 0.75rem; color: var(--slds-text-weaker);
  letter-spacing: 0.02em; margin-bottom: 0.25rem;
}
.slds-page-header__title { font-size: 1.25rem; font-weight: 700; color: var(--slds-text); }
.slds-page-header__sub { font-size: 0.8125rem; color: var(--slds-text-weak); margin-top: 0.25rem; }

/* ── 6. CARD ────────────────────────────────────────────────────────────── */
.slds-card {
  background: var(--slds-surface);
  border: 1px solid var(--slds-border);
  border-radius: var(--slds-radius);
  box-shadow: var(--slds-shadow-card);
}
.slds-card__header {
  display: flex; align-items: center; justify-content: space-between; gap: 0.75rem;
  padding: 0.75rem 1rem; border-bottom: 1px solid var(--slds-border);
}
.slds-card__title { font-size: 0.9375rem; font-weight: 700; color: var(--slds-text); }
.slds-card__title small { display:block; font-size: 0.75rem; font-weight: 400; color: var(--slds-text-weaker); font-style: italic; margin-top: 2px; }
.slds-card__body { padding: 1rem; }

/* ── 7. BUTTONS ─────────────────────────────────────────────────────────── */
.slds-button {
  display: inline-flex; align-items: center; justify-content: center;
  font-family: inherit; font-size: 0.8125rem; font-weight: 400;
  height: 2rem; padding: 0 1rem; border-radius: var(--slds-radius);
  border: 1px solid var(--slds-border-strong); background: var(--slds-surface);
  color: var(--slds-brand); cursor: pointer; text-decoration: none;
  transition: background 0.1s, border-color 0.1s, color 0.1s; white-space: nowrap;
}
.slds-button:hover { background: var(--slds-bg); text-decoration: none; }
.slds-button--brand { background: var(--slds-brand); border-color: var(--slds-brand); color: #fff; }
.slds-button--brand:hover { background: var(--slds-brand-hover); border-color: var(--slds-brand-hover); }
.slds-button--sm { height: 1.75rem; padding: 0 0.75rem; font-size: 0.75rem; }

/* ── 8. BADGES / PILLS ──────────────────────────────────────────────────── */
.slds-badge {
  display: inline-flex; align-items: center; gap: 0.25rem;
  padding: 0.0625rem 0.5rem; border-radius: var(--slds-radius-pill);
  font-size: 0.6875rem; font-weight: 700; letter-spacing: 0.02em;
  background: #ecebea; color: var(--slds-text-weak); line-height: 1.6;
}
.slds-badge--brand   { background: var(--slds-brand);   color: #fff; }
.slds-badge--green   { background: var(--slds-success);  color: #fff; }
.slds-badge--success { background: var(--slds-success-bg); color: var(--slds-success); }
.slds-badge--warning { background: var(--slds-warning-bg); color: var(--slds-warning); }
.slds-badge--error   { background: var(--slds-error-bg);   color: var(--slds-error); }

/* removable filter pill */
.slds-pill {
  display: inline-flex; align-items: center; gap: 0.375rem;
  background: var(--slds-surface); border: 1px solid var(--slds-border-strong);
  border-radius: var(--slds-radius); padding: 0.125rem 0.5rem;
  font-size: 0.75rem; color: var(--slds-text); margin: 0.125rem;
}
.slds-pill__remove { color: var(--slds-text-weaker); cursor: pointer; font-size: 0.875rem; line-height: 1; }

/* status text helpers */
.slds-status { font-weight: 600; }
.slds-status--success { color: var(--slds-success); }
.slds-status--warning { color: var(--slds-warning); }
.slds-status--error   { color: var(--slds-error); }

/* ── 9. TABS ────────────────────────────────────────────────────────────── */
.slds-tabs { display: flex; overflow-x: auto; border-bottom: 1px solid var(--slds-border); background: var(--slds-surface); }
.slds-tabs::-webkit-scrollbar { height: 0; }
.slds-tab {
  flex-shrink: 0; padding: 0.75rem 1rem; font-size: 0.8125rem; font-weight: 400;
  color: var(--slds-text-weak); background: none; border: none;
  border-bottom: 2px solid transparent; cursor: pointer; white-space: nowrap;
  transition: color 0.1s, border-color 0.1s;
}
.slds-tab:hover { color: var(--slds-brand); }
.slds-tab.active { color: var(--slds-brand); border-bottom-color: var(--slds-brand); font-weight: 600; }

/* ── 10. VERTICAL NAV (left rail) ───────────────────────────────────────── */
.slds-vnav { list-style: none; }
.slds-vnav a {
  display: block; padding: 0.5rem 1rem; font-size: 0.8125rem;
  color: var(--slds-text); text-decoration: none; border-left: 3px solid transparent;
}
.slds-vnav a:hover { background: var(--slds-bg); text-decoration: none; }
.slds-vnav a.active {
  background: var(--slds-surface-blue); border-left-color: var(--slds-brand);
  font-weight: 700; color: var(--slds-brand-darker);
}

/* ── 11. DATA TABLE ─────────────────────────────────────────────────────── */
.slds-table { width: 100%; border-collapse: collapse; font-size: 0.8125rem; background: var(--slds-surface); }
.slds-table thead th {
  text-align: left; padding: 0.5rem; font-size: 0.6875rem; font-weight: 700;
  text-transform: uppercase; letter-spacing: 0.04em; color: #514f4d;
  background: var(--slds-surface-alt); border-bottom: 1px solid var(--slds-border);
  white-space: nowrap;
}
.slds-table tbody td {
  padding: 0.5rem; border-bottom: 1px solid var(--slds-border);
  color: var(--slds-text); vertical-align: middle;
}
.slds-table tbody tr:hover { background: var(--slds-surface-alt); }
.slds-table tbody tr:last-child td { border-bottom: none; }

/* ── 12. STAT TILE ──────────────────────────────────────────────────────── */
.slds-stat { padding: 0.75rem 1rem; }
.slds-stat__label { font-size: 0.6875rem; text-transform: uppercase; letter-spacing: 0.04em; color: var(--slds-text-weaker); margin-bottom: 0.375rem; }
.slds-stat__value { font-size: 1.5rem; font-weight: 700; color: var(--slds-text); line-height: 1; }
.slds-stat__value.is-brand   { color: var(--slds-brand); }
.slds-stat__value.is-success { color: var(--slds-success); }
.slds-stat__value.is-warning { color: var(--slds-warning); }
.slds-stat__value.is-error   { color: var(--slds-error); }
.slds-stat__sub { font-size: 0.6875rem; color: var(--slds-text-weaker); margin-top: 0.375rem; }

/* ── 13. COMBOBOX / FILTER FIELD ────────────────────────────────────────── */
.slds-field-label { font-size: 0.75rem; color: var(--slds-text-weak); margin-bottom: 0.25rem; display: block; }
.slds-combobox {
  display: flex; flex-wrap: wrap; align-items: center; gap: 0.25rem;
  min-height: 2rem; padding: 0.25rem 0.5rem;
  border: 1px solid var(--slds-border-strong); border-radius: var(--slds-radius);
  background: var(--slds-surface); font-size: 0.8125rem;
}

/* ── 14. CALLOUT ────────────────────────────────────────────────────────── */
.slds-callout {
  padding: 0.625rem 0.875rem; border-radius: var(--slds-radius);
  background: var(--slds-warning-bg); border-left: 3px solid var(--slds-warning-fg);
  font-size: 0.8125rem; color: var(--slds-text-weak); line-height: 1.5;
}
.slds-callout--info { background: var(--slds-surface-blue); border-left-color: var(--slds-brand); }

/* ── 15. FOOTER ─────────────────────────────────────────────────────────── */
.slds-footer {
  border-top: 1px solid var(--slds-border); background: var(--slds-surface);
}
.slds-footer__inner {
  max-width: var(--slds-inner); margin: 0 auto; padding: 1rem var(--slds-gutter);
  display: flex; align-items: center; justify-content: space-between; gap: 1rem; flex-wrap: wrap;
}
.slds-footer__brand { font-size: 0.8125rem; font-weight: 700; color: var(--slds-brand-darker); }
.slds-footer__stamp { font-size: 0.75rem; color: var(--slds-text-weaker); }
.slds-footer__links { display: flex; gap: 1rem; list-style: none; }
.slds-footer__links a { font-size: 0.75rem; color: var(--slds-text-weak); }

/* ── 16. GRID HELPERS ───────────────────────────────────────────────────── */
.slds-grid { display: grid; gap: 1rem; }
.slds-grid--2 { grid-template-columns: repeat(2, 1fr); }
.slds-grid--3 { grid-template-columns: repeat(3, 1fr); }
.slds-grid--4 { grid-template-columns: repeat(4, 1fr); }

/* ── 17. RESPONSIVE ─────────────────────────────────────────────────────── */
@media (max-width: 900px) {
  :root { --slds-gutter: 1rem; }
  .slds-grid--3, .slds-grid--4 { grid-template-columns: repeat(2, 1fr); }
  .slds-header-nav { display: none; }
}
@media (max-width: 560px) {
  .slds-grid--2, .slds-grid--3, .slds-grid--4 { grid-template-columns: 1fr; }
}