/* --------------------------------------------------
   Bentzen Økonomi - Fælles design (retning C: mørk kortoverskrift)
   Giver alle moduler samme udtryk: ens kort (hjørner, kant, luft, skygge),
   navy overskriftsbjælke øverst på hvert kort, ens knapper og tabeloverskrifter.
   Indlæses efter style.css og dark.css. Mange moduler har faste stilarter
   skrevet direkte i HTML/JS, derfor bruges !important de steder, det kræves.
   -------------------------------------------------- */

:root {
    --dz-navy: #1a365d;
    --dz-navy-tekst: #ffffff;
    --dz-kant: #e2e8f0;
    --dz-radius: 14px;
    --dz-pad: 16px;
    --dz-skygge: 0 1px 2px rgba(16, 24, 40, 0.05), 0 1px 3px rgba(16, 24, 40, 0.04);
    --dz-flade: #f5f7fa;
    --bg: #f1f4f8;
}
body.dark-mode {
    --dz-navy: #1e3a5f;
    --dz-kant: #3a4556;
    --dz-skygge: none;
    --dz-flade: #252d3b;
}
@media (max-width: 430px) {
    :root { --dz-pad: 14px; --dz-radius: 14px; }
}

/* ---------- Kort ---------- */
body #app-container :is(.card, .dash-card, .ana-card, .chart-box, .big-status-bar-container, .inc-control-panel, .sub-box) {
    border-radius: var(--dz-radius) !important;
    border: 1px solid var(--dz-kant) !important;
    box-shadow: var(--dz-skygge) !important;
}
body #app-container :is(.card, .dash-card, .ana-card, .chart-box, .big-status-bar-container, .inc-control-panel) {
    padding: var(--dz-pad) !important;
    margin-bottom: 16px !important;
}

/* ---------- Navy overskriftsbjælke øverst på kortet ---------- */
body #app-container :is(
    .dash-card > .dash-card-header,
    .ana-card > .ana-card-title,
    .chart-box > .chart-title,
    .big-status-bar-container > .big-status-label,
    .inc-control-panel > .inc-cp-header,
    .card > .status-group-header:first-child,
    .dash-card > .status-group-header:first-child
) {
    margin: calc(-1 * var(--dz-pad)) calc(-1 * var(--dz-pad)) 14px !important;
    padding: 11px var(--dz-pad) !important;
    background: var(--dz-navy) !important;
    color: var(--dz-navy-tekst) !important;
    border: 0 !important;
    border-radius: calc(var(--dz-radius) - 1px) calc(var(--dz-radius) - 1px) 0 0 !important;
    font-size: 13px !important;
    font-weight: 700 !important;
    letter-spacing: 0.06em !important;
    text-transform: uppercase !important;
    text-align: center !important;
    line-height: 1.35 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 8px !important;
}
/* Bjælker med knapper/felter: titel til venstre, knapper til højre */
body #app-container :is(.dash-card-header, .ana-card-title, .chart-title, .big-status-label, .inc-cp-header, .status-group-header):has(button, select, input) {
    justify-content: space-between !important;
    text-align: left !important;
}
/* Budgettets faste aftaler har ingen luft i kortet - bjælken ligger allerede i kanten */
body #app-container .sub-box > .sub-header {
    background: var(--dz-navy) !important;
    color: var(--dz-navy-tekst) !important;
    border-radius: 0 !important;
    font-size: 13px !important;
    font-weight: 700 !important;
    letter-spacing: 0.06em !important;
    padding: 11px 14px !important;
    text-align: center !important;
}
/* Tekst inde i bjælken følger bjælkens farve (knapper og felter beholder deres egen) */
body #app-container :is(.dash-card-header, .ana-card-title, .chart-title, .big-status-label, .inc-cp-header, .sub-header, .card > .status-group-header:first-child, .dash-card > .status-group-header:first-child) :is(span, b, strong, small, em, i, div, label) {
    color: inherit !important;
}

/* ---------- Sektionsoverskrifter uden for kort ---------- */
body #app-container .status-group-header:not(:first-child) {
    font-size: 13px !important;
    font-weight: 700 !important;
    letter-spacing: 0.06em !important;
    color: var(--dz-navy) !important;
    text-align: center !important;
    margin: 22px 2px 10px !important;
}
body.dark-mode #app-container .status-group-header:not(:first-child) { color: #90cdf4 !important; }

/* ---------- Knapper: ens form (farverne bevares, de har betydning) ---------- */
body #app-container button:not(.nav-btn):not(#mobile-menu-btn):not(.bt-value) {
    border-radius: 10px !important;
    font-weight: 700;
    letter-spacing: 0.02em;
    transition: filter 0.15s ease, transform 0.05s ease;
}
body #app-container button:not(.nav-btn):not(#mobile-menu-btn):active { transform: scale(0.98); }
body #app-container .action-btn { min-height: 40px; box-shadow: none !important; }

/* ---------- Tabeloverskrifter ---------- */
body #app-container table th {
    font-size: 11px !important;
    font-weight: 700 !important;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--secondary) !important;
    background-color: var(--dz-flade) !important;
}

/* ---------- Tal står pænt under hinanden ---------- */
body #app-container { font-variant-numeric: tabular-nums; }

/* ==========================================================
   DESIGNMANUAL (se også design.js, som retter faste stilarter)
   ========================================================== */
:root {
    --dz-font: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    --dz-roed: #c53030;
    --dz-groen: #2f855a;
}
body.dark-mode {
    --dz-roed: #fc8181;
    --dz-groen: #68d391;
}

/* Én skrift i hele appen (monospace bevares, hvor det er valgt med vilje) */
body, body :is(input, select, textarea, button, table) { font-family: var(--dz-font) !important; }
body #app-container *:not([style*="monospace"]):not(code):not(pre):not(i[class*="ti"]) { font-family: var(--dz-font) !important; }
.bottom-totals, .header, .nav { font-family: var(--dz-font) !important; }

/* Én rød og én grøn: negative beløb og "over budget" er røde, plus er grøn */
body .dz-roed { color: var(--dz-roed) !important; }
body .dz-groen { color: var(--dz-groen) !important; }

/* Understregning kun på links */
body #app-container a { text-decoration: underline; text-underline-offset: 2px; }

/* Bundbjælken ligger stille på iPhone: egen lag-flade, ingen gummibånd-effekt,
   og bjælkens farve fortsætter under kanten, så der aldrig ses et hul */
html, body { overscroll-behavior-y: none; }
.bottom-totals {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
}
.bottom-totals::after {
    content: "";
    position: absolute;
    left: 0; right: 0; top: 100%;
    height: 120px;
    background: inherit;
}

/* Bundbjælken: tre lige felter på samme linje, lange overskrifter må ikke skubbe */
.bottom-totals { align-items: stretch !important; }
.bottom-totals .bt-item { justify-content: flex-start !important; overflow: hidden; }
.bottom-totals .bt-label {
    font-size: 11px !important;
    letter-spacing: 0.02em !important;
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    line-height: 14px;
}
.bottom-totals .bt-label { font-size: 10px !important; letter-spacing: 0 !important; white-space: nowrap !important; height: 14px; display: block; }
.bottom-totals .bt-value { font-size: 15px !important; line-height: 20px !important; height: 20px; padding: 0 !important; margin: 0 !important; display: block; white-space: nowrap; }
.bottom-totals .bt-item { gap: 6px !important; padding-top: 0 !important; padding-bottom: 0 !important; }

/* Tallene: SUM og CHECK SUM er tekst, SALDO er et indtastningsfelt. iPhone giver felter
   en minimumshøjde på 44px og egen ramme, så de tre tal fik hver sin højde.
   Nu får alle tre præcis samme kasse (16px skrift, så iPhone ikke zoomer ind i feltet). */
.bottom-totals .bt-value,
.bottom-totals input.bt-value {
    -webkit-appearance: none !important;
    appearance: none !important;
    box-sizing: border-box !important;
    display: block !important;
    width: 100% !important;
    height: 24px !important;
    min-height: 0 !important;
    line-height: 22px !important;
    font-size: 16px !important;
    font-weight: 700 !important;
    padding: 0 !important;
    margin: 0 !important;
    border: 1px solid transparent !important;
    border-radius: 6px !important;
    background: transparent !important;
    text-align: center !important;
    color: var(--primary) !important;
    font-family: var(--dz-font) !important;
    font-variant-numeric: tabular-nums;
}
.bottom-totals input.bt-value:focus { border-color: var(--border) !important; outline: none; }