/* =========================================================================
   AOP-Coding-Assistent — production styles for Variant D ("Klar").
   Complements colors_and_type.css (tokens) + aop.css (design system).
   Covers the app-specific chrome (catalog manager, reference panel) and the
   dynamically rendered report, all on the Medinnovo palette.
   ========================================================================= */

/* BE / UKB-Brandenburg-Thema (Design-System „UKB Brandenburg"): Slate als
   Arbeitsfarbe/Ink, Teal als Aktions-/Akzentfarbe, UKB-Rot nur für Gefahr/Lücke.
   Überschreibt die Medinnovo-Tokens (colors_and_type.css + aop.css). */
:root {
  /* Marken-/Cremetöne -> Weiß + kühle Slate-Waschungen (UKB-Slate-Rampe) */
  --mi-cream: #FFFFFF;
  --mi-cream-2: #F1F3F3;
  --mi-cream-3: #ECEEEF;
  --mi-paper: #FFFFFF;
  --mi-ink: #222A2E;       /* slate-900 */
  --mi-ink-90: #313C41;    /* slate-800 */
  --mi-ink-70: #4D5A60;    /* slate-600 = UKB-Slate */
  --mi-ink-50: #6B777D;    /* slate-500 */
  --mi-ink-30: #B4BCBF;    /* slate-300 */
  --mi-line: #D6DADC;      /* slate-200 */
  --mi-line-strong: #B4BCBF;
  /* Warn-/Gold bleibt neutral (bewusst kein Warmgelb) -> Slate */
  --mi-gold: #6B777D;
  --mi-gold-deep: #4D5A60;
  --mi-gold-tint: #ECEEEF;
  /* Rot = UKB-Rot (Gefahr/Lücke, MHB-Co-Brand) */
  --mi-red: #DC2F0C;
  --mi-red-deep: #B8260A;
  --mi-red-tint: #FBE6E2;

  /* Akzent/Aktionsfarbe -> UKB-Teal (primäre Chromatik des Pinwheels) */
  --aop-accent: #009BBB;       /* teal-500 */
  --aop-accent-deep: #00748C;  /* teal-700 */
  --aop-accent-tint: #ECF8FA;  /* teal-50 */

  /* semantische Flächen */
  --bg-1: #F6F7F7;   /* Seite: slate-50-Waschung */
  --bg-2: #FFFFFF;   /* Karten/Spalten: weiß */
  --bg-3: #ECEEEF;   /* genestete Flächen: slate-100 */
  --border: #D6DADC;
  --border-strong: #B4BCBF;
  --border-focus: #009BBB;
  --warning: #4D5A60;

  /* kühle, slate-getönte Schatten + Teal-Fokusring */
  --shadow-1: 0 1px 0 rgba(34,42,46,0.04), 0 1px 2px rgba(34,42,46,0.05);
  --shadow-2: 0 1px 0 rgba(34,42,46,0.04), 0 4px 12px rgba(34,42,46,0.06);
  --shadow-3: 0 2px 0 rgba(34,42,46,0.04), 0 12px 32px rgba(34,42,46,0.10);
  --shadow-focus: 0 0 0 3px rgba(0,155,187,0.30);

  /* Status: ok = UKB-Grün, Lücke = UKB-Rot; Warnung bleibt neutrales Slate */
  --st-ok-fg: #2F7A1C;  --st-ok-bg: #E6F4E2;  --st-ok-bd: #BCE0AD;
  --st-wn-fg: #4D5A60;
  --st-wn-bg: #ECEEEF;
  --st-wn-bd: #D6DADC;
  --st-gp-fg: #B8260A;  --st-gp-bg: #FBE6E2;  --st-gp-bd: #F2BDB1;
}

::selection { background: #D4EFF4; color: #222A2E; }  /* teal-100 */

html, body { margin: 0; height: 100%; }
body { background: var(--bg-1); }
.aop { height: 100vh; height: 100dvh; }

/* full-height two columns; each scrolls independently */
.d-left { overflow-y: auto; min-height: 0; overscroll-behavior: contain; }
.d-right { overflow: hidden; }

/* Desktop-Shell fixieren: nur die Spalten scrollen – nie das Dokument, damit
   der Disclaimer-Balken beim Scrollen ausserhalb der Spalten nicht mehr
   mitwandert/wächst. Mobil (<=900px) bleibt die Seite normal scrollbar. */
@media (min-width: 901px) {
  body { overflow: hidden; }
  .ap-bar { flex: 0 0 auto; }
  .d-body { flex: 1 1 auto; min-height: 0; }
  .ap-footer { flex: 0 0 auto; max-height: 45vh; overflow-y: auto; overscroll-behavior: contain; }
}

/* form field wrapper */
.field { display: flex; flex-direction: column; }
/* OP-Textfeld als feste, größenveränderbare Box statt flex-grow — verhindert,
   dass es in der scrollenden linken Spalte mit dem Referenz-/Katalogbereich
   überlappt. Die Spalte (.d-left) scrollt normal. */
.field--grow { flex: 0 0 auto; }
.field--grow .ap-textarea { flex: 0 0 auto; }
#opText, #catalogNotes { overflow: auto; }
#opText { min-height: 220px; flex: 0 0 auto; resize: vertical; }
#catalogNotes { min-height: 64px; resize: vertical; }

/* buttons */
.btn-sm { padding: 7px 11px; font-size: 12.5px; }
.ap-btn.danger { color: var(--danger); border-color: var(--st-gp-bd); }
.ap-btn svg { width: 17px; height: 17px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.icon-button { width: 34px; height: 34px; display: inline-flex; align-items: center; justify-content: center;
  border: 1px solid var(--border-strong); border-radius: var(--radius-md); background: var(--bg-2); cursor: pointer; color: var(--fg-1); }
.icon-button svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.icon-button:not(:has(svg)) { width: auto; min-width: 34px; padding: 0 8px; font-size: 11px; font-weight: 700; letter-spacing: 0.03em; }

/* top-bar status */
.ap-online.is-done::before { background: var(--fg-3); box-shadow: 0 0 0 3px var(--bg-3); }

/* draft status tag (app.js toggles .is-done) */
.ap-tag.is-done { color: var(--st-ok-fg); background: var(--st-ok-bg); border-color: var(--st-ok-bd); }
.ap-tag.is-done .ap-dot { background: var(--st-ok-fg); }
.ap-tag.is-warn .ap-dot { background: var(--st-wn-fg); }

/* tabs — app.js toggles .active (bridge to design's .is-on look) */
.ap-tab { position: relative; background: none; border: 0; }
.ap-tab.active { color: var(--fg-1); }
.ap-tab.active::after { content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 2px; background: var(--aop-accent); }

/* reference panel + catalog manager */
.reference-panel { border-top: 1px solid var(--border); padding-top: 16px; display: flex; flex-direction: column; gap: 14px; }
.reference-title-row { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; }
.reference-title-row p { margin: 4px 0 0; }
.reference-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
.check-tile { display: flex; align-items: center; gap: 8px; font-size: 12px; color: var(--fg-2);
  background: var(--bg-3); border: 1px solid var(--border); border-radius: var(--radius-sm); padding: 8px 10px; cursor: pointer; }
.check-tile input { accent-color: var(--mi-ink); }
.ai-toggle { grid-column: 1 / -1; }
.catalog-manager { background: var(--bg-3); border: 1px solid var(--border); border-radius: var(--radius-md);
  padding: 12px 14px; display: flex; flex-direction: column; gap: 10px; }
.catalog-manager-head { display: flex; justify-content: space-between; gap: 10px; }
.catalog-manager-head p { margin: 4px 0 0; }
.catalog-controls { display: flex; gap: 10px; align-items: flex-end; }
.catalog-controls .field { flex: 1 1 auto; }
.catalog-actions { display: flex; flex-wrap: wrap; gap: 6px; }
.catalog-status-list { display: flex; flex-direction: column; gap: 4px; }
.catalog-row { display: flex; justify-content: space-between; gap: 10px; font-size: 11.5px; padding: 6px 9px;
  border: 1px solid var(--border); border-radius: var(--radius-sm); background: var(--bg-2); color: var(--fg-2); }
.catalog-row strong { color: var(--fg-1); font-weight: 600; }
.catalog-row.is-loaded { border-color: var(--st-ok-bd); }
.catalog-row-count { font-family: var(--font-mono); color: var(--fg-3); white-space: nowrap; }
.catalog-status { font-size: 11.5px; color: var(--fg-3); margin: 0; }
.catalog-status.is-loaded { color: var(--st-ok-fg); }
.catalog-status.is-error { color: var(--danger); }
.reference-notes { display: flex; flex-direction: column; gap: 10px; }

/* ---- result column: dynamically rendered report ---- */
.report-output { flex: 1 1 auto; min-height: 0; overflow-y: auto; padding-right: 4px; }
.report-section { padding: 16px 0; border-top: 1px solid var(--border); }
.report-section:first-child { border-top: 0; padding-top: 4px; }
.report-section h3 { font-size: 12px; font-weight: 700; letter-spacing: var(--tracking-eyebrow);
  text-transform: uppercase; color: var(--fg-1); margin: 0 0 10px; }
.report-section h4 { font-size: 13px; font-weight: 600; margin: 14px 0 6px; }
/* Headline-Readouts: Revisionssicherheit + Vergütung */
.headline-readouts { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-bottom: 12px; }
.headline-card { display: flex; flex-direction: column; gap: 4px; padding: 14px 16px; border: 1px solid var(--border);
  border-left: 4px solid var(--border-strong); border-radius: var(--radius-md); background: var(--bg-2); }
.headline-card .hr-label { font-size: 11px; font-weight: 600; letter-spacing: var(--tracking-eyebrow); text-transform: uppercase; color: var(--fg-2); }
.headline-card .hr-value { font-size: 20px; font-weight: 700; line-height: 1.1; letter-spacing: -0.01em; text-transform: capitalize; }
.headline-card .hr-sub { font-size: 12px; color: var(--fg-3); line-height: 1.4; }
.headline-card.is-ok { border-left-color: var(--st-ok-fg); } .headline-card.is-ok .hr-value { color: var(--st-ok-fg); }
.headline-card.is-warn { border-left-color: var(--st-wn-fg); } .headline-card.is-warn .hr-value { color: var(--st-wn-fg); }
.headline-card.is-gap { border-left-color: var(--st-gp-fg); } .headline-card.is-gap .hr-value { color: var(--st-gp-fg); }
.headline-card.is-value { border-left-color: var(--aop-accent); } .headline-card.is-value .hr-value { color: var(--fg-1); text-transform: none; }
@media (max-width: 900px) { .headline-readouts { grid-template-columns: 1fr; } }

.summary-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 8px; }
.summary-item { display: flex; flex-direction: column; gap: 3px; background: var(--bg-2);
  border: 1px solid var(--border); border-radius: var(--radius-md); padding: 10px 12px; }
.summary-item span { font-size: 11px; font-weight: 600; letter-spacing: var(--tracking-eyebrow);
  text-transform: uppercase; color: var(--fg-2); }
.summary-item strong { font-size: 15px; font-weight: 600; }
.notice { font-size: 12.5px; color: var(--st-wn-fg); background: var(--st-wn-bg); border: 1px solid var(--st-wn-bd);
  border-radius: var(--radius-md); padding: 10px 12px; line-height: 1.45; margin: 8px 0; }
.section-note p { margin: 4px 0; font-size: 13px; color: var(--fg-2); line-height: 1.55; }
.report-list { margin: 0; padding-left: 20px; font-size: 13px; color: var(--fg-1); line-height: 1.55; }
.report-list li { margin-bottom: 4px; }
.table-wrap { overflow-x: auto; border: 1px solid var(--border); border-radius: var(--radius-md); margin: 4px 0; }
.report-output table { width: 100%; border-collapse: collapse; font-size: 12px; }
.report-output th, .report-output td { text-align: left; padding: 8px 10px; border-bottom: 1px solid var(--border);
  vertical-align: top; white-space: pre-wrap; }
.report-output th { background: var(--bg-3); font-weight: 600; font-size: 11px; letter-spacing: .02em;
  text-transform: uppercase; color: var(--fg-2); }
.report-output tr:last-child td { border-bottom: 0; }
.ai-section { border-left: 3px solid var(--aop-accent); padding-left: 14px; }
.ai-section h4 { margin: 12px 0 6px; }
.learn-rule.is-done { color: var(--st-ok-fg, #2F7A1C); border-color: var(--st-ok-fg, #2F7A1C); opacity: .85; cursor: default; }
.learn-reset { margin-left: 6px; }

/* empty state */
.empty-state { height: 100%; display: flex; flex-direction: column; align-items: center; justify-content: center;
  text-align: center; gap: 10px; color: var(--fg-3); padding: 40px; }
.empty-state svg { width: 64px; height: 64px; fill: none; stroke: var(--mi-ink-30); stroke-width: 3;
  stroke-linecap: round; stroke-linejoin: round; }
.empty-state h3 { font-family: var(--font-sans); font-weight: 700; font-size: 18px; color: var(--fg-2); margin: 0; }
.empty-state p { font-size: 13px; max-width: 340px; margin: 0; }

/* toast */
.copy-toast { position: fixed; bottom: 24px; left: 50%; transform: translateX(-50%); background: var(--mi-ink);
  color: var(--mi-cream); font-size: 13px; padding: 10px 16px; border-radius: var(--radius-pill);
  box-shadow: var(--shadow-3); z-index: 50; }

/* utilities */
.visually-hidden { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.is-hidden { display: none !important; }

/* responsive: stack columns on tablet/phone */
@media (max-width: 900px) {
  .aop { height: auto; min-height: 100vh; }
  .d-body { grid-template-columns: 1fr; }
  .d-left { border-right: 0; border-bottom: 1px solid var(--border); overflow: visible; }
  .d-right { overflow: visible; }
  .d-verdict { grid-template-columns: 1fr; }
  .report-output { overflow: visible; }
}

/* print: only the evaluation */
@media print {
  .ap-bar, .d-left, .ap-tabs, .d-actions, .d-verdict { display: none !important; }
  .aop, .d-body, .d-right { display: block; height: auto; overflow: visible; }
  .report-output { overflow: visible; }
}

/* ---- Governance-Engine UI (Provenienz, Readiness, Widersprüche) ---- */
.code-row-note .prov { font-size: 11.5px; color: var(--fg-3); margin: 2px 0 4px; }
.code-row-note .prov.prov-warn { color: var(--st-gp-fg); }
.code-contra { font-size: 12px; color: var(--st-gp-fg); background: var(--st-gp-bg); border: 1px solid var(--st-gp-bd);
  border-radius: var(--radius-sm); padding: 6px 9px; margin: 4px 0; }
.code-contra .contra-q { color: var(--fg-2); margin-top: 3px; }
.audit-panel { margin-top: 12px; border: 1px solid var(--border); border-left: 4px solid var(--border-strong);
  border-radius: var(--radius-md); padding: 10px 13px; background: var(--bg-2); display: flex; flex-direction: column; gap: 4px; }
.audit-panel.a-ok { border-left-color: var(--st-ok-fg); }
.audit-panel.a-warn { border-left-color: var(--st-wn-fg); }
.audit-panel.a-gap { border-left-color: var(--st-gp-fg); }
.audit-panel .ap-row { display: flex; justify-content: space-between; gap: 10px; font-weight: 600; }
.audit-panel .ap-k { text-transform: uppercase; letter-spacing: var(--tracking-eyebrow); font-size: 11px; color: var(--fg-2); }
.audit-panel .ap-block { font-size: 12px; color: var(--st-gp-fg); }
.audit-panel .ap-req { font-size: 12px; color: var(--fg-2); }
.audit-panel .ap-exp { font-size: 12px; color: var(--fg-3); }
.value-readiness { margin: 8px 0; border: 1px solid var(--border); border-left: 4px solid var(--border-strong);
  border-radius: var(--radius-md); padding: 9px 12px; background: var(--bg-2); font-size: 12.5px; }
.value-readiness.a-ok { border-left-color: var(--st-ok-fg); }
.value-readiness.a-warn { border-left-color: var(--st-wn-fg); }
.value-readiness.a-gap { border-left-color: var(--st-gp-fg); }
.value-readiness .vr-warn { margin: 4px 0 0; padding-left: 16px; color: var(--st-wn-fg); }
.value-readiness .vr-cat, .value-readiness .vr-exp { font-size: 11.5px; color: var(--fg-3); margin-top: 3px; }
.empty-note { font-size: 12px; color: var(--fg-3); padding: 8px 0; }
.issue-card { border: 1px solid var(--border); border-radius: var(--radius-md); padding: 10px 12px; margin-bottom: 8px; background: var(--bg-2); border-left: 4px solid var(--st-wn-fg); }
.issue-card.sev-hoch { border-left-color: var(--st-gp-fg); }
.issue-card.sev-niedrig, .issue-card.sev-hinweis { border-left-color: var(--border-strong); }
.issue-card .ic-h { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.issue-card .ic-sev { font-size: 10.5px; font-weight: 700; text-transform: uppercase; padding: 2px 7px; border-radius: 999px; background: var(--bg-3); color: var(--fg-2); }
.issue-card.sev-hoch .ic-sev { background: var(--st-gp-bg); color: var(--st-gp-fg); }
.issue-card .ic-t { font-weight: 600; }
.issue-card .ic-cls { margin-left: auto; font-size: 11px; color: var(--fg-3); }
.issue-card .ic-ev, .issue-card .ic-codes { font-size: 11.5px; color: var(--fg-3); margin-top: 3px; }
.issue-card .ic-ex { font-size: 12.5px; color: var(--fg-2); margin-top: 3px; }
.issue-card .ic-q { font-size: 12px; color: var(--fg-2); margin-top: 6px; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.tab-count.zero { display: none; }