/* SuperAdmin console design system. Scoped to .sa-shell (console) and .sa-auth (sign-in). */

:root {
  --sa-font: "IBM Plex Sans", "Segoe UI", system-ui, -apple-system, sans-serif;
  --sa-mono: "IBM Plex Mono", Consolas, "Courier New", monospace;
  --sa-bg: #f2f5fa;
  --sa-card: #ffffff;
  --sa-card-2: #f7f9fd;
  --sa-ink: #1a2332;
  --sa-ink-2: #4d5a72;
  --sa-muted: #7e89a0;
  --sa-line: #e2e8f2;
  --sa-line-soft: #edf1f8;
  --sa-axis: #c6cede;
  --sa-accent: #3f74dd;
  --sa-accent-strong: #2f62c8;
  --sa-accent-soft: #e9f0fd;
  --sa-accent-ink: #ffffff;
  --sa-good: #0a8a0a;
  --sa-good-soft: #e3f5e3;
  --sa-warn: #a86d00;
  --sa-warn-soft: #fdf3dc;
  --sa-crit: #c83434;
  --sa-crit-soft: #fbe7e7;
  --sa-s1: #2a78d6; --sa-s2: #eb6834; --sa-s3: #1baf7a; --sa-s4: #eda100;
  --sa-radius: 12px;
  --sa-radius-sm: 8px;
  --sa-shadow: 0 1px 2px rgba(26, 35, 50, .05), 0 4px 14px rgba(26, 35, 50, .05);
  --sa-sidebar-w: 236px;
}

/* ---------- base ---------- */
.sa-shell, .sa-auth {
  margin: 0; background: var(--sa-bg); color: var(--sa-ink);
  font-family: var(--sa-font); font-size: 14px; line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}
.sa-shell h1, .sa-shell h2, .sa-shell h3, .sa-shell h4, .sa-shell h5, .sa-shell h6,
.sa-auth h1, .sa-auth h2, .sa-auth h3, .sa-auth h4, .sa-auth h5, .sa-auth h6,
.sa-shell .modal-title {
  font-family: var(--sa-font); color: var(--sa-ink); letter-spacing: -.01em;
}
.sa-shell .dx-widget, .sa-shell .dx-widget input, .sa-shell .dx-widget textarea { font-family: var(--sa-font); }
.sa-shell a { color: var(--sa-accent-strong); }
.sa-shell :focus-visible, .sa-auth :focus-visible { outline: 2px solid var(--sa-accent); outline-offset: 2px; }
.sa-mono, .sa-shell code { font-family: var(--sa-mono); font-size: 12.5px; }
.sa-shell code { color: var(--sa-ink-2); background: var(--sa-line-soft); padding: 1px 6px; border-radius: 5px; }
.sa-muted { color: var(--sa-muted); }
.sa-num { font-variant-numeric: tabular-nums; }

/* ---------- theme buttons & forms (match accent) ---------- */
.sa-shell .btn, .sa-auth .btn { font-weight: 600; border-radius: var(--sa-radius-sm); font-family: var(--sa-font); }
.sa-shell .btn-primary, .sa-auth .btn-primary {
  --bs-btn-bg: var(--sa-accent); --bs-btn-border-color: var(--sa-accent); --bs-btn-color: var(--sa-accent-ink);
  --bs-btn-hover-bg: var(--sa-accent-strong); --bs-btn-hover-border-color: var(--sa-accent-strong); --bs-btn-hover-color: var(--sa-accent-ink);
  --bs-btn-active-bg: var(--sa-accent-strong); --bs-btn-active-border-color: var(--sa-accent-strong);
  --bs-btn-disabled-bg: var(--sa-accent); --bs-btn-disabled-border-color: var(--sa-accent);
  background-color: var(--sa-accent); border-color: var(--sa-accent); color: var(--sa-accent-ink); box-shadow: none;
}
.sa-shell .btn-primary:hover, .sa-auth .btn-primary:hover { background-color: var(--sa-accent-strong); border-color: var(--sa-accent-strong); }
.sa-shell .btn-light, .sa-shell .btn-outline-secondary {
  background: var(--sa-card); border: 1px solid var(--sa-line); color: var(--sa-ink-2); box-shadow: none;
}
.sa-shell .btn-light:hover, .sa-shell .btn-outline-secondary:hover { border-color: var(--sa-axis); color: var(--sa-ink); background: var(--sa-card); }
.sa-shell .btn-outline-danger { color: var(--sa-crit); border-color: var(--sa-crit); background: none; }
.sa-shell .btn-outline-danger:hover { background: var(--sa-crit-soft); color: var(--sa-crit); }
.sa-shell .btn-danger { background: var(--sa-crit); border-color: var(--sa-crit); }
.sa-shell .btn-sm { padding: 4px 11px; font-size: 12.5px; border-radius: 7px; }
.sa-shell .form-label, .sa-auth .form-label { font-size: 12px; font-weight: 600; color: var(--sa-ink-2); margin-bottom: 5px; text-transform: none; letter-spacing: 0; }
.sa-shell .form-control, .sa-shell .form-select, .sa-auth .form-control {
  border: 1px solid var(--sa-line); border-radius: var(--sa-radius-sm); font-size: 13.5px; color: var(--sa-ink); font-family: var(--sa-font); padding: 8px 11px;
}
.sa-shell .form-select { padding-right: 2.25rem; background-position: right 10px center; }
.sa-shell .form-control:focus, .sa-shell .form-select:focus, .sa-auth .form-control:focus { border-color: var(--sa-accent); box-shadow: 0 0 0 3px var(--sa-accent-soft); }
.sa-shell .form-text { color: var(--sa-muted); font-size: 12px; }

/* ---------- shell: sidebar ---------- */
.sa-nav-checkbox { display: none; }
.sa-shell .sa-sidebar {
  position: fixed; inset: 0 auto 0 0; width: var(--sa-sidebar-w); display: flex; flex-direction: column;
  background: var(--sa-card); border-right: 1px solid var(--sa-line); z-index: 1040; transition: left .2s ease;
}
.sa-shell .sa-brand { display: flex; align-items: center; gap: 10px; padding: 18px 18px 14px; }
.sa-shell .sa-brand-mark {
  width: 34px; height: 34px; border-radius: 9px; background: var(--sa-accent); color: var(--sa-accent-ink);
  display: grid; place-items: center; font-size: 19px; flex: none;
}
.sa-shell .sa-brand-text { display: flex; flex-direction: column; line-height: 1.2; }
.sa-shell .sa-brand-name { font-weight: 700; font-size: 14.5px; color: var(--sa-ink); }
.sa-shell .sa-brand-sub { font-size: 10.5px; color: var(--sa-muted); text-transform: uppercase; letter-spacing: .09em; font-weight: 600; }
.sa-shell .sa-nav { flex: 1 1 auto; overflow-y: auto; padding: 2px 12px 12px; display: flex; flex-direction: column; gap: 2px; }
.sa-shell .sa-nav-group { padding: 14px 10px 6px; font-size: 10.5px; font-weight: 600; text-transform: uppercase; letter-spacing: .09em; color: var(--sa-muted); }
.sa-shell .sa-nav-item {
  display: flex; align-items: center; gap: 10px; padding: 8px 10px; border-radius: var(--sa-radius-sm);
  color: var(--sa-ink-2); font-weight: 500; font-size: 13.5px; text-decoration: none;
}
.sa-shell .sa-nav-item i { font-size: 18px; flex: none; color: var(--sa-muted); }
.sa-shell .sa-nav-item:hover { background: var(--sa-line-soft); color: var(--sa-ink); }
.sa-shell .sa-nav-item.active { background: var(--sa-accent-soft); color: var(--sa-accent-strong); font-weight: 600; }
.sa-shell .sa-nav-item.active i { color: var(--sa-accent-strong); }
.sa-shell .sa-side-foot { flex: none; padding: 12px 14px 14px; border-top: 1px solid var(--sa-line-soft); display: flex; flex-direction: column; gap: 10px; }
.sa-shell .sa-side-who { font-size: 12px; color: var(--sa-muted); line-height: 1.4; }
.sa-shell .sa-side-who b { color: var(--sa-ink); font-weight: 600; }
.sa-shell .sa-side-actions { display: flex; gap: 6px; }
.sa-shell .sa-side-actions .btn { flex: 1; font-size: 12px; padding: 5px 8px; }

/* ---------- shell: main column ---------- */
.sa-shell .sa-main { margin-left: var(--sa-sidebar-w); min-height: 100vh; display: flex; flex-direction: column; min-width: 0; }
.sa-shell .sa-topbar {
  position: sticky; top: 0; z-index: 1030; display: flex; align-items: center; gap: 12px; min-height: 54px;
  padding: 10px 28px; background: var(--sa-card); border-bottom: 1px solid var(--sa-line);
}
.sa-shell .sa-crumb { font-size: 13px; color: var(--sa-muted); display: flex; align-items: center; gap: 6px; min-width: 0; flex-wrap: wrap; }
.sa-shell .sa-crumb a { color: var(--sa-muted); text-decoration: none; }
.sa-shell .sa-crumb a:hover { color: var(--sa-ink); }
.sa-shell .sa-crumb b { color: var(--sa-ink); font-weight: 600; }
/* Phone width: one line; the parent link goes, the page name is cut with an ellipsis. */
@media (max-width: 575.98px) {
  .sa-shell .sa-crumb { flex-wrap: nowrap; flex: 1 1 auto; overflow: hidden; }
  .sa-shell .sa-crumb a, .sa-shell .sa-crumb > span[aria-hidden] { display: none; }
  .sa-shell .sa-crumb b { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
}
.sa-shell .sa-topbar-right { margin-left: auto; display: flex; align-items: center; gap: 8px; }
.sa-shell .sa-nav-burger { display: none; cursor: pointer; margin: 0; line-height: 1; font-size: 22px; color: var(--sa-ink-2); }
.sa-shell .sa-nav-backdrop { display: none; }
.sa-shell .sa-content { flex: 1 1 auto; width: 100%; max-width: 1280px; margin: 0 auto; padding: 24px 28px 56px; display: flex; flex-direction: column; gap: 18px; }

/* ---------- page header ---------- */
.sa-page-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 14px; flex-wrap: wrap; }
.sa-page-head h1 { font-size: 20px; font-weight: 700; margin: 0; letter-spacing: -.015em; text-wrap: balance; }
.sa-page-head .sa-sub { color: var(--sa-muted); font-size: 13px; margin-top: 3px; max-width: 70ch; }
.sa-page-actions { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }

/* ---------- cards ---------- */
.sa-card { background: var(--sa-card); border: 1px solid var(--sa-line); border-radius: var(--sa-radius); box-shadow: var(--sa-shadow); min-width: 0; }
.sa-card-pad { padding: 16px 18px; }
.sa-card-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; flex-wrap: wrap; margin-bottom: 10px; }
.sa-card-title { font-size: 13.5px; font-weight: 600; margin: 0; color: var(--sa-ink); }
.sa-card-hint { font-size: 12px; color: var(--sa-muted); margin: 1px 0 0; }
.sa-grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.sa-grid-3-2 { display: grid; grid-template-columns: 3fr 2fr; gap: 16px; }
@media (max-width: 1100px) { .sa-grid-2, .sa-grid-3-2 { grid-template-columns: 1fr; } }

/* ---------- stat tiles ---------- */
.sa-tiles { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 12px; }
.sa-tile { background: var(--sa-card); border: 1px solid var(--sa-line); border-radius: var(--sa-radius); padding: 13px 15px; box-shadow: var(--sa-shadow); min-width: 0; }
.sa-tile-lab { font-size: 11px; color: var(--sa-muted); font-weight: 600; letter-spacing: .05em; text-transform: uppercase; }
.sa-tile-val { font-size: 24px; font-weight: 700; letter-spacing: -.02em; margin-top: 3px; line-height: 1.15; color: var(--sa-ink); }
.sa-tile-sub { font-size: 12px; color: var(--sa-ink-2); margin-top: 3px; }

/* ---------- pills & badges ---------- */
.sa-pill { display: inline-flex; align-items: center; gap: 5px; font-size: 11.5px; font-weight: 600; border-radius: 99px; padding: 2px 9px; white-space: nowrap; line-height: 1.5; }
.sa-pill.good { background: var(--sa-good-soft); color: var(--sa-good); }
.sa-pill.warn { background: var(--sa-warn-soft); color: var(--sa-warn); }
.sa-pill.crit { background: var(--sa-crit-soft); color: var(--sa-crit); }
.sa-pill.plain { background: var(--sa-line-soft); color: var(--sa-ink-2); }
.sa-pill.acc { background: var(--sa-accent-soft); color: var(--sa-accent-strong); }
.sa-pill i { font-size: 13px; }
.sa-type { font-family: var(--sa-mono); font-size: 11px; font-weight: 500; border-radius: 6px; padding: 2px 7px; white-space: nowrap; }
.sa-type.school { background: var(--sa-accent-soft); color: var(--sa-accent-strong); }
.sa-type.acc { background: var(--sa-line-soft); color: var(--sa-ink-2); }
.sa-type.unknown { background: var(--sa-warn-soft); color: var(--sa-warn); }

/* ---------- states ---------- */
.sa-empty { text-align: center; color: var(--sa-muted); padding: 28px 16px; font-size: 13px; }
.sa-empty i { display: block; font-size: 28px; color: var(--sa-axis); margin-bottom: 6px; }
.sa-empty b { display: block; color: var(--sa-ink-2); font-weight: 600; margin-bottom: 2px; }
.sa-skel { background: linear-gradient(90deg, var(--sa-line-soft) 25%, var(--sa-card-2) 50%, var(--sa-line-soft) 75%); background-size: 200% 100%; animation: sa-skel 1.2s ease-in-out infinite; border-radius: 6px; min-height: 14px; }
@keyframes sa-skel { from { background-position: 200% 0; } to { background-position: -200% 0; } }
@media (prefers-reduced-motion: reduce) { .sa-skel { animation: none; } }
.sa-alert { border-radius: var(--sa-radius-sm); padding: 10px 14px; font-size: 13px; border: 1px solid transparent; }
.sa-alert.crit { background: var(--sa-crit-soft); color: var(--sa-crit); border-color: rgba(200, 52, 52, .2); }
.sa-alert.good { background: var(--sa-good-soft); color: var(--sa-good); border-color: rgba(10, 138, 10, .2); }
.sa-alert.warn { background: var(--sa-warn-soft); color: var(--sa-warn); border-color: rgba(168, 109, 0, .2); }
.sa-alert.info { background: var(--sa-accent-soft); color: var(--sa-accent-strong); border-color: rgba(63, 116, 221, .2); }
/* legacy inline alerts (Bootstrap) inside the console get the same look */
.sa-shell .alert-danger, .sa-auth .alert-danger { background: var(--sa-crit-soft); color: var(--sa-crit); border: 1px solid rgba(200, 52, 52, .2); border-radius: var(--sa-radius-sm); font-size: 13px; padding: 10px 14px; }
.sa-shell .alert-success { background: var(--sa-good-soft); color: var(--sa-good); border: 1px solid rgba(10, 138, 10, .2); border-radius: var(--sa-radius-sm); font-size: 13px; padding: 10px 14px; }

/* ---------- toasts ---------- */
.sa-toasts { position: fixed; right: 20px; bottom: 20px; z-index: 2000; display: flex; flex-direction: column; gap: 8px; max-width: min(420px, calc(100vw - 32px)); }
.sa-toast {
  display: flex; align-items: flex-start; gap: 10px; background: var(--sa-ink); color: #fff; border-radius: 10px;
  padding: 10px 14px; font-size: 13px; box-shadow: 0 8px 24px rgba(26, 35, 50, .25); opacity: 0; transform: translateY(8px);
  transition: opacity .15s, transform .15s;
}
.sa-toast.show { opacity: 1; transform: none; }
.sa-toast i { font-size: 17px; flex: none; margin-top: 1px; }
.sa-toast.good i { color: #7fe07f; }
.sa-toast.crit i { color: #ff9a9a; }
.sa-toast.info i { color: #9ec1ff; }
.sa-toast .sa-toast-link { color: #fff; font-weight: 600; text-decoration: underline; white-space: nowrap; }
.sa-toast .sa-toast-link:hover, .sa-toast .sa-toast-link:focus-visible { color: #cfe0ff; }
@media (prefers-reduced-motion: reduce) { .sa-toast { transition: none; } }

/* ---------- modals ---------- */
.sa-shell .modal-content { border: 1px solid var(--sa-line); border-radius: var(--sa-radius); box-shadow: 0 20px 50px rgba(26, 35, 50, .2); }
.sa-shell .modal-header { border-bottom: 1px solid var(--sa-line-soft); padding: 14px 18px; }
.sa-shell .modal-title { font-size: 15px; font-weight: 700; }
.sa-shell .modal-body { padding: 16px 18px; }
.sa-shell .modal-footer { border-top: 1px solid var(--sa-line-soft); padding: 12px 18px; gap: 8px; }
.sa-confirm-type { margin-top: 12px; }

/* ---------- DevExtreme grid skin ---------- */
.sa-grid-card { padding: 4px 0 0; overflow: hidden; }
.sa-grid-card .dx-datagrid { background: transparent; color: var(--sa-ink); font-size: 13px; }
.sa-grid-card .dx-datagrid-header-panel { padding: 8px 14px 4px; border-bottom: 0; background: transparent; }
.sa-grid-card .dx-toolbar { background: transparent; }
.sa-grid-card .dx-datagrid-headers { border-bottom: 1px solid var(--sa-line) !important; color: var(--sa-muted); }
.sa-grid-card .dx-datagrid-headers .dx-header-row > td {
  font-size: 11px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--sa-muted);
  padding-top: 10px; padding-bottom: 10px; border-bottom: 0;
}
.sa-grid-card .dx-datagrid-rowsview .dx-row > td { padding-top: 11px; padding-bottom: 11px; vertical-align: middle; border-top-color: var(--sa-line-soft); border-bottom-color: var(--sa-line-soft); }
.sa-grid-card .dx-datagrid-rowsview .dx-row.dx-data-row:hover:not(.dx-row-focused) > td { background: var(--sa-card-2); }
.sa-grid-card .dx-datagrid-borders > .dx-datagrid-headers, .sa-grid-card .dx-datagrid-borders > .dx-datagrid-rowsview { border-left: 0; border-right: 0; }
.sa-grid-card .dx-datagrid-pager { border-top: 1px solid var(--sa-line-soft); padding: 8px 14px; color: var(--sa-ink-2); }
.sa-grid-card .dx-pager .dx-pages .dx-selection, .sa-grid-card .dx-pager .dx-page-sizes .dx-selection { background: var(--sa-accent-soft); color: var(--sa-accent-strong); border-radius: 6px; }
.sa-grid-card .dx-searchbox .dx-texteditor-input { font-size: 13px; }
.sa-grid-card .dx-datagrid-nodata { color: var(--sa-muted); font-size: 13px; }
.sa-grid-card .dx-row.dx-data-row { cursor: default; }
.sa-grid-card.sa-grid-clickable .dx-row.dx-data-row { cursor: pointer; }
.sa-row-actions { display: flex; gap: 6px; justify-content: flex-end; flex-wrap: wrap; }

/* ---------- sign-in (auth) ---------- */
.sa-auth { min-height: 100vh; display: grid; place-items: center; padding: 24px 16px; }
.sa-auth-card { width: 100%; max-width: 400px; background: var(--sa-card); border: 1px solid var(--sa-line); border-radius: 14px; box-shadow: var(--sa-shadow); padding: 28px 26px 24px; }
.sa-auth-brand { display: flex; align-items: center; gap: 11px; margin-bottom: 22px; }
.sa-auth-brand .mark { width: 40px; height: 40px; border-radius: 10px; background: var(--sa-accent); color: #fff; display: grid; place-items: center; font-size: 22px; flex: none; }
.sa-auth-brand b { display: block; font-size: 16px; color: var(--sa-ink); }
.sa-auth-brand span { display: block; font-size: 12px; color: var(--sa-muted); }
.sa-auth h1 { font-size: 18px; font-weight: 700; margin: 0 0 4px; }
.sa-auth .sa-step-hint { color: var(--sa-muted); font-size: 13px; margin: 0 0 16px; }
.sa-auth .sa-field { margin-bottom: 14px; }
.sa-auth-foot { margin-top: 18px; padding-top: 14px; border-top: 1px solid var(--sa-line-soft); font-size: 11.5px; color: var(--sa-muted); display: flex; align-items: center; gap: 6px; }
.sa-step { display: none; }
.sa-step.active { display: block; }
.sa-qr { display: flex; justify-content: center; margin: 4px 0 12px; padding: 12px; background: #fff; border: 1px solid var(--sa-line); border-radius: 10px; }
.sa-code { letter-spacing: .45em; font-size: 20px; font-family: var(--sa-mono); text-align: center; }
.sa-secret { font-family: var(--sa-mono); font-size: 12px; word-break: break-all; background: var(--sa-line-soft); border-radius: 6px; padding: 6px 8px; color: var(--sa-ink-2); }

/* ---------- client picker (SA.ui.clientPicker) ---------- */
.sa-cpick { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.sa-cpick-seg { display: inline-flex; align-self: flex-start; border: 1px solid var(--sa-line); border-radius: 8px; overflow: hidden; }
.sa-cpick-seg button { border: 0; background: var(--sa-card); color: var(--sa-ink-2); font-size: 12px; font-weight: 500; padding: 4px 10px; font-family: var(--sa-font); }
.sa-cpick-seg button + button { border-left: 1px solid var(--sa-line); }
.sa-cpick-seg button.on { background: var(--sa-accent-soft); color: var(--sa-accent-strong); font-weight: 600; }
.sa-cpick-item { display: flex; align-items: center; gap: 8px; min-width: 0; }
.sa-cpick-name { font-weight: 500; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sa-cpick-item .sa-mono { font-size: 11px; }
.sa-cpick-item .sa-type { margin-left: auto; }

/* ---------- client name emphasis + required-field marker (used across the console) ---------- */
.sa-client-name { font-weight: 600; color: var(--sa-ink); }
a .sa-client-name, a.sa-client-name { color: inherit; }
.sa-client-name-lg { font-size: 1.05rem; }
.sa-req { color: var(--sa-crit); font-weight: 600; margin-left: 2px; }

/* ---------- package/feature editor ---------- */
.sa-feature-locked .dx-select-checkbox { opacity: .5; pointer-events: none; }
.sa-feature-locked td { color: var(--sa-muted); }
/* "Mobile app menus" checklist (sa-mobile-menus.js) */
.sa-mm-bar { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 16px; margin-bottom: 10px; }
.sa-mm-bar .sa-mm-search { max-width: 260px; }
.sa-mm-group { border-top: 1px solid var(--sa-line-soft); padding: 10px 0 6px; }
.sa-mm-ghead { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; margin-bottom: 4px; }
.sa-mm-ghead .sa-mono { font-size: 11px; }
.sa-mm-acts { margin-left: auto; display: inline-flex; align-items: center; gap: 6px; font-size: 12.5px; }
.sa-mm-acts .btn { font-size: 12.5px; }
.sa-mm-sub { font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: .04em; color: var(--sa-muted); margin: 6px 0 2px; }
.sa-mm-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 0 16px; }
.sa-mm-item { display: flex; align-items: flex-start; gap: 8px; padding: 4px 6px; border-radius: 6px; cursor: pointer; font-size: 13px; margin: 0; }
.sa-mm-item:hover { background: var(--sa-card-2); }
.sa-mm-item .form-check-input { margin-top: 3px; flex: none; }
.sa-mm-text { display: flex; flex-wrap: wrap; align-items: center; gap: 2px 5px; min-width: 0; }
.sa-mm-text .sa-pill { font-size: 10.5px; padding: 0 7px; }
.sa-mm-code { font-size: 11px; width: 100%; }
.sa-mm-locked { cursor: default; color: var(--sa-muted); }
.sa-mm-locked .form-check-input { opacity: .5; }
.sa-mm-nomatch { font-size: 13px; padding: 8px 0; }

/* ---------- responsive shell ---------- */
@media (max-width: 991.98px) {
  .sa-shell .sa-sidebar { left: calc(-1 * var(--sa-sidebar-w) - 10px); box-shadow: 0 0 24px rgba(26, 35, 50, .2); }
  .sa-nav-checkbox:checked ~ .sa-sidebar { left: 0; }
  .sa-nav-checkbox:checked ~ .sa-nav-backdrop { display: block; position: fixed; inset: 0; z-index: 1035; background: rgba(26, 35, 50, .45); cursor: pointer; }
  .sa-shell .sa-main { margin-left: 0; }
  .sa-shell .sa-nav-burger { display: inline-flex; }
  .sa-shell .sa-topbar { padding: 10px 16px; }
  .sa-shell .sa-content { padding: 16px 16px 40px; }
}
/* Wide work pages (report designer): the side menu tucks away as on a phone; the burger opens it over the page. */
.sa-shell.sa-nav-tucked .sa-sidebar { left: calc(-1 * var(--sa-sidebar-w) - 10px); box-shadow: 0 0 24px rgba(26, 35, 50, .2); }
.sa-shell.sa-nav-tucked .sa-nav-checkbox:checked ~ .sa-sidebar { left: 0; }
.sa-shell.sa-nav-tucked .sa-nav-checkbox:checked ~ .sa-nav-backdrop { display: block; position: fixed; inset: 0; z-index: 1035; background: rgba(26, 35, 50, .45); cursor: pointer; }
.sa-shell.sa-nav-tucked .sa-main { margin-left: 0; }
.sa-shell.sa-nav-tucked .sa-nav-burger { display: inline-flex; }
@media (max-width: 575.98px) { .sa-shell .sa-topbar-right .sa-pill.good { display: none; } }
@media (prefers-reduced-motion: reduce) { .sa-shell .sa-sidebar { transition: none; } }

/* "Server" switch of the single-system pages (sa-syspick.js): School ERP / HR ERP with the System health dot. */
.sa-syspick { display: inline-flex; align-items: center; gap: 8px; }
.sa-syspick[hidden] { display: none; }
.sa-syspick-lab { display: inline-flex; align-items: center; gap: 4px; font-size: 12px; font-weight: 600; color: var(--sa-ink-2); text-transform: uppercase; letter-spacing: .04em; }
.sa-syspick-lab .bx { font-size: 15px; }
.sa-syspick-seg { display: inline-flex; border: 1px solid var(--sa-line); border-radius: 8px; overflow: hidden; background: var(--sa-card); }
.sa-syspick-seg button { display: inline-flex; align-items: center; gap: 6px; border: 0; background: var(--sa-card); color: var(--sa-ink-2); font-size: 13px; font-weight: 500; padding: 6px 12px; font-family: var(--sa-font); cursor: pointer; }
.sa-syspick-seg button + button { border-left: 1px solid var(--sa-line); }
.sa-syspick-seg button:hover { background: var(--sa-line-soft); }
.sa-syspick-seg button.on { background: var(--sa-accent-soft); color: var(--sa-accent-strong); font-weight: 600; }
.sa-syspick-seg button:focus-visible { outline: 2px solid var(--sa-accent); outline-offset: -2px; }
.sa-syspick-dot { width: 8px; height: 8px; border-radius: 50%; flex: none; background: var(--sa-axis); }
.sa-syspick-dot.good { background: var(--sa-good); }
.sa-syspick-dot.warn { background: #d99400; }
.sa-syspick-dot.crit { background: var(--sa-crit); }