/* ============================================================
   Industrikran Norge – Design tokens
   ============================================================ */
:root {
  --color-brand-navy:      #002554;
  --color-brand-gold:      #f1b434;
  --color-brand-gold-dark: #e5a535;
  --color-navy-dark:       #001a3a;
  --color-bg-page:         #f4f5f7;
  --color-bg-card:         #ffffff;
  --color-text-primary:    #1a1a1a;
  --color-text-light:      #ffffff;
  --color-text-muted:      #5a6472;
  --color-border:          #e0e3e8;
  --color-success:         #1a6e31;
  --color-warning:         #8a5a00;
  --color-danger:          #a32d2d;
  --font-family-base:      'Inter', 'Segoe UI', sans-serif;
  --border-radius-sm:      8px;
  --border-radius-md:      12px;
  --shadow-card:           0 4px 12px rgba(0,37,84,0.08), 0 1px 3px rgba(0,37,84,0.05);
}

* { box-sizing: border-box; margin: 0; padding: 0; }

body {
  font-family: var(--font-family-base);
  background: var(--color-bg-page);
  color: var(--color-text-primary);
  min-height: 100vh;
  font-size: 15px;
}

/* ── Header ── */
.site-header {
  background: var(--color-brand-navy);
  color: var(--color-text-light);
  padding: 14px 32px;
  display: flex;
  align-items: center;
  gap: 16px;
}
/* Logoen er hvit + gull og krever mørk bakgrunn. Både headeren og
   sidemenyen er marineblå, så den står rett på uten noe bak seg. */
.site-header .header-logo {
  height: 28px;
  width: auto;
  display: block;
  flex-shrink: 0;
}
.site-header .page-title {
  font-size: 1rem;
  opacity: 0.85;
}

/* ── Login screen: se samlet blokk lenger ned ── */

/* ── User info i header ── */
.site-header { justify-content: space-between; }
.user-info {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-left: auto;
}
.user-info.hidden { display: none; }
.user-email {
  font-size: 0.875rem;
  opacity: 0.85;
}
.btn-logg-ut {
  background: transparent;
  color: var(--color-brand-gold);
  border: 1px solid var(--color-brand-gold);
  border-radius: var(--border-radius-sm);
  padding: 4px 12px;
  font-size: 0.8rem;
  cursor: pointer;
  font-weight: 600;
}
.btn-logg-ut:hover { background: var(--color-brand-gold); color: var(--color-brand-navy); }

/* Tilbake til dashboard-knapp (oppg.6) */
.btn-tilbake-dashboard {
  background: transparent;
  color: #fff;
  border: 1px solid rgba(255, 255, 255, 0.4);
  border-radius: var(--border-radius-sm);
  padding: 4px 12px;
  font-size: 0.8rem;
  font-weight: 600;
  text-decoration: none;
  white-space: nowrap;
}
.btn-tilbake-dashboard:hover { background: rgba(255, 255, 255, 0.12); }

/* Valideringsoppsummering med kildeangivelse (oppg.2) */
.valideringsoppsummering { margin-bottom: 16px; }
.valideringsoppsummering.hidden { display: none; }
.valideringsoppsummering ul { margin: 6px 0 0; padding-left: 20px; }
.valideringsoppsummering li { margin: 2px 0; }

/* Montering per kran (steg 4) */
.montering-kort {
  border: 1.5px solid var(--color-border);
  border-radius: var(--border-radius-md);
  padding: 16px 18px;
  margin-bottom: 16px;
  background: #fafbfc;
}
.montering-kort .section-heading { margin-top: 0; }

/* App skjult til auth er bekreftet */
#app.hidden { display: none; }

/* ── Layout ── */
.container {
  max-width: 760px;
  margin: 36px auto;
  padding: 0 16px;
}

.card {
  background: var(--color-bg-card);
  border-radius: var(--border-radius-md);
  box-shadow: var(--shadow-card);
  padding: 32px;
  margin-bottom: 24px;
}

/* ── Progress ── */
.progress-bar-wrap {
  display: flex;
  gap: 6px;
  margin-bottom: 24px;
}
.progress-step {
  flex: 1;
  height: 5px;
  background: var(--color-border);
  border-radius: 3px;
  transition: background 0.3s;
}
.progress-step.active   { background: var(--color-brand-gold); }
.progress-step.done     { background: var(--color-brand-navy); }

.step-label {
  font-size: 0.78rem;
  color: var(--color-text-muted);
  margin-bottom: 6px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}
.step-title {
  font-size: 1.2rem;
  font-weight: 700;
  color: var(--color-brand-navy);
  margin-bottom: 28px;
}

/* ── Form elements ── */
.form-group {
  margin-bottom: 20px;
}
.form-group label {
  display: block;
  font-weight: 600;
  margin-bottom: 6px;
  font-size: 0.95rem;
}
.form-group label .req { color: var(--color-danger); margin-left: 2px; }

.form-group input[type="text"],
.form-group input[type="email"],
.form-group input[type="tel"],
.form-group input[type="number"],
.form-group select,
.form-group textarea {
  width: 100%;
  padding: 9px 12px;
  border: 1.5px solid var(--color-border);
  border-radius: var(--border-radius-sm);
  font-size: 0.95rem;
  font-family: var(--font-family-base);
  transition: border-color 0.2s;
  background: #fafafa;
}
.form-group input:focus,
.form-group select:focus,
.form-group textarea:focus {
  outline: none;
  border-color: var(--color-brand-navy);
  background: #fff;
}
.form-group textarea { min-height: 80px; resize: vertical; }

/* Radio groups */
.radio-group { display: flex; flex-direction: column; gap: 8px; }
.radio-group label {
  display: flex;
  align-items: center;
  gap: 10px;
  font-weight: 400;
  cursor: pointer;
  padding: 8px 12px;
  border: 1.5px solid var(--color-border);
  border-radius: var(--border-radius-sm);
  transition: border-color 0.2s, background 0.2s;
}
.radio-group label:hover { border-color: var(--color-brand-navy); background: #f5f7ff; }
.radio-group input[type="radio"] { width: 16px; height: 16px; accent-color: var(--color-brand-navy); }
.radio-group label.selected {
  border-color: var(--color-brand-navy);
  background: #eef1f9;
  font-weight: 600;
}

/* Section heading inside form */
.section-heading {
  font-size: 1rem;
  font-weight: 700;
  color: var(--color-brand-navy);
  border-left: 4px solid var(--color-brand-gold);
  padding-left: 10px;
  margin: 28px 0 16px;
}
.section-heading:first-child { margin-top: 0; }

.hint {
  font-size: 0.8rem;
  color: var(--color-text-muted);
  margin-top: 4px;
}

/* ── Buttons ── */
.btn-nav {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 8px;
}
.btn {
  padding: 10px 28px;
  border: none;
  border-radius: var(--border-radius-sm);
  font-size: 0.95rem;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.2s, transform 0.1s;
}
.btn:active { transform: scale(0.98); }
.btn-primary {
  background: var(--color-brand-gold);
  color: var(--color-brand-navy);
}
.btn-primary:hover { background: var(--color-brand-gold-dark, #e5a535); }
.btn-secondary {
  background: transparent;
  color: var(--color-brand-navy);
  border: 1.5px solid var(--color-brand-navy);
}
.btn-secondary:hover { background: #eef1f9; }
.btn:disabled { opacity: 0.4; cursor: not-allowed; }

/* ── Success screen ── */
.success-screen {
  text-align: center;
  padding: 48px 0;
}
.success-screen .icon { font-size: 3rem; margin-bottom: 16px; }
.success-screen h2 { color: var(--color-brand-navy); font-size: 1.4rem; margin-bottom: 8px; }
.success-screen .referanse { font-size: 1.1rem; color: var(--color-brand-gold); font-weight: 700; margin: 12px 0; }
.success-screen p { color: var(--color-text-muted); }

/* ── Error ── */
.error-msg { color: var(--color-danger); font-size: 0.82rem; margin-top: 4px; display: none; }
.field-error input, .field-error select, .field-error textarea {
  border-color: var(--color-danger) !important;
}
.field-error .error-msg { display: block; }
.form-group.field-error {
  border-left: 3px solid var(--color-danger);
  padding-left: 10px;
}

/* ── Fler-kran ── */
.kran-header {
  font-weight: 700;
  color: var(--color-brand-navy);
  font-size: 1rem;
  margin-bottom: 12px;
}
.kran-header .btn { margin-left: 12px; }
.btn-small { padding: 2px 8px; font-size: 0.75rem; }
.kran-identisk-boks {
  background: #f0f4ff;
  border: 1.5px solid var(--color-brand-navy);
  border-radius: 8px;
  padding: 14px 16px;
  margin-bottom: 12px;
}
.kran-identisk-label { font-weight: 600; }
.kran-identisk-boks .radio-group { margin-top: 8px; }
.kpb-item {
  padding: 5px 0;
  font-size: 0.9rem;
  color: #444;
  display: flex;
  align-items: center;
  gap: 8px;
}

/* ── Toast ── */
.toast {
  position: fixed;
  bottom: 24px;
  left: 50%;
  transform: translateX(-50%);
  padding: 12px 20px;
  border-radius: 6px;
  color: #fff;
  font-size: 0.9rem;
  z-index: 2000;
  box-shadow: 0 4px 16px rgba(0,0,0,0.25);
  transition: opacity 0.3s;
}
.toast-ok   { background: var(--color-brand-navy); }
.toast-feil { background: var(--color-danger); }
.toast-skjult { opacity: 0; pointer-events: none; }

/* ── Banegruppering i tabellen ── */
.toggle-pil {
  background: none;
  border: none;
  cursor: pointer;
  font-size: 0.7rem;
  color: var(--color-brand-navy);
  padding: 2px 6px 2px 0;
}
tr.bane-rad td {
  background: #f7f9fc;
  font-size: 0.82rem;
  color: #444;
  border-bottom: 1px solid #e8ecf2;
}
tr.bane-rad .bane-navn {
  font-weight: 600;
  color: var(--color-brand-navy);
  padding-left: 28px;
}
tr.bane-rad.skjult { display: none; }

/* ── Kalkulatør-grupper i detaljmodal ── */
.kalk-gruppe {
  font-size: 0.78rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--color-brand-navy);
  background: #eef2f8;
  border-left: 3px solid var(--color-brand-gold);
  padding: 5px 10px;
  margin: 12px 0 8px;
  border-radius: 0 4px 4px 0;
}

/* ── Alert ── */
.alert {
  padding: 12px 16px;
  border-radius: var(--border-radius-sm);
  margin-bottom: 16px;
  font-size: 0.9rem;
}
.alert-error { background: #fdecea; border: 1px solid #f5c6c6; color: #c62828; }
.alert-success { background: #e8f5e9; border: 1px solid #a5d6a7; color: #2e7d32; }

/* ── Dashboard ── */
.dashboard-layout {
  display: flex;
  min-height: 100vh;
}
.sidebar {
  background: var(--color-brand-navy);
  color: var(--color-text-light);
  width: 240px;
  flex-shrink: 0;
  padding: 24px 0;
}
.sidebar-logo {
  padding: 0 20px;
  margin-bottom: 32px;   /* samme luft ned til navigasjonen som teksten ga */
}
.sidebar-logo img {
  width: 100%;
  max-width: 160px;
  height: auto;
  display: block;
}
.sidebar nav a {
  display: flex;
  align-items: center;
  gap: 10px;
  color: rgba(255,255,255,0.72);
  text-decoration: none;
  padding: 0.65rem 1.25rem;
  border-left: 3px solid transparent;
  margin-bottom: 2px;
  font-size: 0.875rem;
  font-weight: 500;
  transition: background 0.15s, color 0.15s;
}
.sidebar nav a:hover {
  background: rgba(255,255,255,0.08);
  color: #fff;
}
.sidebar nav a.active {
  background: rgba(255,255,255,0.08);
  color: #fff;
  border-left: 3px solid var(--color-brand-gold);
}
.sidebar .user-info {
  margin-top: auto;
  padding: 24px 20px 0;
  border-top: 1px solid rgba(255,255,255,0.15);
  font-size: 0.8rem;
  opacity: 0.7;
}

.main-content {
  flex: 1;
  padding: 24px 32px;
  overflow-x: auto;
}
.main-content h1 {
  font-size: 1.3rem;
  color: var(--color-brand-navy);
  margin-bottom: 4px;
}
.main-content .sub-heading {
  color: var(--color-text-muted);
  font-size: 0.85rem;
  margin-bottom: 24px;
}

/* Stats cards */
.stats-row {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
  margin-bottom: 24px;
}
.stat-card {
  background: var(--color-bg-card);
  border-radius: var(--border-radius-md);
  padding: 16px 20px;
  box-shadow: var(--shadow-card);
}
.stat-card .val {
  font-size: 1.8rem;
  font-weight: 700;
  color: var(--color-brand-navy);
}
.stat-card .lbl { font-size: 0.8rem; color: var(--color-text-muted); margin-top: 2px; }
.stat-card.gold .val { color: var(--color-brand-gold); }
.stat-card.green .val { color: var(--color-success); }

/* Filter row */
.filter-row {
  display: flex;
  gap: 12px;
  margin-bottom: 16px;
  flex-wrap: wrap;
}
.filter-row select, .filter-row input {
  padding: 7px 10px;
  border: 1.5px solid var(--color-border);
  border-radius: var(--border-radius-sm);
  font-size: 0.88rem;
  background: var(--color-bg-card);
}

/* Table */
.table-wrap { background: var(--color-bg-card); border-radius: var(--border-radius-md); box-shadow: var(--shadow-card); overflow-x: auto; }
table { width: 100%; border-collapse: collapse; font-size: 0.88rem; }
th {
  background: var(--color-brand-navy);
  color: var(--color-text-light);
  padding: 0.75rem 1rem;
  text-align: left;
  font-weight: 700;
  font-size: 0.75rem;
  letter-spacing: 0.5px;
  white-space: nowrap;
}
th[data-sort] { cursor: pointer; user-select: none; }
th[data-sort]:hover { background: #003a7a; }
th.sort-asc::after  { content: ' ↑'; opacity: 0.7; }
th.sort-desc::after { content: ' ↓'; opacity: 0.7; }
td { padding: 0.75rem 1rem; border-bottom: 1px solid var(--color-border); }
tr:last-child td { border-bottom: none; }
tbody tr:nth-child(even) td { background: #f9fafb; }
tr:hover td { background: #f4f5f7; cursor: pointer; }

/* Status badges */
.badge {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 4px 10px;
  border-radius: 20px;
  font-size: 0.78rem;
  font-weight: 600;
}
.badge i { font-size: 13px; }
.badge-ny             { background: #fff8e6; color: #8a5a00; }
.badge-under_behandling { background: #e8f0fb; color: #1a4a8a; }
.badge-klar_til_utsending { background: #fef3d7; color: #8a6d00; }
.badge-tilbud_sendt   { background: #f0e8fb; color: #5a1a8a; }
.badge-fullfort       { background: #e6f4ea; color: #1a6e31; }
.badge-avvist         { background: #fdecea; color: #a32d2d; }
.badge-multi          { background: #002554; color: #f1b434; font-weight: 700; margin-left: 4px; }

/* Modal */
.modal-overlay {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.45);
  z-index: 100;
  align-items: flex-start;
  justify-content: center;
  padding: 40px 16px;
  overflow-y: auto;
}
.modal-overlay.open { display: flex; }
.modal {
  background: var(--color-bg-card);
  border-radius: var(--border-radius-md);
  width: 100%;
  max-width: 680px;
  box-shadow: 0 8px 32px rgba(0,0,0,0.2);
}
.modal-header {
  background: var(--color-brand-navy);
  color: var(--color-text-light);
  padding: 16px 24px;
  border-radius: var(--border-radius-md) var(--border-radius-md) 0 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.modal-header h2 { font-size: 1rem; }
.modal-header .close { cursor: pointer; font-size: 1.3rem; opacity: 0.7; background: none; border: none; color: #fff; }
.modal-header .close:hover { opacity: 1; }
.modal-body { padding: 24px; }
.modal-footer { padding: 16px 24px; border-top: 1px solid var(--color-border); display: flex; gap: 10px; justify-content: flex-end; }

.detail-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
  margin-bottom: 16px;
}
.detail-item label { font-size: 0.75rem; color: var(--color-text-muted); text-transform: uppercase; display: block; margin-bottom: 2px; }
.detail-item .val { font-size: 0.9rem; font-weight: 500; }
.detail-item.full { grid-column: 1 / -1; }

/* ── Login screen ────────────────────────────────────────────
   Sto definert TO ganger tidligere, og den nederste overstyrte
   stilltiende den øverste. Skjemaet og dashbordet så derfor like ut
   uansett hva den første blokka sa. Nå er det én blokk, og begge
   sidene bruker samme markup.

   Logoen (logo.svg) er hvit + gull og krever marineblå bak seg –
   derfor ligger den i en marineblå topp på det hvite kortet.
   ──────────────────────────────────────────────────────────── */
.login-screen {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 100vh;
  padding: 24px;
  background: var(--color-brand-navy);
  background-image: linear-gradient(160deg, var(--color-brand-navy) 0%, var(--color-navy-dark) 100%);
}
.login-screen.hidden { display: none; }

.login-card {
  background: var(--color-bg-card);
  border-radius: var(--border-radius-md);
  text-align: center;
  width: 100%;
  max-width: 380px;
  overflow: hidden;                       /* holder den blå toppen innenfor hjørnene */
  box-shadow: 0 8px 32px rgba(0,0,0,0.3);
}

.login-topp {
  background: var(--color-brand-navy);
  padding: 32px 32px 28px;
  border-bottom: 3px solid var(--color-brand-gold);
}
.login-topp img {
  display: block;
  width: 200px;
  max-width: 100%;
  height: auto;
  margin: 0 auto;
}

.login-body { padding: 32px 32px 36px; }

.login-title {
  font-size: 1.25rem;
  font-weight: 700;
  color: var(--color-brand-navy);
  margin-bottom: 8px;
}
.login-desc {
  color: var(--color-text-muted);
  font-size: 0.9rem;
  line-height: 1.5;
  margin-bottom: 24px;
}
.login-btn {
  width: 100%;
  padding: 12px 20px;
  font-size: 0.95rem;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
}
.login-fot {
  margin-top: 18px;
  font-size: 0.75rem;
  color: var(--color-text-muted);
}

@media (max-width: 420px) {
  .login-topp { padding: 26px 22px 22px; }
  .login-topp img { width: 168px; }
  .login-body { padding: 26px 22px 30px; }
}

/* Export buttons */
.export-row { display: flex; gap: 8px; margin-bottom: 16px; justify-content: flex-end; }
.btn-export {
  padding: 7px 16px;
  background: var(--color-bg-card);
  border: 1.5px solid var(--color-brand-navy);
  color: var(--color-brand-navy);
  border-radius: var(--border-radius-sm);
  font-size: 0.85rem;
  font-weight: 600;
  cursor: pointer;
}
.btn-export:hover { background: var(--color-brand-navy); color: var(--color-text-light); }

/* Mine saker-toggle */
.btn-mine {
  padding: 7px 14px;
  background: var(--color-bg-card);
  border: 1.5px solid var(--color-brand-navy);
  color: var(--color-brand-navy);
  border-radius: var(--border-radius-sm);
  font-size: 0.85rem;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.2s, color 0.2s;
}
.btn-mine:hover { background: #eef1f9; }
.btn-mine.aktiv {
  background: var(--color-brand-gold);
  border-color: var(--color-brand-gold);
  color: var(--color-brand-navy);
}

/* PDF-knapp i modal */
.btn-pdf {
  padding: 10px 20px;
  background: var(--color-bg-card);
  border: 1.5px solid var(--color-brand-navy);
  color: var(--color-brand-navy);
  border-radius: var(--border-radius-sm);
  font-size: 0.9rem;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.2s;
}
.btn-pdf:hover { background: #eef1f9; }

/* Hidden */
.hidden { display: none !important; }

/* Handlinger-kolonne i tabellen (oppg.9/10) */
.kol-handlinger { width: 1%; white-space: nowrap; }
.rad-handlinger { white-space: nowrap; text-align: right; }
.rad-btn {
  background: var(--color-bg-card);
  border: 1.5px solid var(--color-brand-navy);
  color: var(--color-brand-navy);
  border-radius: var(--border-radius-sm);
  padding: 4px 8px;
  margin-left: 4px;
  font-size: 0.9rem;
  line-height: 1;
  cursor: pointer;
}
.rad-btn:hover { background: var(--color-brand-navy); color: var(--color-text-light); }
.rad-btn-kopier:hover { background: var(--color-brand-gold); color: var(--color-brand-navy); border-color: var(--color-brand-gold); }

/* Redigerbare nøkkelfelt i modal (oppg.9) */
.detail-item .rediger-felt {
  width: 100%;
  padding: 6px 8px;
  border: 1.5px solid #ddd;
  border-radius: 4px;
  font-family: inherit;
  font-size: 0.9rem;
  box-sizing: border-box;
}
.detail-item textarea.rediger-felt { min-height: 56px; resize: vertical; }

/* Endringshistorikk (oppg.9) */
#modal-endringshistorikk .endring-rad {
  border-top: 1px solid #eee;
  padding: 6px 0;
}
#modal-endringshistorikk .endring-meta { font-weight: 600; color: var(--color-brand-navy); }
#modal-endringshistorikk ul { margin: 4px 0 0; padding-left: 18px; }

/* Rolleadministrasjon (admin) */
.roller-liste { display: flex; flex-direction: column; gap: 8px; }
.rolle-rad {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 6px 0;
  border-bottom: 1px solid #eee;
}
.rolle-rad .rolle-epost { flex: 1; font-size: 0.9rem; }
.rolle-navn-input {
  width: 150px;
  padding: 6px 8px;
  border: 1.5px solid #ddd;
  border-radius: 4px;
  font-size: 0.9rem;
}
.rolle-rad .rolle-epost em { color: var(--color-text-muted); font-style: normal; font-size: 0.8rem; }
.rolle-select {
  padding: 6px 8px;
  border: 1.5px solid #ddd;
  border-radius: 4px;
  font-size: 0.9rem;
}
/* Tilgangsstyring (admin) – avdelinger med ansatte under */
.tilgang-verktoy {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
  margin-bottom: 14px;
}
.tilgang-verktoy #synk-status { font-size: 0.8rem; color: var(--color-text-muted); }

.avd-gruppe {
  border: 1px solid var(--color-border);
  border-radius: var(--border-radius-sm);
  overflow: hidden;
}
.avd-hode {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 12px;
  background: var(--color-bg-page);
}
.avd-apne {
  flex: 1;
  display: flex;
  align-items: center;
  gap: 8px;
  background: none;
  border: none;
  padding: 0;
  font-family: inherit;
  font-size: 0.92rem;
  font-weight: 600;
  color: var(--color-brand-navy);
  text-align: left;
  cursor: pointer;
}
.avd-tall {
  font-size: 0.78rem;
  color: var(--color-text-muted);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.avd-bryter {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 0.78rem;
  color: var(--color-text-muted);
  white-space: nowrap;
  cursor: pointer;
}
.avd-folk { display: flex; flex-direction: column; }

.person-rad {
  display: grid;
  grid-template-columns: 20px minmax(0, 1.1fr) minmax(0, 1.4fr) auto 32px;
  align-items: center;
  gap: 10px;
  padding: 8px 12px;
  border-top: 1px solid var(--color-border);
  font-size: 0.88rem;
}
/* Stengt ute: dempes, men skal fortsatt kunne leses */
.person-av .person-navn,
.person-av .person-epost { opacity: 0.55; }

.person-hake { width: 16px; height: 16px; cursor: pointer; }
.person-navn { font-weight: 500; overflow-wrap: break-word; }
.person-navn em { color: var(--color-text-muted); font-style: normal; font-size: 0.8rem; }
.person-epost { color: var(--color-text-muted); overflow-wrap: break-word; }
.rad-btn-tom { width: 32px; }

@media (max-width: 700px) {
  .avd-hode { flex-wrap: wrap; }
  .person-rad {
    grid-template-columns: 20px 1fr auto;
    row-gap: 4px;
  }
  .person-epost { grid-column: 2 / -1; font-size: 0.8rem; }
  .person-rad .rolle-select { grid-column: 2 / 3; }
  .rad-btn-tom { display: none; }
}


/* Responsive */
@media (max-width: 700px) {
  .stats-row { grid-template-columns: 1fr 1fr; }
  .dashboard-layout { flex-direction: column; }
  .sidebar { width: 100%; }
  .detail-grid { grid-template-columns: 1fr; }
  .card { padding: 20px; }
}