/* ─────────────────────────────────────────────────────────────────────────
   Hosting Panel – Eigene Stile (ergänzend zu Tabler)
───────────────────────────────────────────────────────────────────────── */

/* ── Sidebar-Feintuning ── */
.navbar-vertical .nav-link {
  border-radius: var(--tblr-border-radius);
  transition: background .12s, color .12s;
}

.navbar-vertical .nav-link.active {
  background: rgba(var(--tblr-primary-rgb), .15) !important;
  color: var(--tblr-primary) !important;
}

.navbar-vertical .nav-link.active .nav-link-icon {
  color: var(--tblr-primary) !important;
}

/* ── Stat-Karten Hover ── */
.card {
  transition: box-shadow .15s ease;
}

.card:hover {
  box-shadow: 0 4px 16px rgba(0, 0, 0, .07);
}

/* ── Status-Dots ── */
.status-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  display: inline-block;
  vertical-align: middle;
}

/* ── Monospace in Tabellen ── */
code {
  background: var(--tblr-bg-surface-secondary);
  padding: .15em .4em;
  border-radius: 4px;
  font-size: 87%;
  color: var(--tblr-body-color);
}

/* Code innerhalb von Alerts/farbigen Hinweisboxen: der normale Code-
   Hintergrund (bg-surface-secondary) liegt im Dark-Mode sehr nah an der
   Alert-Flaeche, wodurch der Code-Container kaum sichtbar ist. Hier ein
   theme-unabhaengiger Tint der Textfarbe plus feiner Rahmen, damit der
   Code in jedem Theme und jeder Alert-Variante klar lesbar abgesetzt ist. */
.alert code {
  background: rgba(var(--tblr-body-color-rgb), .09);
  border: 1px solid rgba(var(--tblr-body-color-rgb), .15);
  color: inherit;
}

/* ── News-Karte Linksstreifen ── */
.news-item {
  border-left: 3px solid var(--tblr-primary);
  padding-left: 1rem;
}

/* ── Formular-Karte mit Primärrand ── */
.card.border-primary {
  border-color: var(--tblr-primary) !important;
}

.card-header.bg-primary-lt {
  background: rgba(var(--tblr-primary-rgb), .08) !important;
}

/* ── FTP-Konfigurationsblock ── */
.ftp-config-box {
  background: var(--tblr-bg-surface-secondary);
  border: 1px solid var(--tblr-border-color);
  border-radius: var(--tblr-border-radius);
  padding: 1rem;
  font-family: var(--tblr-font-monospace);
  font-size: 13px;
  line-height: 1.8;
}

.ftp-config-box .label {
  color: var(--tblr-secondary);
  min-width: 140px;
  display: inline-block;
}

/* ── Domain-Alias-Badge ── */
.badge-alias {
  background: #fff3cd;
  color: #856404;
}

/* ── OTP-Eingabe ── */
input.otp-input {
  letter-spacing: .5em;
  font-size: 1.6rem !important;
  text-align: center;
  font-weight: 600;
}

/* ── Tabellen-Aktionsbuttons ── */
.table td .btn-icon {
  width: 30px;
  height: 30px;
  padding: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

/* ── Avatar-Initials ── */
.avatar-initials {
  background: var(--tblr-primary);
  color: #fff;
  font-size: 12px;
  font-weight: 600;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* ── Page-Header verfeinern ── */
.page-header .breadcrumb {
  font-size: 12px;
  margin-bottom: 2px;
}

.page-pretitle {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: .06em;
  color: var(--tblr-secondary);
  margin-bottom: 2px;
}

/* ── Modal Blur ── */
.modal-blur .modal-content {
  backdrop-filter: blur(4px);
}

/* ── Flash Alert spacing ── */
.alert {
  margin-bottom: 1.25rem;
}

/* ── PHP-Version Badge ── */
.badge.bg-azure-lt {
  background: rgba(var(--tblr-azure-rgb), .12) !important;
  color: var(--tblr-azure) !important;
}

/* ── Responsive: kleine Bildschirme ── */
@media (max-width: 768px) {
  .table-responsive .btn-icon {
    width: 28px;
    height: 28px;
  }
}

/* Toggle-Switches fuer Aktiv/Inaktiv */
.form-switch .form-check-input {
  cursor: pointer;
}
.form-switch .form-check-input:checked {
  background-color: var(--tblr-success);
  border-color: var(--tblr-success);
}

/* Leichte Hintergrundfarbe fuer Kartenkoepfe */
.card:not(.card-link) .card-header {
  background-color: rgba(0, 0, 0, 0.03);
}

/* ── WYSIWYG-Editor ── */
.wy-btn {
  background: var(--tblr-bg-surface, #fff);
  border: 1px solid var(--tblr-border-color, #dadcde);
  color: var(--tblr-body-color, #1e293b);
  min-width: 32px;
  height: 30px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 4px;
  cursor: pointer;
  font-size: 14px;
  padding: 0 7px;
  transition: background .15s, border-color .15s;
}
.wy-btn:hover {
  background: rgba(var(--tblr-primary-rgb, 13,110,253), .12);
  border-color: var(--tblr-primary, #0d6efd);
  color: var(--tblr-primary, #0d6efd);
}
.wysiwyg-toolbar .border-start {
  border-left: 1px solid var(--tblr-border-color, #dadcde) !important;
  height: 20px;
  align-self: center;
}
[contenteditable="true"].form-control {
  min-height: 120px;
  overflow-y: auto;
  cursor: text;
}
[contenteditable="true"].form-control:focus {
  border-color: var(--tblr-primary);
  box-shadow: 0 0 0 0.25rem rgba(var(--tblr-primary-rgb), .25);
  outline: none;
}
[contenteditable="true"] a {
  color: var(--tblr-primary);
  text-decoration: underline;
  cursor: pointer;
}

/* ─ Disabled Form-Switch: hoeher kontrastiert ────────────────────────
   Bootstrap setzt Opacity auf .5, was bei dunklem Hintergrund oder
   Custom-Themes kaum noch sichtbar ist. Wir heben die Opacity an und
   geben dem aus-Zustand eine deutlichere Track-Farbe, damit ein
   gesperrter Schalter trotzdem visuell klar erkennbar ist. */
.form-check-input:disabled,
.form-check-input[disabled] {
  opacity: .85 !important;
  cursor: not-allowed;
}
/* Aus-Zustand: dunklerer Grauton statt fast-weiss. */
.form-switch .form-check-input:disabled:not(:checked) {
  background-color: var(--tblr-gray-400, #adb5bd);
  border-color:     var(--tblr-gray-500, #6c757d);
}
/* Ein-Zustand: kraeftiges Primary, identisch zum aktiven Schalter -
   nur die Klickbarkeit faellt weg. */
.form-switch .form-check-input:disabled:checked {
  background-color: var(--tblr-primary);
  border-color:     var(--tblr-primary);
}

/* ─ Help-Popover-Trigger ─────────────────────────────────────────────
   Kleines Fragezeichen-Icon neben Form-Labels. Optisch dezent, beim
   Hover deutlicher hervortretend, damit die Click-Affordance klar ist. */
.help-popover-trigger {
  display: inline-block;
  text-decoration: none;
  line-height: 1;
  vertical-align: middle;
}
.help-popover-trigger:hover,
.help-popover-trigger:focus {
  color: var(--tblr-primary) !important;
  text-decoration: none;
}
.help-popover-trigger .ti {
  font-size: 1rem;
}
/* Popover-Body etwas grosszuegiger als Default - die Hinweistexte sind
   gelegentlich mehrzeilig und brauchen Atemraum. */
.popover { max-width: 320px; }
.popover-body { font-size: 13px; line-height: 1.45; }
.popover-body a { text-decoration: underline; }

/* ─ Row-Hover für Übersichtstabellen ─────────────────────────────────
   Alle Listen-Uebersichten verwenden die `.table-vcenter`-Klasse fuer
   ihre vertikal zentriert dargestellten Zellen. Diese zeigen typisch
   eine Liste von Domains/Mailboxen/Benutzern usw. - genau hier hilft
   ein dezenter Row-Hover bei der Orientierung in langen Listen, weil
   man visuell beim Scrollen sieht, in welcher Zeile der Mauszeiger
   gerade steht. Kompakte Detail-Tabellen ohne `.table-vcenter` (z.B.
   die Datenbank-Verbindungsdaten-Box im Modal) bleiben unangetastet,
   weil dort ein Hover irritieren wuerde.

   Tabler liefert mit `.table-hover` ein eigenes Hover-Pattern; wir
   nutzen eine eigene, dezentere Variante mit weicherem Uebergang. */
.table-vcenter tbody tr {
  transition: background-color .12s ease-in-out;
}
.table-vcenter tbody tr:hover {
  background-color: var(--tblr-bg-surface-secondary, rgba(0, 0, 0, .035));
}
/* Dark-Mode: rgba auf Weiss statt Schwarz, damit der Hover auf dunklem
   Hintergrund sichtbar bleibt. */
[data-bs-theme="dark"] .table-vcenter tbody tr:hover {
  background-color: rgba(255, 255, 255, .045);
}

/* ──────────────────────────────────────────────────────────────────────
   SPF-Formular: kompakte Anbieter-Pills (DNS → E-Mail-Sicherheit).
   Die aktive Pill soll deutlich gefüllt erscheinen -- btn-outline-secondary
   im .active-Zustand ist in Tabler nur dezent grau, daher heben wir die
   Selektion auf die Primaerfarbe an. Liegt zentral hier (statt inline im
   mehrfach eingebundenen Partial), damit die Regel nur einmal geladen wird.
   ────────────────────────────────────────────────────────────────────── */
.spf-provider-pill.active {
  background-color: var(--tblr-primary, #0d6efd);
  border-color: var(--tblr-primary, #0d6efd);
  color: #fff;
}
.spf-provider-pill.active .text-secondary {
  color: rgba(255, 255, 255, .75) !important;
}

/* ──────────────────────────────────────────────────────────────────────
   Dokumentations-Seite (.kp-docs):
   Eigener Namespace, um nicht versehentlich mit Bootstrap/Tabler-
   Globalklassen (.row, .card etc.) zu kollidieren. Bewusst minimal --
   das meiste leistet das Tabler-Standard-Styling für Headings/Listen/
   Tabellen schon gut.
   ────────────────────────────────────────────────────────────────────── */

/* Sticky Sidebar -- bleibt beim Scrollen am Platz, ist aber nur sticky,
   wenn die Anzeige breit genug für die zweispaltige Ansicht ist. */
@media (min-width: 992px) {
  .kp-docs .kp-docs-toc {
    position: sticky;
    top: 1rem;
    max-height: calc(100vh - 2rem);
    overflow-y: auto;
  }
}

/* Rendering-Bereich: angenehme Lesebreite, etwas Luft um Code-Blöcke. */
.kp-docs-content {
  max-width: 78ch;
  line-height: 1.55;
}
.kp-docs-content > :first-child {
  margin-top: 0;
}
.kp-docs-content h1 {
  font-size: 1.75rem;
  margin-top: 0;
  margin-bottom: 1rem;
  padding-bottom: .5rem;
  border-bottom: 1px solid var(--tblr-border-color);
}
.kp-docs-content h2 {
  font-size: 1.35rem;
  margin-top: 2rem;
  margin-bottom: .75rem;
}
.kp-docs-content h3 {
  font-size: 1.1rem;
  margin-top: 1.5rem;
  margin-bottom: .5rem;
}
.kp-docs-content p,
.kp-docs-content ul,
.kp-docs-content ol {
  margin-bottom: 1rem;
}

/* Fenced Code-Blöcke: monospace, dezenter Hintergrund, scrollbar bei
   Überlänge (ASCII-Art-Diagramme in einigen Docs sind breiter als das
   Layout).

   Wichtig: Tabler setzt global `pre { color: var(--tblr-light) }`, was
   im Light-Modus nahezu weiß ist und auf weißem Card-Hintergrund
   unlesbar wird (weiss auf weiss). Wir überschreiben die Farbe daher
   explizit auf `--tblr-body-color` (im Light dunkel, im Dark hell). */
.kp-docs-content pre {
  background: var(--tblr-bg-surface-secondary);
  color: var(--tblr-body-color);
  border: 1px solid var(--tblr-border-color);
  border-radius: var(--tblr-border-radius);
  padding: .75rem 1rem;
  overflow-x: auto;
  font-size: .85rem;
  line-height: 1.45;
}
.kp-docs-content pre code {
  background: transparent;
  padding: 0;
  color: inherit;
  font-size: inherit;
  white-space: pre;
}

/* Tabellen innerhalb der Doku erben Tabler-Defaults, brauchen aber
   etwas Abstand nach oben/unten. */
.kp-docs-content .table-responsive {
  margin-bottom: 1rem;
}

/* Blockquotes: linker Balken in Primary-Farbe, sonst zurückhaltend. */
.kp-docs-content blockquote {
  border-left: 3px solid var(--tblr-primary);
  padding: .25rem 0 .25rem 1rem;
  margin: 0 0 1rem 0;
  color: var(--tblr-secondary-color);
}

/* TOC-Sidebar: aktive Seite per Tabler-active-Klasse hervorgehoben. */
.kp-docs-toc .list-group-item.active {
  background-color: rgba(var(--tblr-primary-rgb), .12);
  color: var(--tblr-primary);
  border-color: transparent;
}