/* Shared screen foundations. Physical print layouts deliberately use print.css. */
:root {
  --ui-radius: 8px;
  --ui-card-radius: 12px;
  --ui-control-height: 40px;
  --ui-year-width: 92px;
  --ui-icon-tile-size: 32px;
  --ui-icon-glyph-size: 18px;
  --ui-dropdown-chevron: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2324364d' stroke-width='2'%3E%3Cpath d='m7 10 5 5 5-5'/%3E%3C/svg%3E");
  --ui-page-width: 1440px;
  --ui-page-padding: 32px;
  --line: var(--ui-border);
  --muted: var(--ui-muted);
}

body {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Microsoft YaHei", sans-serif;
  font-size: 14px;
  line-height: 1.5;
  color: var(--ui-text);
  background: var(--ui-background);
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

[hidden] {
  display: none !important;
}

#workspace>main,
body.storage-page .storage-content {
  width: 100%;
  max-width: var(--ui-page-width);
  margin: 0 auto;
  padding: 24px var(--ui-page-padding) 40px;
  min-width: 0;
}

#workspace .topbar-inner {
  max-width: var(--ui-page-width);
  margin: 0 auto;
}

#workspace h1,
body.storage-page h1,
.student-page h1 {
  font-size: 24px;
  line-height: 1.4;
  letter-spacing: 0;
  font-weight: 650;
}

#workspace h2,
dialog h2,
body.storage-page h2,
.student-page h2 {
  font-size: 18px;
  line-height: 1.5;
  font-weight: 650;
}

#workspace h3,
body.storage-page h3 {
  font-size: 16px;
  line-height: 1.5;
}

#workspace .heading {
  gap: 24px;
  align-items: center;
  margin: 0 0 24px;
}

#workspace .year-control {
  gap: 8px;
  font-size: 14px;
}

#workspace .year-control input {
  width: var(--ui-year-width);
  margin: 0;
}

body :is(button, .button, input:not([type=checkbox]):not([type=radio]):not([type=hidden]), select, textarea) {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Microsoft YaHei", sans-serif;
  font-size: 14px;
  line-height: 1.5;
  border-radius: var(--ui-radius);
}

body :is(button, .button) {
  min-height: var(--ui-control-height);
  padding: 8px 16px;
  border-color: var(--ui-border);
  gap: 8px;
}

body :is(input:not([type=checkbox]):not([type=radio]):not([type=hidden]), select) {
  height: var(--ui-control-height);
  min-height: var(--ui-control-height);
  padding: 8px 12px;
  border: 1px solid var(--ui-outline);
  color: var(--ui-text);
  background: var(--ui-surface);
  min-width: 0;
}

body textarea {
  padding: 10px 12px;
  border: 1px solid var(--ui-outline);
  color: var(--ui-text);
  min-height: 96px;
  resize: vertical;
}

body :is(input[type=checkbox], input[type=radio]) {
  width: 16px;
  height: 16px;
  min-height: 0;
  padding: 0;
  accent-color: var(--ui-primary);
  flex-shrink: 0;
}

/* Focus changes the control itself; never draw a halo outside its bounds. */
body :is(input:not([type=checkbox]):not([type=radio]), select, textarea):focus {
  outline: none !important;
  border-color: var(--ui-primary) !important;
  box-shadow: inset 0 0 0 1px var(--ui-primary) !important;
}

body :is(button, summary, a.button):focus-visible {
  outline: none !important;
  box-shadow: inset 0 0 0 2px var(--ui-primary) !important;
}

body :is(button.primary, button.home-primary, button.risk-button):focus-visible {
  box-shadow: inset 0 0 0 2px var(--ui-surface) !important;
}

body a:not(.button):focus-visible {
  outline: none !important;
  text-decoration: underline;
  text-underline-offset: 4px;
}

body :is(input[type=checkbox], input[type=radio]):focus-visible {
  outline: 2px solid var(--ui-primary);
  outline-offset: -1px;
}

body :is(input, select, textarea)[aria-invalid="true"]:focus {
  border-color: var(--ui-danger) !important;
  box-shadow: inset 0 0 0 1px var(--ui-danger) !important;
}

body :is(.primary, button.primary, a.primary) {
  background: var(--ui-primary);
  border-color: var(--ui-primary);
  color: var(--ui-on-primary);
}

body :is(.primary, button.primary, a.primary):hover:not(:disabled) {
  background: var(--ui-primary-hover);
  border-color: var(--ui-primary-hover);
}

body :is(.danger-button, .risk-button) {
  color: var(--ui-danger);
  border-color: var(--ui-error-outline);
  background: var(--ui-error-container);
}

body :is(.danger-button, .risk-button):hover:not(:disabled) {
  background: var(--ui-error-container-hover);
}

body :is(.text-button, :is(.student-sort, .bag-sort), .bag-sort, .inventory-sort) {
  min-height: 32px;
  padding: 4px 0;
  border: 0;
  background: transparent;
  border-radius: 4px;
}

body :is(.close, .dialog-close) {
  width: 32px;
  min-width: 32px;
  height: 32px;
  min-height: 32px;
  padding: 0;
  border: 0;
  background: transparent;
}

#workspace .school-brand {
  height: auto;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
}

#workspace .flow-nav button {
  padding: 8px 12px;
  min-height: 40px;
  font-size: 14px;
  border-radius: 8px;
}

#workspace .flow-nav .nav-item,
#workspace .flow-nav>.nav-item:first-child,
#workspace .flow-group+.nav-item {
  padding: 0;
  margin: 0;
  border: 0;
}

#workspace :is(.toolbar, .student-filters) {
  padding: 16px 20px;
  margin: 0;
  border: 1px solid var(--ui-border);
  background: var(--ui-surface);
}

#workspace .toolbar {
  border-radius: 12px 12px 0 0;
  border-bottom: 0;
}

#workspace .student-filters {
  border-radius: 0 0 12px 12px;
  margin-bottom: 24px;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px;
}

#workspace :is(.actions, .selection-controls, :is(#student-management-controls, #bag-print-controls)) {
  gap: 12px;
  flex-wrap: wrap;
}

#workspace .student-filters>input {
  flex: 1 1 240px;
  max-width: 360px;
  height: 40px;
}

#workspace .student-filter {
  width: 140px;
  min-width: 140px;
  flex: none;
  margin: 0;
}

#workspace .student-filter summary {
  box-sizing: border-box;
  display: block;
  line-height: 38px;
  height: 40px;
  min-height: 40px;
  padding: 0 32px 0 12px;
  border-radius: 8px;
  font-size: 14px;
}

#workspace .student-filters>.muted {
  font-size: 12px;
  margin: 0 0 0 auto;
  color: var(--ui-muted);
}

#workspace .toolbar-tools summary {
  min-height: 40px;
  padding: 8px 12px;
  border-radius: 8px;
  font-size: 14px;
}

#workspace .toolbar-tool-menu {
  padding: 8px;
  border: 1px solid var(--ui-border);
  border-radius: 12px;
  box-shadow: 0 8px 24px var(--ui-shadow-soft);
}

#workspace .toolbar-tool-menu::after {
  content: none;
}

#workspace :is(.table-card, .metric, .dashboard-shortcuts, .dashboard-notices),
.storage-view :is(.setup-card, .storage-pending),
body.storage-page :is(.setup-card, .storage-pending) {
  border: 1px solid var(--ui-border);
  border-radius: var(--ui-card-radius);
  background: var(--ui-surface);
  box-shadow: 0 2px 6px var(--ui-shadow-subtle);
}

#workspace :is(.dashboard-shortcuts, .dashboard-notices) {
  padding: 24px;
}

#workspace .dashboard-heading {
  margin-bottom: 24px;
  gap: 24px;
}

#workspace .dashboard-metrics {
  gap: 16px;
  margin-bottom: 24px;
}

#workspace .dashboard-bottom {
  gap: 24px;
}

#workspace .metric {
  padding: 24px;
}

#workspace :is(.panel-description, .metric-description, .muted, .hint),
.storage-view .hint {
  color: var(--ui-muted);
}

#workspace .table-card {
  overflow: hidden;
}

#workspace :is(#roster-section, #bags-section, .management-data-table) .table-scroll {
  max-width: 100%;
  overflow: auto;
  scrollbar-gutter: auto;
}

#workspace :is(#roster-section, #bags-section, .management-data-table) table {
  width: 100%;
  table-layout: fixed;
  border-collapse: separate;
  border-spacing: 0;
}

#workspace :is(#roster-section, #bags-section, .management-data-table) table {
  min-width: 1100px;
}

#workspace #bags-section table {
  min-width: 1060px;
}

#workspace :is(#roster-section, #bags-section, .management-data-table) :is(th, td),
.storage-view :is(th, td),
body.storage-page :is(th, td) {
  padding: 14px 16px;
  line-height: 1.6;
  vertical-align: middle;
}

#workspace :is(#roster-section, #bags-section, .management-data-table) th,
.storage-view th,
body.storage-page th {
  font-size: 12px;
  font-weight: 600;
  background: var(--ui-surface-container-low);
  color: var(--ui-muted);
}

#workspace :is(#roster-section, #bags-section, .management-data-table) td {
  padding-top: 12px;
  padding-bottom: 12px;
  font-size: 14px;
  border-color: var(--ui-surface-container);
}

/* Both list controllers calculate column widths from their shared defaults. */

#workspace :is(.student-row-actions, .bag-row-actions) {
  display: table-cell;
  text-align: center;
}

#workspace :is(.student-row-actions, .bag-row-actions) :is(button, a.button),
#print-history-table .print-history-reprint,
.storage-view :is(td button, .area-actions button),
body.storage-page td button {
  min-height: 32px;
  padding: 4px 8px;
  font-size: 12px;
  margin: 0;
}

#workspace .first-column-select {
  margin: 0 8px 0 0;
  vertical-align: middle;
}

#workspace .pagination {
  padding: 16px 20px;
  font-size: 12px;
  border-top: 1px solid var(--ui-section-divider);
  gap: 16px;
}

#workspace .pagination>div {
  display: flex;
  gap: 8px;
}

#workspace .empty {
  padding: 40px 24px;
  text-align: center;
}

body dialog {
  position: fixed;
  inset: 0;
  margin: auto;
  padding: 24px;
  border: 1px solid var(--ui-border);
  border-radius: 12px;
  max-width: calc(100vw - 32px);
  max-height: calc(100dvh - 48px);
  color: var(--ui-text);
  box-shadow: 0 20px 64px var(--ui-shadow-strong);
  overflow: auto;
}

body dialog:focus {
  outline: none;
}

body dialog {
  overscroll-behavior: contain;
}

body dialog::backdrop {
  background: var(--ui-scrim);
}

body dialog .dialog-heading {
  margin: 0 0 24px;
  padding: 0 0 16px;
  gap: 16px;
  align-items: center;
}

body dialog :is(.dialog-actions, .buttons) {
  gap: 12px;
  margin-top: 24px;
  padding-top: 16px;
  border-top: 1px solid var(--ui-section-divider);
  flex-wrap: wrap;
}

body dialog label {
  font-size: 14px;
  line-height: 1.5;
}

body dialog label> :is(input, select, textarea) {
  margin-top: 8px;
}

body .history-controls.history-controls>label> :is(input, select),
body .history-controls.history-controls .history-filter-actions>button {
  height: 40px !important;
  min-height: 40px !important;
  border-radius: 8px;
}

body .history-controls.history-controls {
  gap: 12px;
}

#login-view .login-card {
  border-radius: 12px;
  border-color: var(--ui-border);
}

#login-view h1 {
  font-size: 24px;
}

:is(.storage-view, body.storage-page) .storage-content {
  padding: 0;
  max-width: none;
}

body.storage-page .storage-content {
  padding: 24px var(--ui-page-padding) 40px;
  max-width: var(--ui-page-width);
}

:is(.storage-view, body.storage-page) .storage-navigation {
  gap: 16px;
  margin-bottom: 24px;
  align-items: center;
  flex-wrap: wrap;
}

:is(.storage-view, body.storage-page) .workspace-tabs {
  gap: 8px;
  flex-wrap: wrap;
}

/* Storage workspace components: navigation belongs to the outer admin shell. */
.storage-view .storage-navigation {
  display: none !important;
  padding: 16px 24px;
  background: var(--ui-surface);
  border: 1px solid var(--ui-field-outline);
  border-radius: var(--ui-radius);
}

.storage-context-actions {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
}

:is(.storage-view, body.storage-page) :is(.storage-context-actions, .intake-setup, .intake-guide) button {
  --storage-action-fill: var(--ui-action-surface);
  --storage-action-text: var(--ui-on-primary-container);
  --ui-button-outline: var(--ui-field-outline);
  background: var(--storage-action-fill);
  color: var(--storage-action-text);
  border: 1px solid var(--ui-field-outline);
  padding: 9px 15px;
  min-height: var(--ui-control-height);
  box-shadow: none;
  font-weight: 400;
}

:is(.storage-view, body.storage-page) :is(.storage-context-actions, .intake-setup, .intake-guide) button:hover:not(:disabled) {
  background: var(--ui-action-surface-hover);
}

.operation-layout--intake {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 300px;
  gap: 24px;
}

.operation-main {
  min-width: 0;
}

:is(.storage-view, body.storage-page) .intake-guide {
  border-left: 1px solid var(--ui-section-divider);
  padding-left: 24px;
}

:is(.storage-view, body.storage-page) :is(.intake-guide, .intake-setup) h3 {
  margin: 0 0 16px;
}

.intake-guide dl {
  margin: 0 0 16px;
}

.intake-guide dt {
  margin: 16px 0 6px;
  font-weight: 500;
}

.intake-guide dt:first-child {
  margin-top: 0;
}

.intake-guide dd {
  margin: 0;
  color: var(--ui-on-surface-variant);
  line-height: 1.7;
}

.intake-setup p {
  margin: 0 0 16px;
  line-height: 1.7;
}

:is(.storage-view, body.storage-page) .operation-layout--intake .controls>label {
  width: min(100%, 360px);
}

:is(.storage-view, body.storage-page) .operation-layout--intake .dropdown-trigger {
  width: 100%;
}

:is(.storage-view, body.storage-page) .operation-layout--intake .intake-scan-form {
  flex-wrap: wrap;
  gap: 8px;
}

:is(.storage-view, body.storage-page) .operation-layout--intake .intake-scan-form button {
  height: var(--ui-control-height);
  padding: 9px 15px;
}

@media (max-width: 900px) {
  .operation-layout--intake {
    grid-template-columns: minmax(0, 1fr);
  }

  :is(.storage-view, body.storage-page) .intake-guide {
    border-left: 0;
    border-top: 1px solid var(--ui-section-divider);
    padding: 24px 0 0;
  }
}

@media (max-width: 520px) {
  .storage-view .storage-navigation {
    padding: 16px;
  }

  :is(.storage-view, body.storage-page) .operation-layout--intake .intake-scan-form label {
    flex-basis: 100%;
  }
}

:is(.storage-view, body.storage-page) .storage-page-tools {
  gap: 8px;
  flex-wrap: wrap;
}

:is(.storage-view, body.storage-page) :is(.setup-card, .storage-pending) {
  padding: 24px;
  margin-bottom: 24px;
}

:is(.storage-view, body.storage-page) .storage-card-heading {
  gap: 16px;
  margin-bottom: 20px;
  align-items: center;
  flex-wrap: wrap;
}

:is(.storage-view, body.storage-page) .inventory-search {
  gap: 12px;
  padding: 20px;
  border-radius: 12px;
  border: 1px solid var(--ui-border);
  background: var(--ui-surface);
  align-items: end;
}

:is(.storage-view, body.storage-page) .rule-risk {
  padding: 16px 20px;
  border-radius: 8px;
  line-height: 1.7;
}

:is(.storage-view, body.storage-page) .table-scroll {
  max-width: 100%;
  border-radius: 8px;
}

.student-page {
  padding: 32px 20px;
}

.student-page main {
  max-width: 680px;
  padding: 32px;
  border: 1px solid var(--ui-border);
  border-radius: 12px;
  box-shadow: 0 2px 6px var(--ui-shadow-subtle);
}

.student-page header {
  margin-bottom: 24px;
}

.student-page h1 {
  margin-bottom: 24px;
}

.student-page .student-fields {
  gap: 24px;
}

.student-page :is(input:not([type=hidden]), #class-trigger) {
  height: 44px;
  min-height: 44px;
  font-size: 16px;
  border-radius: 8px;
}

.student-page textarea {
  font-size: 16px;
  min-height: 112px;
}

.student-page .form-footer {
  margin-top: 24px;
  padding-top: 20px;
  border-top: 1px solid var(--ui-section-divider);
}

.student-page .form-footer button {
  height: 44px;
  background: var(--ui-primary);
  border-color: var(--ui-primary);
}

.student-page .class-options {
  border: 1px solid var(--ui-border);
  border-radius: 8px;
  box-shadow: 0 8px 24px var(--ui-shadow-soft);
}

@media (prefers-reduced-motion:reduce) {

  *,
  *::before,
  *::after {
    scroll-behavior: auto !important;
    transition: none !important;
    animation: none !important;
  }
}

/* Match legacy page selectors so the common dimensions take precedence. */

#home-section .home-primary,
#workspace .toolbar button.primary,
#workspace :is(:is(#roster-toolbar, [data-student-control="roster-toolbar"]), #bags-toolbar) #open-import {
  background: var(--ui-primary);
  border-color: var(--ui-primary);
  color: var(--ui-on-primary);
}

#home-section .home-primary:hover,
#workspace .toolbar button.primary:hover,
#workspace :is(:is(#roster-toolbar, [data-student-control="roster-toolbar"]), #bags-toolbar) #open-import:hover {
  background: var(--ui-primary-hover);
  border-color: var(--ui-primary-hover);
}

#workspace :is(#roster-section, #bags-section) .list-col-name {
  width: 116px;
}

#workspace :is(#roster-section, #bags-section) .list-col-class {
  width: 120px;
}

#workspace :is(#roster-section, #bags-section) .list-col-advisor {
  width: 120px;
}

#workspace :is(#roster-section, #bags-section, [data-storage-id="rules-table"], [data-storage-id="inventory-panel"]) .student-row-actions :is(button, a.button)+:is(button, a.button) {
  margin-left: 8px;
}

#manual-dialog .form-grid,
#generator-dialog .form-grid,
#student-edit-dialog .form-grid {
  gap: 24px;
}

#manual-dialog input,
#generator-dialog input,
#student-edit-dialog input {
  height: var(--ui-control-height);
  min-height: var(--ui-control-height);
  font-size: 14px;
}

#workspace :is(#roster-section, #bags-section) :is(th:last-child, td:last-child) {
  box-shadow: none;
  border-left: 0;
}

:is(.storage-view, body.storage-page) .warehouse-list .storage-card-heading {
  padding: 0;
}

:is(.storage-view, body.storage-page) .workspace-tabs button,
:is(.storage-view, body.storage-page) .storage-page-tools button {
  min-height: var(--ui-control-height);
  font-size: 14px;
  padding: 8px 12px;
}

:is(.storage-view, body.storage-page) .controls.inventory-controls>label {
  grid-template-rows: 20px minmax(var(--ui-control-height), auto);
  gap: 8px;
}

:is(.storage-view, body.storage-page) .controls.inventory-controls .dropdown {
  margin-top: 0;
}

:is(.storage-view, body.storage-page) .controls.inventory-controls .dropdown-trigger {
  min-height: var(--ui-control-height);
  height: 100%;
  padding: 8px 12px;
}

:is(.storage-view, body.storage-page) .dropdown-options {
  border-radius: 8px;
  border-color: var(--ui-border);
  box-shadow: 0 8px 24px var(--ui-shadow-soft);
}

/* Error feedback must remain visible when the shared input border is applied. */
body :is(input, select, textarea, #class-trigger)[aria-invalid="true"] {
  border-color: var(--ui-danger) !important;
}

#workspace #student-demo-tools .toolbar-tool-menu::after {
  content: none;
}

:is(.storage-view, body.storage-page) .controls.inventory-controls>label {
  width: 100%;
}

:is(.storage-view, body.storage-page) section:not([data-storage-id="setup-panel"]):not([data-storage-id="login"]):not(#setup-panel):not(#login):not(.intake-tabs-shell) {
  border-radius: 12px;
}

#workspace #storage-section:has(.intake-tabs-shell:not([hidden])),
#workspace #storage-section:has(.intake-tabs-shell:not([hidden])) > .storage-content {
  background: transparent;
  border: 0;
  box-shadow: none;
  padding: 0;
  margin: 0;
}

/* Login input geometry; visible labels are controlled by the desktop login rules below. */

#login-view .login-card h2 {
  font-size: 18px;
  font-weight: 650;
}

#login-view .login-field-row {
  display: grid;
  align-items: center;
}

#login-view .login-field-row label {
  font-size: 14px;
  color: var(--ui-text);
  line-height: 1.5;
  margin: 0;
}

#login-view .login-input-wrap {
  position: relative;
  min-width: 0;
}

#login-view .login-input-icon {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  pointer-events: none;
}

#login-view .login-fields input {
  padding: 10px 12px 10px 40px;
  margin: 0;
  border-radius: 8px;
  border-color: var(--ui-border);
}

#login-view #login-submit {
  border-radius: 8px;
  font-size: 14px;
  font-weight: 600;
  background: var(--ui-primary);
  border-color: var(--ui-primary);
}

#login-view #login-submit:hover:not(:disabled) {
  background: var(--ui-primary-hover);
  border-color: var(--ui-primary-hover);
}

#login-view #setup-note {
  font-size: 12px;
}

#login-view .login-account-actions {
  display: flex;
  align-items: center;
  gap: 16px;
}

#login-view .login-account-actions button {
  background: transparent;
  border: 0;
  color: var(--ui-primary);
  font-size: 12px;
  min-height: 32px;
  padding: 4px 0;
}

#login-view .login-card h2 {
  text-align: center;
}

#login-view .login-message {
  font-size: 12px;
  line-height: 1.6;
  margin: 16px 0 0;
  color: var(--ui-success);
}

/* Six text sizes: 12 / 14 / 16 / 18 / 24 / 40 px. Icons use their own geometry. */
#login-view .login-school span {
  font-size: 24px;
}

#login-view .login-field-row label,
#login-view #login-submit {
  font-size: 14px;
}

#workspace .school-copy strong {
  font-size: 18px;
}

#workspace .flow-nav .nav-item>button {
  font-size: 14px;
}

/* Desktop login, minimum 1280 × 720. Keep field labels for assistive technology only. */
#login-view {
  min-width: 1280px;
  min-height: max(var(--login-min-height, 720px), 100dvh);
}

#login-view .login-school {
  margin-bottom: 12px;
}

#login-view .school-heading p {
  font-size: 12px;
  line-height: 18px;
  margin: 6px 0 0;
}

#login-view .login-card {
  margin-top: 24px;
}

#login-view .login-card h2 {
  margin-bottom: 16px;
}

#login-view .login-controls {
  grid-template-columns: minmax(0, 1fr);
  gap: 0;
}

#login-view .login-fields {
  gap: 12px;
}

#login-view .login-field-row {
  grid-template-columns: minmax(0, 1fr);
  gap: 0;
}

#login-view .login-field-row>label {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

#login-view .login-fields input {
  font-size: 14px;
  height: 44px;
  min-height: 44px;
  padding-left: 44px;
}

#login-view .login-input-icon {
  left: 14px;
  width: 20px;
  height: 20px;
  fill: none;
  stroke: var(--ui-on-surface-variant);
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

#login-view .login-input-wrap:focus-within .login-input-icon {
  fill: none;
  stroke: var(--ui-primary);
}

#login-view #setup-note {
  margin-bottom: 12px;
  line-height: 18px;
}

#login-view .login-account-actions {
  margin-top: 12px;
}

#login-view .login-support {
  padding-top: 20px;
}

/* Account actions sit inside the right edge of their corresponding input. */

#login-view .login-input-wrap .login-inline-action {
  position: absolute;
  right: 8px;
  top: 50%;
  transform: translateY(-50%);
  min-height: 32px;
  padding: 4px 8px;
  border: 0;
  border-radius: 4px;
  font-size: 12px;
  line-height: 20px;
  color: var(--ui-primary);
  background: transparent;
}

#login-view .login-input-wrap .login-inline-action:hover {
  background: var(--ui-primary-container);
}

#login-view .login-account-actions {
  justify-content: flex-end;
}

/* The demo banner occupies 30px outside the login shell. */
body:has(#demo-banner:not([hidden])) #login-view {
  min-height: max(calc(var(--login-min-height, 720px) - 30px), calc(100dvh - 30px));
}

/* One brand lockup: the school leads; the system name is secondary. */
#login-view .school-heading {
  text-align: left;
}

#login-view .login-school {
  display: flex;
  justify-content: center;
  align-items: center;
  margin: 0;
}

#login-view .login-school img {
  flex: none;
}

#login-view .login-brand-copy {
  min-width: 0;
}

#login-view .school-heading h1 {
  font-weight: 650;
  color: var(--ui-text);
  margin: 0;
  white-space: nowrap;
}

/* The card is centered; its brand lockup is anchored above the same panel. */
#login-view {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  justify-content: stretch;
  align-content: stretch;
  place-items: center;
  padding: 0 24px;
}

#login-view .login-panel {
  position: relative;
  width: 360px;
}

#login-view .school-heading {
  position: absolute;
  left: 0;
  width: 100%;
  margin: 0;
}

#login-view .login-card {
  margin: 0;
}

#login-view .login-support {
  position: absolute;
  left: 24px;
  right: 24px;
  bottom: 16px;
  margin: 0;
  padding: 0;
  font-size: 12px;
  line-height: 18px;
}

/* School identity leads; bilingual system identity is a smaller second tier. */

#login-view .school-heading .login-school-english {
  font-size: 14px;
  line-height: 20px;
  margin: 4px 0 0;
  color: var(--ui-muted);
}

#login-view .login-system-brand {
  text-align: center;
}

#login-view .school-heading .login-system-name {
  font-weight: 600;
  margin: 0;
  color: var(--ui-text);
}

#login-view .school-heading .login-system-english {
  font-size: 12px;
  line-height: 18px;
  margin: 4px 0 0;
  color: var(--ui-muted);
}

/* Longer account forms may scroll on 720p; keep the larger brand visible above them. */
#login-view:has(#password-confirm-row:not([hidden])) {
  --login-min-height: 832px;
}

/* Return navigation follows the fields; feedback precedes the submit action. */
#login-view #login-error:not(:empty),
#login-view #login-message:not([hidden]) {
  margin: 12px 0 0;
  font-size: 12px;
  line-height: 20px;
}

#login-view #login-error:empty {
  display: none;
}

/* Registration adds one name field while retaining room for the school lockup. */
#login-view:has(#admin-name-row:not([hidden])) {
  --login-min-height: 888px;
}

/* Inline validation replaces native browser bubbles in account forms. */
#login-view #login-error:not(:empty) {
  padding: 10px 12px;
  border: 1px solid var(--ui-error-outline);
  border-radius: 8px;
}

/* Overview alignment: shared page edges, equal card tracks and fixed control heights. */
#workspace .topbar {
  border: 0;
  box-shadow: none;
  padding: 0;
}

#workspace .topbar-inner {
  padding: 24px var(--ui-page-padding);
  align-items: center;
}

#workspace .topbar-inner {
  grid-template-columns: 220px minmax(0, 1fr) 220px;
  gap: 24px;
}

#workspace .flow-nav {
  grid-column: 2;
  grid-row: 1;
  justify-self: center;
  flex-wrap: nowrap;
}

#workspace .account {
  grid-column: 3;
  grid-row: 1;
  justify-self: end;
}

#workspace .school-brand {
  justify-self: start;
}

#workspace .flow-nav .nav-item>button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 40px;
  padding: 0 12px;
  border: 1px solid var(--ui-border);
  background: var(--ui-surface-container-low);
  color: var(--ui-text);
  line-height: 20px;
  font-weight: 600;
  box-shadow: none;
  transition: background .15s, border-color .15s;
}

#workspace .flow-nav .nav-item>button:hover:not(.active) {
  background: var(--ui-primary-container);
  border-color: var(--ui-outline);
}

#workspace .flow-nav .archive-query-entry>button {
  padding: 0 12px;
}

/* Selected navigation uses the primary action color after activation. */
#workspace .flow-nav .nav-item>button.active {
  background: var(--ui-primary);
  border-color: var(--ui-primary);
  color: var(--ui-on-primary);
  box-shadow: none;
}

#workspace :is(#roster-section, #bags-section) .back-to-top {
  position: fixed;
  z-index: 30;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  min-height: 48px;
  padding: 6px;
  margin: 0;
  gap: 2px;
  border: 1px solid var(--ui-border);
  border-radius: var(--ui-radius);
  background: var(--ui-surface);
  color: var(--ui-primary);
}

#workspace :is(#roster-section, #bags-section) .back-to-top:hover {
  background: var(--ui-primary-container);
  border-color: var(--ui-outline);
}

#workspace .back-to-top .ui-icon {
  width: 18px;
  height: 18px;
  flex: none;
}

#workspace .back-to-top span {
  font-size: 12px;
  line-height: 16px;
  font-weight: 400;
}

/* Each lower panel spans two metric columns, including their shared gutter. */

/* Shortcut cards and their editor share one rounded stroke icon set. */
#workspace .lucide-icon,
#shortcut-dialog .lucide-icon {
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

#shortcut-options .lucide-icon {
  width: 20px;
  height: 20px;
}

/* Shortcut editor follows the overview's typography and action colors. */
#shortcut-dialog {
  padding: 24px;
  border: 1px solid var(--ui-border);
  border-radius: var(--ui-card-radius);
  color: var(--ui-text);
  background: var(--ui-surface);
}

#shortcut-dialog .shortcut-dialog-heading h2 {
  margin: 0;
  flex: none;
  font-size: 18px;
  line-height: 28px;
  color: var(--ui-text);
}

#shortcut-dialog .shortcut-dialog-heading p {
  margin: 0;
  font-size: 12px;
  line-height: 20px;
  color: var(--ui-muted);
}

#shortcut-dialog #shortcut-options label {
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: 14px;
  line-height: 20px;
}

#shortcut-dialog #shortcut-options .lucide-icon {
  color: var(--ui-primary);
}

#shortcut-dialog input[type="checkbox"] {
  accent-color: var(--ui-primary);
}

#shortcut-dialog .dialog-actions {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-top: 24px;
  padding-top: 16px;
  border-top: 1px solid var(--ui-section-divider);
}

#shortcut-dialog #shortcut-reset {
  margin-right: auto;
}

#shortcut-dialog .primary {
  background: var(--ui-primary);
  border-color: var(--ui-primary);
  color: var(--ui-on-primary);
}

#shortcut-dialog .primary:hover {
  background: var(--ui-primary-hover);
  border-color: var(--ui-primary-hover);
}

/* Keep overview labels, figures and links on a shared typographic baseline. */

/* Keep home support at the page bottom without overlaying longer content. */
#workspace:has(#home-section:not([hidden])) {
  display: flex;
  flex-direction: column;
  min-height: 100dvh;
}

body:has(#demo-banner:not([hidden])) #workspace {
  min-height: calc(100dvh - 30px);
}

#workspace:has(#home-section:not([hidden]))>main {
  display: flex;
  flex-direction: column;
  flex: 1;
  padding-bottom: 16px;
}

/* Dropdown states: regular weight, light hover/selection, deeper selected hover. */

/* Overview text actions share typography and a proper arrow icon. */

/* Group identity separately from the logout action in the navigation header. */
#workspace .account {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 12px;
  min-width: 0;
  font-size: 14px;
  line-height: 20px;
}

#workspace .account-identity {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
  color: var(--ui-text);
}

#workspace .account-icon {
  width: 20px;
  height: 20px;
  color: var(--ui-muted);
}

#workspace #account-name {
  max-width: 112px;
}

#workspace #logout {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: none;
  height: 40px;
  min-height: 40px;
  padding: 8px 12px;
  border: 1px solid var(--ui-border);
  border-radius: 8px;
  background: var(--ui-surface);
  color: var(--ui-text);
  font-size: 14px;
  line-height: 20px;
  font-weight: 500;
}

#workspace #logout:hover {
  background: var(--ui-primary-container);
  border-color: var(--ui-outline);
}

/* Checkbox focus uses the control itself rather than an extra outer rectangle. */
#shortcut-dialog input[type="checkbox"]:focus,
#shortcut-dialog input[type="checkbox"]:focus-visible {
  outline: none;
  box-shadow: none;
  accent-color: var(--ui-primary-hover);
}

/* Selection limit feedback belongs to the whole editor, above the action divider. */
#shortcut-dialog #shortcut-error {
  margin: 16px 0 8px;
  color: var(--ui-danger);
  font-size: 12px;
  line-height: 20px;
  text-align: right;
}

#shortcut-dialog #shortcut-error:empty {
  display: none;
}

#shortcut-dialog #shortcut-error:not(:empty)+.dialog-actions {
  margin-top: 8px;
}

/* Live shortcut selection feedback reserves one stable row. */

#shortcut-dialog .shortcut-selection-summary {
  justify-content: flex-end;
  align-items: center;
  margin-bottom: 8px;
}

#shortcut-dialog #shortcut-progress {
  font-size: 12px;
  line-height: 20px;
  color: var(--ui-muted);
  font-variant-numeric: tabular-nums;
}

#shortcut-dialog #shortcut-progress.over-limit {
  color: var(--ui-danger);
}

#shortcut-dialog #shortcut-save:disabled {
  background: var(--ui-surface-container);
  border-color: var(--ui-border);
  color: var(--ui-outline);
  cursor: not-allowed;
}

/* Scope and year controls share the same horizontal text inset. */

/* Selection progress sits below the choices, above the action divider. */

/* Compact shortcut editing; progress aligns with the right choice column. */

#shortcut-dialog #shortcut-options {
  gap: 4px 24px;
}

#shortcut-dialog #shortcut-options label {
  min-height: 36px;
  padding: 6px 0;
}

#shortcut-dialog .shortcut-selection-summary {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  column-gap: 24px;
  min-height: 20px;
  margin: 8px 0 0;
}

#shortcut-dialog #shortcut-progress {
  grid-column: 2;
  justify-self: start;
}

#shortcut-dialog #shortcut-form>.dialog-actions {
  margin-top: 12px;
}

/* Keep secondary editor text readable alongside its choice labels. */
#shortcut-dialog .shortcut-dialog-heading p,
#shortcut-dialog #shortcut-progress,
#shortcut-dialog #shortcut-error {
  font-size: 14px;
  line-height: 20px;
}

/* Center the complete choice group, with symmetric space on both sides. */

/* Align the choice area to the dialog content edges. */
#shortcut-dialog #shortcut-options,
#shortcut-dialog .shortcut-selection-summary {
  width: 100%;
  margin-left: 0;
  margin-right: 0;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  column-gap: 24px;
}

/* Keep the selection rule and live count together on the same header line. */
#shortcut-dialog {
  width: min(520px, calc(100vw - 48px));
}

#shortcut-dialog .shortcut-heading-description {
  display: flex;
  align-items: center;
  min-width: 0;
  gap: 12px;
}

#shortcut-dialog .shortcut-heading-description p,
#shortcut-dialog .shortcut-heading-description #shortcut-progress {
  white-space: nowrap;
}

#shortcut-dialog .shortcut-heading-description #shortcut-progress {
  flex: none;
}

/* Two-level editor heading: title first, rule and progress on the second row. */
#shortcut-dialog .shortcut-dialog-heading {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 8px;
}

#shortcut-dialog .shortcut-dialog-heading h2 {
  padding-right: 0;
  border-right: 0;
}

#shortcut-dialog .shortcut-heading-description {
  width: 100%;
  flex: none;
  justify-content: space-between;
}

/* Separate header copy from shortcut choices with the shared divider color. */
#shortcut-dialog .shortcut-dialog-heading {
  padding-bottom: 16px;
  border-bottom: 0;
  margin-bottom: 24px;
}

/* Navigation and scope actions share one button typography and geometry. */
#workspace {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Microsoft YaHei", sans-serif;
}

#workspace .flow-nav .nav-item>button,
#workspace .flow-nav .archive-query-entry>button,
:is(#home-section, :is(#roster-toolbar, [data-student-control="roster-toolbar"]), #bags-toolbar) :is(#dashboard-year-form, :is(#student-stats-form, [data-student-control="student-stats-form"]), #bag-stats-form)>.home-primary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 40px;
  min-height: 40px;
  padding: 9px 15px;
  border-radius: 8px;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Microsoft YaHei", sans-serif;
  font-size: 14px;
  font-weight: 500;
  line-height: 20px;
}

/* Archive query navigation follows the same states as other navigation entries. */
#workspace .flow-nav .archive-query-entry>button {
  color: var(--ui-text);
}

#workspace .flow-nav .archive-query-entry>button:hover:not(.active) {
  background: var(--ui-primary-container);
  border-color: var(--ui-outline);
}

#workspace .flow-nav .archive-query-entry>button.active {
  background: var(--ui-primary);
  border-color: var(--ui-primary);
  color: var(--ui-on-primary);
}

/* Related collection steps form one navigable workflow group. */

#workspace .flow-nav .flow-group {
  display: flex;
  align-items: center;
  gap: 8px;
}

#workspace .flow-group .flow-arrow {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: none;
  color: var(--ui-muted);
  line-height: 20px;
}

#workspace .flow-group .flow-arrow .ui-icon {
  width: 16px;
  height: 16px;
}

#workspace .flow-nav .flow-group .nav-item>button:not(.active) {
  background: var(--ui-surface);
}

#workspace .flow-nav .flow-group .nav-item>button:hover:not(.active) {
  background: var(--ui-primary-container);
  border-color: var(--ui-outline);
}

#workspace .flow-nav .flow-group .nav-item>button.active {
  background: var(--ui-primary);
  border-color: var(--ui-primary);
  color: var(--ui-on-primary);
}

/* Functional explanations sit under the page title, outside navigation. */
#workspace .heading #main-title {
  margin: 0;
  line-height: 32px;
}

#workspace .heading .page-description {
  margin: 8px 0 0;
  font-size: 14px;
  line-height: 20px;
  color: var(--ui-muted);
}

/* Give the collection workflow group more space around its buttons. */

/* All screen pages retain desktop geometry; narrow windows scroll horizontally. */
@media screen {
  body {
    min-width: 1280px;
  }
}

/* Status colors distinguish the title without coloring the whole statistic card. */

/* Page headings share the same title and supporting-copy hierarchy. */
#home-section .dashboard-heading h1,
#workspace .heading #main-title {
  margin: 0;
  font-size: 24px;
  line-height: 32px;
  font-weight: 650;
  color: var(--ui-text);
}

#home-section .dashboard-description,
#workspace .heading .page-description {
  margin: 8px 0 0;
  font-size: 14px;
  line-height: 20px;
  font-weight: 400;
  color: var(--ui-muted);
}

#home-section .dashboard-heading,
#workspace>main>.heading {
  margin: 0 0 24px;
  padding: 0;
  gap: 24px;
}

/* Use a colored status dot with neutral title text. */

/* Make dashboard status titles and supporting descriptions easier to read. */

/* Overview cards share one title tier and one supporting-description tier. */

/* Supporting card copy remains a smaller tier than titles and actions. */

/* The account identity opens personal details; logout lives inside that panel. */
#workspace #open-profile {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 40px;
  padding: 8px 12px;
  border: 1px solid transparent;
  border-radius: 8px;
  background: transparent;
  color: var(--ui-text);
  font-size: 14px;
  line-height: 20px;
  font-weight: 500;
}

#workspace #open-profile:hover {
  background: var(--ui-primary-container);
  border-color: var(--ui-border);
}

#profile-dialog {
  width: 440px;
  padding: 24px;
  border: 1px solid var(--ui-border);
  border-radius: 12px;
}

#profile-dialog h2 {
  margin: 0;
}

#profile-dialog .profile-details {
  margin: 24px 0;
}

#profile-dialog .profile-details>div {
  display: grid;
  grid-template-columns: 64px minmax(0, 1fr);
  gap: 16px;
  padding: 12px 0;
  border-bottom: 1px solid var(--ui-section-divider);
}

#profile-dialog dt {
  color: var(--ui-muted);
}

#profile-dialog dd {
  margin: 0;
  overflow-wrap: anywhere;
}

#profile-dialog .dialog-actions {
  display: flex;
  justify-content: flex-end;
  gap: 12px;
}

#profile-dialog #logout {
  margin-right: auto;
  color: var(--ui-danger);
}

/* A quieter school lockup with more separation between identity tiers. */
#login-view .login-school {
  gap: 16px;
}

#login-view .login-school img {
  width: 64px;
  height: 64px;
}

#login-view .school-heading h1 {
  font-size: 24px;
  line-height: 40px;
}

#login-view .login-system-brand {
  margin-top: 24px;
}

#login-view .school-heading .login-system-english {
  margin-top: 8px;
}

#login-view .school-heading {
  bottom: calc(100% + 32px);
}

#login-view .login-card {
  background: var(--ui-surface-container-low);
}

#login-view .login-fields input {
  background: var(--ui-surface);
}

/* Account identity and refresh use the same regular action-label weight. */
#workspace #open-profile,
#workspace #account-name,
#home-section #dashboard-refresh {
  font-weight: 400;
}

/* Selected navigation retains primary-action hover feedback. */
#workspace .flow-nav .nav-item>button.active:hover,
#workspace .flow-nav .flow-group .nav-item>button.active:hover,
#workspace .flow-nav .archive-query-entry>button.active:hover {
  background: var(--ui-primary-hover);
  border-color: var(--ui-primary-hover);
  color: var(--ui-on-primary);
}

/* Give the Chinese system name a clearer secondary-brand emphasis. */
#login-view .school-heading .login-system-name {
  font-size: 18px;
  line-height: 28px;
}

/* Use compact password masking glyphs instead of wide system-font advances. */
body input[type="password"] {
  font-family: Arial, sans-serif;
  letter-spacing: 0;
}

/* Overview typography: body, supporting text and navigation links have distinct roles. */

/* Match the editor action to the common-operation card surface and hover. */

/* Keep pressed text dark; selection is committed by the release/click action. */
#workspace .flow-nav .nav-item>button:active,
#workspace .flow-nav .nav-item>button.active:active,
#workspace .flow-nav .flow-group .nav-item>button:active,
#workspace .flow-nav .flow-group .nav-item>button.active:active,
#workspace .flow-nav .archive-query-entry>button:active,
#workspace .flow-nav .archive-query-entry>button.active:active {
  background: var(--ui-option-selected-hover);
  border-color: var(--ui-outline);
  color: var(--ui-text);
  box-shadow: none;
}

/* Hover feedback remains visible for both selected and unselected options. */

/* Keep the native vertical scrollbar track present across navigation. */
@media screen {
  html {
    overflow-x: auto;
    overflow-y: scroll;
    scrollbar-gutter: auto;
    scrollbar-width: auto;
    scrollbar-color: auto;
    background: var(--ui-background);
  }

  body {
    width: 100%;
    height: auto;
    min-width: calc(1280px - var(--ui-scrollbar-width, 0px));
    overflow: visible;
    scrollbar-gutter: auto;
  }

  .native-scrollbar-probe {
    position: fixed;
    top: -1000px;
    width: 100px;
    height: 100px;
    border: 0;
    padding: 0;
    overflow: scroll;
    visibility: hidden;
    pointer-events: none;
  }

  body.ambient-theme #ambient-background {
    width: 100vw;
    right: auto;
  }

  #demo-banner {
    box-shadow: none;
  }

  body.ambient-theme #workspace .topbar {
    box-shadow: none;
  }
}

/* Match navigation edges; the floating top button does not reserve layout space. */
#workspace>main {
  padding-left: var(--ui-page-padding);
  padding-right: var(--ui-page-padding);
}

/* Restore the stronger state colors for small status dots. */

/* Dashboard card headings share the same typography as status card headings. */

/* Shortcut icon tiles deepen on hover like selected dropdown options. */

/* A low-resolution fluid canvas sits behind opaque cards and controls. */
#ambient-background {
  display: none;
}

@media screen {
  body.ambient-theme {
    background: transparent;
    isolation: isolate;
  }

  body.ambient-theme #workspace {
    background: transparent;
  }

  body.ambient-theme #ambient-background {
    display: block;
    position: fixed;
    inset: 0;
    z-index: -1;
    overflow: hidden;
    pointer-events: none;
    background: linear-gradient(135deg, var(--ui-ambient-start), var(--ui-ambient-mid) 55%, var(--ui-ambient-end));
  }

  #ambient-canvas {
    display: block;
    width: 100%;
    height: 100%;
  }
}

/* Text placed directly on the darker ambient background stays readable. */
@media screen {

  body.ambient-theme #home-section .dashboard-heading h1,
  body.ambient-theme #home-section .dashboard-description,
  body.ambient-theme #workspace .heading #main-title,
  body.ambient-theme #workspace .heading .page-description,
  body.ambient-theme #workspace .year-control {
    color: var(--ui-on-ambient);
  }

  body.ambient-theme #home-section .dashboard-footer {
    color: var(--ui-on-ambient-muted);
  }
}

/* A single shallow glass surface: the navigation bar, rather than every card. */
@media screen {
  body.ambient-theme #workspace .topbar {
    background: var(--ui-glass-surface);
    border: 0;
    -webkit-backdrop-filter: blur(6px);
    backdrop-filter: blur(6px);
  }

  @supports not (backdrop-filter: blur(1px)) {
    body.ambient-theme #workspace .topbar {
      background: var(--ui-surface-container-low);
    }
  }
}

@media screen {

  body.ambient-theme #workspace .school-copy strong,
  body.ambient-theme #workspace .school-copy small,
  body.ambient-theme #workspace #open-profile,
  body.ambient-theme #workspace #account-name {
    color: var(--ui-on-ambient);
  }

  body.ambient-theme #workspace #open-profile:hover {
    background: var(--ui-glass-control);
    border-color: transparent;
  }
}

/* Login branding stays dark on its white surface, independent of workspace theme. */
#login-view .school-heading h1,
#login-view .school-heading .login-system-name {
  color: var(--ui-text);
}

#login-view .school-heading .login-system-english,
#login-view .login-support {
  color: var(--ui-muted);
}

/* All screen pages share the slow background; white forms retain dark text. */
@media screen {
  body.ambient-theme #login-view {
    background: transparent;
  }

  body.ambient-theme #login-view .school-heading h1,
  body.ambient-theme #login-view .school-heading .login-system-name {
    color: var(--ui-on-ambient);
  }

  body.ambient-theme #login-view .school-heading .login-system-english,
  body.ambient-theme #login-view .login-support {
    color: var(--ui-on-ambient-muted);
  }

  body.ambient-theme #login-view .school-heading img {
    background: var(--ui-surface-container-low);
    border-radius: 50%;
  }

  body.ambient-theme.student-page main {
    background: var(--ui-surface);
  }

  body.ambient-theme.storage-page .storage-content>h1 {
    color: var(--ui-on-ambient);
  }
}

@media screen {
  body.ambient-theme #workspace #open-profile .account-icon {
    color: var(--ui-on-primary);
    stroke: var(--ui-surface);
  }

  body.ambient-theme #workspace .school-brand img,
  body.ambient-theme #login-view .school-heading img {
    filter: brightness(0) invert(1);
    background: transparent;
  }
}

/* All three account forms share the same light glass surface as navigation. */
@media screen {
  body.ambient-theme #login-view .login-card {
    background: var(--ui-glass-surface);
    -webkit-backdrop-filter: blur(6px);
    backdrop-filter: blur(6px);
    border: 0;
  }

  body.ambient-theme #login-view #login-title,
  body.ambient-theme #login-view #setup-note,
  body.ambient-theme #login-view #return-login {
    color: var(--ui-on-primary);
  }

  body.ambient-theme #login-view #return-login:hover {
    background: var(--ui-glass-control);
  }
}

/* A dark fallback remains underneath the viewport canvas. */
@media screen {
  html:has(body.ambient-theme) {
    background: var(--ui-ambient-base);

  }
}

/* Ambient login fields keep a consistent white surface across focus states. */
@media screen {
  body.ambient-theme #login-view .login-fields input {
    background: var(--ui-surface);
  }

  body.ambient-theme #login-view .login-fields input:focus {
    background: var(--ui-surface);
    box-shadow: none !important;
  }
}

@media screen {
  body.ambient-theme #workspace :is(#roster-section, #bags-section) .back-to-top {
    background: var(--ui-glass-surface);
    border: 0;
    color: var(--ui-on-primary);
    -webkit-backdrop-filter: blur(6px);
    backdrop-filter: blur(6px);
  }

  body.ambient-theme #workspace :is(#roster-section, #bags-section) .back-to-top:hover {
    background: var(--ui-glass-hover);
  }

}

@media screen {
  #workspace #open-profile {
    height: 40px;
    flex-shrink: 0;
    justify-content: center;
  }

  #workspace #open-profile .account-icon {
    width: 18px;
    height: 18px;
    flex: 0 0 18px;
    align-self: center;
  }

  body.ambient-theme #workspace #open-profile {
    background: var(--ui-glass-control);
    border-color: transparent;
  }
}

/* Refresh stays in the page heading; year and filters precede student search. */
#workspace #workspace-refresh {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  height: 40px;
  padding: 8px 14px;
  border: 1px solid var(--ui-border);
  color: var(--ui-text);
  font-size: 14px;
  font-weight: 400;
}

#workspace #workspace-refresh:hover:not(:disabled) {
  background: var(--ui-primary-container);
  border-color: var(--ui-outline);
}

#workspace #workspace-refresh .ui-icon {
  width: 18px;
  height: 18px;
}

#workspace :is(.student-filters, #bags-toolbar) .year-control {
  display: inline-flex;
  align-items: center;
  flex: none;
  margin: 0;
  color: var(--ui-text);
  font-weight: 400;
}

/* Shared search/file field: icon, text and action have independent layout slots. */
body .filter-search-wrap {
  position: relative;
  display: flex;
  align-items: center;
  flex: 0 0 312px;
  max-width: 312px;
  min-width: 0;
  box-sizing: border-box;
  height: 40px;
  border: 1px solid var(--ui-field-outline);
  border-radius: 8px;
  background: var(--ui-surface);
}

body .filter-search-wrap>.ui-icon {
  flex: none;
  margin-left: 12px;
  width: 18px;
  height: 18px;
  color: var(--ui-muted);
  pointer-events: none;
}

/* Original workspace search layout. */
#workspace .filter-search-wrap {
  display: block;
  height: auto;
  border: 0;
  background: transparent;
  box-shadow: none;
}

#workspace :is(:is(#student-filters, [data-student-control="student-filters"]), #bag-filters, [data-storage-id="intake-history-form"], [data-storage-id="checkout-history-form"], [data-storage-id="archive-filters"]) .filter-search-wrap input {
  width: 100%;
  height: 40px;
  margin: 0;
  padding: 8px 104px 8px 40px;
}

#workspace .filter-search-wrap > .ui-icon {
  position: absolute;
  left: 12px;
  top: 50%;
  margin: 0;
  transform: translateY(-50%);
}

body.ambient-theme #workspace :is(.student-filters, #bags-toolbar) .year-control {
  color: var(--ui-text);
}

/* Class selection shares the common dropdown's option states. */
#workspace :is(#class-filter, #bag-class-filter) summary {
  padding: 0 32px 0 12px;
  background: var(--ui-surface-container-low);
  border-color: var(--ui-border);
  color: var(--ui-text);
  font-size: 14px;
  font-weight: 400;
  line-height: 38px;
}

#workspace :is(#class-filter-options, #bag-class-filter-options) {
  display: flex;
  flex-direction: column;
  gap: 4px;
  top: calc(100% + 4px);
  left: 0;
  padding: 4px;
  border-color: var(--ui-border);
  border-radius: 8px;
  box-shadow: 0 8px 24px var(--ui-shadow-soft);
}

#workspace :is(#class-filter-options, #bag-class-filter-options) button {
  flex: none;
  min-height: 36px;
  padding: 8px 12px;
  border: 0;
  border-radius: 4px;
  background: transparent;
  color: var(--ui-text);
  font-size: 14px;
  font-weight: 400;
  line-height: 20px;
  white-space: normal;
  overflow-wrap: anywhere;
}

#workspace :is(#class-filter-options, #bag-class-filter-options) button.selected,
#workspace :is(#class-filter-options, #bag-class-filter-options) button:hover,
#workspace :is(#class-filter-options, #bag-class-filter-options) button:focus-visible {
  background: var(--ui-option-highlight);
}

#workspace :is(#class-filter-options, #bag-class-filter-options) button.selected:hover,
#workspace :is(#class-filter-options, #bag-class-filter-options) button.selected:focus-visible {
  background: var(--ui-option-selected-hover);
}

#workspace :is(#class-filter-options, #bag-class-filter-options) button:hover,
#workspace :is(#class-filter-options, #bag-class-filter-options) button:focus-visible {
  color: var(--ui-primary-hover);
}

/* A compact, regular two-column list replaces mixed status card sizes. */
#workspace :is(#status-filter, #bag-status-filter) :is(#status-filter-options, #bag-status-options) {
  position: fixed;
  inset: auto;
  width: 480px;
  max-width: calc(100vw - 32px);
  min-width: 0;
  max-height: calc(100dvh - 32px);
  overflow: auto;
  padding: 12px;
  border: 1px solid var(--ui-field-outline);
  border-radius: 8px;
  box-shadow: 0 8px 24px var(--ui-shadow-soft);
  z-index: 100;
  overscroll-behavior: contain;
}

#workspace :is(#status-filter, #bag-status-filter) .status-group {
  padding: 0 0 12px;
}

#workspace :is(#status-filter, #bag-status-filter) .status-group:last-child {
  padding-bottom: 0;
}

#workspace :is(#status-filter, #bag-status-filter) .status-group+.status-group {
  border-top: 0;
}

#workspace :is(#status-filter, #bag-status-filter) .status-group-title {
  margin: 0 0 8px;
}

#workspace :is(#status-filter, #bag-status-filter) .status-group[data-category] .status-group-options {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

#workspace :is(#status-filter, #bag-status-filter) .status-group[data-category] .status-choice {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  justify-content: center;
  gap: 4px;
  height: 60px;
  min-height: 60px;
  padding: 8px 12px;
  color: var(--ui-text);
}

#workspace :is(#status-filter, #bag-status-filter) .status-group[data-category] .status-choice-heading {
  width: 100%;
  flex: none;
}

#workspace :is(#status-filter, #bag-status-filter) .status-choice small {
  font-size: 12px;
  line-height: 18px;
  color: var(--ui-muted);
}

#workspace :is(#status-filter, #bag-status-filter) .status-check {
  text-align: center;
}

#workspace :is(#status-filter, #bag-status-filter) .status-group[data-category] .status-choice.selected,
#workspace :is(#status-filter, #bag-status-filter) .status-group[data-category] .status-choice:hover,
#workspace :is(#status-filter, #bag-status-filter) .status-group[data-category] .status-choice:focus-visible {
  background: var(--ui-option-highlight);
}

#workspace :is(#status-filter, #bag-status-filter) .status-group[data-category] .status-choice.selected:hover,
#workspace :is(#status-filter, #bag-status-filter) .status-group[data-category] .status-choice.selected:focus-visible {
  background: var(--ui-option-selected-hover);
}

#workspace :is(#status-filter, #bag-status-filter) .status-group[data-category] .status-choice:hover,
#workspace :is(#status-filter, #bag-status-filter) .status-group[data-category] .status-choice:focus-visible {
  color: var(--ui-primary-hover);
}

#workspace :is(#status-filter, #bag-status-filter) .status-filter-intro {
  margin: 0 0 12px;
  color: var(--ui-muted);
  font-size: 12px;
  line-height: 18px;
}

#workspace :is(#status-filter, #bag-status-filter) .status-group-title {
  display: flex;
  justify-content: space-between;
}

#workspace :is(#status-filter, #bag-status-filter) .status-group-title>span {
  font-weight: 400;
}

#workspace :is(#status-filter, #bag-status-filter) .status-group[data-category] .status-scope-options {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

#workspace :is(#status-filter, #bag-status-filter) .status-choice {
  cursor: pointer;
}

#workspace :is(#status-filter, #bag-status-filter) .status-choice:has(input:focus-visible) {
  background: var(--ui-option-highlight);
}

#workspace :is(#status-filter, #bag-status-filter) .status-choice.selected:has(input:focus-visible) {
  background: var(--ui-option-selected-hover);
}

#workspace :is(#status-filter, #bag-status-filter) .status-choice:has(input:disabled) {
  opacity: .5;
  cursor: default;
}

#workspace :is(#status-filter, #bag-status-filter) .status-choice input {
  width: 16px;
  height: 16px;
  min-height: 16px;
  flex: 0 0 16px;
  margin: 0;
}

#workspace :is(#status-filter, #bag-status-filter) .status-filter-actions {
  position: sticky;
  bottom: -12px;
  display: flex;
  justify-content: space-between;
  gap: 12px;
  padding: 12px 0;
  margin-bottom: -12px;
  background: var(--ui-surface);
  border-top: 1px solid var(--ui-section-divider);
}

#workspace :is(#status-filter, #bag-status-filter) .status-filter-actions button {
  width: auto;
  flex: none;
  padding: 8px 16px;
  text-align: center;
}

/* Demo tools share the floating navigation geometry and theme. */
#student-demo-tools.floating-demo-tools {
  position: fixed;
  left: 32px;
  bottom: 32px;
  z-index: 30;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  width: 48px;
  height: 48px;
  min-height: 48px;
  padding: 6px;
  margin: 0;
  border: 1px solid var(--ui-border);
  border-radius: var(--ui-radius);
  background: var(--ui-surface);
  color: var(--ui-primary);
  box-shadow: none;
}

#student-demo-tools.floating-demo-tools:hover {
  background: var(--ui-primary-container);
  border-color: var(--ui-outline);
}

#student-demo-tools.floating-demo-tools .ui-icon {
  width: 18px;
  height: 18px;
  flex: none;
}

#student-demo-tools.floating-demo-tools>span {
  font-size: 12px;
  line-height: 16px;
}

@media screen {
  body.ambient-theme #student-demo-tools.floating-demo-tools {
    background: var(--ui-glass-surface);
    border: 0;
    color: var(--ui-on-primary);
    -webkit-backdrop-filter: blur(6px);
    backdrop-filter: blur(6px);
  }

  body.ambient-theme #student-demo-tools.floating-demo-tools:hover {
    background: var(--ui-glass-hover);
  }
}

#demo-tools-dialog {
  width: 480px;
}

body dialog.choice-dialog .dialog-heading>div {
  min-width: 0;
}

body dialog.choice-dialog .dialog-heading h2 {
  margin: 0;
  font-size: 18px;
  line-height: 28px;
  font-weight: 600;
}

#demo-tools-dialog #demo-tools-description {
  margin: 4px 0 0;
  font-size: 12px;
  line-height: 18px;
  color: var(--ui-muted);
}

#demo-tools-dialog .demo-tool-choices {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}

#demo-tools-dialog .demo-tool-choice {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 12px;
  min-height: 112px;
  padding: 16px;
  background: var(--ui-surface-container-low);
  border: 1px solid var(--ui-border);
  color: var(--ui-text);
  font-size: 14px;
  font-weight: 400;
}

#demo-tools-dialog .demo-tool-choice:hover {
  background: var(--ui-primary-container);
  border-color: var(--ui-outline);
}

#demo-tools-dialog .demo-tool-choice .ui-icon {
  width: 24px;
  height: 24px;
  color: var(--ui-primary);
}

@media print {
  #student-demo-tools {
    display: none !important;
  }
}

/* Keep the full field surface visible when focus changes its color. */
#login-view .login-fields input {
  background-clip: border-box;
}

#login-view .login-fields input:focus {
  border-color: var(--ui-border) !important;
  box-shadow: none !important;
}

@media screen {

  body.ambient-theme #login-view .login-fields input,
  body.ambient-theme #login-view .login-fields input:focus {
    border-color: transparent !important;
  }
}

/* Dashboard, shortcuts and their editor use one icon tile specification. */
#home-section .metric-status-icon,
#home-section .shortcut>.ui-icon:not(.shortcut-arrow),
#shortcut-dialog #shortcut-options label>.ui-icon {
  width: var(--ui-icon-tile-size);
  height: var(--ui-icon-tile-size);
  padding: calc((var(--ui-icon-tile-size) - var(--ui-icon-glyph-size)) / 2);
  border-radius: var(--ui-radius);
  flex: none;
  stroke-width: 2;
}

#home-section .shortcut>.ui-icon:not(.shortcut-arrow),
#shortcut-dialog #shortcut-options label>.ui-icon {
  background: var(--ui-primary-container);
  color: var(--ui-primary);
}

/* Student toolbar actions remain distinct from the white card surface. */

#workspace :is(:is(#roster-toolbar, [data-student-control="roster-toolbar"]), #bags-toolbar) #open-manual:hover:not(:disabled),
#workspace :is(:is(#roster-toolbar, [data-student-control="roster-toolbar"]), #bags-toolbar) #manage-students:hover:not(:disabled) {
  border-color: var(--ui-outline);
}

#workspace :is(:is(#roster-toolbar, [data-student-control="roster-toolbar"]), #bags-toolbar) #manage-students {
  margin-left: auto;
}

#workspace :is(:is(#roster-toolbar, [data-student-control="roster-toolbar"]), #bags-toolbar) :is(#manage-students, #manage-bag-printing).active {
  color: var(--ui-primary-hover);
}

#workspace :is(:is(#roster-toolbar, [data-student-control="roster-toolbar"]), #bags-toolbar) :is(#manage-students, #manage-bag-printing).active:hover:not(:disabled) {
  background: var(--ui-primary-container-pressed);
}

/* Status options show their single selection through surface and border color. */
#workspace :is(#status-filter, #bag-status-filter) .status-group[data-category] .status-group-options {
  gap: 8px;
}

#workspace :is(#status-filter, #bag-status-filter) .status-group[data-category] .status-choice {
  position: relative;
  border: 1px solid var(--ui-border);
  border-radius: var(--ui-radius);
  background: var(--ui-surface-container-low);
}

#workspace :is(#status-filter, #bag-status-filter) .status-group[data-category] .status-choice.selected {
  background: var(--ui-filter-selected);
  border-color: var(--ui-outline-selected);
}

#workspace :is(#status-filter, #bag-status-filter) .status-group[data-category] .status-choice:hover:not(:has(input:disabled)) {
  background: var(--ui-option-highlight);
}

#workspace :is(#status-filter, #bag-status-filter) .status-group[data-category] .status-choice.selected:hover:not(:has(input:disabled)) {
  background: var(--ui-option-selected-hover);
}

#workspace :is(#status-filter, #bag-status-filter) .status-choice input[type="radio"] {
  position: absolute;
  width: 1px;
  height: 1px;
  min-height: 0;
  padding: 0;
  border: 0;
  opacity: 0;
  clip-path: inset(50%);
}

#workspace :is(#status-filter, #bag-status-filter) .status-check {
  visibility: hidden;
}

#workspace :is(#status-filter, #bag-status-filter) .selected .status-check {
  visibility: visible;
}

#workspace :is(#status-filter, #bag-status-filter) .status-choice:has(input:focus-visible) {
  outline: 2px solid var(--ui-primary);
  outline-offset: 2px;
}

#workspace :is(#status-filter, #bag-status-filter) .status-filter-actions .status-filter-reset {
  border: 1px solid var(--ui-border);
  background: var(--ui-option-highlight);
  color: var(--ui-text);
}

#workspace :is(#status-filter, #bag-status-filter) .status-filter-actions .status-filter-reset:hover {
  border-color: var(--ui-outline);
  background: var(--ui-option-selected-hover);
  color: var(--ui-primary-hover);
}

/* Clear search text only while the populated field is focused. */
#workspace .filter-search-wrap .search-clear {
  position: absolute;
  right: 72px;
  top: 50%;
  transform: translateY(-50%);
  display: flex;
  visibility: hidden;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  min-height: 0;
  padding: 2px;
  border: 0;
  border-radius: 50%;
  background: transparent;
  color: var(--ui-muted);
  margin: 0;
}

#workspace .filter-search-wrap:focus-within:has(input:not(:placeholder-shown)) .search-clear {
  visibility: visible;
}

#workspace .filter-search-wrap .search-clear:hover {
  color: var(--ui-primary);
}

#workspace .filter-search-wrap .search-clear svg {
  width: 20px;
  height: 20px;
}

#workspace .filter-search-wrap .search-clear circle {
  fill: currentColor;
}

#workspace .filter-search-wrap .search-clear path {
  fill: none;
  stroke: currentColor;
  stroke-width: 1.5;
  stroke-linecap: round;
}

/* Login field utilities: reveal on the left, focused clear on the right. */
#login-view .login-fields input {
  padding-right: 40px;
}

#login-view .login-input-wrap:has(.login-inline-action:not([hidden])) input {
  padding-right: 112px;
}

#login-view .login-input-wrap :is(.login-field-clear, .login-password-toggle) {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  display: flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  min-height: 0;
  padding: 4px;
  border: 0;
  border-radius: 50%;
  background: transparent;
  color: var(--ui-muted);
}

#login-view .login-field-clear {
  right: 4px;
  visibility: hidden;
}

#login-view .login-input-wrap:has(.login-inline-action:not([hidden])) .login-field-clear {
  right: 76px;
}

#login-view .login-input-wrap:focus-within:has(input:not(:placeholder-shown)) .login-field-clear {
  visibility: visible;
}

#login-view .login-password-toggle {
  left: 10px;
  visibility: hidden;
}

#login-view .login-password-wrap:has(input:not(:placeholder-shown)) .login-password-toggle {
  visibility: visible;
}

#login-view .login-password-wrap:has(input:not(:placeholder-shown))>.login-input-icon {
  visibility: hidden;
}

#login-view .login-input-wrap :is(.login-field-clear, .login-password-toggle):hover,
#login-view .login-input-wrap:focus-within .login-password-toggle {
  color: var(--ui-primary);
}

#login-view .login-field-clear svg {
  width: 20px;
  height: 20px;
}

#login-view .login-field-clear circle {
  fill: currentColor;
}

#login-view .login-field-clear path {
  fill: none;
  stroke: currentColor;
  stroke-width: 1.5;
  stroke-linecap: round;
}

#login-view .login-password-toggle svg {
  width: 20px;
  height: 20px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}

body .filter-search-wrap .search-submit {
  flex: none;
  margin: 0 3px 0 0;
  width: 64px;
  height: 32px;
  min-height: 32px;
  padding: 4px 12px;
  border-radius: 6px;
}

#workspace .filter-search-wrap .search-submit {
  position: absolute;
  right: 4px;
  top: 4px;
  margin: 0;
}

/* Keep student filters accessible while scrolling the roster. */
@media screen {
  #workspace :is(:is(#student-filters, [data-student-control="student-filters"]), #bag-filters) {
    position: sticky;
    top: 0;
    z-index: 40;
    background: var(--ui-surface);
  }
}

/* Give status filter headings and selected icons a clearer hierarchy. */
#workspace :is(#status-filter, #bag-status-filter) .status-group-title {
  font-size: 16px;
  line-height: 24px;
  font-weight: 600;
  color: var(--ui-text);
}

#workspace :is(#status-filter, #bag-status-filter) .status-group-title>span {
  font-size: 12px;
  color: var(--ui-muted);
}

#workspace :is(#status-filter, #bag-status-filter) .status-choice strong {
  font-size: 14px;
  line-height: 20px;
  font-weight: 600;
}

#workspace :is(#status-filter, #bag-status-filter) .status-filter-intro {
  padding: 0;
  border: 0;
  text-align: left;
}

#workspace :is(#status-filter, #bag-status-filter) .status-check {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 18px;
  height: 18px;
  flex: 0 0 18px;
  border: 0;
  border-radius: 4px;
  background: var(--ui-primary);
  color: var(--ui-on-primary);
}

#workspace :is(#status-filter, #bag-status-filter) .status-check svg {
  width: 12px;
  height: 12px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

@media screen {
  #workspace :is(:is(#student-filters, [data-student-control="student-filters"]), #bag-filters).with-frozen-header {
    border-radius: 12px 12px 0 0;
    border-bottom: 0;
  }

  #workspace :is(#roster-section, #bags-section) .roster-frozen-header {
    position: fixed;
    z-index: 39;
    overflow: hidden;
    border: 1px solid var(--ui-border);
    border-top: 0;
    border-radius: 0 0 12px 12px;
    background: var(--ui-surface-container-low);
    box-shadow: 0 4px 10px var(--ui-shadow-soft);
  }

  #workspace :is(#roster-section, #bags-section) .roster-frozen-header table {
    margin: 0;
  }

  #workspace :is(#roster-section, #bags-section) .roster-frozen-header th {
    border-radius: 0;
  }
}

/* Every roster header uses the same typography and SVG sort affordance. */
#workspace :is(#roster-section, #bags-section, .management-data-table) th,
#workspace :is(#roster-section, #bags-section, .management-data-table) :is(.student-sort, .bag-sort) {
  font-size: 14px;
  font-weight: 600;
  line-height: 20px;
}

#workspace :is(#roster-section, #bags-section, .management-data-table) .sort-indicator {
  width: 14px;
  height: 14px;
  flex: none;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.5;
  stroke-linecap: round;
  stroke-linejoin: round;
}

#workspace :is(#roster-section, #bags-section, .management-data-table) .sort-indicator[data-direction="asc"] .sort-down,
#workspace :is(#roster-section, #bags-section, .management-data-table) .sort-indicator[data-direction="desc"] .sort-up {
  opacity: .2;
}

#login-view .login-password-toggle[aria-pressed="false"] .password-eye-open,
#login-view .login-password-toggle[aria-pressed="true"] .password-eye-closed {
  display: none;
}

/* The tool chooser close icon stays in the dialog's top-right corner. */
#demo-tools-dialog {
  position: fixed;
}

body dialog.choice-dialog .dialog-heading {
  padding-right: 36px;
}

body dialog.choice-dialog .close {
  position: absolute;
  top: 12px;
  right: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  min-height: 0;
  padding: 7px;
  border: 0;
  border-radius: 6px;
  background: transparent;
  color: var(--ui-muted);
}

body dialog.choice-dialog .close:hover {
  background: var(--ui-option-highlight);
  color: var(--ui-primary);
}

body dialog.choice-dialog .close .ui-icon {
  width: 18px;
  height: 18px;
}

/* Compact pagination follows the summary inside the frozen filter row. */

#workspace :is(:is(#student-filters, [data-student-control="student-filters"]), #bag-filters) :is(:is(#roster-summary, [data-student-control="roster-summary"]), #bags-summary) {
  margin: 0;
  font-size: 14px;
  color: var(--ui-text);
}

/* One navigation surface contains overview, collection workflow and archive query. */
#workspace .flow-nav {
  gap: 12px;
  padding: 12px;
  border-radius: 12px;
  background: var(--ui-navigation-surface);
}

#workspace .flow-nav .flow-group {
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
}

#workspace .flow-nav>.nav-item>button:not(.active) {
  background: var(--ui-surface);
}

#workspace .flow-nav>.nav-item>button:hover:not(.active) {
  background: var(--ui-option-highlight);
  border-color: var(--ui-outline-selected);
}

/* Reserve exactly four CJK characters for the account name. */
#workspace #account-name {
  display: block;
  width: 4em;
  flex: 0 0 4em;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  text-align: left;
}

/* Frozen filter and header form a flat-topped surface without a bottom shadow. */
#workspace :is(:is(#student-filters, [data-student-control="student-filters"]), #bag-filters).with-frozen-header {
  border-radius: 0;
  border-top: 0;
}

#workspace :is(#roster-section, #bags-section) .roster-frozen-header th {
  border-bottom: 0;
}

/* Login keeps the 24px side inset; its title occupies a 96px top region. */
#login-view .login-card {
  position: relative;
  width: 100%;
  padding: 0 24px 48px;
}

#login-view .login-card #login-title {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 96px;
  margin: 0;
  font-size: 18px;
  font-weight: 600;
}

#login-view #setup-note {
  margin-top: 0;
}

#login-view #auth-back {
  position: absolute;
  top: 12px;
  left: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  min-height: 0;
  padding: 7px;
  background: transparent;
  border: 0;
  border-radius: 6px;
  color: var(--ui-text);
}

#login-view #auth-back:hover {
  background: transparent;
}

#login-view #auth-back .ui-icon {
  width: 18px;
  height: 18px;
  stroke-width: 3;
}

#login-view #login-error:not(:empty) {
  background: var(--ui-warning-container);
  border-color: var(--ui-warning-outline);
  color: var(--ui-warning);
}

#login-view #login-attempt-warning,
#login-view #login-error.login-limit-error:not(:empty) {
  margin: 12px 0 0;
  padding: 10px 12px;
  border: 1px solid var(--ui-error-outline);
  border-radius: 8px;
  background: var(--ui-error-container);
  color: var(--ui-error);
  font-size: 12px;
  line-height: 20px;
}

#workspace .comparison-status.status-muted {
  background: var(--ui-surface-container-high);
  color: var(--ui-on-surface-variant);
}

#workspace #system-settings-entry {
  background: var(--ui-primary-container);
  color: var(--ui-on-primary-container);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  height: 40px;
  padding: 8px 12px;
  font-size: 14px;
  font-weight: 400;
}

#workspace #system-settings-entry:hover {
  background: var(--ui-primary-container-hover);
}

#workspace #system-settings-entry .ui-icon {
  width: 18px;
  height: 18px;
}

@media screen {
  body.ambient-theme #workspace #system-settings-entry {
    border-color: transparent;
    background: var(--ui-glass-control);
    color: var(--ui-on-primary);
  }

  body.ambient-theme #workspace #system-settings-entry:hover {
    background: var(--ui-glass-control-hover);
  }

  body.ambient-theme #login-view #auth-back {
    color: var(--ui-on-primary);
  }
}

/* Components pair container and foreground roles instead of choosing raw colors. */
#workspace .soft-action,
body .filter-search-wrap .soft-action,
#import-dialog :is(#choose-excel-file, .import-template-download),
#workspace :is(:is(#roster-toolbar, [data-student-control="roster-toolbar"]), #bags-toolbar) :is(#open-manual, #manage-students, #manage-bag-printing, #open-print-history),
#workspace :is(#status-filter, #bag-status-filter) .status-filter-actions .status-filter-reset,
#home-section #background-toggle,
#home-section #dashboard-refresh,
#workspace #workspace-refresh,
#home-section #edit-shortcuts {
  --ui-button-outline: var(--ui-field-outline);
  border-width: 1px;
  border-style: solid;
  background: var(--ui-action-surface);
  color: var(--ui-on-primary-container);
  border-color: var(--ui-outline-variant);
}

#workspace .soft-action:hover:not(:disabled),
body .filter-search-wrap .soft-action:hover:not(:disabled),
#import-dialog :is(#choose-excel-file, .import-template-download):hover:not(:disabled),
#workspace :is(:is(#roster-toolbar, [data-student-control="roster-toolbar"]), #bags-toolbar) :is(#open-manual, #manage-students, #manage-bag-printing, #open-print-history):hover:not(:disabled),
#workspace :is(#status-filter, #bag-status-filter) .status-filter-actions .status-filter-reset:hover,
#home-section #background-toggle:hover,
#home-section #dashboard-refresh:hover,
#workspace #workspace-refresh:hover,
#home-section #edit-shortcuts:hover {
  --ui-button-outline: var(--ui-field-outline-hover);
  background: var(--ui-primary-container-hover);
  color: var(--ui-on-primary-container);
}

#workspace :is(:is(#roster-toolbar, [data-student-control="roster-toolbar"]), #bags-toolbar) :is(#manage-students, #manage-bag-printing).active {
  background: var(--ui-primary-container-hover);
}

#workspace :is(:is(#roster-toolbar, [data-student-control="roster-toolbar"]), #bags-toolbar) :is(#manage-students, #manage-bag-printing).active:hover {
  background: var(--ui-primary-container-pressed);
}

#workspace :is(#status-filter, #bag-status-filter) .status-choice.selected {
  color: var(--ui-on-primary-container);
}

body :is(.comparison-status.status-danger, .risk-badge) {
  background: var(--ui-error-container);
  color: var(--ui-on-error-container);
}

body .comparison-status.status-warning {
  background: var(--ui-warning-container);
  color: var(--ui-warning);
}

body .comparison-status.status-success {
  background: var(--ui-success-container);
  color: var(--ui-success);
}

/* Interactive card borders stay blue-gray; focus remains the stronger brand blue. */
#home-section .shortcut:hover,
#workspace :is(#status-filter, #bag-status-filter) .status-group[data-category] .status-choice.selected,
#workspace :is(:is(#roster-toolbar, [data-student-control="roster-toolbar"]), #bags-toolbar) :is(#manage-students, #manage-bag-printing).active {
  border-color: var(--ui-outline-selected);
}

/* Action buttons use fill rather than a visible border. Keep the existing box size.
 * Dropdown triggers and clickable cards retain their field/card boundaries. */
body :is(button, a.button):not(.dropdown-trigger):not(.shortcut):not(.status-choice):not(.demo-tool-choice):not([role="combobox"]):not([aria-haspopup="listbox"]) {
  border-color: var(--ui-button-outline, transparent) !important;
}

/* Reserve space for selection controls in both the source and frozen tables. */
#workspace :is(#roster-section, #bags-section) .student-manage-mode :is(th, td):first-child,
#workspace #bags-section .bag-print-mode :is(th, td):first-child {
  padding-left: 52px;
}

#workspace :is(#roster-section, #bags-section) .first-column-select {
  margin: 0;
  left: 20px;
}

#workspace .first-column-select:focus {
  outline: none !important;
  box-shadow: none !important;
}

#workspace .first-column-select:focus-visible {
  outline: none !important;
  box-shadow: inset 0 0 0 2px var(--ui-primary) !important;
}

/* Cards are separated by surface color and spacing, without visible outlines. */
body :is(.table-card, .metric, .dashboard-shortcuts, .shortcuts, .dashboard-scope-bar, .dashboard-notices,
  .setup-card, .storage-pending, .import-file-card, .login-card,
  .shortcut, .dashboard-notice, .status-choice, .comparison-choice,
  .comparison-inline-choice, dialog) {
  border: 0 !important;
  box-shadow: none !important;
}

#workspace .roster-frozen-header {
  border: 0;
}

#workspace :is(.toolbar, .student-filters, .flow-nav, .toolbar-tool-menu),
:is(#home-section, :is(#roster-toolbar, [data-student-control="roster-toolbar"]), #bags-toolbar) :is(#dashboard-year-form, :is(#student-stats-form, [data-student-control="student-stats-form"]), #bag-stats-form),
body.student-page>main {
  border: 0 !important;
}

/* Floating actions retain a soft elevation above the page surface. */
#student-demo-tools.floating-demo-tools,
#workspace :is(#roster-section, #bags-section) .back-to-top {
  box-shadow: 0 4px 12px var(--ui-shadow-soft);
}

/* Filter and search controls share one border thickness and color. */
:is(#workspace, .storage-view, body.storage-page, body.student-page) :is(input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]),
  select, textarea, .dropdown-trigger, .student-filter > summary, #class-trigger) {
  border: 1px solid var(--ui-field-outline) !important;
}

/* Hover increases contrast gently; focus takes precedence. */
:is(#workspace, .storage-view, body.storage-page, body.student-page) :is(input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]),
  select, textarea, .dropdown-trigger, .student-filter > summary, #class-trigger):hover:not(:disabled):not(:focus):not(:focus-visible):not([aria-expanded="true"]):not(.student-filter[open] > summary) {
  border-color: var(--ui-field-outline-hover) !important;
}

:is(#workspace, .storage-view, body.storage-page, body.student-page) :is(input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]),
  select, textarea, .dropdown-trigger, .student-filter > summary, #class-trigger):is(:focus, :focus-visible) {
  border-color: var(--ui-primary) !important;
  box-shadow: inset 0 0 0 1px var(--ui-primary) !important;
}

/* Navigation hover must remain distinct from its surrounding surface. */
#workspace .flow-nav .nav-item>button:hover:not(.active),
#workspace .flow-nav .flow-group .nav-item>button:hover:not(.active) {
  background: var(--ui-primary-container-hover);
  color: var(--ui-on-primary-container);
}

#workspace .flow-nav .nav-item>button:active:not(.active),
#workspace .flow-nav .flow-group .nav-item>button:active:not(.active) {
  background: var(--ui-primary-container-pressed);
}

/* Input surfaces remain white across themes and interaction states. */
:is(#workspace, .storage-view, body.storage-page, body.student-page) :is(input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]),
  select, textarea, .dropdown-trigger, .student-filter > summary, #class-trigger) {
  background-color: var(--ui-surface) !important;
}

/* Table headings retain a distinct tinted surface without a bottom rule. */
#workspace :is(#roster-section, #bags-section, .management-data-table) th {
  background: var(--ui-table-header) !important;
  color: var(--ui-on-table-header);
  border-bottom: 0;
}

#workspace :is(#roster-section, #bags-section) .roster-frozen-header {
  background: var(--ui-table-header);
}

/* Shortcut surfaces and their editor share states; icon tiles sit one step deeper. */

/* Metric interaction stays distinct from the neutral page background. */
#workspace #home-section .metric:hover:not(:disabled),
#workspace #home-section .metric:focus-visible {
  background: var(--ui-metric-hover);
}

#workspace #home-section .metric:active:not(:disabled) {
  background: var(--ui-metric-pressed);
}

/* Preserve the internal divider between actions and filters, without an outer border. */
#workspace :is(:is(#roster-toolbar, [data-student-control="roster-toolbar"]), #bags-toolbar) {
  position: relative;
}

#workspace :is(:is(#roster-toolbar, [data-student-control="roster-toolbar"]), #bags-toolbar)::after {
  content: "";
  position: absolute;
  left: 20px;
  right: 20px;
  bottom: 0;
  height: 1px;
  background: var(--ui-section-divider);
  pointer-events: none;
}

/* Heading actions retain their hover state; overview actions have white resting surfaces. */

#workspace #workspace-refresh {
  background: var(--ui-surface);
}

#home-section #background-toggle:hover,
#home-section #dashboard-refresh:hover,
#workspace #workspace-refresh:hover {
  background: var(--ui-action-surface-hover);
}

/* The selection slot is permanent, so switching modes does not move data. */
#workspace :is(#roster-section, #bags-section, .management-data-table) table :is(th, td):first-child {
  padding-left: 52px;
}

/* Frozen headings have no side borders or sticky-cell shadows. */
#workspace :is(#roster-section, #bags-section) .roster-frozen-header {
  border: 0;
  box-shadow: none;
}

#workspace :is(#roster-section, #bags-section) .roster-frozen-header th {
  border-left: 0;
  border-right: 0;
  box-shadow: none;
}

/* Row dividers join across cells but stop inside both card edges. */
#workspace :is(#roster-section, #bags-section, .management-data-table) tbody td {
  position: relative;
  border-bottom: 0;
}

#workspace :is(#roster-section, #bags-section, .management-data-table) tbody tr:not(:last-child) td::after {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 1px;
  background: var(--ui-section-divider);
  pointer-events: none;
}

#workspace :is(#roster-section, #bags-section) tbody tr:not(:last-child) td:first-child::after {
  left: 20px;
}

#workspace :is(#roster-section, #bags-section) tbody tr:not(:last-child) td:last-child::after {
  right: 20px;
}

#workspace :is(#roster-section, #bags-section, [data-storage-id="inventory-panel"]) .pagination {
  position: relative;
  border-top: 0;
}

#workspace :is(#roster-section, #bags-section, [data-storage-id="inventory-panel"]) .pagination::before {
  content: "";
  position: absolute;
  top: 0;
  left: 20px;
  right: 20px;
  height: 1px;
  background: var(--ui-section-divider);
  pointer-events: none;
}

/* Table headings match button size; compact status labels remain regular-weight. */
#workspace :is(#roster-section, #bags-section, .management-data-table) :is(th, .student-sort, .bag-sort),
:is(.storage-view, body.storage-page) :is(th, .inventory-sort) {
  font-size: 14px;
  font-weight: 600;
  line-height: 20px;
}

body :is(.comparison-status, .storage-status, .attachment-state) {
  font-size: 12px;
  font-weight: 400;
  line-height: 18px;
}

body :is(.comparison-status, .storage-status, .attachment-state) :is(strong, b) {
  font-size: inherit;
  font-weight: 400;
}

/* White action surfaces use the same thin outline as filter fields. */
body .white-button,
#print-history-table .print-history-reprint,
#home-section :is(#background-toggle, #dashboard-refresh),
#workspace #workspace-refresh,
#workspace .flow-nav .nav-item>button:not(.active),
#workspace :is(.student-row-actions, .bag-row-actions) :is(button, a.button):not(.primary):not(.danger-button):not(.risk-button),
body dialog .dialog-actions button:not(.primary):not(.home-primary):not(.danger-button):not(.risk-button) {
  --ui-button-outline: var(--ui-field-outline);
  border-width: 1px;
  border-style: solid;
}

body .white-button:hover,
#print-history-table .print-history-reprint:hover:not(:disabled),
#home-section :is(#background-toggle, #dashboard-refresh):hover,
#workspace #workspace-refresh:hover,
#workspace .flow-nav .nav-item>button:hover:not(.active),
#workspace :is(.student-row-actions, .bag-row-actions) :is(button, a.button):hover:not(.primary):not(.danger-button):not(.risk-button),
body dialog .dialog-actions button:hover:not(.primary):not(.home-primary):not(.danger-button):not(.risk-button) {
  --ui-button-outline: var(--ui-field-outline-hover);
}

/* Restore the screenshot's pale outlined surfaces; keep later table behavior. */

#workspace .flow-nav {
  border: 1px solid var(--ui-card-outline) !important;
}

/* Text wrappers cap table values at two lines while rows keep their height. */
#workspace :is(#roster-section, #bags-section, .management-data-table) tbody td:nth-child(-n + 5) {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

:is(#roster-section, #bags-section, .management-data-table) tbody td {
  height: 62px;
  box-sizing: border-box;
}

:is(#roster-section, #bags-section, .management-data-table, .hj-data-table) .data-table-text {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  max-height: 36px;
  line-height: 18px;
  white-space: normal;
  overflow-wrap: anywhere;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Inset column separators double as generous drag targets. */
#workspace :is(#roster-section, #bags-section, .management-data-table) th:not(:last-child) {
  position: relative;
}

#workspace :is(#roster-section, #bags-section, .management-data-table) .student-column-resize {
  position: absolute;
  top: 12px;
  bottom: 12px;
  right: 0;
  width: 9px;
  cursor: col-resize;
  touch-action: none;
  z-index: 3;
}

#workspace :is(#roster-section, #bags-section, .management-data-table) .student-column-resize::after {
  content: '';
  position: absolute;
  top: 0;
  bottom: 0;
  right: 0;
  width: 1px;
  background: var(--ui-section-divider);
}

#workspace :is(#roster-section, #bags-section, .management-data-table) th:last-child .student-column-resize::after {
  content: none;
}

#workspace :is(#roster-section, #bags-section, .management-data-table) .student-column-resize:focus-visible {
  outline: 1px solid var(--ui-primary);
}

#workspace :is(#roster-section, #bags-section, .management-data-table) .student-column-divider {
  cursor: default;
  pointer-events: none;
}

body .student-action-menu[popover]:not(:popover-open) { display: none; }

body.student-columns-resizing,
body.student-columns-resizing * {
  cursor: col-resize !important;
  user-select: none !important;
}

/* Quiet alternating rows, with a stronger neutral surface on hover. */
#workspace :is(#roster-section, #bags-section, .management-data-table) tbody tr {
  --student-row-surface: var(--ui-surface);
}

#workspace :is(#roster-section, #bags-section, .management-data-table) tbody tr:nth-child(odd) {
  --student-row-surface: var(--ui-table-row-alternate);
}

#workspace :is(#roster-section, #bags-section, .management-data-table) tbody tr:hover {
  --student-row-surface: var(--ui-table-row-hover);
}

#workspace :is(#roster-section, #bags-section, .management-data-table) tbody td {
  background: var(--student-row-surface) !important;
}

#workspace :is(#roster-section, #bags-section, .management-data-table) tbody tr:not(:last-child) td::after {
  content: none;
}

#workspace :is(#roster-section, #bags-section, .management-data-table) tbody td:first-child {
  border-radius: 0;
}

#workspace :is(#roster-section, #bags-section, .management-data-table) tbody td:last-child {
  border-radius: 0;
}

/* Confirm each student's full identity before invalidating their records. */

/* Keep both status columns and actions visible at the right edge. */
#workspace :is(#roster-section, #bags-section) {
  --ui-table-header: var(--ui-action-surface);
}

#workspace :is(#roster-section, #bags-section) :is(th, td):nth-last-child(-n+3) {
  position: sticky;
  z-index: 3;
  box-shadow: none;
  border-left: 0;
}

#workspace :is(#roster-section, #bags-section) :is(th, td):last-child {
  right: 0;
}

#workspace :is(#roster-section, #bags-section) :is(th, td):nth-last-child(2) {
  right: 145px;
}

#workspace :is(#roster-section, #bags-section) :is(th, td):nth-last-child(3) {
  right: 255px;
}

#workspace :is(#roster-section, #bags-section) th:nth-last-child(-n+3) {
  z-index: 4;
}

#workspace :is(#roster-section, #bags-section) .student-row-actions {
  white-space: nowrap;
}

/* Single-column creation cards use placeholders and supporting hints. */

#manual-dialog .manual-intro {
  margin: 0 0 16px;
  font-size: 12px;
  line-height: 1.6;
  color: var(--ui-on-surface-variant);
}

#manual-dialog .manual-fields {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}

#manual-dialog .manual-field-card {
  display: grid;
  padding: 16px;
  border-radius: 8px;
  background: var(--ui-surface-container-low);
}

#manual-dialog .manual-field-card :is(input, textarea) {
  width: 100%;
  margin: 0;
  background: var(--ui-surface);
  border: 1px solid var(--ui-field-outline);
  font-size: 14px;
}

#manual-dialog .manual-field-card small {
  font-size: 12px;
  font-weight: 400;
  line-height: 1.6;
  color: var(--ui-on-surface-variant);
}

#manual-dialog .manual-actions {
  display: flex;
  flex-direction: row;
  justify-content: flex-end;
  align-items: center;
  gap: 12px;
  margin-top: 24px;
  padding-top: 16px;
  border-color: var(--ui-section-divider);
}

#manual-dialog .manual-actions button {
  width: auto;
  margin: 0;
  min-height: 40px;
}

/* Login confirmation uses a centered half-width action. */
#login-view #login-submit {
  margin-left: auto;
  margin-right: auto;
  display: block;
}

/* Match the space above the login action to the card’s bottom inset. */

/* The login action region is four times the 24px horizontal inset. */

/* Review fields flow from source cards to editable final information. */
#comparison-dialog {
  width: min(900px, calc(100vw - 32px));
}

#comparison-dialog .dialog-heading {
  border: 0;
  margin-bottom: 8px;
}

#comparison-dialog .comparison-instructions {
  margin: 0 0 10px;
  font-size: 12px;
  line-height: 1.6;
  color: var(--ui-on-surface-variant);
  border: 0;
  padding: 0;
}

#comparison-dialog #comparison-detail-status {
  font-size: 12px;
  margin: 0 0 16px;
}

#comparison-dialog #comparison-choices {
  display: grid;
  gap: 12px;
}

#comparison-dialog .comparison-field-card {
  border: 0;
  padding: 12px;
  border-radius: 8px;
  background: var(--ui-surface-container-low);
}

#comparison-dialog .comparison-field-card h3 {
  margin: 0 0 8px;
  font-size: 14px;
  font-weight: 600;
}

#comparison-dialog .comparison-card-row {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
}

#comparison-dialog :is(.comparison-source-card, .comparison-final-card) {
  margin: 0;
  padding: 12px;
  border: 0;
  border-radius: 8px;
  background: var(--ui-surface);
  display: flex;
  flex-direction: column;
  gap: 8px;
  overflow-wrap: anywhere;
  min-width: 0;
}

#comparison-dialog .comparison-source-card {
  position: relative;
  cursor: pointer;
}

#comparison-dialog .comparison-source-card input[type=radio] {
  position: absolute;
  opacity: 0;
  width: 1px;
  height: 1px;
  margin: 0;
}

#comparison-dialog .comparison-source-card.selected {
  background: var(--ui-filter-selected);
}

#comparison-dialog .comparison-source-card:has(input:focus-visible) {
  outline: 1px solid var(--ui-primary);
}

#comparison-dialog :is(.comparison-source-card, .comparison-final-card) small {
  font-size: 12px;
  font-weight: 400;
  line-height: 1.6;
  color: var(--ui-on-surface-variant);
  border: 0;
  padding: 0;
}

#comparison-dialog :is(.comparison-source-card, .comparison-final-card) span {
  font-size: 14px;
  line-height: 1.6;
}

#comparison-dialog .comparison-final-card :is(input, textarea) {
  margin: 0;
  width: 100%;
  padding: 8px 10px;
  border: 1px solid var(--ui-field-outline);
  border-radius: 6px;
  background: var(--ui-surface);
  font-size: 14px;
}

#comparison-dialog #comparison-error:not(:empty) {
  padding: 12px;
  margin: 16px 0 0;
  border: 0;
  border-radius: 8px;
  background: var(--ui-warning-container);
  color: var(--ui-warning);
  font-size: 12px;
  line-height: 1.6;
}

#comparison-dialog .dialog-actions {
  display: flex;
  justify-content: center;
}

#comparison-dialog #comparison-confirm {
  width: 50%;
}

/* Storage status headings and values align with the other data columns. */
#workspace :is(#roster-section, #bags-section) :is(th, td):is(:nth-last-child(2), :nth-last-child(3)) {
  text-align: left;
  padding-left: 16px;
  padding-right: 16px;
}

/* A shorter login action stays centered in the 96px action region. */

#login-view #login-submit {
  padding-top: 8px;
  padding-bottom: 8px;
}

/* Anchor pagination separately so page-number length cannot shift the summary. */

#workspace :is(#roster-page-count, #bags-page-count, .roster-page-count) {
  flex: 1;
  text-align: center;
  font-variant-numeric: tabular-nums;
}

#workspace :is(#roster-section, #bags-section, [data-storage-id="inventory-panel"]) .pagination {
  display: grid;
  grid-template-columns: 24px auto 24px;
  justify-content: center;
  align-items: center;
  gap: 16px;
}

#workspace :is(#roster-section, #bags-section, [data-storage-id="inventory-panel"]) :is(#page-info, #bags-page-info, [data-student-control="page-info"]) {
  grid-column: 2;
  text-align: center;
  font-size: 14px;
  font-weight: 400;
  color: var(--ui-muted);
}

#workspace :is(#roster-section, #bags-section, [data-storage-id="inventory-panel"]) .pagination > :is(#previous, #bags-previous, [data-student-control="previous"]) {
  grid-column: 1;
  justify-self: center;
}

#workspace :is(#roster-section, #bags-section, [data-storage-id="inventory-panel"]) .pagination > :is(#next, #bags-next, [data-student-control="next"]) {
  grid-column: 3;
  justify-self: center;
}

#workspace :is(#roster-section, #bags-section, [data-storage-id="inventory-panel"]) .pagination button {
  width: 40px;
  height: 40px;
  padding: 8px;
  --ui-button-outline: var(--ui-field-outline);
  border-width: 1px;
  border-style: solid;
  background: var(--ui-surface);
}

#workspace :is(#roster-section, #bags-section, [data-storage-id="inventory-panel"]) .pagination button:hover:not(:disabled) {
  --ui-button-outline: var(--ui-field-outline-hover);
}

/* Compact login confirmation: include padding within the intended 34px height. */

#login-view #login-submit {
  margin-top: 31px;
  margin-bottom: 0;
}

/* Settings and refresh share one secondary-action treatment in either theme. */
#workspace :is(#system-settings-entry, #workspace-refresh, #dashboard-refresh),
body.ambient-theme #workspace :is(#system-settings-entry, #workspace-refresh, #dashboard-refresh) {
  --ui-button-outline: var(--ui-field-outline);
  box-sizing: border-box;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  height: 40px;
  min-height: 40px;
  padding: 9px 15px;
  border: 1px solid var(--ui-field-outline);
  border-radius: 8px;
  background: var(--ui-surface);
  color: var(--ui-on-primary-container);
  font-size: 14px;
  font-weight: 400;
}

#workspace :is(#system-settings-entry, #workspace-refresh, #dashboard-refresh):hover:not(:disabled),
body.ambient-theme #workspace :is(#system-settings-entry, #workspace-refresh, #dashboard-refresh):hover:not(:disabled) {
  --ui-button-outline: var(--ui-field-outline-hover);
  border-color: var(--ui-field-outline-hover);
  background: var(--ui-action-surface-hover);
}

#workspace :is(#system-settings-entry, #workspace-refresh, #dashboard-refresh) .ui-icon {
  width: 18px;
  height: 18px;
}

/* Dropdown content remains complete; long labels wrap instead of clipping. */
#workspace .student-filter>summary {
  display: block;
  box-sizing: border-box;
  height: 40px;
  min-height: 40px;
  padding: 9px 32px 9px 12px;
  line-height: 20px;
  white-space: nowrap;
  overflow: hidden;
  overflow-wrap: normal;
  text-overflow: ellipsis;
}

#workspace :is(#class-filter, #bag-class-filter)>summary {
  padding: 9px 32px 9px 12px;
  line-height: 20px;
}

/* Every dropdown uses the original scope picker's SVG chevron. */
body :is(.dropdown-arrow, .class-arrow),
body :is(.bag-manage-trigger, .toolbar-tools > summary, .area-actions > summary,
  .student-filter > summary, .statistics-scope-form .dropdown-trigger)::after {
  content: "";
  display: inline-block;
  width: 18px;
  height: 18px;
  flex: none;
  margin: 0;
  border: 0;
  color: var(--ui-text);
  background-color: currentColor;
  mask: var(--ui-dropdown-chevron) center / contain no-repeat;
  transform: none;
}

body :is(.student-filter > summary, .statistics-scope-form .dropdown-trigger)::after {
  position: absolute;
  top: 50%;
  right: 8px;
  transform: translateY(-50%);
}

body :is(.dropdown-trigger[aria-expanded="true"] .dropdown-arrow, #class-trigger[aria-expanded="true"] .class-arrow,
  #manual-class-toggle[aria-expanded="true"] .dropdown-arrow),
body :is(.bag-manage-trigger[aria-expanded="true"], .toolbar-tools[open] > summary, .area-actions[open] > summary)::after {
  transform: rotate(180deg);
}

body :is(.student-filter[open] > summary,
  .statistics-scope-form .dropdown-trigger[aria-expanded="true"])::after {
  transform: translateY(-50%) rotate(180deg);
}

body select:not([multiple]):not([size]):not([hidden]) {
  appearance: none;
  background-image: var(--ui-dropdown-chevron);
  background-repeat: no-repeat;
  background-position: right 8px center;
  background-size: 18px 18px;
}

:is(#workspace, .storage-view, body.storage-page, body.student-page) select:not([multiple]):not([size]) {
  padding-right: 32px !important;
}

body :is(.filter-options, .dropdown-options) button {
  height: auto;
  white-space: normal;
  overflow-wrap: anywhere;
  overflow: visible;
  text-overflow: clip;
}

#workspace :is(#class-filter-options, #bag-class-filter-options) {
  position: fixed;
  inset: auto;
  width: max-content;
  min-width: 0;
  max-width: min(400px, calc(100vw - 32px));
  box-sizing: border-box;
  overflow-x: hidden;
  overflow-y: auto;
  scroll-snap-type: y proximity;
  scroll-padding: 4px;
  z-index: 100;
}

#workspace :is(#class-filter-options, #bag-class-filter-options) button {
  scroll-snap-align: start;
}

/* Keep at most two row actions visible; overflow opens outside the table clip. */
body :is(.student-action-menu, .bag-management-menu) {
  position: fixed;
  z-index: 110;
  display: grid;
  gap: 4px;
  width: 120px;
  box-sizing: border-box;
  padding: 8px;
  border: 1px solid var(--ui-card-outline) !important;
  border-radius: 8px;
  background: var(--ui-surface-container-low);
  box-shadow: 0 4px 12px var(--ui-shadow-soft);
}

body :is(.student-action-menu, .bag-management-menu) button {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  min-height: 36px;
  padding: 8px 16px;
  margin: 0;
  border: 0 !important;
  border-radius: 6px;
  background: transparent;
  text-align: center;
  font-size: 14px;
  font-weight: 400;
}

body :is(.student-action-menu, .bag-management-menu) button:hover:not(:disabled) {
  background: var(--ui-primary-container);
}

body :is(.student-action-menu .danger-button, .bag-management-menu .bag-menu-danger) {
  color: var(--ui-error);
}

body :is(.student-action-menu .danger-button, .bag-management-menu .bag-menu-danger):hover:not(:disabled) {
  background: var(--ui-error-container);
}

#workspace :is(#roster-section, #bags-section) td.student-row-actions button.student-row-more {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  min-width: 44px;
  width: auto;
  height: 32px;
  padding: 5px 8px;
}

#workspace :is(#roster-section, #bags-section) .student-row-more .ui-icon {
  width: 18px;
  height: 18px;
}

#stored-student-delete-dialog {
  width: min(480px, calc(100vw - 32px));
}

#stored-student-delete-dialog .stored-delete-notice {
  padding: 16px;
  border-radius: 8px;
  background: var(--ui-warning-container);
  color: var(--ui-warning);
  font-size: 14px;
  line-height: 1.7;
}

#stored-student-delete-dialog .dialog-actions {
  justify-content: center;
}

#stored-student-delete-dialog .dialog-actions .primary {
  width: 50%;
}

/* Import starts compact and expands only for the list preview. */
#import-dialog {
  width: min(520px, calc(100vw - 48px));
  padding: 24px;
}

#import-dialog:has(#preview-section:not([hidden])) {
  width: min(920px, calc(100vw - 48px));
}

:is(#import-dialog, #manual-dialog, #shortcut-dialog) .dialog-heading {
  margin-bottom: 24px;
  padding-bottom: 16px;
  border-bottom: 0;
}

:is(#import-dialog, #manual-dialog, #shortcut-dialog) .dialog-heading::after,
:is(#import-dialog, #manual-dialog, #shortcut-dialog)>.dialog-actions::before {
  left: 0;
  right: 0;
}

:is(#import-dialog, #manual-dialog, #shortcut-dialog) .close {
  top: -6px;
  right: -6px;
  width: 32px;
  height: 32px;
  min-width: 32px;
  min-height: 32px;
  padding: 6px;
  background: transparent;
}

:is(#import-dialog, #manual-dialog, #shortcut-dialog) .close .ui-icon {
  width: 20px;
  height: 20px;
}

:is(#import-dialog, #manual-dialog, #shortcut-dialog) .close:is(:hover, :focus-visible) {
  background: var(--ui-metric-hover);
  color: var(--ui-primary);
}

:is(#import-dialog, #manual-dialog, #shortcut-dialog) .close:focus-visible {
  outline: 2px solid var(--ui-primary);
  outline-offset: 2px;
}

:is(#import-dialog, #manual-dialog, #shortcut-dialog) .import-intro {
  margin: 4px 0 0;
  color: var(--ui-on-surface-variant);
  font-size: 12px;
  line-height: 18px;
}

#import-dialog :is(.import-template-help, .import-year-card, .import-file-card) {
  padding: 16px;
  border-radius: 8px;
  background: var(--ui-surface-container-low);
}

#import-dialog .import-template-help {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 0 0 12px;
}

#import-dialog .import-template-help>div {
  flex: 1;
  min-width: 0;
}

#import-dialog .import-template-help p {
  font-size: 12px;
  line-height: 1.7;
  margin-bottom: 0;
}

#import-dialog .import-template-download {
  flex: none;
}

#import-dialog :is(#import-file-help, .import-requirements, #preview-source) {
  font-size: 12px;
  line-height: 1.7;
}

#import-dialog .preview-table {
  max-height: 380px;
  border: 1px solid var(--ui-field-outline);
  overflow: auto;
  border-radius: 8px;
  background: var(--ui-surface);
}

#import-dialog .preview-table table {
  border-collapse: separate;
  border-spacing: 0;
  table-layout: fixed;
}

#import-dialog .preview-table :is(th, td) {
  padding: 14px 16px;
  border: 0;
  width: auto;
  min-width: 0;
  font-size: 14px;
  line-height: 1.6;
  text-align: left;
}

#import-dialog .preview-table th {
  position: sticky;
  top: 0;
  z-index: 2;
  background: var(--ui-action-surface);
  font-weight: 600;
}

#import-dialog .preview-table td {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

#import-dialog .preview-table tbody tr:nth-child(odd) {
  background: var(--ui-table-row-alternate);
}

#import-dialog .preview-table tbody tr:hover {
  background: var(--ui-table-row-hover);
}

#import-dialog .preview-table .import-preview-sort,
#print-history-dialog .generation-history-sort {
  background: transparent;
  border: 0;
  padding: 0;
  min-height: 24px;
  margin: 0;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 14px;
  font-weight: 600;
  color: var(--ui-on-surface);
}

:is(#import-dialog, #print-history-dialog) .sort-indicator {
  width: 14px;
  height: 14px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.5;
}

:is(#import-dialog, #print-history-dialog) .sort-indicator[data-direction=asc] .sort-down,
:is(#import-dialog, #print-history-dialog) .sort-indicator[data-direction=desc] .sort-up {
  opacity: .2;
}

:is(#import-dialog, #print-history-dialog) .student-column-resize {
  position: absolute;
  top: 12px;
  bottom: 12px;
  right: 0;
  width: 9px;
  cursor: col-resize;
  touch-action: none;
}

:is(#import-dialog, #print-history-dialog) .student-column-resize::after {
  content: '';
  position: absolute;
  top: 0;
  bottom: 0;
  right: 0;
  width: 1px;
  background: var(--ui-section-divider);
}

:is(#import-dialog, #print-history-dialog) th:last-child .student-column-resize::after {
  content: none;
}

:is(#import-dialog, #print-history-dialog) .student-column-resize:focus-visible {
  outline: 1px solid var(--ui-primary);
}

#import-dialog .pagination {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
}

#import-dialog #preview-page-info {
  text-align: center;
}



/* Match the spacing between adjacent pagination buttons throughout the workspace. */
#workspace .pagination>div,
#import-dialog .pagination>div {
  display: flex;
  align-items: center;
  gap: 12px;
}

#workspace .pagination>div>button,
#import-dialog .pagination>div>button {
  margin: 0;
}


#workspace :is(#roster-section, #bags-section) .student-selectable-row {
  cursor: pointer;
}

/* Freeze filters, batch selection, and the mirrored header as one stack. */
#workspace :is(#roster-sticky-controls, #bags-sticky-controls) {
  margin-bottom: 24px;
  background: var(--ui-surface);
  border-radius: 0 0 12px 12px;
}

@media screen {
  #workspace :is(#roster-sticky-controls, #bags-sticky-controls) {
    position: sticky;
    top: 0;
    z-index: 40;
  }

  #workspace :is(#roster-sticky-controls, #bags-sticky-controls) :is(:is(#student-filters, [data-student-control="student-filters"]), #bag-filters) {
    position: static;
  }
}

#workspace :is(#roster-sticky-controls, #bags-sticky-controls) :is(:is(#student-filters, [data-student-control="student-filters"]), #bag-filters) {
  margin-bottom: 0;
}

#workspace :is(#student-management-controls, #bag-print-controls) {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 0;
  padding: 12px 20px;
  background: var(--ui-action-surface);
  border: 0;
  border-radius: 0 0 12px 12px;
}

#workspace :is(#student-selection-count, #bag-selection-count) {
  font-size: 12px;
  color: var(--ui-on-surface-variant);
}

#workspace :is(#roster-sticky-controls, #bags-sticky-controls):has(:is(#student-management-controls, #bag-print-controls):not([hidden])) :is(:is(#student-filters, [data-student-control="student-filters"]), #bag-filters) {
  border-radius: 0;
}

#workspace :is(#roster-sticky-controls, #bags-sticky-controls).with-frozen-header,
#workspace :is(#roster-sticky-controls, #bags-sticky-controls).with-frozen-header :is(:is(:is(#student-filters, [data-student-control="student-filters"]), #bag-filters), :is(#student-management-controls, #bag-print-controls)) {
  border-radius: 0;
}

/* Center both student status badges within their columns. */
#workspace :is(#roster-section, #bags-section) tbody td:nth-last-child(3),
#workspace :is(#roster-section, #bags-section) tbody td:nth-last-child(2) {
  text-align: center;
}

/* Student row deletion uses the same white outlined surface as the other row actions. */
#workspace :is(#roster-section, #bags-section, [data-storage-id="rules-table"], [data-storage-id="inventory-panel"]) .student-row-actions .student-row-delete {
  background: var(--ui-surface);
  --ui-button-outline: var(--ui-field-outline);
  border-width: 1px;
  border-style: solid;
}

#workspace :is(#roster-section, #bags-section, [data-storage-id="rules-table"], [data-storage-id="inventory-panel"]) .student-row-actions .student-row-delete:hover:not(:disabled) {
  background: var(--ui-surface);
  --ui-button-outline: var(--ui-field-outline-hover);
}

/* Compact student creation and shared class option surfaces. */
#manual-dialog {
  width: min(520px, calc(100vw - 48px));
  padding: 24px;
}

#manual-dialog .manual-field-card {
  gap: 8px;
}

#manual-dialog .manual-field-card:last-child {
  grid-column: 1 / -1;
}

#manual-dialog .manual-field-card label {
  margin: 0;
  font-weight: 600;
}

#manual-dialog .manual-field-card .field-optional {
  margin-left: 4px;
  font-size: 12px;
  font-weight: 400;
}

#manual-dialog h2 {
  font-size: 18px;
  line-height: 28px;
}

#manual-dialog textarea {
  min-height: 80px;
  height: 80px;
}

#manual-dialog .manual-message:empty {
  display: none;
}

#manual-dialog .manual-message {
  padding: 12px;
  margin: 12px 0 0;
  border: 0;
  border-radius: 8px;
  background: var(--ui-warning-container);
  color: var(--ui-warning);
  font-size: 12px;
  line-height: 20px;
}

#manual-dialog .manual-message[data-tone=error] {
  background: var(--ui-error-container);
  color: var(--ui-error);
}

#manual-dialog .manual-class-control {
  position: relative;
}

#manual-dialog #manual-class {
  padding-right: 40px;
}

#manual-dialog #manual-class-toggle {
  position: absolute;
  right: 4px;
  top: 4px;
  width: 32px;
  height: 32px;
  min-height: 32px;
  padding: 7px;
  border: 0;
  background: transparent;
  color: var(--ui-on-surface-variant);
}

#manual-dialog #manual-class-menu {
  position: fixed;
  inset: auto;
  display: flex;
  flex-direction: column;
  gap: 4px;
  width: max-content;
  max-width: min(400px, calc(100vw - 32px));
  box-sizing: border-box;
  padding: 4px;
  border: 1px solid var(--ui-field-outline);
  border-radius: 8px;
  background: var(--ui-surface);
  box-shadow: 0 8px 24px var(--ui-shadow-soft);
  overflow-x: hidden;
  overflow-y: auto;
  scroll-snap-type: y proximity;
  scroll-padding: 4px;
  z-index: 100;
}

#manual-dialog #manual-class-menu button {
  flex: none;
  width: 100%;
  height: auto;
  min-height: 36px;
  padding: 8px 12px;
  margin: 0;
  border: 0;
  border-radius: 4px;
  background: transparent;
  color: var(--ui-text);
  font-size: 14px;
  font-weight: 400;
  line-height: 20px;
  text-align: left;
  white-space: normal;
  overflow-wrap: anywhere;
  scroll-snap-align: start;
}

#manual-dialog #manual-class-menu button:is(.selected, :hover, :focus-visible) {
  background: var(--ui-option-highlight);
}

/* 1px border plus 1px inset gives a 2px focus treatment without moving the layout. */
#workspace .student-filter:is([open], :focus-within)>summary {
  border-color: var(--ui-primary) !important;
  box-shadow: inset 0 0 0 1px var(--ui-primary) !important;
}

#import-dialog #import-file-help {
  margin: 12px 0 0;
  line-height: 20px;
}

/* Disabled actions use neutral colors rather than faded brand or danger colors. */
body :is(button, .button):disabled:not(.hj-stepper-button) {
  --ui-button-outline: var(--ui-disabled-outline) !important;
  color: var(--ui-disabled-text) !important;
  background: var(--ui-disabled-surface) !important;
  border-color: var(--ui-disabled-outline) !important;
  box-shadow: none !important;
  opacity: 1 !important;
  cursor: default !important;
}

body :is(button, .button):disabled .ui-icon {
  color: inherit !important;
}

/* The reminder panel keeps its height with or without child reminders. */

/* Compact pagination keeps disabled arrows gray without a filled button surface. */

/* Match the table footer inset and align the page bottom with floating controls. */
#workspace :is(#roster-section, #bags-section, [data-storage-id="inventory-panel"])>.pagination {
  padding: 20px;
}

#workspace:not(:has(#home-section:not([hidden])))>main {
  padding-bottom: var(--ui-page-padding);
}

#workspace :is(#roster-section, #bags-section) .back-to-top {
  bottom: var(--ui-page-padding);
  right: var(--ui-page-padding);
}

/* Restore inline registration and a taller centered confirmation. */
#login-view .login-card {
  padding-bottom: 31px;
}

#login-view #login-submit {
  width: 50%;
  height: 44px;
  min-height: 44px;
  box-sizing: border-box;
  padding: 10px 16px;
  line-height: 20px;
  margin: 31px auto 0;
}

#login-view .login-school {
  transform: translateX(-8px);
}

/* Do not paint auto-sized roster columns before the saved or default layout is applied. */
#workspace :is(#roster-section, #bags-section, .management-data-table):not([data-columns-ready="true"]) .table-scroll table {
  visibility: hidden;
}

/* Shared text-first actions: highlight only the label and its trailing icon. */
body .text-icon-link,
#home-section #dashboard-baseline,
#home-section .dashboard-notice .text-icon-link,
#notices-dialog .dashboard-notice .text-icon-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 32px;
  padding: 4px 0;
  border: 0;
  border-radius: 4px;
  background: transparent;
  color: var(--ui-primary);
  font-size: 14px;
  font-weight: 400;
  line-height: 24px;
  text-decoration: none;
}

body .text-icon-link:hover,
body .text-icon-link:focus-visible {
  background: transparent;
  color: var(--ui-primary-hover);
  text-decoration: none;
}

body .text-icon-link>span {
  display: block;
}

body .text-icon-link>.ui-icon {
  display: block;
  width: 18px;
  height: 18px;
  flex: none;
  padding: 0;
  margin: 0;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* Choice-dialog reference: divide the introduction from the option cards. */
body dialog.choice-dialog .dialog-heading {
  position: relative;
  border-bottom: 0;
}

body dialog.choice-dialog .dialog-heading::after,
body dialog.choice-dialog>.dialog-actions::before {
  content: "";
  position: absolute;
  left: -4px;
  right: -4px;
  height: 1px;
  background: var(--ui-section-divider);
  pointer-events: none;
}

body dialog.choice-dialog .dialog-heading::after {
  bottom: 0;
}

body dialog.choice-dialog>.dialog-actions {
  position: relative;
  border-top: 0;
}

body dialog.choice-dialog>.dialog-actions::before {
  top: 0;
}

body dialog.choice-dialog .close .ui-icon {
  stroke-width: 2.2;
}

/* Bag-specific data uses the shared list layout without changing its actions. */

#workspace #bag-print-controls .selection-help {
  display: none;
}

/* Student statistics occupy the first toolbar row; data filters start below. */

body button.danger-filled:not(:disabled) {
  --ui-button-outline: var(--ui-error);
  border-color: var(--ui-error);
  background: var(--ui-error);
  color: var(--ui-on-primary);
}

body button.danger-filled:hover:not(:disabled) {
  background: color-mix(in srgb, var(--ui-error) 90%, black);
}






#import-dialog .import-year-card {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 12px;
  margin-bottom: 12px;
}

#import-dialog .import-year-card label {
  display: block;
  margin: 0;
  line-height: 20px;
  font-weight: 600;
}

#import-dialog .import-year-copy {
  min-width: 0;
}

#import-dialog #import-graduation-year-help {
  margin: 4px 0 0;
  color: var(--ui-on-surface-variant);
  font-size: 12px;
  line-height: 1.7;
}

/* Import preview categories use subtle surfaces and one click affordance. */
#import-dialog .preview-counts { gap: 24px; margin: 0 0 16px; }
#import-dialog .preview-metric {
  --metric-color: var(--ui-import-all-text);
  --metric-tint: var(--ui-import-all-surface);
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) 18px;
  align-items: center;
  gap: 12px;
  padding: 8px 16px;
  margin: 0;
  box-sizing: border-box;
  height: 56px;
  min-height: 56px;
  min-width: 0;
  border: 1px solid color-mix(in srgb, var(--metric-color) 18%, var(--metric-tint)) !important;
  border-radius: 8px;
  background: var(--metric-tint);
  color: var(--ui-text);
  text-align: left;
}
#import-dialog .preview-metric:hover {
  background: color-mix(in srgb, var(--metric-color) 5%, var(--metric-tint));
}
#import-dialog .preview-metric[data-preview-filter="added"] {
  --metric-color: var(--ui-import-added-text);
  --metric-tint: var(--ui-import-added-surface);
}
#import-dialog .preview-metric[data-preview-filter="updated"] {
  --metric-color: var(--ui-import-updated-text);
  --metric-tint: var(--ui-import-updated-surface);
}
#import-dialog .preview-metric[data-preview-filter="unchanged"] {
  --metric-color: var(--ui-import-unchanged-text);
  --metric-tint: var(--ui-import-unchanged-surface);
}
#import-dialog .preview-counts .preview-metric span { margin: 0; }
#import-dialog .preview-counts .preview-metric-heading { display: flex; align-items: center; justify-content: flex-end; grid-column: 2; grid-row: 1; }
#import-dialog .preview-counts .preview-metric-value { display: flex; align-items: baseline; gap: 4px; grid-column: 1; grid-row: 1; }
#import-dialog .preview-metric-value strong {
  font-size: 24px;
  line-height: 32px;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  color: var(--ui-text);
}
#import-dialog .preview-metric-value small { font-size: 14px; color: var(--ui-text); }
#import-dialog .preview-counts .preview-metric-link {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  align-self: center;
  grid-column: 3;
  grid-row: 1;
  padding: 0;
  width: auto;
  height: 18px;
  color: var(--ui-text);
}
#import-dialog .preview-counts .preview-metric-label {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 14px;
  line-height: 24px;
  font-weight: 600;
  color: var(--ui-text);
}
#import-dialog .preview-counts .metric-dot {
  display: inline-block;
  width: 8px;
  height: 8px;
  flex: none;
  border-radius: 50%;
  background: var(--metric-color);
}
#import-dialog .preview-metric-link > .ui-icon { width: 18px; height: 18px; }
#import-dialog .preview-table { max-height:none; overflow-x:auto; overflow-y:hidden; }
#import-dialog .data-table-body-viewport { scrollbar-gutter:stable; }
#import-dialog .preview-table .list-col-status { width:110px; }
#import-dialog .preview-table th .student-column-resize { top:9px; bottom:9px; }

#import-dialog .data-table-empty-state { padding:24px 16px; text-align:center; color:var(--ui-muted); }
#import-dialog .data-table-empty-state h2 { margin:0 0 12px; font-size:18px; line-height:1.5; font-weight:600; }
#import-dialog .data-table-empty-state p { margin:0; font-size:14px; line-height:1.6; }

#import-dialog .data-table-body-viewport .data-table-empty { height:100%; }
#import-dialog .data-table-body-viewport .data-table-empty td { vertical-align:middle; }

/* Preview footer follows the table without an empty message spacer. */
#import-dialog #import-error:empty {
  display: none;
}

#import-dialog:has(#preview-section:not([hidden])) > .dialog-actions {
  margin-top: 0;
  padding-top: 16px;
}

#import-dialog #preview-page-info {
  color: var(--ui-muted);
  font-size: 14px;
}

#import-dialog:has(#preview-section:not([hidden])) .dialog-heading {
  margin-bottom: 16px;
}

#import-dialog #preview-section > .pagination {
  margin: 0;
  padding: 12px 0;
  border-top: 0;
}

/* Match the import heading's visible spacing to the following card gap. */
#import-dialog .dialog-heading h2 {
  line-height: 24px;
}

#import-dialog .dialog-heading #preview-source {
  margin: 4px 0 0;
  line-height: 18px;
}

#import-dialog .dialog-heading {
  padding-bottom: 14px;
}

#import-dialog .preview-table .status-success {
  color: var(--ui-import-added-text);
  background: var(--ui-import-added-surface);
}

#import-dialog .preview-table .status-danger {
  color: var(--ui-import-updated-text);
  background: var(--ui-import-updated-surface);
}

#import-dialog .preview-table .status-warning {
  color: var(--ui-import-unchanged-text);
  background: var(--ui-import-unchanged-surface);
}

/* File selection separates filename display from the native chooser action. */
#import-dialog .import-file-selection {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-top: 12px;
}

#import-dialog .import-file-summary {
  display: flex;
  align-items: center;
  gap: 8px;
  flex: 1;
  min-width: 0;
  color: var(--ui-text);
}

#import-dialog .import-file-summary > .ui-icon {
  flex: none;
  width: 18px;
  height: 18px;
}

#import-dialog .file-name {
  min-width: 0;
  font-size: 14px;
  line-height: 22px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

#import-dialog :is(#choose-excel-file, .import-template-download) {
  flex: none;
  height: 40px;
  margin: 0;
  padding: 8px 16px;
  background: var(--ui-surface);
}

#import-dialog :is(#choose-excel-file, .import-template-download):hover:not(:disabled) {
  background: var(--ui-surface);
}

/* Standard dialog actions share one padding rule; icon controls and cards keep their own layout. */
body dialog :is(.dialog-actions, .buttons, .pagination) :is(button, .button):not(.roster-compact-pagination button),
body dialog > button:not(.close):not(.dialog-close),
#import-dialog :is(#choose-excel-file, .import-template-download) {
  padding: 8px 16px !important;
  min-height: 40px;
}


#import-dialog .preview-table .status-info {
  color: var(--ui-import-all-text);
  background: var(--ui-import-all-surface);
}

/* Preparation card headings and actions follow the same dimensions. */
#import-dialog .import-template-help {
  gap: 16px;
}

#import-dialog :is(.import-template-help strong, .import-file-card > strong, .import-year-card label) {
  display: block;
  margin: 0;
  font-size: 14px;
  font-weight: 600;
  line-height: 20px;
}

#import-dialog .import-template-download {
  box-sizing: border-box;
  gap: 8px;
  font-size: 14px;
  font-weight: 400;
  line-height: 22px;
  border-radius: 8px;
}

#import-dialog .import-template-download > .ui-icon {
  width: 18px;
  height: 18px;
}

#import-dialog .import-template-help p {
  margin: 4px 0 0;
  color: var(--ui-on-surface-variant);
  font-size: 12px;
  line-height: 20px;
}

#import-dialog #choose-excel-file {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
}

#import-dialog #choose-excel-file > .ui-icon {
  flex: none;
  width: 18px;
  height: 18px;
}

#import-dialog :is(.import-template-download, #import-graduation-year, #choose-excel-file) {
  box-sizing: border-box;
  width: 104px;
  flex-shrink: 0;
}

#import-dialog :is(.import-template-download, #choose-excel-file) {
  gap: 4px;
  white-space: nowrap;
}

#import-dialog #import-file-help {
  margin: 4px 0 0;
}

/* Shortcut editing follows the same card-dialog structure. */
body #shortcut-dialog .shortcut-dialog-heading {
  padding-right: 0;
}

body #shortcut-dialog .shortcut-dialog-heading h2 {
  padding-right: 36px;
}

#shortcut-dialog .shortcut-heading-description :is(p, #shortcut-progress) {
  font-size: 12px;
  line-height: 18px;
}

#shortcut-dialog #shortcut-options {
  box-sizing: border-box;
  padding: 16px;
  border-radius: 8px;
  background: var(--ui-surface-container-low);
}

#shortcut-dialog #shortcut-form > .dialog-actions {
  margin-top: 24px;
}

/* Student actions share the dialog's 24px content inset and neutral identity summary. */
#comparison-dialog, #student-void-dialog { padding:24px; }
#comparison-dialog:has(.student-detail-values) { width:min(560px, calc(100vw - 48px)); }
#comparison-dialog #comparison-identity { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:16px; padding:16px; margin:0 0 16px; border-radius:8px; background:var(--ui-surface-container-low); }
#comparison-dialog #comparison-identity>div { display:flex; flex-direction:column; gap:6px; margin:0; min-width:0; }
#comparison-dialog #comparison-identity dd { color:var(--ui-text); }
#comparison-dialog #comparison-instructions { margin:0 0 16px; font-size:12px; color:var(--ui-muted); }
#comparison-dialog .student-detail-values { display:grid; gap:16px; margin:0; }
#comparison-dialog .student-detail-values>div { display:grid; grid-template-columns:44px minmax(0,1fr); gap:16px; }
#comparison-dialog .student-detail-values dt { color:var(--ui-muted); }
#comparison-dialog .student-detail-values dd { margin:0; overflow-wrap:anywhere; white-space:pre-wrap; }
#comparison-dialog #comparison-reopen { padding:6px 10px; min-height:34px; margin:0 0 16px; }
#student-void-dialog .student-delete-description { margin:0 0 16px; font-size:14px; color:var(--ui-muted); line-height:1.6; }
#student-void-dialog .dialog-actions, #comparison-dialog .dialog-actions { justify-content:flex-end; }

/* Keep floating text legible where glass overlaps light surfaces. */
body.ambient-theme #workspace :is(#roster-section, #bags-section) .back-to-top.floating-theme-ink,
body.ambient-theme #student-demo-tools.floating-demo-tools.floating-theme-ink {
  color:var(--ui-primary);
}

/* Floating controls fade between light and theme-colored ink. */
#workspace :is(#roster-section, #bags-section) .back-to-top,
#student-demo-tools.floating-demo-tools {
  transition: color 240ms ease, background-color 240ms ease;
}
@media (prefers-reduced-motion: reduce) {
  #workspace :is(#roster-section, #bags-section) .back-to-top,
  #student-demo-tools.floating-demo-tools { transition: none; }
}


/* Dialog close controls never inherit the ordinary button's focus frame. */
body dialog :is(.close, .dialog-close),
body dialog :is(.close, .dialog-close):is(:hover, :active, :focus, :focus-visible) {
  border:0 !important;
  outline:none !important;
  box-shadow:none !important;
  background:transparent !important;
}
body dialog :is(.close, .dialog-close):is(:hover, :active, :focus-visible) {
  color:var(--ui-primary) !important;
}

/* Align the test-tool chooser close icon with the shared dialog header. */
body #demo-tools-dialog .dialog-heading { position: relative; }
body #demo-tools-dialog .dialog-heading::after { left: 0; right: 0; }
body #demo-tools-dialog .dialog-heading .close {
  top:-6px;right:-6px;width:32px;height:32px;min-width:32px;min-height:32px;padding:6px;
}
body #demo-tools-dialog .dialog-heading .close .ui-icon {width:20px;height:20px;}

/* Management filter surfaces and record tables share a light outline. */
#workspace :is(:is(#roster-toolbar, [data-student-control="roster-toolbar"]),#bags-toolbar) {
  border:1px solid var(--ui-border) !important;
  border-bottom:0 !important;
}
#workspace :is(#roster-sticky-controls,#bags-sticky-controls) {
  border:1px solid var(--ui-border) !important;
  border-top:0 !important;
}
#workspace :is(#roster-section,#bags-section,[data-storage-id="inventory-panel"]) {
  border:1px solid var(--ui-border) !important;
}

/* Outline the field cards and filter choices used by student and bag management. */
#manual-dialog :is(.manual-year-card, .manual-field-card),
#import-dialog :is(.import-template-help, .import-year-card, .import-file-card),
#batch-dialog .batch-setting-card,
#workspace :is(#status-filter, #bag-status-filter) .status-choice {
  border:1px solid var(--ui-border) !important;
}
#workspace :is(#status-filter, #bag-status-filter) .status-choice.selected {
  border-color:var(--ui-outline-selected) !important;
}

/* Bag scope descriptions remain compact within the three option cards. */
#workspace #bag-status-filter .status-scope-options .status-choice small {
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}

#bag-details-fields .bag-verification-card dd {display:flex;align-items:center;justify-content:flex-start;gap:8px;}
#bag-details-fields .bag-code-copy {display:inline-flex;align-items:center;justify-content:center;width:28px;height:28px;min-height:0;padding:5px;border:0;background:transparent;color:var(--ui-primary);}
#bag-details-fields .bag-code-copy .ui-icon {width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round;}

/* Floating utilities retain a visible outline through the global button reset. */
#student-demo-tools.floating-demo-tools,
#workspace :is(#roster-section, #bags-section) .back-to-top {
  --ui-button-outline:var(--ui-field-outline);
  border:1px solid var(--ui-field-outline)!important;
}
#student-demo-tools.floating-demo-tools:hover:not(:disabled),
#workspace :is(#roster-section, #bags-section) .back-to-top:hover:not(:disabled) {
  border-color:var(--ui-field-outline-hover)!important;
}

/* A tinted warning icon anchors both pending summaries and dashboard notices. */
.pending-warning-icon {display:inline-flex;align-items:center;justify-content:center;flex:0 0 28px;width:28px;height:28px;border-radius:6px;background:var(--ui-warning-container);color:var(--ui-warning);}
.pending-warning-icon .ui-icon {width:18px;height:18px;}
:is(#home-section,#notices-dialog) .dashboard-notice {display:flex;align-items:center;gap:12px;}
:is(#home-section,#notices-dialog) .dashboard-notice > div {flex:1;min-width:0;}

/* Floating utility outlines remain fixed across ambient themes and states. */
body #student-demo-tools.floating-demo-tools,
body #student-demo-tools.floating-demo-tools:is(:hover,:active,:focus,:focus-visible,:disabled),
body #workspace :is(#roster-section,#bags-section) .back-to-top,
body #workspace :is(#roster-section,#bags-section) .back-to-top:is(:hover,:active,:focus,:focus-visible,:disabled) {
  --ui-button-outline:#d6e2f3;
  border:1px solid #d6e2f3!important;
}
/* One shared menu surface for class and intake selection. */
body .shared-option-menu {
  position:fixed;inset:auto;display:flex;flex-direction:column;gap:4px;width:max-content;
  max-width:min(480px,calc(100vw - 32px));box-sizing:border-box;padding:4px;
  border:1px solid var(--ui-field-outline);border-radius:8px;background:var(--ui-surface);
  box-shadow:0 8px 24px var(--ui-shadow-soft);overflow-x:hidden;overflow-y:auto;z-index:100;
}
body .shared-option-menu .shared-option {
  flex:none;width:100%;min-height:36px;margin:0;padding:8px 12px;border:0;border-radius:4px;
  background:transparent;color:var(--ui-text);font-size:14px;font-weight:400;line-height:20px;text-align:left;
}
body .shared-option-menu .shared-option:is(.selected,:hover,:focus-visible) {background:var(--ui-option-highlight);box-shadow:none!important;outline:none;}
body .shared-option-menu .shared-option.selected:is(:hover,:focus-visible) {background:var(--ui-option-selected-hover);}





/* All other list actions follow the student-management button appearance. */
#workspace :is(#bags-section, .storage-content, #print-history-table) tbody td :is(button, a.button),
body.storage-page .storage-content tbody td :is(button, a.button),
body dialog tbody td :is(button, a.button) {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  height: 32px;
  min-height: 32px;
  min-width: 44px;
  padding: 5px 8px;
  font-size: 12px;
  font-weight: 400;
  line-height: 20px;
  text-align: center;
  border: 1px solid var(--ui-field-outline);
  --ui-button-outline: var(--ui-field-outline);
  border-radius: 8px;
  background: var(--ui-surface);
  color: var(--ui-primary);
}
#workspace :is(#bags-section, .storage-content, #print-history-table) tbody td :is(button, a.button):hover:not(:disabled),
body.storage-page .storage-content tbody td :is(button, a.button):hover:not(:disabled),
body dialog tbody td :is(button, a.button):hover:not(:disabled) {
  --ui-button-outline: var(--ui-field-outline-hover);
  background: var(--ui-surface-container-low);
}
#workspace :is(#bags-section, .storage-content, #print-history-table) tbody td button:disabled,
body.storage-page .storage-content tbody td button:disabled,
body dialog tbody td button:disabled {
  opacity: .5;
  cursor: default;
}

/* The archive filter draws its outline and shadow on the outer card only. */
#workspace .archive-filter-card {
  border: 1px solid var(--ui-border);
  border-radius: 12px;
  background: var(--ui-surface);
  box-shadow: 5px 7px 14px var(--ui-shadow-soft);
}
#workspace .archive-filter-card > :is(#roster-toolbar, [data-student-control="roster-toolbar"], #student-filters, [data-student-control="student-filters"]) {
  border: 0 !important;
  box-shadow: none !important;
}

#workspace [data-storage-id="inventory-panel"].management-data-table,
body.storage-page [data-storage-id="inventory-panel"].management-data-table {
  box-shadow: 5px 7px 14px var(--ui-shadow-soft);
}

/* Table controllers add table-card; override the earlier shadow reset. */
body :is(.table-card, .management-data-table) {
  box-shadow: 5px 7px 14px var(--ui-shadow-soft) !important;
}