/* ==================================================================
   PDA-Exam Digital Evaluation System — Stylesheet
   Replicates the Tailwind/shadcn emerald-green design from the workspace app
   ================================================================== */

/* ====== Reset & Base ====== */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

:root {
  /* Colors — matching the workspace */
  --emerald-50: #ecfdf5;
  --emerald-100: #d1fae5;
  --emerald-200: #a7f3d0;
  --emerald-300: #6ee7b7;
  --emerald-400: #34d399;
  --emerald-500: #10b981;
  --emerald-600: #059669;
  --emerald-700: #047857;
  --emerald-800: #065f46;
  --emerald-900: #064e3b;

  --slate-50: #f8fafc;
  --slate-100: #f1f5f9;
  --slate-200: #e2e8f0;
  --slate-300: #cbd5e1;
  --slate-400: #94a3b8;
  --slate-500: #64748b;
  --slate-600: #475569;
  --slate-700: #334155;
  --slate-800: #1e293b;
  --slate-900: #0f172a;

  --amber-50: #fffbeb;
  --amber-100: #fef3c7;
  --amber-200: #fde68a;
  --amber-600: #d97706;
  --amber-700: #b45309;

  --sky-50: #f0f9ff;
  --sky-100: #e0f2fe;
  --sky-600: #0284c7;
  --sky-700: #0369a1;

  --red-50: #fef2f2;
  --red-100: #fee2e2;
  --red-500: #ef4444;
  --red-600: #dc2626;
  --red-700: #b91c1c;

  --violet-50: #f5f3ff;
  --violet-100: #ede9fe;
  --violet-600: #7c3aed;
  --violet-700: #6d28d9;

  --pink-50: #fdf2f8;
  --pink-100: #fce7f3;
  --pink-300: #f9a8d4;
  --pink-600: #db2777;
  --pink-700: #be185d;

  --blue-600: #2563eb;

  --white: #ffffff;
  --bg: #f8fafc;
  --text: #0f172a;
  --text-muted: #64748b;
  --border: #e2e8f0;

  --radius: 0.625rem;
  --radius-sm: calc(var(--radius) - 4px);
  --radius-lg: var(--radius);
  --radius-xl: calc(var(--radius) + 4px);
  --radius-2xl: 1rem;

  --shadow-sm: 0 1px 2px 0 rgb(0 0 0 / 0.05);
  --shadow: 0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1);
  --shadow-md: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
  --shadow-lg: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
  --shadow-xl: 0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1);

  --font-sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --font-mono: "SF Mono", Monaco, "Cascadia Code", "Roboto Mono", monospace;
}

html { font-size: 16px; }
body {
  font-family: var(--font-sans);
  background: var(--bg);
  color: var(--text);
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

a { color: var(--emerald-700); text-decoration: none; }
a:hover { text-decoration: underline; }

/* ====== Layout ====== */
.min-h-screen { min-height: 100vh; }
.flex { display: flex; }
.flex-col { flex-direction: column; }
.flex-1 { flex: 1 1 0%; }
.flex-wrap { flex-wrap: wrap; }
.items-center { align-items: center; }
.items-start { align-items: flex-start; }
.justify-center { justify-content: center; }
.justify-between { justify-content: space-between; }
.gap-2 { gap: 0.5rem; }
.gap-3 { gap: 0.75rem; }
.gap-4 { gap: 1rem; }
.gap-6 { gap: 1.5rem; }

/* ====== Login Page ====== */
.login-page {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  background: linear-gradient(135deg, var(--emerald-50) 0%, #fff 50%, #f0fdfa 100%);
}
.login-main {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1rem;
}
.login-grid {
  width: 100%;
  max-width: 64rem;
  display: grid;
  gap: 2rem;
  align-items: center;
}
@media (min-width: 1024px) {
  .login-grid { grid-template-columns: 1fr 1fr; }
}
.login-brand-info { display: none; }
@media (min-width: 1024px) {
  .login-brand-info { display: flex; flex-direction: column; gap: 1.5rem; padding: 2rem; }
}
.login-brand-logo {
  display: flex; align-items: center; gap: 0.75rem;
}
.login-logo-icon {
  width: 3.5rem; height: 3.5rem; border-radius: 1rem;
  background: var(--emerald-600); color: #fff;
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 10px 15px -3px rgb(5 150 105 / 0.3);
}
.login-brand-title { font-size: 1.5rem; font-weight: 700; color: var(--slate-900); }
.login-brand-sub { font-size: 0.875rem; color: var(--slate-500); }
.login-hero-title { font-size: 1.875rem; font-weight: 700; color: var(--slate-900); line-height: 1.2; }
.login-hero-desc { color: var(--slate-600); line-height: 1.6; }
.login-features { list-style: none; display: flex; flex-direction: column; gap: 0.5rem; font-size: 0.875rem; color: var(--slate-700); }
.login-features li { display: flex; align-items: center; gap: 0.5rem; }
.login-footer-text { font-size: 0.75rem; color: var(--slate-400); border-top: 1px solid var(--slate-200); padding-top: 1rem; }

/* ====== Card ====== */
.card {
  background: #fff;
  border: 1px solid var(--slate-200);
  border-radius: var(--radius);
  box-shadow: var(--shadow-sm);
}
.card-header { padding: 1.25rem 1.25rem 0; }
.card-title { font-size: 1.125rem; font-weight: 600; color: var(--slate-900); margin: 0; }
.card-title-lg { font-size: 1.125rem; }
.card-title-base { font-size: 1rem; }
.card-title-sm { font-size: 0.875rem; }
.card-desc { font-size: 0.875rem; color: var(--slate-500); margin-top: 0.25rem; }
.card-content { padding: 1.25rem; }
.card-content-p4 { padding: 1rem; }
.card-content-p5 { padding: 1.25rem; }
.card-header-pb3 { padding-bottom: 0.75rem; }
.card-dashed { border-style: dashed; }
.card-emerald { border-color: var(--emerald-200); background: rgba(236, 253, 245, 0.4); }
.card-amber { border-color: var(--amber-200); background: rgba(255, 251, 235, 0.4); }

/* Login card specific */
.login-card { box-shadow: var(--shadow-xl); border: 1px solid var(--slate-200); }
.login-card-header { padding: 1.5rem 1.5rem 0; }
.login-card-content { padding: 1.5rem; }
.login-card-title { font-size: 1.5rem; font-weight: 600; color: var(--slate-900); }
.login-mobile-brand { display: flex; align-items: center; gap: 0.75rem; }
@media (min-width: 1024px) { .login-mobile-brand { display: none; } }
.login-mobile-logo {
  width: 3rem; height: 3rem; border-radius: 0.75rem;
  background: var(--emerald-600); color: #fff;
  display: flex; align-items: center; justify-content: center;
}

/* Demo credentials box */
.demo-creds {
  margin-top: 1.5rem; border: 1px dashed var(--slate-300);
  background: rgba(248, 250, 252, 0.5); padding: 1rem; border-radius: 0.5rem;
}
.demo-creds-title { font-size: 0.75rem; font-weight: 600; color: var(--slate-600); margin-bottom: 0.5rem; }
.demo-cred-btn {
  display: block; width: 100%; text-align: left; padding: 0.5rem 0.75rem;
  border-radius: 0.375rem; font-size: 0.75rem; border: none; cursor: pointer;
  transition: opacity 0.15s; margin-bottom: 0.5rem;
}
.demo-cred-btn:last-child { margin-bottom: 0; }
.demo-cred-btn:hover { opacity: 0.8; }
.demo-cred-role { font-weight: 500; display: block; }
.demo-cred-mono { font-family: var(--font-mono); display: block; margin-top: 0.125rem; }
.demo-cred-coe { color: var(--emerald-700); background: var(--emerald-50); }
.demo-cred-eval { color: var(--amber-700); background: var(--amber-50); }
.demo-cred-mod { color: var(--violet-700); background: var(--violet-50); }

/* ====== Forms ====== */
.form-group { margin-bottom: 1rem; }
.form-label {
  display: block; font-size: 0.875rem; font-weight: 500;
  color: var(--slate-700); margin-bottom: 0.375rem;
}
.form-label-required { color: var(--red-500); margin-left: 0.125rem; }
.form-input, .form-select, .form-textarea {
  width: 100%; padding: 0.5rem 0.75rem;
  font-size: 0.875rem; font-family: inherit;
  background: #fff; border: 1px solid var(--slate-300);
  border-radius: var(--radius-sm); color: var(--slate-900);
  transition: border-color 0.15s, box-shadow 0.15s;
  outline: none;
}
.form-input:focus, .form-select:focus, .form-textarea:focus {
  border-color: var(--emerald-500);
  box-shadow: 0 0 0 3px var(--emerald-100);
}
.form-input-with-icon { padding-left: 2.25rem; }
.form-icon {
  position: absolute; left: 0.75rem; top: 50%; transform: translateY(-50%);
  width: 1rem; height: 1rem; color: var(--slate-400); pointer-events: none;
}
.input-wrapper { position: relative; }
.form-hint { font-size: 0.75rem; color: var(--amber-600); margin-top: 0.25rem; }

/* ====== Buttons ====== */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 0.5rem;
  padding: 0.5rem 1rem; font-size: 0.875rem; font-weight: 500;
  border-radius: var(--radius-sm); border: 1px solid transparent;
  cursor: pointer; transition: all 0.15s; font-family: inherit;
  white-space: nowrap; text-decoration: none;
}
.btn:disabled { opacity: 0.5; cursor: not-allowed; }
.btn-primary { background: var(--emerald-600); color: #fff; }
.btn-primary:hover:not(:disabled) { background: var(--emerald-700); }
.btn-outline { background: #fff; border-color: var(--slate-300); color: var(--slate-700); }
.btn-outline:hover:not(:disabled) { background: var(--slate-50); }
.btn-ghost { background: transparent; color: var(--slate-700); }
.btn-ghost:hover:not(:disabled) { background: var(--slate-100); }
.btn-sm { padding: 0.25rem 0.625rem; font-size: 0.75rem; height: 2rem; }
.btn-lg { padding: 0.625rem 1.25rem; font-size: 0.875rem; }
.btn-full { width: 100%; }
.btn-danger { color: var(--red-600); }
.btn-danger:hover { background: var(--red-50); }
.btn-icon { padding: 0.375rem; width: 2rem; height: 2rem; }

/* ====== Badges ====== */
.badge {
  display: inline-flex; align-items: center; gap: 0.25rem;
  padding: 0.125rem 0.5rem; font-size: 0.75rem; font-weight: 500;
  border-radius: 9999px; border: 1px solid transparent;
  line-height: 1.25;
}
.badge-outline { background: #fff; border-color: var(--slate-300); color: var(--slate-700); }
.badge-sm { font-size: 0.625rem; padding: 0.0625rem 0.375rem; }
.badge-emerald { background: var(--emerald-100); color: var(--emerald-700); border-color: var(--emerald-200); }
.badge-amber { background: var(--amber-100); color: var(--amber-700); }
.badge-sky { background: var(--sky-100); color: var(--sky-700); }
.badge-red { background: var(--red-100); color: var(--red-700); }
.badge-violet { background: var(--violet-100); color: var(--violet-700); }
.badge-slate { background: var(--slate-100); color: var(--slate-700); }
.badge-pink { background: var(--pink-100); color: var(--pink-700); }

/* ====== App Shell ====== */
.app-shell { min-height: 100vh; display: flex; flex-direction: column; background: var(--bg); }
.app-header {
  position: sticky; top: 0; z-index: 40;
  border-bottom: 1px solid var(--slate-200);
  background: rgba(255, 255, 255, 0.95); backdrop-filter: blur(8px);
}
.app-header-inner {
  display: flex; align-items: center; justify-content: space-between;
  height: 4rem; padding: 0 1rem;
}
@media (min-width: 640px) { .app-header-inner { padding: 0 1.5rem; } }
.app-logo-btn {
  display: flex; align-items: center; gap: 0.75rem;
  background: none; border: none; cursor: pointer;
}
.app-logo-icon {
  width: 2.5rem; height: 2.5rem; border-radius: 0.75rem;
  background: var(--emerald-600); color: #fff;
  display: flex; align-items: center; justify-content: center;
  box-shadow: var(--shadow-sm); transition: box-shadow 0.15s;
}
.app-logo-btn:hover .app-logo-icon { box-shadow: var(--shadow-md); }
.app-logo-title { font-weight: 700; color: var(--slate-900); line-height: 1.2; text-align: left; }
.app-logo-sub { font-size: 0.75rem; color: var(--slate-500); line-height: 1.2; }
@media (max-width: 639px) { .app-logo-sub { display: none; } }

.app-header-right { display: flex; align-items: center; gap: 0.75rem; }
.app-helpdesk {
  display: none; align-items: center; gap: 0.375rem;
  font-size: 0.75rem; color: var(--slate-500);
}
.app-helpdesk:hover { color: var(--emerald-700); }
@media (min-width: 768px) { .app-helpdesk { display: flex; } }

.user-menu-btn {
  display: flex; align-items: center; gap: 0.5rem;
  background: none; border: none; cursor: pointer;
  padding: 0.5rem; border-radius: var(--radius-sm);
}
.user-menu-btn:hover { background: var(--slate-100); }
.avatar {
  width: 2.25rem; height: 2.25rem; border-radius: 9999px;
  display: flex; align-items: center; justify-content: center;
  font-size: 0.75rem; font-weight: 600; color: #fff;
}
.avatar-coe { background: var(--emerald-100); color: var(--emerald-700); }
.avatar-eval { background: var(--amber-100); color: var(--amber-700); }
.avatar-mod { background: var(--violet-100); color: var(--violet-700); }
.avatar-sky { background: var(--sky-100); color: var(--sky-700); }
.user-menu-name { font-size: 0.875rem; font-weight: 500; color: var(--slate-900); line-height: 1.2; text-align: left; }
.user-menu-role { font-size: 0.75rem; color: var(--slate-500); line-height: 1.2; text-align: left; }
@media (max-width: 639px) { .user-menu-info { display: none; } }

/* Dropdown */
.dropdown { position: relative; }
.dropdown-menu {
  position: absolute; right: 0; top: calc(100% + 0.25rem);
  min-width: 14rem; background: #fff;
  border: 1px solid var(--slate-200); border-radius: var(--radius);
  box-shadow: var(--shadow-lg); padding: 0.25rem; z-index: 50;
  display: none;
}
.dropdown-menu.open { display: block; }
.dropdown-label { padding: 0.5rem 0.75rem; font-size: 0.875rem; }
.dropdown-label-name { font-weight: 500; color: var(--slate-900); }
.dropdown-label-email { font-size: 0.75rem; color: var(--slate-500); }
.dropdown-sep { height: 1px; background: var(--slate-100); margin: 0.25rem 0; }
.dropdown-item {
  display: flex; align-items: center; width: 100%;
  padding: 0.5rem 0.75rem; font-size: 0.875rem;
  background: none; border: none; cursor: pointer;
  border-radius: var(--radius-sm); color: var(--slate-700);
  text-align: left;
}
.dropdown-item:hover { background: var(--slate-100); }
.dropdown-item-danger { color: var(--red-600); }
.dropdown-item-danger:hover { background: var(--red-50); }

/* ====== Sidebar ====== */
.app-body { flex: 1; display: flex; }
.sidebar {
  display: none; width: 16rem; flex-direction: column;
  border-right: 1px solid var(--slate-200); background: #fff;
}
@media (min-width: 768px) { .sidebar { display: flex; } }
.sidebar-nav { flex: 1; padding: 0.75rem; overflow-y: auto; max-height: calc(100vh - 4rem); }
.sidebar-section { margin-bottom: 1.5rem; }
.sidebar-section-label {
  padding: 0 0.75rem; font-size: 0.75rem; font-weight: 600;
  text-transform: uppercase; letter-spacing: 0.05em; color: var(--slate-400);
  margin-bottom: 0.25rem;
}
.sidebar-item {
  display: flex; align-items: center; gap: 0.75rem; width: 100%;
  padding: 0.5rem 0.75rem; border-radius: var(--radius-sm);
  font-size: 0.875rem; font-weight: 500; background: none; border: none;
  cursor: pointer; text-align: left; color: var(--slate-600);
  transition: all 0.15s; margin-bottom: 0.125rem;
}
.sidebar-item:hover { background: var(--slate-100); }
.sidebar-item.active { background: var(--emerald-50); color: var(--emerald-700); box-shadow: var(--shadow-sm); }
.sidebar-item-icon { width: 1rem; height: 1rem; color: var(--slate-400); flex-shrink: 0; }
.sidebar-item.active .sidebar-item-icon { color: var(--emerald-600); }
.sidebar-footer { padding: 1rem; border-top: 1px solid var(--slate-200); font-size: 0.75rem; color: var(--slate-400); }
.sidebar-footer-title { font-weight: 500; color: var(--slate-500); }

/* Mobile bottom nav */
.mobile-nav {
  position: fixed; bottom: 0; left: 0; right: 0; z-index: 40;
  border-top: 1px solid var(--slate-200); background: #fff;
  display: grid; grid-template-columns: repeat(4, 1fr); max-height: 5rem; overflow-y: auto;
}
@media (min-width: 768px) { .mobile-nav { display: none; } }
.mobile-nav-item {
  display: flex; flex-direction: column; align-items: center; gap: 0.25rem;
  padding: 0.5rem 0.25rem; font-size: 0.625rem; font-weight: 500;
  background: none; border: none; cursor: pointer; color: var(--slate-500);
}
.mobile-nav-item.active { color: var(--emerald-700); }
.mobile-nav-item.active .mobile-nav-icon { color: var(--emerald-600); }
.mobile-nav-icon { width: 1rem; height: 1rem; }
.mobile-nav-label { line-height: 1.1; text-align: center; width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.app-main { flex: 1; min-width: 0; padding-bottom: 5rem; }
@media (min-width: 768px) { .app-main { padding-bottom: 0; } }

/* ====== Page Content ====== */
.page-content { padding: 1rem; max-width: 80rem; margin: 0 auto; }
@media (min-width: 640px) { .page-content { padding: 1.5rem; } }
.page-header { margin-bottom: 1.5rem; }
.page-title { font-size: 1.875rem; font-weight: 700; color: var(--slate-900); }
@media (min-width: 640px) { .page-title { font-size: 1.875rem; } }
.page-subtitle { font-size: 0.875rem; color: var(--slate-500); margin-top: 0.25rem; }

/* ====== Grid ====== */
.grid { display: grid; gap: 1rem; }
.grid-2 { grid-template-columns: 1fr; }
.grid-3 { grid-template-columns: 1fr; }
.grid-4 { grid-template-columns: 1fr; }
.grid-8 { grid-template-columns: repeat(2, 1fr); }
@media (min-width: 640px) {
  .grid-2 { grid-template-columns: repeat(2, 1fr); }
  .grid-4 { grid-template-columns: repeat(2, 1fr); }
  .grid-8 { grid-template-columns: repeat(4, 1fr); }
}
@media (min-width: 1024px) {
  .grid-4 { grid-template-columns: repeat(4, 1fr); }
  .grid-8 { grid-template-columns: repeat(8, 1fr); }
  .grid-3 { grid-template-columns: repeat(3, 1fr); }
}
.grid-sidebar { display: grid; gap: 1rem; }
@media (min-width: 1024px) { .grid-sidebar { grid-template-columns: 1fr 20rem; } }
.grid-sidebar-left { display: grid; gap: 1rem; }
@media (min-width: 1024px) { .grid-sidebar-left { grid-template-columns: 20rem 1fr; } }

/* ====== Stat Cards ====== */
.stat-card { padding: 1.25rem; }
.stat-card-top { display: flex; align-items: flex-start; justify-content: space-between; }
.stat-label { font-size: 0.875rem; color: var(--slate-500); }
.stat-value { font-size: 1.875rem; font-weight: 700; color: var(--slate-900); margin-top: 0.25rem; }
.stat-sub { font-size: 0.75rem; color: var(--slate-400); margin-top: 0.25rem; }
.stat-icon { width: 2.5rem; height: 2.5rem; border-radius: 0.5rem; display: flex; align-items: center; justify-content: center; }
.stat-icon-emerald { background: var(--emerald-50); color: var(--emerald-600); }
.stat-icon-sky { background: var(--sky-50); color: var(--sky-600); }
.stat-icon-amber { background: var(--amber-50); color: var(--amber-600); }
.stat-icon-violet { background: var(--violet-50); color: var(--violet-600); }

/* ====== Progress Bar ====== */
.progress { height: 0.5rem; background: var(--slate-100); border-radius: 9999px; overflow: hidden; }
.progress-bar { height: 100%; border-radius: 9999px; transition: width 0.3s; }
.progress-slate { background: var(--slate-400); }
.progress-amber { background: var(--amber-500); }
.progress-sky { background: var(--sky-500); }
.progress-emerald { background: var(--emerald-500); }
.progress-violet { background: var(--violet-600); }

/* ====== Stepper ====== */
.stepper { display: flex; align-items: center; width: 100%; overflow-x: auto; padding-bottom: 0.25rem; }
.stepper-item { display: flex; align-items: center; }
.stepper-item-content { flex: 1; display: flex; align-items: center; gap: 0.5rem; }
.stepper-num {
  display: flex; align-items: center; justify-content: center;
  width: 2rem; height: 2rem; border-radius: 9999px;
  font-size: 0.875rem; font-weight: 600; flex-shrink: 0; transition: all 0.15s;
}
.stepper-num.active { background: var(--emerald-600); color: #fff; box-shadow: 0 4px 6px -1px rgb(5 150 105 / 0.3); }
.stepper-num.done { background: var(--emerald-100); color: var(--emerald-700); }
.stepper-num.pending { background: var(--slate-100); color: var(--slate-400); }
.stepper-label { font-size: 0.75rem; font-weight: 500; white-space: nowrap; }
@media (min-width: 640px) { .stepper-label { font-size: 0.875rem; } }
.stepper-label.active { color: var(--emerald-700); }
.stepper-label.done { color: var(--slate-600); }
.stepper-label.pending { color: var(--slate-400); }
.stepper-line { flex: 1; height: 2px; margin: 0 0.75rem; border-radius: 9999px; }
.stepper-line.done { background: var(--emerald-300); }
.stepper-line.pending { background: var(--slate-200); }

/* ====== Table ====== */
.table-wrapper { overflow-x: auto; }
.table { width: 100%; border-collapse: collapse; font-size: 0.875rem; }
.table th { text-align: left; font-size: 0.75rem; color: var(--slate-500); font-weight: 500; padding: 0.5rem 0.5rem; border-bottom: 1px solid var(--slate-200); }
.table td { padding: 0.5rem 0.5rem; border-bottom: 1px solid var(--slate-100); color: var(--slate-700); }
.table tr:last-child td { border-bottom: none; }
.table-mono { font-family: var(--font-mono); font-size: 0.75rem; }
.table-center { text-align: center; }

/* ====== Timeline ====== */
.timeline { position: relative; }
.timeline-line { position: absolute; left: 15px; top: 0; bottom: 0; width: 1px; background: var(--slate-200); }
.timeline-item { position: relative; padding-left: 2.5rem; margin-bottom: 0.75rem; }
.timeline-icon {
  position: absolute; left: 0; top: 0.25rem;
  width: 2rem; height: 2rem; border-radius: 9999px;
  display: flex; align-items: center; justify-content: center;
}
.timeline-content { padding: 0.75rem; border: 1px solid var(--slate-200); border-radius: var(--radius); background: #fff; }

/* ====== Accordion (FAQ) ====== */
.accordion-item { border: 1px solid var(--slate-200); border-radius: var(--radius); margin-bottom: 0.5rem; overflow: hidden; }
.accordion-trigger {
  display: flex; align-items: center; justify-content: space-between; width: 100%;
  padding: 0.75rem 1rem; background: none; border: none; cursor: pointer;
  font-size: 0.875rem; font-weight: 500; text-align: left; color: var(--slate-900);
}
.accordion-trigger:hover { text-decoration: none; }
.accordion-icon { width: 1rem; height: 1rem; transition: transform 0.2s; color: var(--slate-400); }
.accordion-item.open .accordion-icon { transform: rotate(180deg); }
.accordion-content { padding: 0 1rem 1rem; font-size: 0.875rem; color: var(--slate-700); display: none; }
.accordion-item.open .accordion-content { display: block; }

/* ====== Tabs ====== */
.tabs-list { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0.25rem; background: var(--slate-100); padding: 0.25rem; border-radius: var(--radius); margin-bottom: 1rem; }
.tabs-trigger {
  display: flex; align-items: center; justify-content: center; gap: 0.375rem;
  padding: 0.5rem 1rem; font-size: 0.875rem; font-weight: 500;
  background: none; border: none; cursor: pointer; border-radius: calc(var(--radius) - 2px);
  color: var(--slate-500); transition: all 0.15s;
}
.tabs-trigger:hover { color: var(--slate-700); }
.tabs-trigger.active { background: #fff; color: var(--slate-900); box-shadow: var(--shadow-sm); }
.tab-content { display: none; }
.tab-content.active { display: block; }

/* ====== Drag & Drop ====== */
.droppable {
  min-height: 4rem; border: 2px dashed var(--slate-200); border-radius: var(--radius);
  padding: 0.75rem; background: rgba(248, 250, 252, 0.5); transition: all 0.15s;
  display: flex; align-items: center;
}
.droppable.over { border-color: var(--pink-400); background: var(--pink-50); }
.droppable.over-amber { border-color: var(--amber-300); background: var(--amber-50); }
.droppable.over-sky { border-color: var(--sky-300); background: var(--sky-50); }
.droppable-empty { font-size: 0.75rem; color: var(--slate-400); font-style: italic; }
.droppable-filled { display: flex; align-items: center; gap: 0.5rem; }
.droppable-label { font-size: 0.75rem; font-weight: 500; margin-bottom: 0.375rem; display: flex; align-items: center; gap: 0.375rem; }

.draggable {
  display: flex; align-items: center; gap: 0.5rem; padding: 0.5rem;
  border: 1px solid var(--slate-200); border-radius: var(--radius-sm);
  cursor: grab; transition: all 0.15s; margin-bottom: 0.5rem;
  background: #fff;
}
.draggable:active { cursor: grabbing; }
.draggable.dragging { opacity: 0.5; }
.draggable:hover { box-shadow: var(--shadow-sm); }
.draggable-amber { background: var(--amber-50); border-color: var(--amber-200); }
.draggable-sky { background: var(--sky-50); border-color: var(--sky-200); }
.drag-handle { width: 1rem; height: 1rem; color: var(--slate-400); flex-shrink: 0; }
.draggable-name { font-size: 0.875rem; font-weight: 500; color: var(--slate-900); }
.draggable-sub { font-size: 0.75rem; color: var(--slate-500); }

/* ====== Evaluator card ====== */
.eval-card { padding: 1rem; border: 1px solid var(--slate-200); border-radius: var(--radius); transition: all 0.15s; }
.eval-card:hover { border-color: var(--slate-300); box-shadow: var(--shadow-sm); }
.eval-card-top { display: flex; align-items: flex-start; gap: 0.75rem; }
.eval-card-name { font-weight: 600; color: var(--slate-900); }
.eval-card-info { display: flex; flex-direction: column; gap: 0.25rem; font-size: 0.75rem; color: var(--slate-500); margin-top: 0.5rem; }
.eval-card-info-item { display: flex; align-items: center; gap: 0.375rem; }
.eval-programs { display: flex; flex-wrap: wrap; gap: 0.25rem; margin-top: 0.5rem; }

/* ====== Lifecycle card ====== */
.lifecycle-card {
  text-align: left; padding: 1rem; border-radius: var(--radius-xl);
  border: 1px solid var(--slate-200); background: none; cursor: pointer;
  transition: all 0.15s;
}
.lifecycle-card:hover { border-color: var(--emerald-300); background: rgba(236, 253, 245, 0.5); }
.lifecycle-top { display: flex; align-items: center; justify-content: space-between; margin-bottom: 0.5rem; }
.lifecycle-num {
  width: 2rem; height: 2rem; border-radius: var(--radius);
  background: var(--slate-100); display: flex; align-items: center; justify-content: center;
  font-size: 0.875rem; font-weight: 700; color: var(--slate-600); transition: all 0.15s;
}
.lifecycle-card:hover .lifecycle-num { background: var(--emerald-100); color: var(--emerald-700); }
.lifecycle-icon { width: 1rem; height: 1rem; color: var(--slate-400); transition: all 0.15s; }
.lifecycle-card:hover .lifecycle-icon { color: var(--emerald-600); }
.lifecycle-title { font-weight: 600; font-size: 0.875rem; color: var(--slate-900); transition: color 0.15s; }
.lifecycle-card:hover .lifecycle-title { color: var(--emerald-700); }
.lifecycle-desc { font-size: 0.75rem; color: var(--slate-500); margin-top: 0.125rem; }
.lifecycle-open { display: flex; align-items: center; gap: 0.25rem; font-size: 0.75rem; color: var(--emerald-600); margin-top: 0.5rem; opacity: 0; transition: opacity 0.15s; }
.lifecycle-card:hover .lifecycle-open { opacity: 1; }

/* ====== Grade policy card ====== */
.grade-card { padding: 0.5rem; border-radius: var(--radius-sm); text-align: center; border: 1px solid var(--slate-200); background: #fff; }
.grade-card-fail { border-color: var(--red-200); background: var(--red-50); }
.grade-card-grade { font-size: 1.125rem; font-weight: 700; }
.grade-card-fail .grade-card-grade { color: var(--red-600); }
.grade-card-gp { font-size: 0.75rem; color: var(--slate-500); }
.grade-card-range { font-size: 0.625rem; color: var(--slate-400); margin-top: 0.125rem; }

/* ====== Summary stats ====== */
.summary-stat { padding: 1rem; border-radius: var(--radius); }
.summary-stat-label { font-size: 0.75rem; font-weight: 500; opacity: 0.8; }
.summary-stat-value { font-size: 1.5rem; font-weight: 700; margin-top: 0.25rem; }

/* ====== Result table ====== */
.result-table { width: 100%; border-collapse: collapse; font-size: 0.75rem; }
.result-table th { padding: 0.5rem 0.5rem; text-align: center; font-size: 0.75rem; color: var(--slate-500); font-weight: 500; border-bottom: 1px solid var(--slate-200); min-width: 5rem; }
.result-table th:first-child { text-align: left; position: sticky; left: 0; background: #fff; }
.result-table th:nth-child(2) { text-align: left; }
.result-table td { padding: 0.5rem 0.5rem; text-align: center; border-bottom: 1px solid var(--slate-100); }
.result-table td:first-child { text-align: left; position: sticky; left: 0; background: #fff; font-family: var(--font-mono); font-size: 0.75rem; }
.result-table td:nth-child(2) { text-align: left; }
.result-table .mpc-row { background: rgba(254, 226, 226, 0.4); }
.result-grade { font-weight: 700; color: var(--slate-900); }
.result-marks { font-size: 0.625rem; color: var(--slate-500); }
.result-gp { font-size: 0.625rem; color: var(--slate-400); }

/* ====== Radio group ====== */
.radio-group { display: grid; gap: 1rem; }
@media (min-width: 640px) { .radio-group { grid-template-columns: 1fr 1fr; } }
.radio-option {
  display: flex; align-items: flex-start; gap: 0.75rem; padding: 1rem;
  border: 2px solid var(--slate-200); border-radius: var(--radius-xl);
  cursor: pointer; transition: all 0.15s;
}
.radio-option:hover { border-color: var(--slate-300); }
.radio-option.active-amber { border-color: var(--amber-300); background: var(--amber-50); }
.radio-option.active-sky { border-color: var(--sky-300); background: var(--sky-50); }
.radio-input { margin-top: 0.25rem; }
.radio-label-name { font-weight: 500; color: var(--slate-900); }
.radio-label-desc { font-size: 0.75rem; color: var(--slate-500); margin-top: 0.25rem; }

/* ====== Checkbox list ====== */
.checkbox-item {
  display: flex; align-items: center; gap: 0.75rem; padding: 0.75rem;
  border: 1px solid var(--slate-200); border-radius: var(--radius); cursor: pointer;
  transition: all 0.15s;
}
.checkbox-item:hover { border-color: var(--slate-300); }
.checkbox-item.active-emerald { border-color: var(--emerald-300); background: var(--emerald-50); }

/* ====== Toast ====== */
.toast-container {
  position: fixed; top: 1rem; right: 1rem; z-index: 100;
  display: flex; flex-direction: column; gap: 0.5rem; max-width: 24rem;
}
.toast {
  padding: 0.75rem 1rem; border-radius: var(--radius); box-shadow: var(--shadow-lg);
  font-size: 0.875rem; color: #fff; animation: toast-in 0.3s ease;
}
.toast-success { background: var(--emerald-600); }
.toast-error { background: var(--red-600); }
.toast-info { background: var(--slate-800); }
@keyframes toast-in { from { transform: translateX(100%); opacity: 0; } to { transform: translateX(0); opacity: 1; } }

/* ====== Skeleton ====== */
.skeleton { background: var(--slate-100); border-radius: var(--radius-sm); animation: pulse 2s infinite; }
@keyframes pulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.5; } }

/* ====== Misc ====== */
.text-center { text-align: center; }
.text-right { text-align: right; }
.text-xs { font-size: 0.75rem; }
.text-sm { font-size: 0.875rem; }
.text-lg { font-size: 1.125rem; }
.text-xl { font-size: 1.25rem; }
.text-2xl { font-size: 1.5rem; }
.text-3xl { font-size: 1.875rem; }
.font-medium { font-weight: 500; }
.font-semibold { font-weight: 600; }
.font-bold { font-weight: 700; }
.text-slate-400 { color: var(--slate-400); }
.text-slate-500 { color: var(--slate-500); }
.text-slate-600 { color: var(--slate-600); }
.text-slate-700 { color: var(--slate-700); }
.text-slate-900 { color: var(--slate-900); }
.text-emerald-600 { color: var(--emerald-600); }
.text-emerald-700 { color: var(--emerald-700); }
.text-red-600 { color: var(--red-600); }
.text-amber-600 { color: var(--amber-600); }
.text-amber-700 { color: var(--amber-700); }
.text-violet-700 { color: var(--violet-700); }
.bg-emerald-50 { background: var(--emerald-50); }
.bg-emerald-600 { background: var(--emerald-600); }
.bg-amber-50 { background: var(--amber-50); }
.bg-red-50 { background: var(--red-50); }
.bg-slate-50 { background: var(--slate-50); }
.bg-slate-100 { background: var(--slate-100); }
.bg-white { background: #fff; }
.border-2 { border-width: 2px; }
.border-slate-200 { border-color: var(--slate-200); }
.border-slate-300 { border-color: var(--slate-300); }
.border-emerald-200 { border-color: var(--emerald-200); }
.border-emerald-300 { border-color: var(--emerald-300); }
.border-emerald-400 { border-color: var(--emerald-400); }
.border-amber-200 { border-color: var(--amber-200); }
.border-dashed { border-style: dashed; }
.rounded { border-radius: var(--radius); }
.rounded-lg { border-radius: var(--radius-lg); }
.rounded-xl { border-radius: var(--radius-xl); }
.rounded-2xl { border-radius: var(--radius-2xl); }
.rounded-full { border-radius: 9999px; }
.p-2 { padding: 0.5rem; }
.p-3 { padding: 0.75rem; }
.p-4 { padding: 1rem; }
.p-5 { padding: 1.25rem; }
.p-6 { padding: 1.5rem; }
.py-2 { padding-top: 0.5rem; padding-bottom: 0.5rem; }
.py-3 { padding-top: 0.75rem; padding-bottom: 0.75rem; }
.py-4 { padding-top: 1rem; padding-bottom: 1rem; }
.py-6 { padding-top: 1.5rem; padding-bottom: 1.5rem; }
.py-8 { padding-top: 2rem; padding-bottom: 2rem; }
.py-12 { padding-top: 3rem; padding-bottom: 3rem; }
.px-2 { padding-left: 0.5rem; padding-right: 0.5rem; }
.px-3 { padding-left: 0.75rem; padding-right: 0.75rem; }
.px-4 { padding-left: 1rem; padding-right: 1rem; }
.mb-1 { margin-bottom: 0.25rem; }
.mb-2 { margin-bottom: 0.5rem; }
.mb-3 { margin-bottom: 0.75rem; }
.mb-4 { margin-bottom: 1rem; }
.mb-6 { margin-bottom: 1.5rem; }
.mt-1 { margin-top: 0.25rem; }
.mt-2 { margin-top: 0.5rem; }
.mt-3 { margin-top: 0.75rem; }
.mt-4 { margin-top: 1rem; }
.mt-6 { margin-top: 1.5rem; }
.mt-8 { margin-top: 2rem; }
.mr-1 { margin-right: 0.25rem; }
.mr-2 { margin-right: 0.5rem; }
.hidden { display: none; }
.flex-row { flex-direction: row; }
.w-full { width: 100%; }
.max-w-md { max-width: 28rem; }
.max-w-2xl { max-width: 42rem; }
.max-w-4xl { max-width: 56rem; }
.max-w-7xl { max-width: 80rem; }
.relative { position: relative; }
.absolute { position: absolute; }
.sticky { position: sticky; }
.self-start { align-self: flex-start; }
.shrink-0 { flex-shrink: 0; }
.overflow-x-auto { overflow-x: auto; }
.overflow-y-auto { overflow-y: auto; }
.max-h-60 { max-height: 15rem; }
.max-h-72 { max-height: 18rem; }
.max-h-96 { max-height: 24rem; }
.max-h-60vh { max-height: 60vh; }
.cursor-pointer { cursor: pointer; }
.whitespace-nowrap { white-space: nowrap; }
.truncate { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.animate-spin { animation: spin 1s linear infinite; }
@keyframes spin { from { transform: rotate(0deg); } to { transform: rotate(360deg); } }
.animate-pulse { animation: pulse 2s infinite; }

/* Empty state */
.empty-state { text-align: center; padding: 3rem 1rem; color: var(--slate-500); }
.empty-state-icon { width: 2.5rem; height: 2.5rem; margin: 0 auto 0.5rem; color: var(--slate-300); }

/* Print styles */
@media print {
  .app-header, .sidebar, .mobile-nav, .no-print { display: none !important; }
  .app-main { padding: 0; }
  body { background: #fff; }
}

/* ====== Additional utility classes ====== */
.space-y-3 > * + * { margin-top: 0.75rem; }
.space-y-2 > * + * { margin-top: 0.5rem; }
.py-10 { padding-top: 2.5rem; padding-bottom: 2.5rem; }
.py-16 { padding-top: 4rem; padding-bottom: 4rem; }
.text-left { text-align: left; }
.text-red-700 { color: var(--red-700); }
.text-sky-700 { color: var(--sky-700); }
.text-sky-600 { color: var(--sky-600); }
.text-slate-300 { color: var(--slate-300); }
.text-white { color: #fff; }
.bg-blue-600 { background: var(--blue-600); }
.border-blue-600 { border-color: var(--blue-600); }
.w-20 { width: 5rem; }
.w-24 { width: 6rem; }
.w-28 { width: 7rem; }
.w-32 { width: 8rem; }

/* Filter button group */
.filter-group { display: flex; gap: 0.25rem; background: var(--slate-100); padding: 0.25rem; border-radius: var(--radius); }
.filter-btn {
  padding: 0.375rem 0.75rem; font-size: 0.75rem; font-weight: 500;
  border-radius: calc(var(--radius) - 2px); border: none;
  background: none; color: var(--slate-500); cursor: pointer;
  transition: all 0.15s;
}
.filter-btn:hover { color: var(--slate-700); }
.filter-btn.active { background: #fff; color: var(--slate-900); box-shadow: var(--shadow-sm); }

/* Step content (stepper forms) */
.step-content { min-height: 8rem; }

/* Program checkbox */
.program-checkbox { width: 1rem; height: 1rem; accent-color: var(--emerald-600); }