/* ═══════════════════════════════════════════════════════════════════════════
   STAFF ADMIN — Modern UI Layer  |  staff-admin.css
   Prefix: .sa-   Scoped rules only. Zero Bootstrap overrides.
   Reads --theme-default from the active Cuba colour scheme.
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── Design tokens ─────────────────────────────────────────────────────── */
:root {
  --sa-accent      : var(--theme-default, #7366ff);
  --sa-accent-rgb  : var(--theme-default-rgb, 115, 102, 255);
  --sa-accent-soft : color-mix(in srgb, var(--sa-accent) 10%, white);
  --sa-accent-mid  : color-mix(in srgb, var(--sa-accent) 22%, white);
  --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 #e8ebf0;
  --sa-surface     : #ffffff;
  --sa-bg          : #f5f6fa;
  --sa-text        : #2d3142;
  --sa-text-muted  : #8e95a8;
  --sa-success-soft: color-mix(in srgb, #28a745 12%, white);
  --sa-danger-soft : color-mix(in srgb, #dc3545 10%, white);
  --sa-warning-soft: color-mix(in srgb, #ffc107 15%, white);
}

/* ── Page wrapper ───────────────────────────────────────────────────────── */
.sa-page {
  background: var(--sa-bg);
  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;
}

.sa-card-header {
  display        : flex;
  align-items    : center;
  gap            : .75rem;
  padding        : 1rem 1.5rem;
  background     : var(--sa-surface);
  border-bottom  : var(--sa-border);
}

.sa-card-header .sa-title {
  font-size   : 1rem;
  font-weight : 600;
  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 #eaecf0;
  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    : 500;
  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  : 600;
}

/* 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    : 700;
  background     : #e8ebf0;
  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   : #fcfcfe;
  margin-top   : 1.25rem;
}

.sa-section-title {
  display     : flex;
  align-items : center;
  gap         : .5rem;
  font-size   : .85rem;
  font-weight : 600;
  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 #e8ebf0;
  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%, white);
  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: 600;
  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 #e8ebf0;
  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: 600;
  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    : 500;
  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   : 600;
  white-space   : nowrap;
}
.sa-mod-badge.all    { background: #d1fae5; color: #065f46; }
.sa-mod-badge.custom { background: var(--sa-accent-mid); color: var(--sa-accent); }
.sa-mod-badge.none   { background: #fff3cd; color: #856404; }
.sa-mod-badge.soon   { background: #e9ecef; color: #6c757d; }

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

/* ═══════════════════════════════════════════════════════════════════════════
   ROLE CARDS (Step 5)
   ═══════════════════════════════════════════════════════════════════════════ */
.sa-role-card {
  padding      : .85rem 1rem;
  border       : 1.5px solid #e8ebf0;
  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%, white);
  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: 600;
  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   : #f8f9fb;
  font-weight  : 600;
  font-size    : .75rem;
  color        : var(--sa-text-muted);
  padding      : .6rem .75rem;
  white-space  : nowrap;
  border-bottom: 1px solid #e8ebf0;
  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: #f8f9fb; }
.sa-op-grid tbody tr.sa-row-active {
  background: var(--sa-accent-soft);
}

.sa-op-grid tbody tr.sa-op-group-header td {
  background    : #eef1f6;
  padding       : .35rem .75rem;
  font-size     : .72rem;
  font-weight   : 700;
  text-transform: uppercase;
  letter-spacing: .04em;
  color         : var(--sa-text-muted);
  border-bottom : 1px solid #dde1ea;
}
.sa-op-grid tbody tr.sa-op-group-header:hover { background: #eef1f6; }

.sa-op-grid tbody td {
  padding        : .5rem .75rem;
  vertical-align : middle;
  border-bottom  : 1px solid #f0f2f5;
  font-size      : .82rem;
}
.sa-op-grid tbody td:first-child {
  font-weight: 600;
  color      : var(--sa-text);
}

.sa-op-grid tfoot td {
  background   : #f8f9fb;
  padding      : .5rem .75rem;
  border-top   : 1.5px solid #e8ebf0;
  font-size    : .75rem;
  font-weight  : 600;
  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  : 600;
  white-space  : nowrap;
  line-height  : 1.5;
}
.sa-op-badge.Read     { background:#e0f3fb; color:#0c63a7; }
.sa-op-badge.Write    { background:#d1f8e3; color:#166534; }
.sa-op-badge.Delete   { background:#fee2e2; color:#b91c1c; }
.sa-op-badge.Export   { background:#ede9fe; color:#5b21b6; }
.sa-op-badge.Download { background:#f1f5f9; color:#475569; }
.sa-op-badge.Upload   { background:#fef9c3; color:#854d0e; }

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

/* ═══════════════════════════════════════════════════════════════════════════
   STAFF TABLE  (StaffList page)
   ═══════════════════════════════════════════════════════════════════════════ */
.sa-staff-table {
  font-size: .82rem;
}
.sa-staff-table thead th {
  background   : #f8f9fb;
  color        : var(--sa-text-muted);
  font-weight  : 600;
  font-size    : .73rem;
  letter-spacing: .03em;
  text-transform: uppercase;
  padding      : .6rem 1rem;
  border-bottom: 2px solid #e8ebf0;
  white-space  : nowrap;
}
.sa-staff-table tbody td {
  padding       : .65rem 1rem;
  vertical-align: middle;
  border-bottom : 1px solid #f0f2f5;
}
.sa-staff-table tbody tr:hover { background: #f8f9fb; }
.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  : 600;
}
.sa-status-badge::before {
  content      : '';
  width        : 6px;
  height       : 6px;
  border-radius: 50%;
}
.sa-status-badge.active   { background:#d1f8e3; color:#166534; }
.sa-status-badge.active::before  { background:#16a34a; }
.sa-status-badge.suspended{ background:#fee2e2; color:#b91c1c; }
.sa-status-badge.suspended::before { background:#ef4444; }

.sa-user-type-badge {
  padding      : .2rem .55rem;
  border-radius: 20px;
  font-size    : .68rem;
  font-weight  : 600;
}
.sa-user-type-badge.staff  { background:#ede9fe; color:#5b21b6; }
.sa-user-type-badge.client { background:#e0f2fe; color:#0369a1; }

/* 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: #856404; border-color: #ffc107; }
.sa-action-btn.danger:hover  { background: var(--sa-danger-soft);  color: #b91c1c; border-color: #dc3545; }
.sa-action-btn.success:hover { background: var(--sa-success-soft); color: #166534; 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 #f0f2f5;
  transition     : background .12s;
}
.sa-roles-list-item:last-child { border-bottom: none; }
.sa-roles-list-item:hover { background: #f8f9fb; }

.sa-roles-list-item .sa-role-name {
  font-size  : .82rem;
  font-weight: 600;
  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     : var(--sa-surface);
  border-bottom  : var(--sa-border);
}
.sa-panel-title {
  display    : flex;
  align-items: center;
  gap        : .5rem;
  font-size  : .9rem;
  font-weight: 600;
  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    : 600;
  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 #e8ebf0;
  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     : #f8f9fb;
  border-bottom  : 1px solid #e8ebf0;
  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: 600;
  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 #f4f5f8;
  cursor         : pointer;
  transition     : background .1s;
}
.sa-modal-cat-item:last-child { border-bottom: none; }
.sa-modal-cat-item:hover { background: #f8f9fb; }
.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  : 600;
  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: 500;
  color      : #16a34a;
}

/* ═══════════════════════════════════════════════════════════════════════════
   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);   }
}
.sa-animate { animation: sa-fade-in .22s ease both; }