/* ═══════════════════════════════════════════════════════════════════════════
   STAFF ADMIN — Modern UI Layer  |  staff-admin.css
   Prefix: .sa-   Scoped rules only. Zero Bootstrap overrides.
   Theme-aware: reads --theme-default (Cuba colour scheme) +
   --bs-body-bg / --bs-body-color / --bs-border-color for full light/dark/
   colour-scheme compatibility. Dark-mode via body.dark-only token block.
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── Design tokens ─────────────────────────────────────────────────────── */
:root {
  --sa-accent      : var(--theme-default, #7366ff);
  /* Mix against body-bg so tints flip automatically in dark mode */
  --sa-accent-soft : color-mix(in srgb, var(--sa-accent) 10%, var(--bs-body-bg, #fff));
  --sa-accent-mid  : color-mix(in srgb, var(--sa-accent) 22%, var(--bs-body-bg, #fff));
  --sa-radius      : 12px;
  --sa-radius-sm   : 8px;
  --sa-shadow-xs   : 0 1px 4px rgba(0,0,0,.07);
  --sa-shadow-sm   : 0 2px 10px rgba(0,0,0,.08);
  --sa-shadow-md   : 0 4px 20px rgba(0,0,0,.10);
  --sa-border      : 1px solid var(--bs-border-color, #e8ebf0);
  --sa-surface     : var(--bs-body-bg, #ffffff);
  --sa-surface-2   : var(--bs-tertiary-bg, #f5f6fa);
  --sa-text        : var(--bs-body-color, #2d3142);
  --sa-text-muted  : var(--bs-secondary-color, #8e95a8);
  /* Row hover / thead — very light tint of body-color over body-bg */
  --sa-row-hover   : color-mix(in srgb, var(--bs-body-color) 5%, var(--bs-body-bg));
  --sa-thead-bg    : color-mix(in srgb, var(--bs-body-color) 4%, var(--bs-body-bg));
  --sa-group-bg    : color-mix(in srgb, var(--bs-body-color) 7%, var(--bs-body-bg));
  --sa-row-divider : var(--bs-border-color, #e8ebf0);
  --sa-section-bg  : color-mix(in srgb, var(--bs-body-color) 2%, var(--bs-body-bg));
  /* Semantic badge palettes (overridden dark mode below) */
  --sa-badge-ok-bg   : #d1f8e3;  --sa-badge-ok-fg   : #166534;  --sa-badge-ok-dot  : #16a34a;
  --sa-badge-err-bg  : #fee2e2;  --sa-badge-err-fg  : #b91c1c;  --sa-badge-err-dot : #ef4444;
  --sa-badge-info-bg : color-mix(in srgb, var(--theme-default) 15%, var(--tint-base, #fff));  --sa-badge-info-fg : #5b21b6;
  --sa-badge-blue-bg : #e0f2fe;  --sa-badge-blue-fg : #0369a1;
  --sa-badge-warn-bg : #fef9c3;  --sa-badge-warn-fg : #854d0e;
  --sa-badge-neu-bg  : color-mix(in srgb, var(--bs-body-color) 8%, var(--bs-body-bg));
  --sa-badge-neu-fg  : var(--bs-secondary-color, #6c757d);
  --sa-op-cross-col  : color-mix(in srgb, var(--bs-body-color) 20%, var(--bs-body-bg));
  /* Semantic soft button tints */
  --sa-success-soft: color-mix(in srgb, #28a745 12%, var(--bs-body-bg, white));
  --sa-danger-soft : color-mix(in srgb, #dc3545 10%, var(--bs-body-bg, white));
  --sa-warning-soft: color-mix(in srgb, #ffc107 15%, var(--bs-body-bg, white));
  /* Accent tinted border for count pills */
  --sa-count-border: color-mix(in srgb, var(--sa-accent) 25%, var(--bs-border-color));
}

/* Dark-mode token overrides (body.dark-only is set by Cuba theme JS) */
body.dark-only {
  --sa-surface   : #1c2c50;
  --sa-surface-2 : #14213f;
  /* Semantic badges — warm tints readable on dark backgrounds */
  --sa-badge-ok-bg  : color-mix(in srgb, #28a745 22%, #14213f);
  --sa-badge-ok-fg  : #86efac;
  --sa-badge-ok-dot : #4ade80;
  --sa-badge-err-bg : color-mix(in srgb, #dc3545 20%, #14213f);
  --sa-badge-err-fg : #fca5a5;
  --sa-badge-err-dot: #f87171;
  --sa-badge-info-bg: color-mix(in srgb, #7366ff 22%, #14213f);
  --sa-badge-info-fg: #c4b5fd;
  --sa-badge-blue-bg: color-mix(in srgb, #0ea5e9 18%, #14213f);
  --sa-badge-blue-fg: #7dd3fc;
  --sa-badge-warn-bg: color-mix(in srgb, #ca8a04 20%, #14213f);
  --sa-badge-warn-fg: #fde68a;
  --sa-shadow-xs    : 0 1px 4px rgba(0,0,0,.25);
  --sa-shadow-sm    : 0 2px 10px rgba(0,0,0,.35);
}

/* ── Page wrapper ───────────────────────────────────────────────────────── */
.sa-page {
  background: var(--sa-surface-2);
  min-height: 100vh;
}

/* ── Admin header card (page-level card for Add/Edit staff) ─────────────── */
.sa-card {
  background   : var(--sa-surface);
  border       : var(--sa-border);
  border-radius: var(--sa-radius);
  box-shadow   : var(--sa-shadow-sm);
  overflow     : hidden;
}
@media (max-width: 767.98px) {
  /* Allow sticky footer inside card-body to escape the overflow:hidden clip */
  .sa-card { overflow: visible; }
  .sa-card-header {
    /* Keep header clipped to the card's border-radius top corners */
    border-radius: var(--sa-radius) var(--sa-radius) 0 0;
    overflow     : hidden;
  }
}

.sa-card-header {
  display      : flex;
  align-items  : center;
  gap          : .75rem;
  padding      : 1rem 1.5rem;
  background   : linear-gradient(120deg,
    color-mix(in srgb, var(--sa-accent) 6%, var(--sa-surface)) 0%,
    var(--sa-surface) 55%);
  border-bottom: var(--sa-border);
}

.sa-card-header .sa-title {
  font-size  : 1rem;
  font-weight: clamp(1, calc(600 + var(--spq-fw-delta, 0)), 1000);
  color      : var(--sa-text);
  margin     : 0;
}

.sa-card-header .sa-subtitle {
  font-size: .75rem;
  color    : var(--sa-text-muted);
}

.sa-card-body {
  padding: 1.5rem;
}

/* ── Back button ────────────────────────────────────────────────────────── */
.sa-back-btn {
  display        : inline-flex;
  align-items    : center;
  justify-content: center;
  width          : 34px;
  height         : 34px;
  border-radius  : 50%;
  border         : var(--sa-border);
  background     : var(--sa-surface);
  color          : var(--sa-text-muted);
  text-decoration: none;
  transition     : background .15s, color .15s, box-shadow .15s;
  flex-shrink    : 0;
}
.sa-back-btn:hover {
  background: var(--sa-accent-soft);
  color     : var(--sa-accent);
  box-shadow: var(--sa-shadow-xs);
}

/* ═══════════════════════════════════════════════════════════════════════════
   WIZARD TABS
   ═══════════════════════════════════════════════════════════════════════════ */
.sa-wizard-tabs {
  display        : flex;
  list-style     : none;
  padding        : 0;
  margin         : 0 0 1.75rem;
  gap            : 0;
  border-bottom  : 2px solid var(--sa-row-divider);
  overflow-x     : auto;
  scrollbar-width: none;
}
.sa-wizard-tabs::-webkit-scrollbar { display: none; }

.sa-wizard-tab {
  flex-shrink: 0;
}

.sa-wizard-tab-btn {
  display       : flex;
  align-items   : center;
  gap           : .55rem;
  padding       : .75rem 1.1rem;
  background    : none;
  border        : none;
  border-bottom : 2px solid transparent;
  margin-bottom : -2px;
  font-size     : .8rem;
  font-weight   : clamp(1, calc(500 + var(--spq-fw-delta, 0)), 1000);
  color         : var(--sa-text-muted);
  cursor        : pointer;
  white-space   : nowrap;
  transition    : color .15s, border-color .15s;
}
.sa-wizard-tab-btn:hover {
  color: var(--sa-text);
}
.sa-wizard-tab-btn.active {
  color       : var(--sa-accent);
  border-color: var(--sa-accent);
  font-weight : clamp(1, calc(600 + var(--spq-fw-delta, 0)), 1000);
}

/* Step badge in tab */
.sa-step {
  display        : inline-flex;
  align-items    : center;
  justify-content: center;
  width          : 20px;
  height         : 20px;
  border-radius  : 50%;
  font-size      : .68rem;
  font-weight    : clamp(1, calc(700 + var(--spq-fw-delta, 0)), 1000);
  background     : var(--sa-row-hover);
  color          : var(--sa-text-muted);
  transition     : background .2s, color .2s;
  flex-shrink    : 0;
}
.sa-wizard-tab-btn.active    .sa-step { background: var(--sa-accent); color: #fff; }
.sa-wizard-tab-btn.completed .sa-step { background: #28a745;          color: #fff; }

/* ═══════════════════════════════════════════════════════════════════════════
   FORM SECTIONS
   ═══════════════════════════════════════════════════════════════════════════ */
.sa-section {
  padding      : 1.25rem;
  border-radius: var(--sa-radius-sm);
  border       : var(--sa-border);
  background   : var(--sa-section-bg);
  margin-top   : 1.25rem;
}

.sa-section-title {
  display      : flex;
  align-items  : center;
  gap          : .5rem;
  font-size    : .85rem;
  font-weight  : clamp(1, calc(600 + var(--spq-fw-delta, 0)), 1000);
  color        : var(--sa-text);
  margin-bottom: .75rem;
}

.sa-section-title i {
  color: var(--sa-accent);
}

/* ── Auth method selection cards (OTP vs Manual) ────────────────────────── */
.sa-auth-options {
  display              : grid;
  grid-template-columns: 1fr 1fr;
  gap                  : .75rem;
}
@media (max-width: 576px) {
  .sa-auth-options { grid-template-columns: 1fr; }
}

.sa-auth-card {
  display      : flex;
  align-items  : flex-start;
  gap          : .75rem;
  padding      : .9rem 1rem;
  border       : 2px solid var(--sa-row-divider);
  border-radius: var(--sa-radius-sm);
  background   : var(--sa-surface);
  cursor       : pointer;
  transition   : border-color .15s, background .15s, box-shadow .15s;
}
.sa-auth-card:hover {
  border-color: color-mix(in srgb, var(--sa-accent) 40%, var(--sa-row-divider));
  background  : var(--sa-accent-soft);
}
.sa-auth-card.selected {
  border-color: var(--sa-accent);
  background  : var(--sa-accent-soft);
  box-shadow  : 0 0 0 3px color-mix(in srgb, var(--sa-accent) 15%, transparent);
}
.sa-auth-card input[type="radio"] {
  margin-top  : 3px;
  flex-shrink : 0;
  accent-color: var(--sa-accent);
}
.sa-auth-card-label {
  font-size  : .82rem;
  font-weight: clamp(1, calc(600 + var(--spq-fw-delta, 0)), 1000);
  color      : var(--sa-text);
  display    : block;
}
.sa-auth-card-desc {
  font-size : .72rem;
  color     : var(--sa-text-muted);
  margin-top: .15rem;
  line-height: 1.4;
}

/* ═══════════════════════════════════════════════════════════════════════════
   MODULE CARDS (Step 3)
   ═══════════════════════════════════════════════════════════════════════════ */
.sa-module-card {
  display        : flex;
  align-items    : center;
  justify-content: space-between;
  padding        : 1rem 1.25rem;
  border         : 1.5px solid var(--sa-row-divider);
  border-radius  : var(--sa-radius);
  background     : var(--sa-surface);
  box-shadow     : var(--sa-shadow-xs);
  transition     : border-color .15s, box-shadow .15s, background .15s;
  gap            : 1rem;
}
.sa-module-card.active {
  border-color: var(--sa-accent);
  background  : var(--sa-accent-soft);
  box-shadow  : 0 0 0 3px color-mix(in srgb, var(--sa-accent) 12%, transparent), var(--sa-shadow-xs);
}
.sa-module-card.disabled {
  opacity       : .5;
  pointer-events: none;
}

.sa-module-icon {
  width          : 44px;
  height         : 44px;
  border-radius  : 10px;
  background     : var(--sa-accent-mid);
  color          : var(--sa-accent);
  display        : flex;
  align-items    : center;
  justify-content: center;
  font-size      : 1.2rem;
  flex-shrink    : 0;
}

.sa-module-info { flex: 1; min-width: 0; }
.sa-module-info .sa-module-name {
  font-size  : .9rem;
  font-weight: clamp(1, calc(600 + var(--spq-fw-delta, 0)), 1000);
  color      : var(--sa-text);
}
.sa-module-info .sa-module-desc {
  font-size : .73rem;
  color     : var(--sa-text-muted);
  margin-top: .1rem;
}

.sa-module-controls {
  display    : flex;
  align-items: center;
  gap        : .6rem;
  flex-shrink: 0;
}

/* ── Configure button ───────────────────────────────────────────────────── */
.sa-configure-btn {
  display        : inline-flex;
  align-items    : center;
  gap            : .35rem;
  padding        : .3rem .75rem;
  font-size      : .75rem;
  font-weight    : clamp(1, calc(500 + var(--spq-fw-delta, 0)), 1000);
  border-radius  : 20px;
  border         : 1.5px solid var(--sa-accent);
  color          : var(--sa-accent);
  background     : var(--sa-accent-soft);
  cursor         : pointer;
  text-decoration: none;
  transition     : background .15s, box-shadow .15s;
  white-space    : nowrap;
}
.sa-configure-btn:hover {
  background: var(--sa-accent-mid);
  box-shadow: var(--sa-shadow-xs);
}

/* ── Module badge ───────────────────────────────────────────────────────── */
.sa-mod-badge {
  display      : inline-flex;
  align-items  : center;
  gap          : .25rem;
  padding      : .2rem .55rem;
  border-radius: 20px;
  font-size    : .7rem;
  font-weight  : clamp(1, calc(600 + var(--spq-fw-delta, 0)), 1000);
  white-space  : nowrap;
}
.sa-mod-badge.all     { background: var(--sa-badge-ok-bg);   color: var(--sa-badge-ok-fg); }
.sa-mod-badge.custom  { background: var(--sa-accent-mid);    color: var(--sa-accent); }
.sa-mod-badge.none    { background: var(--sa-badge-warn-bg); color: var(--sa-badge-warn-fg); }
.sa-mod-badge.soon    { background: var(--sa-badge-neu-bg);  color: var(--sa-badge-neu-fg); }
/* Used for client user-type display in the staff table */
.sa-mod-badge.default { background: var(--sa-badge-blue-bg); color: var(--sa-badge-blue-fg); }

/* ── Toggle switch (Bootstrap form-switch enhancement) ──────────────────── */
.sa-toggle .form-check-input {
  width           : 2.4em;
  height          : 1.3em;
  cursor          : pointer;
  border-color    : var(--sa-row-divider);
  transition      : background-color .2s, border-color .2s;
}
.sa-toggle .form-check-input:checked {
  background-color: var(--sa-accent);
  border-color    : var(--sa-accent);
}

/* ── Module picker: "Show URL" under a screen row (Notice and Order) ───── */
.sa-mod-opt-hint { font-size: .7rem; color: var(--sa-text-muted); }
.sa-mod-opt-link, .sa-mod-opt-urllink {
  border     : 0;
  background : none;
  padding    : 0;
  font-size  : .72rem;
  color      : var(--theme-text, var(--sa-accent));
  cursor     : pointer;
  text-align : left;
}
.sa-mod-opt-link i { margin-right: .3rem; }
.sa-mod-opt-link:hover, .sa-mod-opt-urllink:hover { text-decoration: underline; }
.sa-mod-opt-url {
  display       : flex;
  flex-direction: column;
  gap           : .15rem;
  margin-top    : .3rem;
  padding-left  : .85rem;
  max-width     : 100%;
}
.sa-mod-opt-urllink { word-break: break-all; font-family: var(--bs-font-monospace, monospace); }
.sa-mod-opt-hint { word-break: break-all; }

/* ═══════════════════════════════════════════════════════════════════════════
   ROLE CARDS (Step 5)
   ═══════════════════════════════════════════════════════════════════════════ */
.sa-role-card {
  padding      : .85rem 1rem;
  border       : 1.5px solid var(--sa-row-divider);
  border-radius: var(--sa-radius-sm);
  background   : var(--sa-surface);
  cursor       : pointer;
  transition   : border-color .15s, background .15s, box-shadow .15s;
  display      : flex;
  align-items  : center;
  gap          : .65rem;
  height       : 100%;
}
.sa-role-card:hover {
  border-color: color-mix(in srgb, var(--sa-accent) 35%, var(--sa-row-divider));
  background  : var(--sa-accent-soft);
}
.sa-role-card.selected {
  border-color: var(--sa-accent);
  background  : var(--sa-accent-soft);
  box-shadow  : 0 0 0 3px color-mix(in srgb, var(--sa-accent) 12%, transparent);
}
.sa-role-card input[type="checkbox"] {
  flex-shrink : 0;
  width       : 1.1rem;
  height      : 1.1rem;
  accent-color: var(--sa-accent);
  cursor      : pointer;
}
.sa-role-card-name {
  font-size  : .82rem;
  font-weight: clamp(1, calc(600 + var(--spq-fw-delta, 0)), 1000);
  color      : var(--sa-text);
  line-height: 1.3;
}

/* ═══════════════════════════════════════════════════════════════════════════
   OPERATION PERMISSION GRID (EditRole + Tab5 preview)
   ═══════════════════════════════════════════════════════════════════════════ */
.sa-op-grid {
  border-radius: var(--sa-radius-sm);
  overflow     : hidden;
  border       : var(--sa-border);
  box-shadow   : var(--sa-shadow-xs);
}

.sa-op-grid table {
  margin      : 0;
  font-size   : .82rem;
  table-layout: fixed;
}

.sa-op-grid thead th {
  background    : var(--sa-thead-bg);
  font-weight   : clamp(1, calc(600 + var(--spq-fw-delta, 0)), 1000);
  font-size     : .75rem;
  color         : var(--sa-text-muted);
  padding       : .6rem .75rem;
  white-space   : nowrap;
  border-bottom : 1px solid var(--sa-row-divider);
  text-align    : center;
  vertical-align: middle;
}
.sa-op-grid thead th:first-child { text-align: left; }

.sa-op-grid tbody tr {
  transition: background .12s;
}
.sa-op-grid tbody tr:hover { background: var(--sa-row-hover); }
.sa-op-grid tbody tr.sa-row-active {
  background: var(--sa-accent-soft);
}

.sa-op-grid tbody tr.sa-op-group-header td {
  background    : var(--sa-group-bg);
  padding       : .35rem .75rem;
  font-size     : .72rem;
  font-weight   : clamp(1, calc(700 + var(--spq-fw-delta, 0)), 1000);
  text-transform: uppercase;
  letter-spacing: .04em;
  color         : var(--sa-text-muted);
  border-bottom : 1px solid var(--sa-row-divider);
}
.sa-op-grid tbody tr.sa-op-group-header:hover { background: var(--sa-group-bg); }

.sa-op-grid tbody td {
  padding       : .5rem .75rem;
  vertical-align: middle;
  border-bottom : 1px solid var(--sa-row-divider);
  font-size     : .82rem;
}
.sa-op-grid tbody td:first-child {
  font-weight: clamp(1, calc(600 + var(--spq-fw-delta, 0)), 1000);
  color      : var(--sa-text);
}

.sa-op-grid tfoot td {
  background    : var(--sa-thead-bg);
  padding       : .5rem .75rem;
  border-top    : 1.5px solid var(--sa-row-divider);
  font-size     : .75rem;
  font-weight   : clamp(1, calc(600 + var(--spq-fw-delta, 0)), 1000);
  color         : var(--sa-text-muted);
  text-align    : center;
  vertical-align: middle;
}
.sa-op-grid tfoot td:first-child { text-align: left; }

/* Checkboxes inside grid */
.sa-op-grid input[type="checkbox"] {
  width       : 1.1rem;
  height      : 1.1rem;
  cursor      : pointer;
  accent-color: var(--sa-accent);
  border-radius: 4px;
}

/* Operation column badge pills */
.sa-op-badge {
  display      : inline-block;
  padding      : .18rem .55rem;
  border-radius: 20px;
  font-size    : .68rem;
  font-weight  : clamp(1, calc(600 + var(--spq-fw-delta, 0)), 1000);
  white-space  : nowrap;
  line-height  : 1.5;
}
.sa-op-badge.Read     { background: var(--sa-badge-blue-bg); color: var(--sa-badge-blue-fg); }
.sa-op-badge.Write    { background: var(--sa-badge-ok-bg);   color: var(--sa-badge-ok-fg); }
.sa-op-badge.Delete   { background: var(--sa-badge-err-bg);  color: var(--sa-badge-err-fg); }
.sa-op-badge.Export   { background: var(--sa-badge-info-bg); color: var(--sa-badge-info-fg); }
.sa-op-badge.Download { background: var(--sa-badge-neu-bg);  color: var(--sa-badge-neu-fg); }
.sa-op-badge.Upload   { background: var(--sa-badge-warn-bg); color: var(--sa-badge-warn-fg); }

/* Check/X icons in preview grid (Tab5) */
.sa-op-check { color: var(--sa-accent);    font-size: 1.05rem; }
.sa-op-cross { color: var(--sa-op-cross-col); font-size: 1.05rem; }

/* ═══════════════════════════════════════════════════════════════════════════
   STAFF TABLE  (StaffList page)
   ═══════════════════════════════════════════════════════════════════════════ */
.sa-staff-table {
  font-size: .82rem;
}
.sa-staff-table thead th {
  background    : var(--sa-thead-bg);
  color         : var(--sa-text-muted);
  font-weight   : clamp(1, calc(600 + var(--spq-fw-delta, 0)), 1000);
  font-size     : .73rem;
  letter-spacing: .03em;
  text-transform: uppercase;
  padding       : .6rem 1rem;
  border-bottom : 2px solid var(--sa-row-divider);
  white-space   : nowrap;
}
.sa-staff-table tbody td {
  padding       : .65rem 1rem;
  vertical-align: middle;
  border-bottom : 1px solid var(--sa-row-divider);
}
.sa-staff-table tbody tr:hover { background: var(--sa-row-hover); }
.sa-staff-table tbody tr:last-child td { border-bottom: none; }

.sa-status-badge {
  display      : inline-flex;
  align-items  : center;
  gap          : .3rem;
  padding      : .2rem .6rem;
  border-radius: 20px;
  font-size    : .7rem;
  font-weight  : clamp(1, calc(600 + var(--spq-fw-delta, 0)), 1000);
}
.sa-status-badge::before {
  content      : '';
  width        : 6px;
  height       : 6px;
  border-radius: 50%;
}
.sa-status-badge.active          { background: var(--sa-badge-ok-bg);  color: var(--sa-badge-ok-fg); }
.sa-status-badge.active::before  { background: var(--sa-badge-ok-dot); }
.sa-status-badge.suspended       { background: var(--sa-badge-err-bg); color: var(--sa-badge-err-fg); }
.sa-status-badge.suspended::before { background: var(--sa-badge-err-dot); }

.sa-user-type-badge {
  padding      : .2rem .55rem;
  border-radius: 20px;
  font-size    : .68rem;
  font-weight  : clamp(1, calc(600 + var(--spq-fw-delta, 0)), 1000);
}
.sa-user-type-badge.staff  { background: var(--sa-badge-info-bg); color: var(--sa-badge-info-fg); }
.sa-user-type-badge.client { background: var(--sa-badge-blue-bg); color: var(--sa-badge-blue-fg); }

/* Action buttons in staff table */
.sa-action-btn {
  width          : 30px;
  height         : 30px;
  display        : inline-flex;
  align-items    : center;
  justify-content: center;
  border-radius  : 7px;
  border         : var(--sa-border);
  background     : var(--sa-surface);
  color          : var(--sa-text-muted);
  font-size      : .75rem;
  cursor         : pointer;
  transition     : background .12s, color .12s, border-color .12s;
  text-decoration: none;
}
.sa-action-btn:hover         { background: var(--sa-accent-soft);  color: var(--sa-accent);    border-color: var(--sa-accent); }
.sa-action-btn.warn:hover    { background: var(--sa-warning-soft); color: color-mix(in srgb, #856404 var(--ink-keep, 100%), var(--ink-flip, #856404));             border-color: #ffc107; }
.sa-action-btn.danger:hover  { background: var(--sa-danger-soft);  color: var(--sa-badge-err-fg); border-color: #dc3545; }
.sa-action-btn.success:hover { background: var(--sa-success-soft); color: var(--sa-badge-ok-fg);  border-color: #28a745; }

/* ═══════════════════════════════════════════════════════════════════════════
   ROLES PANEL (side panel on StaffList page)
   ═══════════════════════════════════════════════════════════════════════════ */
.sa-roles-list {
  list-style: none;
  padding   : 0;
  margin    : 0;
}

.sa-roles-list-item {
  display        : flex;
  align-items    : center;
  justify-content: space-between;
  padding        : .6rem 1rem;
  border-bottom  : 1px solid var(--sa-row-divider);
  transition     : background .12s;
}
.sa-roles-list-item:last-child { border-bottom: none; }
.sa-roles-list-item:hover { background: var(--sa-row-hover); }

.sa-roles-list-item .sa-role-name {
  font-size  : .82rem;
  font-weight: clamp(1, calc(600 + var(--spq-fw-delta, 0)), 1000);
  color      : var(--sa-text);
}

.sa-roles-list-actions {
  display: flex;
  gap    : .35rem;
}

/* ═══════════════════════════════════════════════════════════════════════════
   ADMIN PAGE — Two panel layout  (Staff + Roles side by side)
   ═══════════════════════════════════════════════════════════════════════════ */
.sa-panel-header {
  display        : flex;
  align-items    : center;
  justify-content: space-between;
  padding        : .85rem 1.25rem;
  background     : linear-gradient(120deg,
    color-mix(in srgb, var(--sa-accent) 6%, var(--sa-surface)) 0%,
    var(--sa-surface) 60%);
  border-bottom  : var(--sa-border);
}
.sa-panel-title {
  display    : flex;
  align-items: center;
  gap        : .5rem;
  font-size  : .9rem;
  font-weight: clamp(1, calc(600 + var(--spq-fw-delta, 0)), 1000);
  color      : var(--sa-text);
  margin     : 0;
}
.sa-panel-title i { color: var(--sa-accent); }

/* ═══════════════════════════════════════════════════════════════════════════
   ADD STAFF BUTTON / PRIMARY ACTION
   ═══════════════════════════════════════════════════════════════════════════ */
.sa-primary-btn {
  display        : inline-flex;
  align-items    : center;
  gap            : .4rem;
  padding        : .45rem 1rem;
  background     : var(--sa-accent);
  color          : #fff;
  font-size      : .8rem;
  font-weight    : clamp(1, calc(600 + var(--spq-fw-delta, 0)), 1000);
  border-radius  : 8px;
  border         : none;
  cursor         : pointer;
  text-decoration: none;
  transition     : opacity .15s, box-shadow .15s;
  white-space    : nowrap;
}
.sa-primary-btn:hover {
  opacity   : .9;
  box-shadow: 0 3px 12px color-mix(in srgb, var(--sa-accent) 35%, transparent);
  color     : #fff;
}
.sa-primary-btn:disabled { opacity: .6; cursor: not-allowed; }

/* ═══════════════════════════════════════════════════════════════════════════
   WIZARD FOOTER (Save / Next / Previous)
   ═══════════════════════════════════════════════════════════════════════════ */
.sa-wizard-footer {
  display        : flex;
  align-items    : center;
  justify-content: space-between;
  padding-top    : 1.25rem;
  margin-top     : 1.25rem;
  border-top     : var(--sa-border);
}

/* ═══════════════════════════════════════════════════════════════════════════
   GST MODAL — category card grid
   ═══════════════════════════════════════════════════════════════════════════ */
.sa-modal-cat-card {
  border       : 1.5px solid var(--sa-row-divider);
  border-radius: var(--sa-radius-sm);
  overflow     : hidden;
  transition   : border-color .15s;
  height       : 100%;
}
.sa-modal-cat-card.has-selection {
  border-color: var(--sa-accent);
}

.sa-modal-cat-header {
  display        : flex;
  align-items    : center;
  justify-content: space-between;
  padding        : .55rem .85rem;
  background     : var(--sa-thead-bg);
  border-bottom  : 1px solid var(--sa-row-divider);
  user-select    : none;
}
.sa-modal-cat-card.has-selection .sa-modal-cat-header {
  background: var(--sa-accent-soft);
}

.sa-modal-cat-title {
  display    : flex;
  align-items: center;
  gap        : .45rem;
  font-size  : .8rem;
  font-weight: clamp(1, calc(600 + var(--spq-fw-delta, 0)), 1000);
  color      : var(--sa-text);
}
.sa-modal-cat-card.has-selection .sa-modal-cat-title { color: var(--sa-accent); }
.sa-modal-cat-title i { font-size: .85rem; }

.sa-modal-cat-items { padding: .35rem .15rem; }

.sa-modal-cat-item {
  display        : flex;
  align-items    : center;
  justify-content: space-between;
  padding        : .4rem .75rem;
  font-size      : .8rem;
  border-bottom  : 1px solid var(--sa-row-divider);
  cursor         : pointer;
  transition     : background .1s;
}
.sa-modal-cat-item:last-child { border-bottom: none; }
.sa-modal-cat-item:hover { background: var(--sa-row-hover); }
.sa-modal-cat-item.checked { background: var(--sa-accent-soft); }

.sa-modal-cat-item label {
  display    : flex;
  align-items: center;
  gap        : .5rem;
  cursor     : pointer;
  flex       : 1;
}
.sa-modal-cat-item input[type="checkbox"] {
  width       : 1rem;
  height      : 1rem;
  flex-shrink : 0;
  accent-color: var(--sa-accent);
  cursor      : pointer;
}

.sa-active-pill {
  font-size    : .65rem;
  font-weight  : clamp(1, calc(600 + var(--spq-fw-delta, 0)), 1000);
  padding      : .1rem .45rem;
  border-radius: 20px;
  background   : var(--sa-accent-mid);
  color        : var(--sa-accent);
  white-space  : nowrap;
}

/* ═══════════════════════════════════════════════════════════════════════════
   SAVE / CANCEL FOOTER  (EditRole)
   ═══════════════════════════════════════════════════════════════════════════ */
.sa-save-footer {
  display    : flex;
  align-items: center;
  gap        : .65rem;
  padding-top: 1.25rem;
  margin-top : 1.25rem;
  border-top : var(--sa-border);
}

.sa-saved-indicator {
  display    : flex;
  align-items: center;
  gap        : .3rem;
  font-size  : .78rem;
  font-weight: clamp(1, calc(500 + var(--spq-fw-delta, 0)), 1000);
  color      : var(--sa-badge-ok-fg);
}

/* ═══════════════════════════════════════════════════════════════════════════
   EMPTY STATES
   ═══════════════════════════════════════════════════════════════════════════ */
.sa-empty {
  display        : flex;
  flex-direction : column;
  align-items    : center;
  justify-content: center;
  padding        : 3rem 1rem;
  color          : var(--sa-text-muted);
  text-align     : center;
}
.sa-empty i { font-size: 2.5rem; margin-bottom: .75rem; opacity: .4; }
.sa-empty p { font-size: .85rem; margin: 0; }

/* ═══════════════════════════════════════════════════════════════════════════
   ANIMATION
   ═══════════════════════════════════════════════════════════════════════════ */
@keyframes sa-fade-in {
  from { opacity: 0; transform: translateY(6px); }
  to   { opacity: 1; transform: translateY(0);   }
}
/* backwards, not both: a kept transform makes this panel a stacking context and traps the
   Configure / Branch access modals under the body-level backdrop (unclickable). */
.sa-animate { animation: sa-fade-in .22s ease backwards; }

/* ── Company Access tab (wizard step: Company Access) ───────────────────── */
.sa-access-head {
  display        : flex;
  align-items    : baseline;
  justify-content: space-between;
  gap            : .75rem;
  flex-wrap      : wrap;
  margin-bottom  : .55rem;
}

.sa-access-options {
  display              : grid;
  grid-template-columns: repeat(3, 1fr);
  gap                  : .6rem;
}
@media (max-width: 768px) {
  .sa-access-options { grid-template-columns: 1fr; }
}

.sa-access-card {
  display      : flex;
  align-items  : flex-start;
  gap          : .6rem;
  padding      : .7rem .85rem;
  border       : 1.5px solid var(--sa-row-divider);
  border-radius: var(--sa-radius-sm);
  background   : var(--sa-surface);
  cursor       : pointer;
  transition   : border-color .15s, background .15s, box-shadow .15s;
}
.sa-access-card:hover {
  border-color: color-mix(in srgb, var(--sa-accent) 35%, var(--sa-row-divider));
  background  : var(--sa-accent-soft);
}
.sa-access-card.selected {
  border-color: var(--sa-accent);
  background  : var(--sa-accent-soft);
  box-shadow  : 0 0 0 3px color-mix(in srgb, var(--sa-accent) 12%, transparent);
}
.sa-access-card input[type="radio"] {
  margin-top  : 2px;
  flex-shrink : 0;
  accent-color: var(--sa-accent);
  cursor      : pointer;
}
.sa-access-card-body { min-width: 0; }
.sa-access-card-name {
  display    : block;
  font-size  : .82rem;
  font-weight: clamp(1, calc(600 + var(--spq-fw-delta, 0)), 1000);
  color      : var(--sa-text);
  line-height: 1.3;
  cursor     : pointer;
}
.sa-access-card-hint {
  display   : block;
  font-size : .7rem;
  color     : var(--sa-text-muted);
  margin-top: .12rem;
  line-height: 1.35;
}

/* Search row + live count */
.sa-access-toolbar {
  display    : flex;
  align-items: center;
  gap        : .6rem;
  flex-wrap  : wrap;
  margin     : 1rem 0 .6rem;
}
.sa-access-search {
  position : relative;
  flex     : 1 1 260px;
  min-width: 200px;
  max-width: 420px;
}
.sa-access-search i {
  position  : absolute;
  left      : .7rem;
  top       : 50%;
  transform : translateY(-50%);
  font-size : .78rem;
  color     : var(--sa-text-muted);
  pointer-events: none;
}
.sa-access-search input {
  padding-left: 2rem;
  font-size   : .82rem;
  border-radius: var(--sa-radius-sm);
}
.sa-access-count {
  display      : inline-flex;
  align-items  : center;
  gap          : .4rem;
  padding      : .35rem .7rem;
  border-radius: 999px;
  border       : 1px solid var(--sa-count-border);
  background   : var(--sa-accent-soft);
  color        : var(--sa-accent);
  font-size    : .74rem;
  font-weight  : clamp(1, calc(600 + var(--spq-fw-delta, 0)), 1000);
  white-space  : nowrap;
}
.sa-access-count.none {
  border-color: var(--sa-row-divider);
  background  : var(--sa-row-hover);
  color       : var(--sa-text-muted);
}
.sa-access-count.all {
  border-color: color-mix(in srgb, #28a745 30%, var(--sa-row-divider));
  background  : var(--sa-success-soft);
  color       : var(--sa-badge-ok-fg);
}
.sa-access-filtered {
  font-size  : .72rem;
  color      : var(--sa-text-muted);
  white-space: nowrap;
}

/* ═══════════════════════════════════════════════════════════════════════════
   MOBILE — native-app feel for phone screens (≤767px)
   ═══════════════════════════════════════════════════════════════════════════ */
@media (max-width: 767.98px) {
  /* Ensure primary action button meets 44px touch target on mobile */
  .sa-primary-btn {
    min-height   : 44px;
    padding      : .6rem 1.1rem;
    font-size    : .85rem;
    border-radius: 10px;
    flex         : 1;
    justify-content: center;
  }

  /* Panel header stacks on very narrow screens */
  .sa-panel-header {
    flex-wrap: wrap;
    gap      : .5rem;
  }

  /* Action buttons: bigger touch area on phone */
  .sa-action-btn {
    width    : 36px;
    height   : 36px;
    font-size: .85rem;
  }

  /* Roles list items: taller tap target */
  .sa-roles-list-item {
    padding   : .75rem 1rem;
    min-height: 48px;
  }

  /* Empty states: tighter padding on phone */
  .sa-empty { padding: 2rem 1rem; }

  /* Card body padding tightens on phone; extra bottom space for wizard footer */
  .sa-card-body {
    padding       : 1rem;
    padding-bottom: 5rem;
  }

  /* Wizard tab buttons meet 44px */
  .sa-wizard-tab-btn {
    min-height: 44px;
    padding   : .6rem .7rem;
    font-size : .73rem;
    gap       : .3rem;
  }

  /* ── Back button: 44px touch target ─────────────────────────────────── */
  .sa-back-btn {
    width    : 44px;
    height   : 44px;
    font-size: 1rem;
  }

  /* ── Card header: compact on phone ──────────────────────────────────── */
  .sa-card-header {
    padding: .65rem .9rem;
    gap    : .45rem;
  }
  .sa-card-header .sa-title    { font-size: .9rem; }
  .sa-card-header .sa-subtitle { font-size: .68rem; }

  /* ── Wizard footer: full-width stacked buttons ──────────────────────── */
  .sa-wizard-footer {
    flex-direction: column;
    gap           : .5rem;
    padding-top   : .9rem;
    margin-top    : 1rem;
    position      : sticky;
    bottom        : 0;
    background    : var(--sa-surface);
    box-shadow    : 0 -3px 16px rgba(0,0,0,.09);
    border-top    : var(--sa-border);
    z-index       : 5;
    padding       : .75rem 0 .5rem;
    margin-inline : -1rem;
    padding-inline: 1rem;
  }
  .sa-wizard-footer > div {
    width  : 100%;
    display: flex;
    gap    : .5rem;
  }
  .sa-wizard-footer .btn-outline-secondary,
  .sa-wizard-footer .btn-light {
    min-height    : 44px;
    flex          : 1;
    display       : inline-flex;
    align-items   : center;
    justify-content: center;
    font-size     : .85rem;
  }

  /* ── Form controls: taller tap target ──────────────────────────────── */
  .sa-card-body .form-control:not(textarea),
  .sa-card-body .form-select {
    min-height: 44px;
  }

  /* ── Password input group: wrap buttons on phone ────────────────────── */
  .sa-card-body .input-group {
    flex-wrap: wrap;
    gap      : .3rem;
  }
  .sa-card-body .input-group .form-control {
    flex          : 1 0 100%;
    border-radius : var(--sa-radius-sm) !important;
    min-height    : 44px;
    width         : 100%;
  }
  .sa-card-body .input-group > .btn {
    flex          : 1;
    min-height    : 40px;
    border-radius : var(--sa-radius-sm) !important;
    display       : inline-flex;
    align-items   : center;
    justify-content: center;
    border-top-left-radius: var(--sa-radius-sm) !important;
    border-top-right-radius: var(--sa-radius-sm) !important;
  }

  /* ── Module card: wrap controls below info on narrow screens ────────── */
  .sa-module-card {
    flex-wrap : wrap;
    gap       : .5rem;
  }
  .sa-module-controls {
    width          : 100%;
    justify-content: flex-end;
    padding-top    : .4rem;
    border-top     : 1px solid var(--sa-row-divider);
    gap            : .5rem;
  }
  .sa-configure-btn {
    min-height: 36px;
    padding   : .4rem 1rem;
  }

  /* ── Auth option cards: full-height tap target ──────────────────────── */
  .sa-auth-card {
    min-height: 56px;
    padding   : .85rem 1rem;
  }

  /* ── Role tab: stack header and make manage-roles btn full-width ─────── */
  .sa-roles-tab-header {
    flex-direction: column;
    align-items   : flex-start !important;
    gap           : .5rem;
  }
  .sa-roles-tab-header .btn {
    width         : 100%;
    min-height    : 44px;
    justify-content: center;
    display       : flex;
    align-items   : center;
  }

  /* ── Role cards: full-width on phone ────────────────────────────────── */
  .sa-role-card {
    min-height: 52px;
  }
  .sa-role-card input[type="radio"],
  .sa-role-card input[type="checkbox"] {
    width : 1.25rem;
    height: 1.25rem;
  }

  /* ── Access card (company access step): taller tap area ────────────── */
  .sa-access-card {
    min-height: 56px;
    padding   : .8rem .9rem;
  }
  .sa-access-card input[type="radio"] {
    width : 1.1rem;
    height: 1.1rem;
  }

  /* ── Company picker toolbar: full-width search ──────────────────────── */
  .sa-access-search {
    max-width: 100%;
    flex     : 1 1 100%;
  }
  .sa-access-toolbar { flex-wrap: wrap; }

  /* ── Company table: ensure readable GSTIN column ───────────────────── */
  .sa-card-body .table.table-sm td,
  .sa-card-body .table.table-sm th {
    font-size: .78rem;
    padding  : .45rem .4rem;
  }

  /* ── Edit Role: remove inline max-width on role name input ──────────── */
  .sa-card-body .form-control { max-width: none; }

  /* ── Save footer (EditRole): stack and full-width on mobile ─────────── */
  .sa-save-footer {
    flex-direction: column;
    gap           : .5rem;
  }
  .sa-save-footer .btn,
  .sa-save-footer .sa-primary-btn {
    width         : 100%;
    min-height    : 44px;
    justify-content: center;
    display       : flex;
    align-items   : center;
  }

  /* ── Staff list: search toolbar full-width on mobile ────────────────── */
  .sa-card-body .input-group.input-group-sm,
  .d-flex.flex-wrap .input-group.input-group-sm {
    max-width: 100% !important;
    width    : 100%;
  }
  .d-flex.flex-wrap .form-select.form-select-sm {
    max-width: 100% !important;
    width    : 100%;
  }

  /* ── Staff table: card-style rows on mobile using data-label attrs ──── */
  .sa-staff-table thead { display: none; }
  .sa-staff-table tbody tr {
    display      : block;
    border       : var(--sa-border);
    border-radius: var(--sa-radius-sm);
    margin-bottom: .6rem;
    padding      : .6rem .75rem;
    background   : var(--sa-surface);
    box-shadow   : var(--sa-shadow-xs);
  }
  .sa-staff-table tbody tr:hover { background: var(--sa-surface); }
  .sa-staff-table tbody td {
    display    : flex;
    align-items: center;
    justify-content: space-between;
    padding    : .3rem 0;
    border-bottom: 1px solid var(--sa-row-divider);
    font-size  : .82rem;
    min-height : 36px;
  }
  .sa-staff-table tbody td:last-child { border-bottom: none; }
  .sa-staff-table tbody td::before {
    content    : attr(data-label);
    font-weight: clamp(1, calc(600 + var(--spq-fw-delta, 0)), 1000);
    font-size  : .72rem;
    color      : var(--sa-text-muted);
    flex-shrink: 0;
    margin-right: .75rem;
    min-width  : 80px;
  }
  /* Actions column: right-align buttons */
  .sa-staff-table tbody td.text-end {
    justify-content: space-between;
  }
  .sa-staff-table tbody td.text-end::before {
    content: attr(data-label);
  }
}

/* ═══════════════════════════════════════════════════════════════════════════
   STAFF WIZARD v2 (12-Oct-2026) — icon stepper, step header, access cards,
   company picker list, branch bottom-sheet. Loaded after the rules above, so
   these win; desktop and phone rules are separated by the media queries below.
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── Stepper ───────────────────────────────────────────────────────────── */
.sa-stepper-wrap {
  margin       : 0 0 1.5rem;
  padding      : .35rem;
  border       : var(--sa-border);
  border-radius: var(--sa-radius);
  background   : var(--sa-section-bg);
}
.sa-stepper-wrap .sa-wizard-tabs {
  display              : grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap                  : .35rem;
  margin               : 0;
  border-bottom        : none;
}
.sa-stepper-wrap .sa-wizard-tab { min-width: 0; }
.sa-stepper-wrap .sa-wizard-tab-btn {
  width        : 100%;
  min-height   : 52px;
  gap          : .65rem;
  padding      : .5rem .75rem;
  margin       : 0;
  border       : 1px solid transparent;
  border-radius: var(--sa-radius-sm);
  text-align   : left;
  transition   : background .15s, border-color .15s, box-shadow .15s, color .15s;
}
.sa-stepper-wrap .sa-wizard-tab-btn:hover { background: var(--sa-surface); }
.sa-stepper-wrap .sa-wizard-tab-btn.active {
  background  : var(--sa-surface);
  border-color: color-mix(in srgb, var(--sa-accent) 35%, var(--sa-row-divider));
  box-shadow  : var(--sa-shadow-xs);
}
.sa-stepper-wrap .sa-step {
  width        : 32px;
  height       : 32px;
  border-radius: 10px;
  font-size    : .8rem;
  background   : var(--sa-surface);
  border       : var(--sa-border);
  color        : var(--sa-text-muted);
}
.sa-stepper-wrap .sa-wizard-tab-btn.active .sa-step {
  background  : var(--sa-accent);
  border-color: var(--sa-accent);
  color       : #fff;
  box-shadow  : 0 4px 12px color-mix(in srgb, var(--sa-accent) 35%, transparent);
}
.sa-stepper-wrap .sa-wizard-tab-btn.completed .sa-step {
  background  : var(--sa-success-soft);
  border-color: color-mix(in srgb, #28a745 35%, var(--sa-row-divider));
  color       : var(--sa-badge-ok-fg);
}
.sa-step-label {
  display       : flex;
  flex-direction: column;
  min-width     : 0;
  line-height   : 1.2;
}
.sa-step-num {
  font-size     : .62rem;
  letter-spacing: .04em;
  text-transform: uppercase;
  color         : var(--sa-text-muted);
}
.sa-step-name {
  font-size    : .8rem;
  font-weight  : clamp(1, calc(600 + var(--spq-fw-delta, 0)), 1000);
  color        : var(--sa-text);
  overflow     : hidden;
  text-overflow: ellipsis;
  white-space  : nowrap;
}
.sa-wizard-tab-btn.active .sa-step-name { color: var(--theme-text, var(--sa-accent)); }
.sa-stepper-mobile { display: none; }
.sa-stepper-progress {
  height       : 3px;
  margin       : .35rem .35rem 0;
  border-radius: 3px;
  background   : var(--sa-row-divider);
  overflow     : hidden;
}
.sa-stepper-progress > span {
  display      : block;
  height       : 100%;
  border-radius: 3px;
  background   : var(--sa-accent);
  transition   : width .3s ease;
}
.sa-stepper-progress > .p1 { width: 20%; }
.sa-stepper-progress > .p2 { width: 40%; }
.sa-stepper-progress > .p3 { width: 60%; }
.sa-stepper-progress > .p4 { width: 80%; }
.sa-stepper-progress > .p5 { width: 100%; }

/* ── Step header (icon + title + summary pill) ────────────────────────── */
.sa-step-head {
  display      : flex;
  align-items  : center;
  gap          : .85rem;
  margin-bottom: 1rem;
}
.sa-step-head-icon {
  display        : inline-flex;
  align-items    : center;
  justify-content: center;
  flex-shrink    : 0;
  width          : 42px;
  height         : 42px;
  border-radius  : 12px;
  background     : var(--sa-accent-soft);
  color          : var(--theme-text, var(--sa-accent));
  font-size      : 1.05rem;
}
.sa-step-head-icon.sm { width: 34px; height: 34px; border-radius: 10px; font-size: .9rem; }
.sa-step-head-text { flex: 1; min-width: 0; }
.sa-step-head-title {
  font-size  : 1rem;
  font-weight: clamp(1, calc(600 + var(--spq-fw-delta, 0)), 1000);
  color      : var(--sa-text);
}
.sa-step-head-sub { font-size: .78rem; color: var(--sa-text-muted); }
.sa-min0 { min-width: 0; }

/* ── Access level cards ───────────────────────────────────────────────── */
.sa-access-options {
  grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
  gap                  : .75rem;
}
button.sa-access-card {
  position     : relative;
  width        : 100%;
  align-items  : center;
  gap          : .75rem;
  padding      : .85rem 2.4rem .85rem .85rem;
  text-align   : left;
  color        : inherit;
  font         : inherit;
  border-radius: var(--sa-radius);
}
button.sa-access-card:focus-visible {
  outline       : 2px solid var(--sa-accent);
  outline-offset: 2px;
}
.sa-access-card-icon {
  display        : inline-flex;
  align-items    : center;
  justify-content: center;
  flex-shrink    : 0;
  width          : 38px;
  height         : 38px;
  border-radius  : 10px;
  background     : var(--sa-surface-2);
  color          : var(--sa-text-muted);
  font-size      : .95rem;
  transition     : background .15s, color .15s;
}
.sa-access-card.selected .sa-access-card-icon {
  background: var(--sa-accent);
  color     : #fff;
}
.sa-access-card-name { font-size: .85rem; }
.sa-access-card.selected .sa-access-card-name { color: var(--theme-text, var(--sa-accent)); }
.sa-access-card-check {
  position       : absolute;
  top            : .7rem;
  right          : .7rem;
  display        : inline-flex;
  align-items    : center;
  justify-content: center;
  width          : 20px;
  height         : 20px;
  border-radius  : 50%;
  border         : 1.5px solid var(--sa-row-divider);
  color          : transparent;
  font-size      : .6rem;
  transition     : background .15s, border-color .15s, color .15s;
}
.sa-access-card.selected .sa-access-card-check {
  background  : var(--sa-accent);
  border-color: var(--sa-accent);
  color       : #fff;
}

/* ── Mode explanation note ────────────────────────────────────────────── */
.sa-access-note {
  display      : flex;
  align-items  : flex-start;
  gap          : .7rem;
  margin-top   : .9rem;
  padding      : .75rem .9rem;
  border-radius: var(--sa-radius-sm);
  border       : 1px solid var(--sa-count-border);
  background   : var(--sa-accent-soft);
  font-size    : .78rem;
}
.sa-access-note > i { margin-top: .15rem; color: var(--theme-text, var(--sa-accent)); }
.sa-access-note-title {
  font-weight: clamp(1, calc(600 + var(--spq-fw-delta, 0)), 1000);
  color      : var(--sa-text);
}
.sa-access-note-text { color: var(--sa-text-muted); }
.sa-access-note.ok   { border-color: color-mix(in srgb, #28a745 30%, var(--sa-row-divider)); background: var(--sa-success-soft); }
.sa-access-note.ok > i { color: var(--sa-badge-ok-fg); }
.sa-access-note.warn { border-color: color-mix(in srgb, #ca8a04 35%, var(--sa-row-divider)); background: var(--sa-warning-soft); }
.sa-access-note.warn > i { color: var(--sa-badge-warn-fg); }

/* ── Company picker ───────────────────────────────────────────────────── */
.sa-picker {
  margin-top   : 1.1rem;
  border       : var(--sa-border);
  border-radius: var(--sa-radius);
  background   : var(--sa-surface);
  overflow     : hidden;
}
.sa-picker-head {
  display      : flex;
  align-items  : center;
  gap          : .75rem;
  flex-wrap    : wrap;
  padding      : .75rem;
  background   : var(--sa-section-bg);
  border-bottom: var(--sa-border);
}
.sa-picker-head .sa-access-search { flex: 1 1 280px; max-width: none; }
.sa-access-search input { padding-right: 2rem; min-height: 38px; }
.sa-access-search-clear {
  position   : absolute;
  right      : .35rem;
  top        : 50%;
  transform  : translateY(-50%);
  border     : none;
  background : none;
  padding    : .25rem;
  color      : var(--sa-text-muted);
  line-height: 1;
}
.sa-access-search .sa-access-search-clear i { position: static; transform: none; font-size: .9rem; }
.sa-picker-all {
  display    : inline-flex;
  align-items: center;
  gap        : .45rem;
  margin     : 0;
  font-size  : .8rem;
  color      : var(--sa-text);
  cursor     : pointer;
  white-space: nowrap;
}
.sa-picker-meta {
  display      : flex;
  gap          : .35rem;
  padding      : .45rem .9rem;
  font-size    : .72rem;
  color        : var(--sa-text-muted);
  border-bottom: var(--sa-border);
}
.sa-picker-meta strong { color: var(--sa-text); }

.sa-co-list {
  list-style                : none;
  margin                    : 0;
  padding                   : 0;
  max-height                : 420px;
  overflow-y                : auto;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior       : contain;
}
.sa-co-row {
  display      : flex;
  align-items  : center;
  gap          : .5rem;
  padding      : 0 .75rem 0 0;
  border-bottom: 1px solid var(--sa-row-divider);
  transition   : background .12s;
}
.sa-co-row:last-child { border-bottom: none; }
.sa-co-row:hover { background: var(--sa-row-hover); }
.sa-co-row.selected { background: var(--sa-accent-soft); }
.sa-co-main {
  display    : flex;
  align-items: center;
  gap        : .7rem;
  flex       : 1;
  min-width  : 0;
  margin     : 0;
  padding    : .6rem .9rem;
  cursor     : pointer;
}
.sa-co-main .form-check-input { flex-shrink: 0; margin: 0; }
.sa-co-avatar {
  display        : inline-flex;
  align-items    : center;
  justify-content: center;
  flex-shrink    : 0;
  width          : 34px;
  height         : 34px;
  border-radius  : 50%;
  background     : var(--sa-surface-2);
  color          : var(--sa-text-muted);
  font-size      : .8rem;
  font-weight    : clamp(1, calc(700 + var(--spq-fw-delta, 0)), 1000);
}
.sa-co-row.selected .sa-co-avatar { background: var(--sa-accent-mid); color: var(--theme-text, var(--sa-accent)); }
.sa-co-text { display: flex; flex-direction: column; min-width: 0; line-height: 1.3; }
.sa-co-name {
  font-size    : .82rem;
  font-weight  : clamp(1, calc(600 + var(--spq-fw-delta, 0)), 1000);
  color        : var(--sa-text);
  overflow     : hidden;
  text-overflow: ellipsis;
  white-space  : nowrap;
}
.sa-co-trade {
  font-size    : .72rem;
  color        : var(--sa-text-muted);
  overflow     : hidden;
  text-overflow: ellipsis;
  white-space  : nowrap;
}
.sa-co-gstin {
  font-family   : ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size     : .7rem;
  letter-spacing: .03em;
  color         : var(--sa-text-muted);
}
.sa-co-branch {
  display      : inline-flex;
  align-items  : center;
  gap          : .4rem;
  flex-shrink  : 0;
  min-height   : 32px;
  padding      : .3rem .7rem;
  border       : var(--sa-border);
  border-radius: 999px;
  background   : var(--sa-surface);
  color        : var(--sa-text);
  font-size    : .74rem;
  white-space  : nowrap;
  transition   : border-color .15s, background .15s;
}
.sa-co-branch:hover { border-color: var(--sa-accent); background: var(--sa-accent-soft); }
.sa-co-branch > i:first-child { color: var(--theme-text, var(--sa-accent)); }
.sa-co-branch.restricted {
  border-color: color-mix(in srgb, #ca8a04 40%, var(--sa-row-divider));
  background  : var(--sa-warning-soft);
}
.sa-co-branch-chev { font-size: .6rem; color: var(--sa-text-muted); }

/* ── Branch sheet ─────────────────────────────────────────────────────── */
.sa-sheet .modal-content {
  border       : var(--sa-border);
  border-radius: var(--sa-radius);
  background   : var(--sa-surface);
  box-shadow   : var(--sa-shadow-md);
}
.sa-sheet .modal-header { border-bottom: var(--sa-border); }
.sa-sheet .modal-footer { border-top: var(--sa-border); }
.sa-sheet-grip { display: none; }
.sa-sheet-title { display: flex; align-items: center; gap: .65rem; min-width: 0; }
.sa-sheet-title .modal-title { font-size: .95rem; margin: 0; }
.sa-sheet-sub {
  font-size    : .74rem;
  color        : var(--sa-text-muted);
  overflow     : hidden;
  text-overflow: ellipsis;
  white-space  : nowrap;
}
.sa-switch-row {
  display        : flex;
  align-items    : center;
  justify-content: space-between;
  gap            : 1rem;
  margin         : 0 0 .75rem;
  padding        : .75rem .9rem;
  border         : var(--sa-border);
  border-radius  : var(--sa-radius-sm);
  background     : var(--sa-section-bg);
  cursor         : pointer;
}
.sa-switch-title {
  display    : block;
  font-size  : .85rem;
  font-weight: clamp(1, calc(600 + var(--spq-fw-delta, 0)), 1000);
  color      : var(--sa-text);
}
.sa-switch-hint { display: block; font-size: .72rem; color: var(--sa-text-muted); }
.sa-branch-list { list-style: none; margin: 0; padding: 0; display: grid; gap: .4rem; }
.sa-branch-row {
  display      : flex;
  align-items  : center;
  gap          : .6rem;
  margin       : 0;
  padding      : .6rem .8rem;
  border       : var(--sa-border);
  border-radius: var(--sa-radius-sm);
  font-size    : .82rem;
  color        : var(--sa-text);
  cursor       : pointer;
  transition   : background .12s, border-color .12s;
}
.sa-branch-row .form-check-input { margin: 0; flex-shrink: 0; }
.sa-branch-row > i { color: var(--sa-text-muted); font-size: .8rem; }
.sa-branch-row.checked { border-color: var(--sa-accent); background: var(--sa-accent-soft); }
.sa-branch-row.checked > i { color: var(--theme-text, var(--sa-accent)); }
.sa-sheet-msg {
  display    : flex;
  align-items: center;
  gap        : .5rem;
  margin-top : .6rem;
  font-size  : .78rem;
  color      : var(--sa-text-muted);
}
.sa-sheet-msg.warn { color: var(--sa-badge-warn-fg); }
.sa-step-panel { min-height: 200px; }

/* ── Phone / tablet: native-app presentation ──────────────────────────── */
@media (max-width: 767.98px) {
  /* Stepper: compact icon tiles plus a "Company Access / 4 of 5" caption */
  .sa-stepper-wrap { margin-bottom: 1rem; padding: .5rem; }
  .sa-stepper-wrap .sa-wizard-tabs { gap: .25rem; }
  .sa-stepper-wrap .sa-wizard-tab-btn {
    justify-content: center;
    min-height     : 44px;
    padding        : .3rem;
  }
  .sa-step-label { display: none; }
  .sa-stepper-wrap .sa-step { width: 36px; height: 36px; font-size: .85rem; }
  .sa-stepper-mobile {
    display        : flex;
    justify-content: space-between;
    align-items    : baseline;
    padding        : .45rem .35rem 0;
    font-size      : .78rem;
  }
  .sa-stepper-mobile-name {
    font-weight: clamp(1, calc(600 + var(--spq-fw-delta, 0)), 1000);
    color      : var(--sa-text);
  }
  .sa-stepper-mobile-count { color: var(--sa-text-muted); font-size: .72rem; }

  .sa-step-head { flex-wrap: wrap; gap: .65rem; }
  .sa-step-head .sa-access-count { order: 3; }

  /* Mode cards: single-column list rows with 60px tap targets */
  .sa-access-options { grid-template-columns: 1fr; gap: .5rem; }
  button.sa-access-card { min-height: 60px; padding: .75rem 2.4rem .75rem .75rem; }
  .sa-access-card-check { top: 50%; transform: translateY(-50%); }

  /* Picker: sticky search, full-height rows, page scroll instead of inner scroll */
  .sa-picker-head { position: sticky; top: 0; z-index: 3; }
  .sa-picker-head .sa-access-search { flex: 1 1 100%; }
  .sa-access-search input { min-height: 44px; font-size: 16px; }
  .sa-picker-all { min-height: 44px; }
  .sa-picker-all .form-check-input { width: 1.25rem; height: 1.25rem; }
  .sa-co-list { max-height: none; overflow: visible; }
  .sa-co-row { flex-wrap: wrap; padding: 0 0 .25rem; }
  .sa-co-main { min-height: 60px; padding: .65rem .8rem; flex: 1 1 100%; }
  .sa-co-main .form-check-input { width: 1.3rem; height: 1.3rem; }
  .sa-co-branch { min-height: 40px; margin: 0 .8rem .5rem 3.85rem; }
  .sa-co-row:hover { background: inherit; }
  .sa-co-row.selected:hover { background: var(--sa-accent-soft); }
  .sa-co-row:active { background: var(--sa-row-hover); }

  /* Branch modal becomes a bottom sheet */
  .sa-sheet .modal-dialog {
    position  : fixed;
    left      : 0;
    right     : 0;
    bottom    : 0;
    margin    : 0;
    max-width : none;
    min-height: 0;
    transform : translateY(100%);
    transition: transform .25s ease-out;
  }
  .sa-sheet.show .modal-dialog { transform: none; }
  .sa-sheet .modal-content {
    border-radius : 18px 18px 0 0;
    border-bottom : none;
    max-height    : 85vh;
    padding-bottom: env(safe-area-inset-bottom);
  }
  .sa-sheet .modal-body { overflow-y: auto; -webkit-overflow-scrolling: touch; }
  .sa-sheet-grip {
    display      : block;
    width        : 40px;
    height       : 4px;
    margin       : .5rem auto 0;
    border-radius: 4px;
    background   : var(--sa-row-divider);
  }
  .sa-sheet .btn-close { width: 44px; height: 44px; padding: 0; }
  .sa-switch-row, .sa-branch-row { min-height: 52px; }
  .sa-mod-opt-link, .sa-mod-opt-urllink { min-height: 44px; }
  .sa-branch-row .form-check-input { width: 1.25rem; height: 1.25rem; }
  .sa-sheet-done { width: 100%; min-height: 48px; }

  /* Footer clears the home indicator */
  .sa-wizard-footer { padding-bottom: calc(.5rem + env(safe-area-inset-bottom)); }
}

@media (prefers-reduced-motion: reduce) {
  .sa-sheet .modal-dialog,
  .sa-stepper-progress > span,
  .sa-animate { transition: none; animation: none; }
}

/* ── "All existing companies" cut-off panel ──────────────────────────── */
.sa-cutoff {
  display      : flex;
  align-items  : center;
  gap          : .8rem;
  flex-wrap    : wrap;
  margin-top   : .75rem;
  padding      : .75rem .9rem;
  border       : var(--sa-border);
  border-radius: var(--sa-radius-sm);
  background   : var(--sa-surface);
}
.sa-cutoff-icon {
  display        : inline-flex;
  align-items    : center;
  justify-content: center;
  width          : 36px;
  height         : 36px;
  border-radius  : 10px;
  background     : var(--sa-accent-soft);
  color          : var(--theme-text, var(--sa-accent));
  flex-shrink    : 0;
}
.sa-cutoff-text { flex: 1; min-width: 160px; }
.sa-cutoff-title { font-size: .72rem; color: var(--sa-text-muted); }
.sa-cutoff-value {
  font-size  : .88rem;
  font-weight: clamp(1, calc(600 + var(--spq-fw-delta, 0)), 1000);
  color      : var(--sa-text);
  font-variant-numeric: tabular-nums;
}
.sa-cutoff-toggle {
  display    : inline-flex;
  align-items: center;
  gap        : .5rem;
  margin     : 0;
  font-size  : .78rem;
  color      : var(--sa-text);
  cursor     : pointer;
}
@media (max-width: 767.98px) {
  .sa-cutoff-toggle { flex: 1 1 100%; min-height: 44px; }
}

/* ── Module screen picker (My Workspace / All Clients Reports) ────────── */
.sa-mod-mode { grid-template-columns: repeat(2, minmax(0, 1fr)); margin-bottom: .9rem; }
.sa-mod-meta { display: flex; align-items: center; border: none; padding: 0 .1rem .5rem; }
.sa-branch-row.sa-row-soon { opacity: .6; cursor: default; }
@media (max-width: 767.98px) {
  .sa-mod-mode { grid-template-columns: 1fr; }
}

/* ═══════════════════════════════════════════════════════════════════════════
   #region Arun — Module Access at three levels (18-Oct-2026)
   Shared editor states: licence-locked modules / screens, read-only editor,
   the "follows role" banner, and the pinned tenant-owner row.
   ═══════════════════════════════════════════════════════════════════════════ */
.sa-module-card.locked {
  border-style: dashed;
  background  : var(--sa-badge-neu-bg);
  box-shadow  : none;
}
.sa-module-card.locked .sa-module-icon { filter: grayscale(1); opacity: .6; }
.sa-module-card.locked .sa-module-name { color: var(--sa-text-muted); }
.sa-mod-badge.locked   { background: var(--sa-badge-neu-bg); color: var(--sa-badge-neu-fg); }
.sa-modal-cat-item.locked,
.sa-branch-row.locked  { opacity: .55; cursor: not-allowed; }
.sa-modal-cat-item.locked:hover { background: transparent; }
.sa-active-pill.locked { background: var(--sa-badge-neu-bg); color: var(--sa-badge-neu-fg); }
.sa-editor-readonly .form-check-input:disabled { opacity: .85; }
.sa-access-note.info { border-color: color-mix(in srgb, var(--sa-accent) 30%, var(--sa-row-divider)); background: var(--sa-accent-soft); }
.sa-access-note .spq-ab { flex-shrink: 0; align-self: center; }
.sa-row-owner > td { background: color-mix(in srgb, var(--sa-accent) 6%, var(--sa-surface)); }
@media (max-width: 767.98px) {
  .sa-access-note { flex-wrap: wrap; }
  .sa-access-note .spq-ab { width: 100%; min-height: 44px; }
}
/* #endregion */
/* #region Arun — owner row: the "from licence" badge is the link to the read-only view (18-Oct-2026) */
.sa-owner-access-link { border: 0; cursor: pointer; }
.sa-owner-access-link:hover { filter: brightness(.95); text-decoration: underline; }
/* #endregion */
/* #region Arun (19-Oct-2026) — group heading inside a module's screen picker (Reports: all clients / company families) */
.sa-branch-list .sa-branch-group {
  list-style: none; padding: .55rem .25rem .25rem; margin: 0;
  font-size: .68rem; letter-spacing: .06em; text-transform: uppercase;
  color: var(--sa-text-muted);
  font-weight: clamp(1, calc(600 + var(--spq-fw-delta, 0)), 1000);
}
/* #endregion */
/* #region Arun (19-Oct-2026) — role editor step 1: the "who this change reaches" callout */
.sa-role-impact { border-width: 1.5px; }
.sa-role-impact .sa-access-note-text { font-size: .85rem; line-height: 1.55; }
.sa-impact-num {
  display: inline-block; min-width: 1.6em; padding: 0 .35em; border-radius: 6px; text-align: center;
  background: var(--sa-accent); color: #fff;
  font-weight: clamp(1, calc(700 + var(--spq-fw-delta, 0)), 1000);
}
.sa-impact-num.warn { background: var(--sa-badge-warn-fg); }
/* #endregion */
/* #region Arun (19-Oct-2026) — role permissions grid: own scroll region with a frozen header + search */
.sa-op-grid.sa-op-sticky { max-height: calc(100vh - 330px); min-height: 240px; overflow: auto; }
.sa-op-grid.sa-op-sticky thead th {
  position: sticky; top: 0; z-index: 3;
  background: var(--sa-section-bg);
  box-shadow: 0 1px 0 var(--sa-row-divider);
}
.sa-op-grid.sa-op-sticky tfoot td { position: sticky; bottom: 0; z-index: 2; background: var(--sa-section-bg); box-shadow: 0 -1px 0 var(--sa-row-divider); }
.sa-perm-search { max-width: 560px; }
@media (max-width: 767.98px) {
  .sa-op-grid.sa-op-sticky { max-height: calc(100vh - 280px); }
  .sa-perm-search { max-width: none; }
}
/* #endregion */