/* =========================================================================
   Tema: varmt papir, blekk, EN aksentfarge. Flatt, med kantlinjer i stedet
   for skygger.

   Lastet sist og overstyrer dashboard.css, style.css og arbeid.css, baade for
   selger og admin. Retningen kommer fra to kilder:

   - "Data-dense / editorial"-familien i awesome-claude-design (Linear,
     PostHog): hoey tetthet, 1px kantlinjer, radius under 10px, ingen
     gradienter, en aksent brukt som skilletegn og ikke som flate.
   - Katalogen deres over det som faar et dashbord til aa se maskingenerert
     ut: gradientknapper og -flater, bloete skygger paa alt, kort i kort i
     kort, pastellfargede ikonfliser, og skrift som ikke er valgt.

   Maskoten og de tegnede ikonene er beholdt: de er det som gir siden
   et ansikt. Det som er fjernet er rammeverket rundt dem.

   Tilbake til forrige utseende: git-taggen for-redesign.
   ========================================================================= */

:root {
  --bg: #F4F1EA;            /* varmt papir */
  --panel: #FFFFFF;
  --panel-2: #FAF8F3;
  --panel-3: #EFEBE2;
  --border: #E2DDD0;
  --border-soft: #E9E5DA;
  --text: #1F1E1A;
  --text-dim: #5C594F;
  --text-faint: #77736A;
  --accent: #2B52C8;
  --accent-dim: #213FA0;
  --success: #1B7A52;
  --danger: #B8362E;
  --warning: #A86100;
  --data: #2B52C8;
  --data-svak: rgba(43, 82, 200, .08);
  --graf-rute: #E6E1D4;
  --radius: 7px;
  --radius-lg: 10px;
  --skygge: none;
  --skygge-loft: 0 2px 8px rgba(31, 30, 26, .08);   /* bare popovere og toasts */
  --font-ui: 'Instrument Sans', 'Fira Sans', -apple-system, 'Segoe UI', sans-serif;
}

body { background: var(--bg); color: var(--text); font-family: var(--font-ui);
  -webkit-font-smoothing: antialiased; }
h1, h2, h3, h4 { font-weight: 600; letter-spacing: -.012em; }
button, input, select, textarea { font-family: inherit; }

/* ---------- rammen ---------- */

.sidebar { background: var(--panel-2); border-color: var(--border); }
.topbar { background: var(--bg); border-color: var(--border); backdrop-filter: none; }
.topbar h1 { font-size: 16px; font-weight: 600; letter-spacing: -.01em; }

.sidebar .brand .mark, .login-card .mark {
  background: var(--accent); box-shadow: none; border-radius: 8px;
}
.nav-link { border-radius: 6px; color: var(--text-dim); font-weight: 500; }
.nav-link:hover { background: var(--panel-3); color: var(--text); }
.nav-link.active { background: var(--panel-3); color: var(--text); font-weight: 600; }
.nav-link.active .icon { color: var(--accent); }
.nav-section { color: var(--text-faint); letter-spacing: .08em; }

.avatar { background: var(--panel-3); color: var(--text); border: 1px solid var(--border); }

/* ---------- flater: kantlinje, ingen skygge, lite radius ---------- */

.stat-card, .arbeid-kort, .crm-kort, .kort, .panel, .card,
.ko-sok, .topbar-dato, .spill, .demo-sms {
  border-radius: var(--radius-lg); border: 1px solid var(--border); box-shadow: none;
}
.stat-card:hover, .kort:hover, .crm-kort:hover { box-shadow: none; border-color: #CFC8B6; }
.crm-kort.ko-valgt { box-shadow: 0 0 0 1.5px var(--accent); border-color: var(--accent); }

/* Tallene oeverst: ETT bord med skillelinjer, ikke fem kort. Raden er en
   enkelt flate, og hver celle er bare tall og etikett. */
.stat-rad {
  gap: 1px; background: var(--border); border: 1px solid var(--border);
  border-radius: var(--radius-lg); overflow: hidden;
}
.stat-kort { border: 0; border-radius: 0; box-shadow: none; background: var(--panel);
  padding: 16px 20px; gap: 12px; }
.stat-kort strong { font-size: 28px; font-weight: 600; letter-spacing: -.03em;
  font-variant-numeric: tabular-nums; }
.stat-kort div > span { color: var(--text-dim); font-size: 12.5px; }
.stat-kort.varsel strong { color: var(--danger); }
.stat-ikon { width: 44px; height: 44px; border-radius: 0; background: none; overflow: visible; }
.stat-bilde { border-radius: 10px; }

/* Admin-kortene: ingen farget ikonflis, bare et lite linjeikon ved siden av
   teksten. */
.stat-card .stat-icon, .stat-card.tone-accent .stat-icon, .stat-card.tone-success .stat-icon,
.stat-card.tone-neutral .stat-icon, .stat-card.tone-warning .stat-icon, .stat-card.tone-danger .stat-icon {
  background: none; border: 1px solid var(--border); border-radius: 8px; color: var(--text-dim);
}
.stat-card.tone-accent .stat-icon { color: var(--accent); }
.stat-card.tone-success .stat-icon { color: var(--success); }
.stat-card .n, .stat-card.hero .n { font-weight: 600; letter-spacing: -.03em; }

/* ---------- knapper ---------- */

button, .btn { border-radius: 6px; box-shadow: none; }
button:hover { filter: none; }
button.primary, .btn.primary {
  background: var(--accent); border-color: var(--accent); color: #fff; box-shadow: none;
}
button.primary:hover { background: var(--accent-dim); border-color: var(--accent-dim); }
button.ghost:hover, .pager button:hover { background: var(--panel-3); }
button.danger { background: #FBEAE8; border-color: #F0CBC6; color: var(--danger); }
button.danger:hover { background: var(--danger); color: #fff; }
.pager button { border-radius: 6px; }

/* Ring er grønn og flat: grønt betyr "ring". */
.ring-sirkel, .ko-ring .ring-knapp, button.ring-knapp, .crm-ring:not(.mangler) {
  background: var(--success); border-color: var(--success); color: #fff; box-shadow: none;
}
.ring-sirkel:hover, .ko-ring .ring-knapp:hover, .crm-ring:not(.mangler):hover { background: #156443; filter: none; }
.arbeid .ring-sirkel { box-shadow: 0 0 0 8px rgba(27, 122, 82, .10); }
.arbeid.i-samtale .ring-sirkel { background: var(--accent);
  box-shadow: 0 0 0 8px rgba(43, 82, 200, .10); }
.ko-ring .ring-knapp { border-radius: 6px; }

.demo-send { background: var(--accent); border-color: var(--accent); color: #fff; box-shadow: none; }
.demo-send:disabled { background: var(--panel-3); border-color: var(--border); color: var(--text-faint); }

/* ---------- merkelapper: smaa og flate ---------- */

.pill, .chip, .chip-aktiv, .pill.accent {
  border-radius: 5px; font-weight: 600; letter-spacing: 0;
}
.chip, .chip-aktiv, .pill.accent { background: #E7ECFA; color: var(--accent-dim); }
.utfall-chip span { border-radius: 6px; }

/* ---------- skjema ---------- */

input:focus, textarea:focus, select:focus {
  border-color: var(--accent); box-shadow: 0 0 0 2px rgba(43, 82, 200, .18);
}
.ko-sok:focus-within { box-shadow: 0 0 0 2px rgba(43, 82, 200, .18); }

/* ---------- maskot og spill ---------- */

/* Skriptskrift med Comic Sans som reserve er det mest "maskinlagde" paa siden. */
.maskot-tekst {
  font: 500 12.5px/1.4 var(--font-ui); color: var(--text-faint);
  transform: none; margin: 0 0 4px; max-width: 160px;
}
.spill { background: var(--panel); }
.spill-stolpe { background: var(--panel-3); height: 6px; }
.spill-stolpe i { background: var(--accent); }
.spill-rekke { color: var(--warning); }
.merke { border-radius: 8px; }
.merke-rutenett { gap: 6px; }
.spill-toast { border-radius: var(--radius-lg); }

/* ---------- koe ---------- */

.ko-rad { border-radius: 0; }
.bransje-ikon, .bransje-ikon.stor { border-radius: 8px; }
.bransje-ikon { width: 34px; height: 34px; }
.bransje-ikon.stor { width: 58px; height: 58px; }

kbd, .ko-sok kbd, .arbeid-taster kbd, .utfall-chip kbd {
  background: var(--panel-2); border-color: var(--border); border-radius: 4px;
}

/* Admin: de fire tallene som ett bord med skillelinjer, som hos selgeren. */
.stat-grid { gap: 1px; background: var(--border); border: 1px solid var(--border);
  border-radius: var(--radius-lg); overflow: hidden; }
.stat-grid > .stat-card { border: 0; border-radius: 0; background: var(--panel); }
.stat-grid > .stat-card:hover { background: var(--panel-2); }

/* Fremdriftsringen: sporet i papirfarge, fyllet i aksent (var turkis). */
.ring-fremdrift .spor { stroke: var(--panel-3); }
.ring-fremdrift .fylt { stroke: var(--accent); }

/* Skjemaer med etikett over feltet (E-postkampanje). */
.filter-fields label, .kampanje-felt label { display: grid; gap: 4px; font-size: 12.5px; color: var(--text-dim); }
.sjekkliste .pill { min-width: 78px; flex: none; white-space: nowrap; }


/* Kandidatkort (E-postkampanje). Handlingsknappene ligger oeverst til hoeyre i hvert
   kort og bryter ned under navnet paa smale skjermer, saa de aldri havner utenfor. */
.kandidater { display: grid; gap: 10px; margin: 10px 0; }
.kandidat { background: var(--panel); border: 1px solid var(--border); border-radius: var(--radius-lg); padding: 16px 18px; }
.kandidat-topp { display: flex; flex-wrap: wrap; gap: 12px 16px; justify-content: space-between; align-items: flex-start; }
.kandidat-navn { display: flex; gap: 12px; align-items: flex-start; min-width: 240px; flex: 1 1 320px; }
.kandidat-navn input[type=checkbox] { width: 18px; height: 18px; margin-top: 3px; flex: none; }
.kandidat-handling { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.kandidat-handling form { margin: 0; }
.kandidat-handling button { min-height: 38px; padding: 0 16px; font-weight: 600; }
.kandidat-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 14px; margin-top: 12px; }
.kandidat-etikett { font-size: 11px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--text-faint); margin-bottom: 3px; }
.kandidat-epost { margin-top: 10px; }
.kandidat-epost summary { cursor: pointer; font-weight: 600; color: var(--accent-dim); }
.kandidat-epost pre { white-space: pre-wrap; margin: 8px 0 0; padding: 12px; background: var(--panel-2); border: 1px solid var(--border); border-radius: 8px; font: 13px/1.5 var(--font-ui); }
.bulkbar { position: sticky; top: 0; z-index: 5; display: flex; flex-wrap: wrap; gap: 10px; align-items: center; margin: 10px 0; padding: 10px 14px; background: var(--bg); border-bottom: 1px solid var(--border); }