/* =====================================================================
   Portal Design Refresh (additiv, nur Inertia-Portal/Auth - NICHT works)
   Geladen nach portal-design.css in resources/views/app.blade.php.
   Enthaelt: Webfont/Typo, Token-Skalen (Radius/Shadow/Spacing), weichere
   Schatten, zurueckhaltenderer Akzent, Micro-Interactions, Frosted-Navbar,
   Dark Mode. Aendert nur Farben/Schatten/Radien/Transitions - kein Layout.
   ===================================================================== */

:root {
    /* (1) Fonts (selbst-gehostet via @fontsource, gebundlet durch Vite) */
    --portal-font: 'Inter Variable', 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, system-ui, sans-serif;
    --portal-font-mono: 'JetBrains Mono Variable', 'JetBrains Mono', ui-monospace, 'SFMono-Regular', Menlo, Consolas, monospace;

    /* (2) Radius-Skala */
    --radius-sm: 8px;
    --radius-md: 12px;
    --radius-lg: 16px;
    --radius-xl: 20px;
    --radius-pill: 999px;

    /* (2/3) Schatten-Skala - weicher, mehrlagig, niedrig deckend */
    --shadow-sm: 0 1px 2px rgba(16, 24, 40, .04), 0 1px 3px rgba(16, 24, 40, .06);
    --shadow-md: 0 2px 4px rgba(16, 24, 40, .04), 0 8px 20px rgba(16, 24, 40, .06);
    --shadow-lg: 0 12px 32px rgba(16, 24, 40, .10), 0 4px 8px rgba(16, 24, 40, .04);
    --shadow-accent: 0 6px 16px rgba(var(--portal-accent-rgb), .22);

    /* (2) Spacing-Skala (8px-Grid) */
    --space-1: 4px;  --space-2: 8px;  --space-3: 12px;
    --space-4: 16px; --space-5: 24px; --space-6: 32px;

    /* (4) Akzent zurueckhaltend: weiche Tints statt grosser Verlaeufe */
    --portal-accent-soft: rgba(var(--portal-accent-rgb), .10);
    --portal-accent-soft-2: rgba(var(--portal-accent-rgb), .06);

    /* (7) Transition-Token */
    --transition: 160ms cubic-bezier(.4, 0, .2, 1);

    /* Surface-Token (fuer Dark Mode genutzt) */
    --surface: var(--portal-bg);
    --surface-muted: var(--portal-bg-muted);
}

/* ---------- (1) Typografie ---------- */
body {
    font-family: var(--portal-font);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
    font-feature-settings: 'cv05', 'ss01';
}

h1, h2, h3, h4,
.section-title, .dashboard-header-text h1, .login-header h1,
.tickets-section-title, .quick-actions-title {
    letter-spacing: -0.02em;
}

/* Zahlen/Preise/Quotas tabellarisch ausrichten */
.widget-card-value, .quota-percent, .mbquota-percent, .quota-current,
.summary-value, .stat-value, .price, .amount, .num, .tabular-nums,
td.amount, .invoice-amount, .commission-amount {
    font-variant-numeric: tabular-nums;
    font-feature-settings: 'tnum';
}

/* Monospace fuer Zugangsdaten/IDs */
code, kbd, pre, samp, .portal-mono, .mono,
.sdl-copy, .copyable, .credential, .mail-stats-table td .text-monospace {
    font-family: var(--portal-font-mono);
    font-feature-settings: 'zero';
}

/* ---------- (2/3) Weichere, hellere Schatten auf Karten ---------- */
.portal-section, .widget-card, .action-card, .quick-actions-card,
.tickets-section, .mailbox-form-section, .info-card, .clock-card,
.add-comment-section, .ticket-card, .domain-action-card, .ssl-action-card,
.suggest-action-card, .pricelist-action-card, .handle-action-card,
.mail-domain-card, .domain-card {
    box-shadow: var(--shadow-md);
    transition: box-shadow var(--transition), transform var(--transition);
}

/* (7) dezenter Hover-Lift fuer klickbare Karten */
.widget-card[data-spa-href], .action-card, .quick-action-item,
.domain-action-card, .ssl-action-card, .suggest-action-card,
.pricelist-action-card, .handle-action-card, .support-action-card {
    transition: box-shadow var(--transition), transform var(--transition), background var(--transition);
}
.widget-card[data-spa-href]:hover, .action-card:hover,
.domain-action-card:hover, .ssl-action-card:hover, .suggest-action-card:hover,
.pricelist-action-card:hover, .handle-action-card:hover {
    transform: translateY(-2px);
    box-shadow: var(--shadow-lg);
}

/* ---------- (4) Akzent zurueckhaltender: grelle Lime-Glows abmildern ---------- */
.btn-portal-primary, .support-action-card, .btn-form-submit,
.btn-mail-create, .ssl-action-card, .reset-btn, .confirm-btn,
.login-btn, .forgot-btn, .btn-submit-comment {
    box-shadow: var(--shadow-sm) !important;
}
.btn-portal-primary:hover, .support-action-card:hover, .btn-form-submit:hover,
.btn-mail-create:hover, .reset-btn:hover:not(:disabled),
.confirm-btn:hover:not(:disabled), .login-btn:hover, .forgot-btn:hover,
.btn-submit-comment:hover:not(:disabled) {
    box-shadow: var(--shadow-accent) !important;
}

/* ---------- (7) Micro-Interactions: Fokus-Ring + Transitions ---------- */
.btn, button, a.action-card, a.quick-action-item, .form-control,
input, select, textarea, .nav-link {
    transition: background var(--transition), border-color var(--transition),
                box-shadow var(--transition), color var(--transition);
}
:where(a, button, input, select, textarea, [tabindex], [role="button"]):focus-visible {
    outline: 2px solid var(--portal-accent);
    outline-offset: 2px;
    border-radius: var(--radius-sm);
}
.form-control:focus, input:focus, textarea:focus, select:focus {
    box-shadow: 0 0 0 4px var(--portal-accent-soft);
}

/* (7) Skeleton-Shimmer (loest die Spinner in den Dashboard-Kacheln ab) */
.widget-card-loading {
    background: linear-gradient(100deg, var(--surface-muted) 30%, rgba(0,0,0,.04) 50%, var(--surface-muted) 70%);
    background-size: 200% 100%;
    animation: portal-shimmer 1.3s ease-in-out infinite;
    border-radius: var(--radius-md);
    min-height: 120px;
}
.widget-card-loading .widget-card-loading-spinner { display: none; }
@keyframes portal-shimmer { from { background-position: 200% 0; } to { background-position: -200% 0; } }
@media (prefers-reduced-motion: reduce) {
    .widget-card-loading { animation: none; }
    * { scroll-behavior: auto !important; }
}

/* ---------- (6) Frosted-Glass-Navbar ---------- */
/* Sichtbare Flaechen sind die Kinder .nav-top (#000) / .nav-bottom (#fff) -
   Frost dort anwenden, nicht auf dem transparenten Eltern-Element. */
.navbar.horizontal-layout { box-shadow: var(--shadow-sm); }
.navbar.horizontal-layout .nav-top {
    /* Original-Header-Gradient (Blau -> Dunkelgruen) wiederhergestellt, mit
       minimaler Transparenz fuer den Frost-Effekt. */
    background: linear-gradient(90deg, rgba(8, 34, 88, .94) 0%, rgba(10, 74, 60, .94) 100%) !important;
    -webkit-backdrop-filter: saturate(160%) blur(14px);
    backdrop-filter: saturate(160%) blur(14px);
}
.navbar.horizontal-layout .nav-bottom {
    background: rgba(255, 255, 255, .72) !important;
    -webkit-backdrop-filter: saturate(180%) blur(16px);
    backdrop-filter: saturate(180%) blur(16px);
    border-bottom: 1px solid var(--portal-border-light);
}

/* (5) Dark-Mode-Toggle in der Navbar */
.portal-theme-toggle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    margin-right: 8px;
    border-radius: var(--radius-pill);
    background: transparent;
    border: 1px solid var(--portal-border);
    color: var(--portal-text-muted);
    cursor: pointer;
    transition: background var(--transition), color var(--transition), border-color var(--transition);
}
.portal-theme-toggle:hover {
    background: var(--portal-bg-muted);
    color: var(--portal-text);
}
.portal-theme-toggle svg { width: 18px; height: 18px; }

/* ---------- Weichere, modernere Navbar-Dropdowns ---------- */
.navbar.horizontal-layout .nav-bottom .page-navigation > .nav-item .submenu,
.navbar.horizontal-layout .navbar-dropdown,
.navbar.horizontal-layout .nav-top .navbar-menu-wrapper .navbar-nav .nav-item.dropdown .navbar-dropdown {
    background: var(--portal-bg) !important;
    border: 1px solid var(--portal-border-light) !important;
    border-radius: var(--radius-md) !important;
    box-shadow: var(--shadow-lg) !important;
    padding: 6px !important;
    margin-top: 8px !important;
    overflow: visible;
}

/* Hover-Bruecke ueber die Luecke: haelt das (hover-basierte) Submenu offen,
   wenn die Maus vom Nav-Link nach unten ins Dropdown faehrt. */
.navbar.horizontal-layout .nav-bottom .page-navigation > .nav-item .submenu::before {
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    top: -12px;
    height: 14px;
    background: transparent;
}

/* Items: mehr Luft, runde Ecken, dezenter Accent-Hover statt blauem Text */
.navbar.horizontal-layout .nav-bottom .page-navigation > .nav-item .submenu ul li a {
    padding: 9px 12px !important;
    margin: 2px 0 !important;
    border-radius: var(--radius-sm) !important;
    color: var(--portal-text) !important;
}
.navbar.horizontal-layout .nav-bottom .page-navigation > .nav-item .submenu ul li a:hover {
    background: var(--portal-accent-soft) !important;
    color: var(--portal-text) !important;
}
/* Dash-Marker vor den Items entfernen (wirkt aufgeraeumter) */
.navbar.horizontal-layout .nav-bottom .page-navigation > .nav-item .submenu ul li a:before {
    display: none !important;
}
.navbar-dropdown .dropdown-item {
    border-radius: var(--radius-sm) !important;
    padding: 9px 12px !important;
    transition: background var(--transition), color var(--transition);
}
.navbar-dropdown .dropdown-item:hover {
    background: var(--portal-accent-soft) !important;
    color: var(--portal-text) !important;
}

/* Dark Mode: Nav-Submenu + Profil-Dropdown auf Dark-Surface */
[data-theme="dark"] .navbar.horizontal-layout .nav-bottom .page-navigation > .nav-item .submenu,
[data-theme="dark"] .navbar.horizontal-layout .navbar-dropdown {
    background: var(--surface) !important;
    border-color: var(--portal-border) !important;
}
[data-theme="dark"] .navbar.horizontal-layout .nav-bottom .page-navigation > .nav-item .submenu ul li a,
[data-theme="dark"] .navbar-dropdown .dropdown-item,
[data-theme="dark"] .navbar-dropdown .dropdown-header { color: var(--portal-text-muted) !important; }

/* ====================================================================
   DARK MODE - Feinschliff (gezielte Korrekturen hartcodierter Farben)
   ==================================================================== */

/* Begruessungs-Header: hartcodierter weisser Gradient -> dunkle Flaeche */
[data-theme="dark"] .dashboard-header {
    background: linear-gradient(135deg, var(--surface) 0%, var(--surface-muted) 100%) !important;
    border: 1px solid var(--portal-border) !important;
}
[data-theme="dark"] .dashboard-header-text h1 { color: var(--portal-text) !important; }
[data-theme="dark"] .dashboard-header-text p { color: var(--portal-text-muted) !important; }

/* Nav-Bottom-Links sichtbar (style.css setzt #242425) */
[data-theme="dark"] .navbar.horizontal-layout .nav-bottom .page-navigation > .nav-item > .nav-link,
[data-theme="dark"] .navbar.horizontal-layout .nav-bottom .page-navigation > .nav-item > .nav-link .menu-title,
[data-theme="dark"] .navbar.horizontal-layout .nav-bottom .page-navigation > .nav-item > .nav-link .menu-arrow {
    color: var(--portal-text) !important;
}
[data-theme="dark"] .navbar.horizontal-layout .nav-bottom .page-navigation > .nav-item:hover > .nav-link,
[data-theme="dark"] .navbar.horizontal-layout .nav-bottom .page-navigation > .nav-item:hover > .nav-link .menu-title {
    color: #fff !important;
}

/* Uhr: weisse neumorphische Scheibe -> dunkle Variante */
[data-theme="dark"] .clock__circle {
    box-shadow: -6px -6px 16px rgba(255, 255, 255, .03),
                6px 6px 16px rgba(0, 0, 0, .55),
                inset 6px 6px 16px rgba(0, 0, 0, .5),
                inset -6px -6px 16px rgba(255, 255, 255, .03) !important;
}
[data-theme="dark"] .clock__hour::before,
[data-theme="dark"] .clock__minutes::before { background-color: hsl(240, 8%, 80%) !important; }
[data-theme="dark"] .clock__twelve,
[data-theme="dark"] .clock__three,
[data-theme="dark"] .clock__six,
[data-theme="dark"] .clock__nine { background-color: hsl(240, 8%, 50%) !important; }
[data-theme="dark"] .clock__rounder { border-color: var(--surface) !important; }
[data-theme="dark"] .clock-card,
[data-theme="dark"] .clock-card [class*="clock__text"] { color: var(--portal-text) !important; }

/* Diverse hartcodierte dunkle Texte aufhellen + Akzent-Buttons lesbar */
[data-theme="dark"] .widget-card-value,
[data-theme="dark"] .summary-value,
[data-theme="dark"] .ticket-card-title,
[data-theme="dark"] .quota-current,
[data-theme="dark"] strong { color: var(--portal-text); }
[data-theme="dark"] .dashboard-badge-reseller { color: var(--portal-accent) !important; }

/* Such-/Filterfelder + Code/Mono auf Dark-Surface */
[data-theme="dark"] .copyable, [data-theme="dark"] .sdl-copy { color: var(--portal-text); }

/* Helle Tint-Karten (rgba weiss/hell) abdunkeln, z.B. Quota-Warnungen */
[data-theme="dark"] .mail-quota-warning-alert,
[data-theme="dark"] .quota-warning-block,
[data-theme="dark"] .info-illustration { filter: none; }

/* ====================================================================
   DARK MODE v2 - breite Lesbarkeits-Korrekturen (viele Komponenten
   kodieren Farben hart: #fff / white / #1e293b). Daher per Klassennamen-
   Muster mit !important; farbige CTAs/Verlaeufe sind ausgenommen.
   ==================================================================== */

[data-theme="dark"] {
    --portal-text-muted: #a9b3c1;
    --portal-text-light: #8b95a4;
}

/* (1) Weisse/helle Inhaltsflaechen -> Dark-Surface. [class*=-card] mit
   Ausschluss der farbigen Varianten; plus haeufige Ergebnis-/Box-Muster. */
[data-theme="dark"] [class*="-card"]:not([class*="action-card-"]):not([class*="-primary"]):not([class*="-success"]):not([class*="-danger"]):not([class*="-warning"]):not([class*="-secondary"]):not([class*="-paypal"]):not([class*="-accent"]),
[data-theme="dark"] [class*="-result"],
[data-theme="dark"] [class*="-entity"],
[data-theme="dark"] [class*="-event-item"],
[data-theme="dark"] [class*="-notice"]:not([class*="warning"]):not([class*="pending"]),
[data-theme="dark"] [class*="-conformance-tag"],
[data-theme="dark"] [class*="-status-badge"],
[data-theme="dark"] [class*="-empty-state"],
[data-theme="dark"] [class*="-record"]:not([class*="warning"]),
[data-theme="dark"] [class*="-server-list"] li,
[data-theme="dark"] [class*="-section-header"],
[data-theme="dark"] [class*="search-section"],
[data-theme="dark"] [class*="-detail-row"],
[data-theme="dark"] [class*="-stat-box"] {
    border-color: var(--portal-border) !important;
    color: var(--portal-text);
}

/* Hintergrund-Flip nur fuer die portal-action-cards (auf Wunsch entkoppelt vom
   breiten Selektor oben). */
[data-theme="dark"] .portal-action-cards,
[data-theme="dark"] .portal-action-cards [class*="-card"]:not([class*="action-card-"]):not([class*="-primary"]):not([class*="-success"]):not([class*="-danger"]):not([class*="-warning"]):not([class*="-secondary"]):not([class*="-accent"]) {
    background: var(--surface) !important;
}

/* (2) Code-/Mono-/Output-Boxen dunkler */
[data-theme="dark"] [class*="-output"],
[data-theme="dark"] [class*="-pem"],
[data-theme="dark"] [class*="-code"],
[data-theme="dark"] [class*="-terminal"],
[data-theme="dark"] pre {
    background: #0c1018 !important;
    color: #cbd5e1 !important;
    border-color: var(--portal-border) !important;
}

/* (3) Alle Eingabe-/Such-/Filterfelder dunkel */
[data-theme="dark"] input:not([type="checkbox"]):not([type="radio"]):not([type="range"]),
[data-theme="dark"] textarea,
[data-theme="dark"] select,
[data-theme="dark"] [class*="search-input"] {
    background: #0f1521 !important;
    color: var(--portal-text) !important;
    border-color: var(--portal-border) !important;
}
[data-theme="dark"] ::placeholder { color: var(--portal-text-light) !important; }

/* (4) Hartcodierte Primaer-Texte (#1e293b/#242425) aufhellen */
[data-theme="dark"] [class*="-name"],
[data-theme="dark"] [class*="-value"],
[data-theme="dark"] [class*="-title"]:not(.section-subtitle):not([class*="subtitle"]),
[data-theme="dark"] [class*="-heading"],
[data-theme="dark"] [class*="-label"],
[data-theme="dark"] [class*="-ip"],
[data-theme="dark"] [class*="-host"],
[data-theme="dark"] [class*="-email"],
[data-theme="dark"] dt,
[data-theme="dark"] table th,
[data-theme="dark"] table td {
    color: var(--portal-text) !important;
}

/* (5) Amber-/Warn-Tint-Boxen lesbar (statt #fffbeb/#92400e) */
[data-theme="dark"] [class*="warning-alert"],
[data-theme="dark"] [class*="-dns-box"],
[data-theme="dark"] [class*="pending-notice"],
[data-theme="dark"] [class*="-warning-record"],
[data-theme="dark"] [class*="dns-record"] {
    background: rgba(245, 158, 11, .10) !important;
    border-color: rgba(245, 158, 11, .30) !important;
    color: #fcd34d !important;
}

/* (6) Helle Logo-/Bild-Kacheln (AppInstaller etc.) leicht abdunkeln statt grell weiss */
[data-theme="dark"] [class*="app-card"],
[data-theme="dark"] [class*="-logo-tile"] {
    background: #1a2231 !important;
    border-color: var(--portal-border) !important;
}

/* ====================================================================
   (5) DARK MODE  -  [data-theme="dark"] auf <html>
   Token-Override + die wichtigsten hardcodierten Flaechen.
   ==================================================================== */
[data-theme="dark"] {
    color-scheme: dark;
    --portal-text: #e6e9ee;
    --portal-text-muted: #aab4c2;
    --portal-text-light: #8b95a4;
    --portal-border: #2a3344;
    --portal-border-light: #222b3a;
    --portal-bg: #161c28;
    --portal-bg-muted: #1c2433;
    --portal-bg-section: #1a2130;
    --surface: #161c28;
    --surface-muted: #1c2433;
    --portal-accent-soft: rgba(var(--portal-accent-rgb), .16);
    --shadow-sm: 0 1px 2px rgba(0,0,0,.3);
    --shadow-md: 0 2px 4px rgba(0,0,0,.25), 0 8px 20px rgba(0,0,0,.35);
    --shadow-lg: 0 12px 32px rgba(0,0,0,.45);
}

[data-theme="dark"] body,
[data-theme="dark"] .container-scroller,
[data-theme="dark"] .page-body-wrapper,
[data-theme="dark"] .main-panel,
[data-theme="dark"] .content-wrapper {
    background: #0e131c !important;
    color: var(--portal-text);
}

/* Karten/Flaechen, die hart #fff verwenden, auf Dark-Surface ziehen */
[data-theme="dark"] .portal-section,
[data-theme="dark"] .widget-card,
[data-theme="dark"] .action-card,
[data-theme="dark"] .quick-actions-card,
[data-theme="dark"] .clock-card,
[data-theme="dark"] .tickets-section,
[data-theme="dark"] .ticket-card,
[data-theme="dark"] .add-comment-section,
[data-theme="dark"] .mailbox-form-section,
[data-theme="dark"] .info-card,
[data-theme="dark"] .mail-domain-card,
[data-theme="dark"] .domain-card,
[data-theme="dark"] .comment-card,
[data-theme="dark"] .reset-form,
[data-theme="dark"] .confirm-form,
[data-theme="dark"] .login-card,
[data-theme="dark"] .forgot-form,
[data-theme="dark"] .modal-content,
[data-theme="dark"] .dropdown-menu,
[data-theme="dark"] .st-modal,
[data-theme="dark"] .sdl-card,
[data-theme="dark"] .card {
    background: var(--surface) !important;
    color: var(--portal-text);
    border-color: var(--portal-border) !important;
}

[data-theme="dark"] .portal-section,
[data-theme="dark"] .info-card,
[data-theme="dark"] .quota-section,
[data-theme="dark"] .status-toggle-section,
[data-theme="dark"] .mail-tab-content,
[data-theme="dark"] table tbody td,
[data-theme="dark"] table thead th {
    border-color: var(--portal-border-light) !important;
}

/* Gedaempfte / muted Flaechen */
[data-theme="dark"] .sdl-side-box,
[data-theme="dark"] .email-domain,
[data-theme="dark"] .target-domain-display,
[data-theme="dark"] .quota-section,
[data-theme="dark"] thead th,
[data-theme="dark"] .tickets-table thead th,
[data-theme="dark"] .info-card-content,
[data-theme="dark"] .comment-card-header {
    background: var(--surface-muted) !important;
}

/* Eingabefelder */
[data-theme="dark"] .form-control,
[data-theme="dark"] input, [data-theme="dark"] textarea, [data-theme="dark"] select,
[data-theme="dark"] .st-input, [data-theme="dark"] .comment-textarea,
[data-theme="dark"] .reset-form-input, [data-theme="dark"] .confirm-form-input,
[data-theme="dark"] .search-input, [data-theme="dark"] .login-form-input {
    background: #0f1521 !important;
    color: var(--portal-text);
    border-color: var(--portal-border) !important;
}
[data-theme="dark"] ::placeholder { color: var(--portal-text-light); }

/* Text-Farben generisch nachziehen */
[data-theme="dark"] .section-title, [data-theme="dark"] h1, [data-theme="dark"] h2,
[data-theme="dark"] h3, [data-theme="dark"] h4, [data-theme="dark"] .ticket-card-title,
[data-theme="dark"] .widget-card-value { color: var(--portal-text); }
[data-theme="dark"] .text-muted, [data-theme="dark"] .section-subtitle,
[data-theme="dark"] small { color: var(--portal-text-muted) !important; }

/* Frosted-Navbar dunkel (sichtbare Flaeche = .nav-bottom) */
[data-theme="dark"] .navbar.horizontal-layout .nav-bottom {
    background: rgba(20, 26, 38, .72) !important;
    border-bottom-color: var(--portal-border);
}
[data-theme="dark"] .navbar.horizontal-layout .nav-bottom .nav-link { color: var(--portal-text-muted); }

/* Tabellen-Hover dunkel */
[data-theme="dark"] .tickets-table tbody tr:hover,
[data-theme="dark"] table tbody tr:hover { background: rgba(255,255,255,.03) !important; }

/* ====================================================================
   DARK MODE v3 - Nachzuegler aus den Detailansichten (steht am Datei-Ende,
   damit es ueber den frueheren Block gewinnt).
   ==================================================================== */

/* (a) Helle Info-/Detail-Boxen (#f8fafc), z.B. SSL Produktdetails/Inhaber.
   Text wird von -title/table-Regeln bereits hell -> Box muss dunkel werden. */
[data-theme="dark"] [class*="info-box"],
[data-theme="dark"] [class*="detail-box"],
[data-theme="dark"] [class*="-product-box"] {
    background: var(--surface) !important;
    border-color: var(--portal-border) !important;
}
[data-theme="dark"] [class*="info-table"] th { color: var(--portal-text-muted) !important; }
[data-theme="dark"] [class*="info-table"] td { color: var(--portal-text) !important; }
[data-theme="dark"] [class*="info-box-title"],
[data-theme="dark"] [class*="info-table"] a { color: var(--portal-text) !important; }

/* (b) Abbrechen-/Sekundaer-Buttons (weiss) -> dunkel */
[data-theme="dark"] .btn-form-cancel,
[data-theme="dark"] [class*="btn-cancel"],
[data-theme="dark"] [class*="cancel-btn"] {
    background: #1c2433 !important;
    color: var(--portal-text) !important;
    border-color: var(--portal-border) !important;
}

/* (c) Legacy Bootstrap-Tabellen in injizierten Blade-Partials (z.B. die
   Domain-Renewals-Tabelle). table-striped odd-Rows sind hell -> dunkler
   Stripe, sonst hell-auf-hell unlesbar. */
[data-theme="dark"] .table,
[data-theme="dark"] .table th,
[data-theme="dark"] .table td {
    color: var(--portal-text) !important;
    border-color: var(--portal-border) !important;
}
[data-theme="dark"] .table-striped tbody tr:nth-of-type(odd),
[data-theme="dark"] .table-striped tbody tr:nth-of-type(odd) > td,
[data-theme="dark"] .table-striped tbody tr:nth-of-type(odd) > th {
    background-color: rgba(255, 255, 255, .04) !important;
    color: var(--portal-text) !important;
}
[data-theme="dark"] .table-hover tbody tr:hover,
[data-theme="dark"] .table-hover tbody tr:hover > td {
    background-color: rgba(255, 255, 255, .07) !important;
}
[data-theme="dark"] .card {
    background: var(--surface) !important;
    border-color: var(--portal-border) !important;
}
[data-theme="dark"] .card .card-title,
[data-theme="dark"] .card .card-body { color: var(--portal-text) !important; }

/* (d) Buttons mit hartcodiertem hellem Hover/Text -> Dark-Mode-tauglich */
/* "Zurücksetzen" (.btn-reset): bg=var(--portal-border) dunkel, aber Text #374151 */
[data-theme="dark"] .btn-reset { color: var(--portal-text) !important; }
[data-theme="dark"] .btn-reset:hover {
    background: #374151 !important;
    color: #fff !important;
}
/* "Nameserver ändern"/Auth-Code/Transfer (.btn-domain-action-secondary):
   Hover hatte background:#e5e7eb (hell) -> weisser Kasten im Dark-Mode */
[data-theme="dark"] .btn-domain-action-secondary:hover {
    background: #2a3344 !important;
    color: var(--portal-text) !important;
}
/* Danger-Buttons (Löschen/Kündigen): #fef2f2 hell -> dezenter dunkler Rot-Tint */
[data-theme="dark"] .btn-domain-action-danger {
    background: rgba(239, 68, 68, .12) !important;
    color: #f87171 !important;
    border-color: rgba(239, 68, 68, .35) !important;
}
[data-theme="dark"] .btn-domain-action-danger:hover {
    background: rgba(239, 68, 68, .22) !important;
    color: #fca5a5 !important;
}

/* ====================================================================
   Navbar-Stacking-Fix (beide Themes): backdrop-filter auf .nav-bottom
   erzeugt einen Stacking-Context, der das aus .nav-top geoeffnete
   User-Dropdown verdeckt. .nav-top ueber .nav-bottom heben.
   ==================================================================== */
.navbar.horizontal-layout .nav-top { position: relative; z-index: 2; }
.navbar.horizontal-layout .nav-bottom { position: relative; z-index: 1; }

/* SEPA-QR-Code immer auf weissem Grund (Scanbarkeit) - beide Themes */
.sepa-qr-code img,
[class*="sepa-qr"] img {
    background: #fff;
    padding: 10px;
    border-radius: 8px;
}

/* ====================================================================
   DARK MODE v4 - weitere gemeldete Nachzuegler
   ==================================================================== */

/* (50) CloudBackup-Suche (.sdl-search #fff) + generische -search/-filter-Container */
[data-theme="dark"] .sdl-search,
[data-theme="dark"] div[class*="-search"]:not([class*="result"]),
[data-theme="dark"] div[class*="-filter"] {
    background: var(--surface) !important;
    border-color: var(--portal-border) !important;
    color: var(--portal-text) !important;
}

/* code/kbd/samp (z.B. PHP-Settings-Tags memory_limit etc.) */
[data-theme="dark"] code,
[data-theme="dark"] kbd,
[data-theme="dark"] samp {
    background: #0f1521 !important;
    color: #cbd5e1 !important;
    border-color: var(--portal-border) !important;
}

/* (48) Handle-/Update-Inputs bleiben dunkel (auch Sonderklassen) */
[data-theme="dark"] [class*="handle"] input,
[data-theme="dark"] [class*="-action-card"] input,
[data-theme="dark"] [class*="update"] input {
    background: #0f1521 !important;
    color: var(--portal-text) !important;
    border-color: var(--portal-border) !important;
}

/* ====================================================================
   Schwebender Theme-Toggle fuer Seiten OHNE Navbar (Login/Auth).
   Wird auf authentifizierten Seiten von PortalLayout ausgeblendet.
   ==================================================================== */
.portal-floating-theme-toggle {
    position: fixed;
    top: 18px;
    right: 18px;
    z-index: 4000;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 42px;
    height: 42px;
    border-radius: var(--radius-pill);
    background: var(--portal-bg);
    border: 1px solid var(--portal-border);
    color: var(--portal-text-muted);
    cursor: pointer;
    box-shadow: var(--shadow-md);
    transition: background var(--transition), color var(--transition);
}
.portal-floating-theme-toggle:hover { color: var(--portal-text); }
.portal-floating-theme-toggle svg { width: 19px; height: 19px; }

/* ====================================================================
   DARK MODE v5 - gemeldete Nachzuegler (Bilder 54-57)
   ==================================================================== */

/* (57) Weisse Trenn-/Border-Linien (#f1f5f9/#e5e7eb hartcodiert) abdunkeln */
[data-theme="dark"] table th,
[data-theme="dark"] table td,
[data-theme="dark"] [class*="-table"] th,
[data-theme="dark"] [class*="-table"] td,
[data-theme="dark"] [class*="-details-grid"],
[data-theme="dark"] [class*="-info-grid"],
[data-theme="dark"] [class*="-detail-row"],
[data-theme="dark"] [class*="-info-box"],
[data-theme="dark"] hr {
    border-color: var(--portal-border) !important;
}

/* (56) Handle-Edit-/Badge-Hover hatte background:#e5e7eb (hell) -> dunkel */
[data-theme="dark"] .btn-handle-edit:hover,
[data-theme="dark"] .handle-domain-badge-cancelled:hover,
[data-theme="dark"] [class*="btn-handle"]:hover {
    background: #2a3344 !important;
    color: var(--portal-text) !important;
}

/* (54) DNS-Section-Header: bg von v2 dunkel, aber h3/svg blieben dunkel */
[data-theme="dark"] .dns-section-header h3,
[data-theme="dark"] .dns-section-header svg,
[data-theme="dark"] [class*="-section-header"] h3 {
    color: var(--portal-text) !important;
}

/* (55) Quota-Range-Slider Track im Dark-Mode (Speicherplatz) */
[data-theme="dark"] input[type="range"]::-webkit-slider-runnable-track,
[data-theme="dark"] .input-group-range,
[data-theme="dark"] [class*="range-track"],
[data-theme="dark"] [class*="slider-track"] {
    background: #2a3344 !important;
}
[data-theme="dark"] input[type="range"]::-moz-range-track {
    background: #2a3344 !important;
}

/* (58) Weisser Balken am Quota-Slider: die .form-control/.input-group-Flaeche
   (Vendor/Bootstrap) im Dark-Mode transparent machen; nur die Slider-Spur
   (.quota-range) behaelt einen dunklen Track. */
[data-theme="dark"] .quota-slider-container .input-group,
[data-theme="dark"] .quota-slider-container .input-group-range,
[data-theme="dark"] .quota-slider-container .input-group-range-filesize,
[data-theme="dark"] .quota-slider-container .form-control,
[data-theme="dark"] .quota-labels {
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
}
[data-theme="dark"] .quota-range,
[data-theme="dark"] .quota-range.form-control {
    background: var(--portal-border) !important;
    border: none !important;
    box-shadow: none !important;
}

/* (58/59) Ursache: das Custom-Styling von .quota-range greift nicht (nativer
   Range = weisser Track + blauer Thumb). Hier mit hoeherer Spezifitaet + !important
   erzwingen (beide Themes; Track nutzt Token -> hell/dunkel). */
.quota-slider-container input[type="range"].quota-range {
    -webkit-appearance: none !important;
    -moz-appearance: none !important;
    appearance: none !important;
    width: 100% !important;
    height: 8px !important;
    background: var(--portal-border) !important;
    border-radius: 4px !important;
    border: none !important;
    box-shadow: none !important;
    padding: 0 !important;
}
.quota-slider-container input[type="range"].quota-range::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: 22px;
    height: 22px;
    background: var(--portal-accent);
    border-radius: 50%;
    border: 2px solid var(--portal-bg);
    cursor: pointer;
    box-shadow: 0 2px 6px rgba(0, 0, 0, .3);
}
.quota-slider-container input[type="range"].quota-range::-moz-range-thumb {
    width: 22px;
    height: 22px;
    background: var(--portal-accent);
    border-radius: 50%;
    border: 2px solid var(--portal-bg);
    cursor: pointer;
}
.quota-slider-container input[type="range"].quota-range::-moz-range-track {
    height: 8px;
    background: var(--portal-border);
    border-radius: 4px;
}

/* (59) DER weisse Balken: das Vendor-Widget setzt `html .input-group-range .value
   { background:#f7f7f7; flex-basis:100% }` -> volle Breite, heller Balken.
   Im Dark-Mode dunkel + lesbar (Spezifitaet 0,3,0 schlaegt 0,2,1). */
[data-theme="dark"] .input-group-range .value,
[data-theme="dark"] .quota-current.value {
    background: var(--portal-bg-muted) !important;
    color: var(--portal-text) !important;
    border-radius: 6px;
}

/* ====================================================================
   DARK MODE: Modal-Inner-Panels / Radio-Toggles / Input-Addons
   (z.B. vhost "Hostname bearbeiten": SSL-Einstellungen-Panel #f8fafc,
   .wukotec.com-Suffix weiss). Breit gefasst, deckt auch andere Modals ab.
   ==================================================================== */
[data-theme="dark"] [class*="-ssl-section"],
[data-theme="dark"] [class*="-custom-ssl"],
[data-theme="dark"] [class*="-radio-label"],
[data-theme="dark"] [class*="-input-group-append"],
[data-theme="dark"] [class*="-input-group-prepend"],
[data-theme="dark"] .modal-body .input-group-text,
[data-theme="dark"] .modal-body [class*="-section"]:not([class*="header"]) {
    background: var(--surface-muted) !important;
    border-color: var(--portal-border) !important;
    color: var(--portal-text) !important;
}
[data-theme="dark"] [class*="-radio-label"].active {
    background: var(--portal-accent-soft) !important;
    border-color: var(--portal-accent) !important;
    color: var(--portal-text) !important;
}
[data-theme="dark"] [class*="-radio-indicator"] { border-color: var(--portal-border) !important; }
[data-theme="dark"] [class*="-section-title"],
[data-theme="dark"] [class*="-ssl-section"] h5,
[data-theme="dark"] [class*="-ssl-section"] label,
[data-theme="dark"] .modal-body label,
[data-theme="dark"] [class*="vhostdomain-label"] {
    color: var(--portal-text) !important;
}

/* ====================================================================
   DARK MODE: bootstrap-select (.selectpicker) Button + Menu.
   Menu wird mit container:'body' nach <body> verschoben -> generisch ueber
   .dropdown-menu targeten. Hover=Accent-Soft (wie Navbar), Selektion=Blau.
   ==================================================================== */
[data-theme="dark"] .bootstrap-select > .btn,
[data-theme="dark"] .bootstrap-select button.dropdown-toggle,
[data-theme="dark"] button.dropdown-toggle.btn-light,
[data-theme="dark"] .bs-searchbox .form-control {
    background: #0f1521 !important;
    color: var(--portal-text) !important;
    border-color: var(--portal-border) !important;
}
[data-theme="dark"] .dropdown-menu .dropdown-item,
[data-theme="dark"] .dropdown-menu li > a,
[data-theme="dark"] .dropdown-menu .dropdown-item .text,
[data-theme="dark"] .dropdown-menu li > a .text {
    color: var(--portal-text) !important;
}
[data-theme="dark"] .dropdown-menu .dropdown-item:hover,
[data-theme="dark"] .dropdown-menu li > a:hover {
    background: var(--portal-accent-soft) !important;
    color: var(--portal-text) !important;
}
[data-theme="dark"] .dropdown-menu .dropdown-item.active,
[data-theme="dark"] .dropdown-menu .dropdown-item.selected,
[data-theme="dark"] .dropdown-menu li.selected > a {
    background: var(--portal-primary) !important;
    color: #fff !important;
}
[data-theme="dark"] .dropdown-menu .dropdown-item.active .text,
[data-theme="dark"] .dropdown-menu li.selected > a .text { color: #fff !important; }

/* ====================================================================
   DARK MODE: Modal-Container + Footer (z.B. "Neue E-Mail-Adresse anlegen").
   Body/Footer sind transparent -> weisser Container scheint v.a. im Footer
   durch. Container/Content/Footer dunkel erzwingen.
   ==================================================================== */
[data-theme="dark"] .modal-content,
[data-theme="dark"] .modal-footer,
[data-theme="dark"] .modal-portal-design,
[data-theme="dark"] .modal-new-mailbox,
[data-theme="dark"] [class*="modal-new-"],
[data-theme="dark"] [class*="modal-portal"] {
    background: var(--surface) !important;
    border-color: var(--portal-border) !important;
    color: var(--portal-text) !important;
}
[data-theme="dark"] .modal-footer .btn-light,
[data-theme="dark"] .modal-footer [class*="btn-secondary"],
[data-theme="dark"] .modal-footer [class*="-close-btn"],
[data-theme="dark"] [class*="btn-cancel-modal"] {
    background: #1c2433 !important;
    color: var(--portal-text) !important;
    border-color: var(--portal-border) !important;
}

/* ====================================================================
   DARK MODE: Login-/Auth-Seiten (eigene scoped Styles, hartcodiert hell).
   Linke Banner-Bildflaeche bleibt; rechtes Panel + Form-Card dunkel.
   ==================================================================== */
[data-theme="dark"] html,
[data-theme="dark"] #app,
[data-theme="dark"] .login-page,
[data-theme="dark"] [class*="register-page"],
[data-theme="dark"] [class*="reset-page"],
[data-theme="dark"] [class*="forgot-page"],
[data-theme="dark"] [class*="confirm-page"] {
    background: #0e131c !important;
}
/* Form-Section war original transparent -> zeigt die (dunkle) Page; kein
   eigener Gradient (sonst Kante/heller Streifen zur Page). */
[data-theme="dark"] .login-form-section,
[data-theme="dark"] [class*="-form-section"] {
    background: transparent !important;
}
[data-theme="dark"] .login-form,
[data-theme="dark"] [class*="register-form"],
[data-theme="dark"] [class*="reset-form"],
[data-theme="dark"] [class*="forgot-form"],
[data-theme="dark"] [class*="confirm-form"],
[data-theme="dark"] [class*="-form-card"] {
    background: var(--surface) !important;
    border-color: var(--portal-border) !important;
    box-shadow: var(--shadow-lg) !important;
}
/* Der aeussere Wrapper (.login-form-container) ist nur Layout -> transparent,
   kein Shadow (sonst doppelter/heller "Container" im Dark-Mode). */
[data-theme="dark"] [class*="-form-container"] {
    background: none !important;
    box-shadow: none !important;
    border-color: transparent !important;
}
[data-theme="dark"] .login-header h1,
[data-theme="dark"] .login-form-label,
[data-theme="dark"] .login-form label,
[data-theme="dark"] [class*="login-"] h1,
[data-theme="dark"] [class*="register-"] h1,
[data-theme="dark"] [class*="reset-"] h1,
[data-theme="dark"] [class*="-form-label"] {
    color: var(--portal-text) !important;
}
[data-theme="dark"] .login-header p,
[data-theme="dark"] [class*="login-"] [class*="subtitle"],
[data-theme="dark"] [class*="-footer"] { color: var(--portal-text-muted) !important; }
[data-theme="dark"] .login-register-btn,
[data-theme="dark"] [class*="register-btn"] {
    background: transparent !important;
    color: var(--portal-text) !important;
    border-color: var(--portal-border) !important;
}

/* Auth-Headings (bare <h1> in *-header), Info-Box-Text und Zurueck-/Back-Buttons
   (Forgot/Reset/Confirm nutzen eigene Praefixe). */
[data-theme="dark"] .login-header h1,
[data-theme="dark"] .forgot-header h1,
[data-theme="dark"] .reset-header h1,
[data-theme="dark"] .confirm-header h1,
[data-theme="dark"] .register-header h1 {
    color: var(--portal-text) !important;
}
[data-theme="dark"] [class*="-info-text"],
[data-theme="dark"] [class*="-success-text"] {
    color: var(--portal-text) !important;
}
[data-theme="dark"] [class*="-back-btn"],
[data-theme="dark"] [class*="-back"] > a {
    background: transparent !important;
    color: var(--portal-text) !important;
    border-color: var(--portal-border) !important;
}

/* ====================================================================
   DARK MODE: Tool-Seiten-Flaechen (gezielt, ersetzt den entfernten breiten
   [class*=-card]-Background-Flip; trifft NICHT portal-action-cards).
   DNS, SSL, RDAP, Whois, Hosting-Check, CloudBackup.
   ==================================================================== */
[data-theme="dark"] .dns-section,
[data-theme="dark"] .dns-record-row,
[data-theme="dark"] .dns-dropdown-menu,
[data-theme="dark"] .ssl-card,
[data-theme="dark"] .ssl-search-section,
[data-theme="dark"] .ssl-empty-state,
[data-theme="dark"] [class*="whois-result"],
[data-theme="dark"] [class*="rdap-result"],
[data-theme="dark"] [class*="rdap-entity"],
[data-theme="dark"] [class*="hostingcheck-result"],
[data-theme="dark"] [class*="sdl-card"],
[data-theme="dark"] [class*="cloudbackup-card"] {
    background: var(--surface) !important;
    border-color: var(--portal-border) !important;
}
/* gedaempfte Header-/Sub-Flaechen */
[data-theme="dark"] .dns-section-header,
[data-theme="dark"] .dns-table-header,
[data-theme="dark"] [class*="rdap-section-header"],
[data-theme="dark"] [class*="rdap-entity-header"],
[data-theme="dark"] [class*="rdap-section"] {
    background: var(--surface-muted) !important;
    border-color: var(--portal-border) !important;
}
/* Texte in den Tool-Tabellen/Headern hell */
[data-theme="dark"] .dns-table-header,
[data-theme="dark"] .dns-table-header *,
[data-theme="dark"] .dns-record-row,
[data-theme="dark"] .dns-record-value,
[data-theme="dark"] .dns-system-value,
[data-theme="dark"] .dns-readonly-value {
    color: var(--portal-text) !important;
}
/* Read-only/Edit-Zeilen-Felder neutral dunkel (kein Amber-Balken) */
[data-theme="dark"] .dns-record-name {
    background: transparent !important;
    color: var(--portal-text) !important;
}
[data-theme="dark"] .dns-record-row .dns-record-name input,
[data-theme="dark"] .dns-record-row .dns-record-ttl input,
[data-theme="dark"] .dns-record-value input {
    background: #0f1521 !important;
    color: var(--portal-text) !important;
    border-color: var(--portal-border) !important;
}
/* kleine REDIRECT/www-Badges behalten Amber-Akzent, aber lesbar */
[data-theme="dark"] .dns-record-name .badge-redirect,
[data-theme="dark"] .dns-record-name .badge-subdomain {
    background: rgba(245, 158, 11, .15) !important;
    color: #fcd34d !important;
}
/* Action-Buttons (Speichern blau-tint, Loeschen rot-tint) */
[data-theme="dark"] .dns-record-actions .btn-save {
    background: rgba(59, 130, 246, .18) !important;
    color: #93c5fd !important;
}
[data-theme="dark"] .dns-record-actions .btn-save:hover,
[data-theme="dark"] .dns-record-actions .btn-save.btn-changed {
    background: #3b82f6 !important;
    color: #fff !important;
}
[data-theme="dark"] .dns-record-actions .btn-delete {
    background: rgba(239, 68, 68, .16) !important;
    color: #fca5a5 !important;
}
[data-theme="dark"] .dns-record-actions .btn-delete:hover {
    background: rgba(239, 68, 68, .28) !important;
    color: #fff !important;
}
/* DNS-Snapshots-Modal: weisse Snapshot-Karten + Tabelle dunkel */
[data-theme="dark"] #modalDnsSnapshots .dns-snapshot-item,
[data-theme="dark"] #modalDnsSnapshots .dns-snapshot-records-container,
[data-theme="dark"] #modalDnsSnapshots .dns-snapshot-detail-info,
[data-theme="dark"] #modalDnsSnapshots .dns-snapshots-header {
    background: var(--surface) !important;
    border-color: var(--portal-border) !important;
    color: var(--portal-text) !important;
}
[data-theme="dark"] #modalDnsSnapshots .dns-snapshot-item:hover {
    background: var(--surface-muted) !important;
}
[data-theme="dark"] #modalDnsSnapshots .dns-snapshot-records-table th {
    background: var(--surface-muted) !important;
    color: var(--portal-text) !important;
}
[data-theme="dark"] #modalDnsSnapshots .dns-snapshot-back-btn {
    background: #1c2433 !important;
    color: var(--portal-text) !important;
    border-color: var(--portal-border) !important;
}
/* DNS-Alert (amber) */
[data-theme="dark"] .dns-alert {
    background: rgba(245, 158, 11, .10) !important;
    border-color: rgba(245, 158, 11, .30) !important;
    color: #fcd34d !important;
}