/* Stakk Admin, redesign 2026-09.
   Laddas efter stakk-design.css och den inbäddade stilen i index.html.
   Nya komponenter har prefixet rx-. Gamla klasser skrivs bara över där
   skalet (meny, topprad, bakgrund) ska se nytt ut. */

:root {
  --rx-ground: #F6F5F1;
  --rx-rail: #EFEDE7;
  --rx-surface: #FFFFFF;
  --rx-surface-alt: #FAF9F6;
  --rx-border: #E6E3DC;
  --rx-border-strong: #DCD9D0;
  --rx-divider: #F0EEE9;
  --rx-ink: #17161C;
  --rx-ink-2: #45434E;
  --rx-ink-3: #5F5D68;
  --rx-ink-4: #6E6C77;
  --rx-accent: #4338CA;
  --rx-accent-ink: #3A30B8;
  --rx-accent-soft: #EEEDFB;
  --rx-accent-softer: #F4F3FD;
  --rx-ok: #1C6E45;
  --rx-ok-bg: #E3F3EA;
  --rx-ok-dot: #1F8A55;
  --rx-warn: #8A4B00;
  --rx-warn-bg: #FBEBD0;
  --rx-warn-soft: #FFFAF0;
  --rx-warn-border: #F1D9A8;
  --rx-warn-dot: #C2760A;
  --rx-danger: #A12C1E;
  --rx-danger-bg: #FBE4E1;
  --rx-neutral-bg: #ECEAE4;

  /* Befintliga admin-token pekas om till den nya paletten */
  --admin-canvas: var(--rx-ground);
  --admin-border: var(--rx-border);
  --admin-border-strong: var(--rx-border-strong);
  --admin-surface-alt: var(--rx-surface-alt);
  --admin-row-hover: #F7F6F2;
  --admin-rail: var(--rx-rail);
  --admin-rail-soft: #E4E1D9;
  --admin-rail-text: var(--rx-ink-2);
  --admin-rail-text-active: var(--rx-ink);
  --admin-topbar-h: 60px;
}

body.admin { background: var(--rx-ground); }

/* ── Sidomeny ─────────────────────────────────────────────── */
.rx-rail { background: var(--rx-rail); border-right: 1px solid #E2DFD7; color: var(--rx-ink); display: flex; flex-direction: column; gap: 16px; padding: 18px 14px; position: sticky; top: 0; height: 100vh; overflow-y: auto; z-index: 40; }
.rx-rail__brand { display: flex; align-items: center; gap: 10px; padding: 0 6px; font-weight: 650; font-size: 16px; }
.rx-rail__mark { width: 30px; height: 30px; border-radius: 8px; background: var(--rx-accent); color: #fff; display: grid; place-items: center; font-weight: 700; font-size: 15px; }
.rx-rail__env { margin-left: auto; font-size: 11px; font-weight: 500; color: var(--rx-ink-3); border: 1px solid #D9D6CD; border-radius: 6px; padding: 2px 6px; }
.rx-rail__group { display: flex; flex-direction: column; gap: 2px; }
.rx-rail__label { font-size: 11px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--rx-ink-4); padding: 0 10px 6px; }
.rx-rail__item { display: flex; align-items: center; gap: 10px; height: 36px; padding: 0 10px; border-radius: 8px; border: 0; background: transparent; color: var(--rx-ink-2); font: inherit; font-size: 14px; text-align: left; width: 100%; cursor: pointer; }
.rx-rail__item:hover { background: #E7E4DC; color: var(--rx-ink); }
.rx-rail__item--active, .rx-rail__item--active:hover { background: #fff; color: var(--rx-ink); font-weight: 600; box-shadow: 0 0 0 1px #E2DFD7, 0 1px 2px rgba(23,22,28,.05); }
.rx-rail__item--active .rx-rail__icon { color: var(--rx-accent); }
.rx-rail__icon { width: 16px; height: 16px; display: grid; place-items: center; flex: 0 0 16px; }
.rx-rail__text { flex: 1; }
.rx-rail__foot { margin-top: auto; display: flex; flex-direction: column; gap: 2px; }
.rx-rail__user { display: flex; align-items: center; gap: 10px; padding: 12px 10px 4px; border-top: 1px solid #E2DFD7; margin-top: 8px; font-size: 13px; }
.rx-rail__avatar { width: 30px; height: 30px; border-radius: 999px; background: #D9D6F6; color: #2F25A8; display: grid; place-items: center; font-weight: 600; flex: 0 0 30px; }
.rx-rail__logout { margin-left: auto; width: 32px; height: 32px; border: 0; background: transparent; border-radius: 8px; color: var(--rx-ink-3); cursor: pointer; display: grid; place-items: center; }
.rx-rail__logout:hover { background: #E7E4DC; color: var(--rx-ink); }

/* ── Topprad ──────────────────────────────────────────────── */
.admin-topbar { background: var(--rx-ground); border-bottom: 1px solid var(--rx-border); padding: 0 32px; }
.rx-crumbs { display: flex; align-items: center; gap: 8px; font-size: 13px; color: var(--rx-ink-3); }
.rx-crumbs__current { color: var(--rx-ink); font-weight: 600; }
.rx-chip { display: inline-flex; align-items: center; gap: 8px; height: 30px; padding: 0 10px; border-radius: 999px; background: #fff; border: 1px solid var(--rx-border); font-size: 12.5px; color: var(--rx-ink-2); white-space: nowrap; }
.rx-chip--warn { background: #FDF4E3; border-color: var(--rx-warn-border); color: #7A4300; }
.rx-dot { width: 7px; height: 7px; border-radius: 999px; background: var(--rx-ok-dot); flex: 0 0 7px; }
.rx-dot--warn { background: var(--rx-warn-dot); }
.rx-dot--danger { background: var(--rx-danger); }
.rx-dot--neutral { background: #9C9AA3; }

/* ── Arbetsyta ────────────────────────────────────────────── */
.rx-ws { padding: 24px 32px 48px; display: flex; flex-direction: column; gap: 18px; max-width: 1480px; }
.rx-ws__head { display: flex; align-items: flex-end; gap: 16px; }
.rx-ws__titles { flex: 1; display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.rx-ws__title { font-size: 26px; font-weight: 650; letter-spacing: -.02em; color: var(--rx-ink); }
.rx-ws__desc { font-size: 14px; color: var(--rx-ink-3); }
.rx-ws__actions { display: flex; gap: 8px; align-items: center; }
.rx-tabs { display: flex; gap: 4px; border-bottom: 1px solid var(--rx-border); overflow-x: auto; }
.rx-tab { display: flex; align-items: center; gap: 8px; height: 40px; padding: 0 12px; margin-bottom: -1px; border: 0; border-bottom: 2px solid transparent; background: transparent; font: inherit; font-size: 13.5px; color: var(--rx-ink-3); cursor: pointer; white-space: nowrap; }
.rx-tab:hover { color: var(--rx-ink); }
.rx-tab--active { color: var(--rx-ink); font-weight: 600; border-bottom-color: var(--rx-accent); }
.rx-count { font-size: 11.5px; font-weight: 600; border-radius: 999px; padding: 1px 7px; background: var(--rx-neutral-bg); color: var(--rx-ink-3); font-variant-numeric: tabular-nums; }
.rx-count--warn { background: var(--rx-warn-bg); color: var(--rx-warn); }
.rx-count--accent { background: #E6E4FA; color: var(--rx-accent-ink); }

/* Gamla sidor som visas under en flik: arbetsytan har redan rubriken */
.rx-ws__body > .admin-page { padding: 0; }
.rx-ws__body .admin-page__head .admin-page__title,
.rx-ws__body .admin-page > .page-title { display: none; }

/* ── Byggstenar ───────────────────────────────────────────── */
.rx-grid { display: grid; gap: 16px; }
.rx-grid--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.rx-grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.rx-grid--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.rx-grid--6 { grid-template-columns: repeat(6, minmax(0, 1fr)); }
.rx-span-2 { grid-column: span 2; }
@media (max-width: 1100px) { .rx-grid--4, .rx-grid--6 { grid-template-columns: repeat(2, minmax(0, 1fr)); } .rx-grid--3 { grid-template-columns: 1fr; } .rx-span-2 { grid-column: auto; } }

.rx-panel { background: var(--rx-surface); border: 1px solid var(--rx-border); border-radius: 14px; padding: 18px 20px; display: flex; flex-direction: column; gap: 14px; min-width: 0; }
.rx-panel--flush { padding: 0; overflow: hidden; gap: 0; }
.rx-panel--warn { border-color: var(--rx-warn-border); }
.rx-panel__head { display: flex; align-items: baseline; gap: 10px; }
.rx-panel--flush .rx-panel__head { padding: 16px 18px 12px; }
.rx-panel__title { font-size: 15px; font-weight: 600; color: var(--rx-ink); }
.rx-panel__sub { font-size: 13px; color: var(--rx-ink-3); }
.rx-panel__actions { margin-left: auto; display: flex; gap: 12px; align-items: center; font-size: 13px; font-weight: 600; }

.rx-kpi { background: var(--rx-surface); border: 1px solid var(--rx-border); border-radius: 12px; padding: 14px 16px; display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.rx-kpi--warn { border-color: var(--rx-warn-border); }
.rx-kpi__label { font-size: 12.5px; color: var(--rx-ink-3); }
.rx-kpi__value { font-size: 24px; font-weight: 650; letter-spacing: -.01em; color: var(--rx-ink); font-variant-numeric: tabular-nums; line-height: 1.2; }
.rx-kpi--warn .rx-kpi__value { color: var(--rx-warn); }
.rx-kpi--ok .rx-kpi__value { color: var(--rx-ok); }
.rx-kpi__sub { font-size: 12.5px; color: var(--rx-ink-3); font-variant-numeric: tabular-nums; }

.rx-pill { display: inline-flex; align-items: center; gap: 5px; font-size: 12px; font-weight: 600; border-radius: 999px; padding: 3px 9px; white-space: nowrap; background: var(--rx-neutral-bg); color: var(--rx-ink-2); }
.rx-pill--ok { background: var(--rx-ok-bg); color: var(--rx-ok); }
.rx-pill--warn { background: var(--rx-warn-bg); color: var(--rx-warn); }
.rx-pill--danger { background: var(--rx-danger-bg); color: var(--rx-danger); }
.rx-pill--info { background: #E6E4FA; color: var(--rx-accent-ink); }

.rx-callout { display: flex; align-items: flex-start; gap: 12px; padding: 12px 14px; border-radius: 12px; font-size: 13.5px; line-height: 1.5; background: var(--rx-accent-softer); border: 1px solid #DAD7F7; color: #2F2A6B; }
.rx-callout--warn { background: var(--rx-warn-soft); border-color: var(--rx-warn-border); color: var(--rx-ink-2); }
.rx-callout__body { flex: 1; }
.rx-callout__title { font-weight: 600; color: var(--rx-ink); }
.rx-callout__action { flex-shrink: 0; font-weight: 600; }

.rx-table { width: 100%; border-collapse: collapse; font-size: 13.5px; }
.rx-table th { font-weight: 500; font-size: 12.5px; color: var(--rx-ink-3); text-align: left; padding: 10px 12px; border-bottom: 1px solid var(--rx-border); background: var(--rx-surface-alt); white-space: nowrap; position: sticky; top: 0; }
.rx-table td { padding: 11px 12px; border-bottom: 1px solid var(--rx-divider); vertical-align: middle; }
.rx-table tr:last-child td { border-bottom: 0; }
.rx-table tbody tr.rx-row--click { cursor: pointer; }
.rx-table tbody tr.rx-row--click:hover td { background: #F9F8F5; }
.rx-table tbody tr.rx-row--selected td { background: var(--rx-accent-softer); }
.rx-table tbody tr.rx-row--selected td:first-child { box-shadow: inset 3px 0 0 var(--rx-accent); }
.rx-table tbody tr.rx-row--warn td { background: var(--rx-warn-soft); }
.rx-num { text-align: right; font-variant-numeric: tabular-nums; }
.rx-mono { font-family: var(--font-mono); font-size: 12.5px; }
.rx-muted { color: var(--rx-ink-3); }
.rx-faint { color: #9C9AA3; }

.rx-filters { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.rx-filter { height: 34px; padding: 0 12px; border: 1px solid var(--rx-border-strong); border-radius: 9px; background: #fff; font: inherit; font-size: 13px; color: var(--rx-ink-2); cursor: pointer; display: inline-flex; align-items: center; gap: 6px; }
.rx-filter--on { border-color: #C9C4F2; background: var(--rx-accent-softer); color: var(--rx-accent-ink); font-weight: 500; }
.rx-search { display: flex; align-items: center; gap: 8px; height: 36px; padding: 0 12px; border: 1px solid var(--rx-border-strong); border-radius: 10px; background: #fff; color: var(--rx-ink-3); min-width: 280px; }
.rx-search input { border: 0; outline: 0; background: transparent; font: inherit; font-size: 13.5px; color: var(--rx-ink); flex: 1; }

.rx-split { display: flex; gap: 16px; align-items: flex-start; }
.rx-split__main { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 12px; }
.rx-split__side { width: 380px; flex-shrink: 0; display: flex; flex-direction: column; gap: 12px; }
@media (max-width: 1200px) { .rx-split { flex-direction: column; } .rx-split__side { width: 100%; } }

.rx-bar { height: 8px; border-radius: 999px; background: var(--rx-divider); overflow: hidden; }
.rx-bar > span { display: block; height: 100%; border-radius: 999px; background: var(--rx-accent); }
.rx-bar--ok > span { background: var(--rx-ok-dot); }
.rx-bar--warn > span { background: var(--rx-warn-dot); }

.rx-timeline { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
.rx-timeline li { display: flex; gap: 12px; min-height: 40px; }
.rx-timeline__rail { display: flex; flex-direction: column; align-items: center; width: 14px; }
.rx-timeline__dot { width: 12px; height: 12px; border-radius: 999px; margin-top: 3px; flex-shrink: 0; background: #fff; border: 2px solid #D5D2CA; box-sizing: border-box; }
.rx-timeline__dot--done { background: var(--rx-ok-dot); border-color: var(--rx-ok-dot); }
.rx-timeline__dot--now { border: 3px solid var(--rx-warn-dot); }
.rx-timeline__line { flex: 1; width: 2px; background: var(--rx-border); }
.rx-timeline li:last-child .rx-timeline__line { display: none; }
.rx-timeline__text { display: flex; flex-direction: column; gap: 1px; padding-bottom: 10px; font-size: 13.5px; }
.rx-timeline__meta { font-size: 12px; color: var(--rx-ink-3); }

.rx-empty { padding: 28px 20px; text-align: center; color: var(--rx-ink-3); font-size: 13.5px; display: flex; flex-direction: column; align-items: center; gap: 8px; }
.rx-empty__title { font-size: 15px; font-weight: 600; color: var(--rx-ink); }
.rx-link { color: var(--rx-accent); font-weight: 600; background: none; border: 0; padding: 0; font: inherit; font-size: 13px; cursor: pointer; }
.rx-link:hover { color: #2F25A8; }
.rx-section-title { font-size: 15px; font-weight: 600; color: var(--rx-ink); }

/* Mobil: menyn fälls ut över innehållet */
@media (max-width: 768px) {
  .admin-shell { grid-template-columns: 1fr; }
  .rx-rail { position: fixed; left: 0; top: 0; width: 260px; transform: translateX(-100%); transition: transform .2s ease; box-shadow: var(--shadow-lg); }
  .admin-shell.nav-open .rx-rail { transform: none; }
  .rx-ws { padding: 16px; }
  .admin-topbar { padding: 0 16px; }
}