:root {
  --primary: #145b96; --primary-dark: #104775; --accent: #c76a12;
  --success: #226b4d; --danger: #b4232c; --warning: #e6a817;
  --success-soft: rgba(34,107,77,0.12); --danger-soft: rgba(180,35,44,0.12); --warning-soft: rgba(230,168,23,0.14); --info-soft: rgba(20,91,150,0.12);
  --bg: #f6f8fb; --card: #ffffff; --text: #1f2937; --text-light: #596579; --border: #d8e0e9;
  --shadow: 0 2px 14px rgba(25,38,56,0.08); --radius: 12px;
  --sidebar-w: 250px;
  --content-max-width: 1420px;
  --desktop-pad: 22px;
}
.dark-mode {
  --bg: #1a1a2e; --card: #16213e; --text: #e0e0e0; --text-light: #aaa; --border: #2b3850;
  --shadow: 0 4px 20px rgba(0,0,0,0.4);
}
* { box-sizing: border-box; margin: 0; padding: 0; }
body {
  font-family: 'Segoe UI Variable', 'Aptos', 'Segoe UI', sans-serif;
  background: var(--bg); color: var(--text);
  font-size: 14px;
  transition: background-color 240ms ease, color 240ms ease;
}
html, body {
  min-width: 0;
}
@media (min-width: 1600px) {
  :root {
    --sidebar-w: 260px;
    --content-max-width: 1480px;
    --desktop-pad: 26px;
  }
  body {
    font-size: 15px;
  }
  .sidebar {
    padding: 24px 16px;
  }
  .sidebar h2 {
    font-size: 23px;
  }
  .nav-item {
    min-height: 44px;
    font-size: 14.5px;
  }
  .main {
    padding: 24px var(--desktop-pad) 28px;
  }
}
@media (min-width: 1920px) {
  :root {
    --sidebar-w: 270px;
    --content-max-width: 1520px;
    --desktop-pad: 30px;
  }
}
.sidebar {
  position: fixed; width: var(--sidebar-w); left: 0; top: 0; bottom: 0;
  background: var(--card); color: var(--text); padding: 24px 16px; z-index: 100;
  border-right: 1px solid var(--border); box-shadow: 2px 0 18px rgba(15,23,42,0.04);
  display: flex; flex-direction: column; overflow-y: auto; overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
}
.sidebar h2 { min-width: 0; margin-bottom: 4px; font-size: 17px; line-height: 1.3; white-space: nowrap; }
.sidebar .subtitle { font-size: 12px; color: var(--text-light); margin-bottom: 30px; }
.sidebar-nav-group {
  margin: 4px 0 8px; border-left: 2px solid transparent;
  transition: border-color 0.2s ease;
}
.sidebar-nav-group.has-active-section { border-left-color: var(--primary); }
.sidebar-nav-heading {
  display: flex; width: 100%; min-height: 42px; align-items: center; justify-content: space-between; gap: 10px;
  padding: 9px 12px; border: 0; border-radius: 8px;
  background: transparent; color: var(--text); font: inherit; font-size: 14px;
  font-weight: 600; letter-spacing: normal; text-align: left; cursor: pointer;
  transition: color 0.2s ease;
}
.sidebar-nav-heading:hover, .sidebar-nav-group.is-expanded .sidebar-nav-heading,
.sidebar-nav-group.has-active-section .sidebar-nav-heading { color: var(--primary-dark); }
.sidebar-nav-heading:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; }
.sidebar-group-chevron {
  width: 8px; height: 8px; flex: 0 0 8px; margin: -4px 2px 0 0;
  border-right: 1.7px solid currentColor; border-bottom: 1.7px solid currentColor;
  color: var(--text-light); transform: rotate(45deg);
  transition: transform 0.24s cubic-bezier(0.2,0.8,0.2,1), color 0.2s ease;
}
.sidebar-nav-heading:hover .sidebar-group-chevron,
.sidebar-nav-group.is-expanded .sidebar-group-chevron,
.sidebar-nav-group.has-active-section .sidebar-group-chevron { color: var(--primary); }
.sidebar-nav-group.is-expanded .sidebar-group-chevron { transform: rotate(225deg); }
.sidebar-nav-items {
  max-height: 0; margin: 0 6px; overflow: hidden; opacity: 0; visibility: hidden;
  transform: translateY(-5px); pointer-events: none;
  transition: max-height 0.28s cubic-bezier(0.2,0.8,0.2,1), opacity 0.2s ease, transform 0.24s ease,
    margin 0.24s ease, visibility 0s linear 0.24s;
}
.sidebar-nav-group.is-expanded .sidebar-nav-items {
  max-height: 240px; margin-top: 5px; opacity: 1; visibility: visible; transform: translateY(0); pointer-events: auto;
  transition: max-height 0.32s cubic-bezier(0.2,0.8,0.2,1), opacity 0.2s ease, transform 0.24s ease,
    margin 0.24s ease, visibility 0s;
}
.sidebar-nav-group .nav-item { margin-bottom: 3px; }
.nav-item {
  min-height: 42px; padding: 12px 16px; border-radius: 10px; cursor: pointer;
  margin-bottom: 6px; transition: all 0.2s; display: flex; align-items: center; gap: 10px;
  font-size: 14px; font-weight: 500;
}
.nav-item:hover, .nav-item.active { background: rgba(33,150,243,0.09); color: var(--primary-dark); }
.sidebar-footer { margin-top: auto; font-size: 11px; color: var(--text-light); text-align: center; }
.sidebar-account { display: flex; flex-direction: column; gap: 5px; margin-top: 18px; padding: 12px; border-top: 1px solid var(--border); font-size: 13px; }
.sidebar-account small { color: var(--text-light); }
.sidebar-account .btn { align-self: flex-start; margin-top: 4px; padding: 5px 10px; color: var(--primary-dark); border-color: #cbd5e1; }
.dark-mode .nav-item:hover, .dark-mode .nav-item.active { background: rgba(33,150,243,0.18); color: var(--text); }
.dark-mode .sidebar-nav-group.has-active-section { border-left-color: #8fc7ff; }
.dark-mode .sidebar-nav-heading:hover, .dark-mode .sidebar-nav-group.is-expanded .sidebar-nav-heading,
.dark-mode .sidebar-nav-group.has-active-section .sidebar-nav-heading { color: #c9e2ff; }
.dark-mode .sidebar-group-chevron { color: #b8d9ff; }
.dark-mode .sidebar-account .btn { color: var(--text); border-color: #53627a; }
@media (prefers-reduced-motion: reduce) {
  .sidebar-nav-group, .sidebar-nav-heading, .sidebar-group-chevron, .sidebar-nav-items { transition-duration: 0.01ms !important; transition-delay: 0ms !important; }
}
.auth-gate {
  position: fixed; inset: 0; z-index: 3000; display: flex; align-items: center; justify-content: center;
  padding: 24px; overflow-y: auto;
  background: radial-gradient(ellipse at 12% 12%, rgba(20,91,150,0.12), transparent 38%),
    radial-gradient(ellipse at 92% 88%, rgba(199,106,18,0.09), transparent 36%), var(--bg);
}
.auth-panel {
  width: min(100%, 460px); padding: 34px; border: 1px solid var(--border); border-radius: 18px;
  background: var(--card); box-shadow: 0 24px 70px rgba(25,38,56,0.15);
}
.auth-brand { display: flex; align-items: center; gap: 10px; margin-bottom: 25px; color: var(--primary); font-size: 11px; font-weight: 800; letter-spacing: 0.12em; }
.auth-brand-icon { display: grid; width: 38px; height: 38px; place-items: center; border-radius: 12px; background: var(--info-soft); font-size: 19px; }
.auth-panel h1 { margin-bottom: 7px; font-size: clamp(23px, 5vw, 28px); letter-spacing: -0.035em; }
.auth-panel > p { margin-bottom: 24px; color: var(--text-light); line-height: 1.5; }
.auth-panel form { display: grid; gap: 17px; }
.auth-panel label { display: grid; gap: 7px; color: var(--text); font-size: 13px; font-weight: 650; }
.auth-panel label > input, .auth-password-field input { width: 100%; min-width: 0; min-height: 46px; padding: 11px 13px; border-color: var(--border); border-radius: 10px; background: var(--bg); box-shadow: none; }
.auth-panel .btn { min-height: 44px; justify-content: center; margin-top: 3px; border-radius: 10px; font-weight: 700; }
.auth-panel .btn-primary { box-shadow: 0 8px 18px rgba(20,91,150,0.18); }
.auth-mode-switch { display: flex; justify-content: center; margin-top: 18px; }
.auth-panel .auth-mode-switch .btn { min-height: 38px; padding: 8px 14px; border-color: transparent; background: transparent; color: var(--primary); box-shadow: none; }
.auth-panel .auth-mode-switch .btn:hover { background: var(--info-soft); }
.auth-password-field { position: relative; display: flex; align-items: center; }
.auth-password-field input { padding-right: 48px; }
.auth-password-toggle { position: absolute; right: 6px; display: grid; width: 36px; height: 36px; place-items: center; padding: 0; border: 0; border-radius: 8px; background: transparent; color: var(--text-light); }
.auth-password-toggle:hover, .auth-password-toggle:focus-visible { background: var(--info-soft); color: var(--primary); outline: none; }
.auth-password-toggle svg { width: 19px; height: 19px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.auth-password-toggle .auth-eye-closed, .auth-password-toggle.is-visible .auth-eye-open { display: none; }
.auth-password-toggle.is-visible .auth-eye-closed { display: block; }
.auth-error { margin-bottom: 16px; padding: 11px 13px; border: 1px solid var(--danger-soft); border-radius: 9px; color: var(--danger); background: var(--danger-soft); font-size: 13px; line-height: 1.5; }
.dark-mode .auth-panel { box-shadow: 0 24px 70px rgba(0,0,0,0.32); }
@media (max-width: 520px) {
  .auth-gate { align-items: flex-start; padding: 16px; }
  .auth-panel { margin: auto 0; padding: 25px 21px; border-radius: 15px; }
  .auth-brand { margin-bottom: 20px; }
}
body[data-role="staff"] .btn-danger,
body[data-role="staff"] #deleteSelectedStudentsBtn,
body[data-role="staff"] #deleteSelectedSchoolsBtn,
body[data-role="staff"] #deleteSelectedClassesBtn { display: none !important; }
.main {
  margin-left: var(--sidebar-w);
  width: calc(100% - var(--sidebar-w));
  max-width: calc(100% - var(--sidebar-w));
  min-height: 100vh;
  padding: 20px var(--desktop-pad) 28px;
  box-sizing: border-box;
}
.section {
  display: none;
  width: 100%;
  max-width: var(--content-max-width);
  margin: 0 auto 20px auto;
  animation: fadeIn 0.4s ease;
}
.section + .section { margin-top: 6px; }
.assignment-stats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; margin-bottom: 24px; }
.assignment-stat { min-width: 0; padding: 16px; }
.assignment-stat .stat-icon { flex: 0 0 42px; width: 42px; height: 42px; font-size: 19px; }
.assignment-stat .stat-info { min-width: 0; }
.assignment-stat .stat-info strong { display: block; font-size: 24px; line-height: 1.2; }
.assignment-stat .stat-info span { display: block; margin-top: 2px; color: var(--text-light); font-size: 13px; }
.learning-policy-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; margin-bottom: 20px; }
.learning-policy-card { display: grid; align-content: start; gap: 8px; padding: 18px; }
.learning-policy-card strong { color: var(--primary-dark); }
.learning-policy-card span { color: var(--text-light); font-size: 13px; line-height: 1.55; }
.learning-result-stats { margin-bottom: 20px; }
.learning-result-form { align-items: end; }
.learning-result-form-actions { display: flex; flex-wrap: wrap; gap: 8px; }
.learning-result-form-hint { margin-top: 12px; }
.learning-result-filters { grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); }
.learning-result-table { width: 100%; min-width: 1180px; }
.learning-result-table th, .learning-result-table td { text-align: center; vertical-align: middle; }
.learning-result-table td:nth-child(2), .learning-result-table td:nth-child(6) { text-align: left; }
.learning-result-table td { overflow-wrap: anywhere; }
.learning-result-table td:last-child { white-space: nowrap; }
.learning-result-actions .btn + .btn { margin-left: 5px; }
.learning-result-status-pass { color: var(--success); font-weight: 700; }
.learning-result-status-fail { color: var(--danger); font-weight: 700; }
.learning-result-status-pending { color: var(--text-light); font-weight: 600; }
.learning-result-table .btn + .btn { margin-left: 5px; }
.learning-result-gm-field[hidden], .learning-result-otth-field[hidden] { display: none !important; }
#learningResultCancelButton[hidden] { display: none !important; }
.form-grid.assignment-form {
  grid-template-columns: minmax(115px, .95fr) minmax(105px, .8fr) minmax(145px, 1.2fr) minmax(130px, 1fr) minmax(160px, 1.25fr) auto;
  align-items: end;
  gap: 9px;
}
.form-grid.assignment-form.is-ic3 {
  grid-template-columns: minmax(105px, .9fr) minmax(95px, .75fr) minmax(135px, 1.1fr) minmax(145px, 1.1fr) minmax(125px, .9fr) auto;
}
.form-grid.assignment-form.is-ic3:not(.is-interactive-ic3) {
  grid-template-columns: minmax(105px, .9fr) minmax(95px, .75fr) minmax(135px, 1.1fr) minmax(145px, 1.1fr) minmax(120px, .85fr) minmax(110px, .8fr) minmax(125px, .9fr) auto;
}
.assignment-form > .form-group { min-width: 0; }
.assignment-form .assignment-submit-group { padding-top: 0; }
@media (max-width: 950px) {
  .form-grid.assignment-form { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .form-grid.assignment-form.is-ic3 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .assignment-form .assignment-project-group { grid-column: span 2; }
}
@media (max-width: 768px) {
  .form-grid.assignment-form { grid-template-columns: minmax(0, 1fr); }
  .form-grid.assignment-form.is-ic3 { grid-template-columns: minmax(0, 1fr); }
  .assignment-form .assignment-project-group { grid-column: auto; }
  .assignment-project-panel.is-open { max-height: min(520px, calc(100dvh - 32px)); }
  .assignment-project-options { grid-template-columns: repeat(2, minmax(0, 1fr)); grid-auto-rows: 34px; max-height: 78px; }
}
.assignment-project-group { position: relative; }
.assignment-project-group > #assignmentTitle { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; }
.assignment-project-picker { position: relative; }
.assignment-project-trigger {
  display: flex; width: 100%; min-height: 42px; align-items: center; justify-content: space-between; gap: 12px;
  padding: 10px 12px; border: 1px solid var(--border); border-radius: 8px; background: var(--card); color: var(--text);
  font: inherit; text-align: left; cursor: pointer; transition: border-color 0.18s ease, box-shadow 0.18s ease;
}
.assignment-project-trigger:hover, .assignment-project-trigger[aria-expanded="true"] { border-color: var(--primary); }
.assignment-project-trigger:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; }
.assignment-project-chevron { color: var(--text-light); transition: transform 0.18s ease; }
.assignment-project-trigger[aria-expanded="true"] .assignment-project-chevron { transform: rotate(180deg); }
.assignment-project-panel {
  position: absolute; top: calc(100% + 7px); right: 0; z-index: 60; width: max(100%, min(420px, calc(100vw - 24px))); max-width: calc(100vw - 24px);
  max-height: 0; padding: 0 12px;
  overflow: hidden; border: 0 solid var(--border); border-radius: 12px; background: var(--card); box-shadow: 0 12px 32px rgba(15,23,42,0.18);
  opacity: 0; visibility: hidden; pointer-events: none; transform: translateY(-5px) scale(0.99); transform-origin: top left;
  transition: opacity 0.16s ease, transform 0.16s ease, max-height 0.16s ease, padding 0.16s ease, border-width 0.16s ease, visibility 0s linear 0.16s;
}
.assignment-project-panel[hidden] { display: none !important; }
.assignment-project-panel.is-open {
  max-height: min(520px, calc(100vh - 32px)); padding: 12px; overflow-x: hidden; overflow-y: auto;
  border-width: 1px; opacity: 1; visibility: visible; pointer-events: auto; transform: translateY(0) scale(1);
  transition: opacity 0.16s ease, transform 0.16s ease, max-height 0.16s ease, padding 0.16s ease, border-width 0.16s ease, visibility 0s;
}
.assignment-project-panel-header, .assignment-project-panel-header > div {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
}
.assignment-project-panel-header { margin-bottom: 10px; }
.assignment-project-panel-header strong { font-size: 14px; }
.assignment-project-panel-header button {
  padding: 4px 6px; border: 0; background: transparent; color: var(--primary); font: inherit; font-size: 12px; cursor: pointer;
}
.assignment-project-options {
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); grid-auto-rows: 34px;
  gap: 6px; max-height: 78px; overflow-y: auto; padding: 2px;
}
.assignment-project-option {
  display: flex; min-width: 0; align-items: center; gap: 7px; padding: 6px 7px; border: 1px solid var(--border);
  border-radius: 7px; background: var(--bg); color: var(--text); font-size: 12px; cursor: pointer; opacity: 0; translate: 0 -4px;
  transition: background-color 0.14s ease, opacity 0.16s ease, translate 0.16s ease;
}
.assignment-project-panel.is-open .assignment-project-option { opacity: 1; translate: 0 0; }
.assignment-project-panel.is-open .assignment-project-option:nth-child(2) { transition-delay: 0.02s; }
.assignment-project-panel.is-open .assignment-project-option:nth-child(3) { transition-delay: 0.04s; }
.assignment-project-panel.is-open .assignment-project-option:nth-child(4) { transition-delay: 0.06s; }
.assignment-project-panel.is-open .assignment-project-option:nth-child(5) { transition-delay: 0.08s; }
.assignment-project-panel.is-open .assignment-project-option:nth-child(6) { transition-delay: 0.1s; }
.assignment-project-option:has(input:checked) { border-color: var(--primary); background: var(--info-soft); color: var(--primary-dark); }
.assignment-project-option input { width: 15px; height: 15px; flex: 0 0 15px; margin: 0; accent-color: var(--primary); }
.assignment-project-option span { min-width: 0; white-space: nowrap; }
.assignment-submit-group { align-self: end; }
.assignment-form textarea, #gradeSubmissionForm textarea { width: 100%; resize: vertical; }
.assignment-mos-fields { display: grid; gap: 16px; }
.mos-task-editor { display: grid; gap: 8px; }
.mos-task-editor-heading { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.mos-task-row { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 8px; }
.mos-task-row input, .mos-grade-task input, .mos-grade-task textarea { min-width: 0; width: 100%; }
.mos-grade-task { display: grid; gap: 8px; padding: 12px 0; border-bottom: 1px solid var(--border); }
.mos-grade-task label { font-weight: 700; }
.mos-grade-manual-hint { color: var(--warning-text, #8a5a00); font-weight: 600; }
.mos-file-actions { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 6px; margin-top: 6px; }
#assignmentMosFields[hidden], #wordGradingProfileField[hidden], #mosTaskGradeContainer[hidden], #autoGradeReadOnlyHint[hidden], #gradeSubmissionSaveButton[hidden], #gradeModalAutoScore[hidden], .student-submit-page [hidden] { display: none !important; }
.grading-filters { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)) auto; gap: 16px; margin-bottom: 20px; }
.grading-filters .table-filter-actions { display: flex; align-items: flex-end; justify-content: flex-start; margin: 0; }
.grading-filters .table-filter-actions button { min-height: 42px; white-space: nowrap; }
.grading-filters .grading-search-field { grid-column: 1 / -1; }
.grading-batch-panel { margin: 0 0 18px; padding: 16px; border: 1px solid var(--border); border-radius: 10px; background: var(--card); }
.grading-batch-heading h3 { margin: 0 0 4px; font-size: 16px; }
.grading-batch-heading p, .grading-batch-hint { margin: 0; color: var(--text-light); font-size: 12px; }
.grading-batch-controls { display: grid; grid-template-columns: auto minmax(180px, 1fr) auto minmax(220px, 1.5fr) auto; align-items: center; gap: 10px; margin: 14px 0 8px; }
.grading-batch-controls label { font-size: 13px; font-weight: 700; }
.grading-batch-controls select, .grading-batch-controls input { min-width: 0; }
.grading-batch-status { margin-top: 10px; color: var(--text-light); font-size: 13px; }
.grading-batch-preview { margin-top: 12px; }
.grading-batch-preview[hidden] { display: none !important; }
.grading-batch-summary { font-weight: 700; }
.grading-batch-table-wrap { max-height: 360px; overflow: auto; border: 1px solid var(--border); border-radius: 8px; }
.grading-batch-table { width: 100%; min-width: 820px; border-collapse: collapse; }
.grading-batch-table th, .grading-batch-table td { padding: 8px; border-bottom: 1px solid var(--border); text-align: left; vertical-align: middle; }
.grading-batch-table th { position: sticky; top: 0; z-index: 1; background: var(--card); }
.grading-batch-table td:first-child { max-width: 300px; overflow-wrap: anywhere; }
.grading-batch-table select { width: 100%; min-width: 150px; }
.grading-batch-table .is-success { color: var(--success); font-weight: 700; }
.grading-batch-table .is-warning { color: var(--warning-text, #8a5a00); font-weight: 700; }
.grading-batch-table .is-error { color: var(--danger); font-weight: 700; }
.grading-batch-table .is-muted { color: var(--text-light); }
@media (max-width: 1100px) {
  .grading-filters { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .grading-batch-controls { grid-template-columns: auto minmax(0, 1fr); }
  .grading-batch-controls button { grid-column: 2; justify-self: start; }
}
@media (max-width: 768px) {
  .grading-filters { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .grading-batch-controls { grid-template-columns: 1fr; }
  .grading-batch-controls button { grid-column: auto; }
}
.filter-select-picker { position: relative; width: 100%; min-width: 0; }
.filter-select-picker > .filter-select-native {
  position: absolute !important; width: 1px !important; height: 1px !important; min-height: 0 !important; padding: 0 !important;
  border: 0 !important; opacity: 0 !important; pointer-events: none !important; clip-path: inset(50%); overflow: hidden !important;
}
.filter-select-trigger {
  display: flex; width: 100%; min-width: 0; min-height: 42px; align-items: center; justify-content: space-between; gap: 12px;
  padding: 9px 12px; border: 1px solid var(--border); border-radius: 8px; background: var(--card); color: var(--text);
  font: inherit; text-align: left; cursor: pointer; transition: border-color 0.18s ease, box-shadow 0.18s ease;
}
.filter-select-trigger:hover, .filter-select-picker.is-open .filter-select-trigger { border-color: var(--primary); }
.filter-select-trigger:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; }
.filter-select-value { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.filter-select-chevron { flex: 0 0 auto; color: var(--text-light); transition: transform 0.16s ease; }
.filter-select-picker.is-open .filter-select-chevron { transform: rotate(180deg); }
.filter-select-panel {
  position: absolute; top: calc(100% + 6px); left: 0; right: 0; z-index: 120; display: grid; gap: 2px;
  max-height: 0; padding: 0 4px; overflow: hidden; border: 1px solid var(--border); border-width: 0; border-radius: 8px;
  background: var(--card); box-shadow: 0 10px 24px rgba(15,23,42,0.16); opacity: 0; visibility: hidden; pointer-events: none;
  transform: translateY(-5px) scale(0.99); transform-origin: top left;
  transition: opacity 0.16s ease, transform 0.16s ease, max-height 0.16s ease, padding 0.16s ease, border-width 0.16s ease, visibility 0s linear 0.16s;
}
.filter-select-panel.is-floating { position: fixed; z-index: 6000; }
.filter-select-panel.is-floating.is-open {
  max-height: min(280px, calc(100vh - 24px));
  padding: 4px;
  overflow-y: auto;
  border-width: 1px;
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transform: translateY(0) scale(1);
  transition: opacity 0.16s ease, transform 0.16s ease, max-height 0.16s ease, padding 0.16s ease, border-width 0.16s ease, visibility 0s;
}
.filter-select-panel.is-floating.is-open .filter-select-option { opacity: 1; translate: 0 0; }
#studentListCard .filter-select-picker:has(> #filterSchool) .filter-select-panel {
  right: auto; width: max(100%, min(360px, calc(100vw - 40px))); max-width: calc(100vw - 40px);
}
#studentListCard .filter-select-picker:has(> #filterSchool) .filter-select-option {
  min-height: 36px; height: auto; white-space: normal; overflow-wrap: anywhere; line-height: 1.4;
}
#studentListCard .filter-select-picker:has(> #filterClass) .filter-select-panel {
  right: auto; width: max(100%, min(360px, calc(100vw - 40px))); max-width: calc(100vw - 40px);
}
#studentListCard .filter-select-picker:has(> #filterClass) .filter-select-option {
  min-height: 36px; height: auto; white-space: normal; overflow-wrap: anywhere; line-height: 1.4;
}
.filter-select-picker.opens-above .filter-select-panel { top: auto; bottom: calc(100% + 6px); transform-origin: bottom left; }
.filter-select-picker.is-open .filter-select-panel {
  max-height: min(280px, calc(100vh - 100px)); padding: 4px; overflow-y: auto; border-width: 1px;
  opacity: 1; visibility: visible; pointer-events: auto; transform: translateY(0) scale(1);
  transition: opacity 0.16s ease, transform 0.16s ease, max-height 0.16s ease, padding 0.16s ease, border-width 0.16s ease, visibility 0s;
}
.filter-select-option {
  width: 100%; min-height: 36px; padding: 7px 9px; border: 0; border-radius: 6px; background: transparent; color: var(--text);
  font: inherit; font-size: 13px; text-align: left; cursor: pointer; opacity: 0; translate: 0 -4px;
  transition: background-color 0.14s ease, opacity 0.16s ease, translate 0.16s ease, transform 0.14s ease;
}
.filter-select-picker.is-open .filter-select-option { opacity: 1; translate: 0 0; }
.filter-select-picker.is-open .filter-select-option:nth-child(2) { transition-delay: 0.02s; }
.filter-select-picker.is-open .filter-select-option:nth-child(3) { transition-delay: 0.04s; }
.filter-select-picker.is-open .filter-select-option:nth-child(4) { transition-delay: 0.06s; }
.filter-select-picker.is-open .filter-select-option:nth-child(5) { transition-delay: 0.08s; }
.filter-select-picker.is-open .filter-select-option:nth-child(6) { transition-delay: 0.1s; }
.filter-select-option:hover, .filter-select-option:focus-visible { outline: none; background: var(--info-soft); transform: translateX(2px); }
.filter-select-option[aria-selected="true"] { background: var(--info-soft); color: var(--primary-dark); font-weight: 700; }
.dark-mode .filter-select-option[aria-selected="true"] { color: #b8d9ff; }
@media (prefers-reduced-motion: reduce) {
  .filter-select-trigger, .filter-select-chevron, .filter-select-panel, .filter-select-option, .assignment-project-trigger, .assignment-project-chevron,
  .assignment-project-panel, .assignment-project-option { transition-duration: 0.01ms !important; transition-delay: 0ms !important; }
}
  .form-group[hidden] { display: none !important; }
  .assignment-table { width: 100%; min-width: 900px; }
.assignment-table-wrap { overflow-x: auto; }
#assignmentListTable { min-width: 820px; }
#assignmentListTable th:nth-child(1), #assignmentListTable td:nth-child(1) { width: 6%; }
#assignmentListTable th:nth-child(2), #assignmentListTable td:nth-child(2) { width: 24%; }
#assignmentListTable th:nth-child(3), #assignmentListTable td:nth-child(3) { width: 12%; }
#assignmentListTable th:nth-child(4), #assignmentListTable td:nth-child(4) { width: 16%; }
#assignmentListTable th:nth-child(5), #assignmentListTable td:nth-child(5) { width: 20%; }
#assignmentListTable th:nth-child(6), #assignmentListTable td:nth-child(6) { width: 22%; }
#assignmentListTable .btn { white-space: nowrap; }
#gradingQueueTable { min-width: 1120px; }
#gradingQueueTable.grading-queue-mos { min-width: 1400px; }
#gradingQueueTable.grading-queue-ic3-only { min-width: 1040px; }
#gradingQueueTable th:nth-child(1), #gradingQueueTable td:nth-child(1) { width: 6%; }
#gradingQueueTable th:nth-child(2), #gradingQueueTable td:nth-child(2) { width: 16%; }
#gradingQueueTable th:nth-child(3), #gradingQueueTable td:nth-child(3) { width: 13%; }
#gradingQueueTable th:nth-child(4), #gradingQueueTable td:nth-child(4) { width: 15%; }
#gradingQueueTable th:nth-child(5), #gradingQueueTable td:nth-child(5) { width: 11%; }
#gradingQueueTable th:nth-child(6), #gradingQueueTable td:nth-child(6) { width: 14%; }
#gradingQueueTable th:nth-child(7), #gradingQueueTable td:nth-child(7) { width: 25%; }
#gradingQueueTable.grading-queue-mos th:nth-child(1), #gradingQueueTable.grading-queue-mos td:nth-child(1) { width: 5%; }
#gradingQueueTable.grading-queue-mos th:nth-child(2), #gradingQueueTable.grading-queue-mos td:nth-child(2) { width: 14%; }
#gradingQueueTable.grading-queue-mos th:nth-child(3), #gradingQueueTable.grading-queue-mos td:nth-child(3) { width: 17%; }
#gradingQueueTable.grading-queue-mos th:nth-child(4), #gradingQueueTable.grading-queue-mos td:nth-child(4) { width: 18%; }
#gradingQueueTable.grading-queue-mos th:nth-child(5), #gradingQueueTable.grading-queue-mos td:nth-child(5) { width: 9%; }
#gradingQueueTable.grading-queue-mos th:nth-child(6), #gradingQueueTable.grading-queue-mos td:nth-child(6) { width: 19%; }
#gradingQueueTable.grading-queue-mos th:nth-child(7), #gradingQueueTable.grading-queue-mos td:nth-child(7) { width: 18%; }
#gradingQueueTable.grading-queue-ic3-only th:nth-child(1), #gradingQueueTable.grading-queue-ic3-only td:nth-child(1) { width: 6%; }
#gradingQueueTable.grading-queue-ic3-only th:nth-child(2), #gradingQueueTable.grading-queue-ic3-only td:nth-child(2) { width: 16%; }
#gradingQueueTable.grading-queue-ic3-only th:nth-child(3), #gradingQueueTable.grading-queue-ic3-only td:nth-child(3) { width: 19%; }
#gradingQueueTable.grading-queue-ic3-only th:nth-child(4), #gradingQueueTable.grading-queue-ic3-only td:nth-child(4) { width: 17%; }
#gradingQueueTable.grading-queue-ic3-only th:nth-child(5), #gradingQueueTable.grading-queue-ic3-only td:nth-child(5) { width: 11%; }
#gradingQueueTable.grading-queue-ic3-only th:nth-child(6), #gradingQueueTable.grading-queue-ic3-only td:nth-child(6) { width: 14%; }
#gradingQueueTable.grading-queue-ic3-only th:nth-child(7), #gradingQueueTable.grading-queue-ic3-only td:nth-child(7) { width: 17%; }
.assignment-table td { overflow-wrap: anywhere; }
.assignment-table .assignment-title { font-weight: 700; }
.assignment-table .assignment-description { margin-top: 4px; color: var(--text-light); font-size: 12px; white-space: pre-wrap; }
.assignment-table th, .assignment-table td { text-align: center; vertical-align: middle; }
#assignmentListTable td:nth-child(2) { text-align: left; }
#gradingQueueTable td:nth-child(2) { text-align: left; }
#gradingQueueTable td:nth-child(3) { text-align: center; }
#gradingQueueTable td:nth-child(4) { text-align: center; }
.grading-score-progress { width: 100%; min-width: 0; text-align: left; }
.grading-score-summary { display: flex; align-items: center; justify-content: space-between; gap: 6px; color: var(--text); font-size: 12px; white-space: nowrap; }
.grading-score-percent { font-weight: 800; }
.grading-score-track { height: 8px; margin: 5px 0 4px; overflow: hidden; border-radius: 999px; background: var(--border); }
.grading-score-track span { display: block; height: 100%; border-radius: inherit; transition: width 0.25s ease; }
.grading-score-track.is-zero span { width: 4px !important; }
.grading-score-detail { color: var(--text-light); font-size: 11px; line-height: 1.3; white-space: normal; overflow-wrap: anywhere; }
.grading-score-progress.is-low .grading-score-percent { color: var(--danger); }
.grading-score-progress.is-low .grading-score-track span { background: var(--danger); }
.grading-score-progress.is-medium .grading-score-percent { color: var(--warning); }
.grading-score-progress.is-medium .grading-score-track span { background: var(--warning); }
.grading-score-progress.is-high .grading-score-percent { color: var(--success); }
.grading-score-progress.is-high .grading-score-track span { background: var(--success); }
.assignment-progress { min-width: 132px; text-align: left; }
.assignment-progress-summary, .assignment-progress-details { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.assignment-progress-summary { color: var(--text); font-size: 12px; }
.assignment-progress-percent { color: var(--warning); font-weight: 800; }
.assignment-progress-track { height: 9px; margin: 6px 0 5px; overflow: hidden; border-radius: 999px; background: var(--border); }
.assignment-progress-track span { display: block; float: left; height: 100%; min-width: 0; transition: width 0.25s ease; }
.assignment-progress-track .is-low { background: var(--danger); }
.assignment-progress-track .is-medium { background: var(--warning); }
.assignment-progress-track .is-high { background: var(--success); }
.assignment-progress-track .is-ungraded { background: var(--border); }
.assignment-progress-details { color: var(--text-light); font-size: 11px; line-height: 1.3; }
.assignment-progress-legend { display: flex; flex-wrap: wrap; gap: 3px 8px; margin-top: 4px; color: var(--text-light); font-size: 10px; line-height: 1.25; }
.assignment-progress-legend .is-low { color: var(--danger); }
.assignment-progress-legend .is-medium { color: var(--warning); }
.assignment-progress-legend .is-high { color: var(--success); }
.assignment-progress-status { color: var(--warning); font-weight: 700; }
.assignment-progress.is-not-started .assignment-progress-percent,
.assignment-progress.is-not-started .assignment-progress-status { color: var(--danger); }
.assignment-progress.is-complete .assignment-progress-percent,
.assignment-progress.is-complete .assignment-progress-status { color: var(--success); }
.assignment-progress.is-empty .assignment-progress-percent,
.assignment-progress.is-empty .assignment-progress-status { color: var(--text-light); }
.grading-queue-stats-heading { margin: 18px 0 9px; color: var(--text-light); font-size: 12px; font-weight: 700; }
.grading-queue-stats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; }
.grading-queue-stat { display: grid; min-width: 0; gap: 3px; padding: 11px 13px; border: 1px solid var(--border); border-left: 3px solid var(--primary); border-radius: 9px; background: var(--card); }
.grading-queue-stat strong { color: var(--text); font-size: 20px; line-height: 1.15; }
.grading-queue-stat span { color: var(--text-light); font-size: 11px; font-weight: 600; }
.grading-queue-stat small { color: var(--text-light); font-size: 10px; }
.grading-queue-stat.is-received { border-left-color: var(--primary); }
.grading-queue-stat.is-submitted { border-left-color: var(--warning); }
.grading-queue-stat.is-graded { border-left-color: var(--success); }
@media (max-width: 768px) {
  .grading-queue-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
}
.assignment-table .row-actions { display: flex; justify-content: center; gap: 6px; }
.assignment-row-actions, .mos-file-actions { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 6px; }
.assignment-row-actions { flex-wrap: nowrap; }
.grading-queue-actions { justify-content: flex-start; }
.grading-queue-mos .grading-queue-actions { flex-wrap: nowrap; align-items: center; justify-content: center; gap: 6px; }
.grading-queue-mos .grading-queue-actions > span { display: contents; }
.grading-icon-button { display: inline-flex; flex: 0 0 32px; align-items: center; justify-content: center; width: 32px; height: 32px; padding: 0 !important; border-radius: 8px; line-height: 1; }
.grading-icon-button svg { display: block; }
.grading-queue-mos .grading-icon-button:disabled {
  color: var(--text-light);
  background: var(--background);
  border-color: var(--border);
  opacity: 0.35;
  filter: grayscale(1);
  box-shadow: none;
}
.grading-queue-mos .grading-icon-button:disabled:hover { filter: grayscale(1); }
.assignment-row-actions .btn, .mos-file-actions .btn { white-space: nowrap; }
.mos-file-actions { margin-top: 8px; }
.grade-modal-context { margin-bottom: 16px; color: var(--text-light); }
.assignment-empty { padding: 22px 12px !important; color: var(--text-light); text-align: center; }
.header {
  display: flex; justify-content: space-between; align-items: center;
  margin-bottom: 22px; padding-bottom: 10px; flex-wrap: wrap; gap: 18px;
  border-bottom: 1px solid rgba(148, 163, 184, 0.18);
}
.header h1 { font-size: 28px; font-weight: 700; margin-right: auto; letter-spacing: -0.02em; line-height: 1.25; }
.header-actions {
  display: flex; gap: 10px; align-items: center; flex-wrap: wrap;
  justify-content: flex-end; margin-left: auto; min-width: 0;
}
.header-actions .btn {
  min-height: 42px; padding: 9px 16px; border-radius: 10px; font-size: 13.5px;
  box-shadow: 0 8px 18px rgba(15, 23, 42, 0.06);
}
.header-actions .btn-primary {
  background: linear-gradient(135deg, #1f6eb2 0%, #124f86 100%);
  color: #fff; border-color: rgba(18, 79, 134, 0.25);
  box-shadow: 0 12px 22px rgba(18, 79, 134, 0.18);
}
.header-actions .btn-primary:hover {
  background: linear-gradient(135deg, #1b639d 0%, #0f446f 100%);
  transform: translateY(-1px);
}
.header-actions .btn-outline {
  background: rgba(20, 91, 150, 0.04);
  border-color: rgba(20, 91, 150, 0.22);
  color: var(--primary-dark);
}
.timetable-page-header {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 12px;
  align-items: start;
}
.timetable-page-header h1 { margin-right: 0; }
.timetable-page-header .header-actions {
  display: grid;
  width: 100%;
  grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr) minmax(170px, 0.8fr);
  gap: 12px;
  margin-left: 0;
}
.timetable-page-header .header-actions > * { width: 100%; min-width: 0; }
.header-actions .btn-outline:hover {
  background: rgba(20, 91, 150, 0.09);
  border-color: rgba(20, 91, 150, 0.3);
}
.header-actions .btn-danger {
  white-space: nowrap;
  background: linear-gradient(135deg, #de4758 0%, #b4232c 100%);
  color: #fff;
  border-color: rgba(180, 35, 44, 0.2);
  box-shadow: 0 12px 22px rgba(180, 35, 44, 0.14);
}
.header-actions .btn-danger:hover {
  background: linear-gradient(135deg, #d43f50 0%, #9f1d28 100%);
  transform: translateY(-1px);
}
.student-header-tools {
  display: none;
}
.student-sync-group {
  display: none;
}
.student-sync-input {
  display: none;
}
.btn {
  padding: 10px 20px; min-height: 40px; border: 1px solid transparent; border-radius: 10px; cursor: pointer;
  font-size: 14px; font-weight: 600; transition: color 220ms ease, background-color 220ms ease, border-color 220ms ease, box-shadow 220ms ease, filter 160ms ease, transform 160ms ease; display: inline-flex; align-items: center; gap: 6px;
  letter-spacing: 0.01em; box-shadow: 0 8px 18px rgba(15, 23, 42, 0.06);
}
button { transition: filter 0.16s ease, transform 0.16s ease, box-shadow 0.16s ease; }
button > * { pointer-events: none; }
button:not(:disabled) { cursor: pointer; }
button:not(:disabled):hover { filter: brightness(0.96); }
button:disabled { cursor: not-allowed; }
.btn-primary {
  background: linear-gradient(135deg, #1f6eb2 0%, #124f86 100%);
  color: white;
  border-color: transparent;
  box-shadow: 0 12px 22px rgba(18, 79, 134, 0.18);
}
.btn-primary:hover { background: linear-gradient(135deg, #1a639f 0%, #0f446f 100%); transform: translateY(-1px); }
.btn-success {
  background: linear-gradient(135deg, #2f7d5c 0%, #226b4d 100%);
  color: white;
}
.btn-danger {
  background: linear-gradient(135deg, #df4659 0%, #b4232c 100%);
  color: white;
  border-color: transparent;
  box-shadow: 0 12px 22px rgba(180, 35, 44, 0.16);
}
.btn-warning { background: linear-gradient(135deg, #f5c76e 0%, #e6a817 100%); color: #3c2d00; }
.grading-reset-button {
  color: #9a2931;
  background: rgba(180, 35, 44, 0.08);
  border-color: rgba(180, 35, 44, 0.18);
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.05);
}
.grading-reset-button:hover {
  color: #8c2029;
  background: rgba(180, 35, 44, 0.14);
  border-color: rgba(180, 35, 44, 0.3);
  filter: none;
}
.grading-action-primary {
  color: #104775;
  background: rgba(20, 91, 150, 0.09);
  border-color: rgba(20, 91, 150, 0.2);
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.05);
}
.grading-action-primary:hover {
  color: #104775;
  background: rgba(20, 91, 150, 0.16);
  border-color: rgba(20, 91, 150, 0.32);
  filter: none;
}
.dark-mode .grading-reset-button {
  color: #ffb9b9;
  background: rgba(230, 90, 96, 0.16);
  border-color: rgba(230, 110, 116, 0.3);
}
.dark-mode .grading-reset-button:hover { background: rgba(230, 90, 96, 0.25); }
.dark-mode .grading-action-primary { color: #b8d9ff; background: rgba(70, 140, 200, 0.18); border-color: rgba(120, 175, 225, 0.3); }
.dark-mode .grading-action-primary:hover { background: rgba(70, 140, 200, 0.28); }
.btn-outline {
  background: rgba(20, 91, 150, 0.04);
  border-color: rgba(20, 91, 150, 0.2);
  color: var(--primary-dark);
  box-shadow: inset 0 0 0 1px rgba(20, 91, 150, 0.02);
}
.btn-outline:hover {
  background: rgba(20, 91, 150, 0.09);
  border-color: rgba(20, 91, 150, 0.3);
  transform: translateY(-1px);
}
.btn-sm { padding: 7px 14px; font-size: 12px; }
.card {
  background: var(--card); border-radius: var(--radius); padding: 24px;
  border: 1px solid var(--border); box-shadow: var(--shadow); margin-bottom: 20px; transition: color 240ms ease, background-color 240ms ease, border-color 240ms ease, box-shadow 240ms ease;
}
.card + .card { margin-top: 18px; }
.card-title {
  font-size: 18px; font-weight: 700; margin-bottom: 16px;
  display: flex; align-items: center; gap: 8px; color: var(--primary);
  padding-bottom: 10px; border-bottom: 1px solid rgba(20, 91, 150, 0.08);
  letter-spacing: -0.01em; line-height: 1.3;
}

.study-group-form-card { border-top: 3px solid var(--primary); }
.study-group-form-grid {
  grid-template-columns: minmax(135px, 0.9fr) minmax(125px, 0.8fr) minmax(165px, 1.1fr) minmax(290px, 1.9fr);
  align-items: start;
  gap: 16px;
}
.study-group-form-grid > .study-group-roster-field { grid-column: 1 / -1; }
.learning-result-class-field[hidden], .learning-result-group-field[hidden],
.header-actions select[hidden] { display: none !important; }
.study-group-subject-field { position: relative; }
.study-group-subject-picker { width: 100%; }
.study-group-subject-picker .assignment-project-trigger { min-height: 42px; }
.study-group-subject-panel { width: max(100%, min(360px, calc(100vw - 24px))); }
.study-group-subject-bulk-actions { display: inline-flex; align-items: center; gap: 8px; }
.study-group-subject-bulk-actions button { padding: 4px 6px; border: 0; background: transparent; color: var(--primary); font: inherit; font-size: 12px; cursor: pointer; }
.study-group-subject-options { grid-template-columns: repeat(2, minmax(0, 1fr)); max-height: 78px; }
#studyGroupSubjectOptions .study-group-subject-option { flex-direction: row; align-items: center; margin: 0; padding: 6px 7px; font-size: 12px; font-weight: 400; letter-spacing: normal; text-transform: none; }
#studyGroupSubjectOptions .study-group-subject-option input { width: 15px; height: 15px; flex: 0 0 15px; margin: 0; accent-color: var(--primary); }
#studyGroupSubjectOptions .study-group-subject-option span { overflow: hidden; font-size: 12px; font-weight: 400; letter-spacing: normal; text-overflow: ellipsis; text-transform: none; white-space: nowrap; }
.study-group-form-grid > .form-group > label { min-height: 17px; }
.study-group-selected-count { color: var(--primary); font-size: 12px; font-weight: 600; white-space: nowrap; }
.study-group-roster-tools { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(130px, 0.85fr) minmax(160px, 1fr); align-items: start; gap: 10px; margin-bottom: 0; }
.study-group-roster-tools > .filter-select-picker { min-width: 0; }
.study-group-roster-tools > .filter-select-picker .filter-select-trigger { width: 100%; }
.study-group-roster-picker { position: relative; min-width: 0; }
.study-group-roster-trigger { min-width: 0; }
.study-group-roster-trigger { height: 42px; }
.study-group-roster-trigger-text { display: flex; align-items: center; gap: 6px; min-width: 0; white-space: nowrap; }
.study-group-roster-trigger-text > span:first-child { overflow: hidden; text-overflow: ellipsis; }
.study-group-roster-tools > input { height: 42px; min-width: 0; }
.study-group-roster-panel { top: calc(100% + 7px); right: 0; left: 0; width: 100%; max-width: none; }
.study-group-roster-panel.is-open { max-height: min(420px, calc(100vh - 32px)); }
.study-group-roster-panel .study-group-roster { max-height: 250px; }
.study-group-form-card .form-group > .filter-select-picker { min-width: 0; }
#classFormCard .form-group > .filter-select-picker { min-width: 0; }
.study-group-roster-heading { display: flex !important; flex-direction: row !important; align-items: center; gap: 10px; min-height: 24px; text-transform: none !important; letter-spacing: normal !important; }
.study-group-roster-heading > span:first-child { color: var(--text); }
.study-group-roster-heading .study-group-selected-count { margin-left: 2px; }
.study-group-roster-bulk-actions { display: inline-flex; align-items: center; gap: 8px; }
.study-group-roster-bulk-actions button { padding: 4px 6px; border: 0; background: transparent; color: var(--primary); font: inherit; font-size: 12px; cursor: pointer; }
.study-group-roster { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); grid-auto-rows: 34px; gap: 6px; max-height: 78px; overflow: auto; padding: 2px; border: 1px solid var(--border); border-radius: 9px; background: var(--surface, #fff); }
.study-group-roster .study-group-roster-option { display: flex; align-items: center; gap: 7px; min-width: 0; padding: 6px 7px; margin: 0; border: 1px solid var(--border); border-radius: 7px; background: var(--bg); color: var(--text); cursor: pointer; font-size: 12px; font-weight: 400; letter-spacing: normal; text-transform: none; }
.study-group-roster-option:hover { border-color: var(--primary); background: rgba(37, 99, 235, 0.04); }
.study-group-roster-option input { width: 15px; height: 15px; flex: 0 0 15px; margin: 0; accent-color: var(--primary); }
.study-group-roster-option span { display: block; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.study-group-roster-option strong, .study-group-roster-option small { overflow: hidden; color: inherit; font: inherit; font-weight: 400; letter-spacing: normal; line-height: 1.2; text-overflow: ellipsis; text-transform: none; white-space: nowrap; }
.study-group-roster-option small { display: none; color: var(--text-light); }
.study-group-roster-empty, .study-group-empty { padding: 24px !important; color: var(--text-light); text-align: center; }
.study-group-form-actions, .study-group-row-actions { display: flex; flex-wrap: wrap; gap: 8px; }
.study-group-row-selected td { background: rgba(20, 91, 150, 0.08) !important; }
.dark-mode .study-group-row-selected td { background: rgba(70, 140, 200, 0.16) !important; }
.study-group-form-actions { margin-top: 16px; }
.study-group-report-type { display: block; margin-top: 3px; color: var(--text-light); }
.study-group-list-sticky-top { top: 0; }
.study-group-list-sticky-top .student-toolbar-row { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 12px; margin-bottom: 0; flex-wrap: nowrap; }
.study-group-toolbar-controls { grid-template-columns: minmax(180px, 1.4fr) minmax(130px, 0.9fr) minmax(130px, 0.85fr) auto; gap: 8px; flex: none; }
.study-group-list-sticky-top .student-list-summary { width: auto; }
.study-group-toolbar-controls input,
.study-group-toolbar-controls select,
.study-group-toolbar-controls button { min-width: 0; }
.study-group-table-scroll { max-height: min(68vh, 620px); }
#studyGroupListCard .study-group-table { min-width: 1120px; }
#studyGroupListCard .study-group-table thead th {
  position: sticky; top: 0; z-index: 6; background: #eef2f7; box-shadow: inset 0 -1px 0 var(--border);
}
.dark-mode #studyGroupListCard .study-group-table thead th { background: #202b40; }
#studyGroupListCard .study-group-table th:nth-child(1),
#studyGroupListCard .study-group-table th:nth-child(2) { width: 48px; min-width: 48px; }
#studyGroupListCard .study-group-table th:nth-child(3) { min-width: 180px; }
#studyGroupListCard .study-group-table th:nth-child(4) { min-width: 160px; }
#studyGroupListCard .study-group-table th:nth-child(5) { min-width: 120px; }
#studyGroupListCard .study-group-table th:nth-child(6) { min-width: 180px; }
#studyGroupListCard .study-group-table th:nth-child(7),
#studyGroupListCard .study-group-table th:nth-child(8),
#studyGroupListCard .study-group-table th:nth-child(9) { min-width: 115px; }
#studyGroupListCard .study-group-table th:nth-child(10) { min-width: 92px; }
#studyGroupListCard .study-group-table thead th:nth-child(4) { text-align: left; }
#studyGroupListCard .study-group-table thead th:nth-child(4) .school-header-cell { justify-content: flex-start; }
#studyGroupListCard .study-group-table tbody td:nth-child(4) { text-align: left !important; padding-left: 12px; }
.study-group-row-checkbox,
#selectAllStudyGroupsCheckbox { width: 16px; height: 16px; margin: 0; accent-color: var(--primary); }
.study-group-actions { flex-wrap: nowrap; justify-content: center; gap: 8px; min-width: 0; }
#studyGroupListCard .study-group-actions .btn { flex: 0 0 34px; width: 34px; height: 32px; min-width: 34px; padding: 0; margin: 0; justify-content: center; }
#studyGroupListCard .study-group-actions .btn-primary,
#studyGroupListCard .study-group-actions .btn-danger { border: 1px solid transparent; box-shadow: 0 1px 2px rgba(15,23,42,0.05); }
#studyGroupListCard .study-group-actions .btn-primary { color: #104775; background: rgba(20,91,150,0.09); border-color: rgba(20,91,150,0.2); }
#studyGroupListCard .study-group-actions .btn-primary:hover { color: #104775; background: rgba(20,91,150,0.16); border-color: rgba(20,91,150,0.32); filter: none; }
#studyGroupListCard .study-group-actions .btn-danger { color: #9a2931; background: rgba(180,35,44,0.08); border-color: rgba(180,35,44,0.18); }
#studyGroupListCard .study-group-actions .btn-danger:hover { color: #8c2029; background: rgba(180,35,44,0.14); border-color: rgba(180,35,44,0.3); filter: none; }
.dark-mode #studyGroupListCard .study-group-actions .btn-primary { color: #b8d9ff; background: rgba(70,140,200,0.18); border-color: rgba(120,175,225,0.3); }
.dark-mode #studyGroupListCard .study-group-actions .btn-primary:hover { background: rgba(70,140,200,0.28); }
.dark-mode #studyGroupListCard .study-group-actions .btn-danger { color: #ffb9b9; background: rgba(230,90,96,0.16); border-color: rgba(230,110,116,0.3); }
.dark-mode #studyGroupListCard .study-group-actions .btn-danger:hover { background: rgba(230,90,96,0.25); }
.study-group-type-badge { display: inline-flex; align-items: center; min-height: 25px; padding: 4px 9px; border-radius: 999px; font-size: 12px; font-weight: 700; white-space: nowrap; }
.study-group-type-badge.is-exam { color: #7b4a00; background: rgba(245, 158, 11, 0.14); }
.study-group-type-badge.is-remedial { color: #14532d; background: rgba(34, 197, 94, 0.13); }
.dark-mode .study-group-type-badge.is-exam { color: #ffd58a; background: rgba(245, 158, 11, 0.2); }
.dark-mode .study-group-type-badge.is-remedial { color: #a7f3c0; background: rgba(34, 197, 94, 0.18); }
.study-group-column-menu .study-group-filter-select {
  width: 100%; padding: 8px 10px; border-radius: 8px; border: 1px solid rgba(148,163,184,0.52); font-size: 13px; font-weight: 600;
  background: rgba(255,255,255,0.88); color: var(--text); opacity: 0; translate: 0 -4px;
  transition: opacity 0.16s ease, translate 0.16s ease;
}
.study-group-column-menu.open .study-group-filter-select { opacity: 1; translate: 0 0; }
.dark-mode .study-group-column-menu .study-group-filter-select { border-color: rgba(148,163,184,0.32); background: rgba(16, 27, 45, 0.9); }
.study-group-column-menu.open > :nth-child(2) { transition-delay: 0.02s; }
.study-group-column-menu.open > :nth-child(3) { transition-delay: 0.04s; }
.study-group-column-menu.open > :nth-child(4) { transition-delay: 0.06s; }
.study-group-column-menu.open > :nth-child(5) { transition-delay: 0.08s; }
.study-group-column-menu.open > :nth-child(6) { transition-delay: 0.1s; }

@media (max-width: 1100px) {
  .study-group-list-sticky-top .student-toolbar-row { grid-template-columns: 1fr; }
  .study-group-toolbar-controls { grid-template-columns: minmax(180px, 1fr) repeat(2, minmax(130px, 0.8fr)) auto; }
  .study-group-subject-panel { width: max(100%, min(360px, calc(100vw - 24px))); }
}
@media (min-width: 601px) and (max-width: 768px) {
  .study-group-roster-tools { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .study-group-roster-trigger { grid-column: 1 / -1; }
}
.mobile-row-context { display: none; }
.mobile-action-icon { display: none; }
.student-toolbar-actions { display: contents; }

@media (max-width: 600px) {
  .study-group-form-grid { grid-template-columns: 1fr; }
  .study-group-roster-tools { grid-template-columns: 1fr; }
  .study-group-toolbar-controls { grid-template-columns: 1fr; width: 100%; }
  .study-group-list-sticky-top .student-toolbar-row { align-items: stretch; }
  #studyGroupListSummary { width: 100%; justify-content: space-between; }
  .study-group-roster { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .study-group-roster-heading { flex-wrap: wrap; }
  .study-group-selected-count { float: none; }
}
@media (min-width: 601px) and (max-width: 900px) {
  .study-group-form-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
.chart-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(400px, 1fr)); gap: 20px; }
.chart-container {
  position: relative; height: 300px; padding: 14px 14px 8px;
  background: linear-gradient(180deg, rgba(20, 91, 150, 0.02), rgba(255,255,255,0.4));
  border: 1px solid rgba(20, 91, 150, 0.08); border-radius: 14px; box-shadow: inset 0 1px 0 rgba(255,255,255,0.6), 0 12px 24px rgba(15, 23, 42, 0.04);
}
.dark-mode .chart-container {
  background: linear-gradient(180deg, rgba(33, 150, 243, 0.04), rgba(22, 33, 62, 0.1));
  border-color: rgba(148, 163, 184, 0.18);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.04), 0 12px 24px rgba(0,0,0,0.18);
}
.record-link-bar {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  padding: 10px 12px; margin: 0 0 16px; border: 1px solid rgba(33,150,243,0.25);
  border-radius: 6px; background: rgba(33,150,243,0.06); font-size: 13px;
}
.record-link-bar > span { color: var(--text-light); font-weight: 600; }
.record-breadcrumb { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; flex: 1 1 280px; min-width: 0; }
.record-link-bar .record-breadcrumb a {
  padding: 4px 7px; margin: -4px -7px; border-radius: 4px;
  color: var(--primary-dark); overflow-wrap: anywhere; text-decoration: none;
  cursor: pointer; transition: background-color 0.15s ease, color 0.15s ease;
}
.record-link-bar .record-breadcrumb a:hover {
  color: var(--primary); background-color: rgba(33,150,243,0.12); text-decoration: none;
}
.record-link-bar .record-breadcrumb a:focus-visible {
  outline: 2px solid var(--primary); outline-offset: 2px;
}
.record-breadcrumb-separator { color: var(--text-light); }
.record-link-bar .btn { flex: 0 0 auto; }
.selected-filter-link,
.student-record-link { color: var(--primary-dark); text-decoration: none; }
.selected-filter-link:hover,
.student-record-link:hover { text-decoration: none; }
.school-table a[href] {
  padding: 1px 3px; margin: -1px -3px; border-radius: 3px;
  transition: color 0.15s ease, background-color 0.15s ease;
}
.school-table a[href]:hover {
  color: var(--primary) !important; background-color: rgba(33,150,243,0.1);
}
.school-table a[href]:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; }
.stats-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 16px; margin-bottom: 24px; }
.stat-card {
  background: linear-gradient(135deg, rgba(20,91,150,0.03) 0%, rgba(255,255,255,0.96) 100%);
  border-radius: var(--radius); padding: 20px;
  border: 1px solid rgba(20,91,150,0.1); box-shadow: 0 10px 22px rgba(15,23,42,0.05); display: flex; align-items: center; gap: 16px;
  border-left: 4px solid var(--primary);
}
.stat-icon {
  width: 48px; height: 48px; border-radius: 12px; display: flex; align-items: center; justify-content: center;
  font-size: 22px; background: linear-gradient(135deg, rgba(20,91,150,0.12), rgba(20,91,150,0.05)); color: var(--primary);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.8);
}
.stat-info h3 { font-size: 28px; font-weight: 700; color: var(--text); }
.stat-info p { font-size: 13px; color: var(--text-light); margin-top: 2px; }
.form-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 16px; }
.form-group { display: flex; flex-direction: column; gap: 6px; }
.form-group label { font-size: 13px; font-weight: 600; color: var(--text-light); text-transform: uppercase; letter-spacing: 0.06em; }
@media (min-width: 1600px) {
  .header {
    margin-bottom: 28px;
    padding-bottom: 14px;
  }
  .header h1 {
    font-size: 32px;
  }
  .header-actions .btn {
    min-height: 44px;
    padding: 10px 18px;
    font-size: 14px;
  }
  .stats-grid {
    grid-template-columns: repeat(4, minmax(220px, 1fr));
    gap: 20px;
    margin-bottom: 28px;
  }
  .stat-card {
    min-height: 120px;
    padding: 22px 22px 20px;
    gap: 18px;
  }
  .stat-icon {
    width: 52px;
    height: 52px;
    font-size: 24px;
  }
  .stat-info h3 {
    font-size: 30px;
  }
  .chart-grid {
    grid-template-columns: repeat(2, minmax(420px, 1fr));
    gap: 20px;
  }
  .chart-container {
    min-height: 330px;
    height: 330px;
  }
  .card {
    padding: 24px 24px 20px;
  }
  .card-title {
    font-size: 19px;
    margin-bottom: 18px;
  }
  .school-table th {
    font-size: 12px;
    padding: 8px 6px;
  }
  .school-table td {
    font-size: 14px;
    padding: 12px 8px;
  }
  input, select, textarea {
    min-height: 42px;
    font-size: 14px;
  }
}
.timetable-reference-layout { display: grid; grid-template-columns: minmax(220px, 320px) minmax(0, 1fr); gap: 16px; align-items: start; }
.timetable-reference-box { background: rgba(88, 166, 255, 0.08); border: 1px solid rgba(88, 166, 255, 0.25); border-radius: 12px; padding: 14px; }
.timetable-reference-box strong { display: block; margin-bottom: 10px; font-size: 14px; }
.timetable-reference-row { display: grid; grid-template-columns: 105px 1fr; gap: 8px; padding: 5px 0; border-bottom: 1px solid rgba(88, 166, 255, 0.12); font-size: 12px; }
.timetable-reference-row:last-child { border-bottom: none; }
.timetable-reference-row span:first-child { font-weight: 700; color: var(--text); }
.timetable-entry-form { align-items: end; }
.timetable-note-field { grid-column: span 2; }
.timetable-form-submit { display: flex; align-items: end; }
input, select, textarea {
  min-height: 40px; padding: 10px 14px; border: 1px solid rgba(148,163,184,0.6); border-radius: 10px;
  font-size: 14px; background: linear-gradient(180deg, rgba(255,255,255,0.96), rgba(246,248,251,0.92)); color: var(--text);
  transition: color 220ms ease, background-color 220ms ease, border-color 220ms ease, box-shadow 220ms ease; font-family: inherit; box-shadow: inset 0 1px 2px rgba(15,23,42,0.02);
}
input:focus, select:focus, textarea:focus { outline: none; border-color: var(--primary); box-shadow: 0 0 0 3px rgba(33,150,243,0.1), inset 0 1px 2px rgba(15,23,42,0.02); }
.form-hint { margin: 8px 0 0; color: var(--text-light); font-size: 13px; line-height: 1.5; }
input:not([type="hidden"]):not([type="file"]):not([type="checkbox"]):not([type="radio"]):not([readonly]):not(:disabled):not(:focus):hover,
select:not(:disabled):not(:focus):hover,
textarea:not(:disabled):not(:focus):hover { border-color: rgba(20,91,150,0.62); background: rgba(255,255,255,0.98); }
input[type="checkbox"]:not(:disabled):hover,
input[type="radio"]:not(:disabled):hover { cursor: pointer; filter: drop-shadow(0 0 2px rgba(33,150,243,0.65)); }
.dark-mode input, .dark-mode select, .dark-mode textarea { border-color: rgba(148,163,184,0.38); background: linear-gradient(180deg, rgba(16,27,45,0.9), rgba(22,33,62,0.92)); }
.dark-mode .stat-card {
  background: linear-gradient(135deg, rgba(33,150,243,0.06) 0%, rgba(22,33,62,0.96) 100%);
  border-color: rgba(148,163,184,0.12);
  box-shadow: 0 12px 24px rgba(0,0,0,0.18);
}
.dark-mode .stat-icon {
  background: linear-gradient(135deg, rgba(33,150,243,0.18), rgba(33,150,243,0.08));
}
.table-wrap { overflow: visible; border-radius: 8px; }
table { width: 100%; border-collapse: collapse; font-size: 14px; }
.school-table { table-layout: fixed; border-collapse: separate; border-spacing: 0; }
.school-table th,
.school-table td {
  padding: 10px 8px; text-align: center; border-bottom: 1px solid #eee;
  text-overflow: ellipsis; white-space: normal; word-break: break-word; vertical-align: middle;
}
.school-table th {
  background: linear-gradient(180deg, #f6f8fb 0%, #eef2f7 100%);
  color: #26354a; border-bottom-color: var(--border); font-weight: 700; text-transform: uppercase; font-size: 11.5px; letter-spacing: 0.08em;
  position: relative; overflow: visible; height: 48px; padding: 6px 4px; text-align: center !important; white-space: nowrap;
}
.school-table thead th { overflow: visible; }
.school-table th .school-header-cell { height: 100%; min-width: 0; display: flex; align-items: center; justify-content: center; }
.school-table th .school-header-static,
.school-table th .checkbox-header-cell,
.school-table th .school-header-cell > input {
  display: inline-flex; align-items: center; justify-content: center; width: 100%; min-height: 34px;
}
.school-table th .school-header-static {
  padding: 6px 8px; border: 1px solid rgba(52,64,84,0.12); border-radius: 8px;
  background: rgba(255,255,255,0.82); color: var(--text); font-weight: 700; letter-spacing: 0.05em; text-transform: uppercase;
  box-shadow: 0 1px 2px rgba(15,23,42,0.04);
}
.dark-mode .school-table th .school-header-static { background: rgba(255,255,255,0.04); border-color: rgba(255,255,255,0.14); box-shadow: none; }
.school-table th .checkbox-header-cell {
  padding: 0; min-height: 34px;
}
.school-table th .checkbox-header-cell input {
  width: 18px; height: 18px; margin: 0 auto; accent-color: var(--primary);
}
.school-table th .school-sort-button { min-width: 0; min-height: 34px; padding: 4px 5px; gap: 4px; white-space: nowrap; line-height: 1.2; overflow: hidden; text-overflow: ellipsis; }
.school-table td { font-size: 13px; }
.school-table .record-entity-link { color: inherit; text-decoration: none; }
.school-table .record-entity-link:hover { color: var(--primary-dark); text-decoration: none; }
.dark-mode th, .dark-mode td { border-bottom-color: #354258; }
.dark-mode .school-table th { background: #202b40; color: #e0e0e0; border-bottom-color: #354258; }
tr:hover { background: rgba(33,150,243,0.03); }
.dark-mode tr:hover { background: rgba(255,255,255,0.03); }
.badge {
  padding: 5px 10px; border-radius: 999px; font-size: 12px; font-weight: 700; letter-spacing: 0.02em;
  display: inline-flex; align-items: center; justify-content: center; line-height: 1.3; border: 1px solid transparent;
}
.school-table .badge { min-height: 26px; max-width: 100%; padding: 4px 8px; white-space: nowrap; }
.badge-success { background: var(--success-soft); color: var(--success); border-color: rgba(34,107,77,0.14); }
.badge-danger { background: var(--danger-soft); color: var(--danger); border-color: rgba(180,35,44,0.14); }
.badge-warning { background: var(--warning-soft); color: #9a6700; border-color: rgba(230,168,23,0.16); }
.badge-info { background: var(--info-soft); color: var(--primary-dark); border-color: rgba(20,91,150,0.14); }
.dark-mode .badge-success { background: rgba(34,107,77,0.18); border-color: rgba(118,208,167,0.18); color: #98d9b8; }
.dark-mode .badge-danger { background: rgba(180,35,44,0.2); border-color: rgba(255,147,155,0.18); color: #ffb9b9; }
.dark-mode .badge-warning { background: rgba(230,168,23,0.18); border-color: rgba(245,201,98,0.18); color: #f5d27a; }
.dark-mode .badge-info { background: rgba(20,91,150,0.18); border-color: rgba(146,191,255,0.18); color: #b8d9ff; }
.student-grade { display: inline-flex; min-width: 24px; justify-content: center; padding: 3px 7px; border-radius: 999px; font-size: 12px; font-weight: 700; }
.student-grade-A { background: rgba(46,125,50,0.15); color: #2e7d32; }
.student-grade-B { background: rgba(25,118,210,0.15); color: #1976d2; }
.student-grade-C { background: rgba(249,168,37,0.18); color: #a66d00; }
.student-grade-D { background: rgba(211,47,47,0.15); color: #c62828; }
.student-grade-none { background: rgba(158,158,158,0.14); color: #616161; }
.student-grade-picker { position: relative; z-index: auto; display: inline-block; width: 100%; max-width: 132px; margin-inline: auto; }
.student-grade-picker.is-open { z-index: auto; }
.student-grade-select { width: 100%; min-width: 0; min-height: 32px; padding: 5px 7px; border: 1px solid #d6dfeb; border-radius: 8px; display: inline-flex; align-items: center; justify-content: center; gap: 6px; font: inherit; font-size: 12px; font-weight: 700; line-height: 1.2; cursor: pointer; box-shadow: 0 2px 8px rgba(15, 23, 42, 0.04); transition: border-color 0.18s ease, box-shadow 0.18s ease, transform 0.18s ease; }
.student-grade-select:hover { transform: translateY(-1px); }
.student-grade-select:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; }
.student-grade-select.grade-A { color: #226b4d; background: rgba(34,107,77,0.1); border-color: rgba(34,107,77,0.28); }
.student-grade-select.grade-B { color: #145b96; background: rgba(20,91,150,0.09); border-color: rgba(20,91,150,0.24); }
.student-grade-select.grade-C { color: #835500; background: #fff3d5; border-color: #e8c875; }
.student-grade-select.grade-D { color: #a12c35; background: #fcebec; border-color: #e6b8bb; }
.student-grade-select.grade-none { color: #566274; background: #eef1f5; border-color: #d4dbe4; }
.student-gender-select.gender-male { color: #145b96; background: rgba(20,91,150,0.1); border-color: rgba(20,91,150,0.28); }
.student-gender-select.gender-female { color: #9b3f69; background: rgba(155,63,105,0.1); border-color: rgba(155,63,105,0.28); }
.student-gender-select.gender-other { color: #246b62; background: rgba(36,107,98,0.1); border-color: rgba(36,107,98,0.28); }
.student-gender-select.gender-unset { color: #566274; background: #eef1f5; border-color: #d4dbe4; }
.student-gender-select:hover { filter: brightness(0.97); }
.student-grade-mark { width: 20px; height: 20px; flex: 0 0 20px; display: inline-flex; align-items: center; justify-content: center; border-radius: 6px; background: rgba(97,97,97,0.12); color: #616161; font-size: 11px; font-weight: 800; }
.student-gender-mark { border-radius: 50%; }
.student-gender-mark.gender-male { color: #145b96; background: rgba(20,91,150,0.14); }
.student-gender-mark.gender-female { color: #9b3f69; background: rgba(155,63,105,0.14); }
.student-gender-mark.gender-other { color: #246b62; background: rgba(36,107,98,0.14); }
.student-gender-mark.gender-unset { color: #566274; background: #e8edf3; }
.student-grade-select.grade-A .student-grade-mark, .student-grade-mark.grade-A { color: #226b4d; background: rgba(34,107,77,0.18); }
.student-grade-select.grade-B .student-grade-mark, .student-grade-mark.grade-B { color: #145b96; background: rgba(20,91,150,0.16); }
.student-grade-select.grade-C .student-grade-mark, .student-grade-mark.grade-C { color: #835500; background: rgba(230,168,23,0.22); }
.student-grade-select.grade-D .student-grade-mark, .student-grade-mark.grade-D { color: #a12c35; background: rgba(180,35,44,0.13); }
.student-grade-label { min-width: 0; flex: 1 1 auto; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; text-align: center; }
.student-grade-chevron { flex: 0 0 auto; font-size: 11px; transition: transform 0.18s ease; }
.student-grade-picker.is-open .student-grade-chevron { transform: rotate(180deg); }
.student-grade-menu { position: absolute; top: calc(100% + 6px); left: 50%; z-index: 100; width: 188px; margin-left: -94px; max-height: 0; padding: 0 4px; overflow: hidden; border: 1px solid #d2dae4; border-width: 0; border-radius: 8px; background: var(--card); box-shadow: 0 10px 24px rgba(15,23,42,0.16); opacity: 0; visibility: hidden; pointer-events: none; transform: translateY(-5px) scale(0.99); transform-origin: top center; transition: opacity 0.16s ease, transform 0.16s ease, max-height 0.16s ease, padding 0.16s ease, border-width 0.16s ease, visibility 0s linear 0.16s; }
.student-grade-menu.student-gender-menu { width: 128px; margin-left: -64px; }
.student-grade-picker.is-open .student-grade-menu { max-height: 220px; padding: 4px; overflow: visible; border-width: 1px; opacity: 1; visibility: visible; pointer-events: auto; transform: translateY(0) scale(1); transition: opacity 0.16s ease, transform 0.16s ease, max-height 0.16s ease, padding 0.16s ease, border-width 0.16s ease, visibility 0s; }
.student-grade-picker.opens-above .student-grade-menu { top: auto; bottom: calc(100% + 6px); transform: translateY(6px) scale(0.98); transform-origin: bottom center; }
.student-grade-picker.opens-above.is-open .student-grade-menu { transform: translateY(0) scale(1); }
.student-grade-menu.is-floating { position: fixed; z-index: 10000; margin-left: 0; transform: translateY(-5px) scale(0.99); }
.student-grade-picker.is-open .student-grade-menu.is-floating { transform: translateY(0) scale(1); }
.student-grade-picker.opens-above .student-grade-menu.is-floating { transform: translateY(6px) scale(0.98); transform-origin: bottom center; }
.student-grade-picker.opens-above.is-open .student-grade-menu.is-floating { transform: translateY(0) scale(1); }
.student-grade-option { width: 100%; min-height: 34px; padding: 4px 6px; display: flex; align-items: center; gap: 7px; border: 0; border-radius: 6px; background: transparent; color: var(--text); text-align: left; cursor: pointer; transition: background-color 0.14s ease; }
.student-grade-option:hover, .student-grade-option:focus-visible { outline: none; background: rgba(33,150,243,0.08); }
.student-grade-option[aria-selected="true"] { background: rgba(33,150,243,0.08); }
.student-grade-option-copy { min-width: 0; flex: 1; display: grid; gap: 2px; }
.student-grade-option-copy strong { font-size: 11px; line-height: 1.2; }
.student-grade-option-copy small { color: var(--text-light); font-size: 9px; line-height: 1.2; }
.student-grade-check { color: var(--primary); font-size: 13px; opacity: 0; }
.student-grade-option[aria-selected="true"] .student-grade-check { opacity: 1; }
.dark-mode .student-grade-select.grade-A { color: #98d9b8; background: rgba(34,107,77,0.24); border-color: rgba(92,171,132,0.5); }
.dark-mode .student-grade-select.grade-B { color: #9acbff; background: rgba(20,91,150,0.24); border-color: rgba(90,154,211,0.5); }
.dark-mode .student-grade-select.grade-C { color: #f1cc7a; background: rgba(131,85,0,0.26); border-color: rgba(201,157,70,0.52); }
.dark-mode .student-grade-select.grade-D { color: #f0a4a8; background: rgba(161,44,53,0.24); border-color: rgba(207,105,112,0.5); }
.dark-mode .student-grade-select.grade-none { color: #d2d8e0; background: rgba(148,163,184,0.14); border-color: rgba(148,163,184,0.36); }
.dark-mode .student-gender-select { color: #b8d9ff; background: rgba(20,91,150,0.24); border-color: rgba(120,175,225,0.4); }
.dark-mode .student-gender-select.gender-male { color: #9acbff; background: rgba(20,91,150,0.24); border-color: rgba(90,154,211,0.5); }
.dark-mode .student-gender-select.gender-female { color: #f0a9c6; background: rgba(155,63,105,0.24); border-color: rgba(201,113,153,0.5); }
.dark-mode .student-gender-select.gender-other { color: #9dd9cc; background: rgba(36,107,98,0.24); border-color: rgba(93,169,156,0.5); }
.dark-mode .student-gender-select.gender-unset { color: #d2d8e0; background: rgba(148,163,184,0.14); border-color: rgba(148,163,184,0.36); }
.dark-mode .student-grade-mark { color: #d2d8e0; background: rgba(255,255,255,0.1); }
.dark-mode .student-grade-mark.grade-A { color: #98d9b8; background: rgba(34,107,77,0.3); }
.dark-mode .student-grade-mark.grade-B { color: #9acbff; background: rgba(20,91,150,0.3); }
.dark-mode .student-grade-mark.grade-C { color: #f1cc7a; background: rgba(131,85,0,0.32); }
.dark-mode .student-grade-mark.grade-D { color: #f0a4a8; background: rgba(161,44,53,0.3); }
.dark-mode .student-gender-mark.gender-male { color: #9acbff; background: rgba(20,91,150,0.3); }
.dark-mode .student-gender-mark.gender-female { color: #f0a9c6; background: rgba(155,63,105,0.3); }
.dark-mode .student-gender-mark.gender-other { color: #9dd9cc; background: rgba(36,107,98,0.3); }
.dark-mode .student-gender-mark.gender-unset { color: #d2d8e0; background: rgba(148,163,184,0.2); }
.dark-mode .student-grade-option[aria-selected="true"] { background: rgba(20,91,150,0.24); }
.student-gender-option.gender-male[aria-selected="true"] { background: rgba(20,91,150,0.1); }
.student-gender-option.gender-female[aria-selected="true"] { background: rgba(155,63,105,0.1); }
.student-gender-option.gender-other[aria-selected="true"] { background: rgba(36,107,98,0.1); }
.dark-mode .student-gender-option.gender-male[aria-selected="true"] { background: rgba(20,91,150,0.24); }
.dark-mode .student-gender-option.gender-female[aria-selected="true"] { background: rgba(155,63,105,0.24); }
.dark-mode .student-gender-option.gender-other[aria-selected="true"] { background: rgba(36,107,98,0.24); }
.dark-mode .student-grade-menu { border-color: #444; }
@media (prefers-reduced-motion: reduce) { .student-grade-select, .student-grade-chevron, .student-grade-menu, .student-grade-option { transition-duration: 0.01ms; } }
#studentListCard .school-table { width: 100%; min-width: 0; table-layout: fixed; }
#studentListCard .school-table thead th { z-index: 100; }
#studentListCard .school-table th,
#studentListCard .school-table td { min-width: 0; padding: 8px 4px; overflow-wrap: anywhere; }
#studentListCard .school-table th:nth-child(1),
#studentListCard .school-table td:nth-child(1) { width: 52px; }
#studentListCard .school-table th:nth-child(2),
#studentListCard .school-table td:nth-child(2) { width: 56px; }
#studentListCard .school-table th:nth-child(3),
#studentListCard .school-table td:nth-child(3) { width: 110px; }
#studentListCard .school-table th:nth-child(4),
#studentListCard .school-table td:nth-child(4) { width: 170px; }
#studentListCard .school-table th:nth-child(5),
#studentListCard .school-table td:nth-child(5) { width: 170px; }
#studentListCard .school-table th:nth-child(6),
#studentListCard .school-table td:nth-child(6) { width: 110px; }
#studentListCard .school-table th:nth-child(7),
#studentListCard .school-table td:nth-child(7) { width: 120px; }
#studentListCard .school-table th:nth-child(8),
#studentListCard .school-table td:nth-child(8) { width: 130px; }
#studentListCard .school-table th:nth-child(9),
#studentListCard .school-table td:nth-child(9) { width: 110px; }
#studentListCard .school-table th:nth-child(10),
#studentListCard .school-table td:nth-child(10) { width: 120px; }
#studentListCard .school-sort-button { padding: 4px 3px; gap: 3px; font-size: 11px; }
#studentListCard .school-sort-button .sort-indicator { min-width: 14px; width: 14px; height: 14px; font-size: 9px; }
#studentListCard .table-wrap { overflow: visible; }
#studentListCard .student-grade-picker { max-width: 132px; }
#studentListCard .student-grade-select { width: 100%; max-width: 100%; }
#studentListCard .badge { min-width: 0; text-align: center; }
.row-actions { text-align: center !important; }
.row-action-buttons { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-width: 76px; white-space: nowrap; }
.row-action-buttons .btn { flex: 0 0 34px; width: 34px; min-width: 34px; height: 32px; padding: 0; justify-content: center; }
.list-summary { display: inline-flex; align-items: center; min-height: 40px; padding: 8px 13px; margin-bottom: 14px; border: 1px solid var(--border); border-left: 3px solid var(--primary); border-radius: 7px; background: var(--card); color: var(--text-light); font-size: 13px; }
.school-list-toolbar { display: flex; align-items: center; gap: 12px; margin-bottom: 14px; }
.school-list-toolbar .list-summary { margin-bottom: 0; }
.school-list-toolbar .clear-column-filters { min-height: 40px; margin-left: 0; }
.list-summary span { display: inline-flex; align-items: center; gap: 12px; }
.list-summary strong { color: var(--primary-dark); font-size: 13px; font-weight: 600; font-variant-numeric: tabular-nums; }
.student-list-summary { gap: 16px; }
.student-list-summary > span { min-height: 20px; gap: 8px; line-height: 20px; white-space: nowrap; }
.student-list-summary > span + span { padding-left: 16px; border-left: 1px solid var(--border); }
.student-list-summary strong { min-width: 2ch; color: var(--primary-dark); font-size: 13px; font-weight: 600; text-align: right; line-height: 20px; }
.row-action-buttons .btn { width: 34px; min-width: 34px; height: 32px; padding: 0; justify-content: center; }
.search-bar { display: flex; gap: 10px; margin-bottom: 16px; flex-wrap: wrap; }
.search-bar input { flex: 1; min-width: 200px; }
.student-search-bar { display: grid; grid-template-columns: minmax(220px, 1fr) minmax(180px, 220px) minmax(150px, 190px); align-items: center; }
.student-search-bar input, .student-search-bar select { width: 100%; min-width: 0; min-height: 42px; }
.student-list-sticky-top {
  position: sticky; top: 0; z-index: 35; background: rgba(255, 255, 255, 0.96); backdrop-filter: blur(8px);
  padding: 10px 0 8px; border-bottom: 1px solid rgba(216, 224, 233, 0.9); box-shadow: 0 6px 18px rgba(15, 23, 42, 0.03);
}
.dark-mode .student-list-sticky-top { background: rgba(22, 33, 62, 0.96); border-bottom-color: rgba(71, 85, 105, 0.65); }
.student-toolbar-row {
  display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 12px; flex-wrap: wrap;
}
.module-list-sticky-top { padding-top: 10px; }
.module-list-toolbar { margin: 0 0 12px; }
.module-list-toolbar .module-toolbar-controls {
  display: flex; flex: 1 1 520px; min-width: 0; align-items: center; justify-content: flex-end; gap: 10px; flex-wrap: wrap;
}
.module-list-toolbar .module-toolbar-controls > input,
.module-list-toolbar .module-toolbar-controls > select,
.module-list-toolbar .module-toolbar-controls > button { min-height: 42px; }
.module-list-toolbar .module-toolbar-controls > input { flex: 1 1 220px; min-width: 160px; }
.module-list-toolbar .module-toolbar-controls > select { flex: 1 1 170px; min-width: 140px; }
.module-list-toolbar .module-toolbar-controls > .form-group { flex: 1 1 150px; min-width: 130px; margin: 0; }
.module-list-toolbar .module-toolbar-controls > .form-group input,
.module-list-toolbar .module-toolbar-controls > .form-group select { width: 100%; min-width: 0; min-height: 42px; }
.module-list-toolbar .grading-filters {
  display: grid; flex: 1 1 700px; grid-template-columns: repeat(auto-fit, minmax(145px, 1fr)); gap: 10px; margin: 0;
}
.module-list-toolbar .learning-result-filters > input { grid-column: 1 / -1; width: 100%; min-width: 0; }
.module-list-toolbar .grading-filters .grading-search-field { grid-column: 1 / -1; }
.module-list-toolbar .grading-filters .table-filter-actions { align-items: flex-end; margin: 0; }
.module-list-toolbar .grading-filters .table-filter-actions button { min-height: 42px; white-space: nowrap; }
.student-list-summary { margin-bottom: 0; }
.student-toolbar-controls {
  display: grid; grid-template-columns: minmax(220px, 1.4fr) minmax(160px, 0.9fr) minmax(150px, 0.8fr) auto; align-items: center; gap: 10px;
  flex: 1 1 680px; min-width: 0;
}
.student-toolbar-controls input,
.student-toolbar-controls select,
.student-toolbar-controls button { min-height: 42px; }
.student-toolbar-controls button { white-space: nowrap; }
.student-statistics { margin-top: 24px; padding-top: 22px; border-top: 1px solid var(--border); }
.student-stat-heading { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; margin-bottom: 14px; }
.student-stat-eyebrow { color: var(--primary); font-size: 10px; font-weight: 800; letter-spacing: 0.12em; }
.student-stat-heading h3 { margin: 4px 0 0; color: var(--text); font-size: 19px; }
.student-stat-total { display: inline-flex; align-items: baseline; gap: 4px; padding: 7px 11px; border: 1px solid rgba(20,91,150,0.18); border-radius: 7px; color: var(--text-light); background: rgba(20,91,150,0.06); font-size: 12px; line-height: 1.2; white-space: nowrap; }
.student-stat-total strong { color: var(--primary-dark); font-size: 14px; font-weight: 700; line-height: 1.2; }
.student-stat-grid { display: grid; grid-template-columns: minmax(280px, 0.9fr) minmax(320px, 1.1fr); gap: 14px; }
.student-stat-panel { min-width: 0; padding: 17px; border: 1px solid var(--border); border-radius: 9px; background: linear-gradient(135deg, rgba(20,91,150,0.045), rgba(199,106,18,0.035)); }
.student-stat-panel-title { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; margin-bottom: 17px; }
.student-stat-panel-title span { color: var(--text); font-size: 14px; font-weight: 700; }
.student-stat-panel-title small { color: var(--text-light); font-size: 11px; }
.student-stat-gender-content { display: flex; align-items: center; justify-content: center; gap: clamp(20px, 5vw, 46px); min-height: 148px; }
.student-stat-donut { display: grid; flex: 0 0 126px; place-items: center; width: 126px; height: 126px; border-radius: 50%; }
.student-stat-donut::before { content: ""; grid-area: 1 / 1; width: 86px; height: 86px; border-radius: 50%; background: var(--card); }
.student-stat-donut > div { z-index: 1; grid-area: 1 / 1; text-align: center; }
.student-stat-donut strong { display: block; color: var(--text); font-size: 22px; line-height: 1.1; }
.student-stat-donut span { color: var(--text-light); font-size: 10px; }
.student-stat-legend { display: grid; gap: 10px; min-width: 130px; }
.student-stat-legend div { display: grid; grid-template-columns: 9px minmax(62px, 1fr) auto auto; align-items: center; gap: 7px; color: var(--text-light); font-size: 12px; }
.student-stat-dot { display: inline-block; width: 8px; height: 8px; border-radius: 50%; }
.student-stat-legend strong { color: var(--text); font-size: 12px; }
.student-stat-legend small { min-width: 20px; color: var(--text-light); text-align: right; }
.student-stat-grade-panel { display: flex; flex-direction: column; justify-content: center; }
.student-stat-grade-row + .student-stat-grade-row { margin-top: 12px; }
.student-stat-grade-label { display: grid; grid-template-columns: 9px minmax(110px, 1fr) 30px 38px; align-items: center; gap: 8px; color: var(--text-light); font-size: 12px; }
.student-stat-grade-label strong { color: var(--text); text-align: right; }
.student-stat-grade-label em { color: var(--text); font-size: 11px; font-style: normal; font-weight: 700; text-align: right; }
.student-stat-progress { height: 7px; margin-top: 5px; overflow: hidden; border-radius: 99px; background: rgba(148,163,184,0.18); }
.student-stat-progress span { display: block; height: 100%; min-width: 0; border-radius: inherit; transition: width 0.25s ease; }
.dark-mode .student-stat-panel { background: linear-gradient(135deg, rgba(70,140,200,0.1), rgba(199,106,18,0.08)); }
.dark-mode .student-stat-total { background: rgba(70,140,200,0.14); border-color: rgba(120,175,225,0.25); }
.dark-mode .student-stat-donut::before { background: var(--card); }
.student-table-scroll {
  position: relative; max-height: min(68vh, 620px); overflow: auto; border: 1px solid rgba(216, 224, 233, 0.8); border-radius: 8px; background: var(--card);
}
.student-table-scroll::-webkit-scrollbar { width: 10px; height: 10px; }
.student-table-scroll::-webkit-scrollbar-thumb { background: rgba(20, 91, 150, 0.4); border-radius: 999px; }
.student-table-scroll::-webkit-scrollbar-track { background: rgba(148, 163, 184, 0.1); }
.student-pagination {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 12px;
  color: var(--text-light);
  font-size: 13px;
}
.student-pagination select { min-height: 34px; padding: 4px 8px; border: 1px solid var(--border); border-radius: 8px; color: var(--text); background: var(--card); }
.student-pagination button { min-height: 34px; }
#studentListCard .school-table thead th {
  position: sticky; top: 0; z-index: 6; background: #eef2f7; box-shadow: inset 0 -1px 0 var(--border);
}
.dark-mode #studentListCard .school-table thead th { background: #202b40; }
.tabs { display: flex; gap: 4px; border-bottom: 2px solid #e0e0e0; margin-bottom: 20px; }
.dark-mode .tabs { border-bottom-color: #333; }
.tab {
  padding: 12px 20px; cursor: pointer; font-weight: 600; font-size: 14px;
  border-bottom: 3px solid transparent; transition: all 0.2s; color: var(--text-light);
}
.tab:hover { color: var(--primary); }
.tab.active { color: var(--primary); border-bottom-color: var(--primary); }
.modal-overlay {
  position: fixed; inset: 0; background: rgba(15, 23, 42, 0.52); backdrop-filter: blur(2px); z-index: 1000;
  display: none; align-items: center; justify-content: center; padding: 20px;
  pointer-events: none;
}
.modal-overlay.show {
  display: flex;
  pointer-events: auto;
}
.modal {
  background: var(--card); border: 1px solid rgba(148, 163, 184, 0.22); border-radius: 18px; max-width: 700px; width: 100%;
  max-height: 90vh; overflow-y: auto; box-shadow: 0 22px 60px rgba(15, 23, 42, 0.28);
  animation: modalIn 0.3s ease;
  pointer-events: auto;
}
@keyframes modalIn { from { opacity: 0; transform: scale(0.92) translateY(18px); } to { opacity: 1; transform: scale(1) translateY(0); } }
.modal-header {
  padding: 20px 24px; border-bottom: 1px solid rgba(148, 163, 184, 0.18);
  display: flex; justify-content: space-between; align-items: center; background: linear-gradient(180deg, rgba(20, 91, 150, 0.02), rgba(20, 91, 150, 0.00));
}
.dark-mode .modal-header { border-bottom-color: rgba(148, 163, 184, 0.18); }
.modal-header h3 { font-size: 20px; color: var(--primary); }
.modal-close { font-size: 24px; cursor: pointer; color: var(--text-light); background: none; border: none; border-radius: 8px; width: 34px; height: 34px; display: inline-flex; align-items: center; justify-content: center; }
.modal-close:hover { color: var(--primary); background: rgba(33,150,243,0.1); }
.modal-body { padding: 24px; }
.modal-footer { padding: 16px 24px; border-top: 1px solid rgba(148, 163, 184, 0.18); display: flex; justify-content: flex-end; gap: 10px; background: rgba(20, 91, 150, 0.01); }
.dark-mode .modal-footer { border-top-color: rgba(148, 163, 184, 0.18); }
.attendance-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 8px; }
.att-day {
  aspect-ratio: 1; display: flex; flex-direction: column; align-items: center; justify-content: center;
  border-radius: 10px; font-size: 13px; cursor: pointer; transition: all 0.2s;
  border: 2px solid transparent;
}
.att-day:hover { transform: scale(1.05); }
.att-day.present { background: rgba(76,175,80,0.15); color: var(--success); border-color: var(--success); }
.att-day.absent { background: rgba(244,67,54,0.15); color: var(--danger); border-color: var(--danger); }
.att-day.leave { background: rgba(255,193,7,0.15); color: #b78103; border-color: var(--warning); }
.att-day.weekend { background: rgba(33,150,243,0.08); color: var(--text-light); }
.att-day .day-num { font-size: 18px; font-weight: 700; }
.att-day .day-status { font-size: 10px; font-weight: 600; text-transform: uppercase; }
.attendance-history-table th,
.attendance-history-table td { text-align: center; }
.attendance-history-table th:first-child,
.attendance-history-table td:first-child { text-align: left; }
.attendance-history-table th:first-child,
.attendance-history-table td:first-child { text-align: center; }
.attendance-history-table { min-width: 980px; }
.attendance-history-table th,
.attendance-history-table td { min-width: 34px; white-space: nowrap; }
.attendance-history-table .attendance-history-date-column,
.attendance-history-table .attendance-history-day { width: 42px; min-width: 42px; max-width: 42px; padding-left: 4px; padding-right: 4px; text-align: center; }
.attendance-history-table .attendance-history-summary-column { width: 82px; min-width: 82px; white-space: normal; }
.attendance-history-scroll { max-width: 100%; max-height: min(55vh, 520px); overflow: auto; overscroll-behavior: contain; -webkit-overflow-scrolling: touch; padding-bottom: 8px; }
.attendance-history-scroll::-webkit-scrollbar { height: 10px; }
.attendance-history-scroll::-webkit-scrollbar-track { background: rgba(33,150,243,0.08); border-radius: 10px; }
.attendance-history-scroll::-webkit-scrollbar-thumb { background: rgba(33,150,243,0.45); border-radius: 10px; }
.attendance-history-scroll::-webkit-scrollbar-thumb:hover { background: rgba(33,150,243,0.7); }
.attendance-history-table th:nth-child(1),
.attendance-history-table td:nth-child(1) { width: 52px; min-width: 52px; }
.attendance-history-table th:nth-child(2),
.attendance-history-table td:nth-child(2) { width: 140px; min-width: 140px; }
.attendance-history-table th:nth-child(-n+2),
.attendance-history-table td:nth-child(-n+2) { overflow: hidden; text-overflow: ellipsis; }
.attendance-list-table th:nth-child(1),
.attendance-list-table td:nth-child(1) { width: 6%; }
.attendance-list-table th:nth-child(2),
.attendance-list-table td:nth-child(2) { width: 14%; }
.attendance-list-table th:nth-child(3),
.attendance-list-table td:nth-child(3) { width: 24%; }
.attendance-list-table th:nth-child(4),
.attendance-list-table td:nth-child(4) { width: 20%; }
.attendance-list-table th:nth-child(5),
.attendance-list-table td:nth-child(5) { width: 13%; }
.attendance-list-table th:nth-child(6),
.attendance-list-table td:nth-child(6) { width: 10%; }
.attendance-list-table th:nth-child(7),
.attendance-list-table td:nth-child(7) { width: 13%; }
.attendance-list-heading { display: flex; align-items: center; gap: 5px; }
.attendance-page-header { align-items: flex-start; }
.attendance-page-filters { display: grid; grid-template-columns: minmax(150px, 0.9fr) minmax(180px, 1.1fr) minmax(160px, 1fr) minmax(190px, 1.1fr); align-items: end; gap: 10px; }
.attendance-page-filters > select { width: 100%; min-width: 0; min-height: 42px; }
.attendance-page-filters > .filter-select-picker { min-width: 0; }
.attendance-page-filters .filter-select-trigger,
.attendance-date-filter input { width: 100%; min-width: 0; min-height: 42px; }
.attendance-date-filter input:focus { transform: translateY(-1px); }
.attendance-date-filter { display: grid; gap: 5px; color: var(--text-light); font-size: 12px; font-weight: 600; }
.attendance-stats-grid .stat-card { min-height: 96px; transition: transform 0.18s ease, box-shadow 0.18s ease, border-color 0.18s ease; }
.attendance-stats-grid .stat-card:hover { transform: translateY(-2px); box-shadow: 0 14px 26px rgba(15,23,42,0.1); }
.attendance-stat-present { border-left-color: var(--success); }
.attendance-stat-leave { border-left-color: var(--warning); }
.attendance-stat-absent { border-left-color: var(--danger); }
.attendance-stat-rate { border-left-color: var(--primary); }
.attendance-stat-present .stat-icon { color: var(--success); background: rgba(76,175,80,0.1); }
.attendance-stat-leave .stat-icon { color: var(--warning); background: rgba(255,193,7,0.12); }
.attendance-stat-absent .stat-icon { color: var(--danger); background: rgba(244,67,54,0.1); }
.attendance-stat-rate .stat-icon { color: var(--primary); background: rgba(33,150,243,0.1); }
.dark-mode .attendance-stat-present .stat-icon { background: rgba(76,175,80,0.18); }
.dark-mode .attendance-stat-leave .stat-icon { background: rgba(255,193,7,0.18); }
.dark-mode .attendance-stat-absent .stat-icon { background: rgba(244,67,54,0.18); }
.dark-mode .attendance-stat-rate .stat-icon { background: rgba(33,150,243,0.18); }
.attendance-list-toolbar { align-items: center; flex-wrap: wrap; margin: 0 0 14px; }
.attendance-list-sticky-top { top: 0; z-index: 35; }
.attendance-list-toolbar .list-summary { margin-bottom: 0; }
.attendance-list-filters { display: flex; flex: 1 1 480px; align-items: center; justify-content: flex-end; gap: 8px; min-width: 0; }
.attendance-list-filters input,
.attendance-list-filters select { min-height: 40px; }
.attendance-list-filters input,
.attendance-list-filters select { transition: border-color 0.18s ease, box-shadow 0.18s ease; }
.attendance-list-filters input:focus,
.attendance-list-filters select:focus { outline: none; border-color: var(--primary); box-shadow: 0 0 0 3px rgba(33,150,243,0.16); }
.attendance-list-filters input:focus { transform: translateY(-1px); }
.attendance-list-filters input { flex: 1 1 240px; min-width: 180px; max-width: 360px; }
.attendance-list-filters > .filter-select-picker { flex: 0 1 190px; min-width: 150px; }
.attendance-list-filters > .filter-select-picker .filter-select-trigger { min-height: 40px; }
.attendance-list-scroll { position: relative; max-width: 100%; max-height: min(68vh, 620px); overflow: auto; border: 1px solid rgba(216,224,233,0.8); border-radius: 8px; background: var(--card); }
.attendance-list-scroll::-webkit-scrollbar { width: 10px; height: 10px; }
.attendance-list-scroll::-webkit-scrollbar-thumb { background: rgba(20,91,150,0.4); border-radius: 999px; }
.attendance-list-scroll::-webkit-scrollbar-track { background: rgba(148,163,184,0.1); }
.attendance-list-table { width: 100%; min-width: 760px; }
.attendance-list-table th,
.attendance-list-table td { padding: 9px 8px; }
#attendanceListCard .attendance-list-table thead th { position: sticky; top: 0; z-index: 6; background: #eef2f7; box-shadow: inset 0 -1px 0 var(--border); }
.dark-mode #attendanceListCard .attendance-list-table thead th { background: #202b40; }
.attendance-list-table th .attendance-filter-button { display: inline-flex; align-items: center; justify-content: center; width: 100%; }
.attendance-column-menu {
  position: absolute; top: calc(100% + 10px); left: 0; right: auto;
  width: 176px; min-width: 176px; max-width: min(196px, calc(100vw - 24px)); background: rgba(255,255,255,0.98); color: var(--text);
  border: 1px solid rgba(148,163,184,0.28); border-radius: 12px; box-shadow: 0 20px 40px rgba(15,23,42,0.18);
  max-height: 0; padding: 0 10px; overflow: hidden; border-width: 0;
  opacity: 0; visibility: hidden; pointer-events: none;
  transform: translateY(-5px) scale(0.99); transform-origin: top left;
  transition: opacity 0.16s ease, transform 0.16s ease, max-height 0.16s ease, padding 0.16s ease, border-width 0.16s ease, visibility 0s linear 0.16s;
  z-index: 4000; text-align: left;
}
.attendance-column-menu::before {
  content: ""; position: absolute; top: -7px; left: 22px; width: 12px; height: 12px;
  background: rgba(255,255,255,0.98); border-left: 1px solid rgba(148,163,184,0.28); border-top: 1px solid rgba(148,163,184,0.28);
  transform: rotate(45deg); z-index: -1;
}
.attendance-column-menu.open {
  max-height: 260px; padding: 10px; overflow: visible; border-width: 1px;
  opacity: 1; visibility: visible; pointer-events: auto; transform: translateY(0) scale(1);
  transition: opacity 0.16s ease, transform 0.16s ease, max-height 0.16s ease, padding 0.16s ease, border-width 0.16s ease, visibility 0s;
}
.attendance-column-menu.is-floating { position: fixed; z-index: 5000; right: auto; }
.attendance-column-menu.is-floating.open { transform: translateY(0) scale(1); }
.attendance-column-menu.is-floating.opens-above { transform: translateY(5px) scale(0.98); transform-origin: bottom left; }
.attendance-column-menu.is-floating.opens-above.open { transform: translateY(0) scale(1); }
.attendance-column-menu .menu-option {
  display: block; width: 100%; text-align: left; background: transparent; border: 0; padding: 8px 10px; border-radius: 8px;
  font: inherit; color: var(--text); cursor: pointer; margin-bottom: 4px; opacity: 0; translate: 0 -4px;
  transition: opacity 0.16s ease, translate 0.16s ease, background 0.15s ease, transform 0.15s ease;
}
.attendance-column-menu.open .menu-option,
.attendance-column-menu.open .menu-divider { opacity: 1; translate: 0 0; }
.attendance-column-menu.open > :nth-child(2) { transition-delay: 0.02s; }
.attendance-column-menu.open > :nth-child(3) { transition-delay: 0.04s; }
.attendance-column-menu.open > :nth-child(4) { transition-delay: 0.06s; }
.attendance-column-menu.open > :nth-child(5) { transition-delay: 0.08s; }
.attendance-column-menu .menu-option:hover { background: rgba(33,150,243,0.08); transform: translateX(1px); }
.attendance-column-menu .menu-divider { height: 1px; background: rgba(148,163,184,0.24); margin: 8px 0; opacity: 0; translate: 0 -4px; transition: opacity 0.16s ease, translate 0.16s ease; }
.attendance-column-menu .menu-filter-label,
.attendance-column-menu .attendance-filter-select {
  opacity: 0; translate: 0 -4px; transition: opacity 0.16s ease, translate 0.16s ease;
}
.attendance-column-menu.open .menu-filter-label,
.attendance-column-menu.open .attendance-filter-select { opacity: 1; translate: 0 0; }
.attendance-column-menu .menu-filter-label {
  display: block; color: var(--text-light); font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em; margin-bottom: 6px;
}
.attendance-column-menu .attendance-filter-select {
  width: 100%; padding: 8px 10px; border-radius: 8px; border: 1px solid rgba(148,163,184,0.52); font-size: 13px; font-weight: 600;
  background: rgba(255,255,255,0.88); color: var(--text);
}
.attendance-column-menu .attendance-filter-select:focus { transform: none; }
.dark-mode .attendance-column-menu { background: rgba(22,33,62,0.96); border-color: rgba(148,163,184,0.22); box-shadow: 0 20px 40px rgba(0,0,0,0.28); }
.dark-mode .attendance-column-menu::before { background: rgba(22,33,62,0.96); border-color: rgba(148,163,184,0.22); }
.dark-mode .attendance-column-menu .attendance-filter-select { border-color: rgba(148,163,184,0.32); background: rgba(16,27,45,0.9); }
.dark-mode .attendance-column-menu .menu-option:hover { background: rgba(33,150,243,0.16); }
.dark-mode .attendance-column-menu .menu-divider { background: rgba(148,163,184,0.22); }
.attendance-list-table tbody tr { transition: background-color 0.16s ease; }
.attendance-list-table tbody tr:hover { background: rgba(33,150,243,0.055); }
.attendance-list-table th:nth-child(3),
.attendance-list-table td:nth-child(3),
.attendance-list-table th:nth-child(4),
.attendance-list-table td:nth-child(4) { text-align: left; }
.attendance-list-table .attendance-present-checkbox { width: 18px; height: 18px; margin: 0; accent-color: var(--primary); vertical-align: middle; }
.attendance-present-header { gap: 5px; }
.attendance-select-all-label { display: inline-flex; align-items: center; justify-content: center; min-width: 18px; cursor: pointer; }
.attendance-select-all-label input { width: 16px; height: 16px; margin: 0; accent-color: var(--primary); }
.attendance-select-all-label input:disabled { cursor: not-allowed; }
.attendance-status-badge { min-width: 88px; }
.attendance-empty-state { height: 100px; padding: 24px !important; color: var(--text-light); text-align: center !important; }
.attendance-history-heading { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.attendance-history-heading .header-actions { align-items: center; }
.attendance-history-heading .header-actions > .filter-select-picker { width: auto; min-width: 150px; }
.attendance-history-scope { color: var(--text-light); font-size: 13px; font-weight: 600; }
.attendance-history-table tbody tr { transition: background-color 0.16s ease; }
.attendance-history-table tbody tr:hover { background: rgba(33,150,243,0.055); }
#usersModal .school-table th:nth-child(1),
#usersModal .school-table td:nth-child(1) { width: 22%; }
#usersModal .school-table th:nth-child(2),
#usersModal .school-table td:nth-child(2) { width: 24%; }
#usersModal .school-table th:nth-child(3),
#usersModal .school-table td:nth-child(3) { width: 15%; }
#usersModal .school-table th:nth-child(4),
#usersModal .school-table td:nth-child(4) { width: 20%; }
#usersModal .school-table th:nth-child(5),
#usersModal .school-table td:nth-child(5) { width: 19%; }
.attendance-history-day { font-weight: 700; border-left: 1px solid rgba(0,0,0,0.04); }
.attendance-history-day-present { background: rgba(76,175,80,0.16); color: #2e7d32; }
.attendance-history-day-absent { background: rgba(244,67,54,0.13); color: #c62828; }
.attendance-history-day-leave { background: rgba(255,193,7,0.18); color: #a66d00; }
.attendance-history-day-weekend { background: rgba(33,150,243,0.08); color: var(--text-light); }
.attendance-history-day-unmarked { background: var(--card); color: transparent; }
.attendance-history-day-no-schedule { background: rgba(148,163,184,0.08); color: transparent; }
.attendance-history-total { background: rgba(33,150,243,0.08); border-top: 2px solid var(--primary); }
.attendance-history-total td { color: var(--primary); }
.toast-container { position: fixed; top: 20px; right: 20px; z-index: 2000; display: flex; flex-direction: column; gap: 10px; }
.toast {
  padding: 14px 20px; border: 1px solid transparent; border-radius: 10px; color: var(--text); font-weight: 600;
  box-shadow: 0 8px 24px rgba(25,38,56,0.12); animation: toastIn 0.3s ease;
  display: flex; align-items: center; gap: 10px; min-width: 280px;
}
@keyframes toastIn { from { transform: translateX(100%); opacity: 0; } to { transform: translateX(0); opacity: 1; } }
.toast-success { background: #f0f8f3; border-color: #d8ebdf; color: #286348; }
.toast-error { background: #fff4f4; border-color: #f0d9dc; color: #a33d48; }
.toast-warning { background: #fff8f1; border-color: #f0e1cf; color: #8c5a2b; }
.toast-info { background: #f1f7fc; border-color: #d9e7f3; color: #225b8b; }
.app-dialog-modal {
  max-width: 420px;
  border-color: rgba(20, 91, 150, 0.16);
}
.app-dialog-modal .modal-header {
  border-top: 4px solid var(--primary);
  background: linear-gradient(180deg, rgba(20, 91, 150, 0.08), rgba(20, 91, 150, 0.02));
}
.app-dialog-modal .modal-body p {
  margin: 0; font-size: 15px; line-height: 1.6; color: var(--text);
}
.app-dialog-modal[data-variant="warning"] .modal-header {
  border-top-color: var(--accent);
  background: linear-gradient(180deg, rgba(199, 106, 18, 0.08), rgba(199, 106, 18, 0.015));
}
.app-dialog-modal[data-variant="error"] .modal-header {
  border-top-color: var(--danger);
  background: linear-gradient(180deg, rgba(180, 35, 44, 0.07), rgba(180, 35, 44, 0.012));
}
.app-dialog-modal[data-variant="success"] .modal-header {
  border-top-color: var(--success);
  background: linear-gradient(180deg, rgba(34, 107, 77, 0.07), rgba(34, 107, 77, 0.012));
}
.app-dialog-modal[data-variant="info"] .modal-header {
  border-top-color: var(--primary);
  background: linear-gradient(180deg, rgba(20, 91, 150, 0.07), rgba(20, 91, 150, 0.012));
}
.app-dialog-modal[data-variant="warning"] .modal-header h3 { color: #9a5a20; }
.app-dialog-modal[data-variant="error"] .modal-header h3 { color: var(--danger); }
.app-dialog-modal[data-variant="success"] .modal-header h3 { color: var(--success); }
.app-dialog-modal[data-variant="info"] .modal-header h3 { color: var(--primary); }
.app-dialog-modal [data-dialog-confirm] { box-shadow: none; }
.app-dialog-modal[data-variant="warning"] [data-dialog-confirm] { background: #fbf3e9; border-color: #efdfca; color: #87531f; }
.app-dialog-modal[data-variant="error"] [data-dialog-confirm] { background: #fff1f2; border-color: #efd6da; color: #a43d49; }
.app-dialog-modal[data-variant="success"] [data-dialog-confirm] { background: #eff7f2; border-color: #d7e9de; color: #286348; }
.app-dialog-modal[data-variant="info"] [data-dialog-confirm] { background: #eff6fc; border-color: #d7e5f1; color: #225b8b; }
.dark-mode .app-dialog-modal { border-color: rgba(148, 163, 184, 0.24); }
.dark-mode .toast { box-shadow: 0 8px 24px rgba(0,0,0,0.24); }
.dark-mode .toast-success { background: #1d342b; border-color: #315543; color: #a9d7bb; }
.dark-mode .toast-error { background: #3a252b; border-color: #59323a; color: #efb0b7; }
.dark-mode .toast-warning { background: #382d25; border-color: #594333; color: #e8c29b; }
.dark-mode .toast-info { background: #203247; border-color: #324c68; color: #b1d0ed; }
.dark-mode .app-dialog-modal[data-variant="warning"] .modal-header h3 { color: #e8b98f; }
.dark-mode .app-dialog-modal[data-variant="warning"] [data-dialog-confirm] { background: rgba(199, 106, 18, 0.16); border-color: rgba(232, 185, 143, 0.22); color: #e8b98f; }
.dark-mode .app-dialog-modal[data-variant="error"] [data-dialog-confirm] { background: rgba(180, 35, 44, 0.16); border-color: rgba(239, 176, 183, 0.2); color: #efb0b7; }
.dark-mode .app-dialog-modal[data-variant="success"] [data-dialog-confirm] { background: rgba(34, 107, 77, 0.2); border-color: rgba(169, 215, 187, 0.2); color: #a9d7bb; }
.dark-mode .app-dialog-modal[data-variant="info"] [data-dialog-confirm] { background: rgba(20, 91, 150, 0.2); border-color: rgba(177, 208, 237, 0.2); color: #b1d0ed; }
.mobile-toggle { display: none; }
@media (max-width: 768px) {
  .sidebar { width: 100%; position: relative; height: auto; padding: 16px; }
  .main { margin-left: 0; }
  .stats-grid { grid-template-columns: 1fr; }
  .chart-grid { grid-template-columns: 1fr; }
  .assignment-stats { grid-template-columns: 1fr; gap: 8px; }
  .assignment-stat { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
  .assignment-stat span { margin-top: 0; text-align: right; }
  .grading-filters { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .attendance-grid { grid-template-columns: repeat(7, 1fr); }
  .sidebar { display: none; }
  .sidebar.open { display: flex; position: fixed; z-index: 100; }
  .mobile-toggle { display: block; position: fixed; top: 16px; left: 16px; z-index: 101; }
}
.section { display: none; animation: fadeIn 0.4s ease; }
.section.active { display: block; }
.app-data-loading {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  margin: 0 0 12px;
  padding: 9px 12px;
  border: 1px solid var(--border);
  border-radius: 9px;
  background: var(--card);
  color: var(--text-light);
  font-size: 12px;
}
.app-data-loading[hidden] { display: none !important; }
.app-data-loading-spinner {
  width: 15px;
  height: 15px;
  border: 2px solid var(--border);
  border-top-color: var(--primary);
  border-radius: 50%;
  animation: appDataLoadingSpin 0.75s linear infinite;
}
@keyframes appDataLoadingSpin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) {
  .app-data-loading-spinner { animation: none; border-top-color: var(--border); }
}
@keyframes fadeIn { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } }
.toggle-switch { position: relative; width: 50px; height: 26px; }
.toggle-switch input { opacity: 0; width: 0; height: 0; }
.toggle-slider {
  position: absolute; cursor: pointer; inset: 0; background: #ccc; border-radius: 26px;
  transition: 0.3s;
}
.toggle-switch:hover .toggle-slider { background: #aaa; }
.toggle-switch:hover input:checked + .toggle-slider { background: var(--primary-dark); }
.toggle-slider::before {
  content: ''; position: absolute; height: 20px; width: 20px; left: 3px; bottom: 3px;
  background: white; border-radius: 50%; transition: 0.3s;
}
input:checked + .toggle-slider { background: var(--primary); }
input:checked + .toggle-slider::before { transform: translateX(24px); }
@media print {
  .sidebar, .header, .btn, .modal-overlay, .toast-container { display: none !important; }
  .main { margin-left: 0; }
  .card { box-shadow: none; border: 1px solid #ddd; }
  .weekly-saved-board { overflow: visible !important; }
  .weekly-saved-grid { width: 100% !important; min-width: 0 !important; grid-template-columns: 52px repeat(7, minmax(0, 1fr)) !important; }
  .weekly-saved-cell { grid-template-columns: repeat(var(--lane-count), minmax(0, 1fr)) !important; }
  .weekly-saved-main-info, .weekly-saved-class, .weekly-saved-subject, .weekly-saved-person, .weekly-saved-person-name { min-width: 0; overflow: visible; white-space: normal; overflow-wrap: anywhere; }
}

.student-selection-summary { display: flex; align-items: center; gap: 18px; flex-wrap: wrap; }
#selectedStudentCount { color: var(--primary-dark); font-weight: 600; }
.student-actions { gap: 8px; }
.student-actions .btn { flex: 0 0 34px; margin: 0 !important; min-width: 34px; justify-content: center; }
#studentListCard .student-actions .btn-primary,
#studentListCard .student-actions .btn-danger { border: 1px solid transparent; box-shadow: 0 1px 2px rgba(15,23,42,0.05); }
#studentListCard .student-actions .btn-primary { color: #104775; background: rgba(20,91,150,0.09); border-color: rgba(20,91,150,0.2); }
#studentListCard .student-actions .btn-primary:hover { color: #104775; background: rgba(20,91,150,0.16); border-color: rgba(20,91,150,0.32); filter: none; }
#studentListCard .student-actions .btn-danger { color: #9a2931; background: rgba(180,35,44,0.08); border-color: rgba(180,35,44,0.18); }
#studentListCard .student-actions .btn-danger:hover { color: #8c2029; background: rgba(180,35,44,0.14); border-color: rgba(180,35,44,0.3); filter: none; }
.dark-mode #studentListCard .student-actions .btn-primary { color: #b8d9ff; background: rgba(70,140,200,0.18); border-color: rgba(120,175,225,0.3); }
.dark-mode #studentListCard .student-actions .btn-primary:hover { background: rgba(70,140,200,0.28); }
.dark-mode #studentListCard .student-actions .btn-danger { color: #ffb9b9; background: rgba(230,90,96,0.16); border-color: rgba(230,110,116,0.3); }
.dark-mode #studentListCard .student-actions .btn-danger:hover { background: rgba(230,90,96,0.25); }

#schoolListCard .school-table { table-layout: fixed; }
#schoolListCard .school-table th,
#schoolListCard .school-table td {
  padding: 9px 6px; text-align: center; vertical-align: middle;
  white-space: nowrap; text-overflow: ellipsis;
}
#schoolListCard .school-table thead th {
  height: 48px; font-size: 11px; letter-spacing: 0.02em; overflow: visible;
}
#schoolListCard .school-table td {
  overflow: hidden;
}
#schoolListCard .school-table tbody td {
  font-size: 12.5px; line-height: 1.35;
}
#schoolListCard .school-table th .school-header-cell {
  display: flex; align-items: center; justify-content: center; min-width: 0; width: 100%;
}
#schoolListCard .school-sort-button {
  width: 100%; min-height: 34px; padding: 4px 6px; overflow: hidden; text-overflow: ellipsis;
  white-space: nowrap; line-height: 1.2;
}
#schoolListCard .school-table th:nth-child(1),
#schoolListCard .school-table td:nth-child(1) { width: 52px; }
#schoolListCard .school-table th:nth-child(2),
#schoolListCard .school-table td:nth-child(2) { width: 52px; }
#schoolListCard .school-table th:nth-child(3),
#schoolListCard .school-table td:nth-child(3) { width: 110px; }
#schoolListCard .school-table th:nth-child(4),
#schoolListCard .school-table td:nth-child(4) { width: 200px; }
#schoolListCard .school-table th:nth-child(5),
#schoolListCard .school-table td:nth-child(5) { width: 220px; }
#schoolListCard .school-table th:nth-child(6),
#schoolListCard .school-table td:nth-child(6) { width: 120px; }
#schoolListCard .school-table th:nth-child(7),
#schoolListCard .school-table td:nth-child(7) { width: 100px; }
#schoolListCard .school-table th:nth-child(8),
#schoolListCard .school-table td:nth-child(8) { width: 110px; }
#schoolListCard .school-table th:nth-child(9),
#schoolListCard .school-table td:nth-child(9) { width: 120px; }
#schoolListCard .school-table td a,
#schoolListCard .school-table td .badge,
#schoolListCard .school-table td .row-action-buttons {
  display: inline-flex; align-items: center; max-width: 100%;
}
#schoolListCard .school-table td a {
  width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; display: block;
}
#schoolListCard .school-table td .badge {
  min-height: 26px; padding: 4px 8px; justify-content: center; white-space: nowrap;
}
#schoolListCard .row-action-buttons {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
}
#schoolListCard .row-action-buttons .btn {
  width: 32px; min-width: 32px; height: 32px; padding: 0; justify-content: center;
  border: 1px solid transparent; box-shadow: 0 1px 2px rgba(15,23,42,0.05);
}
#schoolListCard .row-action-buttons .btn-primary,
#classListCard .row-action-buttons .btn-primary {
  color: #104775; background: rgba(20,91,150,0.09); border-color: rgba(20,91,150,0.2);
}
#schoolListCard .row-action-buttons .btn-primary:hover,
#classListCard .row-action-buttons .btn-primary:hover {
  color: #104775; background: rgba(20,91,150,0.16); border-color: rgba(20,91,150,0.32); filter: none;
}
#schoolListCard .row-action-buttons .btn-danger,
#classListCard .row-action-buttons .btn-danger {
  color: #9a2931; background: rgba(180,35,44,0.08); border-color: rgba(180,35,44,0.18);
}
#schoolListCard .row-action-buttons .btn-danger:hover,
#classListCard .row-action-buttons .btn-danger:hover {
  color: #8c2029; background: rgba(180,35,44,0.14); border-color: rgba(180,35,44,0.3); filter: none;
}
.dark-mode #schoolListCard .row-action-buttons .btn-primary,
.dark-mode #classListCard .row-action-buttons .btn-primary { color: #b8d9ff; background: rgba(70,140,200,0.18); border-color: rgba(120,175,225,0.3); }
.dark-mode #schoolListCard .row-action-buttons .btn-primary:hover,
.dark-mode #classListCard .row-action-buttons .btn-primary:hover { background: rgba(70,140,200,0.28); }
.dark-mode #schoolListCard .row-action-buttons .btn-danger,
.dark-mode #classListCard .row-action-buttons .btn-danger { color: #ffb9b9; background: rgba(230,90,96,0.16); border-color: rgba(230,110,116,0.3); }
.dark-mode #schoolListCard .row-action-buttons .btn-danger:hover,
.dark-mode #classListCard .row-action-buttons .btn-danger:hover { background: rgba(230,90,96,0.25); }

.btn-select { background: transparent; color: var(--primary); border: 2px solid var(--primary); }
.btn-select:hover, .btn-select.selected { background: var(--primary); color: #fff; }
tr.student-row-selected { background: rgba(33,150,243,0.12); }
tr.student-row-selected:hover { background: rgba(33,150,243,0.18); }
.dark-mode tr.student-row-selected { background: rgba(33,150,243,0.18); }
.btn:disabled { opacity: 0.48; cursor: not-allowed; transform: none !important; }
.btn:disabled:hover { transform: none !important; }
.student-sort-button,
.school-sort-button {
  width: 100%; padding: 6px 10px; border: 1px solid rgba(52,64,84,0.12); border-radius: 8px;
  background: rgba(255,255,255,0.82); color: inherit;
  font: inherit; font-weight: 700; text-transform: inherit; letter-spacing: inherit;
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  cursor: pointer; white-space: nowrap; text-align: center;
  transition: all 0.2s ease; box-shadow: 0 1px 2px rgba(15,23,42,0.04);
}
.student-sort-button:hover,
.school-sort-button:hover {
  background: #fff; border-color: rgba(33,150,243,0.28);
}
.student-sort-button:focus-visible,
.school-sort-button:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; }
.school-header-static { cursor: default; pointer-events: none; }
.student-sort-button .sort-indicator,
.school-sort-button .sort-indicator {
  min-width: 16px; height: 16px; border-radius: 5px; opacity: 1; font-size: 10px; line-height: 1; color: var(--primary-dark);
  display: inline-flex; align-items: center; justify-content: center;
  background: rgba(33,150,243,0.08); border: 1px solid rgba(33,150,243,0.16);
  transform: translateY(-1px);
}
.student-sort-button.active .sort-indicator,
.school-sort-button.active .sort-indicator { background: rgba(33,150,243,0.14); }
.dark-mode .student-sort-button,
.dark-mode .school-sort-button { background: rgba(255,255,255,0.04); color: inherit; border-color: rgba(255,255,255,0.14); box-shadow: none; }
.dark-mode .student-sort-button:hover,
.dark-mode .school-sort-button:hover { background: rgba(255,255,255,0.1); border-color: rgba(255,255,255,0.24); }
.dark-mode .student-sort-button .sort-indicator,
.dark-mode .school-sort-button .sort-indicator { color: #b8d9ff; background: rgba(33,150,243,0.16); border-color: rgba(255,255,255,0.16); }

.school-header-cell {
  position: relative; display: inline-block; width: 100%; z-index: 20;
}
.school-table thead th {
  position: relative; z-index: 1;
}
.school-column-menu,
.student-column-menu {
  position: absolute; top: calc(100% + 10px); left: 0; right: auto;
  width: 176px; min-width: 176px; max-width: min(196px, calc(100vw - 24px)); background: rgba(255, 255, 255, 0.98); color: var(--text);
  border: 1px solid rgba(148, 163, 184, 0.28); border-radius: 12px; box-shadow: 0 20px 40px rgba(15,23,42,0.18);
  max-height: 0; padding: 0 10px; overflow: hidden; border-width: 0;
  opacity: 0; visibility: hidden; pointer-events: none;
  transform: translateY(-5px) scale(0.99); transform-origin: top left;
  transition: opacity 0.16s ease, transform 0.16s ease, max-height 0.16s ease, padding 0.16s ease, border-width 0.16s ease, visibility 0s linear 0.16s;
  z-index: 4000; text-align: left;
}
.school-column-menu::before,
.student-column-menu::before {
  content: ""; position: absolute; top: -7px; left: 22px; width: 12px; height: 12px;
  background: rgba(255,255,255,0.98); border-left: 1px solid rgba(148,163,184,0.28); border-top: 1px solid rgba(148,163,184,0.28);
  transform: rotate(45deg); z-index: -1;
}
.school-column-menu.open,
.student-column-menu.open {
  max-height: 260px; padding: 10px; overflow: visible; border-width: 1px;
  opacity: 1; visibility: visible; pointer-events: auto; transform: translateY(0) scale(1);
  transition: opacity 0.16s ease, transform 0.16s ease, max-height 0.16s ease, padding 0.16s ease, border-width 0.16s ease, visibility 0s;
}
.student-column-menu.is-floating { position: fixed; z-index: 5000; right: auto; }
.school-column-menu.is-floating { position: fixed; z-index: 5000; right: auto; }
.school-column-menu.is-floating.open { transform: translateY(0) scale(1); }
.school-column-menu.is-floating.opens-above { transform: translateY(5px) scale(0.98); transform-origin: bottom left; }
.school-column-menu.is-floating.opens-above.open { transform: translateY(0) scale(1); }
.student-column-menu.is-floating.open { transform: translateY(0) scale(1); }
.student-column-menu.is-floating.opens-above { transform: translateY(5px) scale(0.98); transform-origin: bottom left; }
.student-column-menu.is-floating.opens-above.open { transform: translateY(0) scale(1); }
.school-column-menu .menu-option,
.student-column-menu .menu-option {
  display: block; width: 100%; text-align: left; background: transparent; border: 0; padding: 8px 10px; border-radius: 8px;
  font: inherit; color: var(--text); cursor: pointer; margin-bottom: 4px; opacity: 0; translate: 0 -4px;
  transition: opacity 0.16s ease, translate 0.16s ease, background 0.15s ease, transform 0.15s ease;
}
.school-column-menu .menu-divider,
.student-column-menu .menu-divider,
.school-column-menu .menu-filter-label,
.student-column-menu .menu-filter-label,
.school-column-menu .school-filter-select,
.student-column-menu .student-filter-select {
  opacity: 0; translate: 0 -4px; transition: opacity 0.16s ease, translate 0.16s ease;
}
.school-column-menu.open .menu-option,
.student-column-menu.open .menu-option,
.school-column-menu.open .menu-divider,
.student-column-menu.open .menu-divider,
.school-column-menu.open .menu-filter-label,
.student-column-menu.open .menu-filter-label,
.school-column-menu.open .school-filter-select,
.student-column-menu.open .student-filter-select { opacity: 1; translate: 0 0; }
.school-column-menu.open > :nth-child(2), .student-column-menu.open > :nth-child(2) { transition-delay: 0.02s; }
.school-column-menu.open > :nth-child(3), .student-column-menu.open > :nth-child(3) { transition-delay: 0.04s; }
.school-column-menu.open > :nth-child(4), .student-column-menu.open > :nth-child(4) { transition-delay: 0.06s; }
.school-column-menu.open > :nth-child(5), .student-column-menu.open > :nth-child(5) { transition-delay: 0.08s; }
.school-column-menu.open > :nth-child(6), .student-column-menu.open > :nth-child(6) { transition-delay: 0.1s; }
.school-column-menu .menu-option:hover,
.student-column-menu .menu-option:hover { background: rgba(33,150,243,0.08); transform: translateX(1px); }
.school-column-menu .menu-divider,
.student-column-menu .menu-divider { height: 1px; background: rgba(148,163,184,0.24); margin: 8px 0; }
.school-column-menu .menu-filter-label,
.student-column-menu .menu-filter-label {
  display: block; color: var(--text-light); font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em; margin-bottom: 6px;
}
.school-column-menu .school-filter-select,
.student-column-menu .student-filter-select,
.school-column-menu .student-filter-select {
  width: 100%; padding: 8px 10px; border-radius: 8px; border: 1px solid rgba(148,163,184,0.52); font-size: 13px; font-weight: 600;
  background: rgba(255,255,255,0.88); color: var(--text);
}
.dark-mode .school-column-menu,
.dark-mode .student-column-menu { background: rgba(22, 33, 62, 0.96); border-color: rgba(148,163,184,0.22); box-shadow: 0 20px 40px rgba(0,0,0,0.28); }
.dark-mode .school-column-menu::before,
.dark-mode .student-column-menu::before { background: rgba(22, 33, 62, 0.96); border-color: rgba(148,163,184,0.22); }
.dark-mode .school-column-menu .school-filter-select,
.dark-mode .student-column-menu .student-filter-select,
.dark-mode .school-column-menu .student-filter-select { border-color: rgba(148,163,184,0.32); background: rgba(16, 27, 45, 0.9); }
@media (prefers-reduced-motion: reduce) {
  .school-column-menu, .student-column-menu, .attendance-column-menu,
  .school-column-menu *, .student-column-menu *, .attendance-column-menu *,
  #studentListCard .student-toolbar-controls input,
  #studentListCard .student-toolbar-controls select,
  .grading-filters select { transition-duration: 0.01ms !important; transition-delay: 0ms !important; }
  #studentListCard .student-toolbar-controls input:focus,
  #studentListCard .student-toolbar-controls select:focus,
  .grading-filters select:focus { transform: none; }
}
@media (max-width: 768px) {
  #studentListCard .school-table thead th:nth-child(n+6) .student-column-menu { left: auto; right: 0; }
}
.student-profile-modal { max-width: 960px; }
.form-section-title {
  margin: 22px 0 14px; padding-bottom: 8px; border-bottom: 1px solid #e5e7eb;
  color: var(--primary); font-size: 15px; font-weight: 700;
}
.form-section-title:first-child { margin-top: 0; }
.form-span-2 { grid-column: span 2; }
.student-detail-heading { display: flex; justify-content: space-between; align-items: flex-start; gap: 16px; margin-bottom: 24px; }
.student-detail-heading h2 { font-size: 24px; margin-bottom: 4px; }
.student-detail-heading p { color: var(--text-light); }
#studentDetailContent h4 { margin: 22px 0 12px; color: var(--primary); font-size: 15px; }
.student-detail-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px 20px; }
.student-detail-item { padding: 12px 0; border-bottom: 1px solid #e5e7eb; display: flex; flex-direction: column; gap: 5px; min-width: 0; }
.student-detail-item span { color: var(--text-light); font-size: 12px; text-transform: uppercase; }
.student-detail-item strong { overflow-wrap: anywhere; }
.student-grade-cell { display: flex; width: 100%; max-width: 122px; min-width: 0; align-items: center; justify-content: center; gap: 4px; margin: 0 auto; white-space: nowrap; }
#studentListCard .student-grade-cell .student-grade-picker { flex: 1 1 0; width: auto; min-width: 0; max-width: none; margin: 0; }
#studentListCard .student-grade-cell .student-grade-select { width: 100%; min-width: 0; max-width: 100%; min-height: 30px; padding: 4px; gap: 3px; font-size: 11px; }
#studentListCard .student-grade-cell .student-grade-mark { width: 17px; height: 17px; flex-basis: 17px; font-size: 10px; }
#studentListCard .student-grade-cell .student-grade-label { font-size: 10px; }
#studentListCard .student-grade-cell .student-grade-chevron { font-size: 9px; }
.student-grade-recommendation { display: inline-flex; flex: 0 0 auto; align-items: center; justify-content: center; gap: 2px; min-width: 32px; height: 25px; padding: 2px 4px; border-radius: 7px; font-size: 11px; font-weight: 800; line-height: 1; vertical-align: middle; }
.student-grade-recommendation.is-up { color: #16834b; background: rgba(22,131,75,0.12); }
.student-grade-recommendation.is-down { color: #c43c43; background: rgba(196,60,67,0.12); }
.student-grade-recommendation-arrows { display: inline-block; font-size: 15px; line-height: 1; animation: student-grade-arrow-up 1s ease-in-out infinite; }
.student-grade-recommendation.is-down .student-grade-recommendation-arrows { animation-name: student-grade-arrow-down; }
.student-grade-recommendation-letter { font-size: 11px; font-weight: 800; }
@keyframes student-grade-arrow-up {
  0%, 100% { transform: translateY(1px); }
  50% { transform: translateY(-3px); }
}
@keyframes student-grade-arrow-down {
  0%, 100% { transform: translateY(-1px); }
  50% { transform: translateY(3px); }
}
@media (prefers-reduced-motion: reduce) {
  .student-grade-recommendation-arrows { animation: none; }
}
.student-progress-section { margin-top: 24px; padding-top: 4px; border-top: 1px solid var(--border); }
.student-progress-stats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px 18px; }
.student-progress-stats > div { min-width: 0; padding: 10px 0; border-bottom: 1px solid var(--border); }
.student-progress-stats span { display: block; color: var(--text-light); font-size: 12px; }
.student-progress-stats strong { display: block; margin-top: 4px; font-size: 18px; overflow-wrap: anywhere; }
.student-progress-track { height: 8px; margin-top: 14px; overflow: hidden; border-radius: 4px; background: var(--border); }
.student-progress-track span { display: block; height: 100%; border-radius: inherit; background: var(--success); transition: width 0.25s ease; }
.student-progress-caption, .student-progress-empty { margin-top: 8px; color: var(--text-light); font-size: 12px; }
.student-progress-table { width: 100%; margin-top: 14px; }
.student-progress-table small { display: block; margin-top: 3px; color: var(--text-light); }
.student-submit-page { min-height: 100vh; background: var(--bg); }
.student-submit-main { width: min(100% - 32px, 760px); margin: 0 auto; padding: 40px 0; }
.student-submit-panel { padding: 28px; border: 1px solid var(--border); border-radius: 8px; background: var(--card); box-shadow: var(--shadow); }

.teacher-form-card[hidden] { display: none !important; }
.teacher-form-card:not([hidden]) { position: relative; z-index: 100; animation: fadeIn 0.24s ease both; }
.teacher-form-card > .card-title { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.teacher-form { grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: end; gap: 16px; }
.teacher-form-card .teacher-form { grid-template-columns: minmax(86px, 0.55fr) minmax(150px, 1.2fr) minmax(180px, 1.5fr) minmax(130px, 1fr) minmax(150px, 1.1fr) auto; gap: 12px; }
.teacher-form-card .teacher-code-field,
.teacher-form-card .teacher-schools-field { min-width: 0; }
.teacher-form-card .teacher-code-field input { min-width: 0; }
.teacher-form-card .teacher-schools-field { position: relative; grid-column: auto; }
.teacher-form-card .teacher-schools-field.is-open { z-index: 90; }
.teacher-form-card .teacher-form-actions { grid-column: auto; justify-content: flex-end; }
.teacher-form .form-group input { transition: border-color 0.18s ease, box-shadow 0.18s ease; }
.teacher-form .form-group input:focus { border-color: var(--primary); box-shadow: 0 0 0 3px rgba(33,150,243,0.12); }
.teacher-form-actions { grid-column: 1 / -1; display: flex; flex-direction: row; justify-content: flex-end; flex-wrap: nowrap; gap: 8px; padding-top: 4px; white-space: nowrap; }
.teacher-form-actions .btn { min-width: max-content; }
.teacher-schools-field { grid-column: 1 / -1; }
.teacher-school-picker { position: relative; }
.student-approval-card[hidden] { display: none !important; }
.student-approval-heading { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.student-approval-bulk-actions { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.student-approval-bulk-actions label { display: inline-flex; align-items: center; gap: 6px; color: var(--text-light); font-size: 12px; font-weight: 500; }
.student-approval-bulk-actions input { accent-color: var(--primary); }
.student-approval-list { display: grid; gap: 8px; }
.student-approval-item { display: flex; align-items: center; justify-content: space-between; gap: 14px; padding: 10px 12px; border: 1px solid var(--border); border-radius: 8px; }
.student-approval-item > div:first-child { display: grid; gap: 4px; min-width: 0; }
.student-approval-item-main { display: flex !important; align-items: flex-start; gap: 10px !important; }
.student-approval-item-main > input { flex: 0 0 auto; margin: 4px 0 0; accent-color: var(--primary); }
.student-approval-item small { color: var(--text-light); }
.student-approval-preview { display: flex; flex-wrap: wrap; gap: 4px 12px; margin: 2px 0 0; padding: 0; color: var(--text-light); font-size: 12px; list-style: none; }
.student-approval-actions { display: flex; gap: 8px; flex: 0 0 auto; }
.student-approval-empty { margin: 0; color: var(--text-light); }
.app-save-status[hidden] { display: none !important; }
.app-save-status {
  position: fixed; top: 14px; right: 16px; z-index: 12000; display: inline-flex; align-items: center; gap: 8px;
  max-width: min(420px, calc(100vw - 32px)); padding: 9px 13px; border: 1px solid var(--border);
  border-radius: 999px; background: var(--card); color: var(--text); box-shadow: 0 8px 24px rgba(15,23,42,0.16);
  font-size: 12px; font-weight: 700;
}
.app-save-status.is-saving { color: var(--primary-dark); }
.app-save-status.is-saved { color: var(--success); }
.app-save-status.has-error { color: var(--danger); }
.app-save-status button { padding: 0; border: 0; background: transparent; color: inherit; font: inherit; text-decoration: underline; cursor: pointer; }
.app-save-status button[hidden] { display: none; }
.app-save-status.is-saving::before {
  width: 13px; height: 13px; border: 2px solid currentColor; border-right-color: transparent; border-radius: 50%;
  content: ""; animation: app-save-spin 0.7s linear infinite;
}
@keyframes app-save-spin { to { transform: rotate(360deg); } }
@media (max-width: 1100px) {
  .teacher-form-card .teacher-form { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .teacher-form-card .teacher-schools-field,
  .teacher-form-card .teacher-form-actions { grid-column: 1 / -1; }
}
@media (max-width: 767px) {
  .student-approval-item { align-items: flex-start; flex-direction: column; }
  .teacher-form-card .teacher-form { grid-template-columns: minmax(0, 1fr); }
}
.teacher-school-trigger {
  display: flex; width: 100%; min-height: 42px; align-items: center; justify-content: space-between; gap: 12px;
  padding: 9px 12px; border: 1px solid var(--border); border-radius: 8px; background: var(--card); color: var(--text);
  font: inherit; text-align: left; cursor: pointer; transition: border-color 0.18s ease, box-shadow 0.18s ease;
}
.teacher-school-trigger:hover, .teacher-school-trigger[aria-expanded="true"] { border-color: var(--primary); }
.teacher-school-trigger:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; }
.teacher-school-trigger > span:first-child { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.teacher-school-trigger[aria-expanded="true"] .teacher-school-chevron { transform: rotate(180deg); }
.teacher-school-chevron { color: var(--text-light); transition: transform 0.18s ease; }
.teacher-school-panel {
  position: absolute; top: calc(100% + 7px); left: 0; z-index: 70; width: min(100%, 520px); padding: 10px;
  border: 1px solid var(--border); border-radius: 10px; background: var(--card); box-shadow: 0 12px 32px rgba(15,23,42,0.18);
}
.teacher-school-panel:not([hidden]) { animation: fadeIn 0.16s ease both; }
.teacher-school-panel[hidden] { display: none !important; }
.teacher-school-options { display: grid; gap: 5px; max-height: 220px; overflow-y: auto; }
.teacher-school-option {
  display: flex; min-width: 0; align-items: center; gap: 9px; padding: 9px 8px; border: 1px solid transparent;
  border-radius: 7px; background: var(--bg); color: var(--text); font-size: 13px; font-weight: 500; letter-spacing: normal;
  text-transform: none; cursor: pointer;
}
.teacher-schools-field .teacher-school-option { color: var(--text); font-size: 13px; letter-spacing: normal; text-transform: none; }
.teacher-schools-field .teacher-school-option:has(input:checked) { border-color: rgba(20,91,150,0.25); background: var(--info-soft); color: var(--primary-dark); }
.teacher-school-option input { width: 16px; height: 16px; flex: 0 0 16px; margin: 0; accent-color: var(--primary); }
.teacher-school-option:hover { border-color: var(--border); }
.teacher-schools-field small { display: block; margin-top: 5px; color: var(--text-light); }
.teacher-toolbar { display: grid; grid-template-columns: minmax(220px, 1fr) minmax(180px, 280px); gap: 10px; flex: 1 1 520px; min-width: 0; }
.teacher-toolbar input, .teacher-toolbar select { width: 100%; min-width: 0; min-height: 42px; }
.teacher-list-toolbar { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin-bottom: 14px; }
.teacher-list-toolbar .list-summary { margin: 0; }
.teacher-table-empty { padding: 22px !important; color: var(--text-light); text-align: center; }
#teacherListCard .school-table tbody tr:not(:has(.teacher-table-empty)) { transition: background-color 0.16s ease; }
#teacherListCard .school-table tbody tr:not(:has(.teacher-table-empty)):hover { background: rgba(33,150,243,0.055); }
#teacherListCard .teacher-sort-button { min-height: 38px; padding: 6px 8px; gap: 6px; }
#teacherListCard .teacher-column-menu { width: 200px; }
#teacherListCard .teacher-column-menu.open { max-height: 280px; overflow: visible; }
#teacherListCard .teacher-sort-button.active { border-color: rgba(33,150,243,0.3); }
.teacher-row-actions { gap: 8px; }
.teacher-row-actions .btn {
  width: 32px; min-width: 32px; height: 32px; padding: 0; justify-content: center;
  border: 1px solid transparent; box-shadow: 0 1px 2px rgba(15,23,42,0.05);
}
.teacher-row-actions .btn-primary { color: #104775; background: rgba(20,91,150,0.09); border-color: rgba(20,91,150,0.2); }
.teacher-row-actions .btn-primary:hover { color: #104775; background: rgba(20,91,150,0.16); border-color: rgba(20,91,150,0.32); filter: none; }
.teacher-row-actions .btn-danger { color: #9a2931; background: rgba(180,35,44,0.08); border-color: rgba(180,35,44,0.18); }
.teacher-row-actions .btn-danger:hover { color: #8c2029; background: rgba(180,35,44,0.14); border-color: rgba(180,35,44,0.3); filter: none; }
.dark-mode .teacher-row-actions .btn-primary { color: #b8d9ff; background: rgba(70,140,200,0.18); border-color: rgba(120,175,225,0.3); }
.dark-mode .teacher-row-actions .btn-primary:hover { background: rgba(70,140,200,0.28); }
.dark-mode .teacher-row-actions .btn-danger { color: #ffb9b9; background: rgba(230,90,96,0.16); border-color: rgba(230,110,116,0.3); }
.dark-mode .teacher-row-actions .btn-danger:hover { background: rgba(230,90,96,0.25); }
@media (prefers-reduced-motion: reduce) {
  .teacher-form-card:not([hidden]), .teacher-school-panel:not([hidden]),
  #teacherListCard .school-table tbody tr,
  .teacher-form .form-group input { animation: none !important; transition-duration: 0.01ms !important; }
}
#schoolListCard .internal-code-column,
#studentListCard .internal-code-column,
#teacherListCard .internal-code-column,
#attendance .internal-code-column { display: none !important; }

.weekly-editor-header {
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr);
  gap: 10px;
  align-items: end;
  margin-bottom: 14px;
}
.weekly-editor-steps {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: -2px 0 14px;
  padding: 9px 11px;
  overflow-x: auto;
  border: 1px solid var(--border);
  border-radius: 7px;
  background: var(--bg);
  color: var(--text-light);
  font-size: 12px;
  white-space: nowrap;
}
.weekly-editor-steps span { display: inline-flex; align-items: center; gap: 6px; }
.weekly-editor-steps span + span::before { margin-right: 2px; color: var(--border); content: "›"; font-size: 16px; font-weight: 700; }
.weekly-editor-steps b {
  display: grid;
  width: 20px;
  height: 20px;
  place-items: center;
  border-radius: 50%;
  background: var(--info-soft);
  color: var(--primary-dark);
  font-size: 11px;
}
.weekly-editor-footer {
  display: flex;
  justify-content: flex-end;
  margin-top: 18px;
  padding-top: 14px;
  border-top: 1px solid var(--border);
}
.weekly-editor-footer button { min-height: 44px; white-space: nowrap; }
.weekly-editor-grid {
  min-width: 0;
}
.weekly-school-settings {
  margin-bottom: 18px;
  padding: 14px;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--bg);
  overflow-x: auto;
}
.weekly-school-settings-summary {
  display: flex;
  min-height: 24px;
  align-items: center;
  gap: 10px;
  color: var(--text);
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
  list-style: none;
}
.weekly-school-settings-summary::-webkit-details-marker { display: none; }
.weekly-school-settings-summary::before {
  width: 7px;
  height: 7px;
  border-right: 1.5px solid currentColor;
  border-bottom: 1.5px solid currentColor;
  content: "";
  transform: rotate(-45deg);
  transition: transform 180ms ease;
}
.weekly-school-settings[open] .weekly-school-settings-summary::before { transform: rotate(45deg); }
.weekly-school-settings[open] { display: grid; gap: 12px; }
.weekly-school-settings[open] .weekly-school-settings-title { display: none; }
.weekly-school-settings-title { color: var(--text); font-size: 14px; font-weight: 700; }
.weekly-school-settings-grid {
  display: grid;
  width: 100%;
  min-width: 970px;
  grid-template-columns: repeat(6, minmax(125px, 1fr)) minmax(160px, 1.25fr);
  gap: 12px 10px;
  align-items: end;
}
.weekly-ca-settings { display: grid; gap: 8px; padding-top: 10px; border-top: 1px solid var(--border); color: var(--text-light); font-size: 12px; }
.weekly-ca-settings > strong { color: var(--text); font-size: 13px; }
.weekly-ca-settings > small { color: var(--text-light); }
.weekly-ca-settings-grid { display: grid; grid-template-columns: repeat(3, minmax(190px, 1fr)); gap: 8px; }
.weekly-ca-setting { display: grid; grid-template-columns: auto 1fr 1fr; align-items: end; gap: 8px; padding: 8px; border: 1px solid var(--border); border-radius: 6px; background: var(--bg); }
.weekly-ca-setting > span { padding-bottom: 10px; color: var(--text); font-weight: 700; }
.weekly-ca-setting label { display: grid; gap: 4px; }
.weekly-ca-setting input { min-width: 0; width: 100%; }
@media (max-width: 900px) {
  .weekly-ca-settings-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 560px) {
  .weekly-ca-settings-grid { grid-template-columns: minmax(0, 1fr); }
}
.weekly-short-break { display: flex; min-width: 0; min-height: 40px; align-items: center; gap: 7px; color: var(--text); font-size: 12px; font-weight: 600; white-space: nowrap; }
.weekly-short-break input { width: 18px; height: 18px; margin: 0; accent-color: var(--primary); }
.weekly-day-tabs {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  gap: 6px;
  margin-bottom: 14px;
}
.weekly-day-tab {
  min-width: 0;
  min-height: 40px;
  padding: 8px 10px;
  border: 1px solid var(--border);
  border-radius: 6px;
  background: var(--bg);
  color: var(--text-light);
  font: inherit;
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
}
.weekly-day-tab:hover, .weekly-day-tab.is-active {
  border-color: var(--primary);
  background: var(--info-soft);
  color: var(--primary-dark);
}
.weekly-day-panel[hidden], .weekly-period-row[hidden] { display: none !important; }
.weekly-day-panel {
  padding: 2px 0;
}
.weekly-session-stack {
  display: grid;
  gap: 14px;
}
.weekly-session-card {
  min-width: 0;
  padding: 16px;
  border: 1px solid var(--border);
  border-left: 3px solid var(--primary);
  border-radius: 6px;
  background: var(--card);
}
.weekly-session-card[open] { border-left-color: var(--accent); box-shadow: 0 4px 14px rgba(15,23,42,0.06); }
.weekly-session-card:not([open]) { padding-top: 12px; padding-bottom: 12px; }
.weekly-session-card > .weekly-session-header {
  display: flex;
  min-height: 28px;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin: 0;
  cursor: pointer;
  list-style: none;
}
.weekly-session-card > .weekly-session-header::-webkit-details-marker { display: none; }
.weekly-session-card > .weekly-session-header::before {
  width: 7px;
  height: 7px;
  flex: 0 0 7px;
  border-right: 1.5px solid currentColor;
  border-bottom: 1.5px solid currentColor;
  content: "";
  transform: rotate(-45deg);
  transition: transform 180ms ease;
}
.weekly-session-card[open] > .weekly-session-header { margin-bottom: 12px; }
.weekly-session-card[open] > .weekly-session-header::before { transform: rotate(45deg); }
.weekly-session-status { margin-left: auto; color: var(--text-light); font-size: 11px; font-weight: 600; }
.weekly-session-card[open] .weekly-session-status { color: var(--primary-dark); }
.weekly-session-help { margin: -4px 0 10px; color: var(--text-light); font-size: 12px; line-height: 1.45; }
.weekly-session-add {
  min-height: 34px;
  margin: 0 0 10px;
  padding: 6px 10px;
  border: 1px solid rgba(20,91,150,0.25);
  border-radius: 5px;
  background: var(--info-soft);
  color: var(--primary-dark);
  font: inherit;
  font-size: 12px;
  font-weight: 700;
  cursor: pointer;
}
.weekly-session-add:hover { border-color: var(--primary); }
.weekly-ca-inline { margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--border); }
.weekly-ca-inline-title { margin-bottom: 8px; color: var(--text); font-size: 14px; font-weight: 700; }
.weekly-study-group-hint { margin: 0 0 12px; color: var(--text-light); font-size: 12px; }
.weekly-study-group-ca-row .weekly-double-option { display: none; }
.weekly-study-group-ca-row .weekly-assignment-heading { justify-content: flex-end; }
.weekly-session-header {
  margin-bottom: 12px;
  font-size: 15px;
  font-weight: 700;
  color: var(--primary-dark);
}
.weekly-session-settings {
  display: grid;
  grid-template-columns: repeat(5, minmax(90px, 1fr));
  gap: 10px;
  align-items: end;
  margin-bottom: 12px;
}
.weekly-session-defaults {
  display: grid;
  grid-template-columns: repeat(4, minmax(120px, 1fr));
  gap: 10px;
  margin-bottom: 12px;
  padding: 10px;
  border-radius: 6px;
  background: var(--bg);
}
.weekly-session-setting {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 5px;
  font-size: 12px;
  color: var(--text-light);
}
.weekly-session-setting input,
.weekly-session-setting select {
  width: 100%;
  min-height: 38px;
  font-size: 13px;
  padding: 7px 9px;
}
.weekly-session-setting input[type="checkbox"] {
  width: 20px;
  min-height: 20px;
  margin: 8px 0;
  accent-color: var(--primary);
}
.weekly-period-grid {
  display: grid;
  gap: 8px;
}
.weekly-period-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 7px;
  align-items: start;
  padding: 8px 10px;
  border: 1px solid var(--border);
  border-radius: 6px;
  background: var(--bg);
}
.weekly-period-row.has-scheduled-assignment { border-color: rgba(20,91,150,0.25); background: var(--card); }
.weekly-period-assignment.is-double-continuation { display: none !important; }
.weekly-saved-school { display: block; padding: 0 8px 3px; color: var(--primary-dark); font-size: 10px; font-weight: 700; }
.weekly-period-row-header { display: flex; min-width: 0; align-items: center; justify-content: space-between; gap: 8px; }
.weekly-period-open {
  display: flex;
  width: 100%;
  min-width: 0;
  min-height: 30px;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--text);
  text-align: left;
  cursor: pointer;
}
.weekly-period-open strong { font-size: 13px; }
.weekly-period-open span { color: var(--primary-dark); font-size: 11px; font-weight: 600; }
.weekly-period-open:hover span { text-decoration: underline; }
.weekly-period-open:focus-visible { outline: 2px solid var(--primary); outline-offset: 3px; border-radius: 3px; }
.weekly-period-row.has-scheduled-assignment .weekly-period-open strong { color: var(--primary-dark); }
.weekly-period-assignments { grid-column: 1 / -1; display: grid; gap: 7px; min-width: 0; }
.weekly-period-assignment { display: grid; grid-template-columns: repeat(5, minmax(120px, 1fr)); gap: 8px; align-items: end; min-width: 0; padding-top: 7px; border-top: 1px solid var(--border); }
.weekly-period-assignment:not(.is-editing) { grid-template-columns: minmax(0, 1fr); gap: 5px; }
.weekly-period-assignment:not(.is-editing) > .weekly-field { display: none; }
.weekly-period-assignment:not(.is-editing) > .weekly-assignment-heading { display: none; }
.weekly-period-row:not(.has-scheduled-assignment) .weekly-assignment-summary { display: none; }
.weekly-assignment-step { display: grid; grid-template-columns: minmax(0, 1fr); gap: 10px; align-items: end; }
.weekly-assignment-step > b,
.weekly-assignment-details-heading > b,
.weekly-editor-steps b { display: none !important; }
.weekly-assignment-slot-step,
.weekly-assignment-details { display: none; }
.weekly-period-assignment.has-class .weekly-assignment-slot-step { display: grid; }
.weekly-period-assignment.has-selected-slot .weekly-assignment-details { display: grid; }
.weekly-assignment-details { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; padding-top: 13px; border-top: 1px solid var(--border); }
.weekly-assignment-details-heading { grid-column: 1 / -1; display: flex; align-items: center; gap: 9px; color: var(--text); font-size: 13px; }
.weekly-assignment-details-heading .weekly-double-option { margin-left: auto; }
.timetable-schedule-builder.is-dialog-open .weekly-assignment-details-heading,
.timetable-schedule-builder.is-dialog-open .weekly-assignment-step { grid-column: 1 / -1; }
.timetable-schedule-builder.is-dialog-open .weekly-period-assignment.is-editing { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); column-gap: 18px; row-gap: 14px; }
.timetable-schedule-builder.is-dialog-open .weekly-assignment-class-step { grid-column: 1; }
.timetable-schedule-builder.is-dialog-open .weekly-assignment-slot-step { grid-column: 2; }
.timetable-schedule-builder.is-dialog-open .weekly-assignment-details { grid-column: 1 / -1; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; }
.timetable-schedule-builder.is-dialog-open .weekly-assignment-details-heading { grid-column: 1 / -1; }
.weekly-period-assignment.is-study-group .weekly-double-option { display: none; }
.timetable-schedule-builder.is-dialog-open .weekly-period-assignment:not(.has-selected-slot) .weekly-assignment-details { display: none; }
.timetable-schedule-builder.is-dialog-open .weekly-assignment-slot-step { display: grid; }
.timetable-schedule-builder.is-dialog-open .weekly-period-assignment:not(.has-class) .weekly-assignment-slot-step { display: none; }
.timetable-schedule-builder.is-dialog-open .weekly-assignment-class-step { grid-column: 1; }
.weekly-assignment-summary { display: flex; min-width: 0; align-items: center; justify-content: space-between; gap: 10px; }
.weekly-assignment-summary-text { overflow: hidden; color: var(--text); font-size: 12px; font-weight: 600; text-overflow: ellipsis; white-space: nowrap; }
.weekly-assignment-toggle { flex: 0 0 auto; padding: 4px 8px; border: 1px solid var(--border); border-radius: 4px; background: var(--card); color: var(--primary-dark); font: inherit; font-size: 11px; font-weight: 600; cursor: pointer; }
.weekly-assignment-toggle:hover { border-color: var(--primary); background: var(--info-soft); }
.weekly-assignment-heading { grid-column: 1 / -1; display: flex; min-width: 0; align-items: center; justify-content: space-between; margin-bottom: -2px; color: var(--text-light); font-size: 11px; font-weight: 700; }
.weekly-remove-assignment { display: grid; width: 24px; height: 24px; place-items: center; border: 0; border-radius: 4px; background: transparent; color: var(--danger); font-size: 17px; cursor: pointer; }
.weekly-remove-assignment[hidden] { display: none; }
.weekly-remove-assignment:hover { background: var(--danger-soft); }
.weekly-add-class { grid-column: 1 / -1; justify-self: start; padding: 6px 10px; border: 0; border-radius: 999px; background: var(--info-soft); color: var(--primary-dark); font: inherit; font-size: 12px; font-weight: 600; cursor: pointer; transition: background 0.16s ease, color 0.16s ease; }
.weekly-add-class[hidden] { display: none; }
.weekly-add-class:hover { background: var(--primary); color: #fff; }
.weekly-double-option { display: inline-flex; flex: 0 0 auto; align-items: center; gap: 4px; color: var(--primary-dark) !important; font-size: 10px !important; font-weight: 700 !important; white-space: nowrap; cursor: pointer; }
.weekly-double-option input { width: 14px; height: 14px; min-height: 14px; margin: 0; accent-color: var(--primary); }
.weekly-double-option input:disabled { cursor: not-allowed; }
.weekly-period-overrides { min-width: 0; }
.weekly-period-overrides summary {
  width: fit-content;
  color: var(--primary-dark);
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
}
.weekly-period-overrides[open] summary { margin-bottom: 10px; }
.weekly-period-override-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 8px;
}
.weekly-field {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.weekly-field label {
  font-size: 13px;
  font-weight: 600;
  color: var(--text-light);
  line-height: 1.3;
}
.weekly-field input,
.weekly-field select {
  width: 100%;
  min-width: 0;
  min-height: 40px;
  padding: 8px 10px;
  font-size: 14px;
}
.timetable-page-header .filter-select-trigger,
.weekly-editor-header .filter-select-trigger,
.weekly-school-settings-grid .filter-select-trigger,
.weekly-period-assignment .filter-select-trigger { font-size: 14px; line-height: 1.35; }
.weekly-assistant-picker { position: relative; min-width: 0; }
.weekly-assistant-trigger {
  width: 100%;
  display: flex;
  min-height: 38px;
  align-items: center;
  overflow: hidden;
  padding: 7px 9px;
  border: 1px solid var(--border);
  border-radius: 6px;
  background: var(--card);
  color: var(--text-light);
  font: inherit;
  font-size: 14px;
  line-height: 1.3;
  text-overflow: ellipsis;
  white-space: nowrap;
  cursor: pointer;
  text-align: left;
  transition: border-color 0.16s ease, color 0.16s ease;
}
.weekly-assistant-trigger::after { content: "▾"; flex: 0 0 auto; margin-left: auto; padding-left: 8px; transition: transform 0.16s ease; }
.weekly-assistant-picker.is-open { z-index: 100; }
.weekly-assistant-picker.is-open .weekly-assistant-trigger { border-color: var(--primary); color: var(--text); }
.weekly-assistant-picker.is-open .weekly-assistant-trigger::after { transform: rotate(180deg); }
.weekly-assistant-options {
  position: absolute;
  top: calc(100% + 4px);
  left: 0;
  z-index: 101;
  display: grid;
  gap: 2px;
  width: min(280px, calc(100vw - 48px));
  max-height: 0;
  overflow: hidden;
  padding: 0 5px;
  border: 1px solid var(--border);
  border-width: 0;
  border-radius: 6px;
  background: var(--card);
  box-shadow: 0 8px 20px rgba(15,23,42,0.16);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transform: translateY(-5px) scale(0.99);
  transform-origin: top left;
  transition: opacity 0.16s ease, transform 0.16s ease, max-height 0.16s ease, padding 0.16s ease, border-width 0.16s ease, visibility 0s linear 0.16s;
}
.weekly-assistant-picker.is-open .weekly-assistant-options { max-height: min(220px, calc(100vh - 100px)); overflow-y: auto; padding: 5px; border-width: 1px; opacity: 1; visibility: visible; pointer-events: auto; transform: translateY(0) scale(1); transition: opacity 0.16s ease, transform 0.16s ease, max-height 0.16s ease, padding 0.16s ease, border-width 0.16s ease, visibility 0s; }
.weekly-assistant-options label { display: flex; min-width: 0; align-items: center; gap: 8px; padding: 7px; border-radius: 4px; color: var(--text); font-size: 12px; cursor: pointer; }
.weekly-assistant-options label { opacity: 0; translate: 0 -4px; transition: opacity 0.16s ease, translate 0.16s ease, background-color 0.14s ease; }
.weekly-assistant-picker.is-open .weekly-assistant-options label { opacity: 1; translate: 0 0; }
.weekly-assistant-picker.is-open .weekly-assistant-options label:nth-child(2) { transition-delay: 0.02s; }
.weekly-assistant-picker.is-open .weekly-assistant-options label:nth-child(3) { transition-delay: 0.04s; }
.weekly-assistant-picker.is-open .weekly-assistant-options label:nth-child(4) { transition-delay: 0.06s; }
.weekly-assistant-options label:hover { background: var(--info-soft); }
.weekly-assistant-options input { width: 16px; height: 16px; flex: 0 0 16px; min-height: 16px; margin: 0; accent-color: var(--primary); }
.weekly-assistant-options span, .weekly-assistant-empty { min-width: 0; overflow-wrap: anywhere; }
.weekly-assistant-empty { padding: 8px; color: var(--text-light); font-size: 12px; }
@media (prefers-reduced-motion: reduce) {
  .weekly-assistant-trigger, .weekly-assistant-trigger::after, .weekly-assistant-options, .weekly-assistant-options label { transition-duration: 0.01ms !important; transition-delay: 0ms !important; }
}
.weekly-saved-title {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
}
.timetable-section-card {
  scroll-margin-top: 18px;
}
.timetable-section-heading {
  display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap;
  margin-bottom: 18px;
  padding-bottom: 12px;
  font-size: 20px;
}
.weekly-dialog-title-wrap { display: grid; min-width: 0; gap: 3px; }
.weekly-dialog-title-wrap > small { color: var(--text-light); font-size: 12px; font-weight: 600; }
.timetable-section-heading .btn { font-size: 13px; }
.timetable-editor-actions { display: flex; align-items: center; gap: 8px; }
.weekly-timetable-close { display: none; }
.timetable-schedule-builder {
  border-top: 3px solid var(--primary);
}
.timetable-schedule-builder:not(.is-dialog-open) .weekly-editor-steps,
.timetable-schedule-builder:not(.is-dialog-open) .weekly-day-tabs,
.timetable-schedule-builder:not(.is-dialog-open) .weekly-editor-grid,
.timetable-schedule-builder:not(.is-dialog-open) .weekly-editor-footer { display: none !important; }
.weekly-timetable-dialog-backdrop:not([hidden]) {
  position: fixed;
  inset: 0;
  z-index: 1000;
  background: rgba(15,23,42,0.48);
  backdrop-filter: blur(2px);
}
.timetable-schedule-builder.is-dialog-open {
  position: fixed;
  z-index: 1001;
  inset: 50% auto auto 50%;
  width: min(820px, calc(100vw - 48px));
  min-height: min(520px, calc(100vh - 36px));
  max-height: min(94vh, 1100px);
  margin: 0;
  overflow: auto;
  transform: translate(-50%, -50%);
  box-shadow: 0 24px 80px rgba(15,23,42,0.28);
}
.timetable-schedule-builder.is-dialog-open .weekly-editor-header,
.timetable-schedule-builder.is-dialog-open .weekly-school-settings,
.timetable-schedule-builder.is-dialog-open .weekly-editor-steps,
.timetable-schedule-builder.is-dialog-open .weekly-day-tabs,
.timetable-schedule-builder.is-dialog-open .weekly-session-help,
.timetable-schedule-builder.is-dialog-open .weekly-session-add,
.timetable-schedule-builder.is-dialog-open .weekly-period-row:not(.is-dialog-target),
.timetable-schedule-builder.is-dialog-open .weekly-session-card:not(.is-dialog-target) { display: none !important; }
.timetable-schedule-builder.is-dialog-open .weekly-editor-steps,
.timetable-schedule-builder.is-dialog-open .weekly-day-tabs,
.timetable-schedule-builder.is-dialog-open .weekly-editor-grid,
.timetable-schedule-builder.is-dialog-open .weekly-editor-footer { display: flex; }
.timetable-schedule-builder.is-dialog-open .weekly-editor-grid { display: block; }
.timetable-schedule-builder.is-dialog-open .weekly-editor-footer { display: flex; }
.timetable-schedule-builder.is-dialog-open .weekly-timetable-close { display: inline-flex; }
.timetable-schedule-builder.is-dialog-open .weekly-copy-previous { display: none; }
.timetable-schedule-builder.is-dialog-open .weekly-session-card.is-dialog-target { padding: 0; border: 0; box-shadow: none; }
.timetable-schedule-builder.is-dialog-open .weekly-session-card.is-dialog-target > .weekly-session-header,
.timetable-schedule-builder.is-dialog-open .weekly-session-card.is-dialog-target .weekly-period-row-header,
.timetable-schedule-builder.is-dialog-open .weekly-session-card.is-dialog-target .weekly-add-class,
.timetable-schedule-builder.is-dialog-open .weekly-period-assignment:not(.is-editing) { display: none; }
.timetable-schedule-builder.is-dialog-open .weekly-period-row.is-dialog-target { padding: 0; border: 0; background: transparent; }
.timetable-schedule-builder.is-dialog-open .weekly-period-assignment.is-editing { padding: 0; border: 0; }
.timetable-schedule-builder.is-dialog-open .weekly-assignment-summary { display: none; }
.timetable-schedule-builder.is-dialog-open .weekly-assignment-heading { display: none; }
.has-weekly-timetable-dialog { overflow: hidden; }
@media (max-width: 900px) {
  .timetable-schedule-builder.is-dialog-open .weekly-period-assignment.is-editing { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .timetable-schedule-builder.is-dialog-open .weekly-assignment-details { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
@media (max-width: 600px) {
  .timetable-schedule-builder.is-dialog-open { width: calc(100vw - 20px); min-height: min(500px, calc(100vh - 20px)); max-height: calc(100vh - 20px); }
  .timetable-schedule-builder.is-dialog-open .weekly-period-assignment.is-editing { grid-template-columns: minmax(0, 1fr); }
  .timetable-schedule-builder.is-dialog-open .weekly-assignment-class-step,
  .timetable-schedule-builder.is-dialog-open .weekly-assignment-slot-step { grid-column: 1; }
  .timetable-schedule-builder.is-dialog-open .weekly-assignment-details { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
.timetable-saved-card {
  border-top: 3px solid var(--accent);
}
.weekly-saved-title > span {
  flex: 0 0 auto;
  color: var(--accent);
  font-size: 20px;
}
.weekly-saved-controls { display: flex; flex: 1 1 100%; min-width: 0; align-items: center; justify-content: flex-start; gap: 8px 12px; flex-wrap: wrap; }
.weekly-saved-controls > button,
.weekly-saved-summary { flex: 0 0 auto; white-space: nowrap; }
.weekly-saved-week-control { display: flex; align-items: center; gap: 5px; flex: 0 0 auto; }
.weekly-saved-week-control input { width: 145px; min-width: 0; min-height: 34px; padding: 5px 8px; }
.weekly-date-input-wrap { cursor: pointer; }
.weekly-saved-school { display: block; overflow: hidden; padding: 0 7px 2px; color: var(--text-light); font-size: 9.5px; font-weight: 700; text-overflow: ellipsis; white-space: nowrap; }
.weekly-saved-day-filter {
  display: flex;
  gap: 6px;
  margin: -4px 0 12px;
  overflow-x: auto;
  padding: 2px 1px 5px;
  scrollbar-width: thin;
}
.weekly-saved-day-filter-button {
  flex: 0 0 auto;
  min-height: 34px;
  padding: 6px 11px;
  border: 1px solid var(--border);
  border-radius: 18px;
  background: var(--bg);
  color: var(--text-light);
  font: inherit;
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  transition: color 0.16s ease, background-color 0.16s ease, border-color 0.16s ease, box-shadow 0.16s ease;
}
.weekly-saved-day-filter-button:hover { border-color: var(--primary); color: var(--primary-dark); }
.weekly-saved-day-filter-button.is-active {
  border-color: var(--primary);
  background: var(--info-soft);
  color: var(--primary-dark);
  box-shadow: 0 2px 6px rgba(20,91,150,0.12);
}
.weekly-saved-day-filter-button:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; }
.weekly-saved-board-hint { margin: -3px 0 10px; color: var(--text-light); font-size: 12px; line-height: 1.45; }
.weekly-saved-filter { display: flex; align-items: center; gap: 7px; color: var(--text-light); font-size: 12px; font-weight: 600; white-space: nowrap; }
.weekly-saved-filter select { min-width: 190px; max-width: 300px; min-height: 34px; padding: 6px 9px; border: 1px solid var(--border); border-radius: 6px; background: var(--card); color: var(--text); font: inherit; font-weight: 500; }
.weekly-saved-filter .filter-select-picker { flex: 0 1 300px; width: auto; min-width: 190px; }
.weekly-saved-filter .filter-select-trigger { min-height: 34px; padding: 6px 9px; font-size: 12px; font-weight: 500; }
.weekly-saved-summary {
  color: var(--text-light);
  font-size: 12px;
  font-weight: 500;
}
.weekly-saved-board { width: 100%; max-width: 100%; overflow-x: auto; overflow-y: hidden; padding-bottom: 6px; overscroll-behavior-x: contain; }
.weekly-saved-board.is-day-filtered {
  display: flex;
  justify-content: center;
}
.weekly-saved-board.is-day-filtered > .weekly-saved-grid {
  flex: 0 0 auto;
  max-width: 100%;
  margin-right: auto;
  margin-left: auto;
}
.weekly-saved-grid.is-hidden-preview { display: none; }
.weekly-saved-rotated-preview {
  display: block;
  width: max-content;
  min-width: 100%;
  padding-bottom: 6px;
  color: var(--text);
}
.weekly-saved-rotated-header,
.weekly-saved-rotated-period-header,
.weekly-saved-rotated-day-row {
  display: grid;
  grid-template-columns: 160px repeat(2, minmax(600px, 1fr));
}
.weekly-saved-rotated-session-heading,
.weekly-saved-rotated-day-heading,
.weekly-saved-rotated-period-group,
.weekly-saved-rotated-day-label,
.weekly-saved-rotated-period-heading,
.weekly-saved-rotated-session-grid {
  min-width: 0;
}
.weekly-saved-rotated-day-heading,
.weekly-saved-rotated-session-heading,
.weekly-saved-rotated-period-heading,
.weekly-saved-rotated-day-label {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 8px;
  border: 1px solid var(--border);
  background: var(--bg);
  color: var(--text);
  font-size: 12px;
  font-weight: 700;
  text-align: center;
}
.weekly-saved-rotated-session-heading--morning {
  background: #eaf3fb;
  color: #164f7d;
}
.weekly-saved-rotated-session-heading--afternoon {
  background: #fff2df;
  color: #78450e;
}
.weekly-saved-rotated-period-group {
  display: grid;
  grid-template-columns: repeat(var(--rotation-period-count), minmax(150px, 1fr));
}
.weekly-saved-rotated-period-heading {
  min-height: 34px;
  border-top: 0;
  color: var(--text-light);
  font-size: 11px;
}
.weekly-saved-rotated-day-row {
  align-items: stretch;
}
.weekly-saved-rotated-day-label {
  position: sticky;
  left: 0;
  z-index: 2;
  flex-direction: column;
  gap: 3px;
  border-top: 0;
  background: var(--card);
}
.weekly-saved-rotated-day-label time {
  color: var(--text-light);
  font-size: 11px;
  font-weight: 500;
}
.weekly-saved-rotated-session-grid {
  display: grid;
  grid-auto-flow: row;
  align-items: stretch;
  gap: 3px;
  min-height: 82px;
  padding: 5px;
  border: 1px solid var(--border);
  border-top: 0;
  background: #f4f8fc;
}
.weekly-saved-rotated-session-grid--afternoon {
  background: #fffaf2;
}
.weekly-saved-rotated-session-grid > .weekly-saved-lesson {
  min-width: 0;
  padding: 7px;
  align-self: stretch;
}
.dark-mode .weekly-saved-rotated-session-heading--morning { background: rgba(57,124,175,0.2); color: #a9d5f5; }
.dark-mode .weekly-saved-rotated-session-heading--afternoon { background: rgba(189,116,29,0.2); color: #f2c77f; }
.dark-mode .weekly-saved-rotated-session-grid--morning { background: rgba(57,124,175,0.07); }
.dark-mode .weekly-saved-rotated-session-grid--afternoon { background: rgba(189,116,29,0.07); }
.weekly-saved-grid {
  display: grid;
  width: 100%;
  min-width: 0;
  gap: 1px;
  overflow: hidden;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--border);
}
.weekly-saved-corner, .weekly-saved-day-heading, .weekly-saved-session-heading, .weekly-saved-cell { min-width: 0; }
.weekly-saved-corner, .weekly-saved-day-heading {
  display: flex;
  min-height: 46px;
  align-items: center;
  justify-content: center;
  gap: 4px;
  padding: 7px 6px;
  background: var(--bg);
  text-align: center;
}
.weekly-saved-corner { color: var(--text-light); font-size: 12px; font-weight: 700; }
.weekly-saved-day-heading { flex-direction: column; border-bottom: 2px solid var(--primary); }
.weekly-saved-day-heading strong { color: var(--text); font-size: 13px; }
.weekly-saved-day-heading time { color: var(--text-light); font-size: 11px; font-variant-numeric: tabular-nums; }
.weekly-saved-session-heading {
  position: sticky;
  left: 0;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 10px 7px;
  background: var(--bg);
  color: var(--primary-dark);
  font-size: 11.5px;
  font-weight: 700;
  text-align: center;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  cursor: pointer;
}
.weekly-saved-session-heading:hover { filter: brightness(0.97); }
.weekly-saved-session-heading:focus-visible { z-index: 3; outline: 2px solid var(--primary); outline-offset: -3px; }
.weekly-saved-session-heading--morning {
  border-left: 4px solid #397caf;
  background: #eaf3fb;
  color: #164f7d;
}
.weekly-saved-session-heading--afternoon {
  border-left: 4px solid #bd741d;
  background: #fff2df;
  color: #78450e;
}
.weekly-saved-cell {
  position: relative;
  display: grid;
  grid-auto-flow: row;
  grid-auto-columns: minmax(0, 1fr);
  align-items: stretch;
  gap: 2px;
  min-height: 0;
  padding: 4px;
  background: var(--card);
  cursor: pointer;
}
.weekly-saved-cell:hover { box-shadow: inset 0 0 0 2px rgba(20,91,150,0.22); }
.weekly-saved-cell:focus-visible { z-index: 2; outline: 2px solid var(--primary); outline-offset: -2px; }
.weekly-saved-cell--morning { background: #f4f8fc; }
.weekly-saved-cell--afternoon {
  border-top: 3px solid #d8a355;
  background: #fffaf2;
}
.dark-mode .weekly-saved-session-heading--morning { background: rgba(57,124,175,0.2); color: #a9d5f5; }
.dark-mode .weekly-saved-session-heading--afternoon { background: rgba(189,116,29,0.2); color: #f2c77f; }
.dark-mode .weekly-saved-cell--morning { background: rgba(57,124,175,0.07); }
.dark-mode .weekly-saved-cell--afternoon {
  border-top-color: rgba(220,165,85,0.72);
  background: rgba(189,116,29,0.07);
}
.weekly-saved-period-guide { z-index: 0; min-width: 0; border: 0; pointer-events: none; }
.weekly-saved-period-guide.is-empty { display: flex; align-items: center; padding-left: 5px; color: var(--text-light); font-size: 9px; }
.weekly-saved-lesson { 
  display: grid;
  min-width: 0;
  align-self: stretch;
  z-index: 1;
  align-content: start;
  gap: 3px;
  min-height: max-content;
  padding: 5px;
  border: 1px solid var(--border);
  border-left: 3px solid var(--saved-subject-accent, var(--primary));
  border-radius: 6px;
  background: var(--bg);
  cursor: pointer;
  transition: border-color 0.16s ease, box-shadow 0.16s ease, transform 0.16s ease;
}
.weekly-saved-lesson:hover { border-color: rgba(20,91,150,0.42); box-shadow: 0 4px 12px rgba(15,23,42,0.08); transform: translateY(-1px); }
.weekly-saved-lesson-top { display: flex; min-width: 0; align-items: center; justify-content: space-between; gap: 3px; }
.weekly-saved-lesson-top time { min-width: 0; color: var(--text-light); font-size: 9.5px; font-weight: 700; font-variant-numeric: tabular-nums; text-align: right; overflow-wrap: anywhere; }
.weekly-saved-lesson-top > span { flex: 0 0 auto; padding: 2px 4px; border-radius: 4px; background: var(--info-soft); color: var(--primary-dark); font-size: 8.5px; font-weight: 800; }
.weekly-saved-details { display: grid; grid-template-columns: minmax(0, 1fr) auto; min-width: 0; align-items: start; gap: 5px; }
.weekly-saved-main-info { display: flex; flex: 1 1 auto; min-width: 0; align-items: baseline; align-content: start; flex-wrap: nowrap; gap: 2px 3px; overflow: visible; padding: 2px 4px; border-radius: 4px; background: var(--info-soft); white-space: nowrap; }
.weekly-saved-class { flex: 0 0 auto; min-width: max-content; max-width: none; overflow: visible; color: var(--text); font-size: 10.5px; font-weight: 750; white-space: nowrap; }
.weekly-saved-divider { flex: 0 0 auto; color: var(--text-light); font-size: 10px; }
.weekly-saved-subject { flex: 0 0 auto; min-width: max-content; overflow: visible; color: var(--saved-subject-accent, var(--primary-dark)); font-size: 11px; font-weight: 800; line-height: 1.2; white-space: nowrap; }
.weekly-saved-room { flex: 0 0 auto; max-width: none; overflow: visible; padding: 2px 4px; border: 1px solid rgba(20,91,150,0.16); border-radius: 4px; background: var(--info-soft); color: var(--primary-dark); font-size: 9.5px; font-weight: 800; white-space: nowrap; }
.weekly-saved-lesson--ic3 { --saved-subject-accent: #145b96; }
.weekly-saved-lesson--mos-word { --saved-subject-accent: #3769a5; }
.weekly-saved-lesson--mos-excel { --saved-subject-accent: #32805b; }
.weekly-saved-lesson--mos-powerpoint { --saved-subject-accent: #bd624a; }
.dark-mode .weekly-saved-lesson--ic3 { --saved-subject-accent: #72b8ed; }
.dark-mode .weekly-saved-lesson--mos-word { --saved-subject-accent: #8db4ed; }
.dark-mode .weekly-saved-lesson--mos-excel { --saved-subject-accent: #79caa1; }
.dark-mode .weekly-saved-lesson--mos-powerpoint { --saved-subject-accent: #f09a80; }
.weekly-saved-persons { display: grid; gap: 2px; }
.weekly-saved-person { display: flex; min-width: 0; align-items: center; gap: 5px; overflow: visible; color: var(--text); font-size: 10.5px; font-weight: 700; line-height: 1.25; white-space: nowrap; }
.weekly-saved-assistants { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: start; gap: 5px; min-width: 0; color: var(--text); font-size: 10.5px; font-weight: 700; line-height: 1.25; }
.weekly-saved-assistant-list { display: grid; min-width: 0; gap: 2px; }
.weekly-saved-person-label { flex: 0 0 auto; color: var(--text-light); font-size: 9px; font-weight: 800; }
.weekly-saved-person-name { display: block; flex: 0 0 auto; min-width: max-content; overflow: visible; font-weight: 700; white-space: nowrap; }
.weekly-saved-empty { display: grid; min-height: 38px; place-items: center; border: 0; border-radius: 8px; background: rgba(148,163,184,0.06); color: var(--text-light); font-size: 10.5px; }
.weekly-saved-empty-state { display: grid; min-height: 170px; place-items: center; border: 0; border-radius: 12px; background: rgba(148,163,184,0.06); color: var(--text-light); font-size: 14px; }
@media (max-width: 900px) {
  .weekly-editor-header { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .weekly-period-assignment { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 600px) {
  .teacher-list-toolbar { align-items: stretch; }
  .teacher-toolbar { grid-template-columns: minmax(0, 1fr); flex-basis: 100%; }
  .teacher-form { grid-template-columns: minmax(0, 1fr); gap: 12px; }
  .teacher-schools-field, .teacher-form-actions { grid-column: 1 / -1; }
  .weekly-editor-header { grid-template-columns: minmax(0, 1fr); }
  .weekly-editor-footer button { width: 100%; }
  .timetable-section-heading { align-items: flex-start; flex-direction: column; }
  .weekly-day-tabs { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .weekly-period-assignment { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .weekly-session-settings { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .weekly-session-setting:last-child { grid-column: 1 / -1; }
  .weekly-period-override-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .weekly-saved-title { align-items: flex-start; flex-direction: column; gap: 8px; }
  .weekly-saved-controls { width: 100%; flex-wrap: wrap; justify-content: flex-start; gap: 8px 12px; }
  .weekly-saved-week-control { order: -1; }
  .weekly-saved-filter { flex-wrap: wrap; }
  .weekly-saved-filter .filter-select-picker { min-width: min(190px, 55vw); }
  .weekly-saved-grid { min-width: 0; }
  .weekly-saved-cell { min-height: 0; padding: 6px; }
  .weekly-saved-lesson { padding: 6px 6px 5px; }
  .weekly-saved-lesson-top { align-items: flex-start; flex-direction: column; }
  .weekly-saved-details { align-items: start; }
  .weekly-saved-main-info { flex-wrap: nowrap; white-space: nowrap; }
  .weekly-saved-class { max-width: 45%; white-space: nowrap; }
  .weekly-saved-subject { max-width: none; white-space: nowrap; }
  .weekly-saved-room { max-width: none; }
  .weekly-saved-person, .weekly-saved-assistants { white-space: nowrap; }
}
.student-submit-header { padding-bottom: 20px; border-bottom: 1px solid var(--border); }
.student-submit-kicker { color: var(--accent); font-size: 12px; font-weight: 700; }
.student-submit-header h1 { margin: 8px 0; font-size: 26px; overflow-wrap: anywhere; }
.student-submit-header p, .student-submit-description { color: var(--text-light); }
.student-submit-message { margin: 16px 0; padding: 12px; border-radius: 6px; background: var(--info-soft); color: var(--primary-dark); }
.student-submit-message.is-success { background: var(--success-soft); color: var(--success); }
.student-submit-message.is-error { background: var(--danger-soft); color: var(--danger); }
.student-submit-details { display: grid; gap: 16px; }
.student-submit-meta { display: flex; justify-content: space-between; gap: 16px; padding-bottom: 10px; border-bottom: 1px solid var(--border); }
.student-submit-meta span { color: var(--text-light); }
.student-submit-meta strong { text-align: right; }
.student-submit-description { white-space: pre-wrap; overflow-wrap: anywhere; }
.student-submit-tasks h2 { margin-bottom: 8px; font-size: 16px; }
.student-submit-tasks ol { display: grid; gap: 8px; padding-left: 22px; }
.student-submit-tasks li { padding-left: 3px; overflow-wrap: anywhere; }
.student-grade-report { display: grid; gap: 10px; }
.student-grade-report h2 { font-size: 16px; }
.student-grade-summary { font-weight: 700; color: var(--success); }
.student-grade-result-table { min-width: 620px; }
.student-grade-result-table .task-feedback { white-space: pre-wrap; overflow-wrap: anywhere; }
.student-submit-previous { color: var(--success); font-size: 13px; overflow-wrap: anywhere; }
.student-submit-form { display: grid; gap: 10px; padding-top: 16px; border-top: 1px solid var(--border); }
.student-submit-form label { font-weight: 700; }
.student-submit-form .btn { justify-content: center; }
.student-submit-footer { margin-top: 20px; color: var(--text-light); font-size: 12px; }
.dark-mode .student-submit-message { color: var(--text); }
.dark-mode .form-section-title, .dark-mode .student-detail-item { border-color: #333; }
@media (max-width: 700px) {
  .form-span-2 { grid-column: span 1; }
  .student-detail-grid { grid-template-columns: 1fr; }
  .student-progress-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .student-detail-heading { flex-direction: column; }
  .student-submit-main { width: min(100% - 20px, 760px); padding: 18px 0; }
  .student-submit-panel { padding: 18px; }
  .student-submit-header h1 { font-size: 22px; }
  .mos-task-editor-heading { align-items: flex-start; flex-direction: column; }
}

/* Keep dense school tables usable when the viewport becomes narrow. */
html, body { max-width: 100%; overflow-x: hidden; }
.main { min-width: 0; }
.card, .header, .chart-grid, .stats-grid, .form-grid { min-width: 0; }
.table-wrap { max-width: 100%; overflow-x: auto; overflow-y: visible; }
.school-table { min-width: 0; }
.internal-code-column { display: none !important; }
.attendance-history-scroll { overflow-x: auto; }

@media (max-width: 1100px) {
  #studentListCard .school-table { min-width: 0; }
  #studentListCard .table-wrap { overflow-x: auto; overflow-y: visible; }
  #studentListCard .school-table th:nth-child(1) { width: 5%; }
  #studentListCard .school-table th:nth-child(2) { width: 6%; }
  #studentListCard .school-table th:nth-child(3) { width: 11%; }
  #studentListCard .school-table th:nth-child(4) { width: 18%; }
  #studentListCard .school-table th:nth-child(5) { width: 17%; }
  #studentListCard .school-table th:nth-child(6) { width: 10%; }
  #studentListCard .school-table th:nth-child(7) { width: 9%; }
  #studentListCard .school-table th:nth-child(8) { width: 10%; }
  #studentListCard .school-table th:nth-child(9) { width: 7%; }
  #studentListCard .school-table th:nth-child(10) { width: 7%; }
  #studentListCard .student-actions { gap: 3px; min-width: 0; }
  #studentListCard .student-actions .btn { flex-basis: 25px; width: 25px; min-width: 25px; height: 26px; padding: 0; }
}

@media (max-width: 900px) {
  :root { --sidebar-w: 220px; }
  .main { padding: 18px; }
  .attendance-page-filters { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .attendance-list-filters { flex-basis: 100%; justify-content: flex-start; }
  .header { gap: 14px; }
  .header h1 { font-size: 24px; }
  .chart-grid { grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); }
  .chart-container { height: 260px; }
  .student-profile-modal { max-width: calc(100vw - 28px); }
  .student-search-bar { grid-template-columns: minmax(180px, 1fr) minmax(150px, 190px) minmax(140px, 170px); }
  .student-header-tools { flex-basis: 100%; min-width: 0; justify-content: stretch; }
  .student-sync-group { max-width: 100%; justify-content: stretch; }
  .student-toolbar-row { align-items: flex-start; }
  .student-toolbar-controls { grid-template-columns: minmax(200px, 1fr) minmax(140px, 180px); }
  .module-list-toolbar .module-toolbar-controls { width: 100%; justify-content: flex-start; }
  .module-list-toolbar .grading-filters { width: 100%; grid-template-columns: repeat(auto-fit, minmax(145px, 1fr)); }
  #schoolListCard .school-table th:nth-child(4),
  #schoolListCard .school-table td:nth-child(4),
  #schoolListCard .school-table th:nth-child(5),
  #schoolListCard .school-table td:nth-child(5),
  #schoolListCard .school-table th:nth-child(6),
  #schoolListCard .school-table td:nth-child(6),
  #classListCard .school-table th:nth-child(4),
  #classListCard .school-table td:nth-child(4),
  #classListCard .school-table th:nth-child(6),
  #classListCard .school-table td:nth-child(6) { display: none; }
  #schoolListCard .school-table { min-width: 0; }
  #classListCard .school-table { min-width: 0; }
}

@media (max-width: 768px) {
  .main { width: 100%; max-width: 100%; padding: 64px 12px 20px; }
  .sidebar { width: min(86vw, 300px); height: 100vh; padding: 20px 12px; overflow-y: auto; }
  .mobile-toggle { display: block; position: fixed; top: 14px; left: 14px; z-index: 101; padding: 9px 13px; }
  .header { align-items: flex-start; margin-bottom: 16px; }
  .header h1 { font-size: 21px; line-height: 1.25; }
  .header-actions { width: 100%; gap: 8px; }
  .header-actions > label { width: 100%; }
  .header-actions > input,
  .header-actions > select,
  .header-actions > .filter-select-picker,
  .header-actions > .btn { flex: 1 1 100%; min-width: 0; width: 100%; }
  .student-header-tools, .student-sync-group { width: 100%; }
  .student-sync-group { justify-content: stretch; }
  .student-sync-input, .student-sync-group .btn { flex: 1 1 100%; min-width: 0; }
  .student-toolbar-row { flex-direction: column; align-items: stretch; }
  .module-list-toolbar { align-items: stretch; }
  .module-list-toolbar .module-toolbar-controls { flex-basis: auto; }
  .module-list-toolbar .grading-filters { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .school-list-toolbar { flex-wrap: wrap; }
  .school-list-toolbar .list-summary { flex: 1 1 auto; }
  .student-list-summary { width: 100%; justify-content: space-between; }
  .student-toolbar-controls { grid-template-columns: 1fr; width: 100%; }
  .attendance-page-header { align-items: stretch; }
  .attendance-page-filters { grid-template-columns: minmax(0, 1fr); width: 100%; }
  .attendance-page-filters > .filter-select-picker,
  .attendance-page-filters > .attendance-date-filter { width: 100%; min-width: 0; }
  .attendance-history-heading { align-items: flex-start; flex-direction: column; }
  .attendance-history-heading .header-actions { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); width: 100%; }
  .attendance-history-scope { grid-column: 1 / -1; }
  .student-stat-grid { grid-template-columns: 1fr; }
  .student-stat-heading { align-items: flex-start; flex-direction: column; }
  .card { padding: 16px; border-radius: 10px; }
  .card-title { font-size: 16px; line-height: 1.35; }
  .stats-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; margin-bottom: 16px; }
  .stat-card { padding: 13px; gap: 10px; min-width: 0; }
  .stat-icon { width: 38px; height: 38px; font-size: 18px; flex: 0 0 auto; }
  .stat-info h3 { font-size: 22px; }
  .stat-info p { font-size: 11px; line-height: 1.25; }
  .chart-grid { grid-template-columns: 1fr; gap: 12px; }
  .chart-container { height: 230px; }
  .search-bar { display: grid; grid-template-columns: 1fr; gap: 8px; }
  .search-bar input, .search-bar select { width: 100%; min-width: 0; }
  .student-search-bar { grid-template-columns: 1fr; }
  .attendance-list-filters { flex-basis: 100%; flex-wrap: wrap; justify-content: stretch; }
  .attendance-list-filters input,
  .attendance-list-filters > .filter-select-picker,
  .attendance-list-filters .btn { flex: 1 1 100%; max-width: none; min-width: 0; width: 100%; }
  .form-grid { grid-template-columns: 1fr; gap: 12px; }
  .form-span-2 { grid-column: span 1; }
  .modal-overlay { padding: 10px; align-items: flex-start; overflow-y: auto; }
  .modal { max-height: calc(100vh - 20px); margin: 0; }
  .modal-header, .modal-body, .modal-footer { padding: 15px; }
  .modal-header h3 { font-size: 17px; }
  .modal-footer { flex-wrap: wrap; }
  .modal-footer .btn { flex: 1 1 140px; justify-content: center; }
  .school-table th, .school-table td { padding: 8px 6px; }
  .school-table { min-width: 0; }
  .attendance-history-table { min-width: 0; }
  .attendance-history-scroll { width: 100%; }
  .student-detail-heading h2 { font-size: 21px; }
}

@media (max-width: 430px) {
  .school-sort-button { gap: 2px; padding: 2px; font-size: 9px; }
  .school-sort-button .sort-indicator { min-width: 12px; width: 12px; height: 12px; font-size: 8px; }
  .main { padding-left: 9px; padding-right: 9px; }
  .stats-grid { grid-template-columns: 1fr; }
  .stat-card { min-height: 68px; }
  .btn { padding: 9px 12px; font-size: 13px; }
  .card { padding: 13px; }
  .chart-container { height: 210px; }
  #schoolListCard .school-table th:nth-child(2),
  #schoolListCard .school-table td:nth-child(2),
  #schoolListCard .school-table th:nth-child(3),
  #schoolListCard .school-table td:nth-child(3),
  #schoolListCard .school-table th:nth-child(7),
  #schoolListCard .school-table td:nth-child(7),
  #classListCard .school-table th:nth-child(2),
  #classListCard .school-table td:nth-child(2),
  #classListCard .school-table th:nth-child(3),
  #classListCard .school-table td:nth-child(3),
  #classListCard .school-table th:nth-child(7),
  #classListCard .school-table td:nth-child(7) { display: none; }
  #schoolListCard .school-table { min-width: 0; }
  #classListCard .school-table { min-width: 0; }
  #studentListCard .school-table th:nth-child(4),
  #studentListCard .school-table td:nth-child(4) { display: none; }
  #studentListCard .school-table { min-width: 0; }
  #studentListCard .school-table th:nth-child(1) { width: 7%; }
  #studentListCard .school-table th:nth-child(2) { width: 8%; }
  #studentListCard .school-table th:nth-child(3) { width: 15%; }
  #studentListCard .school-table th:nth-child(5) { width: 10%; }
  #studentListCard .school-table th:nth-child(6) { width: 14%; }
  #studentListCard .school-table th:nth-child(7) { width: 15%; }
  #studentListCard .school-table th:nth-child(9) { width: 16%; }
  #studentListCard .school-table th:nth-child(10) { width: 15%; }
  #studentListCard .student-grade-select { width: 96px; min-width: 96px; padding: 5px 24px 5px 8px; font-size: 11px; }
  #studentListCard .student-actions { flex-wrap: nowrap; gap: 2px; min-width: 0; }
  #studentListCard .student-actions .btn { flex-basis: 22px; width: 22px; min-width: 22px; height: 24px; font-size: 11px; }
  #studentListCard .row-action-buttons { min-width: 0; gap: 2px; }
  .list-summary { min-height: 38px; padding: 7px 11px; font-size: 12px; }
  .list-summary span { gap: 10px; white-space: nowrap; }
  .list-summary strong { font-size: 15px; }
  .student-list-summary { gap: 10px; }
  .student-list-summary > span + span { padding-left: 10px; }
  .student-statistics { margin-top: 18px; padding-top: 18px; }
  .student-stat-panel { padding: 13px; }
  .student-stat-panel-title { align-items: flex-start; flex-direction: column; gap: 3px; }
  .student-stat-gender-content { gap: 18px; }
  .student-stat-donut { flex-basis: 104px; width: 104px; height: 104px; }
  .student-stat-donut::before { width: 70px; height: 70px; }
  .student-stat-donut strong { font-size: 19px; }
  .attendance-history-table th:nth-child(1),
  .attendance-history-table td:nth-child(1) { width: 52px; min-width: 52px; }
  .attendance-history-table th:nth-child(2),
  .attendance-history-table td:nth-child(2) { width: 140px; min-width: 140px; }
}

@media (prefers-reduced-motion: reduce) {
  .attendance-stats-grid .stat-card,
  .attendance-date-filter input,
  .attendance-column-menu,
  .attendance-column-menu *,
  .attendance-list-filters input,
  .attendance-list-filters select,
  .attendance-list-table tbody tr,
  .attendance-history-table tbody tr { transition-duration: 0.01ms !important; }
  .attendance-stats-grid .stat-card:hover,
  .attendance-date-filter input:focus,
  .attendance-list-filters input:focus,
  .attendance-list-filters select:focus { transform: none; }
}

#schoolListCard .school-table,
#classListCard .school-table { width: 100%; min-width: 0; table-layout: fixed; }
#classListCard .school-table th,
#classListCard .school-table td {
  padding: 9px 6px; text-align: center; vertical-align: middle; white-space: nowrap; text-overflow: ellipsis;
}
#classListCard .school-table thead th {
  height: 48px; font-size: 11px; letter-spacing: 0.02em; overflow: visible;
}
#classListCard .school-table td {
  overflow: hidden;
}
#classListCard .school-table th .school-header-cell {
  display: flex; align-items: center; justify-content: center; min-width: 0; width: 100%;
}
#classListCard .school-sort-button {
  width: 100%; min-height: 34px; padding: 4px 6px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; line-height: 1.2;
}
#classListCard .school-table td a,
#classListCard .school-table td .badge,
#classListCard .school-table td .row-action-buttons {
  display: inline-flex; align-items: center; max-width: 100%;
}
#classListCard .school-table td a {
  width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; display: block;
}
#classListCard .school-table td .badge {
  min-height: 26px; padding: 4px 8px; justify-content: center; white-space: nowrap;
}
#classListCard .row-action-buttons {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
}
#classListCard .row-action-buttons .btn {
  width: 32px; min-width: 32px; height: 32px; padding: 0; justify-content: center; border: 1px solid transparent; box-shadow: 0 1px 2px rgba(15,23,42,0.05);
}
#classListCard .row-action-buttons .btn-primary {
  color: #104775; background: rgba(20,91,150,0.09); border-color: rgba(20,91,150,0.2);
}
#classListCard .row-action-buttons .btn-primary:hover {
  color: #104775; background: rgba(20,91,150,0.16); border-color: rgba(20,91,150,0.32); filter: none;
}
#classListCard .row-action-buttons .btn-danger {
  color: #9a2931; background: rgba(180,35,44,0.08); border-color: rgba(180,35,44,0.18);
}
#classListCard .row-action-buttons .btn-danger:hover {
  color: #8c2029; background: rgba(180,35,44,0.14); border-color: rgba(180,35,44,0.3); filter: none;
}
.dark-mode #classListCard .row-action-buttons .btn-primary { color: #b8d9ff; background: rgba(70,140,200,0.18); border-color: rgba(120,175,225,0.3); }
.dark-mode #classListCard .row-action-buttons .btn-primary:hover { background: rgba(70,140,200,0.28); }
.dark-mode #classListCard .row-action-buttons .btn-danger { color: #ffb9b9; background: rgba(230,90,96,0.16); border-color: rgba(230,110,116,0.3); }
.dark-mode #classListCard .row-action-buttons .btn-danger:hover { background: rgba(230,90,96,0.25); }
#schoolListCard .school-table th:nth-child(1),
#schoolListCard .school-table td:nth-child(1) { width: 52px; }
#schoolListCard .school-table th:nth-child(2),
#schoolListCard .school-table td:nth-child(2) { width: 52px; }
#schoolListCard .school-table th:nth-child(3),
#schoolListCard .school-table td:nth-child(3) { width: 110px; }
#schoolListCard .school-table th:nth-child(4),
#schoolListCard .school-table td:nth-child(4) { width: 200px; }
#schoolListCard .school-table th:nth-child(5),
#schoolListCard .school-table td:nth-child(5) { width: 220px; }
#schoolListCard .school-table th:nth-child(6),
#schoolListCard .school-table td:nth-child(6) { width: 120px; }
#schoolListCard .school-table th:nth-child(7),
#schoolListCard .school-table td:nth-child(7) { width: 100px; }
#schoolListCard .school-table th:nth-child(8),
#schoolListCard .school-table td:nth-child(8) { width: 110px; }
#schoolListCard .school-table th:nth-child(9),
#schoolListCard .school-table td:nth-child(9) { width: 120px; }
#classListCard .school-table th:nth-child(1),
#classListCard .school-table td:nth-child(1) { width: 52px; }
#classListCard .school-table th:nth-child(2),
#classListCard .school-table td:nth-child(2) { width: 52px; }
#classListCard .school-table th:nth-child(3),
#classListCard .school-table td:nth-child(3) { width: 110px; }
#classListCard .school-table th:nth-child(4),
#classListCard .school-table td:nth-child(4) { width: 200px; }
#classListCard .school-table th:nth-child(5),
#classListCard .school-table td:nth-child(5) { width: 90px; }
#classListCard .school-table th:nth-child(6),
#classListCard .school-table td:nth-child(6) { width: 160px; }
#classListCard .school-table th:nth-child(7),
#classListCard .school-table td:nth-child(7) { width: 90px; }
#classListCard .school-table th:nth-child(8),
#classListCard .school-table td:nth-child(8) { width: 110px; }
#classListCard .school-table th:nth-child(9),
#classListCard .school-table td:nth-child(9) { width: 120px; }

@media (max-width: 900px) {
  #schoolListCard .school-table th:nth-child(4),
  #schoolListCard .school-table td:nth-child(4),
  #schoolListCard .school-table th:nth-child(5),
  #schoolListCard .school-table td:nth-child(5),
  #schoolListCard .school-table th:nth-child(6),
  #schoolListCard .school-table td:nth-child(6),
  #classListCard .school-table th:nth-child(4),
  #classListCard .school-table td:nth-child(4),
  #classListCard .school-table th:nth-child(5),
  #classListCard .school-table td:nth-child(5) { display: none; }
  #schoolListCard .school-table th:nth-child(1),
  #schoolListCard .school-table td:nth-child(1) { width: 52px; }
  #schoolListCard .school-table th:nth-child(2),
  #schoolListCard .school-table td:nth-child(2) { width: 52px; }
  #schoolListCard .school-table th:nth-child(3),
  #schoolListCard .school-table td:nth-child(3) { width: 130px; }
  #schoolListCard .school-table th:nth-child(7),
  #schoolListCard .school-table td:nth-child(7) { width: 120px; }
  #schoolListCard .school-table th:nth-child(8),
  #schoolListCard .school-table td:nth-child(8) { width: 110px; }
  #schoolListCard .school-table th:nth-child(9),
  #schoolListCard .school-table td:nth-child(9) { width: 130px; }
  #classListCard .school-table th:nth-child(1),
  #classListCard .school-table td:nth-child(1) { width: 52px; }
  #classListCard .school-table th:nth-child(2),
  #classListCard .school-table td:nth-child(2) { width: 52px; }
  #classListCard .school-table th:nth-child(3),
  #classListCard .school-table td:nth-child(3) { width: 170px; }
  #classListCard .school-table th:nth-child(6),
  #classListCard .school-table td:nth-child(6) { width: 150px; }
  #classListCard .school-table th:nth-child(7),
  #classListCard .school-table td:nth-child(7) { width: 110px; }
  #classListCard .school-table th:nth-child(8),
  #classListCard .school-table td:nth-child(8) { width: 120px; }
  #classListCard .school-table th:nth-child(9),
  #classListCard .school-table td:nth-child(9) { width: 130px; }
}

@media (max-width: 430px) {
  #schoolListCard .school-table th:nth-child(2),
  #schoolListCard .school-table td:nth-child(2),
  #schoolListCard .school-table th:nth-child(4),
  #schoolListCard .school-table td:nth-child(4),
  #schoolListCard .school-table th:nth-child(5),
  #schoolListCard .school-table td:nth-child(5) { display: none; }
  #schoolListCard .school-table th:nth-child(1),
  #schoolListCard .school-table td:nth-child(1) { width: 44px; }
  #schoolListCard .school-table th:nth-child(3),
  #schoolListCard .school-table td:nth-child(3) { width: 150px; }
  #schoolListCard .school-table th:nth-child(6),
  #schoolListCard .school-table td:nth-child(6) { width: 130px; }
  #schoolListCard .school-table th:nth-child(7),
  #schoolListCard .school-table td:nth-child(7) { width: 110px; }
  #schoolListCard .school-table th:nth-child(8),
  #schoolListCard .school-table td:nth-child(8) { width: 120px; }
  #schoolListCard .school-table th:nth-child(9),
  #schoolListCard .school-table td:nth-child(9) { width: 120px; }
  #classListCard .school-table th:nth-child(2),
  #classListCard .school-table td:nth-child(2),
  #classListCard .school-table th:nth-child(5),
  #classListCard .school-table td:nth-child(5) { display: none; }
  #classListCard .school-table th:nth-child(1),
  #classListCard .school-table td:nth-child(1) { width: 44px; }
  #classListCard .school-table th:nth-child(3),
  #classListCard .school-table td:nth-child(3) { width: 150px; }
  #classListCard .school-table th:nth-child(4),
  #classListCard .school-table td:nth-child(4) { width: 140px; }
  #classListCard .school-table th:nth-child(6),
  #classListCard .school-table td:nth-child(6) { width: 130px; }
  #classListCard .school-table th:nth-child(7),
  #classListCard .school-table td:nth-child(7) { width: 110px; }
  #classListCard .school-table th:nth-child(8),
  #classListCard .school-table td:nth-child(8) { width: 120px; }
  #classListCard .school-table th:nth-child(9),
  #classListCard .school-table td:nth-child(9) { width: 120px; }
  #schoolListCard .row-action-buttons,
  #classListCard .row-action-buttons { min-width: 0; gap: 2px; }
  #schoolListCard .row-action-buttons .btn,
  #classListCard .row-action-buttons .btn { flex-basis: 22px; width: 22px; min-width: 22px; height: 24px; padding: 0; font-size: 11px; }
}

#studentListCard .school-table td:nth-child(4),
#studentListCard .school-table td:nth-child(5),
#schoolListCard .school-table td:nth-child(4),
#schoolListCard .school-table td:nth-child(5),
#attendance .attendance-list-table td:nth-child(3),
#attendance .attendance-list-table td:nth-child(4),
#usersModal .school-table td:not([colspan]):nth-child(1),
#usersModal .school-table td:not([colspan]):nth-child(2) {
  text-align: left !important; padding-left: 12px;
}
#attendanceHistoryCard .attendance-history-table th:first-child,
#attendanceHistoryCard .attendance-history-table td:first-child { text-align: center; }
#attendanceHistoryCard .attendance-history-table th:nth-child(1),
#attendanceHistoryCard .attendance-history-table td:not([colspan]):nth-child(1) {
  position: sticky; left: 0; z-index: 2;
}
#attendanceHistoryCard .attendance-history-table th:nth-child(2),
#attendanceHistoryCard .attendance-history-table td:not([colspan]):nth-child(2) {
  position: sticky; left: 52px; z-index: 2; width: 140px; min-width: 140px; padding-left: 12px; text-align: left; box-shadow: 4px 0 6px rgba(15,23,42,0.08);
}
#attendanceHistoryCard .attendance-history-table thead th { position: sticky; top: 0; z-index: 3; }
#attendanceHistoryCard .attendance-history-table thead th:nth-child(1) { left: 0; z-index: 5; }
#attendanceHistoryCard .attendance-history-table thead th:nth-child(2) { left: 52px; z-index: 5; }
#attendanceHistoryCard .attendance-history-table tbody td:not([colspan]):nth-child(1),
#attendanceHistoryCard .attendance-history-table tbody td:not([colspan]):nth-child(2) { background: var(--card); }
#attendanceHistoryCard .attendance-history-table tbody tr:hover td:nth-child(1),
#attendanceHistoryCard .attendance-history-table tbody tr:hover td:nth-child(2) {
  z-index: 4; background: var(--card) !important;
}
.dark-mode #attendanceHistoryCard .attendance-history-table tbody td:nth-child(1),
.dark-mode #attendanceHistoryCard .attendance-history-table tbody td:nth-child(2) { background: var(--card); }
.dark-mode #attendanceHistoryCard .attendance-history-table tbody tr:hover td:nth-child(1),
.dark-mode #attendanceHistoryCard .attendance-history-table tbody tr:hover td:nth-child(2) {
  z-index: 4; background: var(--card) !important;
}
.dark-mode #attendanceHistoryCard .attendance-history-table td:nth-child(2) { box-shadow: 4px 0 6px rgba(0,0,0,0.24); }

#studentListCard { --student-grade-column-width: 130px; }
#studentListCard .school-table th:nth-child(8),
#studentListCard .school-table td:nth-child(8) {
  width: var(--student-grade-column-width); min-width: 0; max-width: var(--student-grade-column-width); overflow: hidden; opacity: 1;
  transition: width 0.3s cubic-bezier(0.2, 0.8, 0.2, 1), min-width 0.3s ease, max-width 0.3s ease, padding 0.3s ease, opacity 0.2s ease, visibility 0s linear 0.3s;
}
#studentListCard.student-grade-column-hidden .school-table th:nth-child(8),
#studentListCard.student-grade-column-hidden .school-table td:nth-child(8) {
  width: 0 !important; min-width: 0 !important; max-width: 0 !important; padding-left: 0 !important; padding-right: 0 !important;
  border-color: transparent; opacity: 0; visibility: hidden; pointer-events: none; transition-delay: 0s;
}
@media (max-width: 768px) {
  #studentListCard { --student-grade-column-width: 10%; }
}
#studentListCard .student-toolbar-controls {
  grid-template-columns: minmax(200px, 1.4fr) minmax(145px, 0.9fr) minmax(135px, 0.8fr) auto auto auto;
  flex-basis: 760px;
}
.student-grade-visibility-toggle {
  position: relative; display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 42px; padding: 0 10px;
  border: 1px solid var(--border); border-radius: 8px; background: var(--card); color: var(--text); font-size: 12px; font-weight: 600;
  white-space: nowrap; cursor: pointer;
}
.clear-column-filters { margin-left: auto; white-space: nowrap; }
.table-filter-actions { display: flex; justify-content: flex-end; margin: -8px 0 12px; }
#studentListCard .student-toolbar-controls input,
#studentListCard .student-toolbar-controls select,
.grading-filters select {
  transition: border-color 0.18s ease, box-shadow 0.18s ease;
}
#studentListCard .student-toolbar-controls input {
  transition: border-color 0.18s ease, box-shadow 0.18s ease, transform 0.18s ease;
}
#studentListCard .student-toolbar-controls input:focus,
#studentListCard .student-toolbar-controls select:focus,
.grading-filters select:focus {
  outline: none; border-color: var(--primary); box-shadow: 0 0 0 3px rgba(33, 150, 243, 0.16);
}
#studentListCard .student-toolbar-controls input:focus { transform: translateY(-1px); }
.student-grade-visibility-toggle input {
  position: absolute; width: 1px; height: 1px; min-height: 0; margin: 0; padding: 0; opacity: 0; pointer-events: none;
}
.student-grade-toggle-track {
  position: relative; width: 32px; height: 18px; flex: 0 0 32px; border-radius: 999px; background: #aab4c2; transition: background-color 0.18s ease;
}
.student-grade-toggle-track::after {
  content: ""; position: absolute; top: 2px; left: 2px; width: 14px; height: 14px; border-radius: 50%; background: #fff;
  box-shadow: 0 1px 2px rgba(15,23,42,0.22); transition: transform 0.18s ease;
}
.student-grade-visibility-toggle input:checked + .student-grade-toggle-track { background: var(--primary); }
.student-grade-visibility-toggle input:checked + .student-grade-toggle-track::after { transform: translateX(14px); }
.student-grade-visibility-toggle input:focus-visible + .student-grade-toggle-track { outline: 2px solid var(--primary); outline-offset: 3px; }
.dark-mode .student-grade-toggle-track { background: #64748b; }
@media (max-width: 1100px) {
  #studentListCard .student-toolbar-controls { grid-template-columns: minmax(200px, 1fr) minmax(140px, 180px); }
}
@media (max-width: 900px) {
  #studentListCard .student-toolbar-controls { grid-template-columns: minmax(180px, 1fr) minmax(140px, 180px); }
}
@media (max-width: 768px) {
  #studentListCard .student-toolbar-controls { grid-template-columns: 1fr; width: 100%; }
}
@media (max-width: 900px) {
  .learning-policy-grid { grid-template-columns: 1fr; }
}
@media (max-width: 768px) {
  .learning-result-stats { grid-template-columns: 1fr; }
}

#classListCard .school-table {
  width: 100%; min-width: 1100px; table-layout: fixed;
}
#classListCard .school-table th,
#classListCard .school-table td {
  display: table-cell !important;
  min-width: 0; overflow: visible; text-overflow: clip; white-space: normal;
  overflow-wrap: anywhere; word-break: normal; padding: 8px 4px;
}
#classListCard .school-table thead th {
  position: sticky; top: 0; z-index: 6;
  background: #eef2f7; box-shadow: inset 0 -1px 0 var(--border);
}
.dark-mode #classListCard .school-table thead th { background: #202b40; }
#classListCard .school-table th:nth-child(1),
#classListCard .school-table td:nth-child(1) { width: 4.5%; }
#classListCard .school-table th:nth-child(2),
#classListCard .school-table td:nth-child(2) { width: 5%; }
#classListCard .school-table th:nth-child(3),
#classListCard .school-table td:nth-child(3) { width: 10.5%; }
#classListCard .school-table th:nth-child(4),
#classListCard .school-table td:nth-child(4) { width: 9.5%; }
#classListCard .school-table th:nth-child(5),
#classListCard .school-table td:nth-child(5) { width: 22.5%; }
#classListCard .school-table th:nth-child(6),
#classListCard .school-table td:nth-child(6) { width: 7%; }
#classListCard .school-table th:nth-child(7),
#classListCard .school-table td:nth-child(7) { width: 11.5%; }
#classListCard .school-table th:nth-child(8),
#classListCard .school-table td:nth-child(8) { width: 8.5%; }
#classListCard .school-table th:nth-child(9),
#classListCard .school-table td:nth-child(9) { width: 12.5%; }
#classListCard .school-table th:nth-child(10),
#classListCard .school-table td:nth-child(10) { width: 8.5%; }
#classListCard .school-sort-button {
  min-height: 38px; padding: 6px 8px; gap: 6px;
}
#classListCard .school-sort-button .sort-indicator { flex: 0 0 16px; }
#classListCard .school-table td a {
  width: 100%; overflow: visible; text-overflow: clip; white-space: normal; display: block;
}
#classListCard .class-empty-value {
  display: block; width: 100%; text-align: center;
}
#classListCard .school-table td .badge {
  min-height: 30px; padding: 6px 10px; line-height: 1.3;
}

#teacherListCard .student-table-scroll { max-height: min(68vh, 620px); }
#teacherListCard .school-table { width: 100%; min-width: 980px; table-layout: fixed; }
#teacherListCard .school-table thead th {
  position: sticky; top: 0; z-index: 6;
  background: #eef2f7; box-shadow: inset 0 -1px 0 var(--border);
}
.dark-mode #teacherListCard .school-table thead th { background: #202b40; }
#teacherListCard .school-table th,
#teacherListCard .school-table td {
  min-width: 0; padding: 8px 6px; vertical-align: middle;
}
#teacherListCard .school-table th .school-header-cell { width: 100%; }
#teacherListCard .school-table th .school-header-static { white-space: nowrap; }
#teacherListCard .school-table th:nth-child(1),
#teacherListCard .school-table td:nth-child(1) { width: 7%; }
#teacherListCard .school-table th:nth-child(2),
#teacherListCard .school-table td:nth-child(2) { width: 14%; }
#teacherListCard .school-table th:nth-child(3),
#teacherListCard .school-table td:nth-child(3) { width: 23%; }
#teacherListCard .school-table th:nth-child(4),
#teacherListCard .school-table td:nth-child(4) { width: 31%; }
#teacherListCard .school-table th:nth-child(5),
#teacherListCard .school-table td:nth-child(5) { width: 14%; }
#teacherListCard .school-table th:nth-child(6),
#teacherListCard .school-table td:nth-child(6) { width: 11%; }
#teacherListCard .school-table td:nth-child(3),
#teacherListCard .school-table td:nth-child(4) { text-align: left; overflow-wrap: anywhere; }
#teacherListCard .teacher-empty-value { display: block; width: 100%; text-align: center; }
#teacherListCard .row-action-buttons { gap: 8px; }
#teacherListCard .row-action-buttons .btn { flex-basis: 32px; width: 32px; min-width: 32px; }

@media (max-width: 600px) {
  #teacherListCard .school-table { min-width: 900px; }
  #teacherListCard .teacher-toolbar select { width: 100%; }
}

#schoolListCard .school-table th.internal-code-column,
#schoolListCard .school-table td.internal-code-column,
#studentListCard .school-table th.internal-code-column,
#studentListCard .school-table td.internal-code-column,
#teacherListCard .school-table th.internal-code-column,
#teacherListCard .school-table td.internal-code-column,
#attendance .school-table th.internal-code-column,
#attendance .school-table td.internal-code-column { display: none !important; }

@media (max-width: 600px) {
  #attendance .attendance-page-filters {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) minmax(0, 0.8fr) minmax(0, 1.2fr);
    align-items: stretch;
    gap: 5px;
  }
  #attendance .attendance-page-filters > .filter-select-picker,
  #attendance .attendance-page-filters > select:not([hidden]) {
    width: 100%;
    min-width: 0;
  }
  #attendance .attendance-page-filters > .filter-select-picker .filter-select-trigger {
    min-height: 44px;
    height: 44px;
    padding: 5px 6px;
    gap: 3px;
    font-size: 10px;
  }
  #attendance .attendance-page-filters > .filter-select-picker .filter-select-value {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  #attendance .attendance-page-filters > .filter-select-picker .filter-select-chevron {
    flex: 0 0 10px;
    width: 10px;
  }
  #attendance .attendance-page-filters > .attendance-date-filter {
    display: block;
    min-width: 0;
    width: auto;
    gap: 2px;
    font-size: 9px;
  }
  #attendance .attendance-date-label { display: none; }
  #attendance .attendance-date-filter input {
    min-height: 44px;
    height: 44px;
    padding: 4px 2px;
    font-size: 10px;
  }
  #attendance .attendance-stats-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 5px;
  }
  #attendance .attendance-stats-grid .stat-card {
    min-height: 72px;
    padding: 7px 4px;
    gap: 3px;
    flex-direction: column;
    justify-content: center;
    text-align: center;
  }
  #attendance .attendance-stats-grid .stat-icon {
    width: 23px;
    height: 23px;
    border-radius: 7px;
    font-size: 13px;
  }
  #attendance .attendance-stats-grid .stat-info { min-width: 0; }
  #attendance .attendance-stats-grid .stat-info h3 { margin: 0; font-size: 16px; line-height: 1.1; }
  #attendance .attendance-stats-grid .stat-info p { margin: 3px 0 0; font-size: 9px; line-height: 1.1; white-space: nowrap; }
  #attendance .attendance-list-toolbar {
    display: grid;
    grid-template-columns: 72px minmax(0, 1fr) 94px;
    gap: 5px;
    align-items: center;
  }
  #attendance .attendance-list-toolbar .list-summary {
    width: auto;
    min-width: 0;
    min-height: 40px;
    padding: 4px;
    justify-content: center;
    font-size: 9px;
  }
  #attendance .attendance-list-toolbar .list-summary span {
    flex-direction: column;
    justify-content: center;
    gap: 1px;
    line-height: 1.05;
    white-space: nowrap;
  }
  #attendance .attendance-list-toolbar .list-summary strong { font-size: 15px; }
  #attendance .attendance-list-filters {
    display: contents;
    min-width: 0;
  }
  #attendance .attendance-list-filters input,
  #attendance .attendance-list-filters > .filter-select-picker,
  #attendance .attendance-list-filters > select {
    width: 100%;
    min-width: 0;
    max-width: none;
    min-height: 40px;
  }
  #attendance .attendance-list-filters input {
    grid-column: 2;
    padding: 6px;
    font-size: 11px;
  }
  #attendance .attendance-list-filters > .filter-select-picker {
    grid-column: 3;
  }
  #attendance .attendance-list-filters > .filter-select-picker .filter-select-trigger {
    min-height: 40px;
    height: 40px;
    padding: 5px 6px;
    font-size: 10px;
  }
  #attendance .attendance-list-filters > .btn { display: none; }
  #attendanceHistoryCard { display: none !important; }
  #attendance .attendance-list-heading { font-size: 14px; }
  #attendance .attendance-list-scroll { overflow-x: hidden; }
  #attendance .attendance-list-table {
    width: 100%;
    min-width: 0;
    table-layout: fixed;
  }
  #attendance .attendance-list-table th:nth-child(2),
  #attendance .attendance-list-table td:nth-child(2),
  #attendance .attendance-list-table th:nth-child(4),
  #attendance .attendance-list-table td:nth-child(4),
  #attendance .attendance-list-table th:nth-child(5),
  #attendance .attendance-list-table td:nth-child(5),
  #attendance .attendance-list-table th:nth-child(7),
  #attendance .attendance-list-table td:nth-child(7) {
    display: none !important;
  }
  #attendance .attendance-list-table th:nth-child(1),
  #attendance .attendance-list-table td:nth-child(1) { width: 12%; }
  #attendance .attendance-list-table th:nth-child(3),
  #attendance .attendance-list-table td:nth-child(3) {
    width: 64%;
    padding-left: 8px;
    padding-right: 4px;
    text-align: left;
  }
  #attendance .attendance-list-table th:nth-child(6),
  #attendance .attendance-list-table td:nth-child(6) {
    width: 24%;
    padding-left: 4px;
    padding-right: 4px;
  }
  #attendance .attendance-list-table th,
  #attendance .attendance-list-table td {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  #attendance .attendance-list-table th:nth-child(1) { font-size: 10px; }
  #attendance .attendance-list-table th:nth-child(3) .school-header-cell,
  #attendance .attendance-list-table th:nth-child(3) .attendance-filter-button { justify-content: flex-start; }
  #attendance .attendance-list-table .school-sort-button {
    min-height: 40px;
    padding: 4px;
    font-size: 10px;
    letter-spacing: 0.01em;
  }
  #attendance .attendance-list-table td:nth-child(1),
  #attendance .attendance-list-table td:nth-child(3) {
    font-size: 14px;
    line-height: 1.25;
  }
  #attendance .attendance-list-table .attendance-present-checkbox {
    width: 22px;
    height: 22px;
    min-height: 22px;
    cursor: pointer;
    touch-action: manipulation;
  }
  #attendance .attendance-history-heading .header-actions { gap: 6px; }
  #attendance .attendance-history-heading .filter-select-picker { min-width: 0; width: 100%; }
  #attendance .attendance-history-scroll {
    max-height: 55vh;
    overflow: auto;
    overscroll-behavior-x: contain;
    touch-action: pan-x pan-y;
  }
}

@media (max-width: 360px) {
  #attendance .card { padding: 11px; }
  #attendance .attendance-list-table th,
  #attendance .attendance-list-table td { padding-top: 7px; padding-bottom: 7px; }
  #attendance .attendance-list-table th:nth-child(1),
  #attendance .attendance-list-table td:nth-child(1) { width: 14%; }
  #attendance .attendance-list-table th:nth-child(3),
  #attendance .attendance-list-table td:nth-child(3) { width: 62%; }
  #attendance .attendance-list-table th:nth-child(6),
  #attendance .attendance-list-table td:nth-child(6) { width: 24%; }
}

.assignment-table-wrap {
  position: relative;
  max-height: min(68vh, 620px);
  overflow: auto;
  overscroll-behavior: contain;
  border: 1px solid rgba(216, 224, 233, 0.8);
  border-radius: 8px;
  background: var(--card);
}
.assignment-table-wrap::-webkit-scrollbar { width: 10px; height: 10px; }
.assignment-table-wrap::-webkit-scrollbar-thumb { background: rgba(20, 91, 150, 0.4); border-radius: 999px; }
.assignment-table-wrap::-webkit-scrollbar-track { background: rgba(148, 163, 184, 0.1); }
#assignmentListTable, #gradingQueueTable { table-layout: fixed; }
#assignmentListTable th:nth-child(1), #assignmentListTable td:nth-child(1),
#gradingQueueTable th:nth-child(1), #gradingQueueTable td:nth-child(1) { width: 54px; min-width: 54px; }
#assignmentListTable th:nth-child(2), #assignmentListTable td:nth-child(2) { width: 230px; min-width: 230px; }
#gradingQueueTable th:nth-child(2), #gradingQueueTable td:nth-child(2) { width: 180px; min-width: 180px; }
#assignmentListTable thead th, #gradingQueueTable thead th {
  position: sticky;
  top: 0;
  z-index: 6;
  background: #eef2f7;
  box-shadow: inset 0 -1px 0 var(--border);
}
.dark-mode #assignmentListTable thead th, .dark-mode #gradingQueueTable thead th { background: #202b40; }
#assignmentListTable th, #assignmentListTable td,
#gradingQueueTable th, #gradingQueueTable td { left: auto; }

/* Shared responsive guardrails for the desktop, tablet, and mobile layouts. */
html { scroll-padding-top: 76px; }
body { overflow-x: hidden; }
.main, .section, .card, .header, .header > *, .header-actions,
.form-grid, .form-grid > *, .form-group, .table-wrap, .modal, .modal-body {
  min-width: 0;
}
.section { overflow-wrap: anywhere; }
.card-title, .header h1, .form-group label, .modal-header h3, .toast,
.nav-item, .sidebar-nav-heading, .badge {
  overflow-wrap: anywhere;
}
.header h1 { flex: 1 1 260px; }
.header-actions { max-width: 100%; }
.btn { max-width: 100%; white-space: normal; overflow-wrap: anywhere; }
.table-wrap, .assignment-table-wrap, .attendance-history-scroll, .student-table-scroll {
  max-width: 100%;
  overflow-x: auto;
  overscroll-behavior-x: contain;
  -webkit-overflow-scrolling: touch;
}
.school-table { max-width: 100%; }
.modal-overlay { padding: clamp(8px, 2vw, 24px); }
.modal { width: min(100%, 960px); max-width: 100%; }
.modal-body { overflow-x: auto; }
.chart-grid { grid-template-columns: repeat(auto-fit, minmax(min(100%, 320px), 1fr)); }
.form-grid { grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr)); }
.sidebar-backdrop { display: none; }

@media (max-width: 1024px) {
  :root { --mobile-sidebar-width: min(86vw, 320px, calc(100vw - 48px)); }
  .main {
    width: 100%;
    max-width: 100%;
    margin-left: 0;
    padding: calc(68px + env(safe-area-inset-top, 0px)) clamp(12px, 3vw, 24px) 24px;
  }
  .mobile-toggle {
    display: inline-flex;
    position: fixed;
    top: max(7px, env(safe-area-inset-top, 0px));
    left: max(10px, env(safe-area-inset-left));
    z-index: 102;
    width: 44px;
    min-width: 44px;
    height: 44px;
    min-height: 44px;
    padding: 0;
    align-items: center;
    justify-content: center;
    border-radius: 12px;
    background: var(--card);
    box-shadow: 0 2px 8px rgba(15, 23, 42, 0.1);
    font-size: 20px;
    line-height: 1;
    touch-action: manipulation;
  }
  .sidebar {
    display: flex !important;
    position: fixed;
    inset: 0 auto 0 0;
    width: var(--mobile-sidebar-width);
    max-width: none;
    height: 100vh;
    height: 100dvh;
    padding: max(20px, env(safe-area-inset-top)) 14px max(16px, env(safe-area-inset-bottom));
    z-index: 101;
    transform: translateX(-105%);
    visibility: hidden;
    transition: transform 0.24s ease, visibility 0s linear 0.24s;
    box-shadow: 8px 0 32px rgba(15, 23, 42, 0.18);
  }
  .sidebar.open {
    transform: translateX(0);
    visibility: visible;
    transition: transform 0.24s ease, visibility 0s;
  }
  .sidebar-backdrop {
    display: block;
    position: fixed;
    inset: 0;
    z-index: 100;
    border: 0;
    background: rgba(15, 23, 42, 0.42);
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.2s ease, visibility 0s linear 0.2s;
    touch-action: manipulation;
    -webkit-tap-highlight-color: transparent;
    cursor: default;
  }
  body.sidebar-open { overflow: hidden; }
  body.sidebar-open .sidebar-backdrop {
    opacity: 1;
    visibility: visible;
    transition: opacity 0.2s ease, visibility 0s;
  }
  body.sidebar-open .mobile-toggle { visibility: hidden; }
  .header { gap: 12px; }
  .header-actions { width: 100%; margin-left: 0; justify-content: flex-start; }
  .stats-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .chart-grid { grid-template-columns: minmax(0, 1fr); }
  .chart-container { min-width: 0; }
  .grading-filters, .grading-batch-controls { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .timetable-page-header .header-actions { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .timetable-page-header .header-actions > :last-child { grid-column: 1 / -1; }
  .study-group-form-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .study-group-form-grid > .study-group-roster-field { grid-column: 1 / -1; }
}

@media (max-width: 600px) {
  html { scroll-padding-top: 66px; }
  .main { padding: calc(68px + env(safe-area-inset-top, 0px)) 12px 18px; }
  .header { flex-direction: column; align-items: stretch; gap: 10px; margin-bottom: 14px; }
  .header h1 { flex: none; width: 100%; margin: 0; font-size: clamp(20px, 6vw, 25px); }
  .header-actions { display: flex; flex-direction: column; align-items: stretch; gap: 8px; }
  .header-actions > *, .header-actions > label, .header-actions > .btn,
  .header-actions > input, .header-actions > select,
  .header-actions > .filter-select-picker { width: 100%; min-width: 0; max-width: 100%; }
  .card { padding: 14px; margin-bottom: 14px; border-radius: 10px; }
  .card + .card { margin-top: 12px; }
  .card-title { align-items: flex-start; font-size: 16px; }
  .stats-grid, .assignment-stats { grid-template-columns: minmax(0, 1fr); gap: 8px; }
  .stat-card { min-width: 0; }
  .form-grid, .form-grid.assignment-form, .form-grid.assignment-form.is-ic3,
  .study-group-form-grid, .grading-filters, .grading-batch-controls,
  .timetable-page-header .header-actions, .learning-policy-grid {
    grid-template-columns: minmax(0, 1fr);
  }
  .study-group-form-grid > .study-group-roster-field,
  .assignment-form .assignment-project-group,
  .timetable-page-header .header-actions > :last-child { grid-column: auto; }
  .form-group input, .form-group select, .form-group textarea,
  .search-bar input, .search-bar select, .form-grid .btn { width: 100%; min-width: 0; }
  .form-group { max-width: 100%; }
  .modal-overlay { align-items: flex-start; padding: max(8px, env(safe-area-inset-top)) 8px max(8px, env(safe-area-inset-bottom)); }
  .modal { width: 100%; max-height: calc(100dvh - 16px); margin: 0; border-radius: 12px; }
  .modal-header, .modal-body, .modal-footer { padding: 12px; }
  .modal-header { align-items: flex-start; gap: 8px; }
  .modal-header h3 { min-width: 0; font-size: 16px; }
  .modal-footer { gap: 8px; }
  .modal-footer .btn { flex: 1 1 100%; justify-content: center; }
  .student-toolbar-controls, .student-search-bar, .search-bar { grid-template-columns: minmax(0, 1fr); }
  .attendance-page-filters { grid-template-columns: minmax(0, 1fr); }
  .attendance-history-heading { align-items: stretch; }
  .attendance-history-heading .header-actions { display: flex; flex-direction: column; }
  .attendance-history-scope { width: 100%; }
  .school-list-toolbar, .student-toolbar-row { align-items: stretch; }
  .school-list-toolbar { flex-wrap: wrap; }
  .chart-container { height: min(66vw, 260px); min-height: 190px; padding: 10px; }
  .assignment-project-panel, .study-group-subject-panel {
    left: 0;
    right: auto;
    width: min(100%, calc(100vw - 40px));
    max-width: calc(100vw - 40px);
  }
  .student-detail-grid { grid-template-columns: minmax(0, 1fr); }
  .student-progress-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .record-link-bar { flex-wrap: wrap; }
  .record-breadcrumb { min-width: 0; max-width: 100%; flex-wrap: wrap; overflow-wrap: anywhere; }
}

@media (max-width: 380px) {
  .main { padding-right: 8px; padding-left: 8px; }
  .card { padding: 11px; }
  .mobile-toggle { min-height: 40px; padding: 7px 10px; }
  .student-progress-stats, .study-group-roster { grid-template-columns: minmax(0, 1fr); }
  .btn { padding-right: 10px; padding-left: 10px; }
}
@media (max-width: 600px) {
  #studentDetailModal .modal { max-height: calc(100dvh - 16px); margin: 8px auto; }
  #studentDetailModal .modal-header { position: sticky; top: 0; z-index: 2; background: var(--card); }
  #studentDetailModal .modal-close { width: 42px; height: 42px; flex: 0 0 42px; color: var(--text); font-size: 30px; }
  #studentDetailModal .modal-footer { position: sticky; bottom: 0; z-index: 2; flex-wrap: wrap; background: var(--card); }
  #studentDetailModal .modal-footer .btn { flex: 1 1 130px; }
}

@media (max-width: 600px) {
  .mobile-row-context {
    display: block;
    min-height: 38px;
    margin: 0 0 8px;
    padding: 9px 11px;
    border: 1px solid var(--border);
    border-left: 3px solid var(--primary);
    border-radius: 8px;
    background: var(--info-soft);
    color: var(--text-light);
    font-size: 12px;
    line-height: 1.4;
    overflow-wrap: anywhere;
  }
  .mobile-row-context.is-active { color: var(--text); font-weight: 600; }
  #schoolListCard .table-wrap {
    width: 100%;
    overflow-x: auto;
    overflow-y: hidden;
    overscroll-behavior-x: contain;
    -webkit-overflow-scrolling: touch;
    touch-action: pan-x pan-y;
  }
  #schoolListCard .school-table {
    width: 980px;
    min-width: 980px;
    max-width: none;
    table-layout: fixed;
  }
  #schoolListCard .school-table th:nth-child(2),
  #schoolListCard .school-table td:nth-child(2),
  #schoolListCard .school-table th:nth-child(4),
  #schoolListCard .school-table td:nth-child(4),
  #schoolListCard .school-table th:nth-child(5),
  #schoolListCard .school-table td:nth-child(5),
  #schoolListCard .school-table th:nth-child(6),
  #schoolListCard .school-table td:nth-child(6),
  #schoolListCard .school-table th:nth-child(7),
  #schoolListCard .school-table td:nth-child(7) { display: table-cell; }
  #students > .header .header-actions {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 6px;
  }
  #students > .header .header-actions > .btn {
    width: 100%;
    min-width: 0;
    min-height: 42px;
    padding: 6px 4px;
    font-size: 11px;
    line-height: 1.25;
    text-align: center;
    justify-content: center;
  }
  #studentListCard .student-toolbar-row {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 8px;
    margin-bottom: 8px;
  }
  #studentListCard .student-list-summary { align-self: flex-start; }
  #studentListCard .student-toolbar-controls {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 7px;
    width: 100%;
    flex: 0 1 auto;
    align-content: start;
  }
  #studentListCard .student-toolbar-controls > #searchEmp { grid-column: 1 / -1; }
  #studentListCard .student-toolbar-controls > .filter-select-picker {
    width: 100%;
    min-width: 0;
  }
  #studentListCard .student-toolbar-controls > button {
    min-width: 0;
    min-height: 38px;
    padding: 6px;
    font-size: 11px;
    line-height: 1.2;
    white-space: normal;
  }
  #studentListCard .student-grade-visibility-toggle {
    grid-column: 1 / -1;
    min-height: 34px;
    width: max-content;
    max-width: 100%;
  }
  #studentListCard .student-table-scroll {
    width: 100%;
    overflow-x: auto;
    overflow-y: visible;
    overscroll-behavior-x: contain;
    -webkit-overflow-scrolling: touch;
    touch-action: pan-x pan-y;
  }
  #studentListCard .school-table {
    width: 1108px;
    min-width: 1108px;
    max-width: none;
    table-layout: fixed;
  }
  #studentListCard .school-table th,
  #studentListCard .school-table td {
    padding: 8px 6px;
    white-space: normal;
    overflow-wrap: anywhere;
    vertical-align: middle;
  }
  #studentListCard .school-table th:nth-child(1),
  #studentListCard .school-table td:nth-child(1) { width: 44px !important; }
  #studentListCard .school-table th:nth-child(2),
  #studentListCard .school-table td:nth-child(2) { width: 52px !important; }
  #studentListCard .school-table th:nth-child(4),
  #studentListCard .school-table td:nth-child(4) { width: 210px !important; }
  #studentListCard .school-table th:nth-child(5),
  #studentListCard .school-table td:nth-child(5) { width: 240px !important; }
  #studentListCard .school-table th:nth-child(6),
  #studentListCard .school-table td:nth-child(6) { width: 92px !important; }
  #studentListCard .school-table th:nth-child(7),
  #studentListCard .school-table td:nth-child(7) { width: 110px !important; }
  #studentListCard .school-table th:nth-child(8),
  #studentListCard .school-table td:nth-child(8) { width: 130px !important; }
  #studentListCard .school-table th:nth-child(9),
  #studentListCard .school-table td:nth-child(9) { width: 130px !important; }
  #studentListCard .school-table th:nth-child(10),
  #studentListCard .school-table td:nth-child(10) { width: 100px !important; }
  #studentListCard .school-table .row-action-buttons { gap: 6px; }
  #studentListCard .school-table .student-actions .btn {
    flex-basis: 30px;
    width: 30px;
    min-width: 30px;
    height: 30px;
    font-size: 13px;
  }
  #studentListCard .school-table th:nth-child(4),
  #studentListCard .school-table td:nth-child(4) { display: table-cell; }
}

@media (prefers-reduced-motion: reduce) {
  .sidebar, .sidebar-backdrop { transition-duration: 0.01ms !important; }
}

#dashboard .chart-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  align-items: stretch;
}
#dashboard .chart-grid .card {
  min-width: 0;
  height: 100%;
  margin: 0;
}
#dashboard .chart-container { height: 300px; }
#dashboard .stats-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }

@media (min-width: 769px) and (max-width: 1100px) {
  #dashboard .stats-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

@media (max-width: 768px) {
  #dashboard .chart-grid { grid-template-columns: minmax(0, 1fr); }
  #dashboard .stats-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 380px) {
  #dashboard .stats-grid { grid-template-columns: minmax(0, 1fr); }
}

@media (max-width: 600px) {
  #students > .header > .header-actions {
    display: flex;
    flex: 0 0 auto;
    flex-direction: row;
    width: auto;
    align-items: center;
    justify-content: flex-end;
    gap: 5px;
    white-space: nowrap;
  }
  #students > .header > .header-actions > .btn {
    width: 38px;
    min-width: 38px;
    max-width: 38px;
    height: 38px;
    min-height: 38px;
    padding: 0;
    justify-content: center;
    font-size: 18px;
  }
  .header:not(.attendance-page-header) {
    flex-wrap: nowrap;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    margin-bottom: 10px;
  }
  .header:not(.attendance-page-header) h1 {
    flex: 1 1 0;
    width: auto;
    min-width: 0;
    font-size: clamp(17px, 5vw, 21px);
    line-height: 1.2;
  }
  .header:not(.attendance-page-header) > .header-actions {
    display: flex;
    flex: 0 0 auto;
    flex-direction: row;
    width: auto;
    max-width: none;
    align-items: center;
    justify-content: flex-end;
    gap: 5px;
    white-space: nowrap;
  }
  .header:not(.attendance-page-header) .header-actions > .btn {
    display: inline-flex;
    width: 38px;
    min-width: 38px;
    max-width: 38px;
    height: 38px;
    min-height: 38px;
    padding: 0;
    align-items: center;
    justify-content: center;
    font-size: 18px;
    line-height: 1;
  }
  .header .mobile-action-icon { display: inline; }
  .header .mobile-action-label { display: none; }
  #dashboard .header-actions #currentDate { display: none; }

  .header.attendance-page-header {
    flex-direction: row;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    margin-bottom: 10px;
  }
  .attendance-page-header h1 {
    flex: 0 0 100%;
    width: 100%;
    margin: 0;
    font-size: clamp(18px, 5vw, 22px);
  }
  .attendance-page-header .attendance-page-filters {
    display: grid;
    flex: 1 1 100%;
    width: 100%;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 6px;
  }
  .attendance-page-header .attendance-date-filter {
    min-width: 0;
    width: 100%;
    padding: 0;
  }

  .card { padding: 11px; margin-bottom: 10px; }
  .card + .card { margin-top: 8px; }
  .card-title { margin-bottom: 8px; padding-bottom: 7px; }
  .student-list-sticky-top { margin-bottom: 8px; }
  #studentListCard .student-list-sticky-top { padding: 5px 0 4px; }
  #studentListCard .student-toolbar-row {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    align-items: center;
    gap: 4px;
    margin-bottom: 4px;
  }
  #studentListCard .student-list-summary {
    align-self: flex-start;
    width: 100%;
    max-width: 100%;
    min-height: 30px;
    gap: 4px 8px;
    padding: 4px 6px;
    font-size: 9px;
  }
  #studentListCard .student-list-summary > span { min-height: 18px; gap: 3px; line-height: 18px; }
  #studentListCard .student-list-summary > span + span { padding-left: 5px; }
  #studentListCard .student-list-summary strong { font-size: 10px; line-height: 18px; }
  #studentListCard .student-toolbar-controls { display: contents; }
  #studentListCard .student-toolbar-controls > #searchEmp {
    grid-column: 2;
    grid-row: 1;
  }
  .student-toolbar-controls input,
  .student-toolbar-controls select,
  .student-toolbar-controls .filter-select-picker,
  .student-toolbar-controls button { min-width: 0; min-height: 34px; }
  #studentListCard .student-toolbar-controls > #searchEmp {
    height: 34px;
    min-height: 34px;
    padding: 6px 9px;
    font-size: 12px;
  }
  #studentListCard .student-toolbar-controls .filter-select-picker,
  #studentListCard .student-toolbar-controls .filter-select-trigger {
    min-height: 34px;
    height: 34px;
  }
  #studentListCard .student-toolbar-controls > .filter-select-picker {
    width: auto;
    min-width: 0;
    justify-self: stretch;
  }
  #studentListCard .student-toolbar-controls > .filter-select-picker:nth-of-type(1) {
    grid-column: 1;
    grid-row: 2;
  }
  #studentListCard .student-toolbar-controls > .filter-select-picker:nth-of-type(2) {
    grid-column: 2;
    grid-row: 2;
  }
  #studentListCard .student-toolbar-controls .filter-select-trigger {
    gap: 5px;
    padding: 5px 8px;
    font-size: 11px;
  }
  .student-toolbar-controls > button { width: 100%; padding: 5px 7px; font-size: 11px; }
  #studentListCard .student-toolbar-actions {
    display: grid;
    grid-column: 1 / -1;
    grid-row: 3;
    align-items: center;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    justify-content: stretch;
    gap: 4px;
  }
  #studentListCard .student-toolbar-actions > .btn {
    width: 100%;
    min-width: 0;
    height: 34px;
    min-height: 34px;
    padding: 4px 5px;
    justify-content: center;
    gap: 3px;
    font-size: 10px;
    white-space: nowrap;
  }
  #studentListCard .student-toolbar-actions > .student-grade-visibility-toggle {
    grid-column: auto;
    width: 100%;
    min-width: 0;
    max-width: none;
    min-height: 34px;
    justify-content: center;
    gap: 4px;
  }
  #studentListCard .student-grade-toggle-label { display: inline; font-size: 10px; }
  #studentListCard .student-delete-count { display: inline; }

  .school-list-toolbar,
  .teacher-list-toolbar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px;
    margin-bottom: 8px;
  }
  .teacher-list-toolbar .teacher-toolbar {
    display: grid;
    flex: 1 1 100%;
    grid-template-columns: minmax(0, 1fr) minmax(0, 0.8fr);
    gap: 6px;
  }
  .teacher-toolbar input, .teacher-toolbar select { min-height: 36px; }
  .study-group-list-sticky-top .student-toolbar-row { grid-template-columns: minmax(0, 1fr); gap: 6px; }
  .study-group-toolbar-controls {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 6px;
    width: 100%;
  }
  .study-group-toolbar-controls > input:first-child { grid-column: 1 / -1; }
  .grading-filters { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px; margin-bottom: 10px; }
  .grading-filters .grading-search-field { grid-column: 1 / -1; }
  .grading-batch-controls { gap: 6px; }
  .table-filter-actions { margin: 0 0 6px; }
  .record-link-bar { gap: 6px; padding: 7px 9px; margin-bottom: 8px; }
  .weekly-saved-controls { gap: 6px; }
  .weekly-saved-day-filter { gap: 4px; margin: 6px 0; }
}

@media (max-width: 360px) {
  #studentListCard .student-list-summary > span + span { display: none; }
  #studentListCard .student-toolbar-label,
  #studentListCard .student-grade-toggle-label,
  #studentListCard .student-delete-count { display: none; }
}

/* Keep theme changes focused on visual properties so toggles don't animate layout. */
body, .sidebar, .main, .card, .stat-card, .chart-container, .list-summary,
.student-list-sticky-top, .school-table th, .school-table td,
.filter-select-trigger, input, select, textarea, .nav-item,
.student-grade-visibility-toggle, .student-grade-toggle-track {
  transition-property: color, background-color, border-color, box-shadow;
  transition-duration: 260ms;
  transition-timing-function: cubic-bezier(0.2, 0.8, 0.2, 1);
}
.toggle-slider,
.toggle-slider::before,
.student-grade-toggle-track,
.student-grade-toggle-track::after {
  transition-duration: 260ms;
  transition-timing-function: cubic-bezier(0.2, 0.8, 0.2, 1);
}
#studentListCard .school-table th:nth-child(8),
#studentListCard .school-table td:nth-child(8) {
  transition: width 260ms cubic-bezier(0.2, 0.8, 0.2, 1),
    min-width 260ms cubic-bezier(0.2, 0.8, 0.2, 1),
    max-width 260ms cubic-bezier(0.2, 0.8, 0.2, 1),
    padding 260ms cubic-bezier(0.2, 0.8, 0.2, 1),
    opacity 260ms cubic-bezier(0.2, 0.8, 0.2, 1),
    border-color 260ms cubic-bezier(0.2, 0.8, 0.2, 1),
    visibility 0s linear 0s;
}
#studentListCard .school-table th:nth-child(8),
#studentListCard .school-table td:nth-child(8) {
  width: var(--student-grade-column-width) !important;
  max-width: var(--student-grade-column-width) !important;
}
#studentListCard.student-grade-column-hidden .school-table th:nth-child(8),
#studentListCard.student-grade-column-hidden .school-table td:nth-child(8) {
  transition-delay: 0s, 0s, 0s, 0s, 0s, 0s, 260ms;
}
@media (prefers-reduced-motion: reduce) {
  body, .sidebar, .main, .card, .stat-card, .chart-container, .list-summary,
  .student-list-sticky-top, .school-table th, .school-table td,
  .filter-select-trigger, input, select, textarea, .nav-item,
  .student-grade-visibility-toggle, .student-grade-toggle-track,
  .toggle-slider, .toggle-slider::before,
  .student-grade-toggle-track::after,
  #studentListCard .school-table th:nth-child(8),
  #studentListCard .school-table td:nth-child(8) {
    transition-duration: 0.01ms !important;
  }
}
/* Activity attribution and grading layout */
.activity-log-entry { display:grid; grid-template-columns:minmax(130px,auto) minmax(130px,auto) 1fr; gap:10px; align-items:start; padding:10px 0; border-bottom:1px solid #e7ebf2; }
.activity-log-entry time { color:var(--text-light); font-size:12px; }
.activity-log-actor { color:#3f46b8; font-size:13px; }
.activity-log-empty { padding:20px; color:var(--text-light); text-align:center; }
.grading-format-tabs { display:flex; gap:8px; margin:0 0 14px; padding:5px; width:fit-content; border-radius:14px; background:#eef1f8; }
.grading-format-tabs button { min-width:110px; border:0; border-radius:10px; padding:10px 18px; background:transparent; color:#48516a; font-weight:800; cursor:pointer; transition:.2s; }
.grading-format-tabs button.is-active { color:#fff; background:linear-gradient(120deg,#4f46e5,#7c3aed); box-shadow:0 5px 14px #4f46e544; }
.grading-filters { display:grid; grid-template-columns:repeat(5,minmax(120px,1fr)) minmax(200px,1.45fr) auto; gap:10px; align-items:end; }
.grading-filters .form-group { min-width:0; margin:0; }
.grading-filters .form-group label { white-space:nowrap; }
.grading-class-overview { margin-top:18px; overflow:hidden; }
.grading-class-overview>h2 { margin-top:0; }
.grading-podium { display:flex; align-items:end; justify-content:center; gap:12px; margin:22px auto 10px; max-width:900px; }
.grading-podium-place { display:flex; flex:1; min-height:150px; flex-direction:column; align-items:center; justify-content:center; gap:9px; padding:18px 12px; border:1px solid #e6eaf2; border-radius:20px; background:linear-gradient(155deg,#fff,#f6f7ff); text-align:center; box-shadow:0 10px 28px #28376514; animation:grading-podium-rise .7s cubic-bezier(.2,.8,.2,1) both; }
.grading-podium-place>span:first-child { font-size:32px; }
.grading-podium-place.is-rank-1 { order:2; min-height:192px; border-color:#f3ca59; background:linear-gradient(155deg,#fff9e4,#fff); box-shadow:0 14px 36px #e8b83a33; }
.grading-podium-place.is-rank-2 { order:1; }
.grading-podium-place.is-rank-3 { order:3; }
.grading-podium-title { text-align:center; }
@keyframes grading-podium-rise { from { opacity:0; transform:translateY(20px) scale(.94); } to { opacity:1; transform:translateY(0) scale(1); } }
@media(max-width:1200px) { .grading-filters { grid-template-columns:repeat(3,minmax(140px,1fr)); } }
@media(max-width:700px) { .grading-filters { grid-template-columns:repeat(2,minmax(0,1fr)); } .grading-filters .grading-search-field,.grading-filters .table-filter-actions { grid-column:1/-1; } .activity-log-entry { grid-template-columns:1fr; gap:3px; } .grading-podium { gap:6px; } .grading-podium-place { padding:12px 6px; font-size:.86rem; } }

.grading-class-ranking { list-style:none; margin:0; padding:0; border:1px solid #e7eaf2; border-radius:16px; overflow:hidden; }
.grading-class-ranking li { display:flex; justify-content:space-between; gap:12px; padding:12px 16px; border-bottom:1px solid #eef0f5; background:#fff; }
.grading-class-ranking li:nth-child(odd) { background:#f8f9fd; }
.grading-class-ranking li:last-child { border-bottom:0; }
.grading-class-ranking li:first-child strong { color:#a87900; }
.grading-class-ranking li span { color:#536079; font-variant-numeric:tabular-nums; }
@media(max-width:600px) { .grading-class-ranking li { align-items:flex-start; flex-direction:column; gap:3px; } }