/* TMS → Tilbud — fladens egne tilføjelser oven på tms-salgsordre.css og det
   hash-låste grundlag (ADR-0005: ../design/* rettes aldrig). Alle farver via
   husets tokens, så begge temaer bærer (UI-UX-STANDARD § 3). */

/* Spejlets stand: grøn når udskriften kan dannes, gul når den er spærret. */
.spejlbaand { font-size: 12.5px; line-height: 1.5; border-radius: 10px;
  padding: 8px 12px; margin: 2px 0 10px; display: flex; gap: 10px;
  align-items: center; flex-wrap: wrap; }
.spejlbaand:empty { display: none; }
.spejlbaand.ok    { background: var(--pos-flade); color: var(--txt); }
.spejlbaand.advar { background: var(--warn-bg);  color: var(--txt); }
.spejlbaand b { font-weight: 600; }
.spejlbaand .sbtekst { flex: 1 1 420px; min-width: 0; }
.spejlbaand .sbaarsager { margin: 3px 0 3px 18px; padding: 0; }
.spejlbaand .sbaarsager li { margin: 1px 0; overflow-wrap: anywhere; }
.spejlbaand .sbhoved { font-weight: 600; }
.spejlbaand .sbvej { display: block; }
.spejlbaand > .knap { flex: none; align-self: flex-start; }

/* Spejlets stand pr. område — under båndet, uden for live-regionen.
   ⚠ Ingen display-regel her: elementet skjules med `hidden`, og grundlaget har
   ingen [hidden]-regel der kunne vinde over en forfatterregel (UI-UX § 14). */
.spejlomraader { margin: -4px 0 10px; font-size: 12px; }
.spejlomraader > summary { cursor: pointer; color: var(--acc-tekst); width: max-content;
  border-radius: 4px; }
.spejlomraader > summary:focus-visible { outline: 2px solid var(--acc); outline-offset: 2px; }
.spejlomraader .sotabel { overflow-x: auto; margin-top: 6px; }
.spejlomraader .pristabel { width: auto; min-width: min(100%, 760px); }
.spejlomraader .pristabel td, .spejlomraader .pristabel th { white-space: nowrap; }
.spejlomraader .pristabel td:last-child { white-space: normal; }
.spejlomraader .sonote { margin: 6px 0 0; color: var(--txt-3); max-width: 90ch; }

.knap { border: 1px solid var(--line); background: var(--chrome); color: var(--txt);
  border-radius: 8px; padding: 6px 12px; font-size: 12.5px; cursor: pointer;
  display: inline-flex; gap: 6px; align-items: center; min-height: 32px; }
.knap:hover { background: var(--row-hover, var(--win)); }
.knap:focus-visible { outline: 2px solid var(--acc); outline-offset: 2px; }
.knap.lille { padding: 3px 10px; min-height: 26px; }
.knap.primaer { background: var(--acc); border-color: var(--acc); color: #fff; }
.knap.primaer:hover { filter: brightness(1.08); }
.knap:disabled { opacity: .55; cursor: progress; }
.knap .ic { width: 15px; height: 15px; }

.pille { display: inline-block; font-size: 11px; padding: 1px 8px; border-radius: 10px;
  border: 1px solid var(--line); color: var(--txt-2); }
.pille.gaeldende { border-color: var(--pos); color: var(--txt); background: var(--pos-flade); }
.pille.udloebet  { color: var(--txt-3); }
.pille.kommende  { border-color: var(--acc); color: var(--acc-tekst); }
.pille.advar     { border-color: var(--warn); background: var(--warn-bg); color: var(--txt); }
.dim { color: var(--txt-3); }

/* Tilbudskortets pristabeller — samme opstilling som kundens udskrift. */
.prisblok { margin: 4px 0 14px; }
.prisblok h4 { margin: 0 0 2px; font-size: 13px; font-weight: 600; }
.prisblok .akse, .detsek .akse { font-size: 11.5px; color: var(--txt-3); margin: 2px 0 6px; }
.pristabel { border-collapse: collapse; width: 100%; font-size: 12.5px;
  font-variant-numeric: tabular-nums; background: var(--chrome); border-radius: 8px; overflow: hidden; }
.pristabel th, .pristabel td { padding: 4px 10px; border-bottom: 1px solid var(--line-2); text-align: left; }
.pristabel thead th { font-size: 11.5px; font-weight: 600; color: var(--txt-2);
  background: var(--grid-head, var(--win)); }
.pristabel .tal { text-align: right; }
.pristabel th.zone { text-align: center; width: 48px; font-weight: 600; }
.pristabel tr.sum td { font-weight: 600; border-top: 1px solid var(--line); }
.zonetabel td { white-space: normal; }

.doede { margin-top: 8px; padding: 8px 10px; border-radius: 8px; font-size: 12px;
  background: var(--warn-bg); color: var(--txt); }
.doede ul { margin: 4px 0 0 16px; padding: 0; }

.proeve { display: flex; gap: 10px; align-items: flex-end; flex-wrap: wrap; margin-bottom: 6px; }
.proeve .proevegrp { border: 1px solid var(--line); border-radius: 8px; margin: 0;
  padding: 2px 10px 8px; display: flex; gap: 8px; align-items: flex-end; flex-wrap: wrap; }
.proeve legend { font-size: 11.5px; color: var(--txt-2); padding: 0 4px; }
.proeve label { display: flex; flex-direction: column; font-size: 11.5px; color: var(--txt-2); gap: 3px; }
.proeve input { font-size: 13px; padding: 6px 9px; border: 1px solid var(--line); border-radius: 8px;
  background: var(--win); color: var(--txt); min-width: 120px; font-variant-numeric: tabular-nums; }
.proeve input.postnr { min-width: 0; width: 96px; }
.proeve input.smal { min-width: 0; width: 70px; }
.proeve input.land { min-width: 0; width: 52px; text-transform: uppercase; }
/* Fokusringen er ACCENTEN, ikke den 10 %-gennemsigtige `--acc-soft`, som ikke
   når 3:1 mod fladen bagved (UI-UX § 10). */
.proeve input:focus-visible { outline: 2px solid var(--acc); outline-offset: 1px; border-color: var(--acc); }
/* Feltet serveren afviste — farven står aldrig alene: beskeden står under formularen. */
.proeve input[aria-invalid="true"] { border-color: var(--neg-tekst); }
.proeve[aria-busy="true"] { cursor: progress; }
.proevehjaelp, .proevebrug { margin: 0 0 6px; font-size: 11.5px; color: var(--txt-3); }
.proevebrug { margin-top: 6px; }
#proeveSvar.proevefejl { color: var(--neg-tekst); font-size: 12.5px; }

.detraa pre { font-size: 11px; max-height: 280px; overflow: auto; background: var(--chrome);
  padding: 8px; border-radius: 8px; }
.udknapper { display: flex; justify-content: flex-end; gap: 8px; padding: 10px 0 2px; }

/* Udskriftsdialogen. */
#udskriv { border: 1px solid var(--line); border-radius: 12px; padding: 0;
  width: min(560px, calc(100vw - 48px)); background: var(--win); color: var(--txt);
  box-shadow: var(--skygge); }
#udskriv::backdrop { background: rgba(0, 0, 0, .28); }
.udform { padding: 16px 18px; display: flex; flex-direction: column; gap: 10px; }
.udform h2 { margin: 0; font-size: 15px; }
.udkunde { margin: 0; font-weight: 600; }
.udtilbud { border: 1px solid var(--line); border-radius: 8px; padding: 8px 10px;
  display: flex; flex-direction: column; gap: 4px; font-size: 12.5px; }
.udtilbud legend { font-size: 11.5px; color: var(--txt-2); padding: 0 4px; }
.udtilbud label { display: flex; gap: 8px; align-items: center; }
.udsprog { display: flex; flex-direction: column; gap: 3px; font-size: 11.5px; color: var(--txt-2); }
.udsprog select { font-size: 13px; padding: 5px 8px; border-radius: 8px; border: 1px solid var(--line);
  background: var(--chrome); color: var(--txt); max-width: 240px; }
.udbesked { margin: 0; font-size: 12px; color: var(--txt-2); min-height: 16px; }