:root {
  --tekst: #1b2233;
  --dempet: #5b6478;
  --aksent: #4f46e5;
  --aksent-2: #6366f1;
  --linje: rgba(120, 130, 160, 0.22);
  --tm: #b45309;

  /* Glass-flater */
  --glass: rgba(255, 255, 255, 0.55);
  --glass-sterk: rgba(255, 255, 255, 0.72);
  --glass-svak: rgba(255, 255, 255, 0.35);
  --glass-kant: rgba(255, 255, 255, 0.65);
  --skygge: 0 8px 30px rgba(31, 38, 135, 0.12);
  --skygge-myk: 0 4px 16px rgba(31, 38, 135, 0.08);
  --radius: 16px;
  --radius-sm: 10px;
  --blur: blur(16px) saturate(170%);
}

* { box-sizing: border-box; }

body {
  margin: 0;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  color: var(--tekst);
  font-size: 15px;
  min-height: 100vh;
  background:
    radial-gradient(1100px 700px at 12% -8%, #dfe7ff 0%, rgba(223,231,255,0) 55%),
    radial-gradient(1000px 700px at 105% 0%, #ede1ff 0%, rgba(237,225,255,0) 50%),
    radial-gradient(900px 800px at 50% 115%, #d9fbf3 0%, rgba(217,251,243,0) 55%),
    linear-gradient(160deg, #eef2ff 0%, #f6f4ff 45%, #eefaf6 100%);
  background-attachment: fixed;
}

header { padding: 28px 32px 8px; }
header h1 { margin: 0; font-size: 23px; letter-spacing: -0.01em; }
.meta { margin: 6px 0 0; color: var(--dempet); font-size: 13px; }

main { padding: 0 32px 56px; }

.status { padding: 22px 0; color: var(--dempet); }

/* ── Glass-tabell ─────────────────────────────────────────────── */
table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  background: var(--glass);
  -webkit-backdrop-filter: var(--blur);
  backdrop-filter: var(--blur);
  border: 1px solid var(--glass-kant);
  border-radius: var(--radius);
  box-shadow: var(--skygge);
  overflow: hidden;
}

thead th {
  text-align: left;
  font-size: 11.5px;
  text-transform: uppercase;
  letter-spacing: .04em;
  color: var(--dempet);
  padding: 12px 14px;
  border-bottom: 1px solid var(--linje);
  background: rgba(255, 255, 255, 0.35);
  position: sticky; top: 0;
}

tbody td {
  padding: 8px 14px;
  border-bottom: 1px solid var(--linje);
  vertical-align: top;
}
tbody tr:last-child td { border-bottom: none; }
tbody tr:hover td { background: rgba(255, 255, 255, 0.35); }

.col-tall { text-align: right; white-space: nowrap; }
.col-nr { width: 110px; white-space: nowrap; color: var(--dempet); font-variant-numeric: tabular-nums; }
.col-rolle { color: var(--dempet); white-space: nowrap; }
td.col-tall { font-variant-numeric: tabular-nums; }
.col-handling { width: 1%; white-space: nowrap; text-align: right; }

.nr-rediger {
  background: none; border: none; cursor: pointer; color: var(--dempet);
  font-size: 12px; padding: 0 4px; margin-left: 4px; opacity: 0; transition: opacity .12s;
}
tr:hover .nr-rediger { opacity: 1; }
.nr-rediger:hover { color: var(--aksent); }
.nr-velger { font: inherit; border: 1px solid var(--linje); border-radius: 8px; padding: 2px 6px; background: #fff; color: var(--tekst); }

/* Nivåstiler */
tr.niva-seksjon td { background: rgba(99, 102, 241, 0.12); font-weight: 700; }
tr.niva-seksjon:hover td { background: rgba(99, 102, 241, 0.18); }
tr.niva-hovedoppgave td { background: rgba(99, 102, 241, 0.06); font-weight: 600; }
tr.foreldre td.col-tall { font-weight: 600; }

.tittel-celle { display: flex; gap: 8px; align-items: baseline; flex-wrap: wrap; }
.tm-merke {
  font-size: 11px; color: var(--tm);
  border: 1px solid currentColor; border-radius: 5px; padding: 0 5px; font-weight: 600;
}
.kommentar { color: var(--dempet); font-size: 12px; font-weight: 400; }
.dempet { color: var(--dempet); }

/* ── Oppsummering / glass-kort ─────────────────────────────────── */
.oppsummering { margin-top: 30px; }
.oppsummering h2 { font-size: 16px; margin: 0 0 14px; letter-spacing: -0.01em; }
.kort-rad { display: flex; gap: 14px; flex-wrap: wrap; margin-bottom: 14px; }
.kort {
  background: var(--glass);
  -webkit-backdrop-filter: var(--blur);
  backdrop-filter: var(--blur);
  border: 1px solid var(--glass-kant);
  border-radius: var(--radius);
  box-shadow: var(--skygge-myk);
  padding: 16px 20px;
  min-width: 156px;
  display: flex; flex-direction: column; gap: 5px;
}
.kort-tall { font-size: 21px; font-weight: 700; font-variant-numeric: tabular-nums; letter-spacing: -0.01em; }
.kort-merke { font-size: 12px; color: var(--dempet); }

/* ── Redigeringskontroller ─────────────────────────────────────── */
.rediger-tall, .rediger-rolle, .rediger-kommentar {
  font: inherit;
  border: 1px solid var(--linje);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.85);
  padding: 4px 7px;
  color: var(--tekst);
  transition: border-color .15s, box-shadow .15s;
}
.rediger-tall:focus, .rediger-rolle:focus, .rediger-kommentar:focus,
.nr-velger:focus, .skjema-nummer:focus, .skjema-tittel:focus, .deling-linse:focus {
  outline: none; border-color: var(--aksent); box-shadow: 0 0 0 3px rgba(79, 70, 229, 0.18);
}
.rediger-tall { width: 66px; text-align: right; font-variant-numeric: tabular-nums; }
.rediger-rolle { max-width: 156px; }
.rediger-kommentar { width: 200px; }
.rediger-kommentar::placeholder { color: #9aa3b4; }

.tm-toggle {
  display: inline-flex; align-items: center; gap: 3px;
  font-size: 11px; font-weight: 600; color: var(--tm);
  border: 1px solid currentColor; border-radius: 5px; padding: 0 5px;
  cursor: pointer; user-select: none;
}
.tm-toggle input { margin: 0; accent-color: var(--tm); }

.lagre-ok { outline: 2px solid #16a34a; outline-offset: 0; transition: outline-color .3s; }
.lagre-feil { outline: 2px solid #dc2626; outline-offset: 0; }

/* ── Glass-knapper ─────────────────────────────────────────────── */
.verktoy { margin: 0 0 16px; display: flex; gap: 10px; flex-wrap: wrap; }

.knapp {
  font: inherit; font-weight: 600;
  color: #fff;
  background: linear-gradient(135deg, rgba(99,102,241,0.95), rgba(79,70,229,0.95));
  border: 1px solid rgba(255,255,255,0.35);
  border-radius: 12px;
  padding: 9px 16px;
  cursor: pointer;
  box-shadow: 0 6px 18px rgba(79, 70, 229, 0.28);
  -webkit-backdrop-filter: var(--blur);
  backdrop-filter: var(--blur);
  transition: transform .12s ease, box-shadow .15s ease, filter .15s ease;
}
.knapp:hover { filter: brightness(1.06); transform: translateY(-1px); box-shadow: 0 9px 24px rgba(79, 70, 229, 0.34); }
.knapp:active { transform: translateY(0); }
.knapp.sekundar {
  color: var(--tekst);
  background: var(--glass-svak);
  border: 1px solid var(--glass-kant);
  box-shadow: var(--skygge-myk);
}
.knapp.sekundar:hover { background: var(--glass-sterk); }

.mini-knapp {
  font: inherit; font-size: 12px; font-weight: 500;
  color: var(--aksent);
  background: var(--glass-svak);
  -webkit-backdrop-filter: var(--blur);
  backdrop-filter: var(--blur);
  border: 1px solid var(--glass-kant);
  border-radius: 9px;
  padding: 4px 10px; cursor: pointer; margin-left: 6px;
  box-shadow: var(--skygge-myk);
  transition: background .15s, transform .12s, color .15s;
}
.mini-knapp:hover { background: var(--glass-sterk); transform: translateY(-1px); }
.mini-knapp.flytt { padding: 2px 7px; font-size: 11px; }
.mini-knapp.slett { color: #dc2626; }
.mini-knapp.slett:hover { background: rgba(254, 226, 226, 0.85); }
.mini-knapp:disabled { opacity: .5; cursor: default; transform: none; }

/* ── Inline opprett-skjema ─────────────────────────────────────── */
.skjema-rad td { background: rgba(255, 255, 255, 0.45); }
.skjema { display: flex; align-items: flex-end; gap: 12px; flex-wrap: wrap; padding: 8px 0; }
.skjema-merke { font-weight: 600; font-size: 13px; color: var(--aksent); align-self: center; }
.skjema-etikett { display: flex; flex-direction: column; gap: 3px; font-size: 11px; color: var(--dempet); }
.skjema-nummer, .skjema-tittel {
  font: inherit; border: 1px solid var(--linje); border-radius: 8px; padding: 5px 8px;
  background: rgba(255, 255, 255, 0.9); color: var(--tekst);
}
.skjema-tittel { min-width: 220px; }

/* ── Snapshot-banner ───────────────────────────────────────────── */
.visning-banner {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  background: linear-gradient(135deg, rgba(254, 243, 199, 0.7), rgba(253, 230, 138, 0.55));
  -webkit-backdrop-filter: var(--blur); backdrop-filter: var(--blur);
  border: 1px solid rgba(241, 212, 136, 0.8); color: #7c5e10;
  border-radius: var(--radius); padding: 12px 16px; margin-bottom: 14px; font-size: 14px;
  box-shadow: var(--skygge-myk);
}

/* ── Revisjoner ────────────────────────────────────────────────── */
.revisjoner { margin-top: 30px; }
.revisjoner h2 { font-size: 16px; margin: 0 0 14px; letter-spacing: -0.01em; }
.revisjoner-liste { list-style: none; margin: 0; padding: 0; max-width: 620px; }
.revisjon-rad {
  display: block;
  background: var(--glass);
  -webkit-backdrop-filter: var(--blur); backdrop-filter: var(--blur);
  border: 1px solid var(--glass-kant); border-radius: var(--radius);
  box-shadow: var(--skygge-myk);
  padding: 12px 16px; margin-bottom: 10px; font-size: 14px;
}
.revisjon-rad.aktiv { border-color: rgba(99,102,241,0.55); box-shadow: 0 0 0 3px rgba(99,102,241,0.12), var(--skygge-myk); }
.revisjon-topp { display: flex; align-items: center; justify-content: space-between; gap: 12px; }

.deling, .pdf-eksport { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-top: 10px; padding-top: 10px; border-top: 1px dashed var(--linje); }
.pdf-eksport { border-top: none; padding-top: 4px; margin-top: 6px; }
.pdf-eksport .deling-merke { margin-right: 2px; }
.deling-merke { font-size: 13px; color: var(--dempet); }
.deling-linse { font: inherit; font-size: 13px; border: 1px solid var(--linje); border-radius: 8px; padding: 4px 8px; background: rgba(255,255,255,0.9); color: var(--tekst); }
.deling-url { flex: 1; min-width: 200px; font: inherit; font-size: 12px; border: 1px solid var(--linje); border-radius: 8px; padding: 5px 8px; background: rgba(255,255,255,0.65); color: var(--dempet); }

/* ── Estimat-metadata i header ─────────────────────────────────── */
.navn-input {
  font: inherit; font-size: 22px; font-weight: 700; letter-spacing: -0.01em;
  color: var(--tekst); border: 1px solid var(--linje); border-radius: 8px;
  padding: 2px 8px; background: rgba(255,255,255,0.92); min-width: 280px;
}
.navn-input:focus { outline: none; border-color: var(--aksent); box-shadow: 0 0 0 3px rgba(79,70,229,0.18); }
.estimat-rediger { display: flex; gap: 14px; flex-wrap: wrap; margin-top: 10px; }
.meta-etikett { display: flex; flex-direction: column; gap: 3px; font-size: 11px; color: var(--dempet); }

/* ── Modus-bryter (Estimat / Treff-analyse) ────────────────────── */
.modus-bryter {
  display: inline-flex; gap: 0; margin: 0 0 16px;
  background: var(--glass-svak);
  -webkit-backdrop-filter: var(--blur); backdrop-filter: var(--blur);
  border: 1px solid var(--glass-kant); border-radius: 12px; padding: 3px;
  box-shadow: var(--skygge-myk);
}
.modus-knapp {
  font: inherit; font-weight: 600; font-size: 13px;
  color: var(--dempet); background: transparent; border: none;
  border-radius: 9px; padding: 6px 16px; cursor: pointer; transition: background .15s, color .15s;
}
.modus-knapp.aktiv { background: rgba(255,255,255,0.85); color: var(--aksent); box-shadow: var(--skygge-myk); }

/* Avvik / differanse-farger */
.avvik-opp { color: #dc2626; }   /* over (mer enn estimert/nedbrutt) */
.avvik-ned { color: #16a34a; }   /* under */

/* ── Oversikt ──────────────────────────────────────────────────── */
.tilbake-lenke { color: var(--aksent); text-decoration: none; }
.tilbake-lenke:hover { text-decoration: underline; }
.oversikt-tom { color: var(--dempet); font-size: 13px; margin: 8px 0 0; }
.prosjekt-rad { margin-top: 12px; padding-top: 10px; border-top: 1px dashed var(--linje); }
.prosjekt-topp { display: flex; align-items: center; justify-content: space-between; gap: 12px; font-weight: 600; }
.estimat-liste { list-style: none; margin: 8px 0 0; padding: 0; }
.estimat-liste li { display: flex; align-items: center; gap: 10px; padding: 5px 0; }
.estimat-liste a { color: var(--aksent); text-decoration: none; font-weight: 500; }
.estimat-liste a:hover { text-decoration: underline; }
.estimat-merke { font-size: 12px; color: var(--dempet); }
.rad-knapper { display: inline-flex; gap: 6px; flex-wrap: wrap; align-items: center; margin-left: auto; }
.estimat-liste li { gap: 8px; }
.estimat-liste li a { margin-right: auto; }
.estimat-skjema .skjema { align-items: flex-end; }
.skjema-knapper { display: flex; gap: 10px; margin-top: 12px; }
#kunder { display: flex; flex-direction: column; gap: 12px; }
#kunder .revisjon-rad { max-width: none; }
.revisjoner-liste .revisjon-rad { max-width: none; }

/* ── Innlogging ────────────────────────────────────────────────── */
.login-wrap { min-height: 80vh; display: flex; align-items: center; justify-content: center; padding: 24px; }
.login-kort {
  width: 100%; max-width: 360px;
  background: var(--glass);
  -webkit-backdrop-filter: var(--blur); backdrop-filter: var(--blur);
  border: 1px solid var(--glass-kant); border-radius: var(--radius);
  box-shadow: var(--skygge); padding: 28px;
  display: flex; flex-direction: column; gap: 14px;
}
.login-kort h1 { margin: 0; font-size: 22px; }
.login-kort .meta { margin: -8px 0 4px; }
.login-felt { display: flex; flex-direction: column; gap: 5px; font-size: 13px; color: var(--dempet); }
.login-felt input {
  font: inherit; color: var(--tekst);
  border: 1px solid var(--linje); border-radius: 8px; padding: 9px 11px; background: rgba(255,255,255,0.9);
}
.login-felt input:focus { outline: none; border-color: var(--aksent); box-shadow: 0 0 0 3px rgba(79,70,229,0.18); }
.login-kort .knapp { margin-top: 4px; justify-content: center; text-align: center; }
.login-feil { color: #dc2626; font-size: 13px; margin: 0; }
.logg-ut { color: var(--dempet); text-decoration: none; }
.logg-ut:hover { color: var(--aksent); text-decoration: underline; }

/* ── Utskriftsside ─────────────────────────────────────────────── */
.utskrift-verktoy {
  display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
  padding: 16px 32px;
  background: var(--glass);
  -webkit-backdrop-filter: var(--blur); backdrop-filter: var(--blur);
  border-bottom: 1px solid var(--glass-kant);
}
.utskrift-hint { font-size: 13px; color: var(--dempet); }

/* ── Print ─────────────────────────────────────────────────────── */
@media print {
  .utskrift-verktoy { display: none !important; }
  body { background: #fff; font-size: 12px; }
  header { padding: 0 0 8px; }
  main { padding: 0; }
  table, .kort, .revisjon-rad {
    background: #fff !important;
    -webkit-backdrop-filter: none !important; backdrop-filter: none !important;
    box-shadow: none !important; border: 1px solid #999;
  }
  thead th { background: #eee !important; -webkit-print-color-adjust: exact; print-color-adjust: exact; }
  tr.niva-seksjon td, tr.niva-hovedoppgave td { -webkit-print-color-adjust: exact; print-color-adjust: exact; }
  tr { break-inside: avoid; }
  .oppsummering { break-inside: avoid; }
}