/* ============================================================
   KPI Dashboards — Design System (mørkt tema)
   Ét fælles tema for hele appen. Indlæses EFTER Bootstrap, så
   det overstyrer Bootstrap's lyse defaults (via --bs-* variabler).
   ============================================================ */

/* ---- 1. TOKENS ---- */
:root {
    /* Baggrunde */
    --ds-bg:        #0b0b0d;   /* app-baggrund */
    --ds-surface:   #141417;   /* kort/paneler */
    --ds-surface-2: #1c1c20;   /* inputs, hover */
    --ds-border:    rgba(255,255,255,0.08);
    --ds-border-2:  rgba(255,255,255,0.14);

    /* Tekst */
    --ds-text:      #f5f5f4;
    --ds-text-dim:  rgba(255,255,255,0.62);
    --ds-text-mut:  rgba(255,255,255,0.42);

    /* Accent + semantik */
    --ds-accent:    #5fd08a;   /* primær grøn (LED-accent) */
    --ds-primary:   #6aa9f0;   /* blå (links/knapper) */
    --ds-success:   #5fd08a;
    --ds-warning:   #f0a35e;
    --ds-danger:    #f08a7a;
    --ds-info:      #6aa9f0;

    /* Fonts */
    --ds-font:      'Public Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    --ds-font-head: 'Archivo', var(--ds-font);
    --ds-font-mono: 'IBM Plex Mono', ui-monospace, SFMono-Regular, Menlo, monospace;

    /* Radii + skygge */
    --ds-radius:    10px;
    --ds-radius-lg: 16px;
    --ds-shadow:    0 10px 30px rgba(0,0,0,0.45);

    /* --- Overstyr Bootstrap globalt (mørkt) --- */
    --bs-body-bg: var(--ds-bg);
    --bs-body-color: var(--ds-text);
    --bs-border-color: var(--ds-border);
    --bs-secondary-color: var(--ds-text-dim);
    --bs-tertiary-color: var(--ds-text-mut);
    --bs-emphasis-color: var(--ds-text);
    --bs-primary: var(--ds-primary);
    --bs-primary-rgb: 106,169,240;
    --bs-link-color: var(--ds-primary);
    --bs-link-hover-color: #8fc0f6;
}

/* ---- 2. BASE ---- */
:root { color-scheme: dark; }              /* mørke native scrollbars/controls */
html { background: var(--ds-bg); }         /* garanterer mørk bund uanset indholdshøjde */
html, body { min-height: 100vh; }
body {
    background: var(--ds-bg);
    color: var(--ds-text);
    font-family: var(--ds-font);
}
h1, h2, h3, h4, .ds-head { font-family: var(--ds-font-head); letter-spacing: -0.01em; }
.ds-mono, .rval, .rank, .hdr-clock { font-family: var(--ds-font-mono); }
a { color: var(--ds-primary); }
a:hover { color: #8fc0f6; }
::selection { background: rgba(95,208,138,0.35); color: #fff; }

/* ---- 3. BOOTSTRAP-KOMPONENTER (mørkt) ---- */

/* Kort */
.card {
    --bs-card-bg: var(--ds-surface);
    --bs-card-border-color: var(--ds-border);
    --bs-card-color: var(--ds-text);
    border-radius: var(--ds-radius-lg);
}

/* Tabeller — det var her leveringsrapporten var hvid */
.table {
    --bs-table-bg: transparent;
    --bs-table-color: var(--ds-text);
    --bs-table-border-color: var(--ds-border);
    --bs-table-striped-bg: rgba(255,255,255,0.03);
    --bs-table-striped-color: var(--ds-text);
    --bs-table-hover-bg: rgba(255,255,255,0.05);
    --bs-table-hover-color: var(--ds-text);
    color: var(--ds-text);
}
.table > :not(caption) > * > * { background-color: transparent; color: var(--ds-text); border-bottom-color: var(--ds-border); }
.table thead th {
    color: var(--ds-text-mut);
    font-size: 11px; text-transform: uppercase; letter-spacing: 0.04em; font-weight: 600;
    border-bottom-color: var(--ds-border-2);
}
.table-responsive { background: transparent; }

/* Inputs */
.form-control, .form-select {
    background: var(--ds-surface-2);
    border: 1px solid var(--ds-border-2);
    color: var(--ds-text);
}
.form-control::placeholder { color: var(--ds-text-mut); }
.form-control:focus, .form-select:focus {
    background: var(--ds-surface-2);
    color: var(--ds-text);
    border-color: var(--ds-accent);
    box-shadow: 0 0 0 2px rgba(95,208,138,0.18);
}
.form-control[type="date"]::-webkit-calendar-picker-indicator { filter: invert(0.8); }
.form-label { color: var(--ds-text-dim); font-size: 12px; }
.form-check-input { background-color: var(--ds-surface-2); border-color: var(--ds-border-2); }
.form-check-input:checked { background-color: var(--ds-accent); border-color: var(--ds-accent); }

/* Knapper */
.btn-primary {
    --bs-btn-bg: var(--ds-primary); --bs-btn-border-color: var(--ds-primary);
    --bs-btn-hover-bg: #5b9aef; --bs-btn-hover-border-color: #5b9aef;
    --bs-btn-color: #0b0b0d; --bs-btn-hover-color: #0b0b0d; font-weight: 600;
}
.btn-outline-secondary {
    --bs-btn-color: var(--ds-text-dim); --bs-btn-border-color: var(--ds-border-2);
    --bs-btn-hover-bg: rgba(255,255,255,0.08); --bs-btn-hover-color: var(--ds-text);
    --bs-btn-hover-border-color: var(--ds-border-2);
}
.btn-outline-primary { --bs-btn-color: var(--ds-primary); --bs-btn-border-color: var(--ds-primary); --bs-btn-hover-bg: var(--ds-primary); --bs-btn-hover-color:#0b0b0d; }
.btn-outline-danger  { --bs-btn-color: var(--ds-danger);  --bs-btn-border-color: var(--ds-danger);  --bs-btn-hover-bg: var(--ds-danger);  --bs-btn-hover-color:#0b0b0d; }
.btn-outline-warning { --bs-btn-color: var(--ds-warning); --bs-btn-border-color: var(--ds-warning); --bs-btn-hover-bg: var(--ds-warning); --bs-btn-hover-color:#0b0b0d; }
.btn-outline-info    { --bs-btn-color: var(--ds-info);    --bs-btn-border-color: var(--ds-info);    --bs-btn-hover-bg: var(--ds-info);    --bs-btn-hover-color:#0b0b0d; }
.btn-success { --bs-btn-bg: var(--ds-success); --bs-btn-border-color: var(--ds-success); --bs-btn-color:#0b0b0d; --bs-btn-hover-bg:#54c07d; --bs-btn-hover-border-color:#54c07d; --bs-btn-hover-color:#0b0b0d; font-weight:600; }

/* Faner */
.nav-tabs {
    --bs-nav-tabs-border-color: var(--ds-border);
    --bs-nav-tabs-link-active-color: var(--ds-text);
    --bs-nav-tabs-link-active-bg: transparent;
    --bs-nav-tabs-link-active-border-color: transparent transparent var(--ds-accent);
    border-bottom: 1px solid var(--ds-border);
}
.nav-tabs .nav-link { color: var(--ds-text-dim); border: none; border-bottom: 2px solid transparent; }
.nav-tabs .nav-link:hover { color: var(--ds-text); border-color: transparent transparent var(--ds-border-2); }
.nav-tabs .nav-link.active { color: var(--ds-text); border-bottom-color: var(--ds-accent); background: transparent; }
.nav-pills .nav-link { color: var(--ds-text-dim); background: rgba(255,255,255,0.05); }
.nav-pills .nav-link.active { color: #0b0b0d; background: var(--ds-accent); }

/* Modal */
.modal-content { background: var(--ds-surface); color: var(--ds-text); border: 1px solid var(--ds-border-2); border-radius: var(--ds-radius-lg); }
.modal-header, .modal-footer { border-color: var(--ds-border); }
.btn-close { filter: invert(1) grayscale(1) brightness(1.6); }

/* Badges (Bootstrap bg-*) — behold farve men gør tekst læsbar */
.badge.bg-secondary { background: rgba(255,255,255,0.12) !important; color: var(--ds-text) !important; }
.badge.bg-danger { background: var(--ds-danger) !important; color: #0b0b0d !important; }
.badge.bg-warning { color: #0b0b0d !important; }
.badge.bg-success { background: var(--ds-success) !important; color: #0b0b0d !important; }

/* Utility-tekstfarver i mørkt */
.text-muted { color: var(--ds-text-mut) !important; }
.text-danger { color: var(--ds-danger) !important; }
.text-success { color: var(--ds-success) !important; }
.text-warning { color: var(--ds-warning) !important; }

/* Spinner */
.spinner-border { color: var(--ds-accent); }

/* ---- 4. GENBRUGELIGE KOMPONENTER (ds-*) ---- */
.ds-page { max-width: 1500px; margin: 0 auto; }
.ds-card { background: var(--ds-surface); border: 1px solid var(--ds-border); border-radius: var(--ds-radius-lg); overflow: hidden; }
.ds-card-head { padding: 13px 18px; border-bottom: 1px solid var(--ds-border); font: 600 13px/1 var(--ds-font); letter-spacing: 0.04em; text-transform: uppercase; color: var(--ds-text-dim); display: flex; align-items: center; }
.ds-card-body { padding: 16px; }
.ds-page-title h2 { font-size: 1.3rem; margin: 0; }
.ds-page-title p { color: var(--ds-text-dim); font-size: 13px; margin: 4px 0 0; }

/* ---- 5. SIDE-SPECIFIKKE MØRKE OVERSTYRINGER ---- */

/* Login (site.css gør kortet hvidt — mørkgør det her) */
.ds-login-body { background: var(--ds-bg); color: var(--ds-text); }
.ds-login-body .login-card { background: var(--ds-surface); box-shadow: var(--ds-shadow); border: 1px solid var(--ds-border); }
.ds-login-body .login-header h1 { color: var(--ds-text); font-family: var(--ds-font-head); }
.ds-login-body .login-header p { color: var(--ds-text-dim); }
.ds-login-body .login-header .logo { background: linear-gradient(135deg, var(--ds-accent), #3aa564); color: #0b0b0d; }
.ds-login-body .btn-login { background: linear-gradient(135deg, var(--ds-accent), #3aa564); color: #0b0b0d; font-weight: 700; }
.ds-login-body .input-icon i { color: var(--ds-text-mut); }
.ds-login-body .form-check-label, .ds-login-body label { color: var(--ds-text-dim); }
.ds-login-body .text-muted { color: var(--ds-text-mut) !important; }
.ds-login-body .btn-o365 { background: var(--ds-surface-2); border-color: var(--ds-border-2); color: var(--ds-text); }
.ds-login-body .o365-divider { color: var(--ds-text-mut); }
.ds-login-body .o365-divider::before, .ds-login-body .o365-divider::after { background: var(--ds-border); }
.ds-login-body .alert-danger { background: rgba(240,138,122,0.12); border-color: rgba(240,138,122,0.3); color: var(--ds-danger); }
.ds-login-body .alert-success { background: rgba(95,208,138,0.12); border-color: rgba(95,208,138,0.3); color: var(--ds-success); }
.ds-login-body .alert-warning { background: rgba(240,163,94,0.12); border-color: rgba(240,163,94,0.3); color: var(--ds-warning); }

/* UserAdmin + Konto: site.css bruger lyse .ua-card/.ua-head — mørkgør */
.ua-card { background: var(--ds-surface) !important; border-color: var(--ds-border) !important; }
.ua-card-head { border-bottom-color: var(--ds-border) !important; color: var(--ds-text-dim) !important; }
.ua-head h2, .konto-wrap h2 { color: var(--ds-text); font-family: var(--ds-font-head); }
.ua-head p, .konto-wrap p { color: var(--ds-text-dim); }
.ua-table thead th { color: var(--ds-text-mut) !important; border-bottom-color: var(--ds-border) !important; }
.ua-table td, .ua-table th { border-color: var(--ds-border) !important; color: var(--ds-text); }
.table-warning, .table-warning > * { background: rgba(240,163,94,0.12) !important; color: var(--ds-text) !important; }

/* Skærm-vælger kort (site.css lys) */
.screen-card { background: var(--ds-surface); border-color: var(--ds-border); color: var(--ds-text); }
.screen-card h3 { color: var(--ds-text); }
.screen-card p { color: var(--ds-text-dim); }
.screen-card:hover { box-shadow: var(--ds-shadow); border-color: var(--ds-border-2); }
.screens-page-title h2 { color: var(--ds-text); font-family: var(--ds-font-head); }
.screens-page-title p { color: var(--ds-text-dim); }
.screens-topbar { background: var(--ds-surface); border-bottom-color: var(--ds-border); }
.screens-topbar-brand { color: var(--ds-text); }
/* slå site.css' lyse .screens-body (klasse-specificitet) + fyld fuld højde */
.screens-body { background: var(--ds-bg) !important; color: var(--ds-text); min-height: 100vh; }
.screens-main { background: var(--ds-bg); min-height: calc(100vh - 56px); }

/* Fuldskærms-sider uden topbar (fx Leveringsrapport — som LED-monitoren) */
.ds-fullscreen { background: var(--ds-bg); color: var(--ds-text); min-height: 100vh; margin: 0; }
.fc-fullscreen { padding: 26px 28px; max-width: 1600px; margin: 0 auto; }