:root { --page-gutter: clamp(12px, 1.5vw, 24px); font-family: "Microsoft YaHei", system-ui, sans-serif; color: #17212b; background: #e8edf0; }
* { box-sizing: border-box; }
html { height: 100%; overflow: hidden; -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
body { height: 100vh; height: 100dvh; margin: 0; display: flex; min-width: 0; flex-direction: column; overflow: hidden; }
[hidden] { display: none !important; }
button, input, select, textarea { font: inherit; }
button { cursor: pointer; border: 1px solid #526372; border-radius: 4px; padding: 7px 11px; color: #17212b; background: #fff; }
button:hover { background: #eef4f7; }
button.secondary { background: #edf1f3; }
button.danger { color: #9f2d20; border-color: #c98f88; }
h1, h2, p { margin: 0; }
h1 { font-size: 22px; font-weight: 650; }
h2 { font-size: 16px; font-weight: 650; }
.app-header { min-height: 60px; padding: 10px var(--page-gutter); padding: max(10px, env(safe-area-inset-top)) max(var(--page-gutter), env(safe-area-inset-right)) 10px max(var(--page-gutter), env(safe-area-inset-left)); display: flex; align-items: center; justify-content: space-between; gap: 18px; color: #f6f8fa; background: #22313f; border-bottom: 3px solid #cf8a3d; }
.eyebrow { margin-bottom: 4px; color: #b9c7d2; font-size: 12px; }
.toolbar, .form-actions { display: flex; flex-wrap: wrap; gap: 8px; }
.toolbar button { color: #f6f8fa; background: transparent; border-color: #708292; }
.toolbar button:hover { background: #34495a; }
.toolbar button.export-action { border-color: #cf8a3d; }
.app-shell { flex: 1; width: 100%; min-width: 0; min-height: 0; margin: 0 auto; padding: 10px var(--page-gutter); padding: 10px max(var(--page-gutter), env(safe-area-inset-right)) 10px max(var(--page-gutter), env(safe-area-inset-left)); display: flex; flex-direction: column; overflow: hidden; }
.app-footer { flex: 0 0 auto; padding: 8px 24px; padding: 8px max(24px, env(safe-area-inset-right)) max(8px, env(safe-area-inset-bottom)) max(24px, env(safe-area-inset-left)); color: #d8e1e6; background: #22313f; border-top: 2px solid #cf8a3d; font-size: 13px; text-align: center; }
.main-tabs, .resource-tabs { display: flex; flex: 0 0 auto; flex-wrap: wrap; gap: 2px; margin-bottom: 10px; border-bottom: 1px solid #b7c2ca; }
.main-tabs button, .resource-tabs button { border: 0; border-radius: 4px 4px 0 0; background: transparent; }
.main-tabs button[aria-selected="true"], .resource-tabs button[aria-selected="true"] { color: #fff; background: #2a697c; }
.tab-panel:not([hidden]) { flex: 1; min-height: 0; overflow: auto; overscroll-behavior: contain; scrollbar-gutter: stable; }
#schedulePanel:not([hidden]) { display: flex; flex-direction: column; gap: 10px; }
#planningPanel:not([hidden]) { display: flex; min-height: 0; flex-direction: column; gap: 10px; }
#timetablePanel:not([hidden]) { display: flex; min-height: 0; }
.console-panel { min-height: 0; background: #fff; border: 1px solid #c6d0d5; border-radius: 5px; box-shadow: 0 1px 2px #18232b12; }
.week-controls { flex: 0 0 auto; padding: 8px 12px; display: flex; align-items: center; flex-wrap: wrap; gap: 8px 10px; }
.week-controls button { padding: 6px 10px; }
.week-date-label { width: auto; display: flex; align-items: center; gap: 6px; margin: 0; white-space: nowrap; }
.week-date-label input { width: auto; min-width: 142px; padding: 5px 7px; }
.week-range { margin-left: auto; display: inline-flex; align-items: center; gap: 8px; color: #33434d; font-size: 13px; font-weight: 650; white-space: nowrap; }
.week-state { padding: 3px 7px; color: #1d5f70; background: #e4f1f4; border: 1px solid #9fc3cc; border-radius: 3px; font-size: 12px; line-height: 1.2; }
.copy-week-button { color: #fff; border-color: #2a697c; background: #2a697c; }
.copy-week-button:hover { background: #225b6b; }
.schedule-dashboard { flex: 1; min-height: 540px; display: grid; grid-template-columns: minmax(520px, 560px) minmax(420px, 1fr) minmax(760px, 800px); gap: 12px; }
.work-grid { display: grid; grid-template-columns: minmax(320px, 430px) minmax(0, 1fr); gap: 16px; }
.schedule-form, .day-list-panel, .resource-panel, .timetable-panel { padding: 10px; }
.panel-heading { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; margin-bottom: 8px; }
.muted { color: #62717c; font-size: 12px; }
label { display: grid; gap: 5px; margin-top: 10px; color: #34434d; font-size: 13px; font-weight: 600; }
select, input, textarea { width: 100%; padding: 6px; color: #17212b; background: #fff; border: 1px solid #aebbc3; border-radius: 3px; }
textarea { resize: vertical; }
.schedule-form { display: grid; grid-template-columns: minmax(180px, .9fr) minmax(240px, 1.1fr); grid-template-rows: auto auto auto auto auto auto auto auto minmax(0, 1fr) auto; align-content: stretch; gap: 6px 10px; overflow: hidden; }
.schedule-form .panel-heading, .schedule-form .segmented { grid-column: 1 / -1; }
.schedule-form .field-slot { grid-column: 1; grid-row: 3; }
.schedule-form .field-subject { grid-column: 1; grid-row: 4; }
.schedule-form .field-classroom { grid-column: 1; grid-row: 5; }
.schedule-form .field-teacher { grid-column: 1; grid-row: 6; }
.schedule-form .recurrence-scope-field { grid-column: 1; grid-row: 7; }
.schedule-form .field-student-group { grid-column: 1; grid-row: 8; }
.schedule-form .student-search-field { grid-column: 2; grid-row: 3; }
.schedule-form .student-picker-field { grid-column: 2; grid-row: 4 / 11; min-height: 0; margin-top: 0; display: flex; flex-direction: column; }
.schedule-form .remarks-field { grid-column: 1; grid-row: 9; align-self: end; }
.schedule-form .form-actions { grid-column: 1; grid-row: 10; align-self: end; }
.schedule-form label, .schedule-form fieldset { margin-top: 0; }
.schedule-form textarea { min-height: 38px; max-height: 46px; }
fieldset { margin: 8px 0 0; padding: 6px; border: 1px solid #c7d1d7; }
legend { padding: 0 4px; color: #34434d; font-size: 13px; font-weight: 600; }
.segmented { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 4px; margin-top: 0; }
.segmented button { min-width: 0; padding: 6px 3px; font-size: 12px; line-height: 1.25; }
.segmented button[aria-pressed="true"] { color: #fff; border-color: #2a697c; background: #2a697c; }
.day-label, .day-date, .timetable-day, .timetable-date { display: block; }
.day-label { font-weight: 650; }
.day-date { color: #62717c; font-size: 11px; }
.segmented button[aria-pressed="true"] .day-date { color: #e8f2f6; }
.student-list { flex: 1; min-height: 0; max-height: none; overflow: auto; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); align-content: start; column-gap: 6px; row-gap: 0; }
.student-class-column { min-width: 0; display: flex; flex-direction: column; }
.student-class-column h3 { margin: 0 0 3px; padding: 3px 4px; color: #216b7a; background: #edf5f6; border-bottom: 2px solid #8fb8c1; font-size: 12px; line-height: 1.15; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.student-class-list { min-width: 0; display: grid; align-content: start; }
.student-option { min-width: 0; display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 5px; align-items: center; padding: 1px 4px; border-bottom: 1px solid #e1e7e9; font-size: 12px; font-weight: 400; line-height: 1.08; }
.student-option:last-child { border-bottom: 0; }
.student-option input, .teacher-binding input { width: auto; margin: 0; }
.option-detail, .reason { display: block; overflow-wrap: anywhere; }
.student-option > span { min-width: 0; }
.student-name-line { display: flex; min-width: 0; align-items: center; gap: 4px; }
.student-option strong.student-name { min-width: 0; flex: 1 1 auto; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.student-week-count { flex: 0 0 auto; color: #216b7a; font-size: 11px; font-weight: 700; line-height: 1; }
.disabled-option .student-name, .disabled-option .student-week-count { color: #7b858b; }
.schedule-form .student-option .option-detail { display: none; }
.option-detail { color: #44545e; }
.reason { margin-top: 2px; color: #a44334; font-size: 12px; }
.student-pagination { display: flex; align-items: center; justify-content: center; gap: 8px; min-height: 27px; margin-top: 6px; color: #4b5b64; font-size: 12px; }
.student-pagination button { padding: 3px 8px; font-size: 12px; }
.disabled-option, option:disabled { opacity: 0.45; cursor: not-allowed; }
select option:disabled { color: #45535b; }
.form-actions { margin-top: 4px; }
.form-actions button:first-child { color: #fff; background: #2a697c; border-color: #2a697c; }
.day-list-panel, .timetable-panel { display: flex; flex-direction: column; overflow: hidden; }
.assignment-list { min-height: 0; overflow: auto; display: grid; align-content: start; gap: 8px; }
.assignment-row { padding: 12px; border-left: 4px solid #2a697c; background: #f5f8f9; }
.assignment-row h3 { margin: 0 0 5px; font-size: 15px; }
.assignment-row p { margin: 3px 0; color: #4d5d67; font-size: 13px; overflow-wrap: anywhere; }
.assignment-row .row-actions { margin-top: 9px; display: flex; gap: 6px; }
.copy-forward-controls { display: inline-flex; align-items: center; gap: 6px; min-width: 0; }
.copy-forward-controls select { width: 54px; height: 32px; padding: 4px 6px; }
.assignment-row .copy-week-button { padding: 6px 9px; white-space: nowrap; }
.empty-state { padding: 24px 8px; color: #62717c; text-align: center; }
#resourcesPanel:not([hidden]) { display: flex; flex-direction: column; }
.resource-layout { height: 100%; min-height: 0; display: grid; grid-template-columns: minmax(300px, 390px) minmax(0, 1fr); gap: 18px; }
.resource-form { min-height: 0; overflow: auto; padding-right: 18px; border-right: 1px solid #d8e0e4; }
.resource-form h2 { margin-bottom: 4px; }
.teacher-binding { max-height: 180px; overflow: auto; margin-top: 8px; border: 1px solid #c7d1d7; padding: 6px; }
.teacher-binding label { display: flex; align-items: center; gap: 7px; margin: 4px 0; font-weight: 400; }
.resource-table { width: 100%; border-collapse: collapse; table-layout: fixed; }
.resource-table th, .resource-table td { padding: 9px 8px; text-align: left; vertical-align: top; border-bottom: 1px solid #dce3e6; overflow-wrap: anywhere; }
.resource-table th { color: #4b5b64; font-size: 12px; background: #f1f5f6; }
.resource-table td { font-size: 13px; }
.resource-table .resource-identifier { width: 110px; white-space: nowrap; overflow-wrap: normal; font-variant-numeric: tabular-nums; }
.resource-table tr.editing-row td { background: #fff7db; box-shadow: inset 3px 0 0 #c98612; }
.resource-table .actions { width: 118px; white-space: nowrap; }
.resource-table .actions button { padding: 5px 8px; margin-right: 4px; }
.edit-notice { padding: 8px 10px; margin: 8px 0 12px; color: #6d4600; background: #fff7db; border: 1px solid #eed79f; border-radius: 4px; }
.resource-panel { flex: 1; overflow: hidden; }
.timetable-panel { margin-top: 0; }
.schedule-timetable { margin-top: 0; }
.schedule-timetable .timetable-wrap { flex: 1; }
.day-list-panel, .resource-panel, .resource-table-wrap, .timetable-panel, .timetable-wrap { min-width: 0; }
.resource-table-wrap, .timetable-wrap { min-height: 0; overflow: auto; }
#timetablePanel .timetable-panel { height: 100%; }
.student-statistics-panel { height: 100%; min-height: 0; display: flex; flex-direction: column; overflow: hidden; }
#studentStatisticsPanel:not([hidden]) { display: flex; flex-direction: column; gap: 10px; }
#studentGroupsPanel:not([hidden]) { display: flex; min-height: 0; }
.student-groups-layout { flex: 1; min-height: 0; display: grid; grid-template-columns: minmax(430px, 560px) minmax(0, 1fr); gap: 12px; }
.student-group-form, .student-group-list-panel { min-height: 0; padding: 12px; }
.student-group-form { display: grid; grid-template-rows: auto auto auto minmax(0, 1fr) auto; align-content: stretch; gap: 8px; overflow: hidden; }
.student-group-form label, .student-group-form fieldset { margin-top: 0; }
.student-group-picker { min-height: 0; display: flex; flex-direction: column; }
.student-group-member-list { flex: 1; min-height: 0; overflow: auto; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); align-content: start; gap: 8px; }
.student-group-list-panel { display: flex; flex-direction: column; overflow: hidden; }
.student-group-list { min-height: 0; overflow: auto; display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); align-content: start; gap: 10px; }
.student-group-row { min-width: 0; padding: 12px; border: 1px solid #d3dde1; border-left: 4px solid #2a697c; border-radius: 5px; background: #f7f9fa; }
.student-group-row.editing-row { border-color: #c98612; background: #fff7db; }
.student-group-row-heading { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; }
.student-group-row h3 { margin: 0; font-size: 15px; }
.student-group-row-heading span { flex: 0 0 auto; color: #2a697c; font-size: 12px; font-weight: 700; }
.student-group-row p { margin: 8px 0 0; color: #4d5d67; font-size: 13px; line-height: 1.6; overflow-wrap: anywhere; }
.student-group-row .row-actions { margin-top: 10px; display: flex; gap: 6px; }
.statistics-week-controls { flex: 0 0 auto; }
.student-statistics-heading { flex: 0 0 auto; padding: 10px 12px 8px; display: grid; grid-template-columns: minmax(240px, 1fr) auto; gap: 8px 18px; align-items: end; border-bottom: 1px solid #d5dde1; }
.student-statistics-heading h2 { margin-bottom: 3px; }
.student-statistics-heading p { color: #65757e; font-size: 12px; }
.personal-query-modes { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.personal-query-modes button { padding: 5px 10px; }
.personal-query-modes button[aria-selected="true"] { color: #fff; background: #2a697c; border-color: #2a697c; }
.student-statistics-filters { display: flex; align-items: end; gap: 8px; }
.student-statistics-filters label { width: 170px; margin: 0; gap: 3px; font-size: 11px; }
.student-statistics-filters label:last-child { width: 210px; }
.student-statistics-filters select, .student-statistics-filters input { height: 32px; padding: 4px 7px; }
.student-statistics-summary { grid-column: 1 / -1; display: flex; flex-wrap: wrap; gap: 18px; color: #41515a; font-size: 12px; }
.student-statistics-summary strong { color: #1d6171; font-size: 14px; }
.student-statistics-table-wrap { flex: 1; min-height: 0; overflow: auto; }
.student-statistics-table { width: 100%; min-width: 1280px; table-layout: fixed; border-collapse: separate; border-spacing: 0; }
.student-statistics-table th, .student-statistics-table td { padding: 6px 7px; border-right: 1px solid #d8e0e4; border-bottom: 1px solid #d8e0e4; text-align: left; vertical-align: middle; font-size: 12px; overflow-wrap: anywhere; }
.student-statistics-table thead th { position: sticky; top: 0; z-index: 3; height: 42px; color: #33434d; background: #eaf0f2; text-align: center; }
.student-statistics-table th:nth-child(1), .student-statistics-table td:nth-child(1) { width: 52px; text-align: center; }
.student-statistics-table th:nth-child(2), .student-statistics-table td:nth-child(2) { width: 92px; }
.student-statistics-table th:nth-child(3), .student-statistics-table td:nth-child(3) { width: 90px; }
.student-statistics-table th:nth-child(n+4):nth-child(-n+10), .student-statistics-table td:nth-child(n+4):nth-child(-n+10) { width: 142px; }
.student-statistics-table th:last-child, .student-statistics-table td:last-child { width: 76px; text-align: center; border-right: 0; }
.student-statistics-table .statistics-class-row th { position: sticky; top: 42px; z-index: 2; padding: 7px 12px; color: #1f5967; background: #dfecef; border-bottom-color: #afc6cc; text-align: left; font-size: 13px; }
.statistics-class-row span { margin-left: 10px; color: #63737c; font-size: 11px; font-weight: 500; }
.statistics-student-name { font-weight: 700; }
.statistics-day, .statistics-date { display: block; }
.statistics-date { margin-top: 2px; color: #62727b; font-size: 10px; font-weight: 500; }
.statistics-course { display: block; padding: 3px 5px; color: #203139; background: #eef5f6; border-left: 3px solid #2a697c; line-height: 1.25; }
.statistics-course + .statistics-course { margin-top: 3px; }
.statistics-course strong, .statistics-course span { display: block; }
.statistics-course span { margin-top: 1px; color: #52636e; font-size: 10px; }
.statistics-course span:last-child { color: #3e5c65; font-weight: 650; }
.statistics-empty { display: block; color: #aab3b8; text-align: center; }
.statistics-zero-row { color: #7b858b; background: #fafbfb; }
.statistics-total { display: inline-flex; width: 28px; height: 24px; align-items: center; justify-content: center; color: #fff; background: #2a697c; border-radius: 3px; font-weight: 700; }
.statistics-total.zero { color: #718087; background: #e7ecee; }
.timetable { width: 100%; min-width: 760px; table-layout: fixed; border-collapse: collapse; }
.schedule-timetable .timetable { min-width: 760px; width: max-content; height: auto; }
.timetable th, .timetable td { border: 1px solid #c8d2d7; padding: 9px; vertical-align: top; overflow-wrap: anywhere; word-break: break-word; }
.timetable th { color: #33434d; background: #eaf0f2; font-size: 13px; }
.timetable td { height: 100px; font-size: 13px; }
.timetable-entry { margin-bottom: 8px; padding-bottom: 7px; border-bottom: 1px dashed #b7c6cc; line-height: 1.45; overflow-wrap: anywhere; }
.timetable-day { font-weight: 650; }
.timetable-date { margin-top: 2px; color: #52636e; font-size: 12px; font-weight: 500; }
.schedule-timetable .timetable th, .schedule-timetable .timetable td { padding: 7px 6px; font-size: 12px; }

.schedule-timetable .timetable td { height: auto; overflow: visible; }
.schedule-timetable .timetable-entry { max-height: 78px; overflow: hidden; margin-bottom: 6px; padding-bottom: 5px; line-height: 1.35; }
.schedule-timetable .timetable-date { font-size: 11px; }
.schedule-timetable .timetable-course-name { font-size: 12px; }
.schedule-timetable .timetable-teacher-room { font-size: 11px; }
.timetable-course-name { font-size: 15px; }
.timetable-teacher-room { font-weight: 650; }
.timetable-entry:last-child { margin-bottom: 0; border-bottom: 0; }
.timetable-entry.is-highlighted { outline: 3px solid #cf8a3d; outline-offset: -2px; background: #fff5cf; box-shadow: 0 0 0 2px #fff inset; }
.timetable th.is-selected-date, .timetable td.is-selected-date { background: #fff8df; }
.timetable thead th.is-selected-date { color: #7d4a12; background: #ffe7b0; box-shadow: inset 0 -3px 0 #cf8a3d; }
.timetable-class-filter { display: flex; align-items: center; gap: 8px; margin: 0; white-space: nowrap; }
.timetable-class-filter select { width: auto; min-width: 180px; }
#toast { position: fixed; right: 20px; bottom: 20px; z-index: 10; max-width: min(420px, calc(100vw - 40px)); padding: 10px 14px; color: #fff; background: #273947; border-radius: 4px; box-shadow: 0 3px 12px #0003; opacity: 0; pointer-events: none; transition: opacity .18s; overflow-wrap: anywhere; }
#toast.visible { opacity: 1; }
#toast.error { background: #9f392d; }
@media (max-width: 1780px) {
  .schedule-dashboard { grid-template-columns: minmax(500px, 520px) minmax(280px, 1fr); grid-template-rows: minmax(0, .55fr) minmax(0, .45fr); }
  .schedule-form { grid-row: 1 / span 2; }
}
@media (max-width: 820px) {
  html, body { overflow: auto; }
  .app-header { align-items: flex-start; flex-direction: column; }
  .app-shell { padding: 10px; overflow: visible; }
  .tab-panel:not([hidden]) { overflow: visible; }
  #schedulePanel:not([hidden]) { overflow: visible; scrollbar-gutter: auto; }
  .week-range { width: 100%; margin-left: 0; }
  .schedule-dashboard, .work-grid, .resource-layout, .student-groups-layout { grid-template-columns: 1fr; }
  .schedule-dashboard { min-height: 0; grid-template-rows: auto; overflow: visible; }
  .schedule-form { grid-row: auto; grid-template-columns: 1fr; grid-template-rows: none; overflow: visible; }
  .schedule-form .field-slot,
  .schedule-form .field-subject,
  .schedule-form .field-classroom,
  .schedule-form .field-teacher,
  .schedule-form .recurrence-scope-field,
  .schedule-form .field-student-group,
  .schedule-form .student-search-field,
  .schedule-form .student-picker-field,
  .schedule-form .remarks-field,
  .schedule-form .form-actions { grid-column: 1; grid-row: auto; }
  .schedule-form .student-picker-field { min-height: 260px; }
  .resource-form { padding: 0 0 16px; border: 0; border-bottom: 1px solid #d8e0e4; }
  .student-group-form { min-height: 620px; overflow: visible; }
  .student-group-member-list { grid-template-columns: 1fr; }
  .student-statistics-heading { grid-template-columns: 1fr; }
  .student-statistics-filters { flex-wrap: wrap; }
  .student-statistics-summary { grid-column: 1; }
}
@media print { .app-header, .main-tabs, .resource-tabs, .schedule-form, .day-list-panel, .toolbar, #toast, #resourcesPanel, .schedule-timetable { display: none !important; } .app-shell { max-width: none; padding: 0; } #timetablePanel { display: block !important; } .timetable-panel { margin: 0; padding: 0; border: 0; box-shadow: none; } .timetable { min-width: 0; } }

.schedule-presentation-panel { flex: 0 0 auto; padding: 10px 12px; }
.schedule-presentation-panel .panel-heading { margin-bottom: 6px; }
.schedule-presentation-fields { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.schedule-presentation-fields label { margin: 0; }
.schedule-presentation-fields input[type=color] { height: 34px; padding: 2px; }
.schedule-presentation-hint { color: #2a697c; font-size: 12px; font-weight: 650; }
.module-heading, .planning-toolbar { flex: 0 0 auto; display: flex; align-items: end; justify-content: space-between; gap: 18px; padding: 10px 2px; }
.module-heading h2, .planning-toolbar h2 { margin: 2px 0 4px; }
.module-role-switch label, .planning-toolbar-controls label { margin: 0; min-width: 150px; }
.learning-workflow { flex: 0 0 auto; display: flex; align-items: center; gap: 10px; padding: 14px 18px; }
.learning-flow-step { min-width: 0; flex: 1; display: grid; grid-template-columns: auto 1fr; column-gap: 8px; align-items: center; }
.learning-flow-step span { grid-row: span 2; display: grid; width: 30px; height: 30px; place-items: center; color: #fff; background: #78909c; border-radius: 50%; font-size: 11px; font-weight: 700; }
.learning-flow-step.active span { background: #2a697c; }
.learning-flow-step strong, .learning-flow-step small { display: block; }
.learning-flow-step small { color: #62717c; font-size: 11px; }
.learning-flow-arrow { color: #9aaab2; font-size: 22px; }
.learning-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; }
.learning-card { min-width: 0; display: grid; grid-template-columns: auto 1fr; gap: 10px; align-items: start; padding: 13px; }
.learning-card button { grid-column: 1 / -1; justify-self: start; }
.learning-card h3 { margin: 4px 0; font-size: 15px; }
.learning-card p { margin: 0; color: #53636c; font-size: 12px; line-height: 1.5; }
.learning-card-icon { display: grid; width: 34px; height: 34px; place-items: center; color: #fff; background: #2a697c; border-radius: 4px; font-weight: 700; }
.status-label { display: inline-block; padding: 2px 6px; border-radius: 3px; font-size: 11px; }
.status-ready { color: #246348; background: #e5f2ea; }
.status-progress { color: #805e14; background: #fff2c7; }
.learning-detail { flex: 1; min-height: 0; padding: 12px; overflow: auto; }
.learning-detail-content { display: grid; gap: 10px; color: #53636c; font-size: 13px; }
.learning-detail-content p { margin: 0; line-height: 1.6; }
.learning-detail-primary { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; padding-bottom: 10px; border-bottom: 1px solid #d8e0e4; }
.learning-detail-primary strong { color: #1e5261; font-size: 16px; }
.learning-detail-primary span { color: #687983; font-size: 12px; }
.planning-toolbar { padding-bottom: 2px; }
.planning-toolbar-controls { display: flex; align-items: end; flex-wrap: wrap; justify-content: flex-end; gap: 8px; }
.planning-toolbar-controls button { height: 34px; color: #fff; background: #2a697c; border-color: #2a697c; }
.planning-status-bar { flex: 0 0 auto; display: flex; flex-wrap: wrap; gap: 12px 26px; align-items: center; padding: 10px 12px; color: #34434d; background: #edf4f5; border: 1px solid #c8d8dc; border-left: 4px solid #2a697c; border-radius: 4px; }
.planning-status-bar > div { display: grid; gap: 3px; }
.planning-status-bar span { color: #6b7a82; font-size: 11px; }
.planning-status-bar strong { font-size: 13px; }
.planning-status-draft, .planning-status-returned { color: #946500; }
.planning-status-pending_review { color: #8a5e00; }
.planning-status-approved { color: #246348; }
.planning-status-published { color: #1c6879; }
.planning-status-withdrawn { color: #8d4139; }
.planning-review-comment { min-width: 220px; max-width: 460px; color: #805e14; }
.planning-layout { flex: 1; min-height: 0; display: grid; grid-template-columns: minmax(430px, .9fr) minmax(520px, 1.1fr); gap: 12px; }
.planning-form, .planning-report-panel { min-height: 0; padding: 12px; overflow: hidden; }
.planning-form { display: flex; flex-direction: column; }
.planning-section-tabs { display: flex; flex-wrap: wrap; gap: 4px; margin-bottom: 10px; padding-bottom: 8px; border-bottom: 1px solid #d8e0e4; }
.planning-section-tabs button { padding: 6px 9px; border: 0; background: #f1f5f6; color: #4d5d67; font-size: 12px; }
.planning-section-tabs button[aria-selected=true] { color: #fff; background: #2a697c; }
.planning-form-fields { flex: 1; min-height: 0; overflow-x: hidden; overflow-y: auto; padding-right: 4px; }
.planning-field-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px 10px; }
.planning-field-grid label { margin: 0; }
.planning-wide-field { grid-column: 1 / -1; }
.planning-section-note { margin: 14px 0 7px; padding-bottom: 5px; color: #246879; border-bottom: 2px solid #b6d0d5; font-size: 13px; font-weight: 700; }
.planning-repeat-row { margin-bottom: 10px; padding: 10px; background: #f6f8f9; border: 1px solid #d8e0e4; border-left: 3px solid #2a697c; }
.planning-repeat-title { margin-bottom: 6px; color: #50636d; font-size: 12px; font-weight: 700; }
.planning-repeat-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; }
.planning-repeat-grid label { margin: 0; }
.planning-repeat-list { display: grid; gap: 8px; }
.planning-repeat-list .planning-repeat-row { margin-bottom: 0; }
.planning-repeat-actions { display: flex; justify-content: flex-end; margin-top: 7px; }
.planning-repeat-actions button { padding: 5px 9px; color: #8d4139; border-color: #d9aba5; background: #fff; }
.planning-repeat-actions button:hover { color: #fff; background: #8d4139; border-color: #8d4139; }
.planning-add-row { margin: 0 0 10px; padding: 6px 10px; color: #2a697c; border: 1px dashed #6e9ca7; background: #eef7f8; }
.planning-add-row:hover { color: #fff; background: #2a697c; border-color: #2a697c; }
.planning-field-grid textarea[name="goal_regions"],
.planning-field-grid textarea[name="goal_majors"],
.planning-field-grid textarea[name="goal_schools"] { min-height: 90px; }
.planning-field-help { color: #6a7981; font-size: 12px; line-height: 1.5; }
.planning-form-actions { flex: 0 0 auto; padding-top: 10px; }
.planning-form-actions button:first-child, .primary-action { color: #fff; background: #2a697c; border-color: #2a697c; }
.planning-report-panel { display: flex; flex-direction: column; }
.planning-review-controls { flex: 0 0 auto; display: flex; align-items: end; flex-wrap: wrap; gap: 8px; padding: 0 0 10px; }
.planning-review-controls button { min-height: 32px; }
.review-comment-field { flex: 1 1 240px; margin: 0; }
.planning-view-note { color: #6b7a82; font-size: 12px; }
.planning-report-preview { flex: 1; min-height: 0; overflow-x: auto; overflow-y: auto; padding: 16px; background: #fff; border: 1px solid #d8e0e4; }
.report-cover { display: flex; align-items: end; justify-content: space-between; gap: 18px; padding: 8px 0 16px; border-bottom: 3px solid #1f5f72; }
.report-eyebrow { color: #5d7b83; font-size: 10px; letter-spacing: 1px; }
.report-cover h1 { margin: 6px 0 3px; color: #1e5261; font-size: 23px; }
.report-cover p { margin: 0; color: #6a7981; font-size: 11px; }
.report-student-chip { display: grid; gap: 4px; min-width: 150px; padding: 9px 11px; color: #fff; background: #1e5261; border-radius: 3px; }
.report-student-chip span { color: #d6e5e8; font-size: 11px; }
.report-section { padding: 13px 0; border-bottom: 1px solid #d8e0e4; }
.report-section-title { display: flex; align-items: center; gap: 8px; margin-bottom: 10px; }
.report-section-title span { color: #c98528; font-size: 12px; font-weight: 800; }
.report-section-title h3 { margin: 0; color: #1e5261; font-size: 15px; }
.report-metric-grid, .report-goal-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.report-metric-grid div, .report-goal-grid div { display: grid; gap: 3px; padding: 8px; background: #f5f8f9; }
.report-metric-grid span, .report-goal-grid span, .report-assessment-grid > div > span, .report-list-row span { color: #718089; font-size: 10px; }
.report-metric-grid strong, .report-goal-grid strong { color: #2d414b; font-size: 12px; overflow-wrap: anywhere; }
.report-goal-wide { grid-column: 1 / -1; }
.report-assessment-grid, .report-core-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.report-core-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.report-assessment-grid > div { min-width: 0; padding: 9px; background: #f5f8f9; }
.report-list { display: grid; gap: 6px; margin-top: 7px; }
.report-list-row { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 7px; padding: 7px 0; border-bottom: 1px dashed #d8e0e4; }
.report-list-row div { min-width: 0; display: grid; gap: 2px; }
.report-list-row strong { color: #31454e; font-size: 11px; line-height: 1.35; overflow-wrap: anywhere; }
.report-empty { margin: 8px 0 0; color: #9aa5aa; font-size: 12px; }
.schedule-draft-entry { border-left-style: dashed !important; }

@media (max-width: 1000px) {
  .planning-layout { grid-template-columns: 1fr; grid-template-rows: minmax(480px, .9fr) minmax(520px, 1.1fr); overflow: auto; }
  .learning-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 820px) {
  .schedule-presentation-fields { grid-template-columns: 1fr; }
  .module-heading, .planning-toolbar { align-items: stretch; flex-direction: column; gap: 10px; }
  .planning-toolbar-controls { justify-content: stretch; }
  .planning-toolbar-controls label, .planning-toolbar-controls button { flex: 1 1 100%; }
  .learning-workflow { align-items: stretch; flex-direction: column; }
  .learning-flow-arrow { display: none; }
  .learning-flow-step { flex: 0 0 auto; }
  .learning-grid { grid-template-columns: 1fr; }
  .planning-layout { display: flex; flex-direction: column; overflow: visible; }
  .planning-form, .planning-report-panel { min-height: 0; overflow: visible; }
  .planning-form-fields { flex: 0 0 auto; overflow: visible; padding-right: 0; }
  .planning-report-preview { flex: 0 0 auto; min-height: 0; overflow-x: auto; overflow-y: visible; }
  .planning-field-grid, .planning-repeat-grid, .report-metric-grid, .report-goal-grid, .report-assessment-grid, .report-core-grid { grid-template-columns: 1fr; }
  .report-cover { align-items: stretch; flex-direction: column; }
  .report-student-chip { min-width: 0; }
  .planning-report-preview { min-height: 480px; }
}
@media print {
  body.printing-planning-report .app-header,
  body.printing-planning-report .main-tabs,
  body.printing-planning-report .planning-toolbar,
  body.printing-planning-report .planning-status-bar,
  body.printing-planning-report .planning-form,
  body.printing-planning-report .planning-review-controls,
  body.printing-planning-report .app-footer { display: none !important; }
  body.printing-planning-report .app-shell { padding: 0; }
  body.printing-planning-report #planningPanel { display: block !important; }
  body.printing-planning-report .planning-report-panel { border: 0; box-shadow: none; }
  body.printing-planning-report .planning-report-preview { border: 0; overflow: visible; }
}.timetable-special-row > th,
.timetable-special-cell { background: var(--period-color, #f4f6f7); }
.timetable-special-row > th { color: #52636b; }
.timetable-special-cell { text-align: center; font-weight: 700; letter-spacing: 0; }
.timetable-editor { min-height: 0; display: flex; flex-direction: column; gap: 10px; }
.timetable-editor-heading { display: flex; align-items: end; justify-content: space-between; gap: 16px; padding-bottom: 8px; border-bottom: 1px solid #d8e0e4; }
.timetable-editor-heading h2 { margin: 0 0 3px; }
.timetable-editor-heading p { margin: 0; color: #65757e; font-size: 12px; }
.timetable-editor-actions { display: flex; align-items: center; flex-wrap: wrap; justify-content: flex-end; gap: 7px; }
.timetable-editor-actions button { white-space: nowrap; }
.timetable-editor-note { padding: 8px 10px; color: #4d5d67; background: #f5f8f9; border-left: 3px solid #2a697c; font-size: 12px; }
.timetable-editor-table-wrap { min-height: 0; flex: 1; overflow: auto; border: 1px solid #d8e0e4; }
.timetable-editor-table { width: 100%; min-width: 980px; border-collapse: collapse; table-layout: fixed; }
.timetable-editor-table th, .timetable-editor-table td { padding: 7px 6px; border-right: 1px solid #d8e0e4; border-bottom: 1px solid #d8e0e4; vertical-align: middle; }
.timetable-editor-table th { color: #4b5b64; background: #edf2f4; font-size: 12px; text-align: left; }
.timetable-editor-table td { background: #fff; }
.timetable-editor-table tr.is-display-only td, .timetable-editor-table tr.is-display-only th { background: #f8fafb; }
.timetable-editor-table th:nth-child(1), .timetable-editor-table td:nth-child(1) { width: 70px; }
.timetable-editor-table th:nth-child(2), .timetable-editor-table td:nth-child(2) { width: 150px; }
.timetable-editor-table th:nth-child(3), .timetable-editor-table td:nth-child(3), .timetable-editor-table th:nth-child(4), .timetable-editor-table td:nth-child(4) { width: 110px; }
.timetable-editor-table th:nth-child(5), .timetable-editor-table td:nth-child(5) { width: 110px; }
.timetable-editor-table th:nth-child(6), .timetable-editor-table td:nth-child(6) { width: 92px; }
.timetable-editor-table th:nth-child(7), .timetable-editor-table td:nth-child(7) { width: 72px; }
.timetable-editor-table th:nth-child(9), .timetable-editor-table td:nth-child(9) { width: 64px; }
.timetable-editor-table input[type=text], .timetable-editor-table input[type=time], .timetable-editor-table select { width: 100%; min-width: 0; height: 30px; padding: 4px 6px; }
.timetable-editor-table input[type=color] { width: 42px; height: 30px; padding: 2px; }
.timetable-editor-table input[type=checkbox] { width: auto; }
.timetable-schedule-toggle label { display: flex; align-items: center; gap: 5px; margin: 0; white-space: nowrap; font-weight: 500; }
.timetable-order { text-align: center; }
.timetable-row-move { display: flex; justify-content: center; gap: 3px; margin-top: 4px; }
.timetable-row-move button { width: 25px; height: 23px; padding: 0; color: #2a697c; background: #edf4f5; border: 1px solid #bdd1d5; }
@media (max-width: 820px) {
  .timetable-editor-heading { align-items: stretch; flex-direction: column; }
  .timetable-editor-actions { justify-content: stretch; }
  .timetable-editor-actions button { flex: 1 1 100%; }
  .timetable-editor-note { line-height: 1.5; }
  .timetable-editor-table-wrap { overflow-x: auto; }
}

/* Shared responsive scroll surfaces */
.resource-table-wrap,
.timetable-wrap,
.student-statistics-table-wrap,
.timetable-editor-table-wrap,
.planning-form-fields,
.planning-report-preview,
.student-list,
.student-group-member-list,
.student-group-list,
.assignment-list {
  overscroll-behavior: contain;
  scrollbar-gutter: stable;
  scrollbar-width: thin;
  touch-action: pan-x pan-y;
  -webkit-overflow-scrolling: touch;
}

.tab-panel:not([hidden])::-webkit-scrollbar,
.resource-table-wrap::-webkit-scrollbar,
.timetable-wrap::-webkit-scrollbar,
.student-statistics-table-wrap::-webkit-scrollbar,
.timetable-editor-table-wrap::-webkit-scrollbar,
.planning-form-fields::-webkit-scrollbar,
.planning-report-preview::-webkit-scrollbar {
  width: 12px;
  height: 12px;
}

.tab-panel:not([hidden])::-webkit-scrollbar-thumb,
.resource-table-wrap::-webkit-scrollbar-thumb,
.timetable-wrap::-webkit-scrollbar-thumb,
.student-statistics-table-wrap::-webkit-scrollbar-thumb,
.timetable-editor-table-wrap::-webkit-scrollbar-thumb,
.planning-form-fields::-webkit-scrollbar-thumb,
.planning-report-preview::-webkit-scrollbar-thumb {
  border: 2px solid #e7ecef;
  border-radius: 6px;
  background: #71858f;
}

@media screen and (max-width: 820px) {
  html {
    height: auto;
    min-height: 100%;
    overflow-x: hidden;
    overflow-y: auto;
  }

  body {
    height: auto;
    min-height: 100vh;
    min-height: 100dvh;
    overflow-x: hidden;
    overflow-y: auto;
  }

  .app-shell {
    padding-right: max(10px, env(safe-area-inset-right));
    padding-left: max(10px, env(safe-area-inset-left));
  }

  .main-tabs, .resource-tabs {
    flex-wrap: nowrap;
    overflow-x: auto;
    overscroll-behavior-x: contain;
    scrollbar-gutter: stable;
    scroll-snap-type: x proximity;
    touch-action: pan-x;
    -webkit-overflow-scrolling: touch;
  }

  .main-tabs button, .resource-tabs button {
    flex: 0 0 auto;
    min-height: 44px;
    scroll-snap-align: start;
  }

  .app-header .toolbar {
    width: 100%;
  }

  .app-header .toolbar button {
    flex: 1 1 0;
    min-width: 0;
    min-height: 44px;
  }

  button,
  select,
  input:not([type="hidden"]):not([type="checkbox"]):not([type="radio"]):not([type="color"]),
  textarea {
    min-height: 44px;
  }

  select, input, textarea {
    font-size: 16px;
  }

  input[type="checkbox"], input[type="radio"] {
    min-width: 20px;
    min-height: 20px;
  }

  #timetablePanel .timetable-panel,
  .student-statistics-panel,
  .resource-panel {
    height: auto;
  }

  .resource-table-wrap,
  .timetable-wrap,
  .student-statistics-table-wrap,
  .timetable-editor-table-wrap,
  .planning-report-preview {
    width: 100%;
    max-width: 100%;
    overflow-x: auto;
  }

  .resource-table {
    min-width: 720px;
  }

  .assignment-row .row-actions,
  .copy-forward-controls,
  .student-group-row .row-actions {
    flex-wrap: wrap;
  }
}
/* Planning report layout */
.report-cover-heading { min-width: 0; }
.report-brand { color: #315c69; font-size: 11px; font-weight: 800; letter-spacing: 1px; }
.report-cover h1 { font-size: 25px; }
.report-cover p { font-size: 12px; }
.report-student-chip { min-width: 190px; }
.report-student-chip span { font-size: 10px; font-weight: 700; letter-spacing: .3px; }
.report-student-chip em { color: #d6e5e8; font-size: 11px; font-style: normal; }
.report-section-title { align-items: start; }
.report-section-title > span { display: grid; width: 26px; height: 26px; flex: 0 0 26px; place-items: center; color: #fff; background: #2a697c; border-radius: 50%; font-size: 11px; }
.report-section-title > div { display: grid; gap: 1px; }
.report-section-title h3 { font-size: 16px; }
.report-section-title small { color: #73838a; font-size: 10px; font-weight: 500; }
.report-identity-grid { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 6px; }
.report-value { display: grid; min-width: 0; gap: 3px; padding: 8px; background: #f3f7f8; border: 1px solid #e0e7e9; }
.report-value span { color: #728087; font-size: 10px; }
.report-value strong { color: #2c414b; font-size: 12px; overflow-wrap: anywhere; }
.report-goal-card { min-height: 66px; }
.report-assessment-table { border: 1px solid #d4dfe2; }
.report-assessment-header,
.report-assessment-row { display: grid; grid-template-columns: 1.05fr 1.2fr 1.2fr; align-items: center; gap: 8px; padding: 7px 9px; }
.report-assessment-header { color: #5c7079; background: #edf3f5; font-size: 10px; font-weight: 700; }
.report-assessment-row { min-height: 40px; border-top: 1px solid #e0e7e9; font-size: 11px; }
.report-assessment-row strong { display: grid; gap: 2px; color: #254d5d; }
.report-assessment-row strong small { color: #7c8c92; font-size: 9px; font-weight: 500; }
.report-assessment-row span { color: #3b5059; overflow-wrap: anywhere; }
.report-assessment-row b { color: #9a3c35; font-size: 12px; overflow-wrap: anywhere; }
.report-core-banner { display: flex; align-items: baseline; justify-content: center; gap: 12px; margin: 10px 0 0; padding: 7px 10px; color: #fff; background: #15478d; text-align: center; }
.report-core-banner strong { font-size: 15px; }
.report-core-banner span { color: #dce8f7; font-size: 10px; }
.report-core-grid-three { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.report-core-card { min-width: 0; padding: 10px; border: 1px solid #d5e0e3; border-top: 3px solid #2a697c; background: #fbfcfc; }
.report-core-card:nth-child(2) { border-top-color: #5e7ba6; }
.report-core-card:nth-child(3) { border-top-color: #c1822d; }
.report-core-card .report-section-title { margin-bottom: 8px; }
.report-core-card .report-section-title > span { width: 22px; height: 22px; flex-basis: 22px; font-size: 10px; }
.report-core-card .report-section-title h3 { font-size: 13px; }
.report-core-card .report-section-title small { font-size: 9px; }
.report-goal-callout { display: grid; gap: 3px; min-height: 50px; margin-bottom: 8px; padding: 7px 8px; background: #eef5f6; border-left: 3px solid #2a697c; }
.report-core-card:nth-child(2) .report-goal-callout { border-left-color: #5e7ba6; }
.report-core-card:nth-child(3) .report-goal-callout { border-left-color: #c1822d; }
.report-goal-callout span { color: #71828a; font-size: 10px; }
.report-goal-callout strong { color: #214e60; font-size: 12px; overflow-wrap: anywhere; }
.report-data-table { display: grid; gap: 0; border-top: 1px solid #e0e7e9; }
.report-data-row { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 7px; padding: 7px 0; border-bottom: 1px dashed #d8e0e4; }
.report-data-row div { display: grid; min-width: 0; gap: 2px; }
.report-data-row span { color: #75838a; font-size: 9px; }
.report-data-row strong { color: #31454e; font-size: 11px; line-height: 1.35; overflow-wrap: anywhere; }
.report-timeline-grid { display: grid; grid-template-columns: 1.1fr .9fr; gap: 10px; }
.report-timeline-grid .report-section { min-width: 0; }
.report-footer { padding: 10px 0 2px; color: #687980; font-size: 10px; text-align: center; }

@media (max-width: 820px) {
  .report-core-grid-three,
  .report-identity-grid,
  .report-timeline-grid { grid-template-columns: 1fr; }
  .report-assessment-header,
  .report-assessment-row { grid-template-columns: 1fr 1fr; }
  .report-assessment-header span:last-child,
  .report-assessment-row b { grid-column: 1 / -1; }
  .report-core-banner { align-items: center; flex-direction: column; gap: 2px; }
}

/* Authenticated application shell */
.system-app {
  width: 100%;
  height: 100vh;
  height: 100dvh;
  min-width: 0;
  min-height: 0;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.auth-loading {
  min-height: 100vh;
  min-height: 100dvh;
  display: grid;
  place-content: center;
  justify-items: center;
  gap: 14px;
  color: #334650;
  background: #f2f5f4;
  font-size: 15px;
}

.auth-loading img {
  width: 72px;
  height: 72px;
  object-fit: contain;
}

.login-view {
  min-height: 100vh;
  min-height: 100dvh;
  display: grid;
  grid-template-columns: minmax(320px, .95fr) minmax(390px, 1.05fr);
  color: #17212b;
  background: #f2f5f4;
}

.login-brand {
  min-width: 0;
  padding: clamp(36px, 7vh, 84px) clamp(34px, 6vw, 96px);
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
  color: #f7faf9;
  background: #213541;
  border-right: 4px solid #c98239;
}

.login-brand img {
  width: clamp(88px, 9vw, 132px);
  height: clamp(88px, 9vw, 132px);
  margin-bottom: 28px;
  object-fit: contain;
  filter: drop-shadow(0 5px 12px #0005);
}

.login-brand p {
  margin: 0 0 10px;
  color: #b9d3d3;
  font-size: 13px;
  font-weight: 700;
}

.login-brand h1 {
  max-width: 560px;
  margin: 0 0 12px;
  font-size: 42px;
  line-height: 1.22;
  letter-spacing: 0;
}

.login-brand > span {
  color: #d6e1df;
  font-size: 16px;
}

.login-panel {
  width: min(420px, calc(100% - 48px));
  margin: auto;
  padding: 34px;
  display: grid;
  gap: 18px;
  background: #fff;
  border: 1px solid #c8d2d5;
  border-top: 4px solid #2a7180;
  border-radius: 6px;
  box-shadow: 0 12px 34px #2034401f;
}

.login-panel-heading p {
  margin: 0 0 4px;
  color: #58717a;
  font-size: 13px;
}

.login-panel-heading h2 {
  margin: 0;
  font-size: 25px;
}

.login-panel label,
.change-password-dialog label {
  display: grid;
  gap: 7px;
  color: #2f4149;
  font-weight: 700;
}

.login-panel input,
.change-password-dialog input {
  min-height: 44px;
  font-size: 16px;
}

.password-input {
  position: relative;
  display: block;
}

.password-input input {
  width: 100%;
  padding-right: 64px;
}

.password-toggle {
  position: absolute;
  top: 4px;
  right: 4px;
  min-height: 36px;
  padding: 4px 10px;
  color: #285d68;
  background: #edf3f3;
  border-color: #c6d5d7;
}

.form-error {
  min-height: 20px;
  margin: -4px 0 0;
  color: #a13d32;
  font-size: 13px;
  font-weight: 600;
}

.login-submit {
  min-height: 46px;
  color: #fff;
  background: #246d7c;
  border-color: #246d7c;
  font-size: 16px;
  font-weight: 700;
}

.header-actions {
  min-width: 0;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 12px;
}

.session-controls {
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 8px;
  padding-left: 12px;
  border-left: 1px solid #5d7180;
}

.session-avatar {
  width: 34px;
  height: 34px;
  flex: 0 0 34px;
  display: grid;
  place-content: center;
  color: #18313b;
  background: #dce9e7;
  border-radius: 50%;
  font-weight: 800;
}

.session-identity {
  min-width: 0;
  display: grid;
  line-height: 1.15;
}

.session-identity strong {
  max-width: 130px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: #fff;
  font-size: 14px;
}

.session-identity small {
  color: #bcd0d5;
  font-size: 11px;
}

.session-action {
  min-height: 32px;
  padding: 5px 9px;
  color: #f6f8fa;
  background: transparent;
  border-color: #708292;
}

.modal-backdrop {
  position: fixed;
  inset: 0;
  z-index: 80;
  background: #10232db8;
}

.change-password-dialog {
  position: fixed;
  top: 50%;
  left: 50%;
  z-index: 81;
  width: min(430px, calc(100vw - 32px));
  max-height: calc(100dvh - 32px);
  padding: 0;
  overflow: auto;
  transform: translate(-50%, -50%);
  background: #fff;
  border: 1px solid #9badb3;
  border-radius: 6px;
  box-shadow: 0 18px 48px #0005;
}

.change-password-dialog > header {
  padding: 16px 18px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  color: #fff;
  background: #253d49;
  border-bottom: 3px solid #c98239;
}

.change-password-dialog header span {
  color: #bed2d5;
  font-size: 12px;
}

.change-password-dialog h2 {
  margin: 2px 0 0;
  font-size: 20px;
}

.dialog-close {
  width: 36px;
  height: 36px;
  padding: 0;
  color: #fff;
  background: transparent;
  border-color: #82939d;
  font-size: 24px;
}

.change-password-dialog form {
  padding: 20px;
  display: grid;
  gap: 14px;
}

body.auth-dialog-open {
  overflow: hidden;
}

@media screen and (max-width: 980px) {
  .login-view {
    grid-template-columns: minmax(280px, .8fr) minmax(360px, 1.2fr);
  }

  .login-brand {
    padding-right: 34px;
    padding-left: 34px;
  }

  .login-brand h1 {
    font-size: 30px;
  }
}

@media screen and (max-width: 820px) {
  .system-app {
    height: auto;
    min-height: 100dvh;
    overflow: visible;
  }

  .login-view {
    min-height: 100dvh;
    grid-template-columns: minmax(0, 1fr);
    align-content: start;
  }

  .login-brand {
    min-height: 220px;
    padding: max(24px, env(safe-area-inset-top)) 24px 26px;
    justify-content: flex-end;
    border-right: 0;
    border-bottom: 4px solid #c98239;
  }

  .login-brand img {
    width: 70px;
    height: 70px;
    margin-bottom: 14px;
  }

  .login-brand p {
    margin-bottom: 5px;
  }

  .login-brand h1 {
    margin-bottom: 6px;
    font-size: 24px;
  }

  .login-panel {
    width: 100%;
    margin: 0;
    padding: 24px 20px max(28px, env(safe-area-inset-bottom));
    border: 0;
    border-radius: 0;
    box-shadow: none;
  }

  .app-header {
    align-items: stretch;
  }

  .header-actions {
    align-items: stretch;
    flex-direction: column-reverse;
  }

  .session-controls {
    width: 100%;
    padding: 0 0 8px;
    border-left: 0;
    border-bottom: 1px solid #5d7180;
  }

  .session-identity {
    flex: 1;
  }

  .session-identity strong {
    max-width: none;
  }

  .session-action {
    min-height: 40px;
  }
}

@media screen and (max-width: 420px) {
  .session-avatar {
    display: none;
  }

  .session-controls {
    gap: 6px;
  }

  .session-action {
    padding-right: 8px;
    padding-left: 8px;
  }
}

.account-management {
  height: 100%;
  min-height: 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.account-management-heading {
  flex: 0 0 auto;
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 16px;
  padding-bottom: 8px;
  border-bottom: 2px solid #8bb3bb;
}

.account-management-heading h2,
.account-management-heading p,
.account-create-form h3,
.account-create-form p {
  margin: 0;
}

.account-management-heading p,
.account-create-form p {
  margin-top: 3px;
  color: #63747c;
  font-size: 12px;
}

.account-management-heading > strong {
  color: #285f6b;
  font-size: 13px;
}

.account-toolbar {
  flex: 0 0 auto;
  display: grid;
  grid-template-columns: minmax(220px, 1fr) minmax(150px, 220px) minmax(140px, 190px) auto;
  align-items: end;
  gap: 8px;
}

.account-toolbar label,
.account-create-form label {
  margin: 0;
}

.account-toolbar button {
  min-height: 34px;
}

.account-management-body {
  flex: 1;
  min-height: 0;
  display: grid;
  grid-template-columns: minmax(250px, 300px) minmax(0, 1fr);
  border-top: 1px solid #cbd5d9;
}

.account-create-form {
  min-height: 0;
  padding: 14px 16px 14px 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
  overflow-y: auto;
  border-right: 1px solid #cbd5d9;
}

.account-create-form > button {
  min-height: 38px;
  margin-top: 2px;
  color: #fff;
  background: #286f7e;
  border-color: #286f7e;
  font-weight: 700;
}

.account-table-wrap {
  min-width: 0;
  min-height: 0;
  overflow: auto;
  scrollbar-gutter: stable;
}

.account-table {
  width: 100%;
  min-width: 760px;
  border-collapse: collapse;
  font-size: 13px;
}

.account-table th {
  position: sticky;
  top: 0;
  z-index: 1;
  padding: 9px 10px;
  text-align: left;
  white-space: nowrap;
  color: #263b44;
  background: #e8eef0;
  border-bottom: 1px solid #bdcbd0;
}

.account-table td {
  padding: 8px 10px;
  vertical-align: middle;
  border-bottom: 1px solid #d6dfe2;
}

.account-table td:first-child strong,
.account-table td:first-child small {
  display: block;
}

.account-table td:first-child small {
  margin-top: 2px;
  color: #728189;
  font-size: 11px;
}

.account-table select {
  min-width: 112px;
}

.account-username {
  font-variant-numeric: tabular-nums;
  font-weight: 700;
}

.account-fixed-role {
  color: #4a5d66;
  font-weight: 700;
}

.account-status-active,
.account-status-inactive {
  display: inline-flex;
  align-items: center;
  min-height: 24px;
  padding: 2px 8px;
  border-radius: 3px;
  font-weight: 700;
}

.account-status-active {
  color: #1c6848;
  background: #e1f2e9;
  border: 1px solid #a9d5bf;
}

.account-status-inactive {
  color: #944137;
  background: #f8e7e3;
  border: 1px solid #dfb2aa;
}

.account-row-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
}

.account-row-actions button {
  min-height: 30px;
  padding: 4px 8px;
}

@media screen and (min-width: 821px) {
  .account-table th:first-child,
  .account-table td:first-child {
    position: sticky;
    left: 0;
    z-index: 2;
    width: 140px;
    min-width: 140px;
    max-width: 180px;
    overflow-wrap: anywhere;
    background: var(--campus-paper, #fff);
    box-shadow: 1px 0 0 #cbd5d9;
  }
  .account-table th:first-child {
    z-index: 3;
    background: #e8eef0;
  }
}

@media screen and (max-width: 980px) {
  .account-toolbar {
    grid-template-columns: minmax(180px, 1fr) repeat(2, minmax(130px, .6fr)) auto;
  }

  .account-management-body {
    grid-template-columns: minmax(220px, 260px) minmax(0, 1fr);
  }
}

@media screen and (max-width: 820px) {
  .resource-panel:has(.account-management) {
    overflow: visible;
  }

  .account-management {
    height: auto;
  }

  .account-management-heading {
    align-items: flex-start;
    flex-direction: column;
    gap: 5px;
  }

  .account-toolbar {
    grid-template-columns: minmax(0, 1fr) minmax(120px, .55fr);
  }

  .account-management-body {
    grid-template-columns: minmax(0, 1fr);
  }

  .account-create-form {
    padding: 14px 0;
    overflow: visible;
    border-right: 0;
    border-bottom: 1px solid #cbd5d9;
  }

  .account-table-wrap {
    overflow: visible;
  }

  .account-table {
    min-width: 0;
  }

  .account-table thead {
    display: none;
  }

  .account-table,
  .account-table tbody,
  .account-table tr,
  .account-table td {
    display: block;
    width: 100%;
  }

  .account-table tr {
    margin: 10px 0;
    padding: 8px 10px;
    background: #fff;
    border: 1px solid #c8d4d8;
    border-left: 4px solid #2b7180;
    border-radius: 4px;
  }

  .account-table td {
    min-height: 34px;
    padding: 5px 0 5px 90px;
    position: relative;
    border-bottom: 1px solid #e0e7e9;
  }

  .account-table td:last-child {
    border-bottom: 0;
  }

  .account-table td::before {
    content: attr(data-label);
    position: absolute;
    top: 8px;
    left: 0;
    width: 80px;
    color: #667880;
    font-size: 12px;
    font-weight: 700;
  }

  .account-table td[colspan] {
    padding-left: 0;
  }

  .account-table td[colspan]::before {
    display: none;
  }

  .account-row-actions {
    padding-top: 8px !important;
  }
}
/* Compact adaptive workspaces */
@media screen and (min-width: 821px) {
  .app-header {
    min-height: 48px;
    padding: 6px var(--page-gutter);
    border-bottom-width: 2px;
  }

  .app-header h1 { font-size: 20px; }
  .app-header .toolbar { gap: 6px; }
  .app-header .toolbar button { min-height: 32px; padding: 5px 9px; }

  .app-shell {
    padding-top: 6px;
    padding-bottom: 6px;
  }

  .main-tabs { margin-bottom: 6px; }
  .main-tabs button { padding: 6px 10px; }

  .app-footer {
    padding-top: 5px;
    padding-bottom: 5px;
    font-size: 12px;
    line-height: 1.2;
  }

  .week-controls { padding: 5px 10px; gap: 6px 8px; }
  .week-controls button { min-height: 32px; padding: 4px 9px; }
  .week-date-label { gap: 4px; }
  .week-date-label input { min-width: 132px; height: 32px; padding: 3px 6px; }

  .student-statistics-heading {
    grid-template-columns: auto minmax(280px, 1fr) auto;
    gap: 6px 18px;
    align-items: center;
    padding: 6px 10px;
  }

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

  .student-statistics-title h2 { margin: 0; white-space: nowrap; }
  .student-statistics-title p { display: none; }
  .personal-query-modes { flex-wrap: nowrap; gap: 4px; margin: 0; }
  .personal-query-modes button { min-height: 32px; padding: 5px 9px; white-space: nowrap; }

  .student-statistics-filters { grid-column: 3; grid-row: 1; gap: 6px; }
  .student-statistics-filters label,
  .student-statistics-filters label:last-child {
    display: flex;
    width: auto;
    align-items: center;
    gap: 5px;
    white-space: nowrap;
  }
  .student-statistics-filters select { width: 142px; }
  .student-statistics-filters input { width: 176px; }

  .student-statistics-summary {
    grid-column: 2;
    grid-row: 1;
    justify-content: center;
    gap: 8px 14px;
    font-size: 11px;
  }
  .student-statistics-summary strong { font-size: 13px; }
}

@media screen and (min-width: 821px) and (max-width: 1180px) {
  .student-statistics-heading {
    grid-template-columns: auto minmax(0, 1fr);
    gap: 5px 12px;
  }

  .student-statistics-filters { grid-column: 2; }
  .student-statistics-summary {
    grid-column: 1 / -1;
    grid-row: 2;
    justify-content: flex-start;
  }
}

@media screen and (min-width: 821px) and (max-height: 720px) {
  .app-header { min-height: 44px; padding-top: 4px; padding-bottom: 4px; }
  .app-header h1 { font-size: 18px; }
  .app-shell { padding-top: 4px; padding-bottom: 4px; }
  .main-tabs { margin-bottom: 4px; }
  .student-statistics-heading { padding-top: 4px; padding-bottom: 4px; }
}

@media screen and (max-width: 820px) {
  .app-header { gap: 8px; padding-top: 8px; padding-bottom: 8px; }
  .app-header h1 { font-size: 19px; }
  .app-shell { padding: 6px 8px; }
  .main-tabs { margin-bottom: 6px; }

  .statistics-week-controls {
    display: grid;
    grid-template-columns: repeat(6, minmax(0, 1fr));
    gap: 6px;
    padding: 6px;
  }

  .statistics-week-controls > button:nth-of-type(1) { grid-column: 1 / 3; }
  .statistics-week-controls > button:nth-of-type(2) { grid-column: 3 / 5; }
  .statistics-week-controls > button:nth-of-type(3) { grid-column: 5 / 7; }
  .statistics-week-controls .week-date-label {
    display: flex;
    grid-column: 1 / -1;
    align-items: center;
    gap: 4px;
    margin: 0;
    white-space: nowrap;
  }
  .statistics-week-controls .week-date-label input { min-width: 0; flex: 1; }
  .statistics-week-controls .copy-week-button { grid-column: 4 / 7; }
  .statistics-week-controls .week-range {
    grid-column: 1 / 4;
    margin: 0;
    text-align: left;
  }

  .student-statistics-heading {
    grid-template-columns: 1fr;
    gap: 8px;
    padding: 8px;
  }

  .student-statistics-title {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    align-items: center;
    gap: 8px;
  }

  .student-statistics-title h2 { margin: 0; font-size: 16px; white-space: nowrap; }
  .student-statistics-title p { display: none; }
  .personal-query-modes { justify-self: end; flex-wrap: nowrap; margin: 0; }
  .personal-query-modes button { min-height: 44px; white-space: nowrap; }

  .student-statistics-filters {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
  }
  .student-statistics-filters label,
  .student-statistics-filters label:last-child { width: auto; }
  .student-statistics-summary {
    grid-column: 1;
    gap: 6px 12px;
    line-height: 1.35;
  }
}

@media screen and (min-width: 821px) {
  #planningPanel:not([hidden]) { gap: 6px; }

  .planning-toolbar {
    min-height: 40px;
    align-items: center;
    gap: 10px;
    padding: 2px;
  }

  .planning-toolbar > div:first-child {
    display: flex;
    align-items: baseline;
    gap: 8px;
  }
  .planning-toolbar > div:first-child > .eyebrow,
  .planning-toolbar > div:first-child > .muted { display: none; }
  .planning-toolbar h2 { margin: 0; white-space: nowrap; }

  .planning-toolbar-controls { flex-wrap: nowrap; gap: 6px; }
  .planning-toolbar-controls label {
    display: flex;
    min-width: 0;
    align-items: center;
    gap: 5px;
    white-space: nowrap;
  }
  .planning-toolbar-controls select { width: 156px; height: 34px; padding: 4px 7px; }
  .planning-toolbar-controls label:nth-child(2) select { width: 180px; }
  .planning-toolbar-controls button { min-height: 34px; height: 34px; padding: 5px 10px; }

  .planning-status-bar {
    min-height: 34px;
    gap: 5px 20px;
    padding: 4px 8px;
  }
  .planning-status-bar > div {
    display: flex;
    align-items: center;
    gap: 6px;
  }
  .planning-status-bar strong { font-size: 12px; }

  .planning-form,
  .planning-report-panel { padding: 10px; }
  .planning-form > .panel-heading .muted { display: none; }
  .planning-form > .panel-heading,
  .planning-report-panel > .panel-heading { margin-bottom: 6px; }
  .planning-section-tabs {
    gap: 3px;
    margin-bottom: 6px;
    padding-bottom: 5px;
  }
  .planning-section-tabs button { padding: 5px 8px; }
  .planning-form-actions { padding-top: 6px; }
}

@media screen and (min-width: 821px) and (max-height: 720px) {
  .planning-toolbar { min-height: 36px; }
  .planning-status-bar { min-height: 30px; padding-top: 3px; padding-bottom: 3px; }
  .planning-form,
  .planning-report-panel { padding: 8px; }
}

@media screen and (max-width: 820px) {
  #planningPanel:not([hidden]) { gap: 6px; }
  .planning-toolbar { gap: 6px; padding: 2px; }
  .planning-toolbar > div:first-child > .eyebrow,
  .planning-toolbar > div:first-child > .muted { display: none; }
  .planning-toolbar h2 { margin: 0; font-size: 17px; }

  .planning-toolbar-controls {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 7px;
    width: 100%;
  }
  .planning-toolbar-controls label {
    min-width: 0;
    margin: 0;
  }
  .planning-toolbar-controls label,
  .planning-toolbar-controls button { flex: none; }
  .planning-toolbar-controls button { grid-column: 1 / -1; min-height: 44px; height: 44px; }

  .planning-status-bar {
    gap: 6px 12px;
    padding: 6px 8px;
  }
  .planning-status-bar > div {
    display: flex;
    align-items: center;
    gap: 5px;
  }
  .planning-review-comment { min-width: 0; max-width: none; flex-basis: 100%; }

  .planning-form,
  .planning-report-panel { padding: 8px; }
  .planning-form > .panel-heading .muted { display: none; }
  .planning-form > .panel-heading,
  .planning-report-panel > .panel-heading { margin-bottom: 6px; }

  .planning-section-tabs {
    flex-wrap: nowrap;
    gap: 3px;
    margin-bottom: 6px;
    padding-bottom: 4px;
    overflow-x: auto;
    overscroll-behavior-x: contain;
    touch-action: pan-x;
    -webkit-overflow-scrolling: touch;
  }
  .planning-section-tabs button {
    min-height: 44px;
    flex: 0 0 auto;
    padding: 6px 9px;
  }
  .planning-form-actions { padding-top: 6px; }
}
/* Full-width planning editor and on-demand report preview */
.planning-layout {
  grid-template-columns: minmax(0, 1fr);
  grid-template-rows: minmax(0, 1fr);
  overflow: hidden;
}

.planning-form { width: 100%; height: 100%; }
.planning-report-panel[hidden],
.planning-preview-backdrop[hidden] { display: none !important; }

.planning-preview-backdrop {
  position: fixed;
  inset: 0;
  z-index: 90;
  background: rgba(19, 37, 47, .56);
}

.planning-report-panel {
  position: fixed;
  inset: max(24px, 5dvh) max(32px, 5vw);
  z-index: 91;
  display: flex;
  min-width: 0;
  max-width: none;
  max-height: 90dvh;
  padding: 14px;
  box-shadow: 0 18px 50px rgba(15, 31, 40, .28);
}

body.planning-preview-open { overflow: hidden; }
.planning-preview-heading { flex: 0 0 auto; }
.planning-preview-actions { display: flex; align-items: center; gap: 6px; }
.planning-preview-close {
  display: grid;
  width: 36px;
  height: 36px;
  padding: 0;
  place-items: center;
  font-size: 24px;
  line-height: 1;
}

#openPlanningPreviewButton {
  color: #1e5261;
  border-color: #6d8d97;
  background: #ffffff;
}

@media screen {
  body.campus-ui .parent-child-control {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 8px;
    margin: 0;
    width: 260px;
    max-width: 32vw;
    min-width: 0;
    white-space: nowrap;
  }
  body.campus-ui .parent-child-control select {
    flex: 1 1 auto;
    width: 0;
    min-width: 0;
    min-height: 36px;
    text-overflow: ellipsis;
  }
}

@media screen and (max-width: 820px) {
  body.campus-ui.parent-session .system-app { grid-template-rows: 104px minmax(0, 1fr) 24px; }
  body.campus-ui.parent-session .app-header { flex-wrap: wrap; align-content: center; padding-top: 6px; padding-bottom: 6px; }
  body.campus-ui.parent-session .campus-header-brand { width: 100%; }
  body.campus-ui.parent-session .app-header h1 { max-width: none; }
  body.campus-ui.parent-session .header-actions { width: 100%; }
  body.campus-ui.parent-session .parent-child-control { flex: 1 1 auto; width: auto; max-width: none; }
  body.campus-ui.parent-session .parent-child-control select { min-height: 40px; font-size: 16px; }
}

@media screen and (min-width: 1181px) {
  .planning-field-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

@media screen and (max-width: 820px) {
  .planning-layout { display: block; overflow: visible; }
  .planning-form { height: auto; overflow: visible; }
  .planning-form-fields { overflow: visible; }
  .planning-toolbar-controls button { grid-column: auto; }
  .planning-report-panel {
    inset: 0;
    width: 100%;
    height: 100dvh;
    max-height: none;
    padding: max(8px, env(safe-area-inset-top)) max(8px, env(safe-area-inset-right)) max(8px, env(safe-area-inset-bottom)) max(8px, env(safe-area-inset-left));
    border: 0;
    border-radius: 0;
    overflow: hidden;
  }
  .planning-preview-close { width: 44px; height: 44px; }
  .planning-report-preview { min-height: 0; flex: 1 1 auto; overflow: auto; }
}