/* indstillinger-vidensbase.css — Vidensbase-fanens egen brand-kanon.
 *
 * BEVIDST i mål-kanonen (salvie #4A7A68/#7CB8A4, varm ink #2B2A27, #FFFEFB-kort,
 * #E6DFD4-hårstreger, 15px, 16px/600 normal-case sektions-titler) — IKKE den
 * pensionerede "blød bølge"-brune resten af /indstillinger/ stadig bærer. Når
 * indstillinger-redesignet lander matcher denne fane allerede; indtil da er den
 * launch-gatet + admin-only, så mismatchen ses aldrig af en bruger.
 * Scoped under #panel-vidensbase — bløder aldrig ind i de andre faner.
 */

#panel-vidensbase {
  --vb-ink: #2B2A27;
  --vb-mut: #6B655C;
  --vb-sage: #4A7A68;
  --vb-sage-soft: rgba(74, 122, 104, 0.10);
  --vb-card: #FFFEFB;
  --vb-hair: #E6DFD4;
  --vb-rust: #A6594B;
  --vb-rust-soft: rgba(166, 89, 75, 0.10);
}
[data-theme="dark"] #panel-vidensbase {
  --vb-ink: #EDE9E1;
  --vb-mut: #A39C90;
  --vb-sage: #7CB8A4;
  --vb-sage-soft: rgba(124, 184, 164, 0.14);
  --vb-card: #252320;
  --vb-hair: #3A362F;
  --vb-rust: #D4A89A;
  --vb-rust-soft: rgba(212, 168, 154, 0.14);
}

#panel-vidensbase .vb-head { display: flex; align-items: baseline; justify-content: space-between; gap: 8px 12px; margin-bottom: 4px; flex-wrap: wrap; }
#panel-vidensbase .vb-title { font-size: 20px; font-weight: 600; color: var(--vb-ink); margin: 0; }
/* Ombryder/klipper lange org-navne (hostile-ui-r2 M1: nowrap uden bredde-loft
   skubbede ud af panelet på 375px). */
#panel-vidensbase .vb-org { font-size: 13px; color: var(--vb-sage); display: inline-flex; align-items: center; gap: 6px; max-width: 100%; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
#panel-vidensbase .vb-lead { font-size: 15px; color: var(--vb-mut); line-height: 1.6; margin: 0 0 20px; max-width: 56ch; }

#panel-vidensbase .vb-quota { display: flex; gap: 12px; margin-bottom: 18px; flex-wrap: wrap; }
#panel-vidensbase .vb-quota-card { flex: 1 1 200px; background: var(--vb-card); border: 0.5px solid var(--vb-hair); border-radius: 12px; padding: 14px 16px; }
#panel-vidensbase .vb-quota-label { font-size: 13px; color: var(--vb-mut); margin-bottom: 6px; }
#panel-vidensbase .vb-quota-num { font-size: 22px; font-weight: 600; color: var(--vb-ink); }
#panel-vidensbase .vb-quota-num small { font-size: 14px; font-weight: 400; color: var(--vb-mut); }
#panel-vidensbase .vb-bar { height: 7px; border-radius: 4px; background: var(--vb-hair); overflow: hidden; margin: 4px 0 7px; }
#panel-vidensbase .vb-bar-fill { height: 100%; background: var(--vb-sage); border-radius: 4px; transition: width 240ms ease; width: 0; }

#panel-vidensbase .vb-drop {
  border: 1.5px dashed var(--vb-hair); border-radius: 12px; padding: 22px; text-align: center;
  background: var(--vb-card); margin-bottom: 20px; transition: border-color 160ms ease, background 160ms ease;
}
#panel-vidensbase .vb-drop.vb-dragover { border-color: var(--vb-sage); background: var(--vb-sage-soft); }
#panel-vidensbase .vb-drop-icon { font-size: 26px; color: var(--vb-sage); line-height: 1; }
#panel-vidensbase .vb-drop-title { font-size: 15px; font-weight: 500; color: var(--vb-ink); margin: 9px 0 3px; }
#panel-vidensbase .vb-drop-hint { font-size: 13px; color: var(--vb-mut); margin-bottom: 14px; }
#panel-vidensbase .vb-drop-actions { display: flex; gap: 9px; justify-content: center; flex-wrap: wrap; }
/* Busy-cue mens en fil udtrækkes (netværk + parse kan tage sekunder): rolig
   dæmpning + progress-cursor, så feedbacken overlever den selv-forsvindende toast. */
#panel-vidensbase .vb-drop.vb-busy { opacity: .6; cursor: progress; }
#panel-vidensbase .vb-btn:disabled { opacity: .55; cursor: default; pointer-events: none; }

#panel-vidensbase .vb-btn { display: inline-flex; align-items: center; justify-content: center; gap: 7px; font-size: 14.5px; font-weight: 500; padding: 9px 15px; min-height: 44px; border-radius: 8px; border: none; cursor: pointer; font-family: inherit; transition: filter 140ms ease, background 140ms ease; }
#panel-vidensbase .vb-btn:focus-visible { outline: none; box-shadow: 0 0 0 2px var(--vb-sage); }
#panel-vidensbase .vb-btn-primary { background: var(--vb-sage); color: #fff; }
[data-theme="dark"] #panel-vidensbase .vb-btn-primary { color: #12211C; }
#panel-vidensbase .vb-btn-primary:hover:not([disabled]) { filter: brightness(0.94); }
#panel-vidensbase .vb-btn-ghost { background: transparent; color: var(--vb-mut); border: 0.5px solid var(--vb-hair); }
#panel-vidensbase .vb-btn-ghost:hover:not([disabled]) { background: var(--vb-sage-soft); color: var(--vb-sage); }
#panel-vidensbase .vb-btn[disabled] { opacity: 0.5; cursor: default; }

#panel-vidensbase .vb-list-label { font-size: 13px; font-weight: 500; color: var(--vb-mut); margin: 0 0 10px; }
#panel-vidensbase .vb-list { display: flex; flex-direction: column; gap: 8px; }
#panel-vidensbase .vb-doc { display: flex; align-items: center; gap: 12px; padding: 13px 14px; border: 0.5px solid var(--vb-hair); border-radius: 10px; background: var(--vb-card); }
#panel-vidensbase .vb-doc-icon { font-size: 22px; color: var(--vb-sage); flex: 0 0 auto; }
#panel-vidensbase .vb-doc-main { flex: 1 1 auto; min-width: 0; }
#panel-vidensbase .vb-doc-title { font-size: 14.5px; font-weight: 500; color: var(--vb-ink); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
#panel-vidensbase .vb-doc-meta { display: flex; gap: 14px; margin-top: 2px; flex-wrap: wrap; }
#panel-vidensbase .vb-chip { display: inline-flex; align-items: center; gap: 5px; font-size: 12.5px; color: var(--vb-mut); }
#panel-vidensbase .vb-del { display: inline-flex; align-items: center; justify-content: center; background: transparent; border: 0.5px solid var(--vb-hair); border-radius: 8px; min-width: 44px; min-height: 44px; padding: 7px 9px; cursor: pointer; color: var(--vb-rust); font-size: 16px; line-height: 1; flex: 0 0 auto; transition: background 140ms ease; }
#panel-vidensbase .vb-del:hover { background: var(--vb-rust-soft); }
#panel-vidensbase .vb-del:focus-visible { outline: none; box-shadow: 0 0 0 2px var(--vb-rust); }

/* Windows High Contrast / forced-colors suppresses box-shadow, so the calm sage/rust
   focus rings above vanish there. Restore a real outline so keyboard focus stays visible
   for this ADHD/dyslexia audience (WCAG 2.4.7). System colours only inside the query. */
@media (forced-colors: active) {
  #panel-vidensbase .vb-btn:focus-visible,
  #panel-vidensbase .vb-del:focus-visible { outline: 2px solid ButtonText; outline-offset: 1px; }
}

#panel-vidensbase .vb-empty { text-align: center; padding: 24px; color: var(--vb-mut); font-size: 14px; }
#panel-vidensbase .vb-note { margin-top: 16px; padding: 12px 14px; background: var(--vb-sage-soft); border-radius: 10px; display: flex; gap: 10px; align-items: flex-start; font-size: 13px; color: var(--vb-ink); line-height: 1.55; }
#panel-vidensbase .vb-note i { font-size: 18px; color: var(--vb-sage); flex: 0 0 auto; margin-top: 1px; }

/* Paste-modal — normal-flow faux-viewport (position:fixed forbudt i mockup-reglen,
   men her er vi i den ægte side; brug alligevel overlay-mønstret sidens dialoger bruger). */
#panel-vidensbase .vb-modal-back { position: fixed; inset: 0; background: rgba(20,18,16,0.45); display: none; align-items: center; justify-content: center; z-index: 1200; padding: 20px; }
#panel-vidensbase .vb-modal-back.vb-open { display: flex; }
/* dvh (ikke vh) så iOS Safari-værktøjslinjen ikke klipper Gem/Annuller
   (hostile-ui-r2 M2); vh-fallback for ældre browsere. */
#panel-vidensbase .vb-modal { background: var(--vb-card); border: 0.5px solid var(--vb-hair); border-radius: 14px; padding: 20px; width: 100%; max-width: 520px; box-sizing: border-box; max-height: 85vh; max-height: 85dvh; overflow-y: auto; }
#panel-vidensbase .vb-modal h3 { font-size: 16px; font-weight: 600; color: var(--vb-ink); margin: 0 0 12px; }
#panel-vidensbase .vb-modal input.vb-mtitle, #panel-vidensbase .vb-modal textarea.vb-mtext {
  width: 100%; font-family: inherit; font-size: 14.5px; color: var(--vb-ink); background: transparent;
  border: 0.5px solid var(--vb-hair); border-radius: 8px; padding: 10px 12px; margin-bottom: 12px; box-sizing: border-box;
}
/* 44px touch-target på titel-inputtet (hostile-ui-r5 M2; textarea er høj nok). */
#panel-vidensbase .vb-modal input.vb-mtitle { min-height: 44px; }
#panel-vidensbase .vb-modal textarea.vb-mtext { min-height: 180px; resize: vertical; line-height: 1.55; }
#panel-vidensbase .vb-modal input.vb-mtitle:focus-visible, #panel-vidensbase .vb-modal textarea.vb-mtext:focus-visible { outline: none; border-color: var(--vb-sage); }
#panel-vidensbase .vb-modal-foot { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
#panel-vidensbase .vb-modal-count { font-size: 12.5px; color: var(--vb-mut); }
#panel-vidensbase .vb-modal-btns { display: flex; gap: 9px; }

/* Dark-hærdning (hostile-ui-r2 H2) — samme mønster som .ss-ordbog-chip i
   nabo-filen: !important på de dark-flader en global reset kunne ramme.
   Klasserne er unikke under #panel-vidensbase-id'et, så INTET legitimt kan
   tabe til det. Staging computed-style-probe validerer det renderede resultat
   (fast QA-trin). Verificeret: de eneste globale dark-!important-regler rammer
   .set-konto-privacy-link/.ss-ordbog-chip + wildcard-backdrop-filter — ingen
   rører .vb-* — men beltet lukker recidivisten definitivt. */
[data-theme="dark"] #panel-vidensbase .vb-quota-card,
[data-theme="dark"] #panel-vidensbase .vb-drop,
[data-theme="dark"] #panel-vidensbase .vb-doc,
[data-theme="dark"] #panel-vidensbase .vb-modal {
  background: var(--vb-card) !important;
  border-color: var(--vb-hair) !important;
}
/* Drag-over-tilstanden må overleve beltet (hostile-ui-r5 H1): sage-highlight
   når en fil trækkes over — også i dark. */
[data-theme="dark"] #panel-vidensbase .vb-drop.vb-dragover {
  background: var(--vb-sage-soft) !important;
  border-color: var(--vb-sage) !important;
}
/* FULD ink-hierarki i dark (hostile-ui-r3 H1: partiel !important var
   inkonsistent — enten alle eller ingen). Alle .vb-* tekstfarver hærdet. */
[data-theme="dark"] #panel-vidensbase .vb-title,
[data-theme="dark"] #panel-vidensbase .vb-doc-title,
[data-theme="dark"] #panel-vidensbase .vb-quota-num,
[data-theme="dark"] #panel-vidensbase .vb-modal h3,
[data-theme="dark"] #panel-vidensbase .vb-note { color: var(--vb-ink) !important; }
/* Flade-baggrunde der ellers kunne wipes af global dark-reset (hostile-ui-r6
   M1): note-tint, kvote-bar (spor+fyld) og modal-scrim. */
[data-theme="dark"] #panel-vidensbase .vb-note { background: var(--vb-sage-soft) !important; }
[data-theme="dark"] #panel-vidensbase .vb-bar { background: var(--vb-hair) !important; }
[data-theme="dark"] #panel-vidensbase .vb-bar-fill { background: var(--vb-sage) !important; }
[data-theme="dark"] #panel-vidensbase .vb-modal-back { background: rgba(10, 8, 6, 0.6) !important; }
[data-theme="dark"] #panel-vidensbase .vb-lead,
[data-theme="dark"] #panel-vidensbase .vb-quota-label,
[data-theme="dark"] #panel-vidensbase .vb-drop-hint,
[data-theme="dark"] #panel-vidensbase .vb-list-label,
[data-theme="dark"] #panel-vidensbase .vb-chip,
[data-theme="dark"] #panel-vidensbase .vb-empty,
[data-theme="dark"] #panel-vidensbase .vb-quota-num small,
[data-theme="dark"] #panel-vidensbase .vb-modal-count { color: var(--vb-mut) !important; }
[data-theme="dark"] #panel-vidensbase .vb-org,
[data-theme="dark"] #panel-vidensbase .vb-drop-icon,
[data-theme="dark"] #panel-vidensbase .vb-doc-icon,
[data-theme="dark"] #panel-vidensbase .vb-note i { color: var(--vb-sage) !important; }
[data-theme="dark"] #panel-vidensbase .vb-drop-title { color: var(--vb-ink) !important; }
[data-theme="dark"] #panel-vidensbase .vb-del { color: var(--vb-rust) !important; background: transparent !important; border-color: var(--vb-hair) !important; }
[data-theme="dark"] #panel-vidensbase .vb-del:hover { background: var(--vb-rust-soft) !important; }
/* Knap-base-tilstande reasserted i dark (merged-M2): ghost forbliver transparent
   uden hover, primary får ingen utilsigtet kant. */
[data-theme="dark"] #panel-vidensbase .vb-btn-ghost { background: transparent !important; }
[data-theme="dark"] #panel-vidensbase .vb-btn-primary { border: none !important; }
[data-theme="dark"] #panel-vidensbase .vb-modal input.vb-mtitle,
[data-theme="dark"] #panel-vidensbase .vb-modal textarea.vb-mtext {
  background: transparent !important;
  color: var(--vb-ink) !important;
  border-color: var(--vb-hair) !important;
}
/* Fokus-ringen skal stadig kunne overtrumfe belt'ets border-color (M2). */
[data-theme="dark"] #panel-vidensbase .vb-modal input.vb-mtitle:focus-visible,
[data-theme="dark"] #panel-vidensbase .vb-modal textarea.vb-mtext:focus-visible { border-color: var(--vb-sage) !important; }
[data-theme="dark"] #panel-vidensbase .vb-btn-primary { background: var(--vb-sage) !important; color: #12211C !important; }
[data-theme="dark"] #panel-vidensbase .vb-btn-ghost { color: var(--vb-mut) !important; border-color: var(--vb-hair) !important; }
/* Hover-feedback må ikke dø under beltet (r4 low): sage på hover også i dark. */
[data-theme="dark"] #panel-vidensbase .vb-btn-ghost:hover:not([disabled]) { color: var(--vb-sage) !important; background: var(--vb-sage-soft) !important; }