/* ===== CACBD LMS – Shared UI ===== */

/* ---- Tokens ---- */
:root{
  --nav-bg: rgba(12,16,32,0.7);
  --nav-line:#1f2937;
  --nav-text:#e5e7eb;
  --nav-muted:#94a3b8;
  --nav-accent:#0ea5e9;
  --nav-sep:#22304f;

  --bg0:#070b18;
  --bg1:#0b1022;
  --bg2:#0f1731;
  --glass: rgba(255,255,255,.04);
  --line:#1e2a44;
  --muted:#93a3be;
  --text:#e8eef6;
  --accent:#33b1ff;
  --accent-2:#0ea5e9;
  --ok:#10b981;
  --warn:#f59e0b;
  --err:#ef4444;
  --shadow: 0 10px 30px rgba(0,0,0,.35);
  --radius-lg:16px;
  --radius-md:12px;
  --radius-sm:10px;
  --focus-ring: 0 0 0 3px rgba(51,177,255,.25);
  --topbar-h: 56px;
}

/* ---- Base ---- */
html,body{height:100%;margin:0}
body{
  background:
    radial-gradient(1200px 600px at 80% -10%, #142048 0%, transparent 60%),
    radial-gradient(900px 600px at -10% 20%, #0f1c3b 0%, transparent 55%),
    linear-gradient(180deg,#081024 0%, #0b1226 40%, #0b1226 100%);
  color:var(--text);
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, sans-serif;
}
a{color:var(--accent)}
*{box-sizing:border-box}

/* ---- Page layout helpers ---- */
.page{min-height:calc(100vh - var(--topbar-h))}
.wrap{max-width:1200px;margin:0 auto;padding:24px 16px 44px}
.sp{flex:1}

/* ---- Topbar + Nav ---- */
.topbar-wrap{ position: sticky; top: 0; z-index: 1000; backdrop-filter: blur(12px); }
.topbar{
  display:flex; align-items:center; gap:12px;
  padding:14px 16px; border-bottom:1px solid var(--nav-line);
  background:linear-gradient(135deg,#0b1022,#1f2937);
  color:var(--nav-text);
  box-shadow: 0 6px 18px rgba(0,0,0,.25);
  min-height: var(--topbar-h);
}
.topbar img{height:34px}

.nav{display:flex; gap:16px; flex-wrap:wrap; margin-left:14px; align-items:center}
.nav a{
  color:#e5e7eb; text-decoration:none; padding:6px 0;
  text-transform: uppercase; letter-spacing:.03em;
  border:0; background:transparent; font-size:12px;
}
.nav a:hover{ text-decoration: underline; text-underline-offset: 3px; }
.nav a.a{ color:#fff; text-decoration: underline; text-underline-offset: 3px; }
.nav-spacer{ width:1px; height:18px; background:var(--nav-sep); margin:0 6px; display:inline-block; }

/* Auth buttons (compact) */
.btn{
  background:var(--nav-accent); border:0; color:#fff; border-radius:8px;
  padding:6px 8px; text-decoration:none; cursor:pointer; font-size:12px; line-height:1.1;
}
.btn.gray{background:#334155}
.auth-ctl{ position: relative; display: grid; gap:6px; align-items:center; grid-template-columns: 64px 64px; }
.btn-fixed{ width:64px; text-align:center; }

/* Login popover */
#loginPanel{
  display:none; position:absolute; right:0; top:calc(100% + 6px);
  background:#0b1324; border:1px solid #1f2438;
  padding:12px; border-radius:12px; z-index:1010; width: 280px;
}
#loginPanel input{
  width:100%; padding:8px; border-radius:10px; border:1px solid #1f2438; background:#0a1221; color:#e5e7eb
}
#loginPanel .btn{ padding:6px 10px; font-size:12px; border-radius:8px; }

/* Mobile nav */
.burger{ display:none; background:transparent; border:1px solid #1f2438; color:#e5e7eb; border-radius:10px; padding:8px; cursor:pointer }
.burger svg{width:20px;height:20px;display:block}
.drawer{
  position:absolute; left:0; right:0; top:100%;
  background:rgba(9,12,22,.95); border-bottom:1px solid #1f2438;
  transform: translateY(-120%); transition: transform .2s ease; z-index:1005;
}
.drawer.open{ transform: translateY(0); }
.drawer .navcol{
  display:grid; grid-template-columns:1fr; gap:0; padding:8px 0;
  text-transform: uppercase; letter-spacing:.03em;
}
.drawer .navcol a{
  display:block; padding:12px 16px; color:#e5e7eb; text-decoration:none; border-top:1px solid rgba(255,255,255,.06); font-size:12px;
}
.drawer .navcol a:first-child{ border-top:0; }
.drawer .navcol a:hover{ background:#0b1324; text-decoration: underline; text-underline-offset: 3px; }
.drawer .auth{display:grid; gap:8px; padding:10px 16px 16px}
.drawer .auth input{ padding:10px; border-radius:10px; border:1px solid #1f2438; background:#0a1221; color:#e5e7eb }

@media (max-width: 980px){
  .nav{display:none}
  .burger{display:inline-flex}
}

/* ---- Components (cards, forms, grids) ---- */
.header{
  background: linear-gradient(180deg, rgba(255,255,255,.04), rgba(255,255,255,0));
  border: 1px solid var(--line); border-radius: var(--radius-lg);
  padding: 18px; box-shadow: var(--shadow);
  display: grid; grid-template-columns: auto 1fr auto; gap: 16px; align-items: center;
  position: relative; overflow: hidden;
}
.header::after{
  content:""; position:absolute; inset:-1px;
  background: radial-gradient(500px 180px at 80% -60px, rgba(51,177,255,.12), transparent 60%);
  pointer-events:none;
}
.avatar{
  width:64px; height:64px; border-radius: 16px; display:grid; place-items:center;
  background: linear-gradient(135deg, #123, #1b2a49);
  border:1px solid var(--line); font-weight:700; font-size:22px; color:#dff2ff; box-shadow: 0 6px 16px rgba(0,0,0,.35);
}
.role-pills{display:flex; gap:6px; flex-wrap:wrap; margin-top:6px}
.pill{
  display:inline-flex; align-items:center; gap:6px; padding:6px 10px;
  background:rgba(255,255,255,.04); border:1px solid var(--line); color:#cfe4ff;
  border-radius:999px; font-size:12px;
}

.grid{ display:grid; gap:16px; margin-top:16px; grid-template-columns: 1.2fr 1fr; }
@media (max-width:980px){ .grid{ grid-template-columns:1fr } }

.card{
  background: linear-gradient(180deg, rgba(255,255,255,.035), rgba(255,255,255,.02));
  border: 1px solid var(--line); border-radius: var(--radius-lg); padding: 16px; box-shadow: var(--shadow);
  position:relative; overflow:hidden;
}
.card h2{margin:0 0 12px;font-size:18px;letter-spacing:.2px}
.meta{font-size:12px;color:var(--muted);margin-bottom:8px}
.divider{border:0;border-top:1px solid var(--line);margin:16px -16px}

.row{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.row3{display:grid;grid-template-columns:1fr 1fr 1fr;gap:12px}
@media (max-width:720px){ .row,.row3{grid-template-columns:1fr} }

label{display:block;font-size:12px;color:var(--muted);margin:6px 0 8px}
input,select,textarea{
  width:100%;padding:12px;border-radius:12px;border:1px solid var(--line);
  background: linear-gradient(180deg, #0a1326, #0a1221);
  color:var(--text);font-size:14px;outline:none; transition: box-shadow .15s, border-color .15s;
}
input:focus,select:focus,textarea:focus{ box-shadow: var(--focus-ring); border-color: #2a64c7; }
textarea{min-height:96px;resize:vertical}
.actions{margin-top:12px;display:flex;gap:8px;flex-wrap:wrap}
.btn.ok{background:linear-gradient(180deg,#38e1b2,#10b981);color:#021911}
.btn.warn{background:linear-gradient(180deg,#ffb84d,#f59e0b);color:#241500}
.btn.gray{background:#334155;color:#fff}
.status{margin-top:10px;font-size:13px}
.status.ok{color:var(--ok)} .status.err{color:var(--err)} .status.warn{color:var(--warn)}
.tiny{ font-size:12px; color:var(--muted); }

/* ---- Skeletons ---- */
.sk{position:relative; overflow:hidden; background: rgba(255,255,255,.05); border:1px solid var(--line); border-radius:12px; min-height:44px}
.sk::after{
  content:""; position:absolute; inset:0;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.06), transparent);
  transform: translateX(-100%); animation: shimmer 1.2s infinite;
}
@keyframes shimmer { 100%{ transform: translateX(100%);} }

/* ---- Toast ---- */
.toast{
  position:fixed; right:16px; bottom:16px; z-index: 1200;
  background: #0e172d; border:1px solid var(--line); color:var(--text);
  padding:10px 12px; border-radius:12px; box-shadow: var(--shadow);
  display:flex; align-items:center; gap:10px; min-width: 220px;
  transform: translateY(12px); opacity: 0; animation: toastIn .25s ease forwards;
}
.toast.ok{ border-color: rgba(16,185,129,.35); }
.toast.err{ border-color: rgba(239,68,68,.35); }
@keyframes toastIn { to { transform: translateY(0); opacity:1; } }