/* Dokument-editor — fullskjerm blokk-editor på /dokumenter/:id
   (sider/dokument-rediger.js + komponenter/dokument-editor.js).

   Fila har to halvdeler:
     1. VÅR layout  (.dok-editor*)  — verktøylinje, ark, innstillingspanel
     2. Temaing av EDITOR.JS        (.ce-*, .cdx-*, .tc-*)

   Om del 2: Editor.js og verktøyene sprøyter inn sine egne <style>-blokker i
   <head> ved lasting — altså ETTER denne fila i kaskaden. Overstyringene under
   er derfor kvalifisert med `.dok-editor` (0,2,0) så de vinner over bibliotekets
   enkelt-klasse-regler (0,1,0) uten `!important`. Flere av verktøyene hardkoder
   lyse farger (utheving, inline-kode, tabell), så uten dette er mørk modus ødelagt.

   Dette er en av unntakene fra «ingen sidespesifikke klasser» (05 §4): en
   fullskjerm redigeringsflate er en egen flate, på linje med prosess-editoren. */

/* ============================== 1. Vår layout ============================== */

.dok-editor {
  display: flex;
  flex-direction: column;
  /* Fyll det app-shellen gir oss, og la de to kolonnene scrolle hver for seg —
     ikke hele siden. Samme grep som profil-layouten (05 §13). */
  flex: 1;
  min-height: 0;
  margin: calc(-1 * var(--avstand-4));   /* nøytraliser .app-main sin padding */
  background: var(--farge-bakgrunn);
}

.dok-editor__laster { padding: var(--avstand-6) var(--avstand-4); }

/* ---- Verktøylinje ---- */

.dok-editor__topp {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--avstand-3);
  padding: var(--avstand-2) var(--avstand-4);
  border-bottom: var(--kant);
  background: var(--farge-overflate);
  flex: 0 0 auto;
}

.dok-editor__topp-venstre,
.dok-editor__topp-hoyre { display: flex; align-items: center; gap: var(--avstand-2); min-width: 0; }

.dok-editor__tilbake { font-size: 16px; flex: 0 0 auto; }   /* ingen understrek: base.css */

.dok-editor__ident { display: flex; flex-direction: column; min-width: 0; line-height: var(--linje-hoyde-tett); }
.dok-editor__type { font-size: 11px; text-transform: uppercase; letter-spacing: .04em; color: var(--farge-tekst-dempet); }
.dok-editor__navn {
  font-size: var(--font-stor);
  font-weight: 600;
  /* Lange dokumenttitler skal ikke dytte lagre-knappen ut av skjermen. */
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}

.dok-editor__lagringstatus {
  font-size: var(--font-liten);
  color: var(--farge-tekst-dempet);
  display: inline-flex; align-items: center; gap: var(--avstand-1);
  white-space: nowrap;
}
.dok-editor__lagringstatus--skitten { color: var(--farge-aksent); }

/* Én linje under verktøylinja som sier hva neste trykk gjør. Dempet — den skal
   informere uten å konkurrere med teksten man skriver. */
.dok-editor__publiseringshjelp {
  margin: 0;
  padding: var(--avstand-1) var(--avstand-4);
  border-bottom: var(--kant);
  background: var(--farge-overflate);
  font-size: var(--font-liten);
  color: var(--farge-tekst-dempet);
  flex: 0 0 auto;
}
.dok-editor__publiseringshjelp:empty { display: none; }

/* ---- Kropp: lerret + panel ---- */

.dok-editor__kropp { display: flex; flex: 1; min-height: 0; }

.dok-editor__lerret {
  flex: 1;
  min-width: 0;
  overflow-y: auto;
  padding: var(--avstand-6) var(--avstand-4) 40vh;
  /* Sjenerøs bunn-padding: siste avsnitt skal kunne stå midt på skjermen i stedet
     for klistret til kanten. Standard grep i skrive-flater. */
}

.dok-editor__ark {
  max-width: 46rem;   /* ~75 tegn pr. linje — lesbarhets-optimum for prosa */
  margin: 0 auto;
}

/* Retur fra godkjenner. Staar OVER tittelen fordi det er det foerste forfatteren
   maa forholde seg til naar hen aapner dokumentet igjen. */
.dok-editor__retur {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: var(--avstand-3);
  margin-bottom: var(--avstand-4);
  border: var(--kant);
  border-left: 3px solid var(--farge-aksent);
  border-radius: var(--radius);
  background: var(--farge-overflate);
}
.dok-editor__retur strong { font-size: var(--font-liten); color: var(--farge-aksent); }
.dok-editor__retur span { font-size: var(--font-base); }

.dok-editor__tittel {
  font-size: 30px;
  font-weight: 700;
  line-height: 1.2;
  margin: 0 0 var(--avstand-4);
  outline: none;
  color: var(--farge-tekst);
}
.dok-editor__tittel:empty::before {
  content: attr(data-plassholder);
  color: var(--farge-tekst-svak);
}
.dok-editor__tittel:focus-visible { outline: none; }

/* ---- Innstillingspanel ---- */

.dok-editor__panel {
  flex: 0 0 19rem;
  border-left: var(--kant);
  padding: var(--avstand-4);
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: var(--avstand-4);
  background: var(--farge-bakgrunn);
}

.dok-editor__panel-tittel {
  font-size: var(--font-stor);
  font-weight: 600;
  margin: 0;
}

.dok-editor__felt { display: flex; flex-direction: column; gap: var(--avstand-1); }
.dok-editor__label { font-size: var(--font-liten); font-weight: 600; color: var(--farge-tekst-dempet); }

.dok-editor__gjelder { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--avstand-1); }
.dok-editor__gjelder li { display: flex; align-items: center; gap: var(--avstand-2); font-size: var(--font-liten); min-width: 0; }
.dok-editor__gjelder li > a,
.dok-editor__gjelder li > span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* Versjonshistorikk i sidepanelet. Tett liste — dette er navigasjon, ikke innhold. */
.dok-versjonsliste { list-style: none; margin: 0; padding: 0; }
.dok-versjon {
  display: flex;
  flex-direction: column;
  gap: 0;
  width: 100%;
  padding: 4px 6px;
  border: 0;
  border-radius: var(--radius);
  background: none;
  font: inherit;
  text-align: left;
  cursor: pointer;
}
.dok-versjon:hover { background: var(--farge-overflate-hover); }
.dok-versjon:focus-visible { outline: 2px solid var(--farge-primary); outline-offset: -2px; }
.dok-versjon__tid { font-size: var(--font-liten); color: var(--farge-tekst); }
.dok-versjon__av { font-size: 11px; color: var(--farge-tekst-dempet); }

.dok-editor__panel-fot { margin-top: auto; padding-top: var(--avstand-3); border-top: var(--kant); }

/* Under 60rem er det ikke plass til to kolonner — panelet legger seg over teksten. */
@media (max-width: 60rem) {
  .dok-editor__kropp { flex-direction: column-reverse; }
  .dok-editor__panel {
    flex: 0 0 auto;
    border-left: 0;
    border-bottom: var(--kant);
    max-height: 45vh;
  }
  .dok-editor__lerret { padding: var(--avstand-4) var(--avstand-3) 30vh; }
  .dok-editor__tittel { font-size: 24px; }
}

/* ========================= 2. Temaing av Editor.js ========================= */

/* Editor.js sentrerer selv innholdet i 650px og legger verktøyene utenfor.
   Vi styrer bredden fra .dok-editor__ark, så nullstill bibliotekets egen. */
.dok-editor .codex-editor { color: var(--farge-tekst); }
.dok-editor .codex-editor__redactor { padding-bottom: 0 !important; }
.dok-editor .ce-block__content,
.dok-editor .ce-toolbar__content { max-width: 100%; }

.dok-editor .ce-block { font-size: 15px; line-height: 1.65; }
.dok-editor .ce-paragraph { padding: 4px 0; }
.dok-editor .ce-paragraph[data-placeholder]:empty::before { color: var(--farge-tekst-svak); }

/* Overskrifter: H1 er dokumenttittelen, så brødteksten starter på H2. Skalaen er
   bevisst større enn appens ellers tette typografi — dette er lesemodus, ikke en
   datatabell (05 §10.1 «tett vs luftig — kontekst styrer»). */
.dok-editor .ce-header { padding: 0; margin: var(--avstand-5) 0 var(--avstand-2); font-weight: 650; line-height: 1.3; color: var(--farge-tekst); }
.dok-editor h2.ce-header { font-size: 22px; }
.dok-editor h3.ce-header { font-size: 18px; }
.dok-editor h4.ce-header { font-size: 15px; text-transform: uppercase; letter-spacing: .03em; color: var(--farge-tekst-dempet); }

/* ---- Verktøy-chrome (⊕ og drahåndtaket) ---- */
.dok-editor .ce-toolbar__plus,
.dok-editor .ce-toolbar__settings-btn {
  color: var(--farge-tekst-dempet);
  background: transparent;
  border: 0;
}
.dok-editor .ce-toolbar__plus:hover,
.dok-editor .ce-toolbar__settings-btn:hover {
  background: var(--farge-overflate-hover);
  color: var(--farge-tekst);
}

/* ---- Popover (blokk-velger) + inline-verktøylinje ----
   Begge deklarerer sine egne --color-*-variabler. Vi peker dem på våre tokens i
   stedet for å jage enkeltregler. `--farge-flytende` (ikke `--farge-bakgrunn`)
   fordi disse svever over annet innhold (07 §5.4). */
.dok-editor .ce-popover,
.dok-editor .ce-inline-toolbar {
  --color-background: var(--farge-flytende);
  --color-text-primary: var(--farge-tekst);
  --color-text-secondary: var(--farge-tekst-dempet);
  --color-border: var(--farge-kant-sterk);
  --color-shadow: rgba(0, 0, 0, .18);
  --color-background-item-hover: var(--farge-overflate-hover);
  --color-background-item-focus: var(--farge-overflate-hover);
  --color-background-icon-active: var(--farge-primary-svak);
  --color-text-icon-active: var(--farge-primary);
  --color-background-item-confirm: var(--farge-feil, #dc2626);
  --color-background-item-confirm-hover: var(--farge-feil, #b91c1c);
}
.dok-editor .ce-popover__container { border-radius: var(--radius-stor); }
.dok-editor .ce-popover-item__icon,
.dok-editor .ce-inline-tool { color: var(--farge-tekst); }
.dok-editor .ce-popover__search,
.dok-editor .cdx-search-field {
  background: var(--farge-overflate);
  border-radius: var(--radius);
  color: var(--farge-tekst);
}
.dok-editor .cdx-search-field__input { color: var(--farge-tekst); }
.dok-editor .cdx-search-field__input::placeholder { color: var(--farge-tekst-svak); }

/* ---- Lister ---- */
.dok-editor .cdx-list { padding: 2px 0; }
.dok-editor .cdx-list__item { line-height: 1.6; padding: 2px 0; }
.dok-editor .cdx-checklist__item-checkbox-check { border-color: var(--farge-kant-sterk); background: var(--farge-overflate); }

/* ---- Sitat ---- */
.dok-editor .cdx-quote__text {
  border-left: 3px solid var(--farge-primary);
  padding: 2px 0 2px var(--avstand-3);
  min-height: auto;
  font-style: italic;
  color: var(--farge-tekst);
}
.dok-editor .cdx-quote__caption { font-size: var(--font-liten); color: var(--farge-tekst-dempet); }

/* ---- Merknadsboks ---- */
.dok-editor .cdx-warning {
  background: var(--farge-primary-svak);
  border: var(--kant);
  border-left: 3px solid var(--farge-aksent);
  border-radius: var(--radius);
  padding: var(--avstand-3);
}
.dok-editor .cdx-warning::before { display: none; }   /* bibliotekets ⚠-bakgrunnsbilde */
.dok-editor .cdx-warning__title { font-weight: 650; }
.dok-editor .cdx-warning__message { font-size: var(--font-base); color: var(--farge-tekst-dempet); }

/* ---- Kode ---- */
.dok-editor .ce-code__textarea {
  background: var(--farge-overflate);
  border: var(--kant);
  border-radius: var(--radius);
  color: var(--farge-tekst);
  font-family: var(--font-monospace);
  font-size: 13px;
  line-height: 1.5;
  padding: var(--avstand-3);
}

/* ---- Skille ---- */
.dok-editor .ce-delimiter::before { color: var(--farge-tekst-svak); }

/* ---- Tabell ---- */
.dok-editor .tc-wrap {
  --color-border: var(--farge-kant);
  --color-text-secondary: var(--farge-tekst-dempet);
  --color-background: var(--farge-overflate);
  color: var(--farge-tekst);
}
.dok-editor .tc-table { font-size: var(--font-base); }
.dok-editor .tc-cell { padding: 6px 8px; }
.dok-editor .tc-row--heading .tc-cell { background: var(--farge-overflate); font-weight: 600; }
.dok-editor .tc-add-column, .dok-editor .tc-add-row { color: var(--farge-tekst-dempet); }
.dok-editor .tc-add-column:hover, .dok-editor .tc-add-row:hover { background: var(--farge-overflate-hover); }

/* ---- Inline-verktøy med hardkodede lyse farger i pakken ----
   Uten disse er utheving og inline-kode uleselige i mørk modus. */
.dok-editor .cdx-marker {
  background: var(--gul-2, rgba(217, 119, 6, .25));
  color: inherit;
  padding: 1px 2px;
  border-radius: 2px;
}
.dok-editor .inline-code {
  background: var(--farge-overflate);
  color: var(--farge-aksent);
  border: var(--kant);
  border-radius: 3px;
  font-family: var(--font-monospace);
  font-size: .88em;
  padding: 1px 4px;
}
.dok-editor .codex-editor a { color: var(--farge-primary); }

/* ============================ 3. Lesevisning ============================== */

/* Utdrag av et blokk-dokument i dokumentkortet (sider/dokumentasjon.js). Ren
   tekst fra backend — to linjer, så kortet holder høyden i matrisen. */
.dok-utdrag {
  margin: 0;
  font-size: var(--font-liten);
  color: var(--farge-tekst-dempet);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}