/* ===================================================================
   Uptime Tilbudsbygger — KOMPONENT-KIT til rige sektioner
   Alt er scopet under .doc-rich, så det ikke kolliderer med appens
   egne styles. Bruges i editoren (index.php), den offentlige
   accept-side (accept.php) og PDF/print.

   AI'en kan generere disse komponenter — se ai_component_kit() i
   helpers.php for det dokumenterede vokabular.
=================================================================== */

.doc-rich {
  /* Egne farver/variabler, så kittet ser ens ud overalt */
  --ink:#16171a; --ink-2:#2b2d31; --ink-soft:#5b5c61; --ink-faint:#8b8c91;
  --red:#da001b; --red-soft:#fbe5e8; --red-2:#b00016;
  --paper:#fff; --mist:#f6f5f4; --mist-2:#efeeec;
  --line:#e6e3e0; --line-2:#cdc9c5;
  --ok:#1f7a54; --ok-soft:#e3f1ea; --warn:#8a6d00; --warn-soft:#f6efd7;

  color:var(--ink);
  font-size:15px;
  line-height:1.68;
}
.doc-rich *{ box-sizing:border-box; }

/* ---- Typografi ---- */
.doc-rich h2,.doc-rich h3,.doc-rich h4{
  font-family:'Bricolage Grotesque','Sora',sans-serif;
  color:var(--ink); letter-spacing:-.015em; font-weight:700;
}
.doc-rich h3{ font-size:17.5px; margin:26px 0 4px; font-weight:600; }
.doc-rich h4{ font-size:17px; margin:6px 0 2px; }
.doc-rich p{ margin:13px 0; }
.doc-rich a{ color:var(--red); text-decoration:none; border-bottom:1px solid var(--red-soft); }
.doc-rich strong{ font-weight:600; }
.doc-rich em{ font-style:italic; color:var(--ink-2); }
.doc-rich .lead{ font-size:17px; color:var(--ink-soft); line-height:1.55; }

/* ---- Lister (firkant-bullets) ---- */
.doc-rich ul{ margin:12px 0; padding-left:0; list-style:none; }
.doc-rich ul li{ position:relative; padding-left:24px; margin:9px 0; }
.doc-rich ul li::before{
  content:""; position:absolute; left:3px; top:9px; width:8px; height:8px;
  border-radius:2px; background:var(--red); transform:rotate(45deg);
}

/* ---- Note-bokse (info / ok / warn) ---- */
.doc-rich .note{
  background:var(--mist); border:1px solid var(--line); border-left:4px solid var(--red);
  border-radius:8px; padding:18px 22px; margin:20px 0;
}
.doc-rich .note.warn{ border-left-color:var(--warn); background:var(--warn-soft); }
.doc-rich .note.ok{ border-left-color:var(--ok); background:var(--ok-soft); }
.doc-rich .note .t{ font-family:'Bricolage Grotesque','Sora',sans-serif; font-weight:600; color:var(--ink); margin-bottom:4px; }

/* ---- Tjekliste (2 kolonner) ---- */
.doc-rich .checks{ display:grid; grid-template-columns:1fr 1fr; gap:9px 26px; margin:14px 0 2px; }
.doc-rich .checks .ci{ display:flex; gap:10px; align-items:baseline; font-size:14px; line-height:1.4; }
.doc-rich .checks .ci::before{ content:"\2713"; color:var(--red); font-weight:700; flex:none; }
.doc-rich .checks .ci .r{ color:var(--ink-faint); font-size:11px; white-space:nowrap; margin-left:4px; }
@media(max-width:640px){ .doc-rich .checks{ grid-template-columns:1fr; } }

/* ---- Tabeller ---- */
.doc-rich .tablewrap{ overflow-x:auto; border:1px solid var(--line); border-radius:12px; margin:20px 0; }
/* Tabeller UDEN .doc-rich-forælder: render_prisramme() i helpers.php og
   accept.php udsender også .tablewrap, og de kan ende uden .doc-rich.
   Uden overflow-x her bliver de klippet i stilhed af
   html,body{overflow-x:hidden} i stedet for at kunne scrolles. */
@media screen{ .tablewrap{ overflow-x:auto; } }
.doc-rich table{ width:100%; border-collapse:collapse; font-size:14.5px; background:#fff; }
.doc-rich th,.doc-rich td{ padding:12px 16px; text-align:left; border-bottom:1px solid var(--line); vertical-align:top; }
.doc-rich th{
  background:var(--ink); color:#fff; font-family:'Bricolage Grotesque','Sora',sans-serif;
  font-weight:500; font-size:11.5px; letter-spacing:.05em; text-transform:uppercase;
}
.doc-rich td.n,.doc-rich th.n{ text-align:right; font-variant-numeric:tabular-nums; white-space:nowrap; }
.doc-rich tbody tr:last-child td{ border-bottom:none; }
.doc-rich tbody tr:nth-child(even){ background:var(--mist); }
.doc-rich tr.total td{ background:var(--red-soft); font-weight:700; color:var(--ink); border-top:2px solid var(--line-2); }
.doc-rich .ph{ font-family:'Bricolage Grotesque','Sora',sans-serif; font-weight:600; color:var(--red); font-size:12px; }
.doc-rich .kref{ display:block; margin-top:7px; font-size:11px; font-weight:600; color:var(--ink-faint); }
.doc-rich .flag{ font-size:10px; background:var(--warn-soft); color:var(--warn); padding:1px 7px; border-radius:5px; margin-left:6px; white-space:nowrap; font-weight:600; }
.doc-rich .tag{ font-size:10.5px; padding:2px 8px; border-radius:5px; white-space:nowrap; font-weight:600; }
.doc-rich .tag.wp{ background:#e4eefa; color:#1d4e85; }
.doc-rich .tag.lara{ background:#fbe5e8; color:#b00016; }

/* ---- Option-/valgkort ---- */
.doc-rich .opts{ display:grid; grid-template-columns:1fr 1fr; gap:16px; margin:22px 0; }
.doc-rich .opt{ border:1px solid var(--line); border-radius:14px; padding:22px; background:#fff; position:relative; display:flex; flex-direction:column; }
.doc-rich .opt .driftline{ margin-top:auto; padding-top:14px; font-family:'Bricolage Grotesque','Sora',sans-serif; font-size:12.5px; font-weight:700; color:var(--red); }
.doc-rich .opt.rec{ border-color:var(--red); box-shadow:0 0 0 1px var(--red); }
.doc-rich .opt .pill{
  position:absolute; top:-11px; left:20px; font-family:'Bricolage Grotesque','Sora',sans-serif;
  font-size:10.5px; font-weight:700; letter-spacing:.05em; text-transform:uppercase;
  background:var(--red); color:#fff; padding:4px 10px; border-radius:20px;
}
.doc-rich .opt .pill.neutral{ background:var(--ink); }
.doc-rich .opt .sub{ font-size:12.5px; color:var(--ink-faint); margin-bottom:10px; }
.doc-rich .opt .price{ font-family:'Bricolage Grotesque','Sora',sans-serif; font-size:24px; font-weight:700; color:var(--ink); margin:8px 0 2px; }
.doc-rich .opt .price small{ font-size:13px; font-weight:500; color:var(--ink-soft); }
.doc-rich .opt ul li{ margin:7px 0; font-size:14px; }
@media(max-width:720px){ .doc-rich .opts{ grid-template-columns:1fr; } }

/* ---- Diagram-ramme (til SVG) ---- */
.doc-rich .diagram{ background:var(--mist); border:1px solid var(--line); border-radius:14px; padding:34px 22px 24px; margin:30px 0; }
.doc-rich .diagram .cap{ font-family:'Bricolage Grotesque','Sora',sans-serif; font-size:11px; letter-spacing:.06em; text-transform:uppercase; color:var(--ink-soft); text-align:center; margin-top:18px; }
.doc-rich svg{ display:block; width:100%; height:auto; }

/* ---- Statistik-stribe ---- */
.doc-rich .strip{ display:grid; grid-template-columns:repeat(4,1fr); gap:1px; background:var(--line); border:1px solid var(--line); border-radius:12px; overflow:hidden; margin:22px 0; }
.doc-rich .strip .c{ background:#fff; padding:18px; }
.doc-rich .strip .c.hl{ background:var(--ink); }
.doc-rich .strip .c .v{ font-family:'Bricolage Grotesque','Sora',sans-serif; font-size:23px; font-weight:700; color:var(--ink); line-height:1; }
.doc-rich .strip .c.hl .v{ color:#fff; }
.doc-rich .strip .c .l{ font-size:11.5px; color:var(--ink-soft); margin-top:7px; }
.doc-rich .strip .c.hl .l{ color:#b9bbc0; }
@media(max-width:640px){ .doc-rich .strip{ grid-template-columns:repeat(2,1fr); } }

/* ---- Tidslinje ---- */
.doc-rich .timeline{ display:grid; grid-template-columns:repeat(4,1fr); gap:1px; background:var(--line); border:1px solid var(--line); border-radius:12px; overflow:hidden; margin:20px 0; }
.doc-rich .timeline .step{ background:#fff; padding:16px; }
.doc-rich .timeline .step .ph{ font-size:11px; }
.doc-rich .timeline .step .ti{ font-family:'Bricolage Grotesque','Sora',sans-serif; font-weight:600; font-size:14px; margin:3px 0 2px; }
.doc-rich .timeline .step .ds{ font-size:12px; color:var(--ink-soft); }
@media(max-width:720px){ .doc-rich .timeline{ grid-template-columns:repeat(2,1fr); } }

/* ---- Logo-væg + cases ---- */
.doc-rich .logos{ display:flex; flex-wrap:wrap; align-items:center; gap:28px 38px; margin:20px 0; padding:24px; background:var(--mist); border:1px solid var(--line); border-radius:12px; justify-content:center; }
.doc-rich .logos img{ height:32px; width:auto; filter:grayscale(1); opacity:.72; transition:.2s; }
.doc-rich .logos img:hover{ filter:none; opacity:1; }
.doc-rich .cases{ display:grid; grid-template-columns:1fr 1fr; gap:14px; margin:16px 0; }
.doc-rich .case{ border:1px solid var(--line); border-radius:10px; padding:15px 18px; background:#fff; }
.doc-rich .case .nm{ font-family:'Bricolage Grotesque','Sora',sans-serif; font-weight:600; color:var(--ink); }
.doc-rich .case .ds{ font-size:13.5px; color:var(--ink-soft); margin-top:3px; }
@media(max-width:640px){ .doc-rich .cases{ grid-template-columns:1fr; } }

/* ---- Billede ---- */
.doc-rich figure{ margin:22px 0; }
.doc-rich img.rich-img,.doc-rich figure img{ width:100%; height:auto; display:block; border-radius:12px; }
.doc-rich figcaption{ font-size:12px; color:var(--ink-faint); text-align:center; margin-top:8px; font-family:'Bricolage Grotesque','Sora',sans-serif; letter-spacing:.04em; }

/* ---- Billedsektion (editor-kontroller) ---- */
.doc-image-placeholder{
  border:1.5px dashed var(--gray-200, #e5e5e5); border-radius:12px;
  padding:36px 20px; text-align:center; color:#9e9e9e; font-size:.9rem; margin-bottom:12px;
}
.doc-image-controls{ background:#f9f9f9; border:1px solid #eee; border-radius:10px; padding:12px; }

/* ---- Billede (ren visning med markér/resize/rediger) ---- */
.doc-image-align{ text-align:center; }   /* default centreret; ændres via align-knapper */
.doc-image-wrap{
  position:relative; display:inline-block; max-width:100%; text-align:left;
  border:2px solid transparent; border-radius:12px; line-height:0;
}
.doc-image-wrap img{ width:100%; height:auto; display:block; border-radius:10px; }
.doc-image-wrap.selected{ border-color:#da001b; box-shadow:0 0 0 3px rgba(218,0,27,.15); }
.doc-image-toolbar{
  position:absolute; top:8px; right:8px; display:flex; gap:4px; align-items:center;
  background:rgba(22,23,26,.82); border-radius:8px; padding:3px 5px;
  opacity:0; transition:opacity .15s; line-height:1; z-index:2;
}
.doc-image-wrap:hover .doc-image-toolbar,
.doc-image-wrap.selected .doc-image-toolbar{ opacity:1; }
.doc-image-toolbar .drag-handle{ color:#cbd5e1; cursor:grab; font-size:1rem; opacity:1; padding:0 2px; }
.img-tool-btn{
  background:none; border:none; color:#fff; cursor:pointer; font-size:.78rem;
  font-family:inherit; padding:3px 6px; border-radius:5px;
}
.img-tool-btn:hover{ background:rgba(255,255,255,.16); }
.img-tool-btn.danger:hover{ background:#da001b; }
.img-tool-btn.on{ background:#da001b; color:#fff; }
.doc-image-cap{ font-size:12px; color:#8b8c91; text-align:center; margin-top:6px; line-height:1.4; }
.doc-image-busy{
  position:absolute; inset:0; display:grid; place-items:center;
  background:rgba(255,255,255,.55); border-radius:10px;
}
.doc-image-resize{
  position:absolute; right:-5px; bottom:-5px; width:16px; height:16px;
  background:#da001b; border:2px solid #fff; border-radius:50%;
  cursor:nwse-resize; opacity:0; transition:opacity .15s; z-index:2;
}
.doc-image-wrap:hover .doc-image-resize,
.doc-image-wrap.selected .doc-image-resize{ opacity:1; }
.doc-image-empty .doc-image-placeholder{
  border:1.5px dashed #d8d5d1; border-radius:12px; padding:24px 16px;
  text-align:center; color:#9e9e9e; font-size:.9rem; margin-bottom:10px;
}

/* ---- Underskriftsfelt ---- */
.doc-sig-field{ max-width:380px; margin:10px 0; }
.doc-sig-box, .doc-sig-box-empty{
  height:90px; border:1.5px dashed #cdc9c5; border-radius:8px;
  display:flex; align-items:center; justify-content:center;
  color:#9e9e9e; font-size:.9rem; background:#fafafa;
}
.doc-sig-img{ max-height:90px; max-width:100%; display:block; }
.doc-sig-typed{
  font-family:'Bricolage Grotesque','Sora',cursive; font-size:1.8rem; color:#16171a;
  padding:8px 4px; min-height:60px; display:flex; align-items:flex-end;
}
.doc-sig-line{
  display:flex; justify-content:space-between; gap:20px;
  border-top:1.5px solid #16171a; margin-top:6px; padding-top:6px;
  font-family:'Bricolage Grotesque','Sora',sans-serif; font-size:.78rem; color:#5b5c61;
}

/* ---- Automatisk underskriftsblok (sidst i flow-dokumenter) ----
   Renderes af render_signature_block() i helpers.php og som read-only
   preview i editoren. Én boks pr. underskriver, to i bredden. */
.doc-signatures{ margin-top:36px; break-inside:avoid; page-break-inside:avoid; }
.doc-signatures-hd{
  font-family:'Bricolage Grotesque','Sora',sans-serif; font-weight:600; font-size:.8rem;
  letter-spacing:.06em; text-transform:uppercase; color:#5b5c61; margin-bottom:14px;
}
.doc-signatures-grid{ display:grid; grid-template-columns:1fr 1fr; gap:24px 40px; }
.doc-signatures .doc-sig-field{ max-width:none; margin:0; }
.doc-signatures .doc-sig-field.is-me .doc-sig-box{ border-color:#c8102e; color:#c8102e; background:#fff7f8; }
.doc-sig-role{ font-size:.74rem; color:#9e9e9e; margin-top:4px; }
@media(max-width:640px){ .doc-signatures-grid{ grid-template-columns:1fr; } }

/* ===================================================================
   PAPIR-SKELET — forside, nummererede headers, kontaktblok, footer.
   Gør et rich-HTML-dokument i stand til at gengive et helt tilbud 1:1
   (ikke kun brødtekst-komponenterne). Bruger husfonten (Bricolage/Hanken),
   ikke referencens Sora/Inter — layout/spacing/farver er identiske.
=================================================================== */

/* ---- Forside (cover) ---- */
.doc-rich .cover .eyebrow,
.doc-rich .eyebrow{
  font-family:'Bricolage Grotesque','Sora',sans-serif;
  font-size:12px; letter-spacing:.26em; text-transform:uppercase;
  color:var(--red); font-weight:600; margin-bottom:18px;
}
.doc-rich .cover h1{
  font-family:'Bricolage Grotesque','Sora',sans-serif;
  font-size:clamp(32px,5.4vw,52px); line-height:1.04; font-weight:800;
  margin:0 0 18px; color:var(--ink); letter-spacing:-.015em;
}
.doc-rich .cover .tagline,
.doc-rich .tagline{
  font-size:18px; color:var(--ink-soft); max-width:620px; margin:0 0 30px; line-height:1.55;
}
.doc-rich .metarow{
  display:flex; flex-wrap:wrap; gap:24px 46px;
  border-top:1px solid var(--line); padding-top:24px; margin-top:8px;
}
.doc-rich .metarow .k{
  font-family:'Bricolage Grotesque','Sora',sans-serif;
  font-size:11px; letter-spacing:.13em; text-transform:uppercase; color:var(--ink-faint); font-weight:600;
}
.doc-rich .metarow .v{
  font-family:'Bricolage Grotesque','Sora',sans-serif;
  font-size:16px; color:var(--ink); margin-top:5px; font-weight:600;
}
.doc-rich .heromock{ width:100%; display:block; margin-top:34px; border-radius:12px; }

/* ---- Nummererede sektions-headers + chip ---- */
.doc-rich .sechead{ display:flex; align-items:center; gap:14px; margin:6px 0 10px; }
.doc-rich .sechead .no{
  font-family:'Bricolage Grotesque','Sora',sans-serif;
  font-size:14px; font-weight:700; color:#fff; background:var(--red);
  width:34px; height:34px; border-radius:9px; display:grid; place-items:center; flex:none;
}
.doc-rich .sechead h2{ font-size:25px; margin:0; font-weight:700; flex:1; }
.doc-rich .chip{
  font-family:'Bricolage Grotesque','Sora',sans-serif;
  font-size:11px; font-weight:600; color:var(--ink-2); background:var(--mist);
  border:1px solid var(--line-2); border-radius:8px; padding:5px 11px;
  white-space:nowrap; display:inline-flex; align-items:center; gap:6px;
}
.doc-rich .chip .b{ color:var(--red); }

/* ---- Kontakt / accept-blok ---- */
.doc-rich .contact{
  display:grid; grid-template-columns:1.1fr 1fr; gap:0;
  border:1px solid var(--line); border-radius:14px; overflow:hidden; margin:22px 0;
}
.doc-rich .contact .l{ background:var(--ink); color:#fff; padding:28px 30px; }
.doc-rich .contact .l img{ height:24px; margin-bottom:18px; filter:brightness(0) invert(1); }
.doc-rich .contact .l .row{ font-size:14px; color:#cfd0d4; margin:6px 0; }
.doc-rich .contact .l .row b{ color:#fff; font-weight:500; }
.doc-rich .contact .r{ padding:28px 30px; background:#fff; }
.doc-rich .contact .r .sig{
  font-family:'Bricolage Grotesque','Sora',sans-serif; font-weight:600; color:var(--ink); font-size:17px; margin-top:6px;
}
.doc-rich .sigline{ height:40px; border-bottom:1.5px solid var(--line-2); margin:12px 0 4px; max-width:240px; }
@media(max-width:640px){ .doc-rich .contact{ grid-template-columns:1fr; } }

/* ---- Footer-metatekst ---- */
.doc-rich .meta-foot{
  color:var(--ink-faint); font-size:12.5px; line-height:1.6;
  border-top:1px solid var(--line); padding-top:22px; margin-top:24px;
}
.doc-rich .meta-foot a{ color:var(--red); }

/* ---- Mobil ------------------------------------------------------
   Kittets seks breakpoints har hidtil KUN ombrudt grids — skrift og
   cellepolstring var faste, også på en telefon. Overskrifterne
   skaleres ned og tabelceller strammes. Brødteksten på 15px
   beholdes med vilje: det er undergrænsen for læsbarhed på mobil.
------------------------------------------------------------------ */
@media screen and (max-width:640px){
  .doc-rich .cover h1{ font-size:clamp(22px,7vw,32px); }
  .doc-rich .cover .tagline,
  .doc-rich .tagline{ font-size:15px; }
  .doc-rich .sechead h2{ font-size:19px; }
  .doc-rich .sechead{ gap:10px; }
  .doc-rich .sechead .no{ width:28px; height:28px; font-size:12px; border-radius:7px; }
  .doc-rich h3{ font-size:16.5px; }
  .doc-rich h4{ font-size:16px; }
  .doc-rich .lead{ font-size:16px; }

  /* 12px/16px gav 32px polstring pr. celle på en 370px bred kolonne */
  .doc-rich th,.doc-rich td{ padding:8px 9px; }
  .doc-rich table{ font-size:13.5px; }

  .doc-rich .note{ padding:14px 16px; }
  .doc-rich .metarow{ gap:16px 24px; padding-top:18px; }
  .doc-rich .contact .l,
  .doc-rich .contact .r{ padding:20px 18px; }
}

/* ---- Print ---- */
@media print{
  .doc-rich .note,.doc-rich .opt,.doc-rich .diagram,.doc-rich .case,
  .doc-rich .strip,.doc-rich .timeline,.doc-rich tr,.doc-rich figure,
  .doc-rich .contact,.doc-rich .metarow,.doc-rich .sechead{ break-inside:avoid; }
  .doc-rich .sechead,.doc-rich .cover h1{ break-after:avoid; }
  .doc-rich h2,.doc-rich h3{ break-after:avoid; break-inside:avoid; }
  .doc-rich p{ orphans:3; widows:3; }
}