/* =========================================================================
   ESCH.Enterprises – App-Theme „Netzwerk bei Nacht“
   Für Kundencenter, Admin/NOC, Shop und Support (alle auf Bootstrap 5.3).
   Wird NACH Bootstrap und nach seitenspezifischen Styles geladen und setzt
   das einheitliche dunkle Design durch. Gleiche Datei in jeder Subdomain unter
   assets/esch-app.css (Quelle: httpdocs/assets/esch-app.css).
   ========================================================================= */
@font-face { font-family: 'Inter'; font-weight: 400; font-display: swap; src: url('fonts/inter-latin-400-normal.woff2') format('woff2'); }
@font-face { font-family: 'Inter'; font-weight: 500; font-display: swap; src: url('fonts/inter-latin-500-normal.woff2') format('woff2'); }
@font-face { font-family: 'Inter'; font-weight: 600; font-display: swap; src: url('fonts/inter-latin-600-normal.woff2') format('woff2'); }
@font-face { font-family: 'Space Grotesk'; font-weight: 600; font-display: swap; src: url('fonts/space-grotesk-latin-600-normal.woff2') format('woff2'); }
@font-face { font-family: 'Space Grotesk'; font-weight: 700; font-display: swap; src: url('fonts/space-grotesk-latin-700-normal.woff2') format('woff2'); }
@font-face { font-family: 'JetBrains Mono'; font-weight: 400; font-display: swap; src: url('fonts/jetbrains-mono-latin-400-normal.woff2') format('woff2'); }

:root, html[data-bs-theme="dark"] {
  --e-bg: #0A101C; --e-bg-2: #0D1524; --e-surface: #111A2B; --e-surface-2: #13213A;
  --e-line: #1E2A40; --e-line-2: #22314C;
  --e-text: #E6EDF7; --e-text-2: #C9D4E5; --e-muted: #A9B7CC; --e-subtle: #8494AD;
  --e-accent: #22D3EE; --e-accent-ink: #04131A; --e-link: #7DE3F4;

  --bs-body-bg: var(--e-bg); --bs-body-bg-rgb: 10,16,28;
  --bs-body-color: var(--e-text); --bs-body-color-rgb: 230,237,247;
  --bs-emphasis-color: #FFFFFF; --bs-heading-color: #FFFFFF;
  --bs-secondary-color: var(--e-muted); --bs-tertiary-color: var(--e-subtle);
  --bs-secondary-bg: var(--e-surface-2); --bs-tertiary-bg: var(--e-surface); --bs-tertiary-bg-rgb: 17,26,43;
  --bs-border-color: var(--e-line); --bs-border-color-translucent: rgba(148,163,188,.16);
  --bs-primary: var(--e-accent); --bs-primary-rgb: 34,211,238;
  --bs-primary-text-emphasis: #A5F3FC; --bs-primary-bg-subtle: #0B2B36; --bs-primary-border-subtle: #155E75;
  --bs-link-color: var(--e-link); --bs-link-color-rgb: 125,227,244; --bs-link-hover-color: #B5F1FA; --bs-link-hover-color-rgb: 181,241,250;
  --bs-font-sans-serif: Inter, system-ui, -apple-system, "Segoe UI", sans-serif;
  --bs-font-monospace: "JetBrains Mono", ui-monospace, monospace;
  --bs-border-radius: 10px; --bs-border-radius-sm: 8px; --bs-border-radius-lg: 16px;
  --bs-box-shadow: 0 8px 24px rgba(0,0,0,.35); --bs-box-shadow-sm: none;
  color-scheme: dark;
}

html[data-bs-theme="dark"] body { background: var(--e-bg) !important; color: var(--e-text) !important; font-family: var(--bs-font-sans-serif) !important; }
html[data-bs-theme="dark"] h1, html[data-bs-theme="dark"] h2, html[data-bs-theme="dark"] h3,
html[data-bs-theme="dark"] .h1, html[data-bs-theme="dark"] .h2, html[data-bs-theme="dark"] .h3 { font-family: "Space Grotesk", Inter, sans-serif; letter-spacing: -0.02em; color: #FFFFFF; }
html[data-bs-theme="dark"] h4, html[data-bs-theme="dark"] h5, html[data-bs-theme="dark"] h6 { color: #FFFFFF; }
html[data-bs-theme="dark"] a:not(.btn):not(.dropdown-item):not(.nav-link):not(.list-group-item) { color: var(--e-link); }
html[data-bs-theme="dark"] a:not(.btn):not(.dropdown-item):not(.nav-link):not(.list-group-item):hover { color: #B5F1FA; }
html[data-bs-theme="dark"] a.btn { color: var(--bs-btn-color); }
html[data-bs-theme="dark"] a.btn:hover { color: var(--bs-btn-hover-color); }
html[data-bs-theme="dark"] :focus-visible { outline: 2px solid var(--e-accent); outline-offset: 2px; }
html[data-bs-theme="dark"] code, html[data-bs-theme="dark"] .font-monospace { color: #A5F3FC; }

/* ---- Navigation ---- */
html[data-bs-theme="dark"] .navbar { background: rgba(13,21,36,.96) !important; border-bottom: 1px solid var(--e-line) !important; box-shadow: none !important; }
html[data-bs-theme="dark"] .navbar .navbar-brand, html[data-bs-theme="dark"] .navbar-brand { color: #FFFFFF !important; }
html[data-bs-theme="dark"] .navbar .nav-link { color: var(--e-text-2) !important; font-weight: 500; }
html[data-bs-theme="dark"] .navbar .nav-link:hover { color: #FFFFFF !important; }
html[data-bs-theme="dark"] .navbar .nav-link.active, html[data-bs-theme="dark"] .navbar .nav-link.show { color: #FFFFFF !important; box-shadow: inset 0 -2px 0 var(--e-accent); }
html[data-bs-theme="dark"] .navbar-toggler { border-color: var(--e-line-2); }
.esch-brand { display: inline-flex; align-items: baseline; gap: 1px; font-family: "Space Grotesk", Inter, sans-serif; font-size: 22px; letter-spacing: -0.02em; color: #FFFFFF; text-decoration: none; }
.esch-brand b { font-weight: 700; } .esch-brand i { font-style: normal; font-weight: 700; color: var(--e-accent); } .esch-brand span { font-weight: 500; color: #93A3BC; }
.esch-balance { display: inline-flex; align-items: center; gap: 6px; min-height: 40px; padding: 0 14px; border-radius: 10px; background: var(--e-surface-2); color: var(--e-text-2) !important; text-decoration: none; font-size: 14px; white-space: nowrap; }
.esch-balance strong { color: #FFFFFF; }
.btn-icon { width: 40px; height: 40px; display: inline-flex !important; align-items: center; justify-content: center; padding: 0 !important; }
html[data-bs-theme="dark"] .dropdown-menu { background: var(--e-surface) !important; border: 1px solid var(--e-line-2) !important; box-shadow: var(--bs-box-shadow) !important; }
html[data-bs-theme="dark"] .dropdown-item { color: var(--e-text-2); }
html[data-bs-theme="dark"] .dropdown-item:hover, html[data-bs-theme="dark"] .dropdown-item:focus { background: var(--e-surface-2); color: #FFFFFF; }
html[data-bs-theme="dark"] .dropdown-item.active { background: var(--e-surface-2); color: var(--e-accent); }
html[data-bs-theme="dark"] .nav-tabs { border-color: var(--e-line); }
html[data-bs-theme="dark"] .nav-tabs .nav-link.active { background: var(--e-surface); border-color: var(--e-line) var(--e-line) var(--e-surface); color: #FFFFFF; }
html[data-bs-theme="dark"] .nav-pills .nav-link.active { background: var(--e-accent); color: var(--e-accent-ink); }

/* ---- Flächen ---- */
html[data-bs-theme="dark"] .card { --bs-card-bg: var(--e-surface); --bs-card-border-color: var(--e-line); --bs-card-cap-bg: var(--e-bg-2); --bs-card-color: var(--e-text); background: var(--e-surface) !important; border: 1px solid var(--e-line) !important; border-radius: 16px; box-shadow: none !important; color: var(--e-text); }
html[data-bs-theme="dark"] .card-header, html[data-bs-theme="dark"] .card-footer { background: var(--e-bg-2) !important; border-color: var(--e-line) !important; color: #FFFFFF; }
html[data-bs-theme="dark"] .modal-content { background: var(--e-surface); border: 1px solid var(--e-line-2); }
html[data-bs-theme="dark"] .modal-header, html[data-bs-theme="dark"] .modal-footer { border-color: var(--e-line); }
html[data-bs-theme="dark"] .list-group { --bs-list-group-bg: var(--e-surface); --bs-list-group-border-color: var(--e-line); --bs-list-group-color: var(--e-text); --bs-list-group-action-hover-bg: var(--e-surface-2); --bs-list-group-active-bg: var(--e-surface-2); --bs-list-group-active-border-color: var(--e-line-2); --bs-list-group-active-color: var(--e-accent); }
html[data-bs-theme="dark"] .accordion { --bs-accordion-bg: var(--e-surface); --bs-accordion-border-color: var(--e-line); --bs-accordion-active-bg: var(--e-surface-2); --bs-accordion-active-color: #FFFFFF; }
html[data-bs-theme="dark"] .bg-white, html[data-bs-theme="dark"] .bg-light, html[data-bs-theme="dark"] .bg-body, html[data-bs-theme="dark"] .bg-body-tertiary, html[data-bs-theme="dark"] .bg-body-secondary { background-color: var(--e-surface) !important; color: var(--e-text); }
html[data-bs-theme="dark"] .bg-dark { background-color: var(--e-bg-2) !important; }
html[data-bs-theme="dark"] .bg-primary { background-color: #0E7490 !important; color: #FFFFFF; }
html[data-bs-theme="dark"] .bg-secondary { background-color: #334155 !important; }
html[data-bs-theme="dark"] .border, html[data-bs-theme="dark"] .border-top, html[data-bs-theme="dark"] .border-bottom, html[data-bs-theme="dark"] .border-start, html[data-bs-theme="dark"] .border-end { border-color: var(--e-line) !important; }
html[data-bs-theme="dark"] .shadow, html[data-bs-theme="dark"] .shadow-sm, html[data-bs-theme="dark"] .shadow-lg { box-shadow: none !important; }
html[data-bs-theme="dark"] hr { border-color: var(--e-line); opacity: 1; }

/* ---- Text ---- */
html[data-bs-theme="dark"] .text-dark, html[data-bs-theme="dark"] .text-black, html[data-bs-theme="dark"] .text-body { color: var(--e-text) !important; }
html[data-bs-theme="dark"] .text-muted, html[data-bs-theme="dark"] .text-secondary, html[data-bs-theme="dark"] .text-body-secondary { color: var(--e-muted) !important; }
html[data-bs-theme="dark"] .text-primary { color: var(--e-accent) !important; }
html[data-bs-theme="dark"] .text-success { color: #6EE7B7 !important; }
html[data-bs-theme="dark"] .text-danger { color: #FCA5A5 !important; }
html[data-bs-theme="dark"] .text-warning { color: #FCD34D !important; }
html[data-bs-theme="dark"] .text-info { color: #7DE3F4 !important; }
html[data-bs-theme="dark"] .badge.bg-warning, html[data-bs-theme="dark"] .badge.bg-info { color: #111 !important; }
html[data-bs-theme="dark"] .badge.bg-light { background: var(--e-surface-2) !important; color: var(--e-text-2) !important; }

/* ---- Buttons ---- */
html[data-bs-theme="dark"] .btn { font-weight: 600; border-radius: 10px; }
html[data-bs-theme="dark"] .btn-primary { --bs-btn-bg: var(--e-accent); --bs-btn-border-color: var(--e-accent); --bs-btn-color: var(--e-accent-ink); --bs-btn-hover-bg: #67E8F9; --bs-btn-hover-border-color: #67E8F9; --bs-btn-hover-color: var(--e-accent-ink); --bs-btn-active-bg: #A5F3FC; --bs-btn-active-color: var(--e-accent-ink); --bs-btn-disabled-bg: var(--e-accent); --bs-btn-disabled-color: var(--e-accent-ink); }
html[data-bs-theme="dark"] .btn-outline-primary { --bs-btn-color: var(--e-accent); --bs-btn-border-color: #155E75; --bs-btn-hover-bg: var(--e-accent); --bs-btn-hover-border-color: var(--e-accent); --bs-btn-hover-color: var(--e-accent-ink); }
html[data-bs-theme="dark"] .btn-light, html[data-bs-theme="dark"] .btn-white { --bs-btn-bg: var(--e-surface-2); --bs-btn-border-color: var(--e-line-2); --bs-btn-color: var(--e-text); --bs-btn-hover-bg: #1A2C4A; --bs-btn-hover-color: #FFFFFF; --bs-btn-hover-border-color: var(--e-line-2); }
html[data-bs-theme="dark"] .btn-secondary, html[data-bs-theme="dark"] .btn-dark { --bs-btn-bg: var(--e-surface-2); --bs-btn-border-color: var(--e-line-2); --bs-btn-color: var(--e-text); --bs-btn-hover-bg: #1A2C4A; --bs-btn-hover-border-color: var(--e-line-2); --bs-btn-hover-color: #FFFFFF; }
html[data-bs-theme="dark"] .btn-outline-secondary, html[data-bs-theme="dark"] .btn-outline-dark, html[data-bs-theme="dark"] .btn-outline-light { --bs-btn-color: var(--e-text-2); --bs-btn-border-color: var(--e-line-2); --bs-btn-hover-bg: var(--e-surface-2); --bs-btn-hover-color: #FFFFFF; --bs-btn-hover-border-color: var(--e-line-2); }

/* ---- Formulare ---- */
html[data-bs-theme="dark"] .form-control, html[data-bs-theme="dark"] .form-select, html[data-bs-theme="dark"] .input-group-text { background-color: var(--e-bg) !important; border-color: var(--e-line-2) !important; color: var(--e-text) !important; }
html[data-bs-theme="dark"] .form-control:focus, html[data-bs-theme="dark"] .form-select:focus { border-color: var(--e-accent) !important; box-shadow: 0 0 0 .2rem rgba(34,211,238,.2) !important; }
html[data-bs-theme="dark"] .form-control::placeholder { color: #6B7A93; }
html[data-bs-theme="dark"] .form-control:disabled, html[data-bs-theme="dark"] .form-control[readonly] { background-color: var(--e-bg-2) !important; color: var(--e-muted) !important; }
html[data-bs-theme="dark"] .input-group-text { background-color: var(--e-surface-2) !important; color: var(--e-muted) !important; }
html[data-bs-theme="dark"] .form-check-input:checked { background-color: var(--e-accent); border-color: var(--e-accent); }
html[data-bs-theme="dark"] .form-label, html[data-bs-theme="dark"] label { color: var(--e-text-2); }

/* ---- Tabellen ---- */
html[data-bs-theme="dark"] .table { --bs-table-bg: transparent; --bs-table-color: var(--e-text); --bs-table-border-color: var(--e-line); --bs-table-striped-bg: rgba(255,255,255,.02); --bs-table-striped-color: var(--e-text); --bs-table-hover-bg: rgba(34,211,238,.05); --bs-table-hover-color: #FFFFFF; color: var(--e-text); }
html[data-bs-theme="dark"] .table > :not(caption) > * > * { background-color: transparent; color: inherit; border-bottom-color: var(--e-line); }
html[data-bs-theme="dark"] .table thead th, html[data-bs-theme="dark"] .table-light th, html[data-bs-theme="dark"] .table-light td, html[data-bs-theme="dark"] .table-dark th, html[data-bs-theme="dark"] .table-dark td { background-color: var(--e-bg-2) !important; color: var(--e-subtle) !important; font-weight: 500; font-size: .85rem; border-color: var(--e-line) !important; }
html[data-bs-theme="dark"] .table-light, html[data-bs-theme="dark"] .table-dark { --bs-table-bg: var(--e-bg-2); --bs-table-color: var(--e-subtle); }

/* ---- Hinweise ---- */
html[data-bs-theme="dark"] .alert { border-radius: 12px; }
html[data-bs-theme="dark"] .alert-success { --bs-alert-bg: #0F3B2E; --bs-alert-color: #A7F3D0; --bs-alert-border-color: #166B4F; }
html[data-bs-theme="dark"] .alert-danger { --bs-alert-bg: #3B1416; --bs-alert-color: #FECACA; --bs-alert-border-color: #7F1D1D; }
html[data-bs-theme="dark"] .alert-warning { --bs-alert-bg: #3B2F0F; --bs-alert-color: #FDE68A; --bs-alert-border-color: #78560F; }
html[data-bs-theme="dark"] .alert-info, html[data-bs-theme="dark"] .alert-primary { --bs-alert-bg: #0B2B36; --bs-alert-color: #A5F3FC; --bs-alert-border-color: #155E75; }
html[data-bs-theme="dark"] .alert-light, html[data-bs-theme="dark"] .alert-secondary { --bs-alert-bg: var(--e-surface); --bs-alert-color: var(--e-text-2); --bs-alert-border-color: var(--e-line-2); }
html[data-bs-theme="dark"] .progress { background-color: var(--e-surface-2); }

/* ---- Anmelde- und Passwortseiten des Kundencenters (eigene Klassen) ---- */
body:has(.login-box) { background: var(--e-bg) radial-gradient(1200px 600px at 50% -10%, #13213A 0%, transparent 60%) !important; color: var(--e-text) !important; font-family: var(--bs-font-sans-serif) !important; min-height: 100vh; padding: 24px; box-sizing: border-box; height: auto !important; }
.login-box { background: var(--e-surface) !important; border: 1px solid var(--e-line-2) !important; border-radius: 18px !important; box-shadow: 0 24px 64px rgba(0,0,0,.45) !important; padding: 36px !important; color: var(--e-text); }
.login-box h2 { font-family: "Space Grotesk", Inter, sans-serif !important; color: #FFFFFF !important; letter-spacing: -0.02em; font-size: 26px; }
.login-box h2::before { content: "ESCH."; display: block; font-size: 14px; letter-spacing: .12em; color: var(--e-accent); margin-bottom: 6px; font-family: "JetBrains Mono", monospace; }
.login-box .section-title { color: var(--e-accent) !important; border-color: var(--e-line) !important; font-family: "JetBrains Mono", monospace; font-size: 13px; text-transform: uppercase; letter-spacing: .08em; }
.login-box .form-group label, .login-box .form-col label { color: var(--e-text-2) !important; font-size: 14px; }
.login-box .form-group input, .login-box .form-col input, .login-box select { background: var(--e-bg) !important; border: 1px solid var(--e-line-2) !important; color: var(--e-text) !important; border-radius: 10px !important; padding: 12px 14px !important; font: inherit; }
.login-box .form-group input:focus, .login-box .form-col input:focus { outline: none; border-color: var(--e-accent) !important; box-shadow: 0 0 0 3px rgba(34,211,238,.18); }
.login-box .btn { background: var(--e-accent) !important; color: var(--e-accent-ink) !important; border-radius: 10px !important; font-weight: 600; min-height: 48px; }
.login-box .btn:hover { background: #67E8F9 !important; }
.login-box .error { background: #3B1416 !important; color: #FECACA !important; border: 1px solid #7F1D1D !important; border-radius: 10px !important; }
.login-box .success { background: #0F3B2E !important; color: #A7F3D0 !important; border: 1px solid #166B4F !important; border-radius: 10px !important; }
.login-box .action-links, .login-box .action-links a { color: var(--e-muted) !important; }
.login-box .action-links a:hover { color: #FFFFFF !important; }