/*
 * NephScola central UI system
 * Geometry, typography and responsive behaviour only. Colour values remain
 * owned by the active appearance theme through the existing CSS variables.
 */
:root {
  --ns-layer-modal: 10000;
  --ns-layer-confirmation: 11000;
  --ns-layer-feedback: 12000;
}

/* Shared action menu: stable icon track, no wrapping, viewport-bounded. */
details[data-ns-action-menu]{position:relative}
/* Shared semantic columns: money is complete; references single-line; prose capped at two lines. */
:is(#appShell,.ns-ui-overlay) table.ns-ui-table td[data-ns-column="amount"],
:is(#appShell,.ns-ui-overlay) table.ns-ui-table td[data-ns-column="date"]{white-space:nowrap;overflow:visible;text-overflow:clip;overflow-wrap:normal;word-break:normal;width:auto;max-width:none}
:is(#appShell,.ns-ui-overlay) table.ns-ui-table td[data-ns-column="reference"] .ns-table-value{display:block;width:170px;max-width:170px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
:is(#appShell,.ns-ui-overlay) table.ns-ui-table td[data-ns-column="text"] .ns-table-value{display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;overflow:hidden;min-width:110px;max-width:250px;line-height:18px}
:is(#appShell,.ns-ui-overlay) table[data-ns-sticky-actions] :is(th,td):last-child{position:sticky;right:0;background:var(--color-surface);z-index:2;box-shadow:-1px 0 0 var(--color-border);text-align:center;min-width:64px}
:is(#appShell,.ns-ui-overlay) table[data-ns-sticky-actions] th:last-child{z-index:3;background:var(--color-surface-muted,var(--color-surface))}
:is(#appShell,.ns-ui-overlay) table[data-ns-sticky-actions] td{height:44px;padding-block:4px}
table[data-ns-sticky-actions] details summary{list-style:none;display:inline-flex}
table[data-ns-sticky-actions] tr:has(details[open]) td:last-child{z-index:4}
.ns-chart{min-width:0}
/* Shared semantic badges, with theme-owned colors in both appearance modes. */
:is(#appShell,.ns-ui-overlay) .ns-semantic-badge{display:inline-flex;align-items:center;padding:3px 8px;border-radius:999px;font-size:var(--ns-font-small,12px);line-height:1.25;white-space:nowrap;background:var(--ns-badge-bg);color:var(--ns-badge-text)}
.ns-semantic-badge[data-tone=success]{--ns-badge-bg:var(--color-success-soft);--ns-badge-text:var(--color-success-text)}
.ns-semantic-badge[data-tone=danger]{--ns-badge-bg:var(--color-danger-soft);--ns-badge-text:var(--color-danger-text)}
.ns-semantic-badge[data-tone=warning]{--ns-badge-bg:var(--color-warning-soft);--ns-badge-text:var(--color-warning-text)}
.ns-semantic-badge[data-tone=info]{--ns-badge-bg:var(--color-info-soft);--ns-badge-text:var(--color-info-text)}
.ns-semantic-badge[data-tone=accent]{--ns-badge-bg:color-mix(in srgb,var(--chart-2) 15%,var(--color-surface));--ns-badge-text:var(--color-text-primary)}
.ns-table-full-value{position:fixed;margin:0;max-width:320px;padding:8px;border:1px solid var(--color-border);border-radius:6px;background:var(--color-surface);color:var(--color-text-primary);font:inherit;overflow-wrap:anywhere}
.ns-chart h2 small{font-weight:normal;font-size:var(--ns-font-small)}
.ns-chart[data-chart-type="vertical"]{height:292px;box-sizing:border-box;display:grid;grid-template-rows:auto minmax(0,1fr) auto;gap:6px}
.ns-chart[data-chart-type="vertical"]>h2{margin:0}
.ns-chart-svg{display:block;width:100%;height:100%;min-height:0}
.ns-chart svg text{fill:var(--color-text-primary);stroke:none;stroke-width:0;font-size:12px;font-family:inherit}
.ns-chart svg rect{stroke:none}
.ns-chart .ns-chart-svg text{font-size:13px}
.ns-chart-bar-legend{display:flex;flex-wrap:wrap;justify-content:center;gap:8px 12px;font-size:11px;line-height:1.4}
.ns-chart-bar-legend>span{display:flex;align-items:center;gap:7px;max-width:100%}
.ns-chart-bar-legend i{display:block;flex:0 0 11px;width:11px;height:11px;border-radius:3px}
.ns-chart-grid{stroke:var(--color-border)}
.ns-chart-horizontal{display:grid;gap:12px;padding-block:12px}
.ns-chart-horizontal>div{display:grid;grid-template-columns:minmax(130px,1fr) minmax(80px,1.5fr) auto;gap:12px;align-items:center}
.ns-chart-horizontal span{font-size:13px;text-align:right}
.ns-chart-horizontal b{display:block;height:16px;border-radius:4px;background:var(--color-surface-muted,var(--color-border));overflow:hidden}
.ns-chart-horizontal i{display:block;height:100%;border-radius:4px}
.ns-chart-horizontal strong{white-space:nowrap;font-size:13px;font-weight:500}
.ns-chart-doughnut{display:grid;grid-template-columns:minmax(150px,240px) 1fr;gap:20px;align-items:center}
.ns-chart-doughnut svg{width:100%;max-height:240px}
.ns-chart-doughnut p{display:flex;align-items:center;gap:8px;font-size:11px}
.ns-chart-doughnut p i{width:13px;height:13px;border-radius:50%;flex-shrink:0}
.ns-chart-doughnut p strong{margin-left:auto;white-space:nowrap}
.ns-chart svg .ns-chart-percent{fill:var(--color-surface);font-weight:700}
@media(max-width:600px){.ns-chart-doughnut{grid-template-columns:1fr}.ns-chart-horizontal>div{grid-template-columns:1fr 1fr auto}}
@media print{table[data-ns-sticky-actions] :is(th,td):last-child{position:static;box-shadow:none}.ns-table-value{display:block!important;max-width:none!important;width:auto!important;overflow:visible!important;-webkit-line-clamp:unset!important}}
details[data-ns-action-menu]>div{position:absolute;right:0;top:100%;z-index:1000}
details:is(.saf-actions-menu,.student-action-menu,.receipt-action-menu,[data-ns-action-menu])>div{
 width:260px;min-width:240px;max-width:calc(100vw - 32px);box-sizing:border-box;
 padding:6px;border:1px solid var(--color-border);background:var(--color-surface,#fff);
 box-shadow:0 8px 24px color-mix(in srgb,var(--color-text) 12%,transparent);
}
details:is(.saf-actions-menu,.student-action-menu,.receipt-action-menu,[data-ns-action-menu])>div>button{
 display:flex;align-items:center;gap:10px;width:100%;min-height:34px;padding:6px 10px;white-space:nowrap;text-align:left;
}
details:is(.saf-actions-menu,.student-action-menu,.receipt-action-menu,[data-ns-action-menu])>div>button>svg{flex:0 0 18px;width:18px}


#appShell,
.ns-ui-overlay {
  --ns-control-height: 34px;
  --ns-control-font-size: 12.5px;
  --ns-control-font-weight: 600;
  --ns-control-padding-block: 5px;
  --ns-control-padding-inline: 7px;
  --ns-table-head-height: 31.5px;
  --ns-table-row-height: 33.5px;
  --ns-table-head-font-size: 12px;
  --ns-table-cell-font-size: 12.5px;
  --ns-table-cell-padding-block: 6px;
  --ns-table-cell-padding-inline: 9px;
  --ns-table-status-font-size: 11px;
  --ns-table-action-width: 70px;
  --ns-table-column-divider: color-mix(in srgb, var(--color-border) 10%, transparent);
  --ns-card-title-font-size: 16px;
  --ns-card-title-font-weight: 600;
  --ns-card-description-font-size: 12px;
  --ns-card-description-font-weight: 400;
  --ns-card-label-font-size: 12.5px;
  --ns-card-label-font-weight: 500;
  --ns-card-value-font-size: 12.5px;
  --ns-card-value-font-weight: 400;
  --ns-card-important-font-size: 13px;
  --ns-card-important-font-weight: 600;
  --ns-card-meta-font-size: 11.5px;
  --ns-card-meta-font-weight: 400;
  --ns-card-action-font-size: 12px;
  --ns-card-action-font-weight: 600;
  --ns-card-status-font-size: 11px;
  --ns-card-status-font-weight: 600;
  --ns-tab-header-height: 36.5px;
}

/* Some application dialogs are mounted directly under <body>. The runtime
 * marks their overlay so they receive the same geometry without affecting
 * the login screen, top bar, sidebar or public pages. */
.ns-ui-overlay .ns-ui-button {
  min-height: var(--ns-control-height);
  height: var(--ns-control-height);
  box-sizing: border-box;
  padding: var(--ns-control-padding-block) var(--ns-control-padding-inline);
  font-size: var(--ns-control-font-size);
  font-weight: var(--ns-control-font-weight);
  line-height: 1.1;
}

.ns-ui-overlay .ns-ui-icon-button {
  width: var(--ns-control-height);
  min-width: var(--ns-control-height);
  height: var(--ns-control-height);
  min-height: var(--ns-control-height);
  box-sizing: border-box;
  padding: 5px;
}

.ns-ui-overlay .ns-ui-control {
  width: 100%;
  min-height: var(--ns-control-height);
  height: var(--ns-control-height);
  box-sizing: border-box;
  padding: var(--ns-control-padding-block) var(--ns-control-padding-inline);
  font-size: var(--ns-control-font-size);
  font-weight: var(--ns-control-font-weight);
  line-height: 1.1;
}

.ns-ui-overlay select.ns-ui-control {
  padding-inline-end: 28px;
}

.ns-ui-overlay textarea.ns-ui-textarea,
.ns-ui-overlay [contenteditable="true"].ns-ui-textarea {
  min-height: 74px;
  height: auto;
  box-sizing: border-box;
  padding: var(--ns-control-padding-block) var(--ns-control-padding-inline);
  font-size: var(--ns-control-font-size);
  font-weight: var(--ns-control-font-weight);
  line-height: 1.35;
}

/* Shared buttons --------------------------------------------------------- */
/* Opt-in action tiles share theme semantics, including dark-mode contrast. */
#appShell button[data-ns-action-tone]{background:var(--ns-action-bg)!important;color:var(--ns-action-text,var(--color-text-primary))!important;border-color:transparent!important}
#appShell button[data-ns-action-tone=primary]{--ns-action-bg:var(--color-primary);--ns-action-text:var(--button-primary-text)}
#appShell button[data-ns-action-tone=success]{--ns-action-bg:color-mix(in srgb,var(--color-success) 14%,var(--color-surface))}
#appShell button[data-ns-action-tone=accent]{--ns-action-bg:color-mix(in srgb,var(--chart-2) 14%,var(--color-surface))}
#appShell button[data-ns-action-tone=warning]{--ns-action-bg:color-mix(in srgb,var(--color-warning) 16%,var(--color-surface))}
#appShell button[data-ns-action-tone] :is(svg,small){color:inherit!important}
#appShell .ns-ui-button {
  min-height: var(--ns-control-height);
  height: var(--ns-control-height);
  box-sizing: border-box;
  padding: var(--ns-control-padding-block) var(--ns-control-padding-inline);
  font-size: var(--ns-control-font-size);
  font-weight: var(--ns-control-font-weight);
  line-height: 1.1;
}

#appShell .ns-ui-icon-button {
  width: var(--ns-control-height);
  min-width: var(--ns-control-height);
  height: var(--ns-control-height);
  min-height: var(--ns-control-height);
  box-sizing: border-box;
  padding: 5px;
}

#appShell .ns-ui-button svg,
#appShell .ns-ui-icon-button svg {
  flex: 0 0 auto;
}

/* Shared fields ---------------------------------------------------------- */
#appShell .ns-ui-control {
  width: 100%;
  min-height: var(--ns-control-height);
  height: var(--ns-control-height);
  box-sizing: border-box;
  padding: var(--ns-control-padding-block) var(--ns-control-padding-inline);
  font-size: var(--ns-control-font-size);
  font-weight: var(--ns-control-font-weight);
  line-height: 1.1;
}

#appShell select.ns-ui-control {
  padding-inline-end: 28px;
}

#appShell textarea.ns-ui-textarea,
#appShell [contenteditable="true"].ns-ui-textarea {
  min-height: 74px;
  height: auto;
  box-sizing: border-box;
  padding: var(--ns-control-padding-block) var(--ns-control-padding-inline);
  font-size: var(--ns-control-font-size);
  font-weight: var(--ns-control-font-weight);
  line-height: 1.35;
}

/* Shared cards ----------------------------------------------------------- */
#appShell .ns-card__title,
.ns-ui-overlay .ns-card__title {
  font-size: var(--ns-card-title-font-size) !important;
  font-weight: var(--ns-card-title-font-weight) !important;
  line-height: 1.25;
}

#appShell .ns-card__description,
.ns-ui-overlay .ns-card__description {
  font-size: var(--ns-card-description-font-size) !important;
  font-weight: var(--ns-card-description-font-weight) !important;
  line-height: 1.45;
}

#appShell .ns-card__label,
.ns-ui-overlay .ns-card__label {
  font-size: var(--ns-card-label-font-size) !important;
  font-weight: var(--ns-card-label-font-weight) !important;
  line-height: 1.25;
}

#appShell .ns-card__value,
.ns-ui-overlay .ns-card__value {
  font-size: var(--ns-card-value-font-size) !important;
  font-weight: var(--ns-card-value-font-weight) !important;
  line-height: 1.25;
}

#appShell .ns-card__important,
.ns-ui-overlay .ns-card__important {
  font-size: var(--ns-card-important-font-size) !important;
  font-weight: var(--ns-card-important-font-weight) !important;
  line-height: 1.2;
}

#appShell .ns-card__meta,
.ns-ui-overlay .ns-card__meta {
  font-size: var(--ns-card-meta-font-size) !important;
  font-weight: var(--ns-card-meta-font-weight) !important;
  line-height: 1.35;
}

#appShell .ns-card__action,
.ns-ui-overlay .ns-card__action {
  font-size: var(--ns-card-action-font-size) !important;
  font-weight: var(--ns-card-action-font-weight) !important;
  line-height: 1.2;
}

#appShell .ns-card__status,
.ns-ui-overlay .ns-card__status {
  font-size: var(--ns-card-status-font-size) !important;
  font-weight: var(--ns-card-status-font-weight) !important;
  line-height: 1.1;
}

#appShell .ns-card :is(strong, b):not(.ns-card__label):not(.ns-card__value),
.ns-ui-overlay .ns-card :is(strong, b):not(.ns-card__label):not(.ns-card__value) {
  font-weight: 600;
}

/* Shared horizontal tab headers ---------------------------------------- */
#appShell .ns-ui-tab,
.ns-ui-overlay .ns-ui-tab {
  min-height: var(--ns-tab-header-height) !important;
  height: var(--ns-tab-header-height) !important;
  box-sizing: border-box;
  line-height: 1.1;
}

/* Shared tables ---------------------------------------------------------- */
/* Opt-in connected workspace, using the same tab/control and theme tokens. */
#appShell .ns-tab-workspace { min-width: 0; }
#appShell .ns-connected-tabs {
  display: flex; gap: 0; margin: 0; padding: 0; overflow-x: auto;
  border: 1px solid var(--color-border); border-bottom: 0;
  border-radius: var(--radius-card) var(--radius-card) 0 0;
  scrollbar-width: thin; scrollbar-color: var(--color-border-strong) transparent;
}
#appShell .ns-connected-tabs > [role="tab"] {
  flex: 0 0 auto; display: inline-flex; align-items: center; justify-content: center;
  gap: 6px; padding: var(--ns-control-padding-block) var(--ns-control-padding-inline);
  border: 0; border-right: 1px solid var(--color-divider);
  border-bottom: 1px solid var(--color-border); border-radius: 0; box-shadow: none;
  font-size: var(--ns-control-font-size); font-weight: var(--ns-control-font-weight);
  white-space: nowrap; cursor: pointer;
}
#appShell .ns-connected-tabs > [role="tab"][aria-selected="true"] {
  color: var(--button-primary-text) !important; background: var(--color-primary) !important;
  border-bottom-color: var(--color-surface) !important;
}
#appShell .ns-connected-tabs > [role="tab"]::after { display: none; }
#appShell .ns-connected-tabs > [role="tab"] svg {
  width: 18px; height: 18px; padding: 0; flex: 0 0 auto;
  color: currentColor !important; background: transparent !important;
}
#appShell .ns-tab-panel {
  margin: 0; padding: var(--ui-card-padding); min-width: 0;
  background: var(--color-surface); border: 1px solid var(--color-border); border-top: 0;
  border-radius: 0 0 var(--radius-card) var(--radius-card);
}

#appShell .ns-ui-table-wrap {
  min-width: 0;
}

:is(#appShell, .ns-ui-overlay) table.ns-ui-table {
  width: 100%;
  border-collapse: collapse;
  color: var(--color-text);
  font-size: var(--ns-table-cell-font-size);
}

:is(#appShell, .ns-ui-overlay) table.ns-ui-table > thead > tr {
  height: var(--ns-table-head-height);
}

:is(#appShell, .ns-ui-overlay) table.ns-ui-table > thead > tr > th {
  height: var(--ns-table-head-height);
  box-sizing: border-box;
  padding: var(--ns-table-cell-padding-block) var(--ns-table-cell-padding-inline);
  border-right: 1px solid var(--ns-table-column-divider);
  border-right-color: var(--ns-table-column-divider) !important;
  border-bottom: 1px solid var(--color-border);
  font-size: var(--ns-table-head-font-size);
  font-weight: 600;
  line-height: 1.1;
  vertical-align: middle;
}

:is(#appShell, .ns-ui-overlay) table.ns-ui-table > thead > tr > th:last-child {
  border-right: 0;
}

:is(#appShell, .ns-ui-overlay) table.ns-ui-table > thead > tr > th > :is(button, .sortable-header, .table-static-header) {
  min-height: 0;
  height: 100%;
  box-sizing: border-box;
  padding: 0;
  font: inherit;
  line-height: inherit;
}

:is(#appShell, .ns-ui-overlay) table.ns-ui-table > tbody > tr {
  min-height: var(--ns-table-row-height);
  height: var(--ns-table-row-height);
}

:is(#appShell, .ns-ui-overlay) table.ns-ui-table > tbody > tr > td {
  height: var(--ns-table-row-height);
  box-sizing: border-box;
  padding: var(--ns-table-cell-padding-block) var(--ns-table-cell-padding-inline);
  border-right: 1px solid var(--ns-table-column-divider);
  border-right-color: var(--ns-table-column-divider) !important;
  border-bottom: 1px solid var(--color-border);
  font-size: var(--ns-table-cell-font-size);
  line-height: 1.15;
  vertical-align: middle;
}

:is(#appShell, .ns-ui-overlay) table.ns-ui-table > tbody > tr > td:last-child {
  border-right: 0;
}

:is(#appShell, .ns-ui-overlay) table.ns-ui-table :is(
  .status-badge,
  .badge-pill,
  .status-chip,
  .ns-status,
  [class*="status-"]
):not(td):not(th) {
  min-height: 20px;
  box-sizing: border-box;
  padding-block: 2px;
  font-size: var(--ns-table-status-font-size);
  line-height: 1.1;
}

:is(#appShell, .ns-ui-overlay) table.ns-ui-table > :is(thead, tbody) > tr > .ns-ui-table-actions {
  width: var(--ns-table-action-width);
  min-width: var(--ns-table-action-width);
  max-width: var(--ns-table-action-width);
  text-align: center;
}

@media (min-width: 681px) {
  :is(#appShell, .ns-ui-overlay) table.ns-ui-table > :is(thead, tbody) > tr > .ns-ui-table-actions {
    position: sticky;
    right: 0;
    z-index: 2;
    background: inherit;
    box-shadow: -7px 0 10px -10px var(--color-text);
  }

  :is(#appShell, .ns-ui-overlay) table.ns-ui-table > tbody > tr > .ns-ui-table-actions {
    padding-block: 1px;
  }

  :is(#appShell, .ns-ui-overlay) table.ns-ui-table > thead > tr > .ns-ui-table-actions {
    z-index: 5;
  }

  :is(#appShell, .ns-ui-overlay) table.ns-ui-table .ns-ui-row-menu > summary,
  :is(#appShell, .ns-ui-overlay) table.ns-ui-table .ns-ui-row-action-trigger {
    width: 30px;
    min-width: 30px;
    height: 30px;
    min-height: 30px;
    box-sizing: border-box;
    padding: 4px;
  }
}

/* Shared table chrome ---------------------------------------------------- */
#appShell :is(.data-table-footer, .table-pagination, [class*="table-footer"], [class*="pagination"]) :is(button, select),
#appShell :is(.table-toolbar, [class*="table-toolbar"], [class*="filter-row"]) :is(button, input:not([type]), input[type="text"], input[type="search"], input[type="date"], select) {
  min-height: var(--ns-control-height);
  height: var(--ns-control-height);
  box-sizing: border-box;
  padding: var(--ns-control-padding-block) var(--ns-control-padding-inline);
  font-size: var(--ns-control-font-size);
  font-weight: var(--ns-control-font-weight);
}

#appShell .ns-ui-table-empty,
#appShell .ns-ui-table-loading,
#appShell .ns-ui-table-error {
  min-height: 180px;
  display: grid;
  place-items: center;
  align-content: center;
  gap: 8px;
  padding: 24px;
  text-align: center;
}

/* Mobile card tables ----------------------------------------------------- */
@media (max-width: 680px) {
  :is(#appShell, .ns-ui-overlay) table.ns-ui-table--cards,
  :is(#appShell, .ns-ui-overlay) table.ns-ui-table--cards > tbody {
    display: block;
    width: 100%;
    min-width: 0;
  }

  :is(#appShell, .ns-ui-overlay) table.ns-ui-table--cards > thead {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    clip-path: inset(50%);
    white-space: nowrap;
  }

  :is(#appShell, .ns-ui-overlay) table.ns-ui-table--cards > tbody {
    display: grid;
    gap: 9px;
  }

  :is(#appShell, .ns-ui-overlay) table.ns-ui-table--cards > tbody > tr {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    height: auto;
    min-height: 0;
    gap: 0 14px;
    overflow: visible;
  }

  :is(#appShell, .ns-ui-overlay) table.ns-ui-table--cards > tbody > tr > td {
    display: grid;
    width: auto !important;
    min-width: 0;
    min-height: 40px;
    height: auto;
    align-content: center;
    gap: 3px;
    padding: 7px 0;
    border-right: 0;
    font-size: 14px;
    line-height: 1.25;
    white-space: normal;
    overflow-wrap: anywhere;
  }

  :is(#appShell, .ns-ui-overlay) table.ns-ui-table--cards > tbody > tr > td::before {
    content: attr(data-ns-label);
    display: block;
    color: var(--color-muted);
    font-size: 11.5px;
    font-weight: 600;
    line-height: 1.1;
  }

  :is(#appShell, .ns-ui-overlay) table.ns-ui-table--cards > tbody > tr > td[data-ns-priority="primary"] {
    grid-column: 1 / -1;
    min-height: 40px;
    font-size: 16px;
    font-weight: 600;
  }

  :is(#appShell, .ns-ui-overlay) table.ns-ui-table--cards > tbody > tr > td[data-ns-priority="primary"] :is(a, button, strong) {
    font-size: 16px;
    line-height: 1.25;
  }

  :is(#appShell, .ns-ui-overlay) table.ns-ui-table--cards > tbody > tr > td.ns-ui-table-actions {
    position: static;
    grid-column: 1 / -1;
    width: auto;
    min-width: 0;
    max-width: none;
    min-height: 40px;
    padding-bottom: 0;
    border-bottom: 0;
    box-shadow: none;
    overflow: visible;
  }

  :is(#appShell, .ns-ui-overlay) table.ns-ui-table--cards > tbody > tr > td.ns-ui-table-actions::before {
    display: none;
  }

  :is(#appShell, .ns-ui-overlay) table.ns-ui-table--cards .ns-ui-row-menu,
  :is(#appShell, .ns-ui-overlay) table.ns-ui-table--cards .ns-ui-row-menu > summary,
  :is(#appShell, .ns-ui-overlay) table.ns-ui-table--cards .ns-ui-row-action-trigger {
    width: 100%;
  }

  :is(#appShell, .ns-ui-overlay) table.ns-ui-table--cards .ns-ui-row-menu > summary,
  :is(#appShell, .ns-ui-overlay) table.ns-ui-table--cards .ns-ui-row-action-trigger {
    min-height: 34px;
    height: 34px;
    display: flex;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
    padding: 5px 7px;
    color: var(--color-primary);
    border-color: color-mix(in srgb, var(--color-primary) 28%, var(--color-border));
    background: var(--color-primary-soft);
    font-size: 12.5px;
    font-weight: 600;
  }

  :is(#appShell, .ns-ui-overlay) table.ns-ui-table--cards .ns-ui-row-menu > summary::before {
    content: "Actions";
    margin-inline-end: 7px;
  }

  :is(#appShell, .ns-ui-overlay) table.ns-ui-table--cards .ns-ui-row-menu > :not(summary) {
    position: static;
    width: 100%;
    margin-top: 6px;
    box-sizing: border-box;
    color: var(--color-sidebar-text);
    border-color: color-mix(in srgb, var(--color-sidebar-text) 20%, transparent);
    background: var(--color-sidebar-bg);
  }

  :is(#appShell, .ns-ui-overlay) table.ns-ui-table--cards .ns-ui-row-menu > :not(summary) :is(button, a) {
    width: 100%;
    min-height: 34px;
    display: flex;
    align-items: center;
    box-sizing: border-box;
    padding: 5px 7px;
    color: var(--color-sidebar-text);
    border-bottom: 1px solid color-mix(in srgb, var(--color-sidebar-text) 16%, transparent);
    background: transparent;
    font-size: 12.5px;
    font-weight: 600;
  }

  :is(#appShell, .ns-ui-overlay) table.ns-ui-table--cards .ns-ui-row-menu > :not(summary) :is(button, a):last-child {
    border-bottom: 0;
  }

  :is(#appShell, .ns-ui-overlay) table.ns-ui-table--cards .ns-ui-row-menu > :not(summary) :is(button, a):hover,
  :is(#appShell, .ns-ui-overlay) table.ns-ui-table--cards .ns-ui-row-menu > :not(summary) :is(button, a):focus-visible {
    color: var(--color-sidebar-text);
    background: color-mix(in srgb, var(--color-sidebar-text) 11%, transparent);
  }

  :is(#appShell, .ns-ui-overlay) table.ns-ui-table--scroll {
    min-width: max-content;
  }
}

/* Accessibility: visual density stays compact while touch targets remain usable. */
@media (pointer: coarse) {
  #appShell .ns-ui-button,
  #appShell .ns-ui-icon-button,
  #appShell .ns-ui-row-action-trigger,
  #appShell .ns-ui-row-menu > summary {
    position: relative;
  }

  #appShell .ns-ui-button::after,
  #appShell .ns-ui-icon-button::after,
  #appShell .ns-ui-row-action-trigger::after,
  #appShell .ns-ui-row-menu > summary::after {
    content: "";
    position: absolute;
    inset: -5px;
  }
}

/* Shared confirmation dialogs ------------------------------------------- */
#toast.toast { z-index: var(--ns-layer-feedback) !important; }
.ns-confirm-backdrop { position: fixed; inset: 0; z-index: var(--ns-layer-confirmation); display: grid; place-items: center; box-sizing: border-box; padding: 20px; color: var(--color-text-primary); background: var(--modal-overlay); backdrop-filter: blur(2px); isolation: isolate; }
.ns-confirm-dialog { display: grid; justify-items: center; gap: 10px; width: min(430px, calc(100vw - 32px)); box-sizing: border-box; padding: 22px; color: var(--color-text-primary); border: 1px solid var(--color-border-strong); border-radius: 14px; background-color: var(--color-surface-raised); box-shadow: 0 22px 58px color-mix(in srgb, var(--color-structural-dark) 28%, transparent); text-align: center; }
.ns-confirm-dialog :is(h1, h2, h3, p) { margin: 0; }
.ns-confirm-dialog :is(h1, h2, h3) { color: var(--color-text-primary); }
.ns-confirm-dialog p { color: var(--color-text-secondary); font-size: 12px; line-height: 1.5; }
.ns-confirm-dialog__icon { display: grid; place-items: center; color: var(--color-warning); }
.ns-confirm-dialog__actions { display: flex; justify-content: center; gap: 8px; margin-top: 6px; }
.ns-confirm-dialog__actions > button { display: inline-flex; align-items: center; justify-content: center; gap: 7px; }
.ns-confirm-dialog__actions > .danger-action { color: var(--color-danger-text); border-color: color-mix(in srgb, var(--color-danger) 38%, var(--color-border)); background: var(--color-danger-soft); }
.ns-confirm-dialog__actions > .danger-action:hover, .ns-confirm-dialog__actions > .danger-action:focus-visible { color: var(--color-text-on-primary); border-color: var(--color-danger); background: var(--color-danger); }
@media (max-width: 520px) { .ns-confirm-backdrop { align-items: end; padding: 12px; }.ns-confirm-dialog { width: 100%; padding: 18px 14px; }.ns-confirm-dialog__actions { display: grid; grid-template-columns: 1fr; width: 100%; }.ns-confirm-dialog__actions > button { width: 100%; } }

/* The application print system owns its own measurements. */
@media print {
  :is(#appShell, .ns-ui-overlay) table.ns-ui-table,
  :is(#appShell, .ns-ui-overlay) table.ns-ui-table > :is(thead, tbody),
  :is(#appShell, .ns-ui-overlay) table.ns-ui-table > :is(thead, tbody) > tr {
    display: table;
  }

  :is(#appShell, .ns-ui-overlay) table.ns-ui-table > thead {
    display: table-header-group;
    position: static;
    width: auto;
    height: auto;
    clip: auto;
    clip-path: none;
  }

  :is(#appShell, .ns-ui-overlay) table.ns-ui-table > tbody {
    display: table-row-group;
  }

  :is(#appShell, .ns-ui-overlay) table.ns-ui-table > :is(thead, tbody) > tr {
    display: table-row;
    height: auto;
  }

  :is(#appShell, .ns-ui-overlay) table.ns-ui-table > :is(thead, tbody) > tr > :is(th, td) {
    position: static;
    display: table-cell;
    width: auto;
    min-width: 0;
    max-width: none;
    height: auto;
    box-shadow: none;
  }

  :is(#appShell, .ns-ui-overlay) table.ns-ui-table td::before {
    display: none;
  }
}
/* Overlay inputs must outrank the legacy appearance input:not(...) selector. */
.ns-ui-overlay input.ns-ui-control:not([type="checkbox"]):not([type="radio"]):not([type="range"]),
.ns-ui-overlay select.ns-ui-control { min-height: var(--ns-control-height); height: var(--ns-control-height); }

/* Scroll-mode tables retain opaque sticky actions on narrow screens too. */
:is(#appShell, .ns-ui-overlay) table.ns-ui-table--scroll > :is(thead, tbody) > tr > .ns-ui-table-actions {
  position: sticky; right: 0; z-index: 2;
  box-shadow: -7px 0 10px -10px var(--color-text);
}
:is(#appShell, .ns-ui-overlay) table.ns-ui-table--scroll > thead > tr > .ns-ui-table-actions { z-index: 5; }
:is(#appShell, .ns-ui-overlay) table.ns-ui-table > tbody > tr:nth-child(odd) > .ns-ui-table-actions { background: var(--table-row-odd-bg) !important; }
:is(#appShell, .ns-ui-overlay) table.ns-ui-table > tbody > tr:nth-child(even) > .ns-ui-table-actions { background: var(--table-row-even-bg) !important; }
:is(#appShell, .ns-ui-overlay) table.ns-ui-table > tbody > tr:hover > .ns-ui-table-actions { background: var(--table-row-hover-bg) !important; }
:is(#appShell, .ns-ui-overlay) table.ns-ui-table > tbody > tr:is(.selected, [aria-selected="true"]) > .ns-ui-table-actions { background: var(--table-row-selected-bg) !important; }
:is(#appShell, .ns-ui-overlay) table.ns-ui-table > thead > tr > .ns-ui-table-actions { background: var(--table-header-bg) !important; }
/* Page-level quick actions must not compete with a modal in the body portal. */
body:has(> [data-ns-modal-anchor], > #academicImportDialog) .global-quick-actions { visibility: hidden; pointer-events: none; }
@media (min-width: 681px) { body:has(.academic-structure-workspace:not(.asw-add-route)) .global-quick-actions { display: none; } }


/* Shared section headers and compact read-only values. */
#appShell .ns-section-header {
  display:flex; align-items:center; gap:var(--ns-control-padding-inline);
  padding:var(--ns-control-padding-inline); margin-bottom:var(--ns-control-padding-inline);
  min-height:calc(var(--ns-control-height) + 2 * var(--ns-control-padding-inline));
}
#appShell .ns-section-header__copy { min-width:0; flex:1; }
#appShell .ns-section-header h2, #appShell .ns-section-header h3 {
  margin:0; font-size:var(--ns-card-title-font-size); font-weight:var(--ns-card-title-font-weight); color:var(--color-text-primary);
}
#appShell .ns-section-header p { margin:3px 0 0; font-size:var(--ns-card-description-font-size); color:var(--color-text-secondary); }
#appShell .ns-section-header__icon {
  display:grid; place-items:center; flex:none; width:var(--ns-control-height); height:var(--ns-control-height);
  border-radius:var(--radius-control,8px); background:var(--color-primary); color:var(--color-on-primary,#fff);
}
#appShell .ns-section-header__icon svg { width:20px; height:20px; color:inherit; }
#appShell .ns-section-header__actions { display:flex; gap:var(--ns-control-padding-inline); margin-left:auto; flex:none; }
#appShell .ns-card > .ns-section-header { background:var(--color-surface-subtle); border-bottom:1px solid var(--color-divider); }
#appShell .ns-value-chip { display:inline-flex; align-items:center; width:fit-content; max-width:100%; min-height:0; padding:2px 6px; border-radius:var(--radius-pill,35px); background:var(--color-surface-subtle); color:var(--color-text-primary); font-weight:var(--ns-card-important-font-weight); overflow-wrap:anywhere; }
#appShell .ns-metadata-strip { display:flex; flex-wrap:wrap; gap:var(--ns-control-padding-inline); margin:var(--ns-control-padding-inline); padding:var(--ns-control-padding-inline); background:var(--color-surface-subtle); color:var(--color-text-secondary); font-size:var(--ns-card-meta-font-size); }
#appShell .ns-metadata-strip span { display:inline-flex; align-items:center; gap:var(--ns-control-padding-block); }
@media (max-width:600px) { #appShell .ns-section-header { flex-wrap:wrap; } #appShell .ns-section-header__actions { max-width:100%; flex-wrap:wrap; } }
/* Opt-in drawer geometry for the existing managed dialog/focus shell. */
.saf-modal-backdrop:has(.ns-dialog-drawer){justify-items:end;padding:0}
.ns-dialog-drawer{height:100dvh;max-height:100dvh!important;width:min(520px,100vw)!important;max-width:100vw!important;margin:0 0 0 auto;border-radius:0!important;overflow:auto}
.ns-dialog-drawer .saf-modal-body{overflow-wrap:anywhere}
.ns-dialog-drawer .saf-modal-body{display:flex;flex-direction:column;min-height:calc(100dvh - 80px);box-sizing:border-box}
.ns-dialog-drawer .saf-modal-body>footer{margin-top:auto;padding-top:16px}
.ns-dialog-drawer .saf-modal-body>footer>button{width:100%}