/* B-214: Backoffice i samme udtryk som forsiden og driftsportalen. Filaments egne klasser (fi-*) justeres her,
   så der ikke kræves et særskilt Tailwind-tema. Farverne svarer til public/css/drift.css. */
:root{--tl-navy:#1e3a8a;--tl-ink:#172554;--tl-muted:#64748b;--tl-line:#e2e8f0;--tl-canvas:#f8fafc;--tl-sky:#eff6ff}

/* Flader og overskrifter */
.fi-body{background:var(--tl-canvas);color:var(--tl-ink);-webkit-font-smoothing:antialiased}
.fi-header-heading{letter-spacing:-.04em;font-weight:800;text-wrap:balance}
.fi-section,.fi-ta-ctn,.fi-wi-stats-overview-stat,.fi-fo-tabs,.fi-tabs{border-radius:14px}
.fi-section,.fi-ta-ctn,.fi-wi-stats-overview-stat{box-shadow:0 1px 2px #17255408}
.fi-wi-stats-overview-stat-value{letter-spacing:-.03em}

/* Knapper og mærker som i driftsportalen */
.fi-btn{border-radius:8px;font-weight:700}
.fi-badge{border-radius:99px;font-weight:700;letter-spacing:.01em}

/* Tabeller: mørke overskrifter og ens luft i rækkerne. Schibsted Grotesks tabeltal er meget brede, så de bruges ikke. */
.fi-ta-table thead{background:var(--tl-canvas)}
.fi-ta-table thead tr{border-bottom:2px solid var(--tl-line)}
.fi-ta-header-cell{color:var(--tl-ink);font-weight:750;font-size:.8rem;white-space:nowrap}
.fi-ta-header-cell-sort-btn{color:inherit}
.fi-ta-cell{vertical-align:top}
.fi-ta-text-item{line-height:1.45}
.fi-ta-row{transition:background-color .12s}
.fi-ta-row:hover{background:var(--tl-sky)}

/* Mørk tilstand (Filaments .dark) */
.dark .fi-body{background:#0c1322;color:#e8edf7}
.dark .fi-ta-table thead{background:#131c30}
.dark .fi-ta-table thead tr{border-bottom-color:#34466b}
.dark .fi-ta-header-cell{color:#e8edf7}
.dark .fi-ta-row:hover{background:#18264a}
/* Valglister: Filaments fi-input og egne <select> har gennemsigtig baggrund og arver hvid tekst. Uden en
   mørk baggrund på punkterne viser Chrome og Edge hvid tekst på hvid liste, så kun det markerede punkt kan læses. */
.dark select option,.dark select optgroup{background-color:#131c30;color:#e8edf7}

@media (prefers-reduced-motion:reduce){.fi-ta-row{transition:none}}

/* B-339: Overblikket for ejeren. Kort med tal, kø og mål. Mørk tilstand følger Filaments .dark. */
.ov-card{height:100%;box-sizing:border-box;display:flex;flex-direction:column;gap:12px;padding:20px 22px;background:#fff;border:1px solid var(--tl-line);border-radius:16px;box-shadow:0 1px 2px #17255408}
.ov-head{display:flex;flex-wrap:wrap;align-items:baseline;justify-content:space-between;gap:4px 12px}
.ov-title{margin:0;font-size:1.15rem;font-weight:800;letter-spacing:-.02em;text-wrap:balance}
.ov-small-title{margin:0;font-size:1.02rem;font-weight:800;letter-spacing:-.01em}
.ov-muted{margin:0;font-size:.85rem;color:var(--tl-muted)}
.ov-empty{margin:0;display:flex;align-items:center;gap:8px;font-size:.9rem;color:#047857}
.ov-queue{list-style:none;margin:0;padding:0}
.ov-queue li+li{border-top:1px solid #eef0f4}
.ov-queue a{display:flex;align-items:center;gap:14px;min-height:44px;padding:10px;margin:0 -10px;border-radius:10px;color:inherit;text-decoration:none}
.ov-queue a:hover,.ov-queue a:focus-visible{background:var(--tl-sky)}
.ov-count{flex:0 0 auto;min-width:40px;height:40px;display:grid;place-items:center;border-radius:10px;background:var(--tl-sky);color:#123278;font-size:1.1rem;font-weight:800}
.ov-late .ov-count{background:#fde2e2;color:#8f1414}
.ov-late .ov-age{color:#b91c1c}
.ov-label{display:block;font-weight:700}
.ov-age{display:block;font-size:.82rem;color:var(--tl-muted)}
.ov-goal{background:#123278;border-color:#123278;color:#fff}
.ov-goal .ov-muted,.ov-goal-note{color:#c9d6f2}
.ov-goal-row{display:flex;flex-wrap:wrap;align-items:baseline;justify-content:space-between;gap:4px 12px}
.ov-goal-label{font-weight:600;color:#e6ecf9}
.ov-goal-value{font-size:1.9rem;font-weight:800;letter-spacing:-.03em;line-height:1}
.ov-goal-value small{font-size:1rem;font-weight:600;color:#c9d6f2}
.ov-bar{position:relative;height:12px;margin-top:10px;border-radius:99px;background:rgba(255,255,255,.16);overflow:hidden}
.ov-bar-fill{position:absolute;inset:0 auto 0 0;border-radius:99px;background:#fff}
.ov-bar-pace{position:absolute;top:0;bottom:0;width:2px;background:#f5c35b}
.ov-goal-note{margin:8px 0 0;font-size:.82rem}
.ov-legend-pace{display:inline-block;width:10px;height:10px;border-radius:2px;background:#f5c35b;margin-right:8px;vertical-align:-1px}
.ov-tiles{display:grid;gap:16px;grid-template-columns:repeat(auto-fit,minmax(min(100%,220px),1fr))}
.ov-tile{display:flex;flex-direction:column;gap:4px;padding:18px 20px;background:#fff;border:1px solid var(--tl-line);border-radius:16px;box-shadow:0 1px 2px #17255408}
.ov-tile-label{font-size:.88rem;font-weight:600;color:#4c5a72}
.ov-tile-row{display:flex;align-items:flex-end;justify-content:space-between;gap:10px}
.ov-tile-value{font-size:2.3rem;font-weight:800;letter-spacing:-.04em;line-height:1.05}
.ov-tile-meta{font-size:.82rem;color:var(--tl-muted)}
.ov-up{font-weight:700;color:#047857}
.ov-down{font-weight:700;color:#b45309}
.ov-spark-area{fill:var(--tl-sky)}
.ov-spark-line{fill:none;stroke:#123278;stroke-width:2;stroke-linejoin:round;stroke-linecap:round}
.ov-legend{display:flex;flex-wrap:wrap;gap:6px 16px;font-size:.82rem;color:#4c5a72}
.ov-key{display:inline-block;width:10px;height:10px;border-radius:3px;margin-right:6px;vertical-align:-1px}
.ov-c1{background:#9db2e0;fill:#9db2e0}
.ov-c2{background:#123278;fill:#123278}
.ov-c3{background:#5a7bc4}
.ov-chart{display:block;width:100%;height:auto}
.ov-chart line{stroke:#eef0f4}
.ov-chart text{fill:var(--tl-muted);font-size:15px;font-family:inherit}
.ov-rows{display:flex;flex-direction:column;gap:10px;margin:0;padding:0;list-style:none}
.ov-row{display:flex;justify-content:space-between;gap:12px;font-size:.9rem}
.ov-track{height:10px;margin-top:5px;border-radius:99px;background:#eef0f4;overflow:hidden}
.ov-track span{display:block;height:100%;border-radius:99px;background:#123278}
.ov-track .ov-first{background:#9db2e0}
.ov-callout{margin:0;padding:12px 14px;border-radius:10px;background:#fff4e8;color:#6e3205;font-size:.9rem}
.ov-stack{display:flex;height:14px;gap:2px;border-radius:99px;overflow:hidden}
.ov-meter{display:grid;grid-template-columns:1fr 80px 44px;align-items:center;gap:10px;font-size:.9rem}
.ov-meter .ov-track{margin:0;height:8px}
.ov-table{width:100%;border-collapse:collapse;font-size:.9rem}
.ov-table th{padding:0 0 6px;font-size:.75rem;font-weight:700;color:var(--tl-muted);text-align:left}
.ov-table td{padding:6px 0;border-top:1px solid #eef0f4}
.ov-table .ov-num{text-align:right;padding-left:12px;white-space:nowrap}
.ov-system{flex-direction:row;flex-wrap:wrap;align-items:center;gap:12px 28px;padding:16px 22px}
.ov-dot{display:inline-block;width:10px;height:10px;border-radius:99px;margin-right:8px;background:#94a3b8}
.ov-dot-ok{background:#047857}.ov-dot-warn{background:#b45309}.ov-dot-bad{background:#b91c1c}
.ov-system span{font-size:.9rem}
.dark .ov-card:not(.ov-goal),.dark .ov-tile{background:#111a2e;border-color:#26324d}
.dark .ov-queue li+li,.dark .ov-table td{border-top-color:#26324d}
.dark .ov-queue a:hover,.dark .ov-queue a:focus-visible{background:#18264a}
.dark .ov-count{background:#1b2a4d;color:#c7d6f5}
.dark .ov-late .ov-count{background:#4a1d22;color:#fecaca}
.dark .ov-late .ov-age{color:#fca5a5}
.dark .ov-goal{background:#1e3a8a;border-color:#1e3a8a}
.dark .ov-tile-label,.dark .ov-legend{color:#b6c2d9}
.dark .ov-up{color:#6ee7b7}.dark .ov-down{color:#fdba74}
.dark .ov-spark-area{fill:#1b2a4d}.dark .ov-spark-line{stroke:#9db2e0}
.dark .ov-c2,.dark .ov-track span{background:#9db2e0;fill:#9db2e0}
.dark .ov-c1,.dark .ov-track .ov-first{background:#3d5590;fill:#3d5590}
.dark .ov-track{background:#26324d}
.dark .ov-chart line{stroke:#26324d}
.dark .ov-callout{background:#3b2410;color:#fed7aa}
.dark .ov-empty{color:#6ee7b7}