/* =====================================================================
   ZED TV Panel — "VOLT" Theme  (electric blue → indigo · glass modéré)
   Refonte sur Material Dashboard v3. Bleu #3b82f6 → indigo #4f46e5,
   accent cyan léger. Fond dégradé sombre subtil (pas d'orbes).
   Boutons: contour fin + remplissage qui glisse au survol.
   ===================================================================== */

:root{
    --blue:#3b82f6; --blue-2:#60a5fa; --indigo:#4f46e5; --indigo-2:#6366f1; --cyan:#22d3ee;
    --ink-0:#070a14; --ink-1:#0a0f1e; --ink-2:#0e1424;
    --glass:rgba(255,255,255,.05); --glass-2:rgba(255,255,255,.08);
    --line:rgba(148,178,255,.12); --line-2:rgba(96,165,250,.30);
    --txt-hi:#eef4ff; --txt-md:#b3c0dc; --txt-lo:#7688aa;
    --accent:linear-gradient(135deg,#3b82f6 0%,#4f46e5 100%);
    --accent-soft:linear-gradient(135deg,rgba(59,130,246,.16),rgba(79,70,229,.16));
    --accent-anim:linear-gradient(120deg,#3b82f6,#6366f1,#22d3ee,#3b82f6);
    --glow:0 10px 30px rgba(59,130,246,.30);
    --sh:0 22px 54px rgba(0,0,0,.5);
    --r-xl:22px; --r-lg:18px; --r-md:13px; --r-sm:10px;
}

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

/* ---------- Base + subtle dark gradient ---------- */
html,body{ color:var(--txt-md) !important;
    font-family:'Space Grotesk','Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif !important; -webkit-font-smoothing:antialiased; }
body,body.bg-gray-200,body.g-sidenav-show{
    background:
        radial-gradient(1100px 700px at 80% -10%, rgba(59,130,246,.10), transparent 55%),
        radial-gradient(900px 600px at 5% 110%, rgba(79,70,229,.10), transparent 55%),
        linear-gradient(165deg, #0b1120 0%, #080b16 55%, #0a0712 100%) !important;
    background-attachment:fixed !important; min-height:100vh;
}
::selection{ background:rgba(59,130,246,.35); color:#fff; }
::-webkit-scrollbar{ width:10px; height:10px; } ::-webkit-scrollbar-track{ background:transparent; }
::-webkit-scrollbar-thumb{ background:linear-gradient(180deg,#3b82f6,#4f46e5); border-radius:20px; }

h1,h2,h3,h4,h5,h6{ color:var(--txt-hi) !important; font-weight:600; letter-spacing:-.02em; }
.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(--line) !important; opacity:1; }
a{ color:var(--blue-2); text-decoration:none; transition:color .18s; } a:hover{ color:#a9cbff; }

.main-content > .container-fluid h4:first-of-type{ position:relative; display:inline-block; }
.main-content > .container-fluid h4:first-of-type::after{ content:''; position:absolute; left:0; bottom:-8px; height:3px; width:0; border-radius:3px; background:var(--accent); animation:growLine .8s .2s cubic-bezier(.2,.7,.2,1) forwards; }
@keyframes growLine{ to{ width:56px; } }

/* ---------- Sidebar (glass modéré) ---------- */
.sidenav,aside.sidenav,.sidenav.bg-gradient-dark{
    background:rgba(12,17,32,.72) !important; backdrop-filter:blur(22px) saturate(130%);
    border:1px solid var(--line) !important; border-radius:var(--r-xl) !important; box-shadow:0 30px 80px rgba(0,0,0,.55) !important; }
.sidenav .navbar-brand{ border-bottom:1px solid var(--line) !important; }
.sidenav .navbar-brand,.sidenav .navbar-brand *{ color:#fff !important; }
.sidenav hr.horizontal{ background-image:linear-gradient(90deg,transparent,var(--line-2),transparent) !important; }
.sidenav .nav-link{ color:var(--txt-md) !important; border-radius:12px !important; margin:3px 12px !important; padding:11px 13px !important; font-weight:500 !important; font-size:13.5px !important; position:relative; overflow:hidden; transition:background .2s,color .2s,transform .2s; }
.sidenav .nav-link::before{ content:''; position:absolute; left:6px; top:50%; transform:translateY(-50%); width:0; height:0; border-radius:50%; background:var(--blue); box-shadow:0 0 12px var(--blue); transition:.25s; }
.sidenav .nav-link:hover{ background:var(--glass) !important; color:#fff !important; transform:translateX(4px); }
.sidenav .nav-link:hover::before{ width:6px; height:6px; }
.sidenav .nav-link:hover .material-icons,.sidenav .nav-link:hover i{ transform:scale(1.18); }
.sidenav .nav-link.active,.sidenav .nav-link.active.bg-gradient-secondary{
    background:var(--accent-soft) !important; color:#fff !important; border:1px solid var(--line-2) !important;
    box-shadow:inset 0 0 0 1px rgba(255,255,255,.04), 0 8px 24px rgba(59,130,246,.16); }
.sidenav .nav-link.active::before{ width:6px; height:26px; border-radius:3px; }
.sidenav .nav-link .icon{ background:transparent !important; box-shadow:none !important; }
.sidenav .material-icons,.sidenav i.fa,.sidenav i.fas,.sidenav i.far{ color:var(--blue-2) !important; font-size:20px; transition:transform .22s; }
.sidenav .nav-link.active .material-icons,.sidenav .nav-link.active i{ color:#fff !important; }

/* ---------- Top navbar ---------- */
.navbar-main,.navbar.navbar-main{ background:rgba(12,17,32,.55) !important; backdrop-filter:blur(18px); border:1px solid var(--line) !important; box-shadow:none !important; border-radius:var(--r-md) !important; }
.breadcrumb .breadcrumb-item,.breadcrumb a,.navbar h6,.navbar-main .text-dark{ color:var(--txt-hi) !important; }

/* ---------- Cards (glass modéré) ---------- */
.card{ background:var(--glass) !important; backdrop-filter:blur(16px) saturate(120%); border:1px solid var(--line) !important; border-radius:var(--r-lg) !important; box-shadow:var(--sh) !important; color:var(--txt-md) !important; position:relative; overflow:hidden; transition:transform .3s cubic-bezier(.2,.7,.2,1), box-shadow .3s, border-color .3s; }
.card::before{ content:''; position:absolute; top:0; left:0; right:0; height:2px; background:var(--accent); opacity:.7; }
.card:hover{ transform:translateY(-4px); border-color:var(--line-2) !important; box-shadow:0 30px 66px rgba(0,0,0,.58), 0 12px 40px rgba(59,130,246,.20) !important; }
.card .card-header{ background:transparent !important; border-bottom:1px solid var(--line) !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(--accent) !important; color:#fff !important; box-shadow:var(--glow) !important; }
.card-body{ color:var(--txt-md) !important; }
.icon.icon-shape,.icon-shape{ background:var(--accent) !important; box-shadow:0 8px 22px rgba(59,130,246,.35) !important; border-radius:14px !important; }

/* ---------- Tables ---------- */
.table{ color:var(--txt-md) !important; }
.table thead th{ color:var(--txt-lo) !important; text-transform:uppercase; font-size:10.5px; letter-spacing:.14em; border-bottom:1px solid var(--line) !important; background:transparent !important; }
.table tbody tr{ transition:background .16s, box-shadow .16s; }
.table tbody tr:hover{ background:var(--glass) !important; box-shadow:inset 3px 0 0 var(--blue); }
.table td,.table th{ border-color:var(--line) !important; color:var(--txt-md) !important; }

/* ================= BUTTONS — ghost → fill qui glisse (background-size) ================= */
.btn,
.btn.bg-gradient-primary,.btn.bg-gradient-secondary,.btn.bg-gradient-info,.btn.bg-gradient-dark,.btn.bg-gradient-success,
.btn.btn-outline-primary,.btn.btn-outline-secondary{
    border-radius:12px !important; font-weight:600 !important; letter-spacing:.02em !important; text-transform:none !important;
    padding:12px 22px !important; position:relative; overflow:hidden;
    border:1px solid var(--line-2) !important; color:var(--blue-2) !important; box-shadow:none !important;
    background-image:linear-gradient(90deg,#3b82f6,#4f46e5) !important; background-repeat:no-repeat !important;
    background-position:left center !important; background-size:0% 100% !important; background-color:transparent !important;
    transition:background-size .4s cubic-bezier(.2,.7,.2,1), color .3s ease, border-color .3s ease, box-shadow .3s ease, transform .18s ease !important;
}
.btn:hover,
.btn.bg-gradient-primary:hover,.btn.bg-gradient-secondary:hover,.btn.bg-gradient-info:hover,.btn.bg-gradient-dark:hover,.btn.bg-gradient-success:hover,
.btn.btn-outline-primary:hover,.btn.btn-outline-secondary:hover{
    background-size:100% 100% !important; color:#fff !important; border-color:transparent !important;
    box-shadow:0 12px 30px rgba(59,130,246,.35) !important; transform:translateY(-2px);
}
.btn:active{ transform:translateY(0) scale(.99); }
.btn.bg-gradient-danger{ color:#ff9db0 !important; border-color:rgba(255,80,120,.4) !important; background-image:linear-gradient(90deg,#ff3b63,#c81e6a) !important; }
.btn.bg-gradient-danger:hover{ color:#fff !important; }
.btn.bg-gradient-warning{ color:#ffd27a !important; border-color:rgba(255,176,47,.4) !important; background-image:linear-gradient(90deg,#ffb02f,#ff7a59) !important; }
.btn.bg-gradient-warning:hover{ color:#141018 !important; }
.btn-sm{ padding:8px 15px !important; border-radius:9px !important; font-size:12px !important; }
.btn-lg{ padding:14px 26px !important; border-radius:13px !important; font-size:15px !important; }

/* ================= FORMS — labels au-dessus, propre ================= */
.input-group.input-group-outline,.input-group.input-group-static{ display:flex !important; flex-direction:column !important; align-items:stretch !important; border:0 !important; background:transparent !important; }
.input-group.input-group-outline .form-label,.input-group.input-group-static .form-label{ position:static !important; transform:none !important; transition:color .18s !important; margin:0 0 7px 2px !important; padding:0 !important; font-size:11px !important; font-weight:600 !important; letter-spacing:.1em !important; text-transform:uppercase; line-height:1.35 !important; white-space:normal !important; max-width:100% !important; color:var(--txt-lo) !important; opacity:1 !important; border:0 !important; }
.input-group.input-group-outline .form-label::before,.input-group.input-group-outline .form-label::after,.input-group.input-group-static .form-label::before,.input-group.input-group-static .form-label::after{ display:none !important; content:none !important; border:0 !important; }
.form-control,.form-select,textarea,select,
input[type="text"],input[type="password"],input[type="email"],input[type="url"],input[type="number"],input[type="search"],input[type="date"]{
    width:100% !important; background:rgba(255,255,255,.05) !important; color:var(--txt-hi) !important; border:1px solid var(--line) !important; border-radius:var(--r-sm) !important; box-shadow:none !important; padding:12px 14px !important; font-size:14px !important; backdrop-filter:blur(6px); transition:border-color .18s, box-shadow .18s, background .18s; }
.input-group.input-group-outline .form-control{ border:1px solid var(--line) !important; border-radius:var(--r-sm) !important; background:rgba(255,255,255,.05) !important; }
.form-control:focus,.form-select:focus,textarea:focus,select:focus,.input-group.input-group-outline.is-focused .form-control,.input-group.input-group-outline .form-control:focus{ border-color:var(--blue) !important; box-shadow:0 0 0 3px rgba(59,130,246,.20), 0 8px 24px rgba(59,130,246,.14) !important; background:rgba(255,255,255,.07) !important; color:#fff !important; outline:none; }
.input-group.input-group-outline.is-focused .form-label{ color:var(--blue-2) !important; }
.form-control::placeholder{ color:var(--txt-lo) !important; }
input:-webkit-autofill{ -webkit-text-fill-color:#fff !important; -webkit-box-shadow:0 0 0 40px #0e1424 inset !important; }
label,.form-label,.form-check-label{ color:var(--txt-md) !important; }

/* File input */
input[type="file"]{ padding:10px 12px !important; background:rgba(255,255,255,.05) !important; border:1.5px dashed var(--line-2) !important; border-radius:var(--r-md) !important; color:var(--txt-md) !important; cursor:pointer; transition:border-color .2s, background .2s; }
input[type="file"]:hover{ border-color:var(--blue) !important; background:rgba(59,130,246,.06) !important; }
input[type="file"]::file-selector-button,input[type="file"]::-webkit-file-upload-button{ margin-right:14px; padding:9px 18px; border:0; border-radius:999px; cursor:pointer; background:var(--accent); color:#fff; font-weight:600; font-size:13px; box-shadow:0 6px 18px rgba(59,130,246,.3); transition:transform .18s, filter .2s; }
input[type="file"]::file-selector-button:hover,input[type="file"]::-webkit-file-upload-button:hover{ transform:translateY(-1px); filter:brightness(1.08); }

.form-check-input{ background-color:rgba(255,255,255,.06) !important; border-color:var(--line-2) !important; }
.form-check-input:checked{ background-color:var(--blue) !important; border-color:var(--blue) !important; box-shadow:0 0 0 3px rgba(59,130,246,.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(--r-md) !important; border:1px solid var(--line) !important; background:var(--glass) !important; color:var(--txt-hi) !important; backdrop-filter:blur(10px); }
.alert-success{ background:rgba(34,197,138,.08) !important; border-color:rgba(34,197,138,.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(--accent) !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,#ff3b63,#c81e6a) !important; }

/* ---------- Login ---------- */
.page-header{ background:linear-gradient(165deg,#0b1120 0%,#080b16 60%,#0a0712 100%) !important; background-image:radial-gradient(1000px 800px at 22% 8%, rgba(59,130,246,.22), transparent 55%),radial-gradient(1000px 720px at 82% 92%, rgba(79,70,229,.26), transparent 55%),linear-gradient(165deg,#0b1120,#080b16) !important; min-height:100vh; }
.page-header .mask{ display:none !important; }
.page-header .card{ background:rgba(14,20,36,.62) !important; border:1px solid var(--line-2) !important; backdrop-filter:blur(24px) saturate(130%); box-shadow:0 40px 110px rgba(0,0,0,.6) !important; animation:floatCard 6s ease-in-out infinite, fadeUp .7s cubic-bezier(.2,.7,.2,1) both; }
.page-header .card-header{ background:var(--accent) !important; box-shadow:0 16px 46px rgba(59,130,246,.4) !important; animation:pulseGlow 3.6s ease-in-out infinite; }
@keyframes floatCard{ 0%,100%{transform:translateY(0);} 50%{transform:translateY(-9px);} }
@keyframes pulseGlow{ 0%,100%{box-shadow:0 16px 46px rgba(59,130,246,.34);} 50%{box-shadow:0 16px 66px rgba(79,70,229,.6);} }
.copyright,.footer,.footer *{ color:var(--txt-lo) !important; }

/* ---------- Utility ---------- */
.bg-white,.bg-light,.bg-gray-100,.bg-gray-200,.bg-gray-300{ background:var(--glass) !important; color:var(--txt-md) !important; }
.text-dark{ color:var(--txt-hi) !important; }
.shadow,.shadow-sm,.shadow-lg{ box-shadow:var(--sh) !important; }
.border{ border-color:var(--line) !important; }
.dropdown-menu{ background:rgba(14,20,36,.92) !important; backdrop-filter:blur(18px); border:1px solid var(--line) !important; border-radius:var(--r-md) !important; box-shadow:var(--sh) !important; }
.dropdown-item{ color:var(--txt-md) !important; transition:background .15s; } .dropdown-item:hover{ background:var(--accent-soft) !important; color:#fff !important; }
.modal-content{ background:rgba(14,20,36,.9) !important; backdrop-filter:blur(22px); border:1px solid var(--line) !important; border-radius:var(--r-lg) !important; color:var(--txt-md) !important; }
.modal-header,.modal-footer{ border-color:var(--line) !important; }
pre,code,kbd{ background:rgba(0,0,0,.4) !important; color:#8ec2ff !important; border-radius:8px; padding:2px 6px; font-family:'JetBrains Mono',ui-monospace,monospace !important; }
.material-icons.opacity-10{ opacity:1 !important; }

/* ---------- Entrance animations ---------- */
@keyframes fadeUp{ from{opacity:0; transform:translateY(18px) scale(.985);} to{opacity:1; transform:translateY(0) scale(1);} }
.main-content .card{ animation:fadeUp .55s cubic-bezier(.2,.7,.2,1) both; }
.main-content .card:nth-of-type(1){animation-delay:.05s;} .main-content .card:nth-of-type(2){animation-delay:.12s;}
.main-content .card:nth-of-type(3){animation-delay:.19s;} .main-content .card:nth-of-type(4){animation-delay:.26s;}
.main-content .card:nth-of-type(5){animation-delay:.33s;} .main-content .card:nth-of-type(6){animation-delay:.40s;}
.navbar-main{ animation:fadeUp .45s cubic-bezier(.2,.7,.2,1) both; }

/* ---------- 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:15px; background:var(--accent); display:flex; align-items:center; justify-content:center; font-weight:700; font-size:24px; color:#fff; box-shadow:0 10px 26px rgba(59,130,246,.4); animation:pulseGlow 3s ease-in-out infinite; }
.ftsol-login-brand .ftsol-title{ font-size:22px; font-weight:700; color:#fff; }
.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,var(--line-2),transparent); margin:20px 0; }
.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:var(--accent-soft); color:#9cc4ff; border:1px solid var(--line); }

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