/* ---------------------------------------------------------------
   Uptime Tilbudsbygger — branding styles
   Primær accent: #DA001B | Baggrund: hvid + lysegrå
--------------------------------------------------------------- */
@import url('https://fonts.googleapis.com/css2?family=Bricolage+Grotesque:wght@400;600;700&family=Hanken+Grotesk:wght@400;500;600&display=swap');

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

:root {
  --red:      #DA001B;
  --red-dark: #b80017;
  --gray-50:  #f9f9f9;
  --gray-100: #f2f2f2;
  --gray-200: #e5e5e5;
  --gray-300: #d4d4d4;
  --gray-400: #9e9e9e;
  --gray-500: #7a7a7a;
  --gray-600: #5a5a5a;
  --gray-700: #3d3d3d;
  --gray-800: #1e1e1e;
  --gray-900: #121212;
  --radius:   6px;
  --shadow:   0 1px 3px rgba(0,0,0,.12);
  --shadow-md:0 4px 12px rgba(0,0,0,.12);
}

html { font-size: 15px; }
body {
  font-family: 'Hanken Grotesk', sans-serif;
  background: var(--gray-100);
  color: var(--gray-800);
  min-height: 100vh;
}

h1, h2, h3, h4 {
  font-family: 'Bricolage Grotesque', sans-serif;
  font-weight: 700;
}

/* ---- Layout ---- */
#app { display: flex; flex-direction: column; min-height: 100vh; }

.topbar {
  background: #fff;
  border-bottom: 2px solid var(--red);
  padding: 0 24px;
  height: 56px;
  display: flex;
  align-items: center;
  gap: 16px;
  position: sticky; top: 0; z-index: 100;
}
.topbar .logo { height: 28px; }
.topbar .brand-name {
  font-family: 'Bricolage Grotesque', sans-serif;
  font-weight: 700;
  font-size: 1.05rem;
  color: var(--gray-800);
  white-space: nowrap;
}
.topbar .spacer { flex: 1; }
.topbar .user-info { font-size: .85rem; color: var(--gray-600); }

/* ---- Topbar: bruger + log ud ---- */
.topbar-user {
  display: flex; align-items: center; gap: 9px;
  background: none; border: 0; padding: 4px 8px; cursor: pointer;
  font: inherit; border-radius: 20px; transition: background .15s;
}
.topbar-user:hover { background: var(--gray-100); }
.topbar-user:hover .user-info { color: var(--gray-800); }
.topbar-avatar {
  width: 28px; height: 28px; flex: none; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  background: var(--gray-800); color: #fff;
  font-size: .72rem; font-weight: 700; letter-spacing: .02em;
}
.topbar-logout {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 7px 13px; border-radius: var(--radius);
  border: 1.5px solid var(--gray-200);
  font-size: .84rem; font-weight: 600; color: var(--gray-600);
  text-decoration: none; white-space: nowrap;
  transition: border-color .15s, color .15s, background .15s;
}
.topbar-logout:hover {
  border-color: var(--red); color: var(--red); background: #fff8f8;
}
.topbar-logout svg { flex: none; }

@media (max-width: 640px) {
  .topbar { padding: 0 14px; gap: 10px; }
  .topbar .brand-name    { display: none; }
  .topbar .user-info     { display: none; }   /* kun initialerne på mobil */
  .topbar-logout span    { display: none; }   /* kun ikonet på mobil */
  .topbar-logout         { padding: 7px 9px; }
}

.main-layout {
  display: flex;
  flex: 1;
}

.sidebar {
  width: 260px;
  min-width: 220px;
  background: #fff;
  border-right: 1px solid var(--gray-200);
  display: flex;
  flex-direction: column;
  padding: 16px 0;
}
.sidebar-nav a, .sidebar-nav button {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 20px;
  width: 100%;
  text-align: left;
  background: none;
  border: none;
  border-radius: 0;
  font-family: inherit;
  font-size: .93rem;
  color: var(--gray-800);
  cursor: pointer;
  transition: background .15s;
  text-decoration: none;
}
.sidebar-nav a:hover, .sidebar-nav button:hover { background: var(--gray-100); }
.sidebar-nav .active { background: #ffeaea; color: var(--red); font-weight: 600; }
.sidebar-section {
  font-size: .72rem;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--gray-400);
  padding: 16px 20px 4px;
}

.content-area {
  flex: 1;
  padding: 28px 32px;
  overflow-y: auto;
  max-width: 1100px;
}

/* ---- Cards ---- */
.card {
  background: #fff;
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 20px 24px;
  margin-bottom: 20px;
}
.card-header {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 16px;
}
.card-header h2 { font-size: 1.15rem; }
.card-header .spacer { flex: 1; }

/* ---- Buttons ---- */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 16px;
  border-radius: var(--radius);
  border: none;
  font-family: inherit;
  font-size: .9rem;
  font-weight: 600;
  cursor: pointer;
  transition: background .15s, opacity .15s;
  text-decoration: none;
  white-space: nowrap;
}
.btn:disabled { opacity: .5; cursor: not-allowed; }
.btn-primary   { background: var(--red); color: #fff; }
.btn-primary:hover:not(:disabled) { background: var(--red-dark); }
.btn-secondary { background: var(--gray-200); color: var(--gray-800); }
.btn-secondary:hover:not(:disabled) { background: var(--gray-200); filter: brightness(.95); }
.btn-ghost  { background: transparent; color: var(--red); border: 1.5px solid var(--red); }
.btn-ghost:hover:not(:disabled) { background: #ffeaea; }
.btn-sm { padding: 5px 11px; font-size: .82rem; }
.btn-danger { background: var(--red); color: #fff; }

/* ---- Forms ---- */
.form-group { margin-bottom: 14px; }
.form-label { display: block; font-size: .85rem; font-weight: 600; margin-bottom: 5px; color: var(--gray-600); }
.form-control {
  width: 100%;
  padding: 8px 11px;
  border: 1.5px solid var(--gray-200);
  border-radius: var(--radius);
  font-family: inherit;
  font-size: .93rem;
  color: var(--gray-800);
  background: #fff;
  transition: border-color .15s;
}
.form-control:focus { outline: none; border-color: var(--red); }
.form-control[readonly] { background: var(--gray-50); }
textarea.form-control { resize: vertical; min-height: 80px; }
.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.form-row.cols-3 { grid-template-columns: 1fr 1fr 1fr; }
.form-row.cols-4 { grid-template-columns: 1fr 1fr 1fr 1fr; }

/* ---- Tables ---- */
.table-wrap { overflow-x: auto; }
table { width: 100%; border-collapse: collapse; font-size: .9rem; }
th { background: var(--gray-100); text-align: left; padding: 8px 10px; font-size: .8rem; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; color: var(--gray-600); }
td { padding: 8px 10px; border-bottom: 1px solid var(--gray-100); vertical-align: middle; }
tr:hover td { background: var(--gray-50); }
tr.active-row td { background: #ffeaea; }

/* ---- Status badges ---- */
.badge {
  display: inline-block;
  padding: 3px 9px;
  border-radius: 30px;
  font-size: .78rem;
  font-weight: 700;
  letter-spacing: .03em;
}
.badge-draft    { background: var(--gray-100); color: var(--gray-600); }
.badge-sent     { background: #fff3cd; color: #856404; }
.badge-accepted { background: #d1fae5; color: #065f46; }
.badge-deleted  { background: #fde2e2; color: #8b0000; }

/* Admin: status som dropdown (ser ud som et badge) */
.status-select {
  border: none; border-radius: 30px;
  padding: 3px 22px 3px 10px; font-size: .78rem; font-weight: 700; letter-spacing: .03em;
  font-family: inherit; cursor: pointer; -webkit-appearance: none; appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath d='M1 1l4 4 4-4' stroke='%23666' stroke-width='1.5' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 8px center;
}
.status-select:focus { outline: 2px solid var(--red); outline-offset: 1px; }

/* ---- Tabs ---- */
.tabs {
  display: flex;
  gap: 2px;
  border-bottom: 2px solid var(--gray-200);
  margin-bottom: 20px;
}
.tab-btn {
  background: none;
  border: none;
  border-bottom: 2px solid transparent;
  margin-bottom: -2px;
  padding: 8px 16px;
  font-family: inherit;
  font-size: .9rem;
  font-weight: 600;
  color: var(--gray-600);
  cursor: pointer;
  transition: color .15s, border-color .15s;
}
.tab-btn.active { color: var(--red); border-bottom-color: var(--red); }
.tab-btn:hover  { color: var(--red); }

/* ---- Chat ---- */
.chat-panel {
  border: 1.5px solid var(--gray-200);
  border-radius: var(--radius);
  display: flex;
  flex-direction: column;
  height: 380px;
}
.chat-messages {
  flex: 1;
  overflow-y: auto;
  padding: 14px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.chat-msg {
  max-width: 80%;
  padding: 8px 12px;
  border-radius: 10px;
  font-size: .88rem;
  line-height: 1.5;
  white-space: pre-wrap;
  word-break: break-word;
}
.chat-msg.user   { background: var(--red); color: #fff; align-self: flex-end; border-bottom-right-radius: 3px; }
.chat-msg.ai     { background: var(--gray-100); color: var(--gray-800); align-self: flex-start; border-bottom-left-radius: 3px; }
.chat-msg.system { background: #fff3cd; color: #856404; align-self: stretch; font-size:.78rem; padding: 8px 12px; border-radius: 4px; white-space: pre-wrap; word-break: break-all; font-family: monospace; }
.chat-input-row {
  display: flex;
  gap: 8px;
  padding: 10px;
  border-top: 1px solid var(--gray-200);
}
.chat-textarea {
  flex: 1;
  resize: vertical;
  border: 1.5px solid var(--gray-200);
  border-radius: var(--radius);
  padding: 7px 10px;
  font-family: inherit;
  font-size: .9rem;
  min-height: 52px;
  max-height: 340px;
}
.chat-textarea:focus { outline: none; border-color: var(--red); }

/* ---- Estimat tabel ---- */
.estimat-table { width: 100%; font-size: .88rem; }
.estimat-table th { background: var(--gray-100); padding: 8px 8px; }
.estimat-table td { padding: 5px 5px; border-bottom: 1px solid var(--gray-100); }
.estimat-table td input, .estimat-table td select {
  width: 100%;
  padding: 5px 7px;
  border: 1.5px solid var(--gray-200);
  border-radius: 4px;
  font-family: inherit;
  font-size: .85rem;
  background: #fff;
}
.estimat-table td input:focus, .estimat-table td select:focus {
  outline: none;
  border-color: var(--red);
}
.estimat-total {
  background: var(--gray-100);
  border-radius: var(--radius);
  padding: 14px 20px;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 6px;
  font-size: .95rem;
  margin-top: 10px;
}
.estimat-total .total-line { display: flex; gap: 20px; }
.estimat-total .total-line strong { min-width: 160px; text-align: right; }
.estimat-total .grand-total { font-size: 1.15rem; font-family: 'Bricolage Grotesque', sans-serif; color: var(--red); }

/* ---- Version list ---- */
.version-list { display: flex; flex-direction: column; gap: 6px; }
.version-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 8px 12px;
  border: 1.5px solid var(--gray-200);
  border-radius: var(--radius);
  font-size: .87rem;
  cursor: pointer;
  transition: background .12s;
}
.version-item:hover { background: var(--gray-50); }
.version-item.current { border-color: var(--red); background: #ffeaea; }
.version-item .ver-no { font-weight: 700; font-size: 1rem; color: var(--red); min-width: 30px; }
.version-item .ver-meta { flex: 1; color: var(--gray-600); font-size: .8rem; }
.version-item .ver-source { font-size: .75rem; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; }
.ver-source.ai     { color: var(--red); }
.ver-source.manual { color: var(--gray-400); }
.ver-source.rollback { color: #856404; }
.ver-source.mcp    { color: #6d28d9; }

/* ---- Aktivitetslog (pr. tilbud + admin-overblik) ---- */
.act-summary {
  display: flex; gap: 10px; flex-wrap: wrap;
  margin: 0 0 16px; padding: 14px 16px;
  background: var(--gray-50); border: 1px solid var(--gray-200); border-radius: var(--radius);
}
.act-stat { flex: 1; min-width: 130px; display: flex; flex-direction: column; gap: 2px; }
.act-stat-n { font-family: 'Bricolage Grotesque', sans-serif; font-weight: 700; font-size: 1.02rem; color: var(--gray-800); }
.act-stat-l { font-size: .7rem; font-weight: 700; text-transform: uppercase; letter-spacing: .07em; color: var(--gray-600); }

.act-list { display: flex; flex-direction: column; gap: 4px; }
.act-item {
  display: flex; gap: 12px; align-items: flex-start;
  padding: 10px 12px; border: 1px solid var(--gray-200); border-radius: var(--radius);
}
.act-item:hover { background: var(--gray-50); }
.act-icon {
  flex: none; width: 30px; height: 30px; border-radius: 8px;
  display: grid; place-items: center; font-size: .95rem;
  background: var(--gray-100);
}
.act-icon.ev-opened   { background: #e0f2fe; }
.act-icon.ev-sent     { background: #fef3c7; }
.act-icon.ev-signed   { background: #ede9fe; }
.act-icon.ev-accepted { background: #d1fae5; }
.act-body { flex: 1; min-width: 0; }
.act-head { font-size: .9rem; color: var(--gray-800); }
.act-actor { color: var(--gray-600); font-weight: 500; }
/* IP og tidspunkt med tabular-nums, så kolonnen ikke hopper mellem rækker */
.act-sub { font-size: .78rem; color: var(--gray-600); margin-top: 2px; font-variant-numeric: tabular-nums; }
.act-detail { font-size: .78rem; color: var(--gray-400); margin-top: 3px; }
.act-quote {
  font-size: .78rem; font-weight: 600; color: var(--red);
  background: none; border: none; padding: 0; cursor: pointer; text-align: left;
}
.act-quote:hover { text-decoration: underline; }
@media screen and (max-width: 640px) {
  .act-stat { min-width: 100%; }
  .act-item { padding: 9px 10px; gap: 9px; }
}

/* ---- Opgaver list ---- */
.opgave-item {
  border: 1.5px solid var(--gray-200);
  border-radius: var(--radius);
  margin-bottom: 10px;
}
.opgave-header {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 14px;
  background: var(--gray-50);
  border-bottom: 1px solid var(--gray-200);
}
.opgave-header input { font-weight: 700; flex: 1; }
.opgave-body { padding: 12px 14px; display: flex; flex-direction: column; gap: 8px; }
.opgave-body textarea { font-size: .88rem; min-height: 60px; }

/* ---- Quote overview ---- */
.quote-list-item {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 12px 0;
  border-bottom: 1px solid var(--gray-100);
  cursor: pointer;
  transition: background .1s;
}
.quote-list-item:hover { background: var(--gray-50); }
.quote-list-item .q-title { font-weight: 700; font-size: .97rem; }
.quote-list-item .q-customer { font-size: .83rem; color: var(--gray-600); }
.quote-list-item .q-date { font-size: .8rem; color: var(--gray-400); margin-left: auto; white-space: nowrap; }

/* ---- Alert / notice ---- */
.alert { padding: 10px 14px; border-radius: var(--radius); font-size: .88rem; margin-bottom: 12px; }
.alert-error   { background: #ffeaea; color: #8b0000; border-left: 3px solid var(--red); }
.alert-success { background: #d1fae5; color: #065f46; border-left: 3px solid #10b981; }
.alert-info    { background: #eff6ff; color: #1e40af; border-left: 3px solid #3b82f6; }

/* ---- Login page ---- */
.login-wrap {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--gray-100);
}
.login-card {
  background: #fff;
  border-radius: var(--radius);
  box-shadow: var(--shadow-md);
  padding: 40px 36px;
  width: 360px;
  max-width: 100%;
}
.login-logo { display: block; height: 36px; margin: 0 auto 24px; }
.login-title { font-size: 1.3rem; text-align: center; margin-bottom: 24px; }

/* ---- Login: 2FA-trin, glemt adgangskode ---- */
.login-2fa-lead {
  font-size: .9rem; line-height: 1.55; color: var(--gray-600);
  text-align: center; margin: -8px 0 20px;
}
.login-code-input {
  text-align: center; font-family: Consolas, Menlo, monospace;
  font-size: 1.6rem; letter-spacing: .38em; padding: 12px 8px;
  text-indent: .38em;   /* modvirker at letter-spacing skubber teksten venstre */
}
.login-trust {
  display: flex; align-items: center; gap: 8px;
  font-size: .86rem; color: var(--gray-600);
  margin: 4px 0 18px; cursor: pointer; user-select: none;
}
.login-trust input { width: 15px; height: 15px; flex: none; cursor: pointer; }
.login-links {
  margin-top: 18px; text-align: center;
  font-size: .86rem; color: var(--gray-600);
}
.login-links a { color: var(--gray-600); text-decoration: underline; }
.login-links a:hover { color: var(--red); }
.login-link-btn {
  background: none; border: 0; padding: 0; cursor: pointer;
  font: inherit; color: var(--gray-600); text-decoration: underline;
}
.login-link-btn:hover { color: var(--red); }
.login-link-sep { margin: 0 8px; opacity: .5; }

/* ================================================================
   MIN KONTO — profil + sikkerhed
================================================================ */
.acct { max-width: 620px; }

/* ---- Hero ---- */
.acct-hero {
  display: flex; align-items: center; gap: 14px;
  padding: 18px 20px; margin-bottom: 18px;
  background: #fff; border: 1px solid var(--gray-200);
  border-radius: 10px; box-shadow: var(--shadow);
}
.acct-avatar {
  width: 48px; height: 48px; flex: none; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  background: var(--gray-800); color: #fff;
  font-size: 1.05rem; font-weight: 700; letter-spacing: .02em;
}
.acct-hero-txt { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.acct-hero-name { font-size: 1.05rem; font-weight: 700; }
.acct-hero-mail {
  font-size: .85rem; color: var(--gray-500);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.acct-role {
  flex: none; font-size: .74rem; font-weight: 700; text-transform: uppercase;
  letter-spacing: .04em; padding: 5px 10px; border-radius: 20px;
  background: var(--gray-100); color: var(--gray-600);
}
.acct-role.admin { background: #ffeaea; color: var(--red); }

/* ---- Faner ---- */
.acct-tabs {
  display: flex; gap: 4px; margin-bottom: 18px;
  border-bottom: 1px solid var(--gray-200);
}
.acct-tabs button {
  background: none; border: 0; cursor: pointer;
  padding: 10px 16px; font: inherit; font-size: .92rem; font-weight: 600;
  color: var(--gray-500); border-bottom: 2px solid transparent;
  margin-bottom: -1px; transition: color .15s, border-color .15s;
}
.acct-tabs button:hover { color: var(--gray-800); }
.acct-tabs button.active { color: var(--red); border-bottom-color: var(--red); }

/* ---- Kort ---- */
.acct-panel { display: flex; flex-direction: column; gap: 14px; }
.acct-card {
  background: #fff; border: 1px solid var(--gray-200);
  border-radius: 10px; padding: 18px 20px;
}
.acct-card-hd { margin-bottom: 16px; }
.acct-card-hd h3 { font-size: 1rem; margin: 0 0 3px; }
.acct-card-hd p  { font-size: .85rem; color: var(--gray-500); margin: 0; }

/* ---- Rækker med ikon + beskrivelse ---- */
.acct-row { display: flex; align-items: center; gap: 13px; }
.acct-row-icon {
  width: 38px; height: 38px; flex: none; border-radius: 9px;
  display: flex; align-items: center; justify-content: center;
  background: var(--gray-100); font-size: 1.05rem;
}
.acct-row-txt { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.acct-row-txt strong { font-size: .94rem; }
.acct-row-txt span   { font-size: .83rem; color: var(--gray-500); line-height: 1.45; }
.acct-pill {
  flex: none; font-size: .72rem; font-weight: 700; text-transform: uppercase;
  letter-spacing: .04em; padding: 4px 9px; border-radius: 20px;
}
.acct-pill.ok { background: #e8f6ee; color: #1e7a4b; }

/* ---- Udvid/fold ---- */
.acct-reveal {
  margin-top: 18px; padding-top: 18px;
  border-top: 1px solid var(--gray-200);
}
.acct-disclose {
  margin-top: 14px; background: none; border: 0; padding: 0; cursor: pointer;
  font: inherit; font-size: .86rem; font-weight: 600; color: var(--gray-600);
  display: inline-flex; align-items: center; gap: 6px;
}
.acct-disclose:hover { color: var(--red); }
.acct-disclose-caret { transition: transform .15s; display: inline-block; }
.acct-disclose-caret.open { transform: rotate(90deg); }
.acct-inline-link {
  background: none; border: 0; padding: 0; cursor: pointer;
  font: inherit; color: inherit; text-decoration: underline; font-weight: 600;
}

/* ---- Knapper, beskeder, hjælpetekst ---- */
.acct-actions { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-top: 4px; }
.acct-flash { font-size: .85rem; font-weight: 600; }
.acct-flash.ok  { color: #1e7a4b; }
.acct-flash.err { color: var(--red); }
.acct-flash.block { display: block; margin-top: 14px; }
.acct-warn {
  margin-top: 14px; padding: 11px 13px; font-size: .85rem; line-height: 1.5;
  background: #fdecea; color: #97231a; border-radius: var(--radius);
}
.acct-note { margin: 16px 0 0; font-size: .82rem; color: var(--gray-500); line-height: 1.5; }
.form-hint {
  display: block; margin-top: 5px;
  font-size: .8rem; color: var(--gray-500); line-height: 1.45;
}
.form-hint a { color: var(--gray-600); text-decoration: underline; }
.form-hint a:hover { color: var(--red); }

/* ---- 2FA: metodevalg ---- */
.twofa-methods { display: grid; gap: 10px; }
.twofa-method {
  display: flex; align-items: flex-start; gap: 11px;
  padding: 13px 14px; border: 1.5px solid var(--gray-200);
  border-radius: var(--radius); cursor: pointer; transition: border-color .15s, background .15s;
}
.twofa-method:hover { border-color: var(--gray-300); }
.twofa-method.sel { border-color: var(--red); background: #fffafa; }
.twofa-method input { margin-top: 3px; flex: none; cursor: pointer; }
.twofa-method-body { display: flex; flex-direction: column; gap: 3px; }
.twofa-method-body strong { font-size: .92rem; }
.twofa-method-hint { font-size: .82rem; color: var(--gray-500); line-height: 1.45; }

/* ---- 2FA: opsætning af app ---- */
.twofa-setup {
  margin-top: 16px; padding: 18px;
  background: var(--gray-50); border: 1px solid var(--gray-200);
  border-radius: var(--radius);
  display: flex; flex-direction: column; gap: 20px;
}
.twofa-step { display: flex; gap: 13px; align-items: flex-start; }
.twofa-step-no {
  width: 24px; height: 24px; flex: none; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  background: var(--gray-800); color: #fff;
  font-size: .78rem; font-weight: 700; margin-top: 1px;
}
.twofa-step strong { font-size: .92rem; }
.twofa-step p { font-size: .84rem; color: var(--gray-500); margin: 3px 0 11px; line-height: 1.45; }
.twofa-qr {
  display: inline-block; padding: 12px; background: #fff;
  border: 1px solid var(--gray-200); border-radius: 6px; line-height: 0;
}
.twofa-qr img, .twofa-qr canvas { display: block; }
.twofa-manual { margin-top: 13px; }
.twofa-manual summary {
  cursor: pointer; font-size: .83rem; font-weight: 600; color: var(--gray-600);
}
.twofa-manual summary:hover { color: var(--red); }
.twofa-manual p { margin: 10px 0 7px; }
.twofa-secret {
  display: inline-block; font-family: Consolas, Menlo, monospace;
  font-size: .95rem; letter-spacing: .06em;
  background: #fff; border: 1px solid var(--gray-200);
  border-radius: 5px; padding: 9px 13px; user-select: all;
  word-break: break-all;
}
.twofa-confirm { display: flex; gap: 9px; align-items: center; flex-wrap: wrap; }
.twofa-confirm .login-code-input { max-width: 180px; font-size: 1.25rem; }

@media (max-width: 640px) {
  .acct-hero { flex-wrap: wrap; }
  .acct-row { flex-wrap: wrap; }
  .acct-row .spacer { display: none; }
}

/* ---- Section labels ---- */
.section-label {
  font-size: .72rem;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--gray-400);
  margin-bottom: 6px;
}

/* ---- Publish info ---- */
.publish-url-box {
  display: flex;
  align-items: center;
  gap: 8px;
  background: var(--gray-100);
  border-radius: var(--radius);
  padding: 10px 14px;
  margin-top: 10px;
}
.publish-url-box code { flex: 1; font-size: .84rem; word-break: break-all; }

/* ---- Underskrift-status (sammenfoldet) ---- */
.signing-status {
  display: flex; align-items: center; gap: 8px; cursor: pointer;
  background: var(--gray-100); border: 1px solid var(--gray-200);
  border-radius: var(--radius); padding: 9px 14px; font-size: .92rem;
}
.signing-status:hover { background: #efeeec; }
.signing-status-details {
  border: 1px solid var(--gray-200); border-top: none;
  border-radius: 0 0 var(--radius) var(--radius); background: #fff; padding: 4px 14px;
}
.signing-row { display: flex; align-items: center; gap: 8px; padding: 8px 0; font-size: .9rem; }
.signing-row + .signing-row { border-top: 1px solid var(--gray-100); }
.signing-status-dot { flex: none; width: 9px; height: 9px; border-radius: 50%; background: #f59e0b; }
.signing-status-dot.all  { background: #10b981; }
.signing-status-dot.wait { background: #f59e0b; }

/* ---- Misc ---- */
.text-red { color: var(--red); }
.text-muted { color: var(--gray-400); font-size: .85rem; }
.mt-8 { margin-top: 8px; }
.mt-16 { margin-top: 16px; }
.mt-24 { margin-top: 24px; }
.mb-8 { margin-bottom: 8px; }
.mb-16 { margin-bottom: 16px; }
.flex { display: flex; }
.flex-1 { flex: 1; }
.items-center { align-items: center; }
.gap-8 { gap: 8px; }
.gap-12 { gap: 12px; }
.gap-16 { gap: 16px; }
.flex-wrap { flex-wrap: wrap; }
.hidden { display: none; }
.loading-spin {
  display: inline-block;
  width: 18px; height: 18px;
  border: 2.5px solid var(--gray-200);
  border-top-color: var(--red);
  border-radius: 50%;
  animation: spin .7s linear infinite;
  vertical-align: middle;
}
@keyframes spin { to { transform: rotate(360deg); } }

.divider { height: 1px; background: var(--gray-200); margin: 16px 0; }

/* ---- Inline edit textarea ---- */
.inline-edit {
  width: 100%;
  border: none;
  border-bottom: 1.5px dashed var(--gray-200);
  border-radius: 0;
  background: transparent;
  font-family: 'Hanken Grotesk', sans-serif;
  font-size: inherit;
  color: var(--gray-800);
  resize: vertical;
  padding: 4px 0;
  transition: border-color .15s;
}
.inline-edit:focus { outline: none; border-bottom-color: var(--red); background: var(--gray-50); }
.inline-edit.heading { font-family: 'Bricolage Grotesque', sans-serif; font-weight: 700; font-size: 1.15rem; }

/* Responsive */
@media(max-width: 768px) {
  .sidebar { display: none; }
  .content-area { padding: 16px; }
  .form-row, .form-row.cols-3, .form-row.cols-4 { grid-template-columns: 1fr; }
}

/* ================================================================
   WYSIWYG DOCUMENT EDITOR
================================================================ */

/* ---- Editor action bar ---- */
.editor-bar {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 8px 14px;
  background: #fff;
  border-bottom: 2px solid var(--red);
  position: sticky;
  top: 0;
  z-index: 90;
  flex-wrap: wrap;
}
.editor-title-input {
  font-family: 'Bricolage Grotesque', sans-serif;
  font-weight: 700;
  font-size: .97rem;
  border: none;
  background: transparent;
  color: var(--gray-800);
  flex: 1;
  min-width: 120px;
  padding: 4px 6px;
  border-radius: 3px;
  transition: background .12s;
}
.editor-title-input:focus { outline: none; background: var(--gray-100); }

/* ---- Grundlag panel ---- */
.grundlag-panel {
  background: var(--gray-50);
  border-bottom: 1px solid var(--gray-200);
  padding: 20px 24px;
}
.grundlag-inner { max-width: 1060px; }

/* ---- Document page background ---- */
.doc-page-bg {
  background: #edecea;
  min-height: calc(100vh - 50px);
  padding: 32px 24px 64px;
}

/* ---- Document wrapper ---- */
.doc-wrap {
  max-width: 900px;
  margin: 0 auto;
  background: #fff;
  box-shadow: 0 2px 24px rgba(0,0,0,.13);
  border-radius: 3px;
  /* clip (ikke hidden!) klipper hjørner/redbar UDEN at bryde position:sticky
     på indhold (fx WYSIWYG-toolbaren). hidden gjorde .doc-wrap til
     sticky-kontekst, så toolbaren scrollede væk. */
  overflow: clip;
  position: relative;
}

/* ---- Cover ---- */
.doc-cover {
  padding: 56px 60px 48px;
  background: #fff;
  border-top: 5px solid var(--red);
}
.doc-logo {
  height: 30px;
  margin-bottom: 52px;
  display: block;
}
.doc-eyebrow {
  font-family: 'Bricolage Grotesque', sans-serif;
  font-size: .7rem;
  letter-spacing: .3em;
  text-transform: uppercase;
  color: var(--red);
  margin-bottom: 14px;
}
.doc-title-input {
  display: block;
  width: 100%;
  border: none;
  font-family: 'Bricolage Grotesque', sans-serif;
  font-size: clamp(28px, 4.5vw, 46px);
  font-weight: 700;
  color: var(--gray-800);
  line-height: 1.05;
  padding: 4px 0;
  background: transparent;
  letter-spacing: -.01em;
  transition: background .12s;
}
.doc-title-input:hover  { background: rgba(218,0,27,.03); }
.doc-title-input:focus  { outline: none; background: rgba(218,0,27,.04); }
.doc-tagline-input {
  display: block;
  width: 100%;
  border: none;
  font-size: 1.1rem;
  color: var(--gray-600);
  background: transparent;
  margin-top: 14px;
  font-family: 'Hanken Grotesk', sans-serif;
  line-height: 1.65;
  overflow: hidden;
  transition: background .12s;
}
.doc-tagline-input:hover { background: rgba(218,0,27,.03); }
.doc-tagline-input:focus { outline: none; background: rgba(218,0,27,.04); }
.doc-meta-strip {
  display: flex;
  flex-wrap: wrap;
  gap: 36px;
  align-items: flex-start;
  justify-content: space-between;
  border-top: 1px solid var(--gray-200);
  padding-top: 22px;
  margin-top: 36px;
}
.doc-cust-block { display: flex; align-items: flex-start; gap: 14px; }
.doc-cust-logo {
  height: 48px; width: auto; max-width: 160px; object-fit: contain;
  border-radius: 4px; flex: none;
}
.doc-cust-lines {
  margin-top: 4px; font-size: .85rem; color: var(--gray-600); line-height: 1.5;
}
.doc-cust-lines span { display: block; }
.doc-meta-date { text-align: right; margin-left: auto; }
.doc-meta-k {
  display: block;
  font-family: 'Bricolage Grotesque', sans-serif;
  font-size: .66rem;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--gray-400);
}
.doc-meta-v {
  display: block;
  font-size: .95rem;
  font-weight: 600;
  color: var(--gray-800);
  margin-top: 4px;
}

/* ---- Sections ---- */
.doc-section {
  padding: 40px 60px 32px;
  border-top: 1px solid var(--gray-200);
}
/* Billedsektioner: ingen grå streg over + lidt mindre top-luft */
.doc-section.sec-noborder { border-top: none; padding-top: 16px; }

/* Låst for redigering (status = godkendt) */
.doc-readonly-banner {
  background: #d1fae5; color: #065f46; font-weight: 600; font-size: .88rem;
  padding: 11px 20px; border-bottom: 1px solid #a7f3d0;
}

/* Samtidig redigering: tre tilstande med hver sin farve, så man kan se
   forskel på et øjekast. "locked" = en anden har låsen (blå, informativ),
   "newer" = nyere version findes (gul, handling anbefales),
   "warn" = du ser en GAMMEL version og er ved at overskrive (rød, farligt). */
.doc-collab-banner {
  display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
  font-size: .88rem; font-weight: 500; line-height: 1.45;
  padding: 11px 20px; border-bottom: 1px solid transparent;
}
.doc-collab-banner .dcb-icon { font-size: 1.05rem; flex: none; }
.doc-collab-banner .dcb-text { flex: 1; min-width: 200px; }
.doc-collab-banner.locked { background: #e0f2fe; color: #075985; border-bottom-color: #bae6fd; }
.doc-collab-banner.newer  { background: #fef3c7; color: #78350f; border-bottom-color: #fde68a; }
.doc-collab-banner.warn   { background: #fee2e2; color: #7f1d1d; border-bottom-color: #fecaca; }
/* Bjælkerne ligger inde i .doc-wrap, som bliver skrivebeskyttet — uden dette
   ville .is-readonly's pointer-events:none også slå "Overtag redigering" fra,
   altså netop den knap man har brug for. */
.doc-wrap.is-readonly .doc-collab-banner,
.doc-wrap.is-readonly .doc-collab-banner .btn { pointer-events: auto !important; }
@media print { .doc-collab-banner { display: none !important; } }
.doc-wrap.is-readonly input,
.doc-wrap.is-readonly textarea,
.doc-wrap.is-readonly select,
.doc-wrap.is-readonly .editable-prose,
.doc-wrap.is-readonly .doc-title-input,
.doc-wrap.is-readonly .doc-tagline-input { pointer-events: none !important; }
.doc-wrap.is-readonly .sec-ai-btn,
.doc-wrap.is-readonly .sec-del-btn,
.doc-wrap.is-readonly .drag-handle,
.doc-wrap.is-readonly .doc-image-toolbar,
.doc-wrap.is-readonly .doc-image-resize,
.doc-wrap.is-readonly .doc-image-empty,
.doc-wrap.is-readonly .doc-section .btn,
.doc-wrap.is-readonly .doc-del-btn { display: none !important; }

/* Låst PDF-dokument i editoren */
.pdf-lock-bar {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  background: #fff3cd; color: #856404; border-bottom: 1px solid #f0e0a8;
  padding: 12px 18px; font-size: .9rem;
}
.pdf-sigfield-edit {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  padding: 10px 18px; background: #fff; border-bottom: 1px solid var(--gray-200);
}
/* PDF.js render-område */
.pdf-doc { position: relative; padding: 20px; display: flex; flex-direction: column; align-items: center; gap: 18px; }
.pdf-loading { padding: 40px; color: var(--gray-600); }
.pdf-page { position: relative; box-shadow: 0 2px 12px rgba(0,0,0,.18); background: #fff; }
.pdf-page canvas { display: block; }
/* Placerbart underskriftsfelt (overlay) */
.pdf-sigfield {
  position: absolute; box-sizing: border-box;
  border: 2px dashed var(--red); background: rgba(218,0,27,.07);
  border-radius: 4px; cursor: move; display: flex; align-items: center; justify-content: center;
  min-width: 60px; min-height: 28px; user-select: none;
}
.pdf-sigfield.sel { background: rgba(218,0,27,.14); box-shadow: 0 0 0 2px rgba(218,0,27,.3); }
.pdf-sigfield-label {
  font-family: 'Bricolage Grotesque', sans-serif; font-size: .72rem; font-weight: 600;
  color: var(--red); pointer-events: none; white-space: nowrap; overflow: hidden; padding: 0 4px;
}
.pdf-sigfield-resize {
  position: absolute; right: -6px; bottom: -6px; width: 14px; height: 14px;
  background: var(--red); border: 2px solid #fff; border-radius: 50%; cursor: nwse-resize;
}
.pdf-sigfield-sig { max-width: 100%; max-height: 100%; object-fit: contain; pointer-events: none; }
/* Tekstfelt */
.pdf-sigfield.is-text { border-color: #64748b; background: rgba(100,116,139,.08); justify-content: flex-start; }
.pdf-textfield-content { font-size: .82rem; color: #16171a; padding: 0 6px; white-space: nowrap; overflow: hidden; pointer-events: none; }
/* Underskrevet/readonly: ren visning uden boks */
.pdf-sigfield.ro { border: none !important; background: transparent !important; box-shadow: none !important; }
/* Inline-editor ved feltet */
.pdf-field-pop {
  position: absolute; top: calc(100% + 6px); left: 0; z-index: 10;
  display: flex; gap: 6px; align-items: center; cursor: default;
  background: #1e293b; padding: 6px; border-radius: 8px; box-shadow: 0 6px 20px rgba(0,0,0,.32);
}
.pdf-field-pop.above { top: auto; bottom: calc(100% + 6px); }
.pdf-field-pop .form-control { width: 220px; font-size: .85rem; padding: 6px 8px; margin: 0; }
.pdf-field-pop-del { background: none; border: none; color: #fca5a5; cursor: pointer; font-size: 1rem; line-height: 1; padding: 0 4px; }
.pdf-field-pop-del:hover { color: #ef4444; }
.doc-seclabel {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 16px;
}
.doc-seclabel-sub {
  margin-top: 20px;
  margin-bottom: 8px;
}

/* ---- Section AI button + dialog ---- */
.sec-ai-btn {
  margin-left: auto;
  background: none;
  border: 1px solid var(--gray-200);
  border-radius: 5px;
  padding: 3px 10px;
  font-size: .76rem;
  font-family: inherit;
  cursor: pointer;
  color: var(--gray-600);
  transition: all .15s;
  flex: none;
  white-space: nowrap;
}
.sec-ai-btn:hover { background: #fff0f1; border-color: var(--red); color: var(--red); }
.sec-ai-btn-sm { font-size: .72rem; padding: 2px 8px; }

.sec-ai-dialog {
  background: #fff;
  border: 1.5px solid var(--red);
  border-radius: 8px;
  padding: 12px 14px;
  margin-bottom: 14px;
  box-shadow: 0 4px 16px rgba(218,0,27,.08);
}
.sec-ai-input {
  width: 100%;
  border: 1px solid var(--gray-200);
  border-radius: 4px;
  padding: 7px 10px;
  font-family: inherit;
  font-size: .88rem;
  resize: none;
  line-height: 1.5;
  display: block;
}
.sec-ai-input:focus { outline: none; border-color: var(--red); }
.sec-ai-actions { display: flex; gap: 8px; margin-top: 8px; align-items: center; }
.sec-ai-quickpicks {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
  margin-bottom: 8px;
}
.sec-ai-quickpicks button {
  background: var(--gray-100);
  border: 1px solid var(--gray-200);
  border-radius: 4px;
  padding: 3px 10px;
  font-family: inherit;
  font-size: .78rem;
  cursor: pointer;
  transition: all .12s;
}
.sec-ai-quickpicks button:hover { background: #fff0f1; border-color: var(--red); color: var(--red); }

/* ---- Architecture box ---- */
.doc-arch-box {
  background: var(--gray-50);
  border: 1px solid var(--gray-200);
  border-radius: 10px;
  padding: 20px 24px 14px;
  margin: 6px 0 14px;
  cursor: pointer;
  transition: border-color .15s;
}
.doc-arch-box:hover { border-color: var(--red); }
.doc-arch-svg svg { display: block; width: 100%; height: auto; }
.doc-arch-cap {
  text-align: center;
  font-family: 'Bricolage Grotesque', sans-serif;
  font-size: .65rem;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--gray-400);
  margin-top: 10px;
}
.doc-arch-empty {
  background: var(--gray-50);
  border: 1.5px dashed var(--gray-200);
  border-radius: 10px;
  padding: 24px;
  text-align: center;
  cursor: pointer;
  transition: border-color .15s;
  margin: 6px 0 14px;
}
.doc-arch-empty:hover { border-color: var(--red); }
.doc-sec-no {
  width: 28px;
  height: 28px;
  background: var(--red);
  color: #fff;
  border-radius: 7px;
  display: grid;
  place-items: center;
  font-family: 'Bricolage Grotesque', sans-serif;
  font-size: .8rem;
  font-weight: 700;
  flex: none;
}
.doc-sec-title { font-size: 1.3rem; margin: 0; }
/* Inline-redigerbar sektionstitel — ser ud som overskriften, men kan klikkes og skrives i */
.doc-sec-title-input {
  flex: 1;
  font-family: 'Bricolage Grotesque', sans-serif;
  font-weight: 700;
  color: var(--gray-800);
  background: transparent;
  border: none;
  border-bottom: 1.5px solid transparent;
  border-radius: 0;
  padding: 2px 4px;
  margin: 0;
  outline: none;
  transition: border-color .15s, background .15s;
}
.doc-sec-title-input:hover { border-bottom-color: var(--gray-200); }
.doc-sec-title-input:focus { border-bottom-color: var(--red); background: #fff7f7; }
.doc-h3 {
  font-size: 1rem;
  margin: 22px 0 6px;
  color: var(--gray-800);
}

/* ---- Editable prose (document textareas) ---- */
.editable-prose {
  width: 100%;
  border: none;
  background: transparent;
  font-family: 'Hanken Grotesk', sans-serif;
  font-size: .97rem;
  line-height: 1.72;
  color: var(--gray-800);
  overflow: hidden;
  padding: 6px 8px;
  border-radius: 4px;
  transition: background .12s, box-shadow .12s;
  min-height: 36px;
}
.editable-prose:hover { background: rgba(218,0,27,.03); cursor: text; }
.editable-prose:focus { outline: none; background: rgba(218,0,27,.04); box-shadow: inset 0 -2px 0 var(--red); }
::placeholder { color: var(--gray-400); opacity: 1; }

/* ---- Editable heading inputs ---- */
.editable-heading-input {
  display: block;
  flex: 1;
  border: none;
  background: transparent;
  font-family: 'Bricolage Grotesque', sans-serif;
  font-size: 1rem;
  font-weight: 700;
  color: var(--gray-800);
  padding: 4px 6px;
  border-radius: 3px;
  transition: background .12s;
  min-width: 100px;
}
.editable-heading-input:hover  { background: rgba(218,0,27,.03); }
.editable-heading-input:focus  { outline: none; background: rgba(218,0,27,.05); }

/* ---- Opgaver in document ---- */
.doc-opgave {
  border: 1px solid var(--gray-200);
  border-radius: 6px;
  margin-bottom: 12px;
  overflow: hidden;
}
.doc-opgave-hd {
  display: flex;
  align-items: center;
  gap: 10px;
  background: var(--gray-50);
  padding: 9px 14px;
  border-bottom: 1px solid var(--gray-200);
}
.doc-opgave-no {
  font-family: 'Bricolage Grotesque', sans-serif;
  font-weight: 700;
  color: var(--red);
  font-size: 1rem;
  min-width: 22px;
  flex: none;
}
.doc-opgave-bd { padding: 10px 14px; }
.doc-opgave-field { margin-bottom: 6px; }
.doc-field-lbl {
  display: block;
  font-size: .68rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .08em;
  color: var(--gray-400);
  margin-bottom: 2px;
  padding-left: 8px;
}
.doc-del-btn {
  background: none;
  border: none;
  cursor: pointer;
  color: var(--gray-400);
  font-size: .88rem;
  padding: 4px 7px;
  border-radius: 3px;
  margin-left: auto;
  flex: none;
  transition: color .1s, background .1s;
}
.doc-del-btn:hover { color: var(--red); background: #ffeaea; }

/* ---- Estimat table (document style) ---- */
.doc-table-wrap {
  overflow-x: auto;
  border: 1px solid var(--gray-200);
  border-radius: 8px;
  margin: 4px 0;
}
.doc-est-table { width: 100%; border-collapse: collapse; font-size: .875rem; }
.doc-est-table th {
  background: var(--gray-100);
  padding: 9px 10px;
  text-align: left;
  font-size: .72rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .06em;
  color: var(--gray-600);
  border-bottom: 1px solid var(--gray-200);
  white-space: nowrap;
}
.doc-est-table td { padding: 3px 5px; border-bottom: 1px solid var(--gray-100); vertical-align: middle; }
.doc-est-table tr:last-child td { border-bottom: none; }
.doc-est-table tr:hover td { background: var(--gray-50); }
.doc-cell-input {
  width: 100%;
  border: none;
  background: transparent;
  font-family: 'Hanken Grotesk', sans-serif;
  font-size: .875rem;
  color: var(--gray-800);
  padding: 5px 6px;
  border-radius: 3px;
  transition: background .12s;
}
.doc-cell-input:hover { background: rgba(218,0,27,.04); }
.doc-cell-input:focus { outline: none; background: rgba(218,0,27,.06); }
.doc-cell-input:disabled { opacity: .28; }
.doc-cell-r { text-align: right; }
.faded { opacity: .28; }

/* ---- Totals ---- */
.doc-totals {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 4px;
  margin-top: 14px;
}
.doc-total-row {
  display: flex;
  justify-content: space-between;
  min-width: 300px;
  padding: 5px 10px;
  font-size: .93rem;
  gap: 24px;
}
.doc-grand-total {
  font-family: 'Bricolage Grotesque', sans-serif;
  font-size: 1.08rem;
  font-weight: 700;
  color: var(--red);
  background: #ffeaea;
  border-radius: 5px;
}
/* Sekundære totaler (moms / inkl. moms) — mindre og dæmpede */
.doc-total-sub { font-size: .82rem; color: var(--gray-600); }
.doc-total-sub strong { font-weight: 500; }

/* ---- Document footer ---- */
.doc-footer {
  padding: 32px 60px;
  background: var(--gray-50);
  border-top: 1px solid var(--gray-200);
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 32px;
}
.doc-footer-logo { height: 20px; margin-bottom: 10px; display: block; }
.doc-footer-left { font-size: .84rem; color: var(--gray-600); }
.doc-footer-right { text-align: right; }
.doc-footer-label {
  font-family: 'Bricolage Grotesque', sans-serif;
  font-size: .66rem;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--gray-400);
}
.doc-footer-sigline {
  height: 38px;
  border-bottom: 1.5px solid var(--gray-200);
  width: 200px;
  margin: 10px 0 5px;
}

/* ---- Empty state ---- */
.doc-empty-state {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 65vh;
  text-align: center;
  padding: 40px;
}

/* ---- AI Drawer ---- */
.ai-drawer {
  position: fixed;
  top: 0; right: -420px;
  width: 380px;
  height: 100vh;
  background: #fff;
  box-shadow: -4px 0 24px rgba(0,0,0,.16);
  z-index: 200;
  display: flex;
  flex-direction: column;
  transition: right .28s cubic-bezier(.4,0,.2,1);
}
.ai-drawer.open { right: 0; }
.ai-drawer-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,.28);
  z-index: 199;
}
.ai-drawer-hd {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 16px 12px;
  border-bottom: 2px solid var(--red);
}
.ai-drawer-hint {
  font-size: .82rem;
  color: var(--gray-600);
  padding: 10px 14px 8px;
  border-bottom: 1px solid var(--gray-100);
  margin: 0;
  line-height: 1.5;
}

/* ---- Sidebar nav buttons (override for active state) ---- */
.sidebar-nav button.active { background: #ffeaea; color: var(--red); font-weight: 600; }
.sidebar-nav button { display: flex; align-items: center; gap: 10px; padding: 10px 20px; width: 100%; text-align: left; background: none; border: none; font-family: inherit; font-size: .93rem; color: var(--gray-800); cursor: pointer; transition: background .15s; }
.sidebar-nav button:hover { background: var(--gray-100); }

/* Undermenu under Indstillinger */
.sidebar-submenu { display: flex; flex-direction: column; background: var(--gray-50); border-left: 2px solid var(--gray-200); margin: 2px 0 4px 0; }
.sidebar-submenu button { padding: 7px 20px 7px 40px; font-size: .86rem; color: var(--gray-600); }
.sidebar-submenu button:hover { background: var(--gray-100); }
.sidebar-submenu button.active { background: #ffeaea; color: var(--red); font-weight: 600; }

/* ---- Prose display (rendered markdown, click to edit) ---- */
.prose-display {
  cursor: text;
  min-height: 36px;
}
.prose-display p { margin: 0 0 .75em; line-height: 1.72; }
.prose-display p:last-child { margin-bottom: 0; }
.prose-display strong { font-weight: 700; }
.prose-display em { font-style: italic; }
.prose-display .md-heading {
  display: block;
  font-family: 'Bricolage Grotesque', sans-serif;
  font-size: 1rem;
  margin: 14px 0 4px;
  color: var(--gray-800);
}
.prose-display .md-bullet {
  display: block;
  padding-left: 18px;
  position: relative;
  margin: 4px 0;
}
.prose-display .md-bullet::before {
  content: '';
  position: absolute;
  left: 4px;
  top: 9px;
  width: 6px;
  height: 6px;
  border-radius: 2px;
  background: var(--red);
  transform: rotate(45deg);
}
.prose-ph { opacity: .35; font-style: italic; pointer-events: none; }

/* ---- Auto-save status indicator ---- */
.autosave-status {
  font-size: .78rem;
  min-width: 18px;
  text-align: center;
  transition: color .2s;
  flex: none;
}
.autosave-status.pending  { color: var(--gray-400); }
.autosave-status.saving   { color: var(--gray-400); }
.autosave-status.saved    { color: #22a85a; font-weight: 700; }

/* ---- Floating AI button (FAB) ---- */
.ai-fab {
  position: fixed;
  bottom: 28px;
  right: 28px;
  width: 64px;
  height: 64px;
  border-radius: 50%;
  background: var(--red);
  color: #fff;
  border: none;
  cursor: pointer;
  display: grid;
  place-items: center;
  box-shadow: 0 4px 22px rgba(218,0,27,.45), 0 2px 8px rgba(0,0,0,.18);
  z-index: 100;
  transition: transform .18s, box-shadow .18s, background .15s;
}
.ai-fab:hover {
  background: var(--red-dark);
  transform: scale(1.1);
  box-shadow: 0 6px 30px rgba(218,0,27,.55), 0 3px 12px rgba(0,0,0,.22);
}
.ai-fab:active { transform: scale(.96); }

@media(max-width: 768px) {
  .doc-section { padding: 28px 22px 20px; }
  .doc-cover   { padding: 32px 22px; }
  .doc-footer  { flex-direction: column; }
  .ai-drawer   { width: 100%; right: -100%; }
  .editor-bar  { gap: 4px; padding: 6px 10px; }
  .ai-fab      { bottom: 18px; right: 18px; width: 56px; height: 56px; }
}

/* ================================================================
   MOBIL — dokumentvisning (kundeside OG editor)
   Sidegeometrien (--page-margin) ligger i proposal-doc.css, som
   indlæses efter denne fil. Her strammes den ydre baggrund,
   overskrifterne og estimat-tabellen.

   Bemærk: de to dokumentregler i 768px-blokken ovenfor er døde på
   kundesiden — proposal-doc.css nulstiller .doc-section/.doc-cover
   padding med !important. Derfor sker mobilarbejdet her og dér.
================================================================ */
@media screen and (max-width: 640px) {
  /* 32px/24px luft omkring arket → næsten intet. Sammen med
     --page-margin: 6px går tekstkolonnen fra ~221px til ~370px. */
  .doc-page-bg { padding: 0 4px 24px; min-height: 0; }

  /* Overskrifter ned. Brødteksten røres IKKE. */
  .doc-sec-title     { font-size: 1.05rem; }
  .doc-tagline-input { font-size: 1rem; }

  /* Estimat-tabellen er den værste enkeltdel på mobil:
     ESTIMAT_COLS i helpers.php sætter faste kolonnebredder som
     INLINE style (~440px i alt) og th har white-space:nowrap.
     Begge skal give sig — derfor !important på bredden. */
  .doc-est-table    { font-size: .8rem; }
  .doc-est-table th { width: auto !important; white-space: normal; padding: 7px 5px; }
  .doc-est-table td { padding: 3px 3px; }
  .doc-cell-input   { font-size: .8rem; padding: 5px 3px; }

  /* min-width: 300px var bredere end hele tekstkolonnen */
  .doc-totals    { align-items: stretch; }
  .doc-total-row { min-width: 0; gap: 12px; padding: 5px 2px; }
}

/* ================================================================
   KUNDER — Portal-ready design
================================================================ */
.page-header {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 20px;
}
.page-header h2 { margin: 0; }
.cust-detail-breadcrumb {
  font-size: 1.15rem;
  font-weight: 700;
  font-family: 'Bricolage Grotesque', sans-serif;
}

/* Customer grid */
.cust-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 16px;
}

.cust-card {
  background: #fff;
  border: 1px solid var(--gray-200);
  border-radius: 10px;
  padding: 18px;
  cursor: pointer;
  transition: border-color .15s, box-shadow .15s, transform .12s;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.cust-card:hover {
  border-color: var(--red);
  box-shadow: 0 4px 16px rgba(218,0,27,.12);
  transform: translateY(-2px);
}

.cust-card-top {
  display: flex;
  align-items: center;
  gap: 12px;
}

.cust-avatar {
  width: 42px;
  height: 42px;
  border-radius: 50%;
  background: var(--red);
  color: #fff;
  display: grid;
  place-items: center;
  font-size: 1.1rem;
  font-weight: 700;
  font-family: 'Bricolage Grotesque', sans-serif;
  flex: none;
}

.cust-card-name-block { flex: 1; min-width: 0; }
.cust-name { font-weight: 700; font-size: .95rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cust-sub  { font-size: .78rem; color: var(--gray-400); margin-top: 2px; }

.cust-edit-btn { opacity: 0; transition: opacity .15s; padding: 2px 6px; }
.cust-card:hover .cust-edit-btn { opacity: 1; }

.cust-card-contact {
  display: flex;
  flex-direction: column;
  gap: 2px;
  font-size: .8rem;
  color: var(--gray-600);
}
.cust-email { color: var(--gray-400); font-size: .76rem; }

.cust-card-ids {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.cust-id-badge {
  background: var(--gray-100);
  border: 1px solid var(--gray-200);
  border-radius: 4px;
  padding: 2px 7px;
  font-size: .74rem;
  color: var(--gray-600);
}

.cust-card-quotes {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  min-height: 22px;
}
.cust-quote-badge {
  padding: 2px 8px;
  border-radius: 20px;
  font-size: .74rem;
  font-weight: 600;
}
.cust-quote-badge.draft    { background: #f0f0f0; color: var(--gray-600); }
.cust-quote-badge.sent     { background: #fff3e0; color: #e65100; }
.cust-quote-badge.accepted { background: #e8f5e9; color: #2e7d32; }
.cust-no-quotes { font-size: .76rem; color: var(--gray-400); font-style: italic; }

/* Customer detail layout */
.cust-detail-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
  align-items: start;
}
@media(max-width:900px) { .cust-detail-grid { grid-template-columns: 1fr; } }

.cust-quote-row {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 0;
  border-bottom: 1px solid var(--gray-100);
  cursor: pointer;
  transition: background .12s;
  border-radius: 6px;
  padding-left: 8px;
  padding-right: 8px;
}
.cust-quote-row:hover { background: var(--gray-50); }
.cust-quote-type-icon { font-size: 1.15rem; flex: none; }
.cust-quote-info { flex: 1; min-width: 0; }
.cust-quote-title { font-weight: 600; font-size: .9rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cust-quote-date  { font-size: .76rem; color: var(--gray-400); margin-top: 2px; }
.cust-quote-arrow { color: var(--gray-400); font-size: .85rem; }

/* ================================================================
   DOKUMENTTYPE-PICKER (nyt tilbud-modal)
================================================================ */
.doctype-picker {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.doctype-option {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 14px;
  border: 2px solid var(--gray-200);
  border-radius: 8px;
  cursor: pointer;
  transition: border-color .15s, background .15s;
}
.doctype-option:hover { border-color: var(--gray-400); background: var(--gray-50); }
.doctype-option.active { border-color: var(--red); background: #fff5f6; }
.doctype-icon { font-size: 1.5rem; flex: none; }
.doctype-name { font-weight: 700; font-size: .9rem; }
.doctype-desc { font-size: .78rem; color: var(--gray-400); margin-top: 2px; }

/* ================================================================
   SKABELON-PICKER
================================================================ */
/* Legacy list picker (kept for reference) */
.tpl-picker { display:flex; flex-wrap:wrap; gap:8px; }
.tpl-pick-item { display:flex; align-items:center; gap:6px; padding:6px 14px; border:1.5px solid var(--gray-200); border-radius:20px; cursor:pointer; font-size:.82rem; transition:border-color .12s,background .12s; }
.tpl-pick-item:hover  { border-color:var(--gray-400); background:var(--gray-50); }
.tpl-pick-item.active { border-color:var(--red); background:#fff5f6; font-weight:600; color:var(--red); }

/* Document card grid */
.tpl-doc-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(110px, 1fr));
  gap: 12px;
}
.tpl-doc-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  cursor: pointer;
}
.tpl-doc-preview {
  width: 100%;
  aspect-ratio: 1 / 1.414;
  background: #fff;
  border: 1.5px solid var(--gray-200);
  border-radius: 3px;
  box-shadow: 0 1px 4px rgba(0,0,0,.08);
  padding: 10px 8px 8px;
  display: flex;
  flex-direction: column;
  gap: 3px;
  overflow: hidden;
  transition: border-color .12s, box-shadow .12s;
  box-sizing: border-box;
}
.tpl-doc-card:hover  .tpl-doc-preview { border-color: var(--gray-400); box-shadow: 0 2px 8px rgba(0,0,0,.13); }
.tpl-doc-card.active .tpl-doc-preview { border-color: var(--red); box-shadow: 0 0 0 2px #ffd6da; }

/* Mini document elements */
.tpl-doc-title {
  height: 5px; width: 60%; background: var(--gray-700);
  border-radius: 2px; margin-bottom: 5px; flex-shrink: 0;
}
.tpl-doc-section-label {
  height: 3px; width: 40%; background: var(--gray-400);
  border-radius: 2px; margin-top: 4px; flex-shrink: 0;
}
.tpl-doc-prose {
  display: flex; flex-direction: column; gap: 2px; flex-shrink: 0;
}
.tpl-doc-prose::before, .tpl-doc-prose::after {
  content: ''; display: block; height: 2px;
  background: var(--gray-200); border-radius: 1px;
}
.tpl-doc-prose::before { width: 90%; }
.tpl-doc-prose::after  { width: 75%; }
.tpl-doc-table {
  display: flex; flex-direction: column; gap: 2px;
  border: 1px solid var(--gray-200); border-radius: 1px;
  padding: 2px 3px; flex-shrink: 0;
}
.tpl-doc-table::before, .tpl-doc-table::after {
  content: ''; display: block; height: 2px;
  background: var(--gray-200); border-radius: 1px; width: 100%;
}
.tpl-doc-image {
  height: 18px; background: var(--gray-100);
  border: 1px dashed var(--gray-300); border-radius: 2px; flex-shrink: 0;
}
.tpl-doc-pagebreak {
  border-top: 1px dashed var(--gray-300); margin: 2px 0; flex-shrink: 0;
}
.tpl-doc-line {
  display: block; height: 2px; background: var(--gray-200); border-radius: 1px; flex-shrink: 0;
}
.tpl-doc-blank .tpl-doc-line { background: var(--gray-150, #ebebeb); }

.tpl-doc-name {
  font-size: .75rem; text-align: center; color: var(--gray-700);
  line-height: 1.3; max-width: 100%;
  overflow: hidden; display: -webkit-box;
  -webkit-line-clamp: 2; -webkit-box-orient: vertical;
}

.tpl-default-badge {
  display: inline-block;
  background: var(--red);
  color: #fff;
  font-size: .68rem;
  font-weight: 700;
  padding: 1px 6px;
  border-radius: 10px;
  margin-left: 4px;
}

.tpl-type-badge {
  display: inline-block;
  background: var(--gray-200);
  color: var(--gray-600);
  font-size: .65rem;
  font-weight: 500;
  padding: 1px 6px;
  border-radius: 10px;
  margin-left: auto;
  text-transform: capitalize;
}

/* ================================================================
   SKABELON-LISTE (indstillinger)
================================================================ */
.tpl-group-header {
  font-weight: 700;
  font-size: .82rem;
  color: var(--gray-400);
  letter-spacing: .07em;
  text-transform: uppercase;
  margin: 16px 0 6px;
}
.tpl-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 4px;
  border-bottom: 1px solid var(--gray-100);
}
.tpl-row-name { font-weight: 600; font-size: .9rem; }
.tpl-row-meta { font-size: .76rem; color: var(--gray-400); }

/* Upload-box in template modal */
.tpl-upload-box {
  background: var(--gray-50);
  border: 1.5px dashed var(--gray-200);
  border-radius: 8px;
  padding: 14px;
  margin: 12px 0;
}
.tpl-upload-label { font-size: .82rem; color: var(--gray-600); margin-bottom: 8px; }
.tpl-content-preview {
  background: var(--gray-50);
  border: 1px solid var(--gray-200);
  border-radius: 6px;
  padding: 12px;
  margin-top: 8px;
  max-height: 240px;
  overflow-y: auto;
}
.tpl-content-label { font-size: .74rem; color: var(--gray-400); font-weight: 700; margin-bottom: 6px; }
.tpl-content-preview pre { font-size: .74rem; white-space: pre-wrap; word-break: break-all; }

/* Quote list doc-type icon */
.q-doctype-icon { font-size: 1.1rem; margin-right: -4px; }

/* mb-16 helper */
.mb-16 { margin-bottom: 16px; }

/* ================================================================
   QUOTE LIST — filter, sort, ID, context-menu
================================================================ */
/* Faner på dokumentoversigten — fungerer som statusfilter.
   Følger samme mønster som .acct-tabs, så faner ser ens ud i hele appen. */
.ql-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  border-bottom: 1px solid var(--gray-200);
}
.ql-tab {
  display: inline-flex; align-items: center; gap: 7px;
  background: none; border: 0; cursor: pointer;
  padding: 10px 14px; font: inherit; font-size: .92rem; font-weight: 600;
  color: var(--gray-500); border-bottom: 2px solid transparent;
  margin-bottom: -1px; transition: color .15s, border-color .15s;
  white-space: nowrap;
}
.ql-tab:hover { color: var(--gray-800); }
.ql-tab.active { color: var(--red); border-bottom-color: var(--red); }
.ql-tab-count {
  font-size: .76rem; font-weight: 700; line-height: 1;
  padding: 3px 6px; border-radius: 10px;
  background: var(--gray-100); color: var(--gray-500);
  transition: background .15s, color .15s;
}
.ql-tab.active .ql-tab-count { background: var(--red); color: #fff; }

.ql-filter-bar {
  display: flex;
  gap: 10px;
  padding: 10px 0 14px;
  border-bottom: 1px solid var(--gray-100);
  margin-bottom: 4px;
}
.ql-search { flex: 1; }

.ql-header {
  display: flex;
  align-items: center;
  gap: 0;
  padding: 6px 4px;
  font-size: .74rem;
  font-weight: 700;
  color: var(--gray-400);
  letter-spacing: .06em;
  text-transform: uppercase;
  border-bottom: 2px solid var(--gray-100);
  user-select: none;
}
.ql-sortable { cursor: pointer; transition: color .12s; }
.ql-sortable:hover { color: var(--gray-800); }
.sort-arrow { color: var(--red); margin-left: 2px; }

/* Column widths — shared between header and rows */
.ql-col-icon     { width: 30px; flex: none; text-align: center; }
.ql-col-id       { width: 52px; flex: none; }
.ql-col-title    { flex: 1; min-width: 0; }
.ql-col-customer { width: 180px; flex: none; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ql-col-status   { width: 90px; flex: none; }
.ql-col-date     { width: 140px; flex: none; font-size: .78rem; }

.ql-row {
  display: flex !important;
  align-items: center;
  gap: 0;
}
.ql-row .q-id {
  font-size: .78rem;
  color: var(--gray-400);
  font-family: monospace;
}

/* Context menu */
.ctx-menu {
  position: fixed;
  background: #fff;
  border: 1px solid var(--gray-200);
  border-radius: 8px;
  box-shadow: 0 8px 28px rgba(0,0,0,.18);
  z-index: 500;
  min-width: 220px;
  overflow: hidden;
}
.ctx-menu button {
  display: block;
  width: 100%;
  background: none;
  border: none;
  padding: 10px 16px;
  text-align: left;
  font-size: .88rem;
  cursor: pointer;
  transition: background .1s;
}
.ctx-menu button:hover { background: var(--gray-50); }
.ctx-menu button + button { border-top: 1px solid var(--gray-100); }
.ctx-menu button.ctx-danger { color: var(--red); }
.ctx-menu button.ctx-danger:hover { background: #fde2e2; }

/* ================================================================
   DOCTYPE PILL STRIP (nyt tilbud-modal)
================================================================ */
.doctype-tabs {
  display: flex; gap: 0;
  border-bottom: 1px solid var(--gray-200);
  margin-bottom: 16px;
}
.doctype-tab {
  padding: 6px 14px;
  border: none; border-bottom: 2px solid transparent;
  background: transparent; cursor: pointer;
  font-size: .8rem; font-family: inherit;
  color: var(--gray-500); transition: color .15s, border-color .15s;
  margin-bottom: -1px;
}
.doctype-tab:hover  { color: var(--gray-700); }
.doctype-tab.active { color: var(--gray-900); border-bottom-color: var(--gray-700); font-weight: 600; }

/* ================================================================
   TEMPLATE EDITOR-BAR LABEL
================================================================ */
.editor-tpl-label {
  font-family: 'Bricolage Grotesque', sans-serif;
  font-weight: 700; font-size: .95rem;
  color: var(--gray-800); white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  max-width: 280px;
}

/* ================================================================
   LEVERINGSBETINGELSER — collapsible
================================================================ */
.btn-betingelser-toggle {
  margin-left: auto; background: none; border: 1px solid var(--gray-200);
  border-radius: 5px; padding: 3px 10px; font-size: .76rem;
  font-family: inherit; cursor: pointer; color: var(--gray-600);
  transition: all .15s; white-space: nowrap; flex: none;
}
.btn-betingelser-toggle:hover { background: var(--gray-50); border-color: var(--gray-400); }

.betingelser-collapsed {
  display: flex; align-items: center; gap: 16px;
  padding: 10px 8px; background: var(--gray-50);
  border-radius: 6px; border: 1px solid var(--gray-200);
}
.betingelser-accept-label {
  display: flex; align-items: center; gap: 8px;
  font-size: .9rem; cursor: pointer; user-select: none;
}
.betingelser-accept-label input[type=checkbox] {
  width: 16px; height: 16px; accent-color: var(--red); flex: none; cursor: pointer;
}
.btn-betingelser-read {
  background: none; border: none; color: var(--red); cursor: pointer;
  font-size: .82rem; font-family: inherit; padding: 0;
  text-decoration: underline; white-space: nowrap;
}
.betingelser-accept-row {
  margin-top: 14px; padding: 12px 8px;
  background: var(--gray-50); border-radius: 6px; border: 1px solid var(--gray-200);
}

/* ================================================================
   VARIABLE CHIP (in rendered prose)
================================================================ */
.var-chip {
  display: inline-block; background: #fff3e0;
  color: #b84a00; border: 1px solid #f5c690;
  border-radius: 4px; padding: 0 5px; font-size: .82em;
  font-family: 'Hanken Grotesk', sans-serif; font-style: normal;
  font-weight: 600; cursor: default; white-space: nowrap;
}

/* ================================================================
   @-VARIABLE PICKER DROPDOWN
================================================================ */
.var-picker {
  position: fixed; z-index: 600;
  background: #fff; border: 1px solid var(--gray-200);
  border-radius: 8px; box-shadow: 0 8px 28px rgba(0,0,0,.18);
  min-width: 240px; max-width: 320px;
  overflow: hidden; max-height: 300px; overflow-y: auto;
}
.var-picker-hd {
  padding: 7px 12px 5px;
  font-size: .7rem; font-weight: 700; letter-spacing: .07em; text-transform: uppercase;
  color: var(--gray-400); border-bottom: 1px solid var(--gray-100);
}
.var-picker-item {
  display: flex; align-items: center; gap: 10px;
  width: 100%; background: none; border: none;
  padding: 8px 12px; cursor: pointer; text-align: left;
  transition: background .1s; font-family: inherit; font-size: .87rem;
}
.var-picker-item:hover { background: var(--gray-50); }
.var-picker-item code { font-size: .78rem; color: #b84a00; background: #fff3e0; padding: 1px 4px; border-radius: 3px; flex: none; }
.var-picker-item span  { color: var(--gray-600); }
.var-picker-empty { padding: 10px 12px; font-size: .84rem; color: var(--gray-400); }
.var-picker-hint  { padding: 5px 12px; font-size: .7rem; color: var(--gray-400); border-top: 1px solid var(--gray-100); }

/* ================================================================
   DOCUMENT TYPES MANAGEMENT (indstillinger)
================================================================ */
.doctype-mgmt-row {
  display: flex; align-items: center; gap: 10px;
  padding: 10px 4px; border-bottom: 1px solid var(--gray-100);
}
.doctype-mgmt-icon  { font-size: 1.3rem; flex: none; width: 32px; text-align: center; }
.doctype-mgmt-info  { display: flex; align-items: center; gap: 8px; }
.doctype-mgmt-name  { font-weight: 600; font-size: .9rem; }
.doctype-mgmt-slug  { font-size: .74rem; color: var(--gray-400); font-family: monospace; }
.badge-system {
  display: inline-block; background: var(--gray-200); color: var(--gray-600);
  font-size: .68rem; font-weight: 700; padding: 1px 6px; border-radius: 10px;
  letter-spacing: .04em;
}

/* Variable info box in modals */
.var-info-box {
  background: #fff8f0; border: 1px solid #f5c690; border-radius: 6px;
  padding: 10px 12px; margin-top: 10px;
  font-size: .82rem; line-height: 1.55; color: #7a4500;
}
.var-info-box code { background: #fff3e0; padding: 1px 4px; border-radius: 3px; }

/* ================================================================
   SECTIONS PANEL
================================================================ */
.sec-panel-cols {
  display: grid; grid-template-columns: 1fr 1fr; gap: 24px;
}
.sec-panel-subhd {
  font-size: .72rem; font-weight: 700; letter-spacing: .07em;
  text-transform: uppercase; color: var(--gray-400);
  margin-bottom: 8px; padding-bottom: 4px;
  border-bottom: 1px solid var(--gray-100);
}
.sec-panel-subhd-sm { margin-top: 12px; }
.sec-panel-row {
  display: flex; align-items: center; gap: 8px;
  padding: 5px 0; border-bottom: 1px solid var(--gray-100);
}
.sec-panel-toggle {
  display: flex; align-items: center; gap: 8px; cursor: pointer;
  font-size: .88rem; flex: 1; user-select: none;
}
.sec-panel-toggle input[type=checkbox] { accent-color: var(--red); flex: none; cursor: pointer; }
.sec-panel-row-add {
  cursor: pointer; color: var(--gray-600); font-size: .84rem; transition: color .15s;
  border-bottom: 1px dashed var(--gray-100);
}
.sec-panel-row-add:hover { color: var(--red); background: var(--gray-50); border-radius: 4px; }
.sec-panel-plus { color: var(--red); font-weight: 700; flex: none; }
.sec-panel-del  { padding: 2px 6px !important; opacity: .5; }
.sec-panel-del:hover { opacity: 1; color: #c00 !important; }

/* Section type badge (small) */
.sec-type-badge {
  display: inline-block; background: var(--gray-100); color: var(--gray-600);
  font-size: .68rem; padding: 1px 6px; border-radius: 10px; font-family: monospace;
  flex: none;
}

/* Custom section star marker */
.doc-section .doc-sec-no:has(+ .doc-sec-title + .sec-type-badge) { color: var(--red); }

/* ================================================================
   CUSTOMER LIST TABLE
================================================================ */
.cust-list-wrap {
  background: #fff; border-radius: 8px; overflow: hidden;
  border: 1px solid var(--gray-200);
}
.cust-list-table {
  width: 100%; border-collapse: collapse; font-size: .88rem;
}
.cust-list-table thead th {
  background: var(--gray-50); padding: 10px 12px;
  text-align: left; font-weight: 600; font-size: .78rem;
  letter-spacing: .04em; text-transform: uppercase; color: var(--gray-600);
  border-bottom: 2px solid var(--gray-200); white-space: nowrap;
}
.cust-sortable { cursor: pointer; user-select: none; transition: color .15s; }
.cust-sortable:hover { color: var(--red); }
.cust-dt-col { text-align: center !important; }
.cust-list-row { cursor: pointer; transition: background .12s; }
.cust-list-row:hover { background: var(--gray-50); }
.cust-list-row td { padding: 10px 12px; border-bottom: 1px solid var(--gray-100); vertical-align: middle; }
.cust-list-name { font-weight: 600; color: var(--gray-800); }
.cust-list-sub  { font-size: .78rem; color: var(--gray-400); margin-top: 2px; }
.cust-list-city { color: var(--gray-600); white-space: nowrap; }
.cust-dt-cell   { text-align: center; }
.cust-dt-badge  {
  display: inline-flex; align-items: center; gap: 3px;
  background: #e8f5e9; color: #2e7d32;
  font-size: .82rem; font-weight: 700; padding: 2px 8px;
  border-radius: 12px;
}
.cust-dt-badge .cust-dt-ok { color: #2e7d32; font-size: .75em; }
.cust-dt-none { color: var(--gray-200); font-size: .85rem; }

/* ================================================================
   CUSTOM SECTION RENDERER — section number star
================================================================ */
.doc-sec-no { min-width: 28px; }


/* ================================================================
   SECTIONS SIDEBAR (left-side slide-out panel)
================================================================ */
.sec-sidebar {
  position: fixed;
  left: 0;
  top: 48px; /* below editor-bar */
  bottom: 0;
  z-index: 120;
  pointer-events: none;
}
/* Tab: always visible strip on the left edge */
.sec-sidebar-tab {
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 32px;
  background: #1e293b;
  color: #94a3b8;
  cursor: pointer;
  pointer-events: all;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  padding: 20px 4px 12px;
  gap: 6px;
  box-shadow: 2px 0 8px rgba(0,0,0,.3);
  transition: background 0.15s, color 0.15s;
  user-select: none;
}
.sec-sidebar-tab:hover,
.sec-sidebar.open .sec-sidebar-tab {
  background: #334155;
  color: #f1f5f9;
}
.sec-sidebar-tab-icon { font-size: 1.05rem; line-height: 1; }
.sec-sidebar-tab-label {
  writing-mode: vertical-rl;
  text-orientation: mixed;
  transform: rotate(180deg);
  font-size: .68rem;
  font-weight: 600;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: inherit;
}
/* Panel: sits just right of the tab, slides in/out */
.sec-sidebar-panel {
  position: absolute;
  left: 32px;
  top: 0;
  bottom: 0;
  width: 260px;
  background: #1e293b;
  color: #e2e8f0;
  overflow-y: auto;
  /* closed: shift left by own width + tab width so it's fully off-screen */
  transform: translateX(calc(-100% - 32px));
  transition: transform 0.22s cubic-bezier(.4,0,.2,1);
  pointer-events: none;
  box-shadow: 4px 0 20px rgba(0,0,0,.35);
  display: flex;
  flex-direction: column;
}
.sec-sidebar.open .sec-sidebar-panel {
  transform: translateX(0);
  pointer-events: all;
}

/* ================================================================
   SECTION DELETE ANIMATION (TransitionGroup name="sec")
================================================================ */
.sec-leave-active {
  position: absolute;
  left: 0; right: 0;
  z-index: 2;
  transition: transform 0.32s cubic-bezier(.4,0,.8,1), opacity 0.24s;
}
.sec-leave-to {
  transform: translateX(110%);
  opacity: 0;
}
.sec-move {
  transition: transform 0.32s ease;
}
.sec-sidebar-hd {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 14px 10px;
  font-weight: 700;
  font-size: .85rem;
  color: #f1f5f9;
  border-bottom: 1px solid rgba(255,255,255,.1);
  flex-shrink: 0;
}
.sec-sidebar-close {
  background: none; border: none; color: #94a3b8;
  cursor: pointer; font-size: 1rem; padding: 0 2px;
  line-height: 1;
  transition: color 0.15s;
}
.sec-sidebar-close:hover { color: #f1f5f9; }
.sec-sidebar-list { flex: 1; overflow-y: auto; padding: 8px 0; }
.sec-sidebar-empty { padding: 12px 14px; font-size: .8rem; color: #64748b; }
.sec-sidebar-subhd {
  padding: 8px 14px 4px;
  font-size: .7rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .07em;
  color: #64748b;
}
.sec-sidebar-item {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 6px 10px 6px 8px;
  cursor: grab;
  transition: background 0.1s;
  border-radius: 4px;
  margin: 1px 4px;
}
.sec-sidebar-item:hover { background: rgba(255,255,255,.07); }
.sec-sidebar-item.disabled { opacity: .45; }
.sec-sidebar-item-add { cursor: pointer; opacity: .75; }
.sec-sidebar-item-add:hover { opacity: 1; background: rgba(255,255,255,.07); }
.sec-sidebar-grip {
  color: #475569;
  font-size: .9rem;
  cursor: grab;
  flex-shrink: 0;
}
.sec-sidebar-toggle { display: flex; align-items: center; flex-shrink: 0; cursor: pointer; }
.sec-sidebar-toggle input { cursor: pointer; }
.sec-sidebar-name {
  flex: 1;
  font-size: .82rem;
  color: #e2e8f0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.sec-sidebar-name.strike { text-decoration: line-through; color: #64748b; }
.sec-type-badge-sm {
  font-size: .65rem;
  background: rgba(255,255,255,.1);
  color: #94a3b8;
  padding: 1px 5px;
  border-radius: 3px;
  flex-shrink: 0;
}
.sec-sidebar-del {
  background: none; border: none; color: #475569;
  cursor: pointer; font-size: .8rem; padding: 0 2px;
  line-height: 1; flex-shrink: 0;
  transition: color 0.15s;
}
.sec-sidebar-del:hover { color: #f87171; }

/* ★ Gem eget afsnit som genbrugelig sektionstype.
   Samme diskrete udgangspunkt som ✕-knappen; lyser op når den er gemt. */
.sec-sidebar-keep {
  background: none; border: none; color: #475569;
  cursor: pointer; font-size: .8rem; padding: 0 2px;
  line-height: 1; flex-shrink: 0;
  transition: color 0.15s;
}
.sec-sidebar-keep:hover       { color: #fbbf24; }
.sec-sidebar-keep.saved       { color: #fbbf24; }
.sec-sidebar-keep.saved:hover { color: #fcd34d; }
.sec-sidebar-footer {
  padding: 10px 10px 14px;
  border-top: 1px solid rgba(255,255,255,.1);
  flex-shrink: 0;
}

/* ================================================================
   DRAG-AND-DROP section styles
================================================================ */
.drag-handle {
  color: #9e9e9e;
  cursor: grab;
  font-size: 1rem;
  padding: 0 4px;
  opacity: 0;
  transition: opacity 0.15s;
  user-select: none;
  flex-shrink: 0;
}
.doc-section:hover .drag-handle { opacity: 1; }
.doc-section[draggable="true"] { cursor: default; }
.sec-is-dragging { opacity: .4; }
.sec-drag-over {
  border-top: 2px solid #DA001B !important;
  padding-top: calc(var(--section-pad, 28px) - 2px);
}

/* Delete button in section header */
.sec-del-btn {
  background: none;
  border: none;
  color: #9e9e9e;
  cursor: pointer;
  font-size: .85rem;
  padding: 0 4px;
  line-height: 1;
  opacity: 0;
  transition: opacity 0.15s, color 0.15s;
  margin-left: auto;
}
.doc-section:hover .sec-del-btn { opacity: 1; }
.sec-del-btn:hover { color: #c00; }

/* ============================================================
   mini-WYSIWYG (rich-text-komponent) — vises i tekstsektioner.
   Værktøjslinjen dukker først op når man klikker ind i feltet,
   så dokumentet forbliver rent.
   ============================================================ */
.rt { position: relative; }
.rt-toolbar {
  display: none; flex-wrap: nowrap; align-items: center; gap: 2px; margin-bottom: 8px;
  padding: 5px 6px; background: #fff; border: 1px solid var(--gray-200, #e3e3e3);
  border-radius: 8px; box-shadow: 0 2px 10px rgba(0,0,0,.07);
  /* Alt på én linje. Bliver på skærmen ved scroll i lange afsnit — sidder lige
     under den sticky .editor-bar (top:0, ~52px høj). z-index < editor-bar (90). */
  position: sticky; top: 58px; z-index: 40;
}
.rt:focus-within .rt-toolbar { display: flex; }
.rt-btn.rt-active { background: #16171a; color: #fff; }
.rt:focus-within .rt-toolbar { display: flex; }
.rt-btn {
  border: 1px solid transparent; background: transparent; border-radius: 6px; cursor: pointer;
  font: 600 .85rem 'Hanken Grotesk', sans-serif; color: #2b2d31; padding: 4px 8px; line-height: 1; min-width: 28px;
}
.rt-btn:hover { background: #f2f1ef; border-color: #e3e3e3; }
.rt-sep { width: 1px; height: 20px; background: #e3e3e3; margin: 0 3px; }

/* Dropdown-menuer (format, størrelse, font, fremhæv) */
.rt-dd { position: relative; }
.rt-menu {
  position: absolute; top: 116%; left: 0; z-index: 45; display: flex; flex-direction: column;
  min-width: 156px; padding: 5px; background: #fff; border: 1px solid #e3e3e3;
  border-radius: 8px; box-shadow: 0 6px 18px rgba(0,0,0,.15);
}
.rt-menu button {
  text-align: left; border: none; background: none; cursor: pointer;
  font: 600 .85rem 'Hanken Grotesk', sans-serif; color: #2b2d31; padding: 7px 10px; border-radius: 6px;
}
.rt-menu button:hover { background: #f2f1ef; }
.rt-menu.rt-colors { flex-direction: row; align-items: center; gap: 7px; min-width: 0; padding: 7px 9px; }
.rt-menu-x { color: #b00016 !important; white-space: nowrap; font-size: .8rem !important; }
.rt-swatch { width: 22px; height: 22px; border-radius: 6px; border: 1px solid rgba(0,0,0,.15); cursor: pointer; padding: 0; }
.rt-swatch.ok  { background: #e3f1ea; }
.rt-swatch.warn{ background: #f6efd7; }
.rt-swatch.neu { background: #f6f5f4; }
.rt-custom { display: inline-flex; align-items: center; }
.rt-custom input[type=color] { width: 24px; height: 24px; border: none; background: none; cursor: pointer; padding: 0; }

/* Tekstfarve-vælger i toolbaren */
.rt-color {
  display: inline-flex; align-items: center; gap: 2px; cursor: pointer;
  font: 700 .85rem 'Hanken Grotesk', sans-serif; color: #2b2d31; padding: 2px 5px;
}
.rt-color input[type=color] { width: 22px; height: 18px; border: none; background: none; cursor: pointer; padding: 0; }

/* Aktiv (fx kode-visning slået til) */
.rt-active { background: #16171a !important; color: #fff !important; border-color: #16171a !important; }

.rt-imglbl { font: 600 .8rem 'Hanken Grotesk', sans-serif; color: #8b8c91; padding-left: 2px; }
.rt-editable { outline: none; min-height: 1.6em; padding: 2px 0; }
.rt-editable:empty:before { content: attr(data-ph); color: #b0b0b3; }
.rt-editable img.rich-img { cursor: pointer; }

/* Tekststørrelse-input i toolbaren (frit tal i px) */
.rt-size { display: inline-flex; align-items: center; gap: 2px; font: 600 .8rem 'Hanken Grotesk', sans-serif; color: #8b8c91; }
.rt-size input {
  width: 46px; border: 1px solid #e3e3e3; border-radius: 5px; padding: 3px 5px;
  font: 600 .82rem 'Hanken Grotesk', sans-serif; color: #2b2d31;
}
.rt-code { font-family: 'Courier New', monospace; font-weight: 700; }
@media print { .rt-toolbar { display: none !important; } }

/* ============================================================
   Mediebrowser (billed-vælger) + CodeMirror kode-modal
   ============================================================ */
.mb-grid {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(130px, 1fr));
  gap: 12px; align-content: start;
}
.mb-thumb {
  border: 1px solid var(--gray-200, #e3e3e3); border-radius: 10px; background: #fff;
  padding: 0; cursor: pointer; overflow: hidden; display: flex; flex-direction: column;
  transition: border-color .12s, box-shadow .12s;
}
.mb-thumb:hover { border-color: var(--red); box-shadow: 0 0 0 2px rgba(218,0,27,.12); }
.mb-thumb img { width: 100%; height: 100px; object-fit: cover; display: block; background: #f6f5f4; }
.mb-thumb-name {
  font: 600 .7rem 'Hanken Grotesk', sans-serif; color: #5b5c61; padding: 6px 8px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.cm-wrap .CodeMirror { height: 100%; font-size: 13px; }

/* ================================================================
   MCP-adgang på kontosiden — personlige tokens
================================================================ */
.mcp-copy-row { display: flex; gap: 8px; align-items: center; }
.mcp-copy-row .form-control { flex: 1; font-family: 'Courier New', monospace; font-size: .85rem; }

.mcp-new-token {
  margin: 14px 0;
  padding: 12px 14px;
  border: 1px solid #f0dda6;
  background: #fff9e8;
  border-radius: var(--radius);
}
.mcp-new-token > strong { display: block; margin-bottom: 8px; color: #8a5a00; font-size: .9rem; }
.mcp-token-value { background: #fff !important; }

.mcp-details { margin: 10px 0 8px; font-size: .87rem; }
.mcp-details summary { cursor: pointer; color: var(--gray-600); }
.mcp-details p { margin: 8px 0 4px; }
.mcp-code {
  display: block; padding: 8px 10px; margin: 4px 0 8px;
  background: var(--gray-800); color: #e8e8e8;
  border-radius: 5px; font-size: .78rem; line-height: 1.5;
  word-break: break-all; white-space: pre-wrap;
}

.mcp-create-row { display: flex; gap: 8px; margin: 12px 0; }
.mcp-create-row .form-control { flex: 1; }

.mcp-list { border-top: 1px solid var(--gray-200); margin-top: 10px; }
.mcp-list-item {
  display: flex; align-items: center; gap: 10px;
  padding: 9px 2px; border-bottom: 1px solid var(--gray-100);
  font-size: .9rem;
}
.mcp-list-item.dead { opacity: .5; }
.mcp-list-item.dead .mcp-list-name { text-decoration: line-through; }
.mcp-list-name { font-weight: 600; }
.mcp-list-meta { color: var(--gray-500); font-size: .82rem; margin-left: auto; }
.mcp-list-del {
  background: none; border: 0; cursor: pointer; color: var(--gray-400);
  font-size: .85rem; padding: 0 2px; line-height: 1; transition: color .15s;
}
.mcp-list-del:hover { color: var(--red); }

/* ================================================================
   MCP-vejledning (Indstillinger → MCP-adgang)
================================================================ */
.mcp-doc-lead { font-size: .95rem; line-height: 1.6; color: var(--gray-700); margin-bottom: 18px; }
.mcp-doc-grid {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 10px; margin-bottom: 22px;
}
.mcp-doc-box {
  padding: 10px 12px; background: var(--gray-50);
  border: 1px solid var(--gray-200); border-radius: var(--radius);
}
.mcp-doc-box-k { display: block; font-size: .72rem; text-transform: uppercase;
  letter-spacing: .04em; color: var(--gray-500); margin-bottom: 4px; }
.mcp-doc-box code { font-size: .8rem; word-break: break-all; background: none; padding: 0; }

.mcp-doc-h {
  font-size: 1rem; margin: 24px 0 8px;
  padding-bottom: 5px; border-bottom: 1px solid var(--gray-200);
}
.mcp-doc-p { font-size: .9rem; line-height: 1.6; color: var(--gray-700); margin: 6px 0 10px; }
.mcp-doc-note { color: var(--gray-500); font-size: .85rem; }

.mcp-doc-client {
  padding: 12px 14px; margin-bottom: 10px;
  background: var(--gray-50); border-radius: var(--radius);
  border-left: 3px solid var(--red);
}
.mcp-doc-client > strong { font-size: .92rem; }
.mcp-doc-client .mcp-doc-p { margin: 5px 0 8px; }

.mcp-doc-example {
  padding: 12px 14px; margin: 8px 0 12px;
  background: #fff9e8; border: 1px solid #f0dda6; border-radius: var(--radius);
  font-size: .89rem; line-height: 1.6; color: #6b4c00; font-style: italic;
}

.mcp-doc-table { width: 100%; border-collapse: collapse; font-size: .87rem; margin: 6px 0 4px; }
.mcp-doc-table td { padding: 7px 8px; border-bottom: 1px solid var(--gray-100); vertical-align: top; }
.mcp-doc-table td:first-child { width: 190px; white-space: nowrap; }
.mcp-doc-table code { font-size: .82rem; }

.mcp-doc-list { margin: 8px 0 4px; padding-left: 20px; font-size: .89rem; line-height: 1.65; color: var(--gray-700); }
.mcp-doc-list li { margin-bottom: 8px; }

/* WYSIWYG / HTML-kilde-skift på tekstmoduler.
   Samme diskrete udseende som ⚡ AI-knappen ved siden af. */
.sec-src-btn {
  background: none; border: 0; cursor: pointer;
  font-family: 'Courier New', monospace; font-size: .78rem; font-weight: 700;
  color: var(--gray-400); padding: 2px 5px; border-radius: 4px;
  flex: none; transition: color .15s, background .15s;
}
.sec-src-btn:hover  { color: var(--gray-700); background: var(--gray-100); }
.sec-src-btn.active { color: #fff; background: var(--gray-700); }

/* Kildevisningen: monospace, men stadig i dokumentets bredde. */
.sec-src-editor {
  font-family: 'Courier New', monospace !important;
  font-size: .8rem !important;
  line-height: 1.55 !important;
  background: var(--gray-50);
  border: 1px dashed var(--gray-300) !important;
  border-radius: var(--radius);
  padding: 10px 12px !important;
  white-space: pre-wrap;
}
@media print { .sec-src-btn { display: none !important; } }

/* ================================================================
   Estimat-tabel: skjulte kolonner
   Skjult betyder "udgår af det færdige dokument" — i editoren står
   kolonnen stadig, blot nedtonet, så tallene kan redigeres.
================================================================ */
.doc-est-table th.est-col-title,
.doc-est-table td.est-col-title { width: auto; }        /* første kolonne tager resten */

.doc-est-table .est-col-off            { opacity: .38; }
.doc-est-table th.est-col-off          { font-style: italic; }
.doc-est-table .est-col-off input,
.doc-est-table .est-col-off select     { color: var(--gray-500); }
.doc-est-table th                      { cursor: context-menu; }

.est-col-off-mark {
  display: block; font-size: .6rem; font-weight: 400; font-style: normal;
  text-transform: uppercase; letter-spacing: .05em; color: var(--gray-400);
}

.ctx-note {
  padding: 8px 10px; margin-top: 4px;
  border-top: 1px solid var(--gray-200);
  font-size: .74rem; line-height: 1.45; color: var(--gray-500);
  max-width: 230px; white-space: normal;
}

/* I det udskrevne dokument forsvinder de helt. */
@media print {
  .doc-est-table .est-col-off { display: none !important; }
}

/* Redigerbar billedtekst. Ser ud som den færdige tekst, så man ser hvad
   kunden får — ikke som et formularfelt midt i dokumentet. */
.doc-image-cap-input {
  display: block; width: 100%;
  background: none; border: 0; border-bottom: 1px dashed transparent;
  font: inherit; color: inherit; text-align: inherit;
  padding: 2px 0; margin: 0;
}
.doc-image-cap-input:hover:not([readonly]) { border-bottom-color: var(--gray-300); }
.doc-image-cap-input:focus {
  outline: none; border-bottom-color: var(--red); background: rgba(0,0,0,.02);
}
.doc-image-cap-input::placeholder { color: var(--gray-400); font-style: italic; }
.doc-image-cap-above { margin: 0 0 6px; }
@media print {
  /* Et tomt felt må ikke efterlade en streg i PDF'en. */
  .doc-image-cap-input { border-bottom: 0 !important; background: none !important; }
}

/* ================================================================
   Opgavens prisrække — deler data med estimatlinjen
================================================================ */
.opgave-pris {
  display: flex; align-items: center; gap: 6px; flex-wrap: wrap;
  margin: 4px 0 10px; padding: 6px 8px;
  background: var(--gray-50); border-radius: 5px;
  font-size: .85rem;
}
.opgave-pris-lbl { font-weight: 600; color: var(--gray-600); margin-right: 2px; }
.opgave-pris-x   { color: var(--gray-500); }
.opgave-pris-type { max-width: 108px; }
.opgave-pris-role { max-width: 160px; }
.opgave-pris-num  { max-width: 78px; text-align: right; }
.opgave-pris-sum  { margin-left: auto; font-weight: 700; white-space: nowrap; }

.opgave-pris-link {
  background: none; border: 0; cursor: pointer;
  color: var(--gray-400); font-size: .82rem; padding: 2px 5px;
  border-radius: 4px; transition: color .15s, background .15s;
}
.opgave-pris-link:hover { color: var(--gray-700); background: var(--gray-100); }
.opgave-pris-link.on    { color: var(--red); }

/* Mærke i estimatet: linjen deler pris med en opgave. */
.est-link-mark {
  display: inline-block; margin-left: 6px;
  font-size: .66rem; font-weight: 600; white-space: nowrap;
  color: var(--gray-500); background: var(--gray-100);
  padding: 1px 5px; border-radius: 3px;
}

/* Prisrækken er et redigeringsværktøj — beløbet står i estimattabellen. */
@media print {
  .opgave-pris { display: none !important; }
  .est-link-mark { display: none !important; }
}

/* Robot- og intern-mærker + enhed. Dæmpede rækker er dem der IKKE tælles
   som kundebesøg — de bliver i listen, men skal ikke stjæle opmærksomhed. */
.act-item.act-muted { opacity: .58; }
.act-item.act-muted:hover { opacity: 1; }
.act-badge {
  display: inline-block; margin-left: 7px; padding: 1px 7px; border-radius: 999px;
  font-size: .66rem; font-weight: 700; text-transform: uppercase; letter-spacing: .06em;
  vertical-align: middle;
}
.act-badge.bot    { background: var(--gray-200); color: var(--gray-600); }
.act-badge.intern { background: #ede9fe; color: #5b21b6; }
.act-icon.ev-download { background: #e0e7ff; }
.act-dev { white-space: nowrap; }
.act-ip-named { font-weight: 600; color: var(--gray-800); }
/* Navngiv-knappen skal være til rådighed uden at larme: den er en genvej,
   ikke en handling man leder efter. */
.act-tag-btn {
  margin-left: 6px; padding: 0 5px; border: 1px solid var(--gray-200); border-radius: 5px;
  background: #fff; color: var(--gray-600); font: inherit; font-size: .72rem; cursor: pointer;
}
.act-tag-btn:hover { border-color: var(--red); color: var(--red); }
.act-filtered-note {
  font-size: .8rem; line-height: 1.5; color: #78350f;
  background: #fef3c7; border: 1px solid #fde68a; border-radius: var(--radius);
  padding: 10px 13px; margin: -6px 0 16px;
}

/* Nyt dokument → Upload PDF */
.newdoc-pdf-pick {
  display: block; padding: 18px; border: 2px dashed var(--gray-300); border-radius: 8px;
  text-align: center; cursor: pointer; margin-bottom: 12px;
}
.newdoc-pdf-pick:hover { border-color: var(--gray-400); background: var(--gray-50, #fafafa); }
.newdoc-pdf-modes { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.newdoc-pdf-mode {
  padding: 12px 14px; border: 1px solid var(--gray-300); border-radius: 8px; cursor: pointer; font-size: .85rem;
}
.newdoc-pdf-mode:hover { border-color: var(--gray-400); }
.newdoc-pdf-mode.active { border-color: var(--red); box-shadow: 0 0 0 2px #ffd6da; }
.newdoc-pdf-mode-title { font-weight: 700; margin-bottom: 4px; }
@media (max-width: 560px) { .newdoc-pdf-modes { grid-template-columns: 1fr; } }