/* ─── TRUSTOMAT BRAND THEME ─────────────────────────────────────────────────
   Single source of truth for brand colors / typography across all dashboards.
   Source: project_mail_standard.md (Mail Corporate Template).
   Eingebunden via <link rel="stylesheet" href="theme.css">
*/

:root {
  /* Brand-Farben — verbindlich aus Mail-Standard */
  --brand-navy:        #12234F;
  --brand-navy-2:      #0d1b3e;   /* Topbar-Bottom-Akzent */
  --brand-primary:     #2D599F;
  --brand-primary-2:   #244978;   /* Primary-Hover */
  --brand-primary-soft:   #B0CAF2;
  --brand-primary-softer: #E3ECF9;
  --brand-text:        #09122A;
  --brand-muted:       #5C5C5C;
  --brand-divider:     #E5E5E7;

  /* Topbar-Spezifika */
  --brand-topbar-bg:       linear-gradient(90deg, #0d1b3e 0%, #12234F 60%, #1a2e63 100%);
  --brand-topbar-fg:       #fff;
  --brand-topbar-fg-muted: #c0cfe0;
  --brand-topbar-border:   rgba(255,255,255,0.12);

  /* Typografie */
  --brand-font: 'Poppins', 'Montserrat', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Arial, sans-serif;
}

/* Poppins Webfont (mit Fallback auf Arial/Montserrat falls Block) */
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;600;700;800&display=swap');

/* ─── TOPBAR (brand-konform) ────────────────────────────────────────────────
   Hebt die bestehende `.topbar`-Definition pro Dashboard auf, ohne dass die
   Topbars angefasst werden müssen. Höhe + Padding bleiben kompatibel zu den
   bestehenden Sticky-Offsets (top: 52px für Toolbars/Tab-Navs).
*/
.topbar {
  background: var(--brand-topbar-bg) !important;
  color: var(--brand-topbar-fg) !important;
  box-shadow: 0 1px 0 rgba(255,255,255,0.05), 0 2px 12px rgba(13,27,62,0.25);
  border-bottom: 1px solid rgba(255,255,255,0.06);
}
.topbar .topbar-title {
  display: flex !important;
  align-items: center;
  gap: 10px;
  font-family: var(--brand-font);
  letter-spacing: 0.2px;
}
/* Wordmark-Logo in der Topbar (color: white für Navy-Header) */
.tkv-wordmark {
  display: inline-block;
  height: 22px;
  width: auto;
  color: #fff;
  vertical-align: middle;
}
.tkv-wordmark svg { display: block; height: 100%; width: auto; }
/* Trennstrich + Sub-Title nach dem Wordmark */
.tkv-topbar-sub {
  font-size: 13px;
  font-weight: 500;
  color: var(--brand-topbar-fg-muted);
  padding-left: 10px;
  margin-left: 4px;
  border-left: 1px solid rgba(255,255,255,0.18);
  letter-spacing: 0.2px;
}

/* `.topbar h1`-basierte Topbars (admin, kpi, ki, provisionen, ameise-logs, academy-admin, meta-ads, wiki, tarife, tarif-vergleich, …) */
.topbar h1 {
  display: flex !important;
  align-items: center;
  gap: 10px;
  font-family: var(--brand-font);
  font-weight: 700;
  font-size: 16px;
  letter-spacing: 0.2px;
  color: var(--brand-topbar-fg);
  margin: 0;
}
.topbar .tw-mark { height: 22px; width: auto; filter: brightness(0) invert(1); display: block; }
.topbar .tw-divider { color: rgba(255,255,255,0.30); margin: 0 4px; font-weight: 400; }
.topbar .tag { background: rgba(255,255,255,0.14) !important; color: var(--brand-topbar-fg) !important; border: 1px solid rgba(255,255,255,0.18) !important; font-family: var(--brand-font); }

/* User-Label rechts in der Topbar (etwas heller, brand-konform) */
.topbar .topbar-user,
.topbar #topbarUser {
  color: var(--brand-topbar-fg-muted) !important;
  font-family: var(--brand-font);
}

/* Topbar-Buttons (btn-secondary / btn-topbar) — neutralisiert auf Brand-Style */
.topbar .btn-secondary,
.topbar .btn-topbar {
  background: rgba(255,255,255,0.10) !important;
  color: var(--brand-topbar-fg) !important;
  border: 1px solid rgba(255,255,255,0.14) !important;
  font-family: var(--brand-font);
  transition: background 0.15s, border-color 0.15s;
}
.topbar .btn-secondary:hover,
.topbar .btn-topbar:hover {
  background: rgba(255,255,255,0.20) !important;
  border-color: rgba(255,255,255,0.26) !important;
}

/* ─── PRIMARY-BUTTONS (brand-konform) ───────────────────────────────────────
   Bestehende `.btn-primary` (Default `#1a7aff`) wird auf Brand-Primary umgestellt.
   `!important`, weil die meisten Komponenten inline-Background-Color setzen.
*/
.btn-primary {
  background: var(--brand-primary) !important;
  color: #fff !important;
  font-family: var(--brand-font);
  transition: background 0.15s, box-shadow 0.15s, transform 0.05s;
}
.btn-primary:hover { background: var(--brand-primary-2) !important; box-shadow: 0 2px 8px rgba(45,89,159,0.3); }
.btn-primary:active { transform: translateY(1px); }
/* Buttons mit Inline-Style-Background (Convert-Btn grün, KI-Btn lila Gradient,
   Mail-Btn blau etc.) NICHT überschreiben — nur die default-blauen */

/* ─── AKTIVE TABS / FOCUS-OUTLINES ─────────────────────────────────────────── */
/* Tab-Indikator (in mitarbeiter.html: `.tab-btn.active` mit `border-bottom-color: #1a7aff`) */
.tab-btn.active { color: var(--brand-primary) !important; border-bottom-color: var(--brand-primary) !important; }
/* Detail-Tab-Indikator (`.dp-tab.active`) */
.dp-tab.active { color: var(--brand-primary) !important; border-bottom-color: var(--brand-primary) !important; }
/* Sortierte Tabellenspalten */
th.sorted { color: var(--brand-primary) !important; }

/* Focus-Ring für Inputs (überall #1a7aff → Brand-Primary) */
.search-wrap input:focus,
.filter-select:focus,
.modal-field input:focus,
.note-textarea:focus,
.dp-edit-select:focus,
.wv-input:focus,
.wv-text-input:focus {
  border-color: var(--brand-primary) !important;
  box-shadow: 0 0 0 3px rgba(45,89,159,0.12) !important;
}

/* ─── DETAIL-PANEL AVATAR ──────────────────────────────────────────────────── */
/* Default-Gradient `#1a7aff → #6c3fff` ersetzen durch Navy → Primary */
.dp-avatar {
  background: linear-gradient(135deg, var(--brand-navy) 0%, var(--brand-primary) 100%) !important;
}

/* ─── PAGINATION ACTIVE PAGE ───────────────────────────────────────────────── */
.page-btn.active { background: var(--brand-primary) !important; border-color: var(--brand-primary) !important; }

/* ─── REFRESH-BUTTON / OWNER-SELECT FOCUS ───────────────────────────────────── */
.owner-select:focus { border-color: var(--brand-primary) !important; }