/* =========================================================================
   STAKK DESIGN SYSTEM — implementerat från Claude Design's "Admin Rehaul".
   Tokens, typografi, base-utilities. Importeras i internal/index.html.
   ========================================================================= */

@import url('https://api.fontshare.com/v2/css?f[]=switzer@300,400,500,600,700,800&display=swap');
@import url('https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@400;500;600&display=swap');

:root {
  /* ── Färgpalett ── */
  --stakk-indigo-50:  #EEECFB;
  --stakk-indigo-100: #D6D1F5;
  --stakk-indigo-200: #ADA4EC;
  --stakk-indigo-300: #8476E2;
  --stakk-indigo-400: #5B48D8;
  --stakk-indigo-500: #3627C9;
  --stakk-indigo-600: #2A1EA0;
  --stakk-indigo-700: #1F1677;

  --stakk-mint-50:  #F3FAF7;
  --stakk-mint-200: #D6F2E9;
  --stakk-mint-400: #7CD2AF;
  --stakk-mint-500: #4FC292;
  --stakk-mint-700: #287B5A;

  --stakk-ink:      #222228;
  --stakk-ink-soft: #4A4A55;
  --stakk-graphite: #6C6C78;
  --stakk-steel:    #9696A3;
  --stakk-mist:     #C8C8D1;
  --stakk-fog:      #EDEDF4;
  --stakk-paper:    #F7F7FB;
  --stakk-white:    #FFFFFF;

  --stakk-success: #1E8A5F;
  --stakk-warning: #C77A00;
  --stakk-danger:  #C4321C;
  --stakk-info:    var(--stakk-indigo-500);

  /* ── Semantic-tokens (override existing) ── */
  --color-bg:            var(--stakk-paper);
  --color-bg-subtle:     var(--stakk-fog);
  --color-bg-inverse:    var(--stakk-ink);
  --color-surface:       var(--stakk-white);
  --color-surface-alt:   var(--stakk-paper);
  --color-border:        var(--stakk-mist);
  --color-border-subtle: var(--stakk-fog);
  --color-border-strong: var(--stakk-ink);
  --color-text:          var(--stakk-ink);
  --color-text-muted:    var(--stakk-graphite);
  --color-text-subtle:   var(--stakk-steel);
  --color-text-inverse:  var(--stakk-white);

  --admin-bg:            var(--stakk-paper);
  --admin-surface:       var(--stakk-white);
  --admin-surface-alt:   var(--stakk-fog);
  --admin-bg-elevated:   var(--stakk-white);
  --admin-border:        var(--stakk-mist);
  --admin-border-subtle: var(--stakk-fog);
  --admin-warning-bg:    #FFF6E5;
  --admin-warning-fg:    var(--stakk-warning);
  --admin-danger-bg:     #FDEEEB;
  --admin-danger-fg:     var(--stakk-danger);
  --admin-success-bg:    var(--stakk-mint-50);
  --admin-success-fg:    var(--stakk-success);
  --admin-info-bg:       var(--stakk-indigo-50);
  --admin-info-fg:       var(--stakk-indigo-500);

  --stakk-indigo-500: #3627C9;

  /* ── Typografi ── */
  --font-sans: 'Switzer', 'Switzer Variable', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-mono: 'JetBrains Mono', ui-monospace, 'SF Mono', Menlo, monospace;

  /* ── Spacing (4px grid) ── */
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.5rem;
  --space-6: 2rem;
  --space-7: 2.5rem;
  --space-8: 3rem;

  /* ── Radii ── */
  --radius-xs:   4px;
  --radius-sm:   6px;
  --radius-md:   10px;
  --radius-lg:   16px;
  --radius-pill: 999px;

  /* ── Shadows (ink-tintade) ── */
  --shadow-xs: 0 1px 2px rgba(34, 34, 40, 0.06);
  --shadow-sm: 0 2px 6px rgba(34, 34, 40, 0.08);
  --shadow-md: 0 8px 24px rgba(34, 34, 40, 0.08), 0 2px 6px rgba(34, 34, 40, 0.04);
  --shadow-lg: 0 24px 48px rgba(34, 34, 40, 0.12), 0 4px 12px rgba(34, 34, 40, 0.06);

  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --dur-fast:   120ms;
  --dur-base:   220ms;
}

/* ── Base reset / body ── */
body {
  font-family: var(--font-sans);
  font-size: 14px;
  line-height: 1.45;
  color: var(--color-text);
  background: var(--admin-bg);
  -webkit-font-smoothing: antialiased;
  font-feature-settings: 'ss01', 'cv11', 'tnum';
  margin: 0;
}

button { font-family: inherit; }

/* ── Mono / tabular numbers ── */
.mono,
.t-mono,
.t-mono-cell,
.t-num,
.font-mono {
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
  letter-spacing: 0;
}

/* ── Typografi-utilities ── */
.t-eyebrow {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-text-muted);
}

.page-title {
  font-size: 28px;
  line-height: 1.05;
  letter-spacing: -0.02em;
  font-weight: 600;
  color: var(--color-text);
  margin: 0;
}

/* ── Källtaggar — SHOPIFY / FORTNOX / ONGOING ── */
.source-tag {
  display: inline-flex;
  align-items: center;
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  font-weight: 600;
  padding: 2px 7px;
  border-radius: 3px;
  border: 1px solid currentColor;
  background: transparent;
}
.source-tag--shopify { color: #95BF47; }
.source-tag--fortnox { color: var(--stakk-indigo-500); }
.source-tag--ongoing { color: var(--stakk-warning); }
.source-tag--mixed   { color: var(--stakk-graphite); }

/* ── Pills (redesign) ── */
.pill {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 2px 9px;
  border-radius: var(--radius-pill);
  font-size: 11px;
  font-weight: 500;
  white-space: nowrap;
  border: 1px solid transparent;
  line-height: 1.4;
}
.pill--success { background: var(--stakk-mint-200); color: var(--stakk-mint-700); }
.pill--warning { background: #FFF1D6; color: var(--stakk-warning); }
.pill--danger  { background: #FDE5E0; color: var(--stakk-danger); }
.pill--info    { background: var(--stakk-indigo-50); color: var(--stakk-indigo-600); }
.pill--neutral { background: var(--stakk-fog); color: var(--stakk-ink-soft); }
.pill--outline { background: transparent; border-color: currentColor; }
.pill--dot::before {
  content: '';
  width: 6px; height: 6px;
  border-radius: 50%;
  background: currentColor;
  display: inline-block;
}

/* ── KPI-kort (redesign — tightare, sparkline-friendly) ── */
.k-card {
  background: var(--admin-surface);
  border: 1px solid var(--admin-border);
  border-radius: var(--radius-md);
  padding: 16px 18px;
  min-width: 180px;
  position: relative;
  transition: border-color var(--dur-base) var(--ease-out);
}
.k-card:hover { border-color: var(--stakk-ink); }
.k-card__label {
  font-size: 11px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--color-text-muted);
  font-weight: 600;
  margin-bottom: 8px;
  display: flex;
  align-items: center;
  gap: 6px;
}
.k-card__value {
  font-family: var(--font-mono);
  font-size: 24px;
  font-weight: 500;
  letter-spacing: -0.01em;
  color: var(--color-text);
  font-variant-numeric: tabular-nums;
  line-height: 1.1;
}
.k-card__sub {
  margin-top: 4px;
  font-size: 12px;
  color: var(--color-text-muted);
  letter-spacing: -0.005em;
}

/* ── Cards (general — för rapporter, listor) ── */
.card {
  background: var(--admin-surface);
  border: 1px solid var(--admin-border);
  border-radius: var(--radius-md);
  overflow: hidden;
  margin-bottom: 18px;
}
.card__head {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 12px;
  padding: 16px 20px 12px;
  border-bottom: 1px solid var(--admin-border-subtle);
}
.card__title {
  font-size: 15px;
  font-weight: 600;
  letter-spacing: -0.01em;
  margin: 0;
  color: var(--color-text);
}
.card__sub {
  margin: 4px 0 0;
  font-size: 12px;
  color: var(--color-text-muted);
  line-height: 1.5;
}
.card__body { padding: 16px 20px; }

/* ── Tabeller (Linear/Stripe-stil) ── */
.t-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
}
.t-table th {
  text-align: left;
  padding: 10px 12px;
  font-size: 10px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--color-text-muted);
  border-bottom: 1px solid var(--admin-border);
  background: var(--admin-surface-alt);
}
.t-table td {
  padding: 10px 12px;
  border-bottom: 1px solid var(--admin-border-subtle);
  font-feature-settings: 'tnum';
}
.t-table tr:last-child td { border-bottom: 0; }
.t-table tr:hover td { background: var(--admin-surface-alt); }
.t-mono-cell {
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
  font-size: 12px;
}
.t-num {
  font-family: var(--font-mono);
  text-align: right;
  font-variant-numeric: tabular-nums;
}
.muted { color: var(--color-text-muted); }

/* ── Knappar (tightare, mer designat) ── */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 7px 14px;
  font-family: var(--font-sans);
  font-weight: 500;
  font-size: 13px;
  letter-spacing: -0.005em;
  border-radius: var(--radius-sm);
  border: 1px solid var(--admin-border);
  background: var(--admin-surface);
  color: var(--color-text);
  cursor: pointer;
  transition: all var(--dur-fast) var(--ease-out);
  white-space: nowrap;
}
.btn:hover { border-color: var(--stakk-ink); }
.btn--primary {
  background: var(--stakk-ink);
  color: var(--stakk-white);
  border-color: var(--stakk-ink);
}
.btn--primary:hover { background: var(--stakk-indigo-500); border-color: var(--stakk-indigo-500); }
.btn--accent {
  background: var(--stakk-indigo-500);
  color: var(--stakk-white);
  border-color: var(--stakk-indigo-500);
}
.btn--accent:hover { background: var(--stakk-indigo-600); border-color: var(--stakk-indigo-600); }
.btn--ghost { background: transparent; border-color: transparent; }
.btn--ghost:hover { border-color: var(--admin-border); }
.btn--sm { padding: 4px 10px; font-size: 12px; }

/* ── Chip-toggle (för filter-chip) ── */
.chip-toggle {
  padding: 5px 11px;
  font-family: var(--font-sans);
  font-weight: 500;
  font-size: 12px;
  border: 1px solid var(--admin-border);
  background: var(--admin-surface);
  border-radius: var(--radius-pill);
  cursor: pointer;
  color: var(--color-text);
  transition: all var(--dur-fast) var(--ease-out);
}
.chip-toggle:hover { border-color: var(--stakk-ink); }
.chip-toggle--on {
  background: var(--stakk-ink);
  color: var(--stakk-white);
  border-color: var(--stakk-ink);
}

/* ── Form-inputs ── */
input[type="text"],
input[type="date"],
input[type="number"],
input[type="email"],
input[type="password"],
input[type="search"],
select,
textarea {
  font-family: var(--font-sans);
  font-size: 13px;
  padding: 7px 10px;
  border: 1px solid var(--admin-border);
  border-radius: var(--radius-sm);
  background: var(--admin-surface);
  color: var(--color-text);
  transition: border-color var(--dur-fast) var(--ease-out);
}
input:focus, select:focus, textarea:focus {
  outline: none;
  border-color: var(--stakk-ink);
  box-shadow: 0 0 0 3px var(--stakk-indigo-50);
}

/* ── Sparkline-stöd ── */
.sparkline {
  display: inline-block;
  vertical-align: middle;
}
.sparkline path { fill: none; stroke: var(--stakk-indigo-500); stroke-width: 1.5; }
.sparkline--success path { stroke: var(--stakk-success); }
.sparkline--danger path  { stroke: var(--stakk-danger); }

/* ── Status-dots (för sync-/health-indikatorer) ── */
.dot-status {
  display: inline-block;
  width: 8px; height: 8px;
  border-radius: 50%;
  vertical-align: baseline;
}
.dot-status--ok   { background: var(--stakk-success); }
.dot-status--warn { background: var(--stakk-warning); }
.dot-status--err  { background: var(--stakk-danger); }

/* ── Diff/delta-färgning för tabular ── */
.num--up    { color: var(--stakk-success); }
.num--down  { color: var(--stakk-danger); }
.num--zero  { color: var(--color-text-muted); }


/* ═══════════════════════════════════════════════════════════════════════
   SHELL — svart rail + topbar enligt Claude Design's rehaul
   ═══════════════════════════════════════════════════════════════════════ */

.admin-rail,
aside.admin-rail {
  background: var(--stakk-ink) !important;
  color: var(--stakk-mist);
  padding: 14px 0;
  border-right: 1px solid #000;
}
.admin-rail__brand {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 4px 16px 18px;
  border-bottom: 1px solid #2e2e36;
  margin-bottom: 10px;
}
.admin-rail__logo {
  width: 22px; height: 22px;
  background: var(--stakk-indigo-500);
  border-radius: 5px;
  display: grid; place-items: center;
  color: white;
  font-weight: 700;
  font-size: 13px;
}
.admin-rail__name {
  color: white;
  font-weight: 600;
  font-size: 14px;
  letter-spacing: -0.01em;
}
.admin-rail__env {
  margin-left: auto;
  font-family: var(--font-mono);
  font-size: 9px;
  letter-spacing: 0.08em;
  color: var(--stakk-mint-400);
  border: 1px solid var(--stakk-mint-700);
  padding: 2px 5px;
  border-radius: 3px;
  text-transform: uppercase;
}

/* Section headings i rail-en — uppercase, små */
.admin-rail__section-head,
.admin-rail h2,
.admin-rail__group-title {
  display: flex;
  align-items: center;
  width: 100%;
  background: none;
  border: 0;
  color: #80808c;
  padding: 6px 16px;
  font-size: 10px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  font-weight: 600;
  font-family: inherit;
  cursor: pointer;
  margin: 4px 0;
}

/* Rail items — mörkt tema med vänster indigo-bord när aktiv */
.admin-rail__item,
.admin-rail button:not(.admin-rail__section-head) {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 6px 16px !important;
  color: #a8a8b3 !important;
  text-decoration: none;
  border: 0;
  background: none !important;
  font: inherit;
  text-align: left;
  width: 100%;
  cursor: pointer;
  border-left: 2px solid transparent;
  font-size: 13px;
  letter-spacing: -0.005em;
  transition: all var(--dur-fast) var(--ease-out);
}
.admin-rail__item:hover,
.admin-rail button:not(.admin-rail__section-head):hover {
  color: white !important;
  background: #2a2a32 !important;
}
.admin-rail__item--active,
.admin-rail__item.active {
  color: white !important;
  background: linear-gradient(90deg, rgba(54,39,201,0.22), transparent) !important;
  border-left-color: var(--stakk-indigo-400) !important;
}
.admin-rail__item svg {
  width: 14px; height: 14px;
  opacity: 0.7;
  flex-shrink: 0;
}
.admin-rail__item--active svg {
  opacity: 1;
  color: var(--stakk-indigo-300);
}

/* ── Topbar ── */
.admin-topbar {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 24px;
  background: var(--stakk-white);
  border-bottom: 1px solid var(--stakk-fog);
  position: sticky;
  top: 0;
  z-index: 5;
}
.admin-crumb {
  font-size: 12px;
  color: var(--stakk-graphite);
  display: flex;
  align-items: center;
  gap: 6px;
}
.admin-crumb b {
  color: var(--stakk-ink);
  font-weight: 600;
}
.admin-crumb svg { width: 11px; height: 11px; }
.admin-topbar__spacer { flex: 1; }
.admin-cmdk {
  display: flex;
  align-items: center;
  gap: 8px;
  background: var(--stakk-fog);
  border: 1px solid transparent;
  padding: 5px 8px 5px 10px;
  border-radius: 6px;
  color: var(--stakk-graphite);
  font-size: 12px;
  min-width: 280px;
  cursor: pointer;
}
.admin-cmdk:hover {
  background: var(--stakk-paper);
  border-color: var(--stakk-mist);
}
.admin-cmdk-key {
  margin-left: auto;
  font-family: var(--font-mono);
  font-size: 10px;
  background: white;
  border: 1px solid var(--stakk-mist);
  padding: 1px 5px;
  border-radius: 3px;
  color: var(--stakk-ink-soft);
}
.admin-topbar__btn {
  display: flex;
  align-items: center;
  gap: 6px;
  background: transparent;
  border: 1px solid var(--stakk-mist);
  color: var(--stakk-ink-soft);
  padding: 4px 10px;
  border-radius: 5px;
  font-size: 12px;
  font-weight: 500;
  cursor: pointer;
}
.admin-topbar__btn:hover { background: var(--stakk-fog); }
.admin-sync-dot {
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--stakk-success);
  box-shadow: 0 0 0 3px rgba(30,138,95,0.16);
}
.admin-avatar {
  width: 24px; height: 24px;
  border-radius: 5px;
  background: var(--stakk-indigo-500);
  color: white;
  display: grid; place-items: center;
  font-size: 11px;
  font-weight: 600;
}

/* ── Page-head ── */
.page-head {
  display: flex;
  align-items: flex-start;
  gap: 24px;
  margin-bottom: 22px;
}
.page-sub {
  color: var(--stakk-graphite);
  font-size: 13px;
  margin-top: 4px;
}
.page-actions {
  margin-left: auto;
  display: flex;
  gap: 8px;
  align-items: center;
}

/* ── Seg-toggle (för "7d/Idag/Vecka/Månad") ── */
.seg {
  display: inline-flex;
  background: var(--stakk-fog);
  padding: 2px;
  border-radius: 5px;
  gap: 1px;
}
.seg-item {
  border: 0;
  background: transparent;
  padding: 3px 9px;
  font-size: 11px;
  font-weight: 500;
  color: var(--stakk-graphite);
  border-radius: 4px;
  font-family: inherit;
  cursor: pointer;
}
.seg-item.active {
  background: white;
  color: var(--stakk-ink);
  box-shadow: 0 1px 2px rgba(0,0,0,0.05);
}

/* ── KPI-row (5-kolumns med 1px-gap) ── */
.kpi-row {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 1px;
  background: var(--stakk-mist);
  border: 1px solid var(--stakk-mist);
  border-radius: 6px;
  overflow: hidden;
}
.kpi {
  background: white;
  padding: 14px 16px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.kpi-lbl {
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--stakk-graphite);
}
.kpi-val {
  font-family: var(--font-mono);
  font-size: 22px;
  font-weight: 500;
  letter-spacing: -0.02em;
  color: var(--stakk-ink);
  line-height: 1;
}
.kpi-val .unit {
  font-size: 14px;
  color: var(--stakk-graphite);
  margin-left: 2px;
}
.kpi-foot {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 11px;
  color: var(--stakk-graphite);
}
.delta {
  font-family: var(--font-mono);
  font-weight: 500;
  font-size: 11px;
}
.delta.up { color: var(--stakk-success); }
.delta.down { color: var(--stakk-danger); }
.delta.flat { color: var(--stakk-graphite); }
.kpi-spark { height: 22px; margin-top: 2px; }

/* ── Data-tabell — Linear/Stripe-stil ── */
table.dt {
  width: 100%;
  border-collapse: collapse;
  font-size: 12px;
}
table.dt th {
  text-align: left;
  font-size: 10px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--stakk-graphite);
  font-weight: 600;
  padding: 8px 12px;
  background: var(--stakk-paper);
  border-bottom: 1px solid var(--stakk-mist);
}
table.dt th.num,
table.dt td.num {
  text-align: right;
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
}
table.dt td {
  padding: 7px 12px;
  border-bottom: 1px solid var(--stakk-fog);
  color: var(--stakk-ink);
  vertical-align: middle;
}
table.dt tr:hover td { background: var(--stakk-paper); }
table.dt tr.totals td {
  background: var(--stakk-fog);
  font-weight: 600;
  border-bottom: 0;
}

/* ── Cell-bar (för Pareto/share-visualisering) ── */
.cell-bar {
  position: relative;
  background: var(--stakk-fog);
  height: 4px;
  border-radius: 2px;
  overflow: hidden;
  width: 80px;
  display: inline-block;
  vertical-align: middle;
}
.cell-bar > i {
  position: absolute;
  inset: 0 auto 0 0;
  background: var(--stakk-indigo-500);
  display: block;
}
.cell-bar.mint > i { background: var(--stakk-mint-500); }
.cell-bar.warn > i { background: var(--stakk-warning); }
.cell-bar.danger > i { background: var(--stakk-danger); }

/* ── Card head/body refined ── */
.card__head {
  align-items: center;
}
.card-tools {
  margin-left: auto;
  display: flex;
  gap: 6px;
  align-items: center;
}

/* ── Backwards compat: existing .pill tones map to new design ── */
.pill--success::before,
.pill.ok::before {
  content: '';
  width: 5px; height: 5px;
  border-radius: 50%;
  background: currentColor;
  display: inline-block;
}
.pill.ok      { color: var(--stakk-success); background: var(--stakk-mint-100); }
.pill.warn    { color: #8a5500; background: #FFEFD0; }
.pill.danger  { color: var(--stakk-danger); background: #FCE4DF; }
.pill.neutral { color: var(--stakk-ink-soft); background: var(--stakk-fog); }
.pill.info    { color: var(--stakk-indigo-600); background: var(--stakk-indigo-50); }

/* ── Heatmap cells ── */
.heat-cell {
  padding: 10px;
  border-radius: 4px;
  font-family: var(--font-mono);
}
.heat-cell__count {
  font-size: 16px;
  font-weight: 500;
  line-height: 1;
}
.heat-cell__date {
  font-size: 10px;
  opacity: 0.85;
  margin-bottom: 2px;
}
.heat-cell__val {
  font-size: 10px;
  opacity: 0.7;
  margin-top: 4px;
}

/* ── Spark SVG (sparklines) ── */
.spark {
  width: 100%;
  height: 100%;
  display: block;
}

/* ── Positiva/negativa cues ── */
.pos { color: var(--stakk-success); }
.neg { color: var(--stakk-danger); }
.mute { color: var(--stakk-graphite); }

/* ── Linear-style row hover för tabeller utan .dt-klass ── */
.t-table tbody tr {
  transition: background var(--dur-fast) var(--ease-out);
}