/* =====================================================================
   ZED TV Panel — "Nebula" Theme v2  (Black · Pink #ff4d94 → Purple #6c4ad6)
   Full modern reskin overlay on top of Material Dashboard v3.
   Aligned with the ZED app-update page aesthetic. Glass, glow, motion.
   Pure CSS — reskins login (index.php) + all dashboard sub-pages.
   ===================================================================== */

:root {
    --pink:        #ff4d94;
    --pink-bright: #ff2fb0;
    --magenta:     #ff3ea5;
    --purple:      #6c4ad6;
    --violet:      #8a2be2;
    --indigo:      #4b2bd0;

    --bg-0: #08060e;   /* deepest */
    --bg-1: #0d0a14;   /* app bg (app-update) */
    --bg-2: #1d1826;   /* cards (app-update) */
    --bg-3: #241d30;   /* raised */
    --bg-4: #2c2440;

    --border-soft: rgba(255, 77, 148, 0.14);
    --border-med:  rgba(255, 77, 148, 0.30);
    --border-hard: rgba(255, 77, 148, 0.58);

    --txt-hi:  #f7f3ff;
    --txt-md:  #cbbce6;
    --txt-lo:  #9284b0;

    --shadow-glow: 0 0 26px rgba(255,77,148,.28), 0 0 60px rgba(108,74,214,.20);
    --shadow-card: 0 24px 48px rgba(0,0,0,.55), 0 2px 6px rgba(0,0,0,.4);

    --grad-primary: linear-gradient(135deg, #ff4d94 0%, #a24bd6 48%, #6c4ad6 100%);
    --grad-primary-soft: linear-gradient(135deg, rgba(255,77,148,.16), rgba(108,74,214,.16));
    --grad-panel:   linear-gradient(180deg, #1d1826 0%, #140f1d 100%);
    --grad-sidebar: linear-gradient(180deg, #171020 0%, #0a0710 100%);
    --grad-header:  linear-gradient(135deg, #ff4d94, #6c4ad6);
    --grad-flow:    linear-gradient(120deg, #ff4d94, #a24bd6, #6c4ad6, #ff4d94);

    --radius-lg: 20px;
    --radius-md: 14px;
    --radius-sm: 10px;
}

@import url('https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@300;400;500;600;700&family=JetBrains+Mono:wght@400;500;600&display=swap');

/* ---------- Base ---------- */
html, body {
    background: var(--bg-1) !important;
    color: var(--txt-md) !important;
    font-family: 'Space Grotesk', 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif !important;
    -webkit-font-smoothing: antialiased;
    letter-spacing: .01em;
}

/* Animated ambient nebula background */
body.bg-gray-200,
body.g-sidenav-show,
body {
    background:
        radial-gradient(1200px 820px at 12% -8%, rgba(255,77,148,.14), transparent 58%),
        radial-gradient(1100px 780px at 112% 6%, rgba(108,74,214,.20), transparent 55%),
        radial-gradient(1000px 720px at 50% 122%, rgba(138,43,226,.14), transparent 60%),
        var(--bg-1) !important;
    background-attachment: fixed;
    min-height: 100vh;
    animation: ftsolBgDrift 26s ease-in-out infinite alternate;
}
@keyframes ftsolBgDrift {
    0%   { background-position: 0% 0%, 100% 0%, 50% 100%, 0 0; }
    100% { background-position: 8% 4%, 92% 6%, 46% 96%, 0 0; }
}

::selection { background: rgba(255,77,148,.35); color: #fff; }
::-webkit-scrollbar { width: 11px; height: 11px; }
::-webkit-scrollbar-track { background: #0a0712; }
::-webkit-scrollbar-thumb { background: linear-gradient(180deg, #ff4d94, #6c4ad6); border-radius: 20px; border: 2px solid #0a0712; }
::-webkit-scrollbar-thumb:hover { background: linear-gradient(180deg, #ff6aa8, #7d5ce0); }

h1,h2,h3,h4,h5,h6,.h1,.h2,.h3,.h4,.h5,.h6 { color: var(--txt-hi) !important; font-weight: 600; letter-spacing:-.01em; }
p, span, label, small, li, div, td, th { color: inherit; }
.text-body, .text-dark, .text-secondary, .text-muted { color: var(--txt-md) !important; }
.text-white, .text-white * { color: #fff !important; }
.text-sm, .text-xs { color: var(--txt-lo); }
hr { border-color: var(--border-soft) !important; opacity: 1; }
a { color: #ff8ac0; text-decoration: none; transition: color .18s ease; }
a:hover { color: #ffb9dc; }

/* ---------- Sidebar ---------- */
.sidenav, aside.sidenav, .sidenav.bg-gradient-dark {
    background: var(--grad-sidebar) !important;
    border: 1px solid var(--border-soft) !important;
    box-shadow: 0 28px 80px rgba(0,0,0,.6), inset 0 0 0 1px rgba(255,255,255,.02) !important;
    border-radius: var(--radius-lg) !important;
    backdrop-filter: blur(20px);
}
.sidenav .navbar-brand, .sidenav .navbar-brand * { color: #fff !important; }
.sidenav .navbar-brand { border-bottom: 1px solid var(--border-soft) !important; }

.sidenav .nav-link {
    color: var(--txt-md) !important;
    border-radius: 13px !important;
    margin: 4px 10px !important;
    padding: 11px 13px !important;
    font-weight: 500 !important;
    font-size: 13.5px !important;
    transition: background .22s ease, color .22s ease, transform .22s ease, box-shadow .22s ease;
    position: relative; overflow: hidden;
}
.sidenav .nav-link::before {
    content:''; position:absolute; left:0; top:50%; transform: translateY(-50%);
    width:3px; height:0; border-radius:3px; background: var(--grad-header);
    transition: height .25s ease;
}
.sidenav .nav-link:hover { background: rgba(255,77,148,.09) !important; color:#fff !important; transform: translateX(3px); }
.sidenav .nav-link:hover::before { height: 60%; }
.sidenav .nav-link:hover .material-icons, .sidenav .nav-link:hover i { transform: scale(1.15); }
.sidenav .nav-link.active, .sidenav .nav-link.active.bg-gradient-secondary {
    background: var(--grad-primary) !important; color:#fff !important;
    box-shadow: 0 10px 26px rgba(255,77,148,.38), inset 0 0 0 1px rgba(255,255,255,.16);
}
.sidenav .nav-link.active::before { height: 0; }
.sidenav .nav-link.active .material-icons, .sidenav .nav-link.active i { color:#fff !important; }
.sidenav .material-icons, .sidenav i.fa, .sidenav i.fas, .sidenav i.far {
    color: #ff8bd0 !important; font-size: 20px; transition: transform .22s ease;
}
.sidenav .sidenav-header, .sidenav .sidenav-footer { border-color: var(--border-soft) !important; }
.sidenav .navbar-nav > .nav-item > .nav-link > .nav-link-text { color: inherit !important; }

/* ---------- Top navbar ---------- */
.navbar-main, .navbar.navbar-main {
    background: rgba(29,24,38,.62) !important;
    backdrop-filter: blur(16px);
    border: 1px solid var(--border-soft) !important;
    box-shadow: none !important;
    border-radius: var(--radius-md) !important;
}
.navbar .navbar-brand, .navbar .navbar-brand * { color:#fff !important; }
.breadcrumb .breadcrumb-item, .breadcrumb a, .navbar h6 { color: var(--txt-hi) !important; }

/* ---------- Cards (glass + animated gradient edge) ---------- */
.card {
    background: var(--grad-panel) !important;
    border: 1px solid var(--border-soft) !important;
    border-radius: var(--radius-lg) !important;
    box-shadow: var(--shadow-card) !important;
    color: var(--txt-md) !important;
    overflow: hidden; position: relative;
    backdrop-filter: blur(10px);
    transition: transform .3s cubic-bezier(.2,.7,.2,1), box-shadow .3s ease, border-color .3s ease;
}
.card::before {
    content:''; position:absolute; inset:0; pointer-events:none;
    background: radial-gradient(640px 220px at 0% 0%, rgba(255,77,148,.09), transparent 60%),
                radial-gradient(540px 280px at 100% 0%, rgba(108,74,214,.11), transparent 60%);
}
.card::after {
    content:''; position:absolute; inset:0; border-radius:inherit; padding:1px; pointer-events:none;
    background: var(--grad-flow); background-size: 300% 300%;
    -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
    -webkit-mask-composite: xor; mask-composite: exclude;
    opacity:0; transition: opacity .35s ease; animation: ftsolBorderFlow 6s linear infinite;
}
.card:hover { transform: translateY(-4px); box-shadow: 0 32px 66px rgba(0,0,0,.6), var(--shadow-glow) !important; border-color: var(--border-med) !important; }
.card:hover::after { opacity:.9; }
.card > * { position: relative; z-index: 1; }
@keyframes ftsolBorderFlow { 0%{background-position:0% 50%;} 100%{background-position:300% 50%;} }

.card .card-header { background: transparent !important; border-bottom: 1px solid var(--border-soft) !important; color: var(--txt-hi) !important; }
.card-header.bg-gradient-primary, .card-header.bg-gradient-secondary, .card-header.bg-gradient-info, .card-header.bg-gradient-dark, .card-header.bg-gradient-success {
    background: var(--grad-primary) !important; color:#fff !important; box-shadow: var(--shadow-glow) !important;
}
.card-body { color: var(--txt-md) !important; }

/* Material "icon" stat cards */
.card .icon.icon-shape, .icon-shape {
    background: var(--grad-primary) !important;
    box-shadow: 0 8px 22px rgba(255,77,148,.4) !important;
    border-radius: 14px !important;
}

/* ---------- Tables ---------- */
.card table, .card th, .card td { color: var(--txt-md) !important; }
.table { color: var(--txt-md) !important; }
.table thead th {
    color: var(--txt-lo) !important; text-transform: uppercase; font-size: 11px; letter-spacing:.12em;
    border-bottom: 1px solid var(--border-soft) !important; background: transparent !important;
}
.table tbody tr { background: transparent !important; transition: background .16s ease, box-shadow .16s ease; }
.table tbody tr:hover { background: rgba(255,77,148,.06) !important; box-shadow: inset 3px 0 0 var(--pink); }
.table td, .table th { border-color: var(--border-soft) !important; }

/* ---------- Buttons (sheen sweep) ---------- */
.btn {
    border-radius: 999px !important; font-weight: 600 !important; letter-spacing:.03em !important;
    text-transform: none !important; padding: 10px 22px !important; border: 1px solid transparent !important;
    position: relative; overflow: hidden;
    transition: transform .2s ease, box-shadow .25s ease, filter .2s ease !important;
}
.btn::after {
    content:''; position:absolute; top:0; left:-120%; width:60%; height:100%;
    background: linear-gradient(120deg, transparent, rgba(255,255,255,.35), transparent);
    transform: skewX(-20deg); transition: left .55s ease;
}
.btn:hover { transform: translateY(-2px); filter: brightness(1.08); }
.btn:hover::after { left: 140%; }
.btn:active { transform: translateY(0); }
.btn.bg-gradient-primary, .btn.bg-gradient-secondary, .btn.bg-gradient-info, .btn.bg-gradient-dark, .btn.bg-gradient-success {
    background: var(--grad-primary) !important; color:#fff !important;
    box-shadow: 0 12px 28px rgba(255,77,148,.30), inset 0 0 0 1px rgba(255,255,255,.14) !important;
}
.btn.bg-gradient-danger { background: linear-gradient(135deg,#ff2f6e,#c81e6a) !important; color:#fff !important; }
.btn.bg-gradient-warning { background: linear-gradient(135deg,#ffb02f,#ff5cad) !important; color:#141018 !important; }
.btn-outline-primary, .btn-outline-secondary { background: transparent !important; color: #ffb3dc !important; border: 1px solid var(--border-med) !important; }
.btn-outline-primary:hover, .btn-outline-secondary:hover { background: rgba(255,77,148,.10) !important; color:#fff !important; border-color: var(--border-hard) !important; }

/* ---------- Forms ---------- */
.form-control, input[type="text"], input[type="password"], input[type="email"], input[type="url"],
input[type="number"], input[type="search"], input[type="date"], textarea, select, .form-select {
    background: rgba(13,10,20,.7) !important; color: var(--txt-hi) !important;
    border: 1px solid var(--border-soft) !important; border-radius: var(--radius-sm) !important;
    box-shadow: none !important; padding: 10px 13px !important;
    transition: border-color .18s ease, box-shadow .18s ease, background .18s ease;
}
.form-control:focus, textarea:focus, select:focus, .form-select:focus {
    border-color: var(--pink) !important; box-shadow: 0 0 0 3px rgba(255,77,148,.22), var(--shadow-glow) !important;
    background: rgba(29,24,38,.85) !important; color:#fff !important; outline:none;
}
.form-control::placeholder { color: var(--txt-lo) !important; }
input:-webkit-autofill { -webkit-text-fill-color:#fff !important; -webkit-box-shadow: 0 0 0 30px #1d1826 inset !important; }
label, .form-label, .form-check-label { color: var(--txt-md) !important; font-weight:500; font-size:13px; letter-spacing:.02em; }
.input-group.input-group-outline .form-label, .input-group.input-group-static .form-label { color: var(--txt-lo) !important; }
.input-group.input-group-outline .form-control { border:1px solid var(--border-soft) !important; background: rgba(13,10,20,.7) !important; color:#fff !important; border-radius: var(--radius-sm) !important; }
.input-group.input-group-outline.is-focused .form-control, .input-group.input-group-outline .form-control:focus { border-color: var(--pink) !important; box-shadow: 0 0 0 3px rgba(255,77,148,.22) !important; }
.input-group.input-group-outline .form-label { background: transparent !important; color: var(--txt-lo) !important; }

.form-check-input { background-color: rgba(13,10,20,.85) !important; border-color: var(--border-med) !important; }
.form-check-input:checked { background-color: var(--pink) !important; border-color: var(--pink) !important; box-shadow: 0 0 0 3px rgba(255,77,148,.2); }
.form-switch .form-check-input:checked { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3E%3Ccircle r='3' fill='%23fff'/%3E%3C/svg%3E") !important; }

/* ---------- Alerts / badges ---------- */
.alert { border-radius: var(--radius-md) !important; border:1px solid var(--border-soft) !important; background: rgba(255,77,148,.08) !important; color: var(--txt-hi) !important; }
.alert-success { background: rgba(52,211,153,.10) !important; border-color: rgba(52,211,153,.3) !important; }
.alert-danger  { background: rgba(255,80,120,.10) !important; border-color: rgba(255,80,120,.3) !important; }
.badge, .badge.bg-secondary, .badge.bg-primary { background: var(--grad-primary) !important; color:#fff !important; border-radius:999px !important; padding:5px 11px !important; font-weight:600 !important; }
.badge.bg-success { background: linear-gradient(135deg,#22c58a,#12a06a) !important; }
.badge.bg-danger  { background: linear-gradient(135deg,#ff2f6e,#c81e6a) !important; }

/* ---------- Login page ---------- */
.page-header {
    background: var(--bg-1) !important;
    background-image:
        radial-gradient(1000px 800px at 20% 10%, rgba(255,77,148,.26), transparent 55%),
        radial-gradient(1000px 700px at 80% 90%, rgba(108,74,214,.30), transparent 55%),
        radial-gradient(800px 520px at 50% 50%, rgba(138,43,226,.16), transparent 60%),
        var(--bg-0) !important;
    min-height: 100vh;
    animation: ftsolBgDrift 22s ease-in-out infinite alternate;
}
.page-header::before {
    content:''; position:absolute; inset:0; pointer-events:none; opacity:.5;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='6' height='6'%3E%3Ccircle cx='1' cy='1' r='.6' fill='%23ffffff' opacity='.05'/%3E%3C/svg%3E");
}
.page-header .mask { display:none !important; }
.page-header .card { background: rgba(29,24,38,.8) !important; border:1px solid var(--border-med) !important; backdrop-filter: blur(20px); box-shadow: 0 34px 100px rgba(0,0,0,.62), 0 0 0 1px rgba(255,77,148,.16) !important; animation: ftsolFloat 6s ease-in-out infinite, ftsolFadeUp .7s cubic-bezier(.2,.7,.2,1) both; }
.page-header .card-header { background: var(--grad-primary) !important; box-shadow: 0 14px 44px rgba(255,77,148,.4), 0 0 0 1px rgba(255,255,255,.08) inset !important; animation: ftsolPulseGlow 3.6s ease-in-out infinite; }
@keyframes ftsolFloat { 0%,100%{ transform: translateY(0); } 50%{ transform: translateY(-8px); } }
@keyframes ftsolPulseGlow { 0%,100%{ box-shadow: 0 14px 44px rgba(255,77,148,.38), 0 0 0 1px rgba(255,255,255,.08) inset; } 50%{ box-shadow: 0 14px 66px rgba(108,74,214,.6), 0 0 0 1px rgba(255,255,255,.12) inset; } }
.copyright, .footer, .footer * { color: var(--txt-lo) !important; }

/* ---------- Utility overrides ---------- */
.bg-white, .bg-light, .bg-gray-100, .bg-gray-200, .bg-gray-300 { background: var(--bg-2) !important; color: var(--txt-md) !important; }
.text-dark { color: var(--txt-hi) !important; }
.shadow, .shadow-sm, .shadow-lg { box-shadow: var(--shadow-card) !important; }
.border { border-color: var(--border-soft) !important; }
.dropdown-menu { background: var(--bg-3) !important; border:1px solid var(--border-soft) !important; color: var(--txt-md) !important; border-radius: var(--radius-md) !important; box-shadow: var(--shadow-card) !important; }
.dropdown-item { color: var(--txt-md) !important; transition: background .15s ease; }
.dropdown-item:hover { background: rgba(255,77,148,.12) !important; color:#fff !important; }
.modal-content { background: var(--grad-panel) !important; border:1px solid var(--border-soft) !important; color: var(--txt-md) !important; border-radius: var(--radius-lg) !important; }
.modal-header, .modal-footer { border-color: var(--border-soft) !important; }
pre, code, kbd { background: rgba(0,0,0,.4) !important; color:#ff9ed3 !important; border-radius:8px; padding:2px 6px; font-family:'JetBrains Mono', ui-monospace, monospace !important; }
.material-icons.opacity-10 { opacity:1 !important; }

/* ---------- Entrance animations (staggered) ---------- */
@keyframes ftsolFadeUp { from{ opacity:0; transform: translateY(16px);} to{ opacity:1; transform: translateY(0);} }
.main-content .card { animation: ftsolFadeUp .55s cubic-bezier(.2,.7,.2,1) both; }
.main-content .card:nth-child(1){ animation-delay:.04s; }
.main-content .card:nth-child(2){ animation-delay:.10s; }
.main-content .card:nth-child(3){ animation-delay:.16s; }
.main-content .card:nth-child(4){ animation-delay:.22s; }
.main-content .card:nth-child(5){ animation-delay:.28s; }
.main-content .card:nth-child(6){ animation-delay:.34s; }
.navbar-main { animation: ftsolFadeUp .5s cubic-bezier(.2,.7,.2,1) both; }
.table tbody tr { animation: ftsolFadeUp .4s ease both; }
.table tbody tr:nth-child(odd){ animation-delay:.03s; }
.table tbody tr:nth-child(even){ animation-delay:.06s; }

/* ---------- Login brand helpers ---------- */
.ftsol-login-brand { display:flex; align-items:center; justify-content:center; gap:12px; padding:24px 12px; }
.ftsol-login-brand .ftsol-mark {
    width:48px; height:48px; border-radius:14px; background: rgba(255,255,255,.14);
    display:flex; align-items:center; justify-content:center; font-weight:700; font-size:24px; color:#fff;
    box-shadow: 0 0 0 1px rgba(255,255,255,.2) inset, 0 8px 20px rgba(0,0,0,.35);
    animation: ftsolPulseGlow 3s ease-in-out infinite;
}
.ftsol-login-brand .ftsol-title { font-size:22px; font-weight:700; color:#fff; letter-spacing:.02em; }
.ftsol-login-brand .ftsol-title small { font-weight:400; opacity:.75; font-size:12px; display:block; }
.ftsol-divider { height:1px; background: linear-gradient(90deg, transparent, rgba(255,77,148,.5), transparent); margin:20px 0; }

/* ---------- Status pills ---------- */
.ftsol-pill { display:inline-flex; align-items:center; gap:6px; padding:4px 10px; border-radius:999px; font-size:11px; font-weight:600; letter-spacing:.06em; background: rgba(255,77,148,.12); color:#ffb3dc; border:1px solid var(--border-soft); }
.ftsol-pill.ok   { background: rgba(52,211,153,.10); color:#86efac; border-color: rgba(52,211,153,.25); }
.ftsol-pill.warn { background: rgba(250,204,21,.10); color:#fde68a; border-color: rgba(250,204,21,.25); }
.ftsol-pill.err  { background: rgba(255,80,120,.10); color:#ff9db0; border-color: rgba(255,80,120,.25); }

/* ---------- Accessibility: reduce motion ---------- */
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { animation: none !important; transition: none !important; }
}