/* ─── ØKONOMI: DELT SKAL ──────────────────────────────────────────────────────
   Fælles udseende for alle værktøjer på oekonomi.evfield.dk. Ligger som EGEN
   fil - ikke inline i hvert værktøj - fordi det ellers er et spørgsmål om tid,
   før to værktøjer ser forskellige ud. Samme begrundelse som sidebar.js og
   auth-guard.js i repoets rod.

   Værktøjs-specifik CSS bliver i værktøjets egen fil; her står kun det, alle
   deler: temaerne, layoutet, tabeller, knapper, kort, mærkater og modaler. */
  *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
  :root {
    --bg:#F8F7F4; --surface:#FFFFFF; --surface2:#F2F1EE;
    --border:rgba(0,0,0,0.10); --border2:rgba(0,0,0,0.18);
    --text:#1A1917; --text2:#6B6963; --text3:#9B9890;
    --accent:#2563EB; --accent-done:#059669; --red:#B42318; --amber:#B7810A;
    --accent-fg:#fff; --accent-glow:rgba(37,99,235,.12);
    --ok-bg:#E8F8EE; --ok-fg:#1A5C38; --adv-bg:#FEF6E3; --adv-fg:#7C5A0E; --fejl-bg:#FEF0EF; --fejl-fg:#8C2B22;
    --radius:8px; --radius-lg:12px;
  }
  html[data-theme="sage"] {
    --bg:#F2F4EF; --surface:#FFFFFF; --surface2:#EBEEE7;
    --border:rgba(40,50,40,.10); --border2:rgba(40,50,40,.18);
    --text:#2C312B; --text2:#6B7268; --text3:#9AA095;
    --accent:#41714F; --accent-done:#41714F; --red:#AC4631; --amber:#A8760D;
    --accent-fg:#fff; --accent-glow:rgba(65,113,79,.15);
  }
  html[data-theme="cyan"] {
    --bg:#F1FAFB; --surface:#FFFFFF; --surface2:#E6F4F6;
    --border:rgba(10,45,50,.10); --border2:rgba(10,45,50,.18);
    --text:#102024; --text2:#54686C; --text3:#8AA0A4;
    --accent:#0E9DAE; --accent-done:#109C81; --red:#D24046; --amber:#A8760D;
    --accent-fg:#fff; --accent-glow:rgba(14,157,174,.15);
  }
  html[data-theme="amber"] {
    --bg:#FBF6EE; --surface:#FFFFFF; --surface2:#F4ECDF;
    --border:rgba(60,45,20,.11); --border2:rgba(60,45,20,.20);
    --text:#2B2620; --text2:#786E60; --text3:#A89E8C;
    --accent:#D27A1C; --accent-done:#5E8C4F; --red:#BD482E; --amber:#8A6209;
    --accent-fg:#fff; --accent-glow:rgba(210,122,28,.15);
  }
  html[data-theme="blueprint"] {
    --bg:#EDF1F9; --surface:#FFFFFF; --surface2:#E2E9F4;
    --border:rgba(20,40,80,.11); --border2:rgba(20,40,80,.20);
    --text:#16243B; --text2:#586377; --text3:#8C97A8;
    --accent:#2456C7; --accent-done:#2E8B6F; --red:#C13B36; --amber:#A8760D;
    --accent-fg:#fff; --accent-glow:rgba(36,86,199,.14);
  }
  html[data-theme="dark"] {
    --bg:#161B21; --surface:#222931; --surface2:#2B333D;
    --border:rgba(255,255,255,.10); --border2:rgba(255,255,255,.20);
    --text:#E7ECF2; --text2:#95A0AD; --text3:#69757F;
    --accent:#36D29A; --accent-done:#36D29A; --red:#F4717A; --amber:#E0B048;
    --accent-fg:#0F1419; --accent-glow:rgba(54,210,154,.18);
    --ok-bg:rgba(111,212,156,.15); --ok-fg:#6FD49C;
    --adv-bg:rgba(224,176,72,.15); --adv-fg:#E0B048;
    --fejl-bg:rgba(244,113,122,.15); --fejl-fg:#F4717A;
  }
  body { font-family:'DM Sans',sans-serif; background:var(--bg); color:var(--text); font-size:13px; min-height:100vh; }

  /* LAYOUT */
  .app { display:flex; height:100vh; overflow:hidden; }
  .sidebar { width:220px; flex-shrink:0; background:var(--surface); border-right:0.5px solid var(--border); display:flex; flex-direction:column; }
  .sb-top { padding:14px 14px 10px; border-bottom:0.5px solid var(--border); }
  .sb-logo { display:flex; align-items:center; gap:9px; cursor:pointer; border-radius:8px; padding:4px; margin:-4px; }
  .sb-logo:hover { background:var(--surface2); }
  .sb-icon { width:30px; height:30px; border-radius:8px; background:var(--accent); display:flex; align-items:center; justify-content:center; }
  .sb-icon i { font-size:15px; color:var(--accent-fg); }
  .sb-name { font-size:14px; font-weight:500; }
  .sb-sub { font-size:10px; color:var(--text2); margin-top:1px; }
  .sb-nav { flex:1; padding:8px; display:flex; flex-direction:column; gap:2px; overflow-y:auto; }
  .nav-item { display:flex; align-items:center; gap:10px; padding:9px 12px; border-radius:8px; font-size:13px; color:var(--text2); cursor:pointer; }
  .nav-item i { font-size:17px; }
  .nav-item:hover { background:var(--surface2); }
  .nav-item.active { background:var(--accent); color:var(--accent-fg); }
  .nav-head { font-size:11px; font-weight:500; color:var(--text); padding:5px 12px 3px; margin-top:12px; }
  .sb-nav > .nav-head:first-child { margin-top:0; }
  .sb-footer { padding:10px 14px; border-top:0.5px solid var(--border); font-size:10px; color:var(--text3); }
  .tema-row { display:flex; align-items:center; gap:6px; margin-bottom:8px; }
  .tema-lbl { font-size:10px; color:var(--text3); margin-right:2px; }
  .tema-dot { width:15px; height:15px; border-radius:50%; cursor:pointer; transition:transform .1s; box-shadow:0 0 0 1px rgba(0,0,0,.12) inset; }
  .tema-dot:hover { transform:scale(1.18); }
  .tema-dot.aktiv { outline:2px solid var(--text2); outline-offset:1.5px; }
  .main { flex:1; display:flex; flex-direction:column; overflow:hidden; }
  .view { flex:1; display:none; flex-direction:column; overflow:hidden; }
  .view.aktiv { display:flex; }

  /* TOPBAR */
  .top { display:flex; align-items:center; gap:14px; flex-wrap:wrap; padding:14px 22px 12px; border-bottom:0.5px solid var(--border); }
  .top-h { font-size:16px; font-weight:500; display:flex; align-items:center; gap:9px; }
  .top-h i { color:var(--accent); }
  .top-sp { flex:1; }
  .periode { font-size:11.5px; color:var(--text2); background:var(--surface2); padding:4px 10px; border-radius:20px; }
  .scroll { flex:1; overflow:auto; padding:14px 22px 40px; }

  /* BANNER */
  .banner { display:flex; align-items:flex-start; gap:9px; background:var(--adv-bg); color:var(--adv-fg); border-radius:var(--radius); padding:9px 12px; font-size:12px; line-height:1.5; margin:12px 22px 0; }
  .banner i { font-size:15px; flex-shrink:0; margin-top:1px; }

  /* KNAPPER + FELTER */
  button, select, input, textarea { font-family:inherit; font-size:13px; }
  .btn { height:32px; padding:0 13px; border:0.5px solid var(--border2); border-radius:var(--radius); background:var(--surface); color:var(--text); cursor:pointer; display:inline-flex; align-items:center; gap:6px; }
  .btn:hover { background:var(--surface2); }
  .btn.primar { background:var(--accent); color:var(--accent-fg); border-color:var(--accent); }
  .btn.primar:hover { opacity:.9; }
  .btn.fare { color:var(--red); }
  .btn:disabled { opacity:.5; cursor:default; }
  .btn.lille { height:26px; padding:0 9px; font-size:11.5px; }
  select, input[type=text], input[type=number], input[type=date] { height:32px; padding:0 9px; border:0.5px solid var(--border2); border-radius:var(--radius); background:var(--surface); color:var(--text); }
  input:focus, select:focus, textarea:focus { outline:none; border-color:var(--accent); box-shadow:0 0 0 3px var(--accent-glow); }
  textarea { padding:8px 9px; border:0.5px solid var(--border2); border-radius:var(--radius); background:var(--surface); color:var(--text); resize:vertical; }
  label.f { display:block; font-size:11px; color:var(--text3); margin-bottom:4px; }
  .felt { margin-bottom:11px; }

  /* TABEL */
  .tbl { width:100%; border-collapse:collapse; font-size:12.5px; }
  .tbl th { text-align:left; font-size:10.5px; font-weight:500; color:var(--text3); padding:8px 10px; border-bottom:0.5px solid var(--border); position:sticky; top:0; background:var(--bg); z-index:2; white-space:nowrap; }
  .tbl td { padding:9px 10px; border-bottom:0.5px solid var(--border); color:var(--text2); vertical-align:middle; }
  .tbl tbody tr:hover { background:var(--surface2); }
  .tbl .navn { color:var(--text); font-weight:500; }
  .num { text-align:right; font-variant-numeric:tabular-nums; white-space:nowrap; }
  .num.stor { color:var(--text); font-weight:500; }
  .neg { color:var(--red); }
  .klik { cursor:pointer; }
  .grp-hd { background:var(--surface2); font-size:10.5px; font-weight:600; color:var(--text2); letter-spacing:.04em; text-transform:uppercase; }
  .grp-hd td { padding:5px 10px; border-bottom:0.5px solid var(--border); }

  /* MÆRKATER */
  .maerk { font-size:10px; padding:2px 7px; border-radius:20px; white-space:nowrap; display:inline-block; }
  .maerk.ok { background:var(--ok-bg); color:var(--ok-fg); }
  .maerk.adv { background:var(--adv-bg); color:var(--adv-fg); }
  .maerk.fejl { background:var(--fejl-bg); color:var(--fejl-fg); }
  .maerk.rolig { background:var(--surface2); color:var(--text2); }

  /* KORT */
  .kort { background:var(--surface); border:0.5px solid var(--border); border-radius:var(--radius-lg); padding:16px 18px; margin-bottom:14px; }
  .kort-h { font-size:13px; font-weight:500; color:var(--text); margin-bottom:12px; display:flex; align-items:center; gap:7px; }
  .kort-h i { color:var(--accent); }
  .gitter { display:grid; grid-template-columns:repeat(auto-fit,minmax(160px,1fr)); gap:12px; }
  .noegletal { background:var(--surface); border:0.5px solid var(--border); border-radius:var(--radius-lg); padding:13px 15px; }
  .noegletal .v { font-size:22px; font-weight:500; color:var(--text); font-variant-numeric:tabular-nums; }
  .noegletal .l { font-size:11px; color:var(--text3); margin-top:2px; }
  .noegletal .u { font-size:12px; color:var(--text2); margin-left:3px; font-weight:400; }

  /* KONTOKORT */
  .konto-boks { border:0.5px solid var(--border); border-radius:var(--radius-lg); background:var(--surface); margin-bottom:12px; overflow:hidden; }
  .konto-top { display:flex; align-items:center; gap:12px; padding:12px 16px; cursor:pointer; }
  .konto-top:hover { background:var(--surface2); }
  .konto-navn { font-size:13px; font-weight:500; color:var(--text); flex:1; }
  .konto-saldo { font-size:17px; font-weight:500; color:var(--text); font-variant-numeric:tabular-nums; }
  .konto-krop { border-top:0.5px solid var(--border); padding:0; display:none; }
  .konto-boks.aaben .konto-krop { display:block; }
  .konto-pil { color:var(--text3); transition:transform .12s; }
  .konto-boks.aaben .konto-pil { transform:rotate(90deg); }
  .post-tbl { width:100%; border-collapse:collapse; font-size:12px; }
  .post-tbl th { text-align:left; font-size:10px; color:var(--text3); font-weight:500; padding:7px 14px; border-bottom:0.5px solid var(--border); }
  .post-tbl td { padding:7px 14px; border-bottom:0.5px solid var(--border); color:var(--text2); }
  .post-tbl tr:last-child td { border-bottom:none; }
  .art { font-size:10px; padding:1px 7px; border-radius:20px; background:var(--surface2); color:var(--text2); white-space:nowrap; }
  .art.til { background:var(--ok-bg); color:var(--ok-fg); }
  .art.fra { background:var(--surface2); color:var(--text2); }
  .art.man { background:var(--adv-bg); color:var(--adv-fg); }

  /* MODAL */
  .ov { position:fixed; inset:0; background:rgba(0,0,0,.42); display:none; align-items:flex-start; justify-content:center; padding:6vh 16px; overflow:auto; z-index:60; }
  .ov.aaben { display:flex; }
  .modal { background:var(--surface); border-radius:var(--radius-lg); width:100%; max-width:460px; padding:20px 22px; box-shadow:0 20px 60px rgba(0,0,0,.28); }
  .modal.bred { max-width:760px; }
  .modal-h { font-size:14px; font-weight:500; margin-bottom:14px; display:flex; align-items:center; justify-content:space-between; }
  .luk { color:var(--text3); cursor:pointer; font-size:20px; line-height:1; }
  .luk:hover { color:var(--text); }
  .modal-fod { display:flex; gap:8px; justify-content:flex-end; margin-top:16px; }
  .hint { font-size:11px; color:var(--text3); line-height:1.5; margin-top:5px; }
  .tom { text-align:center; color:var(--text3); padding:40px 20px; }
  .tom i { font-size:32px; display:block; margin-bottom:10px; }
  .indl { text-align:center; color:var(--text3); padding:40px; }
  .fejlboks { background:var(--fejl-bg); color:var(--fejl-fg); border-radius:var(--radius); padding:9px 12px; font-size:12px; margin-bottom:12px; }
  .toast { position:fixed; bottom:22px; left:50%; transform:translateX(-50%); background:var(--text); color:var(--bg); padding:9px 16px; border-radius:20px; font-size:12.5px; z-index:90; opacity:0; transition:opacity .18s; pointer-events:none; }
  .toast.vis { opacity:1; }
/* ─── VÆRKTØJS-BJÆLKE I SIDEBAREN ────────────────────────────────────────────
   Fortæller hvilket værktøj man står i, og giver vejen tilbage til fliserne.
   Uden den ville man ikke kunne se, at Økonomi er en sektion med flere ting. */
.sb-vaerktoej { display:flex; align-items:center; gap:7px; padding:9px 14px; margin:0;
  border-bottom:0.5px solid var(--border); font-size:12px; font-weight:500; color:var(--text); }
.sb-vaerktoej > i { color:var(--accent); font-size:15px; }
.sb-retur { margin-left:auto; color:var(--text3); text-decoration:none; display:flex; }
.sb-retur:hover { color:var(--text); }

/* ─── FORSIDE: VÆRKTØJSFLISER ────────────────────────────────────────────────
   Samme mønster som "Vælg område" på evfield.dk, ét niveau nede. Nye værktøjer
   dukker op af sig selv - fliserne bygges af VAERKTOEJER i skal.js. */
.fs-wrap { max-width:920px; margin:0 auto; padding:38px 22px 60px; }
.fs-hd { display:flex; align-items:center; gap:12px; margin-bottom:6px; }
.fs-ikon { width:42px; height:42px; border-radius:11px; background:var(--accent);
  display:flex; align-items:center; justify-content:center; }
.fs-ikon i { font-size:21px; color:var(--accent-fg); }
.fs-titel { font-size:20px; font-weight:500; }
.fs-sub { font-size:12.5px; color:var(--text2); margin-top:1px; }
.fs-lbl { font-size:11px; font-weight:500; color:var(--text3); text-transform:uppercase;
  letter-spacing:.05em; margin:30px 0 11px; }
.fliser { display:grid; grid-template-columns:repeat(auto-fill,minmax(280px,1fr)); gap:14px; }
.flise { display:block; background:var(--surface); border:0.5px solid var(--border);
  border-radius:var(--radius-lg); padding:18px 20px; text-decoration:none; color:inherit;
  transition:border-color .12s, box-shadow .12s, transform .12s; }
.flise:hover { border-color:var(--accent); box-shadow:0 3px 14px var(--accent-glow); transform:translateY(-1px); }
.flise .ic { font-size:23px; color:var(--accent); display:block; margin-bottom:9px; }
.flise .t { font-size:15px; font-weight:500; display:block; margin-bottom:4px; }
.flise small { font-size:12px; color:var(--text2); line-height:1.5; display:block; }
.flise.laast { opacity:.5; pointer-events:none; }
.flise.laast .ic { color:var(--text3); }
.fs-fod { margin-top:34px; padding-top:16px; border-top:0.5px solid var(--border);
  display:flex; align-items:center; gap:14px; flex-wrap:wrap; font-size:11.5px; color:var(--text3); }
.fs-fod a { color:inherit; text-decoration:none; }
.fs-fod a:hover { color:var(--text); }