@import url('https://fonts.googleapis.com/css2?family=Be+Vietnam+Pro:wght@400;500;600;700&family=Lora:wght@600;700&display=swap');

:root {
  --bg-primary: #f4f8f7;
  --bg-secondary: #ffffff;
  --bg-tertiary: #edf4f2;
  --bg-glass: rgba(255, 255, 255, 0.94);
  --border-glass: #d8e5e1;
  --border-color: #cbdcd7;
  --glass-bg: #ffffff;
  --radius-lg: 18px;
  --text-primary: #17323d;
  --text-secondary: #526b74;
  --text-muted: #60777e;
  
  --primary: #0b7a75;
  --primary-glow: rgba(11, 122, 117, 0.18);
  --accent: #b8573f;
  --accent-glow: rgba(184, 87, 63, 0.18);
  
  --success: #2f855a;
  --success-glow: rgba(47, 133, 90, 0.16);
  --warning: #b87512;
  --warning-glow: rgba(184, 117, 18, 0.16);
  --danger: #c64f4f;
  --danger-glow: rgba(198, 79, 79, 0.16);
  --info: #277da1;

  --sidebar-width: 260px;
  --drl-z-table-header: 50;
  --drl-z-sidebar: 100;
  --drl-z-sticky: 200;
  --drl-z-dropdown: 300;
  --drl-z-notification: 400;
  --drl-z-overlay: 700;
  --drl-z-modal: 710;
  --drl-z-toast: 900;
}

* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
  font-family: 'Be Vietnam Pro', sans-serif;
  scrollbar-width: thin;
  scrollbar-color: var(--bg-tertiary) var(--bg-primary);
}

body {
  background: radial-gradient(circle at top right, #1e1b4b, var(--bg-primary) 70%);
  color: var(--text-primary);
  min-height: 100vh;
  display: flex;
  overflow-x: clip;
}

/* Animations */
@keyframes fadeIn {
  from { opacity: 0; transform: translateY(10px); }
  to { opacity: 1; transform: translateY(0); }
}

@keyframes slideIn {
  from { transform: translateX(-20px); opacity: 0; }
  to { transform: translateX(0); opacity: 1; }
}

@keyframes pulseGlow {
  0%, 100% { box-shadow: 0 0 5px var(--primary-glow); }
  50% { box-shadow: 0 0 15px var(--primary); }
}

/* Layout container */
.app-container {
  display: flex;
  width: 100%;
  min-height: 100vh;
}

/* Sidebar Styling */
.sidebar {
  width: var(--sidebar-width);
  background: var(--bg-secondary);
  border-right: 1px solid var(--border-glass);
  display: flex;
  flex-direction: column;
  padding: 2rem 1.5rem;
  flex-shrink: 0;
  z-index: var(--drl-z-sidebar);
  animation: slideIn 0.4s ease;
}

.brand {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  margin-bottom: 2.5rem;
}

.brand-logo {
  width: 38px;
  height: 38px;
  background: linear-gradient(135deg, var(--primary), var(--accent));
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  font-size: 1.25rem;
  box-shadow: 0 4px 10px var(--primary-glow);
}

.brand-name {
  font-weight: 700;
  font-size: 1.2rem;
  letter-spacing: 0.5px;
  background: linear-gradient(135deg, #ffffff, var(--text-secondary));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

.menu-list {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.menu-item a {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.75rem 1rem;
  color: var(--text-secondary);
  text-decoration: none;
  border-radius: 8px;
  font-weight: 500;
  transition: all 0.3s ease;
}

.menu-item a:hover, .menu-item.active a {
  background: var(--bg-tertiary);
  color: var(--text-primary);
}

.menu-item.active a {
  border-left: 4px solid var(--primary);
  background: linear-gradient(90deg, rgba(59,130,246,0.15) 0%, transparent 100%);
}

.user-profile {
  margin-top: auto;
  padding-top: 1.5rem;
  border-top: 1px solid var(--border-glass);
  display: flex;
  align-items: center;
  gap: 0.75rem;
}

.user-avatar {
  width: 42px;
  height: 42px;
  border-radius: 50%;
  background: #374151;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 600;
  border: 2px solid var(--primary);
}

.user-info {
  display: flex;
  flex-direction: column;
  max-width: 140px;
}

.user-name {
  font-weight: 600;
  font-size: 0.9rem;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.user-role {
  font-size: 0.75rem;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.logout-btn {
  background: transparent;
  border: none;
  color: var(--danger);
  cursor: pointer;
  padding: 0.5rem;
  border-radius: 6px;
  transition: background 0.3s;
  display: flex;
  align-items: center;
  justify-content: center;
}

.logout-btn:hover {
  background: rgba(239, 68, 68, 0.1);
}

/* Main Content Area */
.main-content {
  flex-grow: 1;
  padding: 2.5rem;
  display: flex;
  flex-direction: column;
  gap: 2rem;
  overflow-y: auto;
  height: 100vh;
  animation: fadeIn 0.5s ease;
}

/* Top bar details */
.top-bar {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.page-title h1 {
  font-size: 1.75rem;
  font-weight: 700;
}

.page-title p {
  color: var(--text-secondary);
  font-size: 0.9rem;
  margin-top: 0.25rem;
}

/* Cards & Glassmorphic container */
.glass-card {
  background: var(--bg-glass);
  border: 1px solid var(--border-glass);
  border-radius: 16px;
  padding: 1.5rem;
  backdrop-filter: blur(10px);
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.2);
}

.glass-card h2 {
  font-size: 1.25rem;
  margin-bottom: 1.25rem;
  border-left: 4px solid var(--accent);
  padding-left: 0.75rem;
}

/* Stats dashboard widgets */
.stats-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 1.5rem;
}

.stat-card {
  display: flex;
  align-items: center;
  gap: 1rem;
}

.stat-icon {
  width: 50px;
  height: 50px;
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.5rem;
}

.stat-icon.primary { background: rgba(59, 130, 246, 0.15); color: var(--primary); }
.stat-icon.accent { background: rgba(139, 92, 246, 0.15); color: var(--accent); }
.stat-icon.success { background: rgba(16, 185, 129, 0.15); color: var(--success); }
.stat-icon.warning { background: rgba(245, 158, 11, 0.15); color: var(--warning); }

.stat-data {
  display: flex;
  flex-direction: column;
}

.stat-value {
  font-size: 1.5rem;
  font-weight: 700;
}

.stat-label {
  font-size: 0.85rem;
  color: var(--text-secondary);
}

/* Custom Table style */
.table-container {
  overflow-x: auto;
  margin-top: 1rem;
}

/* Search box styles */
.table-toolbar {
  gap: 0.5rem;
  align-items: center;
}
.search-box {
  position: relative;
  display: flex;
  align-items: center;
}
.search-icon {
  position: absolute;
  left: 0.6rem;
  color: var(--text-secondary);
  font-size: 0.9rem;
  pointer-events: none;
}
.search-input {
  width: 100%;
  padding: 0.45rem 0.75rem 0.45rem 2rem;
  border: 1px solid var(--border-color);
  border-radius: 8px;
  background: var(--bg-primary);
  color: var(--text-primary);
  font-size: 0.85rem;
  transition: border-color 0.2s, box-shadow 0.2s;
}
.search-input:focus {
  outline: none;
  border-color: var(--primary);
  box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.1);
}
.search-input::placeholder {
  color: var(--text-secondary);
  opacity: 0.7;
}
.result-count {
  white-space: nowrap;
  flex-shrink: 0;
}

.drl-field-invalid {
  border-color: var(--danger) !important;
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--danger) 14%, transparent) !important;
}

.drl-field-error {
  margin-top: 0.35rem;
  color: var(--danger);
  font-size: 0.78rem;
  line-height: 1.4;
}

.drl-validation-summary {
  margin: 0 0 1rem;
  padding: 0.8rem 0.95rem;
  color: #8f1d1d;
  background: #fff4f4;
  border: 1px solid #f2b8b8;
  border-left: 4px solid var(--danger);
  border-radius: 10px;
}

.drl-validation-summary ul {
  margin: 0.45rem 0 0;
  padding-left: 1.15rem;
}

.drl-validation-summary button {
  padding: 0;
  color: inherit;
  background: none;
  border: 0;
  font: inherit;
  text-align: left;
  text-decoration: underline;
  cursor: pointer;
}

table {
  width: 100%;
  border-collapse: collapse;
  text-align: left;
}

th {
  background: var(--bg-tertiary);
  color: var(--text-primary);
  font-weight: 600;
  padding: 1rem;
  font-size: 0.9rem;
}

th:first-child { border-top-left-radius: 10px; border-bottom-left-radius: 10px; }
th:last-child { border-top-right-radius: 10px; border-bottom-right-radius: 10px; }

td {
  padding: 1rem;
  border-bottom: 1px solid var(--border-glass);
  font-size: 0.9rem;
  color: var(--text-secondary);
}

tr:hover td {
  background: rgba(255, 255, 255, 0.02);
  color: var(--text-primary);
}

/* Badges for status */
.badge {
  display: inline-block;
  padding: 0.25rem 0.6rem;
  border-radius: 20px;
  font-size: 0.75rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.3px;
}

.badge.chua_nop, .badge.khoi_tao { background: var(--bg-tertiary); color: var(--text-secondary); }
.badge.da_nop_sv, .badge.sv_dang_cham { background: rgba(6, 182, 212, 0.15); color: var(--info); }
.badge.da_cham_cvht, .badge.cvht_dang_cham { background: rgba(245, 158, 11, 0.15); color: var(--warning); }
.badge.da_duyet_khoa, .badge.da_hoan_thanh, .badge.khoa_duyet { background: rgba(16, 185, 129, 0.15); color: var(--success); }
.badge.bi_tra_ve { background: rgba(239, 68, 68, 0.15); color: var(--danger); }

/* Buttons styling */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.6rem 1.2rem;
  border-radius: 8px;
  font-weight: 500;
  font-size: 0.85rem;
  cursor: pointer;
  border: none;
  transition: all 0.2s ease;
}

.btn-primary {
  background: linear-gradient(135deg, var(--primary), var(--accent));
  color: #fff;
  box-shadow: 0 4px 10px rgba(59, 130, 246, 0.2);
}

.btn-primary:hover {
  filter: brightness(1.1);
  transform: translateY(-1px);
}

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

.btn-secondary:hover {
  background: #374151;
}

.btn-danger {
  background: rgba(239, 68, 68, 0.15);
  color: var(--danger);
  border: 1px solid rgba(239, 68, 68, 0.2);
}

.btn-danger:hover {
  background: var(--danger);
  color: #fff;
}

.btn-success {
  background: rgba(16, 185, 129, 0.15);
  color: var(--success);
  border: 1px solid rgba(16, 185, 129, 0.2);
}

.btn-success:hover {
  background: var(--success);
  color: #fff;
}

.btn-info {
  background: rgba(6, 182, 212, 0.15);
  color: var(--info);
  border: 1px solid rgba(6, 182, 212, 0.2);
}

.btn-info:hover {
  background: var(--info);
  color: #fff;
}

.btn-warning {
  background: rgba(245, 158, 11, 0.15);
  color: var(--warning);
  border: 1px solid rgba(245, 158, 11, 0.2);
}

.btn-warning:hover {
  background: var(--warning);
  color: #fff;
}

.btn-text {
  background: transparent;
  border: none;
  color: var(--primary);
  font-size: 0.8rem;
  cursor: pointer;
  padding: 0.2rem 0.4rem;
  border-radius: 4px;
}

.btn-text:hover {
  background: rgba(99, 102, 241, 0.1);
}

.btn-small {
  padding: 0.35rem 0.75rem;
  font-size: 0.8rem;
  border-radius: 6px;
}

.btn-group {
  display: flex;
  gap: 0.5rem;
}

.action-icon-btn:hover {
  transform: translateY(-1px);
  filter: brightness(1.15);
  box-shadow: 0 3px 8px rgba(0,0,0,0.15) !important;
}
.action-icon-btn:active {
  transform: translateY(0);
  filter: brightness(0.95);
}

/* Modals & Forms styles */
.modal-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  background: rgba(0, 0, 0, 0.6);
  backdrop-filter: blur(5px);
  display: none;
  align-items: center;
  justify-content: center;
  z-index: var(--drl-z-overlay);
}

.modal-content {
  background: var(--bg-secondary);
  border: 1px solid var(--border-glass);
  border-radius: 16px;
  width: 90%;
  max-width: 600px;
  max-height: 85vh;
  overflow-y: auto;
  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.5);
  animation: fadeIn 0.3s ease;
}

.modal-header {
  padding: 1.5rem;
  border-bottom: 1px solid var(--border-glass);
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.modal-header h3 {
  font-size: 1.25rem;
  font-weight: 600;
}

.modal-body {
  padding: 1.5rem;
}

.modal-footer {
  padding: 1.25rem 1.5rem;
  border-top: 1px solid var(--border-glass);
  display: flex;
  justify-content: flex-end;
  gap: 0.75rem;
}

.close-modal {
  background: transparent;
  border: none;
  color: var(--text-secondary);
  font-size: 1.5rem;
  cursor: pointer;
}

/* Form controls */
.form-group {
  margin-bottom: 1.25rem;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.form-group label {
  font-size: 0.85rem;
  font-weight: 500;
  color: var(--text-secondary);
}

.form-control {
  background: var(--bg-tertiary);
  border: 1px solid var(--border-glass);
  border-radius: 8px;
  padding: 0.75rem 1rem;
  color: var(--text-primary);
  font-size: 0.9rem;
  transition: all 0.2s;
}

.form-control:focus {
  outline: none;
  border-color: var(--primary);
  box-shadow: 0 0 0 2px var(--primary-glow);
}

select.form-control {
  cursor: pointer;
}

/* Assessment criteria sheet styling */
.criteria-item {
  display: flex;
  flex-direction: column;
  padding: 0.75rem 0;
  border-bottom: 1px dashed var(--border-glass);
}

.criteria-item.parent {
  font-weight: 600;
  color: var(--text-primary);
  background: rgba(255, 255, 255, 0.02);
  padding: 0.75rem 0.5rem;
  border-bottom: 1px solid var(--border-glass);
  margin-top: 0.5rem;
  border-radius: 4px;
}

.criteria-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 1rem;
}

.criteria-title {
  flex-grow: 1;
}

.criteria-points {
  display: flex;
  align-items: center;
  gap: 1.5rem;
  flex-shrink: 0;
}

.criteria-max-badge {
  font-size: 0.8rem;
  color: var(--accent);
  background: rgba(139, 92, 246, 0.1);
  padding: 0.2rem 0.5rem;
  border-radius: 4px;
  min-width: 55px;
  text-align: center;
}

.criteria-input-container {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.criteria-input {
  width: 60px;
  text-align: center;
  padding: 0.4rem;
  border-radius: 6px;
  border: 1px solid var(--border-glass);
  background: var(--bg-secondary);
  color: #fff;
  font-weight: 600;
}

.criteria-input:focus {
  outline: none;
  border-color: var(--primary);
}

.criteria-input:disabled {
  background: transparent;
  border-color: transparent;
  color: var(--text-primary);
}

.total-score-box {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 1.5rem;
  padding: 1.25rem;
  background: linear-gradient(135deg, rgba(59, 130, 246, 0.1), rgba(139, 92, 246, 0.1));
  border: 1px solid var(--border-glass);
  border-radius: 10px;
}

.total-score-label {
  font-weight: 700;
  font-size: 1.1rem;
}

.total-score-value {
  font-weight: 700;
  font-size: 1.5rem;
  color: var(--success);
}

/* Alert notifications */
.alert {
  padding: 1rem 1.25rem;
  border-radius: 8px;
  margin-bottom: 1.5rem;
  font-size: 0.9rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  animation: fadeIn 0.3s ease;
}

.alert-success { background: rgba(16, 185, 129, 0.15); color: var(--success); border: 1px solid rgba(16, 185, 129, 0.2); }
.alert-warning { background: rgba(245, 158, 11, 0.15); color: var(--warning); border: 1px solid rgba(245, 158, 11, 0.2); }
.alert-danger { background: rgba(239, 68, 68, 0.15); color: var(--danger); border: 1px solid rgba(239, 68, 68, 0.2); }

/* Login Page custom styles */
.login-container {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 100vh;
  width: 100vw;
}

.login-card {
  width: 100%;
  max-width: 440px;
  padding: 2.5rem;
  animation: fadeIn 0.4s ease;
}

.login-header {
  text-align: center;
  margin-bottom: 2rem;
}

.login-header .logo {
  display: inline-flex;
  width: 50px;
  height: 50px;
  background: linear-gradient(135deg, var(--primary), var(--accent));
  border-radius: 12px;
  align-items: center;
  justify-content: center;
  font-size: 1.5rem;
  font-weight: 800;
  margin-bottom: 1rem;
  box-shadow: 0 5px 15px var(--primary-glow);
}

.login-header h2 {
  font-size: 1.5rem;
  font-weight: 700;
  margin-bottom: 0.5rem;
}

.login-header p {
  color: var(--text-secondary);
  font-size: 0.85rem;
}

.login-demo-accounts {
  margin-top: 1.5rem;
  padding-top: 1.5rem;
  border-top: 1px solid var(--border-glass);
}

.login-demo-accounts h4 {
  font-size: 0.8rem;
  color: var(--text-muted);
  text-transform: uppercase;
  margin-bottom: 0.75rem;
  letter-spacing: 0.5px;
}

.demo-account-tag {
  display: inline-block;
  font-size: 0.75rem;
  padding: 0.3rem 0.5rem;
  background: var(--bg-tertiary);
  border: 1px solid var(--border-glass);
  border-radius: 6px;
  margin: 0 0.25rem 0.5rem 0;
  color: var(--text-secondary);
  cursor: pointer;
  transition: all 0.2s;
}

.demo-account-tag:hover {
  background: var(--primary);
  color: #fff;
  border-color: var(--primary);
}

/* Header summary on top of dashboards */
.dashboard-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 1rem;
}

.period-select-container {
  display: flex;
  align-items: center;
  gap: 0.75rem;
}

/* Criteria Tree list */
.criteria-tree-list {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  max-height: 400px;
  overflow-y: auto;
  padding-right: 0.5rem;
}

.tree-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0.6rem 0.75rem;
  background: rgba(255,255,255,0.02);
  border: 1px solid var(--border-glass);
  border-radius: 8px;
}

.tree-item.sub {
  margin-left: 1.5rem;
  background: transparent;
  border-style: dashed;
}

/* ==========================================
   NOTIFICATION BELL WIDGET & POPUP STYLES
   ========================================== */
.notification-widget {
  position: fixed;
  top: 1rem;
  right: 2rem;
  z-index: var(--drl-z-notification);
}

.notif-bell-btn {
  background: var(--bg-glass);
  border: 1px solid var(--border-glass);
  width: 42px;
  height: 42px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.2rem;
  cursor: pointer;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.3);
  backdrop-filter: blur(10px);
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  position: relative;
  color: var(--text-primary);
}

.notif-bell-btn:hover {
  transform: scale(1.08);
  background: var(--bg-tertiary);
  border-color: var(--primary);
  box-shadow: 0 0 12px var(--primary-glow);
}

.notif-badge {
  position: absolute;
  top: -2px;
  right: -2px;
  background: var(--danger);
  color: white;
  font-size: 0.72rem;
  font-weight: 700;
  border-radius: 50%;
  width: 18px;
  height: 18px;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 2px 5px rgba(239, 68, 68, 0.5);
  animation: pulseGlow 2s infinite;
}

.notif-dropdown {
  position: absolute;
  top: 52px;
  right: 0;
  width: 340px;
  background: var(--bg-secondary);
  backdrop-filter: blur(25px);
  border: 1px solid var(--border-glass);
  border-radius: 12px;
  box-shadow: 0 15px 40px rgba(0, 0, 0, 0.5);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  max-height: 420px;
  animation: fadeIn 0.25s cubic-bezier(0.4, 0, 0.2, 1);
}

.notif-header {
  padding: 0.9rem 1.2rem;
  border-bottom: 1px solid var(--border-glass);
  display: flex;
  justify-content: space-between;
  align-items: center;
  background: rgba(255, 255, 255, 0.02);
}

.notif-header h3 {
  font-size: 0.95rem;
  margin: 0;
  font-weight: 600;
  color: var(--text-primary);
}

.notif-header .btn-text {
  background: none;
  border: none;
  color: var(--primary);
  cursor: pointer;
  font-size: 0.8rem;
  font-weight: 600;
  transition: opacity 0.2s;
}

.notif-header .btn-text:hover {
  opacity: 0.8;
}

.notif-list {
  overflow-y: auto;
  flex: 1;
  max-height: 350px;
}

.notif-item {
  padding: 0.9rem 1.2rem;
  border-bottom: 1px solid rgba(255, 255, 255, 0.03);
  cursor: pointer;
  transition: all 0.2s;
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
  position: relative;
}

.notif-item:hover {
  background: rgba(255, 255, 255, 0.03);
}

.notif-item.unread {
  background: rgba(59, 130, 246, 0.06);
}

.notif-item.unread::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 3px;
  background: var(--primary);
}

.notif-item-title {
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--text-primary);
}

.notif-item-desc {
  font-size: 0.8rem;
  color: var(--text-secondary);
  line-height: 1.35;
}

.notif-item-time {
  font-size: 0.72rem;
  color: var(--text-muted);
  text-align: right;
  margin-top: 0.1rem;
}

.notif-empty {
  padding: 2.5rem;
  text-align: center;
  color: var(--text-muted);
  font-size: 0.85rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.5rem;
}

/* Optimization for Large Screens (Màn hình lớn) */
@media (min-width: 1400px) {
  :root {
    --sidebar-width: 290px;
  }
  body {
    font-size: 15px;
  }
  .main-content {
    padding: 3.5rem;
    max-width: 1700px;
    margin: 0 auto;
    width: calc(100% - var(--sidebar-width));
  }
  .modal-overlay {
    padding: 2rem;
  }
  .modal-content {
    max-width: 900px;
    max-height: 90vh;
  }
  #criteria-modal .modal-content, 
  #grade-sheet-modal .modal-content,
  #class-students-modal .modal-content {
    max-width: 1200px !important;
  }
  .stats-grid {
    grid-template-columns: repeat(4, 1fr);
  }
  .criteria-row {
    font-size: 0.95rem;
  }
  table th, table td {
    padding: 1.1rem;
    font-size: 0.95rem;
  }
}

/* Fullscreen Modal Support (mở rộng toàn màn hình) */
.modal-overlay.fullscreen-mode {
  align-items: stretch !important;
  justify-content: stretch !important;
  background: rgba(0, 0, 0, 0.75);
}

#criteria-modal.fullscreen-mode .modal-content,
#grade-sheet-modal.fullscreen-mode .modal-content,
#class-students-modal.fullscreen-mode .modal-content,
#assignment-modal.fullscreen-mode .modal-content {
  max-width: 100vw !important;
}

.modal-content.fullscreen {
  width: 100vw !important;
  max-width: 100vw !important;
  height: 100vh !important;
  max-height: 100vh !important;
  border-radius: 0 !important;
  border: none !important;
  margin: 0 !important;
  display: flex !important;
  flex-direction: column !important;
  background: var(--bg-secondary, #f8fafc) !important;
  animation: fullscreenZoom 0.25s cubic-bezier(0.4, 0, 0.2, 1) !important;
}

@keyframes fullscreenZoom {
  from { transform: scale(0.96); opacity: 0; }
  to { transform: scale(1); opacity: 1; }
}

.modal-content.fullscreen .modal-header {
  padding: 1rem 1.5rem !important;
  border-bottom: 1px solid var(--border-glass, rgba(0,0,0,0.08)) !important;
  flex-shrink: 0 !important;
}

.modal-content.fullscreen .modal-body {
  flex: 1 !important;
  overflow-y: auto !important;
  padding: 1.25rem 1.5rem !important;
}

.modal-content.fullscreen .modal-footer {
  padding: 0.75rem 1.5rem !important;
  border-top: 1px solid var(--border-glass, rgba(0,0,0,0.08)) !important;
  flex-shrink: 0 !important;
  background: var(--bg-primary, #fff) !important;
}

/* Hide header close button for fullscreen — Escape key still works */
.modal-content.fullscreen .close-modal,
.modal-content.fullscreen .modal-close {
  font-size: 1.6rem !important;
  padding: 0.25rem 0.6rem !important;
}

/* Offcanvas Drawer Support */
.modal-overlay.drawer-mode {
  align-items: flex-start !important;
  justify-content: flex-end !important;
}

.modal-content.drawer {
  width: 800px !important;
  max-width: 100vw !important;
  height: 100vh !important;
  max-height: 100vh !important;
  border-radius: 16px 0 0 16px !important;
  border-right: none !important;
  transform: translateX(100%) !important;
  transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
  display: flex !important;
  flex-direction: column !important;
  margin: 0 !important;
}

.modal-overlay.drawer-mode.show-drawer .modal-content.drawer {
  transform: translateX(0) !important;
}

.modal-content.drawer .modal-body {
  flex: 1 !important;
  overflow-y: auto !important;
  max-height: none !important;
}


/* ============================================================
   CAVA BỘ GD&ĐT - Form tiêu chí chuẩn quản lý (MODERN DARK THEME)
   ============================================================ */

.cava-header {
  background: linear-gradient(135deg, #1e293b 0%, #0f172a 100%) !important;
  border-bottom: 2px solid var(--primary) !important;
  color: #fff !important;
  padding: 1.25rem 1.75rem !important;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.cava-header::before {
  content: '';
  position: absolute;
  inset: 6px;
  border: 1px solid rgba(59, 130, 246, 0.15);
  pointer-events: none;
}

.cava-header-left {
  display: flex;
  align-items: center;
  gap: 1rem;
  flex: 1;
}

.cava-emblem {
  font-size: 2.2rem;
  filter: drop-shadow(0 2px 8px var(--primary-glow));
  line-height: 1;
}

.cava-subtitle {
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.05em;
  color: var(--primary);
  text-transform: uppercase;
  margin-bottom: 0.15rem;
}

.cava-title {
  font-size: 1.2rem;
  font-weight: 700;
  letter-spacing: 0.02em;
  color: #fff;
  text-shadow: 0 0 10px rgba(59, 130, 246, 0.3);
}

.cava-subtitle-small {
  font-size: 0.8rem;
  color: var(--text-secondary);
  margin-top: 0.15rem;
}

.cava-header .close-modal {
  color: var(--text-secondary) !important;
  background: rgba(255, 255, 255, 0.05);
  width: 32px;
  height: 32px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.2rem;
  border: 1px solid var(--border-glass);
  transition: all 0.2s;
}

.cava-header .close-modal:hover {
  background: rgba(255, 255, 255, 0.15);
  color: #fff !important;
  transform: rotate(90deg);
}

/* CAVA Body */
.cava-body {
  background: var(--bg-secondary);
  padding: 1.5rem;
  max-height: calc(100vh - 200px);
  overflow-y: auto;
}

/* Info Box - Thông tin mẫu phiếu */
.cava-info-box {
  background: rgba(255, 255, 255, 0.02);
  border: 1px solid var(--border-glass);
  border-left: 4px solid var(--primary);
  padding: 1rem 1.25rem;
  margin-bottom: 1.5rem;
  border-radius: 8px;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.2);
}

.cava-info-row {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  padding: 0.5rem 0;
  border-bottom: 1px dashed var(--border-glass);
  gap: 0.5rem;
}

.cava-info-row:last-child {
  border-bottom: none;
}

.cava-info-label {
  font-weight: 600;
  color: var(--text-secondary);
  min-width: 160px;
  font-size: 0.875rem;
  flex-shrink: 0;
}

.cava-info-value {
  color: var(--text-primary);
  font-weight: 600;
  font-size: 0.95rem;
  flex: 1;
  min-width: 0;
  word-wrap: break-word;
  overflow-wrap: break-word;
}

.cava-info-suffix {
  color: var(--text-muted);
  font-size: 0.85rem;
  margin-left: 0.5rem;
}

.cava-badge {
  display: inline-block;
  padding: 0.25rem 0.75rem;
  border-radius: 999px;
  font-size: 0.75rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.03em;
}

.cava-badge-pending {
  background: rgba(245, 158, 11, 0.15);
  color: var(--warning);
  border: 1px solid var(--warning-glow);
}

.cava-badge-valid {
  background: rgba(16, 185, 129, 0.15);
  color: var(--success);
  border: 1px solid var(--success-glow);
}

.cava-badge-invalid {
  background: rgba(239, 68, 68, 0.15);
  color: var(--danger);
  border: 1px solid var(--danger-glow);
}

/* Criteria Builder Layout */
.cava-toolbar {
  border-bottom: 1px solid rgba(255,255,255,0.06);
}
.cava-footer {
  border-top: 1px solid rgba(255,255,255,0.08);
}
#criteria-scroll {
  min-height: 0;
}
.cava-group-card {
  background: rgba(30,41,59,0.7);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 12px;
  box-shadow: 0 8px 32px rgba(0,0,0,0.2);
  display: flex;
  flex-direction: column;
  gap: 12px;
  transition: all .3s;
}
.cava-group-header {
  display: grid;
  grid-template-columns: minmax(0,1fr) minmax(120px,150px) auto;
  gap: 12px;
  align-items: end;
  background: rgba(255,255,255,0.02);
  padding: 10px 14px;
  border-radius: 8px;
  border: 1px solid rgba(255,255,255,0.04);
}
.cava-group-header .form-control {
  min-width: 0;
  width: 100%;
  box-sizing: border-box;
}
.cava-group-body {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding-left: 1.25rem;
  border-left: 2px dashed rgba(255,255,255,0.1);
  margin: 4px 0 8px 10px;
}
.cava-group-body[aria-hidden="true"] {
  display: none;
}
.cava-child-row {
  display: grid;
  grid-template-columns: minmax(0,1fr) minmax(100px,130px) 36px;
  gap: 10px;
  align-items: start;
  background: rgba(255,255,255,0.02);
  border: 1px solid rgba(255,255,255,0.05);
  border-radius: 8px;
  padding: 12px;
}
.cava-child-main {
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-width: 0;
}
.cava-child-main .form-control {
  min-width: 0;
  width: 100%;
  box-sizing: border-box;
}
.cava-child-main textarea.child-guide {
  min-height: 5rem;
  resize: vertical;
  line-height: 1.45;
  font-family: inherit;
}
.cava-child-score-wrap {
  position: relative;
  min-width: 0;
}
.cava-child-score-wrap .form-control {
  width: 100%;
  box-sizing: border-box;
  padding-right: 28px;
}
.cava-child-score-suffix {
  position: absolute;
  right: 10px;
  top: 50%;
  transform: translateY(-50%);
  font-size: 0.75rem;
  color: #64748b;
  pointer-events: none;
}
.cava-child-actions {
  display: flex;
  align-items: flex-start;
  gap: 6px;
}
.cava-group-error,
.cava-child-error {
  font-size: 0.78rem;
  color: #f87171;
  margin-top: 4px;
  min-height: 18px;
}
.cava-add-child {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 14px;
  background: rgba(59,130,246,0.12);
  border: 1px solid rgba(59,130,246,0.3);
  border-radius: 8px;
  color: #60a5fa;
  font-size: 0.85rem;
  font-weight: 600;
  cursor: pointer;
  transition: all .2s;
}
.cava-add-child:hover {
  background: rgba(59,130,246,0.2);
}
.cava-group-actions {
  display: flex;
  align-items: center;
  gap: 8px;
}
.cava-btn-icon {
  width: 36px;
  height: 36px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 8px;
  cursor: pointer;
  border: 1px solid transparent;
  background: rgba(239,68,68,0.1);
  color: #f87171;
  transition: all .2s;
}
.cava-btn-icon:hover {
  background: rgba(239,68,68,0.18);
}
.cava-expand-btn {
  width: 36px;
  height: 36px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 8px;
  cursor: pointer;
  border: 1px solid rgba(255,255,255,0.08);
  background: rgba(255,255,255,0.04);
  color: #cbd5e1;
  transition: all .2s;
}
.cava-expand-btn:hover {
  background: rgba(255,255,255,0.08);
}

/* Section Header */
.cava-section {
  background: transparent;
  margin-bottom: 1.5rem;
}

.cava-section-header {
  background: transparent;
  padding: 0.85rem 0;
  border-bottom: 1px solid var(--border-glass);
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.cava-section-title {
  margin: 0;
  font-size: 0.95rem;
  font-weight: 700;
  color: var(--text-primary);
  letter-spacing: 0.02em;
  text-transform: uppercase;
}

.cava-section-meta {
  display: flex;
  gap: 1rem;
}

.cava-meta-item {
  font-size: 0.8rem;
  color: var(--text-secondary);
}

.cava-meta-item strong {
  color: var(--primary);
  font-weight: 700;
}

/* CAVA Table */
.cava-table-wrapper {
  overflow-x: auto;
  border: 1px solid var(--border-glass);
  border-radius: 8px;
  background: var(--bg-primary);
}

.cava-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.875rem;
}

.cava-table thead {
  background: rgba(255, 255, 255, 0.02);
}

.cava-table thead th {
  padding: 0.85rem 0.5rem;
  text-align: center;
  font-weight: 700;
  color: var(--primary);
  text-transform: uppercase;
  font-size: 0.75rem;
  letter-spacing: 0.05em;
  border-bottom: 2px solid var(--border-glass);
  border-right: 1px solid var(--border-glass);
}

.cava-table thead th:last-child {
  border-right: none;
}

.cava-col-stt { width: 50px; }
.cava-col-code { width: 80px; }
.cava-col-name { text-align: left !important; min-width: 280px; }
.cava-col-group { width: 130px; }
.cava-col-type { width: 100px; }
.cava-col-score { width: 90px; }
.cava-col-pct { width: 70px; }
.cava-col-action { width: 150px; }

.cava-table tbody tr {
  border-bottom: 1px solid var(--border-glass);
  transition: background 0.15s;
}

.cava-table tbody tr:hover {
  background: rgba(255, 255, 255, 0.02);
}

.cava-table tbody tr.cava-row-parent {
  background: rgba(59, 130, 246, 0.06);
  font-weight: 600;
}

.cava-table tbody tr.cava-row-parent td {
  color: #93c5fd;
}

.cava-table tbody td {
  padding: 0.75rem 0.5rem;
  text-align: center;
  border-right: 1px solid var(--border-glass);
  vertical-align: middle;
  color: var(--text-primary);
}

.cava-table tbody td:last-child {
  border-right: none;
}

.cava-cell-code {
  font-family: 'Courier New', monospace;
  background: rgba(255, 255, 255, 0.05);
  padding: 0.2rem 0.5rem;
  border-radius: 4px;
  font-size: 0.75rem;
  color: var(--text-primary);
  font-weight: 600;
  border: 1px solid var(--border-glass);
}

.cava-cell-code-parent {
  background: var(--primary);
  color: #fff;
  border-color: var(--primary);
  box-shadow: 0 0 8px var(--primary-glow);
}

.cava-cell-name {
  text-align: left;
  padding-left: 0.75rem !important;
}

.cava-cell-name-children {
  padding-left: 2rem !important;
  position: relative;
  text-align: left;
  color: var(--text-secondary);
}

.cava-cell-name-children::before {
  content: '└─';
  position: absolute;
  left: 0.85rem;
  color: var(--text-muted);
}

.cava-cell-group {
  font-size: 0.75rem;
  color: var(--text-secondary);
  font-style: italic;
}

.cava-cell-type {
  font-size: 0.7rem;
  padding: 0.15rem 0.4rem;
  border-radius: 3px;
  display: inline-block;
  font-weight: 600;
}

.cava-type-dinh_luong { background: rgba(59, 130, 246, 0.15); color: #93c5fd; }
.cava-type-dinh_tinh { background: rgba(245, 158, 11, 0.15); color: #fcd34d; }
.cava-type-co_diem { background: rgba(16, 185, 129, 0.15); color: #34d399; }

.cava-cell-score {
  font-weight: 700;
  color: var(--text-primary);
}

.cava-cell-pct {
  color: var(--text-secondary);
  font-size: 0.8rem;
}

.cava-cell-actions {
  display: flex;
  gap: 0.4rem;
  justify-content: center;
}

.cava-icon-btn {
  width: 28px;
  height: 28px;
  border: 1px solid var(--border-glass);
  background: var(--bg-tertiary);
  border-radius: 4px;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 0.85rem;
  transition: all 0.15s;
  color: var(--text-primary);
}

.cava-icon-btn:hover {
  background: var(--primary);
  border-color: var(--primary);
  transform: translateY(-1px);
  color: #fff;
}

.cava-empty-state {
  padding: 2.5rem;
  text-align: center;
  color: var(--text-muted);
  font-style: italic;
}

/* CAVA Form Section */
.cava-form-section {
  background: var(--bg-secondary);
  border: 1px solid var(--border-glass);
  border-top: 4px solid var(--primary);
  padding: 1.25rem 1.5rem;
  margin-bottom: 1.5rem;
  border-radius: 8px;
}

.cava-form-header {
  border-bottom: 1px solid var(--border-glass);
  padding-bottom: 0.75rem;
  margin-bottom: 1rem;
}

.cava-form-hint {
  margin: 0.3rem 0 0;
  font-size: 0.8rem;
  color: var(--text-muted);
  font-style: italic;
}

.cava-form {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.cava-form-row {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 1rem;
}

.cava-form-group {
  display: flex;
  flex-direction: column;
}

.cava-form-full {
  grid-column: 1 / -1;
}

.cava-label {
  font-weight: 600;
  font-size: 0.825rem;
  color: var(--text-secondary);
  margin-bottom: 0.3rem;
  display: flex;
  align-items: center;
  gap: 0.25rem;
}

.cava-label-required {
  color: var(--danger);
  font-weight: 700;
}

.cava-label-optional {
  color: var(--text-muted);
  font-size: 0.75rem;
  font-style: italic;
}

.cava-input, .cava-select, .cava-textarea {
  width: 100%;
  padding: 0.55rem 0.75rem;
  border: 1px solid var(--border-glass);
  border-radius: 6px;
  font-size: 0.875rem;
  font-family: inherit;
  background: var(--bg-tertiary);
  transition: all 0.15s;
  color: var(--text-primary);
}

.cava-input:focus, .cava-select:focus, .cava-textarea:focus {
  outline: none;
  border-color: var(--primary);
  box-shadow: 0 0 0 3px var(--primary-glow);
}

.cava-input:read-only {
  background: rgba(0, 0, 0, 0.2);
  color: var(--text-muted);
  cursor: not-allowed;
}

.cava-textarea {
  resize: vertical;
  min-height: 60px;
  font-family: inherit;
}

.cava-input-with-suffix {
  position: relative;
  display: flex;
  align-items: center;
}

.cava-input-with-suffix .cava-input {
  padding-right: 60px;
}

.cava-input-suffix {
  position: absolute;
  right: 1px;
  color: var(--text-secondary);
  font-size: 0.75rem;
  pointer-events: none;
  background: rgba(0, 0, 0, 0.25);
  padding: 0.5rem 0.6rem;
  border-radius: 0 5px 5px 0;
  border-left: 1px solid var(--border-glass);
}

.cava-helper {
  font-size: 0.7rem;
  color: var(--text-muted);
  margin-top: 0.2rem;
}

.cava-char-counter {
  text-align: right;
  font-size: 0.7rem;
  color: var(--text-muted);
  margin-top: 0.2rem;
}

.cava-char-counter.cava-warning {
  color: var(--warning);
}

/* Radio Group CAVA */
.cava-radio-group {
  display: flex;
  gap: 0.75rem;
  flex-wrap: wrap;
  padding: 0.3rem 0;
}

.cava-radio {
  display: flex;
  align-items: center;
  gap: 0.35rem;
  cursor: pointer;
  padding: 0.4rem 0.75rem;
  border: 1px solid var(--border-glass);
  border-radius: 6px;
  background: var(--bg-tertiary);
  transition: all 0.15s;
}

.cava-radio:hover {
  background: rgba(255, 255, 255, 0.05);
  border-color: var(--primary);
}

.cava-radio input {
  margin: 0;
  accent-color: var(--primary);
}

.cava-radio input:checked + .cava-radio-label {
  color: var(--primary);
  font-weight: 600;
}

.cava-radio:has(input:checked) {
  background: rgba(59, 130, 246, 0.1);
  border-color: var(--primary);
}

.cava-radio-label {
  font-size: 0.8rem;
  color: var(--text-primary);
}

/* Buttons CAVA */
.cava-form-actions {
  display: flex;
  gap: 0.75rem;
  margin-top: 0.5rem;
  padding-top: 1rem;
  border-top: 1px dashed var(--border-glass);
}

.cava-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.4rem;
  padding: 0.55rem 1.25rem;
  border-radius: 6px;
  font-size: 0.875rem;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.15s;
  border: 1px solid transparent;
  text-transform: uppercase;
  letter-spacing: 0.03em;
}

.cava-btn-primary {
  background: var(--primary);
  color: #fff;
  border-color: var(--primary);
  flex: 1;
}

.cava-btn-primary:hover {
  background: #2563eb;
  box-shadow: 0 4px 12px var(--primary-glow);
}

.cava-btn-secondary {
  background: var(--bg-tertiary);
  color: var(--text-secondary);
  border-color: var(--border-glass);
}

.cava-btn-secondary:hover {
  background: rgba(255, 255, 255, 0.05);
  color: var(--text-primary);
}

.cava-btn-icon {
  font-size: 1rem;
  line-height: 1;
}

/* CAVA Legend */
.cava-legend {
  background: rgba(255, 255, 255, 0.02);
  border: 1px solid var(--border-glass);
  border-left: 4px solid var(--warning);
  padding: 1rem 1.25rem;
  border-radius: 8px;
}

.cava-legend-title {
  margin: 0 0 0.6rem;
  font-size: 0.85rem;
  font-weight: 700;
  color: var(--warning);
  text-transform: uppercase;
  letter-spacing: 0.03em;
}

.cava-legend-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 0.5rem;
}

.cava-legend-item {
  font-size: 0.78rem;
  color: var(--text-secondary);
  padding: 0.3rem 0;
  border-bottom: 1px dotted var(--border-glass);
}

.cava-legend-item:last-child {
  border-bottom: none;
}

.cava-legend-item strong {
  color: var(--text-primary);
  font-weight: 700;
  margin-right: 0.3rem;
}

/* Sub-form child row styling */
.cava-child-row {
  display: grid;
  grid-template-columns: minmax(0,1fr) minmax(100px,130px) 36px;
  gap: 10px;
  align-items: start;
  background: rgba(255, 255, 255, 0.02);
  padding: 12px;
  border-radius: 8px;
  border: 1px solid var(--border-glass);
  transition: all 0.2s ease-in-out;
}

.cava-child-row:hover {
  border-color: rgba(59, 130, 246, 0.4);
  background: rgba(59, 130, 246, 0.03);
}

/* Responsive */
@media (max-width: 768px) {
  .cava-table {
    font-size: 0.75rem;
  }
  .cava-table thead th,
  .cava-table tbody td {
    padding: 0.4rem 0.25rem;
  }
  .cava-form-row {
    grid-template-columns: 1fr;
  }
  .cava-info-row {
    flex-direction: column;
    align-items: flex-start;
    gap: 0.2rem;
  }
  .cava-info-label {
    min-width: auto;
  }
}

/* Print style for CAVA */
@media print {
  .cava-form-section,
  .cava-form-actions,
  .cava-cell-actions {
    display: none !important;
  }
}


/* ============================================
   REVIEW ASSESSMENT MODAL STYLES
   ============================================ */
.review-table-wrapper {
  max-height: 450px;
  overflow-y: auto;
  border: 1px solid var(--border-glass);
  border-radius: 6px;
  margin-bottom: 1rem;
  background: var(--bg-primary);
}

.review-table thead {
  position: sticky;
  top: 0;
  z-index: var(--drl-z-table-header);
  background: var(--bg-tertiary);
}

.review-table tbody tr:hover {
  background: rgba(99, 102, 241, 0.04);
}

.review-khoa-input:focus {
  outline: none;
  border-color: #6366f1 !important;
  box-shadow: 0 0 0 2px rgba(99, 102, 241, 0.15);
}

.review-khoa-input:disabled {
  background: rgba(255,255,255,0.04);
  cursor: not-allowed;
  color: var(--text-muted);
}

.review-score-card {
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.review-score-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(0,0,0,0.08);
}

#review-assessment-modal {
  align-items: center !important;
  justify-content: center !important;
  padding: clamp(0.5rem, 1.5vw, 1.25rem) !important;
}

#review-assessment-modal .review-window-frame {
  width: min(1600px, calc(100vw - 2rem)) !important;
  max-width: calc(100vw - 2rem) !important;
  height: min(940px, calc(100dvh - 2rem)) !important;
  max-height: calc(100dvh - 2rem) !important;
  display: flex !important;
  flex-direction: column !important;
  overflow: hidden !important;
  border-radius: 16px !important;
}

#review-assessment-modal .modal-header {
  flex: 0 0 auto !important;
  gap: 1rem;
  border-bottom: 1px solid var(--border-glass);
}

#review-assessment-modal .modal-body {
  flex: 1 1 auto !important;
  min-height: 0 !important;
  overflow: auto !important;
  padding: clamp(1rem, 1.6vw, 1.5rem) !important;
  overscroll-behavior: contain;
}

#review-assessment-modal .review-table-wrapper {
  max-height: min(52vh, 560px) !important;
  overflow: auto !important;
  overscroll-behavior: contain;
}

#review-assessment-modal .review-table {
  min-width: 980px;
}

#review-assessment-modal .review-table thead th {
  position: sticky;
  top: 0;
  z-index: var(--drl-z-table-header);
  background: var(--bg-tertiary) !important;
}

#review-assessment-modal .review-table tbody td {
  vertical-align: middle;
}

#review-assessment-modal #review-summary {
  grid-template-columns: repeat(3, minmax(180px, 1fr)) !important;
}

#review-assessment-modal .review-feedback-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
}

#review-assessment-modal .review-form-section {
  position: sticky;
  bottom: 0;
  z-index: calc(var(--drl-z-table-header) + 1);
  margin-bottom: 0 !important;
  box-shadow: 0 -14px 30px rgba(0, 0, 0, 0.08);
  backdrop-filter: blur(12px);
}

#review-assessment-modal .review-action-row {
  flex-wrap: wrap;
}

#review-assessment-modal .review-action-row .btn {
  min-width: 150px;
}

#grade-sheet-modal {
  align-items: center !important;
  justify-content: center !important;
  padding: clamp(0.5rem, 1.5vw, 1.25rem) !important;
}

#grade-sheet-modal .grade-sheet-window-frame {
  width: min(1540px, calc(100vw - 2rem)) !important;
  max-width: calc(100vw - 2rem) !important;
  height: min(940px, calc(100dvh - 2rem)) !important;
  max-height: calc(100dvh - 2rem) !important;
  display: flex !important;
  flex-direction: column !important;
  overflow: hidden !important;
  border-radius: 16px !important;
}

#grade-sheet-modal .modal-header,
#grade-sheet-modal .modal-footer {
  flex: 0 0 auto !important;
}

#grade-sheet-modal .modal-header {
  gap: 1rem;
  border-bottom: 1px solid var(--border-glass);
}

#grade-sheet-modal .modal-body {
  flex: 1 1 auto !important;
  min-height: 0 !important;
  overflow: auto !important;
  padding: clamp(1rem, 1.6vw, 1.5rem) !important;
  overscroll-behavior: contain;
}

#grade-sheet-modal .review-table-wrapper {
  max-height: min(54vh, 580px) !important;
  overflow: auto !important;
  overscroll-behavior: contain;
}

#grade-sheet-modal .review-table {
  min-width: 920px;
}

#grade-sheet-modal .review-table thead th {
  position: sticky;
  top: 0;
  z-index: var(--drl-z-table-header);
  background: var(--bg-tertiary) !important;
}

#grade-sheet-modal #grade-summary {
  grid-template-columns: repeat(2, minmax(180px, 1fr)) !important;
}

#grade-sheet-modal #criteria-grading-list {
  min-width: 0;
}

#grade-sheet-modal #review-actions {
  position: sticky;
  bottom: 0;
  z-index: calc(var(--drl-z-table-header) + 1);
  padding-top: 0.75rem;
  background: linear-gradient(to top, var(--bg-primary), rgba(248, 251, 250, 0.86));
}

#criteria-modal {
  align-items: center !important;
  justify-content: center !important;
  padding: clamp(0.5rem, 1.5vw, 1.25rem) !important;
}

#criteria-modal .criteria-window-frame {
  width: min(1480px, calc(100vw - 2rem)) !important;
  max-width: calc(100vw - 2rem) !important;
  height: min(940px, calc(100dvh - 2rem)) !important;
  max-height: calc(100dvh - 2rem) !important;
  display: flex !important;
  flex-direction: column !important;
  overflow: hidden !important;
  border-radius: 16px !important;
}

#criteria-modal .cava-header,
#criteria-modal .cava-toolbar,
#criteria-modal .cava-footer {
  flex: 0 0 auto !important;
}

#criteria-modal .cava-body {
  flex: 1 1 auto !important;
  min-height: 0 !important;
  overflow: auto !important;
  overscroll-behavior: contain;
}

@media (max-width: 900px) {
  #review-assessment-modal {
    padding: 0 !important;
  }

  #review-assessment-modal .review-window-frame,
  #grade-sheet-modal .grade-sheet-window-frame,
  #criteria-modal .criteria-window-frame {
    width: 100vw !important;
    max-width: 100vw !important;
    height: 100dvh !important;
    max-height: 100dvh !important;
    border-radius: 0 !important;
  }

  #review-assessment-modal #review-summary,
  #review-assessment-modal .review-feedback-grid {
    grid-template-columns: 1fr !important;
  }

  #review-assessment-modal .review-action-row .btn {
    flex: 1 1 100% !important;
    width: 100%;
  }

  #grade-sheet-modal {
    padding: 0 !important;
  }

  #criteria-modal {
    padding: 0 !important;
  }

  #grade-sheet-modal #grade-summary {
    grid-template-columns: 1fr !important;
  }
}

.drawer-mode {
  align-items: stretch;
  justify-content: flex-end;
}

.drawer-mode .modal-content.drawer {
  max-width: 1100px !important;
  width: 100%;
  height: 100vh;
  max-height: 100vh;
  border-radius: 12px 0 0 12px;
  overflow-y: auto;
}

.drawer-mode .modal-content.drawer .modal-body {
  padding: 1.5rem 2rem;
}

@media (max-width: 768px) {
  .drawer-mode .modal-content.drawer {
    max-width: 100% !important;
  }
  .review-table {
    font-size: 0.75rem;
  }

  /* Mobile responsive - Student / Advisor / Faculty pages */
  .app-container {
    flex-direction: column;
  }

  .sidebar {
    width: 100%;
    height: auto;
    flex-direction: row;
    padding: 0.75rem 1rem;
    border-right: none;
    border-bottom: 1px solid var(--border-glass);
    position: sticky;
    top: 0;
    z-index: var(--drl-z-sidebar);
    overflow-x: auto;
  }

  .sidebar .brand {
    margin-bottom: 0;
    flex-shrink: 0;
  }

  .sidebar .brand-name {
    display: none;
  }

  .sidebar .menu-list {
    flex-direction: row;
    gap: 0.25rem;
    flex-shrink: 0;
  }

  .sidebar .menu-item a {
    padding: 0.5rem 0.75rem;
    font-size: 0.8rem;
  }

  .sidebar .user-profile {
    display: none;
  }

  .main-content {
    padding: 1rem 0.75rem;
  }

  .top-bar {
    flex-direction: column;
    align-items: flex-start;
    gap: 0.75rem;
  }

  .page-title h1 {
    font-size: 1.2rem;
  }

  .page-title p {
    font-size: 0.8rem;
  }

  .period-select-container {
    width: 100%;
  }

  .period-select-container select {
    width: 100%;
  }

  .glass-card {
    padding: 1rem 0.75rem;
  }

  .glass-card h2 {
    font-size: 1rem;
  }

  /* Table responsive */
  .table-container {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }

  table {
    font-size: 0.75rem;
    min-width: 600px;
  }

  table th, table td {
    padding: 0.5rem 0.35rem;
    word-break: break-word;
  }

  /* Search box mobile */
  .search-box {
    min-width: 100%;
  }

  .search-input {
    font-size: 0.8rem;
    padding: 0.4rem 0.6rem 0.4rem 1.8rem;
  }

  /* Modal mobile */
  .modal-overlay {
    align-items: flex-end;
    padding: 0;
  }

  .modal-content {
    width: 100%;
    max-width: 100%;
    max-height: 90vh;
    border-radius: 16px 16px 0 0;
    margin: 0;
  }

  .modal-body {
    padding: 1rem;
  }

  /* Buttons mobile */
  .btn {
    padding: 0.4rem 0.75rem;
    font-size: 0.8rem;
  }

  .btn-group {
    flex-wrap: wrap;
    gap: 0.25rem;
  }

  /* Form mobile */
  .form-group {
    margin-bottom: 0.75rem;
  }

  .form-control {
    font-size: 0.85rem;
  }

  /* Badge and progress mobile */
  .badge {
    font-size: 0.7rem;
    padding: 0.15rem 0.4rem;
  }

  /* Total score box mobile */
  .total-score-box {
    padding: 0.75rem;
    font-size: 0.85rem;
  }

  .total-score-value {
    font-size: 1.25rem;
  }

  /* Evaluation criteria mobile */
  .criteria-group-card {
    padding: 0.75rem;
    margin-bottom: 0.75rem;
  }

  .criteria-group-title {
    font-size: 0.9rem;
  }

  .criteria-item {
    padding: 0.5rem;
    margin-bottom: 0.5rem;
  }

  .criteria-item-label {
    font-size: 0.8rem;
  }

  .student-score-input {
    width: 60px;
    font-size: 0.85rem;
    padding: 0.3rem;
  }

  /* Feedback alert mobile */
  .alert {
    padding: 0.75rem;
    font-size: 0.8rem;
  }

  /* Tab toolbar mobile */
  .table-toolbar {
    flex-direction: column;
    align-items: stretch;
  }

  .result-count {
    text-align: center;
  }

  /* History table */
  #history-table, #active-sheets-body {
    font-size: 0.75rem;
  }

  /* Appeal form */
  textarea.form-control {
    font-size: 0.85rem;
  }
}

/* Search-Select Custom Dropdown Styling */
.search-select-wrapper {
  position: relative;
  display: block;
  width: 100%;
}
.search-select-dropdown {
  display: none;
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  max-height: 200px;
  overflow-y: auto;
  background: #1e293b;
  border: 1px solid rgba(255, 255, 255, 0.15);
  border-radius: 8px;
  z-index: var(--drl-z-dropdown);
  box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.5), 0 4px 6px -2px rgba(0, 0, 0, 0.5);
  padding: 0.25rem 0;
}
.search-select-option {
  padding: 0.5rem 0.75rem;
  color: var(--text-primary);
  font-size: 0.78rem;
  cursor: pointer;
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-bottom: 1px solid rgba(255, 255, 255, 0.03);
  transition: background 0.15s;
}
.search-select-option:last-child {
  border-bottom: none;
}
.search-select-option:hover {
  background: var(--primary);
  color: #fff;
}
.search-select-option-sub {
  font-size: 0.7rem;
  color: var(--text-muted);
}
.search-select-option:hover .search-select-option-sub {
  color: rgba(255, 255, 255, 0.7);
}
.search-select-loading, .search-select-empty {
  padding: 0.5rem 0.75rem;
  font-size: 0.75rem;
  color: var(--text-muted);
  text-align: center;
  font-style: italic;
}

/* Assignment Modal 3-step flow */
.assign-step { display:inline-flex; align-items:center; gap:0.5rem; padding:0.55rem 0.9rem; border-radius:999px; background:rgba(255,255,255,0.06); color:var(--text-secondary); border:1px solid rgba(255,255,255,0.08); font-weight:600; font-size:0.85rem; }
.assign-step.active { background:var(--primary); color:#fff; border-color:transparent; box-shadow:0 10px 15px -3px rgba(59,130,246,0.35); }
.assign-step-panel { display:block; }
.assign-summary-card { background:var(--bg-secondary); border:1px solid var(--border-glass); border-radius:12px; padding:0.85rem 1rem; display:flex; flex-direction:column; gap:0.2rem; cursor:pointer; transition:transform .15s ease, border-color .15s ease; min-width:0; }
.assign-summary-card:hover { transform:translateY(-1px); border-color:rgba(59,130,246,0.35); }
.assign-summary-value { font-weight:700; font-size:1.05rem; color:var(--text-primary); }
.assign-summary-label { font-size:0.75rem; color:var(--text-secondary); }
.assign-summary-warn { color:var(--warning); }
.assign-summary-error { color:var(--danger); }
.assign-review-table { width:100%; border-collapse:collapse; font-size:0.82rem; table-layout:auto; min-width:0; }
.assign-review-table th, .assign-review-table td { padding:0.45rem 0.6rem; border-bottom:1px solid rgba(255,255,255,0.06); vertical-align:top; word-break:break-word; }
.assign-review-table th { color:var(--text-secondary); font-weight:600; background:rgba(255,255,255,0.03); }
.assign-review-empty { color:var(--text-muted); font-size:0.85rem; padding:1rem; text-align:center; }
.assign-chip { display:inline-flex; align-items:center; gap:0.35rem; padding:0.15rem 0.5rem; border-radius:999px; background:rgba(59,130,246,0.12); color:#93c5fd; border:1px solid rgba(59,130,246,0.25); font-size:0.72rem; font-weight:600; }
.assign-chip-warn { background:rgba(245,158,11,0.12); color:#fbbf24; border-color:rgba(245,158,11,0.25); }
.assign-chip-ok { background:rgba(16,185,129,0.12); color:#34d399; border-color:rgba(16,185,129,0.25); }
.assign-chip-bad { background:rgba(239,68,68,0.12); color:#f87171; border-color:rgba(239,68,68,0.25); }
#assignment-modal .modal-content.fullscreen { max-width:100vw !important; }
@media (max-width:1024px){ .assign-step { font-size:0.78rem; } .assign-summary-value { font-size:1rem; } }
@media (max-width:768px){ .assign-step { font-size:0.72rem; padding:0.4rem 0.6rem; } }

/* Student self-assessment form */
.student-form-summary { position: sticky; top: 0; z-index: var(--drl-z-sticky); margin-bottom: 0.75rem; }
.student-summary-bar { background: var(--bg-secondary); border: 1px solid var(--border-glass); border-radius: 12px; padding: 0.9rem 1rem; display: flex; align-items: center; justify-content: space-between; gap: 1rem; flex-wrap: wrap; }
.student-summary-main { display: flex; flex-direction: column; gap: 0.35rem; }
.student-summary-meta { display: flex; flex-wrap: wrap; gap: 0.75rem; color: var(--text-secondary); font-size: 0.85rem; }
.student-summary-stats { display: flex; gap: 0.75rem; }
.student-summary-item { background: rgba(255,255,255,0.04); border: 1px solid var(--border-glass); border-radius: 10px; padding: 0.5rem 0.75rem; min-width: 110px; text-align: center; }
.student-summary-value { display: block; font-weight: 700; font-size: 1.1rem; color: var(--text-primary); }
.student-summary-label { font-size: 0.75rem; color: var(--text-secondary); }
.student-summary-bar.is-warning { border-color: rgba(245,158,11,0.45); }

.student-group-nav { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-bottom: 0.75rem; }
.student-nav-chip { background: rgba(255,255,255,0.06); border: 1px solid var(--border-glass); color: var(--text-secondary); border-radius: 999px; padding: 0.3rem 0.7rem; font-size: 0.82rem; cursor: pointer; }
.student-nav-chip:hover { background: var(--primary); color: #fff; border-color: transparent; }

.student-group-card { background: var(--bg-secondary); border: 1px solid var(--border-glass); border-radius: 12px; padding: 0.85rem 1rem; margin-bottom: 1rem; min-width: 0; }
.student-group-header { display: flex; align-items: center; justify-content: space-between; gap: 1rem; flex-wrap: wrap; padding-bottom: 0.6rem; border-bottom: 1px solid rgba(255,255,255,0.06); margin-bottom: 0.6rem; }
.student-group-title { display: flex; align-items: center; gap: 0.5rem; font-weight: 600; color: var(--text-primary); word-break: break-word; }
.student-group-index { color: var(--accent); font-weight: 700; }
.student-group-meta { display: flex; gap: 0.75rem; color: var(--text-secondary); font-size: 0.85rem; white-space: nowrap; }

.student-criterion-list { display: flex; flex-direction: column; gap: 0.6rem; }
.student-criterion-item { display: grid; grid-template-columns: minmax(0,1fr) minmax(130px,160px); gap: 1rem; align-items: start; background: rgba(255,255,255,0.03); border: 1px solid rgba(255,255,255,0.06); border-radius: 10px; padding: 0.85rem; min-width: 0; }
.student-criterion-content { min-width: 0; overflow-wrap: anywhere; }
.student-criterion-header { display: flex; align-items: flex-start; justify-content: space-between; gap: 0.75rem; }
.student-criterion-title { display: flex; flex-direction: column; gap: 0.2rem; }
.student-criterion-max { font-size: 0.8rem; color: var(--text-muted); }
.student-criterion-description { margin-top: 0.45rem; padding: 0.55rem 0.7rem; background: rgba(255,255,255,0.04); border-left: 3px solid rgba(139,92,246,0.45); border-radius: 8px; color: var(--text-secondary); font-size: 0.85rem; line-height: 1.45; }
.student-criterion-description-label { font-weight: 600; color: var(--text-primary); font-size: 0.78rem; margin-bottom: 0.15rem; }
.student-criterion-description-text { white-space: pre-wrap; word-break: break-word; }
.student-criterion-description-text.is-empty { font-style: italic; color: var(--text-muted); }
.student-criterion-meta { display: flex; flex-wrap: wrap; gap: 0.4rem; margin-top: 0.45rem; }
.student-criterion-chip { display: inline-flex; align-items: center; padding: 0.15rem 0.5rem; border-radius: 999px; background: rgba(139,92,246,0.14); border: 1px solid rgba(139,92,246,0.35); color: var(--text-secondary); font-size: 0.75rem; white-space: nowrap; }
.student-criterion-chip.is-required { background: rgba(245,158,11,0.14); border-color: rgba(245,158,11,0.4); color: #fbbf24; }
.student-criterion-options { display: flex; flex-wrap: wrap; align-items: center; gap: 0.35rem; margin-top: 0.4rem; font-size: 0.78rem; }
.student-criterion-options-label { font-weight: 600; color: var(--text-primary); }
.student-criterion-option { padding: 0.12rem 0.45rem; border-radius: 6px; background: rgba(255,255,255,0.06); border: 1px solid rgba(255,255,255,0.1); }
.student-group-guidance { margin-bottom: 0.6rem; padding: 0.55rem 0.7rem; background: rgba(255,255,255,0.04); border-left: 3px solid rgba(99,102,241,0.5); border-radius: 8px; color: var(--text-secondary); font-size: 0.85rem; line-height: 1.45; }

.student-criterion-score { display: flex; flex-direction: column; gap: 0.35rem; min-width: 0; }
.student-score-label { font-size: 0.8rem; color: var(--text-secondary); font-weight: 600; }
.student-score-field { display: flex; align-items: center; justify-content: center; }
.student-score-input { width: 100%; max-width: 160px; padding: 0.45rem; text-align: center; border: 1px solid var(--border-glass); border-radius: 8px; background: var(--bg-tertiary); color: var(--text-primary); font-weight: 600; }
.student-score-input:focus { outline: none; border-color: var(--warning); box-shadow: 0 0 0 3px rgba(245,158,11,0.15); }
.student-score-error { font-size: 0.78rem; color: var(--danger); min-height: 1rem; }
.student-score-readonly { text-align: center; background: rgba(245,158,11,0.08); border: 1px solid rgba(245,158,11,0.2); padding: 0.5rem; border-radius: 8px; }
.student-score-readonly-value { font-size: 1.1rem; font-weight: 700; color: var(--warning); }
.student-checkbox { display: inline-flex; align-items: center; gap: 0.4rem; cursor: pointer; font-size: 0.9rem; color: var(--text-primary); }
.student-checkbox input { width: 18px; height: 18px; accent-color: var(--warning); cursor: pointer; }

.student-form-footer { position: sticky; bottom: 0; background: linear-gradient(to top, var(--bg-primary), rgba(11,15,25,0.85)); border-top: 1px solid var(--border-glass); padding: 0.85rem 1rem; margin-top: 0.75rem; display: flex; align-items: center; justify-content: space-between; gap: 1rem; flex-wrap: wrap; border-radius: 0 0 12px 12px; }
.student-footer-left { display: flex; flex-direction: column; gap: 0.2rem; }
.student-footer-total { font-size: 0.95rem; color: var(--text-primary); font-weight: 600; }
.student-footer-meta { font-size: 0.8rem; color: var(--text-secondary); }
.student-footer-right { display: flex; gap: 0.5rem; flex-wrap: wrap; }

@media (max-width: 1024px) {
  .student-criterion-item { grid-template-columns: 1fr; }
  .student-criterion-score { width: 100%; }
  .student-score-input { max-width: 100%; }
  .student-summary-bar { flex-direction: column; align-items: stretch; }
  .student-summary-stats { justify-content: stretch; }
  .student-summary-item { flex: 1; }
}
@media (max-width: 768px) {
  .student-group-nav { overflow-x: auto; flex-wrap: nowrap; padding-bottom: 0.25rem; }
  .student-nav-chip { white-space: nowrap; }
  .student-form-footer { flex-direction: column; align-items: stretch; }
  .student-footer-right { justify-content: stretch; }
  .student-footer-right .btn { width: 100%; }
}

/* ============================================================
   Professional academic light theme
   ============================================================ */

html {
  min-height: 100%;
  background: var(--bg-primary);
  color-scheme: light;
  scroll-behavior: smooth;
}

body {
  position: relative;
  display: block;
  min-height: 100dvh;
  overflow-x: clip;
  background:
    radial-gradient(circle at 8% 8%, rgba(117, 190, 176, 0.18), transparent 28rem),
    radial-gradient(circle at 92% 0%, rgba(39, 125, 161, 0.11), transparent 32rem),
    linear-gradient(145deg, #f8fbfa 0%, #f1f7f5 52%, #f7f8f3 100%);
  color: var(--text-primary);
  line-height: 1.55;
}

body::before {
  content: '';
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background-image:
    linear-gradient(rgba(18, 75, 76, 0.025) 1px, transparent 1px),
    linear-gradient(90deg, rgba(18, 75, 76, 0.025) 1px, transparent 1px);
  background-size: 32px 32px;
  mask-image: linear-gradient(to bottom, rgba(0, 0, 0, 0.7), transparent 75%);
}

button,
input,
select,
textarea {
  font: inherit;
}

.app-container {
  width: 100%;
  min-height: 100dvh;
}

.sidebar {
  position: sticky;
  top: 0;
  height: 100dvh;
  padding: 1.4rem 1.15rem;
  overflow: hidden;
  background: rgba(250, 253, 252, 0.97);
  border-right: 1px solid var(--border-glass);
  box-shadow: 14px 0 40px rgba(32, 72, 73, 0.07);
  animation: sidebarEnter 0.42s ease-out both;
}

.sidebar::after {
  content: '';
  position: absolute;
  top: 0;
  right: -1px;
  width: 3px;
  height: 7rem;
  background: linear-gradient(to bottom, var(--primary), transparent);
}

.brand {
  gap: 0.8rem;
  margin-bottom: 1.75rem;
  padding: 0.2rem 0.35rem 1.15rem;
  border-bottom: 1px solid var(--border-glass);
}

.brand-logo,
.login-header .logo {
  color: #ffffff;
  background: linear-gradient(145deg, #0b7a75, #16566d);
  box-shadow: 0 8px 18px rgba(11, 122, 117, 0.22);
}

.brand-logo {
  width: 42px;
  height: 42px;
  border-radius: 13px 13px 13px 5px;
  font-size: 1rem;
  letter-spacing: 0.02em;
}

.brand-name {
  max-width: 170px;
  color: #173c48;
  background: none;
  -webkit-background-clip: initial;
  -webkit-text-fill-color: currentColor;
  font-family: 'Lora', serif;
  font-size: 1rem;
  line-height: 1.25;
  letter-spacing: -0.01em;
}

.menu-list {
  min-height: 0;
  padding: 0.15rem 0.2rem 1rem;
  overflow-y: auto;
  gap: 0.35rem;
}

.menu-item a {
  min-height: 44px;
  padding: 0.68rem 0.8rem;
  color: #526a72;
  border: 1px solid transparent;
  border-radius: 11px;
  font-size: 0.84rem;
  font-weight: 600;
  line-height: 1.35;
  transition: color 0.18s ease, background 0.18s ease, border-color 0.18s ease, transform 0.18s ease;
}

.menu-item a:hover {
  color: #0a625f;
  background: #eff8f5;
  border-color: #d7e9e4;
  transform: translateX(2px);
}

.menu-item.active a {
  color: #075d59;
  background: linear-gradient(90deg, #dff2ed 0%, #edf7f4 100%);
  border: 1px solid #c8e5de;
  border-left: 4px solid var(--primary);
  box-shadow: 0 5px 16px rgba(11, 122, 117, 0.08);
}

.user-profile {
  min-height: 60px;
  padding: 1rem 0.3rem 0;
  border-top: 1px solid var(--border-glass);
}

.user-avatar {
  width: 40px;
  height: 40px;
  color: #075d59;
  background: #dff2ed;
  border: 2px solid #b8ddd4;
}

.user-name {
  color: var(--text-primary);
  font-size: 0.84rem;
}

.user-role {
  color: var(--text-muted);
  font-size: 0.67rem;
  font-weight: 600;
}

.logout-btn {
  min-width: 38px;
  min-height: 38px;
  margin-left: auto;
  color: var(--danger);
  background: #fff5f4;
  border: 1px solid #f1d4d0;
}

.logout-btn:hover {
  color: #9e3333;
  background: #fde9e7;
}

.main-content {
  width: auto;
  min-width: 0;
  min-height: 100dvh;
  height: auto;
  margin: 0;
  padding: clamp(1.5rem, 3vw, 3rem);
  gap: 1.5rem;
  overflow: visible;
  animation: contentEnter 0.46s ease-out both;
}

.top-bar {
  min-height: 72px;
  gap: 1rem;
  padding: 0.25rem 0 1.15rem;
  border-bottom: 1px solid rgba(167, 194, 187, 0.65);
}

.page-title h1,
.login-header h2 {
  color: #163c49;
  font-family: 'Lora', serif;
  font-weight: 700;
  letter-spacing: -0.025em;
}

.page-title h1 {
  font-size: clamp(1.55rem, 2.2vw, 2rem);
}

.page-title p {
  max-width: 720px;
  color: var(--text-secondary);
  line-height: 1.55;
}

.glass-card {
  background: rgba(255, 255, 255, 0.96);
  border: 1px solid rgba(205, 222, 217, 0.92);
  border-radius: 18px;
  box-shadow: 0 12px 34px rgba(31, 68, 70, 0.075);
  backdrop-filter: blur(12px);
}

.glass-card h2 {
  margin-bottom: 1.15rem;
  padding-left: 0;
  color: #1c4651;
  border-left: 0;
  font-family: 'Lora', serif;
  font-size: 1.15rem;
  letter-spacing: -0.015em;
}

.glass-card h2::after {
  content: '';
  display: block;
  width: 42px;
  height: 3px;
  margin-top: 0.55rem;
  background: linear-gradient(90deg, var(--primary), #87c5b9);
  border-radius: 99px;
}

.dashboard-group,
.assign-stat-card,
.summary-card,
.faculty-card,
.student-group-card,
.assign-summary-card {
  transition: transform 0.18s ease, box-shadow 0.18s ease, border-color 0.18s ease;
}

.dashboard-group:hover,
.assign-stat-card:hover,
.summary-card:hover,
.faculty-card:hover,
.assign-summary-card:hover {
  transform: translateY(-2px);
  border-color: #b9d9d1;
  box-shadow: 0 14px 30px rgba(31, 87, 84, 0.1);
}

.summary-cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  gap: 0.9rem;
}

.summary-card {
  display: flex;
  align-items: center;
  gap: 0.85rem;
  min-height: 86px;
  padding: 1rem;
  background: linear-gradient(145deg, #ffffff, #f2f8f6);
  border: 1px solid var(--border-glass);
  border-radius: 15px;
}

.summary-icon {
  display: grid;
  width: 42px;
  height: 42px;
  flex: 0 0 42px;
  place-items: center;
  background: #e4f3ef;
  border-radius: 12px;
  font-size: 1.25rem;
}

.summary-value {
  color: #143e49;
  font-size: 1.3rem;
  font-weight: 700;
}

.summary-label {
  color: var(--text-secondary);
  font-size: 0.78rem;
}

.stats-grid {
  gap: 1rem;
}

.stat-card {
  min-height: 104px;
  padding: 1.15rem 1.25rem;
  border-top: 3px solid #b6ddd4;
}

.stat-icon {
  width: 48px;
  height: 48px;
  border-radius: 14px;
}

.stat-icon.primary { background: #dff2ed; color: #0b7a75; }
.stat-icon.accent { background: #fff0ea; color: #bd5b40; }
.stat-icon.success { background: #e5f3e9; color: #2f855a; }
.stat-icon.warning { background: #fff3d9; color: #a9680d; }

.stat-value {
  color: #173d48;
  font-size: 1.55rem;
}

.stat-label {
  color: var(--text-secondary);
}

.table-container {
  border-radius: 13px;
  scrollbar-color: #a9c8c1 transparent;
}

table {
  background: #ffffff;
}

th {
  color: #31555e;
  background: #edf6f3;
  border-bottom: 1px solid #d7e7e2;
  font-size: 0.78rem;
  letter-spacing: 0.015em;
}

td {
  color: #4c666f;
  border-bottom-color: #e3ece9;
}

tbody tr:nth-child(even) td {
  background: rgba(240, 247, 245, 0.42);
}

tr:hover td {
  color: #173d48;
  background: #eef8f5;
}

.form-group label,
.cava-label {
  color: #435f68;
  font-weight: 600;
}

.form-control,
.search-input,
.criteria-input,
.student-score-input,
.cava-input,
.cava-select,
.cava-textarea {
  color: #17323d;
  background: #fbfdfc;
  border: 1px solid #cbded8;
  box-shadow: inset 0 1px 2px rgba(26, 66, 67, 0.025);
}

.form-control::placeholder,
.search-input::placeholder,
.cava-input::placeholder,
.cava-textarea::placeholder {
  color: #8aa0a5;
}

.form-control:focus,
.search-input:focus,
.criteria-input:focus,
.student-score-input:focus,
.cava-input:focus,
.cava-select:focus,
.cava-textarea:focus {
  outline: none;
  border-color: #3a9a92;
  box-shadow: 0 0 0 3px rgba(11, 122, 117, 0.13);
}

.search-icon {
  color: #698188;
}

.btn {
  min-height: 40px;
  padding: 0.58rem 1rem;
  justify-content: center;
  border: 1px solid transparent;
  border-radius: 10px;
  font-weight: 600;
  line-height: 1.2;
  box-shadow: none;
  transition: transform 0.16s ease, box-shadow 0.16s ease, background 0.16s ease, border-color 0.16s ease;
}

.btn:hover {
  transform: translateY(-1px);
}

.btn:focus-visible,
.logout-btn:focus-visible,
.close-modal:focus-visible,
.menu-item a:focus-visible,
.notif-bell-btn:focus-visible,
.student-nav-chip:focus-visible {
  outline: 3px solid rgba(11, 122, 117, 0.22);
  outline-offset: 2px;
}

.btn-primary {
  color: #ffffff;
  background: linear-gradient(135deg, #0b7a75, #176b7c);
  border-color: #096d68;
  box-shadow: 0 7px 16px rgba(11, 122, 117, 0.17);
}

.btn-primary:hover {
  filter: none;
  background: linear-gradient(135deg, #086b67, #125c6b);
  box-shadow: 0 9px 20px rgba(11, 122, 117, 0.22);
}

.btn-secondary {
  color: #31565f;
  background: #f5f9f8;
  border-color: #cbded8;
}

.btn-secondary:hover {
  background: #e8f2ef;
  border-color: #accdc5;
}

.btn-info { color: #1f6a88; background: #e8f4f8; border-color: #bedce7; }
.btn-warning { color: #8b590e; background: #fff3dc; border-color: #efd29e; }
.btn-success { color: #256d49; background: #e8f5ec; border-color: #bde0c8; }
.btn-danger { color: #a93f3f; background: #fff0ef; border-color: #ecc9c7; }
.btn-info:hover { color: #ffffff; background: #277da1; }
.btn-warning:hover { color: #ffffff; background: #b87512; }
.btn-success:hover { color: #ffffff; background: #2f855a; }
.btn-danger:hover { color: #ffffff; background: #c64f4f; }

.btn:disabled,
.btn[aria-disabled="true"],
button:disabled {
  cursor: not-allowed;
  opacity: 0.58;
  transform: none !important;
  box-shadow: none !important;
}

.btn-small {
  min-height: 34px;
  padding: 0.4rem 0.7rem;
}

.badge {
  border: 1px solid transparent;
  text-transform: none;
  letter-spacing: 0;
}

.badge.chua_nop,
.badge.khoi_tao { color: #60767d; background: #eef3f2; border-color: #dbe5e2; }
.badge.da_nop_sv,
.badge.sv_dang_cham { color: #176984; background: #e5f3f8; border-color: #c0dfe9; }
.badge.da_cham_cvht,
.badge.cvht_dang_cham { color: #916011; background: #fff3d9; border-color: #eed49f; }
.badge.da_duyet_khoa,
.badge.svv_xet_duyet,
.badge.da_hoan_thanh,
.badge.khoa_duyet,
.badge.da_cong_bo,
.badge.da_cong_nhan,
.badge.da_khoa { color: #28724d; background: #e5f3e9; border-color: #bfdfc9; }
.badge.bi_tra_ve,
.badge.cvht_yeu_cau_bo_sung,
.badge.khoa_yeu_cau_ra_soat { color: #a54040; background: #fff0ef; border-color: #ecc8c5; }
.badge.warning { color: #916011; background: #fff3d9; border-color: #eed49f; }
.badge.success { color: #28724d; background: #e5f3e9; border-color: #bfdfc9; }
.badge.danger { color: #a54040; background: #fff0ef; border-color: #ecc8c5; }
.badge.secondary { color: #526a72; background: #eef3f2; border-color: #dbe5e2; }

.alert {
  border-width: 1px;
  border-style: solid;
}

.alert-success { color: #276b49; background: #ecf7ef; border-color: #c2e1cb; }
.alert-warning { color: #88590f; background: #fff7e7; border-color: #efd7a9; }
.alert-danger { color: #9f3f3f; background: #fff1f0; border-color: #eccbc8; }
.alert-info { color: #236b83; background: #edf7fa; border: 1px solid #c7e2eb; }

.modal-overlay,
.modal-overlay.fullscreen-mode {
  background: rgba(21, 48, 55, 0.46);
  backdrop-filter: blur(7px);
}

.modal-content,
.modal-content.fullscreen,
.modal-content.drawer {
  color: var(--text-primary);
  background: #ffffff !important;
  border-color: #d2e1dd;
  box-shadow: 0 24px 70px rgba(22, 54, 60, 0.22);
}

.modal-header {
  background: linear-gradient(135deg, #f7fbfa, #edf6f3);
  border-bottom-color: #d9e7e3;
}

.modal-header h3 {
  color: #173f4a;
  font-family: 'Lora', serif;
}

.modal-footer,
.modal-content.fullscreen .modal-footer {
  background: #f8fbfa !important;
  border-top-color: #d9e7e3 !important;
}

.close-modal {
  display: inline-grid;
  width: 38px;
  height: 38px;
  place-items: center;
  color: #597078;
  background: #ffffff;
  border: 1px solid #d4e2de;
  border-radius: 10px;
}

.close-modal:hover {
  color: var(--danger);
  background: #fff2f0;
  border-color: #eccbc7;
}

.notification-widget {
  top: 1.1rem;
  right: 1.35rem;
}

.notif-bell-btn {
  color: #0c6966;
  background: rgba(255, 255, 255, 0.96);
  border-color: #c9ddd7;
  box-shadow: 0 8px 22px rgba(27, 76, 74, 0.13);
}

.notif-bell-btn:hover {
  background: #eaf5f2;
  border-color: #98c8bd;
  box-shadow: 0 9px 24px rgba(11, 122, 117, 0.16);
}

.notif-dropdown {
  background: #ffffff;
  border-color: #d3e2de;
  box-shadow: 0 18px 46px rgba(22, 60, 65, 0.18);
}

.notif-header,
.notif-item:hover {
  background: #f4f9f7;
}

.notif-item {
  border-bottom-color: #e4ece9;
}

.notif-item.unread {
  background: #edf7f4;
}

.login-container {
  min-height: 100dvh;
  min-width: 0;
  width: 100%;
  padding: clamp(1rem, 4vw, 2rem);
  background:
    radial-gradient(circle at 18% 15%, rgba(114, 187, 173, 0.28), transparent 24rem),
    radial-gradient(circle at 88% 88%, rgba(213, 111, 82, 0.13), transparent 25rem),
    linear-gradient(135deg, #edf6f3, #f8faf6 55%, #eef4f3);
}

.login-card {
  position: relative;
  width: min(100%, 390px);
  max-width: 390px;
  padding: clamp(1.5rem, 3vw, 2rem);
  overflow: hidden;
  border-top: 4px solid var(--primary);
  border-radius: 22px;
  box-shadow: 0 22px 56px rgba(24, 70, 68, 0.13);
}

.login-card::before {
  content: '';
  position: absolute;
  top: -72px;
  right: -68px;
  width: 165px;
  height: 165px;
  background: radial-gradient(circle, rgba(11, 122, 117, 0.11), transparent 68%);
  border-radius: 50%;
  pointer-events: none;
}

.login-header .logo {
  width: 52px;
  height: 52px;
  border-radius: 16px 16px 16px 6px;
}

.login-header {
  margin-bottom: 1.4rem;
}

.login-header h2 {
  font-size: 1.32rem;
  line-height: 1.25;
}

.login-header p {
  color: var(--text-secondary);
  font-size: 0.84rem;
  line-height: 1.45;
  max-width: 28ch;
  margin: 0 auto;
}

.login-card .form-group {
  margin-bottom: 1rem;
}

.login-card .form-control {
  min-height: 42px;
}

.login-submit-btn {
  width: 100%;
  justify-content: center;
  min-height: 44px;
  padding: 0.72rem 0.9rem;
  margin-top: 0.25rem;
}

.tree-item,
.student-summary-item,
.student-criterion-item,
.student-criterion-description,
.student-nav-chip,
.assign-step,
.assign-review-table th,
.assign-review-table td {
  border-color: #dce8e4;
}

.tree-item,
.student-summary-item,
.student-criterion-item,
.student-criterion-description {
  background: #f7faf9;
}

.criteria-item.parent,
.student-group-card,
.student-summary-bar,
.assign-summary-card {
  background: #ffffff;
}

.criteria-max-badge {
  color: #b85d43;
  background: #fff0ea;
}

.student-group-header {
  border-bottom-color: #dce8e4;
}

.student-group-index {
  color: var(--primary);
}

.student-criterion-description {
  border-left-color: #74b9ab;
}

.student-form-footer {
  background: linear-gradient(to top, rgba(244, 248, 247, 0.98), rgba(255, 255, 255, 0.94));
  border-top-color: #cfdfda;
  backdrop-filter: blur(12px);
}

.student-score-readonly {
  background: #fff7e8;
  border-color: #efd7aa;
}

.search-select-dropdown {
  color: var(--text-primary);
  background: #ffffff;
  border-color: #cbded8;
  box-shadow: 0 14px 32px rgba(22, 62, 66, 0.15);
}

.search-select-option {
  color: var(--text-primary);
  border-bottom-color: #e4ece9;
}

.search-select-option:hover {
  color: #075d59;
  background: #e7f4f0;
}

.search-select-option:hover .search-select-option-sub {
  color: #526b74;
}

.assign-step {
  color: var(--text-secondary);
  background: #f3f7f6;
}

.assign-step.active {
  color: #ffffff;
  background: var(--primary);
  box-shadow: 0 7px 16px rgba(11, 122, 117, 0.18);
}

.assign-review-table th {
  background: #edf6f3;
}

.assign-chip { color: #176984; background: #e5f3f8; border-color: #c0dfe9; }
.assign-chip-warn { color: #916011; background: #fff3d9; border-color: #eed49f; }
.assign-chip-ok { color: #28724d; background: #e5f3e9; border-color: #bfdfc9; }
.assign-chip-bad { color: #a54040; background: #fff0ef; border-color: #ecc8c5; }

.review-table-wrapper {
  background: #ffffff;
  border-color: #d7e5e1;
}

.review-table thead {
  background: #edf6f3;
}

.modal-content table th {
  color: #31555e !important;
  background: #edf6f3 !important;
}

.modal-content table td {
  color: #465f68;
}

#review-sv-info small,
#grade-sv-info small,
#review-summary small,
#grade-sheet-modal small {
  color: var(--text-secondary) !important;
}

/* CAVA editor is part of the same light visual system. */
.cava-header {
  color: var(--text-primary) !important;
  background: linear-gradient(135deg, #e9f5f1 0%, #f7fbfa 70%, #fff4ef 100%) !important;
  border-bottom-color: #9bcfc3 !important;
}

.cava-header::before {
  border-color: rgba(11, 122, 117, 0.12);
}

.cava-title {
  color: #173f4a !important;
  text-shadow: none;
}

.cava-subtitle {
  color: #0b7a75;
}

.cava-header .close-modal {
  color: #526b74 !important;
  background: #ffffff;
  border-color: #cbded8;
}

.cava-header .close-modal:hover {
  color: var(--danger) !important;
  background: #fff1ef;
  transform: none;
}

.cava-body,
.cava-form-section {
  background: #f8fbfa;
}

.cava-info-box,
.cava-group-card,
.cava-group-header,
.cava-child-row,
.cava-legend {
  background: #ffffff;
  border-color: #d4e3df;
  box-shadow: 0 8px 24px rgba(26, 72, 72, 0.065);
}

.cava-toolbar,
.cava-footer,
.cava-group-body {
  border-color: #d9e6e2;
}

.cava-expand-btn {
  color: #4d6870;
  background: #f4f8f7;
  border-color: #d1e1dc;
}

.cava-expand-btn:hover {
  color: #075d59;
  background: #e8f4f0;
}

.cava-add-child {
  color: #0b6e69;
  background: #e9f5f2;
  border-color: #b9dcd4;
}

.cava-add-child:hover {
  background: #dcefeb;
}

.cava-table-wrapper,
.cava-table {
  background: #ffffff;
}

.cava-table thead,
.cava-table thead th {
  color: #31555e;
  background: #edf6f3;
}

.cava-table tbody tr:hover {
  background: #eef8f5;
}

.cava-table tbody tr.cava-row-parent {
  background: #e5f3ef;
}

.cava-table tbody tr.cava-row-parent td {
  color: #0a6b66;
}

.cava-cell-code {
  color: #31555e;
  background: #f2f7f5;
}

.cava-cell-code-parent {
  color: #ffffff;
  background: var(--primary);
  box-shadow: none;
}

.cava-type-dinh_luong { color: #176984; background: #e5f3f8; }
.cava-type-dinh_tinh { color: #916011; background: #fff3d9; }
.cava-type-co_diem { color: #28724d; background: #e5f3e9; }

.cava-input:read-only {
  color: var(--text-muted);
  background: #eef3f2;
}

.cava-input-suffix {
  color: #60777e;
  background: #edf3f1;
}

.cava-radio {
  background: #f7faf9;
}

.cava-radio:hover,
.cava-radio:has(input:checked) {
  background: #e8f4f0;
  border-color: #8fc5ba;
}

.cava-btn-primary:hover {
  background: #086b67;
}

.cava-btn-secondary:hover {
  color: #17323d;
  background: #e8f2ef;
}

#criteria-modal .cava-header > div:first-child > div:first-child {
  background: linear-gradient(145deg, #0b7a75, #176b7c) !important;
  box-shadow: 0 8px 18px rgba(11, 122, 117, 0.2) !important;
}

#criteria-modal .cava-header [style*='color:#fff'] {
  color: #173f4a !important;
}

#criteria-modal .cava-header [style*='color:#94a3b8'] {
  color: var(--text-secondary) !important;
}

#criteria-modal .cava-header [style*='color:#475569'] {
  color: #91a5aa !important;
}

#cava-template-name-header,
#cava-count-parents {
  color: var(--primary) !important;
}

#cava-template-max-header,
#cava-sum-display {
  color: var(--success) !important;
}

#cava-count-children {
  color: var(--accent) !important;
}

#criteria-validation-badge {
  color: #28724d !important;
  background: #e5f3e9 !important;
  border-color: #bfdfc9 !important;
}

#criteria-modal .cava-header .close-modal {
  color: #526b74 !important;
  background: #ffffff !important;
  border-color: #cbded8 !important;
  border-radius: 10px !important;
}

#criteria-modal .cava-toolbar {
  color: var(--text-primary) !important;
  background: #f1f7f5 !important;
  border-bottom-color: #d4e3df !important;
}

#criteria-modal .cava-toolbar > div {
  color: var(--text-secondary) !important;
}

#criteria-modal .cava-toolbar [style*='color:#334155'] {
  color: #98aaae !important;
}

#criteria-modal .cava-footer {
  color: var(--text-primary) !important;
  background: rgba(248, 251, 250, 0.97) !important;
  border-top-color: #d4e3df !important;
  box-shadow: 0 -8px 24px rgba(27, 69, 70, 0.07);
}

#criteria-modal .cava-footer [style*='color:#64748b'] {
  color: var(--text-secondary) !important;
}

@keyframes sidebarEnter {
  from { opacity: 0; transform: translateX(-10px); }
  to { opacity: 1; transform: translateX(0); }
}

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

@media (min-width: 1400px) {
  .main-content {
    width: auto;
    max-width: none;
    margin: 0;
    padding: 2.75rem 3.25rem;
  }
}

@media (max-width: 1024px) {
  :root {
    --sidebar-width: 230px;
  }

  .main-content {
    padding: 1.5rem;
  }

  .glass-card {
    padding: 1.15rem;
  }
}

@media (max-width: 768px) {
  body {
    display: block;
    min-height: 100dvh;
    overflow-x: clip;
  }

  .app-container {
    display: flex;
    width: 100%;
    min-height: 100dvh;
    flex-direction: column;
  }

  .sidebar {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    grid-template-areas:
      'brand spacer profile'
      'menu menu menu';
    width: 100%;
    height: auto;
    min-height: 0;
    padding: 0.65rem 0.75rem 0.55rem;
    gap: 0.55rem 0.75rem;
    overflow: visible;
    border-right: 0;
    border-bottom: 1px solid #ccddd8;
    box-shadow: 0 8px 24px rgba(30, 72, 72, 0.1);
    animation: none;
  }

  .sidebar::after {
    display: none;
  }

  .sidebar .brand {
    grid-area: brand;
    min-width: 0;
    margin: 0;
    padding: 0;
    border: 0;
  }

  .sidebar .brand-logo {
    width: 36px;
    height: 36px;
    flex: 0 0 36px;
    border-radius: 11px 11px 11px 4px;
    font-size: 0.78rem;
  }

  .sidebar .brand-name {
    display: block !important;
    max-width: 132px;
    overflow: hidden;
    font-size: 0.82rem;
    line-height: 1.2;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .sidebar .menu-list {
    grid-area: menu;
    width: 100%;
    min-width: 0;
    max-width: 100%;
    padding: 0 0 0.15rem;
    overflow-x: auto;
    overflow-y: hidden;
    flex-direction: row;
    gap: 0.35rem;
    scrollbar-width: none;
  }

  .sidebar .menu-list::-webkit-scrollbar {
    display: none;
  }

  .sidebar .menu-item {
    flex: 0 0 auto;
  }

  .sidebar .menu-item a {
    min-height: 38px;
    padding: 0.45rem 0.7rem;
    border-radius: 9px;
    font-size: 0.75rem;
    white-space: nowrap;
  }

  .sidebar .menu-item a:hover {
    transform: none;
  }

  .sidebar .user-profile {
    display: flex !important;
    grid-area: profile;
    min-height: 38px;
    margin: 0;
    padding: 0;
    gap: 0.4rem;
    border: 0;
  }

  .sidebar .user-avatar {
    width: 34px;
    height: 34px;
    flex: 0 0 34px;
    font-size: 0.75rem;
  }

  .sidebar .user-info {
    display: none;
  }

  .sidebar .logout-btn {
    width: 38px;
    min-width: 38px;
    height: 38px;
    min-height: 38px;
    margin: 0;
    padding: 0.45rem;
  }

  .main-content {
    width: 100%;
    min-height: calc(100dvh - 104px);
    height: auto;
    padding: 1rem 0.75rem 2rem;
    gap: 1.1rem;
    overflow: visible;
    animation: none;
  }

  .notification-widget {
    top: 0.62rem;
    right: 6.8rem;
  }

  .notif-bell-btn {
    width: 38px;
    height: 38px;
  }

  .notif-dropdown {
    right: -5.9rem;
    width: min(340px, calc(100vw - 1.5rem));
    max-height: min(420px, calc(100dvh - 8rem));
  }

  .top-bar {
    min-height: 0;
    padding-bottom: 0.85rem;
    align-items: stretch;
  }

  .page-title h1 {
    font-size: 1.3rem;
    line-height: 1.35;
  }

  .period-select-container {
    align-items: stretch;
    flex-direction: column;
    gap: 0.35rem;
  }

  .glass-card {
    padding: 1rem 0.85rem;
    border-radius: 14px;
    box-shadow: 0 8px 22px rgba(31, 68, 70, 0.065);
  }

  .stats-grid,
  .summary-cards {
    grid-template-columns: minmax(0, 1fr) !important;
  }

  .main-content [style*='grid-template-columns: 1fr 1fr'],
  .main-content [style*='grid-template-columns: 1fr 2fr'],
  .main-content [style*='grid-template-columns: 1fr 1fr 1fr'],
  .modal-content [style*='grid-template-columns: 1fr 1fr'],
  .modal-content [style*='grid-template-columns: 1fr 1fr 1fr'] {
    grid-template-columns: minmax(0, 1fr) !important;
  }

  table {
    min-width: 680px;
  }

  .assign-review-table {
    min-width: 0;
  }

  .modal-overlay,
  .modal-overlay.fullscreen-mode {
    align-items: flex-end !important;
    padding: 0 !important;
  }

  .modal-content {
    width: 100%;
    max-height: 94dvh;
    border-radius: 18px 18px 0 0;
  }

  .modal-content.fullscreen,
  .modal-content.drawer,
  .drawer-mode .modal-content.drawer {
    width: 100vw !important;
    height: 100dvh !important;
    max-height: 100dvh !important;
    border-radius: 0 !important;
  }

  .modal-header,
  .modal-body,
  .modal-footer,
  .drawer-mode .modal-content.drawer .modal-body {
    padding-left: 1rem !important;
    padding-right: 1rem !important;
  }

  .modal-footer {
    flex-wrap: wrap;
  }

  .cava-group-header,
  .cava-child-row {
    grid-template-columns: minmax(0, 1fr);
  }

  .cava-group-body {
    margin-left: 0;
    padding-left: 0.75rem;
  }

  .cava-child-actions,
  .cava-group-actions {
    justify-content: flex-end;
  }

  .student-summary-stats {
    width: 100%;
    flex-direction: column;
  }

  .student-summary-item {
    width: 100%;
  }

  .login-container {
    padding: 1rem;
  }

  .login-card {
    max-width: 100%;
    padding: 2rem 1.25rem;
    border-radius: 18px;
  }
}

@media (max-width: 420px) {
  .sidebar .brand-name {
    max-width: 104px;
    font-size: 0.76rem;
  }

  .notification-widget {
    right: 6.15rem;
  }

  .notif-dropdown {
    right: -5.25rem;
  }

  .btn-group {
    width: 100%;
  }
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

  *,
  *::before,
  *::after {
    scroll-behavior: auto !important;
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

/* Admin IA baseline: stable frame, layer scale and scoped overflow. */
html,
body {
  max-width: 100%;
}

body {
  overflow-x: clip;
}

body.drl-modal-open {
  overflow: hidden;
}

.app-container,
.main-content,
.tab-section,
.top-bar,
.glass-card {
  min-width: 0;
  max-width: 100%;
}

.app-container {
  width: 100%;
}

.sidebar {
  z-index: var(--drl-z-sidebar);
}

.main-content {
  overflow-x: clip;
}

.table-container {
  width: 100%;
  max-width: 100%;
  overflow-x: auto;
  overscroll-behavior-inline: contain;
}

.table-container > table {
  min-width: max-content;
}

.search-select-dropdown,
.notif-dropdown {
  max-width: calc(100vw - 1rem);
}

.search-select-dropdown {
  z-index: var(--drl-z-dropdown);
}

.notification-widget {
  z-index: var(--drl-z-notification);
}

.modal-overlay,
.modal-overlay.fullscreen-mode {
  inset: 0 !important;
  width: auto !important;
  height: auto !important;
  min-height: 100dvh !important;
  padding: clamp(0.75rem, 2vw, 1.5rem) !important;
  align-items: center !important;
  justify-content: center !important;
  overflow: hidden !important;
  z-index: var(--drl-z-overlay) !important;
}

.modal-content,
.modal-content.fullscreen {
  width: min(100%, 1120px) !important;
  max-width: calc(100vw - 2rem) !important;
  height: auto !important;
  max-height: calc(100dvh - 2rem) !important;
  display: flex !important;
  flex-direction: column !important;
  overflow: hidden !important;
  border-radius: 12px !important;
  z-index: var(--drl-z-modal);
}

#assignment-modal .modal-content.fullscreen,
#criteria-modal .modal-content.fullscreen {
  width: min(1480px, calc(100vw - 2rem)) !important;
  height: calc(100dvh - 2rem) !important;
  max-width: calc(100vw - 2rem) !important;
}

.modal-content.drawer,
.drawer-mode .modal-content.drawer {
  width: min(880px, 100vw) !important;
  height: 100dvh !important;
  max-height: 100dvh !important;
  border-radius: 12px 0 0 12px !important;
}

.modal-header,
.modal-footer,
.modal-content.fullscreen .modal-header,
.modal-content.fullscreen .modal-footer {
  flex: 0 0 auto !important;
}

.modal-body,
.modal-content.fullscreen .modal-body,
.modal-content.drawer .modal-body {
  min-height: 0 !important;
  overflow: auto !important;
}

.modal-footer {
  flex-wrap: wrap;
}

.modal-footer .btn,
.modal-content .btn {
  min-height: 40px;
}

@media (max-width: 768px) {
  body {
    overflow-x: clip;
  }

  .sidebar .menu-list {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    overflow: visible !important;
    gap: 0.35rem;
  }

  .sidebar .menu-item {
    min-width: 0;
  }

  .sidebar .menu-item a {
    min-height: 44px;
    justify-content: flex-start;
    white-space: normal !important;
    line-height: 1.25;
  }

  table {
    min-width: 0;
  }

  .table-container > table,
  .modal-content table {
    min-width: 640px;
  }

  .modal-overlay,
  .modal-overlay.fullscreen-mode {
    align-items: flex-end !important;
    padding: 0 !important;
  }

  .modal-content,
  .modal-content.fullscreen,
  #assignment-modal .modal-content.fullscreen,
  #criteria-modal .modal-content.fullscreen {
    width: 100vw !important;
    max-width: 100vw !important;
    height: auto !important;
    max-height: 94dvh !important;
    border-radius: 16px 16px 0 0 !important;
  }

  .modal-content.drawer,
  .drawer-mode .modal-content.drawer {
    height: 100dvh !important;
    max-height: 100dvh !important;
    border-radius: 0 !important;
  }
}

@supports not (overflow: clip) {
  body,
  .main-content {
    overflow-x: hidden;
  }
}

/* Managed windows: one visible surface, one scroll owner and predictable return. */
.workspace-switcher {
  display: inline-flex;
  max-width: 100%;
  gap: 0.35rem;
  margin-top: 1rem;
  padding: 0.35rem;
  overflow-x: auto;
  background: #eaf3f1;
  border: 1px solid #d1e2de;
  border-radius: 12px;
}

.workspace-switcher-item {
  min-height: 42px;
  padding: 0.55rem 0.9rem;
  color: var(--text-secondary);
  background: transparent;
  border: 1px solid transparent;
  border-radius: 9px;
  cursor: pointer;
  font-weight: 700;
  white-space: nowrap;
}

.workspace-switcher-item:hover {
  color: var(--primary);
  background: rgba(255, 255, 255, 0.72);
}

.workspace-switcher-item.active {
  color: #075d59;
  background: #ffffff;
  border-color: #c6ddd7;
  box-shadow: 0 4px 12px rgba(31, 87, 84, 0.08);
}

.modal-overlay.drl-managed-surface {
  overscroll-behavior: contain;
}

.modal-overlay.drl-surface-suspended {
  display: none !important;
  pointer-events: none !important;
}

.modal-content.drl-surface-content {
  width: min(100%, var(--drl-surface-width, 680px)) !important;
  max-width: min(calc(100vw - 2rem), var(--drl-surface-width, 680px)) !important;
  max-height: calc(100dvh - 2rem) !important;
  overflow: hidden !important;
}

.modal-content.drl-surface-content.drl-surface-medium {
  --drl-surface-width: 980px;
}

.modal-content.drl-surface-content.drl-surface-wide {
  --drl-surface-width: 1540px;
  width: min(calc(100vw - 2rem), var(--drl-surface-width)) !important;
  height: min(940px, calc(100dvh - 2rem)) !important;
}

/* Interaction and layout management: keep actions reachable without breaking frames. */
.btn {
  min-height: 40px;
}

.btn-small {
  min-height: 38px;
}

.btn-group {
  flex-wrap: wrap;
  align-items: center;
}

.action-icon-btn {
  width: 40px !important;
  min-width: 40px !important;
  height: 40px !important;
  min-height: 40px !important;
}

.dashboard-group-items {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 180px), 1fr));
  gap: 0.4rem 0.85rem;
}

button.assign-stat-card {
  width: 100%;
  color: inherit;
  font: inherit;
  text-align: left;
  background: var(--glass-bg);
  border: 1px solid var(--border-glass);
}

button.assign-stat-card:hover,
button.assign-stat-card:focus-visible {
  border-color: var(--primary);
  box-shadow: 0 8px 22px rgba(11, 122, 117, 0.12);
  transform: translateY(-1px);
}

.table-container.drl-has-horizontal-overflow,
.table-responsive.drl-has-horizontal-overflow {
  scrollbar-gutter: stable;
}

.drl-table-scroll-hint {
  display: none;
}

.search-input {
  min-height: 42px;
}

.table-container.drl-has-horizontal-overflow:focus-visible,
.table-responsive.drl-has-horizontal-overflow:focus-visible {
  outline: 3px solid rgba(11, 122, 117, 0.26);
  outline-offset: 2px;
}

.drl-action-table thead th:last-child {
  position: sticky;
  right: 0;
  z-index: calc(var(--drl-z-table-header) + 2);
  min-width: 148px;
  background: #eaf3f1 !important;
  box-shadow: -10px 0 18px -16px rgba(20, 62, 66, 0.7);
}

.drl-action-table tbody td:last-child:not([colspan]) {
  position: sticky;
  right: 0;
  z-index: 2;
  min-width: 148px;
  background: #ffffff;
  box-shadow: -10px 0 18px -16px rgba(20, 62, 66, 0.7);
}

.drl-action-table tbody tr:hover td:last-child:not([colspan]) {
  background: #f1f7f5;
}

.drl-action-table tbody td:last-child:not([colspan]) .btn-group,
.drl-action-table tbody td:last-child:not([colspan]) > div {
  max-width: 220px;
  justify-content: flex-end;
  flex-wrap: wrap;
}

@media (max-width: 1100px) {
  .drl-content-split,
  .drl-workflow-audit-grid,
  .main-content [style*='grid-template-columns: 1fr 1fr'],
  .main-content [style*='grid-template-columns: 1fr 2fr'],
  .main-content [style*='grid-template-columns: 1fr 1fr 1fr'] {
    grid-template-columns: minmax(0, 1fr) !important;
  }

  #grader-account-form {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }
}

@media (max-width: 900px) {
  .modal-content .drl-form-split,
  .modal-content [style*='grid-template-columns: 1fr 1fr'],
  .modal-content [style*='grid-template-columns: 1fr 1fr 1fr'] {
    grid-template-columns: minmax(0, 1fr) !important;
  }
}

.modal-content.drl-surface-content > form {
  display: flex;
  flex: 1 1 auto;
  min-height: 0;
  flex-direction: column;
  overflow: hidden;
}

.modal-content.drl-surface-content > form > .modal-body {
  flex: 1 1 auto;
  min-height: 0;
  overflow: auto !important;
  overscroll-behavior: contain;
}

.modal-content.drl-surface-content .modal-header {
  min-height: 64px;
  gap: 0.75rem;
}

.modal-content.drl-surface-content .modal-header > h1,
.modal-content.drl-surface-content .modal-header > h2,
.modal-content.drl-surface-content .modal-header > h3,
.modal-content.drl-surface-content .modal-header > div {
  min-width: 0;
  overflow-wrap: anywhere;
}

.drl-window-back {
  display: inline-flex;
  min-width: 44px;
  min-height: 44px;
  flex: 0 0 auto;
  align-items: center;
  justify-content: center;
  gap: 0.4rem;
  padding: 0.55rem 0.8rem;
  color: var(--primary);
  background: #ffffff;
  border: 1px solid #cfe0dc;
  border-radius: 10px;
  cursor: pointer;
  font-weight: 700;
}

.drl-window-back:hover {
  color: #075d59;
  background: #edf7f4;
  border-color: #afd5cc;
}

.drl-window-back:focus-visible,
.close-modal:focus-visible,
.modal-close:focus-visible {
  outline: 3px solid rgba(11, 122, 117, 0.28);
  outline-offset: 2px;
}

.modal-overlay[aria-busy='true'] .modal-content {
  cursor: progress;
}

.modal-overlay[aria-busy='true'] .modal-body,
.modal-overlay[aria-busy='true'] .modal-footer {
  opacity: 0.78;
}

.btn[aria-busy='true'],
button[aria-busy='true'] {
  position: relative;
  cursor: progress;
}

.btn[aria-busy='true']::after,
button[aria-busy='true']::after {
  content: '';
  width: 0.9em;
  height: 0.9em;
  margin-left: 0.5rem;
  border: 2px solid currentColor;
  border-right-color: transparent;
  border-radius: 50%;
  animation: drl-button-spin 0.7s linear infinite;
}

@keyframes drl-button-spin {
  to { transform: rotate(360deg); }
}

@media (max-width: 768px) {
  .table-toolbar > .search-box {
    flex: 1 1 100% !important;
    width: 100%;
    min-width: 0 !important;
  }

  .table-toolbar > .result-count {
    width: 100%;
    text-align: right;
  }

  .search-input {
    min-height: 44px;
  }

  .drl-has-horizontal-overflow > .drl-table-scroll-hint:not([hidden]) {
    position: sticky;
    left: 0;
    z-index: calc(var(--drl-z-table-header) + 3);
    display: flex;
    box-sizing: border-box;
    width: calc(100% - 0.5rem);
    max-width: calc(100vw - 2rem);
    margin: 0 0 0.45rem;
    padding: 0.4rem 0.65rem;
    color: #526a72;
    background: #f3f8f6;
    border: 1px solid #d2e3de;
    border-radius: 8px;
    font-size: 0.74rem;
    line-height: 1.35;
    white-space: normal;
    overflow-wrap: anywhere;
  }

  .modal-content.drl-surface-content,
  .modal-content.drl-surface-content.drl-surface-medium,
  .modal-content.drl-surface-content.drl-surface-wide {
    width: 100vw !important;
    max-width: 100vw !important;
    max-height: 100dvh !important;
    border-radius: 16px 16px 0 0 !important;
  }

  .modal-content.drl-surface-content.drl-surface-wide {
    height: 100dvh !important;
    border-radius: 0 !important;
  }

  .drl-window-back span:last-child {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
  }

  .modal-content.drl-surface-content .modal-footer {
    align-items: stretch;
  }

  .modal-content.drl-surface-content .modal-footer .btn {
    flex: 1 1 100%;
    min-height: 44px;
  }

  .btn-small {
    min-height: 42px;
  }

  .modal-footer .btn {
    flex: 1 1 100%;
    width: 100%;
  }

  #grader-account-form {
    grid-template-columns: minmax(0, 1fr) !important;
  }

  .drl-action-table thead th:last-child,
  .drl-action-table tbody td:last-child:not([colspan]) {
    width: 164px;
    min-width: 164px;
    max-width: 164px;
  }

  .drl-action-table tbody td:last-child:not([colspan]) .btn,
  .drl-action-table tbody td:last-child:not([colspan]) .action-icon-btn {
    flex: 1 1 auto;
  }

  #class-students-modal .drl-action-table [data-column='student-code'],
  #class-students-modal .drl-action-table td:nth-child(1) {
    min-width: 78px;
  }

  #class-students-modal .drl-action-table [data-column='student-name'],
  #class-students-modal .drl-action-table td:nth-child(2) {
    min-width: 124px;
  }

  #class-students-modal .drl-action-table [data-column='student-score'],
  #class-students-modal .drl-action-table [data-column='advisor-score'],
  #class-students-modal .drl-action-table [data-column='faculty-score'],
  #class-students-modal .drl-action-table td:nth-child(3),
  #class-students-modal .drl-action-table td:nth-child(4),
  #class-students-modal .drl-action-table td:nth-child(5) {
    min-width: 96px;
  }

  #class-students-modal .drl-action-table [data-column='status'],
  #class-students-modal .drl-action-table td:nth-child(6) {
    min-width: 144px;
  }
}

/* Unified managed-window frame contract. Keep one frame and one scroll owner. */
.modal-overlay.drl-managed-surface,
.modal-overlay.drl-managed-surface * {
  box-sizing: border-box;
}

.modal-content.drl-surface-content {
  min-width: 0;
  min-height: 0;
}

.modal-content.drl-surface-content > .modal-header,
.modal-content.drl-surface-content > .modal-footer,
.modal-content.drl-surface-content > form > .modal-header,
.modal-content.drl-surface-content > form > .modal-footer,
.modal-content.drl-surface-content > .cava-header,
.modal-content.drl-surface-content > .cava-footer {
  flex: 0 0 auto !important;
}

.modal-content.drl-surface-content > .modal-body,
.modal-content.drl-surface-content > form > .modal-body,
.modal-content.drl-surface-content > .cava-body,
.modal-content.drl-surface-content [data-modal-scroll='true'] {
  min-width: 0;
  min-height: 0;
  flex: 1 1 auto;
  overflow: auto !important;
  overscroll-behavior: contain;
  scrollbar-gutter: stable;
}

.modal-overlay.drawer-mode.drl-managed-surface {
  align-items: stretch !important;
  justify-content: flex-end !important;
  padding: 0 !important;
}

.modal-overlay.drawer-mode.drl-managed-surface .modal-content.drawer {
  width: min(900px, 100vw) !important;
  max-width: 100vw !important;
  height: 100dvh !important;
  max-height: 100dvh !important;
  margin: 0 !important;
  border-radius: 14px 0 0 14px !important;
}

#assignment-modal .assignment-step-actions {
  position: sticky;
  bottom: -1.25rem;
  z-index: calc(var(--drl-z-table-header) + 2);
  margin: 1rem -1.5rem -1.25rem;
  padding: 0.85rem 1.5rem;
  background: rgba(248, 251, 250, 0.96);
  border-top: 1px solid #d9e7e3;
  box-shadow: 0 -12px 24px rgba(22, 54, 60, 0.08);
  backdrop-filter: blur(10px);
}

@media (max-width: 768px) {
  .modal-overlay.drl-managed-surface {
    width: 100vw !important;
    height: 100dvh !important;
    min-height: 100dvh !important;
  }

  .modal-content.drl-surface-content,
  .modal-content.drl-surface-content.drl-surface-medium,
  .modal-content.drl-surface-content.drl-surface-wide,
  .modal-overlay.drawer-mode.drl-managed-surface .modal-content.drawer {
    max-width: 100vw !important;
    max-height: 100dvh !important;
  }

  .modal-content.drl-surface-content.drl-surface-wide,
  .modal-overlay.drawer-mode.drl-managed-surface .modal-content.drawer {
    width: 100vw !important;
    height: 100dvh !important;
    border-radius: 0 !important;
  }

  .modal-content.drl-surface-content .modal-header,
  .modal-content.drl-surface-content .cava-header {
    min-height: 56px;
    gap: 0.5rem;
    padding: 0.75rem 1rem !important;
  }

  .modal-content.drl-surface-content .modal-header h3 {
    font-size: 1rem;
    line-height: 1.3;
  }

  .drl-window-back,
  .modal-content.drl-surface-content .close-modal,
  .modal-content.drl-surface-content .modal-close {
    width: 40px;
    min-width: 40px;
    height: 40px;
    min-height: 40px;
    padding: 0 !important;
  }

  .modal-content.drl-surface-content .modal-footer > div {
    width: 100%;
    flex-wrap: wrap;
  }

  #criteria-modal .cava-header {
    display: grid !important;
    grid-template-columns: 40px minmax(0, 1fr) auto;
  }

  #criteria-modal .cava-header > .drl-window-back {
    grid-column: 1;
  }

  #criteria-modal .cava-header > div:first-of-type {
    grid-column: 2;
  }

  #criteria-modal .cava-header > div:last-of-type {
    grid-column: 3;
  }

  #criteria-modal #criteria-validation-badge {
    display: none;
  }

  #criteria-modal .cava-toolbar {
    align-items: stretch !important;
    gap: 0.5rem !important;
    padding: 0.65rem 0.75rem !important;
  }

  #criteria-modal .cava-toolbar > div:first-child {
    display: flex !important;
    width: 100%;
    gap: 0.4rem !important;
    flex-wrap: wrap !important;
    align-items: center;
  }

  #criteria-modal .cava-toolbar > div:first-child > span[style*='color:#334155'] {
    display: none;
  }

  #criteria-modal .cava-toolbar > div:first-child .btn-small {
    flex: 1 1 calc(50% - 0.25rem);
    justify-content: center;
  }

  #criteria-modal .cava-toolbar > .btn-primary {
    width: 100%;
    justify-content: center;
  }

  #assignment-modal .assignment-step-actions {
    bottom: -1rem;
    margin: 1rem -1rem -1rem;
    padding: 0.75rem 1rem;
    flex-wrap: wrap;
  }

  #assignment-modal .assignment-step-actions .btn {
    flex: 1 1 calc(50% - 0.5rem);
  }
}

/* Large student review workspace: one frame and one scroll owner. */
#admin-students-modal {
  align-items: center !important;
  justify-content: center !important;
  padding: clamp(0.5rem, 1.5vw, 1.25rem) !important;
}

#admin-students-modal .student-list-window-frame {
  width: min(1600px, calc(100vw - 2rem)) !important;
  max-width: calc(100vw - 2rem) !important;
  height: min(940px, calc(100dvh - 2rem)) !important;
  max-height: calc(100dvh - 2rem) !important;
  display: flex !important;
  flex-direction: column !important;
  overflow: hidden !important;
  border-radius: 16px !important;
}

#admin-students-modal .modal-body {
  min-height: 0;
  overflow: auto !important;
  padding: clamp(1rem, 1.6vw, 1.5rem) !important;
}

#admin-students-modal #admin-students-list > table,
#admin-students-modal #admin-students-list .drl-action-table {
  min-width: 1040px;
}

#admin-students-modal #admin-students-list thead th {
  position: sticky;
  top: 0;
  z-index: var(--drl-z-table-header);
  background: var(--bg-tertiary);
}

.modal-header-actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 0.5rem;
  flex: 0 0 auto;
}

.drl-cell-note {
  display: block;
  margin-top: 0.25rem;
  color: var(--text-muted);
  font-size: 0.72rem;
  line-height: 1.3;
}

#review-assessment-modal #review-summary {
  grid-template-columns: repeat(4, minmax(160px, 1fr)) !important;
}

#review-assessment-modal .review-form-section.is-read-only {
  padding: 0.8rem 1rem !important;
  position: static;
  box-shadow: none;
}

#review-assessment-modal .review-form-section.is-read-only .form-group {
  display: none !important;
}

#review-assessment-modal .review-form-section.is-read-only .review-action-row {
  margin-top: 0.5rem !important;
}

@media (max-width: 1100px) {
  #review-assessment-modal #review-summary {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }
}

@media (max-width: 768px) {
  #admin-students-modal {
    padding: 0 !important;
  }

  #admin-students-modal .student-list-window-frame {
    width: 100vw !important;
    max-width: 100vw !important;
    height: 100dvh !important;
    max-height: 100dvh !important;
    border-radius: 0 !important;
  }

  .modal-header-actions .btn {
    min-height: 40px;
    white-space: nowrap;
  }

  #review-assessment-modal .modal-header {
    display: grid !important;
    grid-template-columns: 40px minmax(0, 1fr) 40px;
    align-items: start;
    gap: 0.65rem;
  }

  #review-assessment-modal .modal-header > .drl-window-back {
    grid-column: 1;
    grid-row: 1;
    align-self: start;
  }

  #review-assessment-modal .review-window-heading {
    grid-column: 2;
    grid-row: 1;
    min-width: 0;
  }

  #review-assessment-modal .modal-header-actions {
    display: contents;
  }

  #review-assessment-modal #review-download-word-btn {
    grid-column: 1 / -1;
    grid-row: 2;
    width: 100%;
    justify-content: center;
  }

  #review-assessment-modal .modal-header-actions .close-modal {
    grid-column: 3;
    grid-row: 1;
    align-self: start;
    justify-self: end;
  }

  #review-assessment-modal #review-summary {
    grid-template-columns: 1fr !important;
  }
}

/* ============================================================
   Outline numbering for phiếu criteria (I, 1.1, 1.2 ...)
   ------------------------------------------------------------
   The number is always its own element in its own column, never
   part of the criterion text. Long names therefore wrap under the
   name column instead of widening the row, which is what used to
   force horizontal dragging on narrow screens.
   ============================================================ */

.student-group-title {
  min-width: 0;
}

.student-group-index,
.student-criterion-index,
.criteria-index,
.cava-outline-index {
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
  color: var(--primary);
}

.student-group-name {
  min-width: 0;
  overflow-wrap: anywhere;
}

.student-criterion-title {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 0.15rem 0.5rem;
  align-items: baseline;
}

.student-criterion-name {
  font-weight: 600;
  color: var(--text-primary);
  min-width: 0;
  overflow-wrap: anywhere;
}

.student-criterion-max {
  grid-column: 2;
}

/* Grading tables: a dedicated, non-shrinking column for the code. */
.criteria-index-col {
  width: 4.5rem;
}

.criteria-index-cell {
  padding: 0.5rem;
  text-align: center;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
  color: var(--text-secondary);
}

.criteria-name-cell {
  padding: 0.5rem 0.5rem 0.5rem 1.25rem;
  min-width: 0;
  overflow-wrap: anywhere;
}

.criteria-index {
  margin-right: 0.35rem;
}

/* Faculty comparison sheet: the two score columns keep a fixed width on wide
   screens and give it back to the criterion text on narrow ones. */
.criteria-score-pair {
  display: flex;
  gap: 1rem;
  justify-content: flex-end;
  text-align: center;
  flex: 0 0 auto;
}

.criteria-score-pair > div {
  width: 60px;
}

.criteria-score-values {
  font-weight: 700;
  font-size: 0.95rem;
  align-items: center;
}

.criteria-item.parent .criteria-row {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: baseline;
  gap: 0.5rem 0.6rem;
}

.criteria-item.parent .criteria-title {
  min-width: 0;
  overflow-wrap: anywhere;
}

/* Template editor: the badge is read-only — admins never type a number. */
.cava-outline-index {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  align-self: center;
  min-width: 2.75rem;
  padding: 0.2rem 0.45rem;
  border-radius: 6px;
  background: rgba(11, 122, 117, 0.12);
  border: 1px solid rgba(11, 122, 117, 0.26);
  font-size: 0.82rem;
  user-select: none;
}

.cava-outline-index-group {
  align-self: end;
  margin-bottom: 0.35rem;
}

.cava-outline-index-child {
  align-self: start;
  margin-top: 0.4rem;
}

.cava-group-header {
  grid-template-columns: auto minmax(0, 1fr) minmax(120px, 150px) auto;
}

.cava-child-row {
  grid-template-columns: auto minmax(0, 1fr) minmax(100px, 130px) 36px;
}

/* Guidance text plus the evidence checkbox, spanning the whole child row. */
.cava-child-extras {
  grid-column: 1 / -1;
  min-width: 0;
}

.cava-child-guide-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 0.75rem;
  align-items: center;
  min-width: 0;
}

.cava-child-evidence {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  color: var(--text-secondary);
  cursor: pointer;
  min-width: 0;
}

/* Group banner inside the two grading sheets. The inline colours date from the
   old dark theme and were nearly invisible on the light one, so they are
   overridden here for every screen width. */
.review-table tr.criteria-group-row td {
  background: rgba(11, 122, 117, 0.09) !important;
}

.review-table tr.criteria-group-row strong {
  color: var(--primary) !important;
}

.review-table tr.criteria-group-row td.criteria-group-filler {
  color: var(--text-secondary) !important;
}

.review-table tr.criteria-group-row .criteria-group-total span {
  color: var(--text-secondary) !important;
}

.criteria-group-badge {
  margin-left: 0.5rem;
  padding: 0.1rem 0.45rem;
  border-radius: 4px;
  font-size: 0.75rem;
  font-weight: 600;
  white-space: nowrap;
  color: var(--primary);
  background: rgba(11, 122, 117, 0.14);
}

@media (max-width: 768px) {
  /* One column per row; the badge keeps a line of its own so the name
     below it can use the full width. */
  .cava-group-header,
  .cava-child-row {
    grid-template-columns: minmax(0, 1fr);
  }

  .cava-outline-index,
  .cava-outline-index-group,
  .cava-outline-index-child {
    grid-column: 1 / -1;
    justify-self: start;
    align-self: start;
    margin: 0;
  }

  .student-group-meta {
    white-space: normal;
  }

  /* The textarea used to claim a 220px minimum next to a non-wrapping label,
     which pushed the child row past the viewport and got clipped. */
  .cava-child-guide-row {
    grid-template-columns: minmax(0, 1fr);
  }

  .cava-child-evidence {
    justify-self: start;
  }

  /* The scores move under the criterion so its text gets the full width. */
  .criteria-sheet-header .criteria-score-pair {
    display: none;
  }

  .criteria-item:not(.parent) .criteria-row {
    flex-wrap: wrap;
  }

  /* The group badge drops under the title rather than squeezing it. */
  .criteria-item.parent .criteria-row {
    grid-template-columns: auto minmax(0, 1fr);
  }

  .criteria-item.parent .criteria-max-badge {
    grid-column: 2;
    justify-self: start;
  }

  .criteria-score-values {
    width: 100%;
    justify-content: flex-start;
    gap: 1.25rem;
    margin-top: 0.35rem;
    padding-top: 0.35rem;
    border-top: 1px dashed var(--border-glass);
  }

  .criteria-score-values > div {
    width: auto;
  }

  .criteria-score-values > div:first-child::before {
    content: 'SV tự: ';
    font-weight: 600;
    color: var(--text-muted);
  }

  .criteria-score-values > div:last-child::before {
    content: 'CVHT: ';
    font-weight: 600;
    color: var(--text-muted);
  }

  /* The two grading sheets used a 920px minimum, which made every phone
     drag sideways. Below 768px each row becomes a labelled card instead. */
  #grade-sheet-modal .review-table,
  #review-assessment-modal .review-table {
    min-width: 0;
  }

  #grade-sheet-modal .review-table thead,
  #review-assessment-modal .review-table thead {
    display: none;
  }

  #grade-sheet-modal .review-table tbody,
  #grade-sheet-modal .review-table tr,
  #grade-sheet-modal .review-table td,
  #review-assessment-modal .review-table tbody,
  #review-assessment-modal .review-table tr,
  #review-assessment-modal .review-table td {
    display: block;
    width: 100%;
    max-width: 100%;
  }

  #grade-sheet-modal .review-table tr,
  #review-assessment-modal .review-table tr {
    border: 1px solid var(--border-glass);
    border-radius: 10px;
    margin-bottom: 0.6rem;
    padding: 0.35rem 0.5rem;
  }

  #grade-sheet-modal .review-table td[data-label],
  #review-assessment-modal .review-table td[data-label] {
    display: grid;
    grid-template-columns: minmax(0, 7.5rem) minmax(0, 1fr);
    gap: 0.5rem;
    align-items: center;
    text-align: left !important;
    background: transparent !important;
    padding: 0.35rem 0.25rem !important;
  }

  #grade-sheet-modal .review-table td[data-label]::before,
  #review-assessment-modal .review-table td[data-label]::before {
    content: attr(data-label);
    color: var(--text-muted);
    font-size: 0.78rem;
    font-weight: 600;
  }

  /* A group header becomes one banner: its title, then its total. The
     decorative label and spacer cells carry no information once stacked. */
  #grade-sheet-modal .review-table tr.criteria-group-row,
  #review-assessment-modal .review-table tr.criteria-group-row {
    border: none;
    padding: 0;
    margin-bottom: 0.4rem;
    border-radius: 10px 10px 0 0;
    overflow: hidden;
  }

  #grade-sheet-modal .review-table td.criteria-group-filler,
  #review-assessment-modal .review-table td.criteria-group-filler {
    display: none;
  }

  #grade-sheet-modal .review-table td.criteria-group-title,
  #review-assessment-modal .review-table td.criteria-group-title {
    padding: 0.6rem 0.75rem !important;
  }

  #grade-sheet-modal .review-table td.criteria-group-total,
  #review-assessment-modal .review-table td.criteria-group-total {
    text-align: left !important;
    padding: 0.45rem 0.75rem !important;
  }

  #grade-sheet-modal .review-table-wrapper,
  #review-assessment-modal .review-table-wrapper {
    overflow-x: hidden;
  }
}

/* ============================================================
   Academic structure (Khoa → Ngành) and roster import
   ============================================================ */

.structure-tree {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.structure-node {
  border: 1px solid var(--border-glass);
  border-radius: 10px;
  overflow: hidden;
  background: var(--bg-secondary);
}

.structure-node-head,
.structure-leaf {
  display: grid;
  grid-template-columns: auto minmax(4rem, auto) minmax(0, 1fr) auto auto;
  align-items: center;
  gap: 0.5rem 0.75rem;
  padding: 0.6rem 0.85rem;
}

.structure-leaf {
  grid-template-columns: minmax(4rem, auto) minmax(0, 1fr) auto auto;
  border-top: 1px dashed var(--border-glass);
  margin-left: 1.75rem;
}

.structure-toggle {
  width: 26px;
  height: 26px;
  border-radius: 6px;
  border: 1px solid var(--border-glass);
  background: transparent;
  color: var(--text-secondary);
  cursor: pointer;
  font-weight: 700;
  line-height: 1;
}

.structure-code {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-weight: 700;
  color: var(--primary);
  background: rgba(11, 122, 117, 0.12);
  border: 1px solid rgba(11, 122, 117, 0.24);
  border-radius: 6px;
  padding: 0.12rem 0.45rem;
  text-align: center;
  white-space: nowrap;
}

.structure-code-major {
  color: var(--accent);
  background: rgba(184, 87, 63, 0.1);
  border-color: rgba(184, 87, 63, 0.24);
}

.structure-name {
  font-weight: 600;
  color: var(--text-primary);
  min-width: 0;
  overflow-wrap: anywhere;
}

.structure-meta {
  font-size: 0.8rem;
  color: var(--text-muted);
  white-space: nowrap;
}

.structure-actions {
  display: flex;
  gap: 0.35rem;
  flex-wrap: wrap;
}

.structure-empty,
.structure-empty-inline {
  padding: 1.25rem;
  color: var(--text-muted);
  text-align: center;
}

.structure-empty-inline {
  padding: 0.6rem 0.85rem 0.85rem 2.6rem;
  text-align: left;
  font-size: 0.85rem;
}

/* --- Import --- */

.import-dropzone {
  border: 2px dashed var(--border-glass);
  border-radius: 12px;
  padding: 2rem 1rem;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.5rem;
  transition: border-color 0.2s, background 0.2s;
}

.import-dropzone.is-dragging {
  border-color: var(--primary);
  background: rgba(11, 122, 117, 0.06);
}

.import-dropzone-title {
  font-weight: 600;
  color: var(--text-primary);
  margin: 0;
}

.import-muted {
  color: var(--text-muted);
  font-size: 0.85rem;
  margin: 0;
}

.import-status {
  margin: 1rem 0 0;
  padding: 0.6rem 0.85rem;
  border-radius: 8px;
  font-size: 0.9rem;
  border: 1px solid var(--border-glass);
}

.import-status-info { color: var(--text-secondary); }
.import-status-success { color: var(--primary); background: rgba(11, 122, 117, 0.08); border-color: rgba(11, 122, 117, 0.24); }
.import-status-error { color: var(--danger); background: rgba(220, 68, 68, 0.07); border-color: rgba(220, 68, 68, 0.24); }

.import-counters {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(8rem, 1fr));
  gap: 0.75rem;
  margin: 1rem 0;
}

.import-counter {
  border: 1px solid var(--border-glass);
  border-radius: 10px;
  padding: 0.75rem;
  text-align: center;
  background: var(--bg-secondary);
}

.import-counter.is-good { border-color: rgba(11, 122, 117, 0.35); }
.import-counter.is-bad { border-color: rgba(220, 68, 68, 0.35); }
.import-counter.is-warn { border-color: rgba(217, 140, 40, 0.4); }

.import-counter-value {
  display: block;
  font-size: 1.5rem;
  font-weight: 700;
  color: var(--text-primary);
  font-variant-numeric: tabular-nums;
}

.import-counter-label {
  font-size: 0.8rem;
  color: var(--text-muted);
}

.import-block {
  margin-top: 1rem;
  padding: 0.85rem 1rem;
  border: 1px solid var(--border-glass);
  border-radius: 10px;
  background: var(--bg-secondary);
}

.import-block h4 {
  margin: 0 0 0.5rem;
  display: flex;
  align-items: center;
  gap: 0.75rem;
  flex-wrap: wrap;
}

.import-block-warn { border-color: rgba(217, 140, 40, 0.4); }
.import-block-error { border-color: rgba(220, 68, 68, 0.35); }

.import-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr));
  gap: 1rem;
}

.import-list {
  margin: 0.35rem 0 0;
  padding-left: 1.1rem;
  font-size: 0.87rem;
  line-height: 1.6;
}

.import-list code {
  font-weight: 700;
  color: var(--primary);
}

.import-flag {
  color: #8a5a12;
  background: rgba(217, 140, 40, 0.13);
  border-radius: 4px;
  padding: 0.05rem 0.35rem;
  font-size: 0.8rem;
}

.import-table {
  font-size: 0.85rem;
}

/* The reason column carries a sentence, so it wraps rather than widening the
   table past its container — `.table-container > table` otherwise forces
   `min-width: max-content` and the sheet drags sideways. */
.table-container > table.import-table {
  min-width: 0;
  width: 100%;
  table-layout: fixed;
}

.import-table th,
.import-table td {
  white-space: normal;
  overflow-wrap: anywhere;
  vertical-align: top;
}

.import-table th:first-child,
.import-table td:first-child {
  width: 4.5rem;
}

.import-table th:nth-child(2),
.import-table td:nth-child(2) {
  width: 7rem;
}

.import-row-number {
  font-variant-numeric: tabular-nums;
  color: var(--text-muted);
  white-space: nowrap;
}

.import-actions {
  display: flex;
  gap: 0.5rem;
  justify-content: flex-end;
  margin-top: 1rem;
  flex-wrap: wrap;
}

@media (max-width: 768px) {
  .structure-node-head,
  .structure-leaf {
    grid-template-columns: auto minmax(0, 1fr);
  }

  .structure-leaf {
    grid-template-columns: minmax(0, 1fr);
    margin-left: 0.75rem;
  }

  .structure-meta,
  .structure-actions {
    grid-column: 1 / -1;
  }

  .import-actions .btn {
    flex: 1;
  }
}

/* ============================================================
   Đợt đánh giá: thanh chọn đợt và trang chi tiết
   ------------------------------------------------------------
   Thay cho <select> "Chọn đợt đánh giá": các đợt bày thành thẻ
   luôn nhìn thấy, mỗi thẻ hiện đủ học kỳ, trạng thái và khối
   lượng — không phải mở ra mới biết bên trong có gì.
   ============================================================ */

.period-bar {
  display: block;
  margin-top: 1rem;
}

.period-bar-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  margin-bottom: 0.5rem;
  flex-wrap: wrap;
}

.period-bar-label {
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--text-muted);
}

.period-bar-loading,
.period-bar-empty {
  color: var(--text-muted);
  font-size: 0.9rem;
  margin: 0.5rem 0;
}

.period-bar-track {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(15rem, 1fr));
  gap: 0.6rem;
}

.period-card {
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
  text-align: left;
  padding: 0.7rem 0.85rem;
  border: 1px solid var(--border-glass);
  border-radius: 10px;
  background: var(--bg-secondary);
  cursor: pointer;
  transition: border-color 0.15s, box-shadow 0.15s, background 0.15s;
  min-width: 0;
}

.period-card:hover {
  border-color: rgba(11, 122, 117, 0.4);
}

.period-card.is-selected {
  border-color: var(--primary);
  background: rgba(11, 122, 117, 0.07);
  box-shadow: inset 3px 0 0 var(--primary);
}

.period-card-term {
  font-size: 0.75rem;
  font-weight: 700;
  color: var(--primary);
  letter-spacing: 0.02em;
}

.period-card-name {
  font-weight: 600;
  color: var(--text-primary);
  line-height: 1.35;
  overflow-wrap: anywhere;
}

.period-card-foot {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  flex-wrap: wrap;
  margin-top: 0.15rem;
}

.period-card-meta {
  font-size: 0.75rem;
  color: var(--text-muted);
  font-variant-numeric: tabular-nums;
}

.period-chip {
  font-size: 0.72rem;
  font-weight: 700;
  padding: 0.1rem 0.4rem;
  border-radius: 4px;
  white-space: nowrap;
}

.period-chip-draft { color: #5b6b73; background: rgba(91, 107, 115, 0.13); }
.period-chip-active { color: var(--primary); background: rgba(11, 122, 117, 0.14); }
.period-chip-done { color: #2f7d32; background: rgba(47, 125, 50, 0.13); }
.period-chip-locked { color: #8a5a12; background: rgba(217, 140, 40, 0.15); }

/* --- Nút lọc thay cho dropdown lọc --- */

.period-filters {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
  margin: 0.5rem 0 0.75rem;
}

.period-filter {
  border: 1px solid var(--border-glass);
  background: var(--bg-secondary);
  color: var(--text-secondary);
  border-radius: 999px;
  padding: 0.28rem 0.7rem;
  font-size: 0.82rem;
  cursor: pointer;
  white-space: nowrap;
}

.period-filter:hover { border-color: rgba(11, 122, 117, 0.4); }

.period-filter.is-on {
  background: var(--primary);
  border-color: var(--primary);
  color: #fff;
  font-weight: 600;
}

.period-filter-card {
  margin-top: 1rem;
  padding: 0.85rem 1.25rem;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(12rem, 20rem);
  gap: 1rem;
  align-items: start;
}

.period-filter-group { min-width: 0; }

.period-filter-label {
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--text-muted);
  display: block;
  margin-bottom: 0.25rem;
}

.period-filter-search { min-width: 0; }

.period-inline-row {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  flex-wrap: wrap;
  margin-top: 0.75rem;
}

.period-inline-value {
  font-weight: 600;
  color: var(--text-primary);
}

.period-inline-meta {
  font-size: 0.8rem;
  color: var(--text-muted);
}

/* --- Trang chi tiết đợt --- */

.period-panels {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(20rem, 1fr));
  gap: 1rem;
  margin-top: 1rem;
}

.period-panel {
  border: 1px solid var(--border-glass);
  border-radius: 12px;
  background: var(--bg-secondary);
  padding: 1rem 1.25rem;
}

.period-panel-title {
  margin: 0 0 0.75rem;
  font-size: 0.95rem;
  color: var(--text-primary);
}

/* Trường của đợt: nhãn và giá trị thành hai cột, giá trị xuống dòng khi dài. */
.period-fields {
  display: grid;
  gap: 0.5rem;
  margin: 0;
}

.period-field {
  display: grid;
  grid-template-columns: minmax(8rem, 12rem) minmax(0, 1fr);
  gap: 0.5rem 1rem;
  padding-bottom: 0.5rem;
  border-bottom: 1px dashed var(--border-glass);
}

.period-field:last-child { border-bottom: none; padding-bottom: 0; }

.period-field dt {
  font-size: 0.82rem;
  color: var(--text-muted);
  margin: 0;
}

.period-field dd {
  margin: 0;
  color: var(--text-primary);
  font-weight: 600;
  min-width: 0;
  overflow-wrap: anywhere;
}

.period-steps {
  display: grid;
  gap: 0.15rem;
}

.period-step {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 0.6rem;
  padding: 0.4rem 0;
}

.period-step-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  border: 2px solid var(--border-glass);
  background: var(--bg-primary);
}

.period-step.is-past .period-step-dot {
  border-color: var(--primary);
  background: var(--primary);
}

.period-step-label { color: var(--text-secondary); font-size: 0.88rem; min-width: 0; }
.period-step.is-past .period-step-label { color: var(--text-primary); }

.period-step-date {
  font-variant-numeric: tabular-nums;
  font-weight: 600;
  color: var(--text-primary);
  white-space: nowrap;
}

.period-loading {
  text-align: center;
  color: var(--text-muted);
  padding: 1.25rem;
}

.period-muted { color: var(--text-muted); }
.period-number { text-align: center; font-variant-numeric: tabular-nums; }

.period-class-table tbody tr { cursor: pointer; }
.period-class-table tbody tr:hover { background: rgba(11, 122, 117, 0.05); }

/* Tên CVHT và cán bộ rà soát dài, nên bảng chia cột cố định và cho chữ xuống
   dòng — `.table-container > table` mặc định ép `min-width: max-content` khiến
   bảng phải kéo ngang. */
.table-container > table.period-class-table {
  min-width: 0;
  width: 100%;
  table-layout: fixed;
}

.period-class-table th,
.period-class-table td {
  white-space: normal;
  overflow-wrap: anywhere;
  vertical-align: top;
}

.period-class-table th:nth-child(5),
.period-class-table td:nth-child(5) { width: 4.5rem; }

.period-class-table th:nth-child(6),
.period-class-table td:nth-child(6) { width: 9rem; }

.period-class-table th:nth-child(7),
.period-class-table td:nth-child(7) { width: 8rem; }

/* Tiến độ một lớp: các lớp phủ chồng nhau, lớp hẹp nhất nằm trên. */
.period-progress {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  min-width: 8rem;
}

.period-progress-track {
  position: relative;
  flex: 1;
  height: 8px;
  border-radius: 999px;
  background: rgba(11, 122, 117, 0.1);
  overflow: hidden;
  min-width: 4rem;
}

.period-progress-fill {
  position: absolute;
  inset: 0 auto 0 0;
  border-radius: 999px;
}

.period-progress-fill.is-submitted { background: rgba(217, 140, 40, 0.55); }
.period-progress-fill.is-graded { background: rgba(11, 122, 117, 0.6); }
.period-progress-fill.is-approved { background: var(--primary); }

.period-progress-text {
  font-size: 0.78rem;
  color: var(--text-muted);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

@media (max-width: 768px) {
  .period-bar-track { grid-template-columns: minmax(0, 1fr); }
  .period-filter-card { grid-template-columns: minmax(0, 1fr); }
  .period-field { grid-template-columns: minmax(0, 1fr); gap: 0.15rem; }

  /* Bảng lớp trong đợt xếp chồng thành thẻ, không kéo ngang. */
  .table-container > table.period-class-table { min-width: 0; width: 100%; }
  .period-class-table thead { display: none; }
  .period-class-table tbody,
  .period-class-table tr,
  .period-class-table td { display: block; width: 100%; }

  .period-class-table tr {
    border: 1px solid var(--border-glass);
    border-radius: 10px;
    margin-bottom: 0.6rem;
    padding: 0.35rem 0.6rem;
  }

  .period-class-table td {
    display: grid;
    grid-template-columns: minmax(0, 7.5rem) minmax(0, 1fr);
    gap: 0.5rem;
    align-items: center;
    text-align: left !important;
    padding: 0.3rem 0 !important;
  }

  .period-class-table td::before {
    content: attr(data-label);
    color: var(--text-muted);
    font-size: 0.78rem;
    font-weight: 600;
  }
}

/* ============================================================
   Ô chọn có gõ tìm (searchable select)
   ------------------------------------------------------------
   Dùng ở mọi chỗ chọn khoa. Thẻ <select> gốc vẫn nằm trong DOM
   nhưng ẩn đi, nên mã cũ đọc giá trị của nó không đổi gì.
   ============================================================ */

.ss-native {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

.ss-host,
.searchable-select {
  position: relative;
  min-width: 0;
}

/* Khi danh sách mở ra, ô này phải nổi trên các thẻ nằm sau nó trong DOM —
   nếu không bảng bên dưới sẽ vẽ đè lên danh sách. */
.searchable-select.is-open {
  z-index: var(--drl-z-dropdown, 60);
}

.ss-trigger {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  width: 100%;
  min-height: 42px;
  padding: 0.45rem 0.7rem;
  border: 1px solid var(--border-glass);
  border-radius: 8px;
  background: var(--bg-secondary);
  color: var(--text-primary);
  font: inherit;
  text-align: left;
  cursor: pointer;
}

.ss-trigger:hover { border-color: rgba(11, 122, 117, 0.4); }

.ss-trigger:focus-visible {
  outline: 2px solid var(--primary);
  outline-offset: 1px;
}

.ss-trigger[aria-expanded="true"] {
  border-color: var(--primary);
  box-shadow: 0 0 0 3px rgba(11, 122, 117, 0.12);
}

.ss-value {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.ss-value.is-placeholder { color: var(--text-muted); }

.ss-caret {
  color: var(--text-muted);
  font-size: 0.75rem;
  flex-shrink: 0;
}

/* Panel được chuyển sang `document.body` khi mở, và định vị bằng JS theo nút
   bấm, nên nó không bị thẻ nào cắt hay vẽ đè. */
.ss-panel {
  position: fixed;
  z-index: var(--drl-z-modal, 1000);
  min-width: 15rem;
  max-width: min(26rem, calc(100vw - 2rem));
  background: var(--bg-primary);
  border: 1px solid var(--border-glass);
  border-radius: 10px;
  box-shadow: 0 12px 32px rgba(20, 62, 66, 0.16);
  padding: 0.45rem;
}

.ss-search {
  width: 100%;
  margin-bottom: 0.35rem;
}

.ss-list {
  list-style: none;
  margin: 0;
  padding: 0;
  max-height: 16rem;
  overflow-y: auto;
  overscroll-behavior: contain;
}

.ss-option {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: baseline;
  gap: 0.5rem;
  padding: 0.4rem 0.5rem;
  border-radius: 6px;
  cursor: pointer;
}

.ss-option.is-active { background: rgba(11, 122, 117, 0.1); }

.ss-option.is-selected {
  font-weight: 600;
  box-shadow: inset 2px 0 0 var(--primary);
}

.ss-code {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 0.78rem;
  font-weight: 700;
  color: var(--primary);
  white-space: nowrap;
}

.ss-label {
  min-width: 0;
  overflow-wrap: anywhere;
}

.ss-meta {
  font-size: 0.78rem;
  color: var(--text-muted);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.ss-empty {
  padding: 0.75rem 0.5rem;
  color: var(--text-muted);
  text-align: center;
  font-size: 0.88rem;
}

@media (max-width: 768px) {
  .ss-panel {
    max-width: calc(100vw - 1rem);
  }
}

/* ============================================================
   Khung điều hướng: thanh không gian làm việc + breadcrumb
   ------------------------------------------------------------
   Tầng trên chọn không gian (Điều hành, Đợt đánh giá, Sinh viên,
   Danh mục), thanh bên liệt kê các màn hình của không gian đó,
   breadcrumb cho biết đang đứng ở đâu.
   ============================================================ */

.workspace-bar {
  display: flex;
  gap: 0.25rem;
  align-items: center;
  flex-wrap: wrap;
  padding: 0 0 0.6rem;
  margin-bottom: 0.9rem;
  border-bottom: 1px solid var(--border-glass);
}

.workspace-tab {
  border: 1px solid transparent;
  background: transparent;
  color: var(--text-secondary);
  border-radius: 8px;
  padding: 0.45rem 0.85rem;
  font: inherit;
  font-weight: 600;
  cursor: pointer;
  white-space: nowrap;
}

.workspace-tab:hover {
  background: rgba(11, 122, 117, 0.07);
  color: var(--text-primary);
}

.workspace-tab.is-active {
  background: rgba(11, 122, 117, 0.12);
  border-color: rgba(11, 122, 117, 0.28);
  color: var(--primary);
}

.workspace-tab:focus-visible {
  outline: 2px solid var(--primary);
  outline-offset: 1px;
}

.workspace-breadcrumb {
  margin-bottom: 0.9rem;
}

.workspace-breadcrumb ol {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.35rem;
  list-style: none;
  margin: 0;
  padding: 0;
  font-size: 0.85rem;
  color: var(--text-muted);
}

/* Dấu phân cách vẽ bằng ::before nên không lẫn vào chữ khi đọc màn hình. */
.workspace-breadcrumb li + li::before {
  content: '›';
  margin-right: 0.35rem;
  color: var(--text-muted);
}

.workspace-breadcrumb button {
  border: none;
  background: none;
  padding: 0;
  font: inherit;
  color: var(--primary);
  cursor: pointer;
  text-decoration: underline;
  text-underline-offset: 2px;
}

.workspace-breadcrumb [aria-current="page"] {
  color: var(--text-primary);
  font-weight: 600;
}

@media (max-width: 768px) {
  /* Thanh không gian cuộn ngang thay vì xuống dòng, để nội dung không bị đẩy. */
  .workspace-bar {
    flex-wrap: nowrap;
    overflow-x: auto;
    overscroll-behavior-inline: contain;
    scrollbar-width: none;
  }

  .workspace-bar::-webkit-scrollbar { display: none; }
}