/* Rongeen Classroom — Premium SaaS Design System */
:root {
  --primary: #6C3EF4;
  --primary-dark: #5A2EE0;
  --primary-soft: #EFE9FE;
  --success: #22C55E;
  --success-soft: #DCFCE7;
  --danger: #EF4444;
  --danger-soft: #FEE2E2;
  --warning: #F59E0B;
  --warning-soft: #FEF3C7;
  --info: #3B82F6;
  --info-soft: #DBEAFE;
  --bg: #F8F9FC;
  --surface: #FFFFFF;
  --text: #1F2937;
  --text-muted: #6B7280;
  --text-light: #9CA3AF;
  --border: #E5E7EB;
  --border-light: #F1F3F7;
  --sidebar-bg: #0E0F1A;
  --sidebar-hover: #1A1C2B;
  --sidebar-text: #C9CCD8;
  --sidebar-muted: #8A8FA3;
  --shadow-sm: 0 1px 2px rgba(17,24,39,.04);
  --shadow-md: 0 4px 16px rgba(17,24,39,.06);
  --shadow-lg: 0 12px 32px rgba(17,24,39,.08);
  --radius: 16px;
  --radius-sm: 10px;
  --radius-lg: 20px;
}

* { box-sizing: border-box; }
html, body { height: 100%; }
body {
  font-family: 'Manrope', system-ui, -apple-system, sans-serif;
  background: var(--bg);
  color: var(--text);
  font-size: 14px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  margin: 0;
}

a { color: var(--primary); text-decoration: none; }
a:hover { color: var(--primary-dark); }

/* ---------- Layout Shell ---------- */
.app-shell { display: flex; min-height: 100vh; }
.sidebar {
  width: 260px;
  background: var(--sidebar-bg);
  color: var(--sidebar-text);
  display: flex;
  flex-direction: column;
  position: sticky;
  top: 0;
  height: 100vh;
  flex-shrink: 0;
  padding: 20px 16px;
  z-index: 40;
}
.sidebar-brand {
  display: flex; align-items: center; gap: 10px;
  padding: 4px 8px 20px;
}
.sidebar-brand .logo-mark {
  width: 38px; height: 38px; border-radius: 10px;
  background: linear-gradient(135deg,#6C3EF4,#F59E0B);
  display:flex; align-items:center; justify-content:center;
  color:#fff; font-weight:800; font-size:18px;
  box-shadow: 0 6px 16px rgba(108,62,244,.35);
}
.sidebar-brand .brand-text { line-height: 1.1; }
.sidebar-brand .brand-text b { color: #fff; font-size: 16px; font-weight: 800; letter-spacing:.2px; display:block;}
.sidebar-brand .brand-text span { color: var(--sidebar-muted); font-size: 12px; }

.sidebar-profile {
  display:flex; align-items:center; gap:10px;
  padding: 10px; margin-bottom: 12px;
  background: rgba(255,255,255,.04);
  border-radius: 12px;
}
.sidebar-profile img, .sidebar-profile .avatar-fallback {
  width: 38px; height: 38px; border-radius: 50%;
  background: linear-gradient(135deg,#6C3EF4,#22C55E);
  color:#fff; display:flex;align-items:center;justify-content:center;
  font-weight:700; font-size:14px;
}
.sidebar-profile .info { flex:1; line-height:1.15; overflow:hidden; }
.sidebar-profile .info b { color:#fff; font-size:13px; display:block; }
.sidebar-profile .info span { color: var(--sidebar-muted); font-size:11px; }
.sidebar-profile .bi { color: var(--sidebar-muted); }

.sidebar-nav { flex: 1; overflow-y: auto; margin-top: 4px; }
.sidebar-nav::-webkit-scrollbar { width: 4px; }
.sidebar-nav::-webkit-scrollbar-thumb { background: #24263a; border-radius: 4px; }
.nav-section-title {
  color: var(--sidebar-muted); font-size: 10px; font-weight: 700;
  text-transform: uppercase; letter-spacing:.8px;
  padding: 14px 12px 6px;
}
.nav-link-item {
  display: flex; align-items: center; gap: 12px;
  padding: 10px 12px; margin: 2px 0;
  border-radius: 10px;
  color: var(--sidebar-text);
  font-size: 13.5px; font-weight: 500;
  transition: all .18s ease;
  cursor: pointer;
}
.nav-link-item .bi { font-size: 17px; }
.nav-link-item:hover { background: var(--sidebar-hover); color:#fff; }
.nav-link-item.active {
  background: linear-gradient(135deg, var(--primary), var(--primary-dark));
  color: #fff; box-shadow: 0 8px 20px rgba(108,62,244,.35);
}
.nav-link-item .badge-count {
  margin-left:auto; background: var(--primary); color:#fff;
  padding: 2px 8px; border-radius: 999px; font-size: 11px; font-weight: 700;
}
.nav-link-item.active .badge-count { background: rgba(255,255,255,.25); }
.nav-sub {
  padding-left: 32px; margin: 2px 0;
  display: flex; align-items:center; gap: 8px;
  color: var(--sidebar-muted); font-size: 12.5px; padding-top:6px; padding-bottom:6px;
  border-radius: 8px;
}
.nav-sub::before { content:''; width:6px; height:6px; border-radius:50%; background:#3a3d55; }
.nav-sub:hover { color:#fff; }
.nav-sub.active { color: var(--primary); }
.nav-sub.active::before { background: var(--primary); }

.sidebar-footer { padding-top: 12px; border-top: 1px solid rgba(255,255,255,.06); }
.logout-btn {
  display:flex; align-items:center; gap:10px;
  padding: 12px; width:100%;
  background: rgba(255,255,255,.04);
  border: 1px solid rgba(255,255,255,.06);
  color: var(--sidebar-text); border-radius:12px; font-weight:600; font-size:13px;
  cursor:pointer; transition: all .2s;
}
.logout-btn:hover { background: rgba(239,68,68,.15); color:#fff; border-color: rgba(239,68,68,.4);}

/* ---------- Main content ---------- */
.main-wrap { flex: 1; min-width: 0; display:flex; flex-direction:column; }
.topbar {
  background: var(--surface);
  border-bottom: 1px solid var(--border);
  padding: 14px 28px;
  display: flex; align-items:center; gap: 20px;
  position: sticky; top: 0; z-index: 30;
}
.page-title { font-size: 20px; font-weight: 800; color: var(--text); margin: 0; }
.breadcrumb-row { font-size: 12.5px; color: var(--text-muted); display:flex; align-items:center; gap:6px; margin-top:2px; }
.breadcrumb-row .bi { font-size: 10px; }
.breadcrumb-row a { color: var(--text-muted); }
.breadcrumb-row .active { color: var(--primary); font-weight:600; }

.top-search {
  position: relative; margin-left:auto; min-width: 280px;
}
.top-search input {
  width: 100%;
  padding: 10px 14px 10px 38px;
  border-radius: 10px; border: 1px solid var(--border);
  background: var(--bg); font-size: 13px;
}
.top-search .bi { position: absolute; left: 14px; top: 50%; transform: translateY(-50%); color: var(--text-light); }

.icon-btn {
  width: 40px; height: 40px; border-radius: 10px;
  border: 1px solid var(--border); background: var(--surface);
  display: inline-flex; align-items:center; justify-content:center;
  color: var(--text-muted); cursor:pointer; position:relative;
  transition: all .15s;
}
.icon-btn:hover { color: var(--primary); border-color: var(--primary); }
.icon-btn .dot {
  position: absolute; top: 8px; right: 8px;
  width: 8px; height: 8px; border-radius: 50%;
  background: var(--danger); border: 2px solid var(--surface);
}
.top-user {
  display:flex; align-items:center; gap:8px;
  padding: 4px 12px 4px 4px;
  border: 1px solid var(--border); border-radius: 999px;
  cursor: pointer;
}
.top-user .avatar-fallback {
  width:32px; height:32px; border-radius:50%;
  background: linear-gradient(135deg,#6C3EF4,#5A2EE0);
  color:#fff; display:flex;align-items:center;justify-content:center;
  font-weight:700; font-size:12px;
}
.top-user .bi-chevron-down { color: var(--text-muted); font-size:12px; }

.page-body { padding: 24px 28px 40px; }

/* ---------- Cards ---------- */
.card-x {
  background: var(--surface);
  border: 1px solid var(--border-light);
  border-radius: var(--radius);
  box-shadow: var(--shadow-sm);
  padding: 20px;
}

.card-header-x {
  display:flex; align-items:center; justify-content:space-between;
  margin-bottom: 16px;
}
.card-title-x { font-size: 15px; font-weight: 700; color: var(--text); margin:0; }
.card-sub-x { font-size: 12px; color: var(--text-muted); }

/* Stat cards */
.stat-card {
  background: var(--surface);
  border: 1px solid var(--border-light);
  border-radius: var(--radius);
  padding: 18px 20px;
  display: flex; align-items:center; gap: 14px;
  transition: all .2s;
}
.stat-card:hover { box-shadow: var(--shadow-md); transform: translateY(-1px); }
.stat-icon {
  width: 52px; height: 52px; border-radius: 14px;
  display:flex; align-items:center; justify-content:center;
  font-size: 22px; flex-shrink:0;
}
.stat-icon.primary { background: var(--primary-soft); color: var(--primary); }
.stat-icon.success { background: var(--success-soft); color: var(--success); }
.stat-icon.danger  { background: var(--danger-soft);  color: var(--danger);  }
.stat-icon.warning { background: var(--warning-soft); color: var(--warning); }
.stat-icon.info    { background: var(--info-soft);    color: var(--info);    }
.stat-icon.pink    { background: #FCE7F3; color: #DB2777; }
.stat-body .label { font-size: 12.5px; color: var(--text-muted); font-weight: 500;}
.stat-body .value { font-size: 22px; font-weight: 800; color: var(--text); margin: 2px 0; }
.stat-body .trend { font-size: 11.5px; font-weight: 600; }
.stat-body .trend.up { color: var(--success); }
.stat-body .trend.down { color: var(--danger); }
.stat-body .trend.muted { color: var(--text-muted); }

/* ---------- Buttons ---------- */
.btn-x {
  display: inline-flex; align-items:center; justify-content:center; gap: 8px;
  padding: 10px 18px;
  font-size: 13.5px; font-weight: 600;
  border-radius: 10px;
  border: 1px solid transparent;
  cursor: pointer;
  transition: all .18s ease;
  white-space: nowrap;
  line-height: 1;
  
}
.btn-primary-x { background: linear-gradient(135deg, var(--primary), var(--primary-dark)); color:#fff; box-shadow: 0 6px 14px rgba(108,62,244,.28); }
.btn-primary-x:hover { transform: translateY(-1px); box-shadow: 0 10px 22px rgba(108,62,244,.36); color:#fff; }
.btn-secondary-x { background: var(--surface); color: var(--text); border-color: var(--border);width: -webkit-fill-available; }
.btn-secondary-x:hover { border-color: var(--primary); color: var(--primary); }
.btn-outline-x { background: transparent; color: var(--primary); border-color: var(--primary); }
.btn-outline-x:hover { background: var(--primary); color: #fff; }
.btn-success-x { background: var(--success); color: #fff; }
.btn-danger-x  { background: var(--danger);  color: #fff; }
.btn-ghost-x   { background: transparent; color: var(--text-muted); }
.btn-ghost-x:hover { color: var(--primary); background: var(--primary-soft); }
.btn-sm-x { padding: 7px 12px; font-size: 12.5px; border-radius: 8px; }
.btn-icon-x { width: 36px; height: 36px; padding:0; border-radius: 10px; }

/* ---------- Forms ---------- */
.form-label-x { font-size: 12.5px; font-weight: 600; color: var(--text); margin-bottom: 6px; display:block; }
.form-label-x .req { color: var(--danger); }
.input-x {
  width: 100%;
  padding: 11px 14px;
  font-size: 13.5px;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: var(--surface);
  color: var(--text);
  transition: all .15s;
  font-family: inherit;
}
.input-x:focus { outline: none; border-color: var(--primary); box-shadow: 0 0 0 3px rgba(108,62,244,.12); }
.input-x::placeholder { color: var(--text-light); }
.input-icon-wrap { position: relative; }
.input-icon-wrap .bi { position: absolute; left: 14px; top: 50%; transform: translateY(-50%); color: var(--text-light); }
.input-icon-wrap .input-x { padding-left: 40px; }
.select-x {
  width: 100%; padding: 11px 14px; border-radius: 10px;
  border: 1px solid var(--border); background: var(--surface);
  font-size: 13.5px; color: var(--text);
  appearance: none;
  background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 16 16' fill='%236B7280'%3e%3cpath d='M8 11L2 5h12z'/%3e%3c/svg%3e");
  background-repeat:no-repeat; background-position: right 14px center; padding-right: 36px;
}
.textarea-x { width:100%; padding:11px 14px; border:1px solid var(--border); border-radius:10px; font-family:inherit; font-size:13.5px; resize:vertical; min-height: 100px; }
.switch-x { position: relative; display: inline-block; width: 40px; height: 22px; }
.switch-x input { opacity:0; width:0; height:0; }
.switch-x .slider {
  position:absolute; inset:0; background:#D1D5DB; border-radius: 999px; cursor:pointer; transition:.2s;
}
.switch-x .slider::before {
  content:''; position:absolute; left:3px; top:3px; width:16px; height:16px;
  background:#fff; border-radius:50%; transition:.2s; box-shadow: 0 2px 4px rgba(0,0,0,.15);
}
.switch-x input:checked + .slider { background: var(--primary); }
.switch-x input:checked + .slider::before { transform: translateX(18px); }

/* ---------- Table ---------- */
.table-wrap {
  background: var(--surface); border-radius: var(--radius);
  border: 1px solid var(--border-light);
  overflow: hidden;
  box-shadow: var(--shadow-sm);
}
.table-x { width:100%; border-collapse: separate; border-spacing: 0; }
.table-x thead th {
  background: #FAFBFD; position: sticky; top:0;
  text-align: left; padding: 14px 20px;
  font-size: 11.5px; font-weight: 700; color: var(--text-muted);
  text-transform: uppercase; letter-spacing: .4px;
  border-bottom: 1px solid var(--border-light);
}
.table-x tbody td {
  padding: 14px 20px; font-size: 13.5px;
  border-bottom: 1px solid var(--border-light); color: var(--text);
  vertical-align: middle;
}
.table-x tbody tr:last-child td { border-bottom: none; }
.table-x tbody tr:hover { background: #FAFBFD; }

.avatar {
  width:36px; height:36px; border-radius:50%;
  display:inline-flex; align-items:center; justify-content:center;
  color:#fff; font-weight:700; font-size:13px; flex-shrink:0;
}
.avatar.sm { width:28px; height:28px; font-size:11px; }
.avatar.lg { width:56px; height:56px; font-size:18px; }
.avatar-cell { display:flex; align-items:center; gap:10px; }
.avatar-cell .name { font-weight:600; color: var(--text); }
.avatar-cell .sub { font-size: 11.5px; color: var(--text-muted); }

.badge-x {
  display:inline-flex; align-items:center; gap:5px;
  padding: 4px 10px; border-radius: 999px;
  font-size: 11.5px; font-weight: 600;
}
.badge-success { background: var(--success-soft); color: #15803d; }
.badge-danger  { background: var(--danger-soft);  color: #b91c1c; }
.badge-warning { background: var(--warning-soft); color: #b45309; }
.badge-info    { background: var(--info-soft);    color: #1d4ed8; }
.badge-primary { background: var(--primary-soft); color: var(--primary-dark); }
.badge-muted   { background: #F3F4F6; color: #4B5563; }
.badge-x .bi { font-size: 10px; }

.action-cell { display:flex; align-items:center; gap:6px; }

/* Pagination */
.pagination-x { display:flex; align-items:center; justify-content:space-between; padding: 16px 20px; }
.pagination-x .info { font-size: 12.5px; color: var(--text-muted); }
.pagination-x .pages { display:flex; gap:4px; }
.pagination-x .page-btn {
  width:34px; height:34px; border-radius:8px; display:inline-flex; align-items:center; justify-content:center;
  border:1px solid var(--border); background: var(--surface); color: var(--text-muted); cursor:pointer; font-size:12.5px; font-weight:600;
}
.pagination-x .page-btn.active { background: var(--primary); color:#fff; border-color: var(--primary); }
.pagination-x .page-btn:hover:not(.active) { border-color: var(--primary); color: var(--primary); }

/* Tabs */
.tabs-x { display:flex; gap: 4px; border-bottom: 1px solid var(--border); margin-bottom: 20px; }
.tab-x {
  padding: 12px 18px; font-size: 13.5px; font-weight: 600;
  color: var(--text-muted); cursor: pointer; border-bottom: 2px solid transparent;
  margin-bottom: -1px;
}
.tab-x.active { color: var(--primary); border-bottom-color: var(--primary); }
.tab-x:hover:not(.active) { color: var(--text); }

/* Login page */
.auth-shell {
  min-height: 100vh; display: grid; grid-template-columns: 30% 1fr;
  background: var(--bg);
}
.auth-visual {
  background: linear-gradient(135deg, #6C3EF4 0%, #5A2EE0 50%, #3B1FB8 100%);
  color: #fff; padding: 60px; position: relative; overflow: hidden;
  display:flex; flex-direction:column; justify-content:space-between;
}
.auth-visual::before {
  content:''; position:absolute; width: 500px; height:500px; border-radius:50%;
  background: radial-gradient(circle, rgba(255,255,255,.15), transparent 70%);
  top: -150px; right: -150px;
}
.auth-visual::after {
  content:''; position:absolute; width: 320px; height:320px; border-radius:50%;
  background: radial-gradient(circle, rgba(245,158,11,.25), transparent 70%);
  bottom: -80px; left: -80px;
}
.auth-visual .brand { display:flex; align-items:center; gap:12px; position:relative; z-index:1; }
.auth-visual .brand .logo-mark { width:44px; height:44px; border-radius:12px; background:rgba(255,255,255,.15); backdrop-filter:blur(10px); display:flex;align-items:center;justify-content:center; font-weight:800; font-size:20px;}
.auth-visual .brand b { font-size:18px; font-weight:800; }
.auth-visual .hero-text { position:relative; z-index:1; }
.auth-visual .hero-text h2 { font-size: 34px; font-weight: 800; line-height: 1.15; margin-bottom: 16px; }
.auth-visual .hero-text p { opacity:.85; font-size:15px; max-width: 420px; }
.auth-visual .stat-tiles { display:grid; grid-template-columns: repeat(3,1fr); gap:14px; position:relative; z-index:1; }
.auth-visual .stat-tile { background: rgba(255,255,255,.1); backdrop-filter:blur(10px); border:1px solid rgba(255,255,255,.15); border-radius: 14px; padding: 14px; }
.auth-visual .stat-tile .v { font-size:20px; font-weight:800; }
.auth-visual .stat-tile .l { font-size:11.5px; opacity:.8; }
.auth-form-wrap { display:flex; align-items:center; justify-content:center; padding: 40px; }
.auth-form { width: 100%; max-width: 420px; }
.auth-form h1 { font-size: 26px; font-weight:800; margin-bottom: 8px; }
.auth-form .subtitle { color: var(--text-muted); margin-bottom: 28px; font-size:14px; }
.google-btn {
  width:100%; padding: 11px 14px; border-radius:10px; border:1px solid var(--border);
  background: var(--surface); font-weight:600; font-size:13.5px;
  display:flex; align-items:center; justify-content:center; gap:10px; cursor:pointer;
}
.google-btn:hover { border-color: var(--primary); }
.auth-divider { display:flex; align-items:center; gap:12px; margin: 20px 0; color: var(--text-light); font-size: 12px; }
.auth-divider::before, .auth-divider::after { content:''; flex:1; height:1px; background: var(--border); }

/* Wizard / stepper */
.stepper { display:flex; align-items:center; margin-bottom: 28px; }
.stepper .step { display:flex; align-items:center; gap:10px; }
.stepper .step .num {
  width: 34px; height: 34px; border-radius: 50%;
  display:flex;align-items:center;justify-content:center;
  background: #F3F4F6; color: var(--text-muted); font-weight:700; font-size:13px;
}
.stepper .step.active .num { background: var(--primary); color:#fff; box-shadow: 0 6px 14px rgba(108,62,244,.3);}
.stepper .step.done .num { background: var(--success); color:#fff; }
.stepper .step .lbl { font-size: 13.5px; font-weight:600; color: var(--text-muted); }
.stepper .step.active .lbl, .stepper .step.done .lbl { color: var(--text); }
.stepper .line { flex:1; height: 2px; background: var(--border); margin: 0 14px; }
.stepper .line.done { background: var(--success); }

/* Timeline */
.timeline { position: relative; padding-left: 24px; }
.timeline::before { content:''; position:absolute; left: 7px; top: 4px; bottom: 4px; width: 2px; background: var(--border-light); }
.timeline .item { position:relative; padding-bottom: 20px; }
.timeline .item::before {
  content:''; position:absolute; left: -21px; top: 4px; width: 14px; height:14px; border-radius:50%;
  background: var(--surface); border: 3px solid var(--primary);
}
.timeline .item .t { font-size:11.5px; color: var(--text-muted); }
.timeline .item .h { font-weight:600; font-size:13.5px; }
.timeline .item .d { font-size:12.5px; color: var(--text-muted); }

/* Utility */
.grid-x { display: grid; gap: 16px; }
.gc-2 { grid-template-columns: repeat(2, minmax(0,1fr)); }
.gc-3 { grid-template-columns: repeat(3, minmax(0,1fr)); }
.gc-4 { grid-template-columns: repeat(4, minmax(0,1fr)); }
.gc-5 { grid-template-columns: repeat(5, minmax(0,1fr)); }
.gc-2-1 { grid-template-columns: 2fr 1fr; }
.gc-1-2 { grid-template-columns: 1fr 2fr; }

.flex-x { display:flex; gap:12px; align-items:center; }
.flex-between { display:flex; justify-content:space-between; align-items:center; gap: 12px; flex-wrap: wrap; }
.gap-8 { gap:8px; } .gap-12 { gap:12px; } .gap-16 { gap:16px; } .gap-20 { gap:20px; }
.mt-8 { margin-top:8px; } .mt-16 { margin-top:16px; } .mt-24 { margin-top:24px; }
.mb-8 { margin-bottom:8px; } .mb-16 { margin-bottom:16px; } .mb-24 { margin-bottom:24px; }
.text-muted-x { color: var(--text-muted); }
.text-light-x { color: var(--text-light); }
.text-danger-x { color: var(--danger); }
.text-success-x { color: var(--success); }
.text-warning-x { color: var(--warning); }
.text-primary-x { color: var(--primary); }
.fw-600 { font-weight:600; } .fw-700 { font-weight:700; } .fw-800 { font-weight:800; }
.fs-11 { font-size:11px; } .fs-12 { font-size:12px; } .fs-13 { font-size:13px; } .fs-16 { font-size:16px; } .fs-18 { font-size:18px; } .fs-22 { font-size:22px; }

/* Toast */
.toast-host { position: fixed; bottom: 24px; right: 24px; z-index: 100; display:flex; flex-direction: column; gap: 10px; }
.toast-x {
  background: var(--surface); border: 1px solid var(--border-light);
  border-radius: 12px; padding: 12px 16px; box-shadow: var(--shadow-lg);
  display:flex; align-items:center; gap:10px; min-width: 260px; font-size: 13px; font-weight: 500;
  border-left: 4px solid var(--primary);
  animation: slideIn .25s ease-out;
}
.toast-x.success { border-left-color: var(--success); }
.toast-x.danger  { border-left-color: var(--danger); }
@keyframes slideIn { from { transform: translateX(20px); opacity: 0; } to { transform:none; opacity:1; } }

/* Progress */
.progress-x { width:100%; height:8px; background: #F3F4F6; border-radius: 999px; overflow:hidden; }
.progress-x > span { display:block; height:100%; background: linear-gradient(90deg, var(--primary), #A78BFA); border-radius: 999px; }

/* Donut chart (CSS) */
.donut {
  width: 180px; height:180px; border-radius:50%;
  background: conic-gradient(var(--primary) 0 55%, #F59E0B 55% 70%, var(--danger) 70% 85%, var(--info) 85% 100%);
  display:flex; align-items:center; justify-content:center; position:relative;
}
.donut::after {
  content:''; width: 108px; height:108px; border-radius:50%; background: var(--surface);
  box-shadow: inset 0 0 0 1px var(--border-light);
}
.donut .center { position:absolute; text-align:center; }
.donut .center b { display:block; font-size: 20px; font-weight: 800; }
.donut .center span { font-size: 11px; color: var(--text-muted); }

/* Bar chart (CSS) */
.bar-chart { display:flex; align-items:flex-end; gap: 14px; height: 220px; padding: 12px 4px 0; }
.bar-chart .col { flex:1; display:flex; flex-direction:column; align-items:center; gap:6px; }
.bar-chart .col .bar { width: 100%; max-width: 32px; background: linear-gradient(180deg, var(--primary), #A78BFA); border-radius: 8px 8px 4px 4px; }
.bar-chart .col .bar.alt { background: linear-gradient(180deg, #F59E0B, #FCD34D); }
.bar-chart .col .lbl { font-size: 11px; color: var(--text-muted); font-weight:600; }

/* Line chart (CSS) */
.line-chart { position:relative; height: 220px; padding: 8px; }

/* Empty state */
.empty-x { text-align:center; padding: 40px 20px; color: var(--text-muted); }
.empty-x .bi { font-size: 42px; color: var(--text-light); margin-bottom: 8px; }

/* Responsive */
@media (max-width: 1200px) {
  .gc-5 { grid-template-columns: repeat(3, 1fr); }
  .gc-4 { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 900px) {
  .sidebar { position: fixed; left: -280px; transition: left .25s; }
  .sidebar.open { left: 0; }
  .auth-shell { grid-template-columns: 1fr; }
  .auth-visual { display: none; }
  .gc-3, .gc-2, .gc-5, .gc-4, .gc-2-1, .gc-1-2 { grid-template-columns: 1fr; }
  .topbar { padding: 14px 16px; }
  .page-body { padding: 16px; }
  .top-search { min-width: 0; flex:1; }
}

/* Modal */
.modal-backdrop-x { position: fixed; inset:0; background: rgba(15,17,32,.55); z-index: 90; display:flex; align-items:center; justify-content:center; padding: 20px; }
.modal-x { background: var(--surface); border-radius: var(--radius); max-width: 520px; width:100%; box-shadow: var(--shadow-lg); overflow:hidden; }
.modal-x .head { padding: 18px 20px; border-bottom: 1px solid var(--border-light); display:flex; align-items:center; justify-content:space-between;}
.modal-x .body { padding: 20px; }
.modal-x .foot { padding: 14px 20px; border-top: 1px solid var(--border-light); display:flex; justify-content:flex-end; gap: 8px; background: #FAFBFD;}

/* Program icon tiles */
.prog-icon { width:44px; height:44px; border-radius:12px; display:flex; align-items:center; justify-content:center; font-size:20px; }
.prog-icon.c1 { background: #EDE9FE; color:#7C3AED; }
.prog-icon.c2 { background: #FEE2E2; color:#DC2626; }
.prog-icon.c3 { background: #DBEAFE; color:#2563EB; }
.prog-icon.c4 { background: #FEF3C7; color:#D97706; }
.prog-icon.c5 { background: #DCFCE7; color:#16A34A; }
.prog-icon.c6 { background: #FCE7F3; color:#DB2777; }
.prog-icon.c7 { background: #E0F2FE; color:#0284C7; }
.prog-icon.c8 { background: #FEF9C3; color:#CA8A04; }

/* Schedule timeline (dashboard) */
.schedule-timeline { display:grid; grid-template-columns: repeat(5, 1fr); gap: 12px; }
.schedule-card {
  border: 1px solid var(--border-light); border-radius: 14px; padding: 14px;
  background: var(--surface); position: relative;
}
.schedule-card.c1 { background:#FEF3C7; }
.schedule-card.c2 { background:#EDE9FE; }
.schedule-card.c3 { background:#DCFCE7; }
.schedule-card.c4 { background:#FED7AA; }
.schedule-card.c5 { background:#DBEAFE; }
.schedule-card .b { font-weight: 800; font-size: 13.5px; line-height:1.2; }
.schedule-card .t { font-size: 12px; color: var(--text-muted); margin-top: 6px; }
.schedule-card .subj { font-weight:700; margin-top: 8px; font-size: 13.5px;}
.schedule-card .fac  { font-size: 12px; color: var(--text-muted); }

/* Choose card (attendance status) */
.choice-btn {
  padding: 6px 12px; border-radius: 8px; border:1px solid var(--border);
  background: var(--surface); font-size: 12.5px; font-weight:600; display:inline-flex; align-items:center; gap:6px;
  cursor:pointer; color: var(--text-muted);
}
.choice-btn.active.present { background: var(--success-soft); border-color: var(--success); color: #15803d; }
.choice-btn.active.absent  { background: var(--danger-soft); border-color: var(--danger); color: #b91c1c; }
.choice-btn.active.leave   { background: var(--warning-soft); border-color: var(--warning); color: #b45309; }

/* Preview chat bubble */
.chat-preview { background: #ECE5DD; border-radius: 14px; padding: 14px; }
.chat-bubble { background: #fff; border-radius: 10px; padding: 10px 12px; font-size: 12.5px; box-shadow: 0 1px 2px rgba(0,0,0,.05); }
.chat-bubble .time { font-size: 10px; color: var(--text-light); text-align:right; margin-top:4px; }

/* Radio pill */
.pill-choice { display:flex; gap:8px; }
.pill-choice label {
  flex:1; padding: 10px 12px; border:1px solid var(--border); border-radius:10px;
  display:flex; align-items:center; gap:8px; font-size:13px; font-weight:600; cursor:pointer;
  color: var(--text-muted);
}
.pill-choice input { display:none; }
.pill-choice input:checked + label { border-color: var(--primary); background: var(--primary-soft); color: var(--primary-dark); }

/* Small chip */
.chip { display:inline-flex; align-items:center; gap:6px; padding:4px 10px; border-radius:999px; background: var(--bg); border:1px solid var(--border); font-size:11.5px; font-weight:600; color: var(--text-muted); }

/* Section header */
.section-title { font-size: 18px; font-weight: 800; margin: 0 0 4px; }
.section-sub { font-size: 13px; color: var(--text-muted); margin: 0 0 20px; }

/* Setting tile */
.setting-tile { background: var(--surface); border:1px solid var(--border-light); border-radius: var(--radius); padding: 20px; display:flex; gap:14px; cursor:pointer; transition: all .2s; }
.setting-tile:hover { box-shadow: var(--shadow-md); transform: translateY(-1px); }
.setting-tile .ic { width:44px; height:44px; border-radius:12px; display:flex; align-items:center; justify-content:center; font-size:20px; flex-shrink:0; }
.setting-tile h4 { margin:0 0 4px; font-size:14.5px; font-weight:700;}
.setting-tile p { margin:0; font-size:12.5px; color: var(--text-muted); line-height:1.5;}

/* Divider */
.divider-x { height:1px; background: var(--border-light); margin: 16px 0; }


.logout-btn {
  text-decoration: none;
}

.sidebar-overlay {
  display: none;
}

@media (max-width: 900px) {
  .sidebar-overlay {
    position: fixed;
    inset: 0;
    z-index: 35;
    background: rgba(14, 15, 26, 0.52);
  }

  .sidebar-overlay.show {
    display: block;
  }
}

.btn-danger-x {
    background: #ef4444;
    color: #ffffff;
    border: 1px solid #ef4444;
}

.btn-danger-x:hover {
    background: #dc2626;
    border-color: #dc2626;
    color: #ffffff;
}

.level-list-table {
    --bs-table-bg: transparent;
    --bs-table-hover-bg: #faf8ff;
    min-width: 1050px;
}

.level-list-table thead th {
    padding: 14px 16px;
    background: #fafafa;
    color: #7b7b8d;
    border-bottom: 1px solid #ececf2;
    font-size: 11px;
    font-weight: 800;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    vertical-align: middle;
    white-space: nowrap;
}

.level-list-table tbody td {
    padding: 15px 16px;
    border-color: #f0f0f4;
    color: #2d2d3a;
    font-size: 13px;
    vertical-align: middle;
    white-space: nowrap;
}

.level-list-table tbody tr:last-child td {
    border-bottom: 0;
}

.level-list-table .prog-icon {
    margin: 0;
}

.btn-danger-x {
    background: #ef4444;
    color: #ffffff;
    border: 1px solid #ef4444;
}

.btn-danger-x:hover {
    background: #dc2626;
    border-color: #dc2626;
    color: #ffffff;
}