/* ============================================
   English Centre — Shared Styles
   Extended design system
   ============================================ */

:root {
  /* Color tokens */
  --bg-page: #fafaf7;
  --bg-card: #ffffff;
  --bg-subtle: #f5f4ef;
  --border: #e8e6df;
  --border-strong: #d4d1c7;

  --text-primary: #1a1a1a;
  --text-secondary: #5c5a52;
  --text-tertiary: #8b8880;
  --text-inverse: #ffffff;

  --brand: #1e3a3a;
  --brand-hover: #142929;
  --brand-soft: #e6ede8;

  --accent: #c9844e;
  --accent-soft: #faf1e7;

  --success: #2d6a4f;
  --success-soft: #e8f3ee;
  --warning: #b08538;
  --warning-soft: #fbf3e1;
  --danger: #a14444;
  --danger-soft: #f7e8e8;

  --info: #2563a8;
  --info-soft: #e8f0fb;

  /* Typography */
  --font-display: 'Plus Jakarta Sans', system-ui, sans-serif;
  --font-mono: 'IBM Plex Mono', monospace;

  /* Shadows */
  --shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.04);
  --shadow-md: 0 4px 12px -2px rgba(0, 0, 0, 0.06), 0 2px 4px -1px rgba(0, 0, 0, 0.04);
  --shadow-lg: 0 12px 24px -6px rgba(0, 0, 0, 0.08), 0 4px 8px -2px rgba(0, 0, 0, 0.04);

  /* Radius */
  --radius-sm: 6px;
  --radius-md: 10px;
  --radius-lg: 14px;
  --radius-xl: 20px;
}

* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html, body {
  font-family: var(--font-display);
  background: var(--bg-page);
  color: var(--text-primary);
  font-size: 15px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}

/* ============ LAYOUT ============ */

.app {
  display: flex;
  min-height: 100vh;
}

.sidebar {
  width: 240px;
  background: var(--bg-card);
  border-right: 1px solid var(--border);
  padding: 28px 16px;
  display: flex;
  flex-direction: column;
  position: fixed;
  top: 0;
  bottom: 0;
  overflow-y: auto;
}

.sidebar-brand {
  padding: 0 12px 12px;
  border-bottom: 1px solid var(--border);
}

.sidebar-brand h1 {
  font-size: 19px;
  font-weight: 700;
  letter-spacing: -0.02em;
  color: var(--brand);
  display: flex;
  align-items: center;
  gap: 8px;
}

.sidebar-brand .logo-mark {
  width: 34px;
  height: 28px;
  background: var(--brand);
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: white;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.02em;
}

.sidebar-brand p {
  font-size: 11px;
  color: var(--text-tertiary);
  margin-top: 4px;
  padding-left: 42px;
  letter-spacing: 0.03em;
}

.sidebar-nav {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.sidebar-nav .nav-section {
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--text-tertiary);
  padding: 16px 12px 8px;
}

.nav-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 9px 12px;
  border-radius: var(--radius-sm);
  color: var(--text-secondary);
  text-decoration: none;
  font-size: 14px;
  font-weight: 500;
  transition: all 0.15s ease;
}

.nav-item:hover {
  background: var(--bg-subtle);
  color: var(--text-primary);
}

.nav-item.active {
  background: var(--brand-soft);
  color: var(--brand);
  font-weight: 600;
}

.nav-item svg {
  width: 18px;
  height: 18px;
  opacity: 0.7;
  flex-shrink: 0;
}

.nav-item.active svg {
  opacity: 1;
}

.sidebar-footer {
  padding: 16px 12px 0;
  border-top: 1px solid var(--border);
  margin-top: 16px;
  display: flex;
  align-items: center;
  gap: 10px;
}

.avatar {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: var(--brand);
  color: white;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 600;
  font-size: 13px;
  flex-shrink: 0;
}

.user-info .name {
  font-size: 13px;
  font-weight: 600;
}

.user-info .role {
  font-size: 11px;
  color: var(--text-tertiary);
}

.main {
  margin-left: 240px;
  flex: 1;
  /* Flex item bawaannya min-width:auto, jadi ia MELAR mengikuti tabel terlebar
     dan mendorong seluruh halaman ke samping. Dengan 0 ia menciut, lalu
     .table-wrap yang menggeser isinya sendiri. */
  min-width: 0;
  padding: 32px 36px;
  max-width: 1400px;
}

/* ============ HEADER ============ */

.page-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  margin-bottom: 28px;
  padding-bottom: 20px;
  border-bottom: 1px solid var(--border);
}

.page-header h2 {
  font-size: 26px;
  font-weight: 700;
  letter-spacing: -0.02em;
  margin-bottom: 4px;
}

.page-header .subtitle {
  font-size: 14px;
  color: var(--text-secondary);
}

.page-header .meta {
  font-size: 12px;
  color: var(--text-tertiary);
  font-family: var(--font-mono);
}

/* ============ BUTTONS ============ */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 9px 16px;
  border-radius: var(--radius-sm);
  font-family: inherit;
  font-size: 13px;
  font-weight: 600;
  border: none;
  cursor: pointer;
  transition: all 0.15s ease;
  text-decoration: none;
  white-space: nowrap;
}

.btn-primary {
  background: var(--brand);
  color: white;
}

.btn-primary:hover {
  background: var(--brand-hover);
}

.btn-secondary {
  background: var(--bg-card);
  color: var(--text-primary);
  border: 1px solid var(--border-strong);
}

.btn-secondary:hover {
  background: var(--bg-subtle);
}

.btn-accent {
  background: var(--accent);
  color: white;
}

.btn-accent:hover {
  background: #b07238;
}

.btn-success {
  background: var(--success);
  color: white;
}

.btn-sm {
  padding: 6px 12px;
  font-size: 12px;
}

.btn-ghost {
  background: transparent;
  color: var(--text-secondary);
}

.btn-ghost:hover {
  background: var(--bg-subtle);
  color: var(--text-primary);
}

/* ============ CARDS ============ */

.card {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  padding: 22px;
}

.card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 16px;
}

.card-title {
  font-size: 15px;
  font-weight: 700;
  letter-spacing: -0.01em;
}

.card-subtitle {
  font-size: 12px;
  color: var(--text-tertiary);
  margin-top: 2px;
}

/* ============ METRIC CARDS ============ */

.metrics-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
  margin-bottom: 24px;
}

.metric-card {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  padding: 20px;
  position: relative;
  overflow: hidden;
}

.metric-card .label {
  font-size: 12px;
  color: var(--text-tertiary);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  font-weight: 600;
  margin-bottom: 12px;
}

.metric-card .value {
  font-family: var(--font-mono);
  font-size: 30px;
  font-weight: 600;
  letter-spacing: -0.02em;
  line-height: 1;
}

.metric-card .value.danger { color: var(--danger); }
.metric-card .value.success { color: var(--success); }
.metric-card .value.warning { color: var(--warning); }

.metric-card .trend {
  font-size: 12px;
  color: var(--text-secondary);
  margin-top: 10px;
  display: flex;
  align-items: center;
  gap: 4px;
}

.metric-card .trend.up { color: var(--success); }
.metric-card .trend.down { color: var(--danger); }

/* ============ ALERT BANNER ============ */

.alert {
  border-radius: var(--radius-md);
  padding: 16px 20px;
  display: flex;
  align-items: center;
  gap: 14px;
  margin-bottom: 24px;
  border-left: 3px solid var(--warning);
  background: var(--warning-soft);
}

.alert .alert-icon {
  width: 36px;
  height: 36px;
  background: var(--warning);
  color: white;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  font-weight: 700;
}

.alert-content { flex: 1; }

.alert-title {
  font-weight: 700;
  font-size: 14px;
  color: var(--text-primary);
}

.alert-desc {
  font-size: 13px;
  color: var(--text-secondary);
  margin-top: 2px;
}

/* ============ TABLE ============ */

.table-wrap {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  overflow: hidden;
}

.table-toolbar {
  padding: 16px 20px;
  border-bottom: 1px solid var(--border);
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
  flex-wrap: wrap;
}

.search-input {
  flex: 1;
  max-width: 320px;
  position: relative;
}

.search-input input {
  width: 100%;
  padding: 8px 12px 8px 36px;
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-sm);
  font-size: 13px;
  font-family: inherit;
  background: var(--bg-page);
  outline: none;
  transition: border-color 0.15s;
}

.search-input input:focus { border-color: var(--brand); }

.search-input svg {
  position: absolute;
  left: 11px;
  top: 50%;
  transform: translateY(-50%);
  width: 14px;
  height: 14px;
  color: var(--text-tertiary);
}

.filter-pills {
  display: flex;
  gap: 6px;
}

.pill {
  padding: 6px 12px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 600;
  border: 1px solid var(--border-strong);
  background: var(--bg-card);
  color: var(--text-secondary);
  cursor: pointer;
  transition: all 0.15s ease;
}

.pill.active {
  background: var(--text-primary);
  color: white;
  border-color: var(--text-primary);
}

.pill:hover:not(.active) { background: var(--bg-subtle); }

table {
  width: 100%;
  border-collapse: collapse;
}

thead { background: var(--bg-subtle); }

th {
  padding: 11px 20px;
  text-align: left;
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--text-tertiary);
  border-bottom: 1px solid var(--border);
}

td {
  padding: 14px 20px;
  font-size: 14px;
  border-bottom: 1px solid var(--border);
  vertical-align: middle;
}

tr:last-child td { border-bottom: none; }
tr:hover td { background: var(--bg-subtle); }

.student-cell {
  display: flex;
  align-items: center;
  gap: 10px;
}

.student-avatar {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: white;
  font-weight: 600;
  font-size: 11px;
  flex-shrink: 0;
}

.student-info .name {
  font-weight: 600;
  font-size: 13px;
}

.student-info .meta {
  font-size: 12px;
  color: var(--text-tertiary);
}

.mono {
  font-family: var(--font-mono);
  font-size: 13px;
}

/* ============ BADGES ============ */

.badge {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 3px 9px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.02em;
}

.badge::before {
  content: '';
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: currentColor;
}

.badge.success { background: var(--success-soft); color: var(--success); }
.badge.warning { background: var(--warning-soft); color: var(--warning); }
.badge.danger { background: var(--danger-soft); color: var(--danger); }
.badge.neutral { background: var(--bg-subtle); color: var(--text-secondary); }
.badge.info { background: var(--info-soft); color: var(--info); }

/* ============ GRID LAYOUTS ============ */

.grid-2-1 {
  display: grid;
  grid-template-columns: 2fr 1fr;
  gap: 20px;
}

.grid-1-1 {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
}

/* ============ SCHEDULE LIST ============ */

.schedule-list {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.schedule-item {
  padding: 12px 14px;
  border-left: 3px solid var(--brand);
  background: var(--bg-subtle);
  border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
}

.schedule-item.upcoming {
  border-left-color: var(--accent);
  background: var(--accent-soft);
}

.schedule-item.past {
  border-left-color: var(--border-strong);
  opacity: 0.55;
}

.schedule-item .time {
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--text-tertiary);
  font-weight: 600;
}

.schedule-item .title {
  font-weight: 600;
  font-size: 14px;
  margin-top: 2px;
}

.schedule-item .meta {
  font-size: 12px;
  color: var(--text-secondary);
  margin-top: 2px;
}

/* ============ PROGRESS BAR ============ */

.progress-bar {
  width: 100%;
  height: 6px;
  background: var(--bg-subtle);
  border-radius: 999px;
  overflow: hidden;
  margin: 8px 0 4px;
}

.progress-fill {
  height: 100%;
  border-radius: 999px;
  background: var(--brand);
  transition: width 0.6s ease;
}

.progress-fill.accent { background: var(--accent); }
.progress-fill.success { background: var(--success); }
.progress-fill.warning { background: var(--warning); }
.progress-fill.danger { background: var(--danger); }

/* ============ CLASS CARDS ============ */

.class-card {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  padding: 20px;
  margin-bottom: 12px;
  transition: box-shadow 0.2s ease, transform 0.2s ease;
  cursor: pointer;
}

.class-card:hover {
  box-shadow: var(--shadow-md);
  transform: translateY(-1px);
}

.class-card-header {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 12px;
}

.class-code-badge {
  padding: 5px 10px;
  border-radius: var(--radius-sm);
  font-size: 11px;
  font-weight: 700;
  font-family: var(--font-mono);
  letter-spacing: 0.05em;
  background: var(--brand);
  color: white;
}

.class-card-title {
  font-size: 15px;
  font-weight: 700;
  letter-spacing: -0.01em;
  flex: 1;
}

.status-badge {
  padding: 3px 10px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  border: 1.5px solid;
}

.status-badge.ongoing { color: var(--success); border-color: var(--success); background: var(--success-soft); }
.status-badge.completed { color: var(--text-secondary); border-color: var(--border-strong); background: var(--bg-subtle); }
.status-badge.scheduled { color: var(--info); border-color: var(--info); background: var(--info-soft); }

.class-card-meta {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  font-size: 13px;
  color: var(--text-secondary);
  margin-bottom: 6px;
}

.class-card-meta svg {
  width: 14px;
  height: 14px;
  flex-shrink: 0;
  margin-top: 2px;
  opacity: 0.6;
}

.class-card-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: 14px;
  padding-top: 12px;
  border-top: 1px solid var(--border);
}

.class-completion-text {
  font-size: 12px;
  color: var(--text-tertiary);
  font-family: var(--font-mono);
}

/* ============ TABS ============ */

.tab-nav {
  display: flex;
  gap: 0;
  border-bottom: 2px solid var(--border);
  margin-bottom: 24px;
}

.tab-btn {
  padding: 11px 20px;
  font-size: 14px;
  font-weight: 600;
  font-family: inherit;
  background: none;
  border: none;
  border-bottom: 2px solid transparent;
  margin-bottom: -2px;
  cursor: pointer;
  color: var(--text-secondary);
  transition: all 0.15s ease;
}

.tab-btn:hover { color: var(--text-primary); }

.tab-btn.active {
  color: var(--brand);
  border-bottom-color: var(--brand);
}

.tab-panel { display: none; }
.tab-panel.active { display: block; }

/* ============ FILTER SIDEBAR ============ */

.filter-sidebar {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  padding: 20px;
  width: 220px;
  flex-shrink: 0;
  align-self: flex-start;
  position: sticky;
  top: 20px;
}

.filter-section-title {
  font-size: 13px;
  font-weight: 700;
  color: var(--text-primary);
  margin-bottom: 10px;
  margin-top: 16px;
  padding-top: 14px;
  border-top: 1px solid var(--border);
}

.filter-section-title:first-child {
  margin-top: 0;
  padding-top: 0;
  border-top: none;
}

.filter-tag {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 3px 8px;
  border-radius: 4px;
  font-size: 11px;
  font-weight: 600;
  background: var(--brand-soft);
  color: var(--brand);
  margin: 2px;
  cursor: pointer;
}

.filter-tag .remove { opacity: 0.6; font-size: 12px; }

.filter-input {
  width: 100%;
  padding: 7px 10px;
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-sm);
  font-family: inherit;
  font-size: 13px;
  background: var(--bg-page);
  outline: none;
  transition: border-color 0.15s;
  margin-top: 4px;
}

.filter-input:focus { border-color: var(--brand); }

/* ============ ACADEMIC RECORDS TABLE ============ */

.score-cell {
  text-align: center;
}

.score-chip {
  display: inline-block;
  padding: 3px 8px;
  border-radius: var(--radius-sm);
  font-family: var(--font-mono);
  font-size: 12px;
  font-weight: 600;
  background: var(--brand-soft);
  color: var(--brand);
  min-width: 36px;
}

.add-score-btn {
  padding: 4px 10px;
  font-size: 11px;
  font-weight: 600;
  border: 1.5px dashed var(--border-strong);
  border-radius: var(--radius-sm);
  background: transparent;
  color: var(--text-tertiary);
  cursor: pointer;
  font-family: inherit;
  transition: all 0.15s;
  white-space: nowrap;
}

.add-score-btn:hover {
  border-color: var(--brand);
  color: var(--brand);
  background: var(--brand-soft);
}

/* ============ BREADCRUMB ============ */

.breadcrumb {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 16px;
  font-size: 13px;
  color: var(--text-tertiary);
}

.breadcrumb a {
  color: var(--text-secondary);
  text-decoration: none;
  transition: color 0.15s;
}

.breadcrumb a:hover { color: var(--brand); }

/* ============ COLOR LEGEND ============ */

.color-legend {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  padding: 14px 20px;
  border-top: 1px solid var(--border);
  background: var(--bg-subtle);
  font-size: 12px;
}

/* ============ MOBILE ============ */

@media (max-width: 1024px) {
  .sidebar {
    transform: translateX(-100%);
    transition: transform 0.2s ease;
    z-index: 1100;
  }
  body.nav-open .sidebar { transform: none; }
  /* Latar gelap hanya ada saat menu terbuka; ia juga yang menangkap ketukan
     di luar menu untuk menutupnya kembali. */
  .nav-backdrop { display: none; position: fixed; inset: 0; background: rgba(0,0,0,0.45); z-index: 1090; }
  body.nav-open .nav-backdrop { display: block; }
  body.nav-open { overflow: hidden; }

  .main { margin-left: 0; padding: 20px 16px; }
  .metrics-grid { grid-template-columns: repeat(2, 1fr); }
  .grid-2-1, .grid-1-1 { grid-template-columns: 1fr; }
  .page-header { flex-direction: column; align-items: flex-start; gap: 12px; }
  .mobile-header { display: flex !important; }
  .filter-sidebar { width: 100%; position: static; }
  /* Tabel lebih lebar dari layar tadinya TERPOTONG, bukan bisa digeser. */
  .table-wrap { overflow-x: auto; }
  .table-toolbar { flex-direction: column; align-items: stretch; gap: 10px; }
}

@media (max-width: 640px) {
  .metrics-grid { grid-template-columns: 1fr; }
  /* Dua kolom di layar 375px menyisakan field selebar ±150px — tidak terbaca. */
  .form-row { grid-template-columns: 1fr !important; }
  .modal-box { max-height: 92vh; }

  /* Ukuran di bawah ini dirancang untuk layar ±1100px. Dibiarkan apa adanya di
     telepon, sepertiga lebar layar habis untuk padding dan judulnya memakan dua
     baris — jadi yang dikecilkan bukan hanya font, tapi juga jarak, tinggi baris
     tabel, dan apa pun yang lebarnya dipatok. */

  .main { padding: 14px 12px; }

  .breadcrumb { font-size: 12px; margin-bottom: 12px; }
  .page-header { padding-bottom: 14px; margin-bottom: 16px; }
  .page-header h2 { font-size: 20px; }
  .page-header .subtitle { font-size: 13px; }

  .card { padding: 16px; }
  .card-header { margin-bottom: 12px; }
  .card-title { font-size: 14px; }
  .card-subtitle { font-size: 11.5px; }

  .metric-card { padding: 16px; }
  .metric-card .label { font-size: 11px; margin-bottom: 8px; }
  .metric-card .value { font-size: 24px; }

  /* Tab dibiarkan satu baris dan digeser mendatar. Kalau dibungkus ke baris
     kedua, garis bawah penanda tab aktif putus di tengah dan tidak lagi
     terbaca sebagai penanda. */
  .tab-nav { overflow-x: auto; flex-wrap: nowrap; margin-bottom: 16px; scrollbar-width: none; }
  .tab-nav::-webkit-scrollbar { display: none; }
  .tab-btn { padding: 10px 14px; font-size: 13px; white-space: nowrap; }

  .btn { padding: 8px 12px; font-size: 12.5px; gap: 6px; }
  .btn-sm { padding: 6px 10px; font-size: 11.5px; }

  /* Padding 20px kiri-kanan pada sel membuat tabel tiga kolom sudah melebihi
     lebar layar sebelum isinya sempat muncul. */
  th { padding: 9px 12px; }
  td { padding: 10px 12px; font-size: 13px; }
  .table-toolbar { padding: 12px 14px; gap: 10px; }
  .search-input { max-width: none; }
  .color-legend { padding: 12px 14px; gap: 8px; }

  .student-avatar { width: 28px; height: 28px; font-size: 11px; }
  /* nowrap: tanpa ini "Sat 1.45 - 3.00 PM" dipatahkan jadi tumpukan kata di
     dalam pil-nya sendiri, dan barisnya jadi setinggi lima baris teks. */
  .badge { font-size: 10.5px; padding: 3px 8px; white-space: nowrap; }
  /* Tabel digeser mendatar, bukan diperas. Kolom yang diperas sampai lebih
     sempit dari satu kata membuat teksnya tercetak menurun satu huruf/baris. */
  .table-wrap > table, .table-wrap > div > table { min-width: 560px; }
  /* Judul dan penyaringnya menumpuk; berdampingan, keduanya tinggal separuh. */
  .table-head-row { flex-direction: column; align-items: stretch !important; gap: 10px; }
  .table-head-row select { width: 100%; }

  /* Isi modal diberi padding 28px lewat style sebaris, jadi hanya bisa ditimpa
     dari sini — dan tanpa itu field di dalamnya tinggal selebar ±300px. */
  .modal-box > div { padding-left: 18px !important; padding-right: 18px !important; }

  .mobile-header { padding: 12px 14px; }
  .mobile-header h1 { font-size: 15px; }
}

.mobile-header {
  display: none;
  background: var(--bg-card);
  padding: 14px 16px;
  border-bottom: 1px solid var(--border);
  align-items: center;
  justify-content: space-between;
  position: sticky;
  top: 0;
  z-index: 10;
}

.mobile-header h1 {
  font-size: 16px;
  font-weight: 700;
  color: var(--brand);
}

.menu-btn {
  background: none;
  border: none;
  padding: 4px;
  cursor: pointer;
  color: var(--text-secondary);
}

/* ============ ANIMATIONS ============ */

@keyframes slideUp {
  from { opacity: 0; transform: translateY(8px); }
  to { opacity: 1; transform: translateY(0); }
}

@keyframes fadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}

.metric-card, .card, .alert, .table-wrap, .class-card {
  animation: slideUp 0.4s ease backwards;
}

.metric-card:nth-child(1) { animation-delay: 0.05s; }
.metric-card:nth-child(2) { animation-delay: 0.1s; }
.metric-card:nth-child(3) { animation-delay: 0.15s; }
.metric-card:nth-child(4) { animation-delay: 0.2s; }

/* ===== Pagination tabel ===== */
.pager { display: flex; gap: 4px; align-items: center; flex-wrap: wrap; }
.pg-btn {
  min-width: 30px; padding: 5px 9px; border: 1.5px solid var(--border-strong);
  background: var(--bg-card); color: var(--text-primary); border-radius: var(--radius-sm);
  font-family: var(--font-display); font-size: 12.5px; font-weight: 600; cursor: pointer;
  transition: background 0.15s, border-color 0.15s;
}
.pg-btn:hover:not(:disabled) { background: var(--bg-subtle); border-color: var(--brand); }
.pg-btn.active { background: var(--brand); border-color: var(--brand); color: #fff; }
.pg-btn:disabled { opacity: 0.4; cursor: default; }
.pg-gap { padding: 0 4px; color: var(--text-tertiary); font-size: 12.5px; }

/* ===== Logo sidebar =====
   Rasio dikunci supaya tinggi ruangnya sudah dipesan sebelum gambarnya termuat.
   Tanpa ini sidebar melompat tiap pindah menu — sidebar dirender oleh JS, jadi
   gambar selalu datang belakangan dan mendorong isi di bawahnya. */
.logo-img {
  width: 100%;
  aspect-ratio: 1476 / 738;
  height: auto;
  display: block;
}