/* ═══════════════════════════════════════════════════════════════════════════
   INTELLI — udtrykslaget (4. september 2026)
   ───────────────────────────────────────────────────────────────────────────
   Hjemmesidens udtryk (Desktop/hjemmeside 2.0: identitet.css + finish.css +
   moerk.css) lagt over panelet, loginskærmen og opstartssiden — som ÉT lag
   oven på intelli.css, så intet af det, der virker, skrives om.

   Simon 4/9: «Vi har ikke den samme visuelle intensitet på hjemmesiden og
   her. Tag noter fra hjemmesidens layout, og byg det ind, så det hører sammen.»

   Noterne fra hjemmesiden, og hvad de bliver til her:
     · Skriften er Schibsted Grotesk (egen server, SIL OFL) — også her.
     · Rammen er navy (#0a1628), indholdet lyst (papir #f6f8fb, hvide kort).
     · ÉN accent: den dybe blå #2563eb på knapper og det, der er valgt.
     · Overskrifter er større og federe (700, stram sporing), ikke lette.
     · Hjørner er bløde: 12 px på kort, 10 på knapper, 8 på felter.
       Panelets 2 px var «rapport»; hjemmesiden er «virksomhed man kan ringe til».
     · Knapper, faner, felter og kolonner står i SÆTNINGSFORM, 13–15 px.
       Versaler med vid sporing bliver kun tilbage som kapitelmærke (kicker),
       hvor hjemmesiden også bruger dem — med den lille streg foran.
     · Wordmarket er «INTELLI Solutions» på én linje: fed + let.
     · Dybde i tre trin (samme skygger som hjemmesiden), ikke flere.

   Filen ligger ÅBENT (før login), fordi loginskærmen og /start bruger den.
   Den indeholder ingen hemmeligheder — kun skrift, farver og mål.
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── Skriften ──────────────────────────────────────────────────────────────
   Samme to filer som på hjemmesiden (public/fonte/). Variabel skrift 400–700. */
@font-face {
  font-family: 'Schibsted Grotesk';
  font-style: normal; font-weight: 400 700; font-display: swap;
  src: url('/fonte/schibsted-grotesk-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Schibsted Grotesk';
  font-style: normal; font-weight: 400 700; font-display: swap;
  src: url('/fonte/schibsted-grotesk-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* ── Tokens: hjemmesidens værdier ind i identitetens navne ───────────────── */
/* html:root og ikke :root — med vilje. sager.css og login.css @import'er
   identitet.css EFTER dette ark, og identitetens :root ville så vinde på
   rækkefølge (set 4/9-2026: --in-radius-lg var 3px på panelet, ikke 12px).
   html:root vejer ét hak mere og vinder uanset, hvor arket står i rækken. */
html:root {
  --in-font: 'Schibsted Grotesk', -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Helvetica Neue', Helvetica, Arial, sans-serif;
  --in-navy-900: #0a1628;
  --in-navy-800: #0f2240;
  --in-navy-600: #1a3358;
  --in-blue-700: #1d4ed8;
  --in-blue-600: #2563eb;
  --in-blue-400: #7dd3fc;
  --in-blue-050: #eaf1ff;
  --in-accent: #2563eb;
  --in-page: #f6f8fb;
  --in-line: #e3e9f0;
  --in-line-strong: #d3dce6;
  --in-text: #2b3a4d;
  --in-radius: 8px;
  --in-radius-lg: 12px;
  --in-shadow-sm: 0 1px 2px rgba(10,25,47,.05), 0 1px 1px rgba(10,25,47,.03);
  --in-shadow:    0 1px 2px rgba(10,25,47,.06), 0 10px 30px -12px rgba(10,25,47,.18);
  --in-shadow-lg: 0 2px 6px rgba(10,25,47,.08), 0 30px 60px -24px rgba(10,25,47,.28);
  --u-lys: #7dd3fc;
  --u-flade: #0f2240;
  --u-knap: 10px;
  --u-kort: 12px;
}

/* ── Grundlag og typografi ─────────────────────────────────────────────── */
body { font-size: 15px; letter-spacing: -.005em; }
h1 { font-size: 28px; font-weight: 700; letter-spacing: -.03em; text-wrap: balance; }
h2 { font-size: 22px; font-weight: 700; letter-spacing: -.02em; }
h3 { font-size: 17px; font-weight: 600; letter-spacing: -.01em; }
h4 { font-size: 15px; font-weight: 600; letter-spacing: 0; }
::selection { background: var(--in-blue-600); color: #fff; }

/* Kapitelmærket beholder versalerne — med hjemmesidens lille streg foran. */
.in-kicker { display: inline-flex; align-items: center; gap: 10px; font-size: 11.5px; letter-spacing: .22em; font-weight: 700; }
.in-kicker::before { content: ''; width: 18px; height: 2px; border-radius: 2px; background: currentColor; opacity: .55; flex: none; }
.in-label { font-size: 11px; letter-spacing: .14em; font-weight: 700; }
.in-label--lg { font-size: 12px; letter-spacing: .18em; }
.in-crumbs { font-size: 12.5px; letter-spacing: 0; text-transform: none; color: var(--in-text-dim); }
.in-crumbs .cur { color: var(--in-text-strong); }
.in-viewhead { border-bottom: 0; padding-bottom: 0; margin-bottom: var(--in-s6); }
.in-viewhead__sub { font-size: 14.5px; margin-top: 4px; }

/* ── Topbaren: hjemmesidens mørke ramme ────────────────────────────────── */
.in-topbar { background: rgba(10,22,40,.97); border-bottom: 1px solid rgba(255,255,255,.08); }
.in-topbar::before { content: ''; display: block; height: 3px; background: linear-gradient(90deg, #0a1628, var(--in-blue-600) 55%, var(--u-lys)); }
.in-topbar__inner { height: 66px; }
.in-wordmark { display: inline-flex; align-items: baseline; gap: 0; font-size: 19px; font-weight: 700; letter-spacing: -.012em; text-transform: none; }
.in-wordmark__solutions { font-weight: 400; color: rgba(255,255,255,.78); }
.in-wordmark__sub {
  display: inline-block; margin: 0 0 0 12px; padding: 3px 9px; vertical-align: 2px;
  font-size: 11.5px; font-weight: 600; letter-spacing: .02em; text-transform: none;
  color: #dbe6f3; background: rgba(255,255,255,.08); border: 1px solid rgba(255,255,255,.14); border-radius: 999px;
}
.in-topnav { margin-left: var(--in-s6); gap: var(--in-s2); }
.in-topnav a { height: 66px; padding: 0 var(--in-s3); font-size: 14.5px; font-weight: 600; letter-spacing: 0; text-transform: none; color: #c9d6e6; border-bottom-width: 2px; }
.in-topnav a:hover { color: #fff; }
.in-topnav a.on { color: #fff; border-bottom-color: var(--u-lys); }
.in-ind { border-radius: 999px; border-color: rgba(255,255,255,.16); background: rgba(255,255,255,.05); color: #dbe6f3; font-size: 12.5px; letter-spacing: 0; text-transform: none; padding: 6px 12px; }
.in-ind:hover { border-color: rgba(255,255,255,.3); }
.in-topbar__meta { font-size: 12px; letter-spacing: 0; text-transform: none; color: #9fb3cc; }
.in-topbar .in-btn--ghost { color: #dbe6f3; border: 1px solid rgba(255,255,255,.16); border-radius: 999px; padding: 6px 14px; font-size: 13px; }
.in-topbar .in-btn--ghost:hover { background: rgba(255,255,255,.1); color: #fff; }

/* ── Sidemenuen ────────────────────────────────────────────────────────── */
.in-sidenav__b { border-left: 0; border-radius: 8px; padding: 9px 12px; font-size: 14.5px; font-weight: 500; letter-spacing: 0; text-transform: none; color: var(--in-ink-600); }
.in-sidenav__b:hover { background: #eef2f7; color: var(--in-text-strong); }
.in-sidenav__b.on { background: var(--in-blue-050); color: var(--in-blue-700); font-weight: 600; border-left: 0; }
.in-sidenav__n { border-radius: 999px; font-size: 11.5px; padding: 1px 7px; }
.in-sidenav__snart { border-radius: 999px; text-transform: none; letter-spacing: 0; }

/* ── Knapper: én accent, sætningsform, bløde hjørner ───────────────────── */
.in-btn {
  padding: 10px 18px; border-radius: var(--u-knap);
  font-size: 14px; font-weight: 600; letter-spacing: 0; text-transform: none;
  transition: background .15s, border-color .15s, color .15s, box-shadow .2s, transform .2s cubic-bezier(.2,.7,.3,1);
}
.in-btn:hover { background: #f3f6fa; border-color: var(--in-line-strong); }
.in-btn--sm { padding: 7px 12px; font-size: 13px; border-radius: 8px; }
.in-btn--primary {
  background: var(--in-blue-600); border-color: var(--in-blue-600); color: #fff;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.14), 0 10px 24px -14px rgba(37,99,235,.9);
}
.in-btn--primary:hover { background: var(--in-blue-700); border-color: var(--in-blue-700); transform: translateY(-1px); }
.in-btn--primary:active { transform: none; }
.in-btn--dark { background: var(--in-navy-900); border-color: var(--in-navy-900); }
.in-btn--dark:hover { background: var(--u-flade); border-color: var(--u-flade); }
.in-btn--ghost { border-color: transparent; }
.in-btn--danger { border-color: var(--in-alert-line); }

/* ── Felter ────────────────────────────────────────────────────────────── */
.in-flabel { font-size: 13px; font-weight: 600; letter-spacing: 0; text-transform: none; color: var(--in-ink-600); margin-bottom: 6px; }
.in-input, .in-select, .in-textarea { border-radius: 8px; padding: 10px 12px; font-size: 15px; }
.in-input:focus, .in-select:focus, .in-textarea:focus { border-color: var(--in-blue-600); box-shadow: 0 0 0 3px rgba(37,99,235,.16); }
.in-input--sm { padding: 5px 9px; font-size: 13px; }
.in-hint, .in-error { font-size: 13px; }
.in-search .in-input { padding-left: 36px; }

/* ── Kort og paneler: hjemmesidens hvide kort med bløde hjørner ────────── */
.in-panel { border-radius: var(--u-kort); box-shadow: var(--in-shadow-sm); }
.in-panel__head { padding: var(--in-s4) var(--in-s5); }
.in-card {
  background: #fff; border-radius: var(--u-kort); border-top-width: 1px;
  padding: var(--in-s5) var(--in-s6); box-shadow: var(--in-shadow-sm);
}
.in-card--alert, .in-card--info, .in-card--ok { border-top-width: 3px; }
.in-card--left { border-left-width: 3px; }
.in-card__title { font-size: 18px; font-weight: 700; letter-spacing: -.012em; }
.in-card__body { font-size: 14.5px; }
.in-defs dt { font-size: 12px; letter-spacing: 0; text-transform: none; font-weight: 600; color: var(--in-ink-500); }
.in-defs dd { font-size: 14.5px; }
.in-banner { border-radius: 10px; }
.in-toast { border-radius: 10px; box-shadow: var(--in-shadow-lg); }
.in-modal { border-radius: 14px; box-shadow: var(--in-shadow-lg); }
.in-empty { border-radius: var(--u-kort); }
.in-empty__ico { display: none; }

/* KPI'er: tal i fed, som hjemmesidens nøgletal */
.in-kpi { border-radius: var(--u-kort); border-top: 1px solid var(--in-line); box-shadow: var(--in-shadow-sm); padding: var(--in-s5) var(--in-s5) var(--in-s4); }
.in-kpi__val { font-size: 32px; font-weight: 700; letter-spacing: -.03em; }
.in-kpi__lbl { font-size: 13px; letter-spacing: 0; text-transform: none; font-weight: 500; color: var(--in-ink-500); margin-top: 4px; }
.in-kpiband { border-radius: var(--u-kort); overflow: hidden; background: linear-gradient(180deg, #0d1f3a 0%, var(--in-navy-900) 100%); }

/* ── Tabeller: rolige kolonnehoveder, ikke navy bjælker ────────────────── */
.in-tablewrap { border: 1px solid var(--in-line); border-radius: var(--u-kort); background: #fff; box-shadow: var(--in-shadow-sm); overflow: auto; }
.in-table { font-size: 14px; }
.in-table thead th {
  background: #f6f8fb; color: var(--in-ink-500);
  font-size: 12.5px; font-weight: 600; letter-spacing: 0; text-transform: none;
  border-bottom: 1px solid var(--in-line); padding: var(--in-s3) var(--in-s4);
}
.in-table tbody tr:nth-child(even) { background: transparent; }
.in-table tbody tr:hover { background: #f3f7fd; }
.in-table tbody td { padding: 13px var(--in-s4); }
.in-table__strong { font-weight: 600; font-size: 15px; }

/* ── Status, mærker, chips: piller i sætningsform ──────────────────────── */
.in-status { font-size: 12.5px; font-weight: 600; letter-spacing: 0; text-transform: none; }
.in-tag { border-radius: 999px; padding: 3px 10px; font-size: 12px; font-weight: 600; letter-spacing: 0; text-transform: none; }
.in-chip { border-radius: 999px; padding: 7px 13px; font-size: 13px; font-weight: 600; letter-spacing: 0; text-transform: none; }
.in-chip--on { background: var(--u-flade); border-color: var(--u-flade); }
.in-chip__n { border-radius: 999px; padding: 0 7px; }
.in-chip--on .in-chip__n { background: rgba(255,255,255,.14); color: #dbe6f3; }
.in-rule-label { margin-top: var(--in-s6); }

/* ── Kundekortet: menuen til venstre i sætningsform ────────────────────── */
.in-kundekort { border-radius: 0 0 var(--u-kort) var(--u-kort); }
.in-kundekort__nav { background: #fbfcfe; padding: var(--in-s3) var(--in-s2); gap: 2px; }
.in-kundekort__fane { border-left: 0; border-radius: 8px; padding: 8px 12px; font-size: 14px; font-weight: 500; letter-spacing: 0; text-transform: none; color: var(--in-ink-600); }
.in-kundekort__fane:hover { background: #eef2f7; }
.in-kundekort__fane.on { background: var(--in-blue-050); color: var(--in-blue-700); font-weight: 600; border-left: 0; }
.in-kundekort__mappeindhold .in-kundekort__fane { padding-left: 22px; }
.in-kundekort__mappeknap { font-size: 11px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--in-ink-400); padding: 10px 12px 4px; }
.in-kundekort__mappeknap:hover { color: var(--in-ink-600); }
.in-kundekort__hjaelp { border-top: 1px solid var(--in-line); margin-top: var(--in-s3); }
.in-fold__titel { font-size: 14px; font-weight: 600; letter-spacing: 0; text-transform: none; }
.in-tabs { border-radius: 10px; }
.in-tabs__b { font-size: 14px; font-weight: 500; letter-spacing: 0; text-transform: none; border-radius: 8px; }
.in-tabs__b.on { background: var(--in-blue-050); color: var(--in-blue-700); font-weight: 600; }
.in-tabs__n { border-radius: 999px; }

/* ── Smalle skærme: de samme mål i den fladtrykte menu ─────────────────── */
@media (max-width: 1060px) {
  .in-topbar__inner { height: 60px; }
  .in-topnav a { height: 60px; }
}
@media (prefers-reduced-motion: reduce) {
  .in-btn--primary:hover { transform: none; }
}