/* ITMedia Dark-Theme fuer OpsCenter / Maintenance (2026-10-04).
   Ungelayertes CSS schlaegt Tailwind-v4-Utilities (@layer). Nur Optik, keine Farben der Statusanzeigen. */
:root { --bg:#0a0e14; --panel:#121823; --panel2:#0e131b; --line:#222b3a; --line2:#2d384b; --dim:#8a96a8; --acc:#4c8dff; --acc2:#8b5cf6; }
html { color-scheme: dark; }
body {
    background-color: var(--bg) !important;
    background-image:
        radial-gradient(1100px 520px at 85% -10%, rgba(139,92,246,.16), transparent 60%),
        radial-gradient(900px 480px at -10% 110%, rgba(76,141,255,.14), transparent 60%) !important;
    background-attachment: fixed !important;
    font-family: "Inter","Segoe UI Variable","Segoe UI",system-ui,-apple-system,sans-serif;
    -webkit-font-smoothing: antialiased;
}
::-webkit-scrollbar { width:10px; height:10px; } ::-webkit-scrollbar-track { background:transparent; }
::-webkit-scrollbar-thumb { background:#27324a; border-radius:8px; } ::-webkit-scrollbar-thumb:hover { background:#34425f; }

/* Kopfleiste */
header.sticky { background-color: rgba(10,14,20,.80) !important; backdrop-filter: blur(14px) saturate(140%); border-color: var(--line) !important; }
nav { backdrop-filter: blur(10px); }

/* Karten / Panels */
.bg-slate-800, .bg-slate-800\/50, .bg-slate-800\/60, .bg-slate-800\/80 {
    background-image: linear-gradient(180deg, var(--panel), var(--panel2)) !important;
    background-color: var(--panel) !important;
    box-shadow: 0 10px 30px rgba(0,0,0,.30), inset 0 1px 0 rgba(255,255,255,.03);
}
.bg-slate-900\/60, .bg-slate-900\/50 { background-color: rgba(11,16,24,.7) !important; }
.border-slate-700, .border-slate-700\/40, .border-slate-700\/60, .border-slate-700\/80, .border-slate-800, .divide-slate-700\/50 > * + * { border-color: var(--line) !important; }
.rounded-xl { border-radius: 14px; }

/* Buttons (Hover bleibt erhalten, da nur background-image/filter) */
.bg-slate-700 { background-image: linear-gradient(180deg,#182131,#131a26); border: 1px solid var(--line2); }
.bg-slate-700:hover, .bg-slate-600:hover { filter: brightness(1.25); border-color: var(--acc); }
.bg-indigo-600, .bg-indigo-500 { background-image: linear-gradient(135deg, var(--acc), #3b6fe0); box-shadow: 0 4px 14px rgba(76,141,255,.28); }
.bg-indigo-600:hover, .bg-indigo-500:hover { filter: brightness(1.15); box-shadow: 0 6px 20px rgba(76,141,255,.4); }
button, a.rounded-lg { transition: filter .15s, box-shadow .15s, transform .12s; }
button:hover { transform: translateY(-1px); }

/* Eingaben */
input:not([type=checkbox]):not([type=radio]), select, textarea { border-color: var(--line2) !important; border-radius: 9px; }
input:focus, select:focus, textarea:focus { border-color: var(--acc) !important; box-shadow: 0 0 0 3px rgba(76,141,255,.2); outline: none; }

/* Tabellen */
th { text-transform: uppercase; font-size: 11px; letter-spacing: .9px; color: var(--dim); }
tbody tr:hover { background-color: rgba(76,141,255,.06); }

/* Modals */
.bg-black\/60 { backdrop-filter: blur(6px) saturate(120%); }

/* Akzent-Ueberschriften */
h1, h2 { letter-spacing: -.3px; }

/* DynDNS-spezifisch: blaue Buttons wie Akzent, Panels etwas runder */
.bg-blue-600, .bg-blue-500 { background-image: linear-gradient(135deg, var(--acc), #3b6fe0); box-shadow: 0 4px 14px rgba(76,141,255,.28); }
.bg-blue-600:hover, .bg-blue-500:hover { filter: brightness(1.15); box-shadow: 0 6px 20px rgba(76,141,255,.4); }
.rounded-lg { border-radius: 12px; }

/* Freistellen: Boxen als Raster, Standardanordnung wie bisher (links 3 Boxen, rechts Tabelle) */
.dyn-boxes { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 2fr); grid-template-areas: "h h" "a d" "b d" "c d" "e e"; gap: 0 32px; align-items: start; }
.dyn-boxes > .box-h { grid-area: h; } .dyn-boxes > .box-e { grid-area: e; } .dyn-boxes > .box-a { grid-area: a; } .dyn-boxes > .box-b { grid-area: b; } .dyn-boxes > .box-c { grid-area: c; } .dyn-boxes > .box-d { grid-area: d; }
.dyn-boxes > .dyn-card { margin-bottom: 32px; }
@media (max-width: 1023px) { .dyn-boxes { display: block; } }

/* Die Freistellen-Schaltflaechen sitzen im Kopf: ueber dem Bearbeiten-Rahmen der Box bleiben */
#fsMount { position: relative; z-index: 70; }

/* Dialoge liegen immer ueber den Freistellen-Boxen (deren Ebene waechst beim Verschieben) */
#faqModal, #userModal, #pwdModal, #otpSetupModal, #codeModal, #logModal { z-index: 5000 !important; }