/* ==================================================================
   ImmortalV · txAdmin Panel-Theme  (v1.0, für txAdmin 8.1.2)
   ------------------------------------------------------------------
   Basiert auf dem ImmortalV UI-Kit (Navy, blaues Akzentlicht,
   Rubik-Italic-Schriftzug). Überschreibt nur die Design-Variablen von
   txAdmin + ein paar gezielte Komponenten-Styles. Wird in
   panel/index.html NACH dem Original-CSS geladen.
   Entfernen = <link ... immortalv-theme.css> aus index.html löschen.
   ================================================================== */

@property --iv-angle {
    syntax: '<angle>';
    initial-value: 0deg;
    inherits: false;
}

/* ---------- Design-Variablen (gilt für Hell- UND Dunkelmodus) ---------- */
:root,
.dark {
    --background: 217.9 65.5% 5.7%;          /* #050c18 */
    --foreground: 216.9 61.9% 95.9%;         /* #eef3fb */
    --card: 216 57.7% 10.2%;                 /* #0b1729 */
    --card-foreground: 216.9 61.9% 95.9%;
    --popover: 216 60% 9.8%;                 /* #0a1628 */
    --popover-foreground: 216.9 61.9% 95.9%;
    --primary: 216.9 61.9% 95.9%;
    --primary-foreground: 217.9 65.5% 5.7%;
    --secondary: 218.8 52.6% 19%;            /* #17294a */
    --secondary-foreground: 216.9 61.9% 95.9%;
    --muted: 218 57.7% 13.9%;                /* #0f1e38 */
    --muted-foreground: 216.8 15.3% 60.2%;   /* #8a96a9 */
    --accent: 205.1 100% 58.2%;              /* #2aa6ff */
    --accent-foreground: 0 0% 100%;
    --border: 218.2 45.8% 18.8%;             /* #1a2a46 */
    --input: 218.5 47.7% 21.8%;              /* #1d3052 */
    --ring: 205.1 100% 58.2%;

    --destructive: 355.3 100% 67.6%;         /* #ff5a67 */
    --destructive-foreground: 0 0% 100%;
    --destructive-hint: 340 47.4% 11.2%;
    --destructive-inline: 355.3 100% 67.6%;
    --warning: 41.5 100% 63.1%;              /* #ffc543 */
    --warning-foreground: 36 71.4% 6.9%;
    --warning-hint: 36.9 44.8% 11.4%;
    --warning-inline: 41.5 100% 63.1%;
    --success: 160.2 73.3% 54.5%;            /* #36e0a8 */
    --success-foreground: 158.8 81% 8.2%;
    --success-hint: 166.7 55.1% 9.6%;
    --success-inline: 160.2 73.3% 54.5%;
    --info: 205.1 100% 58.2%;
    --info-foreground: 212.1 82.4% 6.7%;
    --info-hint: 214 70.7% 14.7%;
    --info-inline: 205.1 100% 58.2%;

    --font-sans: 'Outfit', 'Inter Variable', 'Segoe UI', sans-serif;
    --radius: .6rem;

    /* ImmortalV-Kit Tokens */
    --iv-accent: #2aa6ff;
    --iv-accent-2: #7ea5ff;
    --iv-accent-glow: rgba(42, 166, 255, .55);
    --iv-blue-border: rgba(118, 150, 238, .9);
    --iv-line: rgba(150, 180, 230, .16);
    --iv-line-2: rgba(150, 180, 230, .26);
    --iv-field: rgba(16, 28, 50, .9);
    --iv-muted: #8a96a9;
    --iv-green: #36e0a8;
    --iv-amber: #ffc543;
    --iv-red: #ff5a67;
    --iv-pink: #e8287a;
    --iv-ease: cubic-bezier(.2, .8, .2, 1);
    --iv-spring: cubic-bezier(.34, 1.56, .64, 1);
    --iv-head: 'Rubik', 'Outfit', sans-serif;
    color-scheme: dark;
}

/* ---------- Hintergrund mit Lichtflecken ---------- */
html, body { background-color: #050c18; }
body {
    font-family: var(--font-sans);
    -webkit-font-smoothing: antialiased;
    background-image:
        radial-gradient(900px 620px at -8% -12%, rgba(14, 78, 150, .55), transparent 70%),
        radial-gradient(1000px 760px at 108% 112%, rgba(10, 104, 200, .45), transparent 70%),
        radial-gradient(520px 420px at 55% 45%, rgba(60, 90, 200, .12), transparent 70%);
    background-attachment: fixed;
    background-repeat: no-repeat;
}

::selection { background: rgba(42, 166, 255, .35); color: #fff; }

/* Scrollbars */
::-webkit-scrollbar { width: 8px; height: 8px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: rgba(126, 165, 255, .28); border-radius: 4px; }
::-webkit-scrollbar-thumb:hover { background: rgba(126, 165, 255, .5); }
* { scrollbar-color: rgba(126, 165, 255, .35) transparent; }

/* ---------- Karten / Flächen: Glas-Optik ---------- */
.bg-card {
    background: linear-gradient(180deg, rgba(18, 32, 58, .72), rgba(10, 22, 42, .72)) !important;
    border-color: var(--iv-line) !important;
    backdrop-filter: blur(6px);
}
.bg-card.border, .border.bg-card { box-shadow: 0 20px 50px rgba(0, 0, 0, .35), inset 0 1px 0 rgba(255, 255, 255, .03); }
.bg-popover { border-color: var(--iv-line-2) !important; box-shadow: 0 20px 50px rgba(0, 0, 0, .55) !important; }

/* Kopfzeile oben */
header {
    background: linear-gradient(180deg, rgba(5, 12, 24, .92), rgba(5, 12, 24, .78)) !important;
    border-color: var(--iv-line) !important;
    backdrop-filter: blur(10px);
}
header::after {
    content: '';
    position: absolute; left: 0; right: 0; bottom: -1px; height: 1px;
    background: linear-gradient(90deg, transparent, rgba(42, 166, 255, .7) 30%, rgba(126, 165, 255, .25) 70%, transparent);
    pointer-events: none;
}

/* Überschriften im Rubik-Italic-Stil */
h1, h2, .text-2xl.font-bold, .text-3xl, .text-xl.font-semibold {
    font-family: var(--iv-head);
    font-style: italic;
    letter-spacing: .4px;
}

/* ---------- Navigation (Seitenleiste & Kopf-Menü) ---------- */
aside a, nav a, nav button {
    transition: color .2s, background-color .2s, border-color .2s, box-shadow .25s;
}
a[aria-current="page"], nav [data-active], nav [data-state="active"] {
    color: #fff !important;
    background: linear-gradient(90deg, rgba(92, 118, 196, .6), rgba(64, 88, 160, .35)) !important;
    box-shadow: 0 0 0 1px var(--iv-blue-border), 0 0 16px rgba(110, 150, 255, .25);
}

/* ---------- Buttons ---------- */
button.bg-primary, a.bg-primary {
    color: #fff !important;
    background: linear-gradient(180deg, rgba(92, 118, 196, .75), rgba(62, 86, 158, .7)) !important;
    border: 1.5px solid var(--iv-blue-border) !important;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .12);
    transition: transform .25s var(--iv-spring), filter .2s, box-shadow .25s !important;
}
button.bg-primary:not(:disabled):hover, a.bg-primary:hover {
    transform: translateY(-1px);
    filter: brightness(1.15);
    box-shadow: 0 8px 22px rgba(80, 120, 255, .3), inset 0 1px 0 rgba(255, 255, 255, .14);
}
button.bg-destructive {
    background: linear-gradient(180deg, rgba(214, 78, 92, .85), rgba(172, 54, 68, .8)) !important;
    border: 1px solid #ef6b77 !important;
}
button.bg-destructive:not(:disabled):hover { box-shadow: 0 8px 22px rgba(240, 90, 105, .35); }
button.bg-success { box-shadow: 0 0 14px rgba(54, 224, 168, .25); }
button.bg-accent, .bg-accent { box-shadow: 0 0 14px rgba(42, 166, 255, .35); }
button.bg-secondary, button.border-input, button.bg-background {
    border-color: var(--iv-line-2) !important;
}
button:focus-visible, a:focus-visible, input:focus-visible, textarea:focus-visible {
    outline: 2px solid #9cc0ff !important;
    outline-offset: 2px;
}

/* ---------- Eingabefelder ---------- */
input:not([type="checkbox"]):not([type="radio"]):not([type="range"]), textarea, select {
    background-color: var(--iv-field);
    border-color: rgba(150, 180, 230, .22);
    transition: border-color .2s, box-shadow .2s;
}
input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):focus,
textarea:focus, select:focus {
    border-color: var(--iv-blue-border) !important;
    box-shadow: 0 0 0 3px rgba(110, 150, 255, .18) !important;
}
::placeholder { color: #5d6a80 !important; }

/* Schalter (shadcn Switch) */
button[role="switch"][data-state="checked"] {
    background: linear-gradient(90deg, #2f7bf0, var(--iv-accent)) !important;
    box-shadow: 0 0 10px rgba(42, 166, 255, .45);
}
button[role="checkbox"][data-state="checked"] {
    background: var(--iv-accent) !important;
    border-color: var(--iv-accent) !important;
}

/* Tabs */
[role="tablist"] {
    background: rgba(30, 44, 70, .55) !important;
    border: 1px solid var(--iv-line);
}
[role="tab"][data-state="active"] {
    color: #fff !important;
    background: linear-gradient(180deg, rgba(92, 118, 196, .75), rgba(64, 88, 160, .7)) !important;
    box-shadow: 0 0 0 1px var(--iv-blue-border), 0 0 14px rgba(110, 150, 255, .35) !important;
}

/* Tabellen */
table thead { background: rgba(10, 22, 42, .6); }
table tbody tr:hover { background: rgba(126, 165, 255, .06) !important; }

/* Dialoge / Toasts */
[role="dialog"], [role="alertdialog"] {
    border-color: var(--iv-line-2) !important;
    box-shadow: 0 40px 100px rgba(0, 0, 0, .6), 0 0 0 1px rgba(120, 160, 220, .08) !important;
}
[data-sonner-toast], li[data-sonner-toast] {
    background: linear-gradient(180deg, rgba(10, 22, 42, .96), rgba(5, 12, 24, .96)) !important;
    border: 1px solid rgba(126, 165, 255, .22) !important;
    color: #eef3fb !important;
}

/* Fortschritt / Statusbalken */
[role="progressbar"] > div, .bg-primary.h-full {
    background: linear-gradient(90deg, #3f6fe0, var(--iv-accent-2)) !important;
}

/* ==================================================================
   Live-Konsole
   ================================================================== */
.xterm, .xterm .xterm-viewport, .xterm-screen { background-color: #060e1b !important; }
.xterm .xterm-viewport { scrollbar-color: rgba(126, 165, 255, .35) transparent; }

/* Rahmen der Konsole mit wanderndem Lichtrand */
.h-contentvh.bg-card {
    position: relative;
    border-color: transparent !important;
}
.h-contentvh.bg-card::after {
    content: '';
    position: absolute; inset: 0;
    padding: 1px;
    border-radius: inherit;
    background: conic-gradient(from var(--iv-angle), rgba(150, 180, 230, .16) 0deg, rgba(42, 166, 255, .9) 40deg,
        rgba(126, 165, 255, .2) 90deg, rgba(150, 180, 230, .16) 140deg, rgba(150, 180, 230, .16) 360deg);
    -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
    -webkit-mask-composite: xor;
    mask-composite: exclude;
    animation: iv-spin 8s linear infinite;
    pointer-events: none;
    z-index: 5;
}
@keyframes iv-spin { to { --iv-angle: 360deg; } }

/* ---------- ImmortalV Console-Filter (Live-Konsole) ---------- */
.immov-filter {
    padding: 12px 16px;
    border-bottom: 1px solid var(--iv-line);
    background: linear-gradient(180deg, rgba(18, 32, 58, .55), rgba(10, 22, 42, .35));
}
.immov-filter-toggle {
    display: flex; align-items: center; justify-content: space-between;
    width: 100%; gap: 12px;
    padding: 2px 0;
    text-align: left;
    cursor: pointer;
    background: transparent;
    border: none;
    color: inherit;
}
.immov-filter-title { display: flex; align-items: center; flex-wrap: wrap; gap: 8px 10px; min-width: 0; }
.immov-brand {
    font-family: var(--iv-head);
    font-style: italic;
    font-weight: 900;
    font-size: 17px;
    line-height: 1;
    letter-spacing: .5px;
    color: #fff;
    white-space: nowrap;
    text-shadow: 0 2px 12px rgba(0, 0, 0, .4);
}
.immov-brand b {
    font-weight: 900;
    padding-right: 2px;
    background: linear-gradient(180deg, #7fd0ff 0%, var(--iv-accent) 55%, #1678e0 100%);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    text-shadow: none;
    animation: iv-vglow 3.2s ease-in-out infinite;
}
@keyframes iv-vglow {
    0%, 100% { filter: drop-shadow(0 0 4px rgba(42, 166, 255, .45)); }
    50% { filter: drop-shadow(0 0 12px rgba(42, 166, 255, .95)); }
}
.immov-filter-name {
    font-family: var(--iv-head);
    font-style: italic;
    font-weight: 700;
    font-size: 12px;
    letter-spacing: 2px;
    text-transform: uppercase;
    color: #8fa0bb;
    margin-right: 4px;
}
.immov-chip {
    display: inline-flex; align-items: center; gap: 6px;
    height: 22px; padding: 0 9px;
    border-radius: 11px;
    font-size: 12px;
    color: #cfe0ff;
    background: rgba(42, 166, 255, .12);
    border: 1px solid rgba(42, 166, 255, .35);
    white-space: nowrap;
    font-variant-numeric: tabular-nums;
}
.immov-chip-on { color: #ffe7ad; background: rgba(255, 197, 67, .1); border-color: rgba(255, 197, 67, .35); }
.immov-chip-off { color: #bff5e2; background: rgba(54, 224, 168, .1); border-color: rgba(54, 224, 168, .35); }
.immov-chip-off::before {
    content: ''; width: 6px; height: 6px; border-radius: 50%;
    background: currentColor; box-shadow: 0 0 8px currentColor;
    animation: iv-dot 1.6s ease-in-out infinite;
}
@keyframes iv-dot { 0%, 100% { opacity: 1; } 50% { opacity: .35; } }

.immov-filter-caret {
    flex: none;
    width: 28px; height: 28px;
    border-radius: 8px;
    border: 1px solid var(--iv-line-2);
    background: rgba(30, 44, 70, .55);
    position: relative;
    transition: transform .35s var(--iv-spring), border-color .2s, box-shadow .2s;
}
.immov-filter-caret::before {
    content: '';
    position: absolute; left: 50%; top: 50%;
    width: 8px; height: 8px;
    margin: -6px 0 0 -4px;
    border-right: 2px solid #cfe0ff;
    border-bottom: 2px solid #cfe0ff;
    transform: rotate(45deg);
}
.immov-filter-caret.open { transform: rotate(180deg); }
.immov-filter-toggle:hover .immov-filter-caret { border-color: var(--iv-blue-border); box-shadow: 0 0 14px rgba(110, 150, 255, .35); }

.immov-filter-body { animation: iv-rise .45s var(--iv-ease) both; }
@keyframes iv-rise { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
.immov-field > span.font-medium { font-size: 13px; color: #c7d3e6; }
.immov-field > span.text-xs { color: #5d6a80 !important; }

.immov-input {
    display: block;
    box-sizing: border-box;
    width: 100%;
    min-height: 84px;
    padding: 8px 12px;
    resize: vertical;
    border-radius: 6px;
    border: 1px solid rgba(150, 180, 230, .22);
    background: var(--iv-field) !important;
    color: #fff;
    outline: none;
}

/* Schalter im ImmortalV-Stil */
.immov-switch { display: inline-flex; align-items: center; gap: 10px; height: 30px; cursor: pointer; font-size: 13px; color: #c7d3e6; }
.immov-switch input { position: absolute; opacity: 0; width: 0; height: 0; }
.immov-switch i { position: relative; flex: none; width: 40px; height: 22px; border-radius: 11px; background: rgba(120, 140, 170, .3); transition: background .25s, box-shadow .25s; }
.immov-switch i::after {
    content: '';
    position: absolute; top: 3px; left: 3px;
    width: 16px; height: 16px; border-radius: 50%;
    background: #fff;
    transition: transform .3s var(--iv-spring);
}
.immov-switch input:checked + i { background: linear-gradient(90deg, #2f7bf0, var(--iv-accent)); box-shadow: 0 0 10px rgba(42, 166, 255, .45); }
.immov-switch input:checked + i::after { transform: translateX(18px); }
.immov-switch input:focus-visible + i { outline: 2px solid #9cc0ff; outline-offset: 2px; }

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; }
}

/* ---------- Logo oben links: ImmortalV-Schriftzug statt txAdmin-Logo ---------- */
header .w-sidebar a[href="/"] {
    display: inline-flex;
    align-items: baseline;
    line-height: 1;
    text-decoration: none;
    font-family: var(--iv-head);
    font-style: italic;
    font-weight: 900;
    font-size: 27px;
    letter-spacing: .6px;
    white-space: nowrap;
    transition: transform .35s var(--iv-spring), filter .2s;
}
header .w-sidebar a[href="/"] > svg { display: none; }
header .w-sidebar a[href="/"]::before {
    content: 'IMMORTAL';
    color: #fff;
    text-shadow: 0 2px 12px rgba(0, 0, 0, .4);
}
header .w-sidebar a[href="/"]::after {
    content: 'V';
    padding-right: 3px;
    background: linear-gradient(180deg, #7fd0ff 0%, var(--iv-accent) 55%, #1678e0 100%);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    animation: iv-vglow 3.2s ease-in-out infinite;
}
header .w-sidebar a[href="/"]:hover { transform: scale(1.05); filter: brightness(1.12); }

/* Rahmen der alten Seiten (Admins, Allowlist, Resources, Server Log, CFG-Editor …) */
#legacyPageIframe { background: transparent !important; color-scheme: dark; }