/* =====================================================================
   Botty Theme · Graphit (hell, gedämpft) · abgeleitet von Calm Theme v3
   Helles, ruhiges Farbschema: weiches Hellgrau statt Weiß, dunkle gut lesbare Schrift.
   Wird NACH styles.css geladen und ersetzt Farben/Schriftgrößen der älteren Design-Schichten
   an einer Stelle. Discord-Vorschauen (Embeds, Willkommenskarte, Server-Ansicht) bleiben
   bewusst im dunklen Discord-Look.
   ===================================================================== */
:root {
  --bg: #e6e6e4;
  --surface: #f2f2f0;
  --surface-2: #e8e8e6;
  --surface-3: #dcdcd9;
  --input: #fafaf9;
  --border: #d4d4d1;
  --border-soft: #dededb;
  --border-strong: #c0c0bc;
  --text: #262626;
  --muted: #55555a;
  --muted-2: #6e6e6a;
  --placeholder: #8f8f8a;
  --primary: #44474f;
  --primary-hover: #32353c;
  --primary-pink: #44474f;
  --primary-pink-2: #32353c;
  --accent-soft: rgb(68 71 79 / 10%);
  --accent-line: rgb(68 71 79 / 40%);
  --selected: #dcdde1;
  --selected-text: #262626;
  --on-primary: #ffffff;
  --danger: #b8443a;
  --danger-soft: rgb(201 71 79 / 10%);
  --danger-bg: #fbe9ea;
  --amber: #9a6b12;
  --green: #3a8f5f;
  --green-soft: rgb(47 158 106 / 12%);
  --info: #2a6fb0;
  --shadow: 0 10px 28px rgb(31 41 61 / 10%);
  --card-shadow: 0 1px 2px rgb(31 41 61 / 6%);
  --sidebar: #dcdcd9;
  --sidebar-2: #f2f2f0;
  --sidebar-text: #262626;
  --sidebar-muted: #5d6676;
  --topbar: rgb(238 241 245 / 94%);
  --overlay: rgb(31 36 48 / 35%);
}

/* ---------- Grundfläche & Schrift ---------- */
html { color-scheme: light !important; background: var(--bg) !important; }
body {
  color: var(--text) !important;
  background: var(--bg) !important;
  font-size: 15px;
  -webkit-font-smoothing: antialiased;
}
.ambient { display: none !important; }
* { scrollbar-color: var(--border-strong) transparent; }

/* ---------- Seitenleiste ---------- */
.sidebar {
  border-right: 1px solid var(--border) !important;
  background: var(--sidebar) !important;
  box-shadow: none !important;
  backdrop-filter: none !important;
}
.sidebar .brand { border-bottom-color: var(--border) !important; }
.sidebar .brand strong { color: var(--text) !important; font-size: 17px !important; }
.sidebar .brand span { color: var(--muted-2) !important; font-size: 11px !important; letter-spacing: .08em !important; }
.navigation::-webkit-scrollbar-thumb { background: var(--border-strong); }
.sidebar-bot-status { border-color: var(--border) !important; background: var(--surface) !important; box-shadow: none !important; }
.sidebar-bot-status .module-orb { color: var(--primary) !important; background: var(--accent-soft) !important; }
.sidebar-bot-copy strong { color: var(--text) !important; font-size: 13.5px !important; }
.sidebar-bot-copy small { color: var(--muted-2) !important; font-size: 12px !important; }
.nav-category > summary { color: var(--muted-2) !important; font-size: 11.5px !important; font-weight: 650 !important; letter-spacing: .07em !important; }
.nav-category > summary:hover { color: var(--muted) !important; }
.nav-category-chevron { color: var(--muted-2) !important; }
.nav-item { color: var(--muted) !important; }
.nav-item:hover { color: var(--text) !important; border-color: transparent !important; background: var(--surface-2) !important; transform: none !important; }
.nav-item.active {
  color: var(--text) !important;
  border-color: transparent !important;
  background: var(--accent-soft) !important;
  box-shadow: inset 3px 0 0 var(--primary) !important;
}
.nav-icon { border-color: transparent !important; color: var(--muted-2) !important; background: transparent !important; }
.nav-item:hover .nav-icon { color: var(--text) !important; border-color: transparent !important; }
.nav-item.active .nav-icon { color: var(--primary) !important; border-color: transparent !important; background: transparent !important; }
.nav-copy strong { font-size: 14px !important; font-weight: 600 !important; }
.nav-copy small { color: var(--muted-2) !important; font-size: 12px !important; font-weight: 400 !important; }
.nav-item.active .nav-copy small { color: var(--muted) !important; }
.sidebar-note { border-color: var(--border) !important; color: var(--text) !important; background: var(--surface) !important; box-shadow: none !important; }
.sidebar-note .shield-icon { color: var(--primary) !important; }
.sidebar-note strong { font-size: 13px !important; }
.sidebar-note span { color: var(--muted-2) !important; font-size: 12px !important; }

/* ---------- Kopfzeile ---------- */
.topbar {
  border-bottom-color: var(--border) !important;
  background: var(--topbar) !important;
  box-shadow: none !important;
  backdrop-filter: blur(8px) !important;
}
.topbar-context strong { color: var(--text) !important; font-size: 15px !important; }
.topbar-context small, .server-picker-wrap label, .user-menu span { color: var(--muted-2) !important; font-size: 12px !important; }
.module-orb.mini { color: var(--primary) !important; border-color: transparent !important; background: var(--accent-soft) !important; }
.connection-pill { color: var(--muted) !important; border-color: var(--border) !important; background: var(--surface) !important; }
.connection-pill.online { color: var(--green) !important; border-color: rgb(102 209 159 / 32%) !important; background: var(--green-soft) !important; }
.user-menu strong { color: var(--text) !important; }
.user-menu img { border-color: var(--border-strong) !important; }

/* ---------- Überschriften ---------- */
.page-heading h1, .section-heading h2, .dashboard-hero h1 { color: var(--text) !important; letter-spacing: -.02em !important; }
.page-heading p:not(.eyebrow), .section-heading p:not(.eyebrow), .dashboard-hero p { color: var(--muted) !important; font-size: 15px !important; }
.eyebrow { color: var(--primary) !important; font-size: 11.5px !important; font-weight: 650 !important; letter-spacing: .08em !important; }
.section-heading > span { color: var(--muted-2) !important; font-size: 13px !important; }

/* ---------- Dashboard & Kennzahlen ---------- */
.dashboard-hero {
  border-color: var(--border) !important;
  background: var(--surface) !important;
  box-shadow: var(--card-shadow) !important;
}
.hero-live { border-color: var(--border) !important; background: var(--surface-2) !important; }
.hero-live small { color: var(--muted-2) !important; font-size: 12px !important; }
.hero-live strong { color: var(--text) !important; }
/* Eine Zeile für alle Kennzahl-Kacheln statt 3 + 1 */
.dashboard-stats { grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)) !important; }
.stat-card {
  border-color: var(--border) !important;
  background: var(--surface) !important;
  box-shadow: var(--card-shadow) !important;
}
.stat-card:hover { border-color: var(--border-strong) !important; transform: none !important; }
.stat-card small { color: var(--muted) !important; font-size: 12.5px !important; letter-spacing: .02em !important; }
.stat-card strong { color: var(--text) !important; }
.stat-icon { color: var(--primary) !important; border-color: transparent !important; background: var(--accent-soft) !important; }
.dashboard-shortcut-card { border-color: var(--border) !important; color: var(--text) !important; background: var(--surface) !important; }
.dashboard-shortcut-card:hover { border-color: var(--accent-line) !important; background: var(--surface-2) !important; transform: none !important; }
.dashboard-shortcut-icon { color: var(--primary) !important; border-color: transparent !important; background: var(--accent-soft) !important; }
.dashboard-shortcut-copy strong { color: var(--text) !important; font-size: 14px !important; }
.dashboard-shortcut-copy small { color: var(--muted-2) !important; font-size: 12.5px !important; }
.dashboard-shortcut-arrow { color: var(--muted-2) !important; }
.dashboard-guild-item, .dashboard-guild-empty { border-color: var(--border) !important; color: var(--text) !important; background: var(--surface-2) !important; }
.dashboard-guild-item:hover, .dashboard-guild-item.active { border-color: var(--accent-line) !important; background: var(--accent-soft) !important; }
.guild-fallback { color: var(--primary) !important; background: var(--accent-soft) !important; }

/* ---------- Karten, Listen, Tabellen ---------- */
.panel, .feature-card, .module-card, .quick-panel, .social-creator-sidebar {
  border-color: var(--border) !important;
  color: var(--text) !important;
  background: var(--surface) !important;
  box-shadow: var(--card-shadow) !important;
}
.panel:hover, .feature-card:hover, .module-card:hover { border-color: var(--border) !important; }
.panel h2, .panel h3, .panel-heading h3, .feature-card h3, .module-card h3 { color: var(--text) !important; }
.panel > p, .panel-title-row p, .feature-card > p, .module-card p { color: var(--muted) !important; font-size: 14px !important; }
.compact-title-row, hr { border-color: var(--border) !important; }
.record-row, .empty-card, .notice-box, .stats-mini, .remote-command-row, .permission-matrix > *, .mapping-row, .managed-selection-item,
.access-new-permissions, .access-permission-group, .access-permission-option, .access-user-item.access-user-permission-card,
.ticket-emoji-trigger, .ticket-emoji-search-empty, .social-preview-card {
  border-color: var(--border) !important;
  color: var(--text) !important;
  background: var(--surface-2) !important;
}
.record-row:hover, .managed-selection-item:hover, .access-permission-option:hover { border-color: var(--border-strong) !important; background: var(--surface-3) !important; }
.record-row strong, .managed-selection-item strong, .access-permission-copy strong, .access-permission-heading strong, .access-user-card-header strong { color: var(--text) !important; font-size: 14px !important; }
.record-row small, .empty-card, .notice-box p, .access-permission-copy small, .access-permission-heading small { color: var(--muted) !important; font-size: 13px !important; }
.table-wrap, .audit-table-wrap { border-color: var(--border) !important; background: var(--surface) !important; }
table, th, td { border-color: var(--border) !important; }
th { color: var(--muted-2) !important; background: var(--surface-2) !important; font-size: 12.5px !important; }
td { color: var(--text) !important; background: var(--surface) !important; font-size: 14px !important; }
tbody tr:hover td { background: var(--surface-2) !important; }
.feature-output { border-color: var(--border) !important; color: var(--muted) !important; background: var(--input) !important; }

/* ---------- Reiter ---------- */
.feature-tabs, .editor-tabs, .social-platform-tabs { border-color: var(--border) !important; background: var(--surface) !important; }
.feature-tabs button, .editor-tab, .social-platform-tabs button { color: var(--muted) !important; background: transparent !important; font-size: 14px !important; }
.feature-tabs button:hover, .editor-tab:hover, .social-platform-tabs button:hover { color: var(--text) !important; background: var(--surface-2) !important; }
.feature-tabs button.active, .editor-tab.active, .social-platform-tabs button.active {
  color: var(--text) !important;
  background: var(--surface-3) !important;
  box-shadow: inset 0 -2px 0 var(--primary) !important;
}

/* ---------- Formulare ---------- */
.field label, .label-row label, .feature-card label, .mapping-role-heading > span, .mapping-emoji-field > span { color: var(--muted) !important; font-size: 13.5px !important; }
.field-help, .counter, .managed-selection-heading small { color: var(--muted-2) !important; font-size: 12.5px !important; }
input[type="text"], input[type="password"], input[type="number"], input[type="datetime-local"], input[type="time"], input[type="url"], textarea, .input, .textarea, .select,
.ticket-text-input, .ticket-description-input, .ticket-emoji-search {
  border-color: var(--border-strong) !important;
  color: var(--text) !important;
  background-color: var(--input) !important;
  box-shadow: none !important;
  font-size: 14.5px !important;
}
input::placeholder, textarea::placeholder { color: var(--placeholder) !important; }
input:focus, textarea:focus, .input:focus, .textarea:focus, .select:focus, .ticket-emoji-trigger[aria-expanded="true"] {
  border-color: var(--primary) !important;
  box-shadow: 0 0 0 3px var(--accent-soft) !important;
}
.select { background-image: linear-gradient(45deg, transparent 50%, var(--muted-2) 50%), linear-gradient(135deg, var(--muted-2) 50%, transparent 50%) !important; }
.select option { color: var(--text); background: var(--surface); }
.color-input input[type="color"] { border-color: var(--border-strong) !important; background: var(--input) !important; }
code { color: var(--primary-hover) !important; border-color: var(--border) !important; background: var(--surface-2) !important; }
input[type="range"] { accent-color: var(--primary) !important; }

/* Mehrfachauswahl (Kanäle/Rollen): dunkel, gut lesbar, ausgewählte Einträge klar markiert */
.multi-select, .support-calls-page .multi-select {
  min-height: 140px !important;
  padding: 6px !important;
  border: 1px solid var(--border-strong) !important;
  border-radius: 10px !important;
  color: var(--text) !important;
  background-color: var(--input) !important;
  background-image: none !important;
  color-scheme: light !important;
}
.multi-select option, .support-calls-page .multi-select option {
  margin: 1px 0;
  padding: 7px 10px !important;
  border-radius: 6px;
  color: var(--text) !important;
  background: transparent !important;
}
.multi-select option:checked, .support-calls-page .multi-select option:checked {
  color: var(--selected-text) !important;
  background: var(--selected) linear-gradient(0deg, var(--selected), var(--selected)) !important;
}
.multi-select:focus, .support-calls-page .multi-select:focus { border-color: var(--primary) !important; box-shadow: 0 0 0 3px var(--accent-soft) !important; }

/* Schalter: vorhandene .switch-Elemente */
.switch > span { border-color: var(--border-strong) !important; background: var(--border-strong) !important; }
.switch > span::after { background: #ffffff !important; box-shadow: 0 1px 3px rgb(31 41 61 / 30%) !important; }
.switch input:checked + span { border-color: var(--primary) !important; background: var(--primary) !important; }

/* Häkchen-Zeilen: Text direkt neben dem Schalter statt am anderen Ende */
.toggle-line {
  justify-content: flex-start !important;
  gap: 12px !important;
  color: var(--text) !important;
  font-size: 14px !important;
}
.toggle-line small { color: var(--muted-2) !important; font-size: 12.5px !important; }
.toggle-line input[type="checkbox"], .compact-toggle-line input[type="checkbox"], .mini-toggle input[type="checkbox"] {
  appearance: none;
  -webkit-appearance: none;
  position: relative;
  flex: none;
  width: 38px;
  height: 22px;
  margin: 0;
  border: 1px solid var(--border-strong);
  border-radius: 999px;
  background: var(--border-strong);
  cursor: pointer;
  transition: background .18s ease, border-color .18s ease;
}
.toggle-line input[type="checkbox"]::after, .compact-toggle-line input[type="checkbox"]::after, .mini-toggle input[type="checkbox"]::after {
  content: "";
  position: absolute;
  top: 2px;
  left: 2px;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: #ffffff;
  box-shadow: 0 1px 3px rgb(31 41 61 / 30%);
  transition: transform .18s ease;
}
.toggle-line input[type="checkbox"]:checked, .compact-toggle-line input[type="checkbox"]:checked, .mini-toggle input[type="checkbox"]:checked {
  border-color: var(--primary);
  background: var(--primary);
}
.toggle-line input[type="checkbox"]:checked::after, .compact-toggle-line input[type="checkbox"]:checked::after, .mini-toggle input[type="checkbox"]:checked::after { transform: translateX(16px); }
.toggle-line input[type="checkbox"]:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; }
.toggle-line input[type="checkbox"]:disabled { opacity: .5; cursor: not-allowed; }

/* Berechtigungs-Häkchen */
.access-permission-option:has(input:checked) { border-color: var(--accent-line) !important; background: var(--accent-soft) !important; box-shadow: inset 3px 0 0 var(--primary) !important; }
.access-permission-option.sensitive:has(input:checked) { border-color: rgb(233 190 104 / 45%) !important; background: rgb(233 190 104 / 13%) !important; box-shadow: inset 3px 0 0 var(--amber) !important; }
.access-permission-check { border-color: var(--border-strong) !important; background: var(--input) !important; }
.access-permission-option input:checked + .access-permission-check { border-color: var(--primary) !important; background: var(--primary) !important; }
.access-user-item.access-user-permission-card.system-admin { border-color: rgb(102 209 159 / 34%) !important; background: var(--surface-2) !important; }
.access-user-permission-block, .access-user-card-footer { border-color: var(--border) !important; }
.managed-selection-block { border-color: var(--border) !important; background: var(--surface-2) !important; }
.managed-selection-toolbar { border-color: var(--border) !important; background: var(--surface) !important; }
.managed-selection-label { color: var(--text) !important; }

/* ---------- Knöpfe & Status ---------- */
.button { min-height: 38px; border-radius: 9px !important; box-shadow: none !important; font-size: 14px !important; font-weight: 600 !important; }
.button.primary {
  color: var(--on-primary) !important;
  border-color: transparent !important;
  background: var(--primary) !important;
  box-shadow: none !important;
}
.button.primary:hover { filter: none !important; background: var(--primary-hover) !important; }
.button.secondary { color: var(--text) !important; border-color: var(--border-strong) !important; background: var(--surface-2) !important; }
.button.secondary:hover { color: var(--text) !important; border-color: var(--border-strong) !important; background: var(--surface-3) !important; }
.button.ghost { color: var(--muted) !important; }
.button.danger { color: var(--danger) !important; border-color: rgb(240 132 141 / 40%) !important; background: var(--danger-soft) !important; }
.button.danger:hover { background: rgb(240 132 141 / 22%) !important; }
.icon-button { color: var(--muted) !important; border-color: var(--border) !important; background: var(--surface-2) !important; }
.icon-button:hover { color: var(--text) !important; border-color: var(--border-strong) !important; background: var(--surface-3) !important; }
.status-badge { color: var(--muted) !important; border-color: var(--border) !important; background: var(--surface-2) !important; font-size: 12px !important; }
.status-badge.online { color: var(--green) !important; border-color: rgb(102 209 159 / 34%) !important; background: var(--green-soft) !important; }
.status-badge.danger, .notice-box.danger { color: var(--danger) !important; border-color: rgb(240 132 141 / 38%) !important; background: var(--danger-soft) !important; }

/* ---------- Social Media ---------- */
.social-creator-item { color: var(--muted) !important; }
.social-creator-item:hover { border-color: var(--border-strong) !important; background: var(--surface-2) !important; }
.social-creator-item.active { border-color: var(--accent-line) !important; background: var(--accent-soft) !important; }
.social-avatar { color: var(--on-primary) !important; background: var(--primary) !important; }
.social-creator-copy strong { color: var(--text) !important; }
.social-creator-copy small { color: var(--muted-2) !important; }
.social-preview-embed { border-color: var(--border) !important; background: var(--surface) !important; }
.social-preview-embed strong { color: var(--text) !important; }
.social-preview-embed p { color: var(--muted) !important; }
.social-simple-page .anti-spam-option { border-color: var(--accent-line) !important; background: var(--accent-soft) !important; }

/* ---------- Support-Rufe (bisher grüne Sonderfarbe) ---------- */
.support-call-log-row:hover, .support-call-log-row.active { border-color: var(--accent-line) !important; background: var(--accent-soft) !important; }
.support-call-event-dot { background: var(--primary) !important; box-shadow: 0 0 0 3px var(--accent-soft) !important; }
.support-call-status { font-size: 12px !important; }
.support-call-detail-grid small, .support-call-reason > small, .support-call-timeline > small, .support-call-event small { font-size: 12px !important; }
.support-call-detail-grid strong, .support-call-event strong, .support-call-reason p { font-size: 13.5px !important; }

/* ---------- Ticket-Emoji-Auswahl ---------- */
.ticket-emoji-trigger-preview { border-color: var(--border) !important; background: var(--surface-3) !important; }
.ticket-emoji-picker { border-color: var(--border-strong) !important; background: var(--surface) !important; }
.ticket-emoji-option:hover { border-color: var(--border-strong) !important; background: var(--surface-2) !important; }

/* ---------- Login ---------- */
.login-view { background: var(--bg) !important; }
.login-layout { border-color: var(--border) !important; background: var(--surface) !important; }
.login-hero { color: var(--text) !important; background: var(--sidebar) !important; }
.login-card-wrap { background: var(--surface) !important; }
.login-card { border-color: var(--border) !important; color: var(--text) !important; background: var(--surface-2) !important; box-shadow: none !important; }
.login-card .muted, .login-hint { color: var(--muted-2) !important; }
.panel-wordmark span, .login-copy h1 span { color: var(--primary) !important; }
.brand-mark { color: var(--on-primary) !important; background: var(--primary) !important; box-shadow: none !important; }

/* ---------- Meldungen & Laden ---------- */
.toast { color: var(--text) !important; background: var(--surface-3) !important; border: 1px solid var(--border-strong) !important; font-size: 14px !important; }
.toast.error { background: var(--danger-bg) !important; border-color: rgb(240 132 141 / 45%) !important; }
.loading-overlay { background: var(--overlay) !important; }
.loading-spinner { border-color: var(--border-strong) !important; border-top-color: var(--primary) !important; }

/* ---------- Restliche fest eingefärbte Bereiche an das helle Schema anpassen ---------- */
/* Server-Audit */
.audit-score-hero { border-color: var(--border) !important; background: var(--surface) !important; box-shadow: none !important; }
.audit-score-card, .audit-count-grid article, .audit-status-grid article, .audit-history-item, .audit-finding {
  border-color: var(--border) !important;
  background: var(--surface-2) !important;
  box-shadow: none !important;
}
.audit-running-banner { border-color: var(--accent-line) !important; background: var(--accent-soft) !important; }
/* Statistik-Diagramm */
#statsChart { background: var(--surface-2) !important; }
/* Discord Manager – Struktur-Ansicht (die Discord-Vorschau selbst bleibt im Discord-Look) */
.editor-structure-grid, .editor-structure-help > div { border-color: var(--border) !important; background: var(--surface-2) !important; box-shadow: none !important; }
.editor-category-card, .editor-channel-detail, .editor-channel-edit-row, .editor-channel-empty { border-color: var(--border) !important; background: var(--surface-2) !important; box-shadow: none !important; }
.editor-category-card.deleted { opacity: .6; }
.editor-category-count, .editor-channel-kind-badge { color: var(--muted) !important; border-color: var(--border) !important; background: var(--surface-3) !important; }
.editor-structure-help strong { color: var(--text) !important; font-size: 13.5px !important; }
.editor-structure-help span { color: var(--muted) !important; }
/* Remote Console */
.remote-discord-help { border-color: var(--border) !important; color: var(--text) !important; background: var(--surface-2) !important; }
/* Social Media (vereinfachte Ansicht) */
.social-simple-page .social-creator-sidebar, .social-simple-page .social-editor-panel, .social-simple-page .social-simple-connection-panel,
.social-simple-page .social-tiktok-optional-panel, .social-simple-page .social-permissions-panel {
  border-color: var(--border) !important;
  background: var(--surface) !important;
  box-shadow: none !important;
}
.social-simple-page .social-switch-card, .social-simple-page .simple-help, .social-simple-page .social-technical-content .notice-box,
.social-simple-page .social-preview-card, .social-offline-card, .social-simple-details, .social-switch-card, .social-help-card, .social-info-box {
  border-color: var(--border) !important;
  color: var(--text) !important;
  background: var(--surface-2) !important;
}
.social-simple-details[open] > summary { border-color: var(--border) !important; background: var(--surface-3) !important; }
.social-simple-page .social-preview-embed, .social-preview-embed { border-color: var(--border) !important; background: var(--surface-3) !important; }

@media (max-width: 720px) {
  .dashboard-stats { grid-template-columns: 1fr 1fr !important; }
}