/* ============================================================
   G.Take-style polish on top of the template's built-in dark skin
   (activated via data-theme-version="dark" in public/js/gleek.js).
   Scope: visual only, no markup/structure/behaviour changes.
   ============================================================ */

:root {
    --gt-bg-base: #080015;
    --gt-surface: rgba(30, 15, 60, 0.7);
    --gt-surface-soft: rgba(255, 255, 255, 0.05);
    --gt-glass: rgba(18, 8, 48, 0.42);
    --gt-glass-soft: rgba(255, 255, 255, 0.06);
    --gt-border: rgba(255, 255, 255, 0.15);
    --gt-text: #e7e9f7;
    --gt-text-muted: #abafb3;
    --gt-gradient: linear-gradient(135deg, #5b6cf9 0%, #8a5cf9 100%);
    --gt-radius-lg: 1.25rem;
    --gt-shadow: 0 10px 30px rgba(5, 8, 25, 0.5);
    --gt-blur: blur(22px);
}

/* Body background — vivid flowing purple waves like the reference,
   positioned partially off-screen to create organic blob shapes. */
[data-theme-version="dark"] {
    background:
        radial-gradient(ellipse 70% 85% at 118% -8%,  rgba(155, 55, 255, 0.88), transparent 58%),
        radial-gradient(ellipse 85% 70% at -18% 112%, rgba(110, 40, 235, 0.82), transparent 58%),
        radial-gradient(ellipse 45% 40% at 75% 80%,   rgba(90,  35, 210, 0.35), transparent 65%),
        radial-gradient(ellipse 30% 30% at 20% 25%,   rgba(120, 50, 240, 0.20), transparent 70%),
        var(--gt-bg-base) !important;
}

/* ── Starfield layer 1 — larger, slower twinkling dots ─────────────── */
[data-theme-version="dark"]::before {
    content: "";
    position: fixed;
    inset: 0;
    z-index: -1;
    pointer-events: none;
    background-image:
        radial-gradient(1.8px 1.8px at  8%  12%, rgba(255,255,255,.95), transparent),
        radial-gradient(2.2px 2.2px at 78%   8%, rgba(255,255,255,.90), transparent),
        radial-gradient(1.4px 1.4px at 38%  22%, rgba(255,255,255,.85), transparent),
        radial-gradient(2.5px 2.5px at 62%  38%, rgba(255,255,255,.92), transparent),
        radial-gradient(1.2px 1.2px at 23%  58%, rgba(255,255,255,.80), transparent),
        radial-gradient(1.8px 1.8px at 88%  68%, rgba(255,255,255,.95), transparent),
        radial-gradient(1.5px 1.5px at 14%  83%, rgba(255,255,255,.85), transparent),
        radial-gradient(2.0px 2.0px at 53%  92%, rgba(255,255,255,.90), transparent),
        radial-gradient(1.3px 1.3px at 73%  96%, rgba(255,255,255,.80), transparent),
        radial-gradient(2.0px 2.0px at 33%  43%, rgba(255,255,255,.92), transparent),
        radial-gradient(1.2px 1.2px at 48%   4%, rgba(255,255,255,.75), transparent),
        radial-gradient(1.6px 1.6px at  4%  47%, rgba(255,255,255,.85), transparent),
        radial-gradient(1.3px 1.3px at 94%  28%, rgba(255,255,255,.78), transparent),
        radial-gradient(2.2px 2.2px at 18%  73%, rgba(255,255,255,.90), transparent),
        radial-gradient(1.4px 1.4px at 68%  53%, rgba(255,255,255,.82), transparent),
        radial-gradient(1.8px 1.8px at 57%  17%, rgba(255,255,255,.88), transparent),
        radial-gradient(1.2px 1.2px at  2%  88%, rgba(255,255,255,.70), transparent),
        radial-gradient(2.0px 2.0px at 84%  44%, rgba(255,255,255,.85), transparent);
    background-repeat: repeat;
    background-size: 420px 420px;
    opacity: .82;
    animation: gt-twinkle 7s ease-in-out infinite alternate;
}

/* ── Starfield layer 2 — smaller, faster counter-twinkling dots ────── */
[data-theme-version="dark"]::after {
    content: "";
    position: fixed;
    inset: 0;
    z-index: -1;
    pointer-events: none;
    background-image:
        radial-gradient(1.2px 1.2px at 19%  28%, rgba(255,255,255,.72), transparent),
        radial-gradient(1.0px 1.0px at 69%  18%, rgba(255,255,255,.68), transparent),
        radial-gradient(1.2px 1.2px at 49%  68%, rgba(255,255,255,.74), transparent),
        radial-gradient(1.5px 1.5px at 83%  53%, rgba(255,255,255,.78), transparent),
        radial-gradient(1.0px 1.0px at  9%  74%, rgba(255,255,255,.65), transparent),
        radial-gradient(1.2px 1.2px at 93%  88%, rgba(255,255,255,.72), transparent),
        radial-gradient(1.5px 1.5px at 29%   8%, rgba(255,255,255,.78), transparent),
        radial-gradient(1.0px 1.0px at 59%  84%, rgba(255,255,255,.65), transparent),
        radial-gradient(1.2px 1.2px at 44%  37%, rgba(255,255,255,.70), transparent),
        radial-gradient(1.0px 1.0px at 76%  62%, rgba(255,255,255,.68), transparent);
    background-repeat: repeat;
    background-size: 260px 260px;
    opacity: .60;
    animation: gt-twinkle 4.5s ease-in-out infinite alternate-reverse;
}

@keyframes gt-twinkle {
    from { opacity: .38; }
    to   { opacity: .95; }
}

/* ── Sidebar ──────────────────────────────────────────────────────── */
.nk-sidebar {
    border-radius: var(--gt-radius-lg);
    margin: 0;
    box-shadow: var(--gt-shadow);
    border: 1px solid var(--gt-border);
}

/* Desktop: pin nav-header + header + sidebar so only .content-body scrolls. */
@media only screen and (min-width: 768px) {
    .nav-header {
        position: fixed !important;
        top: 0 !important;
        left: 0 !important;
        z-index: 1000 !important;
    }

    .header {
        position: fixed !important;
        top: 0 !important;
        left: 15.1875rem !important;
        right: 0 !important;
        width: auto !important;
        margin-left: 0 !important;
        z-index: 100 !important;
    }

    .nk-sidebar {
        position: fixed !important;
        top: 5rem !important;
        left: 0 !important;
        height: calc(100vh - 5rem) !important;
    }

    .content-body {
        padding-top: 5rem;
    }

    .menu-toggle .header {
        left: 3.75rem !important;
    }
}

@media only screen and (min-width: 1200px) and (max-width: 1350px) {
    .header {
        left: 14.375rem !important;
    }
}

@media only screen and (max-width: 767px) {
    .nk-sidebar {
        border-radius: 0;
    }
}

.content-body .container-fluid {
    padding: 0 1rem;
}

.nk-sidebar .metismenu a {
    margin: 0.15rem 0.75rem;
    border-radius: 0.65rem;
}

[data-theme-version="dark"] .nk-sidebar .metismenu>li.active>a {
    background: var(--gt-gradient) !important;
    box-shadow: 0 6px 16px rgba(91, 108, 249, 0.35);
}

/* ── Header / nav-header glass ───────────────────────────────────── */
.nav-header {
    box-shadow: none;
}

[data-nav-headerbg="color_2"] .nav-header,
[data-headerbg="color_2"] .header {
    background: var(--gt-glass-soft) !important;
    backdrop-filter: var(--gt-blur);
    -webkit-backdrop-filter: var(--gt-blur);
}

[data-headerbg="color_2"] .header {
    border-bottom: 1px solid var(--gt-border);
}

[data-headerbg="color_2"] .header,
[data-headerbg="color_2"] .header .icons>a,
[data-headerbg="color_2"] .header .icons i,
[data-headerbg="color_2"] .header .header-right > ul > li > span {
    color: var(--gt-text) !important;
}

[data-theme-version="dark"] .nk-sidebar {
    background: var(--gt-glass-soft) !important;
    backdrop-filter: var(--gt-blur);
    -webkit-backdrop-filter: var(--gt-blur);
}

[data-theme-version="dark"] .nk-sidebar ul,
[data-theme-version="dark"] .nk-sidebar .metismenu {
    background-color: transparent !important;
}

[data-theme-version="dark"] .nk-sidebar .metismenu>li:hover>a,
[data-theme-version="dark"] .nk-sidebar .metismenu>li:focus>a,
[data-theme-version="dark"] .nk-sidebar .metismenu a:hover,
[data-theme-version="dark"] .nk-sidebar .metismenu a:focus,
[data-theme-version="dark"] .nk-sidebar .metismenu a:active {
    background-color: rgba(138, 92, 249, 0.18) !important;
    color: #fff;
}

/* ── Cards — translucent glass panels over the vivid background ───── */
.card {
    border-radius: var(--gt-radius-lg);
    border: 1px solid var(--gt-border);
    box-shadow: var(--gt-shadow);
}

[data-theme-version="dark"] .card,
[data-theme-version="dark"] .card-footer,
[data-theme-version="dark"] .card-style {
    background: var(--gt-glass) !important;
    backdrop-filter: var(--gt-blur);
    -webkit-backdrop-filter: var(--gt-blur);
}

.card-header {
    background: transparent;
    border-radius: var(--gt-radius-lg) var(--gt-radius-lg) 0 0;
}

/* ── Form controls ────────────────────────────────────────────────── */
[data-theme-version="dark"] .form-control {
    background-color: var(--gt-glass-soft);
    border: 1px solid rgba(255, 255, 255, 0.3);
    color: var(--gt-text);
}

[data-theme-version="dark"] .form-control:focus {
    background-color: var(--gt-glass-soft);
    border-color: #5b6cf9;
    color: var(--gt-text);
    box-shadow: 0 0 0 0.2rem rgba(91, 108, 249, 0.25);
}

[data-theme-version="dark"] .login-input .form-group .form-control {
    background-color: var(--gt-glass-soft);
    border: 1px solid rgba(255, 255, 255, 0.3);
    border-radius: 0.65rem;
    padding-left: 0.75rem;
    color: var(--gt-text);
}

[data-theme-version="dark"] .login-input .form-group .form-control:focus {
    border-color: #5b6cf9;
}

/* ── Progress bars ────────────────────────────────────────────────── */
.progress,
.progress-bar {
    border-radius: 999px;
}

/* ── Pagination ───────────────────────────────────────────────────── */
[data-theme-version="dark"] .pagination .page-link {
    background-color: rgba(138, 92, 249, 0.16);
    border: 1px solid rgba(138, 92, 249, 0.35);
    color: var(--gt-text);
    border-radius: 0.65rem;
    margin: 0 0.15rem;
}

[data-theme-version="dark"] .pagination .page-item.active .page-link {
    background: var(--gt-gradient);
    border-color: transparent;
    color: #fff;
    box-shadow: 0 6px 16px rgba(91, 108, 249, 0.35);
}

[data-theme-version="dark"] .pagination .page-link:hover {
    background-color: rgba(138, 92, 249, 0.32);
    border-color: #8a5cf9;
    color: #fff;
}

/* ── Badges ───────────────────────────────────────────────────────── */
.badge.gradient-2 {
    background: var(--gt-gradient) !important;
}

/* ── Datagrid footer ──────────────────────────────────────────────── */
.panel-footer {
    background: transparent;
    border-top: 1px solid var(--gt-border);
    color: var(--gt-text-muted);
}

/* ── Bootstrap tabs ───────────────────────────────────────────────── */
.nav-tabs {
    border-bottom-color: var(--gt-border);
}

.nav-tabs .nav-link.active,
.nav-tabs .nav-item.show .nav-link {
    color: var(--gt-text);
    background-color: var(--gt-surface);
    border-color: var(--gt-border) var(--gt-border) var(--gt-surface);
}

.nav-tabs .nav-link:hover,
.nav-tabs .nav-link:focus {
    border-color: var(--gt-border) var(--gt-border) var(--gt-border);
}

/* ── List groups ──────────────────────────────────────────────────── */
.list-group-item {
    background-color: transparent;
    border-color: var(--gt-border);
    color: var(--gt-text);
}

/* ── Footer ───────────────────────────────────────────────────────── */
[data-theme-version="dark"] .footer,
[data-theme-version="dark"] .footer .copyright {
    background: var(--gt-glass-soft) !important;
    backdrop-filter: var(--gt-blur);
    -webkit-backdrop-filter: var(--gt-blur);
}

.footer a {
    color: #8a9bff;
}

/* ── Login page ───────────────────────────────────────────────────── */
[data-theme-version="dark"] .login-form h4,
[data-theme-version="dark"] .login-form p,
[data-theme-version="dark"] .login-form .form-check-label {
    color: var(--gt-text);
}

[data-theme-version="dark"] .login-form .text-primary {
    color: #9aa6ff !important;
}

[data-theme-version="dark"] .login-form__btn.submit {
    background: var(--gt-gradient);
    border: none;
}

[data-theme-version="dark"] .login-form__btn-secondary {
    background: var(--gt-glass-soft);
    border: 1px solid var(--gt-border);
    color: var(--gt-text);
}

[data-theme-version="dark"] .login-form__btn-secondary:hover {
    background: var(--gt-surface-soft);
    color: var(--gt-text);
}