:root {
  --bg: #eef5fb;
  --panel: #ffffff;
  --edge: #c8d9ea;
  --edge-strong: #adc6df;
  --text: #1f3551;
  --muted: #59718d;
  --accent: #1761ae;
  --accent-strong: #0f4a87;
  --success: #4f9a2f;
  --danger: #b04040;
}

* {
  box-sizing: border-box;
}

body {
  margin: 0;
  font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
  color: var(--text);
  background:
    radial-gradient(circle at 10% 0%, rgba(90, 173, 72, 0.16) 0, transparent 40%),
    radial-gradient(circle at 100% 100%, rgba(23, 97, 174, 0.14) 0, transparent 35%),
    var(--bg);
}

.shell {
  width: min(1180px, 95vw);
  margin: 1.1rem auto 2rem;
  display: grid;
  gap: 0.9rem;
}

.title-logo {
  display: block;
  grid-area: title;
  width: min(980px, 118%);
  max-height: none;
  object-fit: contain;
  object-position: left center;
  height: auto;
  justify-self: start;
  margin: -192px 0 -272px -150px;
}

.subtitle {
  margin: -0.32rem 0 0;
  color: #2f1b0f;
  font-family: "Segoe Script", "Lucida Handwriting", "Brush Script MT", "Palatino Linotype", cursive;
  font-weight: 700;
  font-size: 1.22rem;
  letter-spacing: 0.01em;
  text-transform: none;
  text-shadow: 0 1px 0 rgba(255, 248, 236, 0.7);
  width: min(980px, 118%);
  justify-self: start;
  margin-left: -150px;
  text-align: center;
}

.top {
  display: grid;
  grid-template-columns: max-content 1fr;
  grid-template-areas:
    "brand title"
    "brand subtitle"
    "session session";
  gap: 0 0.85rem;
  align-items: start;
}

.top .subtitle {
  grid-area: subtitle;
}

.session-bar {
  grid-area: session;
  display: flex;
  justify-content: flex-end;
  align-items: center;
  gap: 0.75rem;
  margin-top: 0.35rem;
}

.session-bar p {
  margin: 0;
}

.brand-photo {
  display: block;
  grid-area: brand;
  width: auto;
  max-width: none;
  height: 220px;
  margin: 0;
  justify-self: start;
  align-self: stretch;
  object-fit: contain;
  object-position: center top;
  border-radius: 12px;
  border: 1px solid var(--edge-strong);
  box-shadow: 0 8px 20px rgba(95, 63, 27, 0.22);
}

.tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 0.45rem;
}

.tab-btn {
  border: 1px solid #c2a676;
  background: #fff8ed;
  color: var(--text);
  border-radius: 10px;
  padding: 0.45rem 0.75rem;
  cursor: pointer;
}

.tab-btn.active {
  background: var(--accent);
  border-color: var(--accent);
  color: #fff;
}

.app-layout {
  display: grid;
  grid-template-columns: minmax(170px, 210px) minmax(0, 1fr);
  gap: 0.9rem;
  align-items: start;
}

.panel {
  background: var(--panel);
  border: 1px solid var(--edge);
  border-radius: 14px;
  padding: 1rem;
  box-shadow: 0 8px 20px rgba(24, 33, 20, 0.08);
}

.auth-shell {
  min-height: calc(100vh - 2rem);
  align-content: start;
  justify-items: stretch;
  grid-template-columns: minmax(0, 1fr);
}

.auth-top {
  grid-column: auto;
  width: 100%;
  display: grid;
  grid-template-columns: 1fr;
  grid-template-areas:
    "title"
    "subtitle";
  gap: 0;
  justify-items: start;
  text-align: left;
  padding: 0.7rem 1rem;
}

.auth-top .brand-photo {
  display: none;
}

.auth-top .title-logo {
  grid-area: title;
  width: min(730px, 100%);
  max-height: 146px;
  height: auto;
  margin: 0;
  justify-self: start;
}

.auth-top .subtitle {
  grid-area: subtitle;
  width: min(520px, calc(100% - 210px));
  margin: 0;
  margin-top: -0.12rem;
  margin-left: 69px;
  justify-self: start;
  text-align: center;
  font-size: 0.9rem;
  color: #5f7087;
  text-shadow: none;
}

.auth-panel {
  grid-column: auto;
  max-width: 420px;
  justify-self: center;
  width: min(100%, 420px);
  margin-top: 0.4rem;
  margin-left: 0;
  transform: none;
}

.auth-card {
  display: grid;
  gap: 0.85rem;
  justify-items: center;
  text-align: center;
  background: linear-gradient(180deg, #ffffff 0%, #f7fbff 100%);
  border: 1px solid #dbe5f0;
  border-radius: 20px;
  padding: 1rem 1rem 1.05rem;
  box-shadow: 0 18px 38px rgba(31, 47, 69, 0.08);
}

.auth-form {
  display: grid;
  grid-template-columns: 1fr !important;
  width: min(100%, 310px);
  justify-items: center;
  margin: 0 auto;
}

.auth-form label {
  width: 100%;
  text-align: left;
}

.auth-form button {
  justify-self: center;
}

body.auth-screen-active {
  min-height: 100vh;
  background: #f5f8fe;
}

body.auth-screen-active .auth-shell {
  width: min(980px, calc(100vw - 2rem));
  min-height: calc(100vh - 2rem);
  margin: 1rem auto;
  align-content: start;
  gap: 1.65rem;
}

body.auth-screen-active .auth-top {
  min-height: 92px;
  padding: 0.8rem 1.35rem;
  border: 1px solid #e2e9f5;
  border-radius: 20px;
  background: #ffffff;
  box-shadow: 0 18px 42px rgba(31, 47, 69, 0.08);
}

body.auth-screen-active .auth-top .title-logo {
  width: min(410px, 100%);
  max-height: 74px;
  object-fit: contain;
}

body.auth-screen-active .auth-panel {
  width: min(100%, 380px);
  max-width: 380px;
  margin-top: 0;
  padding: 0;
  border: 0;
  background: transparent;
  box-shadow: none;
}

body.auth-screen-active .auth-card {
  gap: 0.72rem;
  width: 100%;
  padding: 1.35rem 1.35rem 1.25rem;
  border: 1px solid #e0e8f5;
  border-radius: 18px;
  background: #ffffff;
  box-shadow: 0 18px 38px rgba(31, 47, 69, 0.1);
}

body.auth-screen-active .auth-card h2 {
  margin: 0;
  color: #17243d;
  font-size: 1.38rem;
  line-height: 1.15;
}

body.auth-screen-active .auth-card .muted {
  width: min(100%, 260px);
  margin: 0.35rem auto 0;
  color: #687895;
  font-size: 0.88rem;
  line-height: 1.35;
}

body.auth-screen-active .auth-card-icon {
  display: inline-grid;
  place-items: center;
  width: 46px;
  height: 46px;
  border-radius: 999px;
  background: #edf2ff;
}

body.auth-screen-active .auth-card-icon img {
  width: 23px;
  height: 23px;
  object-fit: contain;
}

body.auth-screen-active .auth-form {
  width: min(100%, 285px);
  gap: 0.62rem;
}

body.auth-screen-active .auth-form label {
  display: grid;
  gap: 0.28rem;
  color: #17243d;
  font-size: 0.82rem;
  font-weight: 600;
}

body.auth-screen-active .auth-input-shell {
  display: block;
  min-height: 0;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}

body.auth-screen-active .auth-input-shell img {
  display: none;
}

body.auth-screen-active .auth-input-shell input {
  width: 100%;
  min-height: 36px;
  padding: 0.42rem 0.55rem;
  border: 1px solid #bed1ff;
  border-radius: 8px;
  outline: 0;
  background: #ffffff;
  color: #17243d;
  font-size: 0.88rem;
  font-weight: 400;
  box-shadow: none;
}

body.auth-screen-active .auth-input-shell input:focus {
  border-color: #8eabff;
  box-shadow: 0 0 0 2px rgba(49, 89, 255, 0.12);
}

body.auth-screen-active .auth-input-shell input::placeholder {
  color: #7b89a3;
}

body.auth-screen-active .auth-form-secondary {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  width: 100%;
  min-height: 22px;
}

body.auth-screen-active .link-button {
  border: 0;
  background: transparent;
  color: #244ee6;
  padding: 0;
  box-shadow: none;
  cursor: pointer;
  font-size: 0.82rem;
  font-weight: 600;
}

body.auth-screen-active .auth-primary-button,
body.auth-screen-active .auth-secondary-button {
  width: 100%;
  min-height: 40px;
  border-radius: 8px;
  font-size: 0.9rem;
  font-weight: 700;
}

body.auth-screen-active .auth-primary-button {
  border-color: #244ee6;
  background: linear-gradient(135deg, #3159ff, #1f3ec6);
  color: #ffffff;
  box-shadow: 0 14px 24px rgba(31, 79, 224, 0.22);
}

body.auth-screen-active .auth-secondary-button {
  border: 1px solid #d8e2f2;
  background: #f8fbff;
  color: #39506d;
  box-shadow: none;
}

body.auth-screen-active .status-text {
  width: min(100%, 285px);
  text-align: left;
}

.status-text {
  margin: 0;
  border-radius: 8px;
  padding: 0.6rem 0.7rem;
  background: #f6f1e7;
  border: 1px solid #d2c3a8;
}

.status-text.error {
  background: #f9eceb;
  border-color: #d8a5a5;
  color: #6f2323;
}

.status-text.success {
  background: #edf6ed;
  border-color: #bfd6bf;
  color: #234b23;
}

.status-text.info {
  background: #edf4fb;
  border-color: #c7d8ea;
  color: #35516e;
}

.callout {
  margin: 0;
  border-radius: 10px;
  padding: 0.7rem 0.8rem;
  border: 1px solid #d8cfbf;
}

.callout-warn {
  background: #fff4df;
  border-color: #ddb777;
}

.read-only-note {
  margin-bottom: 0.6rem;
}

.hidden {
  display: none !important;
}

.tab-panel {
  display: none;
}

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

h2,
h3 {
  margin-top: 0;
}

.kpi-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(140px, 1fr));
  gap: 0.7rem;
}

.kpi {
  border: 1px solid #e1cfad;
  border-radius: 10px;
  background: linear-gradient(150deg, #fff8ee, #f6e8d4);
  padding: 0.65rem;
  text-align: center;
}

.kpi-label {
  margin: 0;
  font-size: 0.86rem;
  color: var(--muted);
}

.kpi-value {
  margin: 0.35rem 0 0;
  font-size: 1.3rem;
  font-weight: 700;
}

.progress-wrap {
  margin-top: 0.8rem;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.8rem;
}

.progress-title {
  margin: 0 0 0.35rem;
  font-weight: 600;
}

.progress-bar {
  width: 100%;
  height: 14px;
  border: 1px solid #d6c3a0;
  border-radius: 999px;
  background: #f3e8d6;
  overflow: hidden;
}

.progress-fill {
  width: 0;
  height: 100%;
  background: linear-gradient(90deg, var(--accent), #5aad48);
  transition: width 240ms ease;
}

.administration-subtabs {
  margin-bottom: 0.85rem;
}

.administration-tab-panel {
  display: grid;
  gap: 0.85rem;
}

.administration-intro-card,
.administration-config-card,
.administration-transition-card,
.administration-preview-card {
  border: 1px solid var(--line);
  border-radius: 18px;
  background: linear-gradient(180deg, rgba(255,255,255,0.98), rgba(247,250,253,0.98));
  box-shadow: var(--shadow-soft);
}

.administration-intro-card,
.administration-config-card,
.administration-transition-card {
  padding: 1rem 1.1rem;
}

.administration-intro-card h3,
.administration-config-card h4,
.administration-transition-card h4 {
  margin: 0 0 0.35rem;
}

.administration-config-form {
  display: grid;
  gap: 0.85rem;
}

.administration-config-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 0.55rem 1rem;
}

.administration-config-select-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 0.7rem 1rem;
}

.administration-config-select-grid.alert-number-field-grid {
  grid-template-columns: repeat(auto-fit, minmax(170px, max-content));
  justify-content: flex-start;
}

.administration-config-select-grid.alert-number-field-grid label {
  width: max-content;
  max-width: 240px;
}

.administration-config-select-grid.alert-number-field-grid input {
  width: 92px;
}

.administration-config-grid .checklist-row {
  border: 1px solid #dbe6f2;
  border-radius: 999px;
  padding: 0.45rem 0.7rem;
  background: #fff;
}

.administration-config-actions {
  justify-content: flex-start;
}

.dashboard-visibility-group + .dashboard-visibility-group {
  margin-top: 0.9rem;
}

.dashboard-visibility-group h5 {
  margin: 0 0 0.45rem;
  font-size: 0.95rem;
  color: var(--ink-soft);
}

.dashboard-chip-card {
  width: 100%;
  text-align: left;
  border: 1px solid #dbe6f2;
  background: #fff;
  cursor: pointer;
}

.dashboard-chip-card:hover {
  border-color: #b8cee8;
  box-shadow: 0 10px 22px rgba(34, 72, 112, 0.08);
}

.dashboard-link-btn {
  white-space: nowrap;
}

.school-day-dashboard-return {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 0.9rem;
  margin-bottom: 0.85rem;
}

.school-day-dashboard-return.hidden {
  display: none;
}

.dashboard-origin-return {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 0.9rem;
  margin-bottom: 0.85rem;
}

.dashboard-origin-return.hidden {
  display: none;
}

.school-day-dashboard-focus {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
  margin-top: 0.55rem;
}

.dashboard-origin-focus {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
  margin-top: 0.55rem;
}

.school-day-dashboard-focus:empty {
  display: none;
}

.dashboard-origin-focus:empty {
  display: none;
}

.school-day-dashboard-focus-chip {
  display: inline-flex;
  align-items: center;
  min-height: 1.7rem;
  border: 1px solid #c8d7e8;
  border-radius: 999px;
  background: #f7fbff;
  color: #35516e;
  padding: 0.24rem 0.62rem;
  font-size: 0.78rem;
  font-weight: 700;
  line-height: 1;
  white-space: nowrap;
}

.dashboard-origin-focus-chip {
  display: inline-flex;
  align-items: center;
  min-height: 1.7rem;
  border: 1px solid #c8d7e8;
  border-radius: 999px;
  background: #f7fbff;
  color: #35516e;
  padding: 0.24rem 0.62rem;
  font-size: 0.78rem;
  font-weight: 700;
  line-height: 1;
  white-space: nowrap;
}

.school-day-dashboard-return-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 0.45rem;
}

.school-day-dashboard-return-actions button {
  white-space: nowrap;
}

.dashboard-origin-return-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 0.45rem;
}

.dashboard-origin-return-actions button {
  white-space: nowrap;
}

.dashboard-origin-title {
  margin: 0 0 0.25rem;
  font-weight: 700;
}

#administration-workspace-config-message {
  margin-top: 0.15rem;
  font-weight: 600;
}

.administration-preview-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 0.8rem;
}

.administration-preview-card {
  padding: 0.9rem 1rem;
}

.administration-preview-label {
  margin: 0 0 0.3rem;
  font-size: 0.78rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--muted);
}

.administration-preview-value {
  margin: 0;
  font-size: 1.2rem;
  font-weight: 700;
  color: var(--ink);
}

.administration-transition-card {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.9rem;
}

.muted {
  color: var(--muted);
}

.split {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.85rem;
}

.grid-form,
.inline-form,
.quarter-grid {
  display: grid;
  gap: 0.5rem;
}

.grid-form {
  grid-template-columns: repeat(3, minmax(160px, 1fr));
  margin-bottom: 0.6rem;
}

.inline-form {
  grid-template-columns: 1fr auto;
}

.quarter-grid {
  grid-template-columns: repeat(4, minmax(120px, 1fr));
  margin-bottom: 0.75rem;
}

#school-year-form > button,
#quarters-form > button,
#holiday-form > button,
#daily-break-form > button {
  align-self: end;
  justify-self: start;
  width: auto;
  min-width: 0;
  height: calc(1em + 0.84rem + 2px);
  padding: 0.42rem 0.8rem;
}

label {
  display: grid;
  gap: 0.2rem;
  font-size: 0.9rem;
}

.checkbox-field {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  align-self: end;
}

.checkbox-field input[type="checkbox"] {
  width: auto;
  margin: 0;
}

.checkbox-field-stacked {
  display: grid;
  justify-items: center;
  align-self: start;
  align-content: start;
  gap: 0.35rem;
  text-align: center;
  font-size: inherit;
}

.checkbox-field-stacked input[type="checkbox"] {
  margin-top: calc((1em + 0.84rem + 2px - 13px) / 2);
}

input,
select,
button {
  font: inherit;
}

input:not([type="checkbox"]):not([type="radio"]),
select {
  border: 1px solid #ccb48d;
  border-radius: 8px;
  padding: 0.42rem 0.55rem;
  background: #fff;
  min-height: calc(1em + 0.84rem + 2px);
}

button {
  border: 0;
  border-radius: 8px;
  padding: 0.48rem 0.8rem;
  background: var(--accent);
  color: #fff;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  line-height: 1.2;
}

button:hover {
  filter: brightness(1.05);
}

button.secondary-btn {
  background: #6c5847;
}

.weekday-set {
  border: 1px solid #ccd9c5;
  border-radius: 8px;
  padding: 0.45rem;
  display: flex;
  gap: 0.6rem;
  flex-wrap: wrap;
  align-items: center;
}

.weekday-set legend {
  padding: 0 0.25rem;
  font-size: 0.86rem;
  color: var(--muted);
}

.weekday-set label {
  display: inline-flex;
  gap: 0.25rem;
  align-items: center;
}

.checklist-vertical {
  display: grid;
  gap: 0.3rem;
  min-width: 220px;
}

.checklist-row {
  display: flex;
  align-items: center;
  gap: 0.45rem;
}

.checklist-row label {
  display: inline;
  cursor: pointer;
}

.multi-select-dropdown {
  border: 1px solid #ccb48d;
  border-radius: 8px;
  padding: 0;
  background: #fff;
  width: 100%;
  min-height: 0;
  box-sizing: border-box;
}

.multi-select-dropdown summary {
  display: flex;
  align-items: center;
  cursor: pointer;
  user-select: none;
  padding: 0.42rem 0.55rem;
  line-height: 1.2;
  min-height: calc(1em + 0.84rem + 2px);
  box-sizing: border-box;
  list-style-position: inside;
}

.multi-select-dropdown[open] .checklist-vertical {
  margin-top: 0.45rem;
  max-height: 190px;
  overflow: auto;
  padding: 0 0.55rem 0.45rem;
}

.attendance-student-field {
  align-self: stretch;
}

.trend-student-field {
  align-self: stretch;
}

.volume-student-field {
  align-self: stretch;
}

.work-student-field {
  align-self: stretch;
}

.student-performance-grade-method-field {
  align-self: stretch;
  margin: 0;
  padding: 0;
  border: 0;
}

#student-performance-filter-form {
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  margin-bottom: 0.75rem;
  column-gap: 1rem;
  row-gap: 0.6rem;
}

.student-performance-grade-method-field legend {
  margin-bottom: 0;
  padding: 0;
  font-size: 0.88rem;
  font-weight: 700;
  color: var(--muted);
}

.student-performance-grade-method-field {
  display: flex;
  align-items: center;
  gap: 0.9rem;
  min-width: 0;
}

.student-performance-grade-method-options {
  display: flex;
  flex-wrap: wrap;
  gap: 0.85rem;
  align-items: center;
}

#student-performance-filter-form > label,
#student-instructional-hours-filter-form > label {
  display: grid;
  gap: 0.2rem;
  align-items: start;
  min-width: 0;
}

#student-performance-filter-form .multi-select-dropdown,
#student-instructional-hours-filter-form .multi-select-dropdown {
  min-width: 250px;
  width: fit-content;
}

#student-performance-filter-form .multi-select-dropdown summary,
#student-instructional-hours-filter-form .multi-select-dropdown summary {
  min-width: 250px;
}

#student-instructional-hours-filter-form {
  grid-template-columns: minmax(180px, 240px) auto;
  align-items: center;
  margin-bottom: 0.75rem;
}

.student-performance-grade-method-chip {
  display: inline-flex;
  align-items: center;
  gap: 0.38rem;
  font-weight: 600;
  color: var(--text);
}

.student-performance-grade-method-chip input[type="checkbox"] {
  margin: 0;
}

#daily-break-form {
  grid-template-columns: minmax(250px, 1.7fr) 180px 180px;
  align-items: end;
  column-gap: 0.5rem;
}

#daily-break-type,
#daily-break-start-time {
  max-width: 180px;
}

#daily-break-duration {
  max-width: 140px;
}

.daily-break-student-field {
  min-width: 250px;
  grid-column: 1;
  grid-row: 1;
}

.daily-break-type-field,
.daily-break-start-field,
.daily-break-duration-field,
.daily-break-weekdays-field,
.daily-break-submit-btn {
  justify-self: start;
}

.daily-break-type-field,
.daily-break-start-field {
  width: 180px;
}

.daily-break-type-field {
  grid-column: 2;
  grid-row: 1;
}

.daily-break-start-field {
  grid-column: 3;
  grid-row: 1;
}

.daily-break-duration-field {
  width: 140px;
}

.daily-break-weekdays-field {
  margin: 0;
  width: max-content;
}

#daily-break-description-wrap {
  grid-column: 1 / span 3;
  max-width: 360px;
}

.daily-break-secondary-row {
  grid-column: 1 / -1;
  display: flex;
  align-items: end;
  gap: 0.5rem;
  flex-wrap: wrap;
}

.daily-break-submit-btn,
#daily-break-cancel-edit-btn {
  align-self: end;
}

#trend-filter-form {
  grid-template-columns: minmax(220px, 1.6fr) minmax(110px, 0.75fr) minmax(145px, 1fr) minmax(145px, 1fr) minmax(145px, 1fr) auto;
  align-items: end;
  column-gap: 0.75rem;
}

#compliance-hours-filter-form {
  grid-template-columns: minmax(220px, 1.6fr) minmax(110px, 0.75fr) minmax(145px, 1fr) minmax(145px, 1fr) auto;
  align-items: end;
  column-gap: 0.75rem;
}

#compliance-days-filter-form {
  grid-template-columns: minmax(220px, 1.6fr) minmax(110px, 0.75fr) minmax(145px, 1fr) minmax(145px, 1fr) auto;
  align-items: end;
  column-gap: 0.75rem;
}

#gpa-trend-filter-form {
  grid-template-columns: minmax(260px, 2.2fr) minmax(90px, 0.6fr) minmax(140px, 1fr) minmax(140px, 1fr) auto;
  align-items: end;
}

#instruction-hours-trend-filter-form,
#instruction-days-trend-filter-form {
  grid-template-columns: minmax(260px, 2.2fr) minmax(90px, 0.6fr) minmax(140px, 1fr) auto;
  align-items: end;
}

#volume-filter-form {
  grid-template-columns: minmax(260px, 2.2fr) minmax(90px, 0.6fr) minmax(140px, 1fr) minmax(140px, 1fr) auto;
  align-items: end;
}

#work-filter-form {
  grid-template-columns: minmax(220px, 2fr) minmax(120px, 1fr) auto;
  align-items: end;
  column-gap: 0.7rem;
}

#trend-filter-form label {
  min-width: 0;
}

#compliance-hours-filter-form label {
  min-width: 0;
}

#compliance-days-filter-form label {
  min-width: 0;
}

#gpa-trend-filter-form label {
  min-width: 0;
}

#instruction-hours-trend-filter-form label,
#instruction-days-trend-filter-form label {
  min-width: 0;
}

#volume-filter-form label {
  min-width: 0;
}

#work-filter-form label {
  min-width: 0;
}

#trend-filter-quarter {
  max-width: 110px;
}

#compliance-hours-filter-quarter {
  max-width: 110px;
}

#compliance-days-filter-quarter {
  max-width: 110px;
}

#gpa-trend-filter-quarter {
  max-width: 110px;
}

#instruction-hours-trend-filter-quarter,
#instruction-days-trend-filter-quarter {
  max-width: 110px;
}

#volume-filter-quarter {
  max-width: 110px;
}

#work-filter-quarter {
  max-width: none;
}

#trend-filter-subject,
#trend-filter-grade-type {
  max-width: 220px;
}

#compliance-hours-filter-subject {
  max-width: 220px;
}

#compliance-days-filter-subject {
  max-width: 220px;
}

#gpa-trend-filter-subject,
#gpa-trend-filter-grade-type {
  max-width: 220px;
}

#instruction-hours-trend-filter-subject,
#instruction-days-trend-filter-subject {
  max-width: 220px;
}

#volume-filter-subject,
#volume-filter-grade-type {
  max-width: 220px;
}

#trend-filter-form > button,
#gpa-trend-filter-form > button,
#instruction-hours-trend-filter-form > button,
#instruction-days-trend-filter-form > button,
#compliance-hours-filter-form > button,
#compliance-days-filter-form > button,
#volume-filter-form > button,
#work-filter-form > button {
    align-self: end;
    justify-self: start;
    width: auto;
  height: calc(1em + 0.84rem + 2px);
  padding: 0.42rem 0.8rem;
}

@media (max-width: 900px) {
  #student-performance-filter-form {
    grid-template-columns: 1fr;
  }

  #student-performance-filter-form > label,
  #student-instructional-hours-filter-form > label,
  .student-performance-grade-method-field {
    align-items: flex-start;
    flex-direction: column;
  }

  #trend-filter-form {
    grid-template-columns: 1fr 1fr;
  }

  #compliance-hours-filter-form {
    grid-template-columns: 1fr 1fr;
  }

  #compliance-days-filter-form {
    grid-template-columns: 1fr 1fr;
  }

  #gpa-trend-filter-form {
    grid-template-columns: 1fr 1fr;
  }

  #instruction-hours-trend-filter-form,
  #instruction-days-trend-filter-form {
    grid-template-columns: 1fr 1fr;
  }

  #volume-filter-form {
    grid-template-columns: 1fr 1fr;
  }

  #work-filter-form {
    grid-template-columns: 1fr 1fr;
  }

  #trend-filter-quarter,
  #trend-filter-subject,
  #trend-filter-grade-type,
  #compliance-hours-filter-quarter,
  #compliance-hours-filter-subject,
  #compliance-days-filter-quarter,
  #compliance-days-filter-subject {
    max-width: none;
  }

  #gpa-trend-filter-quarter,
  #gpa-trend-filter-subject,
  #gpa-trend-filter-grade-type {
    max-width: none;
  }

  #instruction-hours-trend-filter-quarter,
  #instruction-hours-trend-filter-subject,
  #instruction-days-trend-filter-quarter,
  #instruction-days-trend-filter-subject {
    max-width: none;
  }

  #volume-filter-quarter,
  #volume-filter-subject,
  #volume-filter-grade-type {
    max-width: none;
  }

  #work-filter-quarter,
  #work-filter-quarter {
    max-width: none;
  }
}

.table-wrap {
  overflow: auto;
}

.calendar-filter-panel,
.calendar-surface {
  border: 1px solid #d8cfbf;
  border-radius: 10px;
  background: #f6f1e7;
  border-color: #d2c3a8;
}

.calendar-filter-panel {
  padding: 0.7rem;
  margin-bottom: 0.65rem;
}

.calendar-surface {
  padding: 0.75rem;
}

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

th,
td {
  text-align: left;
  border-bottom: 1px solid #e1e8dd;
  padding: 0.45rem;
  font-size: 0.92rem;
}

.table-action-row {
  display: inline-flex;
  flex-wrap: nowrap;
  align-items: center;
  gap: 0.45rem;
  white-space: nowrap;
}

.student-table-actions {
  white-space: nowrap;
  width: 1%;
}

#schedule-block-form {
  grid-template-columns: minmax(220px, 1.6fr) 180px;
  align-items: end;
  column-gap: 0.5rem;
}

.schedule-block-name-field {
  min-width: 220px;
  grid-column: 1;
  grid-row: 1;
}

.schedule-block-type-field {
  width: 180px;
  grid-column: 2;
  grid-row: 1;
}

#schedule-block-description-wrap {
  grid-column: 1 / span 2;
  max-width: 360px;
}

.schedule-block-secondary-row {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: minmax(150px, 180px) minmax(296px, max-content) auto auto;
  align-items: end;
  gap: 0.65rem;
}

.schedule-block-duration-field {
  width: 100%;
  min-width: 0;
}

#schedule-block-duration {
  box-sizing: border-box;
  min-width: 0;
  width: 100%;
}

.schedule-block-weekdays-field {
  margin: 0;
  width: auto;
  min-width: 296px;
}

.schedule-block-submit-btn,
#schedule-block-cancel-edit-btn {
  align-self: end;
  justify-self: start;
  width: auto;
}

.checklist-group-label {
  margin: 0.35rem 0 0.15rem;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--muted);
}

.schedule-actions-cell {
  white-space: nowrap;
  width: 1%;
  min-width: 130px;
}

.schedule-actions-cell .table-action-row {
  display: inline-flex;
  flex-wrap: nowrap;
  width: max-content;
}

.schedule-actions-cell .table-action-row button {
  white-space: nowrap;
}

.calendar-actions-cell {
  white-space: nowrap;
  width: 1%;
  min-width: 160px;
}

.calendar-actions-cell .table-action-row {
  display: inline-flex;
  flex-wrap: nowrap;
  width: max-content;
}

.calendar-actions-cell .table-action-row button {
  white-space: nowrap;
}

.calendar-actions-cell .table-action-row button,
.school-day-actions-wrap .table-action-row button {
  padding: 0.34rem 0.62rem;
  border-radius: 12px;
  font-size: 0.84rem;
  font-weight: 700;
  box-shadow: 0 8px 16px rgba(154, 98, 44, 0.16);
}

.calendar-actions-cell .table-action-row button:hover,
.school-day-actions-wrap .table-action-row button:hover {
  box-shadow: 0 10px 18px rgba(154, 98, 44, 0.18);
}

.school-day-reorder-controls {
  display: inline-flex;
  flex-direction: column;
  gap: 0.18rem;
  margin-right: 0.35rem;
  flex: 0 0 auto;
}

.school-day-reorder-btn {
  min-width: 1.6rem;
  width: 1.6rem;
  height: 1.3rem;
  padding: 0;
  line-height: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 0.72rem;
}

.school-day-hour-cell {
  display: inline-flex;
  align-items: center;
  gap: 0.1rem;
}

.student-avg-toggle {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.5rem;
  height: 1.5rem;
  padding: 0;
  border-radius: 999px;
  margin-right: 0.35rem;
  font-weight: 700;
  line-height: 1;
  vertical-align: middle;
  overflow: hidden;
}

.student-avg-toggle-glyph {
  position: absolute;
  inset: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-family: "Segoe UI Symbol", "Arial Unicode MS", "Segoe UI", sans-serif;
  font-size: 0.95rem;
  line-height: 1;
  text-align: center;
  width: 100%;
  height: 100%;
  transform: translateY(-0.02em);
}

.student-avg-detail-row td {
  background: #fbf7f0;
}

.student-avg-subject-cell {
  padding-left: 2.2rem;
}

.student-avg-subtoggle {
  width: 1.25rem;
  height: 1.25rem;
  min-width: 1.25rem;
  margin-right: 0.35rem;
}

.student-avg-subtoggle .student-avg-toggle-glyph {
  font-size: 0.82rem;
}

.student-avg-type-row td {
  background: #fdfaf5;
}

.student-avg-type-cell {
  padding-left: 4.2rem;
  color: var(--muted);
}

.instructional-hours-cell {
  white-space: nowrap;
}

.instructional-hours-notation {
  margin: -0.25rem 0 0.75rem;
}

.warning-text {
  color: #8b2f1e;
  font-weight: 600;
}

.warning-row td {
  background: #fff0ea;
}

.dashboard-section-student-performance th,
.dashboard-section-student-performance td,
.dashboard-section-student-attendance th,
.dashboard-section-student-attendance td,
.dashboard-section-student-instructional-hours th,
.dashboard-section-student-instructional-hours td {
  text-align: center;
}

.dashboard-section-student-performance th:first-child,
.dashboard-section-student-performance td:first-child,
.dashboard-section-student-attendance th:first-child,
.dashboard-section-student-attendance td:first-child,
.dashboard-section-student-instructional-hours th:first-child,
.dashboard-section-student-instructional-hours td:first-child {
  text-align: left;
}

.student-avg-detail-empty {
  padding: 0.3rem 0.15rem;
}

.chart-wrap {
  border: 1px solid #e1cfad;
  border-radius: 10px;
  background: #fffaf1;
  padding: 0.35rem 0.35rem 0.15rem;
}

.trend-chart {
  display: block;
  width: 100%;
  height: auto;
}

.trend-legend {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem 1rem;
  align-items: center;
  margin: 0.2rem 0 0.95rem;
  padding: 0 0.3rem;
}

.trend-legend-item {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  color: var(--muted);
  font-size: 0.9rem;
}

.trend-legend-line {
  display: inline-block;
  width: 18px;
  height: 3px;
  border-radius: 999px;
}

.volume-legend-box {
  display: inline-block;
  width: 12px;
  height: 12px;
  border-radius: 2px;
}

.pie-wrap {
  display: grid;
  justify-items: center;
  gap: 0.35rem;
}

.pie-chart {
  width: min(620px, 100%);
  height: auto;
}

.pie-total {
  font-size: 0.9rem;
  color: var(--muted);
}

.pie-slice-label {
  font-size: 10px;
  font-weight: 600;
  fill: #000;
  stroke: none;
}

.work-dist-filter {
  margin: 0.15rem 0 0.6rem;
}

.work-dist-filter-title {
  margin: 0 0 0.3rem;
  font-size: 0.9rem;
  color: var(--muted);
  font-weight: 600;
}

.work-dist-options {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem 0.55rem;
}

.work-dist-option {
  display: inline-flex;
  align-items: center;
  gap: 0.38rem;
  min-height: 30px;
  padding: 0.28rem 0.55rem;
  border: 1px solid #dce6f4;
  border-radius: 8px;
  background: #ffffff;
  color: #223552;
  font-size: 0.78rem;
  font-weight: 700;
  box-shadow: 0 8px 18px rgba(23, 36, 61, 0.04);
  cursor: pointer;
  transition: border-color 0.16s ease, box-shadow 0.16s ease, background-color 0.16s ease;
}

.work-dist-option:hover {
  border-color: #b9c9e2;
  box-shadow: 0 10px 20px rgba(23, 36, 61, 0.07);
}

.work-dist-option input[type="checkbox"] {
  appearance: none;
  display: inline-grid;
  place-items: center;
  width: 14px;
  height: 14px;
  margin: 0;
  border: 1px solid #aebcd0;
  border-radius: 4px;
  background: #f8fbff;
  box-shadow: inset 0 1px 1px rgba(23, 36, 61, 0.05);
}

.work-dist-option input[type="checkbox"]::after {
  content: "";
  width: 4px;
  height: 7px;
  border: solid #ffffff;
  border-width: 0 2px 2px 0;
  opacity: 0;
  transform: rotate(45deg) translateY(-1px);
}

.work-dist-option input[type="checkbox"]:checked {
  border-color: #2f6fe4;
  background: #2f6fe4;
  box-shadow: 0 0 0 3px rgba(47, 111, 228, 0.12);
}

.work-dist-option input[type="checkbox"]:checked::after {
  opacity: 1;
}

.work-dist-option:has(input[type="checkbox"]:checked) {
  border-color: #c7d8f7;
  background: #f6f9ff;
  color: #143b80;
}

.work-dist-option:has(input[type="checkbox"]:focus-visible) {
  outline: 3px solid rgba(47, 111, 228, 0.18);
  outline-offset: 2px;
}

#app-shell .dashboard-section-work-distribution {
  padding: 1.35rem;
  border-color: #dfe7f3;
  border-radius: 18px;
  background: #ffffff;
  box-shadow: 0 18px 44px rgba(23, 36, 61, 0.06);
}

#app-shell .work-distribution-heading {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: 1.25rem;
}

#app-shell .work-distribution-heading h3 {
  margin: 0;
  color: #17243d;
  font-size: 1.45rem;
  line-height: 1.1;
}

#app-shell .work-distribution-heading .muted {
  margin: 0.45rem 0 0;
  color: #596986;
  font-size: 0.95rem;
}

#app-shell .work-distribution-heading-icon {
  color: #2563eb;
}

#app-shell .work-distribution-heading-icon svg {
  width: 24px;
  height: 24px;
  fill: currentColor;
  stroke: currentColor;
}

#app-shell .work-distribution-clear-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.45rem;
  min-height: 42px;
  padding: 0 1rem;
  border: 1px solid #d6e1ef;
  border-radius: 12px;
  background: #ffffff;
  color: #155bc3;
  font-size: 0.9rem;
  font-weight: 800;
  box-shadow: 0 10px 24px rgba(23, 36, 61, 0.05);
}

#app-shell .work-distribution-clear-btn svg {
  width: 18px;
  height: 18px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2.2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

#app-shell .work-distribution-body {
  display: grid;
  gap: 1.2rem;
}

#app-shell #work-filter-form {
  display: grid;
  grid-template-columns: minmax(220px, 1.45fr) minmax(132px, 0.75fr) minmax(160px, 1fr);
  gap: 0.85rem;
  align-items: end;
  margin: 0;
}

#app-shell #work-filter-form label {
  display: grid;
  gap: 0.38rem;
  min-width: 0;
  color: #5f6f89;
  font-size: 0.72rem;
  font-weight: 850;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

#app-shell #work-filter-form select,
#app-shell #work-filter-form .multi-select-dropdown {
  width: 100%;
  max-width: none;
  min-height: 42px;
  border-color: #dce6f4;
  border-radius: 9px;
  background: #ffffff;
  color: #233451;
  box-shadow: 0 8px 20px rgba(23, 36, 61, 0.04);
}

#app-shell #work-filter-form .multi-select-dropdown summary {
  min-height: 42px;
  padding: 0.62rem 0.75rem;
  color: #233451;
  font-size: 0.9rem;
  font-weight: 700;
  letter-spacing: 0;
  text-transform: none;
}

#app-shell .work-dist-filter {
  display: grid;
  grid-template-columns: 132px minmax(0, 1fr);
  margin: 0;
  border: 1px solid #dfe7f3;
  border-radius: 14px;
  background: #fbfdff;
  overflow: hidden;
}

#app-shell .work-dist-filter-title {
  display: flex;
  align-items: center;
  margin: 0;
  padding: 0 1rem;
  border-right: 1px solid #e5ebf5;
  color: #17243d;
  font-size: 0.95rem;
  font-weight: 850;
}

#app-shell .work-dist-options {
  display: flex;
  flex-wrap: wrap;
  gap: 0.65rem 0.8rem;
  padding: 0.65rem 0.8rem;
}

#app-shell .work-dist-option {
  position: relative;
  min-height: 44px;
  padding: 0.45rem 2.55rem 0.45rem 0.65rem;
  border: 1px solid #dfe7f3;
  border-radius: 12px;
  background: #ffffff;
  color: #17243d;
  font-size: 0.9rem;
  font-weight: 750;
  box-shadow: 0 10px 24px rgba(23, 36, 61, 0.05);
}

#app-shell .work-dist-option input[type="checkbox"] {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

#app-shell .work-dist-option-icon {
  display: inline-grid;
  place-items: center;
  width: 26px;
  height: 26px;
  border-radius: 8px;
  background: #eef5ff;
}

#app-shell .work-dist-option-icon-img {
  width: 17px;
  height: 17px;
  object-fit: contain;
}

#app-shell .work-dist-option-check {
  position: absolute;
  right: 0.7rem;
  top: 50%;
  width: 22px;
  height: 22px;
  border: 1px solid #cbd6e6;
  border-radius: 999px;
  background: #ffffff;
  transform: translateY(-50%);
}

#app-shell .work-dist-option input[type="checkbox"]:checked ~ .work-dist-option-check {
  border-color: #2563eb;
  background: #2563eb;
  box-shadow: 0 8px 18px rgba(37, 99, 235, 0.2);
}

#app-shell .work-dist-option input[type="checkbox"]:checked ~ .work-dist-option-check::after {
  content: "";
  position: absolute;
  left: 7px;
  top: 4px;
  width: 6px;
  height: 10px;
  border: solid #ffffff;
  border-width: 0 2px 2px 0;
  transform: rotate(45deg);
}

#app-shell .work-dist-chart-panel {
  display: grid;
  grid-template-columns: minmax(380px, 0.92fr) minmax(420px, 1fr);
  gap: 2rem;
  align-items: center;
  padding: 1.45rem 2rem;
  border: 1px solid #dfe7f3;
  border-radius: 18px;
  background: linear-gradient(180deg, #ffffff 0%, #fbfdff 100%);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.85);
}

#app-shell .work-dist-donut-stage {
  position: relative;
  display: grid;
  place-items: center;
  min-width: 0;
}

#app-shell .work-dist-donut-chart {
  width: min(560px, 100%);
  height: auto;
  overflow: visible;
}

#app-shell .work-dist-donut-slice {
  transition: opacity 0.16s ease, transform 0.16s ease;
}

#app-shell .work-dist-donut-slice:hover {
  opacity: 0.92;
}

#app-shell .work-dist-donut-label text {
  fill: #ffffff;
  font-size: 22px;
  font-weight: 900;
  text-shadow: 0 2px 5px rgba(15, 23, 42, 0.35);
}

#app-shell .work-dist-slice-icon,
#app-shell .work-dist-breakdown-icon svg {
  color: #ffffff;
  overflow: visible;
}

#app-shell .work-dist-slice-icon path,
#app-shell .work-dist-breakdown-icon svg path {
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

#app-shell .work-dist-donut-center {
  position: absolute;
  inset: 50% auto auto 50%;
  display: grid;
  align-content: center;
  justify-items: center;
  gap: 0.2rem;
  width: 172px;
  height: 172px;
  padding: 0;
  box-sizing: border-box;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.94);
  color: #17243d;
  transform: translate(-50%, -50%);
  box-shadow: 0 16px 38px rgba(23, 36, 61, 0.08);
}

#app-shell .work-dist-donut-center span {
  display: inline-grid;
  place-items: center;
  width: 34px;
  height: 34px;
  color: #86b7e7;
}

#app-shell .work-dist-donut-center svg {
  width: 26px;
  height: 26px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2.4;
  stroke-linecap: round;
}

#app-shell .work-dist-donut-center em {
  color: #4f5f7c;
  font-size: 0.9rem;
  font-style: normal;
  font-weight: 650;
}

#app-shell .work-dist-donut-center strong {
  font-size: 2rem;
  line-height: 1;
}

#app-shell .work-dist-donut-center small {
  color: #6b7891;
  font-size: 0.76rem;
  font-weight: 700;
}

#app-shell .work-dist-breakdown {
  display: grid;
  gap: 0;
  min-width: 0;
}

#app-shell .work-dist-breakdown-header,
#app-shell .work-dist-breakdown-total {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 100px;
  align-items: center;
  padding: 0.8rem 0;
  border-bottom: 1px solid #dfe7f3;
  color: #5b6780;
  font-size: 0.82rem;
  font-weight: 900;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

#app-shell .work-dist-breakdown-header span:last-child,
#app-shell .work-dist-breakdown-total strong {
  text-align: right;
}

#app-shell .work-dist-breakdown-row {
  display: grid;
  grid-template-columns: 48px minmax(0, 1fr) 82px;
  gap: 0.75rem;
  align-items: center;
  min-height: 54px;
  border-bottom: 1px solid #edf2f8;
}

#app-shell .work-dist-breakdown-icon {
  display: inline-grid;
  place-items: center;
  width: 36px;
  height: 36px;
  border-radius: 999px;
  background: var(--work-color);
  box-shadow: 0 10px 18px rgba(23, 36, 61, 0.12);
}

#app-shell .work-dist-breakdown-icon svg {
  width: 21px;
  height: 21px;
}

#app-shell .work-dist-breakdown-main {
  display: grid;
  grid-template-columns: 120px minmax(120px, 1fr);
  gap: 0.9rem;
  align-items: center;
  min-width: 0;
}

#app-shell .work-dist-breakdown-main span {
  overflow: hidden;
  color: #17243d;
  font-size: 1rem;
  font-weight: 750;
  text-overflow: ellipsis;
  white-space: nowrap;
}

#app-shell .work-dist-breakdown-main i {
  display: block;
  height: 6px;
  border-radius: 999px;
  background: #e8edf5;
  overflow: hidden;
}

#app-shell .work-dist-breakdown-main b {
  display: block;
  width: var(--work-width);
  height: 100%;
  border-radius: inherit;
  background: var(--work-color);
}

#app-shell .work-dist-breakdown-row strong {
  color: #17243d;
  font-size: 1rem;
  font-weight: 900;
  text-align: right;
}

#app-shell .work-dist-breakdown-total {
  margin-top: 0.4rem;
  border-bottom: 0;
  color: #0f3f82;
  font-size: 1rem;
  letter-spacing: 0;
  text-transform: none;
}

#app-shell .work-dist-breakdown-total strong {
  color: #0f3f82;
  font-size: 1.1rem;
}

@media (max-width: 1100px) {
  #app-shell .work-dist-chart-panel {
    grid-template-columns: 1fr;
  }

  #app-shell #work-filter-form {
    grid-template-columns: 1fr 1fr;
  }
}

@media (max-width: 720px) {
  #app-shell .work-distribution-heading {
    align-items: stretch;
    flex-direction: column;
  }

  #app-shell .work-distribution-clear-btn {
    align-self: flex-start;
  }

  #app-shell #work-filter-form,
  #app-shell .work-dist-filter {
    grid-template-columns: 1fr;
  }

  #app-shell .work-dist-filter-title {
    min-height: 48px;
    border-right: 0;
    border-bottom: 1px solid #e5ebf5;
  }

  #app-shell .work-dist-chart-panel {
    padding: 1rem;
  }

  #app-shell .work-dist-breakdown-main {
    grid-template-columns: 1fr;
    gap: 0.35rem;
  }
}

#app-shell .required-subject-compliance {
  padding: 1.35rem;
  border-color: #dfe7f3;
  border-radius: 18px;
  background: #ffffff;
  box-shadow: 0 18px 44px rgba(23, 36, 61, 0.06);
}

#app-shell .required-subject-compliance-heading {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: 1.25rem;
}

#app-shell .required-subject-compliance-heading-icon {
  color: #2563eb;
}

#app-shell .required-subject-compliance-heading-icon svg {
  width: 28px;
  height: 28px;
  fill: currentColor;
  stroke: currentColor;
}

#app-shell .required-subject-compliance-filters {
  display: grid;
  grid-template-columns: repeat(3, minmax(160px, 1fr));
  gap: 1rem;
  margin: 0 0 1.2rem;
}

#app-shell .required-subject-compliance-filters label {
  display: grid;
  gap: 0.4rem;
  min-width: 0;
  color: #52627d;
  font-size: 0.88rem;
  font-weight: 700;
}

#app-shell .required-subject-compliance-filters select,
#app-shell .required-subject-compliance-filters .multi-select-dropdown {
  width: 100%;
  min-height: 44px;
  border-color: #dce6f4;
  border-radius: 11px;
  background: #ffffff;
  color: #17243d;
  font-weight: 700;
  box-shadow: 0 8px 20px rgba(23, 36, 61, 0.04);
}

#app-shell .required-subject-compliance-filters .multi-select-dropdown summary {
  min-height: 44px;
  padding: 0.68rem 0.8rem;
  color: #17243d;
  font-size: 0.9rem;
  font-weight: 700;
  letter-spacing: 0;
  text-transform: none;
}

#app-shell .required-subject-compliance-summary {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1rem;
  margin-bottom: 1.4rem;
}

#app-shell .required-subject-compliance-stat {
  display: flex;
  align-items: center;
  gap: 1.3rem;
  min-height: 116px;
  padding: 1rem 1.4rem;
  border: 1px solid #dfe7f3;
  border-radius: 14px;
  background: #ffffff;
}

#app-shell .required-subject-compliance-stat.compliant {
  background: linear-gradient(120deg, #f0fff7 0%, #ffffff 100%);
}

#app-shell .required-subject-compliance-stat.not-compliant {
  background: linear-gradient(120deg, #fff4f4 0%, #ffffff 100%);
}

#app-shell .required-subject-compliance-stat.total {
  background: linear-gradient(120deg, #f4f8ff 0%, #ffffff 100%);
}

#app-shell .required-subject-compliance-stat > span {
  display: inline-grid;
  place-items: center;
  width: 76px;
  height: 76px;
  flex: 0 0 76px;
  border-radius: 999px;
  color: #ffffff;
  box-shadow: 0 14px 28px rgba(23, 36, 61, 0.12);
}

#app-shell .required-subject-compliance-stat.compliant > span {
  background: #16a34a;
}

#app-shell .required-subject-compliance-stat.not-compliant > span {
  background: #ef4444;
}

#app-shell .required-subject-compliance-stat.total > span {
  background: #2563eb;
}

#app-shell .required-subject-compliance-stat svg {
  width: 44px;
  height: 44px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

#app-shell .required-subject-compliance-stat div {
  display: grid;
  gap: 0.15rem;
}

#app-shell .required-subject-compliance-stat strong {
  color: #17243d;
  font-size: 1.85rem;
  line-height: 1;
}

#app-shell .required-subject-compliance-stat.compliant strong,
#app-shell .required-subject-compliance-stat.compliant small {
  color: #15803d;
}

#app-shell .required-subject-compliance-stat.not-compliant strong,
#app-shell .required-subject-compliance-stat.not-compliant small {
  color: #dc2626;
}

#app-shell .required-subject-compliance-stat.total strong,
#app-shell .required-subject-compliance-stat.total small {
  color: #2563eb;
}

#app-shell .required-subject-compliance-stat em {
  color: #17243d;
  font-size: 0.95rem;
  font-style: normal;
  font-weight: 750;
}

#app-shell .required-subject-compliance-stat small {
  font-size: 0.9rem;
  font-weight: 850;
}

#app-shell .required-subject-compliance-table-panel {
  border: 1px solid #dfe7f3;
  border-radius: 16px;
  background: linear-gradient(180deg, #ffffff 0%, #fbfdff 100%);
  overflow: hidden;
}

#app-shell .required-subject-compliance-table-wrap {
  overflow-x: auto;
}

#app-shell .required-subject-compliance-table {
  width: 100%;
  min-width: 960px;
  border-collapse: collapse;
  table-layout: fixed;
}

#app-shell .required-subject-compliance-table th {
  padding: 1.1rem 1.35rem;
  border-bottom: 1px solid #dfe7f3;
  background: #fbfdff;
  color: #5b6780;
  font-size: 0.82rem;
  font-weight: 900;
  letter-spacing: 0.05em;
  text-align: left;
  text-transform: uppercase;
}

#app-shell .required-subject-compliance-table th:nth-child(1) { width: 25%; }
#app-shell .required-subject-compliance-table th:nth-child(2) { width: 24%; }
#app-shell .required-subject-compliance-table th:nth-child(3) { width: 32%; }
#app-shell .required-subject-compliance-table th:nth-child(4) { width: 19%; }

#app-shell .required-subject-compliance-table td {
  padding: 1.15rem 1.35rem;
  border-bottom: 1px solid #e5ebf5;
  vertical-align: middle;
}

#app-shell .required-subject-compliance-table tr:last-child td {
  border-bottom: 0;
}

#app-shell .required-subject-compliance-subject {
  display: grid;
  grid-template-columns: 58px minmax(0, 1fr);
  gap: 0.95rem;
  align-items: center;
  min-width: 0;
}

#app-shell .required-subject-compliance-subject-icon {
  display: inline-grid;
  place-items: center;
  width: 54px;
  height: 54px;
  border-radius: 999px;
  background: var(--subject-color);
  color: #ffffff;
  box-shadow: 0 12px 22px rgba(23, 36, 61, 0.14);
}

#app-shell .required-subject-compliance-subject-icon svg {
  width: 27px;
  height: 27px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

#app-shell .required-subject-compliance-subject strong {
  display: block;
  overflow: hidden;
  color: #17243d;
  font-size: 1rem;
  font-weight: 850;
  text-overflow: ellipsis;
  white-space: nowrap;
}

#app-shell .required-subject-compliance-subject small {
  display: block;
  margin-top: 0.25rem;
  color: #52627d;
  font-size: 0.85rem;
  font-weight: 650;
}

#app-shell .required-subject-compliance-course-list {
  display: grid;
  gap: 0.65rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

#app-shell .required-subject-compliance-course-list li {
  display: grid;
  grid-template-columns: 9px minmax(0, 1fr);
  gap: 0.65rem;
  align-items: start;
}

#app-shell .required-subject-compliance-course-list i {
  width: 7px;
  height: 7px;
  margin-top: 0.45rem;
  border-radius: 999px;
}

#app-shell .required-subject-compliance-course-list strong {
  display: block;
  overflow: hidden;
  color: #17243d;
  font-size: 0.93rem;
  text-overflow: ellipsis;
  white-space: nowrap;
}

#app-shell .required-subject-compliance-course-list small {
  display: block;
  overflow: hidden;
  margin-top: 0.18rem;
  color: #52627d;
  font-size: 0.78rem;
  text-overflow: ellipsis;
  white-space: nowrap;
}

#app-shell .required-subject-compliance-distribution {
  display: grid;
  gap: 0.55rem;
}

#app-shell .required-subject-compliance-distribution div {
  display: grid;
  grid-template-columns: var(--compliant-width) var(--missing-width);
  height: 18px;
  border-radius: 4px;
  background: #edf2f8;
  overflow: hidden;
}

#app-shell .required-subject-compliance-distribution span:first-child {
  background: linear-gradient(90deg, #16a34a, #22c55e);
}

#app-shell .required-subject-compliance-distribution span:last-child {
  background: linear-gradient(90deg, #ef4444, #dc2626);
}

#app-shell .required-subject-compliance-distribution p {
  display: flex;
  justify-content: space-between;
  margin: 0;
  padding: 0 0.25rem;
}

#app-shell .required-subject-compliance-distribution strong,
#app-shell .required-subject-compliance-distribution em {
  font-size: 0.92rem;
  font-style: normal;
  font-weight: 900;
}

#app-shell .required-subject-compliance-distribution strong {
  color: #15803d;
}

#app-shell .required-subject-compliance-distribution em {
  color: #dc2626;
}

#app-shell .required-subject-compliance-students {
  display: grid;
  gap: 0.55rem;
}

#app-shell .required-subject-compliance-link {
  display: grid;
  grid-template-columns: 24px auto minmax(0, 1fr);
  gap: 0.55rem;
  align-items: center;
  width: 100%;
  padding: 0;
  border: 0;
  background: transparent;
  color: #52627d;
  text-align: left;
  font-size: 0.82rem;
}

#app-shell .required-subject-compliance-link:not(:disabled) {
  cursor: pointer;
}

#app-shell .required-subject-compliance-link:not(:disabled):hover em,
#app-shell .required-subject-compliance-link:not(:disabled):focus-visible em {
  color: #155bc3;
  text-decoration: underline;
}

#app-shell .required-subject-compliance-link > span {
  position: relative;
  display: inline-grid;
  place-items: center;
  width: 18px;
  height: 18px;
  border-radius: 999px;
  border: 1.5px solid currentColor;
}

#app-shell .required-subject-compliance-link.compliant > span::before {
  content: "";
  width: 7px;
  height: 4px;
  border: solid currentColor;
  border-width: 0 0 2px 2px;
  transform: rotate(-45deg) translate(1px, -1px);
}

#app-shell .required-subject-compliance-link.not-compliant > span::before,
#app-shell .required-subject-compliance-link.not-compliant > span::after {
  content: "";
  position: absolute;
  width: 8px;
  height: 2px;
  border-radius: 999px;
  background: currentColor;
}

#app-shell .required-subject-compliance-link.not-compliant > span::before {
  transform: rotate(45deg);
}

#app-shell .required-subject-compliance-link.not-compliant > span::after {
  transform: rotate(-45deg);
}

#app-shell .required-subject-compliance-link strong {
  font-size: 0.95rem;
  font-weight: 900;
}

#app-shell .required-subject-compliance-link.compliant {
  color: #16a34a;
}

#app-shell .required-subject-compliance-link.not-compliant {
  color: #ef4444;
}

#app-shell .required-subject-compliance-link em {
  overflow: hidden;
  color: #52627d;
  font-style: normal;
  font-weight: 650;
  text-overflow: ellipsis;
  white-space: nowrap;
}

#app-shell .required-subject-compliance-students p {
  display: flex;
  justify-content: center;
  gap: 0.45rem;
  margin: 0.45rem 0 0;
  padding-top: 0.65rem;
  border-top: 1px solid #e5ebf5;
  color: #52627d;
  font-size: 0.84rem;
}

#app-shell .required-subject-compliance-students p strong {
  color: #17243d;
  font-weight: 900;
}

#app-shell .required-subject-compliance-footer {
  display: grid;
  grid-template-columns: minmax(160px, 1fr) minmax(220px, auto) minmax(240px, auto);
  gap: 1rem;
  align-items: center;
  padding: 1rem 1.35rem;
  border-top: 1px solid #e5ebf5;
  color: #52627d;
  font-size: 0.86rem;
}

#app-shell .required-subject-compliance-legend {
  display: grid;
  grid-template-columns: 22px minmax(0, auto);
  column-gap: 0.5rem;
  align-items: center;
}

#app-shell .required-subject-compliance-legend i {
  grid-row: span 2;
  width: 20px;
  height: 20px;
  border-radius: 999px;
}

#app-shell .required-subject-compliance-legend.compliant i {
  background: #16a34a;
}

#app-shell .required-subject-compliance-legend.not-compliant i {
  background: #ef4444;
}

#app-shell .required-subject-compliance-legend strong {
  color: #17243d;
  font-size: 0.86rem;
}

#app-shell .required-subject-compliance-legend em {
  color: #52627d;
  font-size: 0.78rem;
  font-style: normal;
}

@media (max-width: 980px) {
  #app-shell .required-subject-compliance-filters,
  #app-shell .required-subject-compliance-summary,
  #app-shell .required-subject-compliance-footer {
    grid-template-columns: 1fr;
  }

  #app-shell .required-subject-compliance-heading {
    align-items: stretch;
    flex-direction: column;
  }

  #app-shell .required-subject-compliance-heading .work-distribution-clear-btn {
    align-self: flex-start;
  }
}

.trend-axis {
  stroke: #9a845f;
  stroke-width: 1;
}

.trend-grid {
  stroke: #eadfcf;
  stroke-width: 1;
}

.trend-line {
  stroke: var(--accent);
  stroke-width: 2.25;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.trend-point {
  fill: #b67a31;
  stroke: var(--accent);
  stroke-width: 1;
}

.trend-axis-label {
  fill: #6c5847;
  font-size: 11px;
}

.trend-axis-title {
  fill: #2f1f14;
  font-size: 12px;
  font-weight: 600;
}

.trend-empty {
  fill: #6c5847;
  font-size: 13px;
}

.trend-value-label {
  fill: #5a3a1a;
  font-size: 10px;
  font-weight: 600;
}

.item-list {
  list-style: none;
  padding: 0;
  margin: 0 0 0.8rem;
  display: grid;
  gap: 0.4rem;
}

.item-list li {
  border: 1px solid #e3d2b5;
  border-radius: 8px;
  padding: 0.4rem 0.5rem;
  display: flex;
  justify-content: space-between;
  gap: 0.5rem;
  align-items: center;
  background: #fffaf1;
}

.item-list button {
  background: var(--danger);
  padding: 0.3rem 0.5rem;
  font-size: 0.82rem;
}

.detail-panel {
  border: 1px solid #d6e1d0;
  border-radius: 10px;
  padding: 0.7rem;
  background: #fafdF9;
}

.detail-title {
  margin-top: 0;
  font-weight: 700;
}

#student-detail-panel .detail-title {
  margin: 0;
}

#student-detail-panel h4 {
  margin: 0;
}

#student-detail-panel h4 + h4 {
  margin-top: 0.45rem;
}

#student-detail-panel .table-wrap + h4 {
  margin-top: 0.45rem;
}

.student-detail-section {
  border: 1px solid #d8cfbf;
  border-radius: 10px;
  padding: 0.55rem 0.6rem;
}

.student-detail-section + .student-detail-section {
  margin-top: 0.5rem;
}

.student-detail-section-profile {
  background: #f6f1e7;
  border-color: #d2c3a8;
}

.student-detail-section-schedule {
  background: #eef5ec;
  border-color: #c6d8bf;
}

.student-detail-section-attendance {
  background: #f3efe8;
  border-color: #d8cdbd;
}

.student-detail-section-hours {
  background: #eef5ec;
  border-color: #c6d8bf;
}

.student-detail-section-profile-summary {
  background: #f8fbff;
  border-color: #c7d9f0;
}

.student-summary-form {
  grid-template-columns: repeat(4, minmax(140px, 1fr));
  align-items: end;
  column-gap: 0.8rem;
  row-gap: 0.55rem;
  margin-top: 0.5rem;
}

.student-summary-form label {
  min-width: 0;
}

.student-summary-profile-actions {
  grid-column: 1 / -1;
}

.student-status-pill {
  display: inline-flex;
  align-items: center;
  border-radius: 999px;
  padding: 0.15rem 0.45rem;
  font-size: 0.78rem;
  font-weight: 700;
  background: #e8f4e3;
  color: #25612a;
}

.student-status-pill.archived {
  background: #f1f3f6;
  color: #5d6b82;
}

.student-required-status {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  justify-self: start;
  min-width: 3rem;
  width: fit-content;
  max-width: 100%;
  border-radius: 999px;
  padding: 0.15rem 0.55rem;
  font-size: 0.78rem;
  font-weight: 800;
  white-space: nowrap;
}

.student-required-status.yes {
  background: #e8f4e3;
  color: #25612a;
}

.student-required-status.no {
  background: #fff0f0;
  color: #a92f2f;
}

.student-required-status.neutral {
  background: #eef2f7;
  color: #5d6b82;
}

.student-table-filter-grid {
  display: grid;
  grid-template-columns: minmax(220px, 2fr) repeat(3, minmax(140px, 1fr));
  gap: 0.65rem;
  align-items: end;
  margin: 0 0 0.75rem;
}

.student-table-filter-grid label {
  min-width: 0;
}

.student-table-filter-grid input,
.student-table-filter-grid select {
  min-height: 2.35rem;
}

.student-work-queue-summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  margin: 0 0 0.7rem;
  padding: 0.58rem 0.7rem;
  border: 1px solid #d9e5f2;
  border-radius: 12px;
  background: #f6faff;
}

.student-work-queue-summary.hidden {
  display: none;
}

.student-work-queue-copy {
  display: grid;
  gap: 0.12rem;
  min-width: 0;
}

.student-work-queue-copy strong {
  color: #17243d;
  font-size: 0.9rem;
  line-height: 1.2;
}

.student-work-queue-copy span {
  color: #5d6d83;
  font-size: 0.78rem;
  line-height: 1.25;
}

.student-work-queue-chips {
  display: flex;
  justify-content: flex-end;
  flex-wrap: wrap;
  gap: 0.35rem;
}

.student-work-queue-chips span {
  display: inline-flex;
  align-items: center;
  min-height: 1.5rem;
  padding: 0.16rem 0.5rem;
  border: 1px solid #c7d8ea;
  border-radius: 999px;
  background: #ffffff;
  color: #37536f;
  font-size: 0.74rem;
  font-weight: 800;
  white-space: nowrap;
}

.student-name-cell,
.student-required-cell {
  display: grid;
  gap: 0.18rem;
  min-width: 0;
}

.student-name-cell strong {
  color: #17243d;
}

.student-name-cell small,
.student-required-cell small {
  color: #65758a;
  font-size: 0.76rem;
  line-height: 1.25;
}

.student-work-queue-row td {
  background: #fffaf0;
}

.students-toolbar,
.students-detail-toolbar {
  display: flex;
  justify-content: flex-start;
  align-items: center;
  gap: 0.6rem;
  margin-bottom: 0.65rem;
}

.students-helper-text {
  margin: 0 0 0.7rem;
}

.students-detail-toolbar {
  width: 100%;
  justify-content: flex-start;
}

.students-section {
  border: 1px solid #d8cfbf;
  border-radius: 10px;
  padding: 0.65rem 0.7rem;
}

.students-section-manage {
  background: #f6f1e7;
  border-color: #d2c3a8;
}

#tab-students .split {
  grid-template-columns: minmax(500px, 0.95fr) minmax(540px, 1.05fr);
}

#tab-students th,
#tab-students td {
  text-align: center;
}

#tab-students th:first-child,
#tab-students td:first-child {
  text-align: left;
}

.schedule-section {
  border: 1px solid #d8cfbf;
  border-radius: 10px;
  padding: 0.65rem 0.7rem;
}

.schedule-section + .schedule-section {
  margin-top: 0.6rem;
}

.schedule-section h3 {
  margin: 0 0 0.35rem;
}

.schedule-section-school-year {
  background: #f6f1e7;
  border-color: #d2c3a8;
}

.schedule-section-quarters {
  background: #edf4f7;
  border-color: #c2d3dd;
}

#schedule-quarters-wrap table th:nth-child(5),
#schedule-quarters-wrap table td:nth-child(5) {
  text-align: center;
}

.quarter-summary-total-label,
.quarter-summary-total-value {
  text-align: center;
}

.quarter-recommendation-card {
  display: block;
  margin-top: 0.75rem;
  border: 1px solid #d4dee9;
  border-radius: 12px;
  background: #fbfdff;
}

.quarter-recommendation-summary-trigger {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  min-height: 46px;
  padding: 0.65rem 0.75rem;
  cursor: pointer;
  list-style: none;
}

.quarter-recommendation-summary-trigger::-webkit-details-marker {
  display: none;
}

.quarter-recommendation-summary-trigger::after {
  content: "";
  width: 0.5rem;
  height: 0.5rem;
  margin-left: auto;
  border-right: 1.5px solid #4f6076;
  border-bottom: 1.5px solid #4f6076;
  transform: translateY(-0.12rem) rotate(45deg);
}

.quarter-recommendation-card[open] .quarter-recommendation-summary-trigger::after {
  transform: translateY(0.12rem) rotate(225deg);
}

.quarter-recommendation-summary-trigger strong {
  display: block;
  color: #17243d;
}

.quarter-recommendation-summary-trigger p,
.quarter-recommendation-body > p {
  margin: 0.15rem 0 0;
}

.quarter-recommendation-body {
  display: grid;
  gap: 0.55rem;
  padding: 0 0.75rem 0.75rem;
}

.quarter-recommendation-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-start;
  gap: 0.4rem;
}

.quarter-recommendation-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(120px, 1fr));
  gap: 0.45rem;
}

.quarter-recommendation-item {
  display: grid;
  gap: 0.15rem;
  padding: 0.55rem;
  border: 1px solid #dfe7f1;
  border-radius: 10px;
  background: #ffffff;
}

.quarter-recommendation-item strong {
  color: #17243d;
}

.quarter-recommendation-item span {
  color: #31435d;
  font-size: 0.88rem;
}

.quarter-recommendation-item em {
  color: #65758a;
  font-size: 0.82rem;
  font-style: normal;
}

.schedule-section-daily-breaks {
  background: #f5eee3;
  border-color: #d8c8b4;
}

.schedule-section-holidays {
  background: #eff6ed;
  border-color: #c7d8bf;
}

.schedule-section-plans {
  background: #f3efe8;
  border-color: #d8cdbd;
}

#plan-form > button {
  align-self: end;
  justify-self: start;
  width: auto;
  height: calc(1em + 0.84rem + 2px);
  padding: 0.42rem 0.8rem;
}

.attendance-section,
.grades-section {
  border: 1px solid #d8cfbf;
  border-radius: 10px;
  padding: 0.65rem 0.7rem;
}

.attendance-section + .attendance-section,
.grades-section + .grades-section {
  margin-top: 0.6rem;
}

.attendance-section h3,
.grades-section h3 {
  margin: 0 0 0.35rem;
}

.grades-section-title-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  margin-bottom: 0.35rem;
}

.grades-section-title-row h3 {
  margin: 0;
}

.attendance-section-title-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  margin-bottom: 0.35rem;
}

.attendance-section-title-row h3 {
  margin: 0;
}

.attendance-filter-panel {
  overflow: hidden;
}

.attendance-filter-panel > summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  cursor: pointer;
  list-style: none;
}

.attendance-filter-panel > summary::-webkit-details-marker {
  display: none;
}

.attendance-filter-panel > summary::after {
  content: "+";
  display: inline-grid;
  place-items: center;
  width: 1.45rem;
  height: 1.45rem;
  border: 1px solid #c5d6e8;
  border-radius: 999px;
  color: #1f66bd;
  font-weight: 700;
}

.attendance-filter-panel[open] > summary::after {
  content: "-";
}

.grades-filter-panel {
  overflow: visible;
}

.grades-filter-panel > summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  cursor: pointer;
  list-style: none;
}

.grades-filter-panel > summary::-webkit-details-marker {
  display: none;
}

.grades-filter-panel > summary::after {
  content: "+";
  display: inline-grid;
  place-items: center;
  width: 1.45rem;
  height: 1.45rem;
  border: 1px solid #c5d6e8;
  border-radius: 999px;
  color: #1f66bd;
  font-weight: 700;
}

.grades-filter-panel[open] > summary::after {
  content: "-";
}

.attendance-section-tracker {
  background: #f6f1e7;
  border-color: #d2c3a8;
}

.attendance-entry-form {
  margin-top: 0.6rem;
  align-items: end;
}

.attendance-entry-actions {
  display: flex;
  align-items: end;
  justify-content: flex-start;
  gap: 0.45rem;
}

.attendance-entry-actions button {
  width: auto;
}

.attendance-section-filters {
  background: #edf4f7;
  border-color: #c2d3dd;
}

.attendance-section-records {
  background: #eff6ed;
  border-color: #c7d8bf;
}

.grades-section-filters {
  background: #f6f1e7;
  border-color: #d2c3a8;
}

.grades-section-entry {
  background: #edf4f7;
  border-color: #c2d3dd;
}

.grades-section-records {
  background: #f3efe8;
  border-color: #d8cdbd;
}

#grade-entry-wrap {
  overflow-x: hidden;
}

#grade-entry-wrap table {
  table-layout: fixed;
}

#grade-entry-wrap th,
#grade-entry-wrap td {
  padding: 0.45rem 0.4rem;
  vertical-align: middle;
}

#grade-entry-wrap th:nth-child(1),
#grade-entry-wrap td:nth-child(1) {
  width: 11%;
}

#grade-entry-wrap th:nth-child(2),
#grade-entry-wrap td:nth-child(2) {
  width: 16%;
}

#grade-entry-wrap th:nth-child(3),
#grade-entry-wrap td:nth-child(3) {
  width: 12%;
}

#grade-entry-wrap th:nth-child(4),
#grade-entry-wrap td:nth-child(4) {
  width: 16%;
}

#grade-entry-wrap th:nth-child(5),
#grade-entry-wrap td:nth-child(5) {
  width: 12%;
}

#grade-entry-wrap th:nth-child(6),
#grade-entry-wrap td:nth-child(6) {
  width: 9%;
}

#grade-entry-wrap th:nth-child(7),
#grade-entry-wrap td:nth-child(7) {
  width: 23%;
}

#grade-entry-wrap input,
#grade-entry-wrap select {
  width: 100%;
  min-width: 0;
}

.grade-row-value {
  text-align: center;
}

.grade-entry-actions {
  display: grid;
  grid-template-columns: 62px 70px 58px;
  justify-content: flex-start;
  align-items: center;
  gap: 0.22rem;
  white-space: nowrap;
}

.grade-entry-actions button {
  padding: 0.3rem 0.34rem;
  font-size: 0.76rem;
  width: 100%;
  justify-content: center;
}

.grade-calc-row td {
  padding-top: 0.15rem;
  padding-bottom: 0.55rem;
  background: transparent;
}

.grade-calc-panel {
  display: flex;
  flex-wrap: wrap;
  align-items: end;
  gap: 0.7rem;
  padding: 0.65rem 0.8rem;
  border: 1px solid #d7e2ee;
  border-radius: 12px;
  background: #f8fbff;
}

.grade-calc-panel label {
  display: grid;
  gap: 0.24rem;
  min-width: 78px;
  max-width: 92px;
}

.grade-calc-panel label span {
  font-size: 0.84rem;
  font-weight: 600;
  color: #58708e;
}

.grade-calc-panel input {
  width: 100%;
}

.grade-calc-actions {
  flex-wrap: nowrap;
  white-space: nowrap;
}

.management-section {
  border: 1px solid #d8cfbf;
  border-radius: 10px;
  padding: 0.65rem 0.7rem;
}

#user-form {
  grid-template-columns: 1fr 1fr;
  align-items: end;
}

#user-form > button {
  height: calc(1em + 0.84rem + 2px);
  width: auto;
  justify-self: start;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  text-align: center;
}

#user-student-wrap.student-link-disabled {
  opacity: 0.6;
}

.readonly-lock {
  opacity: 0.6;
  pointer-events: none;
}

.users-section {
  border: 1px solid #d8cfbf;
  border-radius: 10px;
  padding: 0.65rem 0.7rem;
}

.users-section h3 {
  margin: 0 0 0.35rem;
}

.users-toolbar {
  display: flex;
  justify-content: flex-start;
  align-items: center;
  margin-bottom: 0.65rem;
}

.users-section-form {
  background: #f6f1e7;
  border-color: #d2c3a8;
}

.users-section-list {
  background: #edf4f7;
  border-color: #c2d3dd;
}

.users-actions-cell {
  white-space: nowrap;
  width: 1%;
}

.users-section-list .table-action-row {
  gap: 0.35rem;
}

@media (max-width: 1180px) {
  #user-form {
    grid-template-columns: 1fr;
  }
}

#tab-users .split {
  grid-template-columns: minmax(320px, 0.8fr) minmax(520px, 1.2fr);
}

.management-section + .management-section {
  margin-top: 0.6rem;
}

.subtabs {
  display: flex;
  flex-wrap: wrap;
  gap: 0.45rem;
  margin-bottom: 0.8rem;
}

.school-day-section + .school-day-section {
  margin-top: 0.8rem;
}

.school-day-section-shell {
  margin-bottom: 0.35rem;
}

.school-day-form {
  grid-template-columns: minmax(160px, 0.9fr) minmax(220px, 1fr) minmax(220px, 1fr) minmax(220px, 1fr);
  align-items: center;
  gap: 0.55rem 0.8rem;
  margin-bottom: 0.35rem;
}

.school-day-form > label {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  gap: 0.45rem;
  margin: 0;
  white-space: nowrap;
  overflow: visible;
}

.school-day-form > label > input,
.school-day-form > label > details {
  min-width: 0;
}

#school-day-form .calendar-filter-field {
  position: relative;
  align-self: start;
}

#school-day-form .multi-select-dropdown {
  position: relative;
  overflow: visible;
}

#school-day-form .multi-select-dropdown summary {
  width: 100%;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

#school-day-form .multi-select-dropdown[open] {
  z-index: 30;
}

#school-day-form .multi-select-dropdown[open] .checklist-vertical {
  display: block;
  position: absolute;
  top: calc(100% + 0.35rem);
  left: 0;
  min-width: 100%;
  width: max-content;
  max-width: min(440px, 70vw);
  gap: 0;
  margin-top: 0;
  padding: 0.35rem 0.5rem;
  background: rgba(255, 255, 255, 0.98);
  border: 1px solid var(--edge-strong);
  border-radius: 14px;
  box-shadow: 0 16px 32px rgba(26, 44, 69, 0.16);
  z-index: 40;
}

#school-day-form .multi-select-dropdown[open] .checklist-row {
  display: grid;
  grid-template-columns: 14px max-content;
  align-items: center;
  gap: 0.4rem;
  height: 1.35rem;
  min-height: 1.35rem;
  margin: 0;
  padding: 0;
}

#school-day-form .multi-select-dropdown[open] .checklist-row input[type="checkbox"] {
  width: 13px;
  height: 13px;
  margin: 0;
}

#school-day-form .multi-select-dropdown[open] .checklist-row label {
  display: block;
  margin: 0;
  padding: 0;
  font-size: 0.86rem;
  font-weight: 400;
  line-height: 1.22;
  white-space: nowrap;
}

.school-day-nav-row {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 0.8rem;
  flex-wrap: wrap;
  margin-bottom: 1rem;
}

.school-day-quick-filters {
  display: flex;
  flex-wrap: wrap;
  gap: 0.45rem;
  margin-bottom: 0;
}

.school-day-subtabs {
  margin-bottom: 0;
  margin-left: auto;
  justify-content: flex-end;
}

.school-day-quick-filter-btn {
  border: 1px solid #c8d7e8;
  background: #f7fbff;
  color: #35516e;
  border-radius: 999px;
  padding: 0.38rem 0.8rem;
  cursor: pointer;
  font-weight: 700;
}

.school-day-quick-filter-btn.active {
  background: #2f5885;
  border-color: #2f5885;
  color: #fff;
}

#school-day-reset-student-btn,
#school-day-reset-day-btn {
  border: 1px solid #c8d7e8;
  background: #f7fbff;
  color: #35516e;
  border-radius: 999px;
  padding: 0.38rem 0.8rem;
  font-weight: 700;
  box-shadow: none;
}

#school-day-reset-student-btn:hover,
#school-day-reset-day-btn:hover {
  background: #e9f2fb;
}

.school-day-section-header {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 0.8rem;
  margin-bottom: 0.45rem;
}

.school-day-section-header h3 {
  margin: 0;
}

.school-day-date-nav {
  display: inline-grid;
  grid-template-columns: auto auto auto;
  align-items: center;
  gap: 0.8rem;
  justify-self: center;
}

.school-day-date-nav button {
  padding: 0.28rem 0.72rem;
  min-height: 2rem;
  border-radius: 999px;
  background: #edf4fb;
  border: 1px solid #c7d8ea;
  color: #35516e;
  box-shadow: none;
}

.school-day-date-nav button:hover {
  background: #ddebf8;
}

.school-day-date-title {
  margin: 0;
  min-width: 8.5rem;
  text-align: center;
  font-size: 1.28rem;
  font-weight: 800;
  color: var(--text);
}

.school-day-attendance-toolbar {
  margin-bottom: 0.45rem;
}

.school-day-callout-title {
  margin: 0 0 0.25rem;
  font-weight: 700;
}

.school-day-override-badge {
  display: inline-flex;
  align-items: center;
  margin-left: 0.35rem;
  padding: 0.08rem 0.42rem;
  border-radius: 999px;
  background: #e7f0fb;
  color: #47698a;
  font-size: 0.72rem;
  font-weight: 700;
  vertical-align: middle;
}

.school-day-row-badges {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem;
  margin: 0.2rem 0 0.2rem;
}

#school-day-table tr.school-day-row-needs-attendance td:first-child,
#school-day-table tr.school-day-row-needs-grade td:first-child,
#school-day-table tr.school-day-row-needs-completion td:first-child,
#school-day-table tr.school-day-row-past-due td:first-child,
#school-day-table tr.school-day-row-excused td:first-child,
#school-day-table tr.school-day-row-completed td:first-child {
  position: relative;
}

#school-day-table tr.school-day-row-needs-attendance td:first-child::before,
#school-day-table tr.school-day-row-needs-grade td:first-child::before,
#school-day-table tr.school-day-row-needs-completion td:first-child::before,
#school-day-table tr.school-day-row-past-due td:first-child::before,
#school-day-table tr.school-day-row-excused td:first-child::before,
#school-day-table tr.school-day-row-completed td:first-child::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.35rem;
  bottom: 0.35rem;
  width: 4px;
  border-radius: 999px;
}

#school-day-table tr.school-day-row-needs-attendance td:first-child::before,
#school-day-table tr.school-day-row-needs-grade td:first-child::before,
#school-day-table tr.school-day-row-needs-completion td:first-child::before {
  background: #1761ae;
}

#school-day-table tr.school-day-row-past-due td:first-child::before {
  background: #d23b3b;
}

#school-day-table tr.school-day-row-excused td:first-child::before {
  background: #d97706;
}

#school-day-table tr.school-day-row-completed td:first-child::before {
  background: #3f8a63;
}

#school-day-table tr.school-day-row-needs-attendance td,
#school-day-table tr.school-day-row-needs-grade td,
#school-day-table tr.school-day-row-needs-completion td {
  background: #f7fbff;
}

#school-day-table tr.school-day-row-past-due td {
  background: #fff8f8;
}

#school-day-table tr.school-day-row-excused td {
  background: #fffaf2;
}

#school-day-table tr.school-day-row-completed td {
  background: #fbfffc;
}

.school-day-row-badges .school-day-override-badge {
  margin-left: 0;
}

.school-day-status-badge {
  display: inline-flex;
  align-items: center;
  padding: 0.08rem 0.42rem;
  border-radius: 999px;
  font-size: 0.72rem;
  font-weight: 700;
}

.school-day-status-badge.success {
  background: #e7f6ee;
  color: #336a4f;
}

.school-day-status-badge.warning {
  background: #e7f2ff;
  color: #1761ae;
}

.school-day-status-badge.danger {
  background: #ffe5e5;
  color: #a92626;
}

.school-day-status-badge.complete {
  background: #e8f6ee;
  color: #2f6a4a;
}

.school-day-status-badge.excused {
  background: #fff1dc;
  color: #b65a06;
}

.school-day-status-badge.info {
  background: #e7f0fb;
  color: #47698a;
}

.school-day-status-badge.muted {
  background: #eef3f8;
  color: #627a97;
}

.school-day-actions-wrap {
  display: grid;
  gap: 0.35rem;
  justify-items: start;
}

.school-day-status-control,
.school-day-status-readonly {
  --status-accent: #1761ae;
  --status-soft: #eef5ff;
  min-width: 9.2rem;
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  padding: 0.34rem 0.55rem;
  border: 1px solid color-mix(in srgb, var(--status-accent) 28%, #d7e3f4);
  border-radius: 8px;
  background: color-mix(in srgb, var(--status-soft) 72%, white);
  color: var(--status-accent);
  font-size: 0.82rem;
  font-weight: 700;
}

.school-day-status-control.completed,
.school-day-status-readonly.completed {
  --status-accent: #15803d;
  --status-soft: #e8f6ee;
}

.school-day-status-control.excused,
.school-day-status-readonly.excused {
  --status-accent: #d97706;
  --status-soft: #fff2de;
}

.school-day-status-icon {
  width: 1.2rem;
  height: 1.2rem;
  display: inline-flex;
  flex: 0 0 auto;
  align-items: center;
  justify-content: center;
  border-radius: 999px;
  background: var(--status-accent);
  color: #ffffff;
  font-size: 0.76rem;
  font-weight: 900;
  line-height: 1;
}

.school-day-status-control.scheduled .school-day-status-icon::before {
  content: "\25F7";
}

.school-day-status-control.completed .school-day-status-icon::before {
  content: "\2713";
}

.school-day-status-control.excused .school-day-status-icon::before {
  content: "\2298";
}

.school-day-status-select {
  min-width: 0;
  width: 100%;
  border: 0;
  background: transparent;
  color: inherit;
  font: inherit;
  outline: 0;
}

.school-day-status-readonly {
  justify-content: center;
}

.school-day-inline-grade-row td {
  background: #f8fbff;
}

.school-day-inline-grade-wrap {
  margin-top: 0.2rem;
}

.school-day-inline-grade-wrap table {
  margin: 0;
}

.school-day-inline-grade-wrap tr[data-school-day-inline-grade] th:last-child,
.school-day-inline-grade-wrap tr[data-school-day-inline-grade] td:last-child {
  text-align: right;
}

.school-day-inline-grade-wrap .school-day-inline-grade-actions {
  justify-content: flex-end;
}

.school-day-inline-grade-wrap tr[data-school-day-inline-grade] .grade-entry-action-row {
  display: flex;
  gap: 0.32rem;
  justify-content: flex-start;
}

.school-day-inline-grade-wrap tr[data-school-day-inline-grade] .grade-entry-action-row button,
.school-day-inline-grade-wrap .school-day-inline-grade-action-table-row .grade-entry-action-row button {
  width: auto;
  min-width: 0;
}

.school-day-inline-grade-wrap .school-day-inline-grade-action-table-row td {
  padding-top: 0.2rem;
  padding-bottom: 0.2rem;
  background: #f8fbff;
}

.school-day-inline-grade-wrap .grade-entry-inline-placeholder {
  min-height: 1rem;
}

.calendar-inline-editor {
  min-width: 9rem;
}

.school-day-start-editor {
  min-width: 8.6rem;
}

.calendar-inline-label {
  display: grid;
  gap: 0.25rem;
  font-size: 0.82rem;
  font-weight: 700;
  color: #5e7695;
}

.calendar-inline-label input {
  width: 100%;
}

#school-day-table .school-day-hour-column {
  width: 13%;
}

#school-day-table .school-day-student-column {
  width: 11%;
}

#school-day-table .school-day-planned-column {
  width: 26%;
}

#school-day-table .school-day-instructor-column {
  width: 12%;
}

#school-day-table .school-day-minutes-column {
  width: 7%;
}

#school-day-table .school-day-status-column {
  width: 12%;
}

#school-day-table .school-day-next-action-column {
  width: 11%;
  min-width: 8.8rem;
}

#school-day-table .school-day-actions-column {
  width: 8%;
}

.school-day-planned-copy {
  font-weight: 500;
}

.school-day-editing-row .school-day-planned-column {
  min-width: 16rem;
}

.school-day-editing-row .school-day-instructor-column,
.school-day-editing-row .school-day-minutes-column {
  vertical-align: middle;
}

.school-day-instructor-editor {
  width: 100%;
  min-width: 8rem;
  max-width: 10rem;
}

.school-day-minutes-editor {
  width: 100%;
  min-width: 5.2rem;
  max-width: 6rem;
}

.school-day-editing-row .calendar-actions-cell {
  min-width: 7.2rem;
}

@media (max-width: 900px) {
  #school-day-table .school-day-hour-column,
  #school-day-table .school-day-student-column,
  #school-day-table .school-day-planned-column,
  #school-day-table .school-day-instructor-column,
  #school-day-table .school-day-minutes-column,
  #school-day-table .school-day-status-column,
  #school-day-table .school-day-next-action-column,
  #school-day-table .school-day-actions-column {
    width: auto;
  }

  .school-day-editing-row .school-day-planned-column {
    min-width: 0;
  }

  .school-day-instructor-editor,
  .school-day-minutes-editor,
  .school-day-start-editor {
    max-width: none;
  }
}

.school-day-attendance-toolbar {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
  gap: 0.7rem;
  margin-bottom: 0.8rem;
}

.school-day-summary-copy {
  display: grid;
  gap: 0.15rem;
  min-width: 0;
}

.school-day-summary-copy .muted {
  margin: 0;
}

.school-day-hours-summary {
  font-size: 0.88rem;
  font-weight: 600;
}

.school-day-student-summaries {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 0.65rem;
  margin: 0 0 0.7rem;
}

.school-day-student-summaries-header {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  margin: 0 0 0.5rem;
}

.school-day-student-summaries-header h4 {
  margin: 0;
  font-size: 0.92rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: #627a97;
}

.school-day-student-summaries-toggle {
  width: 1.85rem;
  min-width: 1.85rem;
  height: 1.85rem;
  padding: 0;
  border-radius: 999px;
  border: 1px solid #c8d7e8;
  background: #fff;
  color: #2f5885;
  font-size: 1rem;
  font-weight: 700;
  line-height: 1;
  box-shadow: none;
}

.school-day-student-summaries-toggle:hover {
  background: #eef5fc;
}

.school-day-student-summary-card {
  display: block;
  width: 100%;
  text-align: left;
  border: 1px solid #dfe8f2;
  border-radius: 14px;
  background: #f8fbff;
  padding: 0.7rem 0.8rem;
  box-shadow: 0 10px 22px rgba(31, 47, 69, 0.06);
  cursor: pointer;
}

.school-day-student-summary-card:hover {
  border-color: #b8cde4;
  background: #f3f8fd;
}

.school-day-student-summary-card.active {
  border-color: #5f88b4;
  background: #eaf3fc;
  box-shadow: 0 12px 26px rgba(47, 88, 133, 0.14);
}

.school-day-student-summary-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 0.6rem;
  margin-bottom: 0.45rem;
}

.school-day-card-student {
  display: grid;
  gap: 0.12rem;
  min-width: 0;
}

.school-day-card-student-label {
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #6b84a0;
}

.school-day-card-student h4 {
  margin: 0;
  font-size: 0.98rem;
  line-height: 1.2;
  color: #18324d;
}

.school-day-student-summary-header h4 {
  margin: 0;
  font-size: 0.98rem;
}

.school-day-student-summary-stats {
  display: grid;
  gap: 0.2rem;
  font-size: 0.85rem;
  color: #5a6f87;
}

.school-day-overview-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 0.7rem;
  margin: 0 0 0.8rem;
}

.school-day-overview-card {
  display: block;
  width: 100%;
  text-align: left;
  border: 1px solid #dfe8f2;
  border-radius: 16px;
  background: linear-gradient(180deg, #ffffff 0%, #f8fbff 100%);
  padding: 0.75rem 0.85rem;
  box-shadow: 0 10px 24px rgba(31, 47, 69, 0.07);
  cursor: pointer;
}

.school-day-overview-card:hover {
  border-color: #b8cde4;
  background: #f4f9ff;
}

.school-day-overview-card-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 0.6rem;
  margin-bottom: 0.5rem;
}

.school-day-overview-card-header h4 {
  margin: 0;
  font-size: 1rem;
}

.school-day-overview-card-header span {
  font-size: 0.78rem;
  font-weight: 700;
  color: #627a97;
}

.school-day-overview-body {
  display: grid;
  gap: 0.28rem;
  max-height: 15.5rem;
  overflow-y: auto;
  padding-right: 0.2rem;
}

.school-day-overview-row {
  display: grid;
  grid-template-columns: 74px minmax(0, 1fr) auto;
  gap: 0.5rem;
  align-items: center;
  padding: 0.2rem 0;
}

.school-day-overview-time {
  font-size: 0.8rem;
  font-weight: 700;
  color: #446484;
}

.school-day-overview-course {
  min-width: 0;
  font-size: 0.84rem;
  font-weight: 600;
  color: #20344f;
}

.school-day-overview-status {
  justify-self: end;
  padding: 0.08rem 0.42rem;
  border-radius: 999px;
  font-size: 0.68rem;
  font-weight: 700;
}

.school-day-overview-status.complete {
  background: #e8f6ee;
  color: #2f6a4a;
}

.school-day-overview-status.needs-grade {
  background: #ffe7bf;
  color: #8f4e00;
}

.school-day-overview-status.past-due {
  background: #ffe5e5;
  color: #a92626;
}

.school-day-overview-status.excused {
  background: #fff1dc;
  color: #b65a06;
}

.school-day-overview-status.open {
  background: #eef3f8;
  color: #627a97;
}

.school-day-overview-status.flex {
  background: #e8f4f1;
  color: #2f6f64;
}

.school-day-overview-status.break {
  background: #f1ebdc;
  color: #6d5a28;
}

.school-day-grades-callout {
  margin-top: 0.85rem;
}

.subtab-btn {
  border: 1px solid #c2a676;
  background: #fff8ed;
  color: var(--text);
  border-radius: 10px;
  padding: 0.45rem 0.8rem;
  cursor: pointer;
  font-weight: 600;
}

.subtab-btn.active {
  background: var(--accent);
  border-color: var(--accent);
  color: #fff;
}

.attendance-subtabs,
.grades-subtabs,
.student-detail-subtabs {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin: 0.3rem 0 0.75rem;
}

.attendance-tab-panel,
.grades-tab-panel,
.student-detail-tab-panel {
  display: grid;
  gap: 0.6rem;
}

.reports-section {
  border: 1px solid #d8cfbf;
  border-radius: 10px;
  background: #f6f1e7;
  padding: 0.75rem;
}

#reports-form {
  grid-template-columns: 1fr;
  align-items: stretch;
  gap: 0.85rem;
  margin-bottom: 0;
}

.reports-filter-group {
  border: 1px solid #d8cfbf;
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.55);
  padding: 0.8rem;
}

.reports-filter-group h3 {
  margin: 0 0 0.65rem;
}

.reports-criteria-grid {
  display: grid;
  grid-template-columns: minmax(260px, 1.5fr) minmax(180px, 0.9fr) minmax(180px, 0.9fr);
  gap: 0.8rem;
  align-items: end;
}

.reports-student-field {
  align-self: stretch;
}

#reports-form .reports-criteria-grid > label > select,
#reports-form .reports-criteria-grid .multi-select-dropdown summary {
  height: 42px;
  line-height: 1.2;
}

.reports-content-checklist {
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 0.45rem 0.9rem;
}

#reports-form > button {
  width: auto;
  justify-self: start;
  align-self: end;
  height: calc(1em + 0.84rem + 2px);
  padding: 0.42rem 0.8rem;
}

#reports-message {
  margin-top: 0.65rem;
}

.management-section h3 {
  margin: 0 0 0.35rem;
}

.management-section-subjects {
  background: #f6f1e7;
  border-color: #d2c3a8;
}

.management-section-courses {
  background: #edf4f7;
  border-color: #c2d3dd;
}

.management-section-grade-types {
  background: #eff6ed;
  border-color: #c7d8bf;
}

.management-section-grading-criteria {
  background: #f4efe7;
  border-color: #d5c7b4;
}

.subsection-toggle-row {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 0.5rem;
  margin: 0.15rem 0 0.35rem;
}

.subsection-toggle-row h4 {
  margin: 0;
}

.subsection-toggle-row h3 {
  margin: 0;
}

.subsection-toggle-btn {
  width: 1.7rem;
  height: 1.7rem;
  padding: 0;
  border-radius: 999px;
  position: relative;
  display: inline-block;
  vertical-align: middle;
  font-size: 0;
  font-weight: 700;
}

.subsection-toggle-btn::before,
.subsection-toggle-btn::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  background: #ffffff;
  border-radius: 999px;
}

.subsection-toggle-btn::before {
  width: 0.62rem;
  height: 2px;
}

.subsection-toggle-btn::after {
  width: 2px;
  height: 0.62rem;
}

.subsection-toggle-btn[aria-expanded="true"]::after {
  display: none;
}

.dashboard-section {
  border: 1px solid #d8cfbf;
  border-radius: 10px;
  padding: 0.65rem 0.7rem;
}

.dashboard-section + .dashboard-section {
  margin-top: 0.6rem;
}

.dashboard-section h3 {
  margin: 0 0 0.35rem;
}

.dashboard-subtabs {
  margin-bottom: 0.85rem;
}

.dashboard-section-placeholder {
  padding: 0.95rem 1rem;
}

.dashboard-section-overview {
  background: #f6f1e7;
  border-color: #d2c3a8;
}

.dashboard-section-execution-detail {
  background: #f7f3eb;
  border-color: #d9ccb6;
}

.dashboard-section-compliance-detail {
  background: #eef3f9;
  border-color: #c9d5e8;
}

.dashboard-section-student-performance {
  background: #edf4f7;
  border-color: #c2d3dd;
}

.dashboard-section-student-attendance {
  background: #eff6ed;
  border-color: #c7d8bf;
}

.dashboard-section-student-instructional-hours {
  background: #edf4f7;
  border-color: #c2d3dd;
}

.dashboard-section-trending {
  background: #f3efe8;
  border-color: #d8cdbd;
}

.dashboard-section-volume {
  background: #f7f2e9;
  border-color: #ddcfbb;
}

.dashboard-section-gpa-trending {
  background: #eef3f0;
  border-color: #c7d5cc;
}

.dashboard-section-instruction-hours-trending {
  background: #edf1f8;
  border-color: #c5d1e3;
}

.dashboard-section-work-distribution {
  background: #eef3f0;
  border-color: #c7d5cc;
}

#student-detail-panel .table-wrap {
  margin-top: 0;
}

#student-form,
#student-enrollment-form {
  align-items: end;
}

#student-form {
  grid-template-columns: repeat(2, minmax(180px, 1fr));
  column-gap: 0.85rem;
  row-gap: 0.6rem;
}

#student-form label {
  min-width: 0;
}

#student-form > button,
#student-enrollment-form > button {
  justify-self: start;
  align-self: end;
  padding: 0.48rem 0.8rem;
  font-size: 0.92rem;
}

#student-form > button {
  grid-column: 2;
}

#student-enrollment-form > button {
  grid-column: 2;
  margin-left: 0.45rem;
}

#student-enrollment-form {
  grid-template-columns: minmax(260px, 1fr);
}

#student-enrollment-form label {
  min-width: 0;
}

#student-enrollment-form .student-enrollment-course-field,
#student-enrollment-form .multi-select-dropdown,
#student-enrollment-form .multi-select-dropdown summary {
  width: 100%;
}

#student-enrollment-form .multi-select-dropdown[open] {
  padding-bottom: 0.1rem;
}

.student-detail-action-row {
  display: flex;
  justify-content: flex-start;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.55rem;
}

.student-detail-action-row button {
  width: auto;
}

.student-schedule-order-select {
  width: 100%;
  min-width: 88px;
}

#course-form {
  grid-template-columns: minmax(240px, 1.15fr) minmax(220px, 0.95fr) minmax(360px, 1.45fr);
  align-items: end;
  column-gap: 0.85rem;
  row-gap: 0.75rem;
  padding: 1rem;
  border: 1px solid var(--edge);
  border-radius: 16px;
  background: rgba(248, 251, 255, 0.92);
}

.course-management-actions {
  margin: 0.5rem 0 1rem;
}

.course-sections-wrap {
  margin-top: 1.25rem;
  display: grid;
  gap: 0.55rem;
}

.course-sections-wrap h4,
.course-sections-wrap .course-form-note {
  margin-bottom: 0;
}

.management-courses-subtabs {
  margin: 0.25rem 0 1rem;
}

#course-form label {
  display: grid;
  gap: 0.35rem;
  min-width: 0;
}

#course-form button {
  height: calc(1em + 0.84rem + 2px);
  width: auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.course-form-actions {
  grid-column: 1 / -1;
  display: flex;
  justify-content: flex-start;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.5rem;
}

.course-hours-field {
  max-width: 160px;
}

.course-quarters-field,
.course-section-quarters-field {
  min-width: 220px;
}

#course-hours {
  width: 100%;
  max-width: 140px;
}

.course-form-note {
  grid-column: 1 / -1;
  margin: -0.1rem 0 0;
  max-width: 70ch;
  line-height: 1.45;
}

.course-section-form {
  grid-template-columns: repeat(5, minmax(130px, 1fr));
  align-items: end;
  padding: 1rem;
  border: 1px solid var(--edge);
  border-radius: 16px;
  background: rgba(248, 251, 255, 0.92);
}

.course-section-form label,
.course-section-form .course-section-field,
.course-section-form fieldset {
  min-width: 0;
}

.course-section-form input,
.course-section-form select {
  width: 100%;
  min-width: 0;
}

.course-weekdays-field,
.course-section-weekdays-field {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.65rem;
  min-height: calc(1em + 0.84rem + 2px);
}

.course-section-quarters-field {
  grid-column: span 2;
}

.course-section-students-field {
  grid-column: span 2;
}

.course-section-weekdays-field {
  grid-column: span 3;
}

.course-weekdays-field legend,
.course-section-weekdays-field legend {
  width: 100%;
  margin-bottom: 0.35rem;
}

.school-day-settings-form {
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  align-items: end;
}

#school-day-settings-current {
  margin-top: 0.75rem;
}

.course-materials-panel {
  grid-column: 1 / -1;
  display: block;
  min-width: 0;
  padding: 0.8rem;
  border: 1px solid var(--edge);
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.64);
}

.course-materials-panel summary {
  cursor: pointer;
  color: var(--text);
  font-weight: 700;
}

.course-materials-list {
  display: grid;
  gap: 0.8rem;
  margin-top: 0.8rem;
  overflow-x: auto;
  padding-bottom: 0.1rem;
}

.course-materials-grid {
  display: grid;
  grid-template-columns: minmax(160px, 0.9fr) minmax(150px, 0.75fr) minmax(240px, 1.4fr) minmax(190px, 1fr) max-content;
  gap: 0.85rem;
  align-items: end;
  min-width: 900px;
  padding: 0.7rem;
  border: 1px solid var(--edge);
  border-radius: 12px;
  background: rgba(248, 251, 255, 0.9);
}

.course-materials-grid label {
  display: grid;
  gap: 0.3rem;
  min-width: 0;
}

.course-materials-grid input,
.course-materials-grid select {
  width: 100%;
  min-width: 0;
}

.course-material-type-field,
.course-material-isbn-field {
  grid-column: auto;
  min-width: 0;
}

.course-material-title-field,
.course-material-publisher-field,
.course-material-other-field {
  grid-column: auto;
}

.course-material-other-field:not(.hidden) {
  grid-column: 3;
}

.course-materials-grid label.hidden {
  display: none;
}

.course-material-remove-btn {
  grid-column: auto;
  align-self: end;
  justify-self: start;
  width: fit-content;
  white-space: nowrap;
}

.course-table-actions {
  min-width: 150px;
}

.course-table-actions .table-action-row {
  flex-wrap: nowrap;
}

#grade-type-form {
  grid-template-columns: minmax(180px, 1fr) minmax(180px, 1fr) auto auto;
  align-items: end;
  column-gap: 0.6rem;
}

#grade-type-form .grade-type-form-actions {
  grid-column: 1 / -1;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 0.5rem;
}

#grade-type-submit-btn,
#grade-type-cancel-edit-btn {
  width: auto;
}

.grade-types-apply-row {
  display: flex;
  justify-content: flex-start;
  align-items: center;
  gap: 0.55rem;
  margin: 0 0 0.4rem;
}

#grading-criteria-form {
  display: grid;
  gap: 0.75rem;
}

.grading-criteria-grid {
  display: grid;
  grid-template-columns: minmax(360px, 1.4fr) minmax(220px, 0.8fr);
  gap: 0.8rem;
}

.grading-criteria-card {
  border: 1px solid #dbcdb9;
  border-radius: 10px;
  background: rgba(255, 251, 243, 0.82);
  padding: 0.8rem;
}

.grading-criteria-card h4 {
  margin: 0 0 0.4rem;
}

.grading-criteria-card .muted {
  margin-top: 0;
}

.letter-grade-scale-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(160px, 1fr));
  gap: 0.6rem 0.75rem;
}

#grading-gpa-scale,
#grading-gpa-other {
  max-width: 180px;
}

.grading-criteria-actions {
  display: flex;
  justify-content: flex-start;
  align-items: center;
  gap: 0.55rem;
}

#grading-criteria-edit-btn,
#grading-criteria-submit-btn,
#grading-criteria-cancel-btn {
  width: auto;
}

#attendance-filter-form > button {
  align-self: end;
  justify-self: start;
  width: auto;
  height: calc(1em + 0.84rem + 2px);
  padding: 0.42rem 0.8rem;
}

#attendance-filter-form {
  grid-template-columns: minmax(170px, 1.25fr) minmax(130px, 0.75fr) minmax(130px, 0.75fr) minmax(140px, 0.85fr) minmax(140px, 0.85fr) auto;
  align-items: end;
}

#grades-filter-form > button {
  align-self: end;
  justify-self: start;
  width: 100%;
  max-width: 180px;
  height: calc(1em + 0.84rem + 2px);
  padding: 0.42rem 0.8rem;
}

#plan-filter-form > button {
  align-self: end;
  justify-self: start;
  width: auto;
  height: calc(1em + 0.84rem + 2px);
  padding: 0.42rem 0.8rem;
}

#calendar-form {
  grid-template-columns: repeat(3, minmax(180px, 1fr));
  margin-bottom: 0;
  align-items: end;
}

#calendar-form > label > input,
#calendar-form > label > select,
#calendar-form .multi-select-dropdown summary {
  height: 42px;
}

#calendar-form > label > input,
#calendar-form > label > select,
#calendar-form .multi-select-dropdown summary {
  line-height: 1.2;
}

.search-inline-edit-row > td {
  background: #f8fbff;
  padding: 0.75rem;
}

.search-inline-edit-panel {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)) auto;
  align-items: end;
  gap: 0.6rem;
}

.search-inline-edit-panel label {
  display: grid;
  gap: 0.3rem;
  min-width: 0;
}

.search-grade-edit-wrap {
  margin: 0;
}

.attendance-search-edit-row label {
  display: grid;
  gap: 0.3rem;
}

.attendance-search-edit-row input,
.attendance-search-edit-row select {
  box-sizing: border-box;
  min-width: 0;
  width: 100%;
}

@media (max-width: 900px) {
  .schedule-block-secondary-row {
    grid-template-columns: 1fr;
  }

  .search-inline-edit-panel {
    grid-template-columns: 1fr;
  }
}

#calendar-form .calendar-filter-field {
  align-self: start;
}

#calendar-form .multi-select-dropdown summary {
  width: 100%;
}

#calendar-form .multi-select-dropdown[open] {
  height: auto;
}

.calendar-month-view {
  display: grid;
  gap: 0.55rem;
  overflow-x: auto;
}

.calendar-toolbar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 0.5rem;
}

.calendar-month-title {
  margin: 0;
  font-weight: 700;
}

.calendar-weekdays {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  gap: 0.35rem;
  min-width: 840px;
}

.calendar-weekdays div {
  border: 1px solid #d6e1d0;
  border-radius: 8px;
  background: #f2f8ef;
  padding: 0.3rem 0.45rem;
  font-weight: 600;
  text-align: center;
}

.calendar-month-grid {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  gap: 0.35rem;
  min-width: 840px;
}

.calendar-week-grid {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  gap: 0.35rem;
  min-width: 840px;
}

.calendar-day {
  min-height: 155px;
  border: 1px solid #d8cfbf;
  border-radius: 10px;
  background: #fffaf2;
  padding: 0.35rem;
  display: grid;
  grid-template-rows: auto 1fr;
  gap: 0.35rem;
}

.calendar-day.muted-day {
  background: #efe7d9;
  opacity: 0.75;
}

.calendar-day-header {
  font-size: 0.9rem;
  font-weight: 700;
}

.calendar-day-items {
  display: grid;
  gap: 0.3rem;
  align-content: start;
  max-height: 115px;
  overflow: auto;
}

.calendar-day-item {
  border: 1px solid #dccdb6;
  border-radius: 7px;
  background: #fff;
  padding: 0.2rem 0.3rem;
  font-size: 0.76rem;
  line-height: 1.25;
}

.calendar-table-wrap {
  background: #f3efe8;
  border: 1px solid #d8cdbd;
  border-radius: 10px;
  padding: 0.25rem;
}

.calendar-day-item .name {
  font-weight: 600;
}

.calendar-student-link {
  border: 0;
  background: none;
  color: var(--text);
  padding: 0;
  margin: 0;
  font-weight: 600;
  text-align: left;
  cursor: pointer;
  text-decoration: underline;
}

.calendar-student-link:hover {
  color: #5f3414;
}

#calendar-week-view .calendar-day {
  min-height: 280px;
}

#calendar-week-view .calendar-day-items {
  max-height: 240px;
}

@media (max-width: 980px) {
  #calendar-form {
    grid-template-columns: 1fr 1fr;
  }
}

@media (max-width: 980px) {
  .kpi-grid {
    grid-template-columns: 1fr 1fr;
  }

  .split {
    grid-template-columns: 1fr;
  }

  .grid-form {
    grid-template-columns: 1fr 1fr;
  }

  .quarter-grid,
  .quarter-recommendation-grid {
    grid-template-columns: 1fr 1fr;
  }

  .grading-criteria-grid {
    grid-template-columns: 1fr;
  }

  #reports-form {
    grid-template-columns: 1fr 1fr;
  }

  #course-form {
    grid-template-columns: 1fr 1fr;
  }

  .course-section-form {
    grid-template-columns: 1fr 1fr;
  }

  .course-hours-field {
    max-width: none;
  }

  #course-hours {
    max-width: none;
  }

  .course-weekdays-field,
  .course-section-quarters-field,
  .course-section-weekdays-field {
    grid-column: 1 / -1;
  }

  .course-materials-grid {
    grid-template-columns: minmax(160px, 0.9fr) minmax(150px, 0.75fr) minmax(240px, 1.4fr) minmax(190px, 1fr) max-content;
  }

  .course-material-other-field,
  .course-material-remove-btn {
    grid-column: auto;
  }
}

@media (max-width: 640px) {
  #calendar-form {
    grid-template-columns: 1fr;
  }

  .reports-criteria-grid {
    grid-template-columns: 1fr;
  }

  .grid-form,
  .quarter-grid,
  .quarter-recommendation-grid,
  .kpi-grid,
  .progress-wrap {
    grid-template-columns: 1fr;
  }

  .quarter-recommendation-summary-trigger {
    flex-direction: column;
    align-items: flex-start;
  }

  .quarter-recommendation-actions {
    justify-content: flex-start;
  }

  .course-materials-grid {
    grid-template-columns: 1fr;
    min-width: 0;
  }

  .top {
    grid-template-columns: 1fr;
    grid-template-areas:
      "brand"
      "title"
      "subtitle"
      "session";
  }

  .session-bar {
    justify-content: flex-start;
  }

  .app-layout {
    grid-template-columns: 1fr;
  }

  .course-material-other-field,
  .course-material-remove-btn {
    grid-column: 1 / -1;
  }

  .app-sidebar {
    position: static;
    padding: 0.75rem;
  }

  .app-sidebar-nav {
    grid-template-columns: repeat(auto-fit, minmax(130px, 1fr));
  }

  .brand-photo {
    width: min(170px, 45vw);
    height: auto;
  }

  .auth-shell {
    grid-template-columns: 1fr;
  }

  .auth-panel {
    grid-column: 1;
    transform: none;
  }

  .letter-grade-scale-grid {
    grid-template-columns: 1fr;
  }

  #reports-form {
    grid-template-columns: 1fr;
  }

}

/* Reversible modern polish pass: preserves app structure, refines finish layer. */
:root {
  --bg: #edf3f8;
  --panel: rgba(255, 255, 255, 0.96);
  --panel-soft: rgba(248, 251, 255, 0.95);
  --edge: #d9e2ee;
  --edge-strong: #c9d5e6;
  --text: #1f2f45;
  --muted: #627389;
  --accent: #1761ae;
  --accent-strong: #0f4a87;
  --accent-soft: #f4e6d4;
  --danger: #b04040;
  --shadow-soft: 0 18px 42px rgba(31, 47, 69, 0.08);
  --shadow-float: 0 24px 56px rgba(31, 47, 69, 0.12);
}

body {
  background:
    radial-gradient(circle at top left, rgba(181, 212, 239, 0.28), transparent 34%),
    radial-gradient(circle at top right, rgba(255, 233, 205, 0.38), transparent 28%),
    linear-gradient(180deg, #f7fafc 0%, #edf3f8 52%, #e8eef5 100%);
  color: var(--text);
}

.shell {
  width: min(1280px, 96vw);
  gap: 1rem;
}

.top {
  gap: 0 1rem;
  padding: 0.72rem 1rem 0.62rem;
  background: rgba(255, 255, 255, 0.88);
  border: 1px solid rgba(217, 226, 238, 0.95);
  border-radius: 28px;
  box-shadow: var(--shadow-soft);
  backdrop-filter: blur(16px);
  align-items: center;
  position: relative;
  z-index: 80;
}

#app-shell .app-brand-lockup {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  min-width: 0;
  flex: 0 1 auto;
}

#app-shell .top {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100%;
  max-width: 100%;
  min-width: 0;
  justify-self: stretch;
  padding: 0.78rem 1rem;
  min-height: 0;
  gap: 1rem;
  border-radius: 24px;
}

#app-shell .top .subtitle {
  grid-area: auto;
}

.brand-photo {
  height: 172px;
  border-radius: 18px;
  border-color: #d8e1ec;
  box-shadow: 0 16px 38px rgba(31, 47, 69, 0.14);
}

#app-shell .app-brand-lockup .title-logo {
  width: min(760px, 60vw);
  height: 96px;
  max-height: 96px;
  margin: 0;
  filter: none;
  display: block;
  object-fit: contain;
  object-position: left center;
}

#login-shell .auth-top {
  display: flex;
  justify-content: flex-start;
  align-items: center;
  width: 100%;
  max-width: 100%;
  justify-self: stretch;
  padding: 0.78rem 1rem;
  min-height: 0;
  gap: 1rem;
  border-radius: 24px;
}

#login-shell .auth-top .title-logo {
  width: min(760px, 60vw);
  height: 96px;
  max-height: 96px;
  margin: 0;
  filter: none;
  display: block;
  object-fit: contain;
  object-position: left center;
}

.session-bar {
  margin-top: 0;
  display: flex;
  justify-content: flex-end;
  align-items: center;
  align-self: center;
  text-align: right;
  gap: 0.55rem;
  flex: 1 1 auto;
  min-width: 0;
  position: relative;
  z-index: 90;
}

.session-bar .muted {
  font-size: 0.86rem;
  font-weight: 500;
  white-space: nowrap;
}

.app-layout {
  grid-template-columns: minmax(180px, 220px) minmax(0, 1fr);
  gap: 1rem;
}

.panel,
.calendar-filter-panel,
.calendar-surface,
.reports-section,
.students-section,
.users-section,
.management-section,
.schedule-section,
.attendance-section,
.grades-section,
.dashboard-section,
.detail-panel,
.student-detail-section {
  background: var(--panel);
  border: 1px solid var(--edge);
  border-radius: 24px;
  box-shadow: var(--shadow-soft);
}

.panel {
  padding: 1.2rem 1.3rem;
}

.app-sidebar {
  padding: 1rem;
  background: rgba(255, 255, 255, 0.82);
  border-color: rgba(217, 226, 238, 0.95);
  box-shadow: var(--shadow-soft);
  backdrop-filter: blur(14px);
}

.app-sidebar-nav {
  gap: 0.65rem;
}

.tabs,
.subtabs {
  gap: 0.55rem;
}

.tab-btn,
.subtab-btn {
  border: 1px solid var(--edge-strong);
  background: rgba(255, 255, 255, 0.94);
  color: var(--text);
  border-radius: 14px;
  padding: 0.62rem 0.92rem;
  font-weight: 600;
  letter-spacing: -0.01em;
  transition: transform 160ms ease, box-shadow 160ms ease, border-color 160ms ease, background-color 160ms ease;
}

.tab-btn:hover,
.subtab-btn:hover {
  transform: translateY(-1px);
  box-shadow: 0 10px 22px rgba(31, 47, 69, 0.08);
  border-color: #bcc9dc;
}

.app-sidebar-nav .tab-btn {
  padding: 0.78rem 0.9rem;
  border-radius: 16px;
}

.tab-btn.active,
.subtab-btn.active {
  background: linear-gradient(135deg, var(--accent) 0%, var(--accent-strong) 100%);
  border-color: transparent;
  box-shadow: 0 16px 30px rgba(23, 97, 174, 0.24);
  color: #fff;
}

h2 {
  margin-bottom: 0.8rem;
  font-size: clamp(1.7rem, 2vw, 2.15rem);
  letter-spacing: -0.03em;
}

h3 {
  margin-bottom: 0.55rem;
  font-size: 1.22rem;
  letter-spacing: -0.02em;
}

h4 {
  letter-spacing: -0.01em;
}

.muted {
  color: var(--muted);
}

.dashboard-section,
.students-section,
.users-section,
.management-section,
.schedule-section,
.attendance-section,
.grades-section,
.reports-section,
.student-detail-section {
  padding: 1rem 1.05rem;
}

.dashboard-section + .dashboard-section,
.students-section + .students-section,
.users-section + .users-section,
.management-section + .management-section,
.schedule-section + .schedule-section,
.attendance-section + .attendance-section,
.grades-section + .grades-section,
.student-detail-section + .student-detail-section {
  margin-top: 0.75rem;
}

.dashboard-section-overview,
.dashboard-section-student-performance,
.dashboard-section-student-attendance,
.dashboard-section-student-instructional-hours,
.dashboard-section-trending,
.dashboard-section-volume,
.dashboard-section-gpa-trending,
.dashboard-section-instruction-hours-trending,
.dashboard-section-work-distribution,
.management-section-subjects,
.management-section-courses,
.management-section-grade-types,
.management-section-grading-criteria,
.schedule-section-school-year,
.schedule-section-quarters,
.schedule-section-daily-breaks,
.schedule-section-holidays,
.schedule-section-plans,
.attendance-section-tracker,
.attendance-section-filters,
.attendance-section-records,
.grades-section-filters,
.grades-section-entry,
.grades-section-records,
.users-section-form,
.users-section-list,
.students-section-manage,
.student-detail-section-profile,
.student-detail-section-schedule,
.student-detail-section-attendance,
.student-detail-section-hours,
.reports-section,
.calendar-filter-panel,
.calendar-surface,
.calendar-table-wrap {
  background: var(--panel);
  border-color: var(--edge);
}

.kpi-grid {
  gap: 0.9rem;
}

.kpi {
  background: linear-gradient(180deg, #ffffff 0%, #f7fbff 100%);
  border: 1px solid var(--edge);
  border-radius: 22px;
  padding: 0.95rem 1rem;
  text-align: left;
  box-shadow: 0 16px 30px rgba(31, 47, 69, 0.06);
}

.kpi-label {
  color: #73849a;
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.kpi-value {
  margin-top: 0.5rem;
  font-size: 1.55rem;
  letter-spacing: -0.03em;
}

.dashboard-section-overview .kpi-grid {
  gap: 0.65rem;
}

.dashboard-section-header {
  display: flex;
  align-items: start;
  justify-content: space-between;
  gap: 1rem;
}

.dashboard-pill-metric {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 92px;
  padding: 0.45rem 0.75rem;
  border: 1px solid #c7d8ea;
  border-radius: 999px;
  background: #f4f9ff;
  color: var(--accent-strong);
  font-size: 0.95rem;
  font-weight: 700;
  white-space: nowrap;
}

.dashboard-pill-metric.ahead {
  border-color: #b8d5c6;
  background: #edf8f0;
  color: #266b3e;
}

.dashboard-pill-metric.behind {
  border-color: #e6c5b8;
  background: #fff1eb;
  color: #9a4a28;
}

.dashboard-pill-metric.on-pace,
.dashboard-pill-metric.starting {
  border-color: #c7d8ea;
  background: #f4f9ff;
  color: var(--accent-strong);
}

.dashboard-summary-grid,
.dashboard-pace-grid,
.dashboard-chip-grid {
  display: grid;
  gap: 0.75rem;
}

.dashboard-summary-grid,
.dashboard-pace-grid {
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  margin-top: 0.9rem;
}

.dashboard-chip-grid {
  grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
  margin-top: 0.9rem;
}

.dashboard-summary-card,
.dashboard-chip-card {
  background: linear-gradient(180deg, #ffffff 0%, #f8fbff 100%);
  border: 1px solid var(--edge);
  border-radius: 18px;
  padding: 0.85rem 0.95rem;
}

.dashboard-summary-card-tight {
  min-height: 0;
}

.dashboard-visual-summary-grid {
  grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
  align-items: stretch;
}

.dashboard-visual-card {
  --card-accent: #1761ae;
  --card-accent-dark: #0f4f9c;
  --card-accent-soft: rgba(23, 97, 174, 0.12);
  position: relative;
  overflow: hidden;
  min-height: 300px;
  padding: 1.55rem 1.5rem 1.25rem;
  border-color: color-mix(in srgb, var(--card-accent) 20%, #dfe8f3);
  border-radius: 20px;
  background:
    radial-gradient(circle at 22% 18%, var(--card-accent-soft), transparent 22%),
    linear-gradient(180deg, #ffffff 0%, #fbfdff 100%);
  box-shadow:
    0 18px 38px rgba(31, 47, 69, 0.07),
    inset 0 1px 0 rgba(255, 255, 255, 0.9);
}

.dashboard-visual-card::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 4px;
  background: linear-gradient(90deg, var(--card-accent), color-mix(in srgb, var(--card-accent) 72%, #ffffff));
}

.dashboard-visual-card-completion {
  --card-accent: #216ee2;
  --card-accent-dark: #0f58ba;
  --card-accent-soft: rgba(33, 110, 226, 0.13);
}

.dashboard-visual-card-open {
  --card-accent: #2d9f65;
  --card-accent-dark: #187248;
  --card-accent-soft: rgba(45, 159, 101, 0.12);
}

.dashboard-visual-card-pace {
  --card-accent: #8b4be5;
  --card-accent-dark: #52248f;
  --card-accent-soft: rgba(139, 75, 229, 0.13);
}

.dashboard-visual-card-pace.pace-behind {
  --card-accent: #8b4be5;
  --card-accent-dark: #4a257f;
  --card-accent-soft: rgba(139, 75, 229, 0.13);
}

.dashboard-visual-card-pace.pace-ahead,
.dashboard-visual-card-pace.pace-on {
  --card-accent: #2c7be5;
  --card-accent-dark: #105fb9;
  --card-accent-soft: rgba(44, 123, 229, 0.12);
}

.dashboard-visual-card-grades {
  --card-accent: #ea6d0c;
  --card-accent-dark: #c65100;
  --card-accent-soft: rgba(234, 109, 12, 0.11);
}

.dashboard-visual-card-grade-risk {
  --card-accent: #d94b4b;
  --card-accent-dark: #a92f2f;
  --card-accent-soft: rgba(217, 75, 75, 0.12);
}

.dashboard-visual-card-required-subjects {
  --card-accent: #d94b4b;
  --card-accent-dark: #a92f2f;
  --card-accent-soft: rgba(217, 75, 75, 0.12);
}

.dashboard-visual-card-open-classes {
  --card-accent: #e8751a;
  --card-accent-dark: #bd5608;
  --card-accent-soft: rgba(232, 117, 26, 0.12);
}

.dashboard-visual-icon {
  width: 4.25rem;
  height: 4.25rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 1.15rem;
  border: 7px solid #ffffff;
  border-radius: 999px;
  background:
    radial-gradient(circle at 35% 25%, rgba(255, 255, 255, 0.9), transparent 28%),
    color-mix(in srgb, var(--card-accent) 10%, #ffffff);
  color: var(--card-accent);
  box-shadow:
    0 12px 26px var(--card-accent-soft),
    0 0 0 1px color-mix(in srgb, var(--card-accent) 13%, #e5edf7);
}

.dashboard-visual-icon svg,
.dashboard-grade-check svg {
  width: 2rem;
  height: 2rem;
  fill: none;
  stroke: currentColor;
  stroke-width: 2.2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.dashboard-visual-card .dashboard-summary-label {
  color: var(--card-accent);
  font-size: 0.9rem;
  font-weight: 900;
  letter-spacing: 0.04em;
}

.dashboard-visual-card .dashboard-summary-value {
  margin-top: 0.72rem;
  color: var(--card-accent-dark);
  font-size: clamp(3rem, 5.8vw, 4.8rem);
  font-weight: 900;
  line-height: 0.95;
  letter-spacing: -0.04em;
}

.dashboard-visual-card-completion .dashboard-summary-value,
.dashboard-visual-card-open .dashboard-summary-value,
.dashboard-visual-card-open-classes .dashboard-summary-value,
.dashboard-visual-card-grade-risk .dashboard-summary-value,
.dashboard-visual-card-required-subjects .dashboard-summary-value,
.dashboard-visual-card-grades .dashboard-summary-value {
  font-size: clamp(3.65rem, 6.9vw, 5.65rem);
}

.dashboard-visual-card-pace .dashboard-summary-value {
  margin-top: 0.62rem;
  color: #43206f;
  font-size: clamp(1.95rem, 3vw, 2.42rem);
  line-height: 1;
  letter-spacing: -0.035em;
}

.dashboard-visual-card-pace .dashboard-summary-note {
  margin-top: 0.7rem;
  font-size: 0.88rem;
  line-height: 1.35;
}

.dashboard-visual-card .dashboard-summary-note {
  margin-top: 1.25rem;
  color: #596981;
  font-size: 0.98rem;
  line-height: 1.45;
}

.dashboard-visual-progress {
  height: 14px;
  margin-top: 1.35rem;
  overflow: hidden;
  border-radius: 999px;
  background: color-mix(in srgb, var(--card-accent) 12%, #eef3fa);
  box-shadow: inset 0 1px 2px rgba(31, 47, 69, 0.08);
}

.dashboard-visual-progress span {
  display: block;
  width: 0%;
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, var(--card-accent), var(--card-accent-dark));
  box-shadow: 0 8px 16px var(--card-accent-soft);
}

.dashboard-open-mini {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.42rem 0.5rem;
  margin-top: 1.15rem;
}

.dashboard-open-mini button {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.35rem;
  min-width: 0;
  padding: 0.35rem 0.42rem;
  border: 1px solid #e3ebf4;
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.72);
  color: inherit;
  cursor: pointer;
  transition: border-color 160ms ease, box-shadow 160ms ease, transform 160ms ease;
}

.dashboard-open-mini button:hover,
.dashboard-open-mini button:focus-visible {
  border-color: #b8d1ea;
  box-shadow: 0 8px 18px rgba(31, 47, 69, 0.08);
  transform: translateY(-1px);
}

.dashboard-open-mini b {
  color: #22334e;
  font-size: 1rem;
  font-weight: 900;
}

.dashboard-open-mini small {
  color: #66758d;
  font-size: 0.66rem;
  font-weight: 700;
  line-height: 1;
  text-align: right;
}

.dashboard-risk-mini {
  grid-template-columns: 1fr;
}

.dashboard-risk-mini button {
  padding-block: 0.48rem;
}

.dashboard-required-subject-mini {
  display: grid;
  gap: 0.45rem;
  max-height: 5.7rem;
  margin-top: 1.15rem;
  overflow-y: auto;
  padding-right: 0.18rem;
}

.dashboard-required-subject-mini:empty {
  display: none;
}

.dashboard-required-subject-mini button {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  min-width: 0;
  padding: 0.42rem 0.5rem;
  border: 1px solid #e3ebf4;
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.78);
  color: inherit;
  cursor: pointer;
  transition: border-color 160ms ease, box-shadow 160ms ease, transform 160ms ease;
}

.dashboard-required-subject-mini button:hover,
.dashboard-required-subject-mini button:focus-visible {
  border-color: #b8d1ea;
  box-shadow: 0 8px 18px rgba(31, 47, 69, 0.08);
  outline: none;
  transform: translateY(-1px);
}

.dashboard-required-subject-mini b,
.dashboard-required-subject-mini small {
  min-width: 0;
}

.dashboard-required-subject-mini b {
  overflow: hidden;
  color: #22334e;
  font-size: 0.82rem;
  font-weight: 850;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.dashboard-required-subject-mini small {
  color: #66758d;
  font-size: 0.68rem;
  font-weight: 750;
  white-space: nowrap;
}

.dashboard-open-class-list button b {
  font-size: 0.78rem;
}

.dashboard-pace-arc {
  position: relative;
  width: min(214px, 100%);
  height: 118px;
  margin: 0.65rem auto -0.25rem;
}

.dashboard-pace-arc svg {
  display: block;
  width: 100%;
  height: 100%;
  overflow: visible;
}

.dashboard-pace-track,
.dashboard-pace-arc-fill {
  fill: none;
  stroke-width: 17;
  stroke-linecap: round;
}

.dashboard-pace-track {
  stroke: #f0edf7;
}

.dashboard-pace-arc-fill {
  --pace-progress: 0%;
  stroke: var(--card-accent);
  stroke-dasharray: var(--pace-progress) 100;
  filter: drop-shadow(0 8px 12px rgba(139, 75, 229, 0.2));
}

.dashboard-pace-ticks path {
  fill: none;
  stroke: #d6d2e2;
  stroke-width: 2;
  stroke-linecap: round;
}

.dashboard-pace-needle {
  stroke: #43206f;
  stroke-width: 4;
  stroke-linecap: round;
  transform-box: view-box;
  transform-origin: 110px 98px;
  transform: rotate(-42deg);
  filter: drop-shadow(0 5px 8px rgba(67, 32, 111, 0.18));
}

.dashboard-visual-card-pace.pace-on .dashboard-pace-needle {
  transform: rotate(18deg);
}

.dashboard-visual-card-pace.pace-ahead .dashboard-pace-needle {
  transform: rotate(48deg);
}

.dashboard-pace-hub {
  fill: #43206f;
  stroke: #ffffff;
  stroke-width: 2;
}

.dashboard-pace-mini {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0.45rem;
  margin-top: -0.1rem;
  text-align: center;
}

.dashboard-pace-mini b {
  display: block;
  color: #1d2e49;
  font-size: 0.82rem;
  font-weight: 900;
}

.dashboard-pace-mini small {
  color: #66758d;
  font-size: 0.66rem;
}

.dashboard-grade-check {
  width: 4.75rem;
  height: 4.75rem;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 1.55rem auto 0;
  border-radius: 999px;
  background: color-mix(in srgb, var(--card-accent) 10%, #ffffff);
  color: var(--card-accent);
  box-shadow: 0 12px 26px var(--card-accent-soft);
}

.dashboard-summary-label,
.dashboard-chip-label {
  margin: 0;
  color: #73849a;
  font-size: 0.74rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.dashboard-summary-value,
.dashboard-chip-value {
  margin: 0.32rem 0 0;
  font-size: 1.3rem;
  font-weight: 700;
  letter-spacing: -0.03em;
}

.dashboard-summary-note {
  margin: 0.32rem 0 0;
}

.dashboard-detail-toggle-row {
  display: flex;
  justify-content: flex-end;
  margin-top: 0.9rem;
}

.dashboard-detail-toggle {
  min-width: 0;
}

.dashboard-student-breakdown {
  margin-top: 0.9rem;
}

.dashboard-metric-progress {
  margin-top: 0.9rem;
}

.dashboard-section-overview .kpi {
  border-radius: 18px;
  padding: 0.62rem 0.78rem;
  min-height: 0;
}

.dashboard-section-overview .kpi-label {
  font-size: 0.68rem;
  letter-spacing: 0.06em;
}

.dashboard-section-overview .kpi-value {
  margin-top: 0.28rem;
  font-size: 1.08rem;
  line-height: 1.2;
}

.progress-bar {
  height: 12px;
  border: 0;
  background: #e8eef6;
}

.progress-fill {
  background: linear-gradient(90deg, #5aad48 0%, #1761ae 100%);
}

input:not([type="checkbox"]):not([type="radio"]),
select,
.multi-select-dropdown,
.multi-select-dropdown summary {
  border-color: var(--edge-strong);
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.95);
  color: var(--text);
}

input:not([type="checkbox"]):not([type="radio"]),
select {
  padding: 0.62rem 0.78rem;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.6);
}

input:not([type="checkbox"]):not([type="radio"]):focus,
select:focus,
.multi-select-dropdown[open],
button:focus-visible {
  outline: none;
  border-color: #9db4d1;
  box-shadow: 0 0 0 4px rgba(103, 143, 196, 0.16);
}

button {
  border-radius: 14px;
  padding: 0.62rem 0.96rem;
  background: linear-gradient(135deg, var(--accent) 0%, var(--accent-strong) 100%);
  box-shadow: 0 12px 24px rgba(23, 97, 174, 0.22);
  font-weight: 600;
  transition: transform 160ms ease, box-shadow 160ms ease, filter 160ms ease;
}

button:hover {
  transform: translateY(-1px);
  filter: none;
  box-shadow: 0 16px 30px rgba(23, 97, 174, 0.25);
}

button.secondary-btn {
  background: linear-gradient(135deg, #6d7d92 0%, #55657c 100%);
  box-shadow: 0 12px 24px rgba(85, 101, 124, 0.22);
}

table {
  border-collapse: separate;
  border-spacing: 0;
}

th,
td {
  padding: 0.8rem 0.75rem;
  border-bottom: 1px solid #e8eef5;
  vertical-align: middle;
}

th {
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: #6c7b8f;
  background: #f8fbfe;
}

thead th:first-child {
  border-top-left-radius: 14px;
}

thead th:last-child {
  border-top-right-radius: 14px;
}

tbody tr {
  background: rgba(255, 255, 255, 0.9);
}

tbody tr:nth-child(even) {
  background: rgba(247, 250, 254, 0.95);
}

tbody tr:hover {
  background: #f3f7fc;
}

.table-wrap {
  border: 1px solid #e5ecf5;
  border-radius: 18px;
  background: #fff;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.8);
}

.table-action-row {
  gap: 0.5rem;
}

.table-action-row button,
.students-toolbar button,
.users-toolbar button,
.students-detail-toolbar button {
  box-shadow: none;
}

.chart-wrap {
  background: linear-gradient(180deg, #ffffff 0%, #f8fbff 100%);
  border-color: #e0e9f4;
  border-radius: 18px;
  padding: 0.7rem 0.75rem 0.4rem;
}

.calendar-weekdays div {
  border: 1px solid #e1e9f3;
  background: #f7fbff;
  color: #5c6f86;
}

.calendar-day {
  border: 1px solid #e3eaf3;
  border-radius: 18px;
  background: #fff;
  padding: 0.55rem;
}

.calendar-day.muted-day {
  background: #f3f6fa;
  opacity: 0.82;
}

.calendar-day-item {
  border: 1px solid #e5ecf5;
  border-radius: 12px;
  background: #f8fbff;
  padding: 0.32rem 0.42rem;
}

.detail-panel {
  padding: 0.95rem;
}

.students-toolbar,
.students-detail-toolbar,
.users-toolbar {
  margin-bottom: 0.85rem;
}

.students-helper-text {
  margin-bottom: 0.95rem;
  padding: 0.82rem 0.95rem;
  border: 1px solid #e4ebf4;
  border-radius: 16px;
  background: linear-gradient(180deg, #ffffff 0%, #f8fbfe 100%);
}

.reports-filter-group,
.grading-criteria-card {
  background: linear-gradient(180deg, #ffffff 0%, #f8fbfe 100%);
  border-color: #e3eaf3;
  border-radius: 18px;
}

.status-text,
.callout {
  border-radius: 16px;
}

@media (max-width: 980px) {
  .top {
    padding: 0.68rem 0.9rem 0.58rem;
  }

  #app-shell .top {
    padding: 0.58rem 0.75rem;
  }

  #app-shell .app-brand-lockup .title-logo {
    width: min(640px, 72vw);
    height: 88px;
    max-height: 88px;
  }

  #login-shell .auth-top {
    padding: 0.58rem 0.75rem;
  }

  #login-shell .auth-top .title-logo {
    width: min(640px, 72vw);
    height: 88px;
    max-height: 88px;
  }
}

@media (max-width: 640px) {
  .top {
    padding: 0.72rem 0.82rem;
  }

  #app-shell .top {
    flex-direction: column;
    align-items: flex-start;
    padding: 0.65rem 0.75rem;
  }

  .brand-photo {
    width: min(150px, 44vw);
    height: auto;
    justify-self: center;
  }

  #app-shell .app-brand-lockup .title-logo {
    width: min(100%, 440px);
    height: 78px;
    max-height: 78px;
    margin: 0;
  }

  #login-shell .auth-top {
    padding: 0.65rem 0.75rem;
  }

  #login-shell .auth-top .title-logo {
    width: min(100%, 440px);
    height: 78px;
    max-height: 78px;
    margin: 0;
  }

  .session-bar {
    width: 100%;
    justify-content: flex-start;
    text-align: left;
    gap: 0.45rem;
  }

  .app-sidebar {
    backdrop-filter: none;
  }

  .panel {
    padding: 1rem;
  }
}

.account-menu-shell {
  position: relative;
  isolation: isolate;
  z-index: 100;
}

.account-menu-trigger {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  padding: 0.6rem 0.85rem;
  border-radius: 999px;
  border: 1px solid #b7c9de;
  background: linear-gradient(180deg, #f7fbff 0%, #eaf2fb 100%);
  box-shadow: 0 12px 28px rgba(31, 47, 69, 0.08);
  color: #20344f;
}

.account-menu-trigger .muted {
  margin: 0;
  color: #20344f;
  font-weight: 600;
  opacity: 1;
}

.account-menu-caret {
  font-size: 0.82rem;
  color: var(--muted);
}

.account-menu {
  position: absolute;
  top: calc(100% + 0.45rem);
  right: 0;
  min-width: 200px;
  display: grid;
  gap: 0.24rem;
  padding: 0.35rem;
  border: 1px solid #c2d1e2;
  border-radius: 10px;
  background: #ffffff;
  box-shadow: 0 18px 36px rgba(31, 47, 69, 0.14);
  z-index: 110;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}

.account-menu button,
.account-menu a {
  width: 100%;
  justify-content: flex-start;
  text-align: left;
  min-height: 32px;
  border-radius: 8px;
  border-color: transparent;
  background: transparent;
  color: #20344f;
  display: inline-flex;
  align-items: center;
  font-size: 0.86rem;
  font-weight: 500;
  padding: 0.42rem 0.58rem;
  box-shadow: none;
  text-decoration: none;
}

.account-menu button:hover,
.account-menu a:hover {
  background: #e5eef9;
  transform: none;
  box-shadow: none;
}

.alerts-menu-shell {
  position: relative;
  isolation: isolate;
  z-index: 105;
}

.alerts-count-badge {
  position: absolute;
  top: 3px;
  right: 3px;
  min-width: 18px;
  height: 18px;
  padding: 0 0.3rem;
  border: 2px solid #fff;
  border-radius: 999px;
  background: #d64242;
  color: #fff;
  font-size: 0.68rem;
  font-weight: 700;
  line-height: 14px;
  text-align: center;
}

.alerts-menu {
  position: absolute;
  top: calc(100% + 0.5rem);
  right: 0;
  width: min(390px, calc(100vw - 2rem));
  max-width: calc(100vw - 2rem);
  max-height: min(560px, calc(100vh - 7rem));
  overflow-x: hidden;
  overflow-y: auto;
  padding: 0.65rem;
  border: 1px solid #c2d1e2;
  border-radius: 18px;
  background: #fff;
  box-shadow: 0 24px 50px rgba(31, 47, 69, 0.18);
  z-index: 120;
}

.alerts-menu-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.8rem;
  padding: 0.2rem 0.25rem 0.65rem;
}

.alerts-menu-list {
  display: grid;
  gap: 0.45rem;
}

.alert-result {
  width: 100%;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 0.25rem;
  align-items: start;
  padding: 0.7rem 0.75rem;
  border: 1px solid #d7e3f1;
  border-left-width: 4px;
  border-radius: 12px;
  background: #f8fbff;
  color: #10213f;
  box-shadow: none;
  text-align: left;
}

.alert-result:hover {
  background: #eef6ff;
  transform: none;
}

.alert-severity-critical {
  border-left-color: #d64242;
}

.alert-severity-warning {
  border-left-color: #d68a21;
}

.alert-severity-info {
  border-left-color: #2166bd;
}

.alert-result-label {
  color: #175db3;
  font-size: 0.68rem;
  font-weight: 800;
  letter-spacing: 0;
  text-transform: uppercase;
}

.alert-result-title {
  min-width: 0;
  overflow-wrap: anywhere;
  font-weight: 700;
  line-height: 1.2;
}

.alert-result-detail {
  min-width: 0;
  color: #4f6079;
  font-size: 0.78rem;
  line-height: 1.35;
  overflow-wrap: anywhere;
}

.alert-result-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
  margin-top: 0.2rem;
}

.alert-result-actions button {
  min-height: 30px;
  padding: 0.36rem 0.62rem;
  border-radius: 999px;
  font-size: 0.75rem;
  font-weight: 700;
  box-shadow: none;
}

.alert-result-open {
  border-color: #b8cee8;
  background: #e8f2ff;
  color: #175db3;
}

.alert-result-ack {
  border-color: #d2dce9;
  background: #fff;
  color: #4f6079;
}

.alert-result-open:hover,
.alert-result-ack:hover {
  transform: none;
  box-shadow: none;
}

.alerts-empty {
  display: grid;
  gap: 0.2rem;
  padding: 1rem;
  border: 1px solid #d7e3f1;
  border-radius: 12px;
  background: #f8fbff;
}

.account-modal {
  position: fixed;
  inset: 0;
  z-index: 220;
}

.account-modal-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(18, 31, 49, 0.38);
  backdrop-filter: blur(2px);
}

.account-modal-panel {
  position: relative;
  width: min(960px, calc(100vw - 2rem));
  max-height: calc(100vh - 2rem);
  margin: 1rem auto;
  overflow: auto;
  padding: 0;
  border: 1px solid #dce6f2;
  border-radius: 14px;
  background: #ffffff;
  z-index: 1;
}

.account-password-modal-panel {
  width: min(760px, calc(100vw - 2rem));
}

.account-upgrade-modal-panel {
  width: min(920px, calc(100vw - 2rem));
}

.account-options-modal-panel {
  width: min(720px, calc(100vw - 2rem));
}

.help-center-modal-panel {
  width: min(1040px, calc(100vw - 2rem));
}

.account-modal-header {
  display: flex;
  align-items: start;
  justify-content: space-between;
  gap: 1rem;
  padding: 0.95rem 1rem;
  border-bottom: 1px solid #e3eaf4;
  background: #f8fbff;
}

.account-modal-header h2 {
  margin: 0;
  color: #17243d;
  font-size: 1.08rem;
  line-height: 1.2;
}

.account-modal-header .muted {
  margin: 0.22rem 0 0;
}

.account-modal-header-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 0.45rem;
}

.account-modal-close-btn {
  min-height: 32px;
  padding: 0.34rem 0.62rem;
  border-radius: 8px;
  box-shadow: none;
  font-size: 0.84rem;
}

.help-center-popout-btn {
  background: #ffffff;
  color: #155da8;
  border: 1px solid #bdd4ee;
}

.account-modal-body {
  display: grid;
  gap: 0.75rem;
  padding: 0.9rem;
}

.help-center-modal-body {
  grid-template-columns: minmax(220px, 0.36fr) minmax(0, 1fr);
  align-items: start;
  gap: 0;
  padding: 0;
}

.help-topic-list {
  display: grid;
  gap: 0.9rem;
  max-height: calc(100vh - 7.3rem);
  overflow: auto;
  padding: 0.9rem;
  border-right: 1px solid #e3eaf4;
  background: #f8fbff;
}

.help-topic-group {
  display: grid;
  gap: 0.38rem;
}

.help-topic-group h3 {
  margin: 0;
  color: #5c6f89;
  font-size: 0.72rem;
  font-weight: 900;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.help-topic-btn {
  display: grid;
  gap: 0.18rem;
  width: 100%;
  min-height: 0;
  padding: 0.56rem 0.62rem;
  border: 1px solid #dce6f2;
  border-radius: 10px;
  background: #ffffff;
  color: #17243d;
  box-shadow: none;
  text-align: left;
}

.help-topic-btn strong {
  font-size: 0.86rem;
  line-height: 1.2;
}

.help-topic-btn span {
  color: #5f6f87;
  font-size: 0.76rem;
  line-height: 1.25;
}

.help-topic-btn.active,
.help-topic-btn:hover,
.help-topic-btn:focus-visible {
  border-color: #98b9e8;
  background: #edf5ff;
  color: #0d55c7;
}

.help-article-wrap {
  max-height: calc(100vh - 7.3rem);
  overflow: auto;
  padding: 1rem;
}

.help-article {
  display: grid;
  gap: 0.75rem;
}

.help-article-category {
  margin: 0;
  color: #557092;
  font-size: 0.72rem;
  font-weight: 900;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.help-article h3 {
  margin: 0;
  color: #17243d;
  font-size: 1.28rem;
  line-height: 1.15;
}

.help-article-summary {
  margin: 0;
  max-width: 56rem;
  color: #4d627c;
  font-size: 0.94rem;
  line-height: 1.45;
}

.help-article-section {
  display: grid;
  gap: 0.38rem;
  padding: 0.8rem;
  border: 1px solid #dfe8f4;
  border-radius: 12px;
  background: #ffffff;
}

.help-article-section h4 {
  margin: 0;
  color: #17243d;
  font-size: 0.94rem;
}

.help-article-section ul {
  display: grid;
  gap: 0.38rem;
  margin: 0;
  padding-left: 1.1rem;
  color: #3f5069;
  font-size: 0.88rem;
  line-height: 1.42;
}

.help-article-rich {
  display: grid;
  gap: 0.72rem;
  color: #3f5069;
  font-size: 0.9rem;
  line-height: 1.5;
}

.help-article-rich p,
.help-article-rich ol,
.help-article-rich ul {
  margin: 0;
}

.help-article-rich ol,
.help-article-rich ul {
  padding-left: 1.25rem;
}

.help-article-rich li + li {
  margin-top: 0.28rem;
}

.help-article-rich h4 {
  margin: 0;
  color: #17243d;
  font-size: 1rem;
}

.help-article-rich h5 {
  margin: 0.12rem 0 0;
  color: #24405f;
  font-size: 0.92rem;
}

.help-article-rich strong {
  color: #17243d;
}

.help-article-rich hr {
  width: 100%;
  margin: 0.1rem 0;
  border: 0;
  border-top: 1px solid #e3eaf4;
}

.help-article-rich-section {
  gap: 0.52rem;
}

.help-open-page-btn {
  justify-self: start;
  min-height: 34px;
  padding: 0.42rem 0.72rem;
  border-radius: 10px;
  box-shadow: none;
  font-size: 0.84rem;
}

.account-overview-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  align-items: start;
  gap: 0.75rem;
}

.account-summary-strip {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) minmax(320px, 0.9fr);
  align-items: center;
  gap: 0.85rem;
  padding: 0.85rem;
  border: 1px solid #dce6f2;
  border-radius: 8px;
  background: #f8fbff;
}

.account-summary-avatar {
  width: 58px;
  height: 58px;
  box-shadow: none;
}

.account-summary-copy {
  min-width: 0;
}

.account-summary-copy h3 {
  margin: 0.06rem 0;
  color: #17243d;
  font-size: 1.08rem;
  line-height: 1.2;
}

.account-summary-copy .muted {
  margin: 0;
}

.account-summary-metrics {
  display: grid;
  grid-template-columns: minmax(120px, 1.1fr) repeat(2, minmax(96px, 0.9fr));
  gap: 0.42rem;
}

.account-summary-metrics span {
  display: grid;
  gap: 0.18rem;
  min-width: 0;
  padding: 0.48rem 0.55rem;
  border: 1px solid #dce6f2;
  border-radius: 8px;
  background: #ffffff;
}

.account-summary-metrics small {
  color: #65758f;
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.account-summary-metrics strong {
  min-width: 0;
  color: #17243d;
  font-size: 0.86rem;
  overflow-wrap: anywhere;
  white-space: normal;
}

.account-summary-metrics .account-status-pill {
  white-space: nowrap;
}

#school-day-form #school-day-course-dropdown[open] .checklist-vertical {
  width: min(540px, 78vw);
  max-width: min(540px, 78vw);
  max-height: 320px;
  padding: 0.45rem;
}

#school-day-form #school-day-course-dropdown[open] .checklist-row {
  grid-template-columns: 14px minmax(0, 1fr);
  align-items: start;
  height: auto;
  min-height: 0;
  padding: 0.28rem 0;
}

#school-day-form #school-day-course-dropdown[open] .checklist-row label {
  white-space: normal;
}

#school-day-form #school-day-course-dropdown[open] .checklist-group-label {
  margin: 0.5rem 0 0.2rem;
}

#school-day-form #school-day-course-dropdown[open] .checklist-group-label:first-child,
#school-day-form #school-day-course-dropdown[open] .checklist-row + .checklist-group-label {
  margin-top: 0.65rem;
}

#app-shell .school-day-scheduled-option {
  display: grid;
  gap: 0.14rem;
  min-width: 0;
}

#app-shell .school-day-scheduled-option strong {
  color: #17243d;
  font-size: 0.88rem;
  font-weight: 700;
  line-height: 1.22;
}

#app-shell .school-day-scheduled-option span {
  color: #5b6a80;
  font-size: 0.74rem;
  font-weight: 600;
  line-height: 1.25;
}

#app-shell .school-day-scheduled-option .subject-required-badge {
  display: inline-flex;
  justify-self: start;
  margin: 0.05rem 0;
}

.account-card {
  padding: 0.9rem;
  border: 1px solid #dce6f2;
  border-radius: 8px;
  background: #ffffff;
}

.account-card-profile {
  background: #ffffff;
}

.account-card-subscription {
  background: #ffffff;
}

.account-card-actions {
  background: #ffffff;
}

.account-card-history {
  background: #ffffff;
}

.account-card-full {
  grid-column: 1 / -1;
}

.account-card-heading {
  margin-bottom: 0.7rem;
}

.account-card-heading h3,
.account-plan-name {
  margin: 0;
  color: #17243d;
  line-height: 1.2;
}

.account-card-heading .muted,
.account-plan-meta,
.account-usage-note {
  margin: 0.2rem 0 0;
}

.account-profile-photo-row {
  display: grid;
  grid-template-columns: 64px minmax(0, 1fr);
  gap: 0.75rem;
  align-items: center;
  margin: 0.2rem 0 0.9rem;
}

.account-profile-photo-preview {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 64px;
  height: 64px;
  border-radius: 50%;
  color: #fff;
  background: linear-gradient(145deg, #2457a6, #6faf3a);
  background-position: center;
  background-size: cover;
  font-weight: 800;
  box-shadow: 0 10px 24px rgba(36, 87, 166, 0.2);
}

.account-profile-photo-preview.has-profile-photo {
  border: 2px solid #fff;
  background-color: #e7eef8;
}

.account-profile-photo-actions {
  display: grid;
  gap: 0.28rem;
}

.account-detail-list {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.5rem;
  margin: 0;
}

.account-detail-list div {
  min-width: 0;
  padding: 0.44rem 0.5rem;
  border: 1px solid #edf2f8;
  border-radius: 8px;
  background: #f9fbfe;
}

.account-detail-list dt {
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  color: var(--muted);
}

.account-detail-list dd {
  margin: 0.2rem 0 0;
  font-weight: 600;
  color: var(--ink);
  overflow-wrap: anywhere;
}

.account-inline-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.42rem;
  margin-top: 0.75rem;
}

.account-inline-actions button,
.account-option-tile button,
.account-upgrade-select-btn {
  min-height: 32px;
  padding: 0.36rem 0.62rem;
  border-radius: 8px;
  box-shadow: none;
  font-size: 0.84rem;
}

.account-plan-banner {
  display: grid;
  gap: 0.55rem;
  padding: 0.7rem;
  border: 1px solid #dce6f2;
  border-radius: 8px;
  background: #f8fbff;
  margin-bottom: 0.7rem;
}

.account-plan-title-row {
  display: flex;
  align-items: start;
  justify-content: space-between;
  gap: 0.75rem;
}

.account-status-pill {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 1.45rem;
  width: fit-content;
  max-width: 100%;
  padding: 0.12rem 0.5rem;
  border-radius: 999px;
  font-size: 0.75rem;
  font-weight: 800;
  line-height: 1;
  white-space: nowrap;
}

.account-status-pill.is-good {
  background: #e7f5ec;
  color: #24613c;
}

.account-status-pill.is-warning {
  background: #fff4d9;
  color: #815900;
}

.account-status-pill.is-danger {
  background: #fff1f1;
  color: #a33a3a;
}

.account-status-pill.is-neutral {
  background: #edf3fa;
  color: #526179;
}

.account-usage-meter {
  height: 0.44rem;
  border-radius: 999px;
  background: #e6eef8;
  overflow: hidden;
}

.account-usage-meter span {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: #1f66bd;
}

.account-activity-grid,
.account-upgrade-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.75rem;
}

.account-mini-heading {
  margin: 0 0 0.55rem;
  font-size: 0.85rem;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  color: var(--muted);
}

.account-activity-list,
.account-feature-list {
  margin: 0;
  padding: 0;
  list-style: none;
}

.account-activity-list li {
  margin: 0.35rem 0;
  padding: 0.48rem 0.55rem;
  border: 1px solid #edf2f8;
  border-radius: 8px;
  background: #f9fbfe;
  color: var(--ink);
}

.account-feature-list {
  padding-left: 1.05rem;
  list-style: disc;
}

.account-feature-list li {
  margin: 0.28rem 0;
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--ink);
  line-height: 1.32;
}

.account-activity-list li span {
  display: block;
  color: var(--muted);
  font-size: 0.9rem;
}

.account-upgrade-option {
  --upgrade-accent: #1f66bd;
  --upgrade-soft: #eef6ff;
  display: grid;
  align-content: start;
  gap: 0.72rem;
  min-height: 100%;
  padding: 0;
  border: 1px solid #cfddec;
  border-radius: 14px;
  border-top: 4px solid var(--upgrade-accent);
  background: linear-gradient(180deg, #ffffff 0%, #f7fbff 100%);
  box-shadow: 0 14px 30px rgba(31, 47, 69, 0.08), inset 0 1px 0 rgba(255, 255, 255, 0.75);
  overflow: hidden;
}

.account-upgrade-option.is-growth {
  --upgrade-accent: #1f66bd;
  --upgrade-soft: #edf5ff;
}

.account-upgrade-option.is-coop {
  --upgrade-accent: #2f8c65;
  --upgrade-soft: #edf8f2;
}

.account-upgrade-card-header {
  display: flex;
  align-items: start;
  justify-content: space-between;
  gap: 0.85rem;
  padding: 0.82rem 0.9rem;
  border-bottom: 1px solid #dfe8f3;
  background: var(--upgrade-soft);
}

.account-upgrade-card-header .account-mini-heading {
  margin-bottom: 0.28rem;
}

.account-upgrade-option h4 {
  color: #17243d;
  font-size: 1rem;
  line-height: 1.2;
}

.account-upgrade-option h4,
.account-upgrade-price {
  margin: 0;
}

.account-upgrade-price {
  display: grid;
  justify-items: end;
  margin-top: 0;
  color: var(--upgrade-accent);
  font-size: 1.12rem;
  font-weight: 700;
  line-height: 1.05;
  white-space: nowrap;
}

.account-upgrade-price span {
  color: #526179;
  font-size: 0.76rem;
  font-weight: 700;
}

.account-upgrade-description,
.account-upgrade-option .muted {
  margin: 0;
  padding: 0 0.9rem;
  color: #526179;
  line-height: 1.35;
}

.account-upgrade-option .account-plan-meta {
  margin: 0;
  line-height: 1.35;
}

.account-upgrade-meta-row {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.45rem;
  padding: 0 0.9rem;
}

.account-upgrade-meta-row span {
  display: grid;
  gap: 0.16rem;
  padding: 0.48rem 0.55rem;
  border: 1px solid #dfe8f3;
  border-radius: 8px;
  background: #ffffff;
}

.account-upgrade-meta-row small {
  color: #65758f;
  font-size: 0.68rem;
  font-weight: 800;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.account-upgrade-meta-row strong {
  color: #17243d;
  font-size: 0.86rem;
}

.account-upgrade-option .account-feature-list {
  margin: 0;
  padding: 0 0.9rem 0 1.95rem;
}

.account-upgrade-option .account-inline-actions {
  margin-top: 0;
  padding: 0 0.9rem 0.9rem;
}

.account-upgrade-option .account-upgrade-select-btn {
  min-height: 34px;
  padding: 0.42rem 0.78rem;
  border-radius: 10px;
  box-shadow: 0 10px 22px rgba(19, 84, 155, 0.16);
  font-weight: 700;
}

.account-lifecycle-note {
  padding: 0.62rem 0.7rem;
  border: 1px solid #dce6f2;
  border-radius: 8px;
  background: #f8fbff;
  color: #526179;
  font-size: 0.9rem;
  line-height: 1.35;
}

.account-option-grid {
  display: grid;
  gap: 0.6rem;
  margin-top: 0.75rem;
}

.account-option-tile {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 0.75rem;
  padding: 0.7rem;
  border: 1px solid #dce6f2;
  border-radius: 8px;
  background: #ffffff;
}

.account-option-tile h4 {
  margin: 0;
  color: #17243d;
  line-height: 1.2;
}

.account-option-tile .muted {
  margin: 0.2rem 0 0;
}

.account-password-form {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0.75rem;
  margin: 0;
  padding: 0.9rem;
}

.account-password-form > label {
  display: grid;
  gap: 0.5rem;
  font-weight: 600;
  color: var(--ink);
}

.account-password-form input {
  min-height: 38px;
  padding: 0.55rem 0.72rem;
  border-radius: 8px;
}

.account-password-form .account-inline-actions {
  grid-column: 1 / -1;
  flex-wrap: nowrap;
  align-items: center;
  gap: 0.75rem;
  margin-top: 0.5rem;
}

@media (max-width: 980px) {
  .account-summary-strip {
    grid-template-columns: auto minmax(0, 1fr);
  }

  .account-summary-metrics {
    grid-column: 1 / -1;
  }

  .account-overview-grid,
  .account-activity-grid,
  .account-upgrade-grid,
  .account-detail-list,
  .account-password-form {
    grid-template-columns: 1fr;
  }

  .account-password-form .account-inline-actions {
    flex-wrap: wrap;
  }

  .account-option-tile {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 640px) {
  .account-menu {
    right: auto;
    left: 0;
    min-width: min(240px, calc(100vw - 2rem));
  }

  .account-menu-trigger {
    width: 100%;
    justify-content: space-between;
  }

  .account-modal-panel {
    width: calc(100vw - 1rem);
    margin: 0.5rem auto;
    max-height: calc(100vh - 1rem);
  }

  .account-modal-header {
    flex-direction: column;
  }

  .help-center-modal-body {
    grid-template-columns: 1fr;
  }

  .help-topic-list,
  .help-article-wrap {
    max-height: none;
  }

  .help-topic-list {
    border-right: 0;
    border-bottom: 1px solid #e3eaf4;
  }

  .account-summary-strip {
    grid-template-columns: 1fr;
  }

  .account-summary-metrics {
    grid-template-columns: 1fr;
  }

  .account-plan-title-row {
    display: grid;
  }

  .account-profile-photo-row {
    grid-template-columns: 1fr;
  }
}

/* App interface shell branch: final overrides for the new navigation frame. */
#app-shell {
  width: 100%;
  min-height: 100vh;
  margin: 0;
  gap: 0;
  background: #ffffff;
}

#app-shell .app-topbar {
  position: sticky;
  top: 0;
  z-index: 120;
  display: grid;
  grid-template-columns: 285px minmax(280px, 520px) 1fr;
  grid-template-areas: "brand search session";
  align-items: center;
  gap: 1.5rem;
  width: 100%;
  min-height: 96px;
  padding: 1rem 1.7rem;
  border: 0;
  border-bottom: 1px solid #e7edf5;
  border-radius: 0;
  background: #ffffff;
  box-shadow: none;
  backdrop-filter: blur(14px);
}

#app-shell .app-topbar .app-brand-lockup {
  grid-area: brand;
  display: flex;
  min-width: 0;
}

#app-shell .app-topbar .title-logo {
  width: 230px;
  height: auto;
  max-height: 72px;
  margin: 0;
  object-fit: contain;
  object-position: left center;
}

#app-shell .app-global-search {
  position: relative;
  grid-area: search;
  display: flex;
  align-items: center;
  gap: 0.7rem;
  min-height: 54px;
  margin: 0;
  padding: 0 0.75rem 0 1rem;
  border: 1px solid #d9e3ef;
  border-radius: 12px;
  background: #fff;
  box-shadow: 0 8px 24px rgba(22, 56, 95, 0.04);
}

#app-shell .app-global-search img {
  width: 21px;
  height: 21px;
  opacity: 0.72;
}

#app-shell .app-global-search input {
  min-width: 0;
  width: 100%;
  border: 0;
  outline: 0;
  padding: 0;
  color: #17243d;
  background: transparent;
  font: inherit;
  font-size: 0.98rem;
}

#app-shell .app-global-search kbd {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 52px;
  height: 28px;
  padding: 0 0.45rem;
  border: 1px solid #d7e0ea;
  border-radius: 8px;
  color: #53647b;
  background: #fbfdff;
  font-family: inherit;
  font-size: 0.82rem;
}

#app-shell .global-search-results {
  position: absolute;
  top: calc(100% + 0.45rem);
  left: 0;
  right: 0;
  z-index: 140;
  display: grid;
  gap: 0.35rem;
  max-height: min(420px, calc(100vh - 7rem));
  overflow: auto;
  padding: 0.45rem;
  border: 1px solid #c9d7e8;
  border-radius: 14px;
  background: #ffffff;
  box-shadow: 0 22px 44px rgba(31, 47, 69, 0.16);
}

#app-shell .global-search-result {
  display: grid;
  grid-template-columns: 88px minmax(0, 1fr) max-content;
  align-items: center;
  column-gap: 0.9rem;
  width: 100%;
  padding: 0.65rem 0.7rem;
  border: 0;
  border-radius: 10px;
  background: transparent;
  color: #17243d;
  text-align: left;
  box-shadow: none;
}

#app-shell .global-search-result:hover,
#app-shell .global-search-result.active {
  background: #eef5ff;
  transform: none;
}

#app-shell .global-search-result-kind {
  color: #2457a6;
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  overflow-wrap: anywhere;
}

#app-shell .global-search-result-copy {
  display: grid;
  gap: 0.12rem;
  min-width: 0;
}

#app-shell .global-search-result-copy strong,
#app-shell .global-search-result-copy span {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

#app-shell .global-search-result-copy span,
#app-shell .global-search-result-action {
  color: #65758f;
  font-size: 0.82rem;
  font-weight: 500;
}

#app-shell .sidebar-year-reference {
  margin: 0.45rem 0 0;
  font-size: 0.76rem;
  line-height: 1.25;
}

#app-shell .sidebar-year-reference.is-live {
  color: #25633d;
  font-weight: 700;
}

#app-shell .app-topbar .session-bar {
  grid-area: session;
  justify-content: flex-end;
  margin: 0;
  gap: 1rem;
}

#app-shell .app-icon-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 42px;
  height: 42px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: transparent;
  box-shadow: none;
}

#app-shell .app-icon-button:hover {
  background: #edf4ff;
  transform: none;
}

#app-shell .app-icon-button img {
  width: 23px;
  height: 23px;
}

#app-shell .app-topbar .account-menu-trigger {
  display: grid;
  grid-template-columns: 48px max-content 18px;
  align-items: center;
  gap: 0.75rem;
  min-height: 56px;
  padding: 0;
  border: 0;
  background: transparent;
  box-shadow: none;
}

#app-shell .app-topbar .account-menu-trigger:hover {
  transform: none;
}

#app-shell .account-avatar {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 46px;
  height: 46px;
  border-radius: 50%;
  color: #fff;
  background: linear-gradient(145deg, #2457a6, #6faf3a);
  background-position: center;
  background-size: cover;
  font-weight: 800;
  box-shadow: 0 10px 24px rgba(36, 87, 166, 0.22);
  overflow: hidden;
}

#app-shell .account-avatar.has-profile-photo {
  border: 2px solid #ffffff;
  background-color: #e7eef8;
  box-shadow: 0 10px 24px rgba(36, 87, 166, 0.24);
}

#app-shell .account-menu-copy {
  display: grid;
  gap: 0.1rem;
  text-align: left;
  line-height: 1.15;
}

#app-shell #session-summary {
  color: #17243d;
  font-weight: 800;
  white-space: nowrap;
}

#app-shell .account-menu-role {
  color: #65758f;
  font-size: 0.88rem;
  font-weight: 500;
}

#app-shell .account-menu-caret {
  width: 17px;
  height: 17px;
  opacity: 0.85;
}

#app-shell .app-layout {
  display: grid;
  grid-template-columns: 232px minmax(0, 1fr);
  gap: 0;
  align-items: start;
}

#app-shell .app-sidebar {
  align-self: stretch;
  min-height: calc(100vh - 96px);
  padding: 1.35rem 1rem;
  position: sticky;
  top: 96px;
  border: 0;
  border-right: 1px solid #e7edf5;
  border-radius: 0;
  background: #ffffff;
  box-shadow: none;
  backdrop-filter: none;
}

#app-shell .app-sidebar-nav {
  display: grid;
  gap: 0.45rem;
}

#app-shell .app-sidebar-nav .tab-btn {
  width: 100%;
  display: grid;
  grid-template-columns: 26px 1fr;
  align-items: center;
  gap: 0.72rem;
  min-height: 50px;
  padding: 0.7rem 0.95rem;
  border: 0;
  border-radius: 12px;
  background: transparent;
  color: #55637b;
  text-align: left;
  font-weight: 500;
  box-shadow: none;
}

#app-shell .app-sidebar-nav .tab-btn img {
  width: 22px;
  height: 22px;
  opacity: 0.8;
}

#app-shell .app-sidebar-nav .tab-btn:hover {
  background: #edf4ff;
  color: #0d55c7;
  transform: none;
}

#app-shell .app-sidebar-nav .tab-btn.active {
  color: #fff;
  background: linear-gradient(135deg, #1d62d1, #0d55c7);
  box-shadow: 0 16px 28px rgba(29, 98, 209, 0.22);
}

#app-shell .app-sidebar-nav .tab-btn.active img {
  filter: brightness(0) invert(1);
  opacity: 1;
}

#app-shell .sidebar-support-card {
  display: grid;
  gap: 0.35rem;
  margin-top: 1rem;
  padding: 1rem;
  border: 1px solid #e0e8f2;
  border-radius: 14px;
  background: #fff;
  box-shadow: 0 12px 28px rgba(30, 54, 83, 0.05);
}

#app-shell button.sidebar-support-card {
  width: 100%;
  min-height: 0;
  color: inherit;
  box-shadow: 0 12px 28px rgba(30, 54, 83, 0.05);
  text-align: left;
}

#app-shell button.sidebar-support-card:hover,
#app-shell button.sidebar-support-card:focus-visible {
  border-color: #98b9e8;
  background: #edf5ff;
  transform: none;
}

#app-shell .sidebar-year-card {
  gap: 0.45rem;
  margin-top: 4.5rem;
}

#app-shell .sidebar-year-card label {
  color: #5f6f87;
  font-size: 0.82rem;
  font-weight: 600;
  line-height: 1.2;
}

#app-shell .sidebar-year-card select {
  width: 100%;
  min-height: 34px;
  border-color: #cbd8ea;
  border-radius: 10px;
  color: #17243d;
  background: #ffffff;
  font-size: 0.9rem;
  font-weight: 600;
}

#app-shell .sidebar-support-card span {
  color: #5f6f87;
  font-size: 0.88rem;
}

#app-shell .sidebar-support-card strong {
  color: #17243d;
  font-size: 0.98rem;
}

#app-shell .app-main {
  min-width: 0;
  display: grid;
  gap: 1rem;
  padding: 2rem;
  background: #ffffff;
}

#app-shell .tab-panel.panel {
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  padding: 0;
}

#app-shell .tab-panel > h2:first-child {
  color: #17243d;
  font-size: clamp(1.9rem, 2.4vw, 2.35rem);
  line-height: 1.1;
  margin-bottom: 1.25rem;
}

#app-shell .workspace-page-header {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 1rem;
  min-width: 0;
  margin: 0 0 0.85rem;
  padding: 0.75rem 0.85rem;
  border: 1px solid #dfe7f1;
  border-radius: 16px;
  background: linear-gradient(180deg, #ffffff 0%, #f7fbff 100%);
  box-shadow: 0 14px 34px rgba(25, 42, 70, 0.06);
}

#app-shell .workspace-page-header > div:first-child {
  display: grid;
  gap: 0.18rem;
  min-width: 0;
}

#app-shell .workspace-page-eyebrow {
  margin: 0;
  color: #6b778c;
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0;
  text-transform: uppercase;
}

#app-shell .workspace-page-header h2 {
  margin: 0;
  color: #17243d;
  font-size: 1.38rem;
  line-height: 1.1;
}

#app-shell .workspace-page-metrics {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 0.45rem;
  min-width: 0;
}

#app-shell .workspace-page-metrics span {
  display: grid;
  gap: 0.1rem;
  min-width: 5.6rem;
  padding: 0.45rem 0.58rem;
  border: 1px solid #d9e6f5;
  border-radius: 12px;
  background: #ffffff;
}

#app-shell .workspace-page-metrics strong {
  color: #155bc3;
  font-size: 0.98rem;
  line-height: 1.1;
}

#app-shell .workspace-page-metrics em {
  color: #627286;
  font-size: 0.7rem;
  font-style: normal;
  font-weight: 800;
  line-height: 1.15;
  text-transform: uppercase;
}

@media (max-width: 760px) {
  #app-shell .workspace-page-header {
    align-items: start;
    flex-direction: column;
  }

  #app-shell .workspace-page-metrics {
    justify-content: flex-start;
    width: 100%;
  }

  #app-shell .workspace-page-metrics span {
    flex: 1 1 8rem;
  }
}

#app-shell #tab-dashboard.active {
  display: grid;
  gap: 1rem;
}

#app-shell #tab-dashboard > h2:first-child {
  display: none;
}

#app-shell .dashboard-subtabs {
  display: inline-flex;
  width: fit-content;
  max-width: 100%;
  align-items: flex-end;
  gap: 0.28rem;
  padding: 0;
  margin-bottom: 0.35rem;
  border: 0;
  border-bottom: 1px solid #d7e2ef;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  overflow-x: auto;
}

#app-shell .dashboard-subtabs .subtab-btn {
  min-height: 34px;
  padding: 0.36rem 0.78rem 0.42rem;
  border: 0;
  border-bottom: 3px solid transparent;
  border-radius: 0;
  background: transparent;
  color: #526179;
  box-shadow: none;
  font-size: 0.9rem;
  font-weight: 800;
  white-space: nowrap;
}

#app-shell .dashboard-subtabs .subtab-btn:hover {
  background: #f4f8fd;
  color: #155bc3;
  box-shadow: none;
  transform: none;
}

#app-shell .dashboard-subtabs .subtab-btn.active {
  border-bottom-color: #155bc3;
  background: #ffffff;
  color: #155bc3;
  box-shadow: none;
}

#app-shell .dashboard-compliance-subtabs {
  display: inline-flex;
  width: fit-content;
  max-width: 100%;
  align-items: flex-end;
  gap: 0.24rem;
  padding: 0;
  margin: -0.1rem 0 0.45rem;
  border: 0;
  border-bottom: 1px solid #d7e2ef;
  border-radius: 0;
  background: transparent;
  overflow-x: auto;
  box-shadow: none;
}

#app-shell .dashboard-compliance-subtabs::before {
  display: none;
}

#app-shell .dashboard-compliance-subtabs .subtab-btn {
  min-height: 32px;
  padding: 0.32rem 0.7rem 0.38rem;
  border: 0;
  border-bottom: 3px solid transparent;
  border-radius: 0;
  background: transparent;
  color: #526179;
  box-shadow: none;
  font-size: 0.82rem;
  font-weight: 800;
  letter-spacing: 0;
  white-space: nowrap;
}

#app-shell .dashboard-compliance-subtabs .subtab-btn:hover {
  background: #f4f8fd;
  color: #155bc3;
  box-shadow: none;
  transform: none;
}

#app-shell .dashboard-compliance-subtabs .subtab-btn.active {
  border-bottom-color: #155bc3;
  background: #ffffff;
  color: #155bc3;
  box-shadow: none;
}

#app-shell .dashboard-section {
  padding: 1rem;
  border: 1px solid #dfe7f1;
  border-radius: 16px;
  background: #ffffff;
  box-shadow: 0 14px 34px rgba(25, 42, 70, 0.06);
}

#app-shell .dashboard-section + .dashboard-section {
  margin-top: 0;
}

#app-shell .dashboard-section h3 {
  color: #17243d;
  font-size: 1rem;
  line-height: 1.2;
  margin: 0;
}

#app-shell .dashboard-section-header {
  align-items: center;
  padding-bottom: 0.9rem;
  border-bottom: 1px solid #edf1f6;
}

#app-shell .dashboard-section-header .muted {
  margin-top: 0.28rem;
}

#app-shell .dashboard-section-overview {
  display: grid;
  gap: 0.85rem;
  padding: 1.1rem;
  background: linear-gradient(180deg, #ffffff 0%, #f8fbfd 100%);
}

#app-shell .dashboard-section-overview .kpi-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 0.75rem;
}

#app-shell .dashboard-section-overview .kpi,
#app-shell .dashboard-summary-card,
#app-shell .dashboard-chip-card {
  border: 1px solid #e2eaf4;
  border-radius: 14px;
  background: #ffffff;
  box-shadow: none;
}

#app-shell .dashboard-section-overview .kpi {
  min-height: 112px;
  padding: 0.9rem;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

#app-shell .dashboard-section-overview .kpi-dial-card {
  position: relative;
  overflow: hidden;
  min-height: 158px;
  border-color: #dbe6f2;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.98), rgba(248, 251, 255, 0.98)),
    radial-gradient(circle at 84% 18%, rgba(23, 97, 174, 0.12), transparent 34%);
  box-shadow:
    0 14px 30px rgba(31, 47, 69, 0.06),
    inset 0 1px 0 rgba(255, 255, 255, 0.9);
}

#app-shell .dashboard-section-overview button.kpi {
  appearance: none;
  color: inherit;
  font: inherit;
  text-align: left;
  cursor: pointer;
}

#app-shell .dashboard-section-overview button.kpi:hover {
  border-color: #c8d8ec;
  box-shadow: 0 14px 28px rgba(31, 47, 69, 0.08);
  transform: translateY(-1px);
}

#app-shell .kpi-projected-hours-card {
  position: relative;
  overflow: hidden;
  min-height: 158px;
  gap: 0.72rem;
  border-color: #dbe6f2;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.98), rgba(248, 251, 255, 0.98)),
    radial-gradient(circle at 78% 16%, rgba(34, 197, 94, 0.1), transparent 34%);
  box-shadow:
    0 14px 30px rgba(31, 47, 69, 0.06),
    inset 0 1px 0 rgba(255, 255, 255, 0.9);
}

#app-shell .kpi-projected-hours-card::after {
  content: "";
  position: absolute;
  inset: auto 0 0;
  height: 4px;
  background: linear-gradient(90deg, #16a34a, #7ddf9f);
}

#app-shell .kpi-projected-hours-card[data-status="behind"] {
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.98), rgba(255, 249, 246, 0.98)),
    radial-gradient(circle at 78% 16%, rgba(226, 65, 23, 0.1), transparent 34%);
}

#app-shell .kpi-projected-hours-card[data-status="behind"]::after {
  background: linear-gradient(90deg, #e24117, #ff9f73);
}

#app-shell .kpi-status-card[data-status="attendance-outstanding"],
#app-shell .kpi-status-card[data-status="performance-exceptional"] {
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.98), rgba(246, 253, 249, 0.98)),
    radial-gradient(circle at 78% 16%, rgba(31, 122, 79, 0.12), transparent 34%);
}

#app-shell .kpi-status-card[data-status="attendance-excellent"],
#app-shell .kpi-status-card[data-status="attendance-strong"],
#app-shell .kpi-status-card[data-status="performance-strong"],
#app-shell .kpi-status-card[data-status="performance-satisfactory"] {
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.98), rgba(248, 251, 255, 0.98)),
    radial-gradient(circle at 78% 16%, rgba(42, 157, 143, 0.11), transparent 34%);
}

#app-shell .kpi-status-card[data-status="attendance-watch"],
#app-shell .kpi-status-card[data-status="performance-watch"] {
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.98), rgba(255, 252, 242, 0.98)),
    radial-gradient(circle at 78% 16%, rgba(231, 182, 63, 0.16), transparent 34%);
}

#app-shell .kpi-status-card[data-status="attendance-concern"],
#app-shell .kpi-status-card[data-status="performance-risk"] {
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.98), rgba(255, 248, 239, 0.98)),
    radial-gradient(circle at 78% 16%, rgba(242, 159, 75, 0.15), transparent 34%);
}

#app-shell .kpi-status-card[data-status="attendance-critical"],
#app-shell .kpi-status-card[data-status="performance-critical"] {
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.98), rgba(255, 246, 246, 0.98)),
    radial-gradient(circle at 78% 16%, rgba(232, 111, 111, 0.14), transparent 34%);
}

#app-shell .kpi-status-card[data-status="attendance-outstanding"]::after,
#app-shell .kpi-status-card[data-status="performance-exceptional"]::after {
  background: linear-gradient(90deg, #1f7a4f, #77d99a);
}

#app-shell .kpi-status-card[data-status="attendance-excellent"]::after,
#app-shell .kpi-status-card[data-status="performance-strong"]::after {
  background: linear-gradient(90deg, #16a34a, #7ddf9f);
}

#app-shell .kpi-status-card[data-status="attendance-strong"]::after {
  background: linear-gradient(90deg, #2a9d8f, #80d8ca);
}

#app-shell .kpi-status-card[data-status="performance-satisfactory"]::after {
  background: linear-gradient(90deg, #2f73cf, #8fb8ff);
}

#app-shell .kpi-status-card[data-status="attendance-watch"]::after,
#app-shell .kpi-status-card[data-status="performance-watch"]::after {
  background: linear-gradient(90deg, #d79918, #f8d56f);
}

#app-shell .kpi-status-card[data-status="attendance-concern"]::after,
#app-shell .kpi-status-card[data-status="performance-risk"]::after {
  background: linear-gradient(90deg, #e9781f, #ffb56d);
}

#app-shell .kpi-status-card[data-status="attendance-critical"]::after,
#app-shell .kpi-status-card[data-status="performance-critical"]::after {
  background: linear-gradient(90deg, #d94b4b, #ff8c8c);
}

#app-shell .kpi-projected-hours-top,
#app-shell .kpi-projected-hours-status,
#app-shell .kpi-projected-hours-metrics {
  position: relative;
  z-index: 1;
}

#app-shell .kpi-projected-hours-top {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 0.6rem;
}

#app-shell .kpi-info-icon {
  display: inline-grid;
  place-items: center;
  width: 22px;
  height: 22px;
  flex: 0 0 22px;
  border: 2px solid #6b778c;
  border-radius: 999px;
  color: #6b778c;
  font-size: 0.8rem;
  font-weight: 850;
  line-height: 1;
}

#app-shell .kpi-projected-hours-status {
  display: grid;
  grid-template-columns: 54px minmax(0, 1fr);
  gap: 0.72rem;
  align-items: center;
}

#app-shell .kpi-projected-hours-icon {
  display: inline-grid;
  place-items: center;
  width: 54px;
  height: 54px;
  border-radius: 14px;
  color: #ffffff;
  background: linear-gradient(145deg, #29c16f, #16834a);
  box-shadow: 0 14px 26px rgba(22, 163, 74, 0.18);
}

#app-shell .kpi-projected-hours-icon.behind {
  background: linear-gradient(145deg, #ff865d, #e24117);
  box-shadow: 0 14px 26px rgba(226, 65, 23, 0.16);
}

#app-shell .kpi-projected-hours-icon.starting {
  background: linear-gradient(145deg, #64748b, #334155);
  box-shadow: 0 14px 26px rgba(51, 65, 85, 0.14);
}

#app-shell .kpi-status-icon.attendance-outstanding,
#app-shell .kpi-status-icon.performance-exceptional {
  background: linear-gradient(145deg, #2c9c67, #1f7a4f);
  box-shadow: 0 14px 26px rgba(31, 122, 79, 0.18);
}

#app-shell .kpi-status-icon.attendance-excellent,
#app-shell .kpi-status-icon.performance-strong {
  background: linear-gradient(145deg, #29c16f, #16834a);
  box-shadow: 0 14px 26px rgba(22, 163, 74, 0.18);
}

#app-shell .kpi-status-icon.attendance-strong {
  background: linear-gradient(145deg, #3fc9b8, #2a9d8f);
  box-shadow: 0 14px 26px rgba(42, 157, 143, 0.18);
}

#app-shell .kpi-status-icon.performance-satisfactory {
  background: linear-gradient(145deg, #4f8ff0, #2f73cf);
  box-shadow: 0 14px 26px rgba(47, 115, 207, 0.16);
}

#app-shell .kpi-status-icon.attendance-watch,
#app-shell .kpi-status-icon.performance-watch {
  background: linear-gradient(145deg, #f0c84d, #c98705);
  box-shadow: 0 14px 26px rgba(201, 135, 5, 0.16);
}

#app-shell .kpi-status-icon.attendance-concern,
#app-shell .kpi-status-icon.performance-risk {
  background: linear-gradient(145deg, #ffad63, #e9781f);
  box-shadow: 0 14px 26px rgba(233, 120, 31, 0.16);
}

#app-shell .kpi-status-icon.attendance-critical,
#app-shell .kpi-status-icon.performance-critical {
  background: linear-gradient(145deg, #ff7f7f, #d94b4b);
  box-shadow: 0 14px 26px rgba(217, 75, 75, 0.16);
}

#app-shell .kpi-projected-hours-icon svg {
  width: 34px;
  height: 34px;
  fill: currentColor;
  stroke: rgba(255, 255, 255, 0.92);
  stroke-width: 2.2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

#app-shell .kpi-projected-hours-status strong {
  display: block;
  color: #16a34a;
  font-size: 1.38rem;
  font-weight: 850;
  line-height: 1.02;
}

#app-shell .kpi-projected-hours-card[data-status="behind"] .kpi-projected-hours-status strong {
  color: #e24117;
}

#app-shell .kpi-projected-hours-card[data-status="starting"] .kpi-projected-hours-status strong {
  color: #334155;
}

#app-shell .kpi-status-card[data-status="attendance-outstanding"] .kpi-projected-hours-status strong,
#app-shell .kpi-status-card[data-status="performance-exceptional"] .kpi-projected-hours-status strong {
  color: #1f7a4f;
}

#app-shell .kpi-status-card[data-status="attendance-excellent"] .kpi-projected-hours-status strong,
#app-shell .kpi-status-card[data-status="performance-strong"] .kpi-projected-hours-status strong {
  color: #16a34a;
}

#app-shell .kpi-status-card[data-status="attendance-strong"] .kpi-projected-hours-status strong {
  color: #2a9d8f;
}

#app-shell .kpi-status-card[data-status="performance-satisfactory"] .kpi-projected-hours-status strong {
  color: #2f73cf;
}

#app-shell .kpi-status-card[data-status="attendance-watch"] .kpi-projected-hours-status strong,
#app-shell .kpi-status-card[data-status="performance-watch"] .kpi-projected-hours-status strong {
  color: #9a6a0a;
}

#app-shell .kpi-status-card[data-status="attendance-concern"] .kpi-projected-hours-status strong,
#app-shell .kpi-status-card[data-status="performance-risk"] .kpi-projected-hours-status strong {
  color: #a85e12;
}

#app-shell .kpi-status-card[data-status="attendance-critical"] .kpi-projected-hours-status strong,
#app-shell .kpi-status-card[data-status="performance-critical"] .kpi-projected-hours-status strong {
  color: #b84545;
}

#app-shell .kpi-projected-hours-status small {
  display: block;
  margin-top: 0.18rem;
  color: #52617b;
  font-size: 0.72rem;
  font-weight: 650;
  line-height: 1.22;
}

#app-shell .kpi-projected-hours-metrics {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.6rem;
  padding-top: 0.64rem;
  border-top: 1px solid #e3ebf5;
}

#app-shell .kpi-projected-hours-metrics span {
  display: grid;
  gap: 0.18rem;
}

#app-shell .kpi-projected-hours-metrics span:last-child {
  justify-items: end;
  text-align: right;
}

#app-shell .kpi-projected-hours-metrics small {
  display: flex;
  align-items: flex-end;
  color: #6b778c;
  font-size: 0.66rem;
  font-weight: 800;
  letter-spacing: 0.04em;
  line-height: 1.15;
  min-height: 1.55rem;
  text-transform: uppercase;
}

#app-shell .kpi-projected-hours-metrics strong {
  color: #17243d;
  font-size: 0.9rem;
  font-weight: 850;
  white-space: nowrap;
}

#app-shell .kpi-projected-hours-metrics span:last-child strong {
  color: #16a34a;
}

#app-shell .kpi-projected-hours-card[data-status="behind"] .kpi-projected-hours-metrics span:last-child strong {
  color: #e24117;
}

#app-shell .kpi-status-card[data-status="attendance-outstanding"] .kpi-projected-hours-metrics span:last-child strong,
#app-shell .kpi-status-card[data-status="performance-exceptional"] .kpi-projected-hours-metrics span:last-child strong {
  color: #1f7a4f;
}

#app-shell .kpi-status-card[data-status="attendance-excellent"] .kpi-projected-hours-metrics span:last-child strong,
#app-shell .kpi-status-card[data-status="performance-strong"] .kpi-projected-hours-metrics span:last-child strong {
  color: #16a34a;
}

#app-shell .kpi-status-card[data-status="attendance-strong"] .kpi-projected-hours-metrics span:last-child strong {
  color: #2a9d8f;
}

#app-shell .kpi-status-card[data-status="performance-satisfactory"] .kpi-projected-hours-metrics span:last-child strong {
  color: #2f73cf;
}

#app-shell .kpi-status-card[data-status="attendance-watch"] .kpi-projected-hours-metrics span:last-child strong,
#app-shell .kpi-status-card[data-status="performance-watch"] .kpi-projected-hours-metrics span:last-child strong {
  color: #9a6a0a;
}

#app-shell .kpi-status-card[data-status="attendance-concern"] .kpi-projected-hours-metrics span:last-child strong,
#app-shell .kpi-status-card[data-status="performance-risk"] .kpi-projected-hours-metrics span:last-child strong {
  color: #a85e12;
}

#app-shell .kpi-status-card[data-status="attendance-critical"] .kpi-projected-hours-metrics span:last-child strong,
#app-shell .kpi-status-card[data-status="performance-critical"] .kpi-projected-hours-metrics span:last-child strong {
  color: #b84545;
}

#app-shell .dashboard-section-overview .kpi-label,
#app-shell .dashboard-summary-label,
#app-shell .dashboard-chip-label {
  color: #6b778c;
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.04em;
}

#app-shell .dashboard-section-overview .kpi-value {
  color: #14233b;
  font-size: 1.35rem;
  font-weight: 700;
  line-height: 1.1;
  letter-spacing: 0;
}

#app-shell .kpi-dial-gauge {
  position: relative;
  width: min(215px, 100%);
  margin: -0.35rem auto -0.25rem;
  aspect-ratio: 1.9 / 1;
}

#app-shell .kpi-dial-gauge svg {
  display: block;
  width: 100%;
  height: auto;
  filter: drop-shadow(0 10px 18px rgba(31, 47, 69, 0.08));
}

#app-shell .dial-arc {
  fill: none;
  stroke-width: 18;
  stroke-linecap: butt;
}

#app-shell .dial-arc-base {
  stroke: #e3e8f1;
}

#app-shell .dial-arc-progress {
  stroke: #1761ae;
  stroke-dasharray: 258;
  stroke-dashoffset: 258;
  transition: stroke-dashoffset 220ms ease;
}

#app-shell .dial-arc-progress[data-status="static"] {
  stroke: #1761ae;
}

#app-shell .dial-arc-progress[data-status="danger"] {
  stroke: #e86f6f;
}

#app-shell .dial-arc-progress[data-status="orange"] {
  stroke: #f29f4b;
}

#app-shell .dial-arc-progress[data-status="warning"] {
  stroke: #ffd54f;
}

#app-shell .dial-arc-progress[data-status="good"] {
  stroke: #54b86a;
}

#app-shell .dial-arc-progress[data-status="attendance-outstanding"],
#app-shell .dial-arc-progress[data-status="performance-exceptional"] {
  stroke: #1f7a4f;
}

#app-shell .dial-arc-progress[data-status="attendance-excellent"],
#app-shell .dial-arc-progress[data-status="performance-strong"] {
  stroke: #54b86a;
}

#app-shell .dial-arc-progress[data-status="attendance-strong"] {
  stroke: #2a9d8f;
}

#app-shell .dial-arc-progress[data-status="performance-satisfactory"] {
  stroke: #2f73cf;
}

#app-shell .dial-arc-progress[data-status="attendance-watch"],
#app-shell .dial-arc-progress[data-status="performance-watch"] {
  stroke: #e7b63f;
}

#app-shell .dial-arc-progress[data-status="attendance-concern"],
#app-shell .dial-arc-progress[data-status="performance-risk"] {
  stroke: #f29f4b;
}

#app-shell .dial-arc-progress[data-status="attendance-critical"],
#app-shell .dial-arc-progress[data-status="performance-critical"] {
  stroke: #e86f6f;
}

#app-shell .kpi-dial-scale {
  position: absolute;
  left: 17%;
  right: 17%;
  bottom: 0.1rem;
  display: flex;
  justify-content: space-between;
  color: #6b778c;
  font-size: 0.68rem;
  font-weight: 700;
}

#app-shell .kpi-dial-center {
  position: absolute;
  left: 50%;
  top: 61%;
  display: grid;
  justify-items: center;
  gap: 0.02rem;
  transform: translate(-50%, -50%);
  color: #14233b;
}

#app-shell .kpi-dial-center strong {
  font-size: 1.55rem;
  line-height: 1;
}

#app-shell .kpi-dial-note {
  margin: 0;
  color: #5f6f86;
  font-size: 0.78rem;
  font-weight: 700;
  text-align: center;
}

#app-shell .kpi-dial-note strong,
#app-shell .kpi-dial-note small {
  display: block;
}

#app-shell .kpi-dial-note strong {
  color: inherit;
  font-size: 0.78rem;
  line-height: 1.15;
}

#app-shell .kpi-dial-note small {
  margin-top: 0.12rem;
  color: #66758d;
  font-size: 0.68rem;
  font-weight: 600;
  line-height: 1.2;
}

#app-shell .kpi-dial-note[data-status="attendance-outstanding"],
#app-shell .kpi-dial-note[data-status="performance-exceptional"] {
  color: #1f7a4f;
}

#app-shell .kpi-dial-note[data-status="attendance-excellent"],
#app-shell .kpi-dial-note[data-status="performance-strong"] {
  color: #3f8f55;
}

#app-shell .kpi-dial-note[data-status="attendance-strong"] {
  color: #2a847b;
}

#app-shell .kpi-dial-note[data-status="performance-satisfactory"] {
  color: #2f64aa;
}

#app-shell .kpi-dial-note[data-status="attendance-watch"],
#app-shell .kpi-dial-note[data-status="performance-watch"] {
  color: #9a6a0a;
}

#app-shell .kpi-dial-note[data-status="attendance-concern"],
#app-shell .kpi-dial-note[data-status="performance-risk"] {
  color: #a85e12;
}

#app-shell .kpi-dial-note[data-status="attendance-critical"],
#app-shell .kpi-dial-note[data-status="performance-critical"] {
  color: #b84545;
}

#app-shell .progress-wrap {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.75rem;
  margin-top: 0;
  padding: 0.85rem;
  border: 1px solid #e2eaf4;
  border-radius: 14px;
  background: #f7fafc;
}

#app-shell .progress-bullet-wrap {
  padding: 0;
  border: 0;
  background: transparent;
}

#app-shell .progress-bullet-card {
  position: relative;
  overflow: hidden;
  padding: 1.05rem 1.1rem;
  border: 1px solid #e0e8f3;
  border-radius: 20px;
  background: linear-gradient(180deg, #ffffff 0%, #fbfdff 100%);
  box-shadow:
    0 12px 28px rgba(31, 47, 69, 0.055),
    inset 0 1px 0 rgba(255, 255, 255, 0.9);
}

#app-shell .progress-bullet-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  margin-bottom: 1rem;
}

#app-shell .progress-bullet-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 3.85rem;
  height: 3.85rem;
  border: 6px solid #ffffff;
  border-radius: 999px;
  background:
    linear-gradient(#ffffff, #ffffff) padding-box,
    conic-gradient(#2f80ed 0deg, #0f63c4 300deg, #e8eef7 300deg 360deg) border-box;
  color: #102041;
  font-size: 0.98rem;
  font-weight: 900;
  box-shadow: 0 10px 22px rgba(23, 97, 174, 0.11);
}

#app-shell .progress-title {
  margin: 0;
  color: #6b778c;
  font-size: 1.08rem;
  font-weight: 900;
}

#app-shell .progress-bar {
  height: 9px;
  background: #e8edf4;
  border-radius: 999px;
}

#app-shell .progress-bullet-bar {
  position: relative;
  height: 13px;
  overflow: hidden;
  border: 1px solid #d7e2ee;
  border-radius: 999px;
  background: #eef3f8;
  box-shadow: inset 0 1px 1px rgba(31, 47, 69, 0.06);
}

#app-shell .progress-bullet-bar::after {
  content: none;
}

#app-shell .progress-fill {
  border-radius: inherit;
  background: linear-gradient(90deg, #6da2e7 0%, #2f73cf 58%, #155ab3 100%);
  box-shadow: none;
}

#app-shell .progress-bullet-note {
  margin: 0.25rem 0 0;
  color: #66758d;
  font-size: 0.82rem;
  font-weight: 800;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

#app-shell .progress-bullet-ticks {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  margin: 0 0 0.3rem;
  color: #66758d;
  font-size: 0.7rem;
  font-weight: 800;
}

#app-shell .progress-bullet-ticks span {
  text-align: center;
}

#app-shell .progress-bullet-ticks span:first-child {
  text-align: left;
}

#app-shell .progress-bullet-ticks span:last-child {
  text-align: right;
}

#app-shell .progress-bullet-status {
  display: flex;
  align-items: center;
  gap: 0.48rem;
  margin-top: 0.72rem;
  color: #209542;
}

#app-shell .progress-status-icon {
  width: 1.65rem;
  height: 1.65rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 999px;
  background: #eaf8ed;
  color: #209542;
  font-size: 0.95rem;
  font-weight: 900;
}

#app-shell .progress-bullet-status strong {
  color: #209542;
  font-size: 0.88rem;
  font-weight: 900;
}

#app-shell .dashboard-summary-grid,
#app-shell .dashboard-pace-grid,
#app-shell .dashboard-chip-grid {
  gap: 0.75rem;
  margin-top: 0.85rem;
}

#app-shell .dashboard-summary-card,
#app-shell .dashboard-chip-card {
  padding: 0.9rem;
  min-height: 112px;
}

#app-shell .dashboard-chip-card {
  text-align: left;
  color: inherit;
}

#app-shell .dashboard-open-gauge {
  --open-gauge: #1761ae;
  --open-gauge-dark: #0f4f99;
  --open-gauge-soft: #eaf2ff;
  position: relative;
  min-height: 182px;
  display: grid;
  grid-template-rows: auto auto auto 1fr;
  gap: 0.48rem;
  overflow: hidden;
  padding: 0.92rem 0.95rem 0.95rem;
  border: 1px solid #dfe7f1;
  border-radius: 14px;
  background:
    radial-gradient(circle at 88% 18%, color-mix(in srgb, var(--open-gauge) 10%, transparent), transparent 34%),
    linear-gradient(180deg, #ffffff 0%, #fbfdff 100%);
  color: #14233b;
  text-align: left;
  box-shadow: 0 14px 28px rgba(31, 47, 69, 0.05);
  transition: transform 160ms ease, border-color 160ms ease, box-shadow 160ms ease;
}

#app-shell .dashboard-open-gauge::after {
  content: "";
  position: absolute;
  inset: auto 0 0 0;
  height: 4px;
  background: linear-gradient(90deg, var(--open-gauge-dark), color-mix(in srgb, var(--open-gauge) 64%, white));
}

#app-shell .dashboard-open-gauge:hover,
#app-shell .dashboard-open-gauge:focus-visible {
  border-color: color-mix(in srgb, var(--open-gauge) 38%, #dfe7f1);
  box-shadow: 0 18px 34px rgba(31, 47, 69, 0.1);
  transform: translateY(-1px);
}

#app-shell .dashboard-open-gauge-icon {
  width: 3.1rem;
  height: 3.1rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid color-mix(in srgb, var(--open-gauge) 28%, #ffffff);
  border-radius: 999px;
  background:
    radial-gradient(circle, rgba(255, 255, 255, 0.98) 0 52%, transparent 53%),
    color-mix(in srgb, var(--open-gauge-soft) 72%, white);
  box-shadow: 0 12px 24px color-mix(in srgb, var(--open-gauge) 13%, transparent);
}

#app-shell .dashboard-open-gauge-icon svg {
  width: 1.35rem;
  height: 1.35rem;
  fill: none;
  stroke: var(--open-gauge);
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 2;
}

#app-shell .dashboard-open-gauge-label {
  color: #6b778c;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  line-height: 1.15;
  text-transform: uppercase;
}

#app-shell .dashboard-open-gauge-value {
  color: var(--open-gauge-dark);
  font-size: clamp(2rem, 3.2vw, 2.75rem);
  font-weight: 900;
  line-height: 0.95;
  letter-spacing: -0.03em;
}

#app-shell .dashboard-open-gauge-action {
  position: absolute;
  right: 1rem;
  top: 1rem;
  width: 2.2rem;
  height: 2.2rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 999px;
  background: color-mix(in srgb, var(--open-gauge-soft) 62%, white);
  color: var(--open-gauge);
}

#app-shell .dashboard-open-gauge-action svg {
  width: 1rem;
  height: 1rem;
  fill: none;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 2.4;
}

#app-shell .dashboard-open-gauge-note {
  align-self: end;
  max-width: 24ch;
  color: #5f6f86;
  font-size: 0.82rem;
  font-weight: 600;
  line-height: 1.35;
}

#app-shell .dashboard-open-gauge-attendance {
  --open-gauge: #1761ae;
  --open-gauge-dark: #0f4f99;
  --open-gauge-soft: #eaf2ff;
}

#app-shell .dashboard-open-gauge-classes {
  --open-gauge: #2a9d68;
  --open-gauge-dark: #1f7a4f;
  --open-gauge-soft: #eaf8f0;
}

#app-shell .dashboard-open-gauge-class-status {
  --open-gauge: #2a9d68;
  --open-gauge-dark: #1f7a4f;
  --open-gauge-soft: #eaf8f0;
}

#app-shell .dashboard-class-status-actions {
  display: grid;
  gap: 0.42rem;
}

#app-shell .dashboard-class-status-actions button {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  min-width: 0;
  padding: 0.42rem 0.5rem;
  border: 1px solid #dfe7f1;
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.74);
  color: #14233b;
  cursor: pointer;
  transition: border-color 160ms ease, box-shadow 160ms ease, transform 160ms ease;
}

#app-shell .dashboard-class-status-actions button:hover,
#app-shell .dashboard-class-status-actions button:focus-visible {
  border-color: color-mix(in srgb, var(--open-gauge) 36%, #dfe7f1);
  box-shadow: 0 8px 18px rgba(31, 47, 69, 0.08);
  outline: none;
  transform: translateY(-1px);
}

#app-shell .dashboard-class-status-actions b {
  color: var(--open-gauge-dark);
  font-size: 1.05rem;
  font-weight: 900;
}

#app-shell .dashboard-class-status-actions small {
  color: #5f6f86;
  font-size: 0.72rem;
  font-weight: 800;
}

#app-shell .dashboard-open-gauge-grades {
  --open-gauge: #8b4ae8;
  --open-gauge-dark: #5f2ab5;
  --open-gauge-soft: #f1eaff;
}

#app-shell .dashboard-open-gauge-past-due {
  --open-gauge: #e13d3d;
  --open-gauge-dark: #aa2525;
  --open-gauge-soft: #ffe8e8;
}

#app-shell .dashboard-open-gauge-overrides {
  --open-gauge: #e8751a;
  --open-gauge-dark: #bd5608;
  --open-gauge-soft: #fff1e7;
}

#app-shell .completion-detail-gauge {
  margin-bottom: 0.9rem;
}

#app-shell #dashboard-section-completion-today {
  padding: 1.35rem;
  border-color: #dfe7f3;
  border-radius: 18px;
  background: #ffffff;
  box-shadow: 0 18px 44px rgba(23, 36, 61, 0.06);
}

#app-shell #dashboard-section-needs-attention-today {
  padding: 1.35rem;
  border-color: #dfe7f3;
  border-radius: 18px;
  background: #ffffff;
  box-shadow: 0 18px 44px rgba(23, 36, 61, 0.06);
}

#app-shell .completion-detail-toolbar {
  grid-template-columns: 1fr;
  align-items: start;
  gap: 0.85rem;
  margin-bottom: 1.1rem;
}

#app-shell .student-performance-toolbar.completion-detail-toolbar {
  grid-template-columns: auto minmax(520px, 580px);
  align-items: center;
  justify-content: start;
  column-gap: 2.1rem;
}

#app-shell .completion-detail-toolbar .student-performance-heading {
  grid-column: 1;
  min-width: 0;
}

#app-shell .open-items-detail-toolbar {
  grid-template-columns: minmax(300px, 1fr) auto;
  align-items: center;
  margin-bottom: 1rem;
}

#app-shell .open-items-detail-toolbar .dashboard-pill-metric {
  width: auto;
  min-width: 76px;
  max-width: max-content;
  justify-self: end;
  padding-inline: 1rem;
}

#app-shell .open-items-heading-icon {
  background: linear-gradient(145deg, #eefaf3, #ddf4e8);
  color: #2a9d68;
  box-shadow: 0 10px 24px rgba(42, 157, 104, 0.16);
}

#app-shell .completion-detail-toolbar .student-performance-heading p {
  margin: 0.45rem 0 0;
  color: #596986;
  font-size: 0.95rem;
}

#app-shell #completion-today-filter-form {
  grid-column: 2;
  display: grid;
  grid-template-columns: minmax(210px, 1.35fr) minmax(170px, 0.85fr) minmax(150px, 0.8fr);
  gap: 0.85rem;
  align-items: end;
  justify-self: start;
  margin: 0;
  width: min(100%, 580px);
  min-width: 0;
}

#app-shell #completion-today-filter-form > label {
  display: grid;
  gap: 0.38rem;
  min-width: 0;
  color: #6f7d92;
  font-size: 0.68rem;
  font-weight: 750;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  white-space: nowrap;
}

#app-shell #completion-today-filter-form .multi-select-dropdown,
#app-shell #completion-today-filter-form .multi-select-dropdown summary,
#app-shell #completion-today-filter-form select {
  width: 100%;
  min-width: 0;
}

#app-shell #completion-today-filter-form .multi-select-dropdown,
#app-shell #completion-today-filter-form select {
  border-color: #dce6f4;
  border-radius: 9px;
  background: #ffffff;
  color: #233451;
  box-shadow: 0 8px 20px rgba(23, 36, 61, 0.04);
}

#app-shell #completion-today-filter-form .multi-select-dropdown summary,
#app-shell #completion-today-filter-form select {
  min-height: 42px;
  padding: 0.62rem 0.75rem;
  color: #293950;
  font-size: 0.82rem;
  font-weight: 650;
  letter-spacing: 0;
  text-transform: none;
  white-space: nowrap;
}

#app-shell #completion-today-filter-form .multi-select-dropdown[open] .checklist-vertical {
  color: #6f7d92;
  font-size: 0.68rem;
  font-weight: 750;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

#app-shell #completion-today-filter-form .multi-select-dropdown[open] .checklist-row label {
  color: #6f7d92;
  font-size: 0.68rem;
  font-weight: 750;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  white-space: nowrap;
}

#app-shell .completion-detail-gauge .progress-bullet-header {
  align-items: flex-start;
  margin-bottom: 1.05rem;
}

#app-shell .completion-detail-gauge .progress-title {
  color: #17243d;
}

#app-shell .completion-detail-gauge .progress-bullet-note {
  max-width: 760px;
  text-transform: none;
  letter-spacing: 0;
  font-size: 0.94rem;
  font-weight: 500;
  line-height: 1.35;
}

#app-shell .completion-detail-bars {
  display: grid;
  gap: 0.95rem;
}

#app-shell .completion-detail-bar-row {
  display: grid;
  gap: 0.28rem;
}

#app-shell .completion-detail-bar-heading {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1rem;
}

#app-shell .completion-detail-bar-heading span {
  color: #6b778c;
  font-size: 0.76rem;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

#app-shell .completion-detail-bar-heading strong {
  color: #14233b;
  font-size: 1.08rem;
  font-weight: 900;
}

#app-shell .completion-detail-bar {
  height: 12px;
}

#app-shell .completion-detail-bar-grades .progress-fill {
  background: linear-gradient(90deg, #7b61ff 0%, #8b4ae8 58%, #5f2ab5 100%);
}

#app-shell .completion-detail-bar-grades .progress-status-icon,
#app-shell .completion-detail-bar-grades .progress-bullet-status strong {
  color: #5f2ab5;
}

#app-shell .completion-detail-bar-grades .progress-status-icon {
  background: #f1eaff;
}

#app-shell .completion-detail-bar-hours .progress-fill {
  background: linear-gradient(90deg, #35b987 0%, #2a9d68 58%, #1f7a4f 100%);
}

#app-shell .completion-detail-bar-hours .progress-status-icon,
#app-shell .completion-detail-bar-hours .progress-bullet-status strong {
  color: #1f7a4f;
}

#app-shell .completion-detail-bar-hours .progress-status-icon {
  background: #eaf8f0;
}

#app-shell .completion-detail-table-wrap {
  margin-top: 0;
  border-color: #dfe7f3;
  border-radius: 14px;
  box-shadow: none;
}

#app-shell .completion-detail-table {
  border-collapse: separate;
  border-spacing: 0;
  min-width: 980px;
}

#app-shell .completion-detail-table th,
#app-shell .completion-detail-table td {
  height: 58px;
  padding: 0.7rem 1rem;
}

#app-shell .completion-detail-table th {
  background: #f8fafd;
  color: #32405a;
  font-size: 0.72rem;
  font-weight: 850;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

#app-shell .completion-detail-table td {
  border-bottom: 1px solid #e7edf6;
  border-right: 1px solid #edf2f8;
  vertical-align: middle;
}

#app-shell .completion-detail-table td:last-child,
#app-shell .completion-detail-table th:last-child {
  border-right: 0;
}

#app-shell .completion-detail-row td:first-child {
  min-width: 240px;
}

#app-shell .completion-student-cell .student-analytics-avatar {
  background: linear-gradient(145deg, #eef5ff, #dceaff);
  color: #336ce8;
  box-shadow: 0 8px 18px rgba(51, 108, 232, 0.14);
}

#app-shell .completion-count-pill {
  display: inline-flex;
  min-width: 42px;
  justify-content: center;
  padding: 0.22rem 0.65rem;
  border: 1px solid #dce6f4;
  border-radius: 999px;
  background: #f7faff;
  color: #253b63;
  font-weight: 850;
}

#app-shell .completion-metric-cell {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
}

#app-shell .completion-metric-cell small {
  color: #72809a;
  font-size: 0.78rem;
  font-weight: 700;
}

#app-shell .completion-metric-cell [data-dashboard-open-school-day] {
  cursor: pointer;
  transition: transform 160ms ease, box-shadow 160ms ease;
}

#app-shell .completion-metric-cell [data-dashboard-open-school-day]:hover,
#app-shell .completion-metric-cell [data-dashboard-open-school-day]:focus-visible {
  box-shadow: 0 8px 18px rgba(31, 47, 69, 0.12);
  outline: none;
  transform: translateY(-1px);
}

#app-shell .completion-hours-cell {
  max-width: 190px;
}

#app-shell .completion-hours-cell span {
  color: #253b63;
}

#app-shell button.dashboard-chip-card:hover {
  border-color: #c8d8ec;
  background: #f8fbff;
  box-shadow: 0 12px 24px rgba(31, 47, 69, 0.08);
  transform: translateY(-1px);
}

#app-shell .dashboard-summary-value,
#app-shell .dashboard-chip-value {
  color: #14233b;
  font-size: 1.45rem;
  font-weight: 700;
  line-height: 1.1;
  letter-spacing: 0;
}

#app-shell .dashboard-visual-card-completion .dashboard-summary-value,
#app-shell .dashboard-visual-card-open .dashboard-summary-value,
#app-shell .dashboard-visual-card-open-classes .dashboard-summary-value,
#app-shell .dashboard-visual-card-grade-risk .dashboard-summary-value,
#app-shell .dashboard-visual-card-required-subjects .dashboard-summary-value,
#app-shell .dashboard-visual-card-grades .dashboard-summary-value {
  color: var(--card-accent-dark);
  max-width: 100%;
  font-size: clamp(2.35rem, 3.8vw, 3.15rem);
  font-weight: 900;
  line-height: 1;
  letter-spacing: -0.035em;
  overflow-wrap: anywhere;
}

#app-shell .dashboard-summary-value.positive {
  color: #1f7a4f;
}

#app-shell .dashboard-summary-value.negative {
  color: #a1462c;
}

#app-shell .compliance-gauge-card {
  margin-top: 0.95rem;
  padding: 1rem;
  border: 1px solid #dbe6f2;
  border-radius: 16px;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.96), rgba(248, 251, 255, 0.96)),
    radial-gradient(circle at 18% 10%, rgba(23, 97, 174, 0.08), transparent 34%);
}

#app-shell .compliance-gauge-header {
  display: flex;
  align-items: start;
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: 1rem;
}

#app-shell .compliance-gauge-controls {
  display: flex;
  align-items: end;
  justify-content: flex-end;
  gap: 0.65rem;
  flex-wrap: wrap;
}

#app-shell .compliance-gauge-controls label {
  display: grid;
  gap: 0.22rem;
  min-width: 180px;
  color: #5e6d84;
  font-size: 0.78rem;
  font-weight: 600;
}

#app-shell .compliance-gauge-controls select {
  min-height: 38px;
  border-color: #d1dceb;
  border-radius: 10px;
  background: #ffffff;
}

#app-shell .compliance-gauge-forecast {
  margin: 0.2rem 0 0;
  color: #14233b;
  font-size: 1.35rem;
  font-weight: 750;
  line-height: 1.1;
}

#app-shell .compliance-gauge-track {
  position: relative;
  height: 18px;
  margin-top: 1.75rem;
  border: 1px solid #d8e2ef;
  border-radius: 999px;
  background: #e9eff7;
  overflow: visible;
}

#app-shell .compliance-gauge-track::before {
  content: "";
  position: absolute;
  inset: 3px;
  border-radius: inherit;
  background: linear-gradient(90deg, rgba(255, 255, 255, 0.72), rgba(255, 255, 255, 0));
  z-index: 3;
  pointer-events: none;
}

#app-shell .compliance-gauge-fill {
  position: absolute;
  inset: 0 auto 0 0;
  border-radius: inherit;
}

#app-shell .compliance-gauge-fill.projected {
  z-index: 1;
  background: linear-gradient(90deg, rgba(50, 126, 91, 0.22), rgba(31, 122, 79, 0.34));
}

#app-shell .compliance-gauge-fill.projected.short {
  background: linear-gradient(90deg, rgba(161, 70, 44, 0.18), rgba(161, 70, 44, 0.3));
}

#app-shell .compliance-gauge-fill.actual {
  z-index: 2;
  background: linear-gradient(90deg, #1761ae 0%, #2f8f68 100%);
  box-shadow: 0 8px 18px rgba(23, 97, 174, 0.18);
}

#app-shell .compliance-gauge-marker {
  position: absolute;
  top: 50%;
  z-index: 5;
  width: 2px;
  height: 30px;
  border-radius: 999px;
  transform: translate(-1px, -50%);
}

#app-shell .compliance-gauge-marker.expected {
  background: #6b778c;
}

#app-shell .compliance-gauge-marker.required {
  background: #17243d;
}

#app-shell .compliance-gauge-marker span {
  position: absolute;
  top: -1.7rem;
  left: 50%;
  white-space: nowrap;
  color: #56657a;
  font-size: 0.68rem;
  font-weight: 700;
}

#app-shell .compliance-gauge-marker.expected span {
  transform: translateX(calc(-100% - 0.35rem));
}

#app-shell .compliance-gauge-marker.required span {
  color: #17243d;
  top: 1.9rem;
  transform: translateX(calc(-100% - 0.35rem));
}

#app-shell .compliance-gauge-legend {
  display: flex;
  flex-wrap: wrap;
  gap: 0.55rem 1rem;
  margin-top: 0.85rem;
  color: #56657a;
  font-size: 0.78rem;
  font-weight: 600;
}

#app-shell .compliance-gauge-legend span {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
}

#app-shell .legend-dot {
  width: 0.7rem;
  height: 0.7rem;
  border-radius: 999px;
}

#app-shell .legend-dot.actual {
  background: #1761ae;
}

#app-shell .legend-dot.projected {
  background: #86b99a;
}

#app-shell .legend-line {
  width: 0.75rem;
  height: 2px;
  border-radius: 999px;
}

#app-shell .legend-line.expected {
  background: #6b778c;
}

#app-shell .legend-line.required {
  background: #17243d;
}

#app-shell .compliance-metric-grid {
  grid-template-columns: repeat(6, minmax(0, 1fr));
}

#app-shell .compliance-metric-grid .dashboard-summary-card {
  min-height: 94px;
}

#app-shell .compliance-gauge-note {
  max-width: 470px;
  text-align: right;
}

#app-shell .compliance-visual-grid {
  display: grid;
  grid-template-columns: minmax(320px, 0.9fr) minmax(0, 1.1fr);
  gap: 0.85rem;
  margin-top: 0.95rem;
}

#app-shell .compliance-ring-card {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  gap: 1rem;
  padding: 1rem;
  border: 1px solid #dbe6f2;
  border-radius: 16px;
  background: #ffffff;
}

#app-shell .compliance-ring {
  --ring-progress: 0;
  --ring-color: #1761ae;
  width: 132px;
  aspect-ratio: 1;
  display: grid;
  place-items: center;
  border-radius: 999px;
  background:
    radial-gradient(circle, #ffffff 0 58%, transparent 59%),
    conic-gradient(var(--ring-color) calc(var(--ring-progress) * 1%), #e7edf5 0);
  box-shadow: inset 0 0 0 1px #dbe6f2, 0 18px 34px rgba(23, 97, 174, 0.08);
}

#app-shell .compliance-ring-center {
  display: grid;
  justify-items: center;
  gap: 0.1rem;
}

#app-shell .compliance-ring-center span {
  color: #14233b;
  font-size: 1.35rem;
  font-weight: 800;
}

#app-shell .compliance-ring-center small {
  color: #6b778c;
  font-size: 0.72rem;
  font-weight: 700;
}

#app-shell .compliance-day-metric-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  margin-top: 0;
}

#app-shell .required-hours-analytics {
  padding: 1.15rem;
  border: 1px solid #dfe8f5;
  border-radius: 16px;
  background: #ffffff;
  box-shadow: 0 16px 36px rgba(23, 36, 61, 0.06);
}

#app-shell .required-days-analytics .required-hours-heading-icon {
  background: linear-gradient(145deg, #eefaf3, #ddf4e8);
  color: #16834a;
}

#app-shell .required-hours-header {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(360px, auto);
  gap: 1rem;
  align-items: center;
}

#app-shell .required-hours-heading-icon {
  width: 54px;
  height: 54px;
  flex-basis: 54px;
  border-radius: 14px;
}

#app-shell .required-hours-controls {
  display: grid;
  grid-template-columns: minmax(220px, 1fr) auto;
  gap: 0.8rem;
  align-items: end;
}

#app-shell .required-hours-controls label {
  display: grid;
  gap: 0.35rem;
  color: #53627d;
  font-size: 0.78rem;
  font-weight: 700;
}

#app-shell .required-hours-controls select {
  min-height: 42px;
  border-color: #dce6f4;
  border-radius: 9px;
  color: #233451;
  font-weight: 700;
}

#app-shell .required-hours-controls .dashboard-pill-metric {
  min-height: 42px;
  align-items: center;
  padding-inline: 1rem;
}

#app-shell .required-hours-outcome {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto auto;
  gap: 1.3rem;
  align-items: center;
  margin-top: 1.15rem;
  padding: 1.35rem;
  border: 1px solid #bfe8d4;
  border-radius: 16px;
  background: linear-gradient(115deg, #f0fff7 0%, #ffffff 58%, #f2fff8 100%);
}

#app-shell .required-hours-outcome.short {
  border-color: #fed7c5;
  background: linear-gradient(115deg, #fff6ef 0%, #ffffff 58%, #fff8f3 100%);
}

#app-shell .required-hours-check,
#app-shell .required-hours-shield {
  display: inline-grid;
  place-items: center;
  color: #ffffff;
  background: linear-gradient(145deg, #29c16f, #16834a);
  box-shadow: 0 18px 34px rgba(22, 163, 74, 0.22);
}

#app-shell .required-hours-check {
  width: 72px;
  height: 72px;
  border-radius: 999px;
}

#app-shell .required-hours-shield {
  width: 86px;
  height: 86px;
  border-radius: 24px;
  background: linear-gradient(145deg, #57d98c, #119657);
}

#app-shell .required-hours-outcome.short .required-hours-check,
#app-shell .required-hours-outcome.short .required-hours-shield {
  background: linear-gradient(145deg, #ff865d, #e24117);
  box-shadow: 0 18px 34px rgba(226, 65, 23, 0.18);
}

#app-shell .required-hours-check svg,
#app-shell .required-hours-shield svg,
#app-shell .required-hours-card-heading svg,
#app-shell .required-hours-key-icon svg {
  width: 24px;
  height: 24px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

#app-shell .required-hours-shield svg {
  width: 58px;
  height: 58px;
  fill: currentColor;
  stroke: rgba(255, 255, 255, 0.86);
}

#app-shell .required-hours-outcome-title {
  margin: 0.15rem 0 0.35rem;
  color: #17243d;
  font-size: 1.45rem;
  font-weight: 850;
  line-height: 1.15;
}

#app-shell .required-hours-outcome-metrics {
  display: grid;
  grid-template-columns: repeat(2, minmax(150px, 1fr));
  gap: 1.25rem;
  padding-left: 1.35rem;
  border-left: 1px solid #dbe5f1;
}

#app-shell .required-hours-outcome-metrics span {
  display: grid;
  gap: 0.22rem;
}

#app-shell .required-hours-outcome-metrics small,
#app-shell .required-hours-key-card h4 {
  color: #6a7891;
  font-size: 0.74rem;
  font-weight: 850;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

#app-shell .required-hours-outcome-metrics strong {
  color: #159651;
  font-size: 1.35rem;
  line-height: 1.1;
}

#app-shell .required-hours-outcome.short .required-hours-outcome-metrics strong {
  color: #e24117;
}

#app-shell .required-hours-outcome-metrics em {
  color: #52617b;
  font-size: 0.82rem;
  font-style: normal;
}

#app-shell .required-hours-layout {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  grid-template-areas:
    "pace projection key"
    "progress progress progress";
  gap: 1rem;
  align-items: stretch;
  margin-top: 1rem;
}

#app-shell .required-hours-main {
  display: contents;
}

#app-shell .required-hours-card,
#app-shell .required-hours-key-card {
  border: 1px solid #dfe7f3;
  border-radius: 16px;
  background: #ffffff;
  box-shadow: 0 12px 28px rgba(23, 36, 61, 0.05);
}

#app-shell .required-hours-card {
  padding: 1rem;
}

#app-shell .required-hours-pace-card,
#app-shell .required-hours-projection-card {
  display: grid;
  grid-template-rows: auto 225px minmax(48px, auto) auto;
}

#app-shell .required-hours-progress-card {
  grid-area: progress;
}

#app-shell .required-hours-pace-card {
  grid-area: pace;
}

#app-shell .required-hours-projection-card {
  grid-area: projection;
}

#app-shell .required-hours-key-card {
  grid-area: key;
  display: grid;
  grid-template-rows: auto minmax(0, 1fr);
  min-width: 0;
}

#app-shell .required-hours-key-list {
  align-content: space-between;
}

#app-shell .required-hours-key-list > div {
  gap: 0.65rem;
  padding: 0.62rem 0;
}

#app-shell .required-hours-card-heading {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  min-height: 36px;
}

#app-shell .required-hours-card-heading > span,
#app-shell .required-hours-key-icon {
  display: inline-grid;
  place-items: center;
  width: 36px;
  height: 36px;
  flex: 0 0 36px;
  border-radius: 10px;
  background: #edf5ff;
  color: #2563eb;
}

#app-shell .required-hours-card-heading h4 {
  flex: 1;
  margin: 0;
  color: #17243d;
  font-size: 0.95rem;
  font-weight: 850;
  text-transform: uppercase;
}

#app-shell .required-hours-card-heading small {
  font-weight: 650;
  text-transform: none;
}

#app-shell .required-hours-card-heading em {
  padding: 0.45rem 0.7rem;
  border-radius: 9px;
  background: #f1fff6;
  color: #16834a;
  font-size: 0.76rem;
  font-style: normal;
  font-weight: 800;
}

#app-shell .required-hours-card-heading em.behind,
#app-shell .required-hours-card-heading em.warning {
  background: #fff4ed;
  color: #e24117;
}

#app-shell .required-hours-speedometer {
  --gauge-needle: 0deg;
  position: relative;
  width: min(360px, 100%);
  height: 206px;
  margin: 1.15rem auto 0;
}

#app-shell .required-hours-speedometer::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: 29%;
  width: 17px;
  height: 17px;
  border: 3px solid #ffffff;
  border-radius: 999px;
  background: #12244b;
  box-shadow: 0 7px 15px rgba(18, 36, 75, 0.2);
  transform: translate(-50%, 50%);
  z-index: 3;
}

#app-shell .required-hours-speedometer-arc,
#app-shell .required-hours-arc-track,
#app-shell .required-hours-arc-fill {
  position: absolute;
  inset: 0;
  border-radius: 999px 999px 18px 18px;
  clip-path: polygon(0 0, 100% 0, 100% 72%, 0 72%);
}

#app-shell .required-hours-speedometer-arc {
  background: conic-gradient(from 235deg at 50% 75%, #e24117 0 24%, #f59e0b 24% 60%, #22c55e 60% 100%);
  mask: radial-gradient(circle at 50% 75%, transparent 0 45%, #000 46% 58%, transparent 59%);
}

#app-shell .required-hours-speedometer-needle {
  position: absolute;
  left: 50%;
  bottom: calc(29% - 5px);
  width: 35%;
  height: 10px;
  border-radius: 999px 3px 3px 999px;
  background: #12244b;
  clip-path: polygon(0 0, 100% 43%, 100% 57%, 0 100%);
  transform-origin: left center;
  transform: rotate(var(--gauge-needle));
  box-shadow: 0 6px 12px rgba(18, 36, 75, 0.18);
  z-index: 1;
}

#app-shell .required-hours-speedometer-needle::before {
  content: none;
}

#app-shell .required-hours-speedometer-center,
#app-shell .required-hours-arc-center {
  position: absolute;
  inset: auto 0 18%;
  display: grid;
  justify-items: center;
  gap: 0.1rem;
  z-index: 2;
}

#app-shell .required-hours-speedometer-center {
  bottom: 44%;
  pointer-events: none;
  z-index: 4;
}

#app-shell .required-hours-speedometer-center strong,
#app-shell .required-hours-arc-center strong {
  color: #e24117;
  font-size: 1.55rem;
  line-height: 1;
}

#app-shell .required-hours-arc-center strong {
  color: #16a34a;
  font-size: 2.1rem;
}

#app-shell .required-hours-speedometer-center span,
#app-shell .required-hours-arc-center span {
  color: #52617b;
  font-size: 0.82rem;
  font-weight: 600;
}

#app-shell .required-hours-gauge-min,
#app-shell .required-hours-gauge-mid,
#app-shell .required-hours-gauge-max {
  position: absolute;
  color: #53627d;
  font-size: 0.76rem;
  font-weight: 650;
}

#app-shell .required-hours-gauge-min { left: 10%; bottom: 16%; }
#app-shell .required-hours-gauge-mid { left: 50%; top: -1%; transform: translateX(-50%); }
#app-shell .required-hours-gauge-max { right: 8%; bottom: 16%; }

#app-shell .required-hours-comparison {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  align-content: center;
  gap: 0.8rem;
  margin-top: 0.4rem;
}

#app-shell .required-hours-comparison span,
#app-shell .required-hours-projected-total {
  display: grid;
  align-content: center;
  justify-items: center;
  gap: 0.15rem;
  margin: 0;
}

#app-shell .required-hours-comparison strong,
#app-shell .required-hours-projected-total strong {
  color: #17243d;
  font-size: 1.15rem;
}

#app-shell .required-hours-comparison small,
#app-shell .required-hours-projected-total span {
  color: #52617b;
  font-size: 0.82rem;
  font-weight: 650;
}

#app-shell .required-hours-alert {
  margin: 1rem 0 0;
  padding: 0.65rem 0.8rem;
  border: 1px solid #d3eadc;
  border-radius: 10px;
  background: #f4fff8;
  color: #236143;
  text-align: center;
  font-size: 0.86rem;
  font-weight: 650;
}

#app-shell .required-hours-alert.warning {
  border-color: #ffd2be;
  background: #fff7f0;
  color: #e24117;
}

#app-shell .required-hours-arc-gauge {
  --projection-progress: 0%;
  position: relative;
  width: min(360px, 100%);
  height: 206px;
  margin: 1.15rem auto 0;
}

#app-shell .required-hours-arc-svg {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  overflow: visible;
  z-index: 1;
}

#app-shell .required-hours-arc-track-path,
#app-shell .required-hours-arc-fill-path {
  fill: none;
  stroke-width: 34;
  stroke-linecap: round;
  stroke-linejoin: round;
}

#app-shell .required-hours-arc-track-path {
  stroke: #e8eef6;
}

#app-shell .required-hours-arc-fill-path {
  stroke: #1fb565;
  filter: drop-shadow(0 7px 12px rgba(22, 163, 74, 0.12));
}

#app-shell .required-hours-arc-track {
  background: #e8eef6;
  mask: radial-gradient(circle at 50% 100%, transparent 0 56%, #000 57% 69%, transparent 70%);
}

#app-shell .required-hours-arc-fill {
  background: conic-gradient(from 250deg at 50% 100%, #1fb565 0 var(--projection-progress), transparent var(--projection-progress) 100%);
  mask: radial-gradient(circle at 50% 100%, transparent 0 56%, #000 57% 69%, transparent 70%);
}

#app-shell .required-hours-required-line {
  stroke: #334155;
  stroke-width: 3.5;
  stroke-linecap: round;
  filter: drop-shadow(0 2px 4px rgba(15, 23, 42, 0.16));
}

#app-shell .required-hours-required-label {
  fill: #52617b;
  font-size: 9px;
  font-weight: 750;
  dominant-baseline: middle;
  paint-order: stroke;
  stroke: #ffffff;
  stroke-width: 3px;
  stroke-linejoin: round;
}

#app-shell .required-hours-arc-svg.required-marker-hidden .required-hours-required-line,
#app-shell .required-hours-arc-svg.required-marker-hidden .required-hours-required-label {
  display: none;
}

#app-shell .required-hours-key-card {
  padding: 1.05rem;
}

#app-shell .required-hours-key-card h4 {
  margin: 0 0 0.9rem;
}

#app-shell .required-hours-key-list {
  display: grid;
}

#app-shell .required-hours-key-list > div {
  display: grid;
  grid-template-columns: 40px minmax(0, 1fr) auto;
  gap: 0.65rem;
  align-items: center;
  padding: 0.62rem 0;
  border-bottom: 1px solid #e8eef7;
}

#app-shell .required-hours-key-list > div:last-child {
  border-bottom: 0;
}

#app-shell .required-hours-key-list span:not(.required-hours-key-icon) {
  color: #44536d;
  font-size: 0.78rem;
  font-weight: 750;
  text-transform: uppercase;
}

#app-shell .required-hours-key-list strong {
  color: #17243d;
  font-size: 1.05rem;
  white-space: nowrap;
}

#app-shell .required-hours-key-list strong.positive {
  color: #16a34a;
}

#app-shell .required-hours-key-list strong.negative {
  color: #e24117;
}

#app-shell .required-hours-key-icon.positive,
#app-shell .required-hours-key-icon.success {
  background: #eafaf0;
  color: #16a34a;
}

#app-shell .required-hours-key-icon.negative {
  background: #fff1ea;
  color: #e24117;
}

#app-shell .required-hours-progress-chart {
  margin-top: 0.7rem;
  min-width: 0;
  max-width: 100%;
  overflow-x: hidden;
}

#app-shell .required-hours-progress-legend {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem 1.3rem;
  margin: 0.2rem 0 0.6rem;
  color: #53627d;
  font-size: 0.78rem;
  font-weight: 650;
}

#app-shell .required-hours-progress-legend span {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
}

#app-shell .required-hours-progress-legend i {
  width: 24px;
  height: 3px;
  border-radius: 999px;
}

#app-shell .required-hours-progress-legend i.dashed {
  background: repeating-linear-gradient(90deg, #94a3b8 0 8px, transparent 8px 14px) !important;
}

#app-shell .required-hours-progress-legend i.dotted {
  background: repeating-linear-gradient(90deg, #16a34a 0 3px, transparent 3px 9px) !important;
}

#app-shell .required-hours-chart {
  width: 100%;
  max-width: 100%;
  min-width: 0;
}

#app-shell .required-hours-logged-line {
  stroke: #2563eb;
}

#app-shell .required-hours-expected-line {
  stroke: #94a3b8;
  stroke-width: 2;
  stroke-dasharray: 8 6;
}

#app-shell .required-hours-projected-line {
  stroke: #16a34a;
  stroke-width: 3;
  stroke-linecap: round;
  stroke-dasharray: 2 9;
}

#app-shell .required-hours-required-line {
  stroke: #8b5cf6;
  stroke-width: 2;
}

#app-shell .required-hours-today-line {
  stroke: #cbd5e1;
  stroke-width: 1;
  stroke-dasharray: 4 4;
}

#app-shell .required-hours-chart-badge,
#app-shell .required-hours-chart-label {
  fill: #ffffff;
  font-size: 11px;
  font-weight: 850;
}

#app-shell .required-hours-chart-badge {
  paint-order: stroke;
  stroke: #2563eb;
  stroke-width: 10px;
  stroke-linejoin: round;
}

#app-shell .required-hours-chart-label.projected {
  fill: #ffffff;
  paint-order: stroke;
  stroke: #16a34a;
  stroke-width: 10px;
  stroke-linejoin: round;
}

#app-shell .required-hours-chart-label.required {
  fill: #ffffff;
  paint-order: stroke;
  stroke: #8b5cf6;
  stroke-width: 10px;
  stroke-linejoin: round;
}

#app-shell .required-hours-footnote {
  margin: 0.4rem 0 0;
  color: #52617b;
  text-align: center;
  font-size: 0.82rem;
}

#app-shell .student-analytics-row td {
  vertical-align: middle;
}

#app-shell .student-analytics-name {
  display: flex;
  align-items: center;
  gap: 0.45rem;
  min-width: 210px;
}

#app-shell .student-analytics-avatar {
  width: 2rem;
  height: 2rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 999px;
  background: linear-gradient(135deg, #e8f0ff 0%, #eaf7ef 100%);
  color: #1761ae;
  font-size: 0.78rem;
  font-weight: 800;
  flex: 0 0 auto;
}

#app-shell .student-analytics-name span {
  display: grid;
  gap: 0.05rem;
  color: #14233b;
  font-weight: 700;
}

#app-shell .student-analytics-name small {
  color: #6b778c;
  font-size: 0.72rem;
  font-weight: 600;
}

#app-shell .hours-analytics-cell {
  display: grid;
  gap: 0.3rem;
  min-width: 132px;
}

#app-shell .hours-analytics-cell span {
  color: #263755;
  font-size: 0.86rem;
  font-weight: 700;
  white-space: nowrap;
}

#app-shell .hours-analytics-cell i {
  height: 6px;
  overflow: hidden;
  border-radius: 999px;
  background: #e8edf4;
}

#app-shell .hours-analytics-cell b {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, #1761ae 0%, #2f8f68 100%);
}

#app-shell .attendance-analytics-cell b {
  background: linear-gradient(90deg, #16a34a 0%, #2f8f68 100%);
}

#app-shell .dashboard-summary-note {
  color: #6b778c;
  font-size: 0.88rem;
  line-height: 1.35;
}

#app-shell .dashboard-final-projection-line {
  display: inline-block;
  margin-top: 0.18rem;
}

#app-shell .dashboard-inline-link {
  appearance: none;
  padding: 0;
  border: 0;
  background: transparent;
  color: #155bc3;
  font: inherit;
  font-weight: 850;
  text-decoration: underline;
  text-underline-offset: 2px;
  cursor: pointer;
}

#app-shell .dashboard-inline-link:hover,
#app-shell .dashboard-inline-link:focus-visible {
  color: #0f438f;
}

#app-shell .dashboard-pill-metric {
  min-width: 82px;
  border: 1px solid #cfe0f3;
  border-radius: 999px;
  background: #f4f8fd;
  color: #155bc3;
  box-shadow: none;
}

#app-shell .dashboard-section .table-wrap,
#app-shell .dashboard-section .chart-wrap {
  margin-top: 0.9rem;
  border: 1px solid #e3eaf4;
  border-radius: 14px;
  background: #ffffff;
  overflow: auto;
}

#app-shell .dashboard-section table {
  width: 100%;
}

#app-shell .dashboard-section th {
  background: #f7f9fc;
  color: #68778d;
  font-size: 0.72rem;
  letter-spacing: 0.04em;
}

#app-shell .dashboard-section td {
  background: #ffffff;
}

#app-shell .dashboard-section-placeholder {
  padding: 1rem;
  border-style: dashed;
  background: #f8fafc;
}

#app-shell .dashboard-section-student-performance {
  padding: 1.35rem;
  min-width: 0;
  max-width: 100%;
  overflow-x: clip;
  border-color: #dfe7f3;
  border-radius: 18px;
  background: #ffffff;
  box-shadow: 0 18px 44px rgba(23, 36, 61, 0.06);
}

#app-shell .student-performance-toolbar {
  display: grid;
  grid-template-columns: minmax(300px, 1fr) minmax(520px, 0.95fr);
  gap: 1.25rem;
  align-items: start;
  margin-bottom: 1.35rem;
}

#app-shell .student-performance-heading {
  display: flex;
  align-items: flex-start;
  gap: 0.9rem;
}

#app-shell .student-performance-heading h3 {
  margin: 0;
  color: #17243d;
  font-size: 1.45rem;
  line-height: 1.1;
}

#app-shell .student-performance-heading .muted {
  margin: 0.45rem 0 0;
  color: #596986;
  font-size: 0.95rem;
}

#app-shell .student-performance-heading-icon {
  display: inline-grid;
  place-items: center;
  width: 46px;
  height: 46px;
  flex: 0 0 46px;
  border-radius: 12px;
  background: linear-gradient(145deg, #eef5ff, #dceaff);
  color: #336ce8;
  box-shadow: 0 10px 24px rgba(51, 108, 232, 0.16);
}

#app-shell .student-performance-heading-icon svg,
#app-shell .student-performance-trend svg {
  width: 21px;
  height: 21px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

#app-shell .dashboard-section-course-watchlist {
  position: relative;
  overflow: hidden;
}

#app-shell .dashboard-section-course-watchlist::before {
  content: "";
  position: absolute;
  inset: 0 0 auto;
  height: 4px;
  background: linear-gradient(90deg, #336ce8, #8e4de6 48%, #f19012);
}

#app-shell .course-watchlist-toolbar {
  grid-template-columns: minmax(300px, 1fr) auto;
  align-items: center;
}

#app-shell .course-watchlist-heading-icon {
  background: linear-gradient(145deg, #fff7ed, #ffedd5);
  color: #f19012;
  box-shadow: 0 10px 24px rgba(241, 144, 18, 0.16);
}

#app-shell .course-watchlist-summary {
  display: grid;
  min-width: 148px;
  justify-items: end;
  gap: 0.35rem;
}

#app-shell .course-watchlist-summary-label {
  color: #5f6f89;
  font-size: 0.72rem;
  font-weight: 850;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

#app-shell .course-watchlist-count {
  min-width: 74px;
  border-color: #c8dcff;
  background: linear-gradient(145deg, #ffffff, #edf5ff);
  color: #255fd6;
  box-shadow: 0 10px 22px rgba(51, 108, 232, 0.12);
}

#app-shell #student-performance-filter-form {
  display: grid;
  grid-template-columns: minmax(320px, 1.1fr) minmax(280px, 0.9fr);
  gap: 1rem;
  align-items: end;
  margin: 0;
}

#app-shell .student-performance-grade-method-field {
  display: grid;
  gap: 0.45rem;
}

#app-shell .student-performance-grade-method-field legend,
#app-shell #student-performance-filter-form > label {
  color: #68768d;
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

#app-shell .student-performance-grade-method-options {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem 0.75rem;
  min-height: 42px;
  align-items: center;
}

#app-shell .student-performance-grade-method-chip {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  min-height: 22px;
  color: #233451;
  font-size: 0.83rem;
  font-weight: 700;
  line-height: 1.2;
  white-space: nowrap;
  cursor: pointer;
}

#app-shell .student-performance-grade-method-chip input {
  width: 14px;
  height: 14px;
  margin: 0;
  accent-color: #2f6fe4;
  cursor: pointer;
}

#app-shell #student-performance-filter-form .multi-select-dropdown,
#app-shell #student-performance-filter-form .multi-select-dropdown summary {
  width: 100%;
  min-width: 0;
}

#app-shell #student-performance-filter-form .multi-select-dropdown {
  border-color: #dce6f4;
  border-radius: 9px;
  box-shadow: 0 8px 20px rgba(23, 36, 61, 0.04);
}

#app-shell #student-performance-filter-form .multi-select-dropdown summary {
  min-height: 42px;
  padding: 0.55rem 0.75rem;
  color: #233451;
  font-weight: 650;
}

#app-shell .student-performance-table-wrap {
  margin-top: 0;
  min-width: 0;
  max-width: 100%;
  border-color: #dfe7f3;
  border-radius: 14px;
  box-shadow: none;
}

#app-shell .student-performance-table {
  border-collapse: separate;
  border-spacing: 0;
  min-width: 1040px;
  font-size: 0.86rem;
}

#app-shell .student-performance-table th,
#app-shell .student-performance-table td {
  height: 42px;
  padding: 0.5rem 0.58rem;
  border-bottom: 1px solid #e7edf6;
  border-right: 1px solid #edf2f8;
  vertical-align: middle;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

#app-shell .student-performance-table th:last-child,
#app-shell .student-performance-table td:last-child {
  border-right: 0;
}

#app-shell .student-performance-table th {
  background: #f8fafd;
  color: #32405a;
  font-size: 0.68rem;
  font-weight: 850;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

#app-shell .course-watchlist-table {
  min-width: 980px;
}

#app-shell .course-watchlist-table th,
#app-shell .course-watchlist-table td {
  text-align: center;
}

#app-shell .course-watchlist-table th:first-child,
#app-shell .course-watchlist-table td:first-child,
#app-shell .course-watchlist-table th:nth-child(2),
#app-shell .course-watchlist-table td:nth-child(2),
#app-shell .course-watchlist-table th:nth-child(3),
#app-shell .course-watchlist-table td:nth-child(3) {
  text-align: left;
}

#app-shell .course-watchlist-table td:first-child {
  color: #14233d;
  font-weight: 800;
}

#app-shell .course-watchlist-table td:nth-child(2) {
  color: #253b63;
  font-weight: 700;
}

#app-shell .course-watchlist-table tbody tr {
  background: linear-gradient(90deg, rgba(255, 248, 232, 0.68), rgba(255, 255, 255, 0) 34%);
}

#app-shell .course-watchlist-click-row {
  cursor: pointer;
  transition: background 160ms ease, box-shadow 160ms ease, transform 160ms ease;
}

#app-shell .course-watchlist-click-row:hover,
#app-shell .course-watchlist-click-row:focus-visible {
  background: linear-gradient(90deg, rgba(255, 242, 213, 0.92), rgba(255, 255, 255, 0.2) 42%);
  box-shadow: inset 4px 0 0 #f19012;
  outline: none;
  transform: translateY(-1px);
}

#app-shell .course-watchlist-grade-chip,
#app-shell .course-watchlist-status {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 26px;
  border-radius: 999px;
  font-weight: 850;
  white-space: nowrap;
}

#app-shell .course-watchlist-grade-chip {
  min-width: 34px;
  border: 1px solid #d8e3f3;
  background: #f6f9ff;
  color: #253b63;
}

#app-shell .course-watchlist-status {
  min-width: 84px;
  padding: 0.2rem 0.65rem;
  border: 1px solid #f5dea6;
  background: #fff8e8;
  color: #b86b00;
  box-shadow: 0 8px 18px rgba(241, 144, 18, 0.1);
}

#app-shell .student-performance-table td:first-child {
  color: #14233d;
  font-weight: 750;
}

#app-shell .student-performance-row-title {
  display: inline-block;
  min-width: 0;
  max-width: calc(100% - 34px);
  margin-left: 0.34rem;
  overflow: hidden;
  text-overflow: ellipsis;
  vertical-align: middle;
}

#app-shell .student-performance-subject-row td:first-child {
  padding-left: 1.55rem;
}

#app-shell .student-performance-subject-row .student-performance-row-title {
  max-width: calc(100% - 82px);
}

#app-shell .student-performance-type-row td:first-child {
  padding-left: 2.35rem;
  color: #31435f;
  font-weight: 650;
}

#app-shell .student-performance-type-row .student-performance-row-title {
  max-width: calc(100% - 98px);
}

#app-shell .student-performance-branch {
  display: inline-block;
  width: 16px;
  height: 22px;
  margin-right: 0.22rem;
  border-left: 1px solid #cfd9e8;
  border-bottom: 1px solid #cfd9e8;
  transform: translateY(-5px);
}

#app-shell .student-performance-type-icon {
  display: inline-grid;
  place-items: center;
  width: 28px;
  height: 28px;
  border: 1px solid #dfe8f5;
  border-radius: 9px;
  background: #f6f9ff;
  color: #4775e9;
  font-size: 0.72rem;
  font-weight: 900;
}

#app-shell .student-performance-type-icon-img,
#app-shell .grade-type-icon-img {
  width: 17px;
  height: 17px;
  object-fit: contain;
}

#app-shell .student-avg-toggle {
  display: inline-grid;
  place-items: center;
  width: 22px;
  height: 22px;
  padding: 0;
  border: 0;
  border-radius: 999px;
  background: #336ce8;
  color: #ffffff;
  font-weight: 900;
  box-shadow: 0 6px 14px rgba(51, 108, 232, 0.18);
}

#app-shell .student-avg-toggle-glyph {
  line-height: 1;
}

#app-shell .student-performance-average-cell,
#app-shell .student-performance-no-grades {
  display: inline-flex;
  align-items: center;
  gap: 0.24rem;
  color: #253b63;
  font-size: 0.8rem;
  font-weight: 650;
  line-height: 1;
  white-space: nowrap;
}

#app-shell .student-performance-score-pill {
  display: inline-flex;
  min-width: 44px;
  justify-content: center;
  padding: 0.12rem 0.34rem;
  border-radius: 999px;
  font-size: 0.8rem;
  font-weight: 850;
  line-height: 1.1;
}

#app-shell .student-performance-score-pill.excellent {
  border: 1px solid #bde7c2;
  background: #effaf0;
  color: #08751c;
}

#app-shell .student-performance-score-pill.strong {
  border: 1px solid #c8e2ff;
  background: #f0f7ff;
  color: #1761ae;
}

#app-shell .student-performance-score-pill.watch {
  border: 1px solid #f5dea6;
  background: #fff8e8;
  color: #b86b00;
}

#app-shell .student-performance-score-pill.risk,
#app-shell .student-performance-score-pill.critical {
  border: 1px solid #f4c7bd;
  background: #fff1ee;
  color: #d93d18;
}

#app-shell .student-performance-average-separator,
#app-shell .student-performance-no-grades {
  color: #72809a;
}

#app-shell .student-performance-trend {
  color: #21a344;
}

#app-shell .student-performance-trend svg {
  width: 16px;
  height: 16px;
}

#app-shell #dashboard-section-student-performance .student-performance-table-wrap {
  overflow-x: hidden;
}

#app-shell #dashboard-section-student-performance .student-performance-table {
  width: 100%;
  min-width: 0;
  table-layout: fixed;
}

#app-shell #dashboard-section-student-performance .student-performance-table th:first-child,
#app-shell #dashboard-section-student-performance .student-performance-table td:first-child {
  width: 23%;
}

#app-shell #dashboard-section-student-performance .student-performance-table th:nth-child(2),
#app-shell #dashboard-section-student-performance .student-performance-table td:nth-child(2) {
  width: 8%;
}

#app-shell #dashboard-section-student-performance .student-performance-table th:nth-child(n+3),
#app-shell #dashboard-section-student-performance .student-performance-table td:nth-child(n+3) {
  width: 13.8%;
}

#app-shell .student-performance-trend.watch {
  color: #f19012;
}

#app-shell .student-performance-trend.risk,
#app-shell .student-performance-trend.critical {
  color: #d93d18;
}

#app-shell .quarter-dot {
  display: inline-block;
  width: 7px;
  height: 7px;
  margin-right: 0.45rem;
  border-radius: 999px;
  vertical-align: 0.08em;
}

#app-shell .quarter-dot.total,
#app-shell .quarter-dot.q1 {
  background: #336ce8;
}

#app-shell .quarter-dot.q2 {
  background: #4fb45b;
}

#app-shell .quarter-dot.q3 {
  background: #8e4de6;
}

#app-shell .quarter-dot.q4 {
  background: #f19012;
}

#app-shell .dashboard-section-volume.dashboard-section-student-performance {
  padding: 1.7rem 1.85rem 1.35rem;
  border-color: #dfe7f3;
  border-radius: 16px;
  background: #ffffff;
  box-shadow: 0 18px 44px rgba(23, 36, 61, 0.06);
}

#app-shell .grade-type-volume-toolbar {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.2rem;
  margin-bottom: 1.25rem;
}

#app-shell .grade-type-volume-toolbar > .student-performance-heading h3 {
  color: #17243d;
  font-size: 1.45rem;
  line-height: 1.1;
  letter-spacing: 0;
}

#app-shell .grade-type-volume-toolbar > .student-performance-heading .muted {
  color: #596986;
  font-size: 0.95rem;
}

#app-shell .grade-type-volume-heading-icon {
  width: 46px;
  height: 46px;
  flex-basis: 46px;
  background: linear-gradient(145deg, #eef5ff, #dceaff);
  color: #2563eb;
  box-shadow: 0 10px 24px rgba(37, 99, 235, 0.16);
}

#app-shell #volume-filter-form.grade-type-volume-filter-form,
#app-shell #compliance-hours-filter-form.grade-type-volume-filter-form {
  display: grid;
  grid-template-columns: minmax(190px, 1.35fr) minmax(106px, 0.72fr) minmax(130px, 0.95fr) minmax(140px, 1fr) minmax(140px, 1fr) auto;
  gap: 0.85rem;
  align-items: end;
  margin: 0;
}

#app-shell #compliance-hours-filter-form.grade-type-volume-filter-form {
  grid-template-columns: minmax(250px, 1.35fr) minmax(190px, 0.9fr) minmax(210px, 1fr) minmax(210px, 1fr) auto;
  margin-bottom: 1.15rem;
}

#app-shell #volume-filter-form.grade-type-volume-filter-form > label,
#app-shell #compliance-hours-filter-form.grade-type-volume-filter-form > label {
  color: #5f6f89;
  font-size: 0.72rem;
  font-weight: 850;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

#app-shell #volume-filter-form.grade-type-volume-filter-form select,
#app-shell #volume-filter-form.grade-type-volume-filter-form .multi-select-dropdown,
#app-shell #volume-filter-form.grade-type-volume-filter-form .multi-select-dropdown summary,
#app-shell #compliance-hours-filter-form.grade-type-volume-filter-form select,
#app-shell #compliance-hours-filter-form.grade-type-volume-filter-form .multi-select-dropdown,
#app-shell #compliance-hours-filter-form.grade-type-volume-filter-form .multi-select-dropdown summary {
  width: 100%;
  max-width: none;
  min-width: 0;
}

#app-shell #volume-filter-form.grade-type-volume-filter-form select,
#app-shell #volume-filter-form.grade-type-volume-filter-form .multi-select-dropdown,
#app-shell #compliance-hours-filter-form.grade-type-volume-filter-form select,
#app-shell #compliance-hours-filter-form.grade-type-volume-filter-form .multi-select-dropdown {
  border-color: #dce6f4;
  border-radius: 9px;
  background-color: #ffffff;
  box-shadow: 0 8px 20px rgba(23, 36, 61, 0.04);
}

#app-shell #volume-filter-form.grade-type-volume-filter-form select,
#app-shell #compliance-hours-filter-form.grade-type-volume-filter-form select {
  min-height: 42px;
  padding-left: 0.75rem;
  color: #233451;
  font-size: 0.9rem;
  font-weight: 700;
}

#app-shell #compliance-hours-filter-form.grade-type-volume-filter-form select {
  padding-left: 2.75rem;
  color: #152545;
  font-size: inherit;
  font-weight: 750;
}

#app-shell #volume-filter-form.grade-type-volume-filter-form label,
#app-shell #compliance-hours-filter-form.grade-type-volume-filter-form label {
  position: relative;
}

#app-shell #volume-filter-form.grade-type-volume-filter-form label:nth-of-type(2)::after,
#app-shell #volume-filter-form.grade-type-volume-filter-form label:nth-of-type(3)::after,
#app-shell #volume-filter-form.grade-type-volume-filter-form label:nth-of-type(4)::after,
#app-shell #volume-filter-form.grade-type-volume-filter-form label:nth-of-type(5)::after {
  content: none;
}

#app-shell #compliance-hours-filter-form.grade-type-volume-filter-form label:nth-of-type(2)::after,
#app-shell #compliance-hours-filter-form.grade-type-volume-filter-form label:nth-of-type(3)::after,
#app-shell #compliance-hours-filter-form.grade-type-volume-filter-form label:nth-of-type(4)::after {
  content: "";
  position: absolute;
  left: 0.75rem;
  bottom: 0.72rem;
  width: 18px;
  height: 18px;
  border: 2px solid #2370f4;
  border-radius: 5px;
  box-shadow: inset 6px 0 0 rgba(35, 112, 244, 0.14);
}

#app-shell #volume-filter-form.grade-type-volume-filter-form .multi-select-dropdown summary,
#app-shell #compliance-hours-filter-form.grade-type-volume-filter-form .multi-select-dropdown summary {
  min-height: 42px;
  padding: 0.62rem 0.75rem;
  color: #233451;
  font-size: 0.9rem;
  font-weight: 700;
  letter-spacing: 0;
  text-transform: none;
}

#app-shell #volume-filter-form.grade-type-volume-filter-form .multi-select-dropdown summary span:last-child,
#app-shell #compliance-hours-filter-form.grade-type-volume-filter-form .multi-select-dropdown summary span:last-child {
  min-width: 0;
}

#app-shell #volume-filter-form.grade-type-volume-filter-form .volume-filter-icon {
  display: none;
}

#app-shell .volume-filter-icon,
#app-shell .grade-type-volume-table-toggle span:first-child {
  display: inline-grid;
  place-items: center;
  width: 21px;
  height: 21px;
  color: #2370f4;
}

#app-shell .volume-filter-icon svg,
#app-shell .grade-type-volume-table-toggle svg,
#app-shell .grade-type-volume-metric-icon svg {
  width: 20px;
  height: 20px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

#app-shell #volume-clear-filters-btn,
#app-shell #compliance-hours-clear-filters-btn {
  min-height: 42px;
  padding: 0 1rem;
  border: 1px solid #2f6df6;
  border-radius: 9px;
  background: #ffffff;
  color: #2563eb;
  font-size: 0.9rem;
  font-weight: 700;
  box-shadow: 0 8px 18px rgba(37, 99, 235, 0.08);
}

#app-shell #volume-clear-filters-btn,
#app-shell #compliance-hours-clear-filters-btn,
#app-shell .grade-type-volume-table-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.45rem;
}

#app-shell .grade-type-volume-chart-wrap {
  margin-top: 0;
  padding: 0;
  border: 0;
  background: transparent;
}

#app-shell .grade-type-volume-panel {
  padding: 1.25rem 1.25rem 0.9rem;
  border: 1px solid #dfe7f3;
  border-radius: 14px;
  background: #ffffff;
  box-shadow: 0 14px 34px rgba(23, 36, 61, 0.04);
}

#app-shell .grade-type-volume-panel-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: 1.1rem;
}

#app-shell .grade-type-volume-panel-header h4 {
  margin: 0;
  color: #17243d;
  font-size: 1.25rem;
  line-height: 1.1;
}

#app-shell .grade-type-volume-panel-header .muted {
  margin-top: 0.35rem;
  font-size: 0.95rem;
}

#app-shell .grade-type-volume-table-toggle {
  min-height: 42px;
  padding: 0 1.2rem;
  border: 0;
  border-radius: 999px;
  background: linear-gradient(145deg, #eef5ff, #e7f0ff);
  color: #2370f4;
  font-weight: 850;
  box-shadow: 0 10px 22px rgba(51, 108, 232, 0.12);
}

#app-shell .grade-type-volume-chart-scroll {
  overflow-x: auto;
}

#app-shell .grade-type-volume-chart-wrap .trend-chart {
  min-width: 940px;
}

#app-shell .grade-type-volume-bar {
  opacity: 0.96;
  filter: drop-shadow(0 5px 8px rgba(23, 36, 61, 0.12));
}

#app-shell .grade-type-volume-value {
  font-size: 11px;
  font-weight: 900;
}

#app-shell .compliance-hours-volume-value {
  font-size: 9px;
  font-weight: 850;
}

#app-shell .compliance-hours-line {
  filter: drop-shadow(0 5px 8px rgba(23, 36, 61, 0.1));
}

#app-shell .grade-type-volume-table-wrap {
  overflow-x: auto;
}

#app-shell .grade-type-volume-table {
  min-width: 720px;
}

#app-shell .grade-type-volume-table th,
#app-shell .grade-type-volume-table td {
  text-align: center;
}

#app-shell .grade-type-volume-table th:first-child,
#app-shell .grade-type-volume-table td:first-child {
  text-align: left;
}

#app-shell .grade-type-volume-chart-wrap .volume-legend-box {
  width: 10px;
  height: 10px;
  border-radius: 3px;
}

#app-shell .grade-type-volume-chart-wrap .trend-legend {
  margin-top: 0.6rem;
}

#app-shell .grade-type-volume-metrics {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  margin-top: 1rem;
  border: 1px solid #dfe7f3;
  border-radius: 14px;
  background: #ffffff;
  box-shadow: 0 14px 34px rgba(23, 36, 61, 0.04);
  overflow: hidden;
}

#app-shell .grade-type-volume-metric {
  display: grid;
  grid-template-columns: 48px minmax(0, 1fr);
  gap: 0.8rem;
  align-items: center;
  min-height: 84px;
  padding: 0.85rem 1.15rem;
  border-right: 1px solid #dfe7f3;
}

#app-shell .grade-type-volume-metric:last-child {
  border-right: 0;
}

#app-shell .grade-type-volume-metric-icon {
  display: inline-grid;
  place-items: center;
  width: 46px;
  height: 46px;
  border-radius: 12px;
  background: #f2f6ff;
  color: var(--volume-accent);
}

#app-shell .grade-type-volume-metric small,
#app-shell .grade-type-volume-metric em {
  display: block;
  color: #51617d;
  font-style: normal;
  font-weight: 650;
}

#app-shell .grade-type-volume-metric strong {
  display: block;
  color: #17243d;
  font-size: 1.4rem;
  line-height: 1.05;
}

#app-shell .dashboard-section-trending {
  padding: 1.35rem;
  border-color: #dfe7f3;
  border-radius: 18px;
  background: #ffffff;
  box-shadow: 0 18px 44px rgba(23, 36, 61, 0.06);
}

#app-shell .trend-section-heading {
  display: flex;
  align-items: flex-start;
  gap: 0.95rem;
  margin-bottom: 1.2rem;
}

#app-shell .trend-section-heading h3 {
  margin: 0;
  color: #17243d;
  font-size: 1.45rem;
  line-height: 1.1;
}

#app-shell .trend-section-heading .muted {
  margin: 0.45rem 0 0;
  color: #596986;
  font-size: 0.95rem;
}

#app-shell .trend-section-icon {
  display: inline-grid;
  place-items: center;
  width: 46px;
  height: 46px;
  flex: 0 0 46px;
  border-radius: 12px;
  background: linear-gradient(145deg, #eef5ff, #dceaff);
  color: #2563eb;
  box-shadow: 0 10px 24px rgba(37, 99, 235, 0.16);
}

#app-shell .trend-section-icon svg,
#app-shell .trend-summary-icon svg {
  width: 22px;
  height: 22px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

#app-shell #trend-filter-form,
#app-shell #instructor-grade-trend-filter-form,
#app-shell #gpa-trend-filter-form {
  display: grid;
  grid-template-columns: minmax(220px, 1.45fr) minmax(132px, 0.75fr) minmax(150px, 1fr) minmax(160px, 1fr) minmax(160px, 1fr) auto;
  gap: 0.85rem;
  align-items: end;
  margin-bottom: 1.25rem;
}

#app-shell #trend-filter-form label,
#app-shell #instructor-grade-trend-filter-form label,
#app-shell #gpa-trend-filter-form label {
  display: grid;
  gap: 0.38rem;
  color: #5f6f89;
  font-size: 0.72rem;
  font-weight: 850;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

#app-shell #trend-filter-form select,
#app-shell #trend-filter-form .multi-select-dropdown,
#app-shell #instructor-grade-trend-filter-form select,
#app-shell #instructor-grade-trend-filter-form .multi-select-dropdown,
#app-shell #gpa-trend-filter-form select,
#app-shell #gpa-trend-filter-form .multi-select-dropdown {
  min-height: 42px;
  border-color: #dce6f4;
  border-radius: 9px;
  background: #ffffff;
  color: #233451;
  box-shadow: 0 8px 20px rgba(23, 36, 61, 0.04);
}

#app-shell #trend-filter-form .multi-select-dropdown summary,
#app-shell #instructor-grade-trend-filter-form .multi-select-dropdown summary,
#app-shell #gpa-trend-filter-form .multi-select-dropdown summary {
  min-height: 42px;
  padding: 0.62rem 0.75rem;
  color: #233451;
  font-size: 0.9rem;
  font-weight: 700;
  letter-spacing: 0;
  text-transform: none;
}

#app-shell #trend-clear-filters-btn.secondary-button,
#app-shell #instructor-grade-trend-clear-filters-btn.secondary-button,
#app-shell #gpa-trend-clear-filters-btn.secondary-button {
  min-height: 42px;
  border: 1px solid #2f6df6;
  background: #ffffff;
  color: #2563eb;
  box-shadow: 0 8px 18px rgba(37, 99, 235, 0.08);
}

#app-shell .trend-chart-panel {
  padding: 1.05rem 1.1rem 0.85rem;
  border: 1px solid #dfe7f3;
  border-radius: 16px;
  background: linear-gradient(180deg, #ffffff 0%, #fbfdff 100%);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.8);
}

#app-shell .trend-chart-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: 0.45rem;
}

#app-shell .trend-view-toggle {
  display: inline-flex;
  gap: 0.35rem;
}

#app-shell .trend-view-toggle button {
  display: inline-flex;
  align-items: center;
  min-height: 32px;
  padding: 0.45rem 0.75rem;
  border: 1px solid #dce6f4;
  border-radius: 8px;
  color: #41506b;
  font-size: 0.82rem;
  font-weight: 750;
  background: #ffffff;
  cursor: pointer;
}

#app-shell .trend-view-toggle button.active {
  border-color: #d8e5ff;
  background: #eef5ff;
  color: #2563eb;
  box-shadow: 0 8px 18px rgba(37, 99, 235, 0.1);
}

#app-shell .trend-data-toggle {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  color: #2c3d5f;
  font-size: 0.82rem;
  font-weight: 700;
}

#app-shell .trend-data-toggle input {
  position: absolute;
  opacity: 0;
}

#app-shell .trend-data-toggle span:last-child {
  position: relative;
  width: 36px;
  height: 20px;
  border-radius: 999px;
  background: #2563eb;
  box-shadow: 0 6px 14px rgba(37, 99, 235, 0.24);
}

#app-shell .trend-data-toggle span:last-child::after {
  content: "";
  position: absolute;
  top: 3px;
  right: 3px;
  width: 14px;
  height: 14px;
  border-radius: 999px;
  background: #ffffff;
}

#app-shell .trend-chart {
  overflow: visible;
}

#app-shell .trend-axis {
  stroke: #d6e0ee;
  stroke-width: 1;
}

#app-shell .trend-grid {
  stroke: #dce5f2;
  stroke-dasharray: 3 4;
  stroke-width: 1;
}

#app-shell .trend-line {
  stroke-width: 2.1;
  stroke-linecap: round;
  stroke-linejoin: round;
  filter: url(#gradeTrendGlow);
}

#app-shell .trend-area {
  fill-opacity: 0.08;
}

#app-shell .trend-point {
  stroke: #ffffff !important;
  stroke-width: 2;
}

#app-shell .trend-axis-label {
  fill: #253b63;
  font-size: 12px;
  font-weight: 650;
}

#app-shell .trend-axis-title {
  fill: #17243d;
  font-size: 12px;
  font-weight: 800;
}

#app-shell .trend-value-pill rect {
  fill-opacity: 0.1;
  stroke-opacity: 0.24;
}

#app-shell .trend-value-label {
  fill: currentColor;
  font-size: 10px;
  font-weight: 850;
}

#app-shell .trend-legend {
  display: inline-flex;
  flex-wrap: wrap;
  gap: 0.65rem 1rem;
  margin: 0.1rem 0 0;
  padding: 0.5rem 0.75rem;
  border: 1px solid #e4ebf5;
  border-radius: 12px;
  background: #ffffff;
  box-shadow: 0 10px 24px rgba(23, 36, 61, 0.04);
}

#app-shell .trend-legend-item {
  color: #53627d;
  font-size: 0.82rem;
  font-weight: 650;
}

#app-shell .trend-legend-line {
  width: 24px;
  height: 3px;
}

#app-shell .trend-summary-strip {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 0;
  margin-top: 1.2rem;
  border: 1px solid #dfe7f3;
  border-radius: 16px;
  background: #ffffff;
  box-shadow: 0 12px 30px rgba(23, 36, 61, 0.05);
  overflow: hidden;
}

#app-shell .trend-summary-card {
  display: grid;
  grid-template-columns: 50px minmax(0, 1fr);
  gap: 0.75rem;
  align-items: center;
  min-height: 78px;
  padding: 0.9rem 1rem;
  border-right: 1px solid #e8eef7;
}

#app-shell .trend-summary-card:last-child {
  border-right: 0;
}

#app-shell .trend-summary-icon {
  display: inline-grid;
  place-items: center;
  width: 44px;
  height: 44px;
  border-radius: 999px;
  background: #eef5ff;
  color: #2563eb;
}

#app-shell .trend-summary-card span:not(.trend-summary-icon) {
  display: block;
  color: #53627d;
  font-size: 0.78rem;
  font-weight: 700;
}

#app-shell .trend-summary-card strong {
  display: block;
  margin-top: 0.1rem;
  color: #17243d;
  font-size: 1.25rem;
  line-height: 1.05;
}

#app-shell .trend-summary-card small {
  display: block;
  margin-top: 0.2rem;
  color: #6b7891;
  font-size: 0.78rem;
}

#app-shell .trend-summary-card.positive .trend-summary-icon,
#app-shell .trend-summary-card.positive strong {
  color: #16a34a;
}

#app-shell .trend-summary-card.positive .trend-summary-icon {
  background: #eaf8ee;
}

#app-shell .trend-summary-card.negative .trend-summary-icon,
#app-shell .trend-summary-card.negative strong {
  color: #f97316;
}

#app-shell .trend-summary-card.negative .trend-summary-icon {
  background: #fff1e8;
}

#app-shell .trend-summary-card.neutral .trend-summary-icon,
#app-shell .trend-summary-card.neutral strong {
  color: #8b5cf6;
}

#app-shell .trend-summary-card.neutral .trend-summary-icon {
  background: #f4efff;
}

@media (max-width: 1100px) {
  #app-shell .student-performance-toolbar,
  #app-shell .course-watchlist-toolbar {
    grid-template-columns: 1fr;
  }

  #app-shell .course-watchlist-summary {
    justify-items: start;
  }

  #app-shell #student-performance-filter-form {
    grid-template-columns: 1fr;
  }

  #app-shell #volume-filter-form.grade-type-volume-filter-form {
    grid-template-columns: 1fr 1fr;
  }

  #app-shell #compliance-hours-filter-form.grade-type-volume-filter-form {
    grid-template-columns: 1fr 1fr;
  }

  #app-shell .grade-type-volume-metrics {
    grid-template-columns: 1fr 1fr;
  }

  #app-shell #completion-today-filter-form {
    grid-template-columns: 1fr;
  }

  #app-shell #trend-filter-form,
  #app-shell #compliance-hours-filter-form,
  #app-shell #instructor-grade-trend-filter-form,
  #app-shell #gpa-trend-filter-form,
  #app-shell .trend-summary-strip {
    grid-template-columns: 1fr 1fr;
  }
}

@media (max-width: 720px) {
  #app-shell .student-performance-grade-method-options {
    grid-template-columns: 1fr;
  }

  #app-shell #volume-filter-form.grade-type-volume-filter-form {
    grid-template-columns: 1fr;
  }

  #app-shell #compliance-hours-filter-form {
    grid-template-columns: 1fr;
  }

  #app-shell #compliance-days-filter-form {
    grid-template-columns: 1fr;
  }

  #app-shell .grade-type-volume-panel-header {
    align-items: flex-start;
    flex-direction: column;
  }

  #app-shell .grade-type-volume-metrics {
    grid-template-columns: 1fr;
  }

  #app-shell .grade-type-volume-metric {
    border-right: 0;
    border-bottom: 1px solid #dfe7f3;
  }

  #app-shell .grade-type-volume-metric:last-child {
    border-bottom: 0;
  }

  #app-shell #trend-filter-form,
  #app-shell #instructor-grade-trend-filter-form,
  #app-shell #gpa-trend-filter-form,
  #app-shell .trend-summary-strip {
    grid-template-columns: 1fr;
  }

  #app-shell .trend-chart-toolbar {
    align-items: flex-start;
    flex-direction: column;
  }

  #app-shell .trend-summary-card {
    border-right: 0;
    border-bottom: 1px solid #e8eef7;
  }
}

#app-shell #tab-school-day.active {
  display: grid;
  gap: 0.55rem;
}

#app-shell #tab-school-day > h2:first-child {
  display: block;
  margin: 0;
  color: #17243d;
  font-size: 1.05rem;
  line-height: 1.2;
}

#app-shell .school-day-dashboard-return,
#app-shell .school-day-section {
  border: 1px solid #dfe7f1;
  border-radius: 16px;
  background: #ffffff;
  box-shadow: 0 14px 34px rgba(25, 42, 70, 0.06);
}

#app-shell .school-day-dashboard-return {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  padding: 0.45rem 0.65rem;
}

#app-shell .school-day-section {
  padding: 0.75rem;
}

#app-shell .school-day-section + .school-day-section {
  margin-top: 0;
}

#app-shell .school-day-section-shell {
  padding: 0.35rem 0.55rem;
  background: #f8fbfd;
}

#app-shell .school-day-filter-panel > summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  min-height: 32px;
  color: #41516a;
  cursor: pointer;
  font-size: 0.84rem;
  font-weight: 800;
  list-style: none;
}

#app-shell .school-day-filter-panel > summary::-webkit-details-marker {
  display: none;
}

#app-shell .school-day-filter-panel > summary::after {
  content: "+";
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.35rem;
  height: 1.35rem;
  border: 1px solid #d1deeb;
  border-radius: 999px;
  color: #155bc3;
  font-weight: 800;
}

#app-shell .school-day-filter-panel[open] > summary {
  margin-bottom: 0.5rem;
}

#app-shell .school-day-filter-panel[open] > summary::after {
  content: "-";
}

#app-shell .school-day-filter-summary {
  flex: 1;
  min-width: 0;
  color: #60718a;
  font-size: 0.8rem;
  font-weight: 650;
  overflow: hidden;
  text-align: right;
  text-overflow: ellipsis;
  white-space: nowrap;
}

#app-shell .school-day-form {
  display: grid;
  grid-template-columns:
    minmax(175px, 0.74fr)
    repeat(3, minmax(190px, 1fr))
    minmax(150px, 0.68fr);
  align-items: center;
  gap: 0.5rem 0.58rem;
}

#app-shell .school-day-form > label {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  column-gap: 0.45rem;
  min-width: 0;
  color: #5b6a80;
  font-size: 0.88rem;
  font-weight: 600;
  letter-spacing: 0;
  text-transform: none;
}

#app-shell .school-day-form input,
#app-shell .school-day-form select,
#app-shell .school-day-form .multi-select-dropdown summary {
  width: 100%;
  min-width: 0;
  min-height: 34px;
  border-radius: 12px;
  background: #ffffff;
  color: #35445a;
  font-size: 0.88rem;
  text-transform: none;
  letter-spacing: 0;
  font-weight: 400;
  box-sizing: border-box;
}

#app-shell .school-day-form select {
  border-color: #cbd8ea;
}

#app-shell .school-day-form .multi-select-dropdown {
  min-width: 0;
}

#app-shell .school-day-form .multi-select-dropdown summary {
  font-weight: 400;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

#app-shell .school-day-nav-row {
  align-items: center;
  gap: 0.5rem;
  margin: 0.35rem 0 0;
}

#app-shell .school-day-nav-row .school-day-subtabs {
  order: 2;
}

#app-shell .school-day-nav-row .school-day-quick-filters {
  order: 1;
}

#app-shell .school-day-quick-filters {
  padding: 0.18rem;
  border: 1px solid #dbe4f0;
  border-radius: 14px;
  background: #f6f9fc;
  gap: 0.18rem;
}

#app-shell .school-day-quick-filter-btn {
  min-height: 32px;
  padding: 0.34rem 0.62rem;
  border: 0;
  border-radius: 10px;
  background: transparent;
  color: #58677c;
  box-shadow: none;
  font-size: 0.9rem;
  font-weight: 500;
  white-space: nowrap;
}

#app-shell .school-day-quick-filter-btn:hover {
  background: #edf3fa;
  color: #1f3f6d;
  box-shadow: none;
  transform: none;
}

#app-shell .school-day-quick-filter-btn.active {
  background: #ffffff;
  color: #155bc3;
  box-shadow: 0 8px 18px rgba(31, 47, 69, 0.08);
}

#app-shell .school-day-subtabs {
  align-items: flex-end;
  gap: 0.28rem;
  padding: 0;
  border: 0;
  border-bottom: 1px solid #d7e2ef;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}

#app-shell .school-day-subtabs .subtab-btn {
  min-height: 34px;
  padding: 0.36rem 0.78rem 0.42rem;
  border: 0;
  border-bottom: 3px solid transparent;
  border-radius: 0;
  background: transparent;
  color: #526179;
  box-shadow: none;
  font-size: 0.9rem;
  font-weight: 800;
  white-space: nowrap;
}

#app-shell .school-day-subtabs .subtab-btn:hover {
  background: #f4f8fd;
  color: #155bc3;
  box-shadow: none;
  transform: none;
}

#app-shell .school-day-subtabs .subtab-btn.active {
  border-bottom-color: #155bc3;
  background: #ffffff;
  color: #155bc3;
  box-shadow: none;
}

#app-shell .school-day-section-header {
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
  padding-bottom: 0.38rem;
  margin-bottom: 0.38rem;
  border-bottom: 1px solid #edf1f6;
}

#app-shell .school-day-section h3 {
  color: #17243d;
  font-size: 1rem;
  line-height: 1.2;
  margin: 0;
}

#app-shell .school-day-date-nav {
  gap: 0.45rem;
  padding: 0.18rem;
  border: 1px solid #dbe4f0;
  border-radius: 14px;
  background: #f6f9fc;
}

#app-shell .school-day-date-nav button,
#app-shell #school-day-reset-student-btn,
#app-shell #school-day-reset-day-btn {
  min-height: 32px;
  padding: 0.32rem 0.65rem;
  border: 0;
  border-radius: 10px;
  background: transparent;
  color: #58677c;
  box-shadow: none;
  font-weight: 500;
}

#app-shell .school-day-bulk-actions-menu {
  position: relative;
  min-height: 32px;
  color: #58677c;
}

#app-shell .school-day-bulk-actions-menu summary {
  display: inline-flex;
  align-items: center;
  min-height: 32px;
  padding: 0.32rem 0.65rem;
  border: 0;
  border-radius: 10px;
  background: transparent;
  color: #58677c;
  cursor: pointer;
  font-weight: 500;
  list-style: none;
}

#app-shell .school-day-bulk-actions-menu summary::-webkit-details-marker {
  display: none;
}

#app-shell .school-day-bulk-actions-menu summary::after {
  content: "";
  width: 0.42rem;
  height: 0.42rem;
  margin-left: 0.45rem;
  border-right: 1.5px solid currentColor;
  border-bottom: 1.5px solid currentColor;
  transform: translateY(-0.1rem) rotate(45deg);
}

#app-shell .school-day-bulk-actions-menu[open] summary {
  background: #edf3fa;
  color: #1f3f6d;
}

#app-shell .school-day-bulk-actions-popover {
  position: absolute;
  top: calc(100% + 0.35rem);
  right: 0;
  z-index: 25;
  display: grid;
  gap: 0.35rem;
  min-width: 11.5rem;
  padding: 0.45rem;
  border: 1px solid #d6e0ed;
  border-radius: 12px;
  background: #ffffff;
  box-shadow: 0 12px 24px rgba(23, 36, 61, 0.12);
}

#app-shell .school-day-bulk-status-btn {
  min-height: 32px;
  padding: 0.32rem 0.65rem;
  border: 1px solid #d6e0ed;
  border-radius: 10px;
  background: #ffffff;
  color: #31435d;
  box-shadow: none;
  font-weight: 500;
  text-align: left;
}

#app-shell .school-day-bulk-status-btn:disabled {
  opacity: 0.52;
  cursor: not-allowed;
}

#app-shell .school-day-date-nav button:hover,
#app-shell .school-day-bulk-actions-menu summary:hover,
#app-shell .school-day-bulk-status-btn:not(:disabled):hover,
#app-shell #school-day-reset-student-btn:hover,
#app-shell #school-day-reset-day-btn:hover {
  background: #edf3fa;
  color: #1f3f6d;
  transform: none;
}

#app-shell .school-day-date-title {
  min-width: 8.2rem;
  color: #17243d;
  font-size: 1rem;
  font-weight: 700;
}

#app-shell .school-day-reset-actions {
  justify-self: end;
  justify-content: flex-end;
  flex-wrap: wrap;
  white-space: normal;
  margin: 0;
  gap: 0.35rem;
}

#app-shell .school-day-reset-actions button {
  white-space: nowrap;
}

#app-shell .school-day-attendance-toolbar {
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
}

#app-shell .school-day-summary-copy {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.35rem;
  padding: 0.1rem 0 0.2rem;
}

#app-shell .school-day-summary-copy .muted,
#app-shell .school-day-attendance-toolbar > .muted {
  margin: 0;
}

#app-shell .school-day-hours-summary {
  color: #31435d;
  white-space: nowrap;
}

#app-shell .school-day-hours-summary:not(:empty)::before {
  content: "|";
  margin-right: 0.35rem;
  color: #9aa8ba;
  font-weight: 400;
}

#app-shell .school-day-student-summaries-header {
  margin: 0.15rem 0 0.25rem;
}

#app-shell .school-day-secondary-panels {
  display: flex;
  flex: 0 0 auto;
  flex-wrap: wrap;
  gap: 0.35rem;
  grid-column: 1;
  justify-content: flex-start;
  margin: 0;
  min-width: 0;
}

#app-shell .school-day-secondary-panels.hidden {
  display: none;
}

#app-shell .school-day-secondary-panel-toggle {
  min-height: 28px;
  padding: 0.22rem 0.5rem;
  border: 1px solid #d2deec;
  border-radius: 999px;
  background: #ffffff;
  color: #263a58;
  box-shadow: none;
  font-size: 0.76rem;
  font-weight: 850;
}

#app-shell .school-day-secondary-panel-toggle.hidden {
  display: none;
}

#app-shell .school-day-secondary-panel-toggle.active,
#app-shell .school-day-secondary-panel-toggle:hover {
  border-color: #b7cbe4;
  background: #f4f8ff;
  color: #0f4fb0;
  transform: none;
}

#app-shell .school-day-student-summaries-header h4 {
  color: #5f6f84;
  font-size: 0.74rem;
  font-weight: 600;
  letter-spacing: 0.04em;
}

#app-shell .school-day-student-summaries-toggle {
  width: 1.65rem;
  min-width: 1.65rem;
  height: 1.65rem;
  border-color: #d6e0ec;
  color: #155bc3;
}

#app-shell .school-day-student-summary-card,
#app-shell .school-day-overview-card {
  border: 1px solid #e2eaf4;
  border-radius: 14px;
  background: #ffffff;
  box-shadow: none;
}

#app-shell .school-day-student-summary-card:hover,
#app-shell .school-day-overview-card:hover {
  border-color: #c8d8ec;
  background: #f8fbff;
  box-shadow: 0 12px 24px rgba(31, 47, 69, 0.08);
  transform: translateY(-1px);
}

#app-shell .school-day-student-summary-card.active {
  border-color: #aac5e8;
  background: #f2f7ff;
  box-shadow: 0 12px 24px rgba(31, 47, 69, 0.08);
}

#app-shell .school-day-card-student-label,
#app-shell .school-day-overview-card-header span {
  color: #6b778c;
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.04em;
}

#app-shell .school-day-card-student h4,
#app-shell .school-day-overview-card-header h4 {
  color: #17243d;
}

#app-shell .school-day-student-summary-stats,
#app-shell .school-day-overview-course {
  color: #526179;
}

#app-shell .school-day-section .table-wrap,
#app-shell .school-day-inline-grade-wrap {
  margin-top: 0.55rem;
  border: 1px solid #e3eaf4;
  border-radius: 14px;
  background: #ffffff;
  overflow: auto;
}

#app-shell .school-day-section table {
  width: 100%;
}

#app-shell #school-day-table {
  min-width: 1040px;
  table-layout: fixed;
}

#app-shell .school-day-section th {
  background: #f7f9fc;
  color: #68778d;
  font-size: 0.72rem;
  letter-spacing: 0.04em;
}

#app-shell .school-day-section td {
  background: #ffffff;
}

#app-shell #school-day-table th,
#app-shell #school-day-table td {
  padding: 0.58rem 0.66rem;
  vertical-align: middle;
}

#app-shell #school-day-table .school-day-planned-column {
  min-width: 18rem;
}

#app-shell #school-day-table .school-day-hour-column {
  min-width: 8.8rem;
}

#app-shell .school-day-hour-cell > span {
  white-space: nowrap;
}

#app-shell .school-day-planned-copy {
  color: #17243d;
  font-size: 0.92rem;
  font-weight: 850;
  line-height: 1.25;
}

#app-shell .school-day-planned-range {
  display: block;
  margin-top: 0.16rem;
  color: #66758b;
  font-size: 0.78rem;
  font-weight: 650;
}

#app-shell #school-day-table .school-day-row-badges {
  gap: 0.26rem;
  margin: 0.36rem 0 0;
}

#app-shell #school-day-table tr.school-day-row-needs-attendance td,
#app-shell #school-day-table tr.school-day-row-needs-grade td,
#app-shell #school-day-table tr.school-day-row-needs-completion td {
  background: #f8fbff;
}

#app-shell #school-day-table tr.school-day-row-past-due td {
  background: #fff8f8;
}

#app-shell #school-day-table tr.school-day-row-excused td {
  background: #fffaf2;
}

#app-shell #school-day-table tr.school-day-row-completed td {
  background: #fbfefc;
}

#app-shell .school-day-status-badge,
#app-shell .school-day-override-badge,
#app-shell .school-day-overview-status {
  padding: 0.16rem 0.48rem;
  border-radius: 999px;
  font-size: 0.68rem;
  font-weight: 600;
}

#app-shell .school-day-actions-wrap .table-action-row button,
#app-shell .school-day-inline-grade-wrap .grade-entry-action-row button,
#app-shell #school-day-add-grade-row-btn,
#app-shell #school-day-add-grade-rows-for-students-btn,
#app-shell #school-day-add-grade-rows-for-classes-btn,
#app-shell #school-day-attendance-save-all-btn {
  min-height: 34px;
  padding: 0.42rem 0.68rem;
  border-radius: 10px;
  box-shadow: none;
  font-size: 0.84rem;
}

#app-shell .school-day-status-control,
#app-shell .school-day-status-readonly {
  min-height: 36px;
  box-shadow: 0 10px 18px rgba(31, 47, 69, 0.04);
}

#app-shell .school-day-status-control-focused {
  outline: 3px solid rgba(21, 91, 195, 0.24);
  outline-offset: 2px;
}

#app-shell .school-day-next-action {
  display: grid;
  gap: 0.16rem;
  min-width: 8rem;
  color: #526179;
}

#app-shell .school-day-next-action button,
#app-shell .school-day-next-action-label {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: fit-content;
  min-height: 30px;
  padding: 0.32rem 0.58rem;
  border: 1px solid #cbd9ea;
  border-radius: 10px;
  background: #ffffff;
  color: #1f3f6d;
  box-shadow: none;
  font-size: 0.78rem;
  font-weight: 800;
  line-height: 1.1;
  white-space: nowrap;
}

#app-shell .school-day-next-action button {
  cursor: pointer;
}

#app-shell .school-day-next-action button:hover {
  border-color: #9eb8da;
  background: #f4f8fd;
  transform: none;
}

#app-shell .school-day-next-action small {
  color: #6b778c;
  font-size: 0.72rem;
  font-weight: 650;
  line-height: 1.25;
}

#app-shell .school-day-next-action.is-warning button,
#app-shell .school-day-next-action.is-warning .school-day-next-action-label {
  border-color: #f0c997;
  background: #fff9ef;
  color: #8a4e0f;
}

#app-shell .school-day-next-action.is-info button,
#app-shell .school-day-next-action.is-info .school-day-next-action-label {
  border-color: #bcd3f4;
  background: #f4f8ff;
  color: #155bc3;
}

#app-shell .school-day-next-action.is-complete .school-day-next-action-label {
  border-color: #bfe1c8;
  background: #f3fbf5;
  color: #257242;
}

#app-shell .school-day-next-action.is-muted .school-day-next-action-label {
  border-color: #dce5ef;
  background: #f8fbfd;
  color: #637083;
}

#app-shell .school-day-inline-grade-row td,
#app-shell .school-day-inline-grade-wrap .school-day-inline-grade-action-table-row td {
  background: #f8fbff;
}

#app-shell .school-day-inline-grade-panel {
  display: grid;
  gap: 0.5rem;
  padding: 0.75rem;
  border: 1px solid #dbe6f2;
  border-radius: 12px;
  background: #f8fbff;
}

#app-shell .school-day-inline-grade-context {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.35rem 0.65rem;
}

#app-shell .school-day-inline-grade-context strong {
  color: #17243d;
  font-size: 0.95rem;
}

#app-shell .school-day-inline-grade-context span {
  color: #64748a;
  font-size: 0.82rem;
  font-weight: 650;
}

#app-shell .school-day-inline-grade-panel .school-day-inline-grade-wrap {
  margin-top: 0;
}

#app-shell .school-day-inline-grade-wrap th:last-child,
#app-shell .school-day-inline-grade-wrap td:last-child {
  min-width: 18rem;
  text-align: right;
  width: 18rem;
}

#app-shell .school-day-inline-grade-wrap .school-day-inline-grade-actions {
  display: inline-flex;
  gap: 0.36rem;
  justify-content: flex-end;
  white-space: nowrap;
}

#app-shell .school-day-inline-grade-wrap .school-day-inline-grade-actions button {
  flex: 0 0 auto;
  min-width: 5.4rem;
  width: auto;
}

#app-shell .school-day-inline-grade-wrap .school-day-inline-grade-actions [data-grade-calc-toggle] {
  min-width: 7.8rem;
}

#app-shell .school-day-inline-grade-wrap .grade-calc-row td {
  padding-top: 0.35rem;
}

#app-shell .school-day-inline-grade-wrap .grade-calc-panel {
  width: fit-content;
  max-width: 100%;
  margin-left: auto;
  justify-content: flex-end;
}

#app-shell .school-day-inline-grade-wrap .grade-calc-actions {
  justify-content: flex-end;
}

#app-shell .school-day-empty-state {
  display: grid;
  justify-items: center;
  gap: 0.4rem;
  padding: 1rem;
  color: #526179;
  text-align: center;
}

#app-shell .school-day-empty-state strong {
  color: #17243d;
}

#app-shell .school-day-empty-state span {
  max-width: 34rem;
  font-size: 0.84rem;
}

#app-shell .school-day-empty-state button,
#app-shell .school-day-active-queue-actions button {
  min-height: 32px;
  padding: 0.36rem 0.68rem;
  border: 1px solid #c8d7e8;
  border-radius: 10px;
  background: #ffffff;
  color: #1f3f6d;
  box-shadow: none;
  font-size: 0.82rem;
  font-weight: 800;
}

#app-shell .school-day-grades-callout {
  margin-top: 0.9rem;
  border: 1px solid #e2eaf4;
  border-radius: 14px;
  background: #f8fbfd;
}

#app-shell .school-day-grade-actions {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  width: min(100%, 610px);
  align-items: stretch;
}

#app-shell .school-day-grade-actions button {
  justify-content: center;
  min-height: 38px;
  padding: 0.34rem 0.5rem;
  text-align: center;
  white-space: normal;
  line-height: 1.15;
}

#app-shell .school-day-schedule-meta {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  margin: 0.45rem 0 0.55rem;
  padding: 0.48rem 0.62rem;
  border: 1px solid #dbe6f2;
  border-radius: 14px;
  background: linear-gradient(180deg, #ffffff 0%, #f8fbff 100%);
  box-shadow: 0 10px 24px rgba(31, 47, 69, 0.05);
}

#app-shell .school-day-active-queue {
  display: contents;
}

#app-shell .school-day-active-queue.hidden {
  display: none;
}

#app-shell .school-day-active-queue-summary {
  display: grid;
  grid-column: 2;
  gap: 0.12rem;
  justify-items: center;
  text-align: center;
}

#app-shell .school-day-active-queue-summary strong {
  color: #17243d;
  font-size: 0.95rem;
  line-height: 1.1;
}

#app-shell .school-day-active-queue-summary span {
  color: #6b778c;
  font-size: 0.78rem;
  font-weight: 650;
}

#app-shell .school-day-active-queue-right {
  display: flex;
  grid-column: 3;
  align-items: center;
  justify-content: flex-end;
  gap: 0.38rem;
  min-width: 0;
}

#app-shell .school-day-active-queue-chips {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 0.38rem;
  min-width: 0;
}

#app-shell .school-day-active-queue-chips span {
  display: inline-flex;
  align-items: center;
  min-height: 1.65rem;
  padding: 0.18rem 0.58rem;
  border: 1px solid #c8d7e8;
  border-radius: 999px;
  background: #f7fbff;
  color: #35516e;
  font-size: 0.76rem;
  font-weight: 800;
  white-space: nowrap;
}

#app-shell .school-day-active-queue-actions {
  display: flex;
  justify-content: flex-end;
}

@media (max-width: 760px) {
  #app-shell .school-day-schedule-meta,
  #app-shell .student-detail-required-callout {
    grid-template-columns: 1fr;
    align-items: start;
  }

  #app-shell .school-day-secondary-panels,
  #app-shell .school-day-active-queue-summary,
  #app-shell .school-day-active-queue-right {
    grid-column: 1;
  }

  #app-shell .school-day-active-queue-right {
    flex-direction: column;
    align-items: flex-start;
  }

  #app-shell .school-day-active-queue-chips,
  #app-shell .school-day-secondary-panels,
  #app-shell .student-detail-required-chip-row {
    justify-content: flex-start;
  }

  #app-shell .school-day-next-action {
    min-width: 0;
  }
}

#app-shell #tab-students.active {
  display: grid;
  gap: 0.65rem;
}

#app-shell #tab-students > h2:first-child {
  display: block;
  margin: 0;
  color: #17243d;
  font-size: 1.05rem;
  line-height: 1.2;
}

#app-shell .students-toolbar {
  margin: 0 0 0.5rem;
}

#app-shell #student-new-btn,
#app-shell #student-submit-btn,
#app-shell #student-cancel-edit-btn,
#app-shell .student-detail-action-row button {
  min-height: 34px;
  padding: 0.42rem 0.68rem;
  border-radius: 10px;
  box-shadow: none;
  font-size: 0.84rem;
  font-weight: 600;
  white-space: nowrap;
}

#app-shell .students-helper-text {
  margin: 0 0 0.6rem;
  color: #6b778c;
  font-size: 0.9rem;
  line-height: 1.35;
}

#app-shell .students-section,
#app-shell #student-detail-panel,
#app-shell .student-detail-section {
  border: 1px solid #dfe7f1;
  border-radius: 16px;
  background: #ffffff;
  box-shadow: 0 14px 34px rgba(25, 42, 70, 0.06);
  padding: 0.75rem;
}

#app-shell .students-section h3,
#app-shell .student-detail-section h4 {
  color: #17243d;
  font-size: 1rem;
  line-height: 1.2;
  margin: 0;
}

#app-shell #student-form,
#app-shell #student-summary-form,
#app-shell #student-enrollment-form {
  gap: 0.55rem;
  margin: 0.65rem 0 0;
}

#app-shell #student-form label,
#app-shell #student-summary-form label,
#app-shell #student-enrollment-form label,
#app-shell #student-detail-filter-form label {
  color: #5b6a80;
  font-size: 0.88rem;
  font-weight: 600;
  letter-spacing: 0;
}

#app-shell #student-form input,
#app-shell #student-summary-form input,
#app-shell #student-detail-filter-form select,
#app-shell #student-enrollment-form .multi-select-dropdown summary {
  min-height: 34px;
  border-color: #cbd8ea;
  border-radius: 12px;
  color: #17243d;
  font-weight: 400;
}

#app-shell #student-enrollment-form .multi-select-dropdown summary {
  background: #ffffff;
}

#app-shell #student-enrollment-form .multi-select-dropdown[open] .checklist-vertical {
  border-color: #cbd8ea;
  border-radius: 12px;
  box-shadow: 0 18px 36px rgba(31, 47, 69, 0.14);
}

#app-shell .student-work-queue-summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  margin: 0 0 0.7rem;
  padding: 0.58rem 0.7rem;
  border: 1px solid #d9e5f2;
  border-radius: 12px;
  background: #f6faff;
}

#app-shell .student-work-queue-summary.hidden {
  display: none;
}

#app-shell .student-work-queue-copy {
  display: grid;
  gap: 0.12rem;
  min-width: 0;
}

#app-shell .student-work-queue-copy strong {
  color: #17243d;
  font-size: 0.9rem;
  line-height: 1.2;
}

#app-shell .student-work-queue-copy span {
  color: #5d6d83;
  font-size: 0.78rem;
  line-height: 1.25;
}

#app-shell .student-work-queue-chips {
  display: flex;
  justify-content: flex-end;
  flex-wrap: wrap;
  gap: 0.35rem;
}

#app-shell .student-work-queue-chips span {
  display: inline-flex;
  align-items: center;
  min-height: 1.5rem;
  padding: 0.16rem 0.5rem;
  border: 1px solid #c7d8ea;
  border-radius: 999px;
  background: #ffffff;
  color: #37536f;
  font-size: 0.74rem;
  font-weight: 800;
  white-space: nowrap;
}

#app-shell .student-detail-overview {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  min-width: 0;
  padding: 0.1rem 0 0.75rem;
  border-bottom: 1px solid #e3eaf4;
}

#app-shell .student-detail-identity {
  display: flex;
  align-items: center;
  gap: 0.72rem;
  min-width: 0;
}

#app-shell .student-detail-avatar {
  display: inline-grid;
  place-items: center;
  width: 44px;
  height: 44px;
  flex: 0 0 44px;
  border-radius: 14px;
  background: #eaf3ff;
  color: #155bc3;
  font-size: 1.12rem;
  font-weight: 850;
}

#app-shell .student-detail-avatar.archived {
  background: #eef1f5;
  color: #66758a;
}

#app-shell #student-detail-panel .detail-title {
  margin: 0;
  color: #17243d;
  font-size: 1.25rem;
  line-height: 1.12;
}

#app-shell .student-detail-subtitle {
  margin: 0.18rem 0 0;
  color: #627286;
  font-size: 0.84rem;
  font-weight: 650;
  line-height: 1.3;
}

#app-shell .student-detail-metrics {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 0.38rem;
  min-width: 0;
}

#app-shell .student-detail-metrics span {
  display: grid;
  gap: 0.08rem;
  min-width: 5.1rem;
  padding: 0.4rem 0.5rem;
  border: 1px solid #d9e6f5;
  border-radius: 12px;
  background: #f8fbff;
}

#app-shell .student-detail-metrics span.attention {
  border-color: #efc46a;
  background: #fff8e6;
}

#app-shell .student-detail-metrics span.neutral {
  background: #f4f6f8;
}

#app-shell .student-detail-metrics strong {
  color: #155bc3;
  font-size: 0.9rem;
  line-height: 1.1;
}

#app-shell .student-detail-metrics span.attention strong {
  color: #755000;
}

#app-shell .student-detail-metrics span.neutral strong {
  color: #66758a;
}

#app-shell .student-detail-metrics em {
  color: #627286;
  font-size: 0.66rem;
  font-style: normal;
  font-weight: 800;
  line-height: 1.1;
  text-transform: uppercase;
}

#app-shell .student-detail-subtabs {
  width: fit-content;
  margin: 0.55rem 0 0.65rem;
  padding: 0.18rem;
  border: 1px solid #dbe4f0;
  border-radius: 14px;
  background: #f6f9fc;
  gap: 0.18rem;
}

#app-shell .student-detail-subtabs .subtab-btn {
  min-height: 32px;
  padding: 0.34rem 0.7rem;
  border: 0;
  border-radius: 10px;
  background: transparent;
  color: #58677c;
  box-shadow: none;
  font-size: 0.9rem;
  font-weight: 500;
  white-space: nowrap;
}

#app-shell .student-detail-subtabs .subtab-btn:hover {
  background: #edf3fa;
  color: #1f3f6d;
  box-shadow: none;
  transform: none;
}

#app-shell .student-detail-subtabs .subtab-btn.active {
  background: #ffffff;
  color: #155bc3;
  box-shadow: 0 8px 18px rgba(31, 47, 69, 0.08);
}

#app-shell .student-detail-required-callout {
  display: grid;
  grid-template-columns: minmax(220px, 1fr) auto;
  align-items: center;
  gap: 0.75rem;
  margin: 0 0 0.65rem;
  padding: 0.75rem 0.85rem;
  border: 1px solid #f4d48a;
  border-radius: 14px;
  background: linear-gradient(180deg, #fffaf0 0%, #fff7e3 100%);
  color: #6c4a00;
}

#app-shell .student-detail-required-callout.hidden {
  display: none;
}

#app-shell .student-detail-required-callout strong {
  display: block;
  color: #7a4a00;
  font-size: 0.92rem;
}

#app-shell .student-detail-required-callout p {
  margin: 0.18rem 0 0;
  color: #7a5a16;
  font-size: 0.86rem;
  line-height: 1.35;
}

#app-shell .student-detail-required-chip-row {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 0.38rem;
}

#app-shell .student-detail-required-chip-row span {
  display: inline-flex;
  align-items: center;
  min-height: 1.65rem;
  padding: 0.18rem 0.58rem;
  border: 1px solid #efc46a;
  border-radius: 999px;
  background: #ffffff;
  color: #7a4a00;
  font-size: 0.78rem;
  font-weight: 800;
  white-space: nowrap;
}

#app-shell .student-detail-required-chip-row button {
  display: inline-flex;
  align-items: center;
  min-height: 1.65rem;
  width: auto;
  padding: 0.18rem 0.58rem;
  border: 1px solid #efc46a;
  border-radius: 999px;
  background: #ffffff;
  color: #7a4a00;
  box-shadow: none;
  font-size: 0.78rem;
  font-weight: 800;
  white-space: nowrap;
}

#app-shell .student-detail-required-chip-row button:hover,
#app-shell .student-detail-required-chip-row button:focus-visible,
#app-shell .student-detail-required-action-btn:hover,
#app-shell .student-detail-required-action-btn:focus-visible {
  background: #fff2cc;
  color: #643b00;
  transform: none;
}

#app-shell .student-detail-required-action-btn {
  min-height: 30px;
  width: auto;
  padding: 0.32rem 0.54rem;
  border: 1px solid #efc46a;
  border-radius: 10px;
  background: #fffaf0;
  color: #7a4a00;
  box-shadow: none;
  font-size: 0.8rem;
  font-weight: 700;
  white-space: nowrap;
}

#app-shell .student-detail-enrollment-focused {
  border-color: #b8cfee;
  box-shadow: 0 0 0 3px rgba(31, 102, 189, 0.12), 0 14px 34px rgba(25, 42, 70, 0.06);
}

#app-shell .student-enrollment-focus-note {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.7rem;
  margin: 0 0 0.45rem;
  padding: 0.5rem 0.58rem;
  border: 1px solid #c8d7e8;
  border-radius: 12px;
  background: #f4f8fd;
  color: #284763;
}

#app-shell .student-enrollment-focus-note.warning {
  border-color: #efc46a;
  background: #fff8e6;
  color: #6c4a00;
}

#app-shell .student-enrollment-focus-note span {
  display: grid;
  gap: 0.12rem;
}

#app-shell .student-enrollment-focus-note strong {
  color: inherit;
  font-size: 0.82rem;
  line-height: 1.15;
}

#app-shell .student-enrollment-focus-note em {
  color: inherit;
  font-size: 0.76rem;
  font-style: normal;
  line-height: 1.25;
  opacity: 0.82;
}

#app-shell .student-enrollment-focus-note button {
  min-height: 30px;
  width: auto;
  padding: 0.3rem 0.52rem;
  border-radius: 10px;
  background: #ffffff;
  color: #1f5f9d;
  box-shadow: none;
  font-size: 0.78rem;
  font-weight: 700;
  white-space: nowrap;
}

#app-shell #student-enroll-course-options .checklist-row.student-enroll-focus-match {
  border-color: #9fc3ed;
  background: #eef6ff;
  box-shadow: inset 3px 0 0 #1f66bd;
}

#app-shell #student-enroll-course-options .checklist-row label {
  align-items: start;
  width: 100%;
}

#app-shell #student-enroll-course-options .schedule-source-cell {
  gap: 0.22rem;
}

#app-shell #student-enroll-course-options .schedule-source-cell strong {
  font-size: 0.86rem;
}

#app-shell #student-enroll-course-options .schedule-source-meta span {
  min-height: 19px;
  padding: 0.13rem 0.38rem;
  font-size: 0.68rem;
}

#app-shell .student-detail-tab-panel {
  gap: 0.65rem;
}

#app-shell .student-detail-section + .student-detail-section {
  margin-top: 0;
}

#app-shell .student-detail-section-profile h4 + h4 {
  margin-top: 0.45rem;
  color: #5f6f84;
  font-size: 0.86rem;
  font-weight: 600;
}

#app-shell .student-detail-section-heading {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 0.75rem;
  min-width: 0;
}

#app-shell #student-detail-filter-form {
  grid-template-columns: minmax(180px, 240px);
  margin: 0;
}

#app-shell #student-enrollment-form {
  grid-template-columns: minmax(280px, 1fr) auto;
}

@media (max-width: 760px) {
  #app-shell .student-detail-overview,
  #app-shell .student-detail-section-heading {
    align-items: start;
    flex-direction: column;
  }

  #app-shell .student-detail-metrics,
  #app-shell #student-detail-filter-form {
    width: 100%;
  }

  #app-shell .student-detail-metrics {
    justify-content: flex-start;
  }

  #app-shell .student-detail-metrics span {
    flex: 1 1 7.2rem;
  }

  #app-shell #student-enrollment-form {
    grid-template-columns: 1fr;
  }
}

#app-shell .student-detail-action-row {
  gap: 0.35rem;
}

#app-shell #tab-students .table-wrap,
#app-shell #student-detail-panel .table-wrap {
  margin-top: 0.55rem;
  border: 1px solid #e3eaf4;
  border-radius: 14px;
  background: #ffffff;
  overflow: auto;
}

#app-shell #tab-students table {
  width: 100%;
}

#app-shell #tab-students th {
  background: #f7f9fc;
  color: #68778d;
  font-size: 0.72rem;
  letter-spacing: 0.04em;
}

#app-shell #tab-students td {
  background: #ffffff;
}

#app-shell #tab-students .student-work-queue-row td {
  background: #fffaf0;
}

#app-shell #tab-students th,
#app-shell #tab-students td {
  text-align: left;
}

#app-shell .student-name-cell,
#app-shell .student-required-cell {
  display: grid;
  gap: 0.18rem;
  justify-items: start;
  min-width: 0;
}

#app-shell .student-name-cell strong {
  color: #17243d;
}

#app-shell .student-name-cell small,
#app-shell .student-required-cell small {
  color: #65758a;
  font-size: 0.76rem;
  line-height: 1.25;
}

#app-shell .student-status-pill {
  padding: 0.16rem 0.48rem;
  border-radius: 999px;
  font-size: 0.68rem;
  font-weight: 600;
}

#app-shell .student-table-actions .table-action-row button,
#app-shell #student-enrollment-table .table-action-row button {
  min-height: 32px;
  padding: 0.36rem 0.58rem;
  border-radius: 10px;
  box-shadow: none;
  font-size: 0.82rem;
  font-weight: 600;
}

#app-shell .student-schedule-order-select {
  min-height: 34px;
  border-color: #cbd8ea;
  border-radius: 10px;
}

#app-shell #tab-management.active {
  display: grid;
  gap: 0.65rem;
}

#app-shell #tab-management > h2:first-child {
  display: block;
  margin: 0;
  color: #17243d;
  font-size: 1.05rem;
  line-height: 1.2;
}

#app-shell .management-subtabs,
#app-shell .management-courses-subtabs {
  width: fit-content;
  margin: 0;
  padding: 0.18rem;
  border: 1px solid #dbe4f0;
  border-radius: 14px;
  background: #f6f9fc;
  gap: 0.18rem;
}

#app-shell .management-courses-subtabs {
  margin: 0.55rem 0 0.65rem;
}

#app-shell .management-subtabs .subtab-btn,
#app-shell .management-courses-subtabs .subtab-btn {
  min-height: 32px;
  padding: 0.34rem 0.7rem;
  border: 0;
  border-radius: 10px;
  background: transparent;
  color: #58677c;
  box-shadow: none;
  font-size: 0.9rem;
  font-weight: 500;
  white-space: nowrap;
}

#app-shell .management-subtabs .subtab-btn:hover,
#app-shell .management-courses-subtabs .subtab-btn:hover {
  background: #edf3fa;
  color: #1f3f6d;
  box-shadow: none;
  transform: none;
}

#app-shell .management-subtabs .subtab-btn.active,
#app-shell .management-courses-subtabs .subtab-btn.active {
  background: #ffffff;
  color: #155bc3;
  box-shadow: 0 8px 18px rgba(31, 47, 69, 0.08);
}

#app-shell .management-section {
  border: 1px solid #dfe7f1;
  border-radius: 16px;
  background: #ffffff;
  box-shadow: 0 14px 34px rgba(25, 42, 70, 0.06);
  padding: 0.75rem;
}

#app-shell .management-section + .management-section {
  margin-top: 0;
}

#app-shell .management-section h3,
#app-shell .management-section h4,
#app-shell .course-sections-wrap h4 {
  color: #17243d;
  font-size: 1rem;
  line-height: 1.2;
  margin: 0;
}

#app-shell .management-section h4,
#app-shell .course-sections-wrap h4 {
  margin-top: 0.65rem;
}

#app-shell .setup-section-heading {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  min-width: 0;
}

#app-shell .setup-section-heading > div {
  display: grid;
  gap: 0.16rem;
  min-width: 0;
}

#app-shell .setup-section-heading p {
  margin: 0;
  color: #65758a;
  font-size: 0.82rem;
  font-weight: 600;
  line-height: 1.3;
}

#app-shell .setup-section-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 28px;
  max-width: 100%;
  padding: 0.24rem 0.6rem;
  border: 1px solid #d9e6f5;
  border-radius: 999px;
  background: #f7fbff;
  color: #35516e;
  font-size: 0.76rem;
  font-weight: 800;
  line-height: 1.15;
  white-space: nowrap;
}

#app-shell .school-day-readiness-panel {
  display: grid;
  gap: 0.5rem;
  margin: 0.6rem 0 0;
  padding: 0.65rem 0.7rem;
  border: 1px solid #d9e5f2;
  border-radius: 14px;
  background: #f7fbff;
}

#app-shell .school-day-readiness-panel:empty {
  display: none;
}

#app-shell .school-day-readiness-panel-compact {
  margin: 0.55rem 0 0;
}

#app-shell .school-day-readiness-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  min-width: 0;
}

#app-shell .school-day-readiness-header > div:first-child {
  display: grid;
  gap: 0.12rem;
  min-width: 0;
}

#app-shell .school-day-readiness-header strong {
  color: #17243d;
  font-size: 0.92rem;
  line-height: 1.2;
}

#app-shell .school-day-readiness-header span,
#app-shell .school-day-readiness-copy span {
  color: #65758a;
  font-size: 0.78rem;
  line-height: 1.3;
}

#app-shell .school-day-readiness-score,
#app-shell .school-day-readiness-status {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 24px;
  padding: 0.16rem 0.52rem;
  border-radius: 999px;
  background: #ffffff;
  color: #52657d;
  font-size: 0.72rem;
  font-weight: 800;
  white-space: nowrap;
}

#app-shell .school-day-readiness-grid {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 0.38rem;
}

#app-shell .school-day-readiness-row {
  display: grid;
  grid-template-columns: 1fr;
  align-content: start;
  gap: 0.3rem;
  min-width: 0;
  padding: 0.5rem;
  border: 1px solid #e2eaf4;
  border-radius: 12px;
  background: #ffffff;
}

#app-shell .school-day-readiness-row.ready .school-day-readiness-status {
  background: #e9f7ed;
  color: #28613a;
}

#app-shell .school-day-readiness-row.needs-review .school-day-readiness-status {
  background: #fff2cc;
  color: #755000;
}

#app-shell .school-day-readiness-copy {
  display: grid;
  gap: 0.1rem;
  min-width: 0;
}

#app-shell .school-day-readiness-copy strong {
  color: #17243d;
  font-size: 0.82rem;
  line-height: 1.2;
}

#app-shell .school-day-readiness-panel button,
#app-shell .school-day-readiness-row button {
  min-height: 30px;
  width: fit-content;
  padding: 0.32rem 0.54rem;
  border-radius: 10px;
  box-shadow: none;
  font-size: 0.78rem;
  font-weight: 700;
  white-space: nowrap;
}

#app-shell .readiness-filter-panel {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  margin: 0.55rem 0 0;
  padding: 0.5rem 0.6rem;
  border: 1px solid #efc46a;
  border-radius: 12px;
  background: #fff8e6;
}

#app-shell .readiness-filter-panel.hidden {
  display: none;
}

#app-shell .readiness-filter-panel > div {
  display: grid;
  gap: 0.1rem;
  min-width: 0;
}

#app-shell .readiness-filter-panel strong {
  color: #6c4a00;
  font-size: 0.84rem;
  line-height: 1.2;
}

#app-shell .readiness-filter-panel span {
  color: #7d6330;
  font-size: 0.76rem;
  line-height: 1.25;
}

#app-shell .readiness-filter-panel button {
  min-height: 30px;
  width: auto;
  padding: 0.32rem 0.54rem;
  border-radius: 10px;
  background: #ffffff;
  color: #7a4a00;
  box-shadow: none;
  font-size: 0.78rem;
  font-weight: 800;
  white-space: nowrap;
}

#app-shell #subject-form,
#app-shell #grade-type-form,
#app-shell #course-form,
#app-shell .course-section-form {
  gap: 0.55rem;
  margin: 0.65rem 0 0;
}

#app-shell #subject-form {
  grid-template-columns: minmax(220px, 48%) auto auto;
  align-items: center;
  justify-content: start;
}

#app-shell #subject-name {
  width: 100%;
}

#app-shell #subject-form button {
  grid-column: 1;
  grid-row: 2;
  justify-self: start;
  width: auto;
}

#app-shell #subject-form input,
#app-shell #subject-form .subject-required-field,
#app-shell #grade-type-form input,
#app-shell #course-form input,
#app-shell #course-form select,
#app-shell .course-section-form input,
#app-shell .course-section-form select,
#app-shell #grading-criteria-form input,
#app-shell #grading-criteria-form select,
#app-shell #course-form .multi-select-dropdown summary,
#app-shell .course-section-form .multi-select-dropdown summary {
  min-height: 34px;
  border-color: #cbd8ea;
  border-radius: 12px;
  color: #17243d;
  font-weight: 400;
}

#app-shell #subject-form .subject-required-field {
  align-items: center;
  color: #40516b;
  display: inline-flex;
  font-size: 0.88rem;
  font-weight: 600;
  gap: 0.35rem;
  min-height: 34px;
  white-space: nowrap;
}

#app-shell #subject-form .subject-required-field input {
  min-height: 0;
}

#app-shell .subject-required-badge {
  display: inline-flex;
  align-items: center;
  min-height: 22px;
  padding: 0.18rem 0.45rem;
  border: 1px solid #9cc5a7;
  border-radius: 999px;
  background: #edf8f0;
  color: #255d36;
  font-size: 0.76rem;
  font-weight: 700;
  line-height: 1;
}

#app-shell .schedule-source-cell {
  display: grid;
  gap: 0.28rem;
  justify-items: start;
  min-width: 0;
}

#app-shell .schedule-source-cell strong {
  color: #17243d;
  font-size: 0.92rem;
  line-height: 1.2;
}

#app-shell .schedule-source-cell > .subject-required-badge {
  margin-top: 0.05rem;
}

#app-shell .schedule-source-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 0.22rem;
  min-width: 0;
}

#app-shell .schedule-source-meta span {
  display: inline-flex;
  align-items: center;
  min-height: 21px;
  max-width: 100%;
  padding: 0.16rem 0.44rem;
  border: 1px solid #d9e6f5;
  border-radius: 999px;
  background: #f5f9fe;
  color: #52657d;
  font-size: 0.72rem;
  font-weight: 700;
  line-height: 1.1;
  white-space: nowrap;
}

#app-shell .enrollment-count-pill {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 2rem;
  min-height: 1.6rem;
  padding: 0.16rem 0.52rem;
  border: 1px solid #c8d8ea;
  border-radius: 999px;
  background: #f5f9fe;
  color: #304a65;
  font-size: 0.78rem;
  font-weight: 800;
  line-height: 1;
}

#app-shell .enrollment-count-pill.empty {
  border-color: #efc46a;
  background: #fff2cc;
  color: #755000;
}

#app-shell .enrollment-count-note {
  display: block;
  margin-top: 0.22rem;
  color: #7d6330;
  font-size: 0.74rem;
  font-weight: 700;
  line-height: 1.2;
}

#app-shell .management-section tr.readiness-review-row td,
#app-shell .schedule-section tr.readiness-review-row td {
  background: #fffaf0;
}

#app-shell .student-required-subject-missing td {
  background: #fff8e6;
  color: #6c4a00;
}

@media (max-width: 620px) {
  #app-shell #subject-form {
    grid-template-columns: 1fr auto;
  }

  #app-shell #subject-form button {
    grid-column: 1 / -1;
  }

  #app-shell .school-day-readiness-header {
    align-items: start;
    flex-direction: column;
  }

  #app-shell .readiness-filter-panel {
    align-items: start;
    flex-direction: column;
  }

  #app-shell .setup-section-heading {
    align-items: start;
    flex-direction: column;
  }

  #app-shell .setup-section-badge {
    white-space: normal;
  }

  #app-shell .school-day-readiness-grid {
    grid-template-columns: 1fr;
  }
}

#app-shell #grade-type-form label,
#app-shell #course-form label,
#app-shell .course-section-form label,
#app-shell .course-section-form .course-section-field,
#app-shell .course-section-form fieldset,
#app-shell #grading-criteria-form label {
  color: #5b6a80;
  font-size: 0.88rem;
  font-weight: 600;
  letter-spacing: 0;
}

#app-shell #course-form,
#app-shell .course-section-form {
  border-color: #e2eaf4;
  border-radius: 14px;
  background: #f8fbfd;
  padding: 0.75rem;
}

#app-shell .course-management-actions,
#app-shell .grade-types-apply-row {
  margin: 0.55rem 0 0;
  gap: 0.35rem;
}

#app-shell .grade-percent-filter {
  display: grid;
  grid-template-columns: minmax(76px, 0.7fr) minmax(88px, 1fr);
  gap: 0.4rem;
}

#app-shell .grade-percent-filter select,
#app-shell .grade-percent-filter input {
  width: 100%;
}

#app-shell .course-management-actions button,
#app-shell #subject-form button,
#app-shell #grade-type-form button,
#app-shell .grade-types-apply-row button,
#app-shell .course-form-actions button,
#app-shell .grading-criteria-actions button,
#app-shell .course-materials-panel button,
#app-shell .course-table-actions .table-action-row button {
  min-height: 34px;
  padding: 0.42rem 0.68rem;
  border-radius: 10px;
  box-shadow: none;
  font-size: 0.84rem;
  font-weight: 600;
  white-space: nowrap;
}

#app-shell .course-form-note,
#app-shell #grade-type-total,
#app-shell #grading-criteria-message {
  color: #6b778c;
  font-size: 0.9rem;
  line-height: 1.35;
}

#app-shell #course-form .multi-select-dropdown summary,
#app-shell .course-section-form .multi-select-dropdown summary {
  background: #ffffff;
}

#app-shell #course-form .multi-select-dropdown[open] .checklist-vertical,
#app-shell .course-section-form .multi-select-dropdown[open] .checklist-vertical {
  border-color: #cbd8ea;
  border-radius: 12px;
  box-shadow: 0 18px 36px rgba(31, 47, 69, 0.14);
}

#app-shell .weekday-set {
  border-color: #dbe4f0;
  border-radius: 12px;
  background: #ffffff;
  padding: 0.55rem 0.65rem;
}

#app-shell .weekday-set legend {
  color: #5b6a80;
  font-size: 0.82rem;
  font-weight: 600;
}

#app-shell #course-form .course-weekdays-field,
#app-shell .course-section-form .course-section-weekdays-field {
  align-items: center;
  align-content: start;
  gap: 0.3rem 0.65rem;
  min-height: 54px;
  padding: 0.25rem 0.55rem 0.35rem;
}

#app-shell .course-section-form .course-section-weekdays-field {
  justify-self: start;
  width: fit-content;
  max-width: 100%;
}

#app-shell .course-section-form .course-section-students-field,
#app-shell .course-section-form .course-section-quarters-field {
  display: grid;
  gap: 0.2rem;
  align-self: stretch;
}

#app-shell .course-section-form .course-section-field-label {
  color: #5b6a80;
  font-size: 0.88rem;
  font-weight: 600;
  line-height: 1.2;
}

#app-shell .course-section-form .course-section-students-field .multi-select-dropdown[open] .checklist-vertical,
#app-shell .course-section-form .course-section-quarters-field .multi-select-dropdown[open] .checklist-vertical {
  max-height: 260px;
  overflow: auto;
}

#app-shell .course-section-form .course-section-students-field .checklist-row,
#app-shell .course-section-form .course-section-quarters-field .checklist-row {
  display: grid;
  grid-template-columns: 18px minmax(0, 1fr);
  align-items: start;
  gap: 0.45rem;
  padding: 0.24rem 0.1rem;
}

#app-shell .course-section-form .course-section-students-field .checklist-row input[type="checkbox"],
#app-shell .course-section-form .course-section-quarters-field .checklist-row input[type="checkbox"] {
  width: 16px;
  min-width: 16px;
  height: 16px;
  min-height: 16px;
  margin: 0.14rem 0 0;
  justify-self: start;
}

#app-shell .course-section-form .course-section-quarters-field .checklist-row label {
  display: block;
  min-width: 0;
  color: #31435d;
  font-size: 0.86rem;
  font-weight: 600;
  line-height: 1.2;
  cursor: pointer;
}

#app-shell .course-section-form .course-section-student-all-row label {
  color: #31435d;
  font-weight: 600;
}

#app-shell .course-section-form .course-section-student-row label {
  display: block;
  width: auto;
  min-width: 0;
  cursor: pointer;
}

#app-shell .course-section-form .course-section-student-row .schedule-source-cell {
  gap: 0.18rem;
}

#app-shell .course-section-form .course-section-student-conflict-row {
  border-radius: 10px;
  background: #fff5f4;
}

#app-shell .course-section-form .course-section-student-conflict-row .schedule-source-meta span:last-child {
  border-color: #f1b8b3;
  background: #fff8f7;
  color: #8b2520;
}

#app-shell #course-form .course-weekdays-field label,
#app-shell .course-section-form .course-section-weekdays-field label {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  min-width: 0;
  color: #31435d;
  font-size: 0.86rem;
  font-weight: 500;
  line-height: 1.2;
  white-space: nowrap;
}

#app-shell #course-form .course-weekdays-field input[type="checkbox"],
#app-shell .course-section-form .course-section-weekdays-field input[type="checkbox"] {
  width: 16px;
  min-width: 16px;
  height: 16px;
  margin: 0;
  flex: 0 0 16px;
}

#app-shell #course-form .course-weekdays-field legend,
#app-shell .course-section-form .course-section-weekdays-field legend {
  margin-bottom: 0.12rem;
  line-height: 1.2;
}

#app-shell .course-materials-panel,
#app-shell .grading-criteria-card {
  border: 1px solid #e2eaf4;
  border-radius: 14px;
  background: #f8fbfd;
  padding: 0.75rem;
}

#app-shell .course-materials-grid {
  border-color: #e2eaf4;
  border-radius: 12px;
  background: #ffffff;
}

#app-shell .grading-criteria-card h4 {
  margin: 0 0 0.45rem;
}

#app-shell .management-section .table-wrap {
  margin-top: 0.55rem;
  border: 1px solid #e3eaf4;
  border-radius: 14px;
  background: #ffffff;
  overflow: auto;
}

#app-shell #grade-type-form {
  grid-template-columns: minmax(180px, 1fr) minmax(130px, 0.5fr) minmax(180px, 0.8fr);
}

#app-shell #grade-type-icon {
  min-height: 34px;
  border-color: #cbd8ea;
  border-radius: 12px;
  color: #17243d;
  font-weight: 400;
}

#app-shell .grade-type-icon-preview {
  display: inline-grid;
  place-items: center;
  width: 34px;
  height: 34px;
  border: 1px solid #dfe8f5;
  border-radius: 10px;
  background: #f6f9ff;
}

#app-shell .management-section-grade-types td:first-child,
#app-shell .management-section-grade-types th:first-child {
  width: 58px;
  text-align: center;
}

#app-shell .management-section table {
  width: 100%;
}

#app-shell .management-section th {
  background: #f7f9fc;
  color: #68778d;
  font-size: 0.72rem;
  letter-spacing: 0.04em;
}

#app-shell .management-section td {
  background: #ffffff;
}

#app-shell #tab-planning.active {
  display: grid;
  gap: 0.65rem;
}

#app-shell #tab-planning > h2:first-child {
  display: block;
  margin: 0;
  color: #17243d;
  font-size: 1.05rem;
  line-height: 1.2;
}

#app-shell .schedule-subtabs {
  width: fit-content;
  margin: 0;
  padding: 0.18rem;
  border: 1px solid #dbe4f0;
  border-radius: 14px;
  background: #f6f9fc;
  gap: 0.18rem;
}

#app-shell .schedule-subtabs .subtab-btn {
  min-height: 32px;
  padding: 0.34rem 0.7rem;
  border: 0;
  border-radius: 10px;
  background: transparent;
  color: #58677c;
  box-shadow: none;
  font-size: 0.9rem;
  font-weight: 500;
  white-space: nowrap;
}

#app-shell .schedule-subtabs .subtab-btn:hover {
  background: #edf3fa;
  color: #1f3f6d;
  box-shadow: none;
  transform: none;
}

#app-shell .schedule-subtabs .subtab-btn.active {
  background: #ffffff;
  color: #155bc3;
  box-shadow: 0 8px 18px rgba(31, 47, 69, 0.08);
}

#app-shell .schedule-section {
  border: 1px solid #dfe7f1;
  border-radius: 16px;
  background: #ffffff;
  box-shadow: 0 14px 34px rgba(25, 42, 70, 0.06);
  padding: 0.75rem;
}

#app-shell .schedule-section + .schedule-section {
  margin-top: 0;
}

#app-shell .schedule-section h3 {
  color: #17243d;
  font-size: 1rem;
  line-height: 1.2;
  margin: 0;
}

#app-shell #school-year-form,
#app-shell #quarters-form,
#app-shell #school-day-settings-form,
#app-shell #schedule-block-form,
#app-shell #holiday-form,
#app-shell #plan-form,
#app-shell #plan-filter-form {
  gap: 0.55rem;
  margin: 0.65rem 0 0;
}

#app-shell #school-year-form label,
#app-shell #quarters-form label,
#app-shell #school-day-settings-form label,
#app-shell #schedule-block-form label,
#app-shell #holiday-form label,
#app-shell #plan-form label,
#app-shell #plan-filter-form label,
#app-shell #schedule-block-form fieldset,
#app-shell #plan-form fieldset {
  color: #5b6a80;
  font-size: 0.88rem;
  font-weight: 600;
  letter-spacing: 0;
}

#app-shell #school-year-form input,
#app-shell #quarters-form input,
#app-shell #quarters-form select,
#app-shell #school-day-settings-form input,
#app-shell #school-day-settings-form select,
#app-shell #schedule-block-form input,
#app-shell #schedule-block-form select,
#app-shell #holiday-form input,
#app-shell #holiday-form select,
#app-shell #plan-form input,
#app-shell #plan-form select,
#app-shell #plan-filter-form select,
#app-shell #plan-form .multi-select-dropdown summary {
  min-height: 34px;
  border-color: #cbd8ea;
  border-radius: 12px;
  color: #17243d;
  font-weight: 400;
}

#app-shell #plan-form .multi-select-dropdown summary {
  background: #ffffff;
}

#app-shell #plan-form .multi-select-dropdown[open] .checklist-vertical {
  border-color: #cbd8ea;
  border-radius: 12px;
  box-shadow: 0 18px 36px rgba(31, 47, 69, 0.14);
}

#app-shell #schedule-block-form,
#app-shell #plan-form {
  padding: 0.75rem;
  border: 1px solid #e2eaf4;
  border-radius: 14px;
  background: #f8fbfd;
}

#app-shell #plan-filter-form {
  grid-template-columns: minmax(170px, 0.9fr) minmax(220px, 1.2fr) auto;
  align-items: end;
  padding: 0.75rem;
  border: 1px solid #e2eaf4;
  border-radius: 14px;
  background: #f8fbfd;
}

#app-shell #school-year-form button,
#app-shell #quarters-form button,
#app-shell #school-day-settings-form button,
#app-shell #schedule-block-form button,
#app-shell #holiday-form button,
#app-shell #plan-form button,
#app-shell #plan-filter-form button {
  min-height: 34px;
  width: auto;
  padding: 0.42rem 0.68rem;
  border-radius: 10px;
  box-shadow: none;
  font-size: 0.84rem;
  font-weight: 600;
  white-space: nowrap;
}

#app-shell #school-year-current,
#app-shell #quarter-summary-warning,
#app-shell #school-day-settings-current,
#app-shell #schedule-school-day-wrap > .muted {
  color: #6b778c;
  font-size: 0.9rem;
  line-height: 1.35;
}

#app-shell #schedule-school-day-wrap > .muted {
  margin: 0.45rem 0 0;
}

#app-shell .schedule-block-secondary-row {
  gap: 0.55rem;
}

#app-shell #plan-quarter-fieldset .checklist-vertical {
  display: grid;
  grid-template-columns: repeat(2, minmax(90px, max-content));
  gap: 0.35rem 0.75rem;
}

#app-shell .schedule-section .table-wrap {
  margin-top: 0.55rem;
  border: 1px solid #e3eaf4;
  border-radius: 14px;
  background: #ffffff;
  overflow: auto;
}

#app-shell .schedule-section table {
  width: 100%;
}

#app-shell .schedule-section th {
  background: #f7f9fc;
  color: #68778d;
  font-size: 0.72rem;
  letter-spacing: 0.04em;
}

#app-shell .schedule-section td {
  background: #ffffff;
}

#app-shell .schedule-section .table-action-row button {
  min-height: 32px;
  padding: 0.36rem 0.58rem;
  border-radius: 10px;
  box-shadow: none;
  font-size: 0.82rem;
  font-weight: 600;
}

#app-shell #tab-calendar.active,
#app-shell #tab-administration.active,
#app-shell #tab-reports.active {
  display: grid;
  gap: 0.65rem;
}

#app-shell #tab-calendar > h2:first-child,
#app-shell #tab-administration > h2:first-child,
#app-shell #tab-reports > h2:first-child {
  display: block;
  margin: 0;
  color: #17243d;
  font-size: 1.05rem;
  line-height: 1.2;
}

#app-shell .reports-page-header,
#app-shell .administration-page-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  min-width: 0;
}

#app-shell .reports-page-header h2,
#app-shell .administration-page-header h2 {
  margin: 0;
  color: #17243d;
  font-size: 1.05rem;
  line-height: 1.2;
}

#app-shell #reports-active-summary,
#app-shell #administration-active-summary {
  flex: 0 1 auto;
  max-width: 100%;
  padding: 0.26rem 0.55rem;
  border: 1px solid #d8e4f2;
  border-radius: 999px;
  background: #ffffff;
  color: #52647d;
  font-size: 0.8rem;
  font-weight: 700;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

#app-shell .calendar-page-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  min-width: 0;
}

#app-shell .calendar-page-header h2 {
  margin: 0;
  color: #17243d;
  font-size: 1.05rem;
  line-height: 1.2;
}

#app-shell .calendar-filter-panel,
#app-shell .calendar-surface,
#app-shell .reports-section,
#app-shell .administration-intro-card,
#app-shell .administration-config-card,
#app-shell .administration-transition-card,
#app-shell .administration-preview-card {
  border: 1px solid #dfe7f1;
  border-radius: 16px;
  background: #ffffff;
  box-shadow: 0 14px 34px rgba(25, 42, 70, 0.06);
}

#app-shell .calendar-filter-panel,
#app-shell .calendar-surface,
#app-shell .reports-section,
#app-shell .administration-intro-card,
#app-shell .administration-config-card,
#app-shell .administration-transition-card {
  padding: 0.75rem;
}

#app-shell .calendar-filter-panel {
  margin-bottom: 0;
}

#app-shell #calendar-form {
  grid-template-columns: minmax(360px, auto) minmax(320px, 1fr);
  align-items: start;
  gap: 0.55rem;
  margin: 0;
}

#app-shell .calendar-command-row {
  display: grid;
  grid-template-columns: minmax(250px, 300px) minmax(165px, 185px) auto;
  align-items: end;
  gap: 0.5rem;
  min-width: 0;
}

#app-shell .calendar-view-control {
  display: grid;
  gap: 0.28rem;
  min-width: 0;
}

#app-shell .calendar-control-label {
  color: #5b6a80;
  font-size: 0.88rem;
  font-weight: 600;
  letter-spacing: 0;
}

#app-shell .calendar-view-segment {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0.18rem;
  min-height: 34px;
  padding: 0.18rem;
  border: 1px solid #cbd8ea;
  border-radius: 12px;
  background: #f6f9fc;
}

#app-shell .calendar-view-segment button {
  min-height: 28px;
  width: 100%;
  padding: 0.28rem 0.55rem;
  border: 0;
  border-radius: 9px;
  background: transparent;
  color: #52647d;
  box-shadow: none;
  font-size: 0.83rem;
  font-weight: 700;
  line-height: 1.2;
  white-space: nowrap;
}

#app-shell .calendar-view-segment button.active {
  background: #ffffff;
  color: #155bc3;
  box-shadow: 0 6px 14px rgba(45, 80, 130, 0.12);
}

#app-shell .calendar-view-segment button:hover {
  color: #155bc3;
}

#app-shell #calendar-form label,
#app-shell #reports-form label,
#app-shell .administration-config-select-grid label {
  color: #5b6a80;
  font-size: 0.88rem;
  font-weight: 600;
  letter-spacing: 0;
}

#app-shell #calendar-form input,
#app-shell #calendar-form select,
#app-shell #calendar-form .multi-select-dropdown summary,
#app-shell #reports-form select,
#app-shell #reports-form .multi-select-dropdown summary,
#app-shell .administration-config-select-grid select {
  min-height: 34px;
  height: auto;
  border-color: #cbd8ea;
  border-radius: 12px;
  color: #17243d;
  font-weight: 400;
  line-height: 1.2;
}

#app-shell #calendar-form .multi-select-dropdown summary,
#app-shell #reports-form .multi-select-dropdown summary {
  background: #ffffff;
}

#app-shell #calendar-today-btn {
  align-self: end;
  min-height: 34px;
  width: auto;
  padding: 0.42rem 0.7rem;
  border-radius: 10px;
  box-shadow: none;
  font-size: 0.84rem;
  font-weight: 600;
  white-space: nowrap;
}

#app-shell .calendar-filter-drawer {
  justify-self: end;
  width: min(100%, 780px);
}

#app-shell .calendar-filter-drawer > summary {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 0.75rem;
  min-height: 34px;
  padding: 0.42rem 0.7rem;
  border: 1px solid #cbd8ea;
  border-radius: 12px;
  background: #f8fbff;
  color: #17243d;
  cursor: pointer;
  font-size: 0.84rem;
  font-weight: 700;
  list-style: none;
}

#app-shell .calendar-filter-drawer > summary::-webkit-details-marker {
  display: none;
}

#app-shell .calendar-filter-drawer > summary::before {
  content: "+";
  color: #155bc3;
  font-size: 1rem;
  font-weight: 800;
}

#app-shell .calendar-filter-drawer[open] > summary::before {
  content: "-";
}

#app-shell #calendar-filter-summary {
  margin-left: auto;
  min-width: 0;
  color: #5b6a80;
  font-size: 0.8rem;
  font-weight: 600;
  overflow: hidden;
  text-align: right;
  text-overflow: ellipsis;
  white-space: nowrap;
}

#app-shell .calendar-filter-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(170px, 1fr));
  gap: 0.55rem;
  margin-top: 0.55rem;
}

#app-shell #calendar-form .multi-select-dropdown[open] .checklist-vertical,
#app-shell #reports-form .multi-select-dropdown[open] .checklist-vertical {
  border-color: #cbd8ea;
  border-radius: 12px;
  box-shadow: 0 18px 36px rgba(31, 47, 69, 0.14);
}

#app-shell #calendar-range,
#app-shell #reports-message,
#app-shell .administration-intro-card .muted {
  margin: 0;
  color: #6b778c;
  font-size: 0.9rem;
  line-height: 1.35;
}

#app-shell #calendar-range {
  flex: 0 1 auto;
  max-width: 100%;
  padding: 0.26rem 0.55rem;
  border: 1px solid #d8e4f2;
  border-radius: 999px;
  background: #ffffff;
  color: #52647d;
  font-size: 0.8rem;
  font-weight: 700;
  white-space: nowrap;
}

#app-shell .calendar-toolbar {
  padding-bottom: 0.55rem;
  border-bottom: 1px solid #edf1f6;
}

#app-shell .calendar-toolbar button,
#app-shell #reports-generate-btn,
#app-shell .administration-config-actions button,
#app-shell .administration-transition-card button {
  min-height: 34px;
  width: auto;
  padding: 0.42rem 0.68rem;
  border-radius: 10px;
  box-shadow: none;
  font-size: 0.84rem;
  font-weight: 600;
  white-space: nowrap;
}

#app-shell .calendar-month-title {
  color: #17243d;
  font-size: 1rem;
  font-weight: 700;
}

#app-shell .calendar-weekdays div {
  border-color: #e2eaf4;
  border-radius: 10px;
  background: #f7f9fc;
  color: #68778d;
  font-size: 0.72rem;
  letter-spacing: 0.04em;
}

#app-shell .calendar-day {
  border-color: #e2eaf4;
  border-radius: 10px;
  background: #ffffff;
}

#app-shell .calendar-day.has-schedule {
  border-color: #cfe1f7;
  background: #fbfdff;
}

#app-shell .calendar-day.empty-day {
  background: #f9fbfd;
}

#app-shell .calendar-day.today {
  border-color: #76a7ee;
  box-shadow: inset 0 0 0 1px #76a7ee;
}

#app-shell .calendar-day.muted-day {
  background: #f7f9fc;
  opacity: 0.8;
}

#app-shell .calendar-day-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 0.4rem;
}

#app-shell .calendar-day-number {
  color: #17243d;
  font-size: 0.9rem;
  font-weight: 800;
}

#app-shell .calendar-day-meta {
  max-width: 72%;
  padding: 0.13rem 0.42rem;
  border-radius: 999px;
  background: #eef5ff;
  color: #355274;
  font-size: 0.68rem;
  font-weight: 700;
  line-height: 1.25;
  text-align: right;
}

#app-shell .calendar-day.empty-day .calendar-day-meta {
  background: #edf1f6;
  color: #7a8798;
}

#app-shell .calendar-day-item {
  border-color: #dbe7f6;
  border-radius: 8px;
  background: #f8fbff;
  color: #17243d;
}

#app-shell .calendar-day-item-empty {
  border-style: dashed;
  background: #ffffff;
  color: #7a8798;
  font-weight: 600;
}

#app-shell .calendar-day-item-scheduled {
  display: grid;
  gap: 0.24rem;
}

#app-shell .calendar-student-expander {
  display: grid;
  gap: 0.3rem;
  min-width: 0;
}

#app-shell .calendar-student-expander > summary {
  display: flex;
  align-items: center;
  gap: 0.45rem;
  min-width: 0;
  color: #155bc3;
  cursor: pointer;
  font-weight: 800;
  list-style: none;
}

#app-shell .calendar-student-expander > summary::-webkit-details-marker {
  display: none;
}

#app-shell .calendar-student-expander > summary::before {
  content: "+";
  display: inline-grid;
  place-items: center;
  flex: 0 0 auto;
  width: 1.05rem;
  height: 1.05rem;
  border-radius: 999px;
  background: #eaf2ff;
  color: #155bc3;
  font-size: 0.82rem;
  font-weight: 900;
  line-height: 1;
}

#app-shell .calendar-student-expander[open] > summary::before {
  content: "-";
}

#app-shell .calendar-student-expander > summary span:first-of-type {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

#app-shell .calendar-student-expander > summary .calendar-day-item-time {
  margin-left: auto;
}

#app-shell .calendar-class-list {
  display: grid;
  gap: 0.26rem;
  padding-top: 0.28rem;
  border-top: 1px solid #e3edf9;
}

#app-shell .calendar-class-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 0.4rem;
  padding: 0.22rem 0.36rem;
  border-radius: 8px;
  background: #ffffff;
}

#app-shell .calendar-class-row strong {
  display: block;
  min-width: 0;
  color: #17243d;
  font-size: 0.72rem;
  font-weight: 800;
  line-height: 1.2;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

#app-shell .calendar-class-row small {
  display: block;
  color: #68778d;
  font-size: 0.66rem;
  font-weight: 700;
  line-height: 1.2;
}

#app-shell .calendar-class-row > span:last-child {
  color: #247446;
  font-size: 0.68rem;
  font-weight: 800;
  white-space: nowrap;
}

#app-shell .calendar-student-drill {
  justify-self: start;
  min-height: 26px;
  width: auto;
  padding: 0.22rem 0.48rem;
  border-radius: 8px;
  box-shadow: none;
  font-size: 0.72rem;
  font-weight: 800;
}

#app-shell .calendar-student-link {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.4rem;
  width: 100%;
  color: #155bc3;
  text-decoration: none;
}

#app-shell .calendar-day-item-time {
  color: #52647d;
  font-size: 0.72rem;
  font-weight: 800;
  white-space: nowrap;
}

#app-shell .calendar-subject-chip-row {
  display: flex;
  flex-wrap: wrap;
  gap: 0.22rem;
}

#app-shell .calendar-subject-chip-row span {
  max-width: 100%;
  padding: 0.1rem 0.34rem;
  border-radius: 999px;
  background: #edf6ef;
  color: #247446;
  font-size: 0.68rem;
  font-weight: 700;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

#app-shell .calendar-student-link:hover {
  color: #0f4fa9;
}

#app-shell .calendar-table-wrap {
  margin-top: 0.55rem;
  border: 1px solid #e3eaf4;
  border-radius: 14px;
  background: #ffffff;
  overflow: auto;
}

#app-shell .calendar-surface th,
#app-shell .calendar-table-wrap th {
  background: #f7f9fc;
  color: #68778d;
  font-size: 0.72rem;
  letter-spacing: 0.04em;
}

#app-shell .calendar-surface td,
#app-shell .calendar-table-wrap td {
  background: #ffffff;
}

#app-shell .administration-subtabs {
  width: fit-content;
  margin: 0;
  padding: 0.18rem;
  border: 1px solid #dbe4f0;
  border-radius: 14px;
  background: #f6f9fc;
  gap: 0.18rem;
}

#app-shell .administration-subtabs .subtab-btn {
  min-height: 32px;
  padding: 0.34rem 0.7rem;
  border: 0;
  border-radius: 10px;
  background: transparent;
  color: #58677c;
  box-shadow: none;
  font-size: 0.9rem;
  font-weight: 500;
  white-space: nowrap;
}

#app-shell .administration-subtabs .subtab-btn:hover {
  background: #edf3fa;
  color: #1f3f6d;
  box-shadow: none;
  transform: none;
}

#app-shell .administration-subtabs .subtab-btn.active {
  background: #ffffff;
  color: #155bc3;
  box-shadow: 0 8px 18px rgba(31, 47, 69, 0.08);
}

#app-shell .administration-workspace-header {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: start;
  gap: 0.75rem;
}

#app-shell .administration-workspace-summary {
  display: grid;
  gap: 0.38rem;
  min-width: 180px;
}

#app-shell .administration-workspace-summary span {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.6rem;
  padding: 0.32rem 0.48rem;
  border: 1px solid #dbe6f4;
  border-radius: 10px;
  background: #f8fbff;
  color: #5b6a80;
  font-size: 0.78rem;
  font-weight: 700;
}

#app-shell .administration-workspace-summary strong {
  color: #155bc3;
  font-size: 0.9rem;
}

#app-shell .administration-tab-panel,
#app-shell .administration-config-form {
  gap: 0.65rem;
}

#app-shell .administration-intro-card h3,
#app-shell .administration-config-card h4,
#app-shell .administration-transition-card h4 {
  color: #17243d;
  font-size: 1rem;
  line-height: 1.2;
  margin: 0 0 0.45rem;
}

#app-shell .dashboard-visibility-group h5 {
  color: #5f6f84;
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.04em;
}

#app-shell .dashboard-visibility-group {
  padding: 0.72rem;
  border: 1px solid #e4edf7;
  border-radius: 14px;
  background: #fbfdff;
}

#app-shell .dashboard-visibility-group + .dashboard-visibility-group {
  margin-top: 0.7rem;
}

#app-shell .administration-config-drawer {
  display: grid;
  gap: 0.65rem;
}

#app-shell .administration-config-drawer > summary,
#app-shell .reports-content-drawer > summary {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 0.65rem;
  color: #17243d;
  cursor: pointer;
  font-size: 1rem;
  font-weight: 800;
  line-height: 1.2;
  list-style: none;
}

#app-shell .administration-config-drawer > summary::-webkit-details-marker,
#app-shell .reports-content-drawer > summary::-webkit-details-marker {
  display: none;
}

#app-shell .administration-config-drawer > summary::before,
#app-shell .reports-content-drawer > summary::before {
  content: "+";
  display: inline-grid;
  place-items: center;
  flex: 0 0 auto;
  width: 1.1rem;
  height: 1.1rem;
  border-radius: 999px;
  background: #eaf2ff;
  color: #155bc3;
  font-size: 0.86rem;
  font-weight: 900;
  line-height: 1;
}

#app-shell .administration-config-drawer[open] > summary::before,
#app-shell .reports-content-drawer[open] > summary::before {
  content: "-";
}

#app-shell .administration-config-drawer > summary span:last-child,
#app-shell .reports-content-drawer > summary span:last-child {
  margin-left: auto;
  padding: 0.16rem 0.5rem;
  border-radius: 999px;
  background: #f1f5fa;
  color: #52647d;
  font-size: 0.74rem;
  font-weight: 800;
  white-space: nowrap;
}

#app-shell .administration-config-drawer[open] > summary {
  padding-bottom: 0.62rem;
  border-bottom: 1px solid #edf2f8;
}

#app-shell .dashboard-visibility-group h5 {
  display: flex;
  align-items: center;
  gap: 0.45rem;
  margin: 0 0 0.55rem;
  color: #50637e;
}

#app-shell .dashboard-visibility-group h5::before {
  content: "";
  width: 7px;
  height: 7px;
  border-radius: 999px;
  background: #2f6df6;
}

#app-shell .administration-config-grid .checklist-row,
#app-shell .reports-content-checklist .checklist-row {
  border: 1px solid #e2eaf4;
  border-radius: 12px;
  background: #f8fbfd;
  padding: 0.42rem 0.6rem;
  color: #31435d;
  font-weight: 500;
}

#app-shell .administration-preview-card {
  padding: 0.75rem;
  box-shadow: none;
}

#app-shell .administration-preview-label {
  color: #68778d;
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: none;
}

#app-shell .administration-preview-value {
  color: #17243d;
  font-size: 1rem;
}

#app-shell #reports-form {
  gap: 0.65rem;
}

#app-shell #reports-form + #reports-message {
  margin-top: 0.65rem;
}

#app-shell #reports-message.status-text {
  display: inline-flex;
  align-items: center;
  width: fit-content;
  max-width: 100%;
}

#app-shell .reports-filter-group {
  border: 1px solid #e2eaf4;
  border-radius: 14px;
  background: #f8fbfd;
  padding: 0.75rem;
}

#app-shell .reports-filter-group h3 {
  color: #17243d;
  font-size: 1rem;
  line-height: 1.2;
  margin: 0 0 0.55rem;
}

#app-shell .reports-criteria-grid {
  grid-template-columns: repeat(auto-fit, minmax(155px, 1fr));
  gap: 0.55rem;
}

#app-shell .reports-student-field {
  grid-column: span 2;
}

#app-shell .reports-content-drawer {
  display: grid;
  gap: 0.6rem;
}

#app-shell .reports-content-drawer[open] > summary {
  padding-bottom: 0.58rem;
  border-bottom: 1px solid #edf2f8;
}

#app-shell .reports-action-row {
  display: flex;
  justify-content: flex-end;
  gap: 0.5rem;
}

#app-shell #tab-attendance.active {
  display: grid;
  gap: 0.65rem;
}

#app-shell #tab-attendance > h2:first-child {
  display: block;
  margin: 0;
  color: #17243d;
  font-size: 1.05rem;
  line-height: 1.2;
}

#app-shell .attendance-subtabs {
  display: inline-flex;
  width: fit-content;
  max-width: 100%;
  align-items: flex-end;
  gap: 0.28rem;
  margin: 0 0 0.35rem;
  padding: 0;
  border: 0;
  border-bottom: 1px solid #d7e2ef;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  overflow-x: auto;
}

#app-shell .attendance-subtabs .subtab-btn {
  min-height: 34px;
  padding: 0.36rem 0.78rem 0.42rem;
  border: 0;
  border-bottom: 3px solid transparent;
  border-radius: 0;
  background: transparent;
  color: #526179;
  box-shadow: none;
  font-size: 0.9rem;
  font-weight: 800;
  white-space: nowrap;
}

#app-shell .attendance-subtabs .subtab-btn:hover {
  background: #f4f8fd;
  color: #155bc3;
  box-shadow: none;
  transform: none;
}

#app-shell .attendance-subtabs .subtab-btn.active {
  border-bottom-color: #155bc3;
  background: #ffffff;
  color: #155bc3;
  box-shadow: none;
}

#app-shell .attendance-tab-panel {
  gap: 0.65rem;
}

#app-shell .attendance-section {
  border: 1px solid #dfe7f1;
  border-radius: 16px;
  background: #ffffff;
  box-shadow: 0 14px 34px rgba(25, 42, 70, 0.06);
  padding: 0.75rem;
}

#app-shell .attendance-section + .attendance-section {
  margin-top: 0;
}

#app-shell .attendance-section h3 {
  color: #17243d;
  font-size: 1rem;
  line-height: 1.2;
  margin: 0;
}

#app-shell .attendance-section-title-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
}

#app-shell .attendance-section-title-row h3 {
  margin: 0;
}

#app-shell .attendance-section-tracker {
  display: grid;
  grid-template-columns: 1fr;
  align-items: start;
  gap: 0.55rem;
}

#app-shell #add-attendance-record-btn {
  order: initial;
  justify-self: end;
  min-height: 34px;
  padding: 0.42rem 0.68rem;
  border-radius: 10px;
  box-shadow: none;
  font-size: 0.84rem;
  white-space: nowrap;
}

#app-shell #attendance-form {
  order: initial;
  grid-column: 1 / -1;
  grid-template-columns: minmax(240px, 1.3fr) minmax(160px, 0.8fr) minmax(150px, 0.7fr) auto;
  gap: 0.55rem;
  margin: 0;
}

#app-shell #attendance-form label,
#app-shell #attendance-filter-form label {
  color: #5b6a80;
  font-size: 0.88rem;
  font-weight: 600;
  letter-spacing: 0;
}

#app-shell #attendance-form input,
#app-shell #attendance-form select,
#app-shell #attendance-form .multi-select-dropdown summary,
#app-shell #attendance-filter-form input,
#app-shell #attendance-filter-form select {
  min-height: 34px;
  border-color: #cbd8ea;
  border-radius: 12px;
  color: #17243d;
  font-weight: 400;
}

#app-shell #attendance-form .multi-select-dropdown summary {
  background: #ffffff;
}

#app-shell #attendance-form .multi-select-dropdown[open] .checklist-vertical {
  border-color: #cbd8ea;
  border-radius: 12px;
  box-shadow: 0 18px 36px rgba(31, 47, 69, 0.14);
}

#app-shell .attendance-entry-actions {
  gap: 0.35rem;
}

#app-shell .attendance-entry-actions button,
#app-shell .attendance-section .table-action-row button {
  min-height: 32px;
  padding: 0.36rem 0.58rem;
  border-radius: 10px;
  box-shadow: none;
  font-size: 0.82rem;
  font-weight: 600;
}

#app-shell .search-pagination-row td {
  background: #f7f9fc;
}

#app-shell .search-pagination-controls {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.6rem;
  flex-wrap: wrap;
  color: #5b6a80;
  font-size: 0.86rem;
  font-weight: 600;
}

#app-shell .search-pagination-controls button {
  min-height: 32px;
  padding: 0.36rem 0.7rem;
  border-radius: 10px;
  box-shadow: none;
  font-size: 0.82rem;
  font-weight: 600;
}

#app-shell .search-pagination-controls button:disabled {
  opacity: 0.45;
  cursor: not-allowed;
}

#app-shell .attendance-section-filters {
  padding: 0;
  overflow: hidden;
}

#app-shell .attendance-filter-panel > summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 46px;
  padding: 0.7rem 0.8rem;
  cursor: pointer;
  list-style: none;
  color: #17243d;
  font-size: 0.96rem;
  font-weight: 700;
  letter-spacing: 0;
}

#app-shell .attendance-filter-panel > summary::-webkit-details-marker {
  display: none;
}

#app-shell .attendance-filter-panel > summary::after {
  content: "+";
  display: inline-grid;
  place-items: center;
  flex: 0 0 auto;
  width: 1.45rem;
  height: 1.45rem;
  border: 1px solid #c5d6e8;
  border-radius: 999px;
  background: #ffffff;
  color: #1f66bd;
  font-weight: 700;
  line-height: 1;
}

#app-shell .attendance-filter-panel[open] > summary {
  border-bottom: 1px solid #e4ebf4;
}

#app-shell .attendance-filter-panel[open] > summary::after {
  content: "-";
}

#app-shell #attendance-filter-form {
  grid-template-columns: minmax(180px, 1.25fr) minmax(130px, 0.72fr) minmax(130px, 0.72fr) minmax(145px, 0.82fr) minmax(145px, 0.82fr) auto;
  gap: 0.55rem;
  margin: 0;
  padding: 0.75rem;
}

#app-shell #attendance-clear-filters-btn {
  min-height: 34px;
  width: auto;
  padding: 0.42rem 0.72rem;
  border-radius: 10px;
  background: #f3f7fc;
  color: #526179;
  box-shadow: none;
  font-size: 0.84rem;
  font-weight: 500;
  white-space: nowrap;
}

#app-shell #attendance-clear-filters-btn:hover {
  background: #edf3fa;
  color: #1f3f6d;
  transform: none;
}

#app-shell .attendance-section .table-wrap {
  margin-top: 0.55rem;
  border: 1px solid #e3eaf4;
  border-radius: 14px;
  background: #ffffff;
  overflow: auto;
}

#app-shell .attendance-section table {
  width: 100%;
}

#app-shell .attendance-section th {
  background: #f7f9fc;
  color: #68778d;
  font-size: 0.72rem;
  letter-spacing: 0.04em;
}

#app-shell .attendance-section td {
  background: #ffffff;
}

#app-shell .attendance-status-pill {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 1.55rem;
  width: fit-content;
  max-width: 100%;
  padding: 0.16rem 0.55rem;
  border-radius: 999px;
  font-size: 0.76rem;
  font-weight: 800;
  white-space: nowrap;
}

#app-shell .attendance-status-pill.present {
  background: #e7f5ec;
  color: #24613c;
}

#app-shell .attendance-status-pill.absent {
  background: #fff1f1;
  color: #a33a3a;
}

#app-shell .attendance-search-edit-row td {
  background: #f8fbff;
}

#app-shell .attendance-search-edit-row input,
#app-shell .attendance-search-edit-row select {
  min-height: 34px;
  border-color: #cbd8ea;
  border-radius: 10px;
  font-weight: 400;
}

#app-shell #tab-grades.active {
  display: grid;
  gap: 0.65rem;
}

#app-shell #tab-grades > h2:first-child {
  display: block;
  margin: 0;
  color: #17243d;
  font-size: 1.05rem;
  line-height: 1.2;
}

#app-shell .grades-subtabs {
  display: inline-flex;
  width: fit-content;
  max-width: 100%;
  align-items: flex-end;
  gap: 0.28rem;
  margin: 0 0 0.35rem;
  padding: 0;
  border: 0;
  border-bottom: 1px solid #d7e2ef;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  overflow-x: auto;
}

#app-shell .grades-subtabs .subtab-btn {
  min-height: 34px;
  padding: 0.36rem 0.78rem 0.42rem;
  border: 0;
  border-bottom: 3px solid transparent;
  border-radius: 0;
  background: transparent;
  color: #526179;
  box-shadow: none;
  font-size: 0.9rem;
  font-weight: 800;
  white-space: nowrap;
}

#app-shell .grades-subtabs .subtab-btn:hover {
  background: #f4f8fd;
  color: #155bc3;
  box-shadow: none;
  transform: none;
}

#app-shell .grades-subtabs .subtab-btn.active {
  border-bottom-color: #155bc3;
  background: #ffffff;
  color: #155bc3;
  box-shadow: none;
}

#app-shell .grades-tab-panel {
  gap: 0.65rem;
}

#app-shell .grades-section {
  border: 1px solid #dfe7f1;
  border-radius: 16px;
  background: #ffffff;
  box-shadow: 0 14px 34px rgba(25, 42, 70, 0.06);
  padding: 0.75rem;
}

#app-shell .grades-section + .grades-section {
  margin-top: 0;
}

#app-shell .grades-section h3 {
  color: #17243d;
  font-size: 1rem;
  line-height: 1.2;
  margin: 0;
}

#app-shell .grades-section-title-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
}

#app-shell .grades-section-title-row h3 {
  margin: 0;
}

#app-shell .grades-section-entry {
  display: grid;
  grid-template-columns: 1fr;
  align-items: start;
  gap: 0.55rem;
}

#app-shell #add-grade-row-btn {
  order: initial;
  justify-self: end;
  min-height: 34px;
  padding: 0.42rem 0.68rem;
  border-radius: 10px;
  box-shadow: none;
  font-size: 0.84rem;
  white-space: nowrap;
}

#app-shell #grade-entry-wrap {
  order: initial;
  grid-column: 1 / -1;
}

#app-shell .grades-section-filters {
  padding: 0;
  overflow: visible;
}

#app-shell .grades-filter-panel > summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 46px;
  padding: 0.7rem 0.8rem;
  cursor: pointer;
  list-style: none;
  color: #17243d;
  font-size: 0.96rem;
  font-weight: 700;
  letter-spacing: 0;
}

#app-shell .grades-filter-panel > summary::-webkit-details-marker {
  display: none;
}

#app-shell .grades-filter-panel > summary::after {
  content: "+";
  display: inline-grid;
  place-items: center;
  flex: 0 0 auto;
  width: 1.45rem;
  height: 1.45rem;
  border: 1px solid #c5d6e8;
  border-radius: 999px;
  background: #ffffff;
  color: #1f66bd;
  font-weight: 700;
  line-height: 1;
}

#app-shell .grades-filter-panel[open] > summary {
  border-bottom: 1px solid #e4ebf4;
}

#app-shell .grades-filter-panel[open] > summary::after {
  content: "-";
}

#app-shell #grades-filter-form {
  grid-template-columns: repeat(6, minmax(0, 1fr));
  align-items: end;
  gap: 0.55rem;
  margin: 0;
  padding: 0.75rem;
}

#app-shell #grades-filter-form label {
  min-width: 0;
  color: #5b6a80;
  font-size: 0.88rem;
  font-weight: 600;
  letter-spacing: 0;
}

#app-shell #grades-filter-form .grades-filter-scheduled-item-field {
  grid-column: 1;
}

#app-shell #grades-filter-form select {
  width: 100%;
  min-height: 34px;
  border-color: #cbd8ea;
  border-radius: 12px;
  color: #17243d;
  font-weight: 400;
}

#app-shell #grades-filter-form .multi-select-dropdown {
  position: relative;
  overflow: visible;
  width: 100%;
  min-height: 34px;
  border-color: #cbd8ea;
  border-radius: 12px;
}

#app-shell #grades-filter-form .multi-select-dropdown summary {
  width: 100%;
  min-height: 34px;
  overflow: hidden;
  border-radius: 12px;
  color: #17243d;
  font-weight: 400;
  white-space: nowrap;
  text-overflow: ellipsis;
}

#app-shell #grades-filter-form .multi-select-dropdown[open] {
  z-index: 30;
}

#app-shell #grades-filter-form #grades-filter-scheduled-item-dropdown[open] .checklist-vertical {
  display: block;
  position: absolute;
  top: calc(100% + 0.35rem);
  left: 0;
  width: min(540px, 78vw);
  max-width: min(540px, 78vw);
  max-height: 320px;
  gap: 0;
  margin-top: 0;
  padding: 0.45rem;
  overflow: auto;
  background: rgba(255, 255, 255, 0.98);
  border: 1px solid var(--edge-strong);
  border-radius: 14px;
  box-shadow: 0 16px 32px rgba(26, 44, 69, 0.16);
  z-index: 40;
}

#app-shell #grades-filter-form #grades-filter-scheduled-item-dropdown[open] .checklist-row {
  display: grid;
  grid-template-columns: 14px minmax(0, 1fr);
  align-items: start;
  gap: 0.4rem;
  height: auto;
  min-height: 0;
  margin: 0;
  padding: 0.28rem 0;
}

#app-shell #grades-filter-form #grades-filter-scheduled-item-dropdown[open] .checklist-row input[type="checkbox"] {
  width: 13px;
  height: 13px;
  margin: 0;
}

#app-shell #grades-filter-form #grades-filter-scheduled-item-dropdown[open] .checklist-row label {
  display: block;
  margin: 0;
  padding: 0;
  font-size: 0.86rem;
  font-weight: 400;
  line-height: 1.22;
  white-space: normal;
}

#app-shell #grades-filter-form #grades-filter-scheduled-item-dropdown[open] .checklist-group-label {
  margin: 0.5rem 0 0.2rem;
}

#app-shell #grades-filter-form #grades-filter-scheduled-item-dropdown[open] .checklist-group-label:first-child,
#app-shell #grades-filter-form #grades-filter-scheduled-item-dropdown[open] .checklist-row + .checklist-group-label {
  margin-top: 0.65rem;
}

#app-shell #grades-filter-form input {
  min-height: 34px;
  border-color: #cbd8ea;
  border-radius: 12px;
}

#app-shell .grades-filter-actions {
  display: flex;
  align-items: end;
  gap: 0.45rem;
}

#app-shell #grades-apply-filters-btn,
#app-shell #grades-clear-filters-btn {
  min-height: 34px;
  width: auto;
  max-width: none;
  padding: 0.42rem 0.72rem;
  border-radius: 10px;
  background: #f3f7fc;
  color: #526179;
  box-shadow: none;
  font-size: 0.84rem;
  font-weight: 500;
  white-space: nowrap;
}

#app-shell #grades-apply-filters-btn {
  min-width: 84px;
  background: #1f66bd;
  color: #ffffff;
}

#app-shell #grades-clear-filters-btn {
  min-width: 108px;
}

#app-shell #grades-clear-filters-btn:hover {
  background: #edf3fa;
  color: #1f3f6d;
  transform: none;
}

#app-shell .grades-section .table-wrap,
#app-shell .search-grade-edit-wrap {
  margin-top: 0.55rem;
  border: 1px solid #e3eaf4;
  border-radius: 14px;
  background: #ffffff;
  overflow: auto;
}

#app-shell .grades-section table {
  width: 100%;
}

#app-shell .grades-section th {
  background: #f7f9fc;
  color: #68778d;
  font-size: 0.72rem;
  letter-spacing: 0.04em;
}

#app-shell .grades-section td {
  background: #ffffff;
}

#app-shell .grades-section .table-action-row button,
#app-shell .grade-entry-actions button,
#app-shell .grade-calc-actions button {
  min-height: 32px;
  padding: 0.36rem 0.58rem;
  border-radius: 10px;
  box-shadow: none;
  font-size: 0.82rem;
  font-weight: 600;
}

#app-shell .grade-entry-actions {
  grid-template-columns: 64px 78px 64px;
  gap: 0.25rem;
}

#app-shell .grade-calc-panel {
  border: 1px solid #e2eaf4;
  border-radius: 14px;
  background: #f8fbfd;
  padding: 0.65rem 0.75rem;
}

#app-shell .grade-calc-panel label span {
  color: #5f6f84;
  font-size: 0.76rem;
  font-weight: 600;
  letter-spacing: 0.03em;
}

#app-shell #grade-entry-wrap input,
#app-shell #grade-entry-wrap select {
  min-height: 34px;
  border-color: #cbd8ea;
  border-radius: 10px;
  font-weight: 400;
}

@media (min-width: 821px) and (max-width: 1420px) {
  #app-shell .app-topbar {
    grid-template-columns: 228px minmax(250px, 420px) 1fr;
    gap: 0.9rem;
    min-height: 84px;
    padding: 0.8rem 1.15rem;
  }

  #app-shell .app-topbar .title-logo {
    width: 196px;
    max-height: 62px;
  }

  #app-shell .app-global-search {
    min-height: 46px;
  }

  #app-shell .app-topbar .account-menu-trigger {
    grid-template-columns: 42px max-content 16px;
    gap: 0.55rem;
    min-height: 48px;
  }

  #app-shell .account-avatar {
    width: 42px;
    height: 42px;
  }

  #app-shell .app-layout {
    grid-template-columns: 204px minmax(0, 1fr);
  }

  #app-shell .app-sidebar {
    top: 84px;
    min-height: calc(100vh - 84px);
    padding: 1rem 0.75rem;
  }

  #app-shell .app-sidebar-nav {
    gap: 0.32rem;
  }

  #app-shell .app-sidebar-nav .tab-btn {
    grid-template-columns: 22px 1fr;
    gap: 0.58rem;
    min-height: 44px;
    padding: 0.55rem 0.72rem;
    border-radius: 10px;
    font-size: 0.9rem;
  }

  #app-shell .app-sidebar-nav .tab-btn img {
    width: 20px;
    height: 20px;
  }

  #app-shell .sidebar-year-card {
    margin-top: 2.25rem;
  }

  #app-shell .sidebar-support-card {
    padding: 0.8rem;
  }

  #app-shell .app-main {
    gap: 0.85rem;
    padding: 1.25rem;
  }

  #app-shell .dashboard-section {
    padding: 0.85rem;
    border-radius: 14px;
  }

  #app-shell .dashboard-section-overview {
    gap: 0.65rem;
    padding: 0.9rem;
  }

  #app-shell .dashboard-section-overview .kpi-grid,
  #app-shell .dashboard-summary-grid,
  #app-shell .dashboard-pace-grid,
  #app-shell .dashboard-chip-grid {
    gap: 0.55rem;
  }

  #app-shell .dashboard-visual-summary-grid {
    grid-template-columns: repeat(auto-fit, minmax(185px, 1fr));
  }

  #app-shell .dashboard-visual-card {
    min-height: 260px;
    padding: 1rem 0.95rem 0.9rem;
    border-radius: 16px;
  }

  #app-shell .dashboard-visual-icon {
    width: 3.2rem;
    height: 3.2rem;
    margin-bottom: 0.75rem;
    border-width: 5px;
  }

  #app-shell .dashboard-visual-icon svg,
  #app-shell .dashboard-grade-check svg {
    width: 1.55rem;
    height: 1.55rem;
  }

  #app-shell .dashboard-visual-card .dashboard-summary-label {
    font-size: 0.76rem;
  }

  #app-shell .dashboard-visual-card .dashboard-summary-note {
    margin-top: 0.8rem;
    font-size: 0.84rem;
    line-height: 1.32;
  }

  #app-shell .dashboard-open-mini {
    gap: 0.32rem;
    margin-top: 0.75rem;
  }

  #app-shell .dashboard-open-mini button {
    padding: 0.3rem 0.34rem;
    border-radius: 10px;
  }

  #app-shell .dashboard-open-mini small {
    font-size: 0.62rem;
  }

  #app-shell .dashboard-required-subject-mini {
    gap: 0.34rem;
    max-height: 4.9rem;
    margin-top: 0.75rem;
  }

  #app-shell .dashboard-required-subject-mini button {
    padding: 0.34rem 0.42rem;
    border-radius: 10px;
  }

  #app-shell .dashboard-chip-grid {
    grid-template-columns: repeat(auto-fit, minmax(155px, 1fr));
  }

  #app-shell .dashboard-open-gauge {
    min-height: 160px;
    gap: 0.36rem;
    padding: 0.78rem 0.82rem 0.86rem;
    border-radius: 12px;
  }

  #app-shell .dashboard-open-gauge-icon {
    width: 2.5rem;
    height: 2.5rem;
  }

  #app-shell .dashboard-open-gauge-icon svg {
    width: 1.1rem;
    height: 1.1rem;
  }

  #app-shell .dashboard-open-gauge-label {
    font-size: 0.68rem;
  }

  #app-shell .dashboard-open-gauge-value {
    font-size: clamp(1.8rem, 2.6vw, 2.25rem);
  }

  #app-shell .dashboard-open-gauge-action {
    top: 0.7rem;
    right: 0.7rem;
    width: 1.9rem;
    height: 1.9rem;
  }

  #app-shell .dashboard-open-gauge-note {
    max-width: 22ch;
    font-size: 0.74rem;
  }

  #app-shell .dashboard-class-status-actions {
    gap: 0.32rem;
  }

  #app-shell .dashboard-class-status-actions button {
    padding: 0.34rem 0.42rem;
  }

  #app-shell #dashboard-section-completion-today,
  #app-shell #dashboard-section-needs-attention-today {
    padding: 1rem;
    border-radius: 16px;
  }

  #app-shell .student-performance-toolbar.completion-detail-toolbar {
    grid-template-columns: minmax(220px, 0.9fr) minmax(470px, 1fr);
    column-gap: 1rem;
  }

  #app-shell #completion-today-filter-form {
    grid-template-columns: minmax(170px, 1.25fr) minmax(150px, 0.9fr) minmax(135px, 0.8fr);
    gap: 0.55rem;
    width: min(100%, 540px);
  }

  #app-shell .completion-detail-gauge {
    padding: 0.9rem;
  }

  #app-shell .completion-detail-table {
    min-width: 900px;
  }

  #app-shell .completion-detail-table th,
  #app-shell .completion-detail-table td {
    padding: 0.6rem 0.7rem;
  }

  #app-shell .completion-detail-row td:first-child {
    min-width: 210px;
  }

  #app-shell #school-day-table {
    min-width: 1000px;
  }

  #app-shell #school-day-table th,
  #app-shell #school-day-table td {
    padding: 0.52rem 0.58rem;
  }

  #app-shell #school-day-table .school-day-hour-column {
    min-width: 8.4rem;
  }

  #app-shell #school-day-table .school-day-planned-column {
    min-width: 17rem;
  }
}

@media (max-width: 1120px) {
  #app-shell .app-topbar {
    grid-template-columns: 240px 1fr auto;
    gap: 1rem;
  }

  #app-shell .app-topbar .title-logo {
    width: 205px;
  }

  #app-shell .app-layout {
    grid-template-columns: 220px minmax(0, 1fr);
  }

  #app-shell .dashboard-section-overview .kpi-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  #app-shell .compliance-metric-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  #app-shell .compliance-visual-grid {
    grid-template-columns: 1fr;
  }

  #app-shell .required-hours-header {
    grid-template-columns: 1fr;
  }

  #app-shell .required-hours-layout {
    grid-template-columns: 1fr;
    grid-template-areas:
      "pace"
      "projection"
      "key"
      "progress";
  }

  #app-shell .required-hours-key-card {
    order: initial;
  }

  #app-shell .required-hours-outcome {
    grid-template-columns: auto minmax(0, 1fr);
  }

  #app-shell .required-hours-outcome-metrics,
  #app-shell .required-hours-shield {
    grid-column: 1 / -1;
  }

  #app-shell .required-hours-shield {
    display: none;
  }

  #app-shell #grades-filter-form {
    grid-template-columns: repeat(3, minmax(150px, 1fr));
  }

  #app-shell #attendance-filter-form,
  #app-shell #attendance-form {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  #app-shell #student-enrollment-form {
    grid-template-columns: 1fr;
  }

  #app-shell .management-subtabs,
  #app-shell .management-courses-subtabs {
    width: 100%;
  }

  #app-shell .school-day-readiness-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  #app-shell .schedule-subtabs {
    width: 100%;
  }

  #app-shell #plan-filter-form {
    grid-template-columns: 1fr 1fr;
  }

  #app-shell #calendar-form,
  #app-shell .reports-criteria-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  #app-shell .administration-workspace-header {
    grid-template-columns: 1fr;
  }

  #app-shell .administration-workspace-summary {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    min-width: 0;
  }

  #app-shell .calendar-filter-drawer {
    justify-self: stretch;
    width: 100%;
  }

  #app-shell .calendar-filter-grid {
    grid-template-columns: 1fr;
  }

  #app-shell .administration-subtabs {
    width: 100%;
  }
}

@media (max-width: 1200px) {
  #app-shell .student-performance-toolbar,
  #app-shell .course-watchlist-toolbar {
    grid-template-columns: 1fr;
  }

  #app-shell .course-watchlist-summary {
    justify-items: start;
  }
}

@media (max-width: 980px) {
  #app-shell .reports-page-header,
  #app-shell .administration-page-header {
    align-items: flex-start;
    flex-direction: column;
  }

  #app-shell #reports-active-summary,
  #app-shell #administration-active-summary {
    white-space: normal;
  }

  #app-shell .school-day-form {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 820px) {
  #app-shell .app-topbar {
    grid-template-columns: 1fr auto;
    grid-template-areas:
      "brand session"
      "search search";
    min-height: 0;
  }

  #app-shell .app-layout {
    grid-template-columns: 1fr;
  }

  #app-shell .app-sidebar {
    position: static;
    min-height: 0;
    border-right: 0;
    border-bottom: 1px solid #e3eaf4;
  }

  #app-shell .app-sidebar-nav {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  #app-shell .sidebar-support-card {
    display: none;
  }

  #app-shell .app-main {
    padding: 1rem;
  }

  #app-shell .dashboard-subtabs {
    width: 100%;
  }

  #app-shell .progress-wrap {
    grid-template-columns: 1fr;
  }

  #app-shell .compliance-gauge-header {
    display: grid;
  }

  #app-shell .compliance-metric-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  #app-shell .compliance-ring-card {
    grid-template-columns: 1fr;
    justify-items: start;
  }

  #app-shell .required-hours-controls,
  #app-shell .required-hours-main,
  #app-shell .required-hours-outcome-metrics,
  #app-shell .required-hours-comparison {
    grid-template-columns: 1fr;
  }

  #app-shell .required-hours-outcome {
    grid-template-columns: 1fr;
    justify-items: start;
  }

  #app-shell .required-hours-outcome-metrics {
    width: 100%;
    padding-left: 0;
    padding-top: 1rem;
    border-left: 0;
    border-top: 1px solid #dbe5f1;
  }

  #app-shell .school-day-nav-row,
  #app-shell .school-day-quick-filters,
  #app-shell .school-day-subtabs {
    width: 100%;
  }

  #app-shell .school-day-subtabs {
    margin-left: 0;
    justify-content: flex-start;
  }

  #app-shell .school-day-section-header {
    grid-template-columns: 1fr;
  }

  #app-shell .school-day-date-nav {
    justify-self: stretch;
  }

  #app-shell #grades-filter-form {
    grid-template-columns: 1fr;
  }

  #app-shell .grades-section-entry {
    grid-template-columns: 1fr;
  }

  #app-shell #add-grade-row-btn {
    justify-self: start;
  }

  #app-shell #attendance-filter-form,
  #app-shell #attendance-form {
    grid-template-columns: 1fr;
  }

  #app-shell .attendance-section-tracker {
    grid-template-columns: 1fr;
  }

  #app-shell #add-attendance-record-btn {
    justify-self: start;
  }

  #app-shell #student-form,
  #app-shell #student-summary-form {
    grid-template-columns: 1fr;
  }

  #app-shell #student-detail-filter-form {
    grid-template-columns: 1fr;
  }

  #app-shell #plan-filter-form {
    grid-template-columns: 1fr;
  }

  #app-shell #calendar-form,
  #app-shell .reports-criteria-grid {
    grid-template-columns: 1fr;
  }

  #app-shell .calendar-page-header {
    align-items: flex-start;
    flex-direction: column;
  }

  #app-shell #calendar-range {
    white-space: normal;
  }

  #app-shell .calendar-command-row {
    grid-template-columns: minmax(220px, 1.25fr) minmax(0, 1fr) auto;
  }

  #app-shell .reports-student-field {
    grid-column: span 1;
  }
}

@media (max-width: 560px) {
  #app-shell .calendar-command-row {
    grid-template-columns: 1fr;
  }

  #app-shell .calendar-filter-drawer > summary {
    align-items: flex-start;
    flex-direction: column;
  }

  #app-shell .administration-workspace-summary {
    grid-template-columns: 1fr;
  }

  #app-shell .administration-config-drawer > summary,
  #app-shell .reports-content-drawer > summary {
    align-items: flex-start;
    flex-direction: column;
  }

  #app-shell .administration-config-drawer > summary span:last-child,
  #app-shell .reports-content-drawer > summary span:last-child {
    margin-left: 0;
  }

  #app-shell #calendar-filter-summary {
    margin-left: 0;
    text-align: left;
    white-space: normal;
  }

  #app-shell .app-topbar {
    padding: 0.85rem;
  }

  #app-shell .app-icon-button,
  #app-shell .account-menu-copy,
  #app-shell .account-menu-caret,
  #app-shell .app-global-search kbd {
    display: none;
  }

  #app-shell .app-topbar .account-menu-trigger {
    display: inline-flex;
  }

  #app-shell .app-sidebar-nav {
    grid-template-columns: 1fr;
  }

  #app-shell .dashboard-section-overview .kpi-grid,
  #app-shell .dashboard-summary-grid,
  #app-shell .dashboard-pace-grid,
  #app-shell .dashboard-chip-grid {
    grid-template-columns: 1fr;
  }

  #app-shell .dashboard-section-header {
    align-items: flex-start;
    flex-direction: column;
  }

  #app-shell .school-day-form,
  #app-shell .school-day-student-summaries,
  #app-shell .school-day-overview-grid {
    grid-template-columns: 1fr;
  }
}