/* =========================================================================
   Takt Portal — portal.taktkommunikasjon.no
   Palett og typografi fra Takts identitet. Ingen byggesteg: rediger direkte.
   ========================================================================= */

@font-face { font-family: "Fraunces"; src: url("fonts/fraunces.woff2") format("woff2"); font-weight: 100 900; font-style: normal; font-display: swap; }
@font-face { font-family: "Inter"; src: url("fonts/inter.woff2") format("woff2"); font-weight: 300 600; font-style: normal; font-display: swap; }
@font-face { font-family: "JetBrains Mono"; src: url("fonts/jetbrains-mono.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; }

:root {
  --f-display: "Fraunces", Georgia, "Times New Roman", serif;
  --f-body: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Arial, sans-serif;
  --f-mono: "JetBrains Mono", ui-monospace, "SFMono-Regular", monospace;
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; background: #EDF1E9; color: #0F2A22; font-family: var(--f-body); }
body.ui-dark { background: #0F2A22; }
h1, h2, h3, h4, p { margin: 0; }
img { display: block; max-width: 100%; }
a { color: inherit; }
:focus-visible { outline: 2px solid #A85F3E; outline-offset: 3px; }

/* Logoen ligger som bakgrunnsbilde, definert én gang. */
.logo { background-repeat: no-repeat; background-position: left center; background-size: contain; }
.logo--lys { background-image: url("logo-lys.svg"); }
.logo--mork { background-image: url("logo-mork.svg"); }
.mark { background-image: url("logo-lys.svg"); background-size: contain; background-repeat: no-repeat; }

/* ============================================================
   UI — selve produktet. Egen navnegreining (.ui-) slik at board-
   stilene aldri kolliderer med skjermene. Fargene er faste:
   en skisse av et kremfarget produkt skal se kremfarget ut.
   ============================================================ */
.ui{
  --forest:#0F2A22;--forest-deep:#081A14;--cream:#EDF1E9;--cream-warm:#E4E8DE;--bone:#F5F7F0;
  --moss:#929988;--clay:#A85F3E;--clay-soft:#C07A56;--clay-text:#9E5636;--clay-on-dark:#C47F5B;--moss-text:#5F6657;
  --ink:#0F2A22;--ink-soft:rgba(15,42,34,.86);--muted:rgba(15,42,34,.62);
  --line:rgba(15,42,34,.12);--line-ui:rgba(15,42,34,.52);
  --ok:#2E6A4B;--ok-bg:#DFE9E0;--no:#A32B22;--no-bg:#F0E2DF;
  --r:4px;
  background:var(--cream);color:var(--ink);font-family:var(--f-body);
  font-size:14px;line-height:1.55;position:relative;
}
.ui *{box-sizing:border-box}
.ui-pad{padding:26px 30px}
.ui-eyebrow{font-family:var(--f-mono);font-size:10px;letter-spacing:.15em;text-transform:uppercase;color:var(--moss-text)}
.ui-h1{font-family:var(--f-display);font-optical-sizing:auto;font-weight:500;font-size:26px;line-height:1.15;letter-spacing:-.01em;text-wrap:balance}
.ui-h2{font-family:var(--f-display);font-weight:500;font-size:19px;line-height:1.2;text-wrap:balance}
.ui-lead{color:var(--muted);font-size:13.5px;font-weight:300}
.ui-num{font-variant-numeric:tabular-nums}

/* — topplinje i admin — */
.ui-top{display:flex;align-items:center;gap:18px;padding:13px 30px;background:var(--bone);border-bottom:1px solid var(--line)}
.ui-top .logo{width:96px;height:16px;flex:none}
.ui-top nav{display:flex;gap:16px;margin-left:8px;flex:1}
.ui-top nav a{font-size:13px;color:var(--muted);text-decoration:none;padding-bottom:2px}
.ui-top nav a.on{color:var(--ink);box-shadow:inset 0 -2px 0 var(--clay)}
.ui-top .who{margin-left:auto;display:flex;align-items:center;gap:11px;font-size:12.5px;color:var(--muted)}
.ui-top .who b{font-weight:500;color:var(--ink)}

/* — knapper — */
.ui-btn{
  display:inline-flex;align-items:center;justify-content:center;gap:7px;
  font:500 13px/1 var(--f-body);padding:11px 17px;border-radius:var(--r);
  border:1px solid var(--line-ui);background:transparent;color:var(--ink);cursor:pointer;white-space:nowrap;
}
.ui-btn--primary{background:var(--clay);border-color:var(--clay);color:#FFF6F1}
.ui-btn--dark{background:var(--forest);border-color:var(--forest);color:var(--cream)}
.ui-btn--quiet{border-color:transparent;color:var(--muted);padding-left:8px;padding-right:8px}
.ui-btn--sm{padding:8px 12px;font-size:12px}
.ui-btn--off{opacity:.42;border-style:dashed}
.ui-btn--wide{width:100%}

/* — statusmerker: form bærer informasjonen, ikke bare farge — */
.ui-pill{display:inline-flex;align-items:center;gap:7px;font-family:var(--f-mono);font-size:10px;letter-spacing:.1em;text-transform:uppercase;padding:5px 10px 5px 8px;border-radius:999px;white-space:nowrap}
.ui-pill i{width:9px;height:9px;border-radius:50%;flex:none;display:flex;align-items:center;justify-content:center;font-style:normal;font-size:8px;line-height:1}
.ui-pill.s-sendt{background:var(--cream-warm);color:var(--moss-text)}
.ui-pill.s-sendt i{border:1.5px solid var(--moss-text)}
.ui-pill.s-apnet{background:var(--cream-warm);color:var(--ink)}
.ui-pill.s-apnet i{background:var(--ink)}
.ui-pill.s-ok{background:var(--ok-bg);color:var(--ok)}
.ui-pill.s-ok i{background:var(--ok);color:var(--ok-bg)}
.ui-pill.s-no{background:var(--no-bg);color:var(--no)}
.ui-pill.s-no i{background:var(--no);color:var(--no-bg);font-size:9px}
.ui-pill.s-ut{background:transparent;color:rgba(15,42,34,.45);box-shadow:inset 0 0 0 1px var(--line)}
.ui-pill.s-ut i{border:1.5px dashed rgba(15,42,34,.45)}

/* — skjemafelt — */
.ui-field{display:flex;flex-direction:column;gap:6px}
.ui-field label{font-family:var(--f-mono);font-size:10px;letter-spacing:.13em;text-transform:uppercase;color:var(--moss-text)}
.ui-input{
  font:400 13.5px/1.4 var(--f-body);color:var(--ink);background:var(--bone);
  border:1px solid var(--line-ui);border-radius:var(--r);padding:11px 13px;width:100%;
}
.ui-input.ph{color:rgba(15,42,34,.42)}
.ui-input--focus{border-color:var(--clay);box-shadow:0 0 0 3px rgba(168,95,62,.16);background:#fff}
.ui-hint{font-size:12px;color:var(--muted);font-weight:300}
.ui-grid2{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}
@media (max-width:620px){.ui-grid2{grid-template-columns:1fr}}

/* autofullfør — vises åpen for å demonstrere gjenbruk av kunde */
.ui-ac{border:1px solid var(--line-ui);border-top:0;border-radius:0 0 var(--r) var(--r);background:#fff;overflow:hidden}
.ui-ac div{padding:9px 13px;font-size:13px;display:flex;justify-content:space-between;gap:12px}
.ui-ac div:first-child{background:var(--cream-warm)}
.ui-ac span{color:var(--muted);font-size:11.5px}

/* — filslipp — */
.ui-drop{display:flex;align-items:center;gap:14px;border:1px dashed var(--line-ui);border-radius:var(--r);padding:14px;background:var(--bone)}
.ui-drop .thumb{width:38px;height:52px;flex:none;background:#fff;border:1px solid var(--line);border-radius:2px;padding:5px;display:flex;flex-direction:column;gap:3px;justify-content:flex-start}
.ui-drop .thumb u{display:block;height:2px;background:rgba(15,42,34,.20);border-radius:1px;text-decoration:none}
.ui-drop b{font-weight:500;font-size:13px;display:block}
.ui-drop small{color:var(--muted);font-size:11.5px;font-family:var(--f-mono);letter-spacing:.04em}

/* — tabell — */
.ui-tablewrap{overflow-x:auto}
.ui-table{width:100%;border-collapse:collapse;font-size:13px;min-width:640px}
.ui-table th{
  font-family:var(--f-mono);font-size:10px;letter-spacing:.13em;text-transform:uppercase;
  color:var(--moss-text);text-align:left;font-weight:400;padding:0 14px 9px;border-bottom:1px solid var(--line-ui);
}
.ui-table td{padding:13px 14px;border-bottom:1px solid var(--line);vertical-align:middle}
.ui-table tr:last-child td{border-bottom:0}
.ui-table .r{text-align:right}
.ui-table .cust b{display:block;font-weight:500}
.ui-table .cust span{color:var(--muted);font-size:11.5px}
.ui-table .ttl{max-width:280px}
.ui-table .dt{font-family:var(--f-mono);font-size:11.5px;letter-spacing:.02em;color:var(--muted);white-space:nowrap}
.ui-table tr.hot td{background:var(--bone)}
.ui-table tr.dim td b,.ui-table tr.dim td.ttl{color:rgba(15,42,34,.48)}

/* — smal oppsummering — */
.ui-sum{display:flex;flex-wrap:wrap;gap:8px 24px;padding:12px 0;border-top:1px solid var(--line);border-bottom:1px solid var(--line);margin-bottom:18px}
.ui-sum div{display:flex;align-items:baseline;gap:8px;font-size:12.5px;color:var(--muted)}
.ui-sum b{font-family:var(--f-display);font-weight:500;font-size:17px;color:var(--ink)}

/* — filterknapper — */
.ui-chips{display:flex;flex-wrap:wrap;gap:7px;align-items:center}
.ui-chip{font-size:12px;padding:6px 12px;border-radius:999px;border:1px solid var(--line-ui);color:var(--muted);white-space:nowrap}
.ui-chip.on{background:var(--forest);border-color:var(--forest);color:var(--cream)}
.ui-search{flex:1;min-width:170px}

/* — kort — */
.ui-card{border:1px solid var(--line);border-radius:var(--r);background:var(--bone);padding:18px}
.ui-card--ok{background:var(--ok-bg);border-color:rgba(46,106,75,.30)}
.ui-card--flat{background:transparent}
.ui-copy{display:flex;gap:8px;align-items:stretch}
.ui-copy .val{
  flex:1;min-width:0;font-family:var(--f-mono);font-size:12px;letter-spacing:.01em;color:var(--ink);
  background:#fff;border:1px solid var(--line-ui);border-radius:var(--r);padding:11px 13px;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;display:flex;align-items:center;
}
.ui-mail{
  font:400 12.5px/1.75 var(--f-body);color:var(--ink-soft);background:#fff;
  border:1px solid var(--line-ui);border-radius:var(--r);padding:15px 16px;white-space:pre-wrap;
}
.ui-mail a{color:var(--clay-text)}

/* — tidslinje — */
.ui-tl{list-style:none;margin:0;padding:0}
.ui-tl li{display:grid;grid-template-columns:15px 1fr;gap:13px;padding-bottom:17px;position:relative}
.ui-tl li::before{content:"";position:absolute;left:6.5px;top:13px;bottom:-4px;width:1px;background:var(--line)}
.ui-tl li:last-child{padding-bottom:0}
.ui-tl li:last-child::before{display:none}
.ui-tl .dot{width:15px;height:15px;border-radius:50%;border:1.5px solid var(--line-ui);background:var(--cream);position:relative;z-index:1}
.ui-tl .now .dot{background:var(--ok);border-color:var(--ok)}
.ui-tl b{font-weight:500;display:block;font-size:13px}
.ui-tl span{font-family:var(--f-mono);font-size:11px;letter-spacing:.03em;color:var(--muted)}

/* — mørke flater — */
.ui-dark{background:var(--forest);color:var(--cream)}
.ui-dark .ui-eyebrow{color:var(--clay-on-dark)}
.ui-dark .ui-lead{color:rgba(237,241,233,.72)}
.ui-dark .ui-input{background:rgba(237,241,233,.07);border-color:rgba(237,241,233,.34);color:var(--cream)}
.ui-dark .ui-field label{color:rgba(237,241,233,.62)}

/* — kundens topplinje — */
.ui-brandbar{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:16px 30px;background:var(--forest)}
.ui-brandbar .logo{width:104px;height:17px}
.ui-brandbar span{font-family:var(--f-mono);font-size:10px;letter-spacing:.15em;text-transform:uppercase;color:rgba(237,241,233,.55)}

/* — gyldighetsmåler i logoens motiv — */
.ui-valid{display:flex;align-items:center;gap:16px;flex-wrap:wrap;padding:14px 0;border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.ui-valid .txt b{font-weight:500}
.ui-valid .txt span{color:var(--muted);font-size:12.5px;display:block;font-weight:300}
.ui-meter{display:flex;align-items:center;gap:3px;height:28px;flex:none}
.ui-meter i{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;width:5px;font-style:normal}
.ui-meter i b,.ui-meter i s{display:block;width:5px;border-radius:2.5px;background:var(--clay);text-decoration:none}
.ui-meter i.spent b,.ui-meter i.spent s{background:rgba(15,42,34,.16)}
.ui-meter i.dead b,.ui-meter i.dead s{background:rgba(15,42,34,.13)}
.ui-days{font-family:var(--f-mono);font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--clay-text)}

/* — falsk PDF-visning — */
.ui-pdf{border:1px solid var(--line);border-radius:var(--r);overflow:hidden;background:var(--cream-warm)}
.ui-pdf__bar{display:flex;align-items:center;gap:12px;padding:9px 13px;background:var(--bone);border-bottom:1px solid var(--line)}
.ui-pdf__bar .nm{font-family:var(--f-mono);font-size:11px;letter-spacing:.02em;color:var(--muted);flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ui-pdf__page{background:#fff;margin:18px auto;width:min(78%,430px);padding:26px 28px;box-shadow:0 3px 14px rgba(15,42,34,.12);display:flex;flex-direction:column;gap:11px}
.ui-pdf__page .hd{display:flex;align-items:center;justify-content:space-between;padding-bottom:13px;border-bottom:1px solid rgba(15,42,34,.14)}
.ui-pdf__page .hd .mark{width:19px;height:19px}
.ui-pdf__page .hd span{font-family:var(--f-mono);font-size:8px;letter-spacing:.16em;text-transform:uppercase;color:rgba(15,42,34,.45)}
.ui-pdf__page h4{font-family:var(--f-display);font-weight:500;font-size:15px;line-height:1.25;color:var(--ink);margin:5px 0 2px}
.ui-pdf__page u{display:block;height:5px;border-radius:2.5px;background:rgba(15,42,34,.11);text-decoration:none}
.ui-pdf__page .rows{display:flex;flex-direction:column;gap:6px;margin-top:7px}
.ui-pdf__page .row{display:flex;justify-content:space-between;gap:16px;padding:6px 0;border-bottom:1px solid rgba(15,42,34,.09)}
.ui-pdf__page .row u{height:5px}
.ui-pdf__page .row u:first-child{width:52%}
.ui-pdf__page .row u:last-child{width:17%;background:rgba(15,42,34,.17)}

/* — handlingsrad hos kunden — */
.ui-actions{display:flex;gap:11px;flex-wrap:wrap;align-items:center;padding:18px 0 0}
.ui-actions .ui-btn{flex:1;min-width:150px;padding-top:14px;padding-bottom:14px;font-size:14px}

/* — panel over siden — */
.ui-stage{position:relative;overflow:hidden}
.ui-veil{position:absolute;inset:0;background:rgba(8,26,20,.58);display:flex;align-items:center;justify-content:center;padding:20px}
.ui-panel{background:var(--cream);border-radius:6px;width:min(430px,100%);max-height:100%;overflow:auto;box-shadow:0 26px 60px -18px rgba(8,26,20,.6)}
.ui-panel__in{padding:22px 24px;display:flex;flex-direction:column;gap:15px}
.ui-check{display:flex;gap:10px;align-items:flex-start;font-size:12.5px;line-height:1.5;color:var(--ink-soft)}
.ui-check i{width:16px;height:16px;border-radius:3px;background:var(--clay);color:#FFF6F1;font-style:normal;font-size:10px;display:flex;align-items:center;justify-content:center;flex:none;margin-top:1px}
.ui-radio{display:flex;flex-direction:column;gap:0;border:1px solid var(--line-ui);border-radius:var(--r);overflow:hidden;background:var(--bone)}
.ui-radio label{display:flex;gap:10px;align-items:center;padding:10px 13px;font-size:13px;border-bottom:1px solid var(--line)}
.ui-radio label:last-child{border-bottom:0}
.ui-radio label.on{background:#fff}
.ui-radio i{width:14px;height:14px;border-radius:50%;border:1.5px solid var(--line-ui);flex:none;display:block}
.ui-radio label.on i{border:4px solid var(--clay)}
.ui-note{font-family:var(--f-mono);font-size:10px;letter-spacing:.08em;text-transform:uppercase;color:var(--moss-text)}

/* — kvitteringsskjermer — */
.ui-final{padding:52px 40px;display:flex;flex-direction:column;align-items:flex-start;gap:17px}
.ui-final .spectrum{height:34px;margin-bottom:6px}
.ui-final .ui-h1{font-size:34px}
.ui-final p{max-width:48ch;font-weight:300;font-size:14.5px}
.ui-receipt{font-family:var(--f-mono);font-size:10.5px;letter-spacing:.06em;text-transform:uppercase;padding:11px 14px;border-radius:var(--r);border:1px solid var(--line);color:var(--muted)}
.ui-dark .ui-receipt{border-color:rgba(237,241,233,.18);color:rgba(237,241,233,.66)}

/* --- tillegg utover skissen: ekte kontroller og feilmeldinger --- */
.ui { min-height: 100vh; }
.ui-check input[type="checkbox"] { width: 16px; height: 16px; accent-color: #A85F3E; flex: none; margin-top: 1px; }
.ui-radio label { cursor: pointer; }
.ui-radio input[type="radio"] { accent-color: #A85F3E; }
.ui-feil {
  font-size: 13px; color: #A32B22; background: #F0E2DF;
  border-radius: 4px; padding: 9px 12px; margin: 0;
}
.ui-btn { font-family: var(--f-body); }
.ui-btn:disabled { opacity: .55; cursor: default; }
.ui-btn:not(:disabled):hover { filter: brightness(.96); }
a.ui-btn { text-decoration: none; }
.ui-table tbody tr { cursor: pointer; }
.ui-table tbody tr:hover td { background: #F5F7F0; }
.ui-chip { cursor: pointer; user-select: none; }
.ui-tom { padding: 44px 0; text-align: center; color: rgba(15,42,34,.62); }

@media (max-width: 620px) {
  .ui-pad { padding: 20px 18px; }
  .ui-top { padding: 12px 18px; }
  .ui-brandbar { padding: 14px 18px; }
  .ui-actions .ui-btn { min-width: 100%; }
}