:root {
  --cc-navy: #00375B;
  --cc-dark-turquoise: #00A2A8;
  --cc-light-turquoise: #00CCD4;
  --cc-white: #FFFFFF;
  --cc-mist: #eef7f8;
  --bs-primary: var(--cc-navy);
  --bs-primary-rgb: 0, 55, 91;
}

body { min-height: 100vh; background: linear-gradient(145deg, var(--cc-mist), var(--cc-white) 55%); }
*, *::before, *::after { box-sizing: border-box; }
.login-shell { min-height: 100vh; display: grid; place-items: center; padding: 1.5rem; }
.login-card { width: min(100%, 28rem); border: 0; overflow: hidden; }
.brand-band { background: var(--cc-navy); color: var(--cc-white); padding: 1rem 1.5rem; }
.brand-band .bi { color: var(--cc-light-turquoise); margin-right: .5rem; }
.btn-primary { --bs-btn-bg: var(--cc-navy); --bs-btn-border-color: var(--cc-navy); --bs-btn-hover-bg: var(--cc-navy); --bs-btn-hover-border-color: var(--cc-light-turquoise); }
.form-control:focus, :focus-visible { outline: 3px solid var(--cc-navy); outline-offset: 3px; box-shadow: none; }
.btn, .app-navigation a, .app-navigation button { transition: transform 140ms ease, box-shadow 140ms ease, color 140ms ease, border-color 140ms ease; }
.btn:hover, .app-navigation a:hover, .app-navigation button:hover { transform: translateY(-2px); box-shadow: 0 .25rem .5rem rgb(0 55 91 / 20%); text-decoration: underline; }
.btn:active, .app-navigation a:active, .app-navigation button:active { transform: translateY(1px); box-shadow: none; }
.btn:focus-visible, .app-navigation a:focus-visible, .app-navigation button:focus-visible { outline: 3px solid var(--cc-navy); outline-offset: 3px; }
.btn:disabled, .btn[aria-disabled="true"] { opacity: 1; filter: grayscale(.35); border-style: dashed; cursor: not-allowed; }
.eyebrow { color: var(--cc-navy); font-weight: 700; letter-spacing: .08em; text-transform: uppercase; }
.skip-link { position: fixed; z-index: 1000; top: .5rem; left: .5rem; padding: .75rem 1rem; background: var(--cc-white); color: var(--cc-navy); transform: translateY(-150%); clip-path: inset(50%); }
.skip-link:focus { transform: translateY(0); clip-path: none; }
.app-frame { min-height: 100vh; min-width: 0; }
.mobile-header { min-height: 4rem; display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: .5rem 1rem; background: var(--cc-navy); color: var(--cc-white); }
.mobile-header .bi, .sidebar-brand .bi { color: var(--cc-light-turquoise); }
.mobile-menu { position: relative; }
.mobile-menu summary { min-height: 44px; display: flex; align-items: center; gap: .5rem; padding: .5rem; cursor: pointer; }
.mobile-menu[open] .app-navigation { position: absolute; z-index: 10; right: 0; top: calc(100% + .5rem); width: min(17rem, calc(100vw - 2rem)); padding: .5rem; background: var(--cc-white); border: 2px solid var(--cc-navy); box-shadow: 0 .5rem 1rem rgb(0 55 91 / 18%); }
.sidebar { display: none; background: var(--cc-navy); color: var(--cc-white); }
.sidebar-brand { padding: 1.25rem; font-size: 1.2rem; font-weight: 700; }
.app-navigation { display: grid; gap: .25rem; }
.app-navigation a, .app-navigation button { min-height: 44px; width: 100%; display: flex; align-items: center; gap: .75rem; padding: .65rem .8rem; border: 0; border-radius: .25rem; background: transparent; color: var(--cc-navy); text-align: left; text-decoration: none; }
.app-navigation a[aria-current="page"] { background: var(--cc-mist); font-weight: 700; }
.app-navigation form { margin: 0; }
.app-main { min-width: 0; max-width: 70rem; padding: 1.5rem 1rem; overflow-wrap: anywhere; }
.identity-summary { display: grid; grid-template-columns: max-content minmax(0, 1fr); gap: .5rem 1rem; margin-top: 2rem; }
.identity-summary dt, .identity-summary dd { margin: 0; }
.dashboard-heading { display: flex; flex-wrap: wrap; align-items: end; justify-content: space-between; gap: 1rem; }
.dashboard-heading .btn, .dashboard-actions .btn { min-height: 44px; }
.dashboard-updated { color: #495057; }
.dashboard-metrics { display: grid; gap: 1rem; margin-top: 1.5rem; }
.dashboard-attention { display: grid; gap: 1rem; }
.dashboard-card { border-left: .3rem solid var(--cc-dark-turquoise); }
.dashboard-value { margin-bottom: .25rem; color: var(--cc-navy); font-size: clamp(1.75rem, 8vw, 2.5rem); font-weight: 700; }
.dashboard-actions { display: flex; flex-wrap: wrap; gap: .75rem; }
.user-card { margin-top: auto; padding: 1rem 1.25rem; border-top: 1px solid rgb(255 255 255 / 35%); }
.user-card span { display: block; overflow-wrap: anywhere; }
.user-name { font-weight: 700; }
.student-search-form { max-width: 46rem; margin: 1.5rem 0; }
.student-heading { display: flex; flex-wrap: wrap; align-items: end; justify-content: space-between; gap: 1rem; }
.student-heading .btn, .student-create .btn, .student-create .form-control { min-height: 44px; }
.student-create { max-width: 40rem; }
.student-search-form .btn, .student-search-form .form-control { min-height: 44px; }
.htmx-indicator { display: none; margin-top: .75rem; color: var(--cc-navy); }
.htmx-request .htmx-indicator, .htmx-request.htmx-indicator { display: block; }
.student-results { margin-top: 1.5rem; }
.student-results-cards { display: grid; gap: 1rem; }
.student-card { border-left: .3rem solid var(--cc-dark-turquoise); }
.student-card dl { display: grid; grid-template-columns: max-content 1fr; gap: .35rem 1rem; margin: 0; }
.student-card dd { margin: 0; overflow-wrap: anywhere; }
.student-results-table th, .student-results-table td { vertical-align: middle; }
.student-results .btn, .incident-panel .btn, .incident-panel .form-select { min-height: 44px; }
.student-actions { display: flex; flex-wrap: wrap; gap: .5rem; }
.incident-panel { max-width: 46rem; }
.student-summary { margin: 1.25rem 0; padding: 1rem; border-left: .3rem solid var(--cc-dark-turquoise); background: var(--cc-white); }
.student-summary dl { display: grid; grid-template-columns: max-content minmax(0, 1fr); gap: .35rem 1rem; margin: 0; }
.student-summary dd { margin: 0; overflow-wrap: anywhere; }
.history-panel { min-width: 0; }
.history-panel .btn { min-height: 44px; }
.recurrence-status, .empty-state { margin: 1.5rem 0; padding: 1rem; border: 2px solid var(--cc-dark-turquoise); border-radius: .25rem; background: var(--cc-white); }
.recurrence-warning { border-color: #8a4b00; background: #fff4df; }
.history-heading { margin-top: 2rem; }
.history-cards { display: grid; gap: 1rem; }
.history-card { min-width: 0; border-left: .3rem solid var(--cc-dark-turquoise); }
.history-voided { border-left-color: #6c757d; background-color: #f5f5f5; }
.history-card dl { display: grid; grid-template-columns: max-content minmax(0, 1fr); gap: .35rem 1rem; margin: 0; }
.history-card dd { margin: 0; min-width: 0; }
.history-observation { white-space: pre-wrap; overflow-wrap: anywhere; word-break: break-word; }
.time-zone { display: block; font-size: .875rem; color: #495057; }
.history-table { width: 100%; table-layout: fixed; }
.history-table th, .history-table td { vertical-align: top; overflow-wrap: anywhere; }
.incident-actions { display: flex; flex-wrap: wrap; gap: .5rem; }
.incident-actions .btn { min-height: 44px; }
.action-dialog { width: min(44rem, calc(100vw - 2rem)); max-height: calc(100dvh - 2rem); margin: 1rem auto; padding: 1.25rem; border: 2px solid var(--cc-navy); border-radius: .5rem; overflow-y: auto; box-shadow: 0 1rem 3rem rgb(0 0 0 / 35%); }
.action-dialog::backdrop { background: rgb(0 30 50 / 65%); }
.action-dialog-close { float: right; margin: -.5rem -.5rem .5rem .5rem; }
.action-summary { margin: 1.25rem 0; padding: 1rem; border-left: .3rem solid var(--cc-dark-turquoise); background: var(--cc-white); }
.action-summary dl { display: grid; grid-template-columns: max-content minmax(0, 1fr); gap: .35rem 1rem; margin: 0; }
.action-summary dd { margin: 0; overflow-wrap: anywhere; }
.action-consequences { border-radius: 0; }
.action-consequences ul { margin-bottom: 0; padding-left: 1.25rem; }
.action-commit { display: flex; flex-wrap: wrap; gap: .5rem; }
.action-label { display: contents; }
.action-busy-label { display: none; }
[data-action-state][aria-busy="true"] .action-label { display: none; }
[data-action-state][aria-busy="true"] .action-busy-label { display: inline-flex; align-items: center; gap: .5rem; }
.action-spinner { width: 1rem; height: 1rem; border: 2px solid currentColor; border-right-color: transparent; border-radius: 50%; animation: action-spin .7s linear infinite; }
.void-action { display: inline-flex; padding-inline-start: .5rem; border-inline-start: 2px solid #6c757d; }
.student-deactivate { max-width: 40rem; }
.student-deactivate .btn { min-height: 44px; }
.deactivate-action { margin-top: 1.5rem; padding-top: 1.5rem; border-top: 2px solid #6c757d; }
.student-import { max-width: 58rem; }
.import-steps { display: grid; gap: .5rem; padding: 0; list-style: none; }
.import-steps li { padding: .75rem 1rem; border-left: .3rem solid #6c757d; background: var(--cc-white); }
.import-steps li[aria-current="step"] { border-color: var(--cc-dark-turquoise); }
.import-form { max-width: 46rem; margin: 1.5rem 0; }
.import-form .btn, .import-form .form-control { min-height: 44px; }
.import-confirm-form { display: flex; flex-wrap: wrap; gap: .75rem; }
.import-confirm-form .btn, .import-results > .btn { min-height: 44px; }
.import-results { margin-top: 1.5rem; }
.import-cards { display: grid; gap: 1rem; }
.import-cards .card { border-left: .3rem solid var(--cc-dark-turquoise); }
.import-cards dl { display: grid; grid-template-columns: max-content minmax(0, 1fr); gap: .35rem 1rem; margin: 0; }
.import-cards dd { margin: 0; overflow-wrap: anywhere; }
.import-table { table-layout: fixed; }
.import-table th, .import-table td { overflow-wrap: anywhere; }
.user-provision { max-width: 40rem; }
.user-provision-form .btn, .user-provision-form .form-control, .user-provision > .btn { min-height: 44px; }
.credential-reset { max-width: 40rem; }
.credential-search-form, .credential-target, .credential-reset-form { margin: 1.5rem 0; }
.credential-target { padding: 1rem; border-left: .3rem solid var(--cc-dark-turquoise); background: var(--cc-white); }
.credential-target dl { display: grid; grid-template-columns: max-content minmax(0, 1fr); gap: .35rem 1rem; margin: 0; }
.credential-target dd { margin: 0; overflow-wrap: anywhere; }
.credential-reset .btn, .credential-reset .form-control { min-height: 44px; }
.credential-unlock { margin-bottom: 1.5rem; }
.credential-unlock-form { display: flex; flex-wrap: wrap; gap: .75rem; }
.period-management { min-width: 0; }
.period-grid { display: grid; gap: 2rem; margin-top: 1.5rem; }
.period-cards { display: grid; gap: .75rem; }
.period-card { border-left: .3rem solid var(--cc-dark-turquoise); }
.period-table th, .period-table td { vertical-align: middle; }
.period-form { padding: 1rem; background: var(--cc-white); border-top: .3rem solid var(--cc-dark-turquoise); }
.period-form .btn, .period-form .form-control, .period-management .btn, .period-range .btn, .period-range .form-control { min-height: 44px; }
.period-table { width: 100%; table-layout: fixed; }
.period-table td { overflow-wrap: anywhere; }
.period-range { max-width: 44rem; }
.period-range-actions { display: flex; flex-wrap: wrap; gap: .75rem; }
.period-close-action { padding-inline-start: .75rem; border-inline-start: 2px solid #6c757d; }
.analytics { min-width: 0; }
.analytics .btn { min-height: 44px; }
.analytics-section { min-width: 0; margin-top: 2rem; }
.chart-container { position: relative; width: 100%; height: clamp(16rem, 52vw, 24rem); margin: 1rem 0; }
.analytics-table { width: 100%; table-layout: fixed; }
.analytics-table th, .analytics-table td { overflow-wrap: anywhere; vertical-align: middle; }
.audit-browser { min-width: 0; }
.audit-filters { margin: 1.5rem 0; padding: 1rem; background: var(--cc-white); border-top: .3rem solid var(--cc-dark-turquoise); }
.audit-filter-grid { display: grid; gap: 1rem; }
.audit-actions { display: flex; flex-wrap: wrap; gap: .75rem; margin-top: 1rem; }
.audit-browser .btn, .audit-browser .form-control, .audit-browser summary { min-height: 44px; }
.audit-summary { margin: 1rem 0; padding: .75rem 1rem; background: var(--cc-mist); }
.audit-summary ul { display: flex; flex-wrap: wrap; gap: .5rem 1.5rem; margin: .5rem 0 0; }
.audit-table { width: 100%; table-layout: fixed; }
.audit-table th, .audit-table td { vertical-align: top; overflow-wrap: anywhere; }
.audit-table code { display: block; margin-top: .25rem; }
.audit-cards { gap: 1rem; }
.audit-card { min-width: 0; border-left: .3rem solid var(--cc-dark-turquoise); }
.audit-card dl, .audit-changes { display: grid; grid-template-columns: max-content minmax(0, 1fr); gap: .35rem .75rem; margin: 1rem 0; }
.audit-card dd, .audit-changes dd { margin: 0; overflow-wrap: anywhere; }
.audit-changes span { display: block; }
.audit-browser summary { display: flex; align-items: center; cursor: pointer; color: var(--cc-navy); font-weight: 700; }
.report-center { min-width: 0; }
.report-grid { display: grid; gap: 1rem; margin: 1.5rem 0; }
.report-card { min-width: 0; border-left: .3rem solid var(--cc-dark-turquoise); }
.report-card form, .report-dates { display: grid; gap: 1rem; }
.report-card .btn, .report-card .form-control, .report-card .form-select { min-height: 44px; }
.report-summary { margin: 0; }
.report-summary dl { font-size: .925rem; }
.report-feedback { min-height: 1.5rem; margin-top: 1rem; color: var(--cc-navy); font-weight: 700; }
.report-feedback[data-error="true"] { color: #842029; }
.report-download, .report-note { margin-top: 1rem; overflow-wrap: anywhere; }

@media (max-width: 30rem) {
  .credential-unlock-form .btn { width: 100%; }
}

@media (min-width: 48rem) {
  .app-frame { display: grid; grid-template-columns: 16rem minmax(0, 1fr); }
  .mobile-header { display: none; }
  .sidebar { min-height: 100vh; display: flex; flex-direction: column; }
  .sidebar .app-navigation { padding: .5rem; }
  .sidebar .app-navigation a, .sidebar .app-navigation button { color: var(--cc-white); }
  .sidebar .app-navigation a:focus-visible, .sidebar .app-navigation button:focus-visible { outline-color: var(--cc-light-turquoise); }
  .sidebar .app-navigation a[aria-current="page"] { background: var(--cc-white); color: var(--cc-navy); }
  .app-main { padding: 2.5rem clamp(2rem, 5vw, 5rem); }
  .dashboard-metrics { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .dashboard-attention { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .audit-filter-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .report-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .report-dates { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (min-width: 64rem) {
  .period-grid { grid-template-columns: minmax(0, 1fr) minmax(18rem, .7fr); align-items: start; }
}

@keyframes action-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) {
  .btn, .app-navigation a, .app-navigation button { transition: none; }
  .btn:hover, .app-navigation a:hover, .app-navigation button:hover, .btn:active, .app-navigation a:active, .app-navigation button:active { transform: none; }
  .action-spinner { animation: none; border-right-color: currentColor; }
}