/*
 * SchulTool design system foundation
 *
 * Scope: native SchulTool shell only. Embedded SchulMap, PLANBAR and Finance
 * applications deliberately keep their own visual systems.
 *
 * Components adopt these tokens incrementally. Established feature styles keep
 * precedence until their component family is explicitly migrated.
 */
:root {
  color-scheme: light;

  --st-font-sans: Inter, ui-sans-serif, system-ui, -apple-system,
    BlinkMacSystemFont, "Segoe UI", sans-serif;

  --st-color-canvas: #f5f7fb;
  --st-color-surface: #fff;
  --st-color-surface-subtle: #fafaf7;
  --st-color-text: #182033;
  --st-color-text-strong: #172033;
  --st-color-text-muted: #64748b;
  --st-color-border: #dbe4f0;
  --st-color-border-strong: #cbd5e1;
  --st-color-primary: #0f766e;
  --st-color-primary-hover: #115e59;
  --st-color-primary-disabled: #b8cfca;
  --st-color-primary-soft: #e9f5f2;
  --st-color-primary-text: #0f766e;
  --st-color-danger: #d95d52;
  --st-color-danger-hover: #c94d43;
  --st-color-danger-soft: #fff5f2;
  --st-color-danger-text: #b6423a;
  --st-color-success: #287a52;
  --st-color-success-soft: #edf8f1;
  --st-color-success-border: #b8ddc7;
  --st-color-warning: #9a6700;
  --st-color-warning-soft: #fff8e7;
  --st-color-warning-border: #ecd59a;
  --st-color-control: #fafaf7;
  --st-color-control-hover: #f1f5f2;
  --st-color-control-border: #bfcac5;
  --st-color-control-text: #34443f;
  --st-color-field: #fffdf8;
  --st-color-field-placeholder: #99a39f;
  --st-color-field-disabled: #f1f2ee;
  --st-color-field-error: #d95d52;

  --st-radius-control: 8px;
  --st-radius-control-compact: 6px;
  --st-radius-card: 24px;
  --st-radius-pill: 999px;

  --st-control-height: 38px;
  --st-control-height-compact: 32px;
  --st-space-control-y: 9px;
  --st-space-control-x: 15px;
  --st-space-control-gap: 8px;
  --st-space-card: 22px;

  --st-shadow-card: 0 14px 34px rgba(15, 23, 42, .06);
  --st-shadow-dialog: 0 24px 70px rgba(15, 23, 42, .24);
  --st-overlay-dialog: rgba(15, 23, 42, .62);
}

/* Button family v0.1 — normal and compact text buttons only. */
.btn,
.miniBtn {
  appearance: none;
  border-style: solid;
  border-color: transparent;
  font-family: inherit;
  line-height: 1.1;
  letter-spacing: -.01em;
  transition:
    background-color .15s ease,
    border-color .15s ease,
    color .15s ease,
    box-shadow .15s ease;
}

.btn {
  min-height: var(--st-control-height);
  padding: var(--st-space-control-y) var(--st-space-control-x);
  border-width: 1.5px;
  border-radius: var(--st-radius-control);
  background: var(--st-color-primary);
  color: var(--st-color-surface);
  font-size: .86rem;
  font-weight: 800;
}

.btn.primary {
  border-color: var(--st-color-primary);
  background: var(--st-color-primary);
  color: var(--st-color-surface);
}

.btn.secondary {
  border-color: var(--st-color-control-border);
  background: var(--st-color-control);
  color: var(--st-color-control-text);
}

.btn.danger {
  border-color: var(--st-color-danger);
  background: var(--st-color-danger);
  color: var(--st-color-surface);
}

.miniBtn {
  min-height: var(--st-control-height-compact);
  padding: 7px 10px;
  border-width: 1px;
  border-radius: var(--st-radius-control-compact);
  background: var(--st-color-primary);
  color: var(--st-color-surface);
  font-size: .78rem;
  font-weight: 850;
}

.miniBtn.secondary {
  border-color: var(--st-color-control-border);
  background: var(--st-color-control);
  color: var(--st-color-control-text);
}

.miniBtn.danger {
  border-color: #e9afa9;
  background: var(--st-color-danger-soft);
  color: var(--st-color-danger-text);
}

.btn:not(:disabled):hover,
.miniBtn:not(:disabled):hover {
  border-color: var(--st-color-primary-hover);
  background: var(--st-color-primary-hover);
  color: var(--st-color-surface);
}

.btn.secondary:not(:disabled):hover,
.miniBtn.secondary:not(:disabled):hover {
  border-color: #8ea19a;
  background: var(--st-color-control-hover);
  color: #263630;
}

.btn.danger:not(:disabled):hover {
  border-color: var(--st-color-danger-hover);
  background: var(--st-color-danger-hover);
}

.miniBtn.danger:not(:disabled):hover {
  border-color: var(--st-color-danger);
  background: #ffebe7;
  color: #a9342d;
}

.btn:focus-visible,
.miniBtn:focus-visible {
  outline: 3px solid rgba(15, 118, 110, .22);
  outline-offset: 3px;
  border-color: var(--st-color-primary);
}

.btn:disabled,
.miniBtn:disabled,
.btn[disabled],
.miniBtn[disabled] {
  border-color: var(--st-color-primary-disabled);
  background: var(--st-color-primary-disabled);
  color: #66746f;
  box-shadow: none;
  opacity: 1;
}

.btn.secondary:disabled,
.miniBtn.secondary:disabled,
.btn.secondary[disabled],
.miniBtn.secondary[disabled] {
  border-color: #d8ddd9;
  background: #f1f2ee;
  color: #99a39f;
}

/* Modal close family v0.1 — visible icon, accessible text stays in the DOM. */
.sectionHeader > button.miniBtn.secondary[data-close-modal],
.sectionHeader > button.miniBtn.secondary[data-close-competency-modal],
.sectionHeader > button.miniBtn.secondary[data-close-assignment-template-modal],
.sectionHeader > button.miniBtn.secondary[data-close-assignment-modal],
.sectionHeader button.miniBtn.secondary[data-close-assignment-page-modal],
.sectionHeader > button.miniBtn.secondary[data-close-tenant-modal],
.sectionHeader > button.miniBtn.secondary[data-close-single-person-modal],
.sectionHeader > button.miniBtn.secondary[data-close-group-message-modal],
.sectionHeader > button.miniBtn.secondary[data-close-bulk-invite-modal],
.sectionHeader > button.miniBtn.secondary[data-close-print-list-modal],
.sectionHeader > button.miniBtn.secondary[data-close-group-modal],
.sectionHeader > button.miniBtn.secondary[data-close-class-modal],
.sectionHeader > button.miniBtn.secondary[data-close-level-modal],
.sectionHeader > button.miniBtn.secondary[data-close-person-modal],
.sectionHeader > button.miniBtn.secondary[data-close-user-profile-modal],
.sectionHeader > button.miniBtn.secondary[data-close-incomplete-profiles-modal],
.sectionHeader > button.miniBtn.secondary[data-close-notepad-modal],
.sectionHeader > button.miniBtn.secondary[data-close-calendar-modal],
.sectionHeader button.miniBtn.secondary[data-close-lesson-modal],
.sectionHeader > button.miniBtn.secondary[data-close-teaching-editor],
.sectionHeader > button.miniBtn.secondary[data-close-subject-plan],
.sectionHeader > button.miniBtn.secondary[data-close-topic-block],
.sectionHeader > button.miniBtn.secondary[data-close-attendance],
.sectionHeader > button.miniBtn.secondary[data-close-behavior],
.sectionHeader > button.miniBtn.secondary[data-close-absence-analytics],
.sectionHeader > button.miniBtn.secondary[data-close-student-record] {
  width: 40px;
  min-width: 40px;
  height: 40px;
  min-height: 40px;
  padding: 0;
  border-radius: var(--st-radius-control);
  color: transparent;
  font-size: 0;
  display: inline-grid;
  place-items: center;
}

.sectionHeader > button.miniBtn.secondary[data-close-modal]::before,
.sectionHeader > button.miniBtn.secondary[data-close-competency-modal]::before,
.sectionHeader > button.miniBtn.secondary[data-close-assignment-template-modal]::before,
.sectionHeader > button.miniBtn.secondary[data-close-assignment-modal]::before,
.sectionHeader button.miniBtn.secondary[data-close-assignment-page-modal]::before,
.sectionHeader > button.miniBtn.secondary[data-close-tenant-modal]::before,
.sectionHeader > button.miniBtn.secondary[data-close-single-person-modal]::before,
.sectionHeader > button.miniBtn.secondary[data-close-group-message-modal]::before,
.sectionHeader > button.miniBtn.secondary[data-close-bulk-invite-modal]::before,
.sectionHeader > button.miniBtn.secondary[data-close-print-list-modal]::before,
.sectionHeader > button.miniBtn.secondary[data-close-group-modal]::before,
.sectionHeader > button.miniBtn.secondary[data-close-class-modal]::before,
.sectionHeader > button.miniBtn.secondary[data-close-level-modal]::before,
.sectionHeader > button.miniBtn.secondary[data-close-person-modal]::before,
.sectionHeader > button.miniBtn.secondary[data-close-user-profile-modal]::before,
.sectionHeader > button.miniBtn.secondary[data-close-incomplete-profiles-modal]::before,
.sectionHeader > button.miniBtn.secondary[data-close-notepad-modal]::before,
.sectionHeader > button.miniBtn.secondary[data-close-calendar-modal]::before,
.sectionHeader button.miniBtn.secondary[data-close-lesson-modal]::before,
.sectionHeader > button.miniBtn.secondary[data-close-teaching-editor]::before,
.sectionHeader > button.miniBtn.secondary[data-close-subject-plan]::before,
.sectionHeader > button.miniBtn.secondary[data-close-topic-block]::before,
.sectionHeader > button.miniBtn.secondary[data-close-attendance]::before,
.sectionHeader > button.miniBtn.secondary[data-close-behavior]::before,
.sectionHeader > button.miniBtn.secondary[data-close-absence-analytics]::before,
.sectionHeader > button.miniBtn.secondary[data-close-student-record]::before {
  content: '×';
  color: var(--st-color-primary-text);
  font-size: 1.45rem;
  font-weight: 500;
  line-height: 1;
}

.sectionHeader button.miniBtn.secondary[data-close-modal]:hover::before,
.sectionHeader button.miniBtn.secondary[data-close-competency-modal]:hover::before,
.sectionHeader button.miniBtn.secondary[data-close-assignment-template-modal]:hover::before,
.sectionHeader button.miniBtn.secondary[data-close-assignment-modal]:hover::before,
.sectionHeader button.miniBtn.secondary[data-close-assignment-page-modal]:hover::before,
.sectionHeader button.miniBtn.secondary[data-close-tenant-modal]:hover::before,
.sectionHeader button.miniBtn.secondary[data-close-single-person-modal]:hover::before,
.sectionHeader button.miniBtn.secondary[data-close-group-message-modal]:hover::before,
.sectionHeader button.miniBtn.secondary[data-close-bulk-invite-modal]:hover::before,
.sectionHeader button.miniBtn.secondary[data-close-print-list-modal]:hover::before,
.sectionHeader button.miniBtn.secondary[data-close-group-modal]:hover::before,
.sectionHeader button.miniBtn.secondary[data-close-class-modal]:hover::before,
.sectionHeader button.miniBtn.secondary[data-close-level-modal]:hover::before,
.sectionHeader button.miniBtn.secondary[data-close-person-modal]:hover::before,
.sectionHeader button.miniBtn.secondary[data-close-user-profile-modal]:hover::before,
.sectionHeader button.miniBtn.secondary[data-close-incomplete-profiles-modal]:hover::before,
.sectionHeader button.miniBtn.secondary[data-close-notepad-modal]:hover::before,
.sectionHeader button.miniBtn.secondary[data-close-calendar-modal]:hover::before,
.sectionHeader button.miniBtn.secondary[data-close-lesson-modal]:hover::before,
.sectionHeader button.miniBtn.secondary[data-close-teaching-editor]:hover::before,
.sectionHeader button.miniBtn.secondary[data-close-subject-plan]:hover::before,
.sectionHeader button.miniBtn.secondary[data-close-topic-block]:hover::before,
.sectionHeader button.miniBtn.secondary[data-close-attendance]:hover::before,
.sectionHeader button.miniBtn.secondary[data-close-behavior]:hover::before,
.sectionHeader button.miniBtn.secondary[data-close-absence-analytics]:hover::before,
.sectionHeader button.miniBtn.secondary[data-close-student-record]:hover::before {
  color: var(--st-color-surface);
}

/* Form field family v0.1 — standard native fields only. */
body :is(
  input:not([type]),
  input[type='text'],
  input[type='email'],
  input[type='password'],
  input[type='search'],
  input[type='tel'],
  input[type='url'],
  input[type='number'],
  input[type='date'],
  input[type='time'],
  input[type='datetime-local'],
  input[type='month'],
  input[type='week'],
  select,
  textarea
):not(.stFieldOptOut) {
  border: 1.5px solid var(--st-color-control-border);
  border-radius: var(--st-radius-control);
  background-color: var(--st-color-field);
  color: var(--st-color-text);
  font-family: inherit;
  transition:
    border-color .15s ease,
    background-color .15s ease,
    box-shadow .15s ease;
}

body :is(
  input:not([type]),
  input[type='text'],
  input[type='email'],
  input[type='password'],
  input[type='search'],
  input[type='tel'],
  input[type='url'],
  input[type='number'],
  input[type='date'],
  input[type='time'],
  input[type='datetime-local'],
  input[type='month'],
  input[type='week'],
  select
):not(.stFieldOptOut) {
  min-height: 42px;
}

body :is(input, textarea):not(.stFieldOptOut)::placeholder {
  color: var(--st-color-field-placeholder);
  opacity: 1;
}

body :is(
  input:not([type]),
  input[type='text'],
  input[type='email'],
  input[type='password'],
  input[type='search'],
  input[type='tel'],
  input[type='url'],
  input[type='number'],
  input[type='date'],
  input[type='time'],
  input[type='datetime-local'],
  input[type='month'],
  input[type='week'],
  select,
  textarea
):not(.stFieldOptOut):focus {
  outline: 0;
  border-color: var(--st-color-primary);
  box-shadow: 0 0 0 3px rgba(15, 118, 110, .15);
}

body :is(input, select, textarea):not(.stFieldOptOut):disabled {
  border-color: #d8ddd9;
  background-color: var(--st-color-field-disabled);
  color: #99a39f;
  opacity: 1;
}

body :is(input, select, textarea):not(.stFieldOptOut)[aria-invalid='true'],
body :is(input, select, textarea):not(.stFieldOptOut).invalid {
  border-color: var(--st-color-field-error);
  background-color: var(--st-color-danger-soft);
  box-shadow: 0 0 0 3px rgba(217, 93, 82, .1);
}

body input[type='file']:not(.stFieldOptOut) {
  min-height: 44px;
  padding: 5px;
  border: 1.5px dashed #9fb0a9;
  border-radius: var(--st-radius-control);
  background: var(--st-color-control);
  color: var(--st-color-text-muted);
  font: inherit;
  font-size: .82rem;
}

body input[type='file']:not(.stFieldOptOut)::file-selector-button {
  min-height: 32px;
  margin-right: 10px;
  padding: 6px 11px;
  border: 1px solid var(--st-color-primary);
  border-radius: var(--st-radius-control-compact);
  background: var(--st-color-primary-soft);
  color: var(--st-color-primary-text);
  font: inherit;
  font-size: .78rem;
  font-weight: 800;
  cursor: pointer;
}

body input[type='file']:not(.stFieldOptOut):focus-visible {
  outline: 0;
  border-color: var(--st-color-primary);
  box-shadow: 0 0 0 3px rgba(15, 118, 110, .15);
}

/* Modal family v0.1 — normal native dialogs, deliberate special cards excluded. */
.modalBackdrop {
  background: var(--st-overlay-dialog);
  padding: 24px;
}

.modalCard:not(.startupLoadingCard):not(.financeWorkflowHelpCard):not(.assignmentPageModalCard) {
  border: 1px solid #a9c9c3;
  border-radius: 20px;
  background: var(--st-color-surface);
  box-shadow: var(--st-shadow-dialog);
}

.modalCard:not(.startupLoadingCard):not(.financeWorkflowHelpCard):not(.assignmentPageModalCard)
  > .sectionHeader:first-child {
  position: relative;
  margin: -22px -22px 22px;
  padding: 22px 24px 20px 28px;
  overflow: hidden;
  border-bottom: 1px solid #b7d8d1;
  border-radius: 19px 19px 0 0;
  background: linear-gradient(120deg, #d9efea 0%, #e8f5f1 58%, #f7fbf8 100%);
}

.modalCard:not(.startupLoadingCard):not(.financeWorkflowHelpCard):not(.assignmentPageModalCard)
  > .sectionHeader:first-child::before {
  content: '';
  position: absolute;
  inset: 0 auto 0 0;
  width: 5px;
  background: var(--st-color-primary);
}

.modalCard:not(.startupLoadingCard):not(.financeWorkflowHelpCard):not(.assignmentPageModalCard)
  > .sectionHeader:first-child .eyebrow {
  color: var(--st-color-primary);
}

.modalCard:not(.startupLoadingCard):not(.financeWorkflowHelpCard):not(.assignmentPageModalCard)
  > .sectionHeader:first-child h2 {
  color: #153c38;
}

.modalCard:not(.startupLoadingCard):not(.financeWorkflowHelpCard):not(.assignmentPageModalCard)
  > .sectionHeader:first-child .helper {
  color: #4f6f69;
}

@media (max-width: 640px) {
  .modalBackdrop {
    padding: 12px;
  }

  .modalCard:not(.startupLoadingCard):not(.financeWorkflowHelpCard):not(.assignmentPageModalCard) {
    max-height: calc(100vh - 24px);
    border-radius: 14px;
  }

  .modalCard:not(.startupLoadingCard):not(.financeWorkflowHelpCard):not(.assignmentPageModalCard)
    > .sectionHeader:first-child {
    padding: 18px 18px 17px 22px;
    border-radius: 13px 13px 0 0;
  }
}

/* Card family v0.1 — standard cockpit cards, hero and feature modules excluded. */
.cockpit .card:not(.cockpitHero) {
  border: 1px solid #d4dfdb;
  border-top: 3px solid var(--st-color-primary);
  border-radius: 18px;
  background: var(--st-color-surface-subtle);
  box-shadow: 0 8px 24px rgba(19, 43, 37, .06);
}

.cockpit .card:not(.cockpitHero) > .sectionHeader {
  margin-bottom: 15px;
}

.cockpit .card:not(.cockpitHero) > .sectionHeader .eyebrow {
  color: var(--st-color-primary);
}

.cockpitModule {
  border-color: #d4dfdb;
  border-radius: 10px;
  background: var(--st-color-control);
  transition:
    transform .15s ease,
    border-color .15s ease,
    background-color .15s ease,
    box-shadow .15s ease;
}

.cockpitModule > span {
  width: 34px;
  height: 34px;
  border-radius: var(--st-radius-control);
  display: grid;
  place-items: center;
  background: var(--st-color-primary-soft);
  color: var(--st-color-primary-text);
}

.cockpitModule:hover {
  transform: translateY(-2px);
  border-color: #77a99f;
  background: #f5faf8;
  box-shadow: 0 10px 24px rgba(15, 118, 110, .12);
}

.cockpitAction,
.cockpitMessage {
  border-color: #d8e1dd;
  background: var(--st-color-surface);
}

@media (max-width: 620px) {
  .cockpit .card:not(.cockpitHero) {
    border-radius: 16px;
  }
}

/* Tabs, filters and search family v0.1 — native, non-specialised controls. */
.tabBar,
.teachingTabs,
.notificationTabs {
  display: flex;
  align-items: flex-end;
  gap: 4px;
  max-width: 100%;
  overflow-x: auto;
  overflow-y: hidden;
  border-bottom: 1px solid #dbe3e0;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
}

.tabBar::-webkit-scrollbar,
.teachingTabs::-webkit-scrollbar,
.notificationTabs::-webkit-scrollbar {
  display: none;
}

.tabBar .miniBtn,
.teachingTabs .miniBtn,
.notificationTabs .miniBtn {
  position: relative;
  flex: 0 0 auto;
  min-height: 42px;
  padding: 10px 14px 11px;
  border: 0;
  border-radius: 0;
  background: transparent;
  color: #687572;
  box-shadow: none;
  white-space: nowrap;
}

.tabBar .miniBtn:not(.secondary),
.teachingTabs .miniBtn:not(.secondary),
.notificationTabs .miniBtn:not(.secondary) {
  background: transparent;
  color: var(--st-color-primary);
}

.tabBar .miniBtn:not(.secondary)::after,
.teachingTabs .miniBtn:not(.secondary)::after,
.notificationTabs .miniBtn:not(.secondary)::after {
  content: '';
  position: absolute;
  right: 11px;
  bottom: -1px;
  left: 11px;
  height: 3px;
  border-radius: 3px 3px 0 0;
  background: var(--st-color-primary);
}

.tabBar .miniBtn:hover,
.teachingTabs .miniBtn:hover,
.notificationTabs .miniBtn:hover,
.tabBar .miniBtn.secondary:hover,
.teachingTabs .miniBtn.secondary:hover,
.notificationTabs .miniBtn.secondary:hover {
  border-color: transparent;
  background: var(--st-color-primary-soft);
  color: var(--st-color-primary-text);
}

.tabBar .miniBtn:focus-visible,
.teachingTabs .miniBtn:focus-visible,
.notificationTabs .miniBtn:focus-visible {
  outline-offset: -3px;
}

.teachingToolbar,
.directoryFilters {
  align-items: end;
  gap: 10px;
  padding: 14px;
  border: 1px solid #dfe6e2;
  border-radius: 12px;
  background: var(--st-color-surface-subtle);
}

.directoryFilters label {
  color: #596966;
  font-size: .76rem;
  font-weight: 800;
}

.teachingSearch {
  min-height: 42px;
  gap: 8px;
  padding: 0 12px;
  border: 1px solid var(--st-color-control-border);
  border-radius: var(--st-radius-control);
  background: var(--st-color-field);
  color: #61736f;
  transition: border-color .15s ease, box-shadow .15s ease;
}

.teachingSearch:focus-within {
  border-color: var(--st-color-primary);
  box-shadow: 0 0 0 3px rgba(15, 118, 110, .15);
}

.teachingSearch input {
  min-height: 40px;
  border: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}

.teachingToolbar select,
.directoryFilters :is(input[type='search'], select) {
  min-height: 42px;
}

.directoryFilters .miniBtn {
  min-height: 42px;
  align-self: end;
  padding-inline: 14px;
}

@media (max-width: 720px) {
  .tabBar,
  .teachingTabs,
  .notificationTabs {
    margin-right: -2px;
    padding-right: 16px;
  }

  .teachingToolbar {
    grid-template-columns: 1fr;
  }

  .directoryFilters {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .directoryFilters label:first-child,
  .directoryFilters .miniBtn {
    grid-column: 1 / -1;
  }
}

@media (max-width: 460px) {
  .directoryFilters {
    grid-template-columns: 1fr;
  }

  .directoryFilters label:first-child,
  .directoryFilters .miniBtn {
    grid-column: auto;
  }
}

/* Page header v0.1 — explicitly opted-in native app views only. */
.appView > .pageHeader {
  align-items: flex-start;
  gap: 20px;
  margin: -4px -4px 18px;
  padding: 19px 20px;
  border: 1px solid #dce5e2;
  border-radius: 15px;
  background: var(--st-color-surface-subtle);
}

.appView > .pageHeader > div:first-child {
  min-width: 0;
}

.appView > .pageHeader .eyebrow {
  margin: 0 0 5px;
  color: var(--st-color-primary-text);
  font-size: .66rem;
  font-weight: 900;
  letter-spacing: .14em;
  opacity: 1;
}

.appView > .pageHeader h2 {
  margin: 0 0 5px;
  color: var(--st-color-text-strong);
  font-size: 1.45rem;
  letter-spacing: -.03em;
}

.appView > .pageHeader :is(p:not(.eyebrow), .helper) {
  max-width: 660px;
  margin: 0;
  color: var(--st-color-text-muted);
  font-size: .86rem;
  line-height: 1.45;
}

.appView > .pageHeader > :is(button, .actionRow) {
  flex: 0 0 auto;
}

.appView > .pageHeader > .actionRow {
  justify-content: flex-end;
  margin: 0;
}

.appView > .pageHeader .btn {
  margin-top: 0;
}

@media (max-width: 760px) {
  .appView > .pageHeader {
    display: block;
    margin: -2px -2px 15px;
    padding: 17px;
  }

  .appView > .pageHeader h2 {
    font-size: 1.25rem;
  }

  .appView > .pageHeader > :is(button, .actionRow) {
    width: 100%;
    margin-top: 14px;
  }

  .appView > .pageHeader > button {
    display: inline-flex;
    width: auto;
  }

  .appView > .pageHeader > .actionRow {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .appView > .pageHeader > .actionRow .btn {
    width: 100%;
    justify-content: center;
  }
}

@media (max-width: 460px) {
  .appView > .pageHeader > .actionRow {
    grid-template-columns: 1fr;
  }
}

/* Main header v0.1 — compact global identity and session controls. */
.hero {
  position: relative;
  overflow: hidden;
  min-height: 92px;
  padding: 20px 24px;
  background: linear-gradient(112deg, #10263a 0%, #123c40 53%, var(--st-color-primary) 100%);
}

.hero::after {
  content: '';
  position: absolute;
  top: -105px;
  right: -60px;
  width: 360px;
  height: 260px;
  border: 1px solid rgba(255, 255, 255, .08);
  border-radius: 50%;
  box-shadow:
    0 0 0 40px rgba(255, 255, 255, .025),
    0 0 0 80px rgba(255, 255, 255, .018);
  pointer-events: none;
}

.hero .inner {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 30px;
}

.heroBrand {
  display: flex;
  align-items: center;
  gap: 14px;
  flex: 0 0 auto;
}

.heroMark {
  width: 48px;
  height: 48px;
  border: 1px solid rgba(255, 255, 255, .22);
  border-radius: 11px;
  display: grid;
  place-items: center;
  background: rgba(255, 255, 255, .1);
  color: var(--st-color-surface);
  font-size: 1.05rem;
  font-weight: 950;
  letter-spacing: -.03em;
}

.heroBrand .eyebrow {
  margin: 0 0 3px;
  color: #9ed7cf;
  font-size: .62rem;
  opacity: 1;
}

.heroBrand h1 {
  margin: 0;
  color: var(--st-color-surface);
  font-size: 1.58rem;
  line-height: 1;
  letter-spacing: -.035em;
}

.heroSessionLine {
  justify-content: flex-end;
  gap: 13px;
  min-width: 0;
}

.heroSessionLine > p {
  color: #c0d7d3;
  font-size: .78rem;
  text-align: right;
}

.heroSessionLine > p strong {
  color: var(--st-color-surface);
  font-size: .9rem;
}

.heroRoleBadge {
  margin-left: 7px;
  padding: 4px 7px;
  border-color: rgba(158, 215, 207, .28);
  border-radius: var(--st-radius-control-compact);
  background: rgba(15, 118, 110, .2);
  color: #bce7e1;
  font-size: .66rem;
}

.heroLogout {
  width: 40px;
  height: 40px;
  border-color: rgba(255, 255, 255, .22);
  border-radius: 9px;
  background: rgba(255, 255, 255, .09);
}

.heroLogout:hover {
  background: rgba(255, 255, 255, .17);
}

.heroLogout:focus-visible {
  outline: 3px solid rgba(158, 215, 207, .42);
  outline-offset: 3px;
}

body.mobileMode .hero {
  min-height: 66px;
  padding: 12px 15px;
}

body.mobileMode .heroMark {
  width: 38px;
  height: 38px;
  border-radius: 9px;
  font-size: .86rem;
}

body.mobileMode .heroBrand {
  gap: 10px;
}

body.mobileMode .heroBrand .eyebrow {
  margin-bottom: 2px;
  font-size: .5rem;
}

body.mobileMode .heroBrand h1 {
  margin: 0;
  font-size: 1.2rem;
}

body.mobileMode .heroSessionLine > p {
  display: none;
}

body.mobileMode .heroLogout {
  width: 36px;
  height: 36px;
}

@media (max-width: 620px) {
  .hero {
    min-height: 66px;
    padding: 12px 15px;
  }

  .heroMark {
    width: 38px;
    height: 38px;
    border-radius: 9px;
    font-size: .86rem;
  }

  .heroBrand {
    gap: 10px;
  }

  .heroBrand .eyebrow {
    margin-bottom: 2px;
    font-size: .5rem;
  }

  .heroBrand h1 {
    font-size: 1.2rem;
  }

  .heroSessionLine > p {
    display: none;
  }

  .heroLogout {
    width: 36px;
    height: 36px;
  }
}

/* Table/list family v0.1 — normal administration tables only. */
#adminPanel .tableWrap {
  border-color: #d5e0dc;
  border-radius: 14px;
  background: var(--st-color-surface);
  box-shadow: none;
}

#adminPanel .dataTable th {
  padding: 11px 14px;
  border-bottom-color: #b9d4ce;
  background: linear-gradient(120deg, #dff0ec, #edf7f4);
  color: #31564f;
  font-size: .72rem;
  font-weight: 900;
  letter-spacing: .09em;
}

#adminPanel .dataTable td {
  padding: 11px 14px;
  border-bottom-color: #e2e8e5;
  background: var(--st-color-surface);
  transition: background-color .14s ease;
}

#adminPanel .dataTable tbody tr:hover td {
  background: #f5faf8;
}

#adminPanel .dataTable .tableSub {
  color: var(--st-color-text-muted);
  line-height: 1.4;
}

#adminPanel .badge {
  gap: 6px;
  border: 1px solid #d8ddd9;
  border-radius: var(--st-radius-control);
  padding: 5px 8px;
  background: var(--st-color-field-disabled);
  color: #75817c;
  font-size: .72rem;
}

#adminPanel .badge.ok {
  border-color: #b9e8cc;
  background: #e9f8ef;
  color: #16834b;
}

#adminPanel .badge.warn {
  border-color: #efd59a;
  background: #fff7e8;
  color: #a56409;
}

#adminPanel .badge.info {
  border-color: #b7d8d1;
  background: var(--st-color-primary-soft);
  color: var(--st-color-primary-text);
}

#adminPanel .rowActions {
  display: table-cell;
  text-align: right;
  white-space: nowrap;
}

#adminPanel .rowActions .miniBtn {
  margin: 0 0 0 5px;
}

@media (max-width: 720px) {
  #adminPanel .tableWrap {
    max-width: 100%;
    overflow-x: auto;
  }

  #adminPanel .dataTable th,
  #adminPanel .dataTable td {
    padding: 9px 10px;
  }
}

/* Navigation family v0.1 — same structure and behavior, new visual states. */
.sidebar .sideNav {
  min-height: 42px;
  gap: 9px;
  border: 1px solid transparent;
  border-radius: 9px;
  color: #cbd5e1;
  transition:
    background-color .15s ease,
    border-color .15s ease,
    color .15s ease,
    box-shadow .15s ease;
}

.sidebar .navIcon {
  width: 28px;
  height: 28px;
  border-radius: 7px;
  color: #98a7b9;
  transition: background-color .15s ease, color .15s ease;
}

.sidebar .sideNav.active {
  border-color: #28998f;
  background: linear-gradient(100deg, var(--st-color-primary), #15877e);
  color: var(--st-color-surface);
  box-shadow: 0 7px 16px rgba(7, 31, 29, .28);
}

.sidebar .sideNav.active .navIcon {
  background: rgba(255, 255, 255, .12);
  color: var(--st-color-surface);
}

.sidebar .sideNav:not(.active):hover {
  border-color: #28504f;
  background: #172a3a;
  color: #f2f7f6;
}

.sidebar .sideNav:not(.active):hover .navIcon {
  background: #1e3c3c;
  color: #7fd0c6;
}

.sidebar .sideNav:focus-visible,
.sidebar .navGroupToggle:focus-visible,
.sidebar .sidebarToggle:focus-visible {
  outline: 3px solid rgba(92, 198, 186, .4);
  outline-offset: 2px;
}

.sidebar .navGroupToggle {
  color: #8797ab;
  letter-spacing: .1em;
}

.sidebar .navGroupToggle:hover {
  color: #dce7e4;
}

.sidebar .navGroupChevron {
  color: #8090a5;
}

.mobileTab {
  transition: color .15s ease, background-color .15s ease;
}

.mobileTab.active {
  background: linear-gradient(180deg, rgba(15, 118, 110, .08), rgba(15, 118, 110, .24));
  color: #62c7bb;
}

.mobileTab:focus-visible {
  outline: 3px solid rgba(92, 198, 186, .4);
  outline-offset: -3px;
}

/* Feedback family v0.1 — native notices, toasts and normal empty states. */
.appToast {
  display: grid;
  grid-template-columns: 28px minmax(0, 1fr);
  align-items: center;
  gap: 10px;
  min-height: 55px;
  padding: 11px 14px;
  border: 1px solid rgba(255, 255, 255, .14);
  border-radius: 9px;
  background: var(--st-color-primary);
  box-shadow: 0 15px 35px rgba(15, 23, 42, .2);
  font-size: .86rem;
  line-height: 1.35;
}

.appToast::before {
  content: '✓';
  width: 28px;
  height: 28px;
  border-radius: 7px;
  display: grid;
  place-items: center;
  background: rgba(255, 255, 255, .16);
  color: var(--st-color-surface);
  font-size: .88rem;
  font-weight: 900;
}

.appToast.isError {
  background: var(--st-color-danger-text);
}

.appToast.isError::before {
  content: '!';
}

.importPreview {
  border: 1px solid #b8d9d4;
  border-left: 4px solid var(--st-color-primary);
  border-radius: 10px;
  background: #f3faf8;
  color: #31564f;
}

.importPreview strong {
  color: var(--st-color-primary-text);
}

.importPreview.warning {
  border-color: var(--st-color-warning-border);
  border-left-color: #d59b16;
  background: var(--st-color-warning-soft);
  color: #6f5315;
}

.importPreview.warning strong {
  color: var(--st-color-warning);
}

.importPreview.errorText {
  border-color: var(--st-color-danger-soft);
  border-left-color: var(--st-color-danger);
  background: var(--st-color-danger-soft);
  color: var(--st-color-danger-text);
}

.connectionAlert {
  border: 1px solid var(--st-color-warning-border);
  border-left: 4px solid #d59b16;
  border-radius: 10px;
  background: var(--st-color-warning-soft);
  color: #6f5315;
  box-shadow: none;
}

.connectionAlert p {
  color: #7f621d;
}

.assignmentImportJobNotice {
  border-color: #b8d9d4;
  border-left: 4px solid var(--st-color-primary);
  border-radius: 10px;
  background: #f3faf8;
  box-shadow: 0 15px 35px rgba(15, 23, 42, .18);
}

body .emptyState:not(.calendarEmpty) {
  border: 1px solid #dce6e2;
  border-radius: 14px;
  background: var(--st-color-surface-subtle);
  color: var(--st-color-text);
  padding: 26px 22px;
}

body .emptyState:not(.calendarEmpty)::before {
  content: '⌁';
  width: 48px;
  height: 48px;
  margin: 0 auto 12px;
  border: 1px solid #bddbd5;
  border-radius: 14px;
  display: grid;
  place-items: center;
  background: var(--st-color-primary-soft);
  color: var(--st-color-primary-text);
  font-size: 1.3rem;
  font-weight: 800;
}

body .emptyState:not(.calendarEmpty) :is(h2, h3, strong) {
  color: var(--st-color-text-strong);
}

body .emptyState:not(.calendarEmpty) p {
  color: var(--st-color-text-muted);
  line-height: 1.5;
}

body .emptyState:not(.calendarEmpty) .btn {
  margin-top: 5px;
}

.dataTable .emptyState::before,
.schoolTripOverviewGrid .emptyState::before {
  display: none !important;
}

@media (max-width: 620px) {
  .appToast {
    right: 16px;
    bottom: 16px;
    width: calc(100vw - 32px);
  }

  body .emptyState:not(.calendarEmpty) {
    padding: 22px 17px;
  }
}