/* ===========================================================================
   JDS — Premium 3D / Glassmorphism theme. Loaded LAST so it wins.
   FULLY THEME-AWARE: all colours derive from --theme-primary / --theme-secondary
   (set live by the admin Theme Settings picker), so changing the theme updates
   login, dashboard, sidebar, topbar, cards, tables and buttons together.
   =========================================================================== */
:root {
    /* static fallbacks first (used if color-mix is unsupported), then theme-aware */
    --jds-p: #294261;            --jds-p: var(--theme-primary, #294261);
    --jds-s: #fca521;            --jds-s: var(--theme-secondary, #fca521);
    --jds-p-l:  #3a5680;         --jds-p-l:  color-mix(in srgb, var(--theme-primary, #294261) 80%, #ffffff);
    --jds-p-d:  #22374f;         --jds-p-d:  color-mix(in srgb, var(--theme-primary, #294261) 82%, #000000);
    --jds-p-dd: #1a2c40;         --jds-p-dd: color-mix(in srgb, var(--theme-primary, #294261) 64%, #000000);
    --jds-s-l:  #ffd071;         --jds-s-l:  color-mix(in srgb, var(--theme-secondary, #fca521) 70%, #ffffff);
    --jds-s-d:  #d98c1c;         --jds-s-d:  color-mix(in srgb, var(--theme-secondary, #fca521) 86%, #000000);
    /* translucent tints for shadows / glows */
    --jds-p-glow:  rgba(41,66,97,.18);   --jds-p-glow:  color-mix(in srgb, var(--theme-primary, #294261) 18%, transparent);
    --jds-p-glow2: rgba(41,66,97,.32);   --jds-p-glow2: color-mix(in srgb, var(--theme-primary, #294261) 32%, transparent);
    --jds-s-glow:  rgba(252,165,33,.50); --jds-s-glow:  color-mix(in srgb, var(--theme-secondary, #fca521) 50%, transparent);
}

/* ============================== LOGIN ============================== */
.log-in {
    position: relative !important;
    min-height: 100vh !important;
    height: auto !important;
    padding: 40px 16px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    overflow: hidden !important;
    background:
        radial-gradient(1200px 800px at 15% 20%, var(--jds-p-d) 0%, transparent 60%),
        radial-gradient(1000px 700px at 85% 80%, var(--jds-p-dd) 0%, transparent 55%),
        linear-gradient(135deg, var(--jds-p-dd) 0%, var(--jds-p-d) 50%, #0d1526 100%),
        #0c1424 !important;
}
.log-in::before, .log-in::after {
    content:""; position:absolute; border-radius:50%; filter:blur(70px); opacity:.5; z-index:0; pointer-events:none;
}
.log-in::before {
    width:420px; height:420px; top:-90px; left:-70px;
    background: radial-gradient(circle at 30% 30%, var(--jds-s), transparent 70%);
    animation: jdsFloat1 14s ease-in-out infinite;
}
.log-in::after {
    width:540px; height:540px; bottom:-130px; right:-90px;
    background: radial-gradient(circle at 60% 40%, var(--jds-p-l), transparent 70%);
    animation: jdsFloat2 18s ease-in-out infinite;
}
@keyframes jdsFloat1 { 0%,100%{transform:translate(0,0)} 50%{transform:translate(45px,32px)} }
@keyframes jdsFloat2 { 0%,100%{transform:translate(0,0)} 50%{transform:translate(-55px,-34px)} }

.log-in .inner-log-in {
    position:relative; z-index:1; width:100% !important; float:none !important; height:auto !important;
    display:flex !important; justify-content:center !important;
}
.log-in .inner-log-in .container {
    display:flex !important; align-items:center !important; justify-content:center !important;
    gap:60px !important; flex-wrap:wrap !important;
    width:100% !important; max-width:1040px !important; margin:0 auto !important;
    padding-left:24px !important; padding-right:24px !important;
}

.log-in .inner-log-in .login-detais {
    float:none !important; flex:0 1 500px !important; width:auto !important; max-width:500px;
    padding:0 !important; background:transparent !important; box-shadow:none !important; color:#eaf1ff;
}
.auth-brand { display:flex; align-items:center; gap:14px; margin-bottom:26px; }
.auth-logo {
    width:56px; height:56px; border-radius:16px; flex:0 0 auto;
    display:flex; align-items:center; justify-content:center;
    font-size:26px; font-weight:800; color:var(--jds-p-dd);
    background: linear-gradient(135deg, var(--jds-s-l), var(--jds-s) 60%, var(--jds-s-d));
    box-shadow: 0 10px 24px var(--jds-s-glow), inset 0 2px 6px rgba(255,255,255,.6);
    transform: perspective(500px) rotateX(8deg) rotateY(-10deg);
    animation: jdsLogoFloat 6s ease-in-out infinite;
}
@keyframes jdsLogoFloat {
    0%,100%{ transform:perspective(500px) rotateX(8deg) rotateY(-10deg) translateY(0); }
    50%{ transform:perspective(500px) rotateX(8deg) rotateY(-10deg) translateY(-9px); }
}
.auth-brand-name { font-size:22px; font-weight:800; color:#fff; letter-spacing:.3px; line-height:1.1; }
.auth-brand-sub { font-size:10.5px; letter-spacing:3px; color:var(--jds-s); font-weight:700; }

.auth-headline { font-size:34px !important; line-height:1.18; font-weight:800; color:#fff !important; margin-bottom:12px !important; }
.auth-highlight {
    background: linear-gradient(90deg, var(--jds-s-l), var(--jds-s));
    -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent;
}
.auth-desc { font-size:14.5px !important; line-height:1.65; color:#aebbd3 !important; max-width:440px; margin-bottom:24px !important; }

.auth-services { display:grid; grid-template-columns:repeat(3,1fr); gap:12px; margin-bottom:24px; max-width:440px; }
.auth-svc {
    display:flex; flex-direction:column; align-items:center; gap:7px;
    padding:14px 8px; border-radius:13px;
    background:rgba(255,255,255,.05); border:1px solid rgba(255,255,255,.10);
    -webkit-backdrop-filter:blur(8px); backdrop-filter:blur(8px);
    transition: transform .25s ease, box-shadow .25s ease, background .25s ease;
}
.auth-svc i { font-size:20px; color:var(--jds-s); }
.auth-svc span { font-size:12px; color:#dce6f7; font-weight:600; }
.auth-svc:hover {
    transform: translateY(-5px);
    background: color-mix(in srgb, var(--jds-s) 14%, transparent);
    box-shadow: 0 14px 26px rgba(0,0,0,.30), 0 0 0 1px var(--jds-s-glow);
}
.auth-stats { display:flex; gap:12px; max-width:440px; }
.auth-stat { flex:1; padding:14px 10px; border-radius:13px; background:rgba(255,255,255,.05); border:1px solid rgba(255,255,255,.08); text-align:center; }
.auth-stat-val { font-size:20px; font-weight:800; color:#fff; }
.auth-stat-lbl { font-size:11px; color:#9fb1cd; letter-spacing:.4px; margin-top:2px; }

.log-in .inner-log-in .form-aside {
    float:none !important; flex:0 0 410px !important; width:410px !important; max-width:100%; margin:0 !important;
    padding:38px 34px !important; border-radius:24px !important;
    background:rgba(255,255,255,.08) !important; border:1px solid rgba(255,255,255,.16) !important;
    -webkit-backdrop-filter:blur(22px) saturate(140%); backdrop-filter:blur(22px) saturate(140%);
    box-shadow:0 30px 60px rgba(0,0,0,.45), inset 0 1px 0 rgba(255,255,255,.25) !important;
    animation: jdsCardFloat 7s ease-in-out infinite;
}
@keyframes jdsCardFloat { 0%,100%{transform:translateY(0)} 50%{transform:translateY(-8px)} }
.log-in .inner-log-in .form-aside .log-in-form h4 { color:#fff !important; font-weight:800; font-size:24px !important; }
.log-in .inner-log-in .form-aside .log-in-form .form-group label { color:#cdd9ee !important; font-weight:600; }
.log-in .form-control {
    background:rgba(255,255,255,.07) !important; border:1px solid rgba(255,255,255,.18) !important;
    color:#fff !important; border-radius:12px !important; padding:12px 14px !important; height:auto !important;
    transition: border-color .2s, box-shadow .2s, background .2s;
}
.log-in .form-control::placeholder { color:rgba(255,255,255,.45) !important; }
.log-in .form-control:focus {
    background:rgba(255,255,255,.12) !important; border-color:var(--jds-s) !important;
    box-shadow:0 0 0 4px var(--jds-p-glow), 0 0 22px var(--jds-s-glow) !important; outline:none !important;
}
.log-in .btn-theme.button-login, .log-in .button-login {
    width:100%; border:none !important; border-radius:12px !important; padding:13px !important;
    font-weight:800 !important; font-size:15px !important; letter-spacing:.5px; color:var(--jds-p-dd) !important;
    background: linear-gradient(135deg, var(--jds-s-l) 0%, var(--jds-s) 55%, var(--jds-s-d) 100%) !important;
    box-shadow:0 14px 28px var(--jds-s-glow), inset 0 1px 0 rgba(255,255,255,.6) !important;
    position:relative; overflow:hidden; transition: transform .15s ease, box-shadow .2s ease;
}
.log-in .button-login::after {
    content:""; position:absolute; top:0; left:-120%; width:60%; height:100%;
    background: linear-gradient(120deg, transparent, rgba(255,255,255,.6), transparent);
    transform: skewX(-20deg); transition: left .6s ease;
}
.log-in .button-login:hover { transform:translateY(-3px); box-shadow:0 20px 38px var(--jds-s-glow), inset 0 1px 0 rgba(255,255,255,.7) !important; }
.log-in .button-login:hover::after { left:140%; }
.log-in .button-login:active { transform:translateY(0); }
.log-in .fp-text { color:var(--jds-s) !important; }
.log-in .log-in-form p, .log-in .log-in-form b { color:#aebbd3 !important; }

@media (max-width: 991px){
    .log-in .inner-log-in .container { flex-direction:column; gap:28px; }
    .log-in .inner-log-in .login-detais { width:100% !important; text-align:center; max-width:440px; }
    .auth-brand { justify-content:center; }
    .auth-desc, .auth-services, .auth-stats { margin-left:auto; margin-right:auto; }
    .auth-headline { font-size:30px !important; }
    .log-in .inner-log-in .form-aside { width:100% !important; max-width:420px; flex-basis:auto !important; }
}

/* ============================== TOPBAR / HEADER ============================== */
.navbar.main-header {
    background: linear-gradient(180deg, var(--jds-p-l) 0%, var(--jds-p) 55%, var(--jds-p-d) 100%) !important;
    box-shadow: 0 10px 28px var(--jds-p-glow2), 0 3px 0 rgba(0,0,0,.18) !important;
    border-bottom: 1px solid rgba(0,0,0,.22) !important;
    /* top inner highlight = raised 3D bar */
    box-shadow: 0 10px 28px var(--jds-p-glow2), inset 0 1px 0 rgba(255,255,255,.18), inset 0 -2px 6px rgba(0,0,0,.20) !important;
}
/* Header icons — 3D pop with depth shadow + hover lift */
.navbar.main-header i, .navbar.main-header svg {
    filter: drop-shadow(0 2px 3px rgba(0,0,0,.40));
    transition: transform .2s ease;
}
.navbar.main-header a:hover i, .navbar.main-header button:hover i,
.navbar.main-header a:hover svg, .navbar.main-header button:hover svg {
    transform: scale(1.18) translateY(-1px);
}

/* ============================== CARDS ============================== */
.card {
    border-radius: 16px !important;
    border: 1px solid var(--jds-p-glow) !important;
    box-shadow: 0 14px 34px var(--jds-p-glow), 0 4px 10px rgba(0,0,0,.08) !important;
    transition: transform .28s ease, box-shadow .28s ease !important;
}
.card:hover { box-shadow: 0 26px 52px var(--jds-p-glow2), 0 8px 16px rgba(0,0,0,.12) !important; }
.card .card-header, .card .card-header-custom {
    border-radius: 16px 16px 0 0 !important;
    border-bottom: 1px solid var(--jds-p-glow) !important;
}
.dashbored-inner { border-radius:18px !important; box-shadow:0 12px 32px var(--jds-p-glow) !important; }

/* ============================== BUTTONS ============================== */
body .btn-theme {
    background: linear-gradient(135deg, var(--jds-p-l), var(--jds-p) 65%, var(--jds-p-d)) !important;
    border: none !important; color:#fff !important; border-radius:10px !important;
    box-shadow: 0 8px 18px var(--jds-p-glow2), inset 0 1px 0 rgba(255,255,255,.15) !important;
    transition: transform .15s ease, box-shadow .2s ease !important;
}
body .btn-theme:hover, body .btn-theme:focus {
    transform: translateY(-2px);
    box-shadow: 0 14px 26px var(--jds-p-glow2), inset 0 1px 0 rgba(255,255,255,.2) !important;
    color:#fff !important;
}
body .btn-theme:active { transform: translateY(0); }
body .btn-outline-theme {
    border:1.5px solid var(--jds-p) !important; color:var(--jds-p) !important; border-radius:10px !important;
    transition: all .2s ease !important;
}
body .btn-outline-theme:hover {
    background: var(--jds-p) !important; color:#fff !important; transform: translateY(-2px);
    box-shadow: 0 10px 20px var(--jds-p-glow2) !important;
}

/* ============================== TABLES ============================== */
body .table { border-radius:12px; overflow:hidden; }
body .table thead tr th {
    background: linear-gradient(135deg, color-mix(in srgb, var(--jds-p) 12%, #fff), color-mix(in srgb, var(--jds-p) 6%, #fff)) !important;
    color: var(--jds-p) !important; font-weight:700 !important; border-bottom:2px solid var(--jds-p-glow) !important;
    text-transform: uppercase; font-size:12px; letter-spacing:.4px;
}
body .table tbody tr { transition: background .15s ease; }
body .table tbody tr:hover { background: var(--jds-p-glow) !important; }

/* ============================== DASHBOARD ============================== */
.ds-top-card {
    border:1px solid var(--jds-p-glow) !important; border-radius:18px !important;
    box-shadow:0 16px 38px var(--jds-p-glow), 0 5px 12px rgba(0,0,0,.10) !important;
    transition: transform .3s cubic-bezier(.4,0,.2,1), box-shadow .3s !important; position:relative; overflow:hidden;
}
.ds-top-card:hover {
    transform: perspective(900px) rotateX(4deg) translateY(-7px) scale(1.01);
    box-shadow:0 34px 62px var(--jds-p-glow2), 0 12px 22px rgba(0,0,0,.16) !important;
}
.ds-top-card:not(.ds-wallet-card)::before {
    content:""; position:absolute; top:0; left:0; right:0; height:4px;
    background: linear-gradient(90deg, var(--jds-s), var(--jds-s-l));
}
.ds-wallet-card {
    background: linear-gradient(135deg, var(--jds-p-l) 0%, var(--jds-p) 45%, var(--jds-p-d) 100%) !important;
    border:none !important; color:#fff !important;
    box-shadow:0 26px 54px var(--jds-p-glow2), 0 10px 22px rgba(0,0,0,.20), inset 0 1px 0 rgba(255,255,255,.18) !important;
}
.ds-wallet-card::after {
    content:""; position:absolute; width:260px; height:260px; right:-70px; top:-90px;
    background: radial-gradient(circle, var(--jds-s-glow), transparent 70%); border-radius:50%; pointer-events:none; z-index:0;
}
.ds-wallet-amount { font-size:34px !important; text-shadow:0 2px 12px rgba(0,0,0,.28); }
.ds-wallet-card .ds-hold-balance, .ds-wallet-card .ds-top-card-label { position:relative; z-index:1; }
.ds-hold-balance { color:rgba(255,255,255,.85) !important; }

.ds-service-card {
    border:1px solid var(--jds-p-glow) !important; border-radius:16px !important;
    box-shadow:0 10px 26px var(--jds-p-glow), 0 3px 8px rgba(0,0,0,.07) !important;
    transition: transform .28s cubic-bezier(.4,0,.2,1), box-shadow .28s, border-color .28s !important;
}
.ds-service-card:hover {
    transform: perspective(800px) rotateX(6deg) translateY(-8px) scale(1.03) !important;
    box-shadow:0 28px 52px var(--jds-p-glow2), 0 10px 18px rgba(0,0,0,.16) !important;
    border-color: var(--jds-s-glow) !important;
}
.ds-service-icon {
    width:58px !important; height:58px !important; border-radius:18px !important;
    box-shadow: inset 0 2px 6px rgba(255,255,255,.55), 0 6px 14px var(--jds-p-glow) !important;
}
.ds-service-card:hover .ds-service-icon { transform: scale(1.12) translateY(-2px) !important; }
.ds-service-label { font-size:13px !important; }
.ds-section-bar {
    width:5px !important; height:22px !important;
    background: linear-gradient(180deg, var(--jds-s-l), var(--jds-s)) !important;
    box-shadow: 0 0 10px var(--jds-s-glow) !important;
}
.ds-refresh-btn { transition: transform .2s ease, box-shadow .2s ease !important; }
.ds-refresh-btn:hover { transform: translateY(-2px) rotate(20deg); box-shadow:0 6px 16px var(--jds-s-glow) !important; }

/* ============================== SIDEBAR — dark + 3D gold pills ============================== */
.sidebar {
    background: linear-gradient(180deg, var(--jds-p-l) 0%, var(--jds-p-d) 100%) !important;
    box-shadow: 4px 0 24px rgba(0,0,0,.25) !important;
}
.sidebar .sidebar-inner {
    background: linear-gradient(180deg, var(--jds-p-l) 0%, var(--jds-p) 55%, var(--jds-p-d) 100%) !important;
    border-radius:16px !important;
    box-shadow: inset 0 1px 0 rgba(255,255,255,.06), 0 10px 26px rgba(0,0,0,.30) !important;
    padding:14px 8px !important; border:1px solid rgba(255,255,255,.07) !important;
}
.sidebar .sidebar-inner a {
    padding:11px 13px !important; margin-bottom:5px !important; font-size:14.5px !important; font-weight:500 !important;
    color:rgba(255,255,255,.82) !important; border-radius:12px !important;
    transition: all .25s cubic-bezier(.4,0,.2,1) !important; position:relative;
}
.sidebar .sidebar-inner a span { color:rgba(255,255,255,.82) !important; }
.sidebar .sidebar-inner a i { color:rgba(255,255,255,.62) !important; font-size:16px !important; margin-right:12px !important; transition: all .25s ease !important; filter: drop-shadow(0 1px 2px rgba(0,0,0,.45)); }
.sidebar .sidebar-inner a:hover {
    background: rgba(255,255,255,.12) !important; color:#fff !important;
    transform: translateX(3px) translateY(-2px) !important;
    box-shadow: 0 8px 18px rgba(0,0,0,.32), inset 0 1px 0 rgba(255,255,255,.14) !important;
}
.sidebar .sidebar-inner a:hover span { color:#fff !important; }
.sidebar .sidebar-inner a:hover i { color:var(--jds-s-l) !important; transform: scale(1.18) translateY(-1px) !important; }

/* active = strongly embossed raised GOLD pill (top highlight + inset bottom shadow + lift) */
.sidebar .sidebar-inner a.active {
    background: linear-gradient(180deg, var(--jds-s-l) 0%, var(--jds-s) 55%, var(--jds-s-d) 100%) !important;
    color: var(--jds-p-dd) !important; font-weight:700 !important;
    box-shadow: 0 10px 22px var(--jds-s-glow), 0 16px 28px rgba(0,0,0,.32),
                inset 0 2px 0 rgba(255,255,255,.65), inset 0 -3px 7px rgba(0,0,0,.22) !important;
    transform: translateY(-3px) scale(1.02) !important;
}
.sidebar .sidebar-inner a.active span { color:var(--jds-p-dd) !important; }
.sidebar .sidebar-inner a.active i { color:var(--jds-p-dd) !important; transform: scale(1.2) !important; filter: drop-shadow(0 1px 1px rgba(255,255,255,.5)); }
.sidebar .sidebar-inner a.active:before, .sidebar .sidebar-inner a:hover:before { display:none !important; }
.sidebar .sidebar-inner::-webkit-scrollbar { width:5px; }
.sidebar .sidebar-inner::-webkit-scrollbar-thumb { background:rgba(255,255,255,.25); border-radius:10px; }
.sidebar .sidebar-inner::-webkit-scrollbar-thumb:hover { background:rgba(255,255,255,.5); }

/* page title accent */
.page-title { color: var(--jds-p) !important; }