:root {
  --bg: #f4f4f7;
  --bg-deep: #e9e9ee;
  --panel: rgba(255, 255, 255, 0.64);
  --panel-solid: #ffffff;
  --glass: rgba(255, 255, 255, 0.5);
  --glass-strong: rgba(255, 255, 255, 0.7);
  --glass-panel: rgba(255, 255, 255, 0.56);
  --glass-control: rgba(255, 255, 255, 0.44);
  --glass-tile: rgba(255, 255, 255, 0.42);
  --glass-selected: rgba(255, 255, 255, 0.74);
  --glass-dark: rgba(242, 243, 246, 0.8);
  --glass-border: rgba(255, 255, 255, 0.68);
  --glass-separator: rgba(60, 60, 67, 0.13);
  --line: rgba(60, 60, 67, 0.16);
  --text: #1d1d1f;
  --muted: #6e6e73;
  --nav: rgba(247, 247, 249, 0.74);
  --nav-soft: rgba(255, 255, 255, 0.28);
  --nav-active: rgba(255, 255, 255, 0.46);
  --primary: #0a84ff;
  --primary-dark: #0066cc;
  --focus-ring: 0 0 0 3px rgba(10, 132, 255, 0.18);
  --focus-border: rgba(10, 132, 255, 0.56);
  --brand: #7d715f;
  --accent: #8a7b63;
  --gold: #8a6500;
  --danger: #b3261e;
  --success: #2f6f4e;
  --shadow: 0 10px 28px rgba(0, 0, 0, 0.08);
  --glass-shadow: 0 18px 48px rgba(0, 0, 0, 0.12);
  --panel-shadow: 0 14px 34px rgba(0, 0, 0, 0.08);
  --inner-highlight: inset 0 1px 0 rgba(255, 255, 255, 0.82);
  --radius: 8px;
  --glass-radius: 10px;
  --cluster-radius: 12px;
  --control-height: 40px;
  --glass-blur-control: 14px;
  --glass-blur-surface: 20px;
  --glass-blur-dialog: 24px;
  --glass-saturation-control: 1.12;
  --glass-saturation-surface: 1.18;
  --glass-saturation-dialog: 1.22;
  --content-gap: 20px;
  --surface-gap: 16px;
  --control-gap: 10px;
  --panel-padding: 18px;
  --line-height: 1.48;
  --line-height-tight: 1.28;
  --sidebar-width: clamp(260px, 18vw, 300px);
  --subnav-sticky-top: 96px;
  font-family: "Microsoft YaHei", "PingFang SC", "Segoe UI", Arial, sans-serif;
}

/* Compact reimbursement line list keeps selection and editing in one scan path. */
#item-reimbursement-lines {
  gap: 16px;
}

.item-reimbursement-line-list {
  min-width: 0;
  overflow: hidden;
  border: 1px solid var(--glass-separator);
  border-radius: 7px;
  background: rgba(255, 255, 255, 0.26);
}

.item-reimbursement-line-list-head,
.item-reimbursement-line {
  display: grid;
  grid-template-columns: 46px minmax(160px, 0.82fr) minmax(210px, 1fr) minmax(230px, 1.08fr);
  min-width: 0;
}

.item-reimbursement-line-list-head {
  align-items: center;
  min-height: 34px;
  background: rgba(235, 237, 242, 0.68);
  color: var(--muted);
  font-size: 11px;
  font-weight: 700;
}

.item-reimbursement-line-list-head > span {
  min-width: 0;
  padding: 8px 11px;
  border-left: 1px solid var(--glass-separator);
}

.item-reimbursement-line-list-head > span:first-child {
  padding-inline: 5px;
  border-left: 0;
  text-align: center;
}

.item-reimbursement-line {
  margin: 0;
  padding: 0;
  border: 0;
  border-top: 1px solid var(--glass-separator);
  border-radius: 0;
  background: rgba(255, 255, 255, 0.46);
}

.item-reimbursement-line.is-collapsed {
  background: rgba(255, 255, 255, 0.28);
}

.item-reimbursement-line-choice {
  display: grid;
  place-items: start center;
  min-width: 0;
  padding: 15px 8px;
  border-right: 1px solid var(--glass-separator);
  cursor: pointer;
}

.item-reimbursement-line-choice input[type="checkbox"] {
  width: 18px;
  min-width: 18px;
  height: 18px;
  min-height: 18px;
  margin: 0;
}

.item-reimbursement-request {
  display: grid;
  align-content: start;
  gap: 6px;
  min-width: 0;
  padding: 12px;
  border-right: 1px solid var(--glass-separator);
}

.item-reimbursement-request-title {
  display: flex;
  align-items: center;
  gap: 7px;
  min-width: 0;
}

.item-reimbursement-request-title strong {
  min-width: 0;
  overflow-wrap: anywhere;
}

.item-reimbursement-request-title span {
  flex: 0 0 auto;
  padding: 2px 5px;
  border: 1px solid rgba(60, 60, 67, 0.12);
  border-radius: 5px;
  background: rgba(255, 255, 255, 0.56);
  color: var(--muted);
  font-size: 10px;
}

.item-reimbursement-request > small {
  color: var(--muted);
  font-size: 10px;
  line-height: 1.35;
  overflow-wrap: anywhere;
}

.item-reimbursement-request dl {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 6px 10px;
}

.item-reimbursement-request .item-reimbursement-declared {
  grid-column: auto;
  margin-top: 0;
  padding-top: 0;
  border-top: 0;
}

.item-reimbursement-request .item-reimbursement-declared dd {
  font-size: 14px;
}

.item-reimbursement-request .item-reimbursement-overrun {
  grid-column: 1 / -1;
}

.item-reimbursement-line-editor {
  display: grid;
  grid-column: 3 / -1;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.08fr);
  min-width: 0;
}

.item-reimbursement-line.is-collapsed .item-reimbursement-line-editor {
  display: none;
}

.item-reimbursement-line.is-collapsed .item-reimbursement-request {
  grid-column: 2 / -1;
  border-right: 0;
}

.item-reimbursement-line-editor > section {
  min-width: 0;
  padding: 12px;
  border-left: 1px solid var(--glass-separator);
}

.item-reimbursement-line-editor .item-reimbursement-inventory-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  grid-template-areas:
    "action target"
    "conversion unit";
  gap: 8px;
}

.item-reimbursement-line-editor .item-reimbursement-inventory-grid [data-inventory-action] {
  grid-area: action;
}

.item-reimbursement-line-editor .item-reimbursement-inventory-grid [data-existing-inventory] {
  grid-area: target;
}

.item-reimbursement-line-editor .item-reimbursement-inventory-grid [data-stock-conversion="quantity"] {
  grid-area: conversion;
}

.item-reimbursement-line-editor .item-reimbursement-inventory-grid [data-stock-conversion="unit"] {
  grid-area: unit;
}

.item-reimbursement-line-editor .item-stock-formula {
  margin-top: 8px;
  padding-block: 7px;
}

/* Date inputs ignore placeholders, so provide the same automatic-reading cue explicitly. */
#item-reimbursement-dialog .item-auto-date-control {
  position: relative;
  width: 100%;
  min-width: 0;
  height: var(--control-height);
  overflow: hidden;
  border: 1px solid rgba(60, 60, 67, 0.12);
  border-radius: var(--radius);
  background: rgba(235, 237, 242, 0.82);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.74);
}

#item-reimbursement-dialog .item-auto-date-control input[type="date"] {
  position: relative;
  z-index: 1;
  width: 100%;
  height: calc(var(--control-height) - 2px);
  min-height: calc(var(--control-height) - 2px);
  margin: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}

#item-reimbursement-dialog .item-auto-date-placeholder {
  position: absolute;
  z-index: 2;
  top: 50%;
  right: 38px;
  left: 10px;
  transform: translateY(-50%);
  overflow: hidden;
  color: color-mix(in srgb, var(--muted) 82%, transparent);
  font-size: 13px;
  font-weight: 400;
  line-height: 1.35;
  text-overflow: ellipsis;
  white-space: nowrap;
  pointer-events: none;
}

#item-reimbursement-dialog .item-auto-date-control:not(.is-empty) .item-auto-date-placeholder {
  display: none;
}

#item-reimbursement-dialog .item-auto-date-control.is-empty input[type="date"] {
  color: transparent;
  -webkit-text-fill-color: transparent;
}

#item-reimbursement-dialog .item-auto-date-control.is-empty input[type="date"]::-webkit-datetime-edit {
  opacity: 0;
}

#item-reimbursement-dialog .item-auto-date-control input[type="date"]::-webkit-calendar-picker-indicator {
  position: relative;
  z-index: 3;
  opacity: 0.78;
}

@media (max-width: 760px) {
  .item-reimbursement-line-list-head {
    display: none;
  }

  .item-reimbursement-line {
    grid-template-columns: 38px minmax(0, 1fr);
  }

  .item-reimbursement-line-choice {
    grid-column: 1;
    grid-row: 1;
    padding: 13px 6px;
  }

  .item-reimbursement-request,
  .item-reimbursement-line.is-collapsed .item-reimbursement-request {
    grid-column: 2;
    grid-row: 1;
    border-right: 0;
  }

  .item-reimbursement-line-editor {
    grid-column: 1 / -1;
    grid-template-columns: minmax(0, 1fr);
    border-top: 1px solid var(--glass-separator);
  }

  .item-reimbursement-line-editor > section {
    border-left: 0;
  }

  .item-reimbursement-line-editor > section + section {
    border-top: 1px solid var(--glass-separator);
  }
}

/* Organization inventory */
.items-register-workspace {
  display: grid;
  gap: 18px;
}

.items-register-workspace > * {
  min-width: 0;
  max-width: 100%;
}

#items-register-section,
#item-purchases-section,
#item-reimbursements-section,
#item-requests-section,
#item-history-section,
#items-register-section > .panel,
#items-register-section > .table-panel,
#item-purchases-section > .panel,
#item-purchases-section > .table-panel,
#item-reimbursements-section > .panel,
#item-reimbursements-section > .table-panel,
#item-requests-section > .table-panel,
#item-history-section > .table-panel {
  width: 100%;
  min-width: 0;
  max-width: 100%;
}

.item-filter-toolbar {
  padding: 0 0 2px;
  border-bottom: 0;
}

.items-table td:first-child strong,
.items-table td:first-child small,
.item-stock-cell small,
.item-transaction-cell small {
  display: block;
}

.items-table td:first-child small,
.item-stock-cell small {
  margin-top: 4px;
  color: var(--muted, #6b7280);
}

.item-type-chip,
.item-stock-alert {
  display: inline-flex;
  align-items: center;
  width: max-content;
  padding: 4px 9px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 700;
  white-space: nowrap;
}

.item-type-chip.asset {
  color: #174f6b;
  background: #e5f4fa;
}

.item-type-chip.consumable {
  color: #76520a;
  background: #fff3cc;
}

.item-stock-cell {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 6px;
}

.item-stock-cell small {
  width: 100%;
}

.item-stock-alert {
  color: #9a3412;
  background: #ffedd5;
}

.item-low-stock-row {
  background: color-mix(in srgb, #fff7ed 56%, transparent);
}

.item-workflow-hero {
  display: grid;
  gap: 14px;
  min-width: 0;
  margin-bottom: 14px;
}

.item-workflow-flow,
.item-reimbursement-states {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
}

.item-workflow-flow span,
.item-workflow-flow i,
.item-reimbursement-states span {
  display: inline-flex;
  align-items: center;
  min-height: 30px;
  padding: 5px 10px;
  border: 1px solid var(--glass-separator);
  border-radius: 999px;
  background: var(--glass-control);
  color: var(--muted);
  font-size: 12px;
  font-style: normal;
  white-space: nowrap;
}

.item-workflow-flow i::after {
  content: "→";
  margin-left: 8px;
  color: var(--primary-dark);
}

.item-view-tabs {
  display: flex;
  align-items: center;
  gap: 4px;
  width: 100%;
  padding: 10px 12px 0;
  overflow-x: auto;
  border-bottom: 1px solid var(--glass-separator);
}

.item-view-tabs button {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  min-width: max-content;
  border: 0;
  border-bottom: 2px solid transparent;
  border-radius: 8px 8px 0 0;
  box-shadow: none;
}

.item-view-tabs button.active {
  border-bottom-color: var(--primary-dark);
  color: var(--primary-dark);
  background: var(--glass-selected);
  font-weight: 700;
}

.item-view-tabs button span {
  display: inline-grid;
  place-items: center;
  min-width: 22px;
  min-height: 22px;
  padding: 0 6px;
  border-radius: 999px;
  background: rgba(10, 132, 255, 0.1);
  font-size: 11px;
}

.item-workflow-table table {
  min-width: 980px;
}

.item-workflow-table td small,
.item-workflow-table td strong {
  display: block;
}

.item-workflow-table td small {
  margin-top: 4px;
  color: var(--muted);
}

.income-amount {
  color: var(--danger);
}

.expense-amount {
  color: var(--success);
}

#procurement-filter-section,
#procurement-purchases,
#procurement-reimbursements {
  min-width: 0;
}

#procurement-purchases .table-heading,
#procurement-reimbursements .table-heading {
  align-items: center;
}

#procurement-purchases .table-heading > div,
#procurement-reimbursements .table-heading > div {
  display: grid;
  gap: 3px;
  min-width: 0;
}

#procurement-purchases .table-heading > .actions,
#procurement-reimbursements .table-heading > .actions {
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  gap: 8px;
}

.procurement-filter-toolbar {
  align-items: end;
  gap: 8px;
  padding: 14px 0;
}

.procurement-filter-toolbar .date-range-fields {
  display: grid;
  grid-template-columns: minmax(108px, 1fr) minmax(108px, 1fr) minmax(120px, 1.05fr);
  flex: 1 1 330px;
  gap: 8px;
  min-width: 0;
}

#procurement-filter-form .date-range-fields > label {
  min-width: 0;
}

#procurement-filter-form > label {
  flex: 0 1 112px;
  min-width: 112px;
}

#procurement-filter-form > label.procurement-filter-search {
  flex: 1 1 180px;
  min-width: 160px;
  max-width: 260px;
}

.procurement-filter-actions {
  display: flex;
  flex: 0 0 auto;
  align-items: end;
  gap: 8px;
  margin-left: auto;
}

.procurement-filter-actions button {
  min-width: 64px;
  padding-right: 12px;
  padding-left: 12px;
}

@media (min-width: 1360px) {
  #procurement-filter-form.procurement-filter-toolbar {
    flex-wrap: nowrap;
    gap: 6px;
  }

  .procurement-filter-toolbar .date-range-fields {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1.15fr);
    flex: 1 1 420px;
    min-width: 420px;
    max-width: 500px;
  }

  #procurement-filter-form > label {
    flex: 0 1 132px;
    min-width: 88px;
    max-width: 150px;
  }

  #procurement-filter-form > label.procurement-filter-search {
    flex: 0 1 200px;
    min-width: 130px;
    max-width: 210px;
  }

  .procurement-filter-actions {
    gap: 6px;
    margin-left: 0;
  }

  .procurement-filter-actions button {
    min-width: 60px;
  }
}

.procurement-purchase-panel {
  gap: 14px;
}

.procurement-reimbursement-panel {
  gap: 14px;
}

.procurement-purchase-heading {
  align-items: center;
  padding-bottom: 14px;
  border-bottom: 1px solid var(--glass-separator);
}

.procurement-reimbursement-heading {
  align-items: center;
  padding-bottom: 14px;
  border-bottom: 1px solid var(--glass-separator);
}

.procurement-reimbursement-heading > div:first-child {
  flex: 1 1 auto;
}

.procurement-reimbursement-heading > .actions {
  display: flex;
  flex: 0 0 auto;
  align-items: center;
  justify-content: flex-end;
}

.procurement-purchase-heading > div:first-child {
  flex: 1 1 auto;
}

.procurement-purchase-actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: var(--control-gap);
  flex: 0 0 auto;
}

.procurement-purchase-panel .procurement-filter-toolbar {
  margin: 0;
  padding: 0 0 14px;
  border-bottom: 1px solid var(--glass-separator);
}

.procurement-reimbursement-panel .procurement-filter-toolbar {
  margin: 0;
  padding: 0 0 14px;
  border-bottom: 1px solid var(--glass-separator);
}

.procurement-purchase-table {
  overflow: auto;
  border: 1px solid var(--glass-border);
  border-radius: var(--radius);
  background: rgba(255, 255, 255, 0.36);
  box-shadow: var(--inner-highlight);
}

.procurement-purchase-table table {
  width: 100%;
  min-width: 1180px;
  table-layout: fixed;
  margin: 0;
}

.procurement-reimbursement-table {
  overflow: auto;
  border: 1px solid var(--glass-border);
  border-radius: var(--radius);
  background: rgba(255, 255, 255, 0.36);
  box-shadow: var(--inner-highlight);
}

.procurement-reimbursement-table table {
  width: 100%;
  min-width: 1260px;
  table-layout: fixed;
  margin: 0;
}

.procurement-purchase-table th:nth-child(1) { width: 14%; }
.procurement-purchase-table th:nth-child(2) { width: 12%; }
.procurement-purchase-table th:nth-child(3) { width: 14%; }
.procurement-purchase-table th:nth-child(4) { width: 8%; }
.procurement-purchase-table th:nth-child(5) { width: 10%; }
.procurement-purchase-table th:nth-child(6) { width: 13%; }
.procurement-purchase-table th:nth-child(7) { width: 12%; }
.procurement-purchase-table th:nth-child(8) { width: 17%; }

.procurement-applied-at {
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}

.table-link {
  min-height: 0;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  color: var(--primary-dark);
  font-weight: 700;
  text-align: left;
  text-decoration: underline;
  text-underline-offset: 3px;
}

.table-link:hover {
  border: 0;
  background: transparent;
  box-shadow: none;
}

.item-workflow-dialog,
.item-workflow-detail-dialog {
  width: min(1180px, calc(100vw - 48px));
}

.item-workflow-dialog .dialog-header,
.item-workflow-detail-dialog .dialog-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 14px;
}

.item-purchase-total {
  display: grid;
  align-content: end;
  gap: 3px;
  min-width: 0;
}

.item-purchase-total strong {
  color: var(--primary-dark);
  font-size: 24px;
}

#item-purchase-lines {
  display: grid;
  gap: 12px;
  margin: 14px 0;
}

.item-purchase-line {
  min-width: 0;
  margin: 0;
  padding: 14px;
  border: 1px solid var(--glass-separator);
  border-radius: var(--radius);
  background: rgba(255, 255, 255, 0.32);
}

.item-purchase-line legend {
  display: flex;
  align-items: center;
  gap: 12px;
  width: calc(100% + 2px);
  padding: 0 4px;
  color: var(--text);
}

.item-purchase-line legend > strong {
  margin-left: auto;
  color: var(--primary-dark);
}

.item-purchase-line legend .icon-button {
  width: 34px;
  min-width: 34px;
  height: 34px;
  min-height: 34px;
  padding: 0;
  border: 1px solid rgba(60, 60, 67, 0.22);
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.5);
}

.item-purchase-line-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 11px;
}

.item-purchase-line-grid label,
.item-attachment-grid label {
  display: grid;
  align-content: start;
  gap: 5px;
  min-width: 0;
}

.item-purchase-line-grid label > span,
.item-attachment-grid label > span {
  color: var(--muted);
  font-size: 12px;
}

.item-purchase-line-grid .item-line-wide {
  grid-column: span 2;
}

.item-attachment-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 11px;
  margin-top: 14px;
}

.item-file-picker {
  position: relative;
  cursor: pointer;
}

.item-file-picker > span:first-child small {
  margin-left: 3px;
  color: var(--muted);
  font-size: 11px;
  font-weight: 400;
}

.item-file-picker > input[type="file"] {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: 0;
  padding: 0;
  overflow: hidden;
  opacity: 0;
  pointer-events: none;
}

.item-file-picker-control {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  gap: 9px;
  min-height: var(--control-height);
  padding: 5px;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, 0.68);
  border-radius: var(--radius);
  background: rgba(255, 255, 255, 0.4);
  box-shadow: var(--inner-highlight), 0 7px 18px rgba(15, 23, 42, 0.05);
  backdrop-filter: blur(var(--glass-blur-control)) saturate(var(--glass-saturation-control));
  -webkit-backdrop-filter: blur(var(--glass-blur-control)) saturate(var(--glass-saturation-control));
}

.item-file-picker-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 34px;
  padding: 6px 12px;
  border: 1px solid var(--glass-border);
  border-radius: calc(var(--radius) - 3px);
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.78), rgba(255, 255, 255, 0.48));
  color: var(--text);
  font-size: 13px;
  font-weight: 600;
  white-space: nowrap;
  box-shadow: 0 6px 14px rgba(15, 23, 42, 0.07), inset 0 1px 0 rgba(255, 255, 255, 0.86);
  backdrop-filter: blur(var(--glass-blur-control)) saturate(var(--glass-saturation-control));
  -webkit-backdrop-filter: blur(var(--glass-blur-control)) saturate(var(--glass-saturation-control));
}

.item-file-picker-name {
  min-width: 0;
  overflow: hidden;
  color: var(--muted);
  font-size: 12px;
  font-weight: 400;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.item-file-picker:hover .item-file-picker-control,
.item-file-picker:focus-within .item-file-picker-control {
  border-color: rgba(10, 132, 255, 0.42);
  background: rgba(255, 255, 255, 0.56);
  box-shadow: 0 0 0 3px rgba(10, 132, 255, 0.1), var(--inner-highlight);
}

.item-existing-attachments {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 12px;
}

.item-existing-attachments a {
  padding: 6px 9px;
  border-radius: 999px;
  background: rgba(10, 132, 255, 0.08);
  color: var(--primary-dark);
}

.item-detail-status {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 8px;
}

.item-detail-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.4fr) minmax(260px, 0.6fr);
  gap: 18px;
  margin-top: 18px;
}

.item-detail-grid h4 {
  margin: 0 0 10px;
  color: var(--text);
}

.item-timeline {
  display: grid;
  gap: 0;
}

.item-timeline > div {
  display: grid;
  grid-template-columns: 18px minmax(0, 1fr);
  gap: 9px;
  min-width: 0;
}

.item-timeline i {
  position: relative;
  width: 10px;
  height: 10px;
  margin: 5px 0 0 2px;
  border-radius: 50%;
  background: #9ca3af;
}

.item-timeline i::after {
  content: "";
  position: absolute;
  top: 12px;
  bottom: -42px;
  left: 4px;
  width: 1px;
  background: var(--glass-separator);
}

.item-timeline > div:last-child i::after { display: none; }
.item-timeline i.approved { background: var(--success); }
.item-timeline i.rejected { background: var(--danger); }
.item-timeline p { display: grid; gap: 2px; margin: 0 0 14px; min-width: 0; }
.item-timeline p span,
.item-timeline p small { color: var(--muted); }

.item-summary-list {
  display: grid;
  gap: 0;
  margin: 0;
  border: 1px solid var(--glass-separator);
  border-radius: var(--radius);
}

.item-summary-list > div {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  padding: 9px 11px;
  border-bottom: 1px solid var(--glass-separator);
}

.item-summary-list > div:last-child { border-bottom: 0; }
.item-summary-list dt { color: var(--muted); }
.item-summary-list dd { margin: 0; color: var(--text); font-weight: 700; text-align: right; }

.item-dialog-shell textarea,
#item-request-dialog textarea,
#item-operation-dialog textarea {
  resize: vertical;
}

.marketing-prize-rule-list > div small + small {
  margin-top: 4px;
  color: #365e6c;
}

@media (max-width: 760px) {
  .items-register-workspace > .section-header {
    flex-wrap: wrap;
  }

  .items-register-workspace > .section-header > div:first-child {
    min-width: 0;
  }

  .item-filter-toolbar > label,
  .item-filter-toolbar > button {
    width: 100%;
  }

  #procurement-purchases .table-heading,
  #procurement-reimbursements .table-heading {
    align-items: stretch;
    flex-direction: column;
  }

  #procurement-purchases .table-heading button,
  #procurement-reimbursements .table-heading button,
  .procurement-filter-toolbar > label,
  .procurement-filter-toolbar > button,
  .procurement-filter-actions,
  .procurement-filter-actions > button {
    width: 100%;
  }

  .procurement-filter-actions {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    grid-column: 1 / -1;
    margin-left: 0;
  }

  .item-workflow-hero .section-header,
  .item-workflow-dialog .dialog-header,
  .item-workflow-detail-dialog .dialog-header {
    align-items: stretch;
    flex-direction: column;
  }

  .item-workflow-hero .section-header button {
    width: 100%;
  }

  .item-workflow-flow,
  .item-reimbursement-states {
    flex-wrap: nowrap;
    width: 100%;
    overflow-x: auto;
    padding-bottom: 3px;
  }

  .item-workflow-dialog,
  .item-workflow-detail-dialog {
    width: 100%;
  }

  .item-purchase-line-grid,
  .item-detail-grid {
    grid-template-columns: minmax(0, 1fr);
  }

  .item-invoice-fields > .item-invoice-number-field,
  .item-invoice-fields > .item-invoice-reason-field {
    grid-column: 1 / -1;
  }

  .item-attachment-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
  }

  .item-file-picker > span:first-child {
    min-height: 31px;
    line-height: 1.3;
  }

  .item-file-picker-control {
    grid-template-columns: minmax(0, 1fr);
    gap: 4px;
    padding: 4px;
    text-align: center;
  }

  .item-file-picker-button {
    width: 100%;
    min-height: 32px;
    padding: 5px 4px;
    font-size: 12px;
  }

  .item-purchase-line-grid .item-line-wide {
    grid-column: auto;
  }

  .item-purchase-line {
    padding: 11px;
  }

  .item-purchase-line legend {
    flex-wrap: wrap;
  }

  .item-purchase-line legend > strong {
    margin-left: 0;
  }

  .item-detail-status {
    justify-content: flex-start;
  }
}

* {
  box-sizing: border-box;
}

html,
body,
#app {
  min-height: 100%;
}

body {
  margin: 0;
  background: #eef1f5;
  background-attachment: fixed;
  color: var(--text);
  font-size: 14px;
  line-height: var(--line-height);
  overflow-x: hidden;
}

button,
input,
select,
textarea {
  font: inherit;
}

button {
  min-height: var(--control-height);
  border: 1px solid var(--glass-border);
  border-radius: var(--radius);
  padding: 8px 14px;
  cursor: pointer;
  background: var(--glass-control);
  color: var(--text);
  box-shadow: 0 8px 18px rgba(0, 0, 0, 0.06), var(--inner-highlight);
  backdrop-filter: blur(var(--glass-blur-control)) saturate(var(--glass-saturation-control));
  -webkit-backdrop-filter: blur(var(--glass-blur-control)) saturate(var(--glass-saturation-control));
  transition: background 0.18s, border-color 0.18s, box-shadow 0.18s, opacity 0.18s, transform 0.18s;
}

button:hover {
  filter: none;
  background: rgba(255, 255, 255, 0.68);
  border-color: rgba(255, 255, 255, 0.84);
  box-shadow: 0 10px 22px rgba(0, 0, 0, 0.08), var(--inner-highlight);
}

button.primary {
  background: var(--primary-dark);
  border-color: rgba(0, 102, 204, 0.3);
  color: #fff;
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.28) inset, 0 8px 18px rgba(0, 102, 204, 0.18);
}

button.secondary {
  background: rgba(255, 255, 255, 0.68);
  border-color: rgba(60, 60, 67, 0.16);
  color: var(--text);
}

button.ghost {
  background: rgba(255, 255, 255, 0.42);
  border-color: var(--line);
}

button.link-button {
  min-height: 0;
  border: 0;
  padding: 0;
  background: transparent;
  color: var(--primary-dark);
  font-weight: 700;
  text-align: left;
  border-radius: 0;
  box-shadow: none;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}

button.link-button:hover,
button.link-button:active {
  background: transparent;
  border-color: transparent;
  box-shadow: none;
  transform: none;
}

button.link-button:focus-visible {
  border-radius: 4px;
  box-shadow: var(--focus-ring);
}

button.danger {
  background: rgba(255, 239, 239, 0.78);
  border-color: rgba(184, 50, 50, 0.26);
  color: var(--danger);
}

button:disabled {
  cursor: not-allowed;
  opacity: 0.55;
}

input,
select,
textarea {
  width: 100%;
  border: 1px solid rgba(255, 255, 255, 0.64);
  border-radius: var(--radius);
  padding: 8px 10px;
  background: rgba(255, 255, 255, 0.46);
  color: var(--text);
  min-height: var(--control-height);
  box-shadow: var(--inner-highlight);
  backdrop-filter: blur(var(--glass-blur-control)) saturate(var(--glass-saturation-control));
  -webkit-backdrop-filter: blur(var(--glass-blur-control)) saturate(var(--glass-saturation-control));
  transition: border-color 0.18s, box-shadow 0.18s, background 0.18s;
}

input[readonly],
textarea[readonly],
input:disabled,
select:disabled,
textarea:disabled {
  color: var(--muted);
  background: rgba(235, 237, 242, 0.74);
  border-color: rgba(60, 60, 67, 0.12);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.74);
  cursor: not-allowed;
  opacity: 1;
}

input:focus,
select:focus,
textarea:focus,
button:focus {
  outline: 0;
}

input:focus,
select:focus,
textarea:focus {
  border-color: rgba(255, 255, 255, 0.82);
  box-shadow: var(--inner-highlight);
}

input:focus-visible,
select:focus-visible,
textarea:focus-visible,
button:focus-visible {
  outline: 0;
  border-color: var(--focus-border);
  box-shadow: var(--focus-ring), var(--inner-highlight);
}

textarea {
  resize: vertical;
  min-height: 70px;
}

label span {
  display: block;
  margin-bottom: 6px;
  color: var(--muted);
  font-size: 12px;
}

input[type="checkbox"] {
  appearance: none;
  -webkit-appearance: none;
  display: inline-grid;
  place-items: center;
  width: 16px;
  height: 16px;
  min-width: 16px;
  min-height: 16px;
  flex: 0 0 16px;
  margin: 0;
  padding: 0;
  border: 1px solid rgba(60, 60, 67, 0.3);
  border-radius: 4px;
  background: rgba(255, 255, 255, 0.66);
  background-position: center;
  background-repeat: no-repeat;
  background-size: 12px 12px;
  box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.06), var(--inner-highlight);
  backdrop-filter: blur(8px) saturate(1.08);
  -webkit-backdrop-filter: blur(8px) saturate(1.08);
}

input[type="checkbox"]:checked {
  border-color: rgba(10, 132, 255, 0.82);
  background-color: var(--primary);
  background-image: url("data:image/svg+xml,%3Csvg width='12' height='12' viewBox='0 0 12 12' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M2.2 6.2 4.8 8.7 9.8 3.2' fill='none' stroke='white' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.35), 0 1px 5px rgba(10, 132, 255, 0.22);
}

input[type="checkbox"]:focus {
  outline: 0;
  border-color: rgba(60, 60, 67, 0.3);
  box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.06), var(--inner-highlight);
}

input[type="checkbox"]:focus-visible {
  border-color: var(--focus-border);
  box-shadow: var(--focus-ring), var(--inner-highlight);
}

.hidden {
  display: none !important;
}

.login-shell {
  min-height: 100vh;
  display: grid;
  place-items: center;
  padding: 24px;
  background: linear-gradient(180deg, #fbfbfd 0%, var(--bg) 100%);
}

.login-panel {
  width: min(420px, 100%);
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 8px;
  box-shadow: var(--shadow);
  padding: 28px;
}

.brand-block,
.sidebar-brand {
  display: flex;
  align-items: center;
  gap: 12px;
}

.brand-mark {
  position: relative;
  display: block;
  flex: 0 0 48px;
  width: 48px;
  height: 48px;
  min-width: 48px;
  overflow: hidden;
  border: 0;
  border-radius: 0;
  background: #fff;
  box-shadow: none;
}

.brand-mark.small {
  width: 48px;
  height: 48px;
}

.brand-logo {
  position: absolute;
  top: -3px;
  left: -13px;
  width: 82px;
  height: 82px;
  max-width: none;
  object-fit: contain;
  pointer-events: none;
  user-select: none;
}

.brand-block h1 {
  margin: 0;
  font-size: 26px;
  letter-spacing: 0;
}

.brand-block p,
.sidebar-brand span {
  display: block;
  margin: 2px 0 0;
  color: var(--muted);
}

.form-grid {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: 14px;
  margin-top: 16px;
}

.form-grid > label,
.form-grid > .full,
.form-grid > .demo-entry,
.form-grid > button,
.form-grid > p {
  grid-column: span 12;
}

.form-grid .half {
  grid-column: span 6;
}

.form-grid .third {
  grid-column: span 4;
}

.form-grid .two-thirds {
  grid-column: span 8;
}

.form-grid .quarter {
  grid-column: span 3;
}

.course-location-field {
  position: relative;
  min-width: 0;
}

.course-location-field > .field-title {
  display: block;
  margin-bottom: 8px;
  color: var(--muted);
  font-size: 12px;
}

.course-location-pair {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
  gap: 8px;
  align-items: end;
}

.course-location-part {
  min-width: 0;
  margin: 0;
}

.course-location-arrow {
  align-self: center;
  padding-top: 20px;
  color: var(--muted);
  font-size: 13px;
  line-height: 1;
}

.course-location-field.waiting-for-store .course-location-arrow {
  opacity: 0.45;
}

.course-location-trigger {
  display: flex;
  align-items: center;
  width: 100%;
  justify-content: flex-start;
  min-height: var(--control-height);
  border: 1px solid rgba(255, 255, 255, 0.64);
  border-radius: var(--radius);
  padding: 8px 10px;
  text-align: left;
  background: rgba(255, 255, 255, 0.46);
  color: var(--text);
  box-shadow: var(--inner-highlight);
  backdrop-filter: blur(12px) saturate(1.1);
  -webkit-backdrop-filter: blur(12px) saturate(1.1);
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.course-location-trigger::after {
  content: "▾";
  margin-left: auto;
  padding-left: 10px;
  color: var(--muted);
  flex: 0 0 auto;
}

.course-location-trigger:hover {
  border-color: rgba(255, 255, 255, 0.82);
  background: rgba(255, 255, 255, 0.58);
  box-shadow: var(--inner-highlight);
}

.course-location-cascader.is-open .course-location-trigger {
  border-color: var(--focus-border);
  box-shadow: var(--focus-ring), var(--inner-highlight);
}

.course-location-menu {
  position: absolute;
  z-index: 90;
  top: calc(100% + 8px);
  left: 0;
  display: grid;
  grid-template-columns: minmax(160px, 1fr) minmax(160px, 1fr);
  width: min(480px, calc(100vw - 48px));
  max-height: 270px;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, 0.72);
  border-radius: var(--radius);
  background: rgba(255, 255, 255, 0.9);
  box-shadow: 0 12px 28px rgba(0, 0, 0, 0.12), var(--inner-highlight);
  backdrop-filter: blur(14px) saturate(1.1);
  -webkit-backdrop-filter: blur(14px) saturate(1.1);
}

.course-location-column {
  min-width: 0;
  max-height: 270px;
  overflow: auto;
  padding: 6px;
}

.course-location-column + .course-location-column {
  border-left: 1px solid var(--glass-separator);
}

.course-location-column-title {
  display: block;
  margin: 2px 4px 6px;
  color: var(--muted);
  font-size: 12px;
}

.course-location-option {
  display: block;
  width: 100%;
  min-height: 0;
  margin: 0;
  padding: 8px 9px;
  border: 1px solid transparent;
  border-radius: 6px;
  text-align: left;
  box-shadow: none;
  background: transparent;
}

.course-location-option:hover {
  border-color: transparent;
  background: rgba(10, 132, 255, 0.08);
  box-shadow: none;
}

.course-location-option strong,
.course-location-option small {
  display: block;
}

.course-location-option small {
  margin-top: 2px;
  color: var(--muted);
  font-size: 11px;
}

.course-location-option.is-selected {
  border-color: rgba(10, 132, 255, 0.28);
  background: rgba(10, 132, 255, 0.12);
  color: var(--primary-dark);
}

.course-location-empty {
  padding: 12px 10px;
  color: var(--muted);
  font-size: 13px;
}

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

.login-message {
  margin: 0;
  padding: 9px 10px;
  border: 1px solid #c9ded0;
  border-radius: 6px;
  background: #f1f8f3;
  color: var(--success);
  line-height: 1.5;
}

.login-message.error {
  border-color: #e8c0bd;
  background: #fff2f1;
  color: var(--danger);
}

.demo-entry {
  display: grid;
  gap: 8px;
  padding: 12px;
  border: 1px solid rgba(138, 123, 99, 0.24);
  border-radius: 8px;
  background: #fbfaf7;
}

.demo-entry button {
  width: 100%;
  white-space: nowrap;
}

.demo-entry p {
  margin: 0;
  color: #6b6254;
  font-size: 12px;
  line-height: 1.5;
}

.workspace {
  min-height: 100vh;
  display: grid;
  grid-template-columns: 240px 1fr;
}

.sidebar {
  background: var(--nav);
  color: var(--text);
  min-height: 100vh;
  padding: 18px 14px;
  position: sticky;
  top: 0;
}

.sidebar-brand {
  padding: 4px 4px 18px;
  border-bottom: 1px solid var(--line);
  margin-bottom: 14px;
}

.sidebar-brand span {
  color: var(--muted);
}

.sidebar-brand .brand-mark {
  color: var(--brand);
}

.profile-entry {
  width: 100%;
  display: grid;
  gap: 3px;
  text-align: left;
  margin-bottom: 14px;
  padding: 10px 12px;
  border-color: rgba(60, 60, 67, 0.12);
  background: rgba(255, 255, 255, 0.48);
  color: var(--text);
}

.profile-entry small {
  display: block;
  overflow: hidden;
  color: var(--muted);
  font-size: 12px;
  text-overflow: ellipsis;
}

.profile-entry:hover,
.profile-entry.active {
  background: var(--nav-soft);
}

.sidebar nav {
  display: grid;
  gap: 14px;
}

.nav-section {
  display: grid;
  gap: 4px;
}

.nav-section-title {
  padding: 0 10px 3px;
  color: #86868b;
  font-size: 11px;
  font-weight: 700;
}

.nav-section-items {
  display: grid;
  gap: 2px;
}

.sidebar-subnav {
  display: grid;
  gap: 6px;
  margin: 0 8px 18px;
  padding: 12px 10px;
  border: 1px solid rgba(255, 255, 255, 0.58);
  border-radius: var(--radius);
  background: rgba(255, 255, 255, 0.26);
  box-shadow: var(--inner-highlight);
}

.sidebar-subnav-title {
  padding: 0 2px 3px;
  color: #86868b;
  font-size: 11px;
  font-weight: 700;
}

.sidebar-subnav-leading {
  min-width: 0;
  padding: 6px 8px;
  border-bottom: 1px solid var(--glass-separator);
}

.sidebar-subnav-leading .subnav-context {
  min-height: 0;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  place-items: start;
}

.sidebar-subnav-leading .subnav-context strong,
.sidebar-subnav-leading .subnav-context small {
  max-width: 100%;
}

.sidebar-subnav-links {
  display: grid;
  gap: 2px;
}

.sidebar-subnav a,
.sidebar-subnav-button {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  width: 100%;
  min-height: 30px;
  padding: 6px 9px;
  border: 1px solid transparent;
  border-radius: var(--radius);
  background: transparent;
  box-shadow: none;
  color: #2c2c2e;
  font-size: 13px;
  font-weight: 600;
  text-align: left;
  text-decoration: none;
}

.sidebar-subnav a:hover,
.sidebar-subnav a:focus-visible,
.sidebar-subnav-button:hover,
.sidebar-subnav-button:focus-visible,
.sidebar-subnav-button.active {
  background: var(--nav-active);
  outline: 0;
}

.sidebar-subnav-button.active {
  border-color: rgba(255, 255, 255, 0.62);
  color: #111214;
  box-shadow: var(--inner-highlight);
}

.sidebar-subnav-button.active::before {
  position: absolute;
  inset: 7px auto 7px -5px;
  width: 3px;
  border-radius: 3px;
  background: var(--primary);
  content: "";
}

.sidebar-subnav-count {
  min-width: 21px;
  padding: 1px 6px;
  border: 1px solid var(--glass-separator);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.38);
  color: var(--muted);
  font-size: 10px;
  line-height: 16px;
  text-align: center;
}

.finance-object-context {
  display: grid;
  gap: 3px;
  min-width: 0;
}

.finance-object-context strong,
.finance-object-context small {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.finance-object-context small {
  color: var(--muted);
  font-size: 11px;
}

.finance-object-context .sales-sidebar-back {
  width: 100%;
  min-height: 32px;
  margin-top: 7px;
  padding: 6px 10px;
  background: rgba(255, 255, 255, 0.5);
}

.nav-button {
  width: 100%;
  text-align: left;
  background: transparent;
  color: #2c2c2e;
  border-color: transparent;
  box-shadow: none;
  padding: 6px 10px 6px 18px;
  min-height: 30px;
  font-size: 13px;
  font-weight: 500;
}

.nav-button:hover,
.nav-button.active {
  background: var(--nav-soft);
  border-color: transparent;
}

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

.topbar {
  min-height: 76px;
  padding: 18px 26px;
  border-bottom: 1px solid var(--line);
  background: rgba(255, 255, 255, 0.92);
  display: flex;
  justify-content: space-between;
  gap: 16px;
  align-items: center;
  position: sticky;
  top: 0;
  z-index: 5;
}

.topbar h2 {
  margin: 0;
  font-size: 22px;
  letter-spacing: 0;
}

.topbar p {
  margin: 4px 0 0;
  color: var(--muted);
}

.user-box {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 10px;
  flex-wrap: wrap;
  white-space: nowrap;
}

.system-clock {
  color: var(--muted);
  font-size: 13px;
}

.mode-badge {
  padding: 5px 8px;
  border: 1px solid rgba(138, 123, 99, 0.24);
  border-radius: 6px;
  background: #fbfaf7;
  color: #5f5648;
  font-size: 12px;
  font-weight: 700;
}

.demo-role-switch {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 32px;
  padding: 4px 8px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.72);
  color: var(--muted);
  font-size: 12px;
  font-weight: 700;
  box-shadow: var(--inner-highlight);
}

.demo-role-switch select {
  min-width: 220px;
  max-width: 360px;
  border: 0;
  background: transparent;
  color: var(--text);
  font: inherit;
  outline: none;
}

.store-switch {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 32px;
  padding: 4px 8px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.68);
  box-shadow: var(--inner-highlight);
  color: var(--muted);
  font-size: 12px;
}

.store-switch select {
  width: auto;
  min-width: 132px;
  min-height: 24px;
  padding: 2px 24px 2px 6px;
  border: 0;
  background-color: transparent;
  font-size: 12px;
  font-weight: 700;
}

.dev-badge {
  position: fixed;
  right: 18px;
  bottom: 18px;
  z-index: 40;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  max-width: calc(100vw - 36px);
  padding: 8px 12px;
  border: 1px solid rgba(138, 101, 0, 0.28);
  border-radius: 6px;
  background: #fbf7ea;
  color: #5f5648;
  font-weight: 700;
  box-shadow: var(--shadow);
}

.dev-clock {
  position: relative;
  color: var(--muted);
  font-size: 12px;
  font-weight: 600;
  white-space: nowrap;
}

.dev-clock::before {
  content: "";
  display: inline-block;
  width: 1px;
  height: 12px;
  margin: 0 8px 0 0;
  vertical-align: -2px;
  background: rgba(60, 60, 67, 0.18);
}

#view {
  display: grid;
  gap: var(--content-gap);
  padding: var(--content-gap) 24px 42px;
}

.section {
  margin-bottom: 0;
  display: grid;
  gap: 12px;
}

.section-subnav,
.course-subnav {
  position: sticky;
  top: var(--subnav-sticky-top);
  z-index: 6;
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  align-items: center;
  min-height: 56px;
  padding: 8px 10px;
  border: 1px solid var(--glass-border);
  border-radius: var(--radius);
  background: var(--glass-panel);
  box-shadow: var(--panel-shadow), var(--inner-highlight);
  backdrop-filter: blur(22px) saturate(1.16);
  -webkit-backdrop-filter: blur(22px) saturate(1.16);
}

#view > .section-subnav:first-child,
#view > .course-subnav:first-child {
  margin-top: 0;
  border-top-left-radius: var(--radius);
  border-top-right-radius: var(--radius);
  border-top-color: rgba(255, 255, 255, 0.72);
  box-shadow: 0 14px 26px rgba(0, 0, 0, 0.055), var(--inner-highlight);
}

.section-subnav a,
.course-subnav a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 32px;
  line-height: var(--line-height-tight);
  padding: 6px 12px;
  border: 1px solid transparent;
  border-radius: 999px;
  color: var(--text);
  font-size: 13px;
  font-weight: 600;
  text-decoration: none;
  transition: background 0.18s, border-color 0.18s, box-shadow 0.18s, transform 0.18s;
}

.section-subnav a:hover,
.course-subnav a:hover {
  background: var(--glass-tile);
  border-color: rgba(255, 255, 255, 0.58);
  box-shadow: var(--inner-highlight);
}

.section-subnav a:focus-visible,
.course-subnav a:focus-visible {
  box-shadow: var(--focus-ring), var(--inner-highlight);
}

.section-subnav-leading {
  display: flex;
  align-items: center;
  gap: 12px;
  min-width: 0;
  flex: 0 0 auto;
  padding-right: 16px;
  border-right: 1px solid var(--glass-separator);
}

.section-subnav-links {
  display: flex;
  flex: 1 1 auto;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
  min-width: 0;
}

.subnav-back {
  min-height: 36px;
  padding: 7px 13px;
  border-color: rgba(255, 255, 255, 0.68);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.5);
  color: var(--text);
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.7) inset, 0 8px 18px rgba(0, 0, 0, 0.055);
  backdrop-filter: blur(16px) saturate(1.12);
  -webkit-backdrop-filter: blur(16px) saturate(1.12);
  white-space: nowrap;
}

.subnav-back:hover {
  background: rgba(255, 255, 255, 0.66);
  border-color: rgba(255, 255, 255, 0.82);
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.78) inset, 0 10px 22px rgba(0, 0, 0, 0.07);
}

.subnav-context {
  display: grid;
  place-items: center;
  min-width: 0;
  min-height: 36px;
  padding: 7px 13px;
  border: 1px solid rgba(255, 255, 255, 0.58);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.34);
  box-shadow: var(--inner-highlight);
  backdrop-filter: blur(14px) saturate(1.12);
  -webkit-backdrop-filter: blur(14px) saturate(1.12);
  line-height: var(--line-height-tight);
}

.subnav-context strong {
  overflow: hidden;
  max-width: 180px;
  color: var(--text);
  font-size: 14px;
  font-weight: 800;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.subnav-context small {
  overflow: hidden;
  max-width: 180px;
  color: var(--muted);
  font-size: 11px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.student-detail-subnav,
.course-detail-subnav {
  gap: 14px;
}

.student-detail-subnav .section-subnav-links,
.course-detail-subnav .section-subnav-links {
  gap: 10px;
}

.student-detail-subnav a,
.course-detail-subnav a {
  padding-inline: 14px;
}

#view [id] {
  scroll-margin-top: 128px;
}

.anchor-target {
  display: block;
  width: 0;
  height: 0;
  overflow: hidden;
}

#course-list-section,
#course-session-section,
#course-calendar-section,
#course-detail-sessions-section {
  scroll-margin-top: 128px;
}

.section-header {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  align-items: flex-end;
  margin-bottom: 0;
}

.section-header > div {
  min-width: 0;
}

.panel > .section-header,
.table-panel > .section-header,
.management-panel > .section-header {
  margin-bottom: 14px;
}

.section-header h3 {
  margin: 0;
  font-size: 18px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  word-break: keep-all;
}

.section-header p {
  margin: 3px 0 0;
  color: var(--muted);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  word-break: keep-all;
}

.classrooms-intro-panel {
  padding: 20px 24px;
}

.classrooms-intro-panel .section-header {
  padding: 0;
}

.classroom-detail-panel .detail-note {
  margin-top: 10px;
  padding: 10px 12px;
  border: 1px solid var(--glass-separator);
  border-radius: var(--radius);
  color: var(--muted);
  background: rgba(255, 255, 255, 0.34);
}

.metrics {
  display: grid;
  grid-template-columns: repeat(4, minmax(150px, 1fr));
  gap: var(--content-gap);
}

.system-health-db > .metrics {
  grid-template-columns: repeat(5, minmax(140px, 1fr));
}

.audit-report-paths {
  margin: 14px 0;
  overflow-wrap: anywhere;
}

.audit-report-paths > div + div {
  margin-top: 4px;
}

.audit-report-empty {
  padding: 18px 20px;
}

.metric-card,
.panel,
.table-panel {
  background: var(--glass-panel);
  border: 1px solid var(--glass-border);
  border-radius: var(--glass-radius);
  box-shadow: var(--panel-shadow), var(--inner-highlight);
  backdrop-filter: blur(20px) saturate(1.18);
  -webkit-backdrop-filter: blur(20px) saturate(1.18);
}

.metric-card {
  padding: var(--panel-padding);
  min-height: 96px;
}

.metric-card span {
  display: block;
  color: var(--muted);
  margin-bottom: 8px;
}

.metric-card strong {
  display: block;
  font-size: 24px;
  letter-spacing: 0;
}

.metric-card.income strong {
  color: var(--danger);
}

.metric-card.expense strong {
  color: var(--success);
}

.metric-card.profit strong {
  color: var(--danger);
}

.metric-card.loss strong {
  color: var(--success);
}

.metric-card.warning strong {
  color: var(--gold);
}

.clock-panel {
  max-width: 760px;
}

.clock-card {
  display: flex;
  gap: 14px;
  align-items: center;
}

.clock-times {
  display: grid;
  grid-template-columns: repeat(3, minmax(90px, 1fr));
  gap: 12px;
  flex: 1;
}

.clock-times span {
  display: block;
  color: var(--muted);
  font-size: 12px;
  margin-bottom: 4px;
}

.clock-times strong {
  font-size: 22px;
  letter-spacing: 0;
}

.clock-actions {
  display: flex;
  flex: 0 0 auto;
  align-items: center;
  justify-content: flex-end;
  min-width: 0;
}

.clock-confirm {
  display: flex;
  gap: 8px;
}

.clock-state {
  min-height: 34px;
}

.detail-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(120px, 1fr));
  gap: 12px;
  margin: 0;
}

.detail-grid div {
  min-width: 0;
}

.detail-grid dt {
  color: var(--muted);
  font-size: 12px;
  margin-bottom: 4px;
}

.detail-grid dd {
  margin: 0;
  word-break: break-word;
}

.payroll-slip-layout {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--content-gap);
  align-items: stretch;
}

.payroll-period-panel {
  min-width: 0;
}

.section-header.compact {
  align-items: flex-start;
  margin-bottom: 4px;
}

.section-header.compact h3 {
  font-size: 16px;
}

.payroll-period-list {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: var(--control-gap);
}

.payroll-period-item {
  display: grid;
  gap: 10px;
  padding: 12px 14px;
  border: 1px solid var(--glass-separator);
  border-radius: var(--radius);
  background: var(--glass-tile);
  box-shadow: var(--inner-highlight);
}

.payroll-period-item:last-child {
  border-bottom: 1px solid var(--glass-separator);
}

.payroll-period-main {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  align-items: baseline;
}

.payroll-period-main strong {
  font-size: 16px;
}

.payroll-period-main span {
  color: var(--muted);
  white-space: nowrap;
}

.payroll-period-values {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px 12px;
  margin: 0;
}

.payroll-period-values dt {
  color: var(--muted);
  font-size: 12px;
  margin-bottom: 3px;
}

.payroll-period-values dd {
  margin: 0;
  font-weight: 700;
  word-break: break-word;
}

.wage-slip-list {
  display: grid;
  gap: 12px;
}

.wage-slip {
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 16px;
}

.wage-slip-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 12px;
}

.wage-slip-head h3 {
  margin: 0;
  font-size: 18px;
}

.wage-slip-head p {
  margin: 4px 0 0;
  color: var(--muted);
}

.wage-detail {
  grid-template-columns: repeat(3, minmax(110px, 1fr));
}

.student-detail-header {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  align-items: flex-start;
}

.student-detail-header h3 {
  margin: 10px 0 4px;
  font-size: 24px;
}

.student-detail-header p {
  margin: 0;
  color: var(--muted);
}

.detail-hero {
  display: grid;
  gap: 16px;
  padding: 18px;
  border: 1px solid var(--glass-border);
  border-radius: var(--glass-radius);
  background: linear-gradient(145deg, rgba(255, 255, 255, 0.66), rgba(245, 247, 252, 0.34));
  box-shadow: var(--panel-shadow), var(--inner-highlight);
  backdrop-filter: blur(20px) saturate(1.16);
  -webkit-backdrop-filter: blur(20px) saturate(1.16);
}

.detail-hero-main {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 18px;
}

.student-detail-hero .detail-hero-main {
  display: grid;
  grid-template-columns: minmax(190px, 0.32fr) minmax(0, 1fr) auto;
  align-items: stretch;
}

.student-hero-identity {
  display: grid;
  align-content: center;
  gap: 6px;
  min-width: 0;
}

.student-hero-profile {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(145px, 1fr));
  gap: 8px;
  min-width: 0;
  margin: 0;
  padding: 8px;
  border: 1px solid rgba(255, 255, 255, 0.6);
  border-radius: var(--cluster-radius);
  background: rgba(255, 255, 255, 0.28);
  box-shadow: var(--inner-highlight);
}

.student-profile-group {
  display: grid;
  align-content: center;
  gap: 4px;
  min-width: 0;
  min-height: 72px;
  padding: 11px 12px;
  border: 1px solid rgba(255, 255, 255, 0.5);
  border-radius: calc(var(--cluster-radius) - 2px);
  background: rgba(255, 255, 255, 0.38);
}

.student-profile-group span {
  color: var(--muted);
  font-size: 12px;
  font-weight: 750;
  line-height: var(--line-height-tight);
}

.student-profile-group strong {
  color: var(--text);
  font-size: 15px;
  font-weight: 760;
  line-height: var(--line-height-tight);
  overflow-wrap: anywhere;
}

.student-profile-group small {
  color: var(--muted);
  font-size: 12px;
  line-height: var(--line-height-tight);
  overflow-wrap: anywhere;
}

.student-profile-group.note {
  background: rgba(248, 250, 253, 0.54);
}

.student-profile-group.stores {
  background: rgba(255, 255, 255, 0.42);
}

.student-profile-group.school {
  background: rgba(247, 250, 255, 0.48);
}

.student-store-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  min-width: 0;
}

.student-store-chips span {
  display: inline-flex;
  align-items: center;
  min-height: 26px;
  max-width: 100%;
  padding: 4px 8px;
  border: 1px solid rgba(0, 122, 255, 0.18);
  border-radius: 8px;
  background: rgba(0, 122, 255, 0.08);
  color: #0a63c7;
  font-size: 12px;
  font-weight: 650;
  line-height: 1.25;
}

.student-detail-hero .detail-hero-main > .actions {
  align-self: start;
  justify-content: flex-end;
}

.detail-hero h3 {
  margin: 4px 0 6px;
  font-size: 26px;
}

.student-hero-identity h3 {
  font-size: 30px;
  line-height: 1.08;
}

.student-hero-identity p {
  margin: 0;
  color: var(--muted);
  font-size: 13px;
}

.detail-hero p {
  margin: 0;
  color: var(--muted);
}

.detail-eyebrow {
  color: var(--muted);
  font-size: 12px;
  font-weight: 800;
}

.detail-hero-metrics {
  display: grid;
  grid-template-columns: repeat(4, minmax(120px, 1fr));
  gap: 10px;
}

.detail-metric {
  display: grid;
  gap: 3px;
  min-width: 0;
  padding: 12px;
  border: 1px solid rgba(255, 255, 255, 0.56);
  border-radius: var(--cluster-radius);
  background: var(--glass-tile);
  box-shadow: var(--inner-highlight);
}

.detail-metric span,
.detail-metric small {
  color: var(--muted);
  font-size: 12px;
  line-height: var(--line-height-tight);
}

.detail-metric strong {
  color: var(--text);
  font-size: 22px;
  line-height: 1.1;
  overflow-wrap: anywhere;
}

.detail-metric.warning {
  border-color: rgba(138, 101, 0, 0.24);
  background: rgba(255, 249, 232, 0.68);
}

.student-detail-overview,
.detail-overview-grid,
.detail-split-section {
  display: grid;
  grid-template-columns: minmax(320px, 0.9fr) minmax(420px, 1.1fr);
  gap: var(--content-gap);
  align-items: start;
}

.student-detail-overview {
  grid-template-columns: 1fr;
}

.student-detail-overview > .panel,
.detail-overview-grid > .panel,
.detail-split-section > .panel,
.detail-split-section > .table-panel {
  min-width: 0;
}

.detail-alert-list {
  display: grid;
  gap: 10px;
}

.detail-alert-item {
  display: grid;
  gap: 4px;
  padding: 11px 12px;
  border: 1px solid rgba(255, 255, 255, 0.56);
  border-radius: var(--cluster-radius);
  background: rgba(255, 255, 255, 0.36);
  box-shadow: var(--inner-highlight);
}

.detail-alert-item.warning {
  border-color: rgba(138, 101, 0, 0.26);
  background: rgba(255, 249, 232, 0.7);
}

.detail-alert-item.info {
  border-color: rgba(10, 132, 255, 0.2);
  background: rgba(238, 247, 255, 0.62);
}

.detail-alert-item strong {
  color: var(--text);
}

.detail-alert-item span {
  color: var(--muted);
  font-size: 12px;
  line-height: var(--line-height-tight);
}

.compact-empty {
  padding: 14px;
}

.detail-disclosure {
  min-width: 0;
  border: 1px solid var(--glass-border);
  border-radius: var(--glass-radius);
  background: var(--glass-panel);
  box-shadow: var(--panel-shadow), var(--inner-highlight);
  overflow: hidden;
}

.detail-disclosure summary {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  min-height: 52px;
  padding: 14px 16px;
  cursor: pointer;
  color: var(--text);
  font-weight: 800;
  list-style: none;
}

.detail-disclosure summary::-webkit-details-marker {
  display: none;
}

.detail-disclosure summary::after {
  content: "展开";
  flex: 0 0 auto;
  color: var(--muted);
  font-size: 12px;
  font-weight: 700;
}

.detail-disclosure[open] summary {
  border-bottom: 1px solid var(--glass-separator);
}

.detail-disclosure[open] summary::after {
  content: "收起";
}

.detail-disclosure summary small {
  color: var(--muted);
  font-weight: 600;
}

.detail-disclosure > form,
.detail-disclosure > .dialog-summary,
.detail-disclosure > .actions {
  margin: 14px 16px;
}

.detail-disclosure > form {
  margin-top: 14px;
}

.nested-disclosure {
  margin-top: 12px;
  box-shadow: var(--inner-highlight);
}

.nested-disclosure summary {
  min-height: 44px;
  padding: 10px 12px;
}

.nested-table-scroll {
  overflow-x: auto;
  padding: 12px;
}

.student-detail-layout {
  display: grid;
  grid-template-columns: minmax(300px, 420px) 1fr;
  gap: 16px;
  align-items: start;
  margin-bottom: 24px;
}

.student-detail-layout > .panel {
  min-width: 0;
}

.student-cards-panel {
  display: grid;
  gap: 12px;
  align-self: start;
}

.student-sales-orders {
  display: grid;
  gap: 10px;
  width: min(100%, 1120px);
  padding: 12px;
  border: 1px solid rgba(138, 101, 0, 0.22);
  border-radius: var(--cluster-radius);
  background: rgba(255, 249, 232, 0.68);
  box-shadow: var(--inner-highlight);
}

.student-sales-orders-heading {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
}

.student-sales-orders-heading strong {
  color: var(--text);
}

.student-sales-orders-heading span {
  color: var(--muted);
  font-size: 12px;
  line-height: var(--line-height-tight);
}

.student-sales-order-list {
  display: grid;
  gap: 8px;
}

.student-sales-order-card {
  display: grid;
  grid-template-columns: minmax(190px, 0.9fr) minmax(360px, 1.6fr) minmax(96px, auto);
  align-items: center;
  gap: 12px;
  padding: 10px;
  border: 1px solid rgba(255, 255, 255, 0.58);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.46);
}

.student-sales-order-card > div {
  min-width: 0;
}

.student-sales-order-card > div strong,
.student-sales-order-card > div span {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.student-sales-order-card > div span {
  margin-top: 3px;
  color: var(--muted);
  font-size: 12px;
}

.student-sales-order-card dl {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 8px;
  margin: 0;
}

.student-sales-order-card dt {
  color: var(--muted);
  font-size: 11px;
}

.student-sales-order-card dd {
  margin: 2px 0 0;
  color: var(--text);
  font-weight: 700;
  white-space: nowrap;
}

.student-sales-order-card > button {
  min-width: 96px;
  min-height: 40px;
  justify-self: end;
}

@media (max-width: 760px) {
  .student-sales-orders-heading,
  .student-sales-order-card {
    align-items: stretch;
  }

  .student-sales-orders-heading {
    display: grid;
  }

  .student-sales-order-card {
    grid-template-columns: 1fr;
  }

  .student-sales-order-card dl {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

.student-profile-grid {
  grid-template-columns: repeat(2, minmax(120px, 1fr));
  gap: 8px 16px;
}

.profile-note {
  margin-top: 12px;
  padding-top: 10px;
  border-top: 1px solid var(--line);
}

.profile-note span {
  display: block;
  color: var(--muted);
  font-size: 12px;
  margin-bottom: 6px;
}

.profile-note p {
  margin: 0;
  line-height: 1.45;
  word-break: break-word;
}

.student-profile-panel {
  display: grid;
  align-content: start;
}

.student-profile-panel .section-header {
  margin-bottom: 12px;
}

.student-profile-panel .detail-grid dt {
  margin-bottom: 2px;
}

.student-profile-panel .profile-note {
  display: flex;
  gap: 14px;
  align-items: baseline;
}

.student-profile-panel .profile-note span {
  flex: 0 0 auto;
  margin-bottom: 0;
}

.student-profile-panel .profile-note p {
  min-width: 0;
}

.current-card {
  display: grid;
  gap: 12px;
}

.student-card-summary-list {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(240px, 292px));
  justify-content: start;
  align-items: start;
  gap: 8px;
  max-width: 100%;
  padding: 2px 2px 4px;
}

.student-card-summary {
  width: 100%;
  min-width: 0;
  display: grid;
  gap: 8px;
  padding: 10px;
  border: 1px solid rgba(60, 60, 67, 0.12);
  border-radius: var(--radius);
  background: rgba(255, 255, 255, 0.68);
  box-shadow: 0 7px 18px rgba(29, 29, 31, 0.07), 0 0 0 1px rgba(255, 255, 255, 0.72), var(--inner-highlight);
  cursor: pointer;
  transition: border-color 160ms ease, background 160ms ease, box-shadow 160ms ease, transform 160ms ease;
}

.student-card-summary:hover {
  border-color: rgba(10, 132, 255, 0.24);
  background: rgba(255, 255, 255, 0.8);
  box-shadow: 0 10px 24px rgba(29, 29, 31, 0.1), 0 0 0 1px rgba(255, 255, 255, 0.82), var(--inner-highlight);
  transform: translateY(-1px);
}

.student-card-summary:focus-visible {
  outline: none;
  border-color: var(--focus-border);
  box-shadow: var(--focus-ring), 0 10px 24px rgba(29, 29, 31, 0.1), var(--inner-highlight);
}

.student-card-summary-head {
  display: flex;
  justify-content: space-between;
  gap: 8px;
  align-items: flex-start;
  min-width: 0;
}

.student-card-summary-identity,
.student-card-summary-title {
  min-width: 0;
}

.student-card-summary-identity {
  display: flex;
  align-items: center;
  gap: 8px;
}

.student-card-summary-title {
  display: grid;
  gap: 2px;
}

.student-card-summary-head strong,
.student-card-summary-head .subline {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.student-card-summary .status {
  flex: 0 0 auto;
}

.student-card-summary-metrics {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.student-card-summary-metrics > div {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
  flex: 1 1 116px;
  min-width: 0;
  padding: 6px 8px;
  border-radius: 6px;
  background: rgba(255, 255, 255, 0.42);
}

.student-card-summary-metrics span {
  color: var(--muted);
  font-size: 11px;
}

.student-card-summary-metrics strong {
  color: var(--text);
  font-weight: 700;
  line-height: var(--line-height-tight);
  white-space: nowrap;
}

.student-card-summary-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 10px;
  color: var(--muted);
  font-size: 12px;
  line-height: var(--line-height-tight);
}

.student-card-summary-actions {
  margin-top: 0;
  gap: 6px;
}

.student-card-summary-actions button {
  cursor: pointer;
  min-height: 32px;
  padding: 5px 10px;
}

.student-card-detail-dialog {
  width: min(760px, calc(100vw - 32px));
}

.student-card-detail-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
}

.student-card-detail-grid > div {
  display: grid;
  align-content: start;
  gap: 5px;
  min-width: 0;
  padding: 12px;
  border: 1px solid var(--line);
  border-radius: var(--cluster-radius);
  background: rgba(255, 255, 255, 0.44);
}

.student-card-detail-grid > div.wide {
  grid-column: span 2;
}

.student-card-detail-grid span {
  color: var(--muted);
  font-size: 12px;
}

.student-card-detail-grid strong {
  overflow-wrap: anywhere;
}

@media (max-width: 700px) {
  .student-card-summary-list,
  .student-card-detail-grid {
    grid-template-columns: minmax(0, 1fr);
  }

  .student-card-detail-grid > div.wide {
    grid-column: auto;
  }
}

.membership-cell {
  min-width: 150px;
}

.grid-two {
  display: grid;
  grid-template-columns: minmax(280px, 380px) 1fr;
  gap: var(--content-gap);
  align-items: start;
}

.grid-two > :only-child,
.grid-three > :only-child {
  grid-column: 1 / -1;
}

.profile-stack {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--content-gap);
  align-items: stretch;
}

.profile-stack > .panel {
  min-width: 0;
}

.profile-stack .clock-panel {
  width: 100%;
  max-width: none;
}

.account-section-header {
  align-items: flex-start;
}

.account-actions {
  display: flex;
  flex: 0 0 auto;
  flex-wrap: wrap;
  gap: 8px;
  justify-content: flex-end;
}

.profile-action-dialog {
  width: min(720px, calc(100vw - 32px));
}

.profile-action-dialog .form-grid {
  margin-top: 0;
}

.course-settings-layout {
  display: grid;
  grid-template-columns: minmax(420px, 0.9fr) minmax(420px, 1.1fr);
  gap: var(--content-gap);
  align-items: start;
  margin: 0;
}

.course-settings-panel .form-grid {
  margin-top: 12px;
}

.course-roster-panel form {
  display: grid;
  gap: 12px;
}

.course-roster-panel .checkbox-grid,
.course-card-plan-panel .checkbox-grid,
.plan-course-panel .checkbox-grid,
.plan-store-panel .checkbox-grid,
.student-store-panel .checkbox-grid {
  grid-template-columns: repeat(auto-fill, minmax(190px, 1fr));
  max-height: 380px;
  overflow: auto;
  padding-right: 2px;
}

.course-roster-dialog {
  width: min(980px, calc(100vw - 32px));
}

.course-roster-dialog .dialog-header {
  align-items: flex-start;
  gap: 16px;
}

.course-roster-dialog-meta {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 8px;
  margin-left: auto;
}

.roster-capacity-pill,
.course-roster-status {
  display: inline-flex;
  align-items: center;
  min-height: 34px;
  padding: 7px 11px;
  border: 1px solid rgba(255, 255, 255, 0.62);
  border-radius: 8px;
  background: var(--glass-tile);
  color: var(--text);
  font-size: 13px;
  font-weight: 650;
  white-space: nowrap;
  box-shadow: var(--inner-highlight);
}

.course-roster-status.is-full {
  border-color: rgba(245, 158, 11, 0.34);
  background: rgba(245, 158, 11, 0.1);
  color: #8a5a00;
}

.course-roster-toolbar {
  display: grid;
  grid-template-columns: repeat(2, minmax(220px, 1fr)) auto;
  align-items: end;
  gap: 12px;
  margin-bottom: 12px;
}

.course-roster-global-search-button {
  min-height: var(--control-height);
  white-space: nowrap;
}

.course-roster-search-results {
  display: grid;
  gap: 8px;
  margin: 0 0 12px;
}

@media (max-width: 760px) {
  .course-roster-toolbar {
    grid-template-columns: 1fr;
  }
}

.course-roster-empty {
  padding: 14px;
  color: var(--muted);
}

.course-roster-dialog .check-row.is-disabled,
.course-roster-dialog .check-row.is-disabled:hover {
  border-color: rgba(148, 163, 184, 0.34);
  background: rgba(148, 163, 184, 0.14);
  color: rgba(71, 85, 105, 0.66);
  cursor: not-allowed;
  box-shadow: none;
}

.course-roster-dialog .check-row.is-disabled > span,
.course-roster-dialog .check-row.is-disabled small {
  color: rgba(71, 85, 105, 0.66);
}

.course-card-plan-panel,
.plan-course-panel,
.plan-store-panel,
.student-store-panel {
  display: grid;
  gap: 6px;
}

.student-store-panel .field-title {
  color: var(--muted);
  font-size: 13px;
  font-weight: 650;
}

.course-schedule-rule-list {
  display: grid;
  gap: 5px;
}

.course-weekday-rule {
  display: grid;
  align-items: center;
  grid-template-columns: 88px minmax(0, 2fr) minmax(0, 1fr);
  gap: 6px;
  padding: 5px 6px;
  border: 1px solid var(--glass-separator);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.28);
}

.course-weekday-rule-head {
  padding: 0 7px;
  border: 0;
  background: transparent;
  color: var(--muted);
  font-size: 11px;
  font-weight: 700;
}

.course-weekday-check {
  min-height: 30px;
}

.course-weekday-rule .course-weekday-check {
  min-height: 30px;
  padding: 4px 6px;
  gap: 6px;
}

.course-weekday-rule label,
.course-rule-control {
  margin: 0;
  min-width: 0;
}

.course-weekday-location > .field-title {
  display: none;
}

.course-weekday-location .course-location-pair {
  gap: 5px;
}

.course-weekday-location .course-location-arrow {
  padding-top: 0;
}

.course-weekday-rule select,
.course-weekday-rule input[readonly] {
  min-height: 30px;
  padding: 6px 8px;
  font-size: 12px;
}

.course-weekday-check span {
  display: inline;
  margin: 0;
  font-size: 12px;
  line-height: 1.2;
}

.plan-scope-panel {
  display: grid;
  gap: 8px;
}

.plan-course-options,
.plan-store-options,
.course-card-plan-options {
  display: grid;
  gap: 8px;
}

.scope-button-row {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.scope-toggle {
  min-width: 130px;
  border-color: var(--glass-border);
  background: var(--glass-control);
  color: var(--text);
  font-weight: 700;
}

.scope-toggle.is-active {
  border-color: rgba(60, 60, 67, 0.22);
  background: var(--nav-active);
  color: var(--text);
  box-shadow: var(--inner-highlight);
}

.segmented-control {
  display: inline-flex;
  align-items: center;
  gap: 0;
  border: 1px solid var(--glass-border);
  border-radius: 8px;
  overflow: hidden;
  background: var(--glass-control);
  box-shadow: var(--inner-highlight);
  backdrop-filter: blur(14px) saturate(1.12);
  -webkit-backdrop-filter: blur(14px) saturate(1.12);
}

.segmented-control button {
  border: 0;
  border-radius: 0;
  background: transparent;
  color: var(--muted);
  min-width: 72px;
  height: 36px;
}

.segmented-control button + button {
  border-left: 1px solid var(--line);
}

.segmented-control button.is-active {
  background: var(--nav-active);
  color: var(--text);
  box-shadow: var(--inner-highlight);
}

.course-calendar {
  display: grid;
  gap: 16px;
}

.course-calendar-panel {
  display: grid;
  gap: var(--surface-gap);
}

.course-calendar-embedded {
  display: grid;
  gap: var(--surface-gap);
}

.course-calendar-panel > .section-header {
  margin-bottom: 0;
}

.course-detail-sessions-panel {
  display: grid;
  gap: 14px;
  overflow: visible;
  padding: 16px 18px 18px;
}

.course-detail-sessions-table-wrap {
  overflow: auto;
  border-top: 1px solid var(--line);
}

.course-detail-calendar-block {
  display: grid;
  gap: 12px;
  padding-top: 14px;
  border-top: 1px solid var(--line);
}

.course-detail-calendar-block .table-heading {
  padding: 0;
  border-bottom: 0;
  background: transparent;
}

.calendar-month {
  background: var(--glass-panel);
  border: 1px solid var(--glass-border);
  border-radius: var(--glass-radius);
  box-shadow: var(--panel-shadow), var(--inner-highlight);
  backdrop-filter: blur(20px) saturate(1.18);
  -webkit-backdrop-filter: blur(20px) saturate(1.18);
  overflow: hidden;
}

.calendar-month-title {
  padding: 12px 14px;
  font-weight: 800;
  border-bottom: 1px solid var(--line);
}

.calendar-grid {
  display: grid;
  grid-template-columns: repeat(7, minmax(120px, 1fr));
}

.calendar-weekdays {
  background: rgba(255, 255, 255, 0.42);
  color: var(--muted);
  font-size: 12px;
  font-weight: 700;
}

.calendar-weekdays div {
  padding: 8px 10px;
  border-right: 1px solid var(--line);
}

.calendar-day {
  min-height: 132px;
  padding: 8px;
  border-top: 1px solid var(--line);
  border-right: 1px solid var(--line);
  background: rgba(255, 255, 255, 0.38);
}

.calendar-week .calendar-day {
  min-height: 260px;
}

.calendar-day.is-blank,
.calendar-day.is-muted {
  background: rgba(247, 247, 249, 0.36);
}

.calendar-day-number {
  font-weight: 800;
  margin-bottom: 6px;
}

.calendar-day-sessions {
  display: grid;
  gap: 6px;
}

.calendar-session {
  width: 100%;
  height: auto;
  min-height: 44px;
  padding: 6px;
  border-radius: 6px;
  border: 1px solid rgba(255, 255, 255, 0.62);
  background: rgba(255, 255, 255, 0.5);
  box-shadow: var(--inner-highlight);
  backdrop-filter: blur(12px) saturate(1.12);
  -webkit-backdrop-filter: blur(12px) saturate(1.12);
  color: var(--text);
  text-align: left;
  line-height: 1.35;
  display: grid;
  gap: 6px;
  font: inherit;
}

button.calendar-session {
  appearance: none;
  -webkit-appearance: none;
  cursor: pointer;
}

button.calendar-session:focus-visible {
  outline: 2px solid var(--focus);
  outline-offset: 2px;
  border-radius: 4px;
}

.calendar-session > span,
.calendar-session > small {
  display: block;
  overflow-wrap: anywhere;
}

.calendar-session > span {
  font-size: 12px;
  font-weight: 800;
}

.calendar-session > small {
  margin-top: 2px;
  color: var(--muted);
  font-size: 11px;
}

.calendar-session.is-confirmed {
  border-color: #c9ded0;
  background: #f1f8f3;
}

.calendar-session.is-started {
  border-color: #dfcf9a;
  background: #fff9e8;
}

.calendar-session.is-preview {
  cursor: default;
  border-color: rgba(10, 132, 255, 0.24);
  background: rgba(255, 255, 255, 0.68);
}

.calendar-session.is-conflict {
  border-color: rgba(255, 59, 48, 0.86);
  background: rgba(255, 241, 240, 0.92);
  box-shadow: 0 0 0 2px rgba(255, 59, 48, 0.18), var(--inner-highlight);
}

.calendar-session.is-conflict-existing {
  background: rgba(255, 230, 228, 0.96);
  border-style: solid;
}

.calendar-conflict-message {
  color: #b42318;
  font-weight: 700;
}

input.time-range-invalid,
label.has-time-range-error input {
  border-color: rgba(255, 59, 48, 0.92) !important;
  box-shadow: 0 0 0 3px rgba(255, 59, 48, 0.18), var(--inner-highlight) !important;
}

label.has-time-range-error > span {
  color: #b42318;
}

.calendar-more {
  color: var(--muted);
  font-size: 12px;
}

.course-schedule-preview {
  display: grid;
  gap: 10px;
  min-width: 0;
  max-height: min(58vh, 620px);
  overflow: auto;
  padding: 10px;
  border: 1px solid rgba(255, 255, 255, 0.54);
  border-radius: var(--cluster-radius);
  background: rgba(255, 255, 255, 0.24);
  box-shadow: var(--inner-highlight);
}

.course-schedule-preview-head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 8px;
}

.course-schedule-preview-head strong {
  color: var(--text);
}

.course-schedule-preview-head span {
  color: var(--muted);
  font-size: 12px;
}

.course-schedule-rules-editor {
  display: grid;
  gap: 10px;
}

.course-rule-list-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.course-rule-list-head > div {
  display: grid;
  gap: 2px;
  min-width: 0;
}

.course-rule-list-head strong {
  color: var(--text);
  font-size: 13px;
}

.course-rule-list-head span {
  color: var(--muted);
  font-size: 12px;
}

.course-rule-list-head .add-course-rule {
  flex: 0 0 auto;
  min-height: 32px;
  padding: 6px 10px;
}

.course-rule-list {
  display: grid;
  gap: 0;
}

.course-rule-grid-head {
  display: grid;
  grid-template-columns: 72px minmax(260px, 2fr) minmax(170px, 1.1fr) 58px;
  grid-template-areas:
    "weekday location teacher action"
    ". start end units";
  gap: 6px;
  padding: 0 8px;
  color: var(--muted);
  font-size: 11px;
  font-weight: 600;
}

.course-rule-row {
  display: grid;
  gap: 6px;
  padding: 10px 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}

.course-rule-primary-row,
.course-rule-secondary-row {
  display: grid;
  gap: 8px;
  align-items: end;
  min-width: 0;
}

.course-rule-primary-row > *,
.course-rule-secondary-row > * {
  min-width: 0;
}

.course-rule-primary-row {
  grid-template-columns: 82px repeat(2, minmax(0, 1fr));
  grid-template-areas: "weekday location teacher";
}

.course-rule-secondary-row {
  grid-template-columns: 82px minmax(0, 1fr) minmax(0, 1fr) 64px;
  grid-template-areas: "action start end units";
}

.course-rule-row + .course-rule-row {
  border-top: 1px solid var(--glass-separator);
}

.course-rule-weekday {
  grid-area: weekday;
}

.course-rule-store {
  grid-area: store;
}

.course-rule-classroom {
  grid-area: classroom;
}

.course-rule-location {
  grid-area: location;
}

.course-rule-teacher {
  grid-area: teacher;
}

.course-rule-start {
  grid-area: start;
}

.course-rule-end {
  grid-area: end;
}

.course-rule-units {
  grid-area: units;
}

.course-rule-action {
  grid-area: action;
}

.course-rule-row label {
  min-width: 0;
  margin: 0;
}

.course-rule-row .course-location-field > .field-title {
  display: none;
}

.course-rule-row .course-location-pair {
  gap: 6px;
}

.course-rule-row .course-location-arrow {
  padding-top: 0;
}

.course-rule-row label span {
  display: none;
}

.course-rule-row input,
.course-rule-row select,
.course-rule-row .course-location-trigger {
  width: 100%;
  min-height: 36px;
  height: 36px;
  padding: 6px 8px;
}

.course-rule-row .remove-course-rule {
  min-height: 36px;
  height: 36px;
  padding: 0 8px;
  white-space: nowrap;
}

.compact-actions {
  margin-top: 0;
}

@media (max-width: 900px) {
  .course-location-pair,
  .course-location-menu {
    grid-template-columns: 1fr;
  }

  .course-location-menu {
    width: min(360px, calc(100vw - 40px));
  }

  .course-location-column + .course-location-column {
    border-left: 0;
    border-top: 1px solid var(--glass-separator);
  }

  .course-location-arrow {
    display: none;
  }

  .course-rule-date-range {
    grid-template-columns: 1fr;
  }

  .course-rule-list-head {
    align-items: stretch;
    flex-direction: column;
  }

  .course-rule-grid-head {
    display: none;
  }

  .course-rule-row {
    padding: 6px;
  }

  .course-rule-primary-row,
  .course-rule-secondary-row {
    grid-template-columns: 1fr 1fr;
  }

  .course-rule-weekday,
  .course-rule-store,
  .course-rule-classroom,
  .course-rule-location,
  .course-rule-teacher,
  .course-rule-start,
  .course-rule-end,
  .course-rule-units,
  .course-rule-action {
    grid-area: auto;
  }

  .course-rule-location,
  .course-weekday-location,
  .course-rule-teacher {
    grid-column: 1 / -1;
  }

  .course-rule-row label span {
    display: block;
    font-size: 11px;
    color: var(--muted);
  }

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

.course-schedule-conflict-summary {
  display: flex;
  align-items: center;
  margin-bottom: 12px;
  padding: 9px 11px;
  border: 1px solid rgba(255, 59, 48, 0.28);
  border-radius: 8px;
  border-color: rgba(255, 59, 48, 0.28);
  background: rgba(255, 241, 240, 0.76);
  color: #b42318;
}

.course-schedule-conflict-summary strong {
  color: #b42318;
  line-height: 1.3;
  white-space: nowrap;
}

.course-preview-calendar {
  min-width: 860px;
}

.calendar-empty {
  color: var(--muted);
  font-size: 12px;
}

.notice.warning {
  margin-bottom: 12px;
  padding: 10px 12px;
  border: 1px solid #dfcf9a;
  border-radius: 8px;
  background: #fff9e8;
  color: var(--gold);
}

.plan-course-panel.is-disabled .checkbox-grid {
  opacity: 0.55;
}

.plan-course-panel.is-disabled .check-row {
  background: #f7f7f9;
}

.checkbox-actions {
  margin-top: 2px;
}

.checkbox-actions button {
  padding: 6px 10px;
}

.field-title {
  display: block;
  font-size: 13px;
  color: var(--muted);
}

.roster-actions {
  justify-content: flex-end;
}

.grid-three {
  display: grid;
  grid-template-columns: repeat(3, minmax(220px, 1fr));
  gap: var(--content-gap);
  align-items: start;
}

.purchase-section .form-grid,
.management-panel .form-grid {
  margin-top: 0;
}

.management-panel {
  margin-top: var(--content-gap);
}

.management-panel .section-header {
  align-items: center;
}

.compact-form {
  align-items: end;
}

.card-summary-table table,
.price-detail-table table,
.student-table,
.student-card-table table {
  min-width: 620px;
}

.student-table {
  min-width: 1280px;
  table-layout: fixed;
}

.student-table .student-name-col {
  width: 9%;
}

.student-table .student-store-col {
  width: 13%;
}

.student-table .student-gender-col,
.student-table .student-age-col {
  width: 5%;
}

.student-table .student-school-col {
  width: 14%;
}

.student-table .student-guardian-col {
  width: 12%;
}

.student-table .student-birthday-col {
  width: 9%;
}

.student-table .student-status-col {
  width: 7%;
}

.student-table .student-membership-col {
  width: 17%;
}

.student-table .student-actions-col {
  width: 9%;
}

.student-store-cell {
  display: grid;
  gap: 3px;
  max-width: 220px;
  line-height: var(--line-height-tight);
}

.student-store-cell span {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.usage-log-table table {
  min-width: 760px;
}

.student-course-enrollment-table table {
  min-width: 1160px;
  table-layout: fixed;
}

.student-course-enrollment-table th {
  white-space: nowrap;
}

.student-course-enrollment-table td {
  vertical-align: top;
  overflow-wrap: anywhere;
}

.student-course-enrollment-table .student-course-name-col {
  width: 10%;
}

.student-course-enrollment-table .student-course-location-col {
  width: 11%;
}

.student-course-enrollment-table .student-course-tags-col {
  width: 8%;
}

.student-course-enrollment-table .student-course-teacher-col {
  width: 12%;
}

.student-course-enrollment-table .student-course-period-col {
  width: 14%;
}

.student-course-enrollment-table .student-course-time-col,
.student-course-enrollment-table .student-course-units-col {
  width: 8%;
}

.student-course-enrollment-table .student-course-check-col {
  width: 10%;
}

.student-course-enrollment-table .student-course-card-col {
  width: 19%;
}

.student-course-tags span {
  display: inline-flex;
  align-items: center;
  min-height: 24px;
  padding: 2px 7px;
  border: 1px solid rgba(10, 132, 255, 0.16);
  border-radius: 6px;
  background: rgba(239, 247, 255, 0.7);
  color: var(--primary-dark);
  white-space: nowrap;
}

.student-course-teacher {
  line-height: var(--line-height-tight);
}

.student-course-teacher strong,
.student-course-teacher small {
  display: block;
  min-width: 0;
  overflow-wrap: anywhere;
}

.student-course-teacher small {
  margin-top: 3px;
  color: var(--muted);
}

.student-course-time,
.student-course-units,
.student-course-check-date {
  white-space: nowrap;
}

.student-course-enrollment-table .course-card-options {
  display: block;
  min-width: 0;
  width: 100%;
}

.student-course-enrollment-table .course-card-option {
  display: grid;
  grid-template-columns: 8px minmax(0, 1fr);
  gap: 7px;
  width: 100%;
  max-width: none;
  min-height: 48px;
  padding: 7px 9px;
}

.student-course-enrollment-table .course-card-option::before {
  position: static;
  grid-column: 1;
  align-self: start;
  width: 7px;
  height: 7px;
  margin-top: 5px;
  border-radius: 999px;
  content: "";
}

.student-course-enrollment-table .course-card-option.usable::before {
  background: var(--primary);
  box-shadow: 0 0 8px rgba(10, 132, 255, 0.28);
}

.student-course-enrollment-table .course-card-option.blocked::before {
  background: var(--danger);
  box-shadow: 0 0 8px rgba(214, 65, 57, 0.2);
}

.student-course-enrollment-table .course-card-option.blocked {
  border-color: rgba(214, 65, 57, 0.18);
  background: rgba(255, 246, 245, 0.72);
}

.student-call-records-panel {
  margin-top: 16px;
}

.student-call-record-form {
  display: grid;
  grid-template-columns: minmax(150px, 0.55fr) minmax(210px, 0.8fr) minmax(320px, 2fr) auto;
  gap: 12px;
  align-items: end;
  padding: 16px;
  border-bottom: 1px solid var(--glass-separator);
}

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

.student-call-record-form label > span {
  display: block;
  margin-bottom: 7px;
}

.student-call-record-form textarea {
  min-height: 76px;
  resize: vertical;
}

.student-call-record-form input[readonly] {
  color: var(--muted);
  background: rgba(248, 248, 250, 0.72);
}

.student-call-record-form .form-actions {
  align-self: end;
  padding-bottom: 1px;
}

.student-call-record-table {
  min-width: 720px;
  table-layout: fixed;
}

.student-call-record-table th:first-child {
  width: 16%;
}

.student-call-record-table th:nth-child(2) {
  width: 24%;
}

.student-call-record-content {
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}

@media (max-width: 980px) {
  .student-call-record-form {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .student-call-record-matter,
  .student-call-record-form .form-actions {
    grid-column: 1 / -1;
  }

  .student-call-record-form .form-actions button {
    width: 100%;
  }
}

@media (max-width: 620px) {
  .student-call-record-form {
    grid-template-columns: minmax(0, 1fr);
  }

  .student-call-record-matter,
  .student-call-record-form .form-actions {
    grid-column: auto;
  }
}

.course-card-option-copy {
  display: grid;
  grid-column: 2;
  gap: 3px;
  min-width: 0;
}

.course-card-option-copy strong,
.course-card-option-copy small {
  min-width: 0;
  overflow-wrap: anywhere;
}

.course-card-option-copy small {
  line-height: var(--line-height-tight);
}

.student-course-debt-table table {
  min-width: 900px;
}

.panel {
  padding: var(--panel-padding);
}

.table-panel {
  overflow: auto;
}

.table-heading {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  align-items: center;
  padding: 12px;
  border-bottom: 1px solid var(--line);
  background: var(--panel);
}

.table-heading > div:first-child {
  display: grid;
  gap: 3px;
  min-width: 0;
}

.table-heading strong {
  overflow: hidden;
  font-size: 18px;
  line-height: var(--line-height-tight);
  text-overflow: ellipsis;
  white-space: nowrap;
  word-break: keep-all;
}

.table-heading span {
  overflow: hidden;
  color: var(--muted);
  font-size: 14px;
  line-height: var(--line-height-tight);
  text-overflow: ellipsis;
  white-space: nowrap;
  word-break: keep-all;
}

.table-heading .actions {
  flex: 0 0 auto;
}

#stores-list-section .table-heading,
#store-users-section .table-heading,
#classrooms-list-section .table-heading {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
}

#stores-list-section .table-heading > .actions,
#store-users-section .table-heading > .actions,
#classrooms-list-section .table-heading > .actions {
  display: flex;
  min-width: max-content;
  margin-left: auto;
  flex-wrap: nowrap;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
}

#stores-list-section .table-heading .page-section-collapse-toggle,
#store-users-section .table-heading .page-section-collapse-toggle,
#classrooms-list-section .table-heading .page-section-collapse-toggle {
  margin-left: 0;
}

table {
  width: 100%;
  border-collapse: collapse;
  min-width: 0;
  table-layout: auto;
}

.table-panel table:has(thead th:nth-child(7)) {
  min-width: 760px;
}

.table-panel table:has(thead th:nth-child(9)) {
  min-width: 920px;
}

.table-panel table:has(thead th:nth-child(11)) {
  min-width: 1080px;
}

th,
td {
  padding: 10px 12px;
  border-bottom: 1px solid var(--line);
  text-align: left;
  vertical-align: middle;
}

th {
  background: #f5f5f7;
  font-weight: 700;
  color: #3a3a3c;
  position: sticky;
  top: 0;
}

tr:last-child td {
  border-bottom: 0;
}

.small-text {
  max-width: 360px;
  font-size: 12px;
  line-height: 1.5;
  color: var(--muted);
  word-break: break-word;
}

.subline {
  margin-top: 3px;
  font-size: 12px;
}

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

.attachment-status-header {
  align-items: flex-start;
}

.attachment-status-header > div:first-child {
  min-width: 0;
}

.attachment-status-header p {
  word-break: break-all;
}

.attachment-status-actions {
  flex: 0 0 auto;
  justify-content: flex-end;
}

.attachment-status-panel .small-text {
  max-width: none;
  margin-top: var(--surface-gap);
}

.compact-actions {
  gap: 6px;
}

.card-actions {
  flex-wrap: nowrap;
}

.card-actions .inline-form {
  min-width: auto;
}

.card-actions input {
  width: 72px;
}

.inline-form {
  display: flex;
  gap: 8px;
  align-items: center;
  min-width: 260px;
}

.inline-form input {
  width: 82px;
}

.checkbox-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: 8px;
  width: 100%;
}

.check-row {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px;
  border: 1px solid rgba(255, 255, 255, 0.6);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.42);
  box-shadow: var(--inner-highlight);
  backdrop-filter: blur(10px) saturate(1.08);
  -webkit-backdrop-filter: blur(10px) saturate(1.08);
}

.check-row input {
  width: auto;
}

.check-row small {
  display: block;
  color: var(--muted);
}

.course-card-options {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  min-width: 260px;
  position: relative;
  align-items: flex-start;
}

.course-card-options.has-issue {
  padding-right: 30px;
}

.course-card-limit-trigger {
  position: absolute;
  top: 0;
  right: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  min-height: 24px;
  padding: 0;
  border-radius: 999px;
  border: 1px solid rgba(191, 120, 20, 0.26);
  background: rgba(255, 244, 214, 0.86);
  color: #8f5b00;
  font-weight: 800;
  line-height: 1;
  box-shadow: var(--inner-highlight);
  cursor: pointer;
}

.course-card-option {
  display: inline-grid;
  gap: 2px;
  max-width: 240px;
  padding: 6px 8px;
  border: 1px solid rgba(255, 255, 255, 0.6);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.42);
  font-size: 12px;
  box-shadow: var(--inner-highlight);
  backdrop-filter: blur(10px) saturate(1.08);
  -webkit-backdrop-filter: blur(10px) saturate(1.08);
}

.course-card-option.usable {
  border-color: #c9ded0;
  background: #f1f8f3;
}

.course-card-option.blocked {
  border-color: rgba(138, 123, 99, 0.24);
  background: #fbfaf7;
}

.course-card-option small {
  color: var(--muted);
}

.limit-explain-list {
  display: grid;
  gap: 10px;
}

.limit-explain-list > div {
  display: grid;
  gap: 5px;
  padding: 12px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.48);
}

.limit-explain-list span {
  color: var(--muted);
  font-size: 13px;
}

.limit-explain-list strong {
  color: var(--text);
  font-size: 15px;
  line-height: var(--line-height-normal);
}

.status {
  display: inline-flex;
  align-items: center;
  min-height: 24px;
  padding: 2px 8px;
  border-radius: 999px;
  border: 1px solid var(--line);
  background: rgba(255, 255, 255, 0.4);
  color: #3a3a3c;
  white-space: nowrap;
}

.status.active,
.status.student,
.status.issued,
.status.paid,
.status.posted,
.status.approved,
.status.present,
.status.confirmed,
.status.auto_confirmed,
.status.settled,
.status.success {
  background: rgba(241, 248, 243, 0.64);
  color: var(--success);
  border-color: #c9ded0;
}

.plan-price-source {
  display: inline;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  white-space: nowrap;
}

.plan-price-source.promotion {
  color: var(--success);
  font-weight: 600;
}

.plan-price-source.base {
  color: var(--muted);
}

.status.income {
  background: rgba(255, 242, 241, 0.66);
  color: var(--danger);
  border-color: #e8c0bd;
}

.status.expense {
  background: rgba(241, 248, 243, 0.64);
  color: var(--success);
  border-color: #c9ded0;
}

.status.draft,
.status.pending,
.status.consulting,
.status.pending_purchase,
.status.not_effective,
.status.frozen,
.status.late,
.status.leave,
.status.overtime {
  background: rgba(251, 247, 234, 0.7);
  color: var(--gold);
  border-color: #dfcf9a;
}

.status.voided,
.status.disabled,
.status.unavailable,
.status.expired,
.status.used_up,
.status.absent,
.status.error {
  background: rgba(255, 242, 241, 0.66);
  color: var(--danger);
  border-color: #e8c0bd;
}

.status.no_card {
  background: rgba(255, 255, 255, 0.4);
  color: var(--muted);
  border-color: var(--line);
}

.status.completed {
  background: rgba(242, 243, 245, 0.82);
  color: var(--muted);
  border-color: var(--line);
}

.course-row-status-line {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-top: 4px;
}

.course-debt-alert {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 18px;
  height: 18px;
  border-radius: 999px;
  border: 1px solid #dfcf9a;
  background: rgba(251, 247, 234, 0.82);
  color: var(--gold);
  font-size: 12px;
  font-weight: 900;
  line-height: 1;
}

.course-completed-filter {
  min-width: 150px;
  min-height: 40px;
  margin-left: auto;
  padding: 8px 10px;
}

.course-completed-filter > span {
  font-weight: 700;
  white-space: nowrap;
}

.course-list-filter > label:not(.course-completed-filter) {
  flex: 1 1 0;
  width: auto;
  min-width: 160px;
}

.course-list-filter > label:not(.course-completed-filter) > input,
.course-list-filter > label:not(.course-completed-filter) > select {
  width: 100%;
  min-width: 0;
  max-width: 100%;
}

.course-list-filter .course-completed-filter {
  margin-left: 0;
}

.toolbar {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  align-items: end;
  margin-bottom: 12px;
}

.toolbar label {
  min-width: 150px;
}

.table-panel > .toolbar {
  margin: 0;
  padding: 14px 12px 12px;
  border-bottom: 1px solid rgba(60, 60, 67, 0.08);
}

.date-range-fields {
  display: flex;
  flex: 0 1 auto;
  flex-wrap: wrap;
  gap: 10px;
  align-items: end;
}

.date-range-fields label {
  min-width: 150px;
}

.date-range-fields .date-range-preset-label {
  min-width: 160px;
}

.notice-list {
  display: grid;
  gap: 8px;
}

.notice-item {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  border-bottom: 1px solid var(--line);
  padding: 8px 0;
}

.notice-item:last-child {
  border-bottom: 0;
}

.dashboard-low-cards-section {
  margin: 0;
}

.dashboard-low-card-panel {
  overflow: hidden;
}

.dashboard-low-card-heading {
  align-items: center;
  margin-bottom: 16px;
}

.low-card-count {
  display: inline-flex;
  align-items: baseline;
  gap: 5px;
  flex: 0 0 auto;
  padding: 6px 10px;
  border: 1px solid rgba(191, 112, 0, 0.18);
  border-radius: 999px;
  background: rgba(255, 184, 0, 0.08);
  color: #7a4a00;
  font-size: 12px;
  line-height: 1;
}

.low-card-count strong {
  font-size: 15px;
}

.low-card-grid {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 10px;
}

.low-card-item {
  min-width: 0;
  padding: 12px;
  border: 1px solid rgba(60, 60, 67, 0.10);
  border-radius: var(--radius);
  background: rgba(255, 255, 255, 0.36);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.66);
}

.low-card-open {
  display: block;
  width: 100%;
  min-height: 0;
  padding: 12px;
  border: 1px solid rgba(60, 60, 67, 0.10);
  border-radius: var(--radius);
  background: rgba(255, 255, 255, 0.36);
  color: inherit;
  text-align: left;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.66);
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}

.low-card-open:hover,
.low-card-open:active {
  border-color: rgba(10, 132, 255, 0.18);
  background: rgba(255, 255, 255, 0.52);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.74);
  transform: none;
}

.low-card-open:focus-visible {
  box-shadow: inset var(--focus-ring);
}

.low-card-item-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 14px;
}

.low-card-identity {
  display: grid;
  min-width: 0;
  gap: 3px;
}

.low-card-identity strong {
  overflow: hidden;
  color: var(--text);
  font-size: 15px;
  line-height: 1.3;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.low-card-identity span {
  overflow: hidden;
  color: var(--muted);
  font-size: 12px;
  line-height: 1.35;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.low-card-total {
  display: flex;
  align-items: baseline;
  justify-content: flex-end;
  gap: 4px;
  flex: 0 0 auto;
  color: #9a5c00;
  white-space: nowrap;
}

.low-card-total strong {
  font-size: 24px;
  line-height: 1;
}

.low-card-total span {
  color: var(--muted);
  font-size: 11px;
}

.low-card-item.critical .low-card-total {
  color: #c9342e;
}

.low-card-progress {
  height: 3px;
  margin: 9px 0;
  overflow: hidden;
  border-radius: 999px;
  background: rgba(60, 60, 67, 0.09);
}

.low-card-progress span {
  display: block;
  height: 100%;
  min-width: 3px;
  border-radius: inherit;
  background: #d99116;
}

.low-card-item.critical .low-card-progress span {
  min-width: 0;
  background: #d94a43;
}

.low-card-breakdown {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 3px;
}

.low-card-breakdown > span {
  display: flex;
  align-items: baseline;
  justify-content: flex-start;
  width: 100%;
  min-width: 0;
  gap: 5px;
}

.low-card-breakdown small {
  overflow: hidden;
  color: var(--muted);
  font-size: 11px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.low-card-breakdown strong {
  color: var(--text);
  font-size: 13px;
  white-space: nowrap;
}

.low-card-empty {
  padding: 28px 16px;
}

@media (min-width: 1181px) {
  #dashboard-metrics-section .metrics {
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  }
}

@media (max-width: 1600px) {
  .low-card-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}

@media (max-width: 1280px) {
  .low-card-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

@media (max-width: 1180px) {
  .low-card-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 700px) {
  .dashboard-low-card-heading {
    align-items: flex-start;
  }

  .low-card-grid {
    grid-template-columns: minmax(0, 1fr);
  }
}

.toast {
  position: fixed;
  top: 88px;
  right: 24px;
  z-index: 10000;
  max-width: 360px;
  padding: 10px 14px;
  border-radius: 8px;
  background: #192b2f;
  color: #fff;
  box-shadow: var(--shadow);
  opacity: 0;
  transform: translateY(-8px);
  pointer-events: none;
  transition: opacity 0.2s, transform 0.2s;
}

.toast.show {
  opacity: 1;
  transform: translateY(0);
}

.toast.error {
  background: var(--danger);
}

.empty {
  padding: 24px;
  color: var(--muted);
}

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

  .sidebar {
    position: relative;
    min-height: auto;
  }

  .sidebar nav {
    grid-template-columns: repeat(2, 1fr);
  }

  .grid-two,
  .grid-three,
  .payroll-slip-layout,
  .course-settings-layout,
  .student-detail-overview,
  .detail-overview-grid,
  .detail-split-section,
  .student-detail-layout,
  .metrics {
    grid-template-columns: 1fr;
  }

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

  .student-detail-hero .detail-hero-main {
    grid-template-columns: 1fr;
  }

  .student-hero-profile {
    grid-template-columns: repeat(2, minmax(120px, 1fr));
    padding: 8px;
    border: 1px solid rgba(255, 255, 255, 0.6);
  }

  .student-profile-group.note {
    grid-column: 1 / -1;
  }

  .calendar-month {
    overflow-x: auto;
  }

  .calendar-grid {
    min-width: 840px;
  }

  .course-weekday-rule {
    grid-template-columns: 1fr;
  }

  .course-weekday-rule-head {
    display: none;
  }

  .topbar {
    align-items: flex-start;
    flex-direction: column;
  }

  .user-box {
    justify-content: flex-start;
  }
}

@media (max-width: 680px) {
  #view,
  .topbar {
    padding-left: 14px;
    padding-right: 14px;
  }

  .detail-hero-main {
    flex-direction: column;
  }

  .detail-hero-main .actions {
    width: 100%;
  }

  .detail-hero-main .actions button {
    flex: 1 1 auto;
  }

  .student-hero-profile {
    grid-template-columns: 1fr;
  }

  .student-profile-group.note {
    grid-column: auto;
  }

  .detail-hero-metrics {
    grid-template-columns: 1fr;
  }

  .detail-disclosure summary {
    align-items: flex-start;
    flex-direction: column;
  }

  .clock-card {
    align-items: stretch;
    flex-direction: column;
  }

  .clock-times {
    grid-template-columns: 1fr;
  }

  .detail-grid,
  .student-profile-grid,
  .wage-detail {
    grid-template-columns: 1fr;
  }

  .student-detail-header {
    flex-direction: column;
  }

  .wage-slip-head {
    flex-direction: column;
  }

  .clock-actions,
  .clock-actions > button,
  .clock-confirm,
  .clock-confirm button {
    width: 100%;
  }

  .clock-confirm {
    flex-direction: column;
  }

  .form-grid .half,
  .form-grid .third,
  .form-grid .two-thirds,
  .form-grid .quarter {
    grid-column: span 12;
  }

  .sidebar nav {
    grid-template-columns: 1fr;
  }
}

/* Liquid Glass shell and component refresh */
.workspace {
  grid-template-columns: var(--sidebar-width) minmax(0, 1fr);
  gap: 0;
  padding: 0 12px 12px 0;
}

.sidebar {
  min-height: 100vh;
  height: 100dvh;
  max-height: 100dvh;
  align-self: start;
  margin-left: 0;
  border: 0;
  border-right: 1px solid rgba(60, 60, 67, 0.12);
  border-radius: 0;
  background: var(--nav);
  box-shadow: none;
  color: var(--text);
  backdrop-filter: blur(28px) saturate(1.18);
  -webkit-backdrop-filter: blur(28px) saturate(1.18);
  overflow-x: hidden;
  overflow-y: auto;
}

.sidebar-brand {
  padding: 18px 18px 12px;
  border-bottom: 0;
  margin-bottom: 6px;
}

.profile-entry,
.nav-button {
  border-radius: var(--radius);
}

.profile-entry {
  width: auto;
  margin: 0 8px 18px;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 4px;
  align-items: center;
  padding: 12px 14px;
  border-color: rgba(255, 255, 255, 0.68);
  background: rgba(255, 255, 255, 0.34);
  box-shadow: 0 8px 22px rgba(0, 0, 0, 0.05), var(--inner-highlight);
  backdrop-filter: blur(14px) saturate(1.08);
  -webkit-backdrop-filter: blur(14px) saturate(1.08);
}

.profile-entry > span,
.profile-entry > small {
  grid-column: 1;
  min-width: 0;
}

.profile-entry > span {
  font-weight: 700;
}

.profile-entry:hover,
.profile-entry.active,
.nav-button:hover,
.nav-button.active {
  background: var(--nav-active);
  border-color: transparent;
  box-shadow: none;
}

.nav-button.active {
  font-weight: 700;
}

.main-panel {
  min-width: 0;
  padding: 12px 0 0 12px;
}

.topbar {
  min-height: 72px;
  margin: 0;
  padding: 14px 20px;
  border: 1px solid var(--glass-border);
  border-radius: var(--radius);
  background: var(--glass-strong);
  box-shadow: 0 10px 26px rgba(0, 0, 0, 0.07), var(--inner-highlight);
  backdrop-filter: blur(24px) saturate(1.16);
  -webkit-backdrop-filter: blur(24px) saturate(1.16);
}

@media (min-width: 1181px) {
  .workspace {
    display: block;
    min-height: 100vh;
    padding: 0 12px 12px 0;
  }

  .sidebar {
    position: fixed;
    inset: 0 auto 0 0;
    width: var(--sidebar-width);
    height: 100vh;
    min-height: 0;
    z-index: 20;
  }

  .main-panel {
    margin-left: var(--sidebar-width);
  }
}

.topbar-title {
  display: flex;
  align-items: center;
  flex: 1 1 320px;
  min-width: 0;
  gap: 12px;
}

.topbar-title > div {
  flex: 1 1 auto;
  min-width: 0;
}

.topbar-title h2,
.topbar-title p {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  word-break: keep-all;
}

.mobile-menu-button {
  display: none;
  width: 42px;
  min-width: 42px;
  padding: 0;
  font-size: 20px;
  font-weight: 700;
}

.user-box {
  min-width: 0;
}

.mode-badge,
.demo-role-switch,
.dev-badge,
.toast {
  border: 1px solid var(--glass-border);
  background: var(--glass);
  box-shadow: 0 10px 26px rgba(0, 0, 0, 0.08), var(--inner-highlight);
  backdrop-filter: blur(18px) saturate(1.12);
  -webkit-backdrop-filter: blur(18px) saturate(1.12);
}

.login-panel,
.demo-entry,
.metric-card,
.panel,
.table-panel,
.calendar-month,
.course-list-panel,
.course-detail-panel,
.student-card,
.course-card,
.card-item,
.wage-slip {
  border: 1px solid var(--glass-border);
  background: var(--glass-panel);
  box-shadow: var(--panel-shadow), var(--inner-highlight);
  backdrop-filter: blur(20px) saturate(1.18);
  -webkit-backdrop-filter: blur(20px) saturate(1.18);
}

.calendar-day {
  background: rgba(255, 255, 255, 0.38);
  box-shadow: none;
  backdrop-filter: blur(10px) saturate(1.08);
  -webkit-backdrop-filter: blur(10px) saturate(1.08);
}

.login-shell {
  background: linear-gradient(180deg, #fbfbfd 0%, var(--bg) 100%);
}

.login-panel,
.panel,
.table-panel,
.metric-card {
  border-radius: var(--radius);
}

.panel,
.metric-card {
  padding: var(--panel-padding);
}

.table-panel {
  overflow-x: auto;
  overflow-y: visible;
}

.table-heading {
  position: sticky;
  left: 0;
  z-index: 2;
  border-bottom-color: var(--line);
  background: rgba(255, 255, 255, 0.48);
  backdrop-filter: blur(16px) saturate(1.12);
  -webkit-backdrop-filter: blur(16px) saturate(1.12);
}

table {
  border-collapse: separate;
  border-spacing: 0;
  min-width: 0;
}

th,
td {
  background-clip: padding-box;
}

th {
  z-index: 1;
  background: rgba(255, 255, 255, 0.48);
  backdrop-filter: blur(14px) saturate(1.1);
  -webkit-backdrop-filter: blur(14px) saturate(1.1);
}

tbody tr {
  background: rgba(255, 255, 255, 0.24);
}

tbody tr:hover {
  background: rgba(255, 255, 255, 0.44);
}

.grid-two {
  grid-template-columns: repeat(2, minmax(360px, 1fr));
  gap: var(--content-gap);
}

.grid-three {
  grid-template-columns: repeat(3, minmax(280px, 1fr));
  gap: var(--content-gap);
}

.form-grid {
  gap: 14px;
}

.form-grid > label,
.inline-form,
.card-filter-row,
.filter-row {
  min-width: 0;
}

.demo-role-switch {
  max-width: min(520px, 44vw);
  border-color: var(--line);
  background: rgba(255, 255, 255, 0.74);
}

.demo-role-switch select {
  width: min(360px, 32vw);
}

.mode-badge,
.dev-badge {
  color: #5f5648;
  background: rgba(251, 250, 247, 0.9);
  border-color: rgba(138, 123, 99, 0.24);
}

.toast {
  top: 90px;
  z-index: 10000;
  color: var(--text);
  background: rgba(255, 255, 255, 0.92);
  border-color: rgba(60, 60, 67, 0.18);
}

.toast.error {
  color: var(--danger);
  background: rgba(255, 242, 241, 0.94);
  border-color: rgba(184, 50, 50, 0.28);
}

.sidebar-backdrop {
  display: none;
}

.dialog-backdrop {
  position: fixed;
  inset: 0;
  z-index: 90;
  display: grid;
  place-items: center;
  padding: 24px;
  background: rgba(0, 0, 0, 0.1);
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}

.glass-dialog {
  width: min(420px, 100%);
  border: 1px solid var(--glass-border);
  border-radius: var(--radius);
  padding: 20px;
  background: linear-gradient(145deg, rgba(255, 255, 255, 0.68), rgba(246, 247, 251, 0.46));
  box-shadow: 0 28px 80px rgba(0, 0, 0, 0.2), inset 0 1px 0 rgba(255, 255, 255, 0.88), inset 0 -1px 0 rgba(255, 255, 255, 0.3);
  backdrop-filter: blur(12px) saturate(1.32) brightness(1.06);
  -webkit-backdrop-filter: blur(12px) saturate(1.32) brightness(1.06);
}

.glass-dialog h3 {
  margin: 0 0 10px;
  font-size: 18px;
}

.glass-dialog p {
  margin: 0;
  color: var(--muted);
  line-height: 1.65;
  white-space: pre-wrap;
}

.dialog-actions {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
  margin-top: 18px;
}

/* Liquid Glass interaction and grouping polish */
.profile-entry,
.nav-button,
.scope-toggle,
.segmented-control button {
  position: relative;
}

.profile-entry:hover,
.nav-button:hover {
  background: rgba(255, 255, 255, 0.34);
}

.profile-entry.active,
.nav-button.active {
  background: rgba(255, 255, 255, 0.46);
  border-color: rgba(255, 255, 255, 0.58);
  box-shadow: var(--inner-highlight);
}

.profile-entry:hover {
  background: rgba(255, 255, 255, 0.58);
  border-color: rgba(10, 132, 255, 0.22);
  box-shadow: 0 12px 28px rgba(0, 0, 0, 0.08), var(--inner-highlight);
  transform: translateY(-1px);
}

.profile-entry.active {
  background: rgba(255, 255, 255, 0.62);
  border-color: rgba(10, 132, 255, 0.24);
}

.nav-button.active::before {
  content: "";
  position: absolute;
  top: 8px;
  bottom: 8px;
  left: 7px;
  width: 3px;
  border-radius: 999px;
  background: var(--primary);
  box-shadow: 0 0 10px rgba(10, 132, 255, 0.26);
}

.segmented-control button.is-active,
.scope-toggle.is-active {
  background: var(--glass-selected);
  border-color: rgba(255, 255, 255, 0.76);
  color: var(--text);
  box-shadow: 0 8px 18px rgba(0, 0, 0, 0.06), var(--inner-highlight);
}

.segmented-control button.is-active::after,
.scope-toggle.is-active::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: 5px;
  width: 16px;
  height: 2px;
  border-radius: 999px;
  background: var(--primary);
  transform: translateX(-50%);
  box-shadow: 0 0 10px rgba(10, 132, 255, 0.2);
}

#view {
  gap: var(--content-gap);
}

.section {
  gap: var(--surface-gap);
}

.section:has(> .toolbar) {
  display: grid;
  gap: var(--surface-gap);
  padding: var(--panel-padding);
  border: 1px solid var(--glass-border);
  border-radius: var(--glass-radius);
  background: var(--glass-panel);
  box-shadow: var(--panel-shadow), var(--inner-highlight);
  backdrop-filter: blur(20px) saturate(1.18);
  -webkit-backdrop-filter: blur(20px) saturate(1.18);
}

.section:has(> .toolbar) > .toolbar {
  margin-bottom: 0;
  padding-bottom: 0;
}

.section:has(> .toolbar) > .metrics {
  gap: var(--control-gap);
}

.section:has(> .toolbar) .metric-card {
  min-height: 96px;
  background: var(--glass-tile);
  box-shadow: var(--inner-highlight);
}

.filter-result-panel {
  display: grid;
  gap: var(--surface-gap);
}

.filter-result-panel.finance-list-workspace {
  overflow: hidden;
  padding: var(--panel-padding);
  border: 1px solid var(--glass-border);
  border-radius: var(--glass-radius);
  background: var(--glass-panel);
  box-shadow: var(--panel-shadow), var(--inner-highlight);
  backdrop-filter: blur(20px) saturate(1.16);
  -webkit-backdrop-filter: blur(20px) saturate(1.16);
}

.filter-result-panel.finance-list-workspace > .band-heading,
.filter-result-panel.finance-list-workspace > .finance-filter-shell,
.filter-result-panel.finance-list-workspace > .workspace-metrics,
.filter-result-panel.finance-list-workspace > .responsive-table,
.filter-result-panel.finance-list-workspace > .pagination-bar {
  margin: 0;
}

.filter-result-panel.finance-list-workspace > .workspace-metrics {
  overflow: hidden;
  border: 1px solid var(--glass-border);
  border-radius: var(--radius);
  background: rgba(255, 255, 255, 0.36);
  box-shadow: var(--inner-highlight);
}

.filter-result-panel.finance-list-workspace > .responsive-table {
  border-color: var(--glass-border);
  background: rgba(255, 255, 255, 0.38);
  box-shadow: var(--inner-highlight);
}

.filter-result-panel.finance-list-workspace > .responsive-table table {
  margin: 0;
}

#fund-accounts-section,
#bank-transactions-section,
#reconciliation-section,
#cash-count-section {
  overflow: hidden;
  padding: var(--panel-padding);
  border: 1px solid var(--glass-border);
  border-radius: var(--glass-radius);
  background: var(--glass-panel);
  box-shadow: var(--panel-shadow), var(--inner-highlight);
  backdrop-filter: blur(20px) saturate(1.16);
  -webkit-backdrop-filter: blur(20px) saturate(1.16);
}

#fund-accounts-section > .table-panel,
#bank-transactions-section > .table-panel,
#reconciliation-section > .table-panel,
#cash-count-section > .table-panel {
  margin: 0;
  background: rgba(255, 255, 255, 0.36);
  box-shadow: var(--inner-highlight);
}

.finance-list-workspace .band-heading > .actions,
.finance-list-workspace .section-header > .actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--control-gap);
  align-items: center;
  justify-content: flex-end;
}

.finance-focused-row {
  background: rgba(10, 132, 255, 0.08);
  box-shadow: inset 3px 0 0 var(--primary);
}

.filter-result-panel > .section-header {
  margin-bottom: 0;
}

.course-query-heading-actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: var(--control-gap);
}

.course-list-section {
  overflow: hidden;
  padding: var(--panel-padding);
  border: 1px solid var(--glass-border);
  border-radius: var(--glass-radius);
  background: var(--glass-panel);
  box-shadow: var(--panel-shadow), var(--inner-highlight);
  backdrop-filter: blur(20px) saturate(1.18);
  -webkit-backdrop-filter: blur(20px) saturate(1.18);
}

.course-query-content {
  display: grid;
  gap: var(--surface-gap);
}

.course-subsection-heading-actions,
.course-calendar-heading-actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: var(--control-gap);
  min-width: 0;
}

.course-calendar-content {
  display: grid;
  gap: var(--surface-gap);
}

.course-query-content[hidden],
.course-calendar-content[hidden],
#course-session-list-content[hidden] {
  display: none;
}

.section-collapse-toggle {
  flex: 0 0 var(--control-height);
  width: var(--control-height);
  min-width: var(--control-height);
  height: var(--control-height);
  padding: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.section-collapse-chevron {
  width: 0;
  height: 0;
  border-left: 5px solid transparent;
  border-right: 5px solid transparent;
  border-bottom: 7px solid currentColor;
  transform: rotate(0deg);
  transition: transform 160ms ease;
}

.section-collapse-toggle[aria-expanded="false"] .section-collapse-chevron {
  transform: rotate(180deg);
}

.page-section-collapse-header {
  min-width: 0;
}

.page-section-collapse-toggle {
  margin-left: auto;
}

.page-section-collapse-header > .actions .page-section-collapse-toggle,
.page-section-collapse-header > .workspace-actions .page-section-collapse-toggle,
.page-section-collapse-header > .promotion-heading-actions .page-section-collapse-toggle {
  margin-left: 4px;
}

.page-collapsible-section.is-page-section-collapsed {
  overflow: hidden;
}

.page-collapsible-section.is-page-section-collapsed > [data-page-section-collapse-content] {
  display: none !important;
}

.page-collapsible-section.is-page-section-collapsed > .section-header,
.page-collapsible-section.is-page-section-collapsed > .band-heading {
  margin-bottom: 0;
}

.page-collapsible-section.is-page-section-collapsed > .table-heading {
  border-bottom-color: transparent;
}

.course-list-section.is-query-collapsed > .section-header {
  padding-bottom: 2px;
}

.course-session-list-panel.is-content-collapsed,
.course-calendar-panel.is-content-collapsed {
  overflow: hidden;
}

.course-session-list-panel.is-content-collapsed > .table-heading {
  border-bottom: 0;
}

.filter-result-panel > .toolbar {
  padding-bottom: 2px;
}

.filter-result-panel > .table-panel,
.filter-result-tables > .table-panel {
  background: rgba(255, 255, 255, 0.36);
  box-shadow: var(--inner-highlight);
}

.filter-result-tables {
  margin: 0;
}

.grid-two,
.grid-three,
.metrics {
  align-items: stretch;
}

.grid-two > .panel,
.grid-two > .table-panel,
.grid-three > .panel,
.grid-three > .table-panel,
.metrics > .metric-card {
  height: 100%;
}

.toolbar {
  gap: var(--control-gap);
  margin-bottom: 0;
  align-items: end;
}

.toolbar label {
  min-width: 168px;
}

.pagination-controls {
  display: flex;
  flex: 1 1 560px;
  flex-wrap: wrap;
  gap: 8px;
  align-items: end;
  justify-content: flex-end;
  margin-left: auto;
}

.pagination-controls label {
  min-width: auto;
}

.pagination-controls select {
  width: 82px;
}

.pagination-controls input {
  width: 76px;
}

.pagination-pages {
  min-height: 36px;
  display: inline-flex;
  align-items: center;
  color: var(--muted);
  white-space: nowrap;
}

.pagination-button {
  white-space: nowrap;
}

.form-grid {
  gap: var(--surface-gap);
}

.course-card-plan-panel,
.course-generate-panel,
.plan-course-panel,
.plan-store-panel,
.student-store-panel,
.plan-course-options,
.plan-store-options,
.selection-group {
  display: grid;
  padding: 12px;
  border: 1px solid rgba(255, 255, 255, 0.54);
  border-radius: var(--cluster-radius);
  background: rgba(255, 255, 255, 0.28);
  box-shadow: var(--inner-highlight);
  backdrop-filter: blur(12px) saturate(1.08);
  -webkit-backdrop-filter: blur(12px) saturate(1.08);
}

.course-card-plan-panel,
.course-generate-panel,
.plan-course-panel,
.plan-store-panel,
.student-store-panel,
.selection-group {
  gap: 10px;
}

.plan-course-options,
.plan-store-options {
  margin-top: 4px;
}

.checkbox-actions {
  margin: 0;
  padding-bottom: 2px;
}

.course-tag-quick-select {
  display: grid;
  gap: 8px;
  padding: 10px;
  border: 1px solid rgba(255, 255, 255, 0.54);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.22);
}

.course-tag-quick-select > span {
  color: var(--muted);
  font-size: 12px;
}

.course-tag-quick-select > div {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.course-tags-field {
  display: grid;
  align-content: start;
  gap: 8px;
}

.course-tags-field .field-title {
  color: var(--muted);
  font-size: 13px;
  font-weight: 500;
}

.course-tag-checkboxes {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  min-height: var(--control-height);
  align-items: center;
}

.tag-quick-check {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 34px;
  padding: 6px 10px;
  border: 1px solid rgba(255, 255, 255, 0.58);
  border-radius: 8px;
  background: var(--glass-tile);
  color: var(--text);
  font-size: 13px;
  cursor: pointer;
}

.tag-quick-check:has(input:checked) {
  border-color: rgba(0, 122, 255, 0.34);
  background: rgba(0, 122, 255, 0.08);
}

.checkbox-grid {
  gap: var(--control-gap);
}

.check-row {
  min-height: 50px;
  padding: 9px 10px;
  border-color: rgba(255, 255, 255, 0.56);
  background: var(--glass-tile);
  transition: background 0.18s, border-color 0.18s, box-shadow 0.18s, transform 0.18s;
}

.check-row:hover {
  background: rgba(255, 255, 255, 0.58);
}

.check-row:has(input:checked) {
  border-color: rgba(255, 255, 255, 0.82);
  background: var(--glass-selected);
  box-shadow: 0 8px 18px rgba(0, 0, 0, 0.06), var(--inner-highlight);
}

.check-row.feature-switch-readonly,
.check-row.feature-switch-readonly:hover,
.check-row.feature-switch-readonly:has(input:checked) {
  border-color: rgba(148, 163, 184, 0.38);
  background: rgba(148, 163, 184, 0.16);
  box-shadow: none;
  cursor: not-allowed;
}

.check-row.feature-switch-readonly > span,
.check-row.feature-switch-readonly small {
  color: rgba(71, 85, 105, 0.78);
}

.check-row.feature-switch-readonly input {
  cursor: not-allowed;
  opacity: 0.55;
}

.feature-control-page {
  gap: 22px;
  max-width: 1540px;
  width: 100%;
  margin: 0 auto;
}

.feature-control-overview {
  display: grid;
  grid-template-columns: minmax(280px, 1fr) minmax(440px, 1.2fr);
  align-items: center;
  gap: 28px;
  padding: 24px;
  overflow: hidden;
}

.feature-control-overview-copy {
  min-width: 0;
}

.feature-control-eyebrow {
  display: block;
  margin-bottom: 6px;
  color: var(--primary-dark);
  font-size: 12px;
  font-weight: 700;
}

.feature-control-overview h3 {
  margin: 0;
  font-size: 24px;
  letter-spacing: 0;
}

.feature-control-overview p {
  max-width: 600px;
  margin: 8px 0 0;
  color: var(--muted);
}

.feature-control-summary {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  min-width: 0;
  border: 1px solid var(--glass-separator);
  border-radius: var(--radius);
  background: rgba(255, 255, 255, 0.3);
  overflow: hidden;
}

.feature-control-summary > div {
  min-width: 0;
  padding: 15px 18px;
}

.feature-control-summary > div + div {
  border-left: 1px solid var(--glass-separator);
}

.feature-control-summary span,
.feature-control-summary strong {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.feature-control-summary span {
  color: var(--muted);
  font-size: 12px;
}

.feature-control-summary strong {
  margin-top: 4px;
  font-size: 16px;
}

.feature-control-form {
  display: grid;
  gap: 24px;
}

.feature-control-group {
  display: grid;
  gap: 14px;
}

.feature-control-group > .section-header {
  padding: 0 2px;
  align-items: center;
}

.feature-control-group-count {
  color: var(--muted);
  font-size: 12px;
  white-space: nowrap;
}

.feature-control-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}

.feature-control-grid-three {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.feature-control-card {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: start;
  gap: 18px;
  min-height: 166px;
  padding: 18px;
  border: 1px solid var(--glass-border);
  border-radius: var(--radius);
  background: var(--glass-panel);
  box-shadow: var(--panel-shadow), var(--inner-highlight);
  backdrop-filter: blur(20px) saturate(1.12);
  -webkit-backdrop-filter: blur(20px) saturate(1.12);
  cursor: pointer;
  transition: border-color 0.18s, background 0.18s, box-shadow 0.18s, transform 0.18s;
}

.feature-control-card:hover {
  border-color: rgba(10, 132, 255, 0.3);
  background: rgba(255, 255, 255, 0.67);
}

.feature-control-card[data-enabled="true"] {
  border-color: rgba(10, 132, 255, 0.27);
  background: rgba(250, 253, 255, 0.72);
}

.feature-control-card[data-tone="warning"][data-enabled="true"] {
  border-color: rgba(138, 101, 0, 0.28);
  background: rgba(255, 250, 232, 0.66);
}

.feature-control-copy,
.feature-control-heading {
  min-width: 0;
}

.feature-control-copy {
  display: grid;
  align-content: start;
  gap: 8px;
}

.feature-control-heading {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 7px 10px;
}

.feature-control-heading strong {
  font-size: 16px;
}

.feature-control-state {
  color: var(--muted);
  font-size: 12px;
  font-weight: 700;
}

.feature-control-card[data-enabled="true"] .feature-control-state {
  color: var(--primary-dark);
}

.feature-control-card[data-tone="warning"][data-enabled="true"] .feature-control-state {
  color: var(--gold);
}

.feature-control-description {
  color: var(--text);
  line-height: 1.55;
}

.feature-control-scope {
  margin-top: 2px;
  color: var(--muted);
  font-size: 12px;
  line-height: 1.45;
}

.feature-switch {
  position: relative;
  display: inline-grid;
  align-items: center;
  flex: 0 0 auto;
}

.feature-control-input {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: 0;
  opacity: 0;
  pointer-events: none;
}

.feature-switch-track {
  display: block;
  width: 48px;
  height: 28px;
  padding: 3px;
  border: 1px solid rgba(60, 60, 67, 0.2);
  border-radius: 14px;
  background: rgba(120, 120, 128, 0.22);
  box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.08);
  transition: background 0.18s, border-color 0.18s, box-shadow 0.18s;
}

.feature-switch-track > span {
  display: block;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.22);
  transition: transform 0.2s;
}

.feature-control-input:checked + .feature-switch-track {
  border-color: rgba(10, 132, 255, 0.55);
  background: var(--primary);
}

.feature-control-card[data-tone="warning"] .feature-control-input:checked + .feature-switch-track {
  border-color: rgba(138, 101, 0, 0.45);
  background: #a87800;
}

.feature-control-input:checked + .feature-switch-track > span {
  transform: translateX(20px);
}

.feature-control-input:focus-visible + .feature-switch-track {
  box-shadow: var(--focus-ring);
}

.feature-control-savebar {
  position: sticky;
  z-index: 5;
  bottom: 18px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  min-height: 68px;
  padding: 12px 14px 12px 18px;
  border: 1px solid var(--glass-border);
  border-radius: var(--radius);
  background: rgba(250, 250, 252, 0.84);
  box-shadow: var(--glass-shadow), var(--inner-highlight);
  backdrop-filter: blur(24px) saturate(1.15);
  -webkit-backdrop-filter: blur(24px) saturate(1.15);
}

.feature-control-save-status {
  display: flex;
  align-items: center;
  gap: 9px;
  color: var(--muted);
  font-weight: 600;
}

.feature-control-save-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--success);
  box-shadow: 0 0 0 4px rgba(47, 111, 78, 0.1);
}

.feature-control-savebar[data-dirty="true"] .feature-control-save-status {
  color: var(--gold);
}

.feature-control-savebar[data-dirty="true"] .feature-control-save-dot {
  background: #b98500;
  box-shadow: 0 0 0 4px rgba(185, 133, 0, 0.12);
}

.feature-control-savebar .actions {
  flex-wrap: nowrap;
}

.feature-control-savebar button {
  min-width: 110px;
}

@media (max-width: 1120px) {
  .feature-control-overview {
    grid-template-columns: 1fr;
  }

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

@media (max-width: 720px) {
  .feature-control-page,
  .feature-control-form {
    gap: 16px;
  }

  .feature-control-overview {
    padding: 18px;
    gap: 18px;
  }

  .feature-control-overview h3 {
    font-size: 21px;
  }

  .feature-control-summary {
    grid-template-columns: 1fr;
  }

  .feature-control-summary > div + div {
    border-top: 1px solid var(--glass-separator);
    border-left: 0;
  }

  .feature-control-grid,
  .feature-control-grid-three {
    grid-template-columns: 1fr;
  }

  .feature-control-card {
    min-height: 0;
  }

  .feature-control-savebar {
    position: static;
    align-items: stretch;
    flex-direction: column;
  }

  .feature-control-savebar .actions,
  .feature-control-savebar button {
    width: 100%;
  }
}

.check-row > span {
  margin: 0;
  color: var(--text);
  font-size: 13px;
  line-height: var(--line-height-tight);
}

.check-row small {
  margin-top: 2px;
  line-height: 1.35;
}

.course-create-dialog .course-card-plan-panel .check-row,
.course-create-dialog .course-editor-schedule-controls > .check-row,
.course-create-dialog .course-weekday-rule .course-weekday-check,
#course-generate-dialog .course-weekday-rule .course-weekday-check {
  min-height: 28px;
  padding: 3px 6px;
  gap: 5px;
  border-radius: 7px;
}

.course-create-dialog .course-card-plan-panel .check-row {
  align-items: center;
  min-height: 34px;
}

.course-create-dialog .course-editor-schedule-controls > .check-row {
  min-height: 32px;
  padding: 4px 7px;
}

.course-create-dialog .course-weekday-rule .course-weekday-check,
#course-generate-dialog .course-weekday-rule .course-weekday-check {
  min-height: 28px;
  padding: 3px 5px;
}

.course-create-dialog .course-card-plan-panel .check-row > span,
.course-create-dialog .course-editor-schedule-controls > .check-row > span,
.course-create-dialog .course-weekday-rule .course-weekday-check > span,
#course-generate-dialog .course-weekday-rule .course-weekday-check > span {
  margin: 0;
  font-size: 12px;
  line-height: 1.2;
}

.course-create-dialog .course-card-plan-panel .check-row small,
.course-create-dialog .course-editor-schedule-controls > .check-row small {
  margin-top: 1px;
  font-size: 10px;
  line-height: 1.2;
}

.course-create-dialog .course-card-plan-panel .checkbox-grid {
  gap: 5px;
}

.course-create-dialog .course-weekday-rule,
#course-generate-dialog .course-weekday-rule {
  gap: 5px;
  padding: 3px 5px;
}

.course-create-dialog .course-weekday-rule select,
.course-create-dialog .course-weekday-rule input[readonly],
#course-generate-dialog .course-weekday-rule select,
#course-generate-dialog .course-weekday-rule input[readonly] {
  min-height: 28px;
  padding: 4px 7px;
}

.course-card-option {
  position: relative;
  min-height: 44px;
  padding-left: 18px;
  border-color: rgba(255, 255, 255, 0.56);
  background: var(--glass-tile);
  line-height: var(--line-height-tight);
}

.course-card-option.usable {
  border-color: rgba(10, 132, 255, 0.22);
  background: rgba(255, 255, 255, 0.66);
}

.course-card-option.usable::before {
  content: "";
  position: absolute;
  top: 12px;
  left: 7px;
  width: 6px;
  height: 6px;
  border-radius: 999px;
  background: var(--primary);
  box-shadow: 0 0 8px rgba(10, 132, 255, 0.28);
}

.course-card-option.blocked {
  border-color: rgba(60, 60, 67, 0.12);
  background: rgba(255, 255, 255, 0.28);
}

.table-panel {
  border-color: var(--glass-border);
}

.table-heading {
  border-bottom-color: var(--glass-separator);
  padding: 14px 16px;
}

th,
td {
  line-height: 1.42;
  border-bottom-color: var(--glass-separator);
}

.dialog-backdrop {
  background: rgba(18, 18, 22, 0.14);
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}

.glass-dialog {
  overflow: hidden;
  width: min(440px, 100%);
  padding: 0;
  border-radius: var(--cluster-radius);
  background: rgba(248, 249, 252, 0.72);
  box-shadow: var(--glass-shadow), var(--inner-highlight);
  backdrop-filter: blur(var(--glass-blur-dialog)) saturate(var(--glass-saturation-dialog)) brightness(1.04);
  -webkit-backdrop-filter: blur(var(--glass-blur-dialog)) saturate(var(--glass-saturation-dialog)) brightness(1.04);
}

.dialog-header,
.dialog-body,
.dialog-footer {
  padding: 16px 18px;
}

.dialog-header {
  border-bottom: 1px solid var(--glass-separator);
  background: rgba(255, 255, 255, 0.32);
}

.dialog-body {
  background: rgba(255, 255, 255, 0.1);
}

.glass-dialog h3 {
  margin: 0;
  font-size: 18px;
  line-height: 1.28;
}

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

.glass-dialog p {
  line-height: 1.58;
}

.dialog-footer {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
  border-top: 1px solid var(--glass-separator);
  background: rgba(255, 255, 255, 0.28);
}

.dialog-actions {
  margin-top: 0;
}

.course-session-dialog {
  width: min(720px, 100%);
  background: rgba(248, 249, 252, 0.72);
  backdrop-filter: blur(var(--glass-blur-dialog)) saturate(var(--glass-saturation-dialog)) brightness(1.04);
  -webkit-backdrop-filter: blur(var(--glass-blur-dialog)) saturate(var(--glass-saturation-dialog)) brightness(1.04);
}

.course-attendance-dialog {
  width: min(980px, calc(100vw - 48px));
  max-height: calc(100vh - 56px);
  display: grid;
  grid-template-rows: auto minmax(0, 1fr) auto;
}

.course-attendance-dialog .dialog-body {
  min-height: 0;
  overflow: auto;
}

.course-attendance-dialog-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 14px;
}

.course-attendance-dialog-header .actions {
  flex: 0 0 auto;
}

.attendance-dialog-tools {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
  margin: 0 0 10px;
}

.attendance-dialog-table {
  margin: 0;
  max-height: min(58vh, 560px);
  overflow: auto;
}

.attendance-dialog-hint {
  margin: 12px 0 0;
}

.edit-dialog {
  width: min(760px, 100%);
  background: rgba(248, 249, 252, 0.72);
  backdrop-filter: blur(var(--glass-blur-dialog)) saturate(var(--glass-saturation-dialog)) brightness(1.04);
  -webkit-backdrop-filter: blur(var(--glass-blur-dialog)) saturate(var(--glass-saturation-dialog)) brightness(1.04);
}

.management-dialog {
  width: min(1320px, calc(100vw - 48px));
  max-height: calc(100vh - 48px);
  background: rgba(248, 249, 252, 0.72);
  backdrop-filter: blur(var(--glass-blur-dialog)) saturate(var(--glass-saturation-dialog)) brightness(1.04);
  -webkit-backdrop-filter: blur(var(--glass-blur-dialog)) saturate(var(--glass-saturation-dialog)) brightness(1.04);
}

.card-plan-dialog {
  width: min(980px, calc(100vw - 56px));
  max-height: calc(100vh - 64px);
}

.management-dialog.card-plan-dialog > form {
  display: grid;
  grid-template-rows: minmax(0, 1fr) auto;
  min-height: 0;
  max-height: none;
  overflow: visible;
  margin: 0;
  padding: 0;
}

.card-plan-dialog .dialog-body {
  max-height: calc(100vh - 176px);
  overflow: auto;
}

.card-plan-form-grid {
  margin-top: 0;
}

.plan-basic-row {
  display: grid;
  grid-template-columns: minmax(220px, 2fr) repeat(3, minmax(120px, 1fr));
  gap: 14px;
  align-items: end;
}

.price-period-dialog {
  width: min(1120px, calc(100vw - 56px));
  max-height: calc(100vh - 64px);
  display: grid;
  grid-template-rows: auto minmax(0, 1fr) auto;
}

.price-period-dialog .dialog-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
}

.price-period-dialog-body {
  min-height: 0;
  overflow: auto;
}

.price-period-layout {
  display: grid;
  grid-template-columns: minmax(0, 1.35fr) minmax(320px, 0.65fr);
  gap: 16px;
  align-items: start;
}

.price-period-layout .table-panel {
  margin: 0;
}

.price-period-form {
  margin-top: 0;
  padding: 14px;
  border: 1px solid var(--glass-separator);
  border-radius: var(--radius);
  background: rgba(255, 255, 255, 0.26);
  box-shadow: var(--inner-highlight);
}

.form-subheading {
  display: grid;
  gap: 4px;
}

.form-subheading strong {
  color: var(--text);
  font-size: 15px;
}

.form-subheading span {
  color: var(--muted);
  font-size: 12px;
}

@media (max-width: 980px) {
  .plan-basic-row,
  .price-period-layout {
    grid-template-columns: 1fr;
  }

  .card-plan-dialog,
  .price-period-dialog {
    width: min(720px, calc(100vw - 32px));
  }
}

.content-fit-dialog {
  width: min(1280px, calc(100vw - 64px));
  max-height: calc(100vh - 72px);
  display: grid;
  grid-template-rows: auto minmax(0, auto) auto;
}

.content-fit-dialog .dialog-header {
  padding: 16px 18px 12px;
}

.content-fit-dialog .dialog-body {
  max-height: calc(100vh - 220px);
  overflow: auto;
  padding: 12px 18px;
}

.content-fit-dialog .dialog-footer {
  padding: 10px 18px;
}

.debt-dialog {
  width: min(1220px, calc(100vw - 72px));
}

.debt-dialog .table-panel {
  margin: 0;
  max-height: min(52vh, 520px);
  overflow: auto;
}

.debt-dialog table {
  min-width: 980px;
}

.course-edit-dialog {
  width: min(680px, calc(100vw - 32px));
  max-height: calc(100vh - 48px);
  padding: 0;
  overflow: hidden;
}

.course-edit-dialog > form {
  display: grid;
  min-height: 0;
}

.course-edit-dialog .dialog-header {
  padding: 18px 20px 12px;
}

.course-edit-dialog .dialog-body {
  max-height: min(64vh, 560px);
  padding: 14px 20px 18px;
}

.course-edit-dialog .dialog-footer {
  padding: 12px 20px;
}

.course-edit-dialog .course-card-plan-panel {
  padding: 10px;
}

.course-create-dialog {
  width: min(1680px, calc(100vw - 32px));
  max-height: calc(100vh - 32px);
  display: flex;
  flex-direction: column;
}

.course-create-dialog > form {
  display: flex;
  flex: 1 1 auto;
  min-height: 0;
  flex-direction: column;
}

.course-editor-layout {
  display: grid;
  gap: 14px;
  min-height: 0;
}

.course-editor-form-pane,
.course-editor-preview-pane {
  min-width: 0;
}

.course-rule-editor-layout,
.course-single-session-layout {
  display: grid;
  gap: 14px;
  min-height: 0;
}

.course-rule-form-pane,
.course-single-session-form-pane {
  min-width: 0;
}

.course-editor-preview-pane {
  display: grid;
  align-content: start;
  gap: 12px;
}

.course-editor-form-grid {
  gap: 8px;
  margin-top: 8px;
}

.course-editor-form-grid label span {
  margin-bottom: 4px;
}

.course-editor-form-grid input,
.course-editor-form-grid select {
  min-height: 34px;
  padding: 7px 9px;
}

.course-editor-form-grid input[type="checkbox"] {
  width: 14px;
  height: 14px;
  min-width: 14px;
  min-height: 14px;
  flex-basis: 14px;
  padding: 0;
  background-size: 10px 10px;
  border-radius: 4px;
}

.course-editor-schedule-controls {
  display: grid;
  gap: 8px;
  padding: 10px;
  border: 1px solid var(--glass-separator);
  border-radius: var(--cluster-radius);
  background: rgba(255, 255, 255, 0.24);
  box-shadow: var(--inner-highlight);
}

.course-editor-schedule-controls .field-title {
  color: var(--text);
}

.course-editor-schedule-controls .subline {
  margin: 0;
}

.course-editor-schedule-controls .checkbox-grid {
  grid-template-columns: repeat(auto-fit, minmax(132px, 1fr));
}

.course-schedule-mode,
.course-simple-schedule-panel,
.course-advanced-schedule-panel {
  display: grid;
  gap: 8px;
  min-width: 0;
}

.course-schedule-mode-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

.course-schedule-mode-head strong {
  color: var(--text);
  font-size: 13px;
}

.compact-weekday-grid {
  grid-template-columns: repeat(7, minmax(0, 1fr));
  gap: 6px;
}

.compact-weekday-grid .check-row {
  min-height: 30px;
  padding: 5px 7px;
}

.compact-weekday-grid .check-row > span {
  font-size: 12px;
}

.edit-dialog .dialog-body {
  max-height: calc(100vh - 220px);
  overflow: auto;
  color: var(--text);
}

.finance-core-stack {
  display: grid;
  gap: 16px;
}

.finance-account-editor summary {
  cursor: pointer;
  font-weight: 700;
  color: var(--text);
}

.finance-account-editor[open] summary {
  margin-bottom: 16px;
}

.voucher-editor-panel {
  overflow: hidden;
}

.voucher-lines-table {
  margin-top: 14px;
  overflow-x: auto;
}

.voucher-lines-table table {
  min-width: 1180px;
  table-layout: fixed;
}

.voucher-lines-table th:nth-child(1),
.voucher-lines-table td:nth-child(1) {
  width: 48px;
  text-align: center;
}

.voucher-lines-table th:nth-child(2),
.voucher-lines-table td:nth-child(2) {
  width: 210px;
}

.voucher-lines-table th:nth-child(3),
.voucher-lines-table td:nth-child(3) {
  width: 190px;
}

.voucher-lines-table th:nth-child(4),
.voucher-lines-table td:nth-child(4),
.voucher-lines-table th:nth-child(5),
.voucher-lines-table td:nth-child(5) {
  width: 120px;
}

.voucher-lines-table th:nth-child(6),
.voucher-lines-table td:nth-child(6),
.voucher-lines-table th:nth-child(7),
.voucher-lines-table td:nth-child(7),
.voucher-lines-table th:nth-child(8),
.voucher-lines-table td:nth-child(8) {
  width: 140px;
}

.voucher-lines-table th:nth-child(9),
.voucher-lines-table td:nth-child(9) {
  width: 76px;
}

.voucher-lines-table input,
.voucher-lines-table select {
  width: 100%;
  min-width: 0;
}

.voucher-totals {
  display: flex;
  justify-content: flex-end;
  flex-wrap: wrap;
  gap: 10px 24px;
  padding: 14px 4px 4px;
  font-variant-numeric: tabular-nums;
}

.voucher-totals span {
  white-space: nowrap;
}

.text-danger {
  color: var(--danger, #b42318);
}

.table-actions {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 6px;
}

.table-actions button {
  white-space: nowrap;
}

.inline-filter {
  margin: 0;
}

.voucher-detail-dialog {
  width: min(1120px, calc(100vw - 32px));
}

.expense-request-editor textarea {
  width: 100%;
  resize: vertical;
}

.expense-travel-fields {
  grid-column: 1 / -1;
  border-top: 1px solid var(--line);
  padding-top: 12px;
}

.expense-travel-fields summary {
  cursor: pointer;
  font-weight: 700;
}

.expense-travel-fields .form-grid {
  margin-top: 12px;
}

.expense-attachment-grid {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}

.expense-attachment-grid label {
  min-width: 0;
}

.expense-detail-dialog {
  width: min(960px, calc(100vw - 32px));
}

.expense-detail-body {
  display: grid;
  gap: 18px;
}

.detail-note p {
  white-space: pre-wrap;
}

.attachment-list {
  display: grid;
  gap: 8px;
}

.refund-path-summary {
  display: grid;
  gap: 8px;
  padding: 12px;
  border: 1px solid var(--line);
  background: var(--bg);
}

.refund-path-summary p {
  margin: 0;
  color: var(--muted);
  font-size: 13px;
}

.refund-path-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.attachment-link {
  display: block;
  overflow-wrap: anywhere;
}

button.attachment-link {
  width: 100%;
  border: 0;
  background: transparent;
  color: var(--primary-dark);
  cursor: pointer;
  padding: 4px 0;
  text-align: left;
}

.select-search-input {
  width: 100%;
  margin-bottom: 6px;
}

.card-plan-filter-autocomplete,
.card-plan-filter-control {
  position: relative;
  min-width: 0;
}

.card-plan-filter-control > input[type="search"] {
  width: 100%;
}

.card-plan-filter-suggestions {
  top: calc(100% + 5px);
  min-width: min(340px, calc(100vw - 40px));
}

.card-plan-filter-option {
  grid-template-columns: minmax(0, 1fr);
}

.card-plan-filter-option > span:last-child {
  justify-items: start;
  text-align: left;
}

.pagination-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding-top: 12px;
  color: var(--muted);
}

.pagination-bar > div {
  display: flex;
  gap: 8px;
}

.approval-timeline ol {
  display: grid;
  gap: 8px;
  margin: 10px 0 0;
  padding-left: 22px;
}

.approval-timeline li span,
.approval-timeline li small {
  display: block;
}

.fund-operation-grid {
  align-items: start;
}

.fund-operation-grid .panel {
  min-width: 0;
}

.tax-filing-tools {
  align-items: start;
}

@media (max-width: 720px) {
  .table-heading {
    flex-direction: column;
    align-items: stretch;
  }

  .table-heading strong,
  .table-heading span {
    white-space: normal;
    text-overflow: clip;
  }

  .voucher-editor-panel .section-header {
    align-items: stretch;
  }

  .voucher-editor-panel .section-header > button {
    width: 100%;
  }

  .voucher-totals {
    justify-content: flex-start;
  }

  .inline-filter {
    width: 100%;
  }

  .inline-filter input,
  .inline-filter select,
  .inline-filter button {
    width: 100%;
  }

  .expense-attachment-grid {
    grid-template-columns: minmax(0, 1fr);
  }
}

.course-create-dialog .dialog-body {
  flex: 1 1 auto;
  min-height: 0;
  max-height: none;
}

.course-rules-dialog .course-rule-dialog-body,
.course-session-create-dialog .dialog-body {
  flex: 1 1 auto;
  min-height: 0;
  max-height: none;
}

.course-session-create-dialog .course-preview-calendar {
  min-width: 700px;
}

.course-session-create-dialog .calendar-grid {
  grid-template-columns: repeat(7, minmax(98px, 1fr));
}

.course-session-create-dialog .calendar-day {
  min-height: 116px;
}

.dialog-summary {
  display: grid;
  gap: 4px;
  margin: 0 0 14px;
  padding: 12px 14px;
  border: 1px solid var(--glass-separator);
  border-radius: var(--radius);
  background: rgba(255, 255, 255, 0.28);
  box-shadow: var(--inner-highlight);
}

.dialog-summary strong {
  color: var(--text);
  font-size: 14px;
}

.dialog-summary span {
  color: var(--muted);
  font-size: 12px;
}

.management-dialog > .section-header {
  margin: 0;
  padding: 16px 18px;
  border-bottom: 1px solid var(--glass-separator);
  background: rgba(255, 255, 255, 0.16);
}

.management-dialog > form {
  max-height: calc(100vh - 150px);
  overflow: auto;
  margin: 0;
  padding: 16px 18px;
}

.course-session-dialog-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 14px;
}

.course-session-dialog-header p {
  margin-top: 4px;
}

.course-session-dialog .dialog-body {
  max-height: calc(100vh - 220px);
  overflow: auto;
  color: var(--text);
}

.course-session-dialog-context {
  margin: 0 0 14px;
  color: var(--muted);
}

.session-roster-editor {
  display: grid;
  gap: 10px;
  margin-top: 14px;
  padding: 14px;
  border: 1px solid rgba(255, 255, 255, 0.62);
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.42);
  box-shadow: var(--inner-highlight);
}

.session-roster-editor-header,
.session-roster-chip,
.session-roster-result-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.session-roster-editor-header strong,
.session-roster-chip strong,
.session-roster-result-row strong {
  display: block;
  color: var(--text);
}

.session-roster-editor-header span,
.session-roster-chip span,
.session-roster-result-row span {
  display: block;
  margin-top: 2px;
  color: var(--muted);
  font-size: 12px;
}

.session-roster-count {
  flex: 0 0 auto;
  padding: 6px 10px;
  border-radius: 999px;
  background: rgba(59, 130, 246, 0.1);
  color: #1d4ed8;
  font-weight: 650;
}

.session-roster-search {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 8px;
}

.session-roster-selected,
.session-roster-results {
  display: grid;
  gap: 8px;
}

.session-roster-chip,
.session-roster-result-row {
  min-height: 46px;
  padding: 9px 10px;
  border: 1px solid rgba(148, 163, 184, 0.22);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.48);
}

.session-roster-result-title {
  color: var(--muted);
  font-size: 12px;
  font-weight: 650;
}

.course-session-dialog-form {
  margin: 0;
}

.course-session-dialog-footer {
  position: sticky;
  bottom: 0;
}

.close-course-session-dialog {
  flex: 0 0 auto;
}

.course-rules-dialog {
  width: min(1680px, calc(100vw - 32px));
  max-height: calc(100vh - 32px);
}

.course-rules-dialog .dialog-header {
  padding: 16px 20px 12px;
}

.course-rules-dialog .dialog-footer {
  padding: 10px 20px;
}

.course-rules-dialog .course-rule-dialog-body {
  padding: 12px 20px 14px;
  overflow: auto;
}

.course-rule-config-panel {
  display: grid;
  gap: 12px;
  padding: 12px;
  border: 1px solid rgba(255, 255, 255, 0.62);
  border-radius: var(--cluster-radius);
  background: rgba(255, 255, 255, 0.28);
  box-shadow: var(--inner-highlight);
  backdrop-filter: blur(12px) saturate(1.08);
  -webkit-backdrop-filter: blur(12px) saturate(1.08);
}

.course-rule-config-head {
  display: grid;
  gap: 2px;
}

.course-rule-config-head strong {
  color: var(--text);
  font-size: 13px;
}

.course-rule-config-head span {
  color: var(--muted);
  font-size: 12px;
}

.course-rule-date-range {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}

.course-rule-date-range label {
  min-width: 0;
}

.course-rules-dialog .course-schedule-preview {
  max-height: calc(100vh - 210px);
  padding: 8px;
  background: rgba(255, 255, 255, 0.2);
}

.course-rules-dialog .course-rule-grid-head {
  grid-template-columns: 72px minmax(0, 1fr) minmax(0, 0.95fr) 56px;
  grid-template-areas:
    "weekday location teacher action"
    ". start end units";
}

.course-rules-dialog .course-rule-row {
  gap: 6px;
  padding: 8px 0;
}

.course-rules-dialog .course-rule-primary-row {
  grid-template-columns: 72px repeat(2, minmax(0, 1fr));
}

@media (min-width: 901px) {
  .course-rules-dialog .course-rule-location .course-location-menu {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    width: 100%;
    max-width: 100%;
    max-height: 220px;
  }

  .course-rules-dialog .course-rule-location .course-location-column {
    max-height: 220px;
    padding: 5px;
  }

  .course-rules-dialog .course-rule-location .course-location-option {
    padding: 7px 8px;
    font-size: 12px;
  }
}

.course-rules-dialog .course-rule-secondary-row {
  grid-template-columns: 72px minmax(0, 1fr) minmax(0, 1fr) 56px;
}

.course-rules-dialog .course-preview-calendar {
  width: 100%;
  min-width: 0;
}

.course-rules-dialog .calendar-grid {
  grid-template-columns: repeat(7, minmax(62px, 1fr));
}

.course-rules-dialog .calendar-day {
  min-height: 104px;
  padding: 6px;
}

.course-rules-dialog .calendar-day-number {
  margin-bottom: 4px;
}

.course-rules-dialog .calendar-day-sessions {
  gap: 4px;
}

.course-rules-dialog .calendar-session {
  padding: 5px;
  font-size: 11px;
  line-height: 1.25;
}

@media (min-width: 900px) and (orientation: landscape), (min-width: 1100px) {
  .course-create-dialog {
    height: calc(100vh - 32px);
  }

  .course-create-dialog .dialog-body {
    overflow: hidden;
  }

  .course-editor-layout {
    grid-template-columns: minmax(min(640px, 48vw), 0.86fr) minmax(0, 1.14fr);
  }

  .course-rule-editor-layout {
    grid-template-columns: minmax(380px, clamp(420px, 42%, 620px)) minmax(0, 1fr);
  }

  .course-single-session-layout {
    grid-template-columns: minmax(min(620px, 44vw), 0.78fr) minmax(0, 1.22fr);
  }

  .course-editor-layout,
  .course-rule-editor-layout,
  .course-single-session-layout {
    align-items: stretch;
    height: 100%;
  }

  .course-editor-form-pane,
  .course-rule-form-pane,
  .course-single-session-form-pane,
  .course-editor-preview-pane {
    min-height: 0;
    overflow: auto;
  }

  .course-editor-preview-pane .course-schedule-preview {
    height: 100%;
    max-height: none;
  }
}

@media (min-width: 900px) and (orientation: landscape), (min-width: 1100px) {
  .course-rules-dialog {
    height: calc(100vh - 32px);
  }

  .course-rules-dialog .course-rule-editor-layout {
    grid-template-columns: minmax(380px, clamp(420px, 42%, 620px)) minmax(0, 1fr);
    align-items: stretch;
    height: 100%;
  }

  .course-rules-dialog .course-rule-form-pane,
  .course-rules-dialog .course-editor-preview-pane {
    overflow: auto;
  }

  .course-rules-dialog .course-editor-preview-pane .course-schedule-preview {
    height: 100%;
    max-height: none;
  }
}

@media (min-width: 900px) and (max-width: 1180px) {
  .course-rules-dialog .course-rule-editor-layout {
    grid-template-columns: minmax(360px, 42%) minmax(0, 1fr);
  }

  .course-rules-dialog .course-rule-row {
    gap: 6px;
  }

  .course-rules-dialog .course-rule-primary-row {
    grid-template-columns: 68px repeat(2, minmax(0, 1fr));
  }

  .course-rules-dialog .course-rule-secondary-row {
    grid-template-columns: 68px minmax(0, 1fr) minmax(0, 1fr) 52px;
  }

  .course-rules-dialog .course-rule-grid-head {
    display: none;
  }

  .course-rules-dialog .calendar-grid {
    grid-template-columns: repeat(7, minmax(50px, 1fr));
  }

  .course-rules-dialog .calendar-day {
    min-height: 94px;
    padding: 5px;
  }

  .course-rules-dialog .calendar-session {
    padding: 4px;
    font-size: 10px;
  }
}

@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .sidebar,
  .topbar,
  .login-panel,
  .section-subnav,
  .course-subnav,
  .panel,
  .table-panel,
  .metric-card,
  .course-card-plan-panel,
  .course-generate-panel,
  .plan-course-panel,
  .plan-store-panel,
  .plan-course-options,
  .plan-store-options,
  .selection-group,
  .glass-dialog {
    background: #ffffff;
  }

  .sidebar {
    background: #f5f5f7;
  }
}

@media (prefers-reduced-transparency: reduce) {
  .sidebar,
  .topbar,
  .mode-badge,
  .section-subnav,
  .course-subnav,
  .demo-role-switch,
  .dev-badge,
  .course-card-plan-panel,
  .course-generate-panel,
  .plan-course-panel,
  .plan-store-panel,
  .plan-course-options,
  .plan-store-options,
  .selection-group,
  .toast,
  .glass-dialog {
    background: #ffffff;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
  }
}

@media (max-width: 1180px) {
  .workspace,
  .workspace:not(.hidden) {
    display: block;
    grid-template-columns: none;
    width: 100%;
    max-width: 100%;
    min-width: 0;
    padding: 10px;
  }

  .main-panel {
    width: 100%;
    max-width: 100%;
    min-width: 0;
    padding: 0;
  }

  .mobile-menu-button {
    display: inline-grid;
    place-items: center;
  }

  .sidebar {
    display: block;
    position: fixed;
    inset: 10px auto 10px 10px;
    z-index: 70;
    width: min(340px, calc(100vw - 20px));
    min-height: 0;
    margin: 0;
    border: 1px solid rgba(255, 255, 255, 0.72);
    border-radius: 12px;
    box-shadow: var(--glass-shadow), var(--inner-highlight);
    transform: translateX(calc(-100% - 24px));
    transition: transform 0.22s ease;
  }

  body.nav-open .sidebar {
    transform: translateX(0);
  }

  .sidebar-backdrop {
    position: fixed;
    inset: 0;
    z-index: 60;
    display: block;
    min-height: 0;
    padding: 0;
    border: 0;
    border-radius: 0;
    background: rgba(0, 0, 0, 0.22);
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.2s ease;
  }

  body.nav-open .sidebar-backdrop {
    opacity: 1;
    pointer-events: auto;
  }

  .topbar {
    position: relative;
    top: auto;
    z-index: 2;
    align-items: flex-start;
    flex-direction: column;
    margin: 0;
  }

  .topbar-title {
    flex: 0 0 auto;
  }

  .section-subnav,
  .course-subnav {
    position: sticky;
    top: 10px;
    z-index: 6;
  }

  .user-box {
    width: 100%;
    justify-content: flex-start;
  }

  .demo-role-switch {
    max-width: 100%;
  }

  .store-switch {
    max-width: 100%;
  }

  #view {
    padding: 16px 4px 44px;
  }

  .grid-two,
  .grid-three,
  .payroll-slip-layout,
  .course-settings-layout,
  .student-detail-layout,
  .metrics {
    grid-template-columns: 1fr;
  }

  .calendar-month {
    overflow-x: auto;
  }

  .calendar-grid {
    min-width: 840px;
  }
}

@media (min-width: 721px) and (max-width: 1180px) and (orientation: portrait) {
  .topbar {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 14px;
    min-height: 0;
    padding: 14px 16px;
  }

  .topbar-title {
    display: grid;
    grid-template-columns: 44px minmax(0, 1fr);
    align-items: center;
    width: 100%;
    min-height: 48px;
    gap: 12px;
  }

  .topbar-title h2 {
    font-size: 21px;
    line-height: 1.2;
  }

  .topbar-title p {
    margin-top: 2px;
    line-height: 1.3;
  }

  .mobile-menu-button {
    width: 44px;
    min-width: 44px;
    height: 44px;
    min-height: 44px;
    padding: 0;
  }

  .user-box {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) minmax(180px, 0.65fr);
    width: 100%;
    gap: 10px;
    align-items: center;
  }

  .mode-badge {
    grid-column: 1;
    grid-row: 1;
    justify-self: start;
  }

  .demo-role-switch {
    grid-column: 2;
    grid-row: 1;
    width: 100%;
    max-width: none;
  }

  .store-switch {
    grid-column: 3;
    grid-row: 1;
    width: 100%;
    max-width: none;
  }

  .demo-role-switch select,
  .store-switch select {
    flex: 1 1 auto;
    width: 100%;
    min-width: 0;
    max-width: none;
  }

  #current-user {
    grid-column: 1 / 3;
    grid-row: 2;
    min-width: 0;
    white-space: normal;
    overflow-wrap: anywhere;
  }

  #logout-button {
    grid-column: 3;
    grid-row: 2;
    justify-self: end;
  }

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

@media (max-width: 720px) {
  body {
    font-size: 13px;
  }

  .workspace,
  .workspace:not(.hidden) {
    padding: 8px;
  }

  .topbar {
    top: 8px;
    padding: 12px;
  }

  .section-subnav,
  .course-subnav {
    position: sticky;
    top: 8px;
    z-index: 6;
  }

  .section-subnav-leading {
    width: 100%;
    flex: 1 1 100%;
    justify-content: flex-start;
    padding: 0 0 8px;
    border-right: 0;
    border-bottom: 1px solid var(--glass-separator);
  }

  .section-subnav-links {
    width: 100%;
    gap: 6px;
  }

  .topbar-title {
    width: 100%;
  }

  .attachment-status-header {
    flex-direction: column;
  }

  .attachment-status-actions {
    width: 100%;
    justify-content: flex-start;
  }

  .attachment-status-actions button {
    flex: 1 1 160px;
  }

  .topbar-title h2 {
    font-size: 19px;
  }

  .user-box {
    gap: 8px;
    white-space: normal;
  }

  .system-clock,
  #current-user {
    white-space: normal;
  }

  .demo-role-switch {
    width: 100%;
  }

  .store-switch {
    width: 100%;
  }

  .store-switch select {
    flex: 1;
    min-width: 0;
  }

  .demo-role-switch select {
    flex: 1;
    min-width: 0;
  }

  .panel,
  .metric-card {
    padding: 14px;
  }

  .dialog-actions {
    flex-direction: column-reverse;
  }

  .dialog-actions button {
    width: 100%;
  }

  .dev-badge {
    display: none;
  }
}

@media (max-width: 720px) {
  body {
    overflow-x: hidden;
  }

  .workspace,
  .workspace:not(.hidden) {
    padding: 0;
  }

  .main-panel {
    width: 100%;
    max-width: 100%;
    min-width: 0;
    padding: 0;
  }

  .topbar,
  #view {
    width: 100%;
    max-width: 100%;
    min-width: 0;
  }

  .topbar {
    position: relative;
    top: 0;
    z-index: 2;
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 10px;
    min-height: 0;
    margin: 0;
    padding: 10px;
    border-width: 0 0 1px;
    border-radius: 0 0 14px 14px;
    background: rgba(255, 255, 255, 0.78);
  }

  .topbar-title {
    display: grid;
    grid-template-columns: 44px minmax(0, 1fr);
    align-items: center;
    width: 100%;
    min-height: 44px;
    gap: 10px;
    flex: 0 0 auto;
  }

  .mobile-menu-button {
    width: 44px;
    min-width: 44px;
    height: 44px;
    min-height: 44px;
    border-radius: 12px;
    font-size: 22px;
  }

  .topbar-title h2 {
    font-size: 20px;
    line-height: 1.2;
  }

  .topbar-title p {
    margin-top: 2px;
    font-size: 13px;
    line-height: 1.28;
  }

  .user-box {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    width: 100%;
    gap: 8px;
    align-items: center;
  }

  .mode-badge {
    justify-self: start;
    min-height: 32px;
    padding: 5px 10px;
  }

  .demo-role-switch {
    grid-column: 1 / -1;
    width: 100%;
    max-width: 100%;
    border-radius: 12px;
  }

  .demo-role-switch select {
    width: 100%;
    max-width: none;
    min-height: 38px;
    font-size: 13px;
  }

  .store-switch {
    grid-column: 1 / -1;
    width: 100%;
    min-height: 40px;
    padding: 5px 10px;
    border-radius: 12px;
  }

  .store-switch select {
    flex: 1 1 auto;
    min-height: 30px;
    font-size: 13px;
  }

  .system-clock,
  #current-user {
    grid-column: 1 / -1;
    max-width: 100%;
    line-height: 1.42;
    white-space: normal;
  }

  .system-clock {
    font-size: 12px;
  }

  #current-user {
    display: block;
    font-size: 13px;
    overflow-wrap: anywhere;
  }

  #logout-button {
    justify-self: start;
    min-height: 38px;
    padding: 7px 16px;
    border-radius: 12px;
  }

  #view {
    gap: 12px;
    padding: 12px 8px 36px;
  }

  .section-subnav,
  .course-subnav {
    position: sticky;
    top: 8px;
    z-index: 6;
    flex-wrap: nowrap;
    align-items: center;
    min-height: 0;
    gap: 6px;
    overflow-x: auto;
    overflow-y: hidden;
    padding: 8px;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }

  .section-subnav::-webkit-scrollbar,
  .course-subnav::-webkit-scrollbar {
    display: none;
  }

  .section-subnav-leading {
    width: auto;
    flex: 0 0 auto;
    padding: 0 8px 0 0;
    border-right: 1px solid var(--glass-separator);
    border-bottom: 0;
  }

  .section-subnav-links {
    width: auto;
    flex: 0 0 auto;
    flex-wrap: nowrap;
    gap: 6px;
  }

  .section-subnav a,
  .course-subnav a {
    flex: 0 0 auto;
    min-height: 34px;
    padding: 7px 11px;
    white-space: nowrap;
  }

  .filter-result-panel,
  .panel,
  .table-panel,
  .metric-card {
    border-radius: 12px;
  }

  .section-header {
    align-items: flex-start;
    gap: 10px;
  }

  .section-header h3 {
    font-size: 18px;
    line-height: 1.24;
  }

  .section-header p {
    font-size: 13px;
    line-height: 1.4;
  }

  .account-section-header {
    flex-direction: column;
  }

  .account-actions,
  .account-actions button {
    width: 100%;
  }

  .toolbar {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 10px;
  }

  .toolbar label,
  .toolbar button {
    width: 100%;
    min-width: 0;
  }

  .date-range-fields {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    width: 100%;
  }

  .date-range-fields label,
  .date-range-fields .date-range-preset-label {
    width: 100%;
    min-width: 0;
  }

  .metrics {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
  }

  .metric-card {
    min-height: 76px;
    padding: 12px;
  }

  .form-grid .half,
  .form-grid .third,
  .form-grid .two-thirds,
  .form-grid .quarter {
    grid-column: span 12;
  }

  .table-panel {
    max-width: 100%;
  }
}

@media (max-width: 430px) {
  .topbar {
    padding: 8px;
  }

  .topbar-title h2 {
    font-size: 19px;
  }

  .demo-role-switch select {
    min-height: 36px;
  }

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

.finance-report-shell {
  display: grid;
  gap: 16px;
}

.finance-report-controls {
  display: grid;
  gap: 12px;
}

.finance-report-controls .toolbar {
  align-items: end;
}

.report-tabs {
  display: flex;
  gap: 8px;
  overflow-x: auto;
  padding-bottom: 2px;
  scrollbar-width: thin;
}

.report-tabs button {
  flex: 0 0 auto;
}

.report-total-row {
  font-weight: 700;
  background: color-mix(in srgb, var(--surface-strong) 88%, var(--accent) 12%);
}

@media (max-width: 720px) {
  .finance-report-controls .toolbar {
    display: grid;
    grid-template-columns: 1fr;
  }

  .finance-report-controls .toolbar > label,
  .finance-report-controls .toolbar > button {
    width: 100%;
  }
}

@media print {
  body {
    background: #fff !important;
  }

  #sidebar,
  .app-header,
  .mobile-nav-backdrop,
  .finance-report-controls,
  .toast,
  .report-view-voucher {
    display: none !important;
  }

  #workspace,
  .workspace-main,
  #view,
  .finance-report-shell,
  .finance-report-print-area {
    display: block !important;
    width: 100% !important;
    max-width: none !important;
    margin: 0 !important;
    padding: 0 !important;
    box-shadow: none !important;
    border: 0 !important;
    overflow: visible !important;
  }

  .finance-report-shell > .metrics {
    display: none !important;
  }

  .finance-report-print-area table {
    width: 100% !important;
    font-size: 10pt !important;
  }

  @page {
    size: A4 landscape;
    margin: 12mm;
  }
}

/* Unified finance workspaces */
#view,
#view > *,
.workspace-header,
.workspace-band,
.workbench-grid,
.split-workspace {
  min-width: 0;
}

.workspace-header {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 20px;
  padding: 4px 0 18px;
  border-bottom: 1px solid var(--line);
}

.workspace-header h3,
.band-heading h3 {
  margin: 2px 0 0;
  font-size: 20px;
  line-height: 1.3;
}

.workspace-header p,
.band-heading p {
  margin: 4px 0 0;
  color: var(--muted);
}

.workspace-eyebrow {
  color: #35636b;
  font-size: 12px;
  font-weight: 700;
}

.workspace-actions,
.form-actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
  flex-wrap: wrap;
}

.workspace-metrics {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  border-bottom: 1px solid var(--line);
}

.workbench-metric {
  min-width: 0;
  padding: 18px;
  border-right: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  background: rgba(255, 255, 255, 0.54);
}

.workbench-metric:nth-child(3n) {
  border-right: 0;
}

.workbench-metric span,
.document-summary span,
.workbench-balance-strip span {
  display: block;
  color: var(--muted);
  font-size: 13px;
}

.workbench-metric strong {
  display: block;
  margin-top: 8px;
  font-size: 24px;
  line-height: 1.2;
}

.workbench-metric.cash strong { color: #235e68; }
.workbench-metric.revenue strong,
.workbench-metric.profit strong { color: var(--success); }
.workbench-metric.expense strong { color: var(--danger); }
.workbench-metric.warning strong { color: var(--gold); }

.workspace-band {
  padding: 18px 0;
  border-bottom: 1px solid var(--line);
}

.finance-list-metrics {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.finance-list-metrics .workbench-metric,
.finance-list-metrics .workbench-metric:nth-child(3n) {
  border-right: 1px solid var(--line);
}

.finance-list-metrics .workbench-metric:nth-child(4n) {
  border-right: 0;
}

.finance-list-workspace .band-heading > span {
  flex: 0 0 auto;
  color: var(--muted);
  white-space: nowrap;
}

.finance-filter-bar {
  display: grid;
  grid-template-columns: minmax(190px, 1.45fr) repeat(5, minmax(120px, 1fr)) auto;
  gap: 8px;
  align-items: center;
  margin: 0 0 14px;
}

.finance-filter-bar > input,
.finance-filter-bar > select,
.finance-filter-bar > .finance-filter-actions {
  min-width: 0;
}

.finance-filter-actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
}

.finance-filter-actions button {
  width: auto;
  min-width: 76px;
  white-space: nowrap;
}

.payroll-entry-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}

.payroll-entry {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 4px 16px;
  align-content: center;
  min-width: 0;
  min-height: 92px;
  padding: 15px 16px;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: rgba(255, 255, 255, 0.46);
  box-shadow: none;
  text-align: left;
}

.payroll-entry:hover {
  border-color: rgba(0, 102, 204, 0.34);
  background: rgba(255, 255, 255, 0.72);
  box-shadow: none;
}

.payroll-entry strong,
.payroll-entry span {
  min-width: 0;
}

.payroll-entry strong {
  font-size: 16px;
}

.payroll-entry span {
  grid-column: 1;
  color: var(--muted);
  line-height: 1.45;
}

.payroll-entry small {
  grid-column: 2;
  grid-row: 1 / span 2;
  align-self: center;
  color: var(--primary-dark);
  white-space: nowrap;
}

.payroll-period-filter {
  margin: 0;
}

.payroll-period-filter input {
  width: 168px;
}

.band-heading {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 14px;
}

.workbench-balance-strip,
.document-summary {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0;
}

.workbench-balance-strip > div,
.document-summary > div {
  padding: 4px 18px;
  border-right: 1px solid var(--line);
}

.workbench-balance-strip > div:last-child,
.document-summary > div:nth-child(3n) {
  border-right: 0;
}

.workbench-balance-strip strong,
.document-summary strong {
  display: block;
  margin-top: 4px;
  font-size: 18px;
}

.workbench-balance-strip small {
  color: var(--muted);
}

.workbench-grid {
  display: grid;
  grid-template-columns: minmax(0, 2fr) minmax(250px, 0.8fr);
  gap: 24px;
  align-items: start;
}

.pending-list {
  border-left: 1px solid var(--line);
  padding-left: 20px;
}

.pending-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto 18px;
  align-items: center;
  gap: 8px;
  width: 100%;
  min-height: 42px;
  padding: 8px 0;
  border: 0;
  border-bottom: 1px solid var(--line);
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  text-align: left;
}

.pending-row:hover {
  background: rgba(255, 255, 255, 0.45);
  box-shadow: none;
}

.card-confirmation-workbench {
  scroll-margin-top: var(--subnav-sticky-top);
}

.card-confirmation-workbench td > small,
.card-confirmation-note {
  display: block;
  margin-top: 4px;
  color: var(--muted);
  font-size: 12px;
}

.order-card-state {
  display: grid;
  justify-items: end;
  gap: 5px;
  width: 100%;
  text-align: right;
}

.order-card-state > span {
  color: var(--text-soft);
  font-variant-numeric: tabular-nums;
}

.order-card-status-row {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
  flex-wrap: wrap;
}

.order-card-action-stack {
  display: grid;
  justify-items: stretch;
  gap: 8px;
  width: min(100%, 190px);
  margin-left: auto;
}

.order-card-action-stack > button {
  width: 100%;
  min-height: 40px;
  padding: 8px 14px;
  font-size: 13px;
}

.order-card-pending {
  display: block;
  padding-top: 2px;
  text-align: right;
}

.order-course-summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  min-width: 0;
}

.order-course-summary > div {
  display: grid;
  gap: 2px;
}

.order-course-summary strong {
  font-size: 13px;
}

.order-course-summary span {
  color: var(--text-soft);
}

.order-course-summary small {
  color: var(--muted);
}

.order-card-state .primary {
  min-width: 92px;
  min-height: 40px;
  padding: 8px 14px;
  font-size: 13px;
}

.card-confirmation-workbench td .primary {
  min-height: 32px;
  padding: 5px 10px;
  font-size: 12px;
}

.sales-order-lines-table {
  min-width: 1040px;
  table-layout: fixed;
}

.sales-order-lines-table th:nth-child(1) { width: 12%; }
.sales-order-lines-table th:nth-child(2) { width: 16%; }
.sales-order-lines-table th:nth-child(3) { width: 7%; }
.sales-order-lines-table th:nth-child(4) { width: 12%; }
.sales-order-lines-table th:nth-child(5) { width: 12%; }
.sales-order-lines-table th:nth-child(6) { width: 11%; }
.sales-order-lines-table th:nth-child(7) { width: 30%; }

.sales-order-card-column,
.sales-order-card-cell {
  text-align: right;
}

.sales-order-lines-panel {
  display: grid;
  gap: 12px;
}

.sales-order-line-ledger {
  min-width: 0;
  max-height: min(560px, 65vh);
  overflow: auto;
  border: 1px solid var(--glass-border);
  border-radius: var(--cluster-radius);
  background: rgba(255, 255, 255, 0.42);
  box-shadow: var(--inner-highlight);
  scrollbar-width: thin;
}

.sales-order-line-head,
.sales-order-line-row {
  display: grid;
  grid-template-columns: repeat(8, minmax(132px, 1fr));
  column-gap: clamp(12px, 1vw, 20px);
  align-items: center;
  min-width: 1180px;
}

.sales-order-line-head {
  position: sticky;
  top: 0;
  z-index: 2;
  min-height: 42px;
  padding: 0 18px;
  border-bottom: 1px solid var(--line);
  background: rgba(247, 248, 250, 0.88);
  backdrop-filter: blur(16px) saturate(1.08);
  -webkit-backdrop-filter: blur(16px) saturate(1.08);
  color: var(--muted);
  font-size: 12px;
  font-weight: 700;
}

.sales-order-line-head > span {
  min-width: 0;
  text-align: center;
}

.sales-order-line-head > span:nth-child(2) {
  text-align: left;
}

.sales-order-line-row {
  min-height: 72px;
  padding: 10px 18px;
  border-bottom: 1px solid var(--glass-separator);
  background: rgba(255, 255, 255, 0.28);
}

.sales-order-line-row:last-child {
  border-bottom: 0;
}

.sales-order-line-row:hover {
  background: rgba(255, 255, 255, 0.48);
}

.sales-order-line-cell {
  display: grid;
  gap: 3px;
  min-width: 0;
  justify-items: center;
  text-align: center;
}

.sales-order-line-action-cell {
  width: 100%;
  justify-self: stretch;
}

.sales-order-line-card-cell {
  display: grid;
  align-items: center;
}

.sales-order-line-cell strong {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 14px;
  line-height: var(--line-height-tight);
}

.sales-order-line-cell small {
  color: var(--muted);
  font-size: 12px;
  line-height: var(--line-height-tight);
}

.sales-order-line-cell.numeric {
  justify-items: center;
  text-align: center;
  font-variant-numeric: tabular-nums;
}

.sales-order-line-session-value {
  display: inline-flex;
  align-items: baseline;
  justify-content: center;
  gap: 4px;
  white-space: nowrap;
}

.sales-order-line-session-value small {
  font-size: 12px;
}

.sales-order-line-cell.amount-primary strong {
  color: var(--danger);
}

.sales-order-line-course .order-course-summary {
  display: block;
  min-width: 0;
}

.sales-order-line-course {
  justify-items: start;
  text-align: left;
}

.sales-order-line-course .order-course-summary > div {
  gap: 1px;
}

.sales-order-line-course .order-course-summary strong {
  display: none;
}

.sales-order-line-course .order-course-summary span,
.sales-order-line-course .order-course-summary small {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.sales-order-line-course-wrap {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
}

.sales-order-line-course-wrap .order-course-summary {
  flex: 0 1 auto;
}

.sales-order-line-course .order-course-info-button {
  display: inline-grid;
  place-items: center;
  width: 28px;
  min-width: 28px;
  height: 28px;
  min-height: 28px;
  padding: 0;
  border-radius: 999px;
  border-color: rgba(10, 132, 255, 0.28);
  background: rgba(10, 132, 255, 0.08);
  color: var(--primary-dark);
  font-size: 14px;
  font-weight: 800;
  font-family: Georgia, "Times New Roman", serif;
  line-height: 1;
  box-shadow: var(--inner-highlight);
}

.sales-order-line-course .order-course-info-button:hover {
  background: rgba(10, 132, 255, 0.14);
  border-color: rgba(10, 132, 255, 0.42);
}

.sales-order-line-course .order-course-info-button:disabled {
  opacity: 0.38;
  cursor: default;
}

.sales-order-line-card-cell .order-card-action-stack {
  width: 100%;
  margin: 0;
  gap: 6px;
}

.sales-order-line-card-cell .order-card-state {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  justify-items: center;
  align-content: center;
  width: 100%;
  text-align: center;
  gap: 4px;
}

.sales-order-line-card-cell .order-card-number {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  text-align: center;
}

.sales-order-line-card-cell .order-card-balance {
  display: inline-flex;
  align-items: baseline;
  gap: 4px;
  min-width: max-content;
  color: var(--text);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.sales-order-line-card-cell .order-card-balance small {
  color: var(--muted);
  font-size: 11px;
}

.sales-order-line-card-cell .order-card-balance b {
  font-size: 14px;
}

.sales-order-line-card-cell .order-card-status-row {
  justify-content: center;
  gap: 6px;
}

.sales-order-line-card-cell .order-card-pending {
  width: 100%;
  text-align: center;
}

.sales-order-line-action-stack,
.order-card-button-row {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.sales-order-line-action-stack {
  justify-content: center;
}

.order-card-button-row > button {
  flex: 0 1 auto;
  min-height: 32px;
  padding: 5px 10px;
  font-size: 12px;
}

.sales-order-line-action-stack > button {
  flex: 0 1 auto;
  min-width: 88px;
  min-height: var(--control-height);
  padding: 8px 14px;
  font-size: inherit;
}

.workspace-tabs {
  display: flex;
  gap: 2px;
  overflow-x: auto;
  padding: 12px 0 0;
  border-bottom: 1px solid var(--line);
  scrollbar-width: thin;
}

.workspace-tabs button {
  flex: 0 0 auto;
  min-height: 38px;
  border: 0;
  border-bottom: 3px solid transparent;
  border-radius: 0;
  padding: 8px 14px;
  background: transparent;
  box-shadow: none;
}

.workspace-tabs button.active {
  border-bottom-color: var(--primary-dark);
  color: var(--primary-dark);
  font-weight: 700;
}

.workspace-primary-tabs {
  margin-bottom: 12px;
  padding-top: 0;
}

.responsive-table {
  width: 100%;
  overflow-x: auto;
}

.responsive-table table {
  min-width: 680px;
}

.compact-field,
.compact-inline-form label {
  display: grid;
  gap: 5px;
}

.compact-field span {
  color: var(--muted);
  font-size: 12px;
}

.sales-order-form {
  display: grid;
  gap: 16px;
}

.finance-dialog.sales-order-dialog {
  width: min(1080px, calc(100vw - 40px));
  max-height: calc(100dvh - 32px);
}

.sales-order-dialog > .dialog-header,
.sales-order-dialog > .dialog-body,
.sales-order-dialog > .dialog-footer {
  padding: 16px 20px;
}

.sales-order-dialog > .dialog-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 20px;
}

.sales-order-dialog > .dialog-header > div {
  min-width: 0;
}

.sales-order-dialog > .dialog-header p {
  margin-top: 4px;
}

.sales-order-core-grid,
.sales-order-meta-grid {
  display: grid;
  grid-template-columns: minmax(360px, 1.7fr) minmax(170px, 0.62fr) minmax(170px, 0.62fr);
  gap: 12px;
  align-items: end;
}

.sales-order-core-grid:has(> :nth-child(2):last-child) {
  grid-template-columns: minmax(420px, 1fr) minmax(180px, 0.34fr);
}

.sales-order-core-grid label,
.sales-order-core-grid .sales-order-fixed-field,
.sales-order-meta-grid label {
  display: grid;
  min-width: 0;
  gap: 5px;
}

.sales-order-core-grid label > span,
.sales-order-core-grid .sales-order-fixed-field > span,
.sales-order-meta-grid label > span {
  color: var(--muted);
  font-size: 12px;
}

.sales-order-fixed-field strong {
  display: flex;
  align-items: center;
  min-width: 0;
  min-height: var(--control-height);
  padding: 8px 10px;
  border: 1px solid rgba(60, 60, 67, 0.12);
  border-radius: var(--radius);
  background: rgba(235, 237, 242, 0.74);
  color: var(--muted);
  font-size: 13px;
  font-weight: 600;
  cursor: not-allowed;
  user-select: none;
}

.sales-student-field {
  display: grid;
  gap: 5px;
}

.sales-student-controls {
  display: grid;
  grid-template-columns: minmax(190px, 0.9fr) minmax(220px, 1.1fr);
  gap: 8px;
}

.sales-student-controls > .select-search-input,
.sales-student-controls > .sales-student-phone-search,
.sales-student-controls > select {
  width: 100%;
  min-width: 0;
}

.sales-order-section-heading {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 12px;
  padding-top: 2px;
}

.sales-order-section-heading > div {
  display: grid;
  gap: 2px;
}

.sales-order-section-heading span {
  color: var(--muted);
  font-size: 12px;
}

.sales-order-section-heading button {
  flex: 0 0 auto;
}

.sales-order-meta-grid {
  grid-template-columns: minmax(160px, 0.72fr) minmax(220px, 1fr) minmax(280px, 1.35fr);
  padding-top: 8px;
}

.sales-order-payment-block {
  padding-top: 2px;
  border-top: 1px solid var(--line);
}

.sales-order-meta-grid .sales-invoice-check {
  display: flex;
  align-items: center;
  min-height: 40px;
  padding-block: 6px;
  white-space: nowrap;
}

.sales-order-meta-grid .sales-invoice-check > span {
  color: var(--text);
  font-size: 13px;
}

#sales-line-editor,
#student-sales-line-editor {
  display: grid;
  gap: 8px;
}

.sales-order-dialog-footer {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 10px;
  margin: 0;
  padding: 12px 20px;
  border-top: 1px solid var(--glass-separator);
  background: rgba(255, 255, 255, 0.58);
}

.sales-line-row {
  display: grid;
  grid-template-columns: minmax(220px, 1.25fr) minmax(220px, 1.1fr) minmax(150px, 0.62fr) 40px;
  gap: 12px;
  align-items: end;
  padding: 12px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.44);
}

.sales-line-row label {
  display: grid;
  gap: 5px;
}

.sales-line-row label span {
  color: var(--muted);
  font-size: 12px;
}

.sales-line-applicability {
  display: grid;
  min-width: 0;
  gap: 5px;
}

.sales-line-applicability > span {
  color: var(--muted);
  font-size: 12px;
}

.sales-line-applicability-control {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 32px;
  gap: 6px;
  align-items: center;
  min-width: 0;
}

.sales-line-applicability-value {
  display: flex;
  align-items: center;
  min-width: 0;
  min-height: 40px;
  padding: 0 12px;
  overflow: hidden;
  border: 1px solid rgba(60, 60, 67, 0.12);
  border-radius: 8px;
  background: rgba(235, 237, 242, 0.74);
  color: var(--muted);
  font-size: 13px;
  font-weight: 600;
  text-overflow: ellipsis;
  white-space: nowrap;
  cursor: not-allowed;
}

.sales-line-applicability-value.warning {
  border-color: rgba(184, 50, 50, 0.28);
  color: var(--danger);
  background: rgba(255, 242, 241, 0.7);
}

.sales-course-info-button {
  width: 32px;
  min-width: 32px;
  min-height: 32px;
  padding: 0;
  border-radius: 50%;
  font-family: Georgia, serif;
  font-size: 16px;
  font-weight: 700;
}

.sales-course-info-button:disabled {
  opacity: 0.35;
}

.sales-course-list-backdrop {
  z-index: 120;
}

.sales-course-list-dialog {
  width: min(760px, calc(100vw - 48px));
  max-height: min(720px, calc(100vh - 48px));
}

.sales-course-dialog-controls {
  display: grid;
  grid-template-columns: minmax(240px, 1fr) auto;
  align-items: end;
  gap: 12px;
  padding-bottom: 12px;
}

.sales-course-dialog-controls > label:first-child {
  display: grid;
  gap: 5px;
}

.sales-course-dialog-controls > label:first-child > span {
  color: var(--muted);
  font-size: 12px;
}

.sales-course-show-all {
  min-height: var(--control-height);
  margin: 0;
  padding: 8px 10px;
  white-space: nowrap;
}

.sales-course-show-all input {
  width: auto;
  min-height: 18px;
}

.sales-course-legend {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 20px;
  padding: 0 0 10px;
  font-size: 12px;
}

.sales-course-legend .owned {
  color: var(--text);
}

.sales-course-legend .other {
  color: var(--muted);
}

.sales-course-store-groups {
  border-top: 1px solid var(--line);
}

.sales-course-store-group {
  padding: 12px 0;
}

.sales-course-store-group + .sales-course-store-group {
  border-top: 1px solid var(--line);
}

.sales-course-store-group > header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 0 4px 8px;
}

.sales-course-store-group > header > div {
  display: flex;
  align-items: baseline;
  min-width: 0;
  gap: 8px;
}

.sales-course-store-group > header span {
  color: inherit;
  font-size: 12px;
}

.sales-course-store-group > ul {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0 20px;
  margin: 0;
  padding: 0 4px;
  list-style: none;
}

.sales-course-store-group li {
  display: flex;
  align-items: center;
  min-width: 0;
  min-height: 38px;
  border-top: 1px solid rgba(60, 60, 67, 0.08);
}

.sales-course-store-group li::before {
  content: "";
  width: 5px;
  height: 5px;
  margin-right: 9px;
  border-radius: 50%;
  background: currentColor;
  opacity: 0.55;
}

.sales-course-store-group li strong {
  min-width: 0;
  font-size: 13px;
  overflow-wrap: anywhere;
}

.sales-course-store-group.owned {
  color: var(--text);
}

.sales-course-store-group.other {
  color: var(--muted);
}

.sales-course-store-group.other strong {
  font-weight: 500;
}

.sales-course-store-empty {
  color: var(--muted);
  font-weight: 400;
}

.sales-course-search-empty {
  margin-top: 12px;
}

.icon-button {
  width: 40px;
  min-width: 40px;
  padding: 0;
  font-size: 22px;
}

.document-summary {
  padding: 16px 0;
  border-bottom: 1px solid var(--line);
  grid-template-columns: repeat(6, minmax(0, 1fr));
}

.document-summary > div:nth-child(3n) {
  border-right: 1px solid var(--line);
}

.document-summary > div:last-child {
  border-right: 0;
}

.split-workspace {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 24px;
}

.split-workspace > div + div {
  border-left: 1px solid var(--line);
  padding-left: 24px;
}

.compact-inline-form {
  display: flex;
  align-items: end;
  gap: 8px;
  flex-wrap: wrap;
  margin-top: 14px;
}

.compact-inline-form input,
.compact-inline-form select {
  min-width: 140px;
}

.sales-payment-form {
  display: grid;
  grid-template-columns: repeat(3, minmax(150px, 210px)) minmax(180px, 260px) auto;
  align-items: end;
  justify-content: start;
  gap: 12px;
  max-width: 1080px;
}

.sales-payment-form label {
  display: grid;
  gap: 6px;
  min-width: 0;
}

.sales-payment-form label > span {
  color: var(--muted);
  font-size: 12px;
}

.sales-payment-form input,
.sales-payment-form select {
  width: 100%;
  min-width: 0;
}

.sales-payment-form .form-actions {
  align-self: end;
  margin: 0;
}

.sales-payment-form .form-actions button {
  min-width: 118px;
}

.document-file {
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 54px;
  padding: 10px 0;
  border-bottom: 1px solid var(--line);
}

.document-file > div {
  display: grid;
  gap: 3px;
  min-width: 0;
}

.document-file small {
  color: var(--muted);
}

.contract-archive-form {
  display: grid;
  grid-template-columns: minmax(240px, 1.4fr) minmax(180px, 1fr) auto;
  align-items: end;
  gap: 12px;
  padding: 14px 0;
  border-bottom: 1px solid var(--line);
}

.contract-archive-form label {
  display: grid;
  gap: 6px;
  min-width: 0;
}

.contract-archive-form label > span {
  color: var(--muted);
  font-size: 12px;
}

.contract-archive-form input {
  width: 100%;
  min-width: 0;
}

.sales-money-flow-stack {
  display: grid;
  gap: 26px;
}

.sales-money-flow-stack > section + section {
  padding-top: 24px;
  border-top: 1px solid var(--line);
}

.document-timeline {
  display: grid;
  gap: 0;
  list-style: none;
  margin: 0;
  padding: 0;
}

.document-timeline li {
  display: grid;
  grid-template-columns: 160px 150px minmax(0, 1fr);
  gap: 14px;
  padding: 12px 0;
  border-bottom: 1px solid var(--line);
}

.document-timeline span,
.document-timeline small {
  color: var(--muted);
}

.status.pending_principal,
.status.pending_owner,
.status.pending_payment,
.status.pending_voucher,
.status.voucher_draft {
  color: #745700;
  background: #fff5cc;
}

.status.failed,
.status.rejected {
  color: var(--danger);
  background: #fde7e5;
}

.status.sales-order-status.draft,
.status.sales-order-status.completed,
.status.sales-order-status.refunded {
  color: #666b73;
  background: #f2f3f5;
  border-color: #d6d9de;
}

.status.sales-order-status.pending_principal,
.status.sales-order-status.pending_owner,
.status.sales-order-status.pending_payment {
  color: #745700;
  background: #fff5cc;
  border-color: #e5cf73;
}

.status.sales-order-status.active {
  color: #277a4b;
  background: #eef8f1;
  border-color: #c9ded0;
}

.status.sales-order-status.cancelled {
  color: var(--danger);
  background: #fde7e5;
  border-color: #e8c0bd;
}

@media (max-width: 900px) {
  .workspace-metrics {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .workbench-metric:nth-child(3n) { border-right: 1px solid var(--line); }
  .workbench-metric:nth-child(2n) { border-right: 0; }

  .workbench-grid,
  .split-workspace {
    grid-template-columns: minmax(0, 1fr);
  }

  .pending-list,
  .split-workspace > div + div {
    border-left: 0;
    padding-left: 0;
  }

  .contract-archive-form {
    grid-template-columns: minmax(0, 1fr);
  }

  .document-summary {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .document-summary > div:nth-child(3n) { border-right: 0; }

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

  .finance-filter-bar {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .finance-filter-actions {
    grid-column: 1 / -1;
  }

  .sales-payment-form {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    max-width: none;
  }

  .sales-payment-form .form-actions {
    grid-column: 1 / -1;
    justify-content: flex-start;
  }

  .sales-order-line-ledger {
    max-height: min(520px, 62vh);
  }
}

@media (max-width: 600px) {
  .workspace-header,
  .band-heading {
    align-items: stretch;
    flex-direction: column;
  }

  .workspace-actions,
  .workspace-actions button,
  .workspace-header > button,
  .compact-field {
    width: 100%;
  }

  .workspace-metrics,
  .workbench-balance-strip,
  .document-summary {
    grid-template-columns: minmax(0, 1fr);
  }

  .workbench-metric,
  .workbench-metric:nth-child(2n),
  .workbench-metric:nth-child(3n),
  .workbench-balance-strip > div,
  .document-summary > div,
  .document-summary > div:nth-child(3n) {
    border-right: 0;
  }

  .workbench-metric {
    min-height: 82px;
  }

  .sales-line-row {
    grid-template-columns: minmax(0, 1fr) 40px;
  }

  .sales-order-line-ledger {
    max-height: none;
    overflow: visible;
    border: 0;
    background: transparent;
  }

  .sales-order-line-head {
    display: none;
  }

  .sales-order-line-body {
    display: grid;
    gap: 10px;
  }

  .sales-order-line-row {
    min-width: 0;
    grid-template-columns: minmax(0, 1fr);
    gap: 8px;
    align-items: stretch;
    min-height: 0;
    padding: 12px;
    border: 1px solid var(--glass-border);
    border-radius: var(--cluster-radius);
    background: rgba(255, 255, 255, 0.42);
    box-shadow: var(--inner-highlight);
  }

  .sales-order-line-cell {
    grid-template-columns: 74px minmax(0, 1fr);
    align-items: start;
    gap: 10px;
    padding-right: 0;
    justify-items: stretch;
    text-align: left;
  }

  .sales-order-line-cell::before {
    content: attr(data-label);
    color: var(--muted);
    font-size: 12px;
    font-weight: 700;
    line-height: var(--line-height-tight);
  }

  .sales-order-line-cell strong,
  .sales-order-line-course .order-course-summary span,
  .sales-order-line-course .order-course-summary small,
  .sales-order-line-card-cell .order-card-state strong,
  .sales-order-line-card-cell .order-card-state > span {
    white-space: normal;
  }

  .sales-order-line-cell.numeric {
    justify-items: stretch;
    text-align: left;
  }

  .sales-order-line-session-value {
    justify-self: start;
    justify-content: flex-start;
  }

  .sales-order-line-card-cell {
    display: grid;
    padding-left: 0;
    border-left: 0;
  }

  .sales-order-line-card-cell .order-card-state {
    justify-items: start;
    text-align: left;
  }

  .sales-order-line-card-cell .order-card-number,
  .sales-order-line-card-cell .order-card-pending {
    text-align: left;
  }

  .sales-order-line-card-cell .order-card-status-row,
  .sales-order-line-action-stack {
    justify-content: flex-start;
  }

  .order-card-button-row > button {
    flex: 1 1 0;
  }

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

  .finance-filter-search {
    grid-column: 1 / -1;
  }

  .finance-filter-actions {
    grid-column: 1 / -1;
    justify-content: stretch;
  }

  .finance-filter-actions button {
    flex: 1 1 0;
    width: auto;
  }

  .payroll-entry-grid {
    grid-template-columns: minmax(0, 1fr);
  }

  .payroll-entry {
    min-height: 84px;
  }

  .payroll-period-filter,
  .payroll-period-filter input,
  .payroll-period-filter button {
    width: 100%;
  }

  .sales-line-row label {
    grid-column: 1 / -1;
  }

  .sales-line-row .sales-line-applicability {
    grid-column: 1 / -1;
  }

  .sales-line-applicability-control {
    grid-template-columns: minmax(0, 1fr) 44px;
  }

  .sales-course-info-button {
    width: 44px;
    min-width: 44px;
    min-height: 44px;
  }

  .sales-course-dialog-controls,
  .sales-course-store-group > ul {
    grid-template-columns: minmax(0, 1fr);
  }

  .sales-course-show-all {
    min-height: 44px;
  }

  .sales-line-row .icon-button {
    grid-column: 2;
  }

  .compact-inline-form {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
  }

  .compact-inline-form input,
  .compact-inline-form select,
  .compact-inline-form button {
    width: 100%;
  }

  .sales-payment-form {
    grid-template-columns: minmax(0, 1fr);
  }

  .sales-payment-form .form-actions {
    grid-column: auto;
  }

  .document-timeline li {
    grid-template-columns: minmax(0, 1fr);
    gap: 3px;
  }

  .pagination-bar {
    align-items: stretch;
    flex-direction: column;
  }

  .pagination-bar > div,
  .pagination-bar button {
    width: 100%;
  }
}

/* Finance UI round 3: shared business-style layout primitives */
.form-grid > .form-actions,
.form-grid > fieldset,
.form-grid > details,
.form-grid > .table-panel {
  grid-column: 1 / -1;
  min-width: 0;
}

details:not([open]) > :not(summary) {
  display: none !important;
}

.finance-overview-toolbar,
.finance-task-header {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 16px;
  padding: 0 0 16px;
}

.finance-overview-toolbar h3,
.finance-task-header h3 {
  margin: 0;
  font-size: 18px;
}

.finance-overview-toolbar p,
.finance-task-header p {
  margin: 4px 0 0;
  color: var(--muted);
}

.finance-task-page {
  min-width: 0;
  padding: 18px 0;
}

.finance-task-page > .panel,
.finance-task-page > .table-panel {
  max-width: 1180px;
  margin-inline: auto;
}

.workspace-secondary-tabs {
  margin-bottom: 12px;
  padding-top: 8px;
  background: rgba(255, 255, 255, 0.24);
}

.workspace-secondary-tabs button {
  min-height: 36px;
  padding: 7px 12px;
  font-size: 13px;
}

.finance-filter-shell {
  display: grid;
  gap: 8px;
  margin: 0 0 14px;
}

.finance-filter-common {
  display: grid;
  grid-template-columns: minmax(220px, 1.45fr) repeat(3, minmax(140px, 1fr)) auto;
  gap: 8px;
  align-items: end;
}

.sales-list-filter .finance-filter-common {
  grid-template-columns: minmax(140px, 1.35fr) repeat(6, minmax(100px, 0.82fr)) minmax(244px, auto);
}

.sales-list-filter.pending-only .finance-filter-common {
  grid-template-columns: minmax(140px, 1.35fr) repeat(5, minmax(100px, 0.82fr)) minmax(244px, auto);
}

.sales-list-filter .finance-filter-actions {
  flex-wrap: nowrap;
}

.finance-filter-common > label,
.finance-filter-advanced-fields > label,
.finance-compact-filter > label {
  display: grid;
  gap: 5px;
  min-width: 0;
}

.finance-filter-common label > span,
.finance-filter-advanced-fields label > span,
.finance-compact-filter label > span {
  color: var(--muted);
  font-size: 12px;
  line-height: 1.2;
}

.finance-filter-common input,
.finance-filter-common select,
.finance-filter-advanced-fields input,
.finance-filter-advanced-fields select,
.finance-compact-filter input,
.finance-compact-filter select {
  width: 100%;
  min-width: 0;
}

.finance-filter-advanced {
  border-top: 1px solid var(--line);
  padding-top: 8px;
}

.finance-filter-advanced > summary {
  width: max-content;
  cursor: pointer;
  color: var(--primary-dark);
  font-size: 13px;
  font-weight: 700;
  list-style: none;
}

.finance-filter-advanced > summary::-webkit-details-marker,
.table-action-menu > summary::-webkit-details-marker {
  display: none;
}

.finance-filter-advanced-fields {
  display: grid;
  grid-template-columns: repeat(3, minmax(160px, 1fr));
  gap: 8px;
  margin-top: 8px;
}

.finance-compact-filter {
  display: flex;
  flex-wrap: wrap;
  align-items: end;
  gap: 8px;
  padding: 12px 16px;
  border-bottom: 1px solid var(--line);
}

.finance-compact-filter > label {
  width: min(210px, 100%);
}

.finance-compact-filter > input,
.finance-compact-filter > select {
  flex: 0 1 210px;
  width: min(210px, 100%);
}

.finance-compact-filter > button {
  flex: 0 0 auto;
}

.table-actions {
  align-items: center;
}

.table-actions-desktop {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.table-action-mobile {
  display: none;
}

.table-action-menu {
  position: relative;
  flex: 0 0 auto;
}

.table-action-menu > summary {
  min-height: var(--control-height);
  display: inline-flex;
  align-items: center;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 8px 14px;
  cursor: pointer;
  background: rgba(255, 255, 255, 0.56);
  color: var(--text);
  list-style: none;
  white-space: nowrap;
}

.table-action-menu-popover {
  position: absolute;
  z-index: 30;
  top: calc(100% + 6px);
  right: 0;
  display: grid;
  min-width: 150px;
  gap: 6px;
  padding: 8px;
  border: 1px solid var(--glass-border);
  border-radius: var(--radius);
  background: rgba(255, 255, 255, 0.98);
  box-shadow: var(--panel-shadow);
}

.table-action-menu-popover button {
  width: 100%;
  white-space: nowrap;
}

.finance-dialog {
  width: min(840px, calc(100vw - 48px));
  height: auto;
  max-height: calc(100vh - 48px);
  display: grid;
  grid-template-rows: auto minmax(0, auto) auto;
  overflow: hidden;
}

.finance-dialog > .dialog-body {
  min-height: 0;
  max-height: calc(100vh - 180px);
  overflow: auto;
}

.finance-dialog.content-fit-dialog {
  width: min(720px, calc(100vw - 48px));
}

.finance-dialog.payroll-editor-dialog {
  width: min(1040px, calc(100vw - 48px));
}

.finance-dialog .dialog-body > .panel,
.finance-dialog .dialog-body > .panel:first-child:last-child {
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}

.finance-dialog .dialog-body > .panel > .section-header:first-child {
  display: none;
}

.filter-result-panel.finance-list-workspace > .panel.accounting-entity-panel {
  margin: 0;
}

.finance-dialog > .dialog-footer {
  position: relative;
  z-index: 2;
}

.finance-dialog .form-grid {
  margin-top: 0;
}

.promoted-finance-form-trigger {
  width: fit-content;
  margin-top: 12px;
}

.promoted-finance-form-body > form {
  margin: 0;
}

.finance-report-controls .report-tabs {
  margin: 10px 0;
}

@media (max-width: 1180px) {
  .sales-list-filter .finance-filter-common,
  .sales-list-filter.pending-only .finance-filter-common {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }

  .sales-list-filter .finance-filter-search,
  .sales-list-filter .finance-filter-actions {
    grid-column: span 2;
  }
}

@media (max-width: 900px) {
  .sales-order-core-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

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

  .sales-invoice-check {
    grid-column: 1 / -1;
  }

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

  .sales-list-filter .finance-filter-common,
  .sales-list-filter.pending-only .finance-filter-common {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .finance-filter-search,
  .finance-filter-actions {
    grid-column: 1 / -1;
  }

  .sales-list-filter .finance-filter-search,
  .sales-list-filter .finance-filter-actions {
    grid-column: 1 / -1;
  }

  .finance-filter-advanced-fields {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 600px) {
  button,
  input,
  select {
    min-height: 44px;
  }

  .finance-overview-toolbar,
  .finance-task-header {
    align-items: stretch;
    flex-direction: column;
  }

  .finance-task-header .actions,
  .finance-task-header .actions button {
    width: 100%;
  }

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

  .finance-filter-common > label:first-child,
  .finance-filter-search,
  .finance-filter-actions {
    grid-column: 1 / -1;
  }

  .finance-filter-actions {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .finance-filter-actions button {
    width: 100%;
  }

  .finance-filter-advanced-fields {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .finance-compact-filter,
  .finance-compact-filter > label,
  .finance-compact-filter > input,
  .finance-compact-filter > select,
  .finance-compact-filter > button {
    width: 100%;
  }

  .finance-compact-filter {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .finance-compact-filter > button:last-child:nth-child(odd) {
    grid-column: 1 / -1;
  }

  .table-actions-desktop {
    display: none;
  }

  .table-action-mobile {
    display: block;
  }

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

  .finance-dialog {
    width: calc(100vw - 16px);
    max-width: none;
    max-height: calc(100dvh - 16px);
    border-radius: 12px;
  }

  .filter-result-panel.finance-list-workspace,
  #fund-accounts-section,
  #bank-transactions-section,
  #reconciliation-section,
  #cash-count-section {
    padding: 12px;
  }

  .finance-list-workspace .band-heading > .actions,
  .finance-list-workspace .section-header > .actions {
    width: 100%;
  }

  .finance-list-workspace .band-heading > .actions > button,
  .finance-list-workspace .section-header > .actions > button {
    flex: 1 1 0;
  }

  .finance-dialog > .dialog-footer button {
    flex: 1 1 0;
  }

  .sales-order-dialog > .dialog-header,
  .sales-order-dialog > .dialog-body,
  .sales-order-dialog > .dialog-footer {
    padding: 12px;
  }

  .sales-order-dialog-footer {
    margin: 2px -12px -12px;
    padding: 12px;
  }

  .sales-order-core-grid,
  .sales-order-meta-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px 8px;
  }

  .sales-student-field,
  .sales-order-meta-grid > label:not(.sales-invoice-check) {
    grid-column: 1 / -1;
  }

  .sales-order-section-heading {
    align-items: stretch;
    flex-direction: column;
  }

  .sales-order-section-heading button {
    width: 100%;
  }
}

/* Public demo shell stabilization after first-load splitting. */
@media (min-width: 1181px) {
  .workspace {
    display: grid;
    grid-template-columns: var(--sidebar-width) minmax(0, 1fr);
    min-height: 100vh;
    padding: 0 12px 12px 0;
  }

  .sidebar {
    position: sticky;
    top: 0;
    inset: auto;
    width: auto;
    z-index: 20;
  }

  .main-panel {
    min-width: 0;
    margin-left: 0;
    padding: 12px 0 0 12px;
  }

  .topbar {
    display: grid;
    grid-template-columns: minmax(220px, 1fr) minmax(0, auto);
    align-items: center;
    gap: 16px;
  }

  .topbar-title {
    min-width: 0;
  }

  .user-box {
    min-width: 0;
    justify-content: end;
    flex-wrap: wrap;
    white-space: normal;
  }

  .demo-role-switch {
    flex: 0 1 260px;
    max-width: 260px;
  }

  .store-switch {
    flex: 0 1 180px;
    max-width: 180px;
  }

  .demo-role-switch select,
  .store-switch select {
    min-width: 0;
    max-width: 100%;
  }
}

/* Promotion workspace and split paid/bonus session balances. */
.card-balance-part {
  display: inline-flex;
  align-items: baseline;
  gap: 4px;
  white-space: nowrap;
}

.card-balance-part small {
  color: var(--muted);
  font-size: 0.78rem;
}

.card-balance-part.bonus strong {
  color: #b36a16;
}

.card-balance-separator {
  color: var(--line-strong, #cbd5d1);
  margin: 0 6px;
}

.promotion-editor-dialog,
.promotion-detail-dialog {
  width: min(1120px, calc(100vw - 32px));
}

.promotion-eyebrow,
.promotion-editor-kicker {
  display: block;
  margin-bottom: 6px;
  color: var(--accent);
  font-size: 12px;
  font-weight: 800;
  letter-spacing: .12em;
}

.promotion-launchpad {
  display: grid;
  grid-template-columns: minmax(220px, .72fr) minmax(0, 1.55fr);
  gap: 24px;
  align-items: center;
  padding: 24px;
  border: 1px solid color-mix(in srgb, var(--accent) 22%, var(--line));
  border-radius: 22px;
  background:
    radial-gradient(circle at 0 0, color-mix(in srgb, var(--accent) 16%, transparent), transparent 38%),
    linear-gradient(135deg, color-mix(in srgb, var(--panel) 94%, var(--accent) 6%), var(--panel));
  box-shadow: var(--shadow-soft);
}

.promotion-launchpad-copy h3,
.promotion-workspace-heading h3 {
  margin: 0;
  font-size: clamp(20px, 2vw, 26px);
}

.promotion-launchpad-copy p,
.promotion-workspace-heading p {
  margin: 7px 0 0;
  color: var(--muted);
  line-height: 1.55;
}

.promotion-create-options {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
}

.promotion-create-option {
  min-height: 138px;
  display: grid;
  grid-template-columns: 48px minmax(0, 1fr);
  gap: 14px;
  align-items: start;
  padding: 18px;
  border: 1px solid var(--line);
  border-radius: 18px;
  color: var(--ink);
  background: color-mix(in srgb, var(--panel) 96%, var(--accent) 4%);
  text-align: left;
  box-shadow: none;
  transition: transform .18s ease, border-color .18s ease, box-shadow .18s ease;
}

.promotion-create-option:hover {
  transform: translateY(-2px);
  border-color: color-mix(in srgb, var(--accent) 48%, var(--line));
  box-shadow: 0 12px 26px rgba(18, 45, 38, .09);
}

.promotion-create-option > span:last-child {
  min-width: 0;
}

.promotion-create-option strong,
.promotion-create-option small,
.promotion-create-option em {
  display: block;
}

.promotion-create-option strong {
  margin-top: 1px;
  font-size: 16px;
}

.promotion-create-option small {
  margin-top: 7px;
  min-height: 38px;
  color: var(--muted);
  line-height: 1.45;
}

.promotion-create-option em {
  margin-top: 12px;
  color: var(--accent);
  font-style: normal;
  font-weight: 800;
}

.promotion-create-icon,
.promotion-card-icon,
.promotion-choice-icon {
  display: grid;
  place-items: center;
  width: 46px;
  height: 46px;
  border-radius: 14px;
  color: #fff;
  background: linear-gradient(135deg, var(--accent), color-mix(in srgb, var(--accent) 72%, #143b33));
  font-weight: 900;
  box-shadow: 0 8px 18px color-mix(in srgb, var(--accent) 24%, transparent);
}

.promotion-create-bonus .promotion-create-icon,
.promotion-card-bonus .promotion-card-icon,
.promotion-type-choice:nth-child(2) .promotion-choice-icon {
  background: linear-gradient(135deg, #df8b2f, #b86414);
  box-shadow: 0 8px 18px rgba(190, 105, 20, .2);
}

.promotion-readonly-note {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 18px 20px;
  border: 1px solid var(--line);
  border-radius: 18px;
  background: var(--panel);
}

.promotion-readonly-note > span {
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  border-radius: 12px;
  background: color-mix(in srgb, var(--accent) 12%, var(--panel));
  color: var(--accent);
  font-weight: 900;
}

.promotion-readonly-note p {
  margin: 3px 0 0;
  color: var(--muted);
}

.promotion-workspace {
  overflow: visible;
}

.promotion-workspace-heading {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 20px;
  margin-bottom: 18px;
}

.promotion-result-count {
  flex: none;
  color: var(--muted);
}

.promotion-result-count strong {
  color: var(--ink);
  font-size: 20px;
}

.promotion-status-tabs {
  display: flex;
  gap: 6px;
  padding: 5px;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: color-mix(in srgb, var(--surface) 70%, var(--panel));
  overflow-x: auto;
}

.promotion-status-tab {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-width: 104px;
  padding: 9px 13px;
  border: 0;
  border-radius: 10px;
  color: var(--muted);
  background: transparent;
  box-shadow: none;
  white-space: nowrap;
}

.promotion-status-tab strong {
  display: inline-grid;
  place-items: center;
  min-width: 24px;
  height: 24px;
  padding: 0 7px;
  border-radius: 999px;
  color: inherit;
  background: color-mix(in srgb, var(--line) 64%, transparent);
  font-size: 12px;
}

.promotion-status-tab.active {
  color: var(--accent);
  background: var(--panel);
  box-shadow: 0 5px 14px rgba(18, 45, 38, .08);
}

.promotion-status-tab.active strong {
  color: #fff;
  background: var(--accent);
}

.promotion-filter-panel {
  margin-top: 14px;
  padding: 14px;
  border: 1px solid var(--line);
  border-radius: 16px;
  background: color-mix(in srgb, var(--panel) 94%, var(--surface));
}

.promotion-filter-main {
  display: grid;
  grid-template-columns: minmax(240px, 1fr) minmax(170px, 220px) auto auto;
  gap: 10px;
  align-items: end;
}

.promotion-filter-main label,
.promotion-filter-more label {
  margin: 0;
}

.promotion-more-filters {
  margin-top: 10px;
}

.promotion-more-filters summary {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: var(--accent);
  cursor: pointer;
  font-size: 13px;
  font-weight: 800;
  list-style: none;
}

.promotion-more-filters summary::-webkit-details-marker {
  display: none;
}

.promotion-more-filters summary::after {
  content: "⌄";
  transition: transform .16s ease;
}

.promotion-more-filters[open] summary::after {
  transform: rotate(180deg);
}

.promotion-more-filters summary strong {
  display: inline-grid;
  place-items: center;
  min-width: 20px;
  height: 20px;
  padding: 0 6px;
  border-radius: 999px;
  color: #fff;
  background: var(--accent);
  font-size: 11px;
}

.promotion-filter-more {
  display: grid;
  grid-template-columns: repeat(3, minmax(160px, 1fr)) auto;
  gap: 10px;
  align-items: end;
  margin-top: 12px;
  padding-top: 12px;
  border-top: 1px dashed var(--line);
}

.promotion-card-list {
  display: grid;
  gap: 14px;
  margin-top: 16px;
}

.promotion-card {
  position: relative;
  display: grid;
  grid-template-columns: 52px minmax(0, 1fr);
  gap: 16px;
  padding: 18px;
  border: 1px solid var(--line);
  border-radius: 18px;
  background: var(--panel);
  transition: border-color .18s ease, box-shadow .18s ease;
}

.promotion-card:hover {
  border-color: color-mix(in srgb, var(--accent) 34%, var(--line));
  box-shadow: 0 12px 28px rgba(18, 45, 38, .07);
}

.promotion-card-main {
  min-width: 0;
}

.promotion-card-heading {
  display: flex;
  justify-content: space-between;
  gap: 18px;
}

.promotion-card-badges {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 7px;
}

.promotion-type-badge {
  color: var(--accent);
  font-size: 12px;
  font-weight: 800;
}

.promotion-card-bonus .promotion-type-badge {
  color: #a45a14;
}

.promotion-card h4 {
  margin: 0;
  font-size: 18px;
}

.promotion-card-heading p {
  margin: 5px 0 0;
  color: var(--muted);
  line-height: 1.45;
}

.promotion-card-owner {
  flex: none;
  min-width: 76px;
  text-align: right;
}

.promotion-card-owner span,
.promotion-card-owner strong {
  display: block;
}

.promotion-card-owner span {
  color: var(--muted);
  font-size: 11px;
}

.promotion-card-owner strong {
  margin-top: 3px;
  font-size: 13px;
}

.promotion-card-facts {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
  margin: 16px 0 0;
}

.promotion-card-facts > div {
  min-width: 0;
  padding: 11px 12px;
  border-radius: 12px;
  background: color-mix(in srgb, var(--surface) 68%, var(--panel));
}

.promotion-card-facts dt {
  color: var(--muted);
  font-size: 11px;
}

.promotion-card-facts dd {
  margin: 5px 0 0;
  color: var(--ink);
  font-size: 13px;
  font-weight: 700;
  line-height: 1.4;
}

.promotion-card-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin-top: 14px;
  padding-top: 14px;
  border-top: 1px solid var(--line);
}

.promotion-next-step {
  color: var(--accent);
  font-size: 13px;
  font-weight: 800;
}

.promotion-card-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 8px;
}

.promotion-card-actions button {
  padding: 8px 12px;
}

.promotion-empty-state {
  display: grid;
  justify-items: center;
  padding: 52px 20px;
  border: 1px dashed var(--line);
  border-radius: 18px;
  color: var(--muted);
  text-align: center;
}

.promotion-empty-state > span {
  display: grid;
  place-items: center;
  width: 52px;
  height: 52px;
  border-radius: 16px;
  color: var(--accent);
  background: color-mix(in srgb, var(--accent) 10%, var(--panel));
  font-size: 25px;
}

.promotion-empty-state strong {
  margin-top: 12px;
  color: var(--ink);
}

.promotion-empty-state p {
  margin: 5px 0 14px;
}

.promotion-editor-dialog {
  max-height: calc(100vh - 32px);
}

.promotion-editor-header {
  padding-bottom: 14px;
}

.promotion-flow-steps {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 10px 22px;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  background: color-mix(in srgb, var(--surface) 70%, var(--panel));
  color: var(--muted);
  font-size: 12px;
  font-weight: 700;
}

.promotion-flow-steps span {
  display: inline-flex;
  align-items: center;
  gap: 7px;
}

.promotion-flow-steps b,
.promotion-form-section-title > b {
  display: inline-grid;
  place-items: center;
  width: 24px;
  height: 24px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--line) 72%, var(--panel));
}

.promotion-flow-steps .active {
  color: var(--accent);
}

.promotion-flow-steps .active b,
.promotion-form-section-title > b {
  color: #fff;
  background: var(--accent);
}

.promotion-flow-steps i {
  width: 42px;
  height: 1px;
  background: var(--line);
}

.promotion-form-section {
  padding: 18px;
  border: 1px solid var(--line);
  border-radius: 16px;
  background: var(--panel);
}

.promotion-form-section + .promotion-form-section {
  margin-top: 14px;
}

.promotion-mode-panel {
  background: color-mix(in srgb, var(--panel) 94%, var(--accent) 6%);
}

.promotion-form-section-title {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  margin-bottom: 16px;
}

.promotion-form-section-title h4,
.promotion-form-section-title p {
  margin: 0;
}

.promotion-form-section-title p {
  margin-top: 3px;
  color: var(--muted);
  font-size: 13px;
}

.promotion-type-field > span {
  display: block;
  margin-bottom: 8px;
  color: var(--muted);
  font-size: 12px;
  font-weight: 700;
}

.promotion-type-choices,
.promotion-rule-choices {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}

.promotion-type-choice,
.promotion-rule-choice {
  position: relative;
  display: flex;
  align-items: center;
  gap: 12px;
  min-height: 76px;
  margin: 0;
  padding: 12px;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: var(--panel);
  cursor: pointer;
}

.promotion-type-choice input,
.promotion-rule-choice input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

.promotion-type-choice:has(input:checked),
.promotion-rule-choice:has(input:checked) {
  border-color: var(--accent);
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--accent) 15%, transparent);
}

.promotion-type-choice strong,
.promotion-type-choice small,
.promotion-rule-choice strong,
.promotion-rule-choice small {
  display: block;
}

.promotion-type-choice small,
.promotion-rule-choice small {
  margin-top: 4px;
  color: var(--muted);
  line-height: 1.4;
}

.promotion-choice-icon {
  flex: none;
  width: 38px;
  height: 38px;
  border-radius: 12px;
}

.promotion-date-row {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.promotion-date-row > label {
  grid-column: auto;
}

.promotion-date-row label > small {
  display: block;
  margin-top: 5px;
  color: var(--muted);
}

.promotion-rule-callout {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  margin-top: 12px;
  padding: 12px 14px;
  border-radius: 12px;
  color: var(--accent);
  background: color-mix(in srgb, var(--accent) 10%, var(--panel));
}

.promotion-rule-callout > span {
  display: grid;
  place-items: center;
  flex: none;
  width: 22px;
  height: 22px;
  border-radius: 999px;
  color: #fff;
  background: var(--accent);
}

.promotion-rule-callout strong,
.promotion-rule-callout small {
  display: block;
}

.promotion-rule-callout small {
  margin-top: 3px;
  color: var(--muted);
  line-height: 1.45;
}

.promotion-price-list-heading {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-top: 18px;
}

.promotion-price-list-heading strong,
.promotion-price-list-heading span {
  display: block;
}

.promotion-price-list-heading span {
  margin-top: 3px;
  color: var(--muted);
  font-size: 12px;
}

.promotion-price-rows {
  display: grid;
  gap: 10px;
  margin-top: 10px;
}

.promotion-price-row {
  display: grid;
  grid-template-columns: minmax(190px, 1.2fr) minmax(105px, .55fr) minmax(145px, .75fr) minmax(165px, .85fr) auto;
  align-items: end;
  gap: 10px;
  padding: 12px;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: var(--panel);
}

.promotion-price-row:focus-within {
  position: relative;
  z-index: 4;
}

.promotion-plan-field {
  position: relative;
}

.promotion-plan-control {
  position: relative;
  min-width: 0;
}

.promotion-plan-control > input,
.promotion-plan-control > .promotion-plan-suggestions {
  width: 100%;
  box-sizing: border-box;
}

.marketing-dialog .promotion-plan-control > .promotion-plan-suggestions {
  position: absolute;
  top: auto;
  bottom: calc(100% + 5px);
  max-height: min(330px, 52vh);
}

.promotion-plan-option.is-active {
  background: rgba(10, 132, 255, 0.08);
}

.promotion-plan-option > span:last-child {
  justify-items: end;
  color: var(--muted);
  text-align: right;
}

.promotion-price-row label,
.promotion-bonus-session-row label,
.promotion-bonus-units {
  margin: 0;
}

.money-input {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  min-width: 0;
  height: var(--control-height);
  min-height: var(--control-height);
  border: 1px solid var(--glass-separator);
  border-radius: var(--radius);
  background: rgba(255, 255, 255, 0.38);
  overflow: hidden;
}

.money-input > span {
  display: flex;
  align-items: center;
  align-self: stretch;
  margin: 0;
  padding-left: 12px;
  color: var(--muted);
  font-weight: 800;
  line-height: 1;
}

.money-input input {
  height: calc(var(--control-height) - 2px);
  min-height: calc(var(--control-height) - 2px);
  margin: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}

.unit-input,
.discount-input {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  min-width: 0;
  height: var(--control-height);
  min-height: var(--control-height);
  overflow: hidden;
  border: 1px solid var(--glass-separator);
  border-radius: var(--radius);
  background: rgba(255, 255, 255, 0.38);
}

.unit-input input,
.discount-input input {
  min-width: 0;
  height: calc(var(--control-height) - 2px);
  min-height: calc(var(--control-height) - 2px);
  margin: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}

.unit-input > span,
.discount-input > span {
  display: flex;
  align-items: center;
  align-self: stretch;
  margin: 0;
  padding-right: 12px;
  color: var(--muted);
  font-weight: 700;
  line-height: 1;
  white-space: nowrap;
}

.money-input:focus-within,
.unit-input:focus-within,
.discount-input:focus-within {
  border-color: var(--focus-border);
  box-shadow: var(--focus-ring), var(--inner-highlight);
}

.promotion-price-preview {
  min-height: var(--control-height);
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 7px 10px;
  border-radius: 10px;
  background: color-mix(in srgb, var(--surface) 70%, var(--panel));
}

.promotion-price-preview span {
  color: var(--muted);
  font-size: 10px;
}

.promotion-price-preview strong {
  margin-top: 2px;
  font-size: 12px;
}

.promotion-price-preview.valid strong {
  color: var(--success);
}

.promotion-price-preview.invalid strong {
  color: var(--danger);
}

.promotion-bonus-rule-row {
  margin-top: 0;
}

.promotion-bonus-session-row {
  display: grid;
  grid-template-columns: minmax(150px, .65fr) minmax(170px, .7fr) minmax(220px, 1fr);
  align-items: end;
  gap: 12px;
  margin-top: 14px;
  padding: 12px;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: var(--panel);
}

.promotion-bonus-preview {
  min-height: 42px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 7px 12px;
  border-radius: 10px;
  color: var(--success);
  background: color-mix(in srgb, var(--success) 10%, var(--panel));
}

.promotion-bonus-preview span {
  color: var(--muted);
  font-size: 10px;
}

.promotion-bonus-preview strong {
  margin-top: 2px;
  font-size: 13px;
}

#promotion-referral-explainer {
  margin-top: 12px;
}

.promotion-capacity-summary {
  display: flex;
  align-items: baseline;
  gap: 10px;
  margin-bottom: 12px;
  padding: 11px 13px;
  border-radius: 12px;
  background: color-mix(in srgb, var(--accent) 9%, var(--panel));
}

.promotion-capacity-summary span,
.promotion-capacity-summary small {
  color: var(--muted);
}

.promotion-capacity-summary small {
  margin-left: auto;
}

.promotion-bonus-amount > div {
  display: flex;
  align-items: center;
  gap: 10px;
}

.promotion-bonus-amount input {
  width: 150px;
  font-size: 22px;
  font-weight: 900;
}

.promotion-bonus-amount > div strong {
  color: var(--accent);
  font-size: 16px;
}

.promotion-bonus-amount > small {
  display: block;
  margin-top: 6px;
  color: var(--muted);
}

.promotion-editor-footer {
  justify-content: space-between;
  gap: 18px;
}

.promotion-draft-note strong,
.promotion-draft-note span {
  display: block;
}

.promotion-draft-note span {
  margin-top: 3px;
  color: var(--muted);
  font-size: 12px;
}

/* The promotions page follows the same list-first pattern as other business pages. */
.promotion-workspace .section-header {
  align-items: center;
  margin-bottom: 0;
}

.promotion-heading-actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: var(--control-gap);
}

.promotion-result-count {
  color: var(--muted);
  white-space: nowrap;
}

.promotion-list-filter {
  display: grid;
  grid-template-columns:
    minmax(120px, 1fr)
    minmax(96px, .52fr)
    minmax(96px, .52fr)
    repeat(2, minmax(122px, .72fr))
    minmax(108px, .62fr)
    auto;
  align-items: end;
  gap: var(--control-gap);
}

.promotion-list-filter.has-store-filter {
  grid-template-columns:
    minmax(120px, 1fr)
    minmax(96px, .52fr)
    minmax(96px, .52fr)
    repeat(2, minmax(122px, .72fr))
    minmax(108px, .62fr)
    minmax(108px, .62fr)
    auto;
}

.promotion-list-filter > label {
  min-width: 0;
  margin: 0;
}

.promotion-filter-actions {
  display: flex;
  align-items: end;
  gap: var(--control-gap);
}

.promotion-filter-actions button {
  min-width: 64px;
  white-space: nowrap;
}

@media (max-width: 1180px) {
  .promotion-list-filter,
  .promotion-list-filter.has-store-filter {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .promotion-filter-actions {
    grid-column: 1 / -1;
    justify-content: flex-end;
  }
}

.promotion-list-table {
  margin-top: 0;
  overflow: auto;
  border: 0;
  border-radius: var(--radius);
  background: rgba(255, 255, 255, 0.32);
}

.promotion-list-table table {
  width: 100%;
  min-width: 1180px;
  table-layout: fixed;
}

.promotion-col-name { width: 20%; }
.promotion-col-period { width: 21%; }
.promotion-col-type { width: 16%; }
.promotion-col-count { width: 10%; }
.promotion-col-status { width: 10%; }
.promotion-col-actions { width: 23%; }

.promotion-list-table th,
.promotion-list-table td {
  min-width: 0;
  vertical-align: middle;
}

.promotion-list-table th:nth-child(4),
.promotion-list-table td:nth-child(4),
.promotion-list-table th:nth-child(5),
.promotion-list-table td:nth-child(5),
.promotion-list-table th:nth-child(6),
.promotion-list-table td:nth-child(6) {
  text-align: left;
}

.promotion-list-table td:nth-child(2) {
  white-space: nowrap;
}

.promotion-name-button {
  display: grid;
  width: 100%;
  min-width: 0;
  gap: 3px;
  color: var(--primary-dark);
}

.promotion-name-button strong,
.promotion-name-button small {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.promotion-name-button strong {
  color: var(--primary-dark);
}

.promotion-name-button small {
  color: var(--muted);
  font-weight: 400;
}

.promotion-list-table td > small,
.promotion-list-table td > strong + small,
.promotion-form-badge + small {
  display: block;
  margin-top: 4px;
  color: var(--muted);
  font-size: 12px;
}

.promotion-form-badge {
  display: inline-flex;
  align-items: center;
  padding: 5px 9px;
  border-radius: 999px;
  border: 1px solid rgba(10, 132, 255, 0.16);
  color: var(--primary-dark);
  background: rgba(10, 132, 255, 0.07);
  font-size: 12px;
  font-weight: 800;
}

.promotion-form-badge.bonus {
  border-color: rgba(138, 101, 0, 0.18);
  color: #806100;
  background: rgba(255, 204, 0, 0.1);
}

.promotion-form-badge.coupon {
  border-color: rgba(179, 38, 30, 0.14);
  color: #9e3d31;
  background: rgba(255, 105, 66, 0.08);
}

.promotion-form-badge.prize {
  border-color: rgba(111, 78, 160, 0.16);
  color: #69479a;
  background: rgba(111, 78, 160, 0.08);
}

.promotion-list-actions {
  display: grid;
  width: 100%;
  min-width: 0;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  align-items: center;
  gap: 8px;
}

.promotion-list-actions .secondary {
  grid-column: 1;
}

.promotion-list-actions .primary {
  grid-column: 2;
}

.promotion-list-actions .danger {
  grid-column: 3;
}

.promotion-list-actions > .muted {
  display: inline-flex;
  grid-column: 1 / -1;
  width: 100%;
  min-height: var(--control-height);
  align-items: center;
  justify-content: center;
  text-align: center;
}

.promotion-list-actions button {
  width: 100%;
  min-width: 0;
  min-height: var(--control-height);
  padding: 8px 10px;
  font-size: inherit;
  white-space: nowrap;
}

@media (min-width: 681px) and (max-width: 1500px) {
  .promotion-list-table table {
    min-width: 800px;
  }

  .promotion-col-name { width: 17%; }
  .promotion-col-period { width: 21%; }
  .promotion-col-type { width: 14%; }
  .promotion-col-count { width: 11%; }
  .promotion-col-status { width: 11%; }
  .promotion-col-actions { width: 26%; }

  .promotion-list-table th,
  .promotion-list-table td {
    padding: 8px 6px;
  }

  .promotion-list-table td:nth-child(2) {
    font-size: 12px;
  }

  .promotion-list-table td > small,
  .promotion-list-table td > strong + small,
  .promotion-list-table .promotion-form-badge + small {
    font-size: 11px;
  }

  .promotion-list-table .promotion-form-badge {
    padding: 4px 6px;
    font-size: 11px;
  }

  .promotion-list-actions {
    gap: 4px;
  }
}

.promotion-editor-dialog {
  width: min(920px, calc(100vw - 32px));
}

.promotion-basic-fields {
  padding-bottom: 16px;
  border-bottom: 1px solid var(--line);
}

.promotion-simple-panel {
  margin-top: 16px;
  padding: 16px;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: color-mix(in srgb, var(--panel) 95%, var(--accent) 5%);
}

.promotion-simple-panel-heading {
  margin-bottom: 14px;
}

.promotion-simple-panel-heading h4,
.promotion-simple-panel-heading p {
  margin: 0;
}

.promotion-simple-panel-heading p {
  margin-top: 4px;
  color: var(--muted);
  font-size: 13px;
}

.promotion-card-picker {
  max-height: 430px;
  overflow: auto;
}

.promotion-card-picker table {
  min-width: 760px;
}

.promotion-card-picker th:first-child,
.promotion-card-picker td:first-child {
  width: 64px;
  text-align: center;
}

.promotion-participation-dialog {
  width: min(760px, calc(100vw - 32px));
}

.promotion-referral-section {
  border: 1px solid var(--line);
  border-radius: 14px;
  padding: 16px;
  background: color-mix(in srgb, var(--panel) 92%, var(--accent) 8%);
}

.inline-search {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 10px;
  margin-bottom: 12px;
}

.promotion-referral-results {
  display: grid;
  gap: 8px;
  max-height: 280px;
  overflow: auto;
}

.promotion-referral-option {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 12px;
  padding: 12px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--panel);
  cursor: pointer;
}

.promotion-referral-option:has(input:checked) {
  border-color: var(--accent);
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--accent) 18%, transparent);
}

.promotion-referral-option span,
.promotion-referral-option small {
  display: block;
}

.promotion-referral-option em {
  font-style: normal;
  color: var(--success);
  white-space: nowrap;
}

.promotion-referral-option.disabled {
  opacity: .58;
  cursor: not-allowed;
}

.promotion-referral-option.disabled em {
  color: var(--gold);
}

.sales-line-price-hint {
  grid-column: 1 / -2;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 9px 12px;
  border-radius: 10px;
  background: color-mix(in srgb, var(--success) 11%, var(--panel));
  color: var(--success);
}

.sales-line-price-hint span {
  color: var(--muted);
  font-size: 12px;
}

.sales-line-price-hint.full {
  background: color-mix(in srgb, var(--danger) 10%, var(--panel));
  color: var(--danger);
}

@media (max-width: 1100px) {
  .promotion-launchpad {
    grid-template-columns: 1fr;
  }

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

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

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

@media (max-width: 768px) {
  .card-balance-separator {
    display: block;
    height: 2px;
    margin: 0;
    visibility: hidden;
  }

  .promotion-price-row,
  .promotion-date-row,
  .promotion-bonus-session-row {
    grid-template-columns: 1fr;
  }

  .promotion-capacity-summary {
    align-items: flex-start;
    flex-direction: column;
    gap: 4px;
  }

  .promotion-capacity-summary small {
    margin-left: 0;
  }

  .promotion-launchpad {
    padding: 18px;
  }

  .promotion-create-options,
  .promotion-type-choices,
  .promotion-rule-choices,
  .promotion-filter-main,
  .promotion-filter-more,
  .promotion-list-filter,
  .promotion-card-facts {
    grid-template-columns: 1fr;
  }

  .promotion-simple-panel {
    padding: 12px;
  }

  .promotion-create-option {
    min-height: 0;
  }

  .promotion-status-tabs {
    margin-inline: -2px;
  }

  .promotion-status-tab {
    min-width: 92px;
  }

  .promotion-workspace-heading,
  .promotion-card-heading,
  .promotion-card-footer,
  .promotion-price-list-heading,
  .promotion-editor-footer {
    align-items: stretch;
    flex-direction: column;
  }

  .promotion-result-count,
  .promotion-card-owner {
    text-align: left;
  }

  .promotion-card {
    grid-template-columns: 40px minmax(0, 1fr);
    gap: 11px;
    padding: 14px;
  }

  .promotion-card-icon {
    width: 40px;
    height: 40px;
    border-radius: 12px;
  }

  .promotion-card-actions {
    justify-content: stretch;
  }

  .promotion-card-actions button,
  .promotion-editor-footer .actions,
  .promotion-editor-footer .actions button {
    width: 100%;
  }

  .promotion-flow-steps {
    justify-content: flex-start;
    overflow-x: auto;
  }

  .promotion-flow-steps span {
    flex: none;
  }

  .promotion-flow-steps i {
    flex: 0 0 22px;
  }

  .promotion-form-section {
    padding: 14px;
  }

  .promotion-price-row .remove-promotion-price-row {
    width: 100%;
  }

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

  .promotion-referral-option {
    grid-template-columns: auto minmax(0, 1fr);
  }

  .promotion-referral-option em {
    grid-column: 2;
  }

  .sales-line-price-hint {
    align-items: flex-start;
    flex-direction: column;
    gap: 2px;
  }
}

/* Course dialogs are normalized by the shared dialog helper, but they must keep
   their own wide scheduling layouts instead of inheriting finance dialog sizing. */
.course-edit-dialog.finance-dialog {
  width: min(680px, calc(100vw - 32px));
  max-height: calc(100vh - 48px);
  display: block;
  grid-template-rows: unset;
}

.course-create-dialog.finance-dialog {
  width: min(1680px, calc(100vw - 32px));
  max-height: calc(100vh - 32px);
  display: flex;
  flex-direction: column;
  grid-template-rows: unset;
}

@media (min-width: 900px) and (orientation: landscape), (min-width: 1100px) {
  .course-create-dialog.finance-dialog {
    height: calc(100vh - 32px);
  }
}

/* Portrait navigation uses an app-style tab bar and a compact More sheet. */
.mobile-sidebar-header {
  display: none;
}

.mobile-bottom-nav {
  display: none;
}

@media (max-width: 1180px) {
  body.nav-open {
    overflow: hidden;
  }

  .mobile-bottom-nav {
    position: fixed;
    inset: auto 10px max(8px, env(safe-area-inset-bottom)) 10px;
    z-index: 80;
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 4px;
    min-height: 64px;
    padding: 6px;
    border: 1px solid rgba(255, 255, 255, 0.76);
    border-radius: 18px;
    background: rgba(248, 248, 250, 0.88);
    box-shadow: 0 14px 36px rgba(0, 0, 0, 0.16), inset 0 1px 0 rgba(255, 255, 255, 0.88);
    backdrop-filter: blur(24px) saturate(1.18);
    -webkit-backdrop-filter: blur(24px) saturate(1.18);
  }

  .mobile-bottom-nav-button,
  .mobile-bottom-nav-button:hover,
  .mobile-bottom-nav-button:active {
    display: grid;
    grid-template-rows: 22px 16px;
    place-items: center;
    gap: 1px;
    min-width: 0;
    min-height: 50px;
    padding: 4px 2px;
    border: 0;
    border-radius: 12px;
    background: transparent;
    box-shadow: none;
    color: #6e6e73;
    transform: none;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
  }

  .mobile-bottom-nav-button.active,
  .mobile-bottom-nav-button.is-open {
    background: rgba(10, 132, 255, 0.09);
    color: var(--primary-dark);
  }

  .mobile-bottom-nav-icon {
    display: grid;
    place-items: center;
    min-width: 22px;
    height: 22px;
    font-size: 17px;
    font-weight: 750;
    line-height: 1;
  }

  .mobile-bottom-more-icon {
    letter-spacing: 1px;
  }

  .mobile-bottom-nav-label {
    display: block;
    max-width: 100%;
    overflow: hidden;
    font-size: 10px;
    font-weight: 650;
    line-height: 16px;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .mobile-menu-button {
    display: none;
  }

  .topbar-title,
  .topbar .topbar-title {
    grid-template-columns: minmax(0, 1fr);
    gap: 0;
  }

  #view {
    padding-bottom: calc(92px + env(safe-area-inset-bottom));
  }

  .dev-badge {
    bottom: calc(82px + env(safe-area-inset-bottom));
  }

  .sidebar {
    inset: auto auto calc(80px + env(safe-area-inset-bottom)) 50%;
    width: min(760px, calc(100vw - 20px));
    max-width: 760px;
    height: auto;
    min-height: 0;
    max-height: min(68dvh, 560px);
    padding: 10px;
    overflow-x: hidden;
    overflow-y: auto;
    overscroll-behavior: contain;
    border-color: rgba(255, 255, 255, 0.82);
    border-radius: 18px;
    background: rgba(246, 246, 248, 0.94);
    box-shadow: 0 22px 54px rgba(0, 0, 0, 0.22), inset 0 1px 0 rgba(255, 255, 255, 0.92);
    transform: translate(-50%, calc(100% + 100px));
    backdrop-filter: blur(28px) saturate(1.16);
    -webkit-backdrop-filter: blur(28px) saturate(1.16);
  }

  body.nav-open .sidebar {
    transform: translate(-50%, 0);
  }

  .mobile-sidebar-header {
    position: sticky;
    top: -10px;
    z-index: 2;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin: -10px -10px 8px;
    padding: 12px 12px 10px;
    border-bottom: 1px solid var(--glass-separator);
    background: rgba(246, 246, 248, 0.88);
    backdrop-filter: blur(22px) saturate(1.12);
    -webkit-backdrop-filter: blur(22px) saturate(1.12);
  }

  .mobile-sidebar-header > div {
    display: grid;
    gap: 1px;
    min-width: 0;
  }

  .mobile-sidebar-header strong {
    font-size: 16px;
    line-height: 1.25;
  }

  .mobile-sidebar-header span {
    color: var(--muted);
    font-size: 11px;
  }

  .mobile-sidebar-close,
  .mobile-sidebar-close:hover,
  .mobile-sidebar-close:active {
    display: grid;
    place-items: center;
    width: 34px;
    min-width: 34px;
    height: 34px;
    min-height: 34px;
    padding: 0;
    border: 1px solid var(--glass-separator);
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.68);
    box-shadow: var(--inner-highlight);
    color: var(--text);
    font-size: 22px;
    font-weight: 400;
    line-height: 1;
    transform: none;
  }

  .sidebar-brand {
    display: none;
  }

  .profile-entry {
    width: 100%;
    margin: 0 0 8px;
    padding: 8px 10px;
    background: rgba(255, 255, 255, 0.72);
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
  }

  .sidebar-subnav {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    align-items: center;
    gap: 8px;
    margin: 0 0 10px;
    padding: 8px;
    background: rgba(255, 255, 255, 0.58);
  }

  .sidebar-subnav-title {
    padding: 0;
    white-space: nowrap;
  }

  .sidebar-subnav-leading {
    grid-column: 1 / -1;
    padding: 0 0 7px;
  }

  .sidebar-subnav-links {
    display: flex;
    gap: 4px;
    min-width: 0;
    overflow-x: auto;
    scrollbar-width: none;
  }

  .sidebar-subnav-links::-webkit-scrollbar {
    display: none;
  }

  .sidebar-subnav a,
  .sidebar-subnav-button {
    flex: 0 0 auto;
    width: auto;
    min-height: 32px;
    padding: 6px 9px;
    white-space: nowrap;
  }

  .nav-section-items {
    grid-template-columns: minmax(0, 1fr);
    gap: 4px;
  }

  .sidebar nav {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    align-items: start;
    gap: 10px 12px;
  }

  .nav-section {
    min-width: 0;
  }

  .nav-section-title {
    padding: 0 7px 3px;
  }

  .nav-button,
  .nav-button:hover,
  .nav-button:active {
    min-height: 34px;
    padding: 7px 9px;
    border-radius: 9px;
    background: rgba(255, 255, 255, 0.46);
    transform: none;
  }

  .nav-button {
    justify-content: flex-start;
    text-align: left;
  }

  .nav-button.active::before {
    inset: 7px auto 7px 1px;
    width: 3px;
    height: auto;
  }

  .sidebar-backdrop,
  .sidebar-backdrop:hover,
  .sidebar-backdrop:active {
    background: rgba(0, 0, 0, 0.24);
    border: 0;
    border-radius: 0;
    box-shadow: none;
    transform: none;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
  }
}

@media (max-width: 430px) and (orientation: portrait) {
  .mobile-bottom-nav {
    inset-inline: 6px;
    gap: 2px;
    border-radius: 16px;
  }

  .sidebar {
    width: calc(100vw - 12px);
  }

  .sidebar nav {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
  }
}

/* 活动：列表常驻，新建、编辑与详情使用标准弹窗 */
.marketing-dialog {
  width: min(1120px, calc(100vw - 48px));
  max-height: calc(100dvh - 48px);
  display: block;
  border-radius: var(--cluster-radius);
  background: rgba(248, 249, 252, .72);
  box-shadow: var(--glass-shadow), var(--inner-highlight);
  backdrop-filter: blur(var(--glass-blur-dialog)) saturate(var(--glass-saturation-dialog)) brightness(1.04);
  -webkit-backdrop-filter: blur(var(--glass-blur-dialog)) saturate(var(--glass-saturation-dialog)) brightness(1.04);
}

.marketing-type-dialog { width: min(940px, calc(100vw - 48px)); }
.marketing-editor-dialog { width: min(960px, calc(100vw - 48px)); }
.marketing-detail-dialog { width: min(1180px, calc(100vw - 48px)); }

.marketing-dialog > .marketing-page-shell {
  width: 100%;
  max-height: calc(100dvh - 48px);
  display: grid;
  grid-template-rows: auto minmax(0, 1fr);
  margin: 0;
  padding: 0;
  gap: 0;
}

.marketing-type-dialog > .marketing-page-shell,
.marketing-detail-dialog > .marketing-page-shell {
  grid-template-rows: auto minmax(0, 1fr) auto;
}

.marketing-dialog .marketing-page-header {
  position: static;
  z-index: auto;
  margin: 0;
  border: 0;
  border-bottom: 1px solid var(--glass-separator);
  border-radius: 0;
  background: rgba(255, 255, 255, .32);
  box-shadow: none;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}

.marketing-dialog .marketing-editor-footer,
.marketing-dialog .marketing-dialog-footer {
  position: static;
  z-index: auto;
  bottom: auto;
  margin: 0;
  padding: 16px 18px;
  border-top: 1px solid var(--glass-separator);
  background: rgba(255, 255, 255, .28);
  box-shadow: none;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}

.marketing-page-shell {
  width: 100%;
  min-height: 0;
  display: grid;
  gap: 0;
}

.marketing-dialog-content {
  min-height: 0;
  display: grid;
  gap: 18px;
  padding: 18px;
  overflow: auto;
  overscroll-behavior: contain;
  background: rgba(255, 255, 255, .1);
}

.marketing-dialog .marketing-editor-form {
  min-height: 0;
  display: grid;
  grid-template-rows: minmax(0, 1fr) auto;
  gap: 0;
}

.marketing-page-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  padding: 16px 18px;
  border: 0;
  border-radius: 0;
  background: rgba(255, 255, 255, .32);
  box-shadow: none;
}

.marketing-page-header > div:first-child {
  min-width: 0;
}

.marketing-page-header .marketing-back-list {
  min-height: var(--control-height);
  margin: 0;
  padding: 8px 14px;
}

.marketing-type-token {
  color: var(--primary-dark);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0;
}

.marketing-page-header h3 {
  margin: 0;
  font-size: 18px;
  line-height: var(--line-height-tight);
}

.marketing-page-header h3 + p { margin-top: 4px; }

.marketing-page-header p,
.marketing-section-title p,
.marketing-subsection span {
  margin: 0;
  color: var(--muted);
}

.marketing-type-token {
  display: flex;
  align-items: center;
  gap: 9px;
  min-height: var(--control-height);
  padding: 7px 10px;
  border: 1px solid var(--glass-separator);
  border-radius: var(--radius);
  color: var(--text);
  background: rgba(255, 255, 255, .38);
  box-shadow: var(--inner-highlight);
  white-space: nowrap;
}

.marketing-type-token b,
.marketing-section-title > span {
  display: grid;
  place-items: center;
  width: 24px;
  height: 24px;
  border: 1px solid rgba(10, 132, 255, .28);
  border-radius: 50%;
  color: var(--primary-dark);
  background: rgba(10, 132, 255, .08);
  font-size: 12px;
}

.marketing-type-token.bonus { color: #756000; background: rgba(255, 204, 0, .08); }
.marketing-type-token.bonus b { background: #9b7a00; }
.marketing-type-token.coupon { color: #9b3a22; background: rgba(255, 105, 66, .07); }
.marketing-type-token.coupon b { background: #d85a39; }
.marketing-type-token.prize { color: #69479a; background: rgba(111, 78, 160, .08); }
.marketing-type-token.prize b { background: #69479a; }

.marketing-type-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 0;
  overflow: hidden;
  border: 1px solid var(--glass-separator);
  border-radius: var(--radius);
  background: rgba(255, 255, 255, .2);
  box-shadow: var(--inner-highlight);
}

.marketing-type-card {
  min-height: 132px;
  padding: 16px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  text-align: left;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}

.marketing-type-card + .marketing-type-card {
  border-left: 1px solid var(--glass-separator);
}

.marketing-type-card:hover {
  background: rgba(255, 255, 255, .48);
  box-shadow: inset 0 1px rgba(255, 255, 255, .72);
  transform: none;
}

.marketing-type-card > span {
  display: grid;
  place-items: center;
  width: 30px;
  height: 30px;
  margin-bottom: 10px;
  border: 1px solid rgba(10, 132, 255, .24);
  border-radius: 50%;
  color: var(--primary-dark);
  background: rgba(10, 132, 255, .08);
  font-size: 14px;
  font-weight: 700;
}

.marketing-type-card strong { font-size: 16px; }
.marketing-type-card p { flex: 1; margin: 5px 0 10px; color: var(--muted); }
.marketing-type-card em { color: var(--primary-dark); font-size: 13px; font-style: normal; font-weight: 600; }

.marketing-editor-section,
.marketing-detail-section,
.marketing-action-banner {
  display: grid;
  gap: 14px;
  min-width: 0;
}

.marketing-editor-section,
.marketing-detail-section {
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}

.marketing-editor-form .form-grid,
.marketing-editor-section .promotion-price-rows {
  margin-top: 0;
}

.marketing-dialog :where(label, input, select, textarea, button),
.marketing-dialog .marketing-editor-form :where(.form-grid > *, .marketing-issue-tools > *) {
  min-width: 0;
  max-width: 100%;
}

.marketing-dialog-content > .marketing-editor-section + .marketing-editor-section,
.marketing-dialog-content > .marketing-detail-section,
.marketing-dialog-content > .marketing-action-banner {
  padding-top: 16px;
  border-top: 1px solid var(--glass-separator);
}

.marketing-action-banner {
  padding: 14px 16px;
  border-right: 0;
  border-bottom: 0;
  border-left: 0;
  border-radius: 0;
  background: rgba(10, 132, 255, .035);
  box-shadow: none;
}

.marketing-editor-section .marketing-section-title > span,
.marketing-detail-section .marketing-section-title > span {
  width: 4px;
  height: 24px;
  border: 0;
  border-radius: 2px;
  background: var(--primary);
  color: transparent;
  font-size: 0;
}

.marketing-section-title,
.marketing-subsection,
.marketing-action-banner,
.marketing-editor-footer,
.marketing-issue-tools {
  display: flex;
  align-items: center;
  gap: 12px;
}

.marketing-section-title > div { flex: 1; min-width: 0; }
.marketing-section-title h4 { margin: 0 0 3px; font-size: 16px; }
.marketing-basic-grid {
  grid-template-columns: minmax(260px, 1fr) 140px 180px 180px;
  align-items: start;
}
.marketing-validity-grid {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.marketing-coupon-rule-grid {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.marketing-coupon-rule-grid > label,
.marketing-validity-grid > label {
  min-width: 0;
}

.marketing-coupon-rule-grid > label > span,
.marketing-validity-grid > label > span {
  white-space: nowrap;
}

.marketing-editor-form .marketing-basic-grid > label,
.marketing-editor-form .marketing-validity-grid > label,
.marketing-editor-form .marketing-coupon-rule-grid > label {
  grid-column: auto;
}

.marketing-editor-form .marketing-basic-grid > .marketing-name-field { grid-column: 1 / 3; grid-row: 1; }
.marketing-editor-form .marketing-basic-grid > .marketing-participant-field { grid-column: 3; grid-row: 1; }
.marketing-editor-form .marketing-basic-grid > .marketing-person-limit-field { grid-column: 4; grid-row: 1; }
.marketing-editor-form .marketing-basic-grid > .marketing-note-field {
  display: flex;
  flex-direction: column;
  grid-column: 1 / 3;
  grid-row: 2 / 4;
  align-self: stretch;
}
.marketing-editor-form .marketing-basic-grid > .marketing-start-date-field { grid-column: 3; grid-row: 2; }
.marketing-editor-form .marketing-basic-grid > .marketing-end-date-field { grid-column: 4; grid-row: 2; }
.marketing-editor-form .marketing-basic-grid > .marketing-store-field {
  grid-column: 3 / 5;
  grid-row: 3;
  min-width: 0;
}
.marketing-note-field textarea {
  flex: 1;
  min-height: 112px;
}
.marketing-store-field > .marketing-derived-scope { min-height: var(--control-height); }
.marketing-store-field > .marketing-scope-fields { grid-template-columns: 1fr; }

.marketing-derived-scope,
.marketing-rule-preview {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 12px 14px;
  border: 1px solid rgba(10, 132, 255, .12);
  border-radius: var(--radius);
  background: rgba(10, 132, 255, .05);
}

.marketing-derived-scope span,
.marketing-rule-preview span,
.marketing-rule-preview small { color: var(--muted); }

.marketing-derived-scope span,
.marketing-derived-scope strong {
  white-space: nowrap;
}

.marketing-scope-fields,
.marketing-bonus-layout {
  display: grid;
  grid-template-columns: minmax(220px, .7fr) minmax(0, 1.3fr);
  align-items: start;
  gap: 14px;
}

.marketing-store-scope-control > small,
.card-plan-scope-note {
  display: block;
  margin-top: 6px;
  color: var(--muted);
  font-size: 12px;
  line-height: 1.45;
}

.marketing-store-choice-panel {
  display: grid;
  gap: 9px;
  padding: 10px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: rgba(255, 255, 255, .28);
}

.marketing-store-choice-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.marketing-store-choice-toolbar > span {
  color: var(--muted);
  font-size: 13px;
}

.marketing-store-choice-toolbar > div {
  display: flex;
  gap: 8px;
}

.marketing-store-choice-toolbar button {
  min-height: 34px;
  padding: 6px 12px;
}

.marketing-bonus-layout { grid-template-columns: minmax(0, 1.1fr) minmax(220px, .6fr); }
.marketing-bonus-layout .marketing-rule-preview { grid-column: 1 / -1; display: grid; justify-content: start; }
.marketing-preset-row { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 7px 0 0; }
.marketing-session-preset { min-height: var(--control-height); padding: 8px 12px; }
.marketing-session-preset.active { color: #fff; border-color: var(--primary); background: var(--primary); }
.marketing-custom-session-field {
  flex: 0 1 160px;
  width: 160px;
  min-width: 138px;
  margin: 0;
}

.marketing-prize-rows {
  display: grid;
  gap: 10px;
}

.marketing-prize-row {
  display: grid;
  grid-template-columns: minmax(240px, 1.6fr) 92px 82px minmax(140px, .8fr) auto;
  align-items: end;
  gap: 10px;
  min-width: 0;
  padding: 12px;
  border: 1px solid var(--glass-separator);
  border-radius: var(--radius);
  background: rgba(255, 255, 255, .24);
}

.marketing-prize-row > * { min-width: 0; }
.marketing-prize-row > button { min-height: var(--control-height); }
.marketing-prize-row:focus-within { position: relative; z-index: 4; }
.marketing-prize-name { position: relative; }
.marketing-prize-name > input,
.marketing-prize-name > .marketing-prize-suggestions { width: 100%; box-sizing: border-box; }
.marketing-prize-unit input[readonly] {
  color: var(--text);
  background: rgba(244, 247, 250, .76);
  cursor: default;
}
.marketing-prize-stock-summary {
  grid-column: 1 / -1;
  display: flex;
  align-items: center;
  min-height: 34px;
  padding: 7px 10px;
  border: 1px solid rgba(60, 60, 67, .10);
  border-radius: calc(var(--radius) - 2px);
  background: rgba(248, 249, 251, .64);
  color: var(--muted);
  font-size: 12px;
  line-height: 1.45;
}
.marketing-prize-stock-summary.is-linked {
  border-color: rgba(10, 132, 255, .16);
  background: rgba(10, 132, 255, .06);
  color: #365e6c;
}
.marketing-prize-stock-summary.is-low {
  border-color: rgba(220, 38, 38, .16);
  background: rgba(254, 242, 242, .72);
  color: var(--danger);
}
.marketing-prize-preview { display: grid; justify-content: start; }

/* Marketing compound fields use one visual control layer. Currency and unit
   labels are overlays, so their inner input can never collide with a second
   bordered container. */
.marketing-dialog :is(.money-input, .unit-input, .discount-input, .marketing-custom-session-field) {
  position: relative;
  display: block;
  min-width: 0;
  height: var(--control-height);
  min-height: var(--control-height);
  overflow: visible;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}

.marketing-dialog :is(.money-input, .unit-input, .discount-input, .marketing-custom-session-field):focus-within {
  border-color: transparent;
  box-shadow: none;
}

.marketing-dialog :is(.money-input, .unit-input, .discount-input, .marketing-custom-session-field) > input {
  width: 100%;
  min-width: 0;
  height: var(--control-height);
  min-height: var(--control-height);
  margin: 0;
  padding: 8px 42px 8px 10px;
  border: 1px solid rgba(255, 255, 255, 0.64);
  border-radius: var(--radius);
  background: rgba(255, 255, 255, 0.46);
  box-shadow: var(--inner-highlight);
  backdrop-filter: blur(var(--glass-blur-control)) saturate(var(--glass-saturation-control));
  -webkit-backdrop-filter: blur(var(--glass-blur-control)) saturate(var(--glass-saturation-control));
}

.marketing-dialog .money-input > input {
  padding-right: 10px;
  padding-left: 32px;
}

.marketing-dialog .marketing-custom-session-field > input {
  padding-right: 50px;
}

.marketing-dialog :is(.money-input, .unit-input, .discount-input, .marketing-custom-session-field) > input:focus {
  border-color: rgba(255, 255, 255, 0.82);
  box-shadow: var(--inner-highlight);
}

.marketing-dialog :is(.money-input, .unit-input, .discount-input, .marketing-custom-session-field) > input:focus-visible {
  border-color: var(--focus-border);
  box-shadow: var(--focus-ring), var(--inner-highlight);
}

.marketing-dialog :is(.money-input, .unit-input, .discount-input, .marketing-custom-session-field) > span {
  position: absolute;
  inset: 0 0 0 auto;
  display: flex;
  align-items: center;
  margin: 0;
  padding: 0 10px 0 8px;
  color: var(--muted);
  line-height: 1;
  white-space: nowrap;
  pointer-events: none;
}

.marketing-dialog .money-input > span {
  inset: 0 auto 0 0;
  padding: 0 0 0 12px;
}

.marketing-dialog :is(.unit-input, .discount-input, .marketing-custom-session-field) > input[type="number"] {
  appearance: textfield;
  -moz-appearance: textfield;
}

.marketing-dialog :is(.unit-input, .discount-input, .marketing-custom-session-field) > input[type="number"]::-webkit-inner-spin-button,
.marketing-dialog :is(.unit-input, .discount-input, .marketing-custom-session-field) > input[type="number"]::-webkit-outer-spin-button {
  margin: 0;
  -webkit-appearance: none;
}

.marketing-check-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
}

.marketing-check-grid > label,
.marketing-switch-grid > label,
.marketing-student-picker > label {
  display: flex;
  align-items: center;
  gap: 9px;
  min-height: 44px;
  padding: 10px 12px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: rgba(255, 255, 255, .4);
}

.marketing-check-grid > label > span,
.marketing-switch-grid > label > span,
.marketing-student-picker > label > span {
  margin: 0;
}

.marketing-subsection { justify-content: space-between; padding-top: 2px; }
.marketing-subsection > div { display: grid; gap: 2px; }
.marketing-inline-select { min-width: 200px; }
.marketing-switch-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.marketing-switch-grid > label { align-items: flex-start; }
.marketing-switch-grid span { display: grid; gap: 3px; }
.marketing-switch-grid small { color: var(--muted); }
.marketing-editor-footer { justify-content: flex-end; padding: 2px 0 20px; }

.promotion-more-filters {
  position: relative;
  align-self: end;
  margin: 0;
}
.promotion-more-filters summary {
  min-height: var(--control-height);
  display: inline-flex;
  align-items: center;
  padding: 8px 12px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  color: var(--text);
  background: rgba(255, 255, 255, .42);
  box-shadow: var(--inner-highlight);
  cursor: pointer;
  font-weight: 600;
  list-style: none;
}
.promotion-more-filters summary::-webkit-details-marker { display: none; }
.promotion-more-filters > div {
  position: absolute;
  z-index: 20;
  right: 0;
  top: calc(100% + 8px);
  min-width: min(620px, 86vw);
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
  padding: 14px;
  border: 1px solid var(--glass-border);
  border-radius: var(--radius);
  background: rgba(255, 255, 255, .82);
  box-shadow: var(--glass-shadow), var(--inner-highlight);
  backdrop-filter: blur(22px) saturate(1.18);
  -webkit-backdrop-filter: blur(22px) saturate(1.18);
}

.marketing-overview-grid,
.marketing-rule-cards,
.student-benefit-summary-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0;
  overflow: hidden;
  border: 1px solid var(--glass-separator);
  border-radius: var(--radius);
  background: rgba(255, 255, 255, .32);
}

.marketing-overview-grid {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.marketing-overview-grid > div,
.marketing-rule-cards > div,
.student-benefit-summary-grid > article {
  display: grid;
  gap: 5px;
  padding: 14px 16px;
  border: 0;
  border-left: 1px solid var(--glass-separator);
  border-radius: 0;
  background: transparent;
}

.marketing-overview-grid > div:first-child,
.marketing-rule-cards > div:first-child,
.student-benefit-summary-grid > article:first-child {
  border-left: 0;
}

.marketing-overview-grid span,
.marketing-rule-cards span,
.student-benefit-summary-grid span,
.student-benefit-summary-grid small { color: var(--muted); }
.marketing-overview-grid strong,
.marketing-rule-cards strong,
.student-benefit-summary-grid strong { font-size: 18px; }
.marketing-policy-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.marketing-policy-chips span { padding: 6px 10px; border-radius: 999px; color: var(--muted); background: rgba(60, 60, 67, .08); }
.marketing-policy-chips span.on { color: var(--success); background: rgba(47, 111, 78, .1); }
.marketing-plan-scope {
  width: fit-content;
  max-width: 100%;
  padding: 7px 10px;
  border-radius: var(--radius-small);
  color: var(--muted);
  background: rgba(60, 60, 67, .07);
  overflow-wrap: anywhere;
}
.marketing-prize-rule-list { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); border: 1px solid var(--glass-separator); border-radius: var(--radius); overflow: hidden; }
.marketing-prize-rule-list > div { display: grid; gap: 4px; padding: 12px 14px; border-left: 1px solid var(--glass-separator); }
.marketing-prize-rule-list > div:first-child { border-left: 0; }
.marketing-prize-rule-list span,
.marketing-prize-rule-list small { color: var(--muted); }
.marketing-detail-note { margin: 0; color: var(--muted); }
.marketing-action-banner { grid-template-columns: minmax(0, 1fr) auto; }
.marketing-action-banner > div { display: grid; gap: 3px; }
.marketing-action-banner span { color: var(--muted); }
.marketing-pagination { display: flex; align-items: center; justify-content: flex-end; gap: 10px; }

#marketing-coupon-issue-form {
  min-width: 0;
  display: grid;
  gap: 12px;
}

#marketing-prize-claim-form {
  min-width: 0;
  display: grid;
  gap: 12px;
}

.marketing-prize-claim-summary {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 3px 12px;
  align-items: center;
  padding: 11px 13px;
  border: 1px solid rgba(10, 132, 255, .16);
  border-radius: var(--radius);
  background: rgba(10, 132, 255, .055);
}

.marketing-prize-claim-summary > span,
.marketing-prize-claim-summary > small {
  color: var(--muted);
}

.marketing-prize-claim-summary > small {
  grid-column: 2;
}

.marketing-prize-claim-tools {
  display: grid;
  grid-template-columns: minmax(150px, .55fr) minmax(200px, 1fr) minmax(200px, 1fr) auto;
  align-items: end;
  gap: 12px;
}

.marketing-prize-claim-tools > label {
  min-width: 0;
  display: grid;
  align-items: stretch;
  gap: 6px;
}

.marketing-prize-claim-tools > label > span:first-child {
  min-height: 18px;
  margin: 0;
  color: var(--muted);
  font-size: 12px;
  font-weight: 650;
}

.marketing-prize-claim-tools :where(input, select),
.marketing-prize-claim-submit {
  width: 100%;
  min-width: 0;
  min-height: var(--control-height);
}

.marketing-prize-claim-store input[readonly] {
  color: var(--text);
  background: rgba(255, 255, 255, .42);
}

.marketing-prize-student-picker > label:has(input:checked) {
  border-color: rgba(10, 132, 255, .42);
  background: rgba(10, 132, 255, .08);
  box-shadow: inset 0 0 0 1px rgba(10, 132, 255, .08);
}

.marketing-issue-tools {
  display: grid;
  grid-template-columns: minmax(220px, 1.15fr) minmax(130px, .45fr) minmax(220px, 1fr) auto;
  align-items: end;
  gap: 12px;
}

.marketing-issue-tools > label {
  min-width: 0;
  display: grid;
  align-items: stretch;
  gap: 6px;
}

.marketing-issue-tools > label > span:first-child {
  min-height: 18px;
  margin: 0;
  color: var(--muted);
  font-size: 12px;
  font-weight: 650;
}

.marketing-issue-tools > label > input,
.marketing-issue-tools .unit-input,
.marketing-issue-submit {
  width: 100%;
  min-width: 0;
  min-height: var(--control-height);
}

.marketing-selection-toolbar {
  min-height: 42px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 8px 10px;
  border: 1px solid var(--glass-separator);
  border-radius: var(--radius);
  background: rgba(255, 255, 255, .26);
}

.marketing-selection-toolbar > div:first-child,
.marketing-selection-actions {
  display: flex;
  align-items: center;
  gap: 10px;
}

.marketing-selection-toolbar span { color: var(--muted); font-size: 12px; }
.marketing-selection-actions button { min-height: 32px; padding: 5px 10px; }

.marketing-student-picker { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; max-height: 320px; overflow: auto; padding: 2px 6px 2px 2px; }
.marketing-student-picker > label { min-width: 0; }
.marketing-student-picker > label > input {
  flex: 0 0 18px;
  width: 18px;
  height: 18px;
  min-height: 18px;
  margin: 0;
  padding: 0;
}
.marketing-student-picker span { display: grid; min-width: 0; overflow: hidden; }
.marketing-student-picker small { color: var(--muted); overflow: hidden; text-overflow: ellipsis; }

.student-benefits-panel { display: grid; gap: 16px; }
.student-benefit-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  align-items: start;
  gap: 12px;
}
.student-benefit-session-card,
.student-benefit-coupon-wallet,
.student-benefit-prize-wallet {
  display: grid;
  gap: 10px;
  min-width: 0;
  padding: 0;
}
.student-benefit-session-heading { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }
.student-benefit-session-heading h4 { margin: 0; font-size: 15px; }
.student-benefit-session-heading > span { color: var(--muted); font-size: 12px; }
.student-benefit-empty { padding: 8px 0 2px; text-align: left; }
.student-bonus-activity-list,
.student-coupon-list,
.student-prize-claim-list {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(240px, 292px));
  align-items: start;
  justify-content: start;
  gap: 8px;
}
.student-bonus-activity-row {
  display: grid;
  gap: 8px;
  min-width: 0;
  padding: 10px;
  border: 1px solid rgba(37, 99, 235, .14);
  border-radius: var(--radius);
  background: rgba(255, 255, 255, .72);
  box-shadow: 0 7px 18px rgba(15, 23, 42, .05), var(--inner-highlight);
}
.student-bonus-activity-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.student-bonus-activity-head > strong { min-width: 0; overflow-wrap: anywhere; }
.student-bonus-activity-metrics { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 5px; }
.student-bonus-activity-metrics > span { display: grid; gap: 2px; padding: 6px 7px; border-radius: 6px; color: var(--muted); background: rgba(248, 250, 252, .92); font-size: 12px; }
.student-bonus-activity-metrics strong { color: var(--text); font-size: 15px; }
.student-bonus-timeline { display: grid; gap: 5px; }
.student-bonus-timeline-item { display: grid; grid-template-columns: 42px minmax(0, 1fr); align-items: baseline; gap: 4px 7px; padding: 5px 7px; border-radius: 6px; background: rgba(248, 250, 252, .72); }
.student-bonus-timeline-item > span { color: var(--success); font-size: 12px; font-weight: 700; }
.student-bonus-timeline-item.usage > span { color: var(--primary-dark); }
.student-bonus-timeline-item.voided { opacity: .68; }
.student-bonus-timeline-item.voided > span { color: var(--danger); }
.student-bonus-timeline-item > strong { font-size: 12px; }
.student-bonus-timeline-item > small { grid-column: 2; color: var(--muted); overflow-wrap: anywhere; }
.student-bonus-unused { padding: 7px 8px; color: var(--muted); font-size: 12px; }
.student-benefit-coupon-heading { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }
.student-benefit-coupon-heading h4 { margin: 0; font-size: 15px; }
.student-benefit-coupon-heading span { color: var(--muted); font-size: 12px; }
.student-benefit-prize-heading { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }
.student-benefit-prize-heading h4 { margin: 0; font-size: 15px; }
.student-benefit-prize-heading span { color: var(--muted); font-size: 12px; }
.student-coupon-card {
  display: grid;
  gap: 7px;
  min-width: 0;
  padding: 11px 12px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: rgba(255, 255, 255, .72);
  box-shadow: 0 7px 18px rgba(15, 23, 42, .05), var(--inner-highlight);
}
.student-coupon-card.is-expired,
.student-coupon-card.is-cancelled { background: rgba(244, 244, 247, .68); }
.student-coupon-card-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; min-width: 0; }
.student-coupon-card-head > div { display: grid; gap: 2px; min-width: 0; }
.student-coupon-card-head strong,
.student-coupon-card-head span { overflow-wrap: anywhere; }
.student-coupon-card-head > div > span,
.student-coupon-card-meta { color: var(--muted); font-size: 12px; }
.student-coupon-card-head > .status { flex: 0 0 auto; }
.student-coupon-card-offer { color: var(--danger); font-size: 17px; font-weight: 750; }
.student-coupon-card-meta { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 4px 12px; padding-top: 6px; border-top: 1px solid var(--glass-separator); }
.student-coupon-card-meta span:last-child { text-align: right; }
.student-prize-claim-card {
  display: grid;
  gap: 8px;
  min-width: 0;
  padding: 11px 12px;
  border: 1px solid rgba(180, 83, 9, .18);
  border-radius: var(--radius);
  background: rgba(255, 251, 235, .72);
  box-shadow: 0 7px 18px rgba(15, 23, 42, .05), var(--inner-highlight);
}
.student-prize-claim-card.is-cancelled { background: rgba(244, 244, 247, .68); }
.student-prize-claim-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; min-width: 0; }
.student-prize-claim-head > strong { min-width: 0; overflow-wrap: anywhere; }
.student-prize-claim-head > .status { flex: 0 0 auto; }
.student-prize-claim-bundle { color: #92400e; font-size: 16px; font-weight: 750; overflow-wrap: anywhere; }
.student-prize-claim-meta {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 4px 12px;
  padding-top: 7px;
  border-top: 1px solid rgba(180, 83, 9, .12);
  color: var(--muted);
  font-size: 12px;
}
.student-prize-claim-meta > span { min-width: 0; overflow-wrap: anywhere; }
.student-prize-claim-note { grid-column: 1 / -1; }
.student-coupon-chip-list { display: grid; gap: 8px; }
.student-coupon-chip-list.compact { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.student-coupon-chip-list article {
  display: grid;
  grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr) auto;
  align-items: center;
  gap: 12px;
  padding: 12px 14px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: rgba(255, 255, 255, .68);
}
.student-coupon-chip-list article > div { display: grid; min-width: 0; gap: 2px; }
.student-coupon-chip-list span,
.student-coupon-chip-list small { color: var(--muted); overflow-wrap: anywhere; }
.student-coupon-chip-list em { color: var(--danger); font-style: normal; font-weight: 700; }
.student-benefit-coupons { display: grid; gap: 10px; margin-top: 18px; padding-top: 16px; border-top: 1px solid var(--line); }

.sales-coupon-panel { display: grid; gap: 10px; padding: 12px 14px; border: 1px solid var(--line); border-radius: 8px; background: rgba(255, 255, 255, .34); }
.sales-coupon-options { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.sales-coupon-empty { grid-column: 1 / -1; padding: 2px 0; font-size: 13px; line-height: 1.45; }
.sales-coupon-choice { display: flex; align-items: flex-start; gap: 9px; padding: 11px 12px; border: 1px solid var(--line); border-radius: 8px; background: rgba(255, 255, 255, .75); }
.sales-coupon-choice.selected { border-color: var(--focus-border); box-shadow: var(--focus-ring); }
.sales-coupon-choice.disabled { opacity: .55; }
.sales-coupon-choice span { display: grid; gap: 2px; }
.sales-coupon-choice small { color: var(--muted); }
.sales-coupon-choice em { color: var(--success); font-style: normal; }
.sales-coupon-choice.disabled em { color: var(--danger); }
.sales-coupon-summary { display: flex; align-items: center; justify-content: flex-start; gap: 16px; padding: 10px 12px; border-radius: 8px; background: rgba(47, 111, 78, .09); }
.sales-coupon-summary strong { color: var(--success); }
.sales-coupon-summary b { color: var(--danger); font-size: 18px; }
.document-summary .sales-contract-amount strong { color: var(--danger); font-size: 20px; }
.sales-order-coupon-list { display: grid; gap: 8px; margin-top: 12px; }
.sales-order-coupon-chip { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 2px 12px; padding: 10px 12px; border: 1px solid var(--line); border-radius: 9px; }
.sales-order-coupon-chip strong { color: var(--success); }
.sales-order-coupon-chip small { grid-column: 1 / -1; color: var(--muted); }

@media (max-width: 900px) {
  .marketing-basic-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .marketing-editor-form .marketing-basic-grid > .marketing-name-field,
  .marketing-editor-form .marketing-basic-grid > .marketing-note-field,
  .marketing-editor-form .marketing-basic-grid > .marketing-store-field { grid-column: 1 / -1; grid-row: auto; }
  .marketing-editor-form .marketing-basic-grid > .marketing-participant-field,
  .marketing-editor-form .marketing-basic-grid > .marketing-person-limit-field,
  .marketing-editor-form .marketing-basic-grid > .marketing-start-date-field,
  .marketing-editor-form .marketing-basic-grid > .marketing-end-date-field { grid-column: auto; grid-row: auto; }
  .marketing-type-grid,
  .marketing-switch-grid,
  .marketing-student-picker { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .marketing-check-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .marketing-issue-tools { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .marketing-prize-claim-tools { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .marketing-prize-claim-submit { width: 100%; }
  .marketing-prize-row { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .marketing-prize-row > .marketing-prize-name { grid-column: 1 / -1; }
  .marketing-prize-row > .marketing-prize-limit { grid-column: 1; }
  .marketing-prize-row > button { grid-column: 2; width: 100%; }
  .student-benefit-layout { grid-template-columns: 1fr; }
  .student-coupon-chip-list.compact { grid-template-columns: 1fr; }
}

@media (max-width: 680px) {
  .student-bonus-activity-list,
  .student-coupon-list { grid-template-columns: minmax(0, 1fr); }
  .marketing-dialog-backdrop { padding: 4px; }
  .marketing-dialog,
  .marketing-type-dialog,
  .marketing-detail-dialog {
    width: 100%;
    max-height: calc(100dvh - 8px);
  }
  .marketing-dialog > .marketing-page-shell { max-height: calc(100dvh - 8px); padding: 0; gap: 0; }
  .marketing-dialog .marketing-page-header { margin: 0; }
  .marketing-dialog .marketing-dialog-content { padding: 14px; }
  .marketing-dialog .marketing-editor-footer,
  .marketing-dialog .marketing-dialog-footer { bottom: auto; margin: 0; padding: 12px 14px; }
  .marketing-page-header { padding: 14px; gap: 10px; }
  .marketing-page-header h3 { font-size: 18px; }
  .marketing-page-header .workspace-actions { flex-wrap: wrap; justify-content: flex-end; }
  .marketing-page-header { flex-wrap: wrap; }
  .marketing-page-header > div:first-child { flex: 1 1 220px; }
  .marketing-subsection,
  .marketing-action-banner { align-items: stretch; flex-direction: column; }
  .marketing-type-grid,
  .marketing-basic-grid,
  .marketing-switch-grid,
  .marketing-check-grid,
  .marketing-student-picker,
  .marketing-overview-grid,
  .marketing-rule-cards,
  .student-benefit-summary-grid,
  .sales-coupon-options { grid-template-columns: 1fr; }
  .marketing-type-card {
    min-height: 96px;
    display: grid;
    grid-template-columns: 30px minmax(0, 1fr);
    gap: 3px 12px;
    align-items: center;
  }
  .marketing-type-card + .marketing-type-card {
    border-top: 1px solid var(--glass-separator);
    border-left: 0;
  }
  .marketing-type-card > span { grid-row: 1 / 4; margin: 0; }
  .marketing-type-card p { margin: 2px 0; }
  .marketing-editor-section,
  .marketing-detail-section { padding: 0; }
  .marketing-action-banner { padding: 14px 0 0; }
  .marketing-issue-tools { grid-template-columns: 1fr; }
  .marketing-selection-toolbar { align-items: stretch; flex-direction: column; }
  .marketing-selection-toolbar > div:first-child { justify-content: space-between; }
  .marketing-selection-actions { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .marketing-selection-actions button { width: 100%; }
  .marketing-scope-fields,
  .marketing-bonus-layout { grid-template-columns: 1fr; }
  .marketing-store-choice-toolbar { align-items: stretch; flex-direction: column; }
  .marketing-store-choice-toolbar > div { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .marketing-store-choice-toolbar button { width: 100%; }
  .marketing-bonus-layout .marketing-rule-preview { grid-column: auto; }
  .marketing-prize-row { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .marketing-prize-row > .marketing-prize-name,
  .marketing-prize-row > .marketing-prize-limit { grid-column: 1 / -1; }
  .marketing-prize-row > .marketing-prize-quantity { grid-column: 1; }
  .marketing-prize-row > .marketing-prize-unit { grid-column: 2; }
  .marketing-prize-row > button { grid-column: 1 / -1; width: 100%; }
  .marketing-prize-rule-list { grid-template-columns: 1fr; }
  .marketing-prize-rule-list > div { border-top: 1px solid var(--glass-separator); border-left: 0; }
  .marketing-prize-rule-list > div:first-child { border-top: 0; }
  .marketing-custom-session-field { flex: 1 1 150px; width: auto; }
  .promotion-more-filters { width: 100%; }
  .promotion-more-filters summary { width: 100%; justify-content: center; }
  .promotion-more-filters > div { position: static; min-width: 0; grid-template-columns: 1fr; margin-top: 8px; }
  .promotion-workspace > .section-header p { white-space: normal; }
  .promotion-heading-actions { width: 100%; justify-content: space-between; }
  .promotion-result-count { font-size: 12px; }
  .promotion-list-filter,
  .promotion-list-filter.has-store-filter { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .promotion-list-filter > .promotion-filter-name,
  .promotion-list-filter > .promotion-filter-store,
  .promotion-list-filter > .promotion-filter-actions { grid-column: 1 / -1; }
  .promotion-filter-actions { width: 100%; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .promotion-filter-actions button { width: 100%; }
  .marketing-prize-claim-tools { grid-template-columns: 1fr; }
  .marketing-prize-claim-summary { grid-template-columns: 1fr; }
  .marketing-prize-claim-summary > small { grid-column: auto; }
  .promotion-list-table { overflow: visible; border: 0; background: transparent; }
  .promotion-list-table table { min-width: 0; }
  .promotion-list-table table,
  .promotion-list-table tbody,
  .promotion-list-table tr,
  .promotion-list-table td { display: block; width: 100%; }
  .promotion-list-table thead { display: none; }
  .promotion-list-table tr { margin-bottom: 10px; padding: 12px; border: 1px solid var(--glass-separator); border-radius: var(--radius); background: rgba(255, 255, 255, .46); box-shadow: var(--inner-highlight); }
  .promotion-list-table td { display: grid; grid-template-columns: 86px minmax(0, 1fr); gap: 8px; padding: 6px 0; border: 0; }
  .promotion-list-table td::before { color: var(--muted); font-size: 12px; }
  .promotion-list-table td:nth-child(1)::before { content: "活动名称"; }
  .promotion-list-table td:nth-child(2)::before { content: "活动时间"; }
  .promotion-list-table td:nth-child(3)::before { content: "活动形式"; }
  .promotion-list-table td:nth-child(4)::before { content: "参与人数"; }
  .promotion-list-table td:nth-child(5)::before { content: "活动状态"; }
  .promotion-list-table td:nth-child(6)::before { content: "操作"; }
  .promotion-name-button strong,
  .promotion-name-button small { white-space: normal; }
  .promotion-list-actions { width: 100%; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); justify-content: stretch; }
  .promotion-list-actions button { width: 100%; min-width: 0; }
  .marketing-overview-grid > div,
  .marketing-rule-cards > div,
  .student-benefit-summary-grid > article { border-left: 0; border-top: 1px solid var(--glass-separator); }
  .marketing-overview-grid > div:first-child,
  .marketing-rule-cards > div:first-child,
  .student-benefit-summary-grid > article:first-child { border-top: 0; }
  .student-coupon-chip-list article { grid-template-columns: 1fr auto; }
  .student-coupon-chip-list article > div:nth-child(2) { grid-column: 1 / -1; }
  .student-bonus-activity-metrics { grid-template-columns: 1fr; }
  .student-bonus-timeline-item { grid-template-columns: 48px minmax(0, 1fr); }
  .student-bonus-timeline-item > small { grid-column: 2; }
  .sales-coupon-summary { align-items: flex-start; flex-direction: column; gap: 3px; }
}

/* Shared adaptive dialog viewport. Keep headers and actions visible while only
   the content region scrolls, including Safari's changing visual viewport. */
body:has(.edit-dialog-backdrop:not(.hidden)) {
  overflow: hidden;
}

body:has(.edit-dialog-backdrop:not(.hidden)) .mobile-bottom-nav,
body:has(.dialog-backdrop:not(.hidden)) .mobile-bottom-nav {
  visibility: hidden;
  pointer-events: none;
  opacity: 0;
}

.dialog-backdrop,
.edit-dialog-backdrop {
  box-sizing: border-box;
  width: 100vw;
  height: 100vh;
  height: 100dvh;
  max-height: 100dvh;
  overflow: hidden;
  padding-top: max(16px, env(safe-area-inset-top));
  padding-right: max(16px, env(safe-area-inset-right));
  padding-bottom: max(16px, env(safe-area-inset-bottom));
  padding-left: max(16px, env(safe-area-inset-left));
}

.edit-dialog:not(.marketing-dialog),
.course-attendance-dialog {
  min-height: 0;
  max-height: 100%;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.edit-dialog:not(.marketing-dialog) > .dialog-header,
.edit-dialog:not(.marketing-dialog) > .dialog-footer,
.edit-dialog:not(.marketing-dialog) > form > .dialog-header,
.edit-dialog:not(.marketing-dialog) > form > .dialog-footer,
.course-attendance-dialog > .dialog-header,
.course-attendance-dialog > .dialog-footer {
  flex: 0 0 auto;
}

.edit-dialog:not(.marketing-dialog) > .dialog-body,
.edit-dialog:not(.marketing-dialog) > form > .dialog-body,
.course-attendance-dialog > .dialog-body {
  flex: 1 1 auto;
  min-height: 0;
  max-height: none;
  overflow: auto;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
}

.edit-dialog:not(.marketing-dialog) > form {
  flex: 1 1 auto;
  min-height: 0;
  max-height: 100%;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.edit-dialog:not(.marketing-dialog) .dialog-header,
.edit-dialog:not(.marketing-dialog) .dialog-footer,
.course-attendance-dialog .dialog-header,
.course-attendance-dialog .dialog-footer {
  position: relative;
  z-index: 2;
}

@media (max-width: 680px) {
  .dialog-backdrop,
  .edit-dialog-backdrop {
    place-items: center;
    padding-top: max(8px, env(safe-area-inset-top));
    padding-right: max(8px, env(safe-area-inset-right));
    padding-bottom: max(8px, env(safe-area-inset-bottom));
    padding-left: max(8px, env(safe-area-inset-left));
  }

  .edit-dialog:not(.marketing-dialog),
  .course-attendance-dialog {
    width: 100%;
    max-width: 100%;
    border-radius: 16px;
  }

  .edit-dialog:not(.marketing-dialog) .dialog-header,
  .edit-dialog:not(.marketing-dialog) .dialog-body,
  .edit-dialog:not(.marketing-dialog) .dialog-footer,
  .course-attendance-dialog .dialog-header,
  .course-attendance-dialog .dialog-body,
  .course-attendance-dialog .dialog-footer {
    padding-right: 14px;
    padding-left: 14px;
  }

  .edit-dialog:not(.marketing-dialog) .dialog-header,
  .course-attendance-dialog .dialog-header {
    padding-top: 14px;
    padding-bottom: 12px;
  }

  .edit-dialog:not(.marketing-dialog) .dialog-body,
  .course-attendance-dialog .dialog-body {
    padding-top: 12px;
    padding-bottom: 14px;
  }

  .edit-dialog:not(.marketing-dialog) .dialog-footer,
  .course-attendance-dialog .dialog-footer {
    flex-wrap: wrap;
    padding-top: 12px;
    padding-bottom: 12px;
  }

  .edit-dialog:not(.marketing-dialog) .form-grid,
  .edit-dialog:not(.marketing-dialog) .compact-form {
    gap: 12px;
    margin-top: 0;
  }
}

/* Marketing dialogs already have a denser, purpose-built viewport treatment. */
.marketing-dialog-backdrop {
  padding: 24px;
}

@media (max-width: 680px) {
  .marketing-dialog-backdrop {
    padding: 4px;
  }
}

/* Unified portrait rhythm: compact forms use the available width before they
   introduce scrolling. Long data views scroll as one overlay, not as nested
   dialog regions. */
@media (max-width: 1180px) and (orientation: portrait) {
  body {
    scroll-padding-bottom: calc(116px + env(safe-area-inset-bottom));
  }

  #view {
    padding-bottom: calc(116px + env(safe-area-inset-bottom));
  }

  .topbar-title h2 {
    font-size: 20px;
    line-height: 1.25;
  }

  .topbar-title p,
  .section-header p,
  .dialog-header p,
  .marketing-page-header p {
    font-size: 12px;
    line-height: 1.4;
  }

  .section-header h3,
  .dialog-header h3,
  .glass-dialog h3,
  .marketing-page-header h3 {
    font-size: 18px;
    line-height: 1.28;
  }

  label > span,
  .field-title,
  .field-label,
  .course-tags-field .field-title,
  .course-location-field > .field-title {
    font-size: 12px;
    line-height: 1.35;
  }

  .edit-dialog-backdrop,
  .dialog-backdrop {
    align-items: start;
    overflow-x: hidden;
    overflow-y: auto;
    overscroll-behavior: contain;
  }

  .edit-dialog:not(.marketing-dialog),
  .course-attendance-dialog {
    flex: none;
    max-height: none;
    margin-block: auto;
    overflow: visible;
  }

  .edit-dialog:not(.marketing-dialog) > form {
    display: block;
    max-height: none;
    overflow: visible;
  }

  .edit-dialog:not(.marketing-dialog) > .dialog-body,
  .edit-dialog:not(.marketing-dialog) > form > .dialog-body,
  .course-attendance-dialog > .dialog-body {
    max-height: none;
    overflow: visible;
  }

  .edit-dialog .dialog-body,
  .edit-dialog .form-grid,
  .edit-dialog .compact-form,
  .course-attendance-dialog .dialog-body {
    min-width: 0;
    max-width: 100%;
  }

  .edit-dialog .dialog-body,
  .course-attendance-dialog .dialog-body {
    overflow-x: clip;
  }

  .edit-dialog .form-grid .half {
    grid-column: span 6;
  }

  .edit-dialog .form-grid .third,
  .edit-dialog .form-grid .quarter {
    grid-column: span 6;
  }

  .edit-dialog .form-grid .two-thirds,
  .edit-dialog .form-grid > .full {
    grid-column: 1 / -1;
  }

  .marketing-dialog-backdrop {
    align-items: start;
    overflow-x: hidden;
    overflow-y: auto;
    overscroll-behavior: contain;
  }

  .marketing-dialog,
  .marketing-dialog > .marketing-page-shell {
    max-height: none;
    margin-block: auto;
    overflow: visible;
  }

  .marketing-dialog > .marketing-page-shell,
  .marketing-dialog .marketing-editor-form {
    display: block;
  }

  .marketing-dialog .marketing-dialog-content {
    max-height: none;
    overflow: visible;
  }
}

@media (max-width: 680px) {
  :root {
    --control-height: 36px;
    --content-gap: 12px;
    --surface-gap: 10px;
    --control-gap: 8px;
    --panel-padding: 12px;
    --mobile-font-body: 14px;
    --mobile-font-label: 12px;
    --mobile-font-section: 18px;
  }

  body,
  button,
  input,
  select,
  textarea {
    font-size: var(--mobile-font-body);
  }

  button,
  input,
  select,
  textarea {
    min-height: var(--control-height);
  }

  button {
    padding: 6px 11px;
  }

  input,
  select,
  textarea {
    padding: 6px 9px;
  }

  textarea {
    min-height: 54px;
    max-height: 68px;
    resize: none;
  }

  #view,
  .topbar {
    padding-right: 10px;
    padding-left: 10px;
  }

  .panel,
  .table-panel,
  .filter-result-panel,
  .workspace-band,
  .metric-card {
    padding: 12px;
  }

  .section-header,
  .band-heading {
    gap: 8px;
  }

  .panel > .section-header,
  .table-panel > .section-header,
  .management-panel > .section-header {
    margin-bottom: 10px;
  }

  .toolbar {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
  }

  .toolbar > label:first-child,
  .toolbar > .actions,
  .toolbar > .form-actions,
  .toolbar > button.primary:last-child {
    grid-column: 1 / -1;
  }

  .toolbar label,
  .toolbar button {
    min-width: 0;
  }

  .procurement-filter-toolbar .date-range-fields {
    display: contents;
  }

  .procurement-filter-toolbar .procurement-filter-actions {
    grid-column: 1 / -1;
  }

  #procurement-filter-form > label.procurement-filter-search {
    max-width: 100%;
  }

  .dialog-backdrop,
  .edit-dialog-backdrop {
    padding-top: max(6px, env(safe-area-inset-top));
    padding-right: max(6px, env(safe-area-inset-right));
    padding-bottom: max(8px, env(safe-area-inset-bottom));
    padding-left: max(6px, env(safe-area-inset-left));
  }

  .edit-dialog:not(.marketing-dialog) .dialog-header,
  .edit-dialog:not(.marketing-dialog) .dialog-body,
  .edit-dialog:not(.marketing-dialog) .dialog-footer,
  .course-attendance-dialog .dialog-header,
  .course-attendance-dialog .dialog-body,
  .course-attendance-dialog .dialog-footer {
    padding-right: 12px;
    padding-left: 12px;
  }

  .edit-dialog:not(.marketing-dialog) .dialog-header,
  .course-attendance-dialog .dialog-header {
    padding-top: 10px;
    padding-bottom: 9px;
  }

  .edit-dialog:not(.marketing-dialog) .dialog-body,
  .course-attendance-dialog .dialog-body {
    padding-top: 9px;
    padding-bottom: 10px;
  }

  .edit-dialog:not(.marketing-dialog) .dialog-footer,
  .course-attendance-dialog .dialog-footer {
    gap: 8px;
    padding-top: 9px;
    padding-bottom: 9px;
  }

  .edit-dialog:not(.marketing-dialog) .form-grid,
  .edit-dialog:not(.marketing-dialog) .compact-form {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px 10px;
  }

  .edit-dialog:not(.marketing-dialog) .form-grid .half,
  .edit-dialog:not(.marketing-dialog) .form-grid .third,
  .edit-dialog:not(.marketing-dialog) .form-grid .quarter {
    grid-column: span 1;
  }

  .edit-dialog:not(.marketing-dialog) .form-grid .two-thirds,
  .edit-dialog:not(.marketing-dialog) .form-grid > .full,
  .edit-dialog:not(.marketing-dialog) .form-grid > label:not(.half):not(.third):not(.quarter) {
    grid-column: 1 / -1;
  }

  .edit-dialog:not(.marketing-dialog) .dialog-body > *,
  .edit-dialog:not(.marketing-dialog) .form-grid > *,
  .edit-dialog:not(.marketing-dialog) .compact-form > * {
    min-width: 0;
    max-width: 100%;
  }

  .edit-dialog:not(.marketing-dialog) :where(
    .attendance-dialog-table,
    .table-panel,
    .checkbox-grid,
    .course-rule-form-pane,
    .course-editor-preview-pane,
    .course-schedule-preview,
    .student-card-detail-list,
    .course-roster-list
  ) {
    max-height: none;
  }

  .edit-dialog:not(.marketing-dialog) :where(
    .attendance-dialog-table,
    .table-panel,
    .course-rule-form-pane,
    .course-editor-preview-pane,
    .course-schedule-preview,
    .student-card-detail-list,
    .course-roster-list
  ) {
    overflow-y: visible;
  }

  .edit-dialog .selection-group,
  .edit-dialog .course-card-plan-panel,
  .edit-dialog .student-store-panel,
  .edit-dialog .plan-course-panel,
  .edit-dialog .plan-store-panel {
    gap: 6px;
    padding: 8px;
  }

  .edit-dialog .checkbox-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 6px;
    max-height: none;
    overflow: visible;
  }

  .edit-dialog .check-row {
    min-height: 36px;
    gap: 6px;
    padding: 5px 7px;
  }

  .edit-dialog .check-row > span,
  .edit-dialog .tag-quick-check,
  .filter-result-panel .check-row > span,
  .toolbar .check-row > span {
    font-size: var(--mobile-font-label);
  }

  .edit-dialog .tag-quick-check {
    min-height: 30px;
    padding: 4px 8px;
  }

  .edit-dialog .course-tag-checkboxes {
    min-height: 32px;
    gap: 5px;
  }

  .edit-dialog .subline,
  .edit-dialog small,
  .marketing-dialog small,
  .marketing-section-title p,
  .marketing-page-header p {
    font-size: 12px;
    line-height: 1.35;
  }

  .course-create-dialog .course-card-plan-panel > .subline,
  #student-create-dialog .student-store-panel .field-title + .selection-group > .actions:empty {
    display: none;
  }

  .marketing-dialog-backdrop {
    padding: 4px;
  }

  .marketing-dialog .marketing-page-header,
  .marketing-dialog .marketing-dialog-content,
  .marketing-dialog .marketing-editor-footer,
  .marketing-dialog .marketing-dialog-footer {
    padding-right: 12px;
    padding-left: 12px;
  }

  .marketing-dialog .marketing-page-header {
    padding-top: 10px;
    padding-bottom: 9px;
  }

  .marketing-dialog .marketing-dialog-content {
    gap: 10px;
    padding-top: 9px;
    padding-bottom: 10px;
    overflow-x: clip;
  }

  .marketing-dialog .marketing-editor-footer,
  .marketing-dialog .marketing-dialog-footer {
    gap: 8px;
    padding-top: 9px;
    padding-bottom: 9px;
  }

  .marketing-editor-section,
  .marketing-detail-section,
  .marketing-action-banner {
    gap: 9px;
  }

  .marketing-dialog-content > .marketing-editor-section + .marketing-editor-section,
  .marketing-dialog-content > .marketing-detail-section,
  .marketing-dialog-content > .marketing-action-banner {
    padding-top: 10px;
  }

  .marketing-section-title {
    gap: 8px;
  }

  .marketing-section-title h4 {
    margin-bottom: 1px;
    font-size: 15px;
  }

  .marketing-dialog :where(label > span, .field-title, .field-label),
  .edit-dialog:not(.marketing-dialog) :where(label > span, .field-title, .field-label) {
    font-size: var(--mobile-font-label);
    line-height: 1.35;
  }

  .marketing-dialog :where(input, select, textarea, button),
  .edit-dialog:not(.marketing-dialog) :where(input, select, textarea, button) {
    font-size: var(--mobile-font-body);
  }

  .marketing-basic-grid,
  .marketing-switch-grid,
  .marketing-check-grid,
  .marketing-student-picker,
  .marketing-overview-grid,
  .marketing-rule-cards,
  .student-benefit-summary-grid,
  .sales-coupon-options {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px 10px;
  }

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

  .marketing-editor-form .marketing-basic-grid > .marketing-name-field,
  .marketing-editor-form .marketing-basic-grid > .marketing-note-field,
  .marketing-editor-form .marketing-basic-grid > .marketing-store-field {
    grid-column: 1 / -1;
  }

  .marketing-editor-form .marketing-basic-grid > .marketing-participant-field,
  .marketing-editor-form .marketing-basic-grid > .marketing-person-limit-field,
  .marketing-editor-form .marketing-basic-grid > .marketing-start-date-field,
  .marketing-editor-form .marketing-basic-grid > .marketing-end-date-field {
    grid-column: auto;
  }

  .promotion-price-row,
  .promotion-bonus-session-row {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
    padding: 8px;
  }

  .promotion-price-row > label:first-child,
  .promotion-price-row > .promotion-price-preview,
  .promotion-price-row > .remove-promotion-price-row {
    grid-column: 1 / -1;
  }

  .promotion-price-row .remove-promotion-price-row {
    width: auto;
  }

  .mobile-bottom-nav {
    min-height: 60px;
  }
}

/* Member cards: compact controls and readable record cards on phones. */
@media (max-width: 680px) {
  #card-filter-form.member-card-filter {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 9px;
  }

  #card-filter-form .card-filter-keyword,
  #card-filter-form .card-filter-confirmation,
  #card-filter-form .pagination-controls {
    grid-column: 1 / -1;
  }

  #card-filter-form > button {
    width: 100%;
  }

  #card-filter-form .pagination-controls {
    width: 100%;
    min-width: 0;
    display: grid;
    grid-template-columns: 64px minmax(56px, 1fr) 42px auto minmax(56px, 1fr);
    gap: 6px;
    align-items: center;
    justify-content: stretch;
    margin: 2px 0 0;
    padding-top: 10px;
    border-top: 1px solid var(--glass-separator);
  }

  #card-filter-form .pagination-controls label,
  #card-filter-form .pagination-controls button {
    width: 100%;
    min-width: 0;
    margin: 0;
  }

  #card-filter-form .pagination-controls label > span {
    display: none;
  }

  #card-filter-form .pagination-controls select,
  #card-filter-form .pagination-controls input {
    width: 100%;
    min-width: 0;
    text-align: center;
  }

  #card-filter-form .pagination-controls button {
    padding-right: 5px;
    padding-left: 5px;
  }

  #card-filter-form .pagination-pages {
    min-height: var(--control-height);
    justify-content: center;
    font-size: 12px;
  }

  #cards-list-section .member-card-table-panel {
    overflow: visible;
    padding: 0;
    border: 0;
    background: transparent;
    box-shadow: none;
  }

  #cards-list-section .member-card-table {
    display: block;
    min-width: 0;
  }

  #cards-list-section .member-card-table thead {
    display: none;
  }

  #cards-list-section .member-card-table tbody {
    display: grid;
    gap: 10px;
  }

  #cards-list-section .member-card-table tr {
    width: 100%;
    min-width: 0;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 11px 14px;
    padding: 12px;
    border: 1px solid var(--glass-separator);
    border-radius: 8px;
    background: rgba(255, 255, 255, 0.52);
    box-shadow: var(--inner-highlight);
  }

  #cards-list-section .member-card-table td {
    width: 100%;
    min-width: 0;
    padding: 0;
    border: 0;
    overflow-wrap: anywhere;
  }

  #cards-list-section .member-card-table td::before {
    content: attr(data-label);
    display: block;
    margin-bottom: 3px;
    color: var(--muted);
    font-size: 11px;
    font-weight: 600;
    line-height: 1.25;
  }

  #cards-list-section .member-card-table .card-student-cell,
  #cards-list-section .member-card-table .card-plan-cell {
    padding-bottom: 9px;
    border-bottom: 1px solid var(--glass-separator);
  }

  #cards-list-section .member-card-table .card-student-cell,
  #cards-list-section .member-card-table .card-plan-cell,
  #cards-list-section .member-card-table .card-price-cell,
  #cards-list-section .member-card-table .card-session-cell {
    font-weight: 700;
  }

  #cards-list-section .member-card-table .card-applicability-cell,
  #cards-list-section .member-card-table .card-actions-cell,
  #cards-list-section .member-card-table td.empty {
    grid-column: 1 / -1;
  }

  #cards-list-section .member-card-table td.empty {
    padding: 18px 8px;
    text-align: center;
  }

  #cards-list-section .member-card-table td.empty::before {
    display: none;
  }

  #cards-list-section .member-card-table .card-actions {
    width: 100%;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(64px, 1fr));
    gap: 7px;
  }

  #cards-list-section .member-card-table .card-actions button {
    width: 100%;
    min-width: 0;
  }
}

.item-attachment-preview-backdrop {
  z-index: 100;
}

.item-attachment-preview-dialog {
  width: min(1100px, 100%);
  height: min(900px, 100%);
}

.item-attachment-preview-dialog > .item-attachment-preview-body {
  padding: 0;
  overflow: hidden;
  background: #eef0f2;
}

.item-attachment-preview-body iframe {
  display: block;
  width: 100%;
  height: 100%;
  border: 0;
  background: #fff;
}

.item-attachment-open-current {
  min-height: var(--control-height);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 8px 14px;
  border: 1px solid rgba(60, 60, 67, 0.16);
  border-radius: var(--radius);
  background: rgba(255, 255, 255, 0.68);
  color: var(--text);
  text-decoration: none;
}

@media (max-width: 680px) {
  .item-attachment-preview-dialog {
    width: 100%;
    height: 100%;
  }

  .item-attachment-preview-dialog .dialog-footer > * {
    flex: 1 1 0;
  }
}

/* Desktop shell: keep navigation and content in separate scroll regions. */
@media (min-width: 1181px) {
  body:has(.workspace:not(.hidden)) {
    overflow: hidden;
  }

  .workspace,
  .workspace:not(.hidden) {
    height: 100vh;
    height: 100dvh;
    min-height: 0;
    max-height: 100dvh;
    overflow: hidden;
  }

  .sidebar {
    position: relative;
    inset: auto;
    top: auto;
    height: 100%;
    min-height: 0;
    max-height: none;
    overflow-x: hidden;
    overflow-y: auto;
    overscroll-behavior-y: contain;
    scrollbar-gutter: stable;
  }

  .main-panel {
    height: 100%;
    min-height: 0;
    overflow-x: hidden;
    overflow-y: auto;
    overscroll-behavior-y: contain;
    scrollbar-gutter: stable;
  }
}

/* Student sales order editor: final responsive overrides. */
.sales-coupon-choice:only-child {
  grid-column: 1 / -1;
}

@media (max-width: 900px) {
  .finance-dialog.sales-order-dialog {
    width: calc(100vw - 24px);
    max-height: calc(100dvh - 24px);
  }

  .sales-order-core-grid,
  .sales-order-core-grid:has(> :nth-child(2):last-child),
  .sales-order-meta-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .sales-order-core-grid > .sales-student-field,
  .sales-order-core-grid:has(> :nth-child(2):last-child) > :last-child,
  .sales-order-meta-grid > label:last-child {
    grid-column: 1 / -1;
  }

  .sales-line-row {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) 40px;
  }

  .sales-line-row > label:first-child {
    grid-column: 1;
  }

  .sales-line-row > .sales-line-applicability {
    grid-column: 2;
  }

  .sales-line-row > label:nth-of-type(2),
  .sales-line-row > .sales-line-price-hint {
    grid-column: 1 / 3;
  }

  .sales-line-row > .remove-sales-line {
    grid-column: 3;
    grid-row: 1;
  }
}

@media (max-width: 600px) {
  .finance-dialog.sales-order-dialog {
    width: calc(100vw - 12px);
    max-height: calc(100dvh - 12px);
  }

  .sales-order-dialog > .dialog-header,
  .sales-order-dialog > .dialog-body,
  .sales-order-dialog > .dialog-footer {
    padding: 12px;
  }

  .sales-order-core-grid,
  .sales-order-core-grid:has(> :nth-child(2):last-child),
  .sales-order-meta-grid,
  .sales-student-controls {
    grid-template-columns: minmax(0, 1fr);
  }

  .sales-order-core-grid > *,
  .sales-order-meta-grid > label:last-child {
    grid-column: 1;
  }

  .sales-line-row {
    grid-template-columns: minmax(0, 1fr) 40px;
    gap: 10px 8px;
    padding: 10px;
  }

  .sales-line-row > label:first-child,
  .sales-line-row > .sales-line-applicability,
  .sales-line-row > label:nth-of-type(2),
  .sales-line-row > .sales-line-price-hint {
    grid-column: 1;
  }

  .sales-line-row > .remove-sales-line {
    grid-column: 2;
    grid-row: 1;
  }

  .sales-order-dialog-footer {
    margin: 0;
    padding: 10px 12px;
  }

  .sales-order-dialog-footer button {
    min-width: 0;
  }
}

/* Procurement workflow map and wide editor. */
.item-workflow-map-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 20px;
}

.item-workflow-map-header > div:first-child {
  display: grid;
  gap: 3px;
  min-width: 0;
}

.item-workflow-map-header > div:first-child > span,
.item-workflow-progress-header > div > span {
  color: var(--primary-dark);
  font-size: 12px;
  font-weight: 700;
}

.item-workflow-map-header h3,
.item-workflow-map-header p,
.item-workflow-progress-header p {
  margin: 0;
}

.item-workflow-map-header p,
.item-workflow-progress-header p {
  color: var(--muted);
}

.item-workflow-map-key {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 12px;
  color: var(--muted);
  font-size: 12px;
}

.item-workflow-map-key span {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  white-space: nowrap;
}

.item-workflow-map-key i {
  width: 9px;
  height: 9px;
  border: 2px solid #9ca3af;
  border-radius: 50%;
  background: #fff;
}

.item-workflow-map-key i.current {
  border-color: var(--primary-dark);
  background: var(--primary-dark);
}

.item-workflow-map-key i.done {
  border-color: var(--success);
  background: var(--success);
}

.item-workflow-map-key i.optional {
  border-style: dashed;
}

.item-workflow-stepper-scroll {
  width: 100%;
  min-width: 0;
  overflow-x: auto;
  padding: 2px 2px 7px;
  overscroll-behavior-inline: contain;
}

.item-workflow-stepper {
  display: grid;
  grid-template-columns: repeat(6, minmax(120px, 1fr));
  min-width: 780px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.item-workflow-step {
  position: relative;
  display: grid;
  grid-template-rows: 34px auto;
  justify-items: center;
  min-width: 0;
  padding-inline: 10px;
  text-align: center;
}

.item-workflow-step::after {
  content: "";
  position: absolute;
  z-index: 0;
  top: 15px;
  left: 50%;
  right: -50%;
  height: 2px;
  background: #cfd5dc;
}

.item-workflow-step:last-child::after {
  display: none;
}

.item-workflow-marker {
  position: relative;
  z-index: 1;
  display: grid;
  place-items: center;
  width: 31px;
  height: 31px;
  border: 2px solid #aeb6c0;
  border-radius: 50%;
  background: #f7f8fa;
  color: #68717d;
  font-size: 12px;
  font-weight: 800;
}

.item-workflow-copy {
  display: grid;
  align-content: start;
  gap: 2px;
  width: 100%;
  min-width: 0;
  padding-top: 4px;
}

.item-workflow-copy > div {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  justify-content: center;
  gap: 5px;
  min-width: 0;
}

.item-workflow-copy strong {
  color: var(--text);
  font-size: 13px;
}

.item-workflow-copy > div > span {
  padding: 1px 5px;
  border-radius: 999px;
  background: rgba(10, 132, 255, 0.1);
  color: var(--primary-dark);
  font-size: 10px;
  font-weight: 700;
}

.item-workflow-copy small,
.item-workflow-copy p {
  overflow-wrap: anywhere;
  color: var(--muted);
  font-size: 11px;
  line-height: 1.35;
}

.item-workflow-copy p {
  margin: 2px 0 0;
}

.item-workflow-step.is-responsible .item-workflow-marker,
.item-workflow-step.current .item-workflow-marker {
  border-color: var(--primary-dark);
  background: var(--primary-dark);
  color: #fff;
}

.item-workflow-step.is-responsible::after {
  background: color-mix(in srgb, var(--primary-dark) 34%, #cfd5dc);
}

.item-workflow-step.done .item-workflow-marker {
  border-color: var(--success);
  background: var(--success);
  color: #fff;
}

.item-workflow-step.done::after {
  background: var(--success);
}

.item-workflow-step.attention .item-workflow-marker {
  border-color: var(--danger);
  background: var(--danger);
  color: #fff;
}

.item-workflow-step.attention .item-workflow-copy strong,
.item-workflow-step.attention .item-workflow-copy p {
  color: var(--danger);
}

.item-workflow-step.skipped .item-workflow-marker {
  border-style: dashed;
  background: #fff;
  color: #7b8490;
}

.item-workflow-step.skipped .item-workflow-copy {
  opacity: 0.72;
}

.item-workflow-branch-note {
  display: flex;
  align-items: baseline;
  gap: 10px;
  padding-top: 11px;
  border-top: 1px solid var(--glass-separator);
  color: var(--muted);
  font-size: 12px;
}

.item-workflow-branch-note strong {
  flex: 0 0 auto;
  color: var(--danger);
}

.item-workflow-progress {
  display: grid;
  gap: 14px;
  margin-bottom: 16px;
  padding: 14px 15px 10px;
  border: 1px solid var(--glass-separator);
  border-radius: 7px;
  background: rgba(255, 255, 255, 0.34);
}

.item-workflow-progress-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 14px;
}

.item-workflow-progress-header > div {
  display: grid;
  gap: 2px;
  min-width: 0;
}

.item-workflow-progress-header strong {
  color: var(--text);
  font-size: 18px;
}

.item-workflow-progress-header > .status {
  flex: 0 0 auto;
}

.edit-dialog.item-workflow-dialog,
.edit-dialog.item-workflow-detail-dialog {
  width: min(1180px, calc(100vw - 48px));
}

#item-purchase-dialog .edit-dialog.item-workflow-dialog {
  width: min(980px, calc(100vw - 48px));
  height: min(820px, calc(100dvh - 24px));
  max-height: calc(100dvh - 24px);
  display: grid;
  grid-template-rows: auto minmax(0, 1fr);
  overflow: hidden;
}

#item-purchase-dialog .item-workflow-dialog > form {
  min-height: 0;
  display: grid;
  grid-template-rows: minmax(0, 1fr) auto;
  overflow: hidden;
}

#item-purchase-dialog .item-workflow-dialog .dialog-body {
  min-height: 0;
  max-height: none;
  overflow: auto;
}

#item-reimbursement-dialog .edit-dialog.item-workflow-dialog {
  height: min(880px, calc(100dvh - 24px));
  max-height: calc(100dvh - 24px);
  display: grid;
  grid-template-rows: auto minmax(0, 1fr);
  overflow: hidden;
}

#item-reimbursement-dialog .item-workflow-dialog > form {
  min-height: 0;
  display: grid;
  grid-template-rows: minmax(0, 1fr) auto;
  overflow: hidden;
}

#item-reimbursement-dialog .item-workflow-dialog .dialog-body {
  min-height: 0;
  max-height: none;
  overflow: auto;
}

#item-purchase-dialog #item-purchase-lines {
  align-content: start;
  margin-bottom: 8px;
}

#item-purchase-dialog .add-item-purchase-line {
  align-self: start;
}

.item-purchase-header-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(220px, 0.42fr);
  gap: 14px;
  align-items: start;
}

.item-purchase-store-field {
  display: grid;
  align-content: start;
  gap: 6px;
  min-width: 0;
}

.item-purchase-store-field > span,
.item-purchase-total-field > span {
  color: var(--muted);
  font-size: 12px;
}

.item-purchase-store-field > small,
.item-purchase-total-field > span > small {
  color: var(--muted);
  font-size: 11px;
}

.item-purchase-total-field > span > small.requires-review {
  color: var(--gold);
  font-weight: 600;
}

.item-purchase-store-field select:disabled {
  cursor: not-allowed;
  opacity: 1;
  color: var(--text);
  background: rgba(231, 235, 240, 0.76);
}

.item-purchase-total {
  display: grid;
  align-items: center;
  justify-items: end;
  min-width: 0;
  min-height: 44px;
  padding: 7px 14px;
  border: 1px solid rgba(10, 132, 255, 0.2);
  border-radius: 7px;
  background: rgba(10, 132, 255, 0.06);
}

.item-purchase-total strong {
  color: var(--primary-dark);
  font-size: 30px;
  line-height: 1;
  white-space: nowrap;
}

.edit-dialog.item-workflow-dialog .item-purchase-line-grid {
  grid-template-columns: repeat(5, minmax(0, 1fr));
}

.item-proof-section {
  margin-top: 16px;
  padding-top: 14px;
  border-top: 1px solid var(--glass-separator);
}

.item-proof-section h4,
.item-proof-section p {
  margin: 0 0 8px;
}

@media (max-width: 1000px) {
  .edit-dialog.item-workflow-dialog,
  .edit-dialog.item-workflow-detail-dialog {
    width: calc(100vw - 24px);
  }

  #item-purchase-dialog .edit-dialog.item-workflow-dialog {
    width: calc(100vw - 24px);
  }

  .edit-dialog.item-workflow-dialog .item-purchase-line-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

@media (min-width: 761px) and (max-width: 900px) {
  .item-workflow-stepper {
    grid-template-columns: repeat(6, minmax(96px, 1fr));
    min-width: 600px;
  }

  .item-workflow-step {
    padding-inline: 6px;
  }
}

@media (max-width: 760px) {
  .item-workflow-map-header,
  .item-workflow-progress-header,
  .item-workflow-branch-note {
    align-items: flex-start;
    flex-direction: column;
  }

  .item-workflow-map-key {
    justify-content: flex-start;
  }

  .item-workflow-stepper {
    grid-template-columns: repeat(6, minmax(112px, 1fr));
    min-width: 672px;
  }

  .edit-dialog.item-workflow-dialog,
  .edit-dialog.item-workflow-detail-dialog {
    width: calc(100vw - 12px);
  }

  .item-purchase-header-grid,
  .edit-dialog.item-workflow-dialog .item-purchase-line-grid {
    grid-template-columns: minmax(0, 1fr);
  }

  .edit-dialog.item-workflow-dialog .item-purchase-line-grid .item-line-wide {
    grid-column: auto;
  }

  .item-purchase-total strong {
    font-size: 22px;
  }
}

/* Free-text procurement and receiving-time inventory standardization. */
.item-purchase-total-field {
  display: grid;
  gap: 6px;
  min-width: 0;
}

.item-purchase-total-field > span {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 8px;
}

.item-purchase-purpose {
  display: grid;
  grid-column: 1 / -1;
  gap: 6px;
  min-width: 0;
}

.item-purchase-purpose > span,
.item-purchase-purpose small {
  color: var(--muted);
  font-size: 12px;
}

.item-purchase-purpose textarea {
  min-height: 62px;
  resize: vertical;
}

.edit-dialog.item-workflow-dialog .item-purchase-line-grid {
  grid-template-columns: 88px minmax(240px, 1fr) 82px 110px 132px;
  align-items: start;
}

.item-purchase-line legend .compact-button {
  min-height: 30px;
  padding: 4px 10px;
}

.item-request-name {
  position: relative;
}

.item-archive-name-field {
  position: relative;
}

.items-register-actions {
  margin-left: auto;
  align-items: center;
  justify-content: flex-end;
  flex-wrap: wrap;
}

.item-row-action-menu > summary {
  min-height: 34px;
  padding: 6px 11px;
}

.item-row-action-menu .table-action-menu-popover {
  min-width: 132px;
}

.item-action-menu-label {
  padding: 2px 8px;
  color: var(--muted);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.04em;
}

.item-action-menu-label:not(:first-child) {
  margin-top: 3px;
  padding-top: 8px;
  border-top: 1px solid var(--glass-separator);
}

.inventory-name-link {
  display: block;
  max-width: 100%;
  padding: 0;
  overflow: hidden;
  color: var(--text);
  font-weight: 800;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.item-archive-dialog {
  width: min(1040px, calc(100vw - 48px));
  height: min(900px, calc(100dvh - 24px));
  max-height: calc(100dvh - 24px);
}

.item-archive-form-layout {
  display: grid;
  gap: 12px;
}

.item-archive-form-section {
  min-width: 0;
  padding: 14px;
  border: 1px solid var(--glass-separator);
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.42);
}

.item-archive-form-section-heading {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  margin-bottom: 10px;
}

.item-archive-form-section-heading > span {
  display: grid;
  flex: 0 0 26px;
  width: 26px;
  height: 26px;
  place-items: center;
  border-radius: 50%;
  background: rgba(10, 132, 255, 0.12);
  color: var(--primary-dark);
  font-weight: 800;
}

.item-archive-form-section-heading > div {
  min-width: 0;
  flex: 1 1 auto;
}

.item-archive-form-section-heading h4,
.item-archive-form-section-heading p {
  margin: 0;
}

.item-archive-form-section-heading h4 {
  color: var(--text);
  font-size: 15px;
}

.item-archive-form-section-heading p {
  margin-top: 3px;
  color: var(--muted);
  font-size: 11px;
  line-height: 1.45;
}

.item-archive-form-section-heading > button {
  flex: 0 0 auto;
  min-height: 32px;
}

.item-archive-form-section > .form-grid {
  margin-top: 0;
  gap: 12px 14px;
}

#item-dialog .item-archive-form-section label {
  min-width: 0;
}

#item-dialog .item-archive-form-section label > span:first-child {
  min-height: 18px;
  line-height: 18px;
}

@media (min-width: 900px) {
  #item-dialog .item-archive-form-section > .form-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  #item-dialog .item-archive-form-section > .form-grid > .third,
  #item-dialog .item-archive-form-section > .form-grid > label {
    grid-column: span 1;
  }

  #item-dialog .item-archive-form-section > .form-grid > .item-archive-selection {
    grid-column: 1 / -1;
  }
}

.item-smart-field {
  position: relative;
  align-self: start;
  min-width: 0;
}

.item-smart-input-shell {
  position: relative;
  display: block;
  width: 100%;
}

.item-smart-input-shell > input {
  width: 100%;
  padding-right: 42px;
}

.item-smart-toggle {
  position: absolute;
  top: 1px;
  right: 1px;
  bottom: 1px;
  display: grid;
  width: 38px;
  min-width: 38px;
  min-height: 0;
  place-items: center;
  padding: 0;
  border: 0;
  border-left: 1px solid var(--glass-separator);
  border-radius: 0 7px 7px 0;
  background: rgba(255, 255, 255, 0.34);
  box-shadow: none;
}

.item-smart-toggle > span {
  width: 8px;
  height: 8px;
  border-right: 1.5px solid currentColor;
  border-bottom: 1.5px solid currentColor;
  transform: translateY(-2px) rotate(45deg);
}

.item-smart-toggle:hover,
.item-smart-toggle:focus-visible {
  background: rgba(10, 132, 255, 0.09);
}

.item-smart-toggle:disabled {
  opacity: 0.4;
  cursor: default;
}

.item-smart-suggestions {
  top: calc(100% + 5px);
}

.item-smart-value-option {
  grid-template-columns: minmax(0, 1fr) auto;
}

.item-suggestion-option.is-active {
  background: rgba(10, 132, 255, 0.1);
  box-shadow: inset 3px 0 0 var(--primary);
}

.item-custom-fields {
  display: grid;
  gap: 10px;
}

.item-custom-field-row {
  display: grid;
  grid-template-columns: minmax(160px, 0.42fr) minmax(240px, 1fr) auto;
  align-items: end;
  gap: 10px;
}

.item-custom-field-row > button {
  min-height: var(--control-height);
}

.item-archive-note-section > label {
  display: block;
}

.inventory-item-detail-dialog {
  height: min(900px, calc(100dvh - 24px));
  max-height: calc(100dvh - 24px);
}

.inventory-item-detail-body {
  display: grid;
  gap: 16px;
}

.inventory-item-detail-metrics {
  margin-top: 0;
}

.inventory-item-detail-metrics .metric-card strong {
  overflow-wrap: anywhere;
}

.inventory-item-profile-grid {
  margin-top: 0;
  align-items: start;
}

.inventory-detail-section {
  min-width: 0;
  padding: 14px;
  border: 1px solid var(--glass-separator);
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.4);
}

.inventory-detail-section-heading {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 10px;
}

.inventory-detail-section-heading h4,
.inventory-detail-section-heading p {
  margin: 0;
}

.inventory-detail-section-heading p,
.inventory-detail-section-heading > span {
  color: var(--muted);
  font-size: 11px;
}

.inventory-detail-section-heading p {
  margin-top: 3px;
}

.inventory-item-detail-list dd {
  min-width: 0;
  max-width: 68%;
  overflow-wrap: anywhere;
}

.inventory-detail-note {
  margin: 0;
  color: var(--text);
  line-height: 1.65;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}

.inventory-detail-section .responsive-table {
  max-width: 100%;
}

.inventory-detail-section table {
  min-width: 760px;
}

.item-operation-dialog-shell {
  width: min(620px, calc(100vw - 32px));
}

.item-operation-explainer {
  margin-bottom: 16px;
  padding: 13px 14px;
  border: 1px solid rgba(10, 132, 255, 0.18);
  border-radius: 10px;
  background: rgba(10, 132, 255, 0.06);
}

.item-operation-explainer strong,
.item-operation-explainer p,
.item-operation-explainer small {
  display: block;
  margin: 0;
}

.item-operation-explainer p {
  margin-top: 5px;
  color: var(--text);
  line-height: 1.55;
}

.item-operation-explainer small {
  margin-top: 7px;
  color: var(--muted);
  line-height: 1.45;
}

.item-operation-impact {
  grid-column: 1 / -1;
  padding: 9px 11px;
  border-radius: 8px;
  background: rgba(52, 199, 89, 0.08);
  color: var(--success);
  font-size: 12px;
}

.item-operation-impact.has-difference {
  background: rgba(255, 149, 0, 0.1);
  color: var(--warning-text, #8a5200);
}

.item-archive-search-hint {
  min-height: 16px;
  color: var(--muted);
  font-size: 11px;
  line-height: 1.4;
}

.item-archive-name-field input[readonly] {
  border-color: rgba(10, 132, 255, 0.3);
  background: rgba(10, 132, 255, 0.06);
}

.item-archive-suggestions {
  top: calc(100% + 5px);
}

.item-archive-selection {
  display: flex;
  grid-column: 1 / -1;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  padding: 11px 12px;
  border: 1px solid rgba(10, 132, 255, 0.24);
  border-radius: 9px;
  background: rgba(10, 132, 255, 0.07);
}

.item-archive-selection > div {
  display: grid;
  gap: 2px;
  min-width: 0;
}

.item-archive-selection span,
.item-archive-selection small {
  color: var(--muted);
  font-size: 11px;
}

.item-archive-selection strong,
.item-archive-selection small {
  overflow-wrap: anywhere;
}

.item-archive-selection > button {
  flex: 0 0 auto;
}

.item-request-name > input,
.item-request-name .item-purchase-suggestions {
  width: 100%;
  box-sizing: border-box;
}

.item-purchase-line [data-field="planned_unit_price"]::placeholder {
  color: var(--muted);
  opacity: 0.72;
}

.item-suggestion-source:empty {
  display: none;
}

.item-suggestion-source {
  color: var(--primary-dark);
  font-size: 11px;
  line-height: 1.35;
}

.item-purchase-suggestions {
  position: absolute;
  z-index: 15;
  top: calc(100% + 5px);
  left: 0;
  width: 100%;
  max-width: 100%;
  max-height: 330px;
  overflow-y: auto;
  padding: 7px;
  border: 1px solid rgba(60, 60, 67, 0.18);
  border-radius: 7px;
  background: rgba(250, 251, 252, 0.98);
  box-shadow: 0 16px 38px rgba(22, 27, 34, 0.18);
}

.item-suggestion-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 4px 5px 7px;
  color: var(--muted);
  font-size: 11px;
}

.item-suggestion-option {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 14px;
  width: 100%;
  min-height: 0;
  padding: 9px 10px;
  border: 0;
  border-top: 1px solid var(--glass-separator);
  border-radius: 0;
  background: transparent;
  color: var(--text);
  text-align: left;
}

.item-suggestion-option:hover,
.item-suggestion-option:focus-visible {
  background: rgba(10, 132, 255, 0.08);
}

.item-suggestion-option > span {
  display: grid;
  gap: 2px;
  min-width: 0;
}

.item-suggestion-option > span:not(:first-child) {
  justify-items: end;
  text-align: right;
}

.item-suggestion-option strong,
.item-suggestion-option small {
  overflow-wrap: anywhere;
}

.item-suggestion-option small {
  color: var(--muted);
  font-size: 11px;
}

.item-line-supplement {
  margin-top: 10px;
  padding-top: 9px;
  border-top: 1px solid var(--glass-separator);
}

.item-line-supplement summary {
  width: fit-content;
  cursor: pointer;
  color: var(--primary-dark);
  font-size: 12px;
  font-weight: 700;
}

.item-line-supplement summary small {
  color: var(--muted);
  font-weight: 400;
}

.item-line-supplement-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 11px;
  margin-top: 10px;
}

.item-line-supplement-grid label {
  display: grid;
  gap: 5px;
  min-width: 0;
}

.item-line-supplement-grid label > span {
  color: var(--muted);
  font-size: 12px;
}

.item-purpose-summary {
  margin-bottom: 14px;
  padding: 11px 13px;
  border-left: 3px solid var(--primary-dark);
  background: rgba(10, 132, 255, 0.05);
}

.item-purpose-summary span {
  color: var(--muted);
  font-size: 11px;
  font-weight: 700;
}

.item-purpose-summary p {
  margin: 3px 0 0;
  overflow-wrap: anywhere;
}

.item-reimbursement-request dl {
  display: grid;
  gap: 8px;
  margin: 0;
}

.item-reimbursement-request dl > div {
  display: grid;
  gap: 2px;
}

.item-reimbursement-request dt,
.item-reimbursement-request dd {
  margin: 0;
}

.item-reimbursement-request dt {
  color: var(--muted);
  font-size: 11px;
}

.item-reimbursement-request dd {
  overflow-wrap: anywhere;
  font-size: 13px;
}

.item-reimbursement-request .item-reimbursement-declared {
  grid-column: 1 / -1;
  margin-top: 4px;
  padding-top: 9px;
  border-top: 1px solid var(--glass-separator);
}

.item-reimbursement-request .item-reimbursement-overrun {
  grid-column: 1 / -1;
}

.item-reimbursement-request .item-reimbursement-declared dd {
  font-size: 16px;
  font-weight: 800;
}

.item-reimbursement-request .item-reimbursement-overrun dd,
.item-reimbursement-detail-overrun strong {
  color: var(--danger);
  font-weight: 800;
}

.item-reimbursement-actual-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 9px;
}

.item-reimbursement-actual-grid label,
.item-reimbursement-quantity-unit-field,
.item-reimbursement-inventory-grid label {
  display: grid;
  align-content: start;
  gap: 4px;
  min-width: 0;
}

.item-reimbursement-actual-grid label > span,
.item-reimbursement-quantity-unit-field > span,
.item-reimbursement-inventory-grid label > span {
  color: var(--muted);
  font-size: 11px;
}

.item-reimbursement-actual-grid label > small,
.item-reimbursement-quantity-unit-field > small {
  color: var(--muted);
  font-size: 10px;
  line-height: 1.3;
}

.item-quantity-unit-control {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(72px, 0.48fr);
  align-items: center;
  min-width: 0;
  height: var(--control-height);
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, 0.64);
  border-radius: var(--radius);
  background: rgba(255, 255, 255, 0.46);
  box-shadow: var(--inner-highlight);
  transition: border-color 0.18s, box-shadow 0.18s, background 0.18s;
}

.item-quantity-unit-control input {
  min-width: 0;
  height: calc(var(--control-height) - 2px);
  min-height: calc(var(--control-height) - 2px);
  margin: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}

.item-quantity-unit-control [data-field="actual_purchase_unit"] {
  border-left: 1px solid var(--glass-separator);
  text-align: center;
}

.item-quantity-unit-control:focus-within {
  border-color: var(--focus-border);
  box-shadow: var(--focus-ring), var(--inner-highlight);
}

.item-custom-choice-input {
  width: 100%;
}

.item-reimbursement-inventory [data-field="inventory_unit"][readonly] {
  cursor: not-allowed;
  color: var(--text);
  background: rgba(231, 235, 240, 0.76);
}

.item-reimbursement-inventory-grid {
  display: grid;
  gap: 9px;
}

.item-stock-formula {
  margin-top: 10px;
  padding: 9px 10px;
  border-left: 3px solid var(--success);
  background: color-mix(in srgb, var(--success) 8%, transparent);
  font-size: 12px;
  overflow-wrap: anywhere;
}

.item-stock-formula strong {
  color: var(--success);
}

.item-service-no-stock {
  margin: 0;
  color: var(--muted);
  font-size: 13px;
}

.item-reimbursement-detail-lines {
  display: grid;
  gap: 12px;
}

.item-reimbursement-detail-line {
  border: 1px solid var(--glass-separator);
  border-radius: 7px;
  background: rgba(255, 255, 255, 0.28);
}

.item-reimbursement-detail-line > header,
.item-reimbursement-detail-line > footer {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 9px 12px;
}

.item-reimbursement-detail-line > header span,
.item-reimbursement-detail-line > footer {
  color: var(--muted);
  font-size: 12px;
}

.item-reimbursement-detail-line > footer {
  justify-content: flex-end;
  border-top: 1px solid var(--glass-separator);
}

.item-reimbursement-detail-map {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  border-top: 1px solid var(--glass-separator);
}

.item-reimbursement-detail-map section {
  display: grid;
  align-content: start;
  gap: 4px;
  min-width: 0;
  padding: 12px;
  border-left: 1px solid var(--glass-separator);
}

.item-reimbursement-detail-map section:first-child {
  border-left: 0;
}

.item-reimbursement-detail-map section > span,
.item-reimbursement-detail-map section small {
  color: var(--muted);
  font-size: 11px;
}

.item-reimbursement-detail-map section strong,
.item-reimbursement-detail-map section p,
.item-reimbursement-detail-map section small {
  margin: 0;
  overflow-wrap: anywhere;
}

.item-reimbursement-detail-declared,
.item-reimbursement-detail-overrun {
  display: grid;
  gap: 2px;
  margin-top: 5px;
  padding-top: 7px;
  border-top: 1px solid var(--glass-separator);
}

@media (max-width: 1100px) {
  .item-purchase-header-grid {
    grid-template-columns: minmax(0, 1fr) minmax(210px, 0.4fr);
  }

  .item-purchase-total {
    grid-column: auto;
  }

  .edit-dialog.item-workflow-dialog .item-purchase-line-grid {
    grid-template-columns: 110px minmax(240px, 2fr) repeat(3, minmax(100px, 1fr));
  }

}

@media (max-width: 760px) {
  .items-register-actions {
    width: 100%;
    margin-left: 0;
    justify-content: flex-end;
  }

  .item-archive-dialog,
  .inventory-item-detail-dialog {
    width: calc(100vw - 12px);
    height: calc(100dvh - 12px);
    max-height: calc(100dvh - 12px);
  }

  .item-archive-form-section {
    padding: 12px;
  }

  #item-dialog .item-archive-form-section > .form-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
  }

  #item-dialog .item-archive-form-section > .form-grid > .third,
  #item-dialog .item-archive-form-section > .form-grid > label {
    grid-column: span 1;
  }

  #item-dialog .item-archive-form-section > .form-grid > .item-mobile-full,
  #item-dialog .item-archive-form-section > .form-grid > .item-archive-selection {
    grid-column: 1 / -1;
  }

  .item-archive-form-section-heading {
    flex-wrap: wrap;
  }

  .item-archive-form-section-heading > button {
    margin-left: 36px;
  }

  .item-custom-field-row {
    grid-template-columns: minmax(0, 1fr);
  }

  .item-custom-field-row > button {
    justify-self: end;
  }

  .inventory-item-profile-grid {
    grid-template-columns: minmax(0, 1fr);
  }

  .inventory-item-detail-metrics {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .item-purchase-header-grid,
  .edit-dialog.item-workflow-dialog .item-purchase-line-grid,
  .item-line-supplement-grid,
  .item-reimbursement-actual-grid,
  .item-reimbursement-detail-map {
    grid-template-columns: minmax(0, 1fr);
  }

  #item-reimbursement-dialog .item-reimbursement-request dl {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    column-gap: 14px;
  }

  .item-purchase-total {
    grid-column: auto;
  }

  #item-purchase-dialog .edit-dialog.item-workflow-dialog {
    width: calc(100vw - 12px);
    height: calc(100dvh - 12px);
    max-height: calc(100dvh - 12px);
  }

  #item-reimbursement-dialog .edit-dialog.item-workflow-dialog {
    width: calc(100vw - 12px);
    height: calc(100dvh - 12px);
    max-height: calc(100dvh - 12px);
  }

  #item-purchase-dialog #item-purchase-lines {
    min-height: 0;
  }

  .item-purchase-total strong {
    font-size: 28px;
  }

  .item-purchase-suggestions {
    position: static;
    width: 100%;
    max-height: 280px;
  }

  .item-archive-selection {
    align-items: stretch;
    flex-direction: column;
  }

  .item-archive-selection > button {
    align-self: flex-end;
  }

  .item-suggestion-option {
    grid-template-columns: minmax(0, 1fr);
  }

  .item-suggestion-option > span:not(:first-child) {
    justify-items: start;
    text-align: left;
  }

  .item-reimbursement-detail-map section,
  .item-reimbursement-detail-map section:first-child {
    border-left: 0;
    border-top: 1px solid var(--glass-separator);
  }

  .item-reimbursement-detail-map section:first-child {
    border-top: 0;
  }

.item-reimbursement-detail-line > footer {
    align-items: flex-start;
    flex-direction: column;
  }
}

.item-reimbursement-purchase-step {
  padding: 2px 0 16px;
  border-bottom: 1px solid var(--glass-separator);
}

.item-reimbursement-purchase-picker {
  display: grid;
  gap: 8px;
}

.item-reimbursement-purchase-picker-heading {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 8px;
}

.item-reimbursement-purchase-picker-heading > span {
  display: flex;
  align-items: baseline;
  gap: 8px;
}

.item-reimbursement-purchase-picker-heading small {
  color: var(--danger);
}

.item-reimbursement-purchase-picker-heading > em {
  color: var(--primary-dark);
  font-size: 12px;
  font-style: normal;
  font-weight: 700;
}

.item-reimbursement-purchase-picker > input[type="search"] {
  width: 100%;
}

.item-reimbursement-purchase-options {
  display: grid;
  max-height: 190px;
  overflow-y: auto;
  border: 1px solid var(--glass-separator);
  border-radius: var(--radius);
  background: rgba(255, 255, 255, 0.32);
}

.item-reimbursement-purchase-options > label {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 10px;
  min-width: 0;
  padding: 10px 12px;
  border-top: 1px solid var(--glass-separator);
  cursor: pointer;
}

.item-reimbursement-purchase-options > label:first-child {
  border-top: 0;
}

.item-reimbursement-purchase-options > label.is-selected {
  background: rgba(0, 113, 227, 0.08);
}

.item-reimbursement-purchase-options input[type="checkbox"] {
  width: 18px;
  min-height: 18px;
}

.item-reimbursement-purchase-options label > span {
  display: grid;
  gap: 2px;
  min-width: 0;
}

.item-reimbursement-purchase-options label > span > strong,
.item-reimbursement-purchase-options label > span > small {
  overflow-wrap: anywhere;
}

.item-reimbursement-purchase-options label > span > small,
.item-reimbursement-purchase-options label > em,
.item-reimbursement-purchase-hint {
  color: var(--muted);
  font-size: 12px;
  font-style: normal;
}

.item-reimbursement-purchase-options label.is-disabled {
  opacity: 0.48;
  cursor: not-allowed;
}

.item-reimbursement-purchase-group {
  display: grid;
  gap: 10px;
  min-width: 0;
}

.item-reimbursement-purchase-group + .item-reimbursement-purchase-group {
  margin-top: 6px;
  padding-top: 16px;
  border-top: 2px solid var(--glass-separator);
}

.item-reimbursement-purchase-group > header {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  gap: 12px;
  padding: 0 3px;
}

.item-reimbursement-purchase-group > header > div {
  display: flex;
  align-items: baseline;
  gap: 8px;
}

.item-reimbursement-purchase-group > header span,
.item-reimbursement-purchase-group > header small,
.item-line-purchase-source {
  color: var(--muted);
  font-size: 12px;
}

.item-reimbursement-details {
  min-width: 0;
}

.item-reimbursement-evidence {
  margin-top: 16px;
  padding-top: 16px;
  border-top: 1px solid var(--glass-separator);
}

.item-reimbursement-evidence > header {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
}

.item-reimbursement-evidence > header strong {
  font-size: 14px;
}

.item-reimbursement-evidence > header small,
.item-field-hint {
  color: var(--muted);
  font-size: 10px;
  font-weight: 400;
  line-height: 1.35;
}

.item-reimbursement-evidence .item-attachment-grid {
  margin-top: 9px;
}

.item-reimbursement-batch-fields {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 11px;
  margin-top: 9px;
}

.item-reimbursement-batch-fields > label {
  display: grid;
  align-content: start;
  gap: 5px;
  min-width: 0;
}

.item-reimbursement-batch-fields > label > span {
  color: var(--muted);
  font-size: 12px;
}

.item-reimbursement-batch-fields .item-manual-entry-field .money-input {
  border-color: rgba(60, 60, 67, 0.14);
  background: rgba(255, 255, 255, 0.9);
  box-shadow: var(--inner-highlight);
}

.item-reimbursement-batch-fields .item-manual-entry-field input,
.item-reimbursement-batch-fields .item-auto-read-field input {
  color: var(--text);
  font-weight: 650;
}

.item-reimbursement-batch-fields .item-auto-read-field > input,
.item-reimbursement-batch-fields .item-auto-read-field .money-input {
  border-color: rgba(60, 60, 67, 0.12);
  background: rgba(235, 237, 242, 0.82);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.74);
}

#item-reimbursement-dialog .item-reimbursement-actual input,
#item-reimbursement-dialog .item-reimbursement-inventory select,
#item-reimbursement-dialog .item-reimbursement-inventory input:not([readonly]),
#item-reimbursement-dialog .item-batch-searchable-choice > input,
#item-reimbursement-dialog .item-invoice-reason-field > input,
#item-reimbursement-dialog .item-quantity-unit-control {
  border-color: rgba(60, 60, 67, 0.14);
  background: rgba(255, 255, 255, 0.9);
  box-shadow: var(--inner-highlight);
}

#item-reimbursement-dialog .item-quantity-unit-control input {
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}

#item-reimbursement-dialog .item-reimbursement-inventory input[readonly] {
  border-color: rgba(60, 60, 67, 0.12);
  background: rgba(235, 237, 242, 0.82);
}

#item-reimbursement-dialog .item-batch-searchable-choice datalist {
  display: none;
}

#item-reimbursement-dialog .item-auto-read-field input[type="date"] {
  display: block;
  width: 100%;
  min-width: 0;
  max-width: 100%;
  min-inline-size: 0;
  max-inline-size: 100%;
  height: var(--control-height);
  min-height: var(--control-height);
  max-height: var(--control-height);
  padding: 6px 9px;
  line-height: 1.35;
  -webkit-appearance: none;
  appearance: none;
}

#item-reimbursement-dialog .item-auto-read-field input[type="date"]::-webkit-date-and-time-value {
  min-height: 0;
  margin: 0;
  text-align: left;
}

#item-reimbursement-dialog .item-auto-read-field input[type="date"]::-webkit-datetime-edit,
#item-reimbursement-dialog .item-auto-read-field input[type="date"]::-webkit-calendar-picker-indicator {
  padding: 0;
  margin: 0;
}

.item-reimbursement-batch-fields input::placeholder {
  color: color-mix(in srgb, var(--muted) 82%, transparent);
  font-weight: 400;
}

.item-reimbursement-batch-fields .item-invoice-reason-field {
  grid-column: 1 / -1;
}

.item-transfer-account-heading {
  grid-column: 1 / -1;
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  margin-top: 5px;
  padding-top: 16px;
  border-top: 1px solid var(--glass-separator);
}

.item-transfer-account-heading strong {
  color: var(--text);
  font-size: 14px;
}

.item-transfer-account-heading small {
  color: var(--muted);
  font-size: 10px;
  white-space: nowrap;
}

#item-reimbursement-dialog .item-history-choice-field.is-system-filled > input {
  border-color: rgba(60, 60, 67, 0.12);
  background: rgba(235, 237, 242, 0.82);
}

.item-transfer-account-detail {
  display: grid;
  gap: 8px;
  margin-top: 16px;
  padding-top: 16px;
  border-top: 1px solid var(--glass-separator);
}

.item-transfer-account-detail h4 {
  margin: 0;
}

.item-transfer-account-summary {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.item-transfer-account-summary > div {
  min-width: 0;
}

.item-transfer-account-summary dd {
  overflow-wrap: anywhere;
}

.item-recognition-statuses {
  min-height: 0;
  margin: 0;
}

.item-recognition-statuses:has(p:not(:empty)) {
  margin-top: 8px;
}

.item-invoice-recognition-status,
.item-payment-recognition-status {
  min-height: 18px;
  margin: 0;
  font-size: 12px;
}

.item-recognition-statuses p:empty {
  display: none;
}

.item-invoice-summary {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  margin-bottom: 12px;
}

#item-reimbursement-dialog .edit-dialog.item-workflow-dialog.is-awaiting-purchase {
  width: min(720px, calc(100vw - 48px));
  height: auto;
  max-height: calc(100dvh - 24px);
}

#item-reimbursement-dialog .item-workflow-dialog.is-awaiting-purchase .dialog-body {
  overflow: visible;
}

@media (max-width: 760px) {
  .item-reimbursement-purchase-picker-heading,
  .item-reimbursement-purchase-group > header {
    align-items: flex-start;
    flex-direction: column;
    gap: 4px;
  }

  .item-reimbursement-purchase-options > label {
    grid-template-columns: auto minmax(0, 1fr);
  }

  .item-reimbursement-purchase-options label > em {
    grid-column: 2;
  }

  .item-reimbursement-evidence > header {
    align-items: flex-start;
    flex-direction: column;
    gap: 3px;
  }

  .item-reimbursement-batch-fields,
  .item-invoice-summary {
    grid-template-columns: minmax(0, 1fr);
  }

  .item-transfer-account-heading {
    align-items: flex-start;
  }

  .item-transfer-account-summary {
    grid-template-columns: minmax(0, 1fr);
  }

  #item-reimbursement-dialog .edit-dialog.item-workflow-dialog.is-awaiting-purchase {
    width: calc(100vw - 12px);
    height: auto;
  }
}

@media (max-width: 420px) {
  .item-attachment-grid {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* Keep compact heading actions, including collapse controls, on one row. */
@media (max-width: 680px) {
  #cards-management-section > .page-section-collapse-header,
  #procurement-purchases .page-section-collapse-header,
  #procurement-reimbursements .page-section-collapse-header {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: start;
    gap: 8px;
  }

  #cards-management-section > .page-section-collapse-header > div:first-child,
  #procurement-purchases .page-section-collapse-header > div:first-child,
  #procurement-reimbursements .page-section-collapse-header > div:first-child {
    min-width: 0;
  }

  #cards-management-section > .page-section-collapse-header > .actions,
  #procurement-purchases .page-section-collapse-header > .actions,
  #procurement-reimbursements .page-section-collapse-header > .actions {
    min-width: max-content;
    display: flex;
    flex: 0 0 auto;
    flex-wrap: nowrap;
    align-items: center;
    justify-content: flex-end;
    gap: 6px;
  }

  #cards-management-section .page-section-collapse-toggle,
  #procurement-purchases .page-section-collapse-toggle,
  #procurement-reimbursements .page-section-collapse-toggle {
    margin-left: 0;
  }

  #procurement-purchases .page-section-collapse-header > .actions > button,
  #procurement-reimbursements .page-section-collapse-header > .actions > button {
    width: auto;
    white-space: nowrap;
  }

  #procurement-purchases .page-section-collapse-toggle,
  #procurement-reimbursements .page-section-collapse-toggle {
    width: var(--control-height);
    min-width: var(--control-height);
    height: var(--control-height);
    min-height: var(--control-height);
    padding: 0;
  }

  .procurement-filter-toolbar .date-range-fields > label {
    width: 100%;
    min-width: 0;
    max-width: 100%;
  }

  .procurement-filter-toolbar .date-range-fields input[type="date"] {
    display: block;
    width: 100%;
    min-width: 0;
    max-width: 100%;
    min-inline-size: 0;
    max-inline-size: 100%;
    height: var(--control-height);
    min-height: var(--control-height);
    max-height: var(--control-height);
    padding: 6px 9px;
    line-height: 1.35;
    -webkit-appearance: none;
    appearance: none;
  }

  .procurement-filter-toolbar .date-range-fields input[type="date"]::-webkit-date-and-time-value {
    min-height: 0;
    margin: 0;
    text-align: left;
  }

  .procurement-filter-toolbar .date-range-fields input[type="date"]::-webkit-datetime-edit,
  .procurement-filter-toolbar .date-range-fields input[type="date"]::-webkit-calendar-picker-indicator {
    padding: 0;
    margin: 0;
  }
}

/* Keep reimbursement list rules after legacy dialog rules in the cascade. */
#item-reimbursement-lines .item-reimbursement-line-list-head,
#item-reimbursement-lines .item-reimbursement-line {
  display: grid;
  grid-template-columns: 46px minmax(160px, 0.82fr) minmax(210px, 1fr) minmax(230px, 1.08fr);
  min-width: 0;
}

#item-reimbursement-lines .item-reimbursement-line {
  margin: 0;
  padding: 0;
  border: 0;
  border-top: 1px solid var(--glass-separator);
  border-radius: 0;
  background: rgba(255, 255, 255, 0.46);
}

#item-reimbursement-lines .item-reimbursement-request dl {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 6px 10px;
}

#item-reimbursement-lines .item-reimbursement-request .item-reimbursement-declared {
  grid-column: auto;
  margin-top: 0;
  padding-top: 0;
  border-top: 0;
}

#item-reimbursement-lines .item-reimbursement-line-editor {
  display: grid;
  grid-column: 3 / -1;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.08fr);
}

#item-reimbursement-lines .item-reimbursement-line.is-collapsed .item-reimbursement-line-editor {
  display: none;
}

#item-reimbursement-dialog .item-auto-date-control input[type="date"] {
  height: calc(var(--control-height) - 2px);
  min-height: calc(var(--control-height) - 2px);
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}

@media (max-width: 760px) {
  #item-reimbursement-lines .item-reimbursement-line-list-head {
    display: none;
  }

  #item-reimbursement-lines .item-reimbursement-line {
    grid-template-columns: 38px minmax(0, 1fr);
  }

  #item-reimbursement-lines .item-reimbursement-line-editor {
    grid-column: 1 / -1;
    grid-template-columns: minmax(0, 1fr);
  }
}

/* Reimbursement auto-fill provenance and reviewer audit */
#item-reimbursement-dialog input.is-user-modified,
#item-reimbursement-dialog select.is-user-modified,
#item-reimbursement-dialog .money-input.is-user-modified,
#item-reimbursement-dialog .item-auto-date-control.is-user-modified,
#item-reimbursement-dialog .item-quantity-unit-control.is-user-modified {
  border-color: rgba(190, 142, 0, 0.72) !important;
  background: rgba(255, 239, 153, 0.72) !important;
  box-shadow: 0 0 0 2px rgba(214, 169, 0, 0.16), var(--inner-highlight) !important;
}

#item-reimbursement-dialog .money-input.is-user-modified input,
#item-reimbursement-dialog .item-auto-date-control.is-user-modified input,
#item-reimbursement-dialog .item-quantity-unit-control.is-user-modified input {
  background: transparent !important;
}

#item-reimbursement-dialog .has-user-modified-value > span::after {
  content: "已修改";
  display: inline-flex;
  align-items: center;
  min-height: 18px;
  margin-left: 6px;
  padding: 1px 6px;
  border: 1px solid rgba(190, 142, 0, 0.42);
  border-radius: 999px;
  color: #765800;
  background: rgba(255, 239, 153, 0.82);
  font-size: 10px;
  font-weight: 650;
  vertical-align: middle;
}

.item-auto-fill-audit {
  display: grid;
  gap: 12px;
  margin-top: 16px;
  padding: 14px;
  border: 1px solid rgba(190, 142, 0, 0.34);
  border-radius: 7px;
  background: rgba(255, 248, 211, 0.5);
}

.item-auto-fill-audit > header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
}

.item-auto-fill-audit > header h4,
.item-auto-fill-audit > header p,
.item-situation-note p {
  margin: 0;
}

.item-auto-fill-audit > header p,
.item-auto-fill-audit-title small,
.item-auto-fill-audit-values span,
.item-situation-note > span {
  color: var(--muted);
  font-size: 11px;
}

.item-auto-fill-audit > header > span {
  flex: 0 0 auto;
  padding: 3px 8px;
  border-radius: 999px;
  color: #765800;
  background: rgba(255, 231, 112, 0.58);
  font-size: 11px;
  font-weight: 700;
}

.item-auto-fill-audit-list {
  display: grid;
  gap: 8px;
}

.item-auto-fill-audit-list > article {
  display: grid;
  grid-template-columns: minmax(170px, 0.72fr) minmax(0, 1.5fr);
  align-items: center;
  gap: 12px;
  padding: 10px;
  border: 1px solid rgba(60, 60, 67, 0.1);
  border-radius: 6px;
  background: rgba(255, 255, 255, 0.62);
}

.item-auto-fill-audit-title {
  display: grid;
  gap: 2px;
  min-width: 0;
}

.item-auto-fill-audit-title strong,
.item-auto-fill-audit-title small,
.item-auto-fill-audit-values strong {
  overflow-wrap: anywhere;
}

.item-auto-fill-audit-values {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 18px minmax(0, 1fr);
  align-items: stretch;
  gap: 6px;
}

.item-auto-fill-audit-values > div {
  display: grid;
  align-content: center;
  gap: 3px;
  min-width: 0;
  padding: 8px 9px;
  border-radius: 5px;
  background: rgba(235, 237, 242, 0.82);
}

.item-auto-fill-audit-values > b {
  align-self: center;
  color: var(--muted);
  text-align: center;
}

.item-auto-fill-audit-values .is-user-value {
  border: 1px solid rgba(190, 142, 0, 0.35);
  background: rgba(255, 239, 153, 0.68);
}

.item-situation-note {
  display: grid;
  gap: 4px;
  padding-top: 10px;
  border-top: 1px solid rgba(190, 142, 0, 0.24);
}

@media (max-width: 760px) {
  .item-auto-fill-audit-list > article,
  .item-auto-fill-audit-values {
    grid-template-columns: minmax(0, 1fr);
  }

  .item-auto-fill-audit-values > b {
    transform: rotate(90deg);
  }
}

@media (max-width: 1180px) and (orientation: portrait) {
  .sidebar {
    max-height: min(76dvh, 640px);
  }
}

@media (min-width: 600px) and (max-width: 1180px) {
  .nav-section-items {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (min-width: 760px) and (max-width: 1180px) and (orientation: landscape) {
  .sidebar {
    max-height: calc(100dvh - 92px);
  }

  .sidebar nav {
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 8px;
  }

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

  .nav-button,
  .nav-button:hover,
  .nav-button:active {
    min-height: 32px;
    padding: 6px 5px;
    font-size: 12px;
  }
}

@media (max-width: 760px) {
  .procurement-purchase-heading {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: stretch;
    gap: 12px;
  }

  .procurement-purchase-heading > div:first-child {
    grid-column: 1 / -1;
  }

  .procurement-purchase-actions {
    grid-column: 2;
    grid-row: 2;
    align-self: stretch;
    width: auto;
    min-width: max-content;
  }

  .procurement-purchase-actions > button {
    width: auto;
    flex: 0 0 auto;
    white-space: nowrap;
  }

  .procurement-purchase-panel .procurement-filter-toolbar {
    padding-bottom: 12px;
  }

}

@media (max-width: 420px) {
  .procurement-purchase-actions {
    align-items: stretch;
  }

}

.student-filter {
  display: grid;
  grid-template-columns: minmax(280px, 1.7fr) minmax(210px, 1.25fr) repeat(4, minmax(135px, 1fr)) auto;
  align-items: end;
  gap: 8px;
}

.student-filter > label,
.student-school-choice {
  display: grid;
  gap: 5px;
  min-width: 0;
}

.student-filter > label > span,
.student-school-choice > span {
  color: var(--muted);
  font-size: 12px;
  line-height: 1.2;
}

.student-filter input,
.student-filter select,
.student-school-choice input {
  width: 100%;
  min-width: 0;
}

.student-filter-actions {
  flex-wrap: nowrap;
  align-self: end;
}

.student-filter-actions button {
  min-width: max-content;
  white-space: nowrap;
}

@media (max-width: 1500px) {
  .student-filter {
    grid-template-columns: minmax(260px, 2fr) minmax(200px, 1.35fr) repeat(2, minmax(140px, 1fr));
  }

  form.student-filter > .student-super-search {
    grid-column: span 2;
  }

  .student-filter-actions {
    justify-self: stretch;
  }

  .student-filter-actions button {
    flex: 1 1 0;
  }
}

@media (max-width: 900px) {
  .student-filter {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  form.student-filter > .student-super-search,
  form.student-filter > .student-school-filter,
  .student-filter > .student-filter-actions {
    grid-column: 1 / -1;
  }
}

@media (max-width: 600px) {
  .student-filter {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  form.student-filter > .student-super-search,
  form.student-filter > .student-school-filter,
  .student-filter > .student-filter-actions {
    grid-column: 1 / -1;
  }
}

@media (max-width: 340px) {
  .student-filter {
    grid-template-columns: minmax(0, 1fr);
  }

  form.student-filter > label,
  .student-filter > .student-filter-actions {
    grid-column: 1;
  }
}

/* Mobile form overflow guard: preserve compact two-column dialogs while
   allowing native date, time and select controls to shrink inside each track. */
:is(.dialog-backdrop, .edit-dialog-backdrop) :where(
  .glass-dialog,
  .edit-dialog,
  form,
  fieldset,
  .dialog-body,
  .form-grid,
  .compact-form,
  .selection-group,
  .actions,
  label
) {
  min-width: 0;
  max-width: 100%;
}

:is(.dialog-backdrop, .edit-dialog-backdrop) :where(
  input:not([type="checkbox"]):not([type="radio"]),
  select,
  textarea,
  .course-location-trigger
) {
  width: 100%;
  min-width: 0;
  max-width: 100%;
  min-inline-size: 0;
  max-inline-size: 100%;
}

:is(.dialog-backdrop, .edit-dialog-backdrop) :where(
  .dialog-header,
  .dialog-body,
  .dialog-footer,
  .form-grid,
  .compact-form
) > * {
  min-width: 0;
  max-width: 100%;
}

:is(.dialog-backdrop, .edit-dialog-backdrop) :where(
  .dialog-header,
  .dialog-body,
  .dialog-footer
) :where(p, small, span, strong, legend) {
  overflow-wrap: anywhere;
}

@media (max-width: 680px) {
  .edit-dialog:not(.marketing-dialog) .form-grid,
  .edit-dialog:not(.marketing-dialog) .compact-form {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    column-gap: 8px;
    row-gap: 8px;
  }

  .edit-dialog:not(.marketing-dialog) .form-grid .half,
  .edit-dialog:not(.marketing-dialog) .form-grid .third,
  .edit-dialog:not(.marketing-dialog) .form-grid .quarter {
    grid-column: span 1;
  }

  .edit-dialog:not(.marketing-dialog) .form-grid .two-thirds,
  .edit-dialog:not(.marketing-dialog) .form-grid > .full,
  .edit-dialog:not(.marketing-dialog) .form-grid > label:not(.half):not(.third):not(.quarter) {
    grid-column: 1 / -1;
  }

  .edit-dialog:not(.marketing-dialog) :where(
    input:not([type="checkbox"]):not([type="radio"]),
    select,
    textarea,
    .course-location-trigger
  ) {
    min-height: 34px;
    padding: 6px 7px;
    font-size: 13px;
    letter-spacing: 0;
  }

  .edit-dialog:not(.marketing-dialog) textarea {
    min-height: 52px;
  }

  .edit-dialog:not(.marketing-dialog) :where(
    input[type="date"],
    input[type="time"],
    input[type="datetime-local"],
    input[type="month"]
  ) {
    display: block;
    width: 100%;
    min-width: 0;
    max-width: 100%;
    min-inline-size: 0;
    max-inline-size: 100%;
    padding-inline: 7px;
    overflow: hidden;
  }

  .edit-dialog:not(.marketing-dialog) :where(
    input[type="date"],
    input[type="time"],
    input[type="datetime-local"],
    input[type="month"]
  )::-webkit-date-and-time-value {
    width: 100%;
    min-width: 0;
    margin: 0;
    text-align: left;
  }

  .edit-dialog:not(.marketing-dialog) :where(
    input[type="date"],
    input[type="time"],
    input[type="datetime-local"],
    input[type="month"]
  )::-webkit-datetime-edit {
    min-width: 0;
    padding: 0;
  }

  .edit-dialog:not(.marketing-dialog) :where(
    input[type="date"],
    input[type="time"],
    input[type="datetime-local"],
    input[type="month"]
  )::-webkit-calendar-picker-indicator {
    flex: 0 0 14px;
    width: 14px;
    height: 14px;
    margin: 0 0 0 3px;
    padding: 0;
  }

  .edit-dialog:not(.marketing-dialog) .dialog-footer > *,
  .edit-dialog:not(.marketing-dialog) > form > .dialog-footer > * {
    min-width: 0;
    max-width: 100%;
  }

  #view :where(form, fieldset, label, .toolbar, .date-range-fields),
  #view :where(form, fieldset, .toolbar, .date-range-fields) > * {
    min-width: 0;
    max-width: 100%;
  }

  #view :where(
    input:not([type="checkbox"]):not([type="radio"]),
    select,
    textarea
  ) {
    min-width: 0;
    max-width: 100%;
    min-inline-size: 0;
    max-inline-size: 100%;
  }

  #view .date-range-fields {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    width: 100%;
  }

  /* Result panels must let controls define compact tracks instead of letting
     native control min-content widths enlarge the whole mobile workspace. */
  #view :where(.section, .filter-result-panel, .panel, .table-panel),
  #view :where(.section, .filter-result-panel, .panel) > * {
    min-width: 0;
    max-width: 100%;
  }

  #view .filter-result-panel {
    width: 100%;
    grid-template-columns: minmax(0, 1fr);
  }

  #view .filter-result-panel > :where(.section-header, .toolbar, .panel, .table-panel) {
    width: 100%;
    min-width: 0;
    max-width: 100%;
  }

  /* A date range is one logical group on desktop. On a narrow screen its
     fields join the parent two-column toolbar so no nested grid can overflow. */
  #view .toolbar > .date-range-fields {
    display: contents;
  }

  #view .toolbar > label {
    width: 100%;
  }

  #course-session-section > .toolbar {
    width: 100%;
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  #course-session-section > .toolbar :where(label, input, select, button) {
    min-width: 0;
    max-width: 100%;
  }

  #course-session-section > .toolbar :where(input, select, button) {
    padding-right: 8px;
    padding-left: 8px;
    font-size: 13px;
  }

  #course-calendar-section > .section-header {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: start;
  }

  #course-calendar-section > .section-header > :first-child,
  #course-calendar-section .course-calendar-heading-actions,
  #course-calendar-section .course-calendar-view-toggle {
    min-width: 0;
    max-width: 100%;
  }

  #course-calendar-section .course-calendar-heading-actions {
    justify-self: end;
    flex-wrap: nowrap;
    gap: 6px;
  }

  #course-calendar-section .course-calendar-view-toggle button {
    width: 40px;
    min-width: 40px;
    height: 34px;
    padding: 0;
  }

  #course-calendar-section .section-collapse-toggle {
    width: 34px;
    min-width: 34px;
    height: 34px;
    min-height: 34px;
  }
}