/* =====================================================================
   bioIP Admin-Center — Stylesheet
   Token-Set basiert auf bioIP-OS konsolidiertem Inventory:
     - Spacing: 14 Werte 4px-Grid
     - Type-Scale: 8 Werte Modular 1.125
     - Radius: [4, 8, 16, 9999] (Premium-Konsens)
     - Neutrals: 10 Stufen
     - Brand: Cyan #00aade dominant
   Visual-Direction: Notion/Linear-Cleanheit. KEINE Gradients in Admin-UI.
   ===================================================================== */

/* --- Inter Variable (self-hosted, DSGVO-konform) --- */
@font-face {
  font-family: 'Inter';
  src: url('/fonts/Inter-Variable.woff2') format('woff2-variations'),
       url('/fonts/Inter-Variable.woff2') format('woff2');
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

/* --- Tokens --- */
:root {
  /* Brand */
  --cyan-500: #00aade;
  --cyan-600: #0088b8;            /* WCAG-AA fuer Text-Links auf Weiss */
  --cyan-50:  #e6f6fc;
  --cyan-100: #ccebf8;

  /* Neutrals (10 Stufen) */
  --gray-50:  #fafafa;
  --gray-100: #f4f4f5;
  --gray-200: #e4e4e7;
  --gray-300: #d4d4d8;
  --gray-400: #a1a1aa;
  --gray-500: #757575;            /* WCAG-AA */
  --gray-600: #52525b;
  --gray-700: #3f3f46;
  --gray-800: #27272a;
  --gray-900: #18181b;

  /* Semantic */
  --success: #16a34a;
  --success-bg: #dcfce7;
  --success-border: #86efac;
  --warning: #f59e0b;
  --warning-bg: #fef3c7;
  --warning-border: #fcd34d;
  --danger: #dc2626;
  --danger-bg: #fee2e2;
  --danger-border: #fca5a5;
  --info: var(--cyan-500);
  --info-bg: var(--cyan-50);
  --info-border: var(--cyan-100);

  /* Spacing 4px-Grid */
  --s1: 4px;  --s2: 8px;   --s3: 12px;  --s4: 16px;
  --s5: 20px; --s6: 24px;  --s8: 32px;  --s10: 40px;
  --s12: 48px; --s16: 64px; --s20: 80px; --s24: 96px;
  --s32: 128px;

  /* Type-Scale Modular 1.125 */
  --fs-xs: 12px; --fs-sm: 13px; --fs-base: 14px; --fs-md: 16px;
  --fs-lg: 18px; --fs-xl: 20px; --fs-2xl: 24px; --fs-3xl: 32px;

  /* Radius (Premium-Konsens) */
  --r-sm: 4px; --r-md: 8px; --r-lg: 16px; --r-full: 9999px;

  /* Layout */
  --sidebar-w: 240px;
  --container-max: 920px;
  --header-h: 56px;

  /* Shadows (subtil — Linear-Stil) */
  --sh-sm: 0 1px 2px rgba(24,24,27,.04), 0 0 0 1px rgba(24,24,27,.06);
  --sh-md: 0 4px 12px rgba(24,24,27,.06), 0 0 0 1px rgba(24,24,27,.08);
  --sh-focus: 0 0 0 3px rgba(0,170,222,.25);
}

/* --- Reset / Base --- */
*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body {
  font-family: 'Inter', system-ui, -apple-system, sans-serif;
  font-size: var(--fs-base);
  line-height: 1.55;
  color: var(--gray-900);
  background: var(--gray-50);
  font-feature-settings: "ss01", "cv05", "cv11";
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

a {
  color: var(--cyan-600);
  text-decoration: none;
  border-radius: var(--r-sm);
}
a:hover { text-decoration: underline; }
a:focus-visible {
  outline: none;
  box-shadow: var(--sh-focus);
}

h1, h2, h3, h4 {
  margin: 0 0 var(--s3);
  font-weight: 600;
  letter-spacing: -0.011em;
  color: var(--gray-900);
}
h1 { font-size: var(--fs-2xl); letter-spacing: -0.02em; }
h2 { font-size: var(--fs-xl); }
h3 { font-size: var(--fs-lg); }
h4 { font-size: var(--fs-md); }

p { margin: 0 0 var(--s3); }
code { font-family: ui-monospace, "SFMono-Regular", Menlo, monospace;
       font-size: 0.92em; padding: 1px 5px; border-radius: var(--r-sm);
       background: var(--gray-100); color: var(--gray-800); }
pre { background: var(--gray-100); padding: var(--s3); border-radius: var(--r-md);
      overflow-x: auto; border: 1px solid var(--gray-200); }
pre code { background: none; padding: 0; }
hr { border: none; height: 1px; background: var(--gray-200); margin: var(--s6) 0; }

/* --- Layout: Sidebar + Content --- */
.app {
  display: grid;
  grid-template-columns: var(--sidebar-w) 1fr;
  min-height: 100vh;
}
.sidebar {
  background: #ffffff;
  border-right: 1px solid var(--gray-200);
  padding: var(--s5) var(--s4);
  display: flex; flex-direction: column;
  position: sticky; top: 0; height: 100vh;
}
.sidebar__brand {
  display: flex; align-items: center; gap: var(--s2);
  padding: 0 var(--s2) var(--s5);
  border-bottom: 1px solid var(--gray-100);
  margin-bottom: var(--s4);
}
.sidebar__brand-mark {
  width: 28px; height: 28px; border-radius: var(--r-md);
  background: var(--cyan-500);
  display: flex; align-items: center; justify-content: center;
  color: #fff; font-weight: 700; font-size: 13px;
  letter-spacing: -0.02em;
}
.sidebar__brand-name { font-weight: 600; font-size: var(--fs-base); color: var(--gray-900); }
.sidebar__brand-tag  { font-size: var(--fs-xs); color: var(--gray-500); margin-top: 2px; }

.sidebar__section { font-size: 11px; font-weight: 600;
  text-transform: uppercase; letter-spacing: 0.06em;
  color: var(--gray-500); padding: var(--s4) var(--s2) var(--s2); }
.sidebar__nav { display: flex; flex-direction: column; gap: 2px; }
.sidebar__link {
  display: flex; align-items: center; gap: var(--s2);
  padding: var(--s2) var(--s3); border-radius: var(--r-md);
  color: var(--gray-700); font-size: var(--fs-base);
  text-decoration: none; transition: background 0.12s ease;
}
.sidebar__link:hover { background: var(--gray-100); text-decoration: none; }
.sidebar__link--active {
  background: var(--cyan-50);
  color: var(--cyan-600);
  font-weight: 500;
}
.sidebar__link svg { width: 16px; height: 16px; flex-shrink: 0; opacity: 0.85; }

.sidebar__footer { margin-top: auto; padding-top: var(--s4);
  border-top: 1px solid var(--gray-100); font-size: var(--fs-xs); color: var(--gray-500); }
.sidebar__footer a { color: var(--gray-600); }

.main { padding: var(--s8) var(--s10) var(--s12);
  max-width: calc(var(--container-max) + 2 * var(--s10));
  margin: 0 auto; width: 100%; }

.page-header { display: flex; align-items: flex-start; justify-content: space-between;
  gap: var(--s6); margin-bottom: var(--s6); }
.page-header__title { font-size: var(--fs-2xl); margin: 0; }
.page-header__sub { color: var(--gray-500); font-size: var(--fs-base); margin-top: var(--s1); }
.page-header__actions { display: flex; gap: var(--s2); flex-shrink: 0; }

/* --- Buttons --- */
.btn {
  display: inline-flex; align-items: center; justify-content: center;
  gap: var(--s2); padding: 9px 14px; min-height: 36px;
  font-family: inherit; font-size: var(--fs-base); font-weight: 500;
  border: 1px solid var(--gray-300); border-radius: var(--r-md);
  background: #fff; color: var(--gray-800);
  cursor: pointer; transition: all 0.12s ease;
  text-decoration: none;
}
.btn:hover { background: var(--gray-50); text-decoration: none; }
.btn:focus-visible { outline: none; box-shadow: var(--sh-focus); }
.btn--primary { background: var(--cyan-600); color: #fff;
  border-color: var(--cyan-600); }
.btn--primary:hover { background: #00729a; border-color: #00729a; }
.btn--ghost { border-color: transparent; background: transparent; color: var(--gray-700); }
.btn--ghost:hover { background: var(--gray-100); }
.btn--danger { background: #fff; color: var(--danger); border-color: var(--danger-border); }
.btn--danger:hover { background: var(--danger-bg); }
.btn--sm { min-height: 28px; padding: 4px 10px; font-size: var(--fs-sm); }
.btn:disabled { opacity: 0.5; cursor: not-allowed; }

/* --- Cards / Panels --- */
.panel {
  background: #fff; border: 1px solid var(--gray-200);
  border-radius: var(--r-lg);
  box-shadow: var(--sh-sm);
}
.panel__header { padding: var(--s4) var(--s5);
  border-bottom: 1px solid var(--gray-200);
  display: flex; align-items: center; justify-content: space-between; }
.panel__title { font-size: var(--fs-md); font-weight: 600; margin: 0; }
.panel__body { padding: var(--s5); }

/* --- Stats Grid --- */
.stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: var(--s3); margin-bottom: var(--s6); }
.stat { background: #fff; border: 1px solid var(--gray-200); border-radius: var(--r-md);
  padding: var(--s4) var(--s5); }
.stat__label { font-size: var(--fs-xs); color: var(--gray-500);
  text-transform: uppercase; letter-spacing: 0.05em; font-weight: 500; }
.stat__value { font-size: var(--fs-2xl); font-weight: 600; color: var(--gray-900);
  margin-top: var(--s1); letter-spacing: -0.02em;
  font-variant-numeric: tabular-nums; }

/* --- Tables --- */
.table-wrap { background: #fff; border: 1px solid var(--gray-200);
  border-radius: var(--r-lg); overflow: hidden; box-shadow: var(--sh-sm); }
.table { width: 100%; border-collapse: collapse; font-size: var(--fs-base); }
.table th {
  text-align: left; font-weight: 500; color: var(--gray-500);
  font-size: var(--fs-xs); text-transform: uppercase; letter-spacing: 0.05em;
  padding: var(--s3) var(--s4); border-bottom: 1px solid var(--gray-200);
  background: var(--gray-50);
}
.table td { padding: var(--s4); border-bottom: 1px solid var(--gray-100);
  vertical-align: top; color: var(--gray-800); }
.table tr:last-child td { border-bottom: none; }
.table tr:hover td { background: var(--gray-50); }
.table__cell-strong { font-weight: 500; color: var(--gray-900); }
.table__cell-mute   { color: var(--gray-500); font-size: var(--fs-sm); }
.table__cell-mono   { font-family: ui-monospace, "SFMono-Regular", Menlo, monospace;
  font-size: var(--fs-sm); color: var(--gray-700); }

/* --- Badges --- */
.badge {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 2px 8px; border-radius: var(--r-full);
  font-size: var(--fs-xs); font-weight: 500; line-height: 1.6;
  background: var(--gray-100); color: var(--gray-700);
  border: 1px solid var(--gray-200);
}
.badge--success { background: var(--success-bg); color: #166534; border-color: var(--success-border); }
.badge--warning { background: var(--warning-bg); color: #92400e; border-color: var(--warning-border); }
.badge--danger  { background: var(--danger-bg); color: #991b1b; border-color: var(--danger-border); }
.badge--info    { background: var(--info-bg); color: var(--cyan-600); border-color: var(--info-border); }
.badge--mute    { background: var(--gray-100); color: var(--gray-500); }
.badge__dot { width: 6px; height: 6px; border-radius: 50%; background: currentColor; }

/* --- Forms --- */
.form { display: flex; flex-direction: column; gap: var(--s5); }
.form-field { display: flex; flex-direction: column; gap: var(--s1); }
.form-field__label { font-size: var(--fs-sm); font-weight: 500; color: var(--gray-700); }
.form-field__hint  { font-size: var(--fs-xs); color: var(--gray-500); }
.form-field__error { font-size: var(--fs-sm); color: var(--danger); }
.input, .select, .textarea {
  font-family: inherit; font-size: var(--fs-base);
  padding: 9px 12px; border: 1px solid var(--gray-300);
  border-radius: var(--r-md); background: #fff;
  color: var(--gray-900); width: 100%;
  transition: border-color 0.12s ease, box-shadow 0.12s ease;
}
.input:focus, .select:focus, .textarea:focus {
  outline: none; border-color: var(--cyan-500); box-shadow: var(--sh-focus);
}
.textarea { min-height: 280px; line-height: 1.55; resize: vertical;
  font-family: ui-monospace, "SFMono-Regular", Menlo, monospace;
  font-size: var(--fs-sm); }

.form-row { display: flex; gap: var(--s3); align-items: flex-end; flex-wrap: wrap; }
.form-row > * { flex: 1; min-width: 200px; }
.form-actions { display: flex; gap: var(--s2); justify-content: flex-end; padding-top: var(--s4);
  border-top: 1px solid var(--gray-200); margin-top: var(--s4); }

/* Checkbox-Pill (fuer scopes) */
.pill-check {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 6px 12px; border-radius: var(--r-full);
  border: 1px solid var(--gray-300); background: #fff;
  font-size: var(--fs-sm); cursor: pointer;
  transition: all 0.12s ease;
}
.pill-check input { display: none; }
.pill-check:has(input:checked) {
  background: var(--cyan-50); border-color: var(--cyan-500); color: var(--cyan-600); font-weight: 500;
}

/* --- Editor Layout (split) --- */
.editor {
  display: grid; grid-template-columns: 1fr 1fr; gap: var(--s4);
  margin-bottom: var(--s4);
}
@media (max-width: 900px) { .editor { grid-template-columns: 1fr; } }
.editor__pane { background: #fff; border: 1px solid var(--gray-200);
  border-radius: var(--r-lg); display: flex; flex-direction: column;
  min-height: 480px; }
.editor__pane-header { padding: var(--s3) var(--s4);
  border-bottom: 1px solid var(--gray-200); font-size: var(--fs-xs);
  font-weight: 600; color: var(--gray-500); text-transform: uppercase;
  letter-spacing: 0.05em; }
.editor__pane-body { padding: 0; flex: 1; display: flex; flex-direction: column; }
.editor__pane-body .textarea { border: none; border-radius: 0;
  flex: 1; min-height: 480px; padding: var(--s4); }
.editor__pane-body .textarea:focus { box-shadow: none; }
.preview-content { padding: var(--s4); overflow-y: auto;
  font-size: var(--fs-base); line-height: 1.7; max-height: 600px; }
.preview-content h1, .preview-content h2, .preview-content h3 {
  margin-top: var(--s5); margin-bottom: var(--s2); }
.preview-content h2:first-child, .preview-content h3:first-child { margin-top: 0; }
.preview-content ul, .preview-content ol { padding-left: var(--s5); }
.preview-content li { margin-bottom: var(--s1); }

/* --- Flash Messages --- */
.flash { padding: var(--s3) var(--s4); border-radius: var(--r-md);
  margin-bottom: var(--s4); font-size: var(--fs-base);
  display: flex; align-items: center; gap: var(--s2); }
.flash--success { background: var(--success-bg); color: #166534;
  border: 1px solid var(--success-border); }
.flash--error   { background: var(--danger-bg); color: #991b1b;
  border: 1px solid var(--danger-border); }

/* --- Dot Status (subscription health) --- */
.dot { width: 8px; height: 8px; border-radius: 50%; display: inline-block; }
.dot--ok { background: var(--success); }
.dot--warn { background: var(--warning); }
.dot--err { background: var(--danger); }
.dot--idle { background: var(--gray-400); }

/* --- Login (single-purpose layout) --- */
.login-shell {
  min-height: 100vh; display: grid;
  grid-template-columns: 1fr; place-items: center;
  background: var(--gray-50); padding: var(--s5);
}
.login-card { width: 100%; max-width: 380px;
  background: #fff; border: 1px solid var(--gray-200);
  border-radius: var(--r-lg); box-shadow: var(--sh-md);
  padding: var(--s8); }
.login-card__brand { display: flex; align-items: center; gap: var(--s2);
  margin-bottom: var(--s6); }
.login-card h1 { font-size: var(--fs-xl); margin-bottom: var(--s1); }
.login-card__sub { color: var(--gray-500); font-size: var(--fs-sm);
  margin-bottom: var(--s5); }
.login-card .form-actions { border-top: none; padding-top: 0; justify-content: stretch; }
.login-card .btn { width: 100%; }

/* --- Legal Page (own /datenschutz, /impressum, /barrierefreiheit) --- */
.legal-shell { background: var(--gray-50); min-height: 100vh; }
.legal-nav { background: #fff; border-bottom: 1px solid var(--gray-200);
  padding: var(--s4) var(--s6); display: flex; align-items: center;
  justify-content: space-between; }
.legal-nav__brand { display: flex; align-items: center; gap: var(--s2);
  font-weight: 600; color: var(--gray-900); text-decoration: none; }
.legal-nav__links { display: flex; gap: var(--s4); font-size: var(--fs-sm); }
.legal-main { max-width: 720px; margin: 0 auto; padding: var(--s10) var(--s5); }
.legal-main h1 { font-size: var(--fs-3xl); letter-spacing: -0.025em; margin-bottom: var(--s2); }
.legal-main h2 { font-size: var(--fs-xl); margin-top: var(--s8); margin-bottom: var(--s3); }
.legal-main h3 { font-size: var(--fs-lg); margin-top: var(--s6); margin-bottom: var(--s2); }
.legal-main p, .legal-main li { color: var(--gray-700); line-height: 1.75; font-size: var(--fs-md); }
.legal-main ul { padding-left: var(--s5); }
.legal-main .meta { color: var(--gray-500); font-size: var(--fs-sm);
  margin-top: var(--s5); display: flex; gap: var(--s4); align-items: center; }

/* --- Markdown-Render in Versions-Anzeige --- */
.md-render { line-height: 1.75; color: var(--gray-800); }
.md-render h1, .md-render h2, .md-render h3 { color: var(--gray-900); }
.md-render h1 { font-size: var(--fs-2xl); margin-top: var(--s6); }
.md-render h2 { font-size: var(--fs-xl); margin-top: var(--s6); }
.md-render h3 { font-size: var(--fs-lg); margin-top: var(--s5); }
.md-render code { font-size: 0.9em; }

/* --- Audit-Log compact list --- */
.audit-row { display: grid; grid-template-columns: 180px 140px 1fr 200px;
  gap: var(--s3); padding: var(--s3) var(--s4);
  border-bottom: 1px solid var(--gray-100);
  font-size: var(--fs-sm); align-items: baseline; }
.audit-row:last-child { border-bottom: none; }
.audit-row__time { color: var(--gray-500); font-variant-numeric: tabular-nums; }
.audit-row__action { font-family: ui-monospace, "SFMono-Regular", Menlo, monospace;
  font-size: var(--fs-xs); color: var(--gray-700);
  background: var(--gray-100); padding: 2px 8px; border-radius: var(--r-sm);
  display: inline-block; width: fit-content; }
.audit-row__details { color: var(--gray-700); font-size: var(--fs-sm); }
.audit-row__actor { color: var(--gray-500); font-size: var(--fs-sm);
  text-align: right; font-variant-numeric: tabular-nums; }

@media (max-width: 760px) {
  .audit-row { grid-template-columns: 1fr; gap: var(--s1); }
  .audit-row__actor { text-align: left; }
}

/* --- Empty States --- */
.empty { text-align: center; padding: var(--s12) var(--s5);
  color: var(--gray-500); }
.empty__title { font-size: var(--fs-md); color: var(--gray-700);
  margin-bottom: var(--s2); }
.empty__sub { font-size: var(--fs-sm); margin-bottom: var(--s5); }

/* --- Mobile Sidebar (klappbar) --- */
@media (max-width: 880px) {
  .app { grid-template-columns: 1fr; }
  .sidebar { position: static; height: auto; flex-direction: row;
    overflow-x: auto; padding: var(--s3); gap: var(--s2); }
  .sidebar__brand, .sidebar__section, .sidebar__footer { display: none; }
  .sidebar__nav { flex-direction: row; gap: var(--s1); }
  .sidebar__link { white-space: nowrap; padding: var(--s2) var(--s3); }
  .main { padding: var(--s5) var(--s4); }
}

/* --- Skip-Link (a11y) --- */
.skip-link { position: absolute; left: -9999px; top: 0;
  background: var(--gray-900); color: #fff; padding: var(--s2) var(--s4);
  border-radius: var(--r-md); }
.skip-link:focus { left: var(--s2); top: var(--s2); z-index: 100; }

/* --- Reveal-Code-Box (nur bei API-Key-Anlage) --- */
.reveal-key { background: var(--gray-900); color: #e6f6fc;
  padding: var(--s4); border-radius: var(--r-md);
  font-family: ui-monospace, "SFMono-Regular", Menlo, monospace;
  font-size: var(--fs-sm); word-break: break-all;
  border-left: 3px solid var(--cyan-500); }
.reveal-key__warn { color: var(--warning); font-size: var(--fs-sm);
  margin-top: var(--s2); }