/* ========= EdenCampus • ELMS UI ========= */
:root{
  --bg:#f6f7fb; --panel:#ffffff; --line:#e9ecf2; --text:#0f172a; --muted:#64748b;
  --brand:#6d28d9; --brand-600:#5b21b6; --brand-100:#ede9fe;
  --ok:#16a34a; --warn:#dc2626; --info:#2563eb;
  --shadow:0 8px 24px rgba(15,23,42,.06);
  --radius:14px; --radius-sm:10px;
  --space:16px; --space-sm:10px; --space-lg:22px;
}
*{box-sizing:border-box}
html,body{height:100%}
body{margin:0;background:var(--bg);color:var(--text);font:14px/1.6 system-ui,Segoe UI,Arial,sans-serif}

/* Layout */
.page{display:flex;min-height:100vh}
.sidebar{
  width:250px;background:#0f172a;color:#cbd5e1;display:flex;flex-direction:column;
  box-shadow:inset -1px 0 0 #1e293b;
}
.side-head{padding:18px var(--space);font-weight:800;font-size:20px;border-bottom:1px solid #1e293b}
.who{padding:10px var(--space);font-size:12px;border-bottom:1px solid #1e293b;letter-spacing:.03em}
.nav{padding:6px}
.nav a{
  display:flex;gap:10px;align-items:center;padding:10px 14px;border-left:3px solid transparent;
  color:#cbd5e1;text-decoration:none;border-radius:8px
}
.nav a:hover{background:#111827}
.nav a.active{background:#111827;border-left-color:var(--brand);color:#fff}

.content{flex:1;display:flex;flex-direction:column}
.topbar{
  height:58px;background:var(--panel);border-bottom:1px solid var(--line);
  display:flex;align-items:center;justify-content:space-between;padding:0 var(--space)
}
.crumb{font-weight:800;font-size:26px}
.when{color:var(--muted);font-size:12px}
.wrap{max-width:1250px;margin:0 auto;padding:var(--space)}

/* Cards */
.cards{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--space)}
.card{
  background:var(--panel);border:1px solid var(--line);border-radius:var(--radius);
  padding:var(--space); box-shadow:var(--shadow)
}
.card--stat{display:flex;align-items:center;gap:14px}
.stat-icon{
  width:40px;height:40px;border-radius:12px;background:var(--brand-100);display:grid;place-items:center;
  border:1px solid #e9d5ff
}
.stat-title{font-size:12px;color:var(--muted);letter-spacing:.06em;text-transform:uppercase}
.stat-value{font-size:32px;font-weight:800;margin-top:4px}
.stat-sub{color:var(--muted);font-size:12px}

/* Grid & sections */
.grid{display:grid;grid-template-columns:1.2fr .8fr;gap:var(--space);margin-top:var(--space)}
.section-title{font-size:26px;font-weight:800;margin:12px 0}

/* Tables */
.table{width:100%;border-collapse:collapse;background:var(--panel);border:1px solid var(--line);
  border-radius:var(--radius);overflow:hidden;box-shadow:var(--shadow)}
.table th,.table td{padding:12px;border-bottom:1px solid var(--line);text-align:left}
.table th{background:#fafafa;color:#0f172a;font-weight:700}
.row-action{text-align:right}
.muted{color:var(--muted)}

/* Buttons & badges */
.btn{display:inline-flex;align-items:center;gap:8px;padding:8px 12px;border:1px solid var(--line);
  background:#fff;border-radius:10px;text-decoration:none;cursor:pointer}
.btn.brand{border-color:var(--brand);background:var(--brand-100)}
.btn.primary{background:var(--brand);border-color:var(--brand);color:#fff}
.badge{display:inline-block;padding:4px 10px;border-radius:999px;font-size:12px;border:1px solid var(--line);background:#f8fafc}
.badge.ok{border-color:#bbf7d0;background:#ecfdf5;color:#166534}
.badge.warn{border-color:#fecaca;background:#fef2f2;color:#991b1b}
.badge.info{border-color:#bfdbfe;background:#eff6ff;color:#1e40af}

/* Footer */
.footer{color:var(--muted);text-align:center;margin:24px 0}

/* Responsive */
@media (max-width: 1080px){
  .cards{grid-template-columns:repeat(2,1fr)}
  .grid{grid-template-columns:1fr}
}
@media (max-width: 780px){
  .sidebar{display:none}
  .cards{grid-template-columns:1fr}
}




/* ==== ELMS quick layout polish (lecturer) ==== */
.page { display:flex; min-height:100dvh; }
.sidebar { width:264px; background:#0f172a; color:#eef2ff; position:fixed; inset:0 auto 0 0; }
.content { margin-left:264px; width:calc(100% - 264px); }
.topbar { display:flex; justify-content:space-between; align-items:center; padding:16px 20px; }
.wrap { max-width:1120px; margin:8px auto 48px; padding:0 16px; }
.cards { display:grid; grid-template-columns:repeat(4,1fr); gap:14px; }
.card { background:#fff; border:1px solid #e5e7eb; border-radius:14px; padding:16px; }
.card--stat { display:flex; gap:14px; align-items:center; }
.stat-title { font-size:12px; text-transform:uppercase; letter-spacing:.08em; color:#6b7280; }
.stat-value { font-size:24px; line-height:1.2; font-weight:800; color:#111827; }
.grid { display:grid; grid-template-columns:1.3fr .7fr; gap:16px; margin-top:16px; }
.table { width:100%; border-collapse:separate; border-spacing:0; }
.table th, .table td { padding:10px 12px; border-bottom:1px solid #f1f5f9; }
.btn { display:inline-block; padding:8px 12px; border-radius:10px; border:1px solid #e5e7eb; background:#fff; }
.btn.brand { border-color:#e9d5ff; background:#faf5ff; color:#5b21b6; font-weight:600; }
.badge.info { background:#eff6ff; color:#1d4ed8; padding:2px 8px; border-radius:999px; font-size:12px; }
.footer { color:#94a3b8; text-align:center; margin-top:24px; }
@media (max-width: 1200px){ .cards{grid-template-columns:repeat(2,1fr);} .grid{grid-template-columns:1fr;} .content{margin-left:0;width:100%} .sidebar{position:static;width:100%} }




