/* ============================================================================
   LUX 2030 — V23 luxury admin design system  (Corporate Light Blue)
   Light-first, with a dark-mode switch. Self-contained shell layout so it does
   not depend on the legacy AdminBSB template. Loaded AFTER style.min.css on the
   admin master; high specificity (body.lux-app) keeps it winning.
   RESKIN: change the 3 --lux-primary* vars below to re-theme the whole app.
============================================================================ */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800;900&display=swap');

:root {
    /* ---- the 3 reskin knobs ---- */
    --lux-primary:   #2563EB;
    --lux-primary-2: #3B82F6;
    --lux-accent:    #60A5FA;

    /* surfaces & ink (light) */
    --lux-bg:      #F4F7FB;
    --lux-bg-2:    #EEF3FA;
    --lux-surface: #FFFFFF;
    --lux-surface-2:#F8FAFC;
    --lux-ink:     #0F172A;
    --lux-ink-2:   #1E293B;
    --lux-muted:   #64748B;
    --lux-faint:   #94A3B8;
    --lux-border:  #E6EBF3;
    --lux-border-2:#E2E8F0;

    /* status hues */
    --lux-ok:#10B981; --lux-warn:#F59E0B; --lux-danger:#EF4444;
    --lux-pink:#EC4899; --lux-violet:#8B5CF6; --lux-cyan:#06B6D4; --lux-amber:#F59E0B; --lux-mint:#14B8A6;

    /* geometry */
    --lux-radius:18px; --lux-radius-sm:12px; --lux-radius-lg:24px;
    --lux-side-w:266px; --lux-header-h:70px;
    --lux-pad:22px; --lux-gap:22px;

    --lux-shadow:    0 6px 24px rgba(15,23,42,0.06);
    --lux-shadow-lg: 0 18px 50px rgba(15,23,42,0.12);
    --lux-ring: 0 0 0 4px rgba(37,99,235,0.10);
}

/* ---- dark mode ---- */
[data-theme="dark"] {
    --lux-bg:#0a0f1e; --lux-bg-2:#0d1426;
    --lux-surface:#121a2e; --lux-surface-2:#0f1729;
    --lux-ink:#e9eefb; --lux-ink-2:#cdd7ee; --lux-muted:#9aa7c2; --lux-faint:#6b7894;
    --lux-border:rgba(255,255,255,0.08); --lux-border-2:rgba(255,255,255,0.10);
    --lux-shadow:0 8px 30px rgba(0,0,0,0.45); --lux-shadow-lg:0 24px 60px rgba(0,0,0,0.55);
}

/* ---- density ---- */
[data-density="compact"] { --lux-pad:13px; --lux-gap:14px; --lux-header-h:58px; --lux-side-w:240px; }

/* ============================ base ============================ */
body.lux-app {
    margin:0; background:var(--lux-bg); color:var(--lux-ink);
    font-family:'Inter','Plus Jakarta Sans',-apple-system,Segoe UI,Roboto,sans-serif;
    font-size:14px; -webkit-font-smoothing:antialiased;
}
body.lux-app * { box-sizing:border-box; }
body.lux-app a { text-decoration:none; }

/* custom scrollbar */
body.lux-app ::-webkit-scrollbar { width:11px; height:11px; }
body.lux-app ::-webkit-scrollbar-track { background:transparent; }
body.lux-app ::-webkit-scrollbar-thumb {
    background:linear-gradient(var(--lux-primary),var(--lux-primary-2));
    border-radius:20px; border:3px solid var(--lux-bg);
}
body.lux-app ::-webkit-scrollbar-thumb:hover { background:var(--lux-primary); }

/* ambient orbs behind everything */
.lux-orbs { position:fixed; inset:0; z-index:0; overflow:hidden; pointer-events:none; }
.lux-orbs span {
    position:absolute; border-radius:50%; filter:blur(80px); opacity:.45;
    animation:orbFloat 26s ease-in-out infinite alternate;
}
.lux-orbs span:nth-child(1){ width:420px;height:420px; left:-80px;top:-60px; background:radial-gradient(circle,#2563EB55,transparent 70%); }
.lux-orbs span:nth-child(2){ width:380px;height:380px; right:-60px;top:120px; background:radial-gradient(circle,#06B6D444,transparent 70%); animation-delay:-8s; }
.lux-orbs span:nth-child(3){ width:460px;height:460px; right:120px;bottom:-120px; background:radial-gradient(circle,#8B5CF63a,transparent 70%); animation-delay:-15s; }
@keyframes orbFloat { 0%{transform:translate(0,0) scale(1)} 50%{transform:translate(40px,-30px) scale(1.12)} 100%{transform:translate(-30px,40px) scale(1.05)} }

/* top rainbow strip + scroll progress */
.lux-rainbow { position:fixed; top:0; left:0; right:0; height:3px; z-index:1200;
    background:linear-gradient(90deg,#2563EB,#06B6D4,#10B981,#F59E0B,#EC4899,#2563EB);
    background-size:300% 100%; animation:rainbowShift 9s linear infinite; }
@keyframes rainbowShift { to { background-position:300% 0; } }
.lux-scrollbar { position:fixed; top:0; left:0; height:3px; z-index:1201; width:0;
    background:linear-gradient(90deg,#fff8,#fff); mix-blend-mode:overlay; }

/* ============================ shell ============================ */
.lux-shell { position:relative; z-index:1; min-height:100vh; }
.lux-main { margin-left:var(--lux-side-w); transition:margin .28s cubic-bezier(.2,.8,.2,1); }
body.lux-collapsed .lux-main { margin-left:0; }

/* neutralise legacy template offsets inside lux */
body.lux-app .content { margin-left:0 !important; padding:var(--lux-pad) !important; }

/* ============================ sidebar ============================ */
.lux-side {
    position:fixed; top:0; left:0; bottom:0; width:var(--lux-side-w); z-index:1100;
    background:var(--lux-surface); border-right:1px solid var(--lux-border);
    display:flex; flex-direction:column; transition:transform .28s cubic-bezier(.2,.8,.2,1);
}
body.lux-collapsed .lux-side { transform:translateX(-100%); }

.lux-brand { display:flex; align-items:center; gap:12px; padding:18px 20px; border-bottom:1px solid var(--lux-border); }
.lux-brand__logo { position:relative; width:42px; height:42px; flex:0 0 42px; display:grid; place-items:center; }
.lux-brand__logo::before { content:""; position:absolute; inset:-3px; border-radius:50%;
    background:conic-gradient(from 0deg,#2563EB,#06B6D4,#10B981,#EC4899,#2563EB); animation:logoSpin 5s linear infinite; }
.lux-brand__logo img { position:relative; width:36px; height:36px; border-radius:50%; object-fit:cover; background:#fff; border:2px solid var(--lux-surface); }
@keyframes logoSpin { to { transform:rotate(360deg); } }
.lux-brand__name { font-weight:800; font-size:16px; color:var(--lux-ink); line-height:1.1; }
.lux-brand__name b { background:linear-gradient(90deg,var(--lux-primary),var(--lux-primary-2)); -webkit-background-clip:text; background-clip:text; color:transparent; }
.lux-brand__name small { display:block; font-size:10.5px; font-weight:600; letter-spacing:.12em; color:var(--lux-faint); text-transform:uppercase; }

.lux-user { display:flex; align-items:center; gap:12px; margin:14px; padding:12px; border-radius:var(--lux-radius-sm);
    background:var(--lux-surface-2); border:1px solid var(--lux-border); }
.lux-user img { width:40px; height:40px; border-radius:12px; object-fit:cover; }
.lux-user .nm { font-weight:700; font-size:13px; color:var(--lux-ink); }
.lux-user .rl { font-size:11px; color:var(--lux-muted); }

.lux-nav { flex:1; overflow-y:auto; padding:6px 12px 18px; }
.lux-nav__sec { font-size:10.5px; font-weight:800; letter-spacing:.14em; text-transform:uppercase;
    color:var(--lux-faint); margin:16px 12px 8px; }
.lux-nav__group > .lux-nav__item { cursor:pointer; }
.lux-nav__item { position:relative; display:flex; align-items:center; gap:12px; padding:10px 12px; border-radius:12px;
    color:var(--lux-ink-2); font-weight:600; font-size:13.5px; margin:2px 0; transition:background .18s,color .18s,transform .18s;
    animation:navSlideIn .5s both; }
.lux-nav__item i { width:20px; text-align:center; font-size:16px; color:var(--lux-muted); transition:transform .25s; }
.lux-nav__item .chev { margin-left:auto; font-size:13px; color:var(--lux-faint); transition:transform .25s; }
.lux-nav__item:hover { background:var(--lux-surface-2); color:var(--lux-ink); }
.lux-nav__item:hover i { animation:navIconBounce .5s; color:var(--lux-primary); }
.lux-nav__item.active { background:linear-gradient(90deg,rgba(37,99,235,0.12),rgba(59,130,246,0.06)); color:var(--lux-primary); }
.lux-nav__item.active i { color:var(--lux-primary); }
.lux-nav__item.active::before { content:""; position:absolute; left:-12px; top:8px; bottom:8px; width:4px; border-radius:0 4px 4px 0;
    background:linear-gradient(var(--lux-primary),var(--lux-primary-2)); box-shadow:0 0 12px var(--lux-primary); animation:activeBarGlow 2.4s ease-in-out infinite; }
.lux-nav__sub { list-style:none; margin:2px 0 6px; padding:0 0 0 6px; max-height:0; overflow:hidden; transition:max-height .3s ease; }
.lux-nav__group.open .lux-nav__sub { max-height:520px; }
.lux-nav__group.open > .lux-nav__item .chev { transform:rotate(90deg); }
.lux-nav__sub a { display:block; padding:8px 12px 8px 40px; border-radius:10px; color:var(--lux-muted); font-size:13px; font-weight:500; }
.lux-nav__sub a:hover { background:var(--lux-surface-2); color:var(--lux-primary); }
@keyframes navSlideIn { from{opacity:0; transform:translateX(-12px);} to{opacity:1; transform:none;} }
@keyframes navIconBounce { 0%,100%{transform:translateY(0);} 30%{transform:translateY(-4px);} 60%{transform:translateY(1px);} }
@keyframes activeBarGlow { 0%,100%{opacity:.7;} 50%{opacity:1;} }

/* ============================ top header ============================ */
.lux-top { position:sticky; top:0; z-index:900; height:var(--lux-header-h); display:flex; align-items:center; gap:14px;
    padding:0 var(--lux-pad); background:color-mix(in srgb,var(--lux-surface) 86%, transparent);
    -webkit-backdrop-filter:blur(14px) saturate(150%); backdrop-filter:blur(14px) saturate(150%);
    border-bottom:1px solid var(--lux-border); position:relative; overflow:hidden; }
.lux-top::after { content:""; position:absolute; inset:0; pointer-events:none;
    background:linear-gradient(110deg,transparent 30%,rgba(255,255,255,.35) 50%,transparent 70%);
    background-size:220% 100%; animation:headerShimmer 7s linear infinite; }
[data-theme="dark"] .lux-top::after { background:linear-gradient(110deg,transparent 30%,rgba(255,255,255,.06) 50%,transparent 70%); background-size:220% 100%; }
@keyframes headerShimmer { to { background-position:-220% 0; } }
.lux-top > * { position:relative; z-index:1; }
.lux-burger { border:none; background:var(--lux-surface-2); color:var(--lux-ink); width:40px; height:40px; border-radius:12px; cursor:pointer; font-size:18px; }
.lux-hello { font-weight:700; font-size:15px; }
.lux-hello span { background:linear-gradient(90deg,var(--lux-primary),var(--lux-primary-2)); -webkit-background-clip:text; background-clip:text; color:transparent; }
.lux-hello small { display:block; font-size:11.5px; font-weight:500; color:var(--lux-muted); }
.lux-top__spacer, .lux-spacer { flex:1; }

/* ticker */
.lux-ticker { max-width:340px; overflow:hidden; white-space:nowrap; -webkit-mask:linear-gradient(90deg,transparent,#000 12%,#000 88%,transparent); }
.lux-ticker b { color:var(--lux-primary); }
.lux-ticker__track { display:inline-block; padding-left:100%; animation:tickerScroll 22s linear infinite; color:var(--lux-muted); font-size:12.5px; }
@keyframes tickerScroll { to { transform:translateX(-100%); } }

/* command trigger */
.lux-cmd-trigger { display:flex; align-items:center; gap:8px; padding:9px 14px; border-radius:12px; cursor:pointer;
    background:var(--lux-surface-2); border:1px solid var(--lux-border); color:var(--lux-muted); font-size:13px; min-width:200px; }
.lux-cmd-trigger kbd { margin-left:auto; background:var(--lux-surface); border:1px solid var(--lux-border); border-radius:6px; padding:1px 6px; font-size:11px; color:var(--lux-ink-2); }

/* round icon buttons */
.lux-iconbtn { position:relative; width:40px; height:40px; border-radius:12px; border:1px solid var(--lux-border);
    background:var(--lux-surface-2); color:var(--lux-ink-2); cursor:pointer; display:grid; place-items:center; font-size:17px; transition:.18s; }
.lux-iconbtn:hover { color:var(--lux-primary); border-color:var(--lux-primary); transform:translateY(-2px); }
.lux-iconbtn .dot { position:absolute; top:7px; right:8px; width:8px; height:8px; border-radius:50%; background:var(--lux-danger); border:2px solid var(--lux-surface); }
.lux-prof { display:flex; align-items:center; gap:10px; padding:5px 10px 5px 5px; border-radius:12px; border:1px solid var(--lux-border); background:var(--lux-surface-2); cursor:pointer; }
.lux-prof img { width:32px; height:32px; border-radius:9px; object-fit:cover; }
.lux-prof .nm { font-weight:700; font-size:12.5px; color:var(--lux-ink); line-height:1.1; }
.lux-prof .nm small { display:block; font-weight:500; color:var(--lux-muted); font-size:10.5px; }

/* breadcrumb bar */
.lux-crumbs { display:flex; align-items:center; gap:8px; padding:14px var(--lux-pad) 0; color:var(--lux-muted); font-size:12.5px; }
.lux-crumbs a { color:var(--lux-muted); }
.lux-crumbs a:hover { color:var(--lux-primary); }
.lux-crumbs .sep { color:var(--lux-faint); }
.lux-crumbs .cur { color:var(--lux-ink); font-weight:600; }

/* ============================ page + cards ============================ */
.lux-page { padding:var(--lux-pad); }
.lux-page__head { display:flex; align-items:flex-end; justify-content:space-between; gap:14px; margin-bottom:var(--lux-gap); flex-wrap:wrap; }
.lux-page__head h1 { margin:0; font-size:24px; font-weight:800; letter-spacing:-.02em; }
.lux-page__head p { margin:4px 0 0; color:var(--lux-muted); font-size:13px; }

.lux-grid { display:grid; gap:var(--lux-gap); }
.lux-grid--kpi { grid-template-columns:repeat(4,1fr); }
.lux-grid--2 { grid-template-columns:2fr 1fr; }
@media (max-width:1200px){ .lux-grid--kpi{grid-template-columns:repeat(2,1fr);} .lux-grid--2{grid-template-columns:1fr;} }
@media (max-width:560px){ .lux-grid--kpi{grid-template-columns:1fr;} }

.lux-card { background:var(--lux-surface); border:1px solid var(--lux-border); border-radius:var(--lux-radius); box-shadow:var(--lux-shadow); }
.lux-card__head { display:flex; align-items:center; justify-content:space-between; padding:16px 20px; border-bottom:1px solid var(--lux-border); }
.lux-card__head h3 { margin:0; font-size:14px; font-weight:800; letter-spacing:.01em; }
.lux-card__body { padding:20px; }

/* KPI tile */
.lux-kpi { position:relative; overflow:hidden; background:var(--lux-surface); border:1px solid var(--lux-border);
    border-radius:var(--lux-radius); padding:18px 18px 0; box-shadow:var(--lux-shadow);
    transition:transform .25s cubic-bezier(.2,.8,.2,1), box-shadow .25s, border-color .25s; will-change:transform; }
.lux-kpi:hover { transform:translateY(-4px); box-shadow:var(--lux-shadow-lg); border-color:color-mix(in srgb,var(--lux-primary) 40%,var(--lux-border)); }
.lux-kpi::before { content:""; position:absolute; inset:0; background:linear-gradient(120deg,transparent 35%,rgba(255,255,255,.5) 50%,transparent 65%);
    background-size:240% 100%; transform:translateX(-100%); transition:none; opacity:0; }
.lux-kpi:hover::before { animation:shimmer 1.1s ease; opacity:1; }
@keyframes shimmer { from{transform:translateX(-100%);} to{transform:translateX(100%);} }
.lux-kpi__top { display:flex; align-items:flex-start; justify-content:space-between; }
.lux-kpi__icon { width:46px; height:46px; border-radius:14px; display:grid; place-items:center; color:#fff; font-size:21px;
    background:linear-gradient(135deg,var(--lux-primary),var(--lux-primary-2)); box-shadow:0 8px 20px -8px var(--lux-primary); }
.lux-kpi--violet .lux-kpi__icon{background:linear-gradient(135deg,#7c3aed,#a78bfa);box-shadow:0 8px 20px -8px #7c3aed;}
.lux-kpi--cyan   .lux-kpi__icon{background:linear-gradient(135deg,#0891b2,#22d3ee);box-shadow:0 8px 20px -8px #0891b2;}
.lux-kpi--mint   .lux-kpi__icon{background:linear-gradient(135deg,#059669,#34d399);box-shadow:0 8px 20px -8px #059669;}
.lux-kpi--amber  .lux-kpi__icon{background:linear-gradient(135deg,#d97706,#fbbf24);box-shadow:0 8px 20px -8px #d97706;}
.lux-kpi--pink   .lux-kpi__icon{background:linear-gradient(135deg,#db2777,#f472b6);box-shadow:0 8px 20px -8px #db2777;}
.lux-kpi--indigo .lux-kpi__icon{background:linear-gradient(135deg,#4f46e5,#818cf8);box-shadow:0 8px 20px -8px #4f46e5;}
.lux-kpi--slate  .lux-kpi__icon{background:linear-gradient(135deg,#475569,#94a3b8);box-shadow:0 8px 20px -8px #475569;}
.lux-kpi__delta { font-size:12px; font-weight:700; padding:3px 9px; border-radius:20px; display:inline-flex; align-items:center; gap:4px; }
.lux-kpi__delta.up { color:var(--lux-ok); background:rgba(16,185,129,.12); }
.lux-kpi__delta.down { color:var(--lux-danger); background:rgba(239,68,68,.12); }
.lux-kpi__num { font-size:30px; font-weight:800; letter-spacing:-.02em; margin-top:14px; line-height:1; }
.lux-kpi__label { font-size:12.5px; color:var(--lux-muted); font-weight:600; margin-top:5px; }
.lux-kpi__spark { display:block; width:100%; height:42px; margin-top:10px; }

/* one-line stats bar */
.lux-statbar { display:flex; align-items:stretch; background:var(--lux-surface); border:1px solid var(--lux-border);
    border-radius:var(--lux-radius); box-shadow:var(--lux-shadow); overflow-x:auto; }
.lux-stat { flex:1 1 0; min-width:128px; display:flex; align-items:center; gap:12px; padding:15px 18px; position:relative; }
.lux-stat + .lux-stat::before { content:""; position:absolute; left:0; top:16px; bottom:16px; width:1px; background:var(--lux-border); }
.lux-stat__icon { flex:0 0 38px; width:38px; height:38px; border-radius:11px; display:grid; place-items:center; color:#fff; font-size:17px;
    background:linear-gradient(135deg,var(--lux-primary),var(--lux-primary-2)); box-shadow:0 6px 16px -8px var(--lux-primary); }
.lux-stat--cyan   .lux-stat__icon{background:linear-gradient(135deg,#0891b2,#22d3ee);}
.lux-stat--mint   .lux-stat__icon{background:linear-gradient(135deg,#059669,#34d399);}
.lux-stat--amber  .lux-stat__icon{background:linear-gradient(135deg,#d97706,#fbbf24);}
.lux-stat--pink   .lux-stat__icon{background:linear-gradient(135deg,#db2777,#f472b6);}
.lux-stat--indigo .lux-stat__icon{background:linear-gradient(135deg,#4f46e5,#818cf8);}
.lux-stat--violet .lux-stat__icon{background:linear-gradient(135deg,#7c3aed,#a78bfa);}
.lux-stat__num { font-size:19px; font-weight:800; line-height:1; letter-spacing:-.01em; }
.lux-stat__label { font-size:11px; color:var(--lux-muted); font-weight:600; margin-top:3px; white-space:nowrap; }

/* quick action chips */
.lux-quick { display:flex; flex-wrap:wrap; gap:10px; }
.lux-chip { display:inline-flex; align-items:center; gap:8px; padding:9px 14px; border-radius:12px; font-weight:600; font-size:13px;
    background:var(--lux-surface-2); border:1px solid var(--lux-border); color:var(--lux-ink-2); cursor:pointer; transition:.18s; }
.lux-chip:hover { color:var(--lux-primary); border-color:var(--lux-primary); transform:translateY(-2px); }
.lux-chip i { color:var(--lux-primary); }

/* buttons */
.lux-btn { display:inline-flex; align-items:center; gap:8px; padding:10px 18px; border-radius:12px; font-weight:700; font-size:13px; cursor:pointer; border:1px solid transparent; transition:.2s; }
.lux-btn--primary { color:#fff; background:linear-gradient(135deg,var(--lux-primary),var(--lux-primary-2)); box-shadow:0 10px 24px -10px var(--lux-primary); }
.lux-btn--primary:hover { transform:translateY(-2px); filter:brightness(1.05); color:#fff; }
.lux-btn--ghost { background:var(--lux-surface); border-color:var(--lux-border); color:var(--lux-ink-2); }
.lux-btn--ghost:hover { border-color:var(--lux-primary); color:var(--lux-primary); }

/* tables (legacy gridviews get .lux-table on the card) */
.lux-table table, table.lux-table { width:100%; border-collapse:collapse; }
.lux-table th { text-align:left; font-size:11px; letter-spacing:.08em; text-transform:uppercase; color:var(--lux-muted);
    padding:12px 14px; border-bottom:1px solid var(--lux-border); }
.lux-table td { padding:12px 14px; border-bottom:1px solid var(--lux-border); color:var(--lux-ink-2); font-size:13.5px; }
.lux-table tr:hover td { background:var(--lux-surface-2); }
.lux-table a { color:var(--lux-primary); font-weight:600; }
.lux-divider { height:1px; background:linear-gradient(90deg,transparent,var(--lux-border),transparent); margin:6px 0; animation:sectionLine 1.2s ease both; }
@keyframes sectionLine { from{transform:scaleX(0);opacity:0;} to{transform:scaleX(1);opacity:1;} }

/* inline-edit gridviews (student update / academic pages) */
.lux-table input[type=text], .lux-table input[type=password], .lux-table input:not([type]) {
    padding:8px 11px; border-radius:10px; border:1.5px solid var(--lux-border-2); background:var(--lux-surface-2);
    color:var(--lux-ink); font-size:13px; font-family:inherit; outline:none; transition:.15s; max-width:230px; }
.lux-table input[type=text]:focus, .lux-table input:not([type]):focus { border-color:var(--lux-primary); background:var(--lux-surface); box-shadow:var(--lux-ring); }
.lux-table select { padding:8px 11px; border-radius:10px; border:1.5px solid var(--lux-border-2); background:var(--lux-surface-2);
    color:var(--lux-ink); font-size:13px; font-family:inherit; outline:none; }
.lux-table textarea { width:100%; padding:9px 11px; border-radius:10px; border:1.5px solid var(--lux-border-2); background:var(--lux-surface-2);
    color:var(--lux-ink); font-size:13px; font-family:inherit; outline:none; resize:vertical; }
/* row action buttons rendered by linkbuttons/buttons inside grids */
.lux-upd, a.lux-upd, input.lux-upd { display:inline-flex; align-items:center; gap:6px; padding:7px 15px; border-radius:10px;
    font-weight:700; font-size:12px; cursor:pointer; border:none; color:#fff !important; text-decoration:none;
    background:linear-gradient(135deg,var(--lux-primary),var(--lux-primary-2)); box-shadow:0 8px 18px -10px var(--lux-primary); transition:.18s; }
.lux-upd:hover, a.lux-upd:hover, input.lux-upd:hover { filter:brightness(1.07); transform:translateY(-1px); color:#fff !important; }
/* section count pills (A/B/C/D/E linkbuttons) */
.lux-table .lux-sec { display:inline-block; min-width:30px; text-align:center; padding:4px 9px; border-radius:9px; font-weight:700; font-size:12.5px;
    background:var(--lux-surface-2); border:1px solid var(--lux-border); color:var(--lux-primary); }
.lux-table .lux-sec:hover { background:var(--lux-primary); color:#fff; border-color:var(--lux-primary); }
.lux-gv-pic { width:46px; height:46px; border-radius:12px; object-fit:cover; border:2px solid var(--lux-border); }
/* empty state inside a card */
.lux-empty { text-align:center; padding:34px 16px; color:var(--lux-muted); }
.lux-empty i { font-size:30px; display:block; margin-bottom:8px; color:var(--lux-faint); }

/* ============================ auth + welcome (standalone) ============================ */
.lux-authlogo { position:relative; width:96px; height:96px; margin:0 auto; display:grid; place-items:center; }
.lux-authlogo::before { content:""; position:absolute; inset:-4px; border-radius:50%;
    background:conic-gradient(from 0deg,var(--lux-primary),#06B6D4,#10B981,#EC4899,var(--lux-primary)); animation:logoSpin 5s linear infinite; }
.lux-authlogo img { position:relative; width:84px; height:84px; border-radius:50%; object-fit:cover; background:#fff; border:3px solid var(--lux-surface); }

.lux-auth { min-height:100vh; display:flex; align-items:center; justify-content:center; padding:28px 16px; position:relative; z-index:1; }
.lux-auth__wrap { width:100%; max-width:430px; }
.lux-auth__card .lux-card__body { padding:34px 32px; }

.lux-field { margin-bottom:16px; text-align:left; }
.lux-field__label { display:block; font-size:12px; font-weight:700; letter-spacing:.06em; text-transform:uppercase; color:var(--lux-muted); margin-bottom:7px; }
.lux-inwrap { position:relative; display:flex; align-items:center; }
.lux-inwrap .lux-inicon { position:absolute; right:14px; color:var(--lux-faint); font-size:17px; }
.lux-inwrap .lux-inicon a { color:inherit; }
.lux-input, input.lux-input { width:100%; padding:13px 44px 13px 15px; border-radius:14px; border:1.5px solid var(--lux-border-2);
    background:var(--lux-surface-2); color:var(--lux-ink); font-size:14.5px; font-family:inherit; outline:none; transition:.2s; }
.lux-input::placeholder { color:var(--lux-faint); }
.lux-input:focus { border-color:var(--lux-primary); background:var(--lux-surface); box-shadow:var(--lux-ring); }
.lux-btn--block { width:100%; justify-content:center; padding:13px 18px; }

.lux-foot { text-align:center; margin-top:16px; font-size:12.5px; color:var(--lux-muted); }
.lux-foot a { color:var(--lux-primary); font-weight:600; }
.lux-err { color:var(--lux-danger); font-weight:600; font-size:13px; }

.lux-welcome { min-height:100vh; display:flex; flex-direction:column; align-items:center; padding:54px 18px 40px; position:relative; z-index:1; }
.lux-welcome__hero { text-align:center; max-width:720px; margin-bottom:40px; }
.lux-welcome__hero h1 { font-size:34px; font-weight:800; letter-spacing:-.02em; margin:20px 0 8px; }
.lux-welcome__hero h1 b { background:linear-gradient(90deg,var(--lux-primary),var(--lux-primary-2)); -webkit-background-clip:text; background-clip:text; color:transparent; }
.lux-welcome__hero p { color:var(--lux-muted); margin:0 0 24px; }
.lux-modules { width:100%; max-width:1040px; }
.lux-modules__title { text-align:center; color:var(--lux-faint); font-size:12px; letter-spacing:.16em; text-transform:uppercase; margin-bottom:20px; }
.lux-modgrid { display:grid; grid-template-columns:repeat(4,1fr); gap:18px; }
@media(max-width:900px){ .lux-modgrid{grid-template-columns:repeat(2,1fr);} }
@media(max-width:520px){ .lux-modgrid{grid-template-columns:1fr;} }
.lux-module { display:flex; flex-direction:column; align-items:center; gap:11px; padding:24px 16px; border-radius:var(--lux-radius);
    background:var(--lux-surface); border:1px solid var(--lux-border); box-shadow:var(--lux-shadow); text-align:center; text-decoration:none; transition:.25s; }
.lux-module:hover { transform:translateY(-5px); box-shadow:var(--lux-shadow-lg); border-color:color-mix(in srgb,var(--lux-primary) 40%,var(--lux-border)); }
.lux-module__icon { width:54px; height:54px; border-radius:15px; display:grid; place-items:center; color:#fff; font-size:24px; background:linear-gradient(135deg,var(--lux-primary),var(--lux-primary-2)); }
.lux-module:nth-child(4n+2) .lux-module__icon{background:linear-gradient(135deg,#0891b2,#22d3ee);}
.lux-module:nth-child(4n+3) .lux-module__icon{background:linear-gradient(135deg,#059669,#34d399);}
.lux-module:nth-child(4n+4) .lux-module__icon{background:linear-gradient(135deg,#d97706,#fbbf24);}
.lux-module__name { font-weight:700; font-size:14px; color:var(--lux-ink); }
.lux-module__desc { font-size:12px; color:var(--lux-muted); margin:0; }

/* ============================ command palette ============================ */
.lux-cmdk { position:fixed; inset:0; z-index:2000; display:none; align-items:flex-start; justify-content:center; padding-top:12vh;
    background:rgba(15,23,42,.45); -webkit-backdrop-filter:blur(4px); backdrop-filter:blur(4px); }
.lux-cmdk.open { display:flex; }
.lux-cmdk__panel { width:min(620px,92vw); background:var(--lux-surface); border:1px solid var(--lux-border); border-radius:18px;
    box-shadow:var(--lux-shadow-lg); overflow:hidden; animation:cmdkIn .22s cubic-bezier(.2,.8,.2,1); }
@keyframes cmdkIn { from{opacity:0; transform:translateY(-14px) scale(.98);} to{opacity:1; transform:none;} }
.lux-cmdk__in { display:flex; align-items:center; gap:10px; padding:16px 18px; border-bottom:1px solid var(--lux-border); }
.lux-cmdk__in i { color:var(--lux-muted); font-size:18px; }
.lux-cmdk__in input { flex:1; border:none; outline:none; background:transparent; font-size:15px; color:var(--lux-ink); font-family:inherit; }
.lux-cmdk__list { max-height:48vh; overflow-y:auto; padding:8px; }
.lux-cmdk__item { display:flex; align-items:center; gap:12px; padding:11px 14px; border-radius:12px; cursor:pointer; color:var(--lux-ink-2); font-weight:600; font-size:13.5px; }
.lux-cmdk__item i { width:20px; text-align:center; color:var(--lux-muted); }
.lux-cmdk__item.sel, .lux-cmdk__item:hover { background:linear-gradient(90deg,rgba(37,99,235,.12),rgba(59,130,246,.05)); color:var(--lux-primary); }
.lux-cmdk__item.sel i, .lux-cmdk__item:hover i { color:var(--lux-primary); }
.lux-cmdk__empty { padding:24px; text-align:center; color:var(--lux-muted); }

/* ============================ toasts ============================ */
.lux-toasts { position:fixed; right:20px; bottom:20px; z-index:2100; display:flex; flex-direction:column; gap:10px; }
.lux-toast { display:flex; align-items:center; gap:12px; min-width:260px; max-width:360px; padding:13px 15px; border-radius:14px;
    background:var(--lux-surface); border:1px solid var(--lux-border); box-shadow:var(--lux-shadow-lg); color:var(--lux-ink);
    animation:toastIn .3s cubic-bezier(.2,.8,.2,1); }
.lux-toast.out { animation:toastOut .3s forwards; }
.lux-toast__ic { width:34px; height:34px; border-radius:10px; display:grid; place-items:center; color:#fff; flex:0 0 34px; font-size:16px; }
.lux-toast--ok .lux-toast__ic{background:var(--lux-ok);} .lux-toast--info .lux-toast__ic{background:var(--lux-primary);}
.lux-toast--warn .lux-toast__ic{background:var(--lux-warn);} .lux-toast--err .lux-toast__ic{background:var(--lux-danger);}
.lux-toast .tt { font-weight:700; font-size:13px; } .lux-toast .ds { font-size:12px; color:var(--lux-muted); }
@keyframes toastIn { from{opacity:0; transform:translateX(40px);} to{opacity:1; transform:none;} }
@keyframes toastOut { to{opacity:0; transform:translateX(40px);} }

/* ============================ drawer scaffold ============================ */
.lux-drawer { position:fixed; inset:0 0 0 auto; width:min(420px,92vw); z-index:2050; transform:translateX(100%); transition:transform .3s cubic-bezier(.2,.8,.2,1);
    background:var(--lux-surface); border-left:1px solid var(--lux-border); box-shadow:var(--lux-shadow-lg); display:flex; flex-direction:column; }
.lux-drawer.open { transform:none; }
.lux-drawer__head { display:flex; align-items:center; justify-content:space-between; padding:18px 20px; border-bottom:1px solid var(--lux-border); }
.lux-drawer__head h3 { margin:0; font-size:15px; font-weight:800; }
.lux-drawer__body { padding:20px; overflow-y:auto; }
.lux-scrim { position:fixed; inset:0; z-index:2040; background:rgba(15,23,42,.4); -webkit-backdrop-filter:blur(2px); backdrop-filter:blur(2px); display:none; }
.lux-scrim.open { display:block; }

/* confetti / particles canvases */
#luxParticles { position:fixed; inset:0; z-index:0; pointer-events:none; }
#luxConfetti { position:fixed; inset:0; z-index:3000; pointer-events:none; }

/* ============================================================================
   LEGACY → LUX content adapter
   Restyles the old AdminBSB markup (.content/.block-header/.card/.btn/
   .form-control/tables) used by every PlMasterPage inner page, so all
   side-menu pages adopt the LUX look with zero per-page edits.
   Scoped to body.lux-app .content (the dashboard uses .lux-page, untouched).
============================================================================ */
body.lux-app .content { color:var(--lux-ink); }

/* page header */
body.lux-app .content .block-header { padding:4px 2px 16px; }
body.lux-app .content .block-header h2 { font-size:23px; font-weight:800; letter-spacing:-.02em; color:var(--lux-ink); margin:0 0 6px; }
body.lux-app .content .block-header .breadcrumb { background:transparent !important; padding:0; margin:0; font-size:12.5px; }
body.lux-app .content .block-header .breadcrumb a { color:var(--lux-muted); }
body.lux-app .content .block-header .breadcrumb .active,
body.lux-app .content .block-header .breadcrumb-item.active { color:var(--lux-ink); }
body.lux-app .content .mobile_menu,
body.lux-app .content .right_icon_toggle_btn { display:none !important; }

/* cards */
body.lux-app .content .card { background:var(--lux-surface) !important; border:1px solid var(--lux-border) !important;
    border-radius:var(--lux-radius) !important; box-shadow:var(--lux-shadow) !important; margin-bottom:var(--lux-gap); overflow:hidden; }
body.lux-app .content .card > .header { padding:16px 20px; border-bottom:1px solid var(--lux-border); background:transparent; }
body.lux-app .content .card > .header h2 { font-size:14px; font-weight:800; letter-spacing:.01em; color:var(--lux-ink); margin:0; text-transform:none; }
body.lux-app .content .card > .header h2 small { color:var(--lux-muted); display:block; font-weight:500; margin-top:3px; }
body.lux-app .content .card > .body { padding:20px; color:var(--lux-ink-2); }

/* buttons */
body.lux-app .content .btn { border-radius:11px !important; font-weight:700; font-size:13px; padding:9px 16px; border:1px solid transparent; box-shadow:none !important; transition:transform .18s, filter .18s; }
body.lux-app .content .btn:hover { transform:translateY(-1px); filter:brightness(1.04); }
body.lux-app .content .btn-primary { background:linear-gradient(135deg,var(--lux-primary),var(--lux-primary-2)) !important; border-color:transparent !important; color:#fff !important; }
body.lux-app .content .btn-success { background:linear-gradient(135deg,#059669,#10b981) !important; color:#fff !important; }
body.lux-app .content .btn-danger  { background:linear-gradient(135deg,#dc2626,#ef4444) !important; color:#fff !important; }
body.lux-app .content .btn-info    { background:linear-gradient(135deg,#0891b2,#06b6d4) !important; color:#fff !important; }
body.lux-app .content .btn-warning { background:linear-gradient(135deg,#d97706,#f59e0b) !important; color:#fff !important; }
body.lux-app .content .btn-default { background:var(--lux-surface) !important; border-color:var(--lux-border) !important; color:var(--lux-ink-2) !important; }

/* forms */
body.lux-app .content .form-control,
body.lux-app .content input[type=text],
body.lux-app .content input[type=password],
body.lux-app .content input[type=email],
body.lux-app .content input[type=number],
body.lux-app .content input[type=date],
body.lux-app .content select,
body.lux-app .content textarea {
    border:1.5px solid var(--lux-border-2) !important; border-radius:11px !important; background:var(--lux-surface-2) !important;
    color:var(--lux-ink) !important; padding:10px 13px !important; font-size:14px; box-shadow:none !important; height:auto !important; }
body.lux-app .content .form-control:focus,
body.lux-app .content select:focus,
body.lux-app .content textarea:focus { border-color:var(--lux-primary) !important; background:var(--lux-surface) !important; box-shadow:var(--lux-ring) !important; }
body.lux-app .content label { color:var(--lux-ink-2); font-weight:600; font-size:13px; }
body.lux-app .content .form-group { margin-bottom:16px; }

/* tables / gridviews */
body.lux-app .content table.table, body.lux-app .content .table { width:100%; border-collapse:collapse; }
body.lux-app .content table.table th, body.lux-app .content .table th,
body.lux-app .content .gridheader, body.lux-app .content .gridheader th, body.lux-app .content tr.gridheader td {
    background:var(--lux-surface-2) !important; color:var(--lux-muted) !important; font-size:11px !important; text-transform:uppercase;
    letter-spacing:.06em; font-weight:700 !important; padding:11px 12px !important; border:none !important;
    border-bottom:1px solid var(--lux-border) !important; text-align:left; }
body.lux-app .content table.table td, body.lux-app .content .table td,
body.lux-app .content .griditems td, body.lux-app .content .griditems {
    color:var(--lux-ink-2) !important; padding:10px 12px !important; border:none !important;
    border-bottom:1px solid var(--lux-border) !important; font-size:13.5px !important; background:transparent !important; }
body.lux-app .content .table tr:hover td, body.lux-app .content .griditems:hover td { background:var(--lux-surface-2) !important; }
body.lux-app .content a { color:var(--lux-primary); }
body.lux-app .content .badge { border-radius:20px; padding:4px 10px; font-weight:600; }
body.lux-app .content .alert { border-radius:12px; }

/* responsive sidebar */
@media (max-width:992px){
    .lux-side { transform:translateX(-100%); }
    body.lux-open .lux-side { transform:none; }
    .lux-main { margin-left:0; }
    .lux-cmd-trigger { min-width:auto; } .lux-cmd-trigger span { display:none; }
    .lux-ticker { display:none; }
}

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