/* Arbeidsrommet. Kundens egen stil (kunder/<kunde>/stil/tokens.css) lastes etter denne fila som /stil.css og setter
   variablene. Verdiene her er nøytrale og brukes bare når kunden ikke har en stilmappe. */
:root {
  --bunn: #fbf9f6; --tekst: #2a2522; --overskrift: #2a2522; --dempet: #6a625c; --linje: #ddd5cc; --flate: #f1ece5;
  --topp: #2a2522; --paa-topp: #fbf9f6; --aksent: #6b3a24; --paa-aksent: #ffffff; --lenke: #6b3a24;
  --knapp-radius: 4px; --skrift: system-ui, -apple-system, "Segoe UI", sans-serif; --logo: none; --symbol: none;
  --ordmerke: var(--skrift); --ordmerke-storrelse: 20px;
}
* { box-sizing: border-box; }
[hidden] { display: none !important; }
body { margin: 0; background: var(--bunn); color: var(--tekst); font: 16px/1.55 var(--skrift); }
.topp { display: flex; justify-content: space-between; align-items: center; gap: 16px; padding: 10px 20px;
  background: var(--topp); color: var(--paa-topp); }
.merke { display: flex; align-items: center; gap: 14px; }
.logo { width: 76px; height: 51px; background: var(--logo) center / contain no-repeat; }
.symbol { width: 40px; height: 40px; background: var(--symbol) center / contain no-repeat; }
.navn { font-family: var(--ordmerke); font-weight: 400; font-size: var(--ordmerke-storrelse); line-height: 1; }
.hoyre { display: flex; align-items: center; gap: 18px; }
.topp button.lenke { color: var(--paa-topp); }
main { max-width: 1100px; margin: 0 auto; padding: 24px 20px; }
h1 { font-size: 28px; font-weight: 500; color: var(--overskrift); margin: 24px 0 12px; }
h2 { font-size: 20px; font-weight: 500; color: var(--overskrift); margin: 0 0 12px; }
form { display: grid; gap: 12px; max-width: 420px; }
label { display: grid; gap: 4px; }
.valg { display: flex; gap: 8px; align-items: center; }
input, textarea { font: inherit; padding: 10px 12px; border: 1px solid var(--linje); border-radius: 6px; background: #fff;
  color: var(--tekst); }
input:focus, textarea:focus, button:focus-visible { outline: 2px solid var(--lenke); outline-offset: 1px; }
button { font: inherit; font-weight: 600; font-size: 14px; text-transform: uppercase; letter-spacing: .04em;
  padding: 10px 22px; border: 1px solid var(--aksent); border-radius: var(--knapp-radius); background: var(--aksent);
  color: var(--paa-aksent); cursor: pointer; justify-self: start; }
button:disabled { opacity: .5; }
button.kant { background: transparent; color: var(--tekst); border-width: 2px; }
button.lenke { background: none; border: 0; color: var(--lenke); padding: 0; text-decoration: underline;
  text-transform: none; letter-spacing: 0; font-weight: 500; font-size: 15px; }
.statuslinje { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px 24px;
  padding: 0 0 16px; margin: 0 0 24px; border-bottom: 1px solid var(--linje); }
#status { margin: 0; display: flex; align-items: center; gap: 10px; }
#status::before { content: ""; width: 10px; height: 10px; border-radius: 50%; background: var(--dempet); flex: none; }
#status.i-gang::before { background: var(--lenke); }
#status.stoppet { font-weight: 600; color: var(--overskrift); }
#status.stoppet::before { background: var(--overskrift); }
.statuslinje .knapper { margin: 0; }
.statuslinje form { flex-basis: 100%; grid-template-columns: minmax(0, 240px) auto; align-items: end; max-width: none; }
.spalter { display: grid; grid-template-columns: 1fr 340px; grid-template-rows: auto 1fr; gap: 0 40px; align-items: start; }
.spalter .samtale { grid-column: 1; grid-row: 1 / span 2; }
.spalter .side { grid-column: 2; }
.samtale form { max-width: none; grid-template-columns: 1fr auto; align-items: end; }
#meldinger { list-style: none; margin: 0 0 16px; padding: 0; display: grid; gap: 10px; max-height: 60vh; overflow-y: auto; }
#meldinger li { padding: 10px 14px; border-radius: 10px; max-width: 80%; white-space: pre-wrap; overflow-wrap: anywhere; }
#meldinger .person { background: var(--flate); justify-self: end; }
#meldinger .sjoko { background: #fff; border: 1px solid var(--linje); justify-self: start; }
.side ul { list-style: none; padding: 0; margin: 0 0 24px; display: grid; gap: 12px; }
.side li { display: grid; gap: 6px; padding-bottom: 14px; border-bottom: 1px solid var(--linje); }
.side li.venter { border-left: 3px solid var(--aksent); padding-left: 12px; }
.side li .tittel { font-weight: 500; color: var(--overskrift); }
.side li .tid { margin-top: -4px; }
.side li button { padding: 6px 14px; font-size: 13px; }
.side li button.lenke { padding: 0; justify-self: start; }
.knapper { display: flex; gap: 8px; }
.side ul.detaljer { margin: 0; padding: 0 0 0 14px; gap: 2px; list-style: disc; color: var(--dempet); font-size: 14px; }
.side ul.detaljer li { display: list-item; padding: 0; border: 0; }
.tid { color: var(--dempet); font-size: 14px; }
#liste, #juletilbud, #handlinger, #endringer, #onsker { margin-top: 40px; }
#rom .spalter[hidden] ~ section { margin-top: 0; }  /* rollen mais: ønskene rett under statuslinja */
#meldinger .onske { margin-top: 6px; display: flex; gap: 8px; align-items: center; }
#meldinger .onske button.lenke { font-size: 13px; }
button.lenke.stille { color: var(--dempet); text-decoration: none; }
button.lenke.stille:hover, button.lenke.stille:focus-visible { text-decoration: underline; }
#meldinger .onske select { font: inherit; font-size: 14px; padding: 4px 6px; }
#meldinger .onske button:not(.lenke) { padding: 4px 12px; font-size: 13px; }
#endringer td:first-child { white-space: nowrap; }
#bruk-tekst p { margin: 0 0 6px; }
#handlinger { overflow-x: auto; }
#handlinger td:first-child { white-space: nowrap; }
#jul { display: grid; gap: 20px; max-width: 760px; }
#jul > div { min-width: 0; }
#jul h3 { font-size: 17px; font-weight: 600; color: var(--overskrift); margin: 0 0 6px; }
#jul p { margin: 0 0 6px; }
.brev { white-space: pre-wrap; background: #fff; border: 1px solid var(--linje); padding: 14px 16px; margin: 8px 0 0; }
details summary { cursor: pointer; color: var(--lenke); text-decoration: underline; }
details[open] summary { margin-bottom: 8px; }
#jul table { display: block; overflow-x: auto; margin-top: 12px; }
#jul td:nth-child(2) { overflow-wrap: anywhere; }
table { border-collapse: collapse; width: 100%; font-size: 14px; background: #fff; }
th, td { text-align: left; padding: 8px; border-bottom: 1px solid var(--linje); vertical-align: top; }
th { color: var(--overskrift); font-weight: 600; }
#melding { color: var(--dempet); min-height: 1.5em; }
.skjult { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
@media (max-width: 760px) {
  /* Én spalte i rekkefølgen i HTML: godkjenningene, samtalen og bruken */
  .spalter { grid-template-columns: 1fr; grid-template-rows: none; gap: 28px; }
  .spalter .samtale, .spalter .side { grid-column: auto; grid-row: auto; }
  main { padding: 16px; } .logo { width: 58px; height: 39px; }
  #oppdrag { margin-bottom: 0; }
  .samtale form { grid-template-columns: 1fr; }
  #meldinger li { max-width: 92%; }
  /* Tabellene stables: én rad blir en blokk, og hver celle får kolonnenavnet foran (data-navn fra app.js) */
  table, tbody, tr, td { display: block; width: 100%; } thead { display: none; }
  #jul table { display: block; }
  tr { padding: 8px 0; border-bottom: 1px solid var(--linje); }
  td { border: 0; padding: 2px 10px; }
  td:empty { display: none; }
  td[data-navn]::before { content: attr(data-navn) ": "; color: var(--dempet); }
}