/* ====== JKB Anbud — High Contrast ======
   Clean, readable, professional. High-contrast with clear visual hierarchy.
   Dark topbar + dark section heads + white content areas.
============================================ */

:root {
  /* Palette — High Contrast */
  --ink:           #0C1221;
  --ink-soft:      #2E3A4E;
  --steel:         #64748B;
  --steel-light:   #94A3B8;
  --concrete:      #E2E8F0;
  --concrete-2:    #CBD5E1;
  --concrete-3:    #94A3B8;
  --paper:         #F8FAFC;
  --paper-2:       #EEF2F7;
  --paper-3:       #FFFFFF;
  --orange:        #C2410C;
  --orange-deep:   #9A3412;
  --orange-faint:  #FFEDD5;
  --rule:          #CBD5E1;
  --rule-soft:     #E2E8F0;
  --warn:          #92400E;
  --warn-bg:       #FEF3C7;
  --danger:        #B91C1C;
  --danger-bg:     #FEE2E2;
  --ok:            #166534;
  --ok-bg:         #DCFCE7;

  /* Typography */
  --font-display:  'Times New Roman', Times, 'Liberation Serif', serif;
  --font-sans:     'Times New Roman', Times, 'Liberation Serif', serif;
  --font-mono:     'JetBrains Mono', ui-monospace, 'SF Mono', Menlo, Consolas, monospace;

  /* Elevation */
  --shadow-xs: 0 1px 0 rgba(27,24,20,.04);
  --shadow-sm: 0 1px 2px rgba(27,24,20,.05), 0 1px 1px rgba(27,24,20,.03);
  --shadow-md: 0 6px 22px rgba(27,24,20,.07), 0 2px 6px rgba(27,24,20,.04);
  --shadow-lg: 0 24px 64px rgba(27,24,20,.14), 0 6px 18px rgba(27,24,20,.06);

  /* Høyden på de tre faste linjene øverst. Brukes av sticky-offsets og av
     høyde-beregningen til .app / .pm-view / .company-view — endrer du én,
     følger resten med. */
  --topbar-h:  64px;   /* rad 1: firma, prosjektvelger, navn */
  --subbar-h:  42px;   /* rad 2: visninger + verktøy for prosjektet */
  --toolbar-h: 45px;   /* rad 3: prosjekt/anbud/sikkerhetskopi (inkl. 1px kant) */
  --chrome-h:  calc(var(--topbar-h) + var(--subbar-h) + var(--toolbar-h));

  /* Radii */
  --r-xs: 2px;
  --r-sm: 4px;
  --r-md: 6px;
  --r-lg: 10px;

  /* PM legacy aliases — JS reads some via CSS vars, keep names */
  --pm-primary:       var(--orange);
  --pm-primary-hover: var(--orange-deep);
  --pm-primary-bg:    var(--orange-faint);
  --pm-pink:          #B83280;
  --pm-yellow:        #9A7220;
  --pm-blue:          #1E40AF;
  --pm-green:         #4A6741;
  --pm-orange:        #B85C2E;
  --pm-red:           #A8392C;
  --pm-charcoal:      var(--ink);
  --pm-text:          var(--ink);
  --pm-muted:         var(--steel);
  --pm-faint:         var(--steel-light);
  --pm-border:        var(--rule);
  --pm-border-light:  var(--rule-soft);
  --pm-bg:            var(--paper);
  --pm-surface:       var(--paper-3);
  --pm-side-bg:       var(--paper-2);
}

* { box-sizing: border-box; }

html, body {
  margin: 0; padding: 0;
  font-family: var(--font-sans);
  font-size: 14px;
  color: var(--ink);
  background: var(--paper);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  font-feature-settings: "ss01", "cv11";
}

button { cursor: pointer; font: inherit; }
input, select, textarea { font: inherit; color: inherit; }
button, input, select, textarea { border-radius: var(--r-sm); }

/* Util */
.u-display {
  font-family: var(--font-display);
  font-weight: 500;
  letter-spacing: -.01em;
}

/* ===== Topbar ===== */
.topbar {
  display: flex; align-items: stretch; gap: 0;
  padding: 0 24px 0 22px;
  background: #1E293B;
  color: #F1F5F9;
  position: sticky; top: 0; z-index: 100;
  border-bottom: 1px solid #334155;
  min-height: var(--topbar-h);
}
.topbar img.logo {
  height: 34px; width: 34px;
  align-self: center;
  border-radius: var(--r-xs);
  flex-shrink: 0;
  filter: none;
  margin-right: 14px;
}
.topbar h1 {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 17px;
  letter-spacing: -.01em;
  line-height: 1;
  margin: 0 10px 0 0;
  align-self: center;
  color: #FFFFFF;
  flex-shrink: 0;
}
.topbar h1::after {
  content: "";
  display: none;
}

.topbar .project-name {
  flex: 1; min-width: 200px;
  font-family: var(--font-sans);
  font-size: 15px; font-weight: 500;
  background: transparent;
  border: none;
  border-radius: 0;
  padding: 0 20px;
  color: #F1F5F9;
  align-self: stretch;
}
.topbar .project-name:focus {
  outline: none;
  background: rgba(255,255,255,.07);
  box-shadow: inset 0 -2px 0 #FB923C;
}
.topbar .project-name::placeholder {
  color: #64748B;
  font-weight: 400;
}

.topbar button {
  background: transparent;
  border: none;
  border-radius: 0;
  color: #CBD5E1;
  padding: 0 16px;
  font-family: var(--font-sans);
  font-size: 13px; font-weight: 500;
  align-self: stretch;
  flex-shrink: 0;
  transition: background .15s ease, color .15s ease;
  letter-spacing: 0;
}
.topbar button:hover { background: rgba(255,255,255,.08); color: #F1F5F9; }
.topbar button.primary {
  background: var(--orange);
  color: #fff;
  font-family: var(--font-sans);
  font-weight: 600;
  font-size: 14px;
  letter-spacing: 0;
  padding: 0 22px;
  margin: 12px 0 12px 12px;
  border-radius: var(--r-md);
  align-self: center;
  height: 40px;
  box-shadow: 0 1px 3px rgba(0,0,0,.3);
}
.topbar button.primary:hover {
  background: var(--orange-deep);
  color: #fff;
  box-shadow: 0 2px 8px rgba(0,0,0,.35);
}

.topbar select {
  background: transparent;
  color: #CBD5E1;
  border: none;
  padding: 0 14px;
  align-self: stretch;
}

/* Project picker */
.project-picker {
  display: inline-flex; align-items: center; gap: 10px;
  background: transparent;
  border: none;
  border-radius: 0;
  border-left: 1px solid #334155;
  border-right: 1px solid #334155;
  color: #CBD5E1;
  padding: 0 18px;
  font-size: 13px;
  max-width: 320px;
  white-space: nowrap; flex-shrink: 0;
  align-self: stretch;
  transition: background .15s ease;
}
.project-picker:hover { background: rgba(255,255,255,.08); }
.project-picker .pp-icon {
  font-size: 0;
  width: 8px; height: 8px;
  background: #FB923C;
  border-radius: 50%;
  display: inline-block;
}
.project-picker .pp-label {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 14px;
  letter-spacing: -.005em;
  overflow: hidden; text-overflow: ellipsis;
  max-width: 220px;
  color: #F1F5F9;
}
.project-picker .pp-count {
  background: rgba(251,146,60,.2);
  color: #FB923C;
  font-family: var(--font-mono);
  font-size: 10px;
  padding: 2px 7px;
  font-weight: 600;
  border-radius: 999px;
  letter-spacing: .02em;
}
.project-picker .pp-chevron {
  font-size: 9px;
  color: #64748B;
  margin-left: 2px;
}

/* ===== View toggle ===== */
/* ===== Rad 2: prosjektets visninger og verktøy ===== */
.subbar {
  display: flex; align-items: center; gap: 12px;
  padding: 0 24px 0 22px;
  min-height: var(--subbar-h);
  background: #16213A;
  border-bottom: 1px solid #2A3B57;
  position: sticky; top: var(--topbar-h); z-index: 99;
}
.subbar-label {
  font-family: var(--font-display);
  font-style: italic;
  font-size: 12px;
  color: #7E8CA5;
  white-space: nowrap;
  flex-shrink: 0;
}
/* Firma-knappen alene på rad 1 — gjenbruker pillen, men uten margin */
/* Øverste rad: bedriftsvisningene (Firma + Utleie) */
.view-toggle-bedrift { margin-right: 10px; }

.view-toggle {
  display: inline-flex; flex-shrink: 0;
  align-self: center;
  gap: 0;
  background: #0F1923;
  border-radius: 999px;
  padding: 3px;
  margin-right: 0;
}
.view-toggle .vt-btn {
  background: transparent;
  border: none;
  border-radius: 999px;
  color: #64748B;
  padding: 7px 9px;
  font-family: var(--font-sans);
  font-size: 12.5px; font-weight: 500;
  letter-spacing: 0;
  text-transform: none;
  cursor: pointer;
  white-space: nowrap;
  transition: color .15s ease, background .15s ease;
}
.view-toggle .vt-btn:hover { color: #94A3B8; }
.view-toggle .vt-btn.active {
  background: #334155;
  color: #F1F5F9;
  font-weight: 600;
  box-shadow: 0 1px 3px rgba(0,0,0,.3);
}
/* Verktøy i samme rad som visningene. De bytter ikke visning, så de får
   aldri .active — litt mindre og dusere, med oransje hover som skiller
   «handling» fra «visning». */
.view-toggle .vt-tool {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 7px 8px;
  font-size: 12px;
  color: #56657D;
}
.view-toggle .vt-tool:hover {
  color: #FDBA74;
  background: rgba(249,115,22,.13);
}
.view-toggle .vt-tool:active { background: rgba(249,115,22,.22); }
.view-toggle .vt-ico { font-size: 13px; line-height: 1; }

/* Seks knapper i topbaren er trangt. Under 1180 px faller verktøyene
   tilbake til rene ikonknapper (tittelen ligger i title-attributtet),
   under 1040 px gjør visningene det samme — slik at «Generer tilbudsbrev»
   og prosjektvelgeren aldri blir presset ut av topbaren. */
/* Verktøyene har fått en hel rad for seg selv, så etikettene får plass mye
   lenger ned enn før. Under 780 px faller de tilbake til rene ikoner. */
@media (max-width: 780px) {
  .view-toggle .vt-tool .vt-lbl { display: none; }
  .view-toggle .vt-tool { padding: 7px 10px; }
  .view-toggle .vt-ico { font-size: 15px; }
  .subbar-label { display: none; }
}
/* Rad 1 er trangest: logo, tittel, Firma, Nytt/Slett, prosjektvelger, navn,
   status, Tilbudsbrev og Logg ut. Tittelen ryker først (logoen bærer merket),
   deretter klokkeslettet i lagringsstatusen. Prosjektnavnet skal beholde
   brukbar bredde lengst mulig. */
@media (max-width: 1120px) {
  .topbar h1 { display: none; }
}
@media (max-width: 940px) {
  .save-status { max-width: 92px; overflow: hidden; text-overflow: ellipsis; }
}

/* ===== Save status ===== */
.save-status {
  font-family: var(--font-mono);
  font-size: 11px;
  color: #FFFFFF;
  align-self: center;
  padding: 0 6px;
  letter-spacing: .01em;
  white-space: nowrap;
  flex-shrink: 0;
  text-transform: none;
  display: inline-flex; align-items: center;
}
.save-status.saving { color: #FB923C; }
.save-status.saved  { color: #4ADE80; }
.save-status.error {
  color: #F87171;
  font-weight: 700;
  animation: saveErrorPulse 1.2s ease-in-out infinite;
}
@keyframes saveErrorPulse {
  0%, 100% { opacity: 1; }
  50% { opacity: .45; }
}

/* ===== Toolbar ===== */
.toolbar {
  display: flex; align-items: stretch; gap: 0;
  padding: 0 14px;
  background: var(--paper-2);
  color: var(--ink);
  border-bottom: 1px solid var(--rule);
  position: sticky; top: calc(var(--topbar-h) + var(--subbar-h)); z-index: 99;
  flex-wrap: wrap; row-gap: 0;
  min-height: calc(var(--toolbar-h) - 1px);
}
.toolbar-group {
  display: flex; align-items: center; gap: 2px;
  padding: 5px 0;
}
.toolbar .tg-label {
  font-family: var(--font-display);
  font-style: italic;
  font-size: 12px;
  color: var(--steel);
  text-transform: none;
  letter-spacing: 0;
  font-weight: 400;
  align-self: center;
  padding: 0 10px 0 6px;
  white-space: nowrap;
}
.toolbar-sep {
  width: 1px;
  align-self: center;
  height: 22px;
  background: var(--rule);
  margin: 0 8px;
}
.toolbar button {
  background: transparent;
  border: none;
  border-radius: var(--r-sm);
  color: var(--ink-soft);
  padding: 6px 12px;
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 0;
  transition: background .12s ease, color .12s ease;
  align-self: center;
}
.toolbar button:hover {
  background: var(--concrete);
  color: var(--ink);
}
.toolbar button:disabled {
  opacity: .35; cursor: not-allowed;
  background: transparent !important;
  color: var(--steel) !important;
}
.toolbar #btnUndoDelete {
  background: var(--orange-faint);
  color: var(--orange-deep);
  font-weight: 600;
  text-transform: none;
  letter-spacing: 0;
  padding: 6px 14px;
}

/* Verktøy-rullegardin: «🧰 Verktøy ▾» åpner en meny; VA tegner står synlig ved siden av.
   Trigger og menyknapper arver .toolbar button-stilen; her kommer bare popup + caret. */
.toolbar #btnUndoDelete:hover {
  background: var(--orange);
  color: #fff;
}

/* ===== App layout ===== */
.app {
  display: grid;
  grid-template-columns: 360px 1fr;
  gap: 0;
  padding: 0;
  height: calc(100vh - var(--chrome-h));
}
.library {
  background: var(--paper-2);
  border-right: 1px solid var(--rule);
  overflow: hidden;
  display: flex; flex-direction: column;
}
.calc {
  background: var(--paper);
  overflow: hidden;
  display: flex; flex-direction: column;
}

.library.drop-target {
  outline: 2px solid var(--orange);
  outline-offset: -2px;
  position: relative;
}
.library.drop-target::after {
  content: "→ Slipp i biblioteket";
  position: absolute; inset: 0;
  display: flex; align-items: center; justify-content: center;
  background: rgba(184,92,46,.92);
  color: #fff;
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 500;
  font-size: 22px;
  letter-spacing: -.005em;
  pointer-events: none; z-index: 50;
  text-align: center; padding: 20px;
  text-transform: none;
}

/* ===== Section header ===== */
.section-header {
  padding: 16px 24px;
  border-bottom: 1px solid #334155;
  display: flex; align-items: center; gap: 12px;
  background: #1E293B;
}
.section-header h2 {
  font-family: var(--font-display);
  font-size: 22px;
  font-weight: 700;
  letter-spacing: -.015em;
  text-transform: none;
  margin: 0;
  color: #F1F5F9;
  flex: 1;
  line-height: 1;
}
.section-header input[type="search"] {
  flex: 1;
  border: 1px solid #475569;
  background: rgba(255,255,255,.08);
  color: #F1F5F9;
  padding: 8px 12px;
  font-size: 13px;
  font-family: var(--font-sans);
  border-radius: var(--r-sm);
}
.section-header input[type="search"]::placeholder { color: #64748B; }
.section-header input[type="search"]:focus {
  outline: none;
  border-color: #FB923C;
  background: rgba(255,255,255,.12);
}

/* ===== Library panel ===== */
.library .body {
  overflow-y: auto; flex: 1;
  padding: 0;
  background: var(--paper-3);
}
.lib-tabs {
  display: flex;
  border-bottom: 1px solid var(--rule);
  background: var(--paper-2);
  padding: 0 14px;
  gap: 0;
}
.lib-tab {
  flex: 1;
  padding: 14px 8px;
  background: transparent;
  border: none;
  border-radius: 0;
  font-family: var(--font-sans);
  font-size: 13px; font-weight: 600;
  letter-spacing: 0; text-transform: none;
  color: var(--steel);
  cursor: pointer;
  transition: color .15s ease;
  position: relative;
}
.lib-tab:hover { color: var(--ink); }
.lib-tab.active {
  color: var(--ink);
  background: transparent;
  box-shadow: inset 0 -2px 0 var(--orange);
}

.library .filter-bar {
  padding: 14px 18px;
  display: flex; gap: 8px; flex-direction: column;
  border-bottom: 1px solid var(--rule);
  background: var(--paper-2);
}
.library .filter-bar input {
  width: 100%;
  border: 1px solid var(--rule);
  padding: 9px 12px;
  font-size: 13px;
  background: var(--paper-3);
  font-family: var(--font-sans);
  border-radius: var(--r-sm);
  transition: border-color .15s ease, box-shadow .15s ease;
}
.library .filter-bar input::placeholder {
  color: var(--steel-light);
  font-style: italic;
}
.library .filter-bar input:focus {
  outline: none;
  border-color: var(--orange);
  box-shadow: 0 0 0 3px rgba(184,92,46,.12);
}
.library .filter-bar select {
  width: 100%;
  border: 1px solid var(--rule);
  padding: 8px 10px;
  font-size: 13px;
  background: var(--paper-3);
  border-radius: var(--r-sm);
}

.lib-cat {
  padding: 16px 18px 8px;
  font-family: var(--font-display);
  font-style: normal;
  font-size: 13px;
  text-transform: none;
  color: var(--ink-soft);
  font-weight: 500;
  letter-spacing: -.005em;
  display: flex; align-items: center; gap: 8px;
  border-top: 1px solid var(--rule-soft);
  background: var(--paper-2);
  margin-top: 0;
}
.lib-cat:first-child { border-top: none; }
.lib-cat .lib-cat-name { flex: 1; }
.lib-cat-empty {
  padding: 6px 18px 12px;
  font-family: var(--font-sans);
  font-size: 12px;
  font-style: italic;
  color: var(--steel);
  opacity: .7;
}
.lib-cat::before {
  content: "";
  display: inline-block;
  width: 6px; height: 6px;
  background: var(--orange);
  border-radius: 50%;
}
.lib-cat-rename, .past-del-proj {
  background: transparent;
  border: 1px solid transparent;
  border-radius: var(--r-sm);
  color: var(--steel);
  width: 22px; height: 22px; padding: 0;
  font-size: 12px; cursor: pointer; opacity: 0;
  transition: opacity .15s ease;
  display: flex; align-items: center; justify-content: center;
}
.lib-cat:hover .lib-cat-rename,
.lib-cat:hover .past-del-proj { opacity: 1; }
.lib-cat-rename:hover {
  background: var(--orange-faint);
  color: var(--orange-deep);
}
.past-del-proj:hover {
  background: var(--danger-bg);
  color: var(--danger);
}

.lib-item {
  border-bottom: 1px solid var(--rule-soft);
  cursor: pointer;
  font-size: 15px;
  line-height: 1.45;
  display: flex; flex-direction: column;
  padding: 0; gap: 0;
  position: relative;
  background: var(--paper-3);
  transition: background .12s ease;
}
.lib-item:hover { background: var(--paper-2); }
.lib-item:hover, .ns-bank-item:hover { cursor: grab; }
.lib-item:active, .ns-bank-item:active { cursor: grabbing; }
.lib-item.dragging,
.ns-bank-item.dragging {
  opacity: .4;
  background: var(--orange-faint);
}

.lib-item-row {
  display: flex; gap: 10px; align-items: flex-start;
  padding: 12px 18px;
}
.lib-item .text {
  flex: 1;
  color: var(--ink);
}
.lib-item .meta {
  color: var(--steel);
  font-family: var(--font-mono);
  font-size: 13px;
  margin-top: 4px;
  letter-spacing: 0;
}
.lib-item .meta b {
  color: var(--ink);
  font-weight: 600;
}
.lib-item .add {
  color: var(--orange);
  font-weight: 600;
  font-size: 18px;
  line-height: 1;
  padding-top: 2px;
}

.calc-section.drag-over-section {
  outline: 2px solid var(--orange);
  outline-offset: -2px;
  background: var(--orange-faint);
}

.lib-actions {
  display: flex; gap: 4px;
  align-self: center; flex-shrink: 0;
  opacity: 0;
  transition: opacity .15s ease;
}
.lib-item:hover .lib-actions { opacity: 1; }
.lib-act-btn {
  background: var(--paper-3);
  border: 1px solid var(--rule);
  border-radius: var(--r-sm);
  color: var(--ink-soft);
  width: 26px; height: 26px;
  padding: 0;
  display: flex; align-items: center; justify-content: center;
  font-size: 13px;
  cursor: pointer;
  transition: all .12s ease;
}
.lib-act-btn:hover {
  background: var(--ink);
  color: #fff;
  border-color: var(--ink);
}
.lib-act-btn.lib-act-add {
  background: var(--orange);
  color: #fff;
  border-color: var(--orange);
  font-weight: 600;
}
.lib-act-btn.lib-act-add:hover {
  background: var(--orange-deep);
  border-color: var(--orange-deep);
}
.lib-act-btn.lib-act-del:hover {
  background: var(--danger);
  color: #fff;
  border-color: var(--danger);
}

.lib-foot {
  display: flex; gap: 0;
  border-top: 1px solid var(--rule);
  background: var(--paper-2);
}
.lib-foot-btn {
  flex: 1;
  padding: 12px;
  border: none;
  border-right: 1px solid var(--rule-soft);
  border-radius: 0;
  background: transparent;
  color: var(--ink-soft);
  font-size: 12px;
  font-family: var(--font-sans);
  font-weight: 500;
  text-transform: none;
  letter-spacing: 0;
  cursor: pointer;
  transition: background .12s ease, color .12s ease;
}
.lib-foot-btn:last-child { border-right: none; }
.lib-foot-btn:hover {
  background: var(--concrete);
  color: var(--ink);
}
.lib-foot-btn:disabled { opacity: .35; cursor: not-allowed; }
.lib-foot-btn.primary {
  background: var(--orange);
  color: #fff;
  font-weight: 600;
}
.lib-foot-btn.primary:hover {
  background: var(--orange-deep);
  color: #fff;
}

.library .body .add-custom-lib {
  margin: 14px 18px;
  padding: 14px;
  border: 1px dashed var(--rule);
  border-radius: var(--r-md);
  background: transparent;
  font-size: 12px;
  font-family: var(--font-sans);
  font-weight: 500;
  letter-spacing: 0;
  text-transform: none;
  color: var(--steel);
  text-align: center;
  transition: all .15s ease;
}
.library .body .add-custom-lib:hover {
  background: var(--orange-faint);
  border-color: var(--orange);
  border-style: solid;
  color: var(--orange-deep);
  cursor: pointer;
}

/* History panel within lib-item */
.lib-item.expanded { background: var(--paper-2); }
.lib-item.expanded .lib-item-row {
  border-bottom: 1px solid var(--rule-soft);
}
.lib-history {
  padding: 14px 18px 16px;
  background: var(--paper-2);
  font-size: 12px;
  border-top: 1px solid var(--rule-soft);
}
.hist-empty {
  color: var(--steel-light);
  font-style: italic;
  font-size: 12px;
}
.hist-summary {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0;
  margin-bottom: 14px;
  border: 1px solid var(--rule);
  border-radius: var(--r-md);
  background: var(--paper-3);
  overflow: hidden;
}
.hist-summary > div {
  border-right: 1px solid var(--rule-soft);
  padding: 10px 12px;
  display: flex; flex-direction: column;
}
.hist-summary > div:last-child { border-right: none; }
.hist-summary-label {
  font-family: var(--font-sans);
  color: var(--steel);
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: .06em;
  font-weight: 600;
}
.hist-summary-val {
  font-family: var(--font-mono);
  font-weight: 600;
  color: var(--ink);
  font-size: 14px; margin-top: 4px;
  font-variant-numeric: tabular-nums;
}
.hist-table {
  width: 100%; border-collapse: collapse;
  background: var(--paper-3);
  border: 1px solid var(--rule);
  border-radius: var(--r-md);
  overflow: hidden;
}
.hist-table th, .hist-table td {
  padding: 8px 12px;
  text-align: left;
  border-bottom: 1px solid var(--rule-soft);
  font-size: 12px;
}
.hist-table th {
  background: var(--paper-2);
  color: var(--ink-soft);
  font-family: var(--font-sans);
  font-size: 10px; font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .06em;
  border-bottom: 1px solid var(--rule);
}
.hist-table tr:last-child td { border-bottom: none; }
.hist-table td.right, .hist-table th.right { text-align: right; }
.hist-table .hist-date {
  color: var(--steel);
  white-space: nowrap;
  font-family: var(--font-mono);
  font-size: 11px;
}
.hist-table .hist-proj {
  color: var(--ink);
  max-width: 0; overflow: hidden;
  text-overflow: ellipsis; white-space: nowrap;
}
.hist-table .hist-qty {
  color: var(--steel);
  white-space: nowrap;
  font-family: var(--font-mono);
}
.hist-table .hist-price-cell {
  text-align: right;
  font-weight: 600;
  color: var(--ink);
  white-space: nowrap;
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
}
.hist-more {
  color: var(--steel);
  font-size: 11px;
  margin-top: 10px;
  font-style: italic;
}

.lib-item .hist-price {
  color: var(--orange-deep);
  font-weight: 600;
}
.lib-item .hist-old {
  color: var(--steel-light);
  text-decoration: line-through;
  font-size: 10px;
}
/* Post uten pris (malposter for nye kunder) */
.lib-item .lib-no-price {
  color: var(--steel-light);
}
.lib-item .hist-count {
  color: var(--ink);
  font-weight: 600;
}

/* Past row */
.past-row .past-actions {
  display: flex; gap: 6px;
  align-self: center;
}
.past-row .btn-tiny {
  background: var(--paper-3);
  border: 1px solid var(--rule);
  border-radius: var(--r-sm);
  color: var(--ink-soft);
  padding: 4px 10px;
  font-size: 11px;
  font-family: var(--font-sans);
  text-transform: none;
  letter-spacing: 0;
  font-weight: 500;
  cursor: pointer;
  transition: all .12s ease;
}
.past-row .btn-tiny:hover {
  background: var(--ink);
  color: #fff;
  border-color: var(--ink);
}
.past-row .btn-tiny.primary {
  background: var(--orange);
  border-color: var(--orange);
  color: #fff;
}
.past-row .btn-tiny.primary:hover {
  background: var(--orange-deep);
  border-color: var(--orange-deep);
}
.past-row .past-tag {
  display: inline-block;
  background: var(--concrete);
  color: var(--ink-soft);
  padding: 1px 8px;
  font-family: var(--font-mono);
  font-size: 10px;
  margin-left: 6px;
  border-radius: 999px;
  border: 1px solid var(--rule);
}

/* NS3420 inline tags */
.ns3420-tag, .row-ns3420 {
  display: inline-block;
  font-size: 10px;
  font-family: var(--font-mono);
  color: var(--orange-deep);
  background: var(--orange-faint);
  border: 1px solid rgba(184,92,46,.3);
  padding: 1px 7px;
  border-radius: 999px;
  line-height: 14px;
  vertical-align: 2px;
  white-space: nowrap;
  margin-right: 4px;
  font-weight: 600;
  letter-spacing: .01em;
}

.form-hint {
  font-size: 11px;
  color: var(--steel);
  margin-top: 4px;
  font-style: italic;
}

/* NS3420 bank panel */
.ns-bank-count {
  padding: 12px 18px;
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--steel);
  border-bottom: 1px solid var(--rule);
  background: var(--paper-2);
  text-transform: none;
  letter-spacing: .02em;
}
.ns-bank-item {
  display: flex; align-items: stretch; gap: 10px;
  padding: 12px 18px;
  border-bottom: 1px solid var(--rule-soft);
  cursor: pointer;
  font-size: 13px;
  background: var(--paper-3);
  transition: background .12s ease;
}
.ns-bank-item:hover { background: var(--paper-2); }
.ns-bank-left { flex: 1; min-width: 0; }
.ns-bank-code {
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--orange-deep);
  font-weight: 600;
  background: var(--orange-faint);
  border: 1px solid rgba(184,92,46,.3);
  padding: 1px 8px;
  border-radius: 999px;
  display: inline-block;
  margin-bottom: 5px;
  letter-spacing: .01em;
}
.ns-bank-text {
  color: var(--ink);
  font-size: 12px;
  line-height: 1.45;
  font-weight: 500;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  word-break: break-word;
}
.ns-bank-meta {
  color: var(--steel);
  font-size: 11px;
  margin-top: 4px;
  font-family: var(--font-mono);
}
.ns-bank-add {
  background: var(--orange);
  color: #fff;
  border: none;
  border-radius: var(--r-sm);
  width: 30px; flex-shrink: 0;
  font-weight: 600;
  font-size: 16px;
  cursor: pointer;
  align-self: center;
  height: 30px;
  transition: background .12s ease;
}
.ns-bank-add:hover { background: var(--orange-deep); }
.ns-bank-more {
  padding: 14px 18px;
  color: var(--steel);
  font-size: 11px;
  font-family: var(--font-mono);
  text-align: center;
  text-transform: none;
  letter-spacing: .02em;
}

/* ===== Calc panel ===== */
.calc .body {
  flex: 1; overflow-y: auto;
  padding: 32px 36px;
}

.proj-info {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0;
  padding: 0;
  background: var(--paper-3);
  border: 1px solid var(--rule);
  border-radius: var(--r-md);
  margin-bottom: 28px;
  overflow: hidden;
  box-shadow: var(--shadow-xs);
}
.proj-info > div {
  padding: 14px 18px;
  border-right: 1px solid var(--rule-soft);
  border-bottom: 1px solid var(--rule-soft);
}
.proj-info > div.pi-right { border-right: none; }

/* Erfaringssøk-kort under prisfeltet i kalkylen */
#priceHint {
  position: fixed;
  z-index: 300;
  display: flex;
  align-items: center;
  gap: 10px;
  max-width: 420px;
  padding: 6px 10px;
  background: var(--paper-3);
  border: 1px solid var(--rule);
  border-radius: var(--r-md);
  box-shadow: var(--shadow-xs);
  font-family: var(--font-sans);
  font-size: 12px;
  color: var(--steel);
  white-space: nowrap;
}
#priceHint .ph-label { overflow: hidden; text-overflow: ellipsis; }
#priceHint .ph-label strong { color: var(--ink); }
#priceHint .ph-use {
  flex: none;
  border: 1px solid var(--orange-deep);
  background: transparent;
  color: var(--orange-deep);
  border-radius: var(--r-md);
  padding: 2px 10px;
  font-size: 12px;
  font-family: var(--font-sans);
  cursor: pointer;
}
#priceHint .ph-use:hover { background: var(--orange-deep); color: #fff; }

/* Svarfrist med nullstilling — type=date kan ellers ikke tømmes i Chrome */
.pm-em-datefield { display: flex; align-items: center; gap: 4px; }
.pm-em-datefield input[type=date] { flex: 1; min-width: 0; }
.pm-em-deadline-clear {
  flex: none; width: 24px; height: 24px; padding: 0; line-height: 1;
  border: 1px solid var(--rule); border-radius: var(--r-sm);
  background: var(--paper-3); color: var(--steel);
  font-size: 11px; cursor: pointer;
}
.pm-em-deadline-clear:hover { border-color: #B91C1C; color: #B91C1C; }
.pm-em-deadline-clear[hidden] { display: none; }

/* Bibliotek-plukker i endringsmeldinger (modal) */
#libpickSearch {
  width: 100%;
  padding: 8px 10px;
  margin-top: 8px;
  border: 1px solid var(--rule);
  border-radius: var(--r-md);
  font-size: 13px;
  background: var(--paper-3);
  color: var(--ink);
}
.libpick-list {
  max-height: 340px;
  overflow-y: auto;
  margin: 10px 0 4px;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.libpick-row {
  display: flex;
  align-items: baseline;
  gap: 10px;
  width: 100%;
  text-align: left;
  padding: 7px 10px;
  border: 1px solid var(--rule-soft);
  border-radius: var(--r-md);
  background: var(--paper-3);
  color: var(--ink);
  font-size: 13px;
  cursor: pointer;
}
.libpick-row:hover { border-color: var(--orange-deep); }
.libpick-text { flex: 1; min-width: 0; }
.libpick-meta { flex: none; font-size: 11px; color: var(--steel); }
.libpick-price { flex: none; font-weight: 600; white-space: nowrap; }

/* Søk + kategorifilter, samme oppsett som biblioteket i kalkylen */
.libpick-filters { display: flex; gap: 8px; margin-top: 8px; }
.libpick-filters #libpickSearch { flex: 1; margin-top: 0; }
.libpick-filters select {
  flex: none; max-width: 190px;
  padding: 8px 10px;
  border: 1px solid var(--rule); border-radius: var(--r-md);
  background: var(--paper-3); color: var(--ink); font-size: 13px;
}
/* Kategorioverskrift — speiler .lib-cat i kalkylen */
.libpick-cat {
  position: sticky; top: 0; z-index: 1;
  display: flex; align-items: center; gap: 8px;
  padding: 8px 10px 6px;
  margin-top: 6px;
  font-family: var(--font-display);
  font-size: 13px; font-weight: 500; letter-spacing: -.005em;
  color: var(--ink-soft);
  background: var(--paper-2);
  border-top: 1px solid var(--rule-soft);
}
.libpick-cat:first-child { margin-top: 0; border-top: none; }
.libpick-cat-n {
  margin-left: auto;
  font-family: var(--font-mono); font-size: 10px; font-weight: 600;
  color: var(--steel); background: var(--paper-3);
  border: 1px solid var(--rule); border-radius: 999px; padding: 1px 8px;
}
.libpick-cat-empty {
  padding: 6px 10px 8px; font-size: 12px; color: var(--steel); font-style: italic;
}

/* Avregning-kortet i prosjektstyringen */
.av-note {
  font-size: 11px;
  color: var(--steel);
  margin: 4px 0 10px;
}
.av-table .av-utfort { width: 72px; text-align: right; }
.av-table .av-pkt { white-space: nowrap; }
.av-subhead {
  font-family: var(--font-sans);
  font-size: 11px;
  font-weight: 600;
  color: var(--steel);
  text-transform: uppercase;
  letter-spacing: .06em;
  margin: 16px 0 6px;
}
.av-nota {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 7px 10px;
  border: 1px solid var(--rule-soft);
  border-radius: var(--r-md);
  margin-bottom: 6px;
  font-size: 12px;
}
.av-nota span:first-child { flex: 1; }
.av-nota span:nth-child(2) { color: var(--steel); }
/* Prosjektnavn-raden øverst — vises som kalkylens tittel */
.proj-info input#piName {
  font-size: 18px;
  font-weight: 600;
}
.proj-info > div.full {
  grid-column: span 2;
  border-right: none;
}
.proj-info label {
  font-family: var(--font-sans);
  font-size: 11px;
  color: var(--steel);
  font-weight: 600;
  display: block;
  margin-bottom: 6px;
  text-transform: uppercase;
  letter-spacing: .06em;
}
.proj-info label .link-btn {
  float: right;
  margin-left: 16px;
  background: transparent;
  border: none;
  color: var(--orange-deep);
  font-size: 11px;
  cursor: pointer;
  padding: 0;
  text-transform: none;
  letter-spacing: 0;
  font-weight: 500;
  font-family: var(--font-sans);
}
.proj-info label .link-btn:hover {
  color: var(--orange);
  text-decoration: underline;
}
/* Forbehold-label: tittel til venstre, handlingsknapper i flex-rad til høyre
   (ingen float → knappene overlapper aldri, så hover treffer kun den ene). */
.proj-info label.fb-label { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.proj-info label.fb-label .fb-actions { margin-left: auto; display: inline-flex; align-items: center; gap: 16px; }
.proj-info label.fb-label .link-btn { float: none; margin: 0; }
.proj-info input,
.proj-info select,
.proj-info textarea {
  width: 100%;
  border: none;
  border-radius: 0;
  border-bottom: 1px solid transparent;
  padding: 4px 0;
  font-size: 15px;
  background: transparent;
  color: var(--ink);
  transition: border-color .15s ease;
}
.proj-info select {
  cursor: pointer;
  font-family: inherit;
}
.proj-info input:hover,
.proj-info select:hover,
.proj-info textarea:hover {
  border-bottom-color: var(--rule);
}
.proj-info input:focus,
.proj-info select:focus,
.proj-info textarea:focus {
  outline: none;
  border-bottom-color: var(--orange);
}
.proj-info textarea {
  resize: vertical;
  min-height: 60px;
  font-family: var(--font-sans);
  line-height: 1.5;
}

/* ===== Calc section ===== */
.calc-section {
  margin-bottom: 28px;
  border: 1px solid var(--rule);
  border-radius: var(--r-md);
  background: var(--paper-3);
  position: relative;
  overflow: hidden;
  box-shadow: var(--shadow-xs);
}
.calc-section::before {
  content: none;
}

.calc-section-head {
  display: flex; align-items: center; gap: 12px;
  padding: 12px 16px 12px 20px;
  background: #1E293B;
  border-bottom: none;
}
.calc-section-head input.sec-num {
  width: 48px;
  font-family: var(--font-display);
  font-size: 20px;
  font-weight: 700;
  color: #FB923C;
  text-align: center;
  padding: 4px 6px;
  border: 1px solid transparent;
  border-radius: var(--r-sm);
  background: transparent;
  font-variant-numeric: tabular-nums;
  letter-spacing: -.005em;
}
.calc-section-head input.sec-num:hover,
.calc-section-head input.sec-num:focus {
  background: rgba(255,255,255,.08);
  border-color: #334155;
  outline: none;
}
.calc-section-head input.title {
  flex: 1;
  border: 1px solid transparent;
  border-radius: var(--r-sm);
  background: transparent;
  font-family: var(--font-display);
  font-size: 18px;
  font-weight: 600;
  padding: 6px 10px;
  letter-spacing: -.01em;
  text-transform: none;
  color: #F1F5F9;
}
.calc-section-head input.title:hover,
.calc-section-head input.title:focus {
  background: rgba(255,255,255,.07);
  border-color: #475569;
  outline: none;
}
.calc-section-head input.sec-del {
  width: 80px;
  flex: 0 0 auto;
  border: 1px solid transparent;
  border-radius: var(--r-sm);
  background: transparent;
  font-family: var(--font-sans);
  font-size: 12px;
  font-weight: 600;
  padding: 5px 8px;
  color: #94A3B8;
  text-align: center;
}
.calc-section-head input.sec-del::placeholder { color: #64748B; font-weight: 500; }
.calc-section-head input.sec-del:hover,
.calc-section-head input.sec-del:focus {
  background: rgba(255,255,255,.07);
  border-color: #475569;
  color: #F1F5F9;
  outline: none;
}
.calc-section-head .sec-sum {
  font-family: var(--font-mono);
  font-size: 13px;
  color: #FB923C;
  font-variant-numeric: tabular-nums;
  font-weight: 600;
  padding: 4px 12px;
  background: rgba(251,146,60,.15);
  border-radius: 999px;
  align-self: center;
}
.calc-section-head button {
  background: transparent;
  border: 1px solid #334155;
  border-radius: var(--r-sm);
  color: #94A3B8;
  padding: 6px 12px;
  font-family: var(--font-sans);
  font-size: 12px;
  font-weight: 500;
  text-transform: none;
  letter-spacing: 0;
  transition: all .12s ease;
}
.calc-section-head button:hover {
  background: var(--danger);
  color: #fff;
  border-color: var(--danger);
}
.calc-section-head .sec-act {
  background: transparent;
  border: 1px solid #334155;
  border-radius: var(--r-sm);
  color: #94A3B8;
  width: 28px; height: 28px;
  padding: 0;
  font-size: 13px;
  display: inline-flex; align-items: center; justify-content: center;
  transition: all .12s ease;
}
.calc-section-head .sec-act:hover {
  background: #475569;
  color: #fff;
  border-color: #475569;
}
.calc-section-head .sec-act:disabled {
  opacity: .35;
  cursor: not-allowed;
}
.calc-section-head .sec-act:disabled:hover {
  background: transparent;
  color: #64748B;
  border-color: #334155;
}

/* Items table */
table.items {
  width: 100%; border-collapse: collapse;
  font-size: 13px;
  background: var(--paper-3);
}
table.items th {
  background: var(--paper-2);
  color: var(--ink-soft);
  text-align: left;
  font-family: var(--font-sans);
  font-weight: 600;
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: .08em;
  padding: 10px 12px;
  border-bottom: 1px solid var(--rule);
}
table.items th.right,
table.items td.right { text-align: right; }
table.items td {
  padding: 8px 12px;
  border-bottom: 1px solid var(--rule-soft);
  vertical-align: top;
}
table.items tr:last-child td { border-bottom: none; }
table.items tr:hover td { background: var(--paper-2); }

table.items input,
table.items textarea {
  width: 100%;
  border: 1px solid transparent;
  border-radius: var(--r-sm);
  background: transparent;
  padding: 5px 7px;
  font: inherit;
  color: var(--ink);
  transition: border-color .12s ease, background .12s ease;
}
table.items input:hover,
table.items textarea:hover {
  background: var(--paper-3);
  border-color: var(--rule-soft);
}
table.items input:focus,
table.items textarea:focus {
  background: var(--paper-3);
  border-color: var(--orange);
  outline: none;
  box-shadow: 0 0 0 3px rgba(184,92,46,.10);
}
table.items textarea {
  resize: vertical; font-family: var(--font-sans);
  line-height: 1.4;
  min-height: 28px;
}
table.items input.num {
  text-align: right;
  font-variant-numeric: tabular-nums;
  font-family: var(--font-mono);
  font-size: 12px;
}
table.items td.subtotal {
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
  font-weight: 600;
  padding-top: 11px;
  font-size: 13px;
  color: var(--ink);
}
table.items td.subtotal .info-dash {
  color: var(--steel-light);
  font-weight: 400;
  font-size: 18px;
  letter-spacing: 1px;
}

table.items td.row-actions {
  width: 78px; text-align: center;
  padding: 4px 4px;
  white-space: nowrap;
}
table.items td.row-actions .row-act-btn {
  background: transparent;
  border: 1px solid transparent;
  border-radius: var(--r-sm);
  color: var(--steel);
  width: 24px; height: 24px;
  padding: 0;
  font-size: 13px;
  cursor: pointer;
  line-height: 1;
  display: inline-flex; align-items: center; justify-content: center;
  transition: all .12s ease;
}
table.items tr:hover td.row-actions .row-act-btn {
  border-color: var(--rule);
}
table.items td.row-actions .row-act-btn:hover {
  background: var(--ink);
  color: #fff;
  border-color: var(--ink);
}
table.items td.row-actions .row-act-btn:disabled {
  opacity: .25; cursor: not-allowed;
  background: transparent !important;
  border-color: transparent !important;
}
table.items td.row-actions .row-act-del { font-size: 16px; }
table.items td.row-actions .row-act-del:hover {
  background: var(--danger);
  color: #fff;
  border-color: var(--danger);
}

table.items col.col-pkt { width: 80px; }
table.items col.col-unit { width: 70px; }
table.items col.col-qty { width: 84px; }
table.items col.col-price { width: 110px; }
/* Påslag lik Enhet-kolonnen (begge 70px). Beskrivelse er fleksibel (umerket
   <col>), så det som strammes inn på Pkt/handlinger/Påslag går dit. */
table.items col.col-markup { width: 70px; }
table.items col.col-sum { width: 122px; }
table.items col.col-actions { width: 64px; }

/* Påslag-per-post: dempet felt, det er et internt hjelpetall (skjules i tilbudet) */
table.items input.num-markup { color: var(--orange-deep); font-size: 12px; }
table.items input.num-markup::placeholder { color: var(--rule); }


table.items td.pkt-cell {
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
  color: var(--ink);
  padding: 6px 4px;
  background: var(--paper-2);
  border-right: 1px solid var(--rule-soft);
}
table.items td.pkt-cell .drag-handle {
  display: inline-block;
  cursor: grab;
  user-select: none;
  color: var(--steel-light);
  margin-right: 4px;
  font-size: 12px;
}
table.items td.pkt-cell .drag-handle:active { cursor: grabbing; }
table.items td.pkt-cell input.pkt-input {
  width: calc(100% - 22px);
  font-family: var(--font-mono);
  font-size: 12px;
  font-weight: 600;
  padding: 3px 5px;
  border: 1px solid transparent;
  border-radius: var(--r-sm);
  background: transparent;
  color: var(--ink);
  letter-spacing: .01em;
}
table.items td.pkt-cell input.pkt-input:hover,
table.items td.pkt-cell input.pkt-input:focus {
  border-color: var(--rule);
  background: var(--paper-3);
  outline: none;
}
table.items tr.dragging {
  opacity: .4;
  background: var(--orange-faint);
}
table.items tr.drag-over-top td {
  box-shadow: inset 0 3px 0 var(--orange);
}
table.items tr.drag-over-bottom td {
  box-shadow: inset 0 -3px 0 var(--orange);
}

/* Add row / add section */
.add-row-btn {
  width: 100%;
  padding: 12px;
  border: none;
  border-radius: 0;
  border-top: 1px dashed var(--rule);
  background: transparent;
  color: var(--steel);
  font-family: var(--font-sans);
  font-size: 13px;
  font-weight: 500;
  text-transform: none;
  letter-spacing: 0;
  transition: background .12s ease, color .12s ease;
}
.add-row-btn:hover {
  background: var(--orange-faint);
  color: var(--orange-deep);
}

.add-section-btn {
  width: 100%;
  padding: 20px;
  border: 1px dashed var(--rule);
  border-radius: var(--r-md);
  background: transparent;
  color: var(--steel);
  font-family: var(--font-display);
  font-style: italic;
  font-size: 16px;
  font-weight: 400;
  text-transform: none;
  letter-spacing: -.005em;
  margin-bottom: 24px;
  transition: all .15s ease;
}
.add-section-btn:hover {
  background: var(--orange-faint);
  color: var(--orange-deep);
  border-color: var(--orange);
  border-style: solid;
}

/* Totals */
.totals {
  background: var(--paper-3);
  color: var(--ink);
  padding: 28px 32px;
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 10px 32px;
  font-family: var(--font-mono);
  font-size: 15px;
  font-variant-numeric: tabular-nums;
  border: 1px solid var(--rule);
  border-radius: var(--r-md);
  position: relative;
  box-shadow: var(--shadow-sm);
}
.totals::before {
  content: "Sum";
  position: absolute;
  top: -12px; left: 24px;
  background: var(--paper);
  color: var(--steel);
  font-family: var(--font-display);
  font-style: italic;
  font-size: 13px;
  font-weight: 400;
  padding: 0 10px;
  letter-spacing: 0;
  text-transform: none;
}
.totals .label {
  text-align: right;
  color: var(--steel);
  font-family: var(--font-sans);
  font-weight: 500;
  text-transform: none;
  letter-spacing: 0;
  font-size: 14px;
  align-self: center;
}
.totals .value {
  text-align: right;
  min-width: 180px;
  font-weight: 500;
  color: var(--ink);
  align-self: center;
}
.totals .total .label,
.totals .total .value {
  font-family: var(--font-display);
  font-style: italic;
  font-size: 34px;
  font-weight: 500;
  color: var(--orange-deep);
  padding-top: 14px;
  border-top: 1px solid var(--rule);
  margin-top: 10px;
  letter-spacing: -.015em;
}
.totals .total .label {
  color: var(--ink);
  font-size: 18px;
  letter-spacing: -.005em;
  align-self: end;
  padding-bottom: 8px;
  font-style: italic;
}

/* --- Redigerbar "Sum eks. mva." + tilbakestill-knapp --- */
/* ---- Påslag i prosent ---- */
.totals .paslag-label { display: flex; align-items: center; gap: 8px; }
.totals .paslag-input {
  width: 62px; text-align: right;
  padding: 4px 8px;
  border: 1px solid var(--rule);
  border-radius: var(--r-sm);
  background: var(--paper);
  font-family: var(--font-mono);
  font-size: 14px;
  font-variant-numeric: tabular-nums;
  color: var(--ink);
  transition: border-color .15s ease, box-shadow .15s ease;
}
.totals .paslag-input:focus {
  outline: none; border-color: var(--orange);
  box-shadow: 0 0 0 3px rgba(194,65,12,.12);
}
.totals .paslag-pct { color: var(--steel); }
/* «Sum poster» er kun referanse — dempes så «Sum eks. mva.» leses som fasit */
.totals .paslag-row { color: var(--steel); }
.totals .paslag-row[hidden] { display: none; }

.totals .sum-edit-wrap {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 10px;
  min-width: 180px;
}
.totals .value-num {
  text-align: right;
  font-variant-numeric: tabular-nums;
  border-radius: var(--r-sm);
  padding: 2px 6px;
  margin: -2px -6px;
  outline: none;
  cursor: text;
  transition: background .12s ease, box-shadow .12s ease;
}
.totals .value-num:hover {
  background: var(--paper);
  box-shadow: inset 0 0 0 1px var(--rule);
}
.totals .value-num:focus {
  background: #fff;
  box-shadow: inset 0 0 0 2px var(--orange);
}
.totals.is-overridden .value-num {
  color: var(--orange-deep);
  font-weight: 700;
}
.totals .reset-sum-btn {
  font-family: var(--font-sans);
  font-size: 11px;
  font-weight: 600;
  color: var(--steel);
  background: var(--paper);
  border: 1px solid var(--rule);
  border-radius: 999px;
  padding: 3px 10px;
  cursor: pointer;
  white-space: nowrap;
  transition: all .12s ease;
}
.totals .reset-sum-btn:hover {
  color: var(--orange-deep);
  border-color: var(--orange);
  background: var(--orange-faint);
}
.totals .sum-override-hint {
  grid-column: 1 / -1;
  text-align: right;
  font-family: var(--font-sans);
  font-size: 11px;
  font-style: italic;
  color: var(--steel);
  margin-top: -4px;
}

/* ===== Project Drawer ===== */
@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }


/* Statusfilter-piller + underoverskrifter i skuffen */
.drawer-pill {
  font-family: var(--font-sans);
  font-size: 12px;
  padding: 4px 10px;
  border: 1px solid var(--rule);
  border-radius: 999px;
  background: var(--paper-3);
  color: var(--ink-soft);
  cursor: pointer;
  transition: border-color .15s ease, background .15s ease;
}
.drawer-pill:hover { border-color: var(--orange-deep); }
.drawer-pill.active {
  border-color: var(--orange-deep);
  color: var(--orange-deep);
  font-weight: 600;
}
.drawer-pill .pill-count {
  font-family: var(--font-mono);
  font-size: 11px;
  opacity: .75;
}

/* Prosjektarkiv — sentrert panel med blurret bakgrunn */
.archive-bg {
  display: none;
  position: fixed; inset: 0;
  background: rgba(27,24,20,.35);
  backdrop-filter: blur(3px);
  z-index: 210;
  align-items: center;
  justify-content: center;
  padding: 40px 24px;
  animation: fadeIn .18s ease;
}
.archive-bg.show { display: flex; }
.archive-page {
  width: 100%;
  max-width: 1000px;
  max-height: 100%;
  background: var(--paper);
  border: 1px solid var(--rule);
  border-radius: var(--r-lg, 14px);
  box-shadow: var(--shadow-lg);
  display: flex;
  flex-direction: column;
  min-height: 0;
  overflow: hidden;
  animation: modalPop .2s cubic-bezier(.2,.8,.2,1);
}
@keyframes modalPop {
  from { transform: scale(.97); opacity: 0; }
  to { transform: scale(1); opacity: 1; }
}
.archive-head {
  flex: none;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 20px 26px 10px;
}
.archive-head h2 { margin: 0; }
.archive-head button {
  border: 1px solid var(--rule);
  background: var(--paper-3);
  border-radius: var(--r-md);
  padding: 6px 12px;
  cursor: pointer;
  font-size: 14px;
}
.archive-head button:hover { border-color: var(--orange-deep); color: var(--orange-deep); }
.archive-toolbar {
  flex: none;
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  padding: 4px 26px 14px;
}
.archive-toolbar #archiveSearch {
  flex: 1;
  min-width: 220px;
  padding: 8px 12px;
  border: 1px solid var(--rule);
  border-radius: var(--r-md);
  background: var(--paper-3);
  color: var(--ink);
  font-size: 14px;
}
.archive-toolbar #archiveSearch:focus {
  outline: none;
  border-color: var(--orange);
}
.archive-filter { display: flex; gap: 6px; flex-wrap: wrap; }
.archive-new {
  border: 1px solid var(--orange-deep);
  background: var(--orange-deep);
  color: #fff;
  border-radius: var(--r-md);
  padding: 7px 14px;
  cursor: pointer;
  font-size: 13px;
}
.archive-body {
  flex: 1;
  overflow-y: auto;
  padding: 0 26px 8px;
}
.archive-table {
  width: 100%;
  border-collapse: collapse;
  background: var(--paper-3);
  border: 1px solid var(--rule);
  border-radius: var(--r-md);
  overflow: hidden;
  font-size: 13px;
}
.archive-table th {
  position: sticky; top: 0;
  background: var(--paper-2);
  text-align: left;
  font-family: var(--font-sans);
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .05em;
  color: var(--steel);
  padding: 9px 12px;
  border-bottom: 1px solid var(--rule);
  cursor: pointer;
  user-select: none;
  white-space: nowrap;
}
.archive-table th:hover, .archive-table th.sorted { color: var(--orange-deep); }
.archive-table td {
  padding: 9px 12px;
  border-bottom: 1px solid var(--rule-soft);
}
.archive-group { cursor: pointer; }
.archive-group td {
  background: var(--paper-2);
  font-family: var(--font-sans);
  font-size: 13px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .06em;
  color: var(--ink);
  padding: 9px 12px;
  border-bottom: 1px solid var(--rule);
  position: sticky;
  top: 33px;
  user-select: none;
}
.archive-group:hover td { color: var(--orange-deep); background: var(--paper); }
.archive-group .arc-chevron {
  display: inline-block;
  width: 14px;
  font-size: 11px;
  color: var(--ink-soft);
}
.archive-group:hover .arc-chevron { color: var(--orange-deep); }
.archive-group.fav td { color: var(--orange-deep); }
.archive-group .arc-group-count {
  margin-left: 8px;
  font-family: var(--font-mono);
  font-weight: 500;
  color: var(--steel-light);
  letter-spacing: 0;
}
.archive-row { cursor: pointer; }
.archive-row:hover td { background: var(--paper-2); }
.archive-row.active td { background: rgba(184,92,46,.08); }
.archive-row:last-child td { border-bottom: none; }
.archive-table th.arc-star-th { width: 34px; cursor: default; padding: 9px 4px 9px 12px; }
.archive-table th.arc-star-th:hover { color: var(--steel); }
.arc-star { width: 34px; padding: 9px 4px 9px 12px !important; }
.arc-star-btn {
  border: none;
  background: transparent;
  cursor: pointer;
  padding: 0;
  font-size: 16px;
  line-height: 1;
  color: var(--rule);
  transition: color .12s ease, transform .12s ease;
}
.archive-row:hover .arc-star-btn { color: var(--steel-light); }
.arc-star-btn:hover { color: var(--orange); transform: scale(1.15); }
.arc-star-btn.on,
.archive-row:hover .arc-star-btn.on { color: var(--orange-deep); }
.arc-date { white-space: nowrap; color: var(--steel); font-family: var(--font-mono); font-size: 12px; width: 105px; }
.arc-name { font-weight: 600; }
.arc-name .arc-active { color: var(--orange-deep); font-size: 11px; font-weight: 600; }
.arc-customer { color: var(--steel); }
.arc-sum {
  text-align: right;
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
  width: 120px;
}
.arc-sum.zero { color: var(--steel-light); }
.archive-row .card-status-tag {
  display: inline-block;
  font-family: var(--font-sans);
  font-size: 10px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .06em;
  padding: 2px 9px;
  border: 1px solid var(--rule);
  border-radius: 999px;
  white-space: nowrap;
}
.archive-foot {
  flex: none;
  padding: 8px 28px 18px;
  font-family: var(--font-sans);
  font-size: 12px;
  color: var(--steel);
}


.drawer-empty {
  text-align: center;
  padding: 60px 24px;
  color: var(--steel);
  font-size: 14px;
}
.drawer-empty .icon {
  font-size: 38px;
  margin-bottom: 12px;
  opacity: .4;
}

/* ===== Tilbudsbrev view ===== */
.tilbud-view {
  display: none;
  max-width: 820px;
  margin: 0 auto;
  padding: 56px 48px 80px;
  background: var(--paper-3);
  font-family: var(--font-sans);
  color: var(--ink);
}
/* Mengdebeskrivelsen består av faste 794 px A4-ark, som er bredere enn de
   724 px .tilbud-view ellers gir. `margin: 0 auto` kan ikke sentrere noe som er
   bredere enn forelderen, så arket ble venstrestilt og rant 70 px ut til høyre.
   Her slippes bredden fri slik at arkene sentreres på grå bakgrunn, som i ISY. */
.tilbud-view.mb-visning {
  max-width: none;
  padding-left: 0; padding-right: 0; padding-top: 0;
  overflow-x: auto;            /* trangt vindu: rull heller enn å klippe arket */
}

body.show-tilbud .app,
body.show-tilbud .topbar,
body.show-tilbud .subbar,
body.show-tilbud .toolbar { display: none !important; }
body.show-tilbud .tilbud-view { display: block; }
body.show-tilbud .tilbud-toolbar { display: flex; }
body.show-tilbud { background: var(--concrete); }

.tilbud-toolbar {
  display: none;
  position: sticky; top: 0;
  background: var(--paper-2);
  color: var(--ink);
  padding: 0 0 0 0;
  gap: 0;
  align-items: stretch;
  z-index: 50;
  border-bottom: 1px solid var(--rule);
  min-height: 60px;
}
.tilbud-toolbar h2 {
  margin: 0 auto 0 0;
  padding: 0 26px;
  font-family: var(--font-display);
  font-size: 22px;
  font-weight: 500;
  letter-spacing: -.01em;
  text-transform: none;
  align-self: center;
  color: var(--ink);
}
.tilbud-toolbar button {
  background: transparent;
  border: none;
  border-radius: 0;
  border-left: 1px solid var(--rule);
  color: var(--ink-soft);
  padding: 0 22px;
  font-family: var(--font-sans);
  font-size: 13px;
  font-weight: 500;
  text-transform: none;
  letter-spacing: 0;
  align-self: stretch;
  transition: background .12s ease;
}
.tilbud-toolbar button:hover { background: var(--concrete); }
.tilbud-toolbar button.primary {
  background: #1E293B;
  color: #fff;
  font-weight: 600;
  border-left: none;
  margin: 12px 14px 12px 14px;
  padding: 0 22px;
  border-radius: var(--r-md);
  height: 36px;
  align-self: center;
  box-shadow: var(--shadow-sm);
}
.tilbud-toolbar button.primary:hover {
  background: #334155;
  box-shadow: var(--shadow-md);
}

.tilbud-toolbar .tilbud-variant {
  display: inline-flex;
  align-self: center;
  background: var(--concrete);
  padding: 3px;
  border-radius: 999px;
  margin: 0 14px;
  gap: 0;
}
.tilbud-toolbar .variant-btn {
  background: transparent;
  border: none;
  border-radius: 999px;
  padding: 7px 14px;
  font-family: var(--font-sans);
  font-size: 12px;
  color: var(--steel);
  cursor: pointer;
  text-transform: none;
  letter-spacing: 0;
  font-weight: 500;
}
.tilbud-toolbar .variant-btn:hover { color: var(--ink); }
.tilbud-toolbar .variant-btn.active {
  background: var(--paper-3);
  color: var(--ink);
  font-weight: 600;
  box-shadow: var(--shadow-sm);
}

/* Signatur-velger i tilbudsbrev-toolbaren */
.tilbud-toolbar .signer-picker,
.tilbud-toolbar .del-picker {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  align-self: center;
  margin-right: 14px;
  font-family: var(--font-sans);
  font-size: 12px;
  color: var(--steel);
  white-space: nowrap;
}
.tilbud-toolbar .del-picker[hidden] { display: none; }
.tilbud-toolbar .del-picker select,
.tilbud-toolbar .signer-picker select {
  font-family: var(--font-sans);
  font-size: 12px;
  font-weight: 600;
  color: var(--ink);
  background: var(--paper-3);
  border: 1px solid var(--rule);
  border-radius: 999px;
  padding: 6px 12px;
  cursor: pointer;
}
.tilbud-toolbar .signer-picker select:hover,
.tilbud-toolbar .del-picker select:hover { border-color: var(--steel-light); }
.tilbud-toolbar .signer-picker select:focus,
.tilbud-toolbar .del-picker select:focus {
  outline: none;
  border-color: var(--orange);
  box-shadow: 0 0 0 2px var(--orange-faint);
}

.tilbud-view img.logo {
  display: block;
  max-width: 100%; max-height: 130px;
  height: auto; width: auto;
  margin: 0 auto 28px;
}
.tilbud-view .head-table {
  width: 100%;
  border-collapse: collapse;
  margin-bottom: 28px;
  font-size: 13px;
}
.tilbud-view .head-table td {
  padding: 5px 8px;
  vertical-align: top;
}
.tilbud-view .head-table .label-col {
  color: var(--steel);
  width: 38%;
  font-family: var(--font-sans);
  text-transform: uppercase;
  letter-spacing: .06em;
  font-size: 11px;
  font-weight: 600;
}
.tilbud-view .head-table .right { text-align: right; }
.tilbud-view h1 {
  font-family: "Times New Roman", Times, serif;
  font-style: normal;
  font-size: 48px;
  margin: 14px 0 4px;
  font-weight: 400;
  letter-spacing: -.025em;
  text-transform: none;
  line-height: 1.05;
  color: var(--ink);
}
.tilbud-view h2.subtitle {
  font-size: 15px;
  color: var(--steel);
  margin: 0 0 28px;
  font-weight: 400;
  font-family: var(--font-sans);
}
.tilbud-view .proj-block {
  background: var(--paper);
  border: 1px solid var(--rule);
  border-left: 3px solid #1E293B;
  border-radius: var(--r-sm);
  padding: 14px 18px;
  margin-bottom: 26px;
  font-size: 13px;
  line-height: 1.6;
}
.tilbud-view .proj-block strong {
  display: block;
  margin-bottom: 5px;
  font-family: var(--font-sans);
  font-size: 10px;
  color: var(--steel);
  text-transform: uppercase;
  letter-spacing: .08em;
  font-weight: 600;
}

.tilbud-view .sum-heading,
.tilbud-view .details-heading {
  font-family: var(--font-display);
  font-style: italic;
  font-size: 22px;
  font-weight: 500;
  color: var(--ink);
  margin: 32px 0 14px;
  padding-bottom: 8px;
  border-bottom: 1px solid var(--rule);
  text-transform: none;
  letter-spacing: -.01em;
}
.tilbud-view table.sum-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 12px;
  margin-bottom: 28px;
  border: 1px solid var(--rule);
  border-radius: var(--r-sm);
  overflow: hidden;
}
.tilbud-view table.sum-table th {
  background: #1E293B;
  color: #94A3B8;
  font-family: var(--font-sans);
  font-weight: 600;
  text-align: left;
  padding: 8px 10px;
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: .06em;
  border-bottom: none;
}
.tilbud-view table.sum-table th.right { text-align: right; }
.tilbud-view table.sum-table td {
  padding: 7px 10px;
  border-bottom: 1px solid var(--rule-soft);
  vertical-align: top;
}
.tilbud-view table.sum-table td.right {
  text-align: right;
  font-variant-numeric: tabular-nums;
  font-family: var(--font-mono);
  font-size: 11px;
}
.tilbud-view table.sum-table tr.sum-section-row td {
  font-weight: 600;
  font-size: 12px;
  padding: 10px;
  color: var(--ink);
  background: var(--paper);
}
.tilbud-view table.sum-table tr.sum-section-row td:first-child {
  color: var(--steel);
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
}
.tilbud-view table.sum-table tr.sum-total-row td {
  background: #1E293B;
  color: #FFFFFF;
  font-family: var(--font-display);
  font-weight: 700;
  padding: 14px 10px;
  font-size: 18px;
  text-transform: none;
  letter-spacing: -.01em;
  border-top: none;
}

.tilbud-view table.lines {
  width: 100%;
  border-collapse: collapse;
  font-size: 12px;
  margin-bottom: 20px;
}
.tilbud-view table.lines th {
  background: #1E293B;
  color: #94A3B8;
  font-family: var(--font-sans);
  font-weight: 600;
  text-align: left;
  padding: 8px 10px;
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: .06em;
  border-bottom: none;
}
.tilbud-view table.lines td {
  padding: 7px 10px;
  border-bottom: 1px solid var(--rule-soft);
  vertical-align: top;
}
.tilbud-view table.lines th.right,
.tilbud-view table.lines td.right {
  text-align: right;
  font-variant-numeric: tabular-nums;
  font-family: var(--font-mono);
}
.tilbud-view table.lines tr.section-row td {
  background: var(--paper);
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 500;
  font-size: 16px;
  text-transform: none;
  letter-spacing: -.01em;
  padding: 12px 10px;
  border-top: 1px solid var(--rule);
  border-bottom: 1px solid var(--rule);
  color: var(--ink);
}
.tilbud-view table.lines tr.info-row td {
  background: var(--paper-2);
  color: var(--steel);
  font-style: italic;
}
.tilbud-view table.lines tr.info-row td:nth-child(5),
.tilbud-view table.lines tr.info-row td:nth-child(6) {
  color: var(--steel-light);
}

.tilbud-view .tilbud-ns3420 {
  display: inline-block;
  font-size: 10px;
  font-family: var(--font-mono);
  color: #1E293B;
  background: #E2E8F0;
  border: 1px solid #CBD5E1;
  border-radius: 999px;
  padding: 0 6px;
  line-height: 14px;
  margin-right: 5px;
  vertical-align: 1px;
  font-weight: 600;
}

/* MERK: ikke sett `break-inside: avoid` på <tr> her (i normal-visningen).
   html2pdf håndterer sidebryt ved å sette inn en spacer-<div> FØR raden — men
   en <div> inni <tbody> er ugyldig tabell-markup og gir uforutsigbare hull i
   PDF-en (tomt felt øverst, løsrevet totalsum, OG poster som forsvinner ved
   sideskifte). For selve PDF-eksporten løses dette i stedet med klassen
   `.pdf-paged` lenger ned: da gjøres tabellene om til flex-rader i en <tbody>
   med display:block, slik at spacer-<div>-ene blir GYLDIGE blokk-søsken og
   hele rader skyves til neste side uten å klippes/forsvinne. Sidebryt for
   blokk-elementer (forbehold/signatur) håndteres uansett riktig. */
.tilbud-view .proj-block,
.tilbud-view .forbehold,
.tilbud-view .signature {
  page-break-inside: avoid;
  break-inside: avoid;
}

.tilbud-view tr.info-row-fulltext td {
  padding: 22px 16px;
  background: var(--paper-3);
  border-top: 1px solid var(--rule);
  border-bottom: 1px solid var(--rule);
  page-break-inside: avoid;
  break-inside: avoid;
}
.tilbud-view tr.info-row-fulltext .info-pkt-header {
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 500;
  font-size: 15px;
  margin-bottom: 12px;
  color: var(--ink);
  text-transform: none;
  letter-spacing: -.005em;
  font-variant-numeric: tabular-nums;
}
.tilbud-view tr.info-row-fulltext .info-text-body {
  font-size: 12px;
  line-height: 1.65;
  white-space: pre-wrap;
  color: var(--ink-soft);
}
.tilbud-view tr.info-row-pagebreak td {
  page-break-before: always;
  break-before: page;
}

/* ============================================================================
   PDF-EKSPORT: BLOKK-BASERT PAGINERING (.pdf-paged)
   ----------------------------------------------------------------------------
   Klassen settes kun på #tilbudView mens html2pdf kjører (se exportTilbudPdf).
   Skjerm-visning og «Skriv ut» (Cmd+P) er helt urørt — de bruker fortsatt den
   vanlige <table>-visningen.

   Problemet: html2pdf rasteriserer HTML til ett langt bilde og deler det i
   A4-sider. Rader som krysser et sideskifte blir klippet/forsvinner, og
   html2pdfs egen «avoid»-logikk setter inn spacer-<div>-er inni <tbody>/<tr>
   (ugyldig tabell-markup) → poster forsvinner.

   Løsningen: gjør tabellene om til flex-rader der <tbody> er display:block.
   Da blir spacer-<div>-ene gyldige blokk-søsken, `break-inside: avoid` på hver
   rad respekteres, og hele rader skyves til neste side. Ingen poster klippes.
   Kolonnebreddene speiler <th style="width:…"> slik at oppsettet ser likt ut. */
.tilbud-view.pdf-paged table.lines,
.tilbud-view.pdf-paged table.lines thead,
.tilbud-view.pdf-paged table.lines tbody,
.tilbud-view.pdf-paged table.sum-table,
.tilbud-view.pdf-paged table.sum-table thead,
.tilbud-view.pdf-paged table.sum-table tbody {
  display: block;
  width: 100%;
}
.tilbud-view.pdf-paged table.lines tr,
.tilbud-view.pdf-paged table.sum-table tr {
  display: flex;
  width: 100%;
  page-break-inside: avoid;
  break-inside: avoid;
}
.tilbud-view.pdf-paged table.lines th,
.tilbud-view.pdf-paged table.lines td,
.tilbud-view.pdf-paged table.sum-table th,
.tilbud-view.pdf-paged table.sum-table td {
  box-sizing: border-box;
}

/* --- Kolonnebredder: .lines (50 / fleks / 60 / 70 / 90 / 100) --- */
.tilbud-view.pdf-paged table.lines tr > *:nth-child(1) { flex: 0 0 50px; }
.tilbud-view.pdf-paged table.lines tr > *:nth-child(2) { flex: 1 1 auto; min-width: 0; }
.tilbud-view.pdf-paged table.lines tr > *:nth-child(3) { flex: 0 0 60px; }
.tilbud-view.pdf-paged table.lines tr > *:nth-child(4) { flex: 0 0 70px; }
.tilbud-view.pdf-paged table.lines tr > *:nth-child(5) { flex: 0 0 90px; }
.tilbud-view.pdf-paged table.lines tr > *:nth-child(6) { flex: 0 0 100px; }
/* Rader med én colspan-celle (seksjon/info) fyller hele bredden */
.tilbud-view.pdf-paged table.lines tr.section-row > td,
.tilbud-view.pdf-paged table.lines tr.info-row > td,
.tilbud-view.pdf-paged table.lines tr.info-row-fulltext > td { flex: 1 1 100%; }
/* Sum-/totalsrader: colspan-5 etikett + sum-celle */
.tilbud-view.pdf-paged table.lines tr.totals-row > td:nth-child(1),
.tilbud-view.pdf-paged table.lines tr.grand-row > td:nth-child(1) { flex: 1 1 auto; }
.tilbud-view.pdf-paged table.lines tr.totals-row > td:nth-child(2),
.tilbud-view.pdf-paged table.lines tr.grand-row > td:nth-child(2) { flex: 0 0 100px; }

/* Flytt sidebryt fra <td> til <tr> for info-poster, ellers havner spacer-<div>
   inni <tr> (ugyldig). På rad-nivå blir den et gyldig blokk-søsken i <tbody>. */
.tilbud-view.pdf-paged table.lines tr.info-row-fulltext > td {
  page-break-inside: auto;
  break-inside: auto;
  page-break-before: auto;
  break-before: auto;
}
.tilbud-view.pdf-paged table.lines tr.info-row-pagebreak {
  page-break-before: always;
  break-before: page;
}

/* --- Kolonnebredder: .sum-table (60 / fleks / 140) --- */
.tilbud-view.pdf-paged table.sum-table tr > *:nth-child(1) { flex: 0 0 60px; }
.tilbud-view.pdf-paged table.sum-table tr > *:nth-child(2) { flex: 1 1 auto; min-width: 0; }
.tilbud-view.pdf-paged table.sum-table tr > *:nth-child(3) { flex: 0 0 140px; }
.tilbud-view.pdf-paged table.sum-table tr.sum-total-row > td:nth-child(1) { flex: 1 1 auto; }
.tilbud-view.pdf-paged table.sum-table tr.sum-total-row > td:nth-child(2) { flex: 0 0 140px; }

.tilbud-view .totals-row td {
  border-top: 1px solid var(--rule);
  font-weight: 600;
  padding: 12px 10px;
  font-size: 14px;
  background: var(--paper);
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
}
.tilbud-view .grand-row td {
  background: #1E293B;
  color: #FFFFFF;
  padding: 16px 10px;
  font-family: var(--font-display);
  font-size: 22px;
  font-weight: 700;
  text-transform: none;
  letter-spacing: -.01em;
  border-top: none;
}

.tilbud-view .forbehold {
  margin-top: 38px;
  font-size: 12px;
  line-height: 1.65;
}
.tilbud-view .forbehold h3 {
  font-family: var(--font-display);
  font-style: italic;
  font-size: 19px;
  font-weight: 500;
  margin: 0 0 12px;
  padding-bottom: 8px;
  border-bottom: 1px solid var(--rule);
  text-transform: none;
  letter-spacing: -.005em;
  color: var(--ink);
}
.tilbud-view .forbehold ul {
  padding-left: 22px;
  margin: 8px 0;
}
.tilbud-view .forbehold li {
  margin-bottom: 5px;
}

.tilbud-view .signature {
  margin-top: 36px;
  font-size: 11px;
}
.tilbud-view .signature .esig {
  display: flex; align-items: center; gap: 16px;
  border: 1px solid var(--rule);
  border-left: 3px solid #1E293B;
  border-radius: var(--r-sm);
  padding: 13px 18px;
  background: var(--paper);
  max-width: 380px;
}
.tilbud-view .signature .esig-sign {
  flex-shrink: 0;
  padding-right: 16px;
  border-right: 1px dashed var(--rule);
  text-align: center;
  min-width: 118px;
}
.tilbud-view .signature .esig-name {
  font-family: "Times New Roman", Times, serif;
  font-style: italic;
  font-size: 22px;
  line-height: 1;
  color: var(--ink);
  font-weight: 400;
  letter-spacing: .5px;
  display: inline-block;
  padding: 4px 6px 0;
  transform: rotate(-3deg);
  transform-origin: center;
}
.tilbud-view .signature .esig-flourish {
  display: block;
  width: 105px; height: 9px;
  margin: -2px auto 0;
  opacity: .6;
}
.tilbud-view .signature .esig-info {
  flex: 1;
  font-size: 10px;
  color: var(--ink-soft);
  line-height: 1.6;
}
.tilbud-view .signature .esig-badge {
  display: inline-flex; align-items: center;
  background: #EEF2F7;
  color: #1E293B;
  border: 1px solid #CBD5E1;
  border-radius: 999px;
  padding: 2px 10px;
  font-family: var(--font-sans);
  font-size: 10px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .08em;
  margin-bottom: 10px;
}
.tilbud-view .signature .esig-check {
  display: inline-block;
  width: 11px; height: 11px;
  background: #1E293B;
  color: #fff;
  font-size: 8px;
  line-height: 11px;
  text-align: center;
  font-weight: 700;
  margin-right: 5px;
  border-radius: 50%;
}
.tilbud-view .signature .esig-row {
  display: grid;
  grid-template-columns: 82px 1fr;
  gap: 6px;
  padding: 2px 0;
  font-size: 10px;
}
.tilbud-view .signature .esig-row span {
  color: var(--steel);
  font-family: var(--font-sans);
  text-transform: uppercase;
  letter-spacing: .06em;
  font-weight: 600;
}
.tilbud-view .signature .esig-row strong {
  color: var(--ink);
  font-weight: 600;
  font-family: var(--font-mono);
}

/* ===== Drag-and-drop overlay ===== */
.drop-overlay {
  display: none;
  position: fixed; inset: 0;
  background: rgba(184,92,46,.12);
  border: 4px solid var(--orange);
  border-radius: 0;
  z-index: 1000;
  pointer-events: none;
  align-items: center; justify-content: center;
  animation: dropFade .15s ease;
}
@keyframes dropFade { from { opacity: 0; } to { opacity: 1; } }
.drop-overlay.show { display: flex; }
.drop-overlay-content {
  background: var(--paper-3);
  color: var(--ink);
  padding: 48px 64px;
  text-align: center;
  border: 1px solid var(--rule);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-lg);
}
.drop-overlay-icon {
  font-family: var(--font-display);
  font-size: 72px;
  color: var(--orange);
  margin-bottom: 16px;
  line-height: 1;
  font-weight: 400;
}
.drop-overlay h3 {
  margin: 0 0 12px;
  font-family: var(--font-display);
  font-style: italic;
  font-size: 28px;
  font-weight: 500;
  color: var(--ink);
  text-transform: none;
  letter-spacing: -.015em;
}
.drop-overlay p {
  margin: 0;
  color: var(--steel);
  font-size: 13px;
}
.drop-overlay p strong {
  color: var(--orange-deep);
  font-weight: 600;
}

/* ===== Modal ===== */
.modal-bg {
  display: none;
  position: fixed; inset: 0;
  background: rgba(27,24,20,.40);
  backdrop-filter: blur(3px);
  z-index: 260; /* over prosjektpanelet (.pm-panel-bg, 250) — modaler åpnes også derfra */
  align-items: center; justify-content: center;
  animation: fadeIn .15s ease;
}
.modal-bg.show { display: flex; }
.modal {
  background: var(--paper-3);
  border: 1px solid var(--rule);
  border-radius: var(--r-lg);
  padding: 32px;
  width: 520px; max-width: 90vw;
  position: relative;
  box-shadow: var(--shadow-lg);
  animation: modalIn .2s cubic-bezier(.2,.8,.2,1);
}
@keyframes modalIn {
  from { opacity: 0; transform: scale(.98) translateY(8px); }
  to { opacity: 1; transform: scale(1) translateY(0); }
}
.modal::before {
  content: none;
}
.modal h3 {
  margin: 0 0 20px;
  font-family: var(--font-display);
  font-style: italic;
  font-size: 24px;
  font-weight: 500;
  letter-spacing: -.015em;
  text-transform: none;
  color: var(--ink);
}
.modal .form-row { margin-bottom: 16px; }
.modal label {
  font-family: var(--font-sans);
  font-size: 11px;
  color: var(--steel);
  font-weight: 600;
  display: block;
  margin-bottom: 6px;
  text-transform: uppercase;
  letter-spacing: .06em;
}
.modal input,
.modal select,
.modal textarea {
  width: 100%;
  border: 1px solid var(--rule);
  border-radius: var(--r-sm);
  padding: 10px 12px;
  font-size: 14px;
  background: var(--paper-3);
  font-family: var(--font-sans);
  transition: all .15s ease;
}
.modal input:focus,
.modal select:focus,
.modal textarea:focus {
  outline: none;
  border-color: var(--orange);
  box-shadow: 0 0 0 3px rgba(184,92,46,.10);
}
.modal .actions {
  display: flex; gap: 8px;
  justify-content: flex-end;
  margin-top: 24px;
}
.modal .actions button {
  border: 1px solid var(--rule);
  border-radius: var(--r-md);
  background: var(--paper-3);
  padding: 10px 20px;
  font-family: var(--font-sans);
  font-size: 13px;
  font-weight: 500;
  text-transform: none;
  letter-spacing: 0;
  color: var(--ink);
  transition: all .12s ease;
}
.modal .actions button:hover {
  background: var(--concrete);
}
.modal .actions button.primary {
  background: var(--orange);
  border-color: var(--orange);
  color: #fff;
  font-weight: 600;
}
.modal .actions button.primary:hover {
  background: var(--orange-deep);
  border-color: var(--orange-deep);
}
.modal .actions button.danger {
  background: var(--paper-3);
  border-color: var(--danger);
  color: var(--danger);
}
.modal .actions button.danger:hover {
  background: var(--danger);
  color: #fff;
}
.modal .actions button[disabled] {
  opacity: .4;
  cursor: not-allowed;
}

/* ===== Valg-dialog (restore m.m.) ===== */
/* Postkalkulator: lokal kladd i eksisterende bibliotek-/prosjektmodal. */
.modal.pc-modal { max-height: 90vh; overflow-y: auto; }
.pc-library-tools { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin: 12px 0; }
.pc-library-tools button, .pc-rate-actions button, .pc-apply button {
  border: 1px solid var(--rule); border-radius: var(--r-sm); padding: 9px 12px;
  background: var(--paper-3); color: var(--ink); font: inherit; cursor: pointer;
}
.pc-library-tools button:hover, .pc-rate-actions button:hover { background: var(--concrete); }
.pc-editor { margin-top: 20px; border-top: 1px solid var(--rule); padding-top: 16px; }
.pc-editor h4 { margin: 0 0 10px; font-size: 18px; color: var(--ink); }
.pc-hint, .pc-library-status, .pc-row-status { color: var(--steel); font-size: 12px; line-height: 1.5; }
.pc-library-status { margin-top: 4px; }
.pc-fields { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px 16px; margin: 18px 0; }
.pc-editor label { text-transform: none; letter-spacing: normal; font-size: 12px; }
.pc-editor input, .pc-editor textarea { font-size: 16px; min-width: 0; box-sizing: border-box; }
.pc-editor input[aria-invalid="true"] { border-color: var(--danger); }
.pc-rate-actions, .pc-apply { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin: 12px 0; }
.pc-table { width: 100%; border-collapse: collapse; table-layout: fixed; }
.pc-table th, .pc-table td { padding: 10px 6px; text-align: left; border-bottom: 1px solid var(--rule); overflow-wrap: anywhere; }
.pc-table th { font-size: 12px; color: var(--steel); font-weight: 600; }
.pc-table th:first-child { width: 32%; }
.pc-table th:nth-child(2) { width: 20%; }
.pc-table th:nth-child(3) { width: 26%; }
.pc-table td:last-child, .pc-table th:last-child { text-align: right; font-variant-numeric: tabular-nums; }
.pc-table small { display: block; font-size: 11px; color: var(--steel); }
.pc-table label { margin: 0; }
.pc-note-label { margin-top: 18px; }
.pc-resource { padding: 14px 0; border-bottom: 1px solid var(--rule); }
.pc-resource-head { display: flex; gap: 12px; align-items: center; }
.pc-resource-head label { flex: 1; min-width: 0; }
.pc-resource-head button { background: transparent; color: var(--danger); border: 1px solid var(--rule); padding: 8px; cursor: pointer; border-radius: var(--r-sm); }
.pc-resource-fields { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; margin-top: 8px; }
.pc-resource-fields select { font-size: 14px; box-sizing: border-box; }
.pc-resource-sum { text-align: right; color: var(--ink); font-variant-numeric: tabular-nums; font-size: 13px; }
@media (max-width: 800px) { .pc-resource-fields { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.pc-result { display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap; align-items: center; background: var(--concrete); border-radius: var(--r-sm); padding: 16px; }
.pc-result strong { display: block; font-size: 25px; color: var(--orange-deep); font-variant-numeric: tabular-nums; }
.pc-result > span:last-child { max-width: 280px; font-size: 13px; }
.pc-error { color: var(--danger); font-size: 12px; line-height: 1.5; margin: 10px 0; }
.pc-apply button.primary { background: var(--orange); border-color: var(--orange); color: #fff; }
.pc-apply button:disabled { opacity: .45; cursor: not-allowed; }
.pc-row-button { border: 0; border-bottom: 1px dotted var(--orange); background: transparent; color: var(--orange-deep); cursor: pointer; font-size: 11px; padding: 3px 0; margin-right: 8px; }
.pc-row-status { font-size: 11px; }
@media (max-width: 600px) {
  .modal.pc-modal { padding: 18px; }
  .pc-fields { grid-template-columns: 1fr; }
  .pc-table thead { display: none; }
  .pc-table tr { display: grid; grid-template-columns: 1fr 1fr; gap: 6px 14px; padding: 12px 0; border-bottom: 1px solid var(--rule); }
  .pc-table td { border: 0; padding: 0; }
  .pc-table td:first-child, .pc-table td:last-child { grid-column: 1 / -1; }
  .pc-table td:last-child::before { content: "Sum kr: "; }
  .pc-rate-actions button, .pc-apply button, .pc-library-tools button { min-height: 44px; }
}

.choice-intro {
  font-size: 13px;
  color: var(--ink);
  line-height: 1.5;
  margin: -8px 0 16px;
}
.choice-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.choice-btn {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 3px;
  width: 100%;
  text-align: left;
  padding: 12px 14px;
  border: 1px solid var(--rule);
  border-radius: var(--r-md);
  background: var(--paper-3);
  cursor: pointer;
  font-family: var(--font-sans);
  text-transform: none;
  letter-spacing: 0;
  transition: all .12s ease;
}
.choice-btn:hover {
  border-color: var(--orange);
  background: var(--concrete);
}
.choice-btn.primary {
  border-color: var(--orange);
}
.choice-btn.danger {
  border-color: var(--danger);
}
.choice-btn.danger:hover {
  background: var(--danger);
}
.choice-btn.danger:hover .choice-label,
.choice-btn.danger:hover .choice-desc {
  color: #fff;
}
.choice-label {
  font-size: 14px;
  font-weight: 700;
  color: var(--ink);
}
.choice-btn.danger .choice-label { color: var(--danger); }
.choice-desc {
  font-size: 12px;
  color: var(--ink-soft, #6b7280);
  line-height: 1.4;
}

/* ===== Signatør-administrasjon ===== */
.signer-list {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.signer-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 9px 12px;
  border: 1px solid var(--rule);
  border-radius: var(--r-md);
  background: var(--paper-3);
}
.signer-row-name {
  font-size: 14px;
  font-weight: 600;
  color: var(--ink);
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
.signer-default-tag {
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .04em;
  color: var(--orange);
  border: 1px solid var(--orange);
  border-radius: 99px;
  padding: 1px 8px;
}
.signer-del {
  background: none;
  border: none;
  cursor: pointer;
  font-size: 14px;
  padding: 4px 6px;
  border-radius: var(--r-sm, 4px);
  opacity: .6;
  transition: all .12s ease;
}
.signer-del:hover {
  opacity: 1;
  background: var(--danger);
}
.signer-empty {
  font-size: 13px;
  color: var(--ink-soft, #6b7280);
  font-style: italic;
  padding: 10px 2px;
}

/* ===== Volumberegner ===== */
.vol-tabs {
  display: flex; gap: 0;
  margin-bottom: 20px;
  border-bottom: 1px solid var(--rule);
}
.vol-tab {
  background: transparent;
  border: none;
  border-radius: 0;
  padding: 10px 20px;
  font-family: var(--font-sans);
  font-size: 13px;
  font-weight: 500;
  color: var(--steel);
  text-transform: none;
  letter-spacing: 0;
  position: relative;
}
.vol-tab:hover { color: var(--ink); }
.vol-tab.active {
  color: var(--ink);
  background: transparent;
  font-weight: 600;
  box-shadow: inset 0 -2px 0 var(--orange);
}
.vol-presets {
  display: flex; flex-wrap: wrap; gap: 6px;
  margin-bottom: 18px;
}
.vol-preset {
  background: var(--paper-2);
  border: 1px solid var(--rule);
  border-radius: 999px;
  color: var(--ink-soft);
  padding: 6px 14px;
  font-family: var(--font-sans);
  font-size: 12px;
  font-weight: 500;
  text-transform: none;
  letter-spacing: 0;
  cursor: pointer;
  transition: all .12s ease;
}
.vol-preset:hover {
  background: var(--concrete);
}
.vol-preset.active {
  background: var(--orange);
  border-color: var(--orange);
  color: #fff;
  font-weight: 600;
}
.vol-grid {
  display: grid; grid-template-columns: 1fr 1fr;
  gap: 16px 18px;
  margin-bottom: 10px;
}
.vol-grid label {
  font-family: var(--font-sans);
  font-size: 11px;
  color: var(--steel);
  font-weight: 600;
  display: block;
  margin-bottom: 6px;
  text-transform: uppercase;
  letter-spacing: .06em;
}
.vol-grid input {
  width: 100%;
  border: 1px solid var(--rule);
  border-radius: var(--r-sm);
  padding: 10px 12px;
  font-size: 14px;
  font-family: var(--font-mono);
  background: var(--paper-3);
  transition: all .15s ease;
}
.vol-grid input:focus {
  outline: none;
  border-color: var(--orange);
  box-shadow: 0 0 0 3px rgba(184,92,46,.10);
}
.vol-result {
  background: var(--paper);
  color: var(--ink);
  border: 1px solid var(--rule);
  border-radius: var(--r-md);
  padding: 20px 24px;
  margin-top: 22px;
}
.vol-result-main {
  display: flex; align-items: baseline; justify-content: space-between;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--rule);
  margin-bottom: 12px;
}
.vol-result-label {
  font-family: var(--font-sans);
  font-size: 12px;
  color: var(--steel);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .08em;
}
.vol-result-value {
  font-family: var(--font-display);
  font-style: italic;
  font-size: 36px;
  font-weight: 500;
  color: var(--orange-deep);
  letter-spacing: -.015em;
}
.vol-result-row {
  display: flex; justify-content: space-between;
  font-size: 13px;
  color: var(--ink-soft);
  padding: 4px 0;
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
}
/* ===== Volumberegner: snitt-tegning ===== */
.vol-fig-wrap {
  margin-top: 16px;
  background: var(--paper-2);
  border: 1px solid var(--rule);
  border-radius: var(--r-lg);
  padding: 10px 10px 8px;
}
.vol-fig { display: block; width: 100%; height: auto; }
.vol-fig-cap {
  font-family: var(--font-mono);
  font-size: 10.5px; color: var(--steel);
  text-align: center; padding-top: 4px;
  letter-spacing: .02em;
}
.vol-fig-cap strong { color: var(--ink); font-weight: 700; }
.vol-fig-cap-ghost { color: var(--orange-deep); font-style: italic; }
/* Eksempelform: figuren tegnes med demo-mål så man ser formen før noe er
   fylt inn. Dempes så den ikke forveksles med et ekte resultat. */
.vol-fig.vf-ghost { opacity: .62; }
.vol-fig.vf-ghost .vf-dimtxt,
.vol-fig.vf-ghost .vf-plan-num { fill: var(--steel); }
/* Terreng, utgraving og målsetting */
.vf-hatch  { stroke: #B7C2D0; stroke-width: 1; }
.vf-soil   { fill: url(#volHatch); stroke: none; }
.vf-ground { stroke: var(--ink); stroke-width: 2; stroke-linecap: round; }
.vf-cut {
  fill: #FFFFFF; stroke: var(--orange); stroke-width: 2;
  stroke-linejoin: round; stroke-linecap: round;
}
.vf-dim  { stroke: var(--ink-soft); stroke-width: 1; }
.vf-tick { stroke: var(--ink-soft); stroke-width: 1.4; }
.vf-dimtxt {
  font-family: var(--font-mono); font-size: 10.5px;
  fill: var(--ink); font-weight: 600;
}
.vf-slope {
  fill: none; stroke: var(--orange-deep);
  stroke-width: 1.4; stroke-dasharray: 3 2;
}
.vf-slopetxt {
  font-family: var(--font-mono); font-size: 10px;
  fill: var(--orange-deep); font-weight: 700;
}
/* Plan: topp-omriss = utslaget i terrenget, bunn-rektangel = gravebunnen.
   Området mellom dem ER de fire skråningene. */
.vf-plan-top {
  fill: url(#volHatch); stroke: var(--orange);
  stroke-width: 1.4; stroke-dasharray: 5 3;
}
.vf-plan-bot { fill: #FFFFFF; stroke: var(--ink); stroke-width: 1.6; }
.vf-plan-diag { stroke: var(--orange); stroke-width: 1; opacity: .55; }
.vf-plan-lbl {
  font-family: var(--font-mono); font-size: 7.5px;
  fill: var(--steel); font-weight: 700; letter-spacing: .08em;
}
.vf-plan-num {
  font-family: var(--font-mono); font-size: 10px;
  fill: var(--ink); font-weight: 700;
}
.vf-title {
  font-family: var(--font-mono); font-size: 9px;
  fill: var(--steel); font-weight: 700;
  letter-spacing: .12em; text-transform: uppercase;
}
.vf-divider { stroke: var(--rule); stroke-width: 1; stroke-dasharray: 2 3; }

.vol-result-empty {
  background: var(--paper-2);
  border: 1px dashed var(--rule);
  border-radius: var(--r-md);
  padding: 24px;
  text-align: center;
  color: var(--steel);
  font-size: 13px;
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 400;
  text-transform: none;
  letter-spacing: 0;
  margin-top: 22px;
}

/* ===== Prosjektstyring-view ===== */
.pm-view {
  display: none;
  height: calc(100vh - var(--chrome-h));
  background: var(--paper);
}
body.view-pm .app,
body.view-pm .totals { display: none !important; }
body.view-pm .pm-view { display: block; }
body.view-pm { background: var(--paper); }

/* ===== Firma-visning (hele bedriften) ===== */
/* Topbar-dropdownen er erstattet av Firma-visningen — skjul den (overstyrer
   .company-menu sin display: flex; elementene blir værende for eksisterende wiring). */
.company-menu[hidden] { display: none; }
.view-toggle .vt-sep {
  width: 1px; align-self: stretch;
  margin: 4px 4px; background: #334155;
}
/* ============================================================
   FIRMA-DASHBORD
   ============================================================
   Egen visuell identitet — bevisst løsrevet fra resten av
   Anbudssmia (lyst «papir»-tema). Mørkt panel som flyter ut av
   den mørke topbaren, med glass-kort og oransje aksent.
   ALT er scopet under .cv-dash / body.view-company, så
   kalkylen og prosjektstyringen er helt uberørt.
   ============================================================ */
.company-view {
  display: none;
  height: calc(100vh - var(--chrome-h));
  overflow-y: auto;
}
body.view-company .app,
body.view-company .totals { display: none !important; }
body.view-company .company-view { display: block; }

/* Mørk skall-bakgrunn — henger sammen med topbaren (#1E293B) */
body.view-company { background: #0B1220; }
body.view-company .company-view {
  background:
    radial-gradient(900px 460px at 12% -8%, rgba(249,115,22,.14), transparent 62%),
    radial-gradient(760px 420px at 88% 4%, rgba(56,120,220,.13), transparent 60%),
    linear-gradient(180deg, #101A2C 0%, #0B1220 46%);
}
/* Verktøylinja mellom topbar og dashbord gjøres mørk, ellers ligger det
   en lys stripe midt i det mørke skallet. */
body.view-company .toolbar {
  background: #16213A; border-bottom-color: rgba(255,255,255,.08); color: #CBD5E1;
}
body.view-company .toolbar .tg-label { color: #7E8CA5; }
body.view-company .toolbar button {
  background: rgba(255,255,255,.05); border-color: rgba(255,255,255,.12); color: #CBD5E1;
}
body.view-company .toolbar button:hover {
  background: rgba(249,115,22,.16); border-color: rgba(249,115,22,.5); color: #FDBA74;
}
body.view-company .toolbar-sep { background: rgba(255,255,255,.1); }

.cv-dash {
  /* Dashbordets egen palett */
  --d-accent:   #F97316;
  --d-accent-2: #FDBA74;
  --d-text:     #EEF3FA;
  --d-muted:    #93A3BC;
  --d-faint:    #6B7C97;
  --d-line:     rgba(255,255,255,.09);
  --d-line-2:   rgba(255,255,255,.15);
  --d-card:     rgba(255,255,255,.045);
  --d-card-2:   rgba(255,255,255,.075);

  max-width: 1240px; margin: 0 auto;
  padding: 26px 30px 72px;
  color: var(--d-text);
  font-family: var(--font-sans);
}

/* ---------- Hero: firmaidentitet + firmaopplysninger ---------- */
.cv-hero {
  position: relative; overflow: hidden;
  border: 1px solid var(--d-line-2);
  border-radius: 18px;
  background:
    linear-gradient(135deg, rgba(249,115,22,.16) 0%, rgba(249,115,22,0) 42%),
    linear-gradient(180deg, rgba(255,255,255,.085), rgba(255,255,255,.03));
  box-shadow: 0 18px 48px rgba(0,0,0,.42), inset 0 1px 0 rgba(255,255,255,.12);
  padding: 22px 24px;
  margin-bottom: 18px;
}
/* Tynn lysende kant på toppen */
.cv-hero::before {
  content: ""; position: absolute; inset: 0 0 auto 0; height: 1px;
  background: linear-gradient(90deg, transparent, rgba(249,115,22,.85), transparent);
}
.cv-hero-body { display: flex; align-items: center; gap: 18px; }
.cv-logo-tile {
  width: 76px; height: 76px; flex: none;
  border-radius: 14px; overflow: hidden;
  background: #fff; border: 1px solid var(--d-line-2);
  box-shadow: 0 8px 22px rgba(0,0,0,.34);
  display: flex; align-items: center; justify-content: center;
}
.cv-logo-tile img { max-width: 100%; max-height: 100%; object-fit: contain; }
.cv-hero-text { min-width: 0; flex: 1; }
.cv-hero-eyebrow {
  font-family: var(--font-mono); font-size: 10px;
  text-transform: uppercase; letter-spacing: .18em;
  color: var(--d-accent-2); margin-bottom: 5px;
}
.cv-hero-name {
  font-family: var(--font-display);
  font-size: 30px; font-weight: 700; letter-spacing: -.015em;
  color: #fff; margin: 0 0 6px;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.cv-hero-meta {
  font-size: 12.5px; color: var(--d-muted); line-height: 1.6;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.cv-edit-note {
  font-family: var(--font-mono); font-size: 11px;
  color: var(--d-accent-2); margin-bottom: 12px;
}
#cvCoEdit {
  margin-top: 20px; padding-top: 18px;
  border-top: 1px solid var(--d-line);
}
#cvCoEdit[hidden] { display: none; }
.cv-logo-actions { display: flex; gap: 8px; margin-bottom: 16px; }

/* ---------- Knapper ---------- */
.cv-btn {
  font-family: var(--font-mono); font-size: 11.5px; font-weight: 600;
  letter-spacing: .02em; white-space: nowrap;
  padding: 8px 15px; border-radius: 9px; cursor: pointer;
  border: 1px solid var(--d-line-2);
  background: rgba(255,255,255,.06); color: var(--d-text);
  transition: background .16s ease, border-color .16s ease, color .16s ease, transform .16s ease;
}
.cv-btn:hover {
  background: rgba(249,115,22,.18); border-color: rgba(249,115,22,.55);
  color: var(--d-accent-2); transform: translateY(-1px);
}
.cv-btn-primary {
  background: linear-gradient(180deg, #F97316, #EA6407);
  border-color: #F97316; color: #fff;
  box-shadow: 0 6px 18px rgba(249,115,22,.32);
}
.cv-btn-primary:hover {
  background: linear-gradient(180deg, #FB8534, #F97316);
  border-color: #FDBA74; color: #fff;
}

/* ---------- Kort ---------- */
.cv-card {
  position: relative;
  border: 1px solid var(--d-line);
  border-radius: 16px;
  background: linear-gradient(180deg, var(--d-card-2), var(--d-card));
  box-shadow: 0 12px 34px rgba(0,0,0,.3), inset 0 1px 0 rgba(255,255,255,.07);
  padding: 20px 22px;
  transition: border-color .18s ease, box-shadow .18s ease;
}
.cv-card:hover { border-color: var(--d-line-2); }
.cv-card-note { margin-bottom: 18px; }
.cv-card-title {
  display: flex; align-items: center; gap: 10px;
  font-family: var(--font-mono);
  font-size: 11px; font-weight: 700;
  text-transform: uppercase; letter-spacing: .14em;
  color: var(--d-text); margin-bottom: 15px;
}
.cv-card-title .cv-hint {
  font-family: var(--font-mono); font-size: 10px;
  letter-spacing: .06em; text-transform: none;
  color: var(--d-faint); font-weight: 400;
}

.cv-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr);
  gap: 18px; align-items: start;
}
@media (max-width: 1080px) {
  .cv-grid { grid-template-columns: minmax(0, 1fr); }
}

/* ---------- Hovednotat ---------- */
.cv-note-area {
  width: 100%; box-sizing: border-box;
  border: 1px solid var(--d-line);
  border-left: 3px solid var(--d-accent);
  border-radius: 4px 12px 12px 4px;
  padding: 14px 16px;
  font-size: 14px; line-height: 1.75;
  font-family: var(--font-sans);
  color: var(--d-text);
  background: rgba(0,0,0,.24);
  /* Høyden settes av JS (growMainNote) etter innholdet. min/max holder den
     lesbar: aldri lavere enn ~6 linjer, aldri høyere enn 70 % av skjermen —
     da tar feltet over med egen scroll i stedet for å sluke dashbordet. */
  resize: vertical; min-height: 132px; max-height: 70vh;
  overflow-y: auto;
  transition: border-color .16s ease, box-shadow .16s ease, background .16s ease;
}
.cv-note-area::placeholder { color: var(--d-faint); }
.cv-note-area:focus {
  outline: none; border-color: var(--d-accent);
  background: rgba(0,0,0,.34);
  box-shadow: 0 0 0 3px rgba(249,115,22,.16);
}

/* ---------- Firmaopplysninger: skjema ---------- */
.cv-fields {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
  gap: 14px 18px;
}
.cv-field { display: flex; flex-direction: column; gap: 5px; }
.cv-field label {
  font-family: var(--font-mono);
  font-size: 10px; text-transform: uppercase;
  letter-spacing: .13em; color: var(--d-faint);
}
.cv-field input {
  border: 1px solid var(--d-line-2);
  border-radius: 9px;
  padding: 9px 12px; font-size: 13.5px;
  font-family: var(--font-sans);
  background: rgba(0,0,0,.26); color: var(--d-text);
  transition: border-color .16s ease, box-shadow .16s ease;
}
.cv-field input:focus {
  outline: none; border-color: var(--d-accent);
  box-shadow: 0 0 0 3px rgba(249,115,22,.16);
}

/* ---------- Prosjektoversikt ---------- */
.cv-pills { display: flex; flex-wrap: wrap; gap: 7px; margin-bottom: 16px; }
.cv-pill {
  display: inline-flex; align-items: center; gap: 7px;
  font-family: var(--font-mono); font-size: 11px; font-weight: 700;
  letter-spacing: .04em;
  padding: 7px 13px; border-radius: 999px; cursor: pointer;
  border: 1px solid color-mix(in srgb, var(--pill, #94A3B8) 45%, transparent);
  background: color-mix(in srgb, var(--pill, #94A3B8) 14%, transparent);
  color: color-mix(in srgb, var(--pill, #CBD5E1) 72%, #ffffff);
  transition: background .16s ease, box-shadow .16s ease, transform .16s ease;
}
.cv-pill:hover {
  background: color-mix(in srgb, var(--pill, #94A3B8) 26%, transparent);
  box-shadow: 0 5px 16px color-mix(in srgb, var(--pill, #94A3B8) 30%, transparent);
  transform: translateY(-1px);
}
.cv-pill-n {
  font-size: 11px; opacity: .95; padding-left: 7px;
  border-left: 1px solid color-mix(in srgb, var(--pill, #94A3B8) 40%, transparent);
}
.cv-sub {
  font-family: var(--font-mono); font-size: 9.5px;
  text-transform: uppercase; letter-spacing: .16em; color: var(--d-faint);
  margin: 16px 0 7px;
}
.cv-sub:first-of-type { margin-top: 4px; }
.cv-proj-list { display: flex; flex-direction: column; gap: 3px; }
.cv-proj-row {
  display: grid;
  grid-template-columns: 10px minmax(0, 1.45fr) minmax(0, 1fr) auto;
  align-items: center; gap: 12px;
  width: 100%; text-align: left; cursor: pointer;
  padding: 10px 12px;
  border: 1px solid transparent; border-radius: 11px;
  background: rgba(255,255,255,.02);
  font-family: var(--font-sans);
  transition: background .15s ease, border-color .15s ease, transform .15s ease;
}
.cv-proj-row:hover {
  background: rgba(255,255,255,.08);
  border-color: var(--d-line-2);
  transform: translateX(3px);
}
.cv-proj-dot {
  width: 9px; height: 9px; border-radius: 50%;
  box-shadow: 0 0 0 3px rgba(255,255,255,.08);
}
.cv-proj-name {
  font-size: 13.5px; font-weight: 600; color: var(--d-text);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.cv-proj-cust {
  font-size: 12px; color: var(--d-muted);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.cv-proj-sum {
  font-family: var(--font-mono); font-size: 12px;
  color: var(--d-accent-2); font-weight: 700; white-space: nowrap;
}

/* ---------- Prosjektnotater ---------- */
.cv-projnote-add {
  display: flex; flex-direction: column; gap: 9px;
  padding: 14px; margin-bottom: 16px;
  border: 1px solid var(--d-line);
  border-radius: 13px;
  background: rgba(0,0,0,.2);
}
.cv-proj-select {
  align-self: stretch;
  border: 1px solid var(--d-line-2); border-radius: 9px;
  padding: 8px 11px; font-size: 12.5px;
  font-family: var(--font-sans);
  background: rgba(0,0,0,.3); color: var(--d-text);
  max-width: 100%;
}
.cv-proj-select:focus { outline: none; border-color: var(--d-accent); }
.cv-projnote-add textarea {
  width: 100%; box-sizing: border-box;
  border: 1px solid var(--d-line-2); border-radius: 9px;
  padding: 10px 12px; font-size: 13.5px; line-height: 1.6;
  font-family: var(--font-sans);
  background: rgba(0,0,0,.3); color: var(--d-text);
  resize: vertical; min-height: 62px;
  transition: border-color .16s ease, box-shadow .16s ease;
}
.cv-projnote-add textarea::placeholder { color: var(--d-faint); }
.cv-projnote-add textarea:focus {
  outline: none; border-color: var(--d-accent);
  box-shadow: 0 0 0 3px rgba(249,115,22,.16);
}
.cv-projnote-add .cv-btn { align-self: flex-end; }

.cv-note-list { display: flex; flex-direction: column; gap: 9px; }
.cv-note {
  border: 1px solid var(--d-line);
  border-left: 3px solid var(--d-accent);
  border-radius: 4px 12px 12px 4px;
  background: rgba(255,255,255,.035);
  padding: 12px 15px;
  transition: background .16s ease, border-color .16s ease;
}
.cv-note:hover { background: rgba(255,255,255,.07); }
.cv-note-head {
  display: flex; align-items: center; gap: 9px;
  margin-bottom: 8px;
}
.cv-note-date {
  font-family: var(--font-mono); font-size: 10.5px;
  color: var(--d-accent-2); font-weight: 700; white-space: nowrap;
}
.cv-proj-chip {
  font-family: var(--font-mono); font-size: 9.5px;
  letter-spacing: .05em;
  padding: 3px 9px; border-radius: 999px;
  background: rgba(255,255,255,.08);
  border: 1px solid var(--d-line-2);
  color: var(--d-muted);
  max-width: 190px;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.cv-note-edited {
  font-family: var(--font-mono); font-size: 9px;
  color: var(--d-faint); font-style: italic;
}
/* Rediger + slett grupperes til høyre; edit bærer margin-left:auto */
.cv-note-edit, .cv-note-del {
  flex: none;
  width: 22px; height: 22px; line-height: 1;
  border: 1px solid transparent; border-radius: 7px;
  background: none; color: var(--d-faint);
  cursor: pointer;
  transition: all .15s ease;
}
.cv-note-edit { margin-left: auto; font-size: 12px; }
.cv-note-del { font-size: 17px; }
.cv-note-edit:hover {
  background: rgba(249,115,22,.16);
  border-color: rgba(249,115,22,.45);
  color: var(--d-accent-2);
}
.cv-note-del:hover {
  background: rgba(239,68,68,.16);
  border-color: rgba(239,68,68,.45);
  color: #FCA5A5;
}
.cv-note-text {
  font-size: 13.5px; color: #D6E0EE;
  line-height: 1.62; white-space: pre-wrap;
}

.cv-empty {
  font-size: 13px; color: var(--d-faint);
  padding: 18px 4px; text-align: center;
  border: 1px dashed var(--d-line-2); border-radius: 12px;
}

.pm-empty {
  padding: 60px 24px;
  text-align: center;
  color: var(--steel);
  font-size: 15px;
  font-family: var(--font-display);
  font-style: italic;
  text-transform: none;
  letter-spacing: 0;
  font-weight: 400;
}
.pm-empty-mini {
  color: var(--steel-light);
  font-style: italic;
  font-size: 13px;
  padding: 12px 0;
  text-align: center;
}

/* Shell */
/* Én kolonne: statusfilteret og søket ligger nå i topplinja (.pm-main-topbar),
   så det gamle 300 px sidepanelet er borte — det gjentok bare kolonnehodene. */
.pm-shell {
  display: grid;
  grid-template-columns: 1fr;
  height: 100%;
  background: var(--paper);
}

/* Sidebar */
.pm-sidebar {
  background: var(--paper-2);
  border-right: 1px solid var(--rule);
  display: flex; flex-direction: column;
  overflow-y: auto;
  padding-bottom: 20px;
}
.pm-side-head {
  display: flex; align-items: center; justify-content: space-between;
  padding: 22px 22px 14px;
  border-bottom: 1px solid var(--rule);
  background: var(--paper-2);
}
.pm-side-title {
  font-family: var(--font-display);
  font-style: italic;
  font-size: 22px;
  font-weight: 500;
  color: var(--ink);
  text-transform: none;
  letter-spacing: -.01em;
}
.pm-side-new {
  background: var(--orange);
  color: #fff;
  border: none;
  border-radius: 50%;
  width: 32px; height: 32px;
  font-size: 18px;
  font-weight: 500;
  line-height: 1;
  cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center;
  box-shadow: var(--shadow-sm);
  transition: all .12s ease;
}
.pm-side-new:hover {
  background: var(--orange-deep);
  box-shadow: var(--shadow-md);
}
.pm-side-search { padding: 14px 18px 10px; }
.pm-side-search input {
  width: 100%;
  border: 1px solid var(--rule);
  border-radius: var(--r-md);
  padding: 9px 12px;
  font-size: 13px;
  background: var(--paper-3);
  font-family: var(--font-sans);
  transition: all .15s ease;
}
.pm-side-search input:focus {
  outline: none;
  border-color: var(--orange);
  box-shadow: 0 0 0 3px rgba(184,92,46,.10);
}
.pm-side-section { padding: 14px 8px 4px; }
.pm-side-section-title {
  font-family: var(--font-sans);
  font-size: 10px;
  font-weight: 600;
  color: var(--steel);
  text-transform: uppercase;
  letter-spacing: .08em;
  padding: 6px 14px;
}
.pm-side-item {
  width: 100%;
  display: flex; align-items: center; gap: 10px;
  padding: 9px 14px;
  margin: 0;
  background: transparent;
  border: none;
  border-radius: var(--r-md);
  cursor: pointer;
  text-align: left;
  font-size: 13px;
  color: var(--ink-soft);
  border-left: 3px solid transparent;
  transition: background .12s ease, color .12s ease;
}
.pm-side-item:hover {
  background: var(--concrete);
  color: var(--ink);
}
.pm-side-item.active {
  background: var(--orange-faint);
  color: var(--orange-deep);
  border-left-color: var(--orange);
  font-weight: 600;
}
.pm-side-dot {
  width: 8px; height: 8px;
  flex-shrink: 0;
  border-radius: 50%;
}
.pm-side-label {
  flex: 1;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.pm-side-count {
  font-family: var(--font-mono);
  font-size: 10px;
  color: var(--steel);
  font-variant-numeric: tabular-nums;
  background: var(--paper-3);
  padding: 1px 8px;
  font-weight: 600;
  border: 1px solid var(--rule);
  border-radius: 999px;
}
.pm-side-item.active .pm-side-count {
  background: var(--orange);
  color: #fff;
  border-color: var(--orange);
}

/* Main */
.pm-main {
  display: flex; flex-direction: column;
  min-width: 0;
  background: var(--paper);
}
.pm-main-topbar {
  display: flex; align-items: center;
  gap: 10px;
  padding: 9px 16px;
  border-bottom: 1px solid var(--rule);
  background: var(--paper-2);
  flex-wrap: wrap;
}
/* Statusfilter som piller — flyttet hit fra sidepanelet */
.pm-pills { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.pm-pill {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 5px 11px;
  border: 1px solid var(--rule);
  border-radius: 999px;
  background: var(--paper-3);
  color: var(--ink-soft);
  font: inherit; font-size: 12.5px; font-weight: 500;
  cursor: pointer; white-space: nowrap;
  transition: background .12s ease, border-color .12s ease, color .12s ease;
}
.pm-pill:hover { border-color: var(--steel); color: var(--ink); }
.pm-pill.active {
  background: var(--pill-bg, var(--orange-faint));
  border-color: var(--pill, var(--orange));
  color: var(--pill, var(--orange-deep));
  font-weight: 600;
}
.pm-pill-dot { width: 7px; height: 7px; border-radius: 50%; flex: none; }
.pm-pill-n {
  font-family: var(--font-mono); font-size: 10.5px; font-weight: 600;
  font-variant-numeric: tabular-nums; color: var(--steel);
}
.pm-pill.active .pm-pill-n { color: inherit; }
/* Søket lå før i sidepanelet; skyver visningsknappene til høyre */
.pm-top-search {
  margin-left: auto;
  width: 200px; min-width: 130px;
  padding: 6px 10px;
  border: 1px solid var(--rule); border-radius: var(--r-md);
  background: var(--paper-3); color: var(--ink);
  font: inherit; font-size: 12.5px;
}
.pm-top-search:focus { outline: none; border-color: var(--orange); }
.pm-main-title {
  flex: 1; min-width: 200px;
  display: flex; align-items: baseline; gap: 12px;
  padding: 0 24px;
  align-self: center;
}
.pm-main-title h2 {
  margin: 0;
  font-family: var(--font-display);
  font-style: italic;
  font-size: 26px;
  font-weight: 500;
  color: var(--ink);
  letter-spacing: -.015em;
  text-transform: none;
}
.pm-main-count {
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--steel);
}
.pm-main-tabs {
  display: inline-flex;
  align-self: center;
  background: var(--concrete);
  border-radius: 999px;
  padding: 3px;
  gap: 0;
  margin-right: 12px;
}
.pm-tab {
  background: transparent;
  border: none;
  border-radius: 999px;
  color: var(--steel);
  padding: 7px 14px;
  font-family: var(--font-sans);
  font-size: 13px;
  font-weight: 500;
  text-transform: none;
  letter-spacing: 0;
  cursor: pointer;
  transition: all .12s ease;
  display: inline-flex; align-items: center; gap: 6px;
}
.pm-tab:hover { color: var(--ink); }
.pm-tab.active {
  background: var(--paper-3);
  color: var(--ink);
  font-weight: 600;
  box-shadow: var(--shadow-sm);
}
.pm-tab-icon { font-size: 13px; }
.pm-groupby {
  border: 1px solid var(--rule);
  border-radius: var(--r-md);
  padding: 8px 14px;
  font-family: var(--font-sans);
  font-size: 13px;
  background: var(--paper-3);
  color: var(--ink);
  align-self: center;
  cursor: pointer;
  margin-right: 14px;
}
.pm-groupby:focus {
  outline: none;
  border-color: var(--orange);
  box-shadow: 0 0 0 3px rgba(184,92,46,.10);
}
.pm-cal-nav {
  display: inline-flex; align-items: center; gap: 10px;
  padding: 0 18px;
  align-self: center;
  border-left: 1px solid var(--rule);
}
.pm-cal-month {
  font-family: var(--font-display);
  font-style: italic;
  font-size: 18px;
  font-weight: 500;
  color: var(--ink);
  min-width: 160px;
  text-align: center;
  letter-spacing: -.005em;
  text-transform: none;
}

.pm-main-body {
  flex: 1; overflow: auto;
  padding: 28px;
  min-height: 0;
}

/* Kanban board */
.pm-board {
  display: flex; gap: 12px;
  align-items: flex-start;
  min-height: 100%;
}
/* Kolonnene deler den ledige bredden i stedet for å ha fast 320 px — med fem
   statuser falt de to siste utenfor skjermen og måtte dras frem sidelengs.
   min-width holder dem lesbare; blir vinduet smalere enn det, scroller tavla
   som før. */
.pm-col {
  flex: 1 1 0;
  min-width: 190px;
  max-width: 320px;
  background: var(--paper-2);
  border: 1px solid var(--rule);
  border-radius: var(--r-md);
  display: flex; flex-direction: column;
  max-height: 100%;
  overflow: hidden;
  box-shadow: var(--shadow-xs);
}
.pm-col-head {
  display: flex; align-items: center; gap: 10px;
  padding: 14px 16px;
  border-bottom: 1px solid var(--rule);
  background: var(--paper-2);
  position: relative;
}
.pm-col-head::before {
  content: "";
  position: absolute;
  left: 0; right: 0; top: 0;
  height: 3px;
  background: var(--col-color, var(--orange));
}
.pm-col-dot {
  width: 9px; height: 9px;
  flex-shrink: 0;
  background: var(--col-color, var(--steel));
  border-radius: 50%;
}
.pm-col-label {
  flex: 1;
  font-family: var(--font-display);
  font-style: italic;
  font-size: 15px;
  font-weight: 500;
  color: var(--ink);
  text-transform: none;
  letter-spacing: -.005em;
}
.pm-col-count {
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--steel);
  background: var(--paper-3);
  border: 1px solid var(--rule);
  border-radius: 999px;
  padding: 2px 9px;
  font-weight: 500;
  font-variant-numeric: tabular-nums;
}
.pm-col-add {
  background: transparent;
  border: 1px solid var(--rule);
  border-radius: var(--r-sm);
  color: var(--ink-soft);
  width: 26px; height: 26px;
  cursor: pointer;
  font-size: 16px;
  line-height: 1;
  transition: all .12s ease;
}
.pm-col-add:hover {
  background: var(--orange);
  color: #fff;
  border-color: var(--orange);
}
.pm-col-body {
  padding: 14px;
  flex: 1;
  overflow-y: auto;
  min-height: 80px;
}
.pm-col-body.drop-target {
  background: var(--orange-faint);
  outline: 2px dashed var(--orange);
  outline-offset: -4px;
  border-radius: var(--r-sm);
}
.pm-col-empty {
  text-align: center;
  color: var(--steel-light);
  font-family: var(--font-display);
  font-style: italic;
  font-size: 13px;
  font-weight: 400;
  text-transform: none;
  letter-spacing: 0;
  padding: 24px 8px;
}

.pm-year-block { margin-bottom: 12px; }
.pm-year-block:last-child { margin-bottom: 0; }
.pm-year-head {
  width: 100%;
  display: flex; align-items: center; gap: 8px;
  background: var(--paper-3);
  border: 1px solid var(--rule);
  border-radius: var(--r-md);
  cursor: pointer;
  padding: 8px 12px;
  font-family: var(--font-display);
  font-style: italic;
  font-size: 14px;
  font-weight: 500;
  color: var(--ink-soft);
  text-transform: none;
  letter-spacing: 0;
  text-align: left;
  transition: all .12s ease;
}
.pm-year-head:hover { background: var(--paper-2); }
.pm-year-block.open .pm-year-head {
  background: var(--orange-faint);
  border-color: var(--orange);
  color: var(--orange-deep);
  border-bottom-left-radius: 0;
  border-bottom-right-radius: 0;
}
.pm-year-chevron {
  display: inline-block;
  width: 12px;
  color: var(--steel);
  font-size: 10px;
  font-style: normal;
}
.pm-year-block.open .pm-year-chevron { color: var(--orange-deep); }
.pm-year-label {
  flex: 1;
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
  font-weight: 500;
  font-style: normal;
}
.pm-year-count {
  font-family: var(--font-mono);
  font-size: 10px;
  padding: 1px 7px;
  background: var(--paper-2);
  border: 1px solid var(--rule);
  border-radius: 999px;
  color: var(--steel);
  font-weight: 500;
  font-variant-numeric: tabular-nums;
  font-style: normal;
}
.pm-year-block.open .pm-year-count {
  background: var(--orange);
  color: #fff;
  border-color: var(--orange);
}
.pm-year-body { padding-top: 0; }

/* Kanban card */
.pm-card-board {
  position: relative;
  background: var(--paper-3);
  border: 1px solid var(--rule);
  border-radius: var(--r-md);
  padding: 10px 12px 10px 16px;
  margin-bottom: 8px;
  cursor: pointer;
  transition: all .15s ease;
  box-shadow: var(--shadow-xs);
}
.pm-card-board:hover {
  background: var(--paper-2);
  box-shadow: var(--shadow-md);
  transform: translateY(-1px);
  border-color: var(--rule);
}
.pm-card-board.dragging { opacity: .4; }
.pm-card-prio {
  position: absolute; left: 0; top: 12px; bottom: 12px;
  width: 3px;
  border-radius: 999px;
}
.pm-card-title {
  font-size: 14px;
  font-weight: 600;
  color: var(--ink);
  line-height: 1.3;
  margin-bottom: 3px;
}
.pm-card-customer {
  font-size: 12px;
  color: var(--steel);
  margin-bottom: 6px;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.pm-card-tags {
  display: flex; flex-wrap: wrap;
  gap: 4px;
  margin-bottom: 6px;
}
.pm-tag {
  display: inline-block;
  font-family: var(--font-sans);
  font-size: 10px;
  background: var(--orange-faint);
  color: var(--orange-deep);
  padding: 2px 9px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .04em;
  border: 1px solid rgba(184,92,46,.25);
  border-radius: 999px;
}
.pm-card-meta {
  display: flex; flex-wrap: wrap;
  gap: 4px;
  margin-top: 8px;
}
.pm-meta-pill {
  display: inline-flex; align-items: center; gap: 4px;
  font-family: var(--font-mono);
  font-size: 10px;
  padding: 2px 8px;
  background: var(--paper-2);
  color: var(--ink-soft);
  font-weight: 500;
  border: 1px solid var(--rule);
  border-radius: 999px;
}
.pm-meta-pill.warn {
  background: var(--warn-bg);
  color: var(--warn);
  border-color: rgba(154,114,32,.3);
}
.pm-meta-pill.overdue {
  background: var(--danger-bg);
  color: var(--danger);
  border-color: rgba(168,57,44,.3);
}
.pm-meta-pill.soon {
  background: var(--warn-bg);
  color: var(--warn);
  border-color: rgba(154,114,32,.3);
}
/* Underprosjekt PÅ hovedkortet — ikke egne kort, som ville mangedoblet tavla */
.pm-subs {
  display: flex; flex-direction: column; gap: 2px;
  margin-top: 7px; padding-top: 6px;
  border-top: 1px dashed var(--rule);
}
.pm-sub {
  display: flex; align-items: center; gap: 7px;
  width: 100%; padding: 4px 6px;
  border: 1px solid transparent; border-radius: var(--r-sm);
  background: none; cursor: pointer;
  font: inherit; font-size: 12px; color: var(--ink-soft);
  text-align: left;
}
.pm-sub:hover { background: var(--paper-2); border-color: var(--rule); color: var(--ink); }
.pm-sub-dot { width: 7px; height: 7px; border-radius: 50%; flex: none; }
.pm-sub-name {
  flex: 1; min-width: 0;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.pm-sub-sum {
  flex: none; font-family: var(--font-mono); font-size: 11px;
  font-variant-numeric: tabular-nums; color: var(--steel);
}
.pm-sub-add {
  margin-top: 5px; width: 100%; padding: 4px 6px;
  border: 1px dashed var(--rule); border-radius: var(--r-sm);
  background: none; color: var(--steel);
  font: inherit; font-size: 11.5px; cursor: pointer;
  opacity: 0; transition: opacity .12s ease, border-color .12s ease, color .12s ease;
}
/* Vises først når man er innom kortet — ellers står den og maser på hvert eneste kort */
.pm-card-board:hover .pm-sub-add, .pm-sub-add:focus-visible { opacity: 1; }
.pm-sub-add:hover { border-color: var(--orange); color: var(--orange-deep); }

.pm-card-foot {
  display: flex; align-items: baseline; justify-content: flex-end; gap: 8px;
  margin-top: 7px; padding-top: 7px;
  border-top: 1px solid var(--rule-soft);
}
.pm-card-sumlabel {
  margin-right: auto;
  font-size: 10px; font-weight: 600; letter-spacing: .06em;
  text-transform: uppercase; color: var(--steel);
}
.pm-card-sum {
  font-family: var(--font-mono);
  font-size: 13px;
  font-weight: 600;
  color: var(--orange-deep);
  font-variant-numeric: tabular-nums;
}

/* List view */
.pm-list-wrap {
  display: flex; flex-direction: column;
  gap: 0;
}
.pm-list-group {
  background: var(--paper-3);
  border: 1px solid var(--rule);
  border-radius: var(--r-md);
  margin-bottom: 18px;
  overflow: hidden;
  box-shadow: var(--shadow-xs);
}
.pm-list-group-head {
  display: flex; align-items: center; gap: 12px;
  padding: 14px 18px;
  background: var(--paper-2);
  border-bottom: 1px solid var(--rule);
  position: relative;
}
.pm-list-group-head::before {
  content: "";
  position: absolute;
  left: 0; top: 0; bottom: 0;
  width: 3px;
  background: var(--col-color, var(--orange));
}
.pm-list-group-label {
  flex: 1;
  font-family: var(--font-display);
  font-style: italic;
  font-size: 16px;
  font-weight: 500;
  color: var(--ink);
  text-transform: none;
  letter-spacing: -.005em;
}
.pm-list-group-count {
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--steel);
  font-weight: 500;
  background: var(--paper-3);
  border: 1px solid var(--rule);
  border-radius: 999px;
  padding: 2px 9px;
}
.pm-list-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
}
.pm-list-table th {
  text-align: left;
  font-family: var(--font-sans);
  font-size: 10px;
  font-weight: 600;
  color: var(--steel);
  text-transform: uppercase;
  letter-spacing: .08em;
  padding: 10px 16px;
  border-bottom: 1px solid var(--rule);
  background: var(--paper-2);
}
.pm-list-table th.right { text-align: right; }
.pm-list-table td {
  padding: 13px 16px;
  border-bottom: 1px solid var(--rule-soft);
  vertical-align: middle;
}
.pm-list-table td.right {
  text-align: right;
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
}
.pm-list-row {
  cursor: pointer;
  transition: background .12s ease;
}
.pm-list-row:hover { background: var(--paper-2); }
.pm-list-row:last-child td { border-bottom: none; }
.pm-list-name {
  display: flex; align-items: center;
  gap: 10px;
}
.pm-list-pname {
  font-weight: 600;
  color: var(--ink);
}
.pm-list-sum {
  font-family: var(--font-mono);
  font-weight: 600;
  color: var(--orange-deep);
  font-variant-numeric: tabular-nums;
}
.pm-status-pill {
  display: inline-block;
  font-family: var(--font-sans);
  font-size: 10px;
  padding: 2px 10px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .06em;
  border: 1px solid;
  border-radius: 999px;
}
.pm-prio-tag {
  font-size: 12px;
  font-weight: 600;
}
.pm-list-table .overdue {
  color: var(--danger);
  font-weight: 600;
}
.pm-list-table .soon {
  color: var(--warn);
  font-weight: 600;
}

/* Kalender */
.pm-cal {
  background: var(--paper-3);
  border: 1px solid var(--rule);
  border-radius: var(--r-md);
  padding: 0;
  overflow: hidden;
  box-shadow: var(--shadow-xs);
}
.pm-cal-weekdays {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 0;
  background: var(--paper-2);
  border-bottom: 1px solid var(--rule);
}
.pm-cal-wd {
  font-family: var(--font-sans);
  font-size: 11px;
  font-weight: 600;
  color: var(--steel);
  text-transform: uppercase;
  letter-spacing: .08em;
  padding: 10px;
  border-right: 1px solid var(--rule-soft);
  text-align: center;
}
.pm-cal-wd:last-child { border-right: none; }
.pm-cal-grid {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 0;
}
.pm-cal-cell {
  background: var(--paper-3);
  min-height: 120px;
  padding: 8px 10px;
  display: flex; flex-direction: column; gap: 4px;
  border-right: 1px solid var(--rule-soft);
  border-bottom: 1px solid var(--rule-soft);
}
.pm-cal-cell:nth-child(7n) { border-right: none; }
.pm-cal-cell.out { background: var(--paper-2); }
.pm-cal-cell.today {
  background: var(--orange-faint);
  box-shadow: inset 0 0 0 2px var(--orange);
}
.pm-cal-cell.today .pm-cal-day {
  color: var(--orange-deep);
  font-weight: 700;
}
.pm-cal-day {
  font-family: var(--font-mono);
  font-size: 12px;
  font-weight: 600;
  color: var(--ink-soft);
  font-variant-numeric: tabular-nums;
}
.pm-cal-item {
  font-size: 11px;
  padding: 4px 7px;
  border-left: 3px solid;
  border-radius: var(--r-xs);
  background: var(--paper-2);
  cursor: pointer;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  transition: transform .1s ease;
  border-top: 1px solid var(--rule-soft);
  border-right: 1px solid var(--rule-soft);
  border-bottom: 1px solid var(--rule-soft);
}
.pm-cal-item:hover { transform: translateX(2px); }
.pm-cal-icon { margin-right: 3px; }
.pm-cal-more {
  font-family: var(--font-mono);
  font-size: 10px;
  color: var(--steel);
  padding: 0 4px;
}
.pm-cal-legend {
  display: flex; gap: 20px;
  padding: 14px 20px;
  border-top: 1px solid var(--rule);
  background: var(--paper-2);
  font-family: var(--font-sans);
  font-size: 11px;
  font-weight: 500;
  color: var(--steel);
  text-transform: none;
  letter-spacing: 0;
}

/* PM side-panel */
.pm-panel-bg {
  display: none;
  position: fixed; inset: 0;
  background: rgba(27,24,20,.45);
  backdrop-filter: blur(3px);
  z-index: 250;
  animation: fadeIn .15s ease;
  /* Sentrert prosjektpanel (var før en høyre-skuff) */
  align-items: center; justify-content: center;
  padding: 24px;
}
.pm-panel-bg.show { display: flex; }
.pm-panel {
  width: 900px; max-width: 100%;
  max-height: 92vh;
  background: var(--paper);
  display: flex; flex-direction: column;
  border: 1px solid var(--rule);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-lg);
  animation: panelIn .2s cubic-bezier(.2,.8,.2,1);
  overflow: hidden;
}
.pm-panel.instant { animation: none; }
@keyframes panelIn {
  from { transform: translateY(14px) scale(.98); opacity: 0; }
  to { transform: translateY(0) scale(1); opacity: 1; }
}

.pm-panel-head {
  background: var(--paper-2);
  border-bottom: 1px solid var(--rule);
  padding: 22px 32px 18px;
  position: relative;
}
.pm-panel-head::after {
  content: none;
}
.pm-panel-head-top {
  display: flex; align-items: center; gap: 14px;
  margin-bottom: 16px;
}
.pm-panel-name {
  flex: 1;
  border: 1px solid transparent;
  border-radius: var(--r-sm);
  background: transparent;
  font-family: var(--font-display);
  font-style: italic;
  font-size: 30px;
  font-weight: 500;
  color: var(--ink);
  padding: 6px 10px;
  letter-spacing: -.02em;
  text-transform: none;
}
.pm-panel-name:hover,
.pm-panel-name:focus {
  background: var(--paper-3);
  border-color: var(--rule);
  outline: none;
}
.pm-panel-close {
  background: transparent;
  border: 1px solid var(--rule);
  border-radius: var(--r-sm);
  color: var(--ink-soft);
  width: 38px; height: 38px;
  font-size: 16px;
  cursor: pointer;
  transition: all .12s ease;
}
.pm-panel-close:hover {
  background: var(--ink);
  color: #fff;
  border-color: var(--ink);
}
.pm-panel-sums {
  display: flex; gap: 10px;
  margin-bottom: 16px;
}
.pm-panel-sumbox {
  display: inline-flex; flex-direction: column; gap: 4px;
  background: var(--paper-3);
  border: 1px solid var(--rule);
  border-radius: var(--r-md);
  padding: 10px 18px;
  min-width: 130px;
}
.pm-panel-sumbox.total {
  background: var(--orange-faint);
  border-color: var(--orange);
}
.pm-panel-sumbox.total .pm-sumlabel { color: var(--orange-deep); }
.pm-panel-sumbox.total .pm-sumvalue { color: var(--orange-deep); }
.pm-sumlabel {
  font-family: var(--font-sans);
  font-size: 10px;
  color: var(--steel);
  text-transform: uppercase;
  letter-spacing: .08em;
  font-weight: 600;
}
.pm-sumvalue {
  font-family: var(--font-mono);
  font-size: 16px;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  color: var(--ink);
}
.pm-sumvalue.zero {
  color: var(--steel-light);
  font-weight: 400;
}
.pm-sumvalue.positive { color: var(--ink); }

.pm-status-bar {
  display: flex; align-items: center;
  gap: 8px; flex-wrap: wrap;
}
.pm-status-label {
  font-family: var(--font-sans);
  font-size: 11px;
  color: var(--steel);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .08em;
  margin-right: 8px;
}
.pm-status-btn {
  background: var(--paper-3);
  border: 1px solid var(--rule);
  border-radius: 999px;
  color: var(--ink-soft);
  padding: 5px 14px;
  font-family: var(--font-sans);
  font-size: 12px;
  font-weight: 500;
  text-transform: none;
  letter-spacing: 0;
  cursor: pointer;
  transition: all .12s ease;
}
.pm-status-btn:hover { background: var(--concrete); }
.pm-status-btn.active { font-weight: 600; }

.pm-panel-body {
  flex: 1; overflow-y: auto;
  padding: 22px 32px 42px;
  display: flex; flex-direction: column;
  gap: 18px;
}
.pm-panel-body .pm-card {
  width: 100%;
  flex-shrink: 0;
}

.pm-meta-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px 18px;
}
.pm-meta-grid .pm-meta-full { grid-column: 1 / -1; }
.pm-meta-label {
  font-family: var(--font-sans);
  font-size: 10px;
  color: var(--steel);
  text-transform: uppercase;
  letter-spacing: .08em;
  font-weight: 600;
  display: block;
  margin-bottom: 5px;
}
.pm-meta-input {
  width: 100%;
  border: 1px solid var(--rule);
  border-radius: var(--r-sm);
  padding: 9px 12px;
  font-size: 13px;
  background: var(--paper-3);
  font-family: var(--font-sans);
  transition: all .15s ease;
}
.pm-meta-input:focus {
  outline: none;
  border-color: var(--orange);
  box-shadow: 0 0 0 3px rgba(184,92,46,.10);
}
.pm-prio-row {
  display: flex; gap: 6px;
  flex-wrap: wrap;
}
.pm-prio-btn {
  background: var(--paper-3);
  border: 1px solid var(--rule);
  border-radius: 999px;
  color: var(--ink-soft);
  padding: 6px 14px;
  font-family: var(--font-sans);
  font-size: 12px;
  font-weight: 500;
  text-transform: none;
  letter-spacing: 0;
  cursor: pointer;
  display: inline-flex; align-items: center; gap: 6px;
  transition: all .12s ease;
}
.pm-prio-btn:hover { background: var(--concrete); }
.pm-prio-btn.active {
  font-weight: 600;
  background: var(--orange-faint);
  border-color: var(--orange);
  color: var(--orange-deep);
}
.pm-tag-row {
  display: flex; flex-wrap: wrap; gap: 6px;
  align-items: center;
  padding: 7px;
  border: 1px solid var(--rule);
  border-radius: var(--r-md);
  background: var(--paper-3);
}
.pm-tag.editable {
  display: inline-flex; align-items: center;
  gap: 2px;
  padding-right: 2px;
}
.pm-tag-del {
  background: transparent;
  border: none;
  color: var(--orange-deep);
  cursor: pointer;
  padding: 0 4px;
  font-size: 14px;
}
.pm-tag-del:hover { color: var(--danger); }
.pm-tag-add {
  flex: 1; min-width: 120px;
  border: none;
  background: transparent;
  padding: 4px 6px;
  font-size: 12px;
}
.pm-tag-add:focus { outline: none; }

/* Felles PM-kort */
.pm-card {
  background: var(--paper-3);
  border: 1px solid var(--rule);
  border-radius: var(--r-md);
  display: flex; flex-direction: column;
  overflow: hidden;
  box-shadow: var(--shadow-xs);
  transition: box-shadow .15s ease;
}
.pm-card-head {
  padding: 12px 16px;
  border-bottom: 1px solid var(--rule);
  background: var(--paper-2);
  position: relative;
  display: flex; align-items: center; gap: 10px;
}
.pm-card-head::before {
  content: none;
}
.pm-card-head h3 {
  margin: 0;
  font-family: var(--font-display);
  font-size: 16px;
  font-weight: 600;
  color: var(--ink);
  text-transform: none;
  letter-spacing: -.005em;
  flex: 1;
}
.pm-card-body { padding: 18px 20px; }

/* Drag-håndtak */
.pm-card-drag-handle {
  display: flex; flex-wrap: wrap;
  width: 16px; height: 18px;
  gap: 2px; padding: 2px;
  background: transparent;
  border: none;
  border-radius: var(--r-xs);
  cursor: grab;
  flex-shrink: 0;
  align-content: center;
  opacity: .35;
  transition: opacity .12s ease, background .12s ease;
}
.pm-card-drag-handle span {
  display: block;
  width: 4px; height: 4px;
  background: var(--ink);
  border-radius: 50%;
}
.pm-card-drag-handle:hover {
  opacity: 1;
  background: var(--concrete);
  cursor: grab;
}
.pm-card-drag-handle:active { cursor: grabbing; }

/* Dra-tilstander */
.pm-card.pm-card-dragging {
  opacity: .45;
  box-shadow: var(--shadow-lg);
}
.pm-card.pm-card-drop-above {
  box-shadow: 0 -3px 0 #1E293B, var(--shadow-xs);
}
.pm-card.pm-card-drop-below {
  box-shadow: 0 3px 0 #1E293B, var(--shadow-xs);
}

/* Oppgaver */
.pm-task-list {
  display: flex; flex-direction: column;
  gap: 4px;
}
.pm-task {
  display: flex; align-items: center; gap: 12px;
  padding: 9px 12px;
  background: var(--paper-2);
  border: 1px solid transparent;
  border-radius: var(--r-md);
  transition: all .12s ease;
}
.pm-task:hover {
  background: var(--paper-3);
  border-color: var(--rule);
}
.pm-task.done { opacity: .55; }
.pm-task.done .pm-task-title {
  text-decoration: line-through;
  color: var(--steel);
}
.pm-task-check {
  width: 22px; height: 22px;
  border: 1.5px solid var(--rule);
  border-radius: var(--r-sm);
  background: var(--paper-3);
  cursor: pointer;
  flex-shrink: 0;
  display: inline-flex; align-items: center; justify-content: center;
  color: transparent;
  font-size: 13px; font-weight: 700;
  padding: 0;
  transition: all .12s ease;
}
.pm-task-check:hover {
  background: var(--orange-faint);
  border-color: var(--orange);
}
.pm-task-check.checked {
  background: var(--orange);
  color: #fff;
  border-color: var(--orange);
}
.pm-task-title {
  flex: 1;
  border: 1px solid transparent;
  border-radius: var(--r-sm);
  background: transparent;
  padding: 5px 7px;
  font-size: 13px;
  color: var(--ink);
}
.pm-task-title:hover,
.pm-task-title:focus {
  background: var(--paper-3);
  border-color: var(--rule);
  outline: none;
}
.pm-task-status,
.pm-task-prio {
  border: 1px solid var(--rule);
  border-radius: 999px;
  padding: 4px 10px;
  font-family: var(--font-sans);
  font-size: 11px;
  font-weight: 500;
  text-transform: none;
  letter-spacing: 0;
  background: var(--paper-3);
  cursor: pointer;
}
.pm-task-due {
  border: 1px solid var(--rule);
  border-radius: 999px;
  padding: 4px 10px;
  font-family: var(--font-mono);
  font-size: 11px;
  background: var(--paper-3);
  font-variant-numeric: tabular-nums;
}
.pm-task-due.overdue {
  color: var(--danger);
  border-color: rgba(168,57,44,.4);
  background: var(--danger-bg);
}
.pm-task-due.soon {
  color: var(--warn);
  border-color: rgba(154,114,32,.4);
  background: var(--warn-bg);
}
.pm-task-add { margin-top: 12px; }
.pm-task-add input {
  width: 100%;
  border: 1px dashed var(--rule);
  border-radius: var(--r-md);
  padding: 10px 12px;
  font-size: 13px;
  background: transparent;
  font-family: var(--font-sans);
  transition: all .15s ease;
}
.pm-task-add input:focus {
  outline: none;
  border-style: solid;
  border-color: var(--orange);
  background: var(--paper-3);
  box-shadow: 0 0 0 3px rgba(184,92,46,.10);
}

/* PM-knapper */
.pm-btn {
  background: var(--paper-3);
  border: 1px solid var(--rule);
  border-radius: var(--r-md);
  color: var(--ink);
  padding: 8px 16px;
  font-family: var(--font-sans);
  font-size: 13px;
  font-weight: 500;
  text-transform: none;
  letter-spacing: 0;
  cursor: pointer;
  transition: all .12s ease;
}
.pm-btn:hover {
  background: var(--concrete);
  border-color: var(--rule);
}
.pm-btn.primary {
  background: var(--orange);
  border-color: var(--orange);
  color: #fff;
  font-weight: 600;
}
.pm-btn.primary:hover {
  background: var(--orange-deep);
  border-color: var(--orange-deep);
}
.pm-icon-btn {
  background: transparent;
  border: 1px solid transparent;
  border-radius: var(--r-sm);
  color: var(--steel);
  width: 32px; height: 32px;
  padding: 0;
  font-size: 14px;
  cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center;
  transition: all .12s ease;
}
.pm-icon-btn:hover {
  background: var(--ink);
  color: #fff;
}
.pm-link {
  background: transparent;
  border: none;
  color: var(--orange-deep);
  font-size: 13px;
  padding: 4px 0;
  cursor: pointer;
  font-weight: 500;
}
.pm-link:hover {
  text-decoration: underline;
  color: var(--orange);
}

.pm-hint {
  font-size: 12px;
  color: var(--ink-soft);
  background: var(--orange-faint);
  border: 1px solid rgba(184,92,46,.25);
  border-left: 3px solid var(--orange);
  border-radius: var(--r-sm);
  padding: 12px 16px;
  margin-bottom: 14px;
  line-height: 1.5;
}
.pm-hint code {
  background: var(--paper-3);
  padding: 1px 6px;
  font-family: var(--font-mono);
  font-size: 11px;
  border: 1px solid var(--rule);
  border-radius: var(--r-xs);
}
.pm-warn {
  font-size: 12px;
  color: var(--warn);
  background: var(--warn-bg);
  border: 1px solid rgba(154,114,32,.3);
  border-radius: var(--r-sm);
  padding: 12px 16px;
  margin-bottom: 14px;
  line-height: 1.5;
}
.pm-mono {
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--steel);
}

.pm-section-top,
.pm-section-bot {
  display: flex; align-items: center;
  gap: 10px;
  margin: 0 0 14px;
  flex-wrap: wrap;
}
.pm-section-bot { margin: 14px 0 0; }
.pm-mini-counter {
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--steel);
  flex: 1;
}

/* Notater */
.pm-note-add {
  display: flex; flex-direction: column;
  gap: 10px;
  margin-bottom: 16px;
}
.pm-note-add textarea {
  width: 100%;
  border: 1px solid var(--rule);
  border-radius: var(--r-md);
  padding: 11px 13px;
  font-size: 13px;
  resize: vertical;
  min-height: 64px;
  font-family: var(--font-sans);
  background: var(--paper-3);
  transition: all .15s ease;
}
.pm-note-add textarea:focus {
  outline: none;
  border-color: var(--orange);
  box-shadow: 0 0 0 3px rgba(184,92,46,.10);
}
.pm-note-add .pm-btn { align-self: flex-end; }
.pm-note-actions { display: flex; justify-content: flex-end; gap: 8px; }
.pm-note-actions .pm-btn { align-self: auto; }
/* Møtereferat: liten merkelapp + kompakt PDF-knapp i notat-hodet */
.pm-note-head-actions { display: inline-flex; align-items: center; gap: 6px; }
.pm-note-head-left { display: inline-flex; align-items: center; gap: 8px; min-width: 0; }
/* Avhuking: merk et notat/gjøremål som utført */
.pm-note-check {
  flex: none; width: 18px; height: 18px; padding: 0;
  display: inline-flex; align-items: center; justify-content: center;
  border: 1.5px solid var(--rule); border-radius: 5px;
  background: var(--paper); color: #fff; cursor: pointer;
  font-size: 11px; line-height: 1; transition: all .12s ease;
}
.pm-note-check:hover { border-color: var(--pm-green, #16a34a); }
.pm-note-check.on {
  background: var(--pm-green, #16a34a);
  border-color: var(--pm-green, #16a34a);
}
/* Utført: dempet notat med gjennomstreket tekst — man ser at det er gjort */
.pm-note-done { opacity: .62; }
.pm-note-done .pm-note-text { text-decoration: line-through; text-decoration-color: var(--steel); }
.pm-note-donetag {
  display: inline-block; margin-left: 8px;
  font-family: var(--font-mono); font-size: 9.5px; font-weight: 700;
  letter-spacing: .04em; text-transform: uppercase;
  color: #166534; background: #dcfce7;
  border: 1px solid #86efac; border-radius: 999px; padding: 1px 8px;
}
.pm-note-edited {
  font-family: var(--font-mono); font-size: 10px;
  color: var(--steel); font-style: italic; margin-left: 4px;
}
.pm-edit-note-area {
  min-height: 200px; line-height: 1.6; resize: vertical;
}
.pm-note-tag {
  display: inline-block; margin-left: 8px;
  font-family: var(--font-mono); font-size: 9.5px; font-weight: 700;
  letter-spacing: .04em; text-transform: uppercase;
  color: var(--orange-deep); background: var(--orange-faint);
  border: 1px solid var(--orange); border-radius: 999px;
  padding: 1px 8px;
}
.pm-note-pdf {
  font-family: var(--font-mono); font-size: 10.5px; font-weight: 700;
  padding: 3px 9px; border-radius: var(--r-sm);
  border: 1px solid var(--rule); background: var(--paper-3);
  color: var(--ink-soft); cursor: pointer; white-space: nowrap;
  transition: all .15s ease;
}
.pm-note-pdf:hover {
  border-color: var(--orange); color: var(--orange-deep);
  background: var(--orange-faint);
}
.pm-note-meeting { border-left-color: var(--pm-blue); }
.pm-notes-list {
  display: flex; flex-direction: column;
  gap: 8px;
}
.pm-note {
  background: var(--paper-3);
  border: 1px solid var(--rule);
  border-left: 3px solid var(--orange);
  border-radius: var(--r-sm);
  padding: 12px 16px;
}
.pm-note + .pm-note { border-top: 1px solid var(--rule); }
.pm-note-head {
  display: flex; align-items: center; justify-content: space-between;
  margin-bottom: 7px;
}
.pm-note-date {
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--orange-deep);
  font-weight: 600;
}
.pm-note-text {
  font-size: 13px;
  color: var(--ink);
  white-space: pre-wrap;
  line-height: 1.5;
}

/* Avvik */
/* ===== Endringsmeldinger ===== */
.pm-em-list {
  display: flex; flex-direction: column;
  gap: 14px;
}
.pm-em {
  border: 1px solid var(--rule);
  border-left: 3px solid #1E293B;
  border-radius: var(--r-md);
  background: var(--paper-3);
  overflow: hidden;
}
.pm-em-head {
  display: flex; align-items: center; gap: 8px;
  padding: 10px 14px;
  background: var(--paper-2);
  border-bottom: 1px solid var(--rule-soft);
  flex-wrap: wrap;
}
.pm-em-nr {
  font-family: var(--font-mono);
  font-size: 12px;
  font-weight: 700;
  color: #1E293B;
  background: #E2E8F0;
  border-radius: 999px;
  padding: 2px 10px;
  white-space: nowrap;
  flex-shrink: 0;
}
.pm-em-title {
  flex: 1; min-width: 160px;
  border: 1px solid transparent;
  border-radius: var(--r-sm);
  background: transparent;
  font-size: 14px;
  font-weight: 600;
  color: var(--ink);
  padding: 4px 8px;
  font-family: var(--font-sans);
}
.pm-em-title:hover, .pm-em-title:focus {
  background: var(--paper-3);
  border-color: var(--rule);
  outline: none;
}
.pm-em-status {
  font-size: 11px; font-weight: 600;
  padding: 3px 10px;
  border-radius: 999px;
  flex-shrink: 0;
  letter-spacing: .03em;
  text-transform: uppercase;
}
.em-s-utkast     { background: #F1F5F9; color: #475569; border: 1px solid #CBD5E1; }
.em-s-sendt      { background: #DBEAFE; color: #1D4ED8; border: 1px solid #BFDBFE; }
.em-s-behandling { background: #FEF3C7; color: #D97706; border: 1px solid #FDE68A; }
.em-s-godkjent   { background: #DCFCE7; color: #166534; border: 1px solid #BBF7D0; }
.em-s-avvist     { background: #FEE2E2; color: #B91C1C; border: 1px solid #FECACA; }

.pm-em-body {
  padding: 14px 16px;
  display: flex; flex-direction: column; gap: 14px;
}

/* Shared label style for EM form fields */
.pm-em-label {
  display: flex; flex-direction: column; gap: 5px;
  font-size: 11px; font-weight: 700;
  color: var(--steel);
  text-transform: uppercase; letter-spacing: .07em;
}

/* Two-column grid for basis + description textareas */
.pm-em-two-col {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}
@media (max-width: 680px) { .pm-em-two-col { grid-template-columns: 1fr; } }

.pm-em-label textarea {
  width: 100%;
  border: 1px solid var(--rule);
  border-radius: var(--r-sm);
  background: var(--paper-2);
  padding: 10px 12px;
  font: inherit;
  font-size: 13px;
  color: var(--ink);
  resize: vertical;
  line-height: 1.55;
  margin-top: 1px;
  /* Høyden settes av JS (grow() i wireEndringsmeldinger) etter innholdet.
     min holder et tomt felt anselig, max hindrer at en lang beskrivelse
     dytter resten av skjemaet ut av syne — da scroller feltet i stedet. */
  min-height: 76px;
  max-height: 420px;
  overflow-y: auto;
}
.pm-em-label textarea:focus { outline: none; border-color: #1E293B; background: var(--paper-3); }

/* Meta grid — 3 cols on wide, wraps on narrow */
.pm-em-meta3 {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
}
@media (max-width: 680px) { .pm-em-meta3 { grid-template-columns: 1fr 1fr; } }

.pm-em-meta3 input,
.pm-em-meta3 select {
  border: 1px solid var(--rule);
  border-radius: var(--r-sm);
  background: var(--paper-2);
  padding: 7px 10px;
  font: inherit;
  font-size: 13px;
  color: var(--ink);
  width: 100%;
  margin-top: 1px;
}
.pm-em-meta3 input.num { text-align: right; font-family: var(--font-mono); }
/* «Signeres av»: velger + ✎-knapp for å legge til/fjerne signatører */
.pm-em-signer { display: flex; gap: 6px; align-items: stretch; margin-top: 1px; }
.pm-em-signer select { flex: 1; min-width: 0; }
.pm-em-signer-edit {
  flex: none; width: 32px;
  border: 1px solid var(--rule); border-radius: var(--r-sm);
  background: var(--paper-3); color: var(--steel);
  cursor: pointer; font-size: 13px;
  transition: all .15s ease;
}
.pm-em-signer-edit:hover { border-color: var(--orange); color: var(--orange-deep); background: var(--orange-faint); }
.pm-em-meta3 input:focus,
.pm-em-meta3 select:focus { outline: none; border-color: #1E293B; }

/* Total chip shown in EM header */
.pm-em-totalchip {
  font-size: 12px; font-weight: 700;
  font-family: var(--font-mono);
  color: #166534;
  background: #DCFCE7;
  border: 1px solid #BBF7D0;
  border-radius: 999px;
  padding: 2px 10px;
  white-space: nowrap;
  flex-shrink: 0;
}

/* Cost section wrapper */
.pm-em-cost-section {
  border: 1px solid var(--rule);
  border-radius: var(--r-md);
  overflow: hidden;
}
.pm-em-cost-head {
  display: flex; align-items: center; justify-content: space-between;
  padding: 8px 14px;
  background: var(--paper-2);
  border-bottom: 1px solid var(--rule-soft);
  font-size: 13px;
}

/* Cost entry table */
.pm-ec-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
}
.pm-ec-table thead th {
  background: #1E293B;
  color: #F1F5F9;
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .05em;
  padding: 7px 8px;
  text-align: left;
  border: none;
}
.pm-ec-table thead th.right { text-align: right; }
.pm-ec-table tbody tr:nth-child(even) { background: var(--paper-2); }
.pm-ec-table tbody td {
  padding: 5px 6px;
  border-bottom: 1px solid var(--rule-soft);
  vertical-align: middle;
}
.pm-ec-table td.right { text-align: right; font-family: var(--font-mono); }

/* Inputs inside cost rows */
.pm-ec-row select,
.pm-ec-row input,
.pm-ec-row textarea {
  border: 1px solid transparent;
  border-radius: var(--r-sm);
  background: transparent;
  padding: 4px 6px;
  font: inherit;
  font-size: 13px;
  color: var(--ink);
  width: 100%;
}
.pm-ec-row select:hover,
.pm-ec-row input:hover,
.pm-ec-row textarea:hover { border-color: var(--rule); background: var(--paper-3); }
.pm-ec-row select:focus,
.pm-ec-row input:focus,
.pm-ec-row textarea:focus { outline: none; border-color: #1E293B; background: var(--paper-3); }
.pm-ec-row input.num { text-align: right; font-family: var(--font-mono); }
/* Beskrivelsen vokser med teksten (emGrowTextarea). Den skal se ut som de andre
   feltene i raden, ikke som et tekstområde: ingen dra-hjørne, én linje som
   utgangspunkt. Taket hindrer at én lang post presser hele tabellen ut av syne. */
.pm-ec-row textarea.pm-ec-desc {
  resize: none;
  overflow-y: auto;
  max-height: 200px;
  line-height: 1.45;
  display: block;
}
.pm-ec-sub { font-family: var(--font-mono); }

/* tfoot subtotal + total rows */
.pm-ec-subtotal-row td {
  padding: 6px 8px;
  border-top: 1px solid var(--rule-soft);
  font-size: 13px;
  background: var(--paper-2);
  color: var(--ink-soft);
}
.pm-ec-subtotal-row input {
  border: 1px solid var(--rule);
  border-radius: var(--r-sm);
  background: var(--paper-3);
  padding: 3px 6px;
  font: inherit;
  font-size: 13px;
  font-family: var(--font-mono);
  text-align: right;
  color: var(--ink);
}
.pm-ec-subtotal-row input:focus { outline: none; border-color: #1E293B; }
.pm-ec-total-row td {
  padding: 8px 8px;
  border-top: 2px solid #1E293B;
  background: #1E293B;
  color: #F1F5F9;
  font-size: 14px;
}
.pm-ec-total-row td.right { font-family: var(--font-mono); text-align: right; }

.pm-em-pdf {
  font-size: 12px !important;
  padding: 3px 10px !important;
  border: 1px solid var(--rule) !important;
  border-radius: var(--r-sm) !important;
  background: var(--paper-3) !important;
  color: var(--ink-soft) !important;
  height: auto !important;
}
.pm-em-pdf:hover {
  background: #1E293B !important;
  color: #fff !important;
  border-color: #1E293B !important;
}

/* ===== Avvik ===== */
.pm-dev-list {
  display: flex; flex-direction: column;
  gap: 14px;
}
.pm-dev {
  background: var(--danger-bg);
  border: 1px solid rgba(168,57,44,.3);
  border-radius: var(--r-md);
  padding: 14px 16px;
}
.pm-dev.closed {
  background: var(--paper-3);
  border-color: var(--rule);
  opacity: .8;
}
.pm-dev-head {
  display: flex; align-items: center;
  gap: 12px;
  margin-bottom: 10px;
}
.pm-dev-title {
  flex: 1;
  border: 1px solid transparent;
  border-radius: var(--r-sm);
  background: transparent;
  font-size: 14px;
  font-weight: 600;
  padding: 5px 7px;
  color: var(--ink);
}
.pm-dev-title:hover,
.pm-dev-title:focus {
  background: var(--paper-3);
  border-color: var(--rule);
  outline: none;
}
.pm-dev-status {
  font-family: var(--font-sans);
  font-size: 10px;
  padding: 3px 10px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .06em;
  border: 1px solid;
  border-radius: 999px;
}
.pm-dev-status.open {
  background: var(--danger);
  color: #fff;
  border-color: var(--danger);
}
.pm-dev-status.closed {
  background: var(--paper-3);
  color: var(--ink-soft);
  border-color: var(--rule);
}
.pm-dev-desc {
  width: 100%;
  border: 1px solid rgba(168,57,44,.3);
  border-radius: var(--r-sm);
  background: var(--paper-3);
  padding: 8px 11px;
  font-size: 13px;
  resize: vertical;
  min-height: 44px;
  font-family: var(--font-sans);
  line-height: 1.45;
}
.pm-dev.closed .pm-dev-desc { border-color: var(--rule); }
.pm-dev-foot {
  display: flex; align-items: center; justify-content: space-between;
  gap: 14px;
  margin-top: 10px;
}
.pm-dev-foot label {
  font-family: var(--font-sans);
  font-size: 11px;
  color: var(--ink-soft);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .06em;
  display: inline-flex; align-items: center; gap: 10px;
}
.pm-dev-cost {
  width: 120px;
  border: 1px solid var(--rule);
  border-radius: var(--r-sm);
  padding: 5px 10px;
  font-size: 13px;
  font-family: var(--font-mono);
  background: var(--paper-3);
}
.pm-dev-date {
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--steel);
}

/* Tabeller (Tillegg, Kontakter, Faktureringsplan) */
.pm-table {
  width: 100%; border-collapse: collapse;
  font-size: 13px;
}
.pm-table th {
  background: var(--paper-2);
  color: var(--ink-soft);
  text-align: left;
  font-family: var(--font-sans);
  font-weight: 600;
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: .08em;
  padding: 10px 12px;
  border-bottom: 1px solid var(--rule);
}
.pm-table th.right,
.pm-table td.right {
  text-align: right;
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
}
.pm-table td {
  padding: 8px 12px;
  border-bottom: 1px solid var(--rule-soft);
  vertical-align: middle;
}
.pm-table tfoot td {
  border-top: 1px solid var(--rule);
  border-bottom: none;
  padding-top: 14px;
  font-size: 13px;
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
  font-weight: 600;
}
.pm-table .pm-iv-subtotal td {
  padding-top: 6px; padding-bottom: 6px;
  color: var(--steel);
  font-size: 12px;
}
.pm-table input,
.pm-table textarea,
.pm-table select {
  width: 100%;
  border: 1px solid transparent;
  border-radius: var(--r-sm);
  background: transparent;
  padding: 5px 7px;
  font: inherit;
  transition: all .12s ease;
}
.pm-table input:hover,
.pm-table input:focus,
.pm-table textarea:hover,
.pm-table textarea:focus,
.pm-table select:hover,
.pm-table select:focus {
  background: var(--paper-3);
  border-color: var(--rule);
  outline: none;
}
.pm-table input:focus,
.pm-table textarea:focus,
.pm-table select:focus {
  border-color: var(--orange);
  box-shadow: 0 0 0 3px rgba(184,92,46,.10);
}
.pm-table input.num {
  text-align: right;
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
}
.pm-table textarea {
  resize: vertical;
  line-height: 1.4;
  min-height: 28px;
  font-family: var(--font-sans);
}
.pm-iv-status-planned { color: var(--steel); }
.pm-iv-status-sent {
  color: var(--orange-deep);
  font-weight: 600;
}
.pm-iv-status-paid {
  color: var(--ok);
  font-weight: 600;
}

/* Filer */
.pm-file-drop {
  border: 1px dashed var(--rule);
  border-radius: var(--r-md);
  padding: 28px;
  text-align: center;
  color: var(--steel);
  font-family: var(--font-display);
  font-style: italic;
  font-size: 15px;
  font-weight: 400;
  text-transform: none;
  letter-spacing: 0;
  background: var(--paper-2);
  margin-bottom: 14px;
  transition: all .15s ease;
}
.pm-file-drop.active {
  background: var(--orange-faint);
  border-color: var(--orange);
  border-style: solid;
  color: var(--orange-deep);
}
.pm-file-list {
  display: flex; flex-direction: column;
  gap: 0;
}
.pm-file {
  border: 1px solid var(--rule);
  border-radius: var(--r-md);
  padding: 14px 16px;
  background: var(--paper-3);
  margin-bottom: 8px;
  transition: all .12s ease;
}
.pm-file:hover {
  border-color: var(--orange);
  box-shadow: var(--shadow-sm);
}
.pm-file-row {
  display: flex; align-items: center; gap: 14px;
}
.pm-file-icon {
  font-size: 28px;
  flex-shrink: 0;
}
.pm-file-main { flex: 1; min-width: 0; }
.pm-file-name {
  width: 100%;
  border: 1px solid transparent;
  border-radius: var(--r-sm);
  background: transparent;
  font-size: 14px;
  font-weight: 600;
  padding: 4px 7px;
  color: var(--ink);
}
.pm-file-name:hover,
.pm-file-name:focus {
  background: var(--paper-2);
  border-color: var(--rule);
  outline: none;
}
.pm-file-meta {
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--steel);
  margin-top: 5px;
  padding-left: 7px;
}
.pm-file-note {
  font-size: 12px;
  color: var(--ink-soft);
  margin-top: 8px;
  padding: 6px 10px;
  background: var(--warn-bg);
  border: 1px solid rgba(154,114,32,.3);
  border-radius: var(--r-sm);
}
.pm-file-rev {
  display: inline-block;
  background: var(--orange-faint);
  color: var(--orange-deep);
  border: 1px solid rgba(184,92,46,.3);
  border-radius: 999px;
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 600;
  padding: 1px 7px;
}
.pm-file-kind {
  border: 1px solid var(--rule);
  border-radius: 999px;
  padding: 5px 11px;
  font-family: var(--font-sans);
  font-size: 11px;
  font-weight: 500;
  text-transform: none;
  letter-spacing: 0;
  background: var(--paper-3);
  cursor: pointer;
}
.pm-file-actions {
  display: flex;
  gap: 4px;
  align-items: center;
  flex-shrink: 0;
}
.pm-file-history {
  margin-top: 12px;
  padding: 12px 16px;
  background: var(--paper-2);
  border-top: 1px solid var(--rule);
  border-left: 3px solid var(--orange);
  border-radius: 0 0 var(--r-sm) var(--r-sm);
}
.pm-file-history-row {
  display: flex; align-items: center; gap: 14px;
  font-size: 12px;
  color: var(--ink-soft);
  padding: 5px 0;
  font-family: var(--font-mono);
}
.pm-file-history-note {
  color: var(--steel);
  font-style: italic;
  flex: 1;
  font-family: var(--font-sans);
}

/* Sjekklister */
.pm-checklist-list {
  display: flex; flex-direction: column;
  gap: 14px;
}
.pm-checklist {
  border: 1px solid var(--rule);
  border-radius: var(--r-md);
  padding: 16px 18px;
  background: var(--paper-3);
  box-shadow: var(--shadow-xs);
}
.pm-checklist-head {
  display: flex; align-items: center; gap: 12px;
  margin-bottom: 12px;
}
.pm-checklist-title {
  flex: 1;
  border: 1px solid transparent;
  border-radius: var(--r-sm);
  background: transparent;
  font-family: var(--font-display);
  font-style: italic;
  font-size: 18px;
  font-weight: 500;
  padding: 5px 7px;
  text-transform: none;
  letter-spacing: -.005em;
}
.pm-checklist-title:hover,
.pm-checklist-title:focus {
  background: var(--paper-2);
  border-color: var(--rule);
  outline: none;
}
.pm-checklist-progress {
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--orange-deep);
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}
.pm-progress-bar {
  width: 100px; height: 6px;
  background: var(--rule);
  border: none;
  border-radius: 999px;
  overflow: hidden;
}
.pm-progress-fill {
  height: 100%;
  background: var(--orange);
  border-radius: 999px;
  transition: width .25s ease;
}
.pm-checklist-items {
  list-style: none;
  padding: 0; margin: 0;
  display: flex; flex-direction: column;
  gap: 0;
}
.pm-checklist-item {
  display: flex; align-items: center; gap: 12px;
  padding: 7px 0;
  border-bottom: 1px solid var(--rule-soft);
}
.pm-checklist-item:last-child { border-bottom: none; }
.pm-checklist-item.done .pm-cl-text {
  color: var(--steel-light);
  text-decoration: line-through;
}
.pm-cl-check {
  width: 18px; height: 18px;
  cursor: pointer;
  flex-shrink: 0;
  accent-color: var(--orange);
}
.pm-cl-text {
  flex: 1;
  border: 1px solid transparent;
  border-radius: var(--r-sm);
  background: transparent;
  font-size: 13px;
  padding: 4px 7px;
}
.pm-cl-text:hover,
.pm-cl-text:focus {
  background: var(--paper-2);
  border-color: var(--rule);
  outline: none;
}

/* ===== Print ===== */
@media print {
  body { background: #fff; }
  .topbar,
  .toolbar,
  .tilbud-toolbar,
  .app,
  .pm-view { display: none !important; }
  body.show-tilbud .tilbud-view {
    display: block !important;
    padding: 0;
    max-width: none;
  }
  .tilbud-view { font-size: 11pt; }
  .tilbud-view table.lines { font-size: 10pt; }
  @page { size: A4; margin: 18mm 15mm; }
  tr, td, th { page-break-inside: avoid; }
}

/* ===== Scrollbars ===== */
* {
  scrollbar-width: thin;
  scrollbar-color: var(--rule) transparent;
}
*::-webkit-scrollbar { width: 10px; height: 10px; }
*::-webkit-scrollbar-track { background: transparent; }
*::-webkit-scrollbar-thumb {
  background: var(--rule);
  border-radius: 999px;
  border: 2px solid var(--paper);
}
*::-webkit-scrollbar-thumb:hover { background: var(--steel-light); }

/* ===== Selection ===== */
::selection {
  background: var(--orange-faint);
  color: var(--orange-deep);
}
::-moz-selection {
  background: var(--orange-faint);
  color: var(--orange-deep);
}

/* ===== Firma-meny i topbar-senter ===== */
.company-menu { position: relative; display: flex; align-items: center; align-self: center; margin: 0 auto; z-index: 90; }
.company-menu-btn { display: inline-flex; align-items: center; gap: 6px; height: 34px; padding: 0 14px; font-family: var(--font-sans); font-size: 13px; font-weight: 600; color: #E2E8F0; background: rgba(255,255,255,.05); border: 1px solid rgba(255,255,255,.14); border-radius: 8px; cursor: pointer; max-width: 320px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.company-menu-btn:hover { background: rgba(255,255,255,.10); }
.cm-caret { font-size: 10px; opacity: .7; }
.company-menu-panel { position: absolute; top: calc(100% + 8px); left: 50%; transform: translateX(-50%); width: 340px; max-width: 92vw; background: #1E293B; border: 1px solid #334155; border-radius: 12px; box-shadow: 0 20px 50px rgba(0,0,0,.45); padding: 18px; display: flex; flex-direction: column; gap: 10px; }
.company-menu-panel[hidden] { display: none; }
.cm-logo-row { display: flex; align-items: center; gap: 12px; }
.cm-logo-preview { width: 56px; height: 56px; object-fit: contain; background: #0F172A; border: 1px solid #334155; border-radius: 8px; }
.cm-logo-actions { display: flex; flex-direction: column; gap: 6px; }
.cm-logo-actions button { font-size: 12px; padding: 6px 10px; border-radius: 7px; border: 1px solid #475569; background: #0F172A; color: #E2E8F0; cursor: pointer; }
.cm-logo-actions .cm-reset { color: #94A3B8; }
.cm-field { display: flex; flex-direction: column; font-size: 11px; font-weight: 600; color: #94A3B8; gap: 3px; }
.cm-field input { padding: 8px 10px; border: 1px solid #475569; border-radius: 7px; background: #0F172A; color: #fff; font-size: 13px; font-weight: 400; }

/* ===== Prosjektnavn-felt med etikett i topbaren ===== */
/* Navnefeltet tar ALL ledig plass i topbaren (flex-grow 999 slår de andre
   fleksible elementene), så hele prosjektnavnet får plass. Strammere padding
   enn før — de 12 pikslene går til navnet i stedet. */
.project-name-field { flex: 999 1 auto; min-width: 250px; display: flex; flex-direction: column; justify-content: center; align-self: stretch; padding: 0 12px; gap: 1px; }
.pnf-label { font-size: 9px; font-weight: 700; letter-spacing: .07em; text-transform: uppercase; color: #94A3B8; }
.topbar .project-name {
  flex: initial; min-width: 0; width: 100%; padding: 0;
  align-self: auto; line-height: 1.25;
  /* 14 px i stedet for 15 — gir ~12 px mer navn uten at det ser smått ut */
  font-size: 14px;
  /* Sikkerhetsnett: er navnet likevel for langt, avsluttes det med «…» i stedet
     for å bli hardt avkuttet. Full tekst ligger i title (satt i renderTopbar).
     min-width hindrer at Nytt/Slett/Angre presser navnet helt bort på smale
     skjermer — da ryker heller tittelen og klokkeslettet (media queries under). */
  text-overflow: ellipsis;
  min-width: 110px;
}
/* Skriver man et navn som er lengre enn feltet, viker verktøy-etikettene
   midlertidig (ikonene blir stående) så navnet får plass mens man redigerer.
   Etikettene kommer tilbake så snart feltet mister fokus. */
.topbar:has(.project-name-field:focus-within) .vt-tool .vt-lbl { display: none; }

/* Rammen rundt navn + arkivknapp lyser opp når man redigerer navnet, så det er
   tydelig at feltet er redigerbart og ikke bare en etikett. */
.project-name-field:focus-within .project-combo {
  box-shadow: 0 0 0 1px rgba(249,115,22,.55);
  border-radius: 9px;
}
.project-combo { padding: 2px 4px; margin: -2px -4px; }

/* ===== Sammenslått prosjektnavn + arkiv ===== */
/* Nytt / Slett / (Angre) står til venstre for arkivknappen, i samme rad som
   navnet. Samme mørke stil som arkivknappen, men Slett får rød hover og
   Angre grønn — de to er motsatte handlinger og bør ikke se like ut. */
.topbar .pnf-act {
  align-self: center; flex-shrink: 0;
  height: 28px; padding: 0 11px;
  border: 1px solid rgba(255,255,255,.14);
  border-radius: 8px;
  background: rgba(255,255,255,.04);
  color: #CBD5E1;
  font-family: var(--font-sans);
  font-size: 12.5px; font-weight: 500;
  white-space: nowrap; cursor: pointer;
  transition: background .15s ease, border-color .15s ease, color .15s ease;
}
.topbar .pnf-act:hover {
  background: rgba(255,255,255,.10);
  border-color: rgba(255,255,255,.28);
  color: #F1F5F9;
}
.topbar #btnDelete:hover {
  background: rgba(248,113,113,.14);
  border-color: rgba(248,113,113,.45);
  color: #FCA5A5;
}
.topbar .pnf-act-undo {
  border-color: rgba(74,222,128,.35);
  color: #86EFAC;
}
.topbar .pnf-act-undo:hover {
  background: rgba(74,222,128,.14);
  border-color: rgba(74,222,128,.55);
  color: #BBF7D0;
}

.project-combo { display: flex; align-items: center; gap: 6px; }
.project-combo .project-name { flex: 1; }
.topbar .project-combo .project-picker { align-self: center; flex-shrink: 0; height: 28px; padding: 0 8px; gap: 6px; border: 1px solid rgba(255,255,255,.14); border-radius: 8px; background: rgba(255,255,255,.04); }
.topbar .project-combo .project-picker:hover { background: rgba(255,255,255,.10); }

/* ============================================================================
   LOMMEKALKULATOR (#calcWidget)
   Fast nede til høyre, uansett visning og rulling. To tilstander: sammenslått
   (bare topplinja, med svaret i miniformat) og åpen. z-index 400 legger den
   OVER prosjektpanelet (250) og modalene (260) — man skal kunne regne mens man
   fyller ut en endringsmelding — men under fullskjermsverktøyene.
   ========================================================================= */
#calcWidget {
  position: fixed;
  right: 18px; bottom: 0;
  z-index: 400;
  width: 236px;
  display: flex; flex-direction: column;
  font-family: var(--font-sans);
  background: var(--paper-3);
  border: 1px solid var(--rule);
  border-bottom: none;
  border-radius: var(--r-md) var(--r-md) 0 0;
  box-shadow: 0 -4px 24px rgba(15,23,42,.16);
  overflow: hidden;
}
/* Skjules der den ville vært i veien: fullskjermsverktøyene, tilbudsbrevet og utskrift.
   :has() gjør at den forsvinner og kommer tilbake av seg selv når overleggene
   åpnes/lukkes — ingen JS som må huske å rydde opp. */
body:has(#vaTegnerOverlay) #calcWidget,
body:has(#vaDimOverlay) #calcWidget,
body.show-tilbud #calcWidget { display: none; }
@media print { #calcWidget { display: none !important; } }

.calc-head {
  display: flex; align-items: center; gap: 8px;
  padding: 9px 12px;
  background: #1E293B;
  color: #F1F5F9;
  border: none; cursor: pointer;
  font: inherit; font-size: 13px; font-weight: 600;
  text-align: left;
}
.calc-head:hover { background: #273549; }
.calc-head-icon { font-size: 14px; line-height: 1; }
.calc-head-title { flex: 1; }
/* Svaret vises i topplinja når kalkulatoren er slått sammen */
.calc-head-mini {
  font-family: var(--font-mono); font-size: 12px; font-weight: 600;
  color: #FDBA74; max-width: 96px;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
#calcWidget.calc-open .calc-head-mini { display: none; }
.calc-chev { font-size: 10px; color: #94A3B8; transition: transform .15s ease; }
#calcWidget.calc-open .calc-chev { transform: rotate(180deg); }
#calcWidget.calc-collapsed .calc-body { display: none; }

.calc-body { padding: 10px; display: flex; flex-direction: column; gap: 8px; }
.calc-screen {
  background: var(--paper-2);
  border: 1px solid var(--rule);
  border-radius: var(--r-sm);
  padding: 6px 10px 8px;
}
.calc-expr {
  min-height: 14px;
  font-family: var(--font-mono); font-size: 11px;
  color: var(--steel);
  text-align: right;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.calc-display {
  display: block; width: 100%;
  background: none; border: none; padding: 0;
  font-family: var(--font-mono); font-size: 22px; font-weight: 700;
  color: var(--ink);
  text-align: right; cursor: pointer;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.calc-display:hover { color: var(--orange-deep); }
.calc-display.copied { color: #166534; }

.calc-keys { display: grid; grid-template-columns: repeat(4, 1fr); gap: 5px; }
.calc-key {
  padding: 9px 0;
  border: 1px solid var(--rule);
  border-radius: var(--r-sm);
  background: var(--paper-2);
  color: var(--ink);
  font: inherit; font-size: 14px; font-weight: 600;
  cursor: pointer;
  transition: background .1s ease, border-color .1s ease;
}
.calc-key:hover { background: var(--concrete); border-color: var(--steel); }
.calc-key:active { transform: translateY(1px); }
.calc-key.wide { grid-column: span 2; }
.calc-key.fn { color: var(--steel); font-size: 13px; }
.calc-key.op { color: var(--orange-deep); }
.calc-key.op.armed { background: var(--orange); border-color: var(--orange); color: #fff; }
.calc-key.eq { background: var(--orange); border-color: var(--orange); color: #fff; }
.calc-key.eq:hover { background: var(--orange-deep); border-color: var(--orange-deep); }

/* Underprosjekt i prosjektarkivet — flat sorterbar tabell, så hierarkiet vises
   som en markør + forelderens navn i stedet for innrykk/tre. */
.arc-sub-mark { color: var(--steel); font-weight: 600; }
.arc-parent {
  margin-left: 6px; padding: 1px 6px;
  border: 1px solid var(--rule); border-radius: 999px;
  background: var(--paper-2); color: var(--steel);
  font-size: 10.5px; font-weight: 500; white-space: nowrap;
}

/* ============================================================================
   MENGDEBESKRIVELSE (ISY-stil) — egen dokumenttype for NS3459-prosjekter.
   Bevisst løsrevet fra tilbudsbrevets stil: dette skal ligne rådgiverens
   rapport, ikke Anbudssmias eget brev. Arial/sans, tynne streker, A4-sider.
   ========================================================================= */
.mb-doc { background: #6b7280; padding: 16px 0; }
.mb-side {
  position: relative;
  width: 794px; height: 1122px;
  margin: 0 auto 14px;
  background: #fff; color: #000;
  font-family: Arial, Helvetica, sans-serif;
  font-size: 9.5px; line-height: 1.45;
  padding: 30px 46px 34px;
  box-sizing: border-box;
  overflow: hidden;
  box-shadow: 0 2px 10px rgba(0,0,0,.35);
}
@media print {
  .mb-doc { background: none; padding: 0; }
  .mb-side { margin: 0; box-shadow: none; page-break-after: always; break-after: page; }
  .mb-side:last-child { page-break-after: auto; break-after: auto; }
}
/* Forside */
.mb-forside { text-align: center; padding-top: 210px; }
.mb-fors-tittel { font-size: 20px; font-weight: 700; margin-bottom: 54px; }
.mb-fors-linje { font-size: 14px; margin-bottom: 14px; }
/* Datolinje + hodeboks */
.mb-dato { text-align: right; font-size: 9px; margin-bottom: 5px; }
.mb-hode { border: 1px solid #000; margin-bottom: 0; }
.mb-hode-rad {
  display: flex; justify-content: space-between;
  padding: 3px 6px; font-size: 9px;
}
.mb-hode-rad + .mb-hode-rad { border-top: 1px solid #000; }
/* Posttabellen */
table.mb-tabell { width: 100%; border-collapse: collapse; table-layout: fixed; }
table.mb-kropp { border: 1px solid #000; border-top: none; }
.mb-tabell th, .mb-tabell td {
  border-left: 1px solid #000; border-right: 1px solid #000;
  padding: 2px 5px; vertical-align: top;
}
.mb-kolhode th {
  border-bottom: 1px solid #000; border-top: 1px solid #000;
  font-size: 9px; font-weight: 400; text-align: center; padding: 3px 5px;
}
.mb-kolhode th.mb-c-tekst { text-align: center; }
/* Bredden settes per dokument av mbSettPostnrBredde() ut fra det bredeste
   postnummeret. nowrap: hele tallet skal stå på én linje, aldri deles. */
.mb-c-postnr { width: var(--mb-nr-b, 48px); white-space: nowrap; }
.mb-c-enh    { width: 38px; text-align: center; }
.mb-c-mengde { width: 52px; text-align: right; }
.mb-c-pris   { width: 66px; text-align: right; }
.mb-c-sum    { width: 72px; text-align: right; }
.mb-rad td { padding-top: 7px; padding-bottom: 7px; }
.mb-kap-rad td { padding-top: 7px; padding-bottom: 7px; }
/* Postens tekstblokk */
.mb-kode { font-weight: 700; }
.mb-overskrift { font-weight: 700; margin-bottom: 1px; }
.mb-mengderegel { margin-top: 5px; }
.mb-stikk { font-size: 9px; }
.mb-stikk i { font-style: italic; }
.mb-krav { margin-top: 7px; }
.mb-krav-hode { position: relative; padding-left: 22px; margin-bottom: 2px; }
.mb-krav-gruppe { position: absolute; left: 0; }
.mb-krav-avsnitt { padding-left: 22px; margin-bottom: 6px; }
.mb-fritekst { white-space: pre-wrap; }
/* Tom linje i fritekst — beholder luften uten å være en udelelig blokk */
.mb-fritekst-luft { height: 7px; }
/* Fyllrad presser bunnstrekene ned til foten av siden, som i ISY */
.mb-fyll td { height: 100%; border-bottom: 1px solid #000; }
/* Sumfoten */
table.mb-fot { width: 100%; border-collapse: collapse; margin-top: 0; }
.mb-fot td { padding: 2px 5px; font-size: 9px; }
.mb-fot-etikett { text-align: right; }
.mb-fot-belop { width: 72px; text-align: right; border: 1px solid #000; }
/* Innholdsfortegnelse */
.mb-avsnitt-tittel { font-weight: 700; margin: 14px 0 10px; }
table.mb-if { width: 100%; border-collapse: collapse; }
.mb-if td { padding: 2px 0; font-size: 9.5px; }
.mb-if-kode { width: 46px; font-weight: 700; }
.mb-if-navn { display: flex; gap: 4px; align-items: baseline; }
.mb-if-prikker { flex: 1; border-bottom: 1px dotted #666; transform: translateY(-2px); }
.mb-if-side { width: 46px; text-align: right; }
/* Anbudsskjema */
table.mb-as { width: 100%; border-collapse: collapse; margin-top: 18px; }
.mb-as td { padding: 4px 0; font-size: 9.5px; }
.mb-as-kode { width: 60px; font-weight: 700; }
.mb-as-sum  { width: 100px; text-align: right; }
.mb-as-total td { border-top: 1px solid #000; padding-top: 7px; font-weight: 700; }

/* ============================================================
   Utleie — utstyrsregister. Grunnenheten er GJENSTANDEN, ikke
   prosjektet, så lista er ett kort per utstyr med den åpne
   utleien inni. Forfalt sorteres og farges øverst.
   ============================================================ */
.utleie-view {
  display: none;
  min-height: calc(100vh - var(--chrome-h));
  background: var(--paper);
  padding: 28px 32px 80px;
}
body.view-utleie .app,
body.view-utleie .totals { display: none !important; }
body.view-utleie .utleie-view { display: block; }
body.view-utleie { background: var(--paper); }

.ul-topp {
  display: flex; align-items: flex-end; justify-content: space-between;
  gap: 20px; flex-wrap: wrap;
  max-width: 1100px; margin: 0 auto 22px;
}
.ul-tittel h1 { margin: 0; font-size: 26px; letter-spacing: -.4px; }
.ul-undertekst { margin: 4px 0 0; color: var(--muted); font-size: 13px; }
.ul-forfalt-tekst { color: #DC2626; }

.ul-verktoy { display: flex; align-items: center; gap: 10px; }
.ul-filter { display: flex; background: var(--paper-2); border: 1px solid var(--rule); border-radius: 8px; padding: 2px; }
.ul-f-btn {
  border: 0; background: transparent; color: var(--muted);
  padding: 6px 14px; border-radius: 6px; cursor: pointer; font-size: 13px;
}
.ul-f-btn.active { background: var(--paper); color: var(--ink); font-weight: 600; box-shadow: 0 1px 2px rgba(0,0,0,.08); }
.ul-primar {
  border: 0; background: var(--ink); color: var(--paper);
  padding: 9px 16px; border-radius: 8px; cursor: pointer; font-size: 13px; font-weight: 600;
}
.ul-primar:hover { opacity: .88; }

.ul-liste { max-width: 1100px; margin: 0 auto; display: flex; flex-direction: column; gap: 10px; }

.ul-kort {
  border: 1px solid var(--rule); border-radius: 10px;
  background: var(--paper); padding: 12px 14px;
}
.ul-kort.ute { border-left: 3px solid #F59E0B; }
.ul-kort.forfalt { border-left: 3px solid #DC2626; background: #FEF2F2; }

.ul-kort-hode { display: flex; align-items: center; gap: 10px; }
.ul-utstyr-navn, .ul-utstyr-merking {
  border: 0; background: transparent; color: var(--ink);
  padding: 4px 2px; border-bottom: 1px solid transparent; border-radius: 0;
}
.ul-utstyr-navn { font-size: 15px; font-weight: 600; flex: 1 1 240px; min-width: 0; }
.ul-utstyr-merking { font-size: 12px; color: var(--muted); flex: 0 1 150px; min-width: 0; }
.ul-utstyr-navn:focus, .ul-utstyr-merking:focus { outline: 0; border-bottom-color: var(--rule); }

.ul-merke { font-size: 11px; font-weight: 600; padding: 3px 9px; border-radius: 999px; white-space: nowrap; }
.m-inne    { background: #D1FAE5; color: #047857; }
.m-ute     { background: #FEF3C7; color: #92400E; }
.m-forfalt { background: #FEE2E2; color: #B91C1C; }

.ul-slett {
  border: 0; background: transparent; color: var(--muted);
  cursor: pointer; font-size: 14px; padding: 4px 6px; border-radius: 6px;
}
.ul-slett:hover { background: #FEE2E2; color: #B91C1C; }

/* Den åpne utleien: feltene i ett rutenett, status og retur-knapp under. */
.ul-leie {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 10px 14px; margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--rule);
}
.ul-felt { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.ul-felt.sm { max-width: 160px; }
.ul-felt label { font-size: 11px; color: var(--muted); }
.ul-felt input {
  border: 1px solid var(--rule); border-radius: 6px;
  padding: 6px 8px; font-size: 13px; background: var(--paper); color: var(--ink);
  min-width: 0;
}
.ul-leie-fot {
  grid-column: 1 / -1;
  display: flex; align-items: center; justify-content: space-between;
  gap: 12px; flex-wrap: wrap; margin-top: 2px;
}
.ul-status { font-size: 12px; color: var(--muted); }
.ul-retur, .ul-leiut {
  border: 1px solid var(--rule); background: var(--paper); color: var(--ink);
  padding: 7px 14px; border-radius: 8px; cursor: pointer; font-size: 13px; font-weight: 600;
}
.ul-retur:hover { background: #D1FAE5; border-color: #10B981; color: #047857; }
.ul-leiut:hover { background: var(--paper-2); }

.ul-inne-rad {
  display: flex; align-items: center; justify-content: space-between;
  gap: 12px; flex-wrap: wrap; margin-top: 10px; padding-top: 10px;
  border-top: 1px solid var(--rule);
}
.ul-angre {
  border: 0; background: transparent; color: var(--muted);
  cursor: pointer; font-size: 12px; text-decoration: underline; padding: 0 2px;
}
.ul-angre:hover { color: var(--ink); }

.ul-tom { max-width: 460px; margin: 60px auto; text-align: center; color: var(--muted); }
.ul-tom-ikon { font-size: 40px; margin: 0 0 8px; }
.ul-tom h2 { margin: 0 0 8px; font-size: 18px; color: var(--ink); }
.ul-tom p { margin: 0 0 18px; font-size: 13px; line-height: 1.6; }
.ul-tom-filter { max-width: 1100px; margin: 40px auto; text-align: center; color: var(--muted); font-size: 13px; }

/* Pris og notat hører til GJENSTANDEN, ikke til leieforholdet, og vises derfor
   uansett om utstyret er ute eller inne. */
.ul-meta {
  /* flex-start, ikke flex-end: prislista kan være flere rader høy, og da skal
     notatet starte på toppen ved siden av — ikke henge nederst. */
  display: flex; gap: 14px; align-items: flex-start; flex-wrap: wrap;
  margin-top: 10px;
}
.ul-felt.vokser { flex: 1 1 260px; }
.ul-priser { display: flex; flex-direction: column; gap: 6px; align-items: flex-start; }
.ul-pris { display: flex; align-items: center; gap: 6px; }
.ul-p-slett {
  border: 0; background: transparent; color: var(--muted);
  cursor: pointer; font-size: 12px; padding: 2px 5px; border-radius: 5px;
}
.ul-p-slett:hover { background: #FEE2E2; color: #B91C1C; }
.ul-p-ny {
  border: 1px dashed var(--rule); background: transparent; color: var(--muted);
  border-radius: 6px; padding: 4px 10px; cursor: pointer; font-size: 11.5px;
}
.ul-p-ny:hover { border-color: var(--ink); color: var(--ink); }
.ul-pris .ul-p-sum {
  width: 82px; text-align: right;
  border: 1px solid var(--rule); border-radius: 6px;
  padding: 6px 8px; font-size: 13px; background: var(--paper); color: var(--ink);
}
.ul-kr { font-size: 12px; color: var(--muted); }
.ul-pris .ul-p-enhet {
  border: 1px solid var(--rule); border-radius: 6px;
  padding: 6px 8px; font-size: 12px; background: var(--paper); color: var(--ink);
}
.ul-meta .ul-felt.vokser input {
  width: 100%; border: 1px solid var(--rule); border-radius: 6px;
  padding: 6px 8px; font-size: 13px; background: var(--paper); color: var(--ink);
}

/* Utført-avkryssing på prosjektnotatene i Firma-dashbordet. Samme oppførsel som
   i prosjektstyringen, men i dashbordets mørke uttrykk — .pm-note-* sine lyse
   farger ville falt igjennom mot #0B1220. */
.cv-note-check {
  flex: none; width: 18px; height: 18px; padding: 0;
  display: inline-flex; align-items: center; justify-content: center;
  border: 1.5px solid var(--d-line-2); border-radius: 5px;
  background: rgba(255,255,255,.05); color: #fff;
  cursor: pointer; font-size: 11px; line-height: 1;
  transition: all .12s ease;
}
.cv-note-check:hover { border-color: #22C55E; background: rgba(34,197,94,.18); }
.cv-note-check.on { background: #16A34A; border-color: #16A34A; }
/* Utført: dempet kort med gjennomstreket tekst — man ser at det er gjort */
.cv-note-done { opacity: .58; }
.cv-note-done .cv-note-text { text-decoration: line-through; text-decoration-color: var(--d-faint); }
.cv-note-donetag {
  font-family: var(--font-mono); font-size: 9px; font-weight: 700;
  letter-spacing: .05em; text-transform: uppercase;
  color: #86EFAC; background: rgba(34,197,94,.16);
  border: 1px solid rgba(134,239,172,.35); border-radius: 999px;
  padding: 2px 8px; white-space: nowrap;
}

/* Treffprosent på Firma-dashbordet — hvor mange av de avgjorte tilbudene som
   ble jobber. Definisjonen står i selve blokka; et nøkkeltall uten forklaring
   blir ikke stolt på. */
.cv-treff {
  display: flex; align-items: center; gap: 18px; flex-wrap: wrap;
  margin: 4px 0 14px; padding: 12px 15px;
  border: 1px solid var(--d-line); border-left: 3px solid var(--d-accent);
  border-radius: 4px 12px 12px 4px;
  background: rgba(255,255,255,.035);
}
.cv-treff-tall { display: flex; flex-direction: column; line-height: 1.1; }
.cv-treff-pst {
  font-family: var(--font-mono); font-size: 26px; font-weight: 700;
  color: var(--d-accent-2);
}
.cv-treff-merk {
  font-family: var(--font-mono); font-size: 9px; letter-spacing: .09em;
  text-transform: uppercase; color: var(--d-faint); margin-top: 3px;
}
.cv-treff-detalj { font-size: 12px; color: var(--d-muted); display: flex; flex-direction: column; gap: 3px; }
.cv-treff-detalj b { color: var(--d-text); }
.cv-treff-paslag { color: var(--d-muted); }
.cv-treff-note { font-size: 10.5px; color: var(--d-faint); font-style: italic; }

/* Underentreprenører i avregningen. Vises som MOTPOST under inntektstotalen —
   ikke blandet inn i den, siden avregningen er det du kan fakturere byggherren. */
.av-ue {
  margin-top: 14px; padding: 12px 14px;
  border: 1px solid var(--rule); border-radius: 10px;
  background: var(--paper-2);
}
.av-ue-tittel { font-size: 12px; font-weight: 700; margin-bottom: 8px; }
/* Inline-merknad — IKKE .pm-hint, som er en oransje varselboks */
.av-ue-merk { font-weight: 400; font-size: 11px; color: var(--muted); font-style: italic; }
.av-ue-rad {
  display: flex; justify-content: space-between; gap: 14px;
  font-size: 13px; padding: 3px 0;
}
.av-ue-sum { border-top: 1px solid var(--rule); margin-top: 6px; padding-top: 7px; font-weight: 600; }
.av-ue-igjen { font-weight: 700; }

/* Statusfarger i UE-tabellen — samme dempede logikk som ellers */
.pm-ue-status-valgt   { border-color: #10B981; color: #047857; }
.pm-ue-status-avvist  { color: var(--muted); }
.pm-ue-notat-rad td { padding-top: 0; }
.pm-ue-notat { width: 100%; font-size: 12px; }

/* Signaturflate på møtereferat. Canvas er 600×200 internt (god oppløsning i
   PDF-en) men vises responsivt — skaleringen håndteres i openSignatureModal. */
.pm-sig-hjelp { font-size: 12px; color: var(--muted); margin: 0 0 10px; }
.pm-sig-flate { position: relative; }
#pmSigCanvas {
  width: 100%; height: auto; display: block;
  border: 1px solid var(--rule); border-radius: 8px;
  background: var(--paper); cursor: crosshair;
  touch-action: none;              /* ellers ruller siden når man tegner på mobil */
}
.pm-sig-linje {
  position: absolute; left: 12%; right: 12%; bottom: 34px;
  border-bottom: 1px dashed var(--rule); pointer-events: none;
}
.pm-sig-note { font-size: 11px; color: var(--muted); font-style: italic; margin: 10px 0 0; }
.pm-note-sig {
  border: 1px solid var(--rule); background: var(--paper); color: var(--ink);
  border-radius: 6px; padding: 3px 9px; font-size: 11px; cursor: pointer;
}
.pm-note-sig:hover { background: var(--paper-2); }
.pm-note-sig.signert { border-color: #86efac; background: #dcfce7; color: #166534; }

/* Touch-velger ved <datalist>-felt — vises KUN på iOS, der datalist ikke har
   noen nedtrekksliste. Legges til av knyttTouchVelger() i app.js. */
.touch-velger {
  margin-top: 6px; width: 100%;
  border: 1px solid var(--rule); border-radius: 8px;
  padding: 9px 10px; font-size: 16px;   /* 16px: hindrer at iOS zoomer ved fokus */
  background: var(--paper); color: var(--ink);
}

/* ============================================================
   Brøyting — roder og vaktliste. Grunnenheten er RODEN, og
   vaktlista er ukebasert fordi rotasjonen i praksis er det.
   ============================================================ */
.broyting-view {
  display: none;
  min-height: calc(100vh - var(--chrome-h));
  background: var(--paper);
  padding: 28px 32px 80px;
}
body.view-broyting .app,
body.view-broyting .totals { display: none !important; }
body.view-broyting .broyting-view { display: block; }
body.view-broyting { background: var(--paper); }

.br-topp {
  display: flex; align-items: flex-end; justify-content: space-between;
  gap: 20px; flex-wrap: wrap; max-width: 1100px; margin: 0 auto 22px;
}
.br-topp h1 { margin: 0; font-size: 26px; letter-spacing: -.4px; }
.br-undertekst { margin: 4px 0 0; color: var(--muted); font-size: 13px; }
.br-faner { display: flex; background: var(--paper-2); border: 1px solid var(--rule); border-radius: 8px; padding: 2px; }
.br-f-btn { border: 0; background: transparent; color: var(--muted); padding: 6px 14px; border-radius: 6px; cursor: pointer; font-size: 13px; }
.br-f-btn.active { background: var(--paper); color: var(--ink); font-weight: 600; box-shadow: 0 1px 2px rgba(0,0,0,.08); }
.br-knapp, .br-primar {
  border: 1px solid var(--rule); background: var(--paper); color: var(--ink);
  padding: 7px 14px; border-radius: 8px; cursor: pointer; font-size: 13px; font-weight: 600;
}
.br-primar { border: 0; background: var(--ink); color: var(--paper); padding: 9px 16px; }
.br-knapp:hover { background: var(--paper-2); }

/* «Hvem har vakt nå» — det man åpner skjermen for */
.br-naa { max-width: 1100px; margin: 0 auto 22px; display: flex; gap: 14px; flex-wrap: wrap; }
.br-naa-kort {
  flex: 1 1 260px; padding: 16px 18px;
  border: 1px solid var(--rule); border-left: 3px solid var(--orange, #F97316);
  border-radius: 4px 12px 12px 4px; background: var(--paper);
}
.br-naa-kort.sekundar { border-left-color: var(--rule); opacity: .85; }
.br-naa-merk {
  font-family: var(--font-mono); font-size: 9.5px; letter-spacing: .09em;
  text-transform: uppercase; color: var(--muted);
}
.br-naa-navn { font-size: 20px; font-weight: 700; margin: 5px 0 2px; }
.br-naa-tlf { font-size: 14px; color: var(--orange, #F97316); text-decoration: none; font-weight: 600; }
.br-naa-tlf.tom { color: var(--muted); font-weight: 400; }

.br-seksjon { max-width: 1100px; margin: 0 auto 26px; }
.br-seksjon-hode { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 10px; flex-wrap: wrap; }
.br-seksjon-hode h2 { margin: 0; font-size: 15px; }
.br-hint { font-weight: 400; font-size: 11px; color: var(--muted); font-style: italic; }

/* Mannskap */
.br-mann-liste { display: flex; flex-direction: column; gap: 8px; }
.br-mann {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  border: 1px solid var(--rule); border-radius: 10px; padding: 9px 12px; background: var(--paper);
}
.br-m-navn { flex: 1 1 200px; font-weight: 600; }
.br-m-tlf { flex: 0 1 150px; }
.br-mann input { border: 1px solid var(--rule); border-radius: 6px; padding: 6px 9px; font-size: 13px; background: var(--paper); color: var(--ink); min-width: 0; }
.br-m-antall { font-size: 11px; color: var(--muted); font-family: var(--font-mono); white-space: nowrap; }
.br-m-slett { border: 0; background: transparent; color: var(--muted); cursor: pointer; padding: 4px 6px; border-radius: 6px; }
.br-m-slett:hover { background: #FEE2E2; color: #B91C1C; }








/* Roder — venstrekant viser prioritet, altså kjørerekkefølgen */
.br-rode-liste { display: flex; flex-direction: column; gap: 10px; }
.br-rode { border: 1px solid var(--rule); border-radius: 10px; padding: 12px 14px; background: var(--paper); }
.br-rode.prio-1 { border-left: 3px solid #DC2626; }
.br-rode.prio-2 { border-left: 3px solid #F59E0B; }
.br-rode.prio-3 { border-left: 3px solid #64748B; }
.br-rode-hode { display: flex; align-items: center; gap: 10px; }
.br-r-navn { flex: 1 1 240px; font-size: 15px; font-weight: 600; border: 0; background: transparent; color: var(--ink); padding: 4px 2px; border-bottom: 1px solid transparent; min-width: 0; }
.br-r-kunde { flex: 0 1 190px; font-size: 12px; color: var(--muted); border: 0; background: transparent; padding: 4px 2px; border-bottom: 1px solid transparent; min-width: 0; }
.br-r-navn:focus, .br-r-kunde:focus { outline: 0; border-bottom-color: var(--rule); }
.br-r-slett { border: 0; background: transparent; color: var(--muted); cursor: pointer; padding: 4px 6px; border-radius: 6px; }
.br-r-slett:hover { background: #FEE2E2; color: #B91C1C; }
.br-rode-felt {
  display: flex; gap: 12px; flex-wrap: wrap; align-items: flex-end;
  margin-top: 10px; padding-top: 10px; border-top: 1px solid var(--rule);
}
.br-rode-felt + .br-rode-felt { border-top: 0; padding-top: 0; margin-top: 8px; }
.br-rode-felt label { display: flex; flex-direction: column; gap: 3px; font-size: 11px; color: var(--muted); min-width: 0; }
.br-rode-felt label.vokser { flex: 1 1 220px; }
.br-rode-felt input, .br-rode-felt select {
  border: 1px solid var(--rule); border-radius: 6px; padding: 6px 8px;
  font-size: 13px; background: var(--paper); color: var(--ink); min-width: 0;
}
.br-cm { display: flex; align-items: center; gap: 5px; font-size: 12px; color: var(--muted); }
.br-cm input { width: 58px; text-align: right; }
.br-fot { margin-top: 12px; font-size: 11px; color: var(--muted); font-style: italic; }

.br-tom { max-width: 480px; margin: 60px auto; text-align: center; color: var(--muted); }
.br-tom-ikon { font-size: 40px; margin: 0 0 8px; }
.br-tom h2 { margin: 0 0 8px; font-size: 18px; color: var(--ink); }
.br-tom p { margin: 0 0 18px; font-size: 13px; line-height: 1.6; }

/* Angre / nullstill i vaktlista */
.br-vakt-knapper { display: flex; gap: 8px; flex-wrap: wrap; }
.br-angre { border-color: var(--orange, #F97316); color: var(--orange, #F97316); }
.br-angre:hover { background: #FFF7ED; }

/* Sesongstripe — hele sesongen synlig samtidig, én farge per person.
   Erstatter 31 nedtrekkslister: du ser fordelingen, ikke bare feltene. */
.br-pensel {
  display: flex; align-items: center; gap: 7px; flex-wrap: wrap;
  margin-bottom: 14px; padding: 9px 12px;
  border: 1px solid var(--rule); border-radius: 10px; background: var(--paper-2);
}
.br-pensel-merk {
  font-family: var(--font-mono); font-size: 9.5px; letter-spacing: .08em;
  text-transform: uppercase; color: var(--muted); margin-right: 2px;
}
.br-p-btn {
  border: 1px solid var(--f-kant, var(--rule)); background: var(--f-bg, var(--paper));
  color: var(--f-tekst, var(--ink));
  padding: 5px 12px; border-radius: 999px; cursor: pointer; font-size: 12px; font-weight: 600;
}
.br-p-btn.valgt { box-shadow: 0 0 0 2px var(--f-kant, var(--ink)); }
.br-p-btn.viskelaer { background: var(--paper); color: var(--muted); border-style: dashed; }
.br-p-btn.viskelaer.valgt { box-shadow: 0 0 0 2px var(--muted); }

.br-stripe { display: flex; flex-direction: column; gap: 12px; }
.br-mnd-tittel {
  font-family: var(--font-mono); font-size: 9.5px; letter-spacing: .09em;
  text-transform: uppercase; color: var(--muted); margin-bottom: 5px;
}
.br-mnd-uker { display: flex; gap: 6px; flex-wrap: wrap; }
.br-celle {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 1px; min-width: 68px; padding: 7px 8px;
  border: 1px solid var(--f-kant, var(--rule)); border-radius: 8px;
  background: var(--f-bg, var(--paper)); color: var(--f-tekst, var(--ink));
  cursor: pointer; font-family: inherit;
}
.br-celle:hover { filter: brightness(.97); }
.br-celle.tom { background: var(--paper); color: var(--muted); border-style: dashed; }
.br-celle.naa { box-shadow: 0 0 0 2px var(--orange, #F97316); }
.br-celle-uke { font-size: 10px; font-family: var(--font-mono); opacity: .75; }
.br-celle-navn { font-size: 12px; font-weight: 700; white-space: nowrap; }
.br-knapp[disabled] { opacity: .45; cursor: default; }

/* Sesongvelger i vaktlista — flere sesonger ligger side om side i `vakter` */
.br-sesongvelger {
  display: inline-flex; align-items: center; gap: 4px; margin: 0 10px;
  vertical-align: middle;
}
.br-s-pil {
  border: 1px solid var(--rule); background: var(--paper); color: var(--ink);
  border-radius: 6px; padding: 2px 8px; cursor: pointer; font-size: 11px; line-height: 1.4;
}
.br-s-pil:hover:not([disabled]) { background: var(--paper-2); }
.br-s-pil[disabled] { opacity: .35; cursor: default; }
.br-s-navn { font-family: var(--font-mono); font-size: 12px; font-weight: 700; min-width: 58px; text-align: center; }
.br-s-naa {
  border: 1px solid var(--orange, #F97316); background: var(--paper); color: var(--orange, #F97316);
  border-radius: 999px; padding: 2px 10px; cursor: pointer; font-size: 11px; font-weight: 600; margin-left: 4px;
}

/* «Hvem kjører hva» — samme data som rodelista, snudd på hodet */
.br-fordeling { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 9px; }
.br-fordel-kort {
  border: 1px solid var(--f-kant, var(--rule)); border-left-width: 3px;
  border-radius: 4px 10px 10px 4px; padding: 10px 12px;
  background: var(--f-bg, var(--paper)); color: var(--f-tekst, var(--ink));
}
.br-fordel-kort.mangler { background: var(--paper); color: var(--muted); border-style: dashed; }
.br-fordel-navn { font-size: 13px; font-weight: 700; margin-bottom: 3px; }
.br-fordel-roder { font-size: 12px; line-height: 1.5; }
.br-fordel-tom { font-style: italic; opacity: .7; }
.br-fordel-res { font-size: 11px; margin-top: 4px; opacity: .8; }

/* Angre i utleieregisteret — samme uttrykk som i brøytingen */
.ul-angre {
  border: 1px solid var(--orange, #F97316); background: var(--paper);
  color: var(--orange, #F97316);
  padding: 9px 14px; border-radius: 8px; cursor: pointer; font-size: 13px; font-weight: 600;
}
.ul-angre:hover { background: #FFF7ED; }


/* ============================================================
   Gjøremål — samler prosjektoppgaver og løse ærend i én liste.
   ============================================================ */
.gjoremal-view {
  display: none;
  min-height: calc(100vh - var(--chrome-h));
  background: var(--paper);
  padding: 28px 32px 80px;
}
body.view-gjoremal .app,
body.view-gjoremal .totals { display: none !important; }
body.view-gjoremal .gjoremal-view { display: block; }
body.view-gjoremal { background: var(--paper); }

.gj-topp {
  display: flex; align-items: flex-end; justify-content: space-between;
  gap: 20px; flex-wrap: wrap; max-width: 900px; margin: 0 auto 18px;
}
.gj-topp h1 { margin: 0; font-size: 26px; letter-spacing: -.4px; }
.gj-undertekst { margin: 4px 0 0; color: var(--muted); font-size: 13px; }
.gj-forfalt-tekst { color: #DC2626; }
.gj-filter { display: flex; background: var(--paper-2); border: 1px solid var(--rule); border-radius: 8px; padding: 2px; }
.gj-f-btn { border: 0; background: transparent; color: var(--muted); padding: 6px 14px; border-radius: 6px; cursor: pointer; font-size: 13px; }
.gj-f-btn.active { background: var(--paper); color: var(--ink); font-weight: 600; box-shadow: 0 1px 2px rgba(0,0,0,.08); }

/* Hurtiginnlegging — terskelen for å skrive ned en småting skal være null */
.gj-ny {
  display: flex; gap: 8px; flex-wrap: wrap;
  max-width: 900px; margin: 0 auto 16px;
  padding: 10px; border: 1px solid var(--rule); border-radius: 10px; background: var(--paper-2);
}
#gjNyTekst {
  flex: 1 1 320px; min-width: 0;
  border: 1px solid var(--rule); border-radius: 8px; padding: 9px 11px;
  font-size: 14px; background: var(--paper); color: var(--ink);
}
#gjNyProsjekt {
  flex: 0 1 180px; min-width: 0;
  border: 1px solid var(--rule); border-radius: 8px; padding: 9px 8px;
  font-size: 13px; background: var(--paper); color: var(--ink);
}
.gj-primar { border: 0; background: var(--ink); color: var(--paper); padding: 9px 16px; border-radius: 8px; cursor: pointer; font-size: 13px; font-weight: 600; }

.gj-liste { max-width: 900px; margin: 0 auto; display: flex; flex-direction: column; gap: 6px; }
.gj-rad {
  display: flex; align-items: center; gap: 9px; flex-wrap: wrap;
  border: 1px solid var(--rule); border-radius: 9px; padding: 8px 11px; background: var(--paper);
}
.gj-rad.forfalt { border-left: 3px solid #DC2626; background: #FEF2F2; }
.gj-rad.ferdig { opacity: .55; }
.gj-rad.ferdig .gj-tittel { text-decoration: line-through; }
.gj-hake {
  flex: none; width: 20px; height: 20px; padding: 0;
  display: inline-flex; align-items: center; justify-content: center;
  border: 1.5px solid var(--rule); border-radius: 5px;
  background: var(--paper); color: #fff; cursor: pointer; font-size: 12px;
}
.gj-hake:hover { border-color: #16a34a; }
.gj-hake.på { background: #16a34a; border-color: #16a34a; }
.gj-tittel {
  flex: 1 1 240px; min-width: 0;
  border: 0; background: transparent; color: var(--ink);
  font-size: 14px; padding: 4px 2px; border-bottom: 1px solid transparent;
}
.gj-tittel:focus { outline: 0; border-bottom-color: var(--rule); }
.gj-merke {
  font-size: 10.5px; padding: 3px 9px; border-radius: 999px; white-space: nowrap;
  max-width: 170px; overflow: hidden; text-overflow: ellipsis;
}
.gj-merke.prosjekt { background: #E0E7FF; color: #3730A3; border: 1px solid #C7D2FE; }
.gj-merke.los { background: var(--paper-2); color: var(--muted); border: 1px dashed var(--rule); }
.gj-prio, .gj-forfall {
  border: 1px solid var(--rule); border-radius: 6px; padding: 4px 6px;
  font-size: 12px; background: var(--paper); min-width: 0;
}
.gj-slett { border: 0; background: transparent; color: var(--muted); cursor: pointer; padding: 4px 6px; border-radius: 6px; }
.gj-slett:hover { background: #FEE2E2; color: #B91C1C; }

.gj-tom { max-width: 460px; margin: 60px auto; text-align: center; color: var(--muted); }
.gj-tom-ikon { font-size: 40px; margin: 0 0 8px; color: #86EFAC; }
.gj-tom h2 { margin: 0 0 8px; font-size: 18px; color: var(--ink); }
.gj-tom p { margin: 0; font-size: 13px; line-height: 1.6; }
/* Prosjekteringskontroll – samme kortsystem og filarkiv som prosjektstyringen. */
.pc-overview { display:flex; flex-direction:column; gap:6px; padding:16px; margin:12px 0; background:#eef5ff; color:#193752; border:1px solid #cbdced; border-radius:12px; text-decoration:none; }
.pc-summary { padding:12px; background:#eef5ff; color:#193752; border-radius:8px; font-weight:600; }
.pc-list { margin-top:20px; }
.pc-item { border:1px solid #d4dce5; border-radius:8px; margin:8px 0; background:#fff; color:#253449; }
.pc-item summary { cursor:pointer; padding:12px; }
.pc-item summary small { display:block; color:#526278; margin:5px 0 0 16px; }
.pc-fields { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:12px; padding:12px; }
.pc-fields label { display:flex; flex-direction:column; gap:5px; font-size:13px; }
.pc-fields label:has(input[type=checkbox]) { flex-direction:row; align-items:center; }
.pc-fields input:not([type=checkbox]), .pc-fields select, .pc-fields textarea { width:100%; box-sizing:border-box; padding:8px; border:1px solid #b9c6d5; border-radius:6px; font:inherit; background:white; color:#253449; }
.pc-fields textarea { min-height:80px; resize:vertical; }
.pc-wide { grid-column:1/-1; }
.pc-fields fieldset { border:1px solid #d4dce5; border-radius:6px; }
@media(max-width:600px) { .pc-fields { grid-template-columns:1fr; } }
/* Henvendelser: avgrenset til eksisterende prosjektstyring. */
.inq-overview { margin:16px; padding:18px; background:#fff; color:#24364a; border:1px solid #d4dce5; border-radius:12px; }
.inq-heading { display:flex; align-items:center; justify-content:space-between; gap:12px; flex-wrap:wrap; }
.inq-heading h2 { margin:0; font-size:18px; }
.inq-heading p,.inq-form p { font-size:13px; color:#526278; }
.inq-filters { display:flex; flex-wrap:wrap; gap:7px; margin:14px 0; }
.inq-filters button[aria-pressed=true] { background:#e7f0ff; border-color:#6486b0; color:#183e6c; }
.inq-row { display:grid; grid-template-columns:minmax(150px,1fr) minmax(150px,1fr) auto; gap:16px; padding:12px 0; align-items:center; border-top:1px solid #e1e6ec; }
.inq-row small { display:block; font-size:12px; color:#526278; margin-top:4px; }
.inq-row p { margin:5px 0 0; }
.inq-row .inq-attention { color:#97431f; }
.inq-form { padding:12px 0; }
.inq-form[hidden],.inq-error[hidden] { display:none; }
.inq-fields { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:12px; margin:12px 0; }
.inq-fields label { display:flex; flex-direction:column; gap:5px; font-size:13px; }
.inq-fields input,.inq-fields select,.inq-fields textarea { box-sizing:border-box; width:100%; min-width:0; background:#fff; color:#24364a; border:1px solid #bac8d9; border-radius:6px; padding:8px; font:inherit; }
.inq-fields textarea { min-height:70px; resize:vertical; }
.inq-wide { grid-column:1/-1; }
.inq-error { color:#a12626!important; }
.inq-history { margin-top:16px; }
.inq-event { padding:10px 0; border-bottom:1px solid #d4dce5; }
.inq-event p { white-space:pre-wrap; overflow-wrap:anywhere; }
.inq-row>div { min-width:0; overflow-wrap:anywhere; }
.inq-saved { color:#176242; font-size:13px; }
.inq-search-label { display:flex; flex-direction:column; gap:5px; font-size:12px; max-width:420px; margin-top:12px; }
.inq-search-label input { padding:8px; border:1px solid #bac8d9; border-radius:6px; background:#fff; color:#24364a; font:inherit; }
@media(max-width:650px) { .inq-row,.inq-fields { grid-template-columns:1fr; } .inq-overview { margin:10px; padding:12px; } }
/* Arkivlik liste i prosjektstyringen. Arkivets egen modal er uendret. */
.pm-archive-list { margin:16px; background:var(--paper-3); border:1px solid var(--rule); border-radius:10px; overflow:hidden; }
.pm-archive-scroll { overflow-x:auto; }
.pm-archive-list .archive-table { width:100%; }
.pm-archive-open,.pm-archive-sort,.pm-archive-group { border:0; padding:0; background:transparent; color:inherit; font:inherit; text-align:left; cursor:pointer; }
.pm-archive-group { width:100%; padding:4px 0; }
.pm-archive-foot { padding:10px 16px; margin:0; color:var(--steel); font-size:12px; border-top:1px solid var(--rule); }
.pm-archive-list .arc-name { white-space:normal; overflow-wrap:anywhere; }
@media(max-width:650px) { .pm-archive-list { margin:8px; } .pm-archive-list .archive-table { min-width:650px; } }
.lib-item.lib-order-before { box-shadow:inset 0 3px 0 var(--orange-deep); }
.lib-item.lib-order-after { box-shadow:inset 0 -3px 0 var(--orange-deep); }
.lib-actions:focus-within { opacity:1; }
.lib-act-btn:disabled { opacity:.3; cursor:default; }