/* ============================================================
   Advokat AI Suite — Delt app-layout stylesheet
   Bruges af: testamente.html, fremtidsfuldmagt.html, bodeling.html, ...

   Styrer: topbar, sidebar, venstre/højre panel, loading,
   buttons, toast, resizer, approve-bar, historik.

   Domæne-specifikke styles (fil-upload, CPR-advarsler osv.)
   forbliver inline i den enkelte HTML-fil.
   ============================================================ */

/* ── Page reset ── */
html, body { height: 100%; overflow: hidden; }
body { display: flex; flex-direction: column; font-size: 13.5px; }

/* ── Topbar ── */
.topbar { height: 50px; border-bottom: 1px solid var(--line); display: flex; align-items: center; padding: 0 22px; gap: 14px; background: var(--navy); flex-shrink: 0; }
.tb-sub { font-size: 11px; color: var(--w3); margin-top: 1px; }
.sys-dot { width: 5px; height: 5px; border-radius: 50%; background: var(--ok); animation: blink 3s infinite; flex-shrink: 0; }
.sys-lbl { font-size: 11px; color: var(--w3); }
@keyframes blink { 0%,100%{opacity:1} 50%{opacity:.25} }

/* ── Page body + Sidebar ── */
.page-body { flex: 1; display: flex; overflow: hidden; }
.sb { width: 236px; min-width: 236px; background: var(--navy); border-right: 1px solid var(--line); display: flex; flex-direction: column; }
.sb-logo { padding: 22px 18px 18px; border-bottom: 1px solid var(--line); }
.logo-row { display: flex; align-items: center; gap: 9px; text-decoration: none; }
.logo-mark { width: 30px; height: 30px; border-radius: 8px; background: var(--accent-a); border: 1px solid var(--accent-ab); display: flex; align-items: center; justify-content: center; flex-shrink: 0; overflow: hidden; }
.logo-mark img { width: 100%; height: 100%; object-fit: cover; border-radius: 7px; display: none; }
.logo-name { font-family: var(--heading-font); font-size: 19px; font-weight: 500; color: var(--w); letter-spacing: .01em; }
.logo-tag { font-size: 10px; color: var(--accent); letter-spacing: .12em; text-transform: uppercase; padding-left: 39px; margin-top: 3px; opacity: .65; }
.sb-sect { padding: 20px 12px 4px; }
.sb-lbl { font-size: 10px; letter-spacing: .13em; text-transform: uppercase; color: var(--w4); padding: 0 8px; margin-bottom: 6px; font-weight: 500; }
.ni { display: flex; align-items: center; gap: 10px; padding: 8px 10px; border-radius: 7px; cursor: pointer; margin-bottom: 1px; transition: background .12s; border: none; outline: none; width: 100%; text-decoration: none; background: transparent; }
.ni:hover:not(.dis) { background: var(--w5); }
.ni.act { background: var(--accent-a); }
.ni.dis { opacity: .35; cursor: default; pointer-events: none; }
.ni-ic { width: 20px; height: 20px; display: flex; align-items: center; justify-content: center; flex-shrink: 0; color: var(--w3); }
.ni.act .ni-ic { color: var(--accent); }
.ni-lbl { font-size: 14.5px; color: var(--w3); flex: 1; letter-spacing: .01em; }
.ni:not(.act):not(.dis) .ni-lbl { color: var(--w2); }
.ni.act .ni-lbl { color: var(--w); font-weight: 500; }
.ni-ic svg { display: block; }
.sb-pill { font-size: 9px; letter-spacing: .06em; text-transform: uppercase; padding: 2px 7px; border-radius: 20px; white-space: nowrap; }
.pill-live { background: var(--ok-a); color: var(--ok); border: 1px solid var(--ok-line); }
.pill-soon { background: var(--w5); color: var(--w4); border: 1px solid var(--line); }
.sb-foot { margin-top: auto; padding: 12px; border-top: 1px solid var(--line); display: flex; align-items: center; justify-content: space-between; }
.user-row { display: flex; align-items: center; gap: 9px; }
.av { width: 28px; height: 28px; border-radius: 50%; background: var(--accent-a); border: 1px solid var(--accent-ab); display: flex; align-items: center; justify-content: center; font-family: var(--heading-font); font-size: 13px; color: var(--accent); font-weight: 500; flex-shrink: 0; }
.u-name { font-size: 12.5px; font-weight: 500; color: var(--w); }
.u-role { font-size: 10.5px; color: var(--w3); }
.icon-btn { background: transparent; border: none; color: var(--w); cursor: pointer; display: flex; align-items: center; justify-content: center; padding: 4px; transition: color .15s; }
.icon-btn:hover { color: var(--accent); }
.icon-btn svg { display: block; width: 18px; height: 18px; }

/* ── Workspace ── */
.ws { flex: 1; display: flex; overflow: hidden; }

/* ── Left Panel ── */
.lp { width: var(--lp-w, 500px); min-width: 300px; max-width: 70%; flex-shrink: 0; display: flex; flex-direction: column; overflow: hidden; }
.lp-top { padding: 22px 24px 0; flex-shrink: 0; }
.lp-title { font-family: var(--heading-font); font-size: 24px; font-weight: 400; color: var(--w); margin-bottom: 5px; line-height: 1.2; }
.lp-desc { font-size: 12px; color: var(--w3); line-height: 1.65; }
.lp-body { flex: 1; overflow-y: auto; padding: 16px 24px; display: flex; flex-direction: column; gap: 13px; }

/* ── Sagsnummer-bar ── */
.sag-bar { display: flex; align-items: center; gap: 10px; padding: 10px 14px; background: var(--w5); border: 1px solid var(--line); border-radius: 9px; transition: border-color .15s; }
.sag-bar:focus-within { border-color: var(--accent-ab); }
.sag-tag { font-size: 10px; letter-spacing: .13em; text-transform: uppercase; color: var(--accent); white-space: nowrap; font-weight: 500; opacity: .85; }
.sag-input { flex: 1; background: transparent; border: none; font-family: 'DM Sans', sans-serif; font-size: 13.5px; font-weight: 500; color: var(--w); outline: none; }
.sag-input::placeholder { color: var(--w3); font-weight: 400; font-size: 13px; }

/* ── Context textarea ── */
.ctx-label { font-size: 10px; letter-spacing: .13em; text-transform: uppercase; color: var(--w3); font-weight: 500; margin-bottom: 6px; }
.ctx-ta { width: 100%; min-height: 210px; max-height: 340px; background: var(--w5); border: 1px solid var(--line); border-radius: 9px; padding: 13px 15px; font-family: 'DM Sans', sans-serif; font-size: 13px; line-height: 1.75; color: var(--w); outline: none; resize: vertical; transition: border-color .15s; }
.ctx-ta:focus { border-color: var(--accent-ab); }
.ctx-ta::placeholder { color: var(--w3); font-size: 12.5px; font-style: italic; }

/* ── Action row ── */
.ctx-row { display: flex; align-items: center; gap: 7px; flex-wrap: wrap; }
.ghost-btn { display: inline-flex; align-items: center; gap: 5px; padding: 5px 11px; border-radius: 6px; background: transparent; border: 1px solid var(--line); font-size: 11.5px; color: var(--w3); cursor: pointer; transition: all .15s; font-family: 'DM Sans', sans-serif; white-space: nowrap; }
.ghost-btn:hover { background: var(--w5); border-color: var(--accent-ab); color: var(--w); }
.ghost-btn svg { display: block; flex-shrink: 0; }

/* ── Generate button ── */
.lp-foot { padding: 0 24px 20px; flex-shrink: 0; }
.gen-hint { font-size: 10.5px; color: var(--w4); text-align: center; margin-bottom: 9px; }
.gen-btn { width: 100%; padding: 12px 20px; background: var(--accent); border: none; border-radius: 9px; color: var(--bg); font-family: 'DM Sans', sans-serif; font-size: 13px; font-weight: 600; letter-spacing: .04em; cursor: pointer; transition: all .18s; display: flex; align-items: center; justify-content: center; gap: 8px; box-shadow: 0 2px 18px var(--accent-a); }
.gen-btn:hover { filter: brightness(1.08); transform: translateY(-1px); box-shadow: 0 6px 26px var(--accent-ab); }
.gen-btn:active { transform: translateY(0); }
.gen-btn:disabled { opacity: .42; cursor: not-allowed; transform: none; box-shadow: none; }

/* ── Resizer ── */
.resizer { width: 5px; flex-shrink: 0; cursor: col-resize; background: var(--line); transition: background .15s; position: relative; z-index: 10; }
.resizer:hover, .resizer.drag { background: var(--accent-ab); }
.resizer::after { content: ''; position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%); width: 1px; height: 44px; border-radius: 1px; background: var(--w4); transition: background .15s; }
.resizer:hover::after, .resizer.drag::after { background: var(--accent); }

/* ── Right Panel ── */
.rp { flex: 1; display: flex; flex-direction: column; overflow: hidden; background: var(--navy); }
.rp-hdr { padding: 13px 18px; border-bottom: 1px solid var(--line); display: flex; align-items: center; gap: 10px; flex-shrink: 0; min-height: 50px; }
.rp-hdr-info { flex: 1; min-width: 0; }
.rp-title { font-size: 13px; font-weight: 500; color: var(--w); }
.rp-meta { font-size: 10.5px; color: var(--w3); margin-top: 1px; }
.rp-acts { display: flex; gap: 5px; }
.rp-btn { display: flex; align-items: center; gap: 4px; padding: 5px 10px; border-radius: 6px; background: transparent; border: 1px solid var(--line); font-size: 11px; color: var(--w3); cursor: pointer; transition: all .15s; font-family: 'DM Sans', sans-serif; white-space: nowrap; }
.rp-btn:hover { border-color: var(--accent-ab); color: var(--w); background: var(--w5); }
.rp-btn svg { display: block; flex-shrink: 0; }

/* ── Empty state ── */
.empty { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 12px; text-align: center; padding: 40px; }
.empty-ico { opacity: .18; }
.empty-ico svg { display: block; margin: 0 auto; }
.empty-t { font-family: var(--heading-font); font-size: 18px; color: var(--w2); }
.empty-d { font-size: 12px; color: var(--w3); line-height: 1.7; }

/* ── Loading state ── */
.loading { flex: 1; display: none; flex-direction: column; align-items: center; justify-content: center; gap: 18px; }
.loading.act { display: flex; }
.spin { width: 36px; height: 36px; border: 1.5px solid var(--accent-a); border-top-color: var(--accent); border-radius: 50%; animation: spin .8s linear infinite; }
@keyframes spin { to{transform:rotate(360deg)} }
.ld-t { font-family: var(--heading-font); font-size: 16px; color: var(--w3); }
.step-list { display: flex; flex-direction: column; gap: 5px; width: 220px; }
.step { display: flex; align-items: center; gap: 8px; padding: 8px 11px; border-radius: 6px; font-size: 12px; color: var(--w3); transition: all .22s; border: 1px solid transparent; }
.step.cur { color: var(--accent-l); background: var(--accent-a); border-color: var(--accent-ab); }
.step.done { color: var(--ok); background: var(--ok-a); border-color: var(--ok-line); }
.step-ic { width: 14px; text-align: center; flex-shrink: 0; }
.step-ic svg { display: block; margin: 0 auto; }

/* ── Result state ── */
.result { display: none; flex-direction: column; flex: 1; overflow: hidden; }
.result.act { display: flex; }

/* ── Validation row ── */
.val-row { margin: 12px 16px 0; padding: 8px 12px; border-radius: 7px; background: var(--ok-a); border: 1px solid var(--ok-line); display: flex; align-items: center; gap: 8px; flex-shrink: 0; }
.val-ic svg { display: block; }
.val-tx { font-size: 12px; color: var(--ok); flex: 1; }
.val-ct { font-size: 10.5px; color: var(--ok); opacity: .55; }

/* ── Warning list ── */
.warn-list { padding: 7px 16px 0; flex-shrink: 0; }
.wi { display: flex; gap: 8px; padding: 7px 10px; border-radius: 6px; background: var(--warn-a); border: 1px solid rgba(212,146,58,.18); margin-bottom: 4px; align-items: flex-start; }
.wi-ic { color: var(--warn); margin-top: 2px; flex-shrink: 0; }
.wi-ic svg { display: block; }
.wi-tx { font-size: 11.5px; color: var(--warn); opacity: .9; line-height: 1.55; }

/* ── Error box ── */
.err-box { margin: 16px; padding: 14px 16px; border-radius: 7px; background: rgba(231,76,60,.08); border: 1px solid rgba(231,76,60,.25); }
.err-box-hdr { font-size: 13px; font-weight: 600; color: #e74c3c; margin-bottom: 8px; }
.err-box-msg { font-size: 12px; color: #e74c3c; opacity: .85; line-height: 1.7; white-space: pre-wrap; font-family: 'DM Sans', monospace; }

/* ── History bar ── */
.hist-bar { padding: 9px 16px; border-top: 1px solid var(--line); display: flex; align-items: center; gap: 8px; flex-shrink: 0; }
.hist-lbl { font-size: 10px; letter-spacing: .12em; text-transform: uppercase; color: var(--w4); white-space: nowrap; }
.hist-items { display: flex; gap: 5px; overflow-x: auto; flex: 1; }
.hist-items::-webkit-scrollbar { height: 0; }
.hitem { padding: 3px 9px; border-radius: 5px; background: var(--w5); border: 1px solid var(--line); font-size: 11px; color: var(--w3); cursor: pointer; transition: all .15s; white-space: nowrap; }
.hitem:hover { background: var(--accent-a); color: var(--accent-l); border-color: var(--accent-ab); }

/* ── Approve bar ── */
.approve-bar { padding: 10px 16px; border-top: 1px solid var(--line); display: flex; gap: 8px; flex-shrink: 0; }
.approve-btn { padding: 9px 20px; border-radius: 7px; background: var(--ok); border: none; color: #fff; font-family: 'DM Sans', sans-serif; font-size: 12.5px; font-weight: 600; cursor: pointer; transition: all .15s; display: flex; align-items: center; gap: 6px; }
.approve-btn:hover:not(:disabled) { filter: brightness(1.1); }
.approve-btn:disabled { opacity: .35; cursor: not-allowed; filter: none; }
.approve-btn svg { display: block; }
.discard-btn { padding: 9px 16px; border-radius: 7px; background: transparent; border: 1px solid var(--line); color: var(--w3); font-family: 'DM Sans', sans-serif; font-size: 12.5px; cursor: pointer; transition: all .15s; }
.discard-btn:hover { border-color: rgba(224,92,92,.4); color: #e05c5c; background: rgba(224,92,92,.06); }
.approve-status { margin: 0 16px; padding: 9px 14px; border-radius: 7px; background: var(--ok-a); border: 1px solid var(--ok-line); display: flex; align-items: center; gap: 8px; font-size: 12.5px; color: var(--ok); font-weight: 500; flex-shrink: 0; animation: popIn .18s ease; }
.approve-status svg { display: block; flex-shrink: 0; }

/* ── Animations ── */
@keyframes popIn { from{opacity:0;transform:translateY(-3px)} to{opacity:1;transform:translateY(0)} }