/* ============================================================
   USER MANAGEMENT MODULE — THEME
   Design language: "Deep Slate" — authoritative, secure, precise
   Accent: Violet-Indigo spectrum  (#6366f1 → #8b5cf6)
   Vibe: Identity & Access — feels trustworthy, not playful
   ============================================================ */


/* ─────────────────────────────────────────────────────────────
   MODULE TOKEN LAYER
   Applies when <div class="content-wrapper" data-module="user-mgmt">
───────────────────────────────────────────────────────────── */
.content-wrapper[data-module="user-mgmt"] {
  --um-primary:        #6366f1;
  --um-primary-rgb:    99, 102, 241;
  --um-accent:         #4f46e5;
  --um-accent-rgb:     79, 70, 229;
  --um-violet:         #8b5cf6;
  --um-violet-rgb:     139, 92, 246;

  --um-surface:        #ffffff;
  --um-surface-raised: #f8f9fc;
  --um-surface-tint:   #eef2ff;

  --um-border:         #e4e6f0;
  --um-border-strong:  #c7cbe0;

  --um-text-primary:   #1e1f3b;
  --um-text-secondary: #4b5071;
  --um-text-muted:     #8b91b0;

  --um-shadow-sm:  0 1px 3px rgba(99, 102, 241, 0.06), 0 1px 2px rgba(0,0,0,0.04);
  --um-shadow-md:  0 4px 16px rgba(99, 102, 241, 0.10), 0 2px 4px rgba(0,0,0,0.04);
  --um-shadow-lg:  0 8px 32px rgba(99, 102, 241, 0.14), 0 4px 8px rgba(0,0,0,0.06);

  --um-glow:       rgba(99, 102, 241, 0.12);
  --um-stripe:     rgba(99, 102, 241, 0.025);

  --um-radius-sm:  4px;
  --um-radius-md:  8px;
  --um-radius-lg:  12px;
  --um-radius-pill:20px;

  --um-ease:       cubic-bezier(0.4, 0, 0.2, 1);
  --um-ease-spring:cubic-bezier(0.34, 1.56, 0.64, 1);
  --um-dur-fast:   120ms;
  --um-dur-base:   200ms;
  --um-dur-slow:   320ms;
}


/* ─────────────────────────────────────────────────────────────
   PAGE SCAFFOLD
───────────────────────────────────────────────────────────── */
.content-wrapper[data-module="user-mgmt"] {
  background: #f4f5fb;
}

/* Content header — subtle left-ruled accent strip */
[data-module="user-mgmt"] .content-header {
  background: var(--um-surface);
  border-bottom: 1px solid var(--um-border);
  padding: 18px 24px 14px;
  position: relative;
  overflow: hidden;
}

[data-module="user-mgmt"] .content-header::before {
  content: "";
  position: absolute;
  left: 0; top: 0; bottom: 0;
  width: 4px;
  background: linear-gradient(180deg, var(--um-primary) 0%, var(--um-violet) 100%);
  border-radius: 0 2px 2px 0;
}

[data-module="user-mgmt"] .content-header h1,
[data-module="user-mgmt"] .content-header h3 {
  font-family: 'DM Sans', 'Outfit', -apple-system, BlinkMacSystemFont, sans-serif;
  font-weight: 700;
  font-size: 1.2rem;
  color: var(--um-text-primary);
  letter-spacing: -0.025em;
  margin: 0;
}

/* Module eyebrow label */
[data-module="user-mgmt"] .content-header::after {
  content: "USER MANAGEMENT";
  position: absolute;
  top: 10px; right: 24px;
  font-size: 0.625rem;
  font-weight: 800;
  letter-spacing: 0.18em;
  color: var(--um-primary);
  opacity: 0.5;
  font-family: 'DM Mono', 'JetBrains Mono', monospace;
}

[data-module="user-mgmt"] .breadcrumb-item a {
  color: var(--um-primary);
  font-size: 0.8rem;
  text-decoration: none;
  font-weight: 500;
}
[data-module="user-mgmt"] .breadcrumb-item.active {
  color: var(--um-text-muted);
  font-size: 0.8rem;
}


/* ─────────────────────────────────────────────────────────────
   CARD CHROME
───────────────────────────────────────────────────────────── */
[data-module="user-mgmt"] .card,
[data-module="user-mgmt"] .card.card-outline {
  background: var(--um-surface);
  border: 1px solid var(--um-border);
  border-radius: var(--um-radius-lg);
  box-shadow: var(--um-shadow-sm);
  transition: box-shadow var(--um-dur-base) var(--um-ease);
}

[data-module="user-mgmt"] .card.card-outline {
  border-top: 3px solid var(--um-primary);
}

[data-module="user-mgmt"] .card:hover,
[data-module="user-mgmt"] .card.card-outline:hover {
  box-shadow: var(--um-shadow-md);
}

[data-module="user-mgmt"] .card-header {
  background: transparent;
  border-bottom: 1px solid var(--um-border);
  padding: 14px 18px;
  font-size: 0.875rem;
  font-weight: 700;
  color: var(--um-text-primary);
  letter-spacing: -0.01em;
  display: flex;
  align-items: center;
  gap: 8px;
}

[data-module="user-mgmt"] .card-header .card-icon {
  width: 28px; height: 28px;
  border-radius: var(--um-radius-sm);
  background: var(--um-surface-tint);
  color: var(--um-primary);
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 0.8rem;
}


/* ─────────────────────────────────────────────────────────────
   TABLE — Precision Grid
───────────────────────────────────────────────────────────── */
[data-module="user-mgmt"] table.dataTable,
[data-module="user-mgmt"] .table {
  border: none;
  border-collapse: collapse;
  font-size: 0.82rem;
  color: var(--um-text-secondary);
  background: transparent;
  font-family: 'DM Sans', -apple-system, sans-serif;
}

/* Column headers — ruled, uppercase, tight tracking */
[data-module="user-mgmt"] table.dataTable thead th,
[data-module="user-mgmt"] .table thead th {
  background: var(--um-surface-raised);
  border: none;
  border-bottom: 2px solid var(--um-border-strong);
  font-size: 0.68rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--um-text-primary);
  padding: 11px 14px;
  white-space: nowrap;
  font-family: 'DM Mono', monospace;
}

/* First header cell gets subtle left-edge glow */
[data-module="user-mgmt"] table.dataTable thead th:first-child,
[data-module="user-mgmt"] .table thead th:first-child {
  border-left: 3px solid var(--um-primary);
  padding-left: 11px;
}

/* Body rows */
[data-module="user-mgmt"] table.dataTable tbody td,
[data-module="user-mgmt"] .table tbody td {
  border: none;
  border-bottom: 1px solid #f0f1f8;
  padding: 7px 12px;
  background: transparent;
  vertical-align: middle;
  transition: background var(--um-dur-fast) var(--um-ease);
}

/* Hover — inset glow on left edge */
[data-module="user-mgmt"] table.dataTable tbody tr:hover td,
[data-module="user-mgmt"] .table-hover tbody tr:hover td {
  background: var(--um-surface-tint) !important;
  box-shadow: inset 3px 0 0 var(--um-primary);
}

/* Selected row */
[data-module="user-mgmt"] table.dataTable tbody tr.selected td {
  background: rgba(var(--um-primary-rgb), 0.06) !important;
  box-shadow: inset 3px 0 0 var(--um-primary);
}

/* Odd stripe — ultra-subtle, only visible on scrutiny */
[data-module="user-mgmt"] .table-striped tbody tr:nth-of-type(odd) td {
  background: var(--um-stripe);
}


/* ─────────────────────────────────────────────────────────────
   DATATABLE CHROME
───────────────────────────────────────────────────────────── */
[data-module="user-mgmt"] .dataTables_wrapper {
  padding: 0;
}

[data-module="user-mgmt"] .dataTables_wrapper .dataTables_filter input {
  border: 1.5px solid var(--um-border-strong);
  border-radius: var(--um-radius-pill);
  padding: 6px 14px 6px 32px;
  font-size: 0.8rem;
  background: var(--um-surface-raised);
  color: var(--um-text-primary);
  transition: all var(--um-dur-base) var(--um-ease);
  font-family: 'DM Sans', sans-serif;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' fill='none' viewBox='0 0 24 24'%3E%3Ccircle cx='11' cy='11' r='7' stroke='%236366f1' stroke-width='2'/%3E%3Cpath stroke='%236366f1' stroke-linecap='round' stroke-width='2' d='m21 21-4.35-4.35'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: 10px center;
}

[data-module="user-mgmt"] .dataTables_wrapper .dataTables_filter input:focus {
  border-color: var(--um-primary);
  box-shadow: 0 0 0 3px var(--um-glow);
  outline: none;
  background-color: #fff;
}

/* Pagination */
[data-module="user-mgmt"] .dataTables_wrapper .dataTables_paginate .paginate_button {
  border: none !important;
  background: transparent !important;
  color: var(--um-text-muted) !important;
  font-size: 0.78rem;
  font-weight: 600;
  padding: 5px 10px;
  margin: 0 1px;
  border-radius: var(--um-radius-sm);
  transition: all var(--um-dur-fast) var(--um-ease);
  font-family: 'DM Mono', monospace;
}

[data-module="user-mgmt"] .dataTables_wrapper .dataTables_paginate .paginate_button.current,
[data-module="user-mgmt"] .dataTables_wrapper .dataTables_paginate .paginate_button.current:hover {
  background: var(--um-primary) !important;
  color: white !important;
  border: none !important;
  box-shadow: 0 2px 8px rgba(var(--um-primary-rgb), 0.35) !important;
}

[data-module="user-mgmt"] .dataTables_wrapper .dataTables_paginate .paginate_button:hover {
  background: var(--um-surface-tint) !important;
  color: var(--um-primary) !important;
  border: none !important;
}

[data-module="user-mgmt"] .dataTables_wrapper .dataTables_info {
  font-size: 0.72rem;
  color: var(--um-text-muted);
  font-family: 'DM Mono', monospace;
}

[data-module="user-mgmt"] .dataTables_wrapper .dataTables_length select {
  border: 1.5px solid var(--um-border);
  border-radius: var(--um-radius-sm);
  padding: 4px 8px;
  font-size: 0.78rem;
  background: var(--um-surface);
  color: var(--um-text-secondary);
}


/* ─────────────────────────────────────────────────────────────
   FORM CONTROLS
───────────────────────────────────────────────────────────── */
[data-module="user-mgmt"] .form-control,
[data-module="user-mgmt"] .form-select {
  border: 1.5px solid var(--um-border);
  border-radius: var(--um-radius-md);
  font-size: 0.875rem;
  padding: 8px 12px;
  background: var(--um-surface);
  color: var(--um-text-primary);
  transition:
    border-color var(--um-dur-base) var(--um-ease),
    box-shadow  var(--um-dur-base) var(--um-ease);
  font-family: 'DM Sans', sans-serif;
}

[data-module="user-mgmt"] .form-control:focus,
[data-module="user-mgmt"] .form-select:focus {
  border-color: var(--um-primary);
  box-shadow: 0 0 0 3px var(--um-glow);
  outline: none;
  background: #fff;
}

[data-module="user-mgmt"] .form-control:disabled,
[data-module="user-mgmt"] .form-select:disabled {
  background: var(--um-surface-raised);
  color: var(--um-text-muted);
  border-color: var(--um-border);
  cursor: not-allowed;
}

[data-module="user-mgmt"] .form-label {
  font-size: 0.75rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--um-text-secondary);
  margin-bottom: 6px;
  font-family: 'DM Mono', monospace;
}


/* ─────────────────────────────────────────────────────────────
   BUTTONS
───────────────────────────────────────────────────────────── */
[data-module="user-mgmt"] .btn-primary {
  background: var(--um-primary);
  border: none;
  border-radius: var(--um-radius-md);
  font-size: 0.85rem;
  font-weight: 600;
  padding: 8px 18px;
  letter-spacing: -0.01em;
  transition:
    background   var(--um-dur-base) var(--um-ease),
    box-shadow   var(--um-dur-base) var(--um-ease),
    transform    var(--um-dur-fast) var(--um-ease);
  font-family: 'DM Sans', sans-serif;
}

[data-module="user-mgmt"] .btn-primary:hover,
[data-module="user-mgmt"] .btn-primary:focus {
  background: var(--um-accent);
  box-shadow: 0 4px 14px rgba(var(--um-primary-rgb), 0.35);
  transform: translateY(-1px);
}

[data-module="user-mgmt"] .btn-primary:active {
  transform: translateY(0);
  box-shadow: 0 1px 4px rgba(var(--um-primary-rgb), 0.2);
}

[data-module="user-mgmt"] .btn-outline-primary {
  color: var(--um-primary);
  border: 1.5px solid var(--um-primary);
  background: transparent;
  border-radius: var(--um-radius-md);
  font-size: 0.85rem;
  font-weight: 600;
  padding: 7px 18px;
  transition: all var(--um-dur-base) var(--um-ease);
  font-family: 'DM Sans', sans-serif;
}

[data-module="user-mgmt"] .btn-outline-primary:hover {
  background: var(--um-surface-tint);
  box-shadow: 0 0 0 3px var(--um-glow);
}

/* Danger */
[data-module="user-mgmt"] .btn-danger {
  background: #ef4444;
  border: none;
  border-radius: var(--um-radius-md);
  font-weight: 600;
  font-size: 0.85rem;
  padding: 8px 18px;
  transition: all var(--um-dur-base) var(--um-ease);
}
[data-module="user-mgmt"] .btn-danger:hover {
  background: #dc2626;
  box-shadow: 0 4px 14px rgba(239, 68, 68, 0.30);
  transform: translateY(-1px);
}

/* Ghost / secondary action */
[data-module="user-mgmt"] .btn-secondary {
  background: var(--um-surface-raised);
  border: 1.5px solid var(--um-border);
  color: var(--um-text-secondary);
  border-radius: var(--um-radius-md);
  font-size: 0.85rem;
  font-weight: 600;
  padding: 7px 18px;
  transition: all var(--um-dur-base) var(--um-ease);
}
[data-module="user-mgmt"] .btn-secondary:hover {
  border-color: var(--um-primary);
  color: var(--um-primary);
  background: var(--um-surface-tint);
}

/* Table action buttons */
[data-module="user-mgmt"] .dt-action-btn {
  font-size: 0.72rem;
  font-weight: 700;
  padding: 4px 10px;
  border-radius: var(--um-radius-sm);
  border: 1.5px solid var(--um-border);
  background: var(--um-surface);
  color: var(--um-text-muted);
  transition: all var(--um-dur-fast) var(--um-ease);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  font-family: 'DM Mono', monospace;
}
[data-module="user-mgmt"] .dt-action-btn:hover {
  border-color: var(--um-primary);
  color: var(--um-primary);
  background: var(--um-surface-tint);
}
[data-module="user-mgmt"] .dt-action-btn.danger:hover {
  border-color: #ef4444;
  color: #ef4444;
  background: #fff5f5;
}


/* ─────────────────────────────────────────────────────────────
   BADGES & STATUS PILLS
───────────────────────────────────────────────────────────── */
[data-module="user-mgmt"] .um-badge {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 0.675rem;
  font-weight: 700;
  padding: 3px 10px;
  border-radius: var(--um-radius-pill);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  font-family: 'DM Mono', monospace;
}

/* Role badges — each role gets its own identity */
[data-module="user-mgmt"] .um-badge-admin {
  background: rgba(var(--um-primary-rgb), 0.12);
  color: var(--um-primary);
  border: 1px solid rgba(var(--um-primary-rgb), 0.25);
}
[data-module="user-mgmt"] .um-badge-manager {
  background: rgba(139, 92, 246, 0.10);
  color: #7c3aed;
  border: 1px solid rgba(139, 92, 246, 0.22);
}
[data-module="user-mgmt"] .um-badge-staff {
  background: rgba(16, 185, 129, 0.09);
  color: #059669;
  border: 1px solid rgba(16, 185, 129, 0.22);
}
[data-module="user-mgmt"] .um-badge-viewer {
  background: rgba(100, 116, 139, 0.08);
  color: #475569;
  border: 1px solid rgba(100, 116, 139, 0.2);
}

/* Status badges */
[data-module="user-mgmt"] .um-status-active {
  background: #ecfdf5;
  color: #059669;
  border: 1px solid #a7f3d0;
}
[data-module="user-mgmt"] .um-status-active::before {
  content: "";
  width: 6px; height: 6px;
  border-radius: 50%;
  background: #10b981;
  display: inline-block;
  animation: um-pulse 2s ease-in-out infinite;
}
[data-module="user-mgmt"] .um-status-inactive {
  background: #fef2f2;
  color: #dc2626;
  border: 1px solid #fecaca;
}
[data-module="user-mgmt"] .um-status-pending {
  background: #fffbeb;
  color: #d97706;
  border: 1px solid #fde68a;
}
[data-module="user-mgmt"] .um-status-locked {
  background: #f1f5f9;
  color: #64748b;
  border: 1px solid #cbd5e1;
}

@keyframes um-pulse {
  0%, 100% { opacity: 1;   transform: scale(1); }
  50%       { opacity: 0.6; transform: scale(1.3); }
}


/* ─────────────────────────────────────────────────────────────
   USER AVATAR — Monogram style
───────────────────────────────────────────────────────────── */
[data-module="user-mgmt"] .um-avatar {
  width: 34px; height: 34px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--um-primary) 0%, var(--um-violet) 100%);
  color: white;
  font-size: 0.72rem;
  font-weight: 800;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  letter-spacing: 0.03em;
  font-family: 'DM Sans', sans-serif;
  flex-shrink: 0;
  box-shadow: 0 0 0 2px white, 0 0 0 3px rgba(var(--um-primary-rgb), 0.25);
}

/* Size variants */
[data-module="user-mgmt"] .um-avatar-sm {
  width: 26px; height: 26px;
  font-size: 0.625rem;
}
[data-module="user-mgmt"] .um-avatar-lg {
  width: 48px; height: 48px;
  font-size: 1rem;
}

/* Avatar with photo */
[data-module="user-mgmt"] .um-avatar img {
  width: 100%; height: 100%;
  border-radius: 50%;
  object-fit: cover;
}

/* Avatar identity row in table */
[data-module="user-mgmt"] .um-user-cell {
  display: flex;
  align-items: center;
  gap: 10px;
}
[data-module="user-mgmt"] .um-user-name {
  font-weight: 600;
  color: var(--um-text-primary);
  font-size: 0.82rem;
  line-height: 1.2;
}
[data-module="user-mgmt"] .um-user-email {
  font-size: 0.7rem;
  color: var(--um-text-muted);
  font-family: 'DM Mono', monospace;
}


/* ─────────────────────────────────────────────────────────────
   FILTER CARD — Refined for User Module
───────────────────────────────────────────────────────────── */
[data-module="user-mgmt"] .y5-filter-card {
  border: 1.5px solid var(--um-border);
  border-left: 3px solid var(--um-primary);
  border-radius: var(--um-radius-lg);
  overflow: hidden;
  transition: box-shadow var(--um-dur-base) var(--um-ease);
}

[data-module="user-mgmt"] .y5-filter-card:has([id$="FilterCollapse"].show) {
  box-shadow: 0 4px 20px rgba(var(--um-primary-rgb), 0.1);
}

/* Toggle button */
[data-module="user-mgmt"] .y5-filter-toggle-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 6px 5px 12px;
  border-radius: var(--um-radius-pill);
  border: 1.5px solid rgba(var(--um-primary-rgb), 0.3);
  background: rgba(var(--um-primary-rgb), 0.04);
  color: var(--um-primary);
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.02em;
  cursor: pointer;
  transition: all var(--um-dur-base) var(--um-ease);
  white-space: nowrap;
  user-select: none;
  font-family: 'DM Sans', sans-serif;
}

[data-module="user-mgmt"] .y5-filter-toggle-btn:hover {
  background: rgba(var(--um-primary-rgb), 0.09);
  border-color: var(--um-primary);
  box-shadow: 0 0 0 3px rgba(var(--um-primary-rgb), 0.08);
}

[data-module="user-mgmt"] .y5-filter-toggle-btn:not(.collapsed) {
  background: var(--um-primary);
  border-color: var(--um-primary);
  color: #fff;
  box-shadow: 0 3px 12px rgba(var(--um-primary-rgb), 0.35);
}

[data-module="user-mgmt"] .y5-ftb-chip {
  display: inline-flex; align-items: center; justify-content: center;
  width: 26px; height: 22px;
  border-radius: 12px;
  background: rgba(255,255,255,0.18);
  border: 1px solid rgba(var(--um-primary-rgb), 0.18);
  transition: all var(--um-dur-fast) var(--um-ease);
}

[data-module="user-mgmt"] .y5-filter-toggle-btn:not(.collapsed) .y5-ftb-chip {
  background: rgba(255,255,255,0.22);
  border-color: rgba(255,255,255,0.28);
}

[data-module="user-mgmt"] .y5-ftb-chevron {
  font-size: 0.58rem;
  transition: transform 0.28s var(--um-ease-spring);
}

[data-module="user-mgmt"] .y5-filter-toggle-btn:not(.collapsed) .y5-ftb-chevron {
  transform: rotate(180deg);
}

/* Active filter badge */
[data-module="user-mgmt"] .y5-active-filter-badge {
  display: none;
  align-items: center;
  gap: 5px;
  padding: 3px 9px 3px 6px;
  border-radius: var(--um-radius-pill);
  background: rgba(var(--um-primary-rgb), 0.08);
  border: 1px solid rgba(var(--um-primary-rgb), 0.2);
  animation: um-badge-pop 0.22s var(--um-ease-spring);
}

[data-module="user-mgmt"] .y5-afb-dot {
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--um-primary);
  animation: um-pulse 2s ease-in-out infinite;
}

[data-module="user-mgmt"] .y5-afb-text {
  font-size: 0.68rem;
  font-weight: 700;
  color: var(--um-primary);
  font-family: 'DM Mono', monospace;
}

@keyframes um-badge-pop {
  from { transform: scale(0.7); opacity: 0; }
  to   { transform: scale(1);   opacity: 1; }
}

/* Filter panel body */
[data-module="user-mgmt"] .y5-filter-card [id$="FilterCollapse"].collapsing {
  transition: height 0.22s var(--um-ease);
}

[data-module="user-mgmt"] .y5-filter-card .card-body {
  border-top: 1px dashed rgba(var(--um-primary-rgb), 0.16);
  background: rgba(var(--um-primary-rgb), 0.012);
  animation: um-filter-slide 0.2s var(--um-ease);
}

@keyframes um-filter-slide {
  from { opacity: 0; transform: translateY(-6px); }
  to   { opacity: 1; transform: translateY(0); }
}


/* ─────────────────────────────────────────────────────────────
   KPI / STAT CARDS
───────────────────────────────────────────────────────────── */
[data-module="user-mgmt"] .um-stat-card {
  background: var(--um-surface);
  border: 1px solid var(--um-border);
  border-radius: var(--um-radius-lg);
  padding: 18px 20px;
  position: relative;
  overflow: hidden;
  transition: all var(--um-dur-base) var(--um-ease);
  cursor: default;
}

[data-module="user-mgmt"] .um-stat-card::before {
  content: "";
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 3px;
  background: linear-gradient(90deg, var(--um-primary), var(--um-violet));
  border-radius: var(--um-radius-lg) var(--um-radius-lg) 0 0;
}

[data-module="user-mgmt"] .um-stat-card:hover {
  box-shadow: var(--um-shadow-md);
  transform: translateY(-2px);
  border-color: rgba(var(--um-primary-rgb), 0.3);
}

[data-module="user-mgmt"] .um-stat-value {
  font-size: 1.8rem;
  font-weight: 800;
  color: var(--um-text-primary);
  line-height: 1;
  letter-spacing: -0.04em;
  font-family: 'DM Sans', sans-serif;
}

[data-module="user-mgmt"] .um-stat-label {
  font-size: 0.68rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--um-text-muted);
  margin-top: 4px;
  font-family: 'DM Mono', monospace;
}

[data-module="user-mgmt"] .um-stat-icon {
  position: absolute;
  right: 18px; top: 50%;
  transform: translateY(-50%);
  width: 42px; height: 42px;
  border-radius: var(--um-radius-md);
  background: var(--um-surface-tint);
  color: var(--um-primary);
  display: flex; align-items: center; justify-content: center;
  font-size: 1.1rem;
}

[data-module="user-mgmt"] .um-stat-delta {
  font-size: 0.72rem;
  font-weight: 600;
  margin-top: 6px;
  font-family: 'DM Mono', monospace;
}
[data-module="user-mgmt"] .um-stat-delta.up { color: #10b981; }
[data-module="user-mgmt"] .um-stat-delta.down { color: #ef4444; }


/* ─────────────────────────────────────────────────────────────
   PERMISSION MATRIX GRID
   (role × module checkbox grid)
───────────────────────────────────────────────────────────── */
[data-module="user-mgmt"] .um-perm-grid {
  font-size: 0.78rem;
  border-collapse: separate;
  border-spacing: 0;
  width: 100%;
}

[data-module="user-mgmt"] .um-perm-grid thead th {
  background: var(--um-surface-tint);
  color: var(--um-primary);
  font-size: 0.65rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  padding: 8px 12px;
  border-bottom: 2px solid rgba(var(--um-primary-rgb), 0.2);
  text-align: center;
  font-family: 'DM Mono', monospace;
}

[data-module="user-mgmt"] .um-perm-grid thead th:first-child {
  text-align: left;
  border-left: 3px solid var(--um-primary);
}

[data-module="user-mgmt"] .um-perm-grid tbody td {
  border-bottom: 1px solid #f0f1f8;
  padding: 8px 12px;
  text-align: center;
  color: var(--um-text-secondary);
  font-weight: 500;
}

[data-module="user-mgmt"] .um-perm-grid tbody td:first-child {
  text-align: left;
  font-weight: 600;
  color: var(--um-text-primary);
  border-left: 3px solid transparent;
}

[data-module="user-mgmt"] .um-perm-grid tbody tr:hover td {
  background: var(--um-surface-tint);
}
[data-module="user-mgmt"] .um-perm-grid tbody tr:hover td:first-child {
  border-left-color: var(--um-primary);
}

/* Permission checkbox custom */
[data-module="user-mgmt"] .um-perm-check {
  appearance: none;
  width: 16px; height: 16px;
  border: 2px solid var(--um-border-strong);
  border-radius: 4px;
  background: var(--um-surface);
  cursor: pointer;
  position: relative;
  transition: all var(--um-dur-fast) var(--um-ease);
  display: inline-block;
  vertical-align: middle;
}

[data-module="user-mgmt"] .um-perm-check:checked {
  background: var(--um-primary);
  border-color: var(--um-primary);
}

[data-module="user-mgmt"] .um-perm-check:checked::after {
  content: "";
  position: absolute;
  top: 1px; left: 4px;
  width: 5px; height: 8px;
  border: 2px solid white;
  border-top: none; border-left: none;
  transform: rotate(45deg);
}

[data-module="user-mgmt"] .um-perm-check:focus {
  box-shadow: 0 0 0 3px var(--um-glow);
  outline: none;
}


/* ─────────────────────────────────────────────────────────────
   MODAL — Identity panel style
───────────────────────────────────────────────────────────── */
[data-module="user-mgmt"] .modal-content {
  border: 1px solid var(--um-border);
  border-top: 3px solid var(--um-primary);
  border-radius: var(--um-radius-lg);
  box-shadow: var(--um-shadow-lg);
  font-family: 'DM Sans', -apple-system, sans-serif;
}

[data-module="user-mgmt"] .modal-header {
  border-bottom: 1px solid var(--um-border);
  padding: 18px 22px;
  background: var(--um-surface-raised);
  border-radius: var(--um-radius-lg) var(--um-radius-lg) 0 0;
}

[data-module="user-mgmt"] .modal-header .modal-title {
  font-size: 1rem;
  font-weight: 700;
  color: var(--um-text-primary);
  letter-spacing: -0.02em;
  display: flex;
  align-items: center;
  gap: 8px;
}

[data-module="user-mgmt"] .modal-header .modal-title::before {
  content: "";
  width: 4px; height: 20px;
  background: linear-gradient(180deg, var(--um-primary), var(--um-violet));
  border-radius: 4px;
  display: inline-block;
}

[data-module="user-mgmt"] .modal-footer {
  border-top: 1px solid var(--um-border);
  padding: 14px 22px;
  background: var(--um-surface-raised);
  gap: 8px;
}

[data-module="user-mgmt"] .modal-body {
  padding: 22px;
}


/* ─────────────────────────────────────────────────────────────
   ALERTS
───────────────────────────────────────────────────────────── */
[data-module="user-mgmt"] .alert-primary {
  background: rgba(var(--um-primary-rgb), 0.06);
  border: 1px solid rgba(var(--um-primary-rgb), 0.18);
  border-left: 3px solid var(--um-primary);
  color: var(--um-text-primary);
  border-radius: var(--um-radius-md);
  font-size: 0.85rem;
}

[data-module="user-mgmt"] .alert-danger {
  background: #fef2f2;
  border: 1px solid #fecaca;
  border-left: 3px solid #ef4444;
  color: #991b1b;
  border-radius: var(--um-radius-md);
  font-size: 0.85rem;
}

[data-module="user-mgmt"] .alert-warning {
  background: #fffbeb;
  border: 1px solid #fde68a;
  border-left: 3px solid #f59e0b;
  color: #78350f;
  border-radius: var(--um-radius-md);
  font-size: 0.85rem;
}


/* ─────────────────────────────────────────────────────────────
   SIDEBAR ACTIVE STATE
───────────────────────────────────────────────────────────── */
body:has(.content-wrapper[data-module="user-mgmt"]) .nav-treeview .nav-link[href*="LTE_USER"],
body:has(.content-wrapper[data-module="user-mgmt"]) .nav-treeview .nav-link[href*="LTE_ADMIN"] {
  background: rgba(var(--um-primary-rgb), 0.08);
  color: var(--um-primary) !important;
  border-left: 2px solid var(--um-primary);
  border-radius: 0 var(--um-radius-sm) var(--um-radius-sm) 0;
  font-weight: 600;
}


/* ─────────────────────────────────────────────────────────────
   LAST LOGIN / ACTIVITY META ROW
───────────────────────────────────────────────────────────── */
[data-module="user-mgmt"] .um-meta-row {
  font-size: 0.7rem;
  color: var(--um-text-muted);
  display: flex;
  align-items: center;
  gap: 4px;
  font-family: 'DM Mono', monospace;
}

[data-module="user-mgmt"] .um-meta-row .um-meta-dot {
  width: 4px; height: 4px;
  border-radius: 50%;
  background: var(--um-border-strong);
}


/* ─────────────────────────────────────────────────────────────
   SECTION TITLES
───────────────────────────────────────────────────────────── */
[data-module="user-mgmt"] .um-section-title {
  font-size: 0.68rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--um-text-muted);
  padding-bottom: 8px;
  margin-bottom: 12px;
  border-bottom: 1px solid var(--um-border);
  font-family: 'DM Mono', monospace;
  display: flex;
  align-items: center;
  gap: 8px;
}

[data-module="user-mgmt"] .um-section-title::before {
  content: "";
  width: 14px; height: 2px;
  background: linear-gradient(90deg, var(--um-primary), var(--um-violet));
  border-radius: 2px;
  display: inline-block;
}


/* ─────────────────────────────────────────────────────────────
   DARK MODE
───────────────────────────────────────────────────────────── */
body.dark-mode .content-wrapper[data-module="user-mgmt"] {
  background: #0d0f1e;
}

body.dark-mode [data-module="user-mgmt"] {
  --um-surface:        #151829;
  --um-surface-raised: #1c1f35;
  --um-surface-tint:   #1f2443;
  --um-border:         #2a2d47;
  --um-border-strong:  #383c60;
  --um-text-primary:   #e8eaf6;
  --um-text-secondary: #9ca3c5;
  --um-text-muted:     #5b607d;
  --um-shadow-sm:  0 1px 4px rgba(0,0,0,0.3);
  --um-shadow-md:  0 4px 16px rgba(0,0,0,0.4), 0 0 0 1px rgba(var(--um-primary-rgb),0.1);
  --um-shadow-lg:  0 8px 32px rgba(0,0,0,0.5), 0 0 0 1px rgba(var(--um-primary-rgb),0.12);
  --um-glow:       rgba(99, 102, 241, 0.18);
  --um-stripe:     rgba(99, 102, 241, 0.03);
}

body.dark-mode [data-module="user-mgmt"] .content-header {
  background: var(--um-surface);
  border-bottom-color: var(--um-border);
}

body.dark-mode [data-module="user-mgmt"] .content-header h1,
body.dark-mode [data-module="user-mgmt"] .content-header h3 {
  color: var(--um-text-primary);
}

body.dark-mode [data-module="user-mgmt"] table.dataTable,
body.dark-mode [data-module="user-mgmt"] .table {
  color: var(--um-text-secondary);
}

body.dark-mode [data-module="user-mgmt"] table.dataTable thead th,
body.dark-mode [data-module="user-mgmt"] .table thead th {
  background: var(--um-surface-raised);
  border-bottom-color: var(--um-border-strong);
  color: var(--um-text-primary);
}

body.dark-mode [data-module="user-mgmt"] table.dataTable tbody td,
body.dark-mode [data-module="user-mgmt"] .table tbody td {
  border-bottom-color: var(--um-border);
}

body.dark-mode [data-module="user-mgmt"] table.dataTable tbody tr:hover td,
body.dark-mode [data-module="user-mgmt"] .table-hover tbody tr:hover td {
  background: var(--um-surface-tint) !important;
}

body.dark-mode [data-module="user-mgmt"] .card,
body.dark-mode [data-module="user-mgmt"] .card.card-outline {
  background: var(--um-surface);
  border-color: var(--um-border);
}

body.dark-mode [data-module="user-mgmt"] .form-control,
body.dark-mode [data-module="user-mgmt"] .form-select {
  background: var(--um-surface-raised);
  border-color: var(--um-border-strong);
  color: var(--um-text-primary);
}

body.dark-mode [data-module="user-mgmt"] .form-control:focus,
body.dark-mode [data-module="user-mgmt"] .form-select:focus {
  background: var(--um-surface);
}

body.dark-mode [data-module="user-mgmt"] .um-stat-card {
  background: var(--um-surface);
  border-color: var(--um-border);
}

body.dark-mode [data-module="user-mgmt"] .modal-content {
  background: var(--um-surface);
  border-color: var(--um-border);
}

body.dark-mode [data-module="user-mgmt"] .modal-header,
body.dark-mode [data-module="user-mgmt"] .modal-footer {
  background: var(--um-surface-raised);
  border-color: var(--um-border);
}

body.dark-mode [data-module="user-mgmt"] .um-perm-check {
  background: var(--um-surface-raised);
  border-color: var(--um-border-strong);
}

body.dark-mode [data-module="user-mgmt"] .um-status-active {
  background: rgba(16, 185, 129, 0.12);
  color: #34d399;
  border-color: rgba(16, 185, 129, 0.25);
}
body.dark-mode [data-module="user-mgmt"] .um-status-inactive {
  background: rgba(239, 68, 68, 0.10);
  color: #f87171;
  border-color: rgba(239, 68, 68, 0.22);
}
body.dark-mode [data-module="user-mgmt"] .um-status-pending {
  background: rgba(245, 158, 11, 0.10);
  color: #fbbf24;
  border-color: rgba(245, 158, 11, 0.22);
}


/* ─────────────────────────────────────────────────────────────
   RESPONSIVE
───────────────────────────────────────────────────────────── */
@media (max-width: 767.98px) {
  [data-module="user-mgmt"] table.dataTable,
  [data-module="user-mgmt"] .table {
    font-size: 0.75rem;
  }

  [data-module="user-mgmt"] table.dataTable thead th,
  [data-module="user-mgmt"] .table thead th {
    font-size: 0.62rem;
    padding: 9px 10px;
  }

  [data-module="user-mgmt"] table.dataTable tbody td,
  [data-module="user-mgmt"] .table tbody td {
    padding: 9px 10px;
  }

  [data-module="user-mgmt"] .um-stat-card {
    padding: 14px 16px;
  }

  [data-module="user-mgmt"] .um-stat-value {
    font-size: 1.5rem;
  }
}


/* ─────────────────────────────────────────────────────────────
   PRINT
───────────────────────────────────────────────────────────── */
@media print {
  [data-module="user-mgmt"] table.dataTable,
  [data-module="user-mgmt"] .table {
    font-size: 9pt;
  }

  [data-module="user-mgmt"] .card {
    border: 1px solid #ccc;
    box-shadow: none;
  }

  [data-module="user-mgmt"] .um-stat-card::before {
    display: none;
  }
}


/* ════════════════════════════════════════════════════════════════════
   UM — USER MANAGEMENT  |  Modern Light + Dark Mode
   ════════════════════════════════════════════════════════════════════ */

:root {
  --um-bg-page:          #f4f6fb;
  --um-bg-card:          #ffffff;
  --um-bg-card-alt:      #f8faff;
  --um-bg-input:         #ffffff;
  --um-bg-input-focus:   #f0f5ff;
  --um-bg-modal:         #ffffff;
  --um-bg-modal-body:    #f8faff;
  --um-bg-ctx-bar:       #eef3ff;
  --um-bg-section:       transparent;
  --um-bg-perm-head:     #1565c0;
  --um-bg-perm-subhead:  #0d47a1;
  --um-bg-perm-row:      #ffffff;
  --um-bg-perm-row-alt:  #f7f9ff;
  --um-bg-perm-hover:    #eef3ff;
  --um-bg-role-tab:      #e9ecef;
  --um-bg-role-active:   #1565c0;
  --um-bg-filter:        #ffffff;

  --um-border:           #e0e6f0;
  --um-border-input:     #ced4e0;
  --um-border-focus:     #1565c0;
  --um-border-modal:     #e0e6f0;
  --um-border-ctx:       #1565c0;
  --um-border-section:   #dde3f0;

  --um-text-primary:     #1a2340;
  --um-text-secondary:   #4a5568;
  --um-text-muted:       #8899b0;
  --um-text-label:       #374a6b;
  --um-text-section:     #8899b0;
  --um-text-input:       #1a2340;
  --um-text-placeholder: #a0aec0;
  --um-text-role-tab:    #4a5568;
  --um-text-role-active: #ffffff;
  --um-text-perm-head:   #ffffff;

  --um-blue:             #1565c0;
  --um-blue-light:       #1976d2;
  --um-blue-hover:       #1251a0;
  --um-blue-soft:        #e3f0ff;
  --um-green:            #2e7d32;
  --um-green-soft:       #e8f5e9;
  --um-orange:           #e65100;
  --um-orange-soft:      #fff3e0;
  --um-red:              #b71c1c;
  --um-red-soft:         #fce4ec;
  --um-purple:           #6a1b9a;
  --um-purple-soft:      #f3e5f5;
  --um-grey:             #424242;
  --um-grey-soft:        #f5f5f5;
  --um-slate:            #546e7a;
  --um-slate-soft:       #eceff1;

  --um-modal-hdr-grad:   linear-gradient(110deg, #0d47a1 0%, #1565c0 55%, #1976d2 100%);
  --um-modal-warn-grad:  linear-gradient(110deg, #e65100 0%, #f57c00 100%);

  --um-shadow-card:      0 2px 12px rgba(21,101,192,.08);
  --um-shadow-modal:     0 8px 40px rgba(21,101,192,.18);
  --um-shadow-input:     0 0 0 3px rgba(21,101,192,.13);
  --um-shadow-btn:       0 2px 6px rgba(21,101,192,.25);

  --um-trans:            all .18s ease;
}

.dark-mode {
  --um-bg-page:          #111827;
  --um-bg-card:          #1e2736;
  --um-bg-card-alt:      #1a2235;
  --um-bg-input:         #253047;
  --um-bg-input-focus:   #2c3a55;
  --um-bg-modal:         #1e2736;
  --um-bg-modal-body:    #1a2235;
  --um-bg-ctx-bar:       #1e2f50;
  --um-bg-section:       transparent;
  --um-bg-perm-head:     #1251a0;
  --um-bg-perm-subhead:  #0a3880;
  --um-bg-perm-row:      #1e2736;
  --um-bg-perm-row-alt:  #1a2235;
  --um-bg-perm-hover:    #1e2f50;
  --um-bg-role-tab:      #253047;
  --um-bg-role-active:   #1565c0;
  --um-bg-filter:        #1e2736;

  --um-border:           #2d3d5a;
  --um-border-input:     #374a6b;
  --um-border-focus:     #4a9fff;
  --um-border-modal:     #2d3d5a;
  --um-border-ctx:       #4a9fff;
  --um-border-section:   #2d3d5a;

  --um-text-primary:     #e8edf6;
  --um-text-secondary:   #a8b8d0;
  --um-text-muted:       #6b7f9a;
  --um-text-label:       #c0cfe8;
  --um-text-section:     #6b7f9a;
  --um-text-input:       #e8edf6;
  --um-text-placeholder: #5a6f8a;
  --um-text-role-tab:    #a8b8d0;
  --um-text-role-active: #ffffff;

  --um-blue-soft:        #1a2f55;
  --um-green-soft:       #1a2f1a;
  --um-orange-soft:      #2f1e0a;
  --um-red-soft:         #2f1010;
  --um-purple-soft:      #251530;
  --um-grey-soft:        #253047;
  --um-slate-soft:       #1e2736;

  --um-modal-hdr-grad:   linear-gradient(110deg, #0a3880 0%, #1251a0 55%, #1565c0 100%);
  --um-shadow-card:      0 2px 16px rgba(0,0,0,.35);
  --um-shadow-modal:     0 12px 50px rgba(0,0,0,.55);
  --um-shadow-input:     0 0 0 3px rgba(74,159,255,.2);
  --um-shadow-btn:       0 2px 8px rgba(0,0,0,.35);
}

/* ════════════════════════════════════════════════════════════════════
   TOAST NOTIFICATION SYSTEM
   ════════════════════════════════════════════════════════════════════ */
#um-toast-container {
  position:       fixed;
  top:            18px;
  right:          18px;
  z-index:        99999;
  display:        flex;
  flex-direction: column;
  gap:            10px;
  pointer-events: none;
  max-width:      380px;
  width:          calc(100vw - 36px);
}
.um-toast {
  display:       flex;
  align-items:   flex-start;
  gap:           11px;
  padding:       13px 15px 13px 14px;
  border-radius: 10px;
  background:    #ffffff;
  box-shadow:    0 4px 22px rgba(0,0,0,.13), 0 1.5px 5px rgba(0,0,0,.07);
  border-left:   4px solid #ccc;
  pointer-events: all;
  opacity:       0;
  transform:     translateX(30px);
  transition:    opacity .28s ease, transform .28s ease;
  position:      relative;
  overflow:      hidden;
  min-width:     260px;
}
.um-toast.um-toast-show { opacity:1; transform:translateX(0); }
.um-toast.um-toast-hide { opacity:0; transform:translateX(30px); transition:opacity .22s ease,transform .22s ease; }
.um-toast-progress { position:absolute; bottom:0; left:0; height:3px; width:100%; transform-origin:left; border-radius:0 0 0 6px; animation:umToastProgress linear forwards; }
@keyframes umToastProgress { from{transform:scaleX(1)} to{transform:scaleX(0)} }
.um-toast-icon { flex-shrink:0; width:32px; height:32px; border-radius:50%; display:flex; align-items:center; justify-content:center; font-size:.9rem; margin-top:1px; }
.um-toast-body  { flex:1; min-width:0; }
.um-toast-title { font-size:.82rem; font-weight:700; line-height:1.3; margin-bottom:2px; }
.um-toast-msg   { font-size:.77rem; line-height:1.45; color:#5a6f8a; word-break:break-word; }
.um-toast-msg ul { margin:4px 0 0 0; padding:0 0 0 16px; }
.um-toast-msg ul li { margin-bottom:2px; }
.um-toast-close { flex-shrink:0; background:none; border:none; cursor:pointer; color:#a0aec0; font-size:.75rem; padding:2px 4px; line-height:1; border-radius:4px; transition:color .15s,background .15s; margin-top:1px; }
.um-toast-close:hover { color:#333; background:#f0f0f0; }

.um-toast-success { border-left-color:#2e7d32; }
.um-toast-success .um-toast-icon  { background:#e8f5e9; color:#2e7d32; }
.um-toast-success .um-toast-title { color:#1b5e20; }
.um-toast-success .um-toast-progress { background:#4caf50; }
.um-toast-error   { border-left-color:#c62828; }
.um-toast-error   .um-toast-icon  { background:#fce4ec; color:#c62828; }
.um-toast-error   .um-toast-title { color:#b71c1c; }
.um-toast-error   .um-toast-progress { background:#e53935; }
.um-toast-warning { border-left-color:#e65100; }
.um-toast-warning .um-toast-icon  { background:#fff3e0; color:#e65100; }
.um-toast-warning .um-toast-title { color:#bf360c; }
.um-toast-warning .um-toast-progress { background:#ff7043; }
.um-toast-info    { border-left-color:#1565c0; }
.um-toast-info    .um-toast-icon  { background:#e3f0ff; color:#1565c0; }
.um-toast-info    .um-toast-title { color:#0d47a1; }
.um-toast-info    .um-toast-progress { background:#1976d2; }

.dark-mode .um-toast             { background:#1e2736; box-shadow:0 4px 22px rgba(0,0,0,.45),0 1.5px 5px rgba(0,0,0,.2); }
.dark-mode .um-toast-msg         { color:#8899b0; }
.dark-mode .um-toast-close       { color:#6b7f9a; }
.dark-mode .um-toast-close:hover { color:#e8edf6; background:#2d3d5a; }
.dark-mode .um-toast-success .um-toast-icon { background:#1a2f1a; }
.dark-mode .um-toast-error   .um-toast-icon { background:#2f1010; }
.dark-mode .um-toast-warning .um-toast-icon { background:#2f1e0a; }
.dark-mode .um-toast-info    .um-toast-icon { background:#1a2f55; }

/* ── Badges ── */
.um-badge { display:inline-block; padding:3px 11px; border-radius:20px; font-size:.71rem; font-weight:700; letter-spacing:.04em; text-transform:capitalize; line-height:1.4; }
.um-badge-active    { background:var(--um-green-soft);  color:var(--um-green);  }
.um-badge-inactive  { background:var(--um-orange-soft); color:var(--um-orange); }
.um-badge-suspended { background:var(--um-red-soft);    color:var(--um-red);    }
.um-badge-admin     { background:var(--um-blue-soft);   color:var(--um-blue);   }
.um-badge-manager   { background:var(--um-purple-soft); color:var(--um-purple); }
.um-badge-staff     { background:var(--um-grey-soft);   color:var(--um-grey);   }
.um-badge-readonly  { background:var(--um-slate-soft);  color:var(--um-slate);  }
.um-badge-custom    { background:#e8eaf6; color:#283593; }   /* custom / dynamic roles */
.um-locked-icon     { color:#e53935; margin-left:5px; font-size:.73rem; }

/* ── Modal ── */
.modal-content { background:var(--um-bg-modal) !important; border:1px solid var(--um-border-modal) !important; border-radius:14px !important; box-shadow:var(--um-shadow-modal) !important; overflow:hidden; }
.modal-body    { background:var(--um-bg-modal-body) !important; color:var(--um-text-primary) !important; }
.modal-footer  { background:var(--um-bg-modal) !important; border-top:1px solid var(--um-border) !important; padding:.85rem 1.3rem !important; }

.modal-header-blue { background:var(--um-modal-hdr-grad) !important; color:#fff !important; border-bottom:none !important; padding:1rem 1.4rem !important; border-radius:0 !important; }
.modal-header-blue .modal-title { font-size:.975rem; font-weight:700; letter-spacing:.015em; color:#fff !important; }
.modal-header-blue .btn-close   { filter:invert(1) opacity(.85); transition:opacity .15s; }
.modal-header-blue .btn-close:hover { opacity:1; }

.modal-header.bg-warning              { background:var(--um-modal-warn-grad) !important; color:#fff !important; border-bottom:none !important; }
.modal-header.bg-warning .modal-title { color:#fff !important; }
.modal-header.bg-warning .btn-close   { filter:invert(1) opacity(.85); }

/* ── Context bar ── */
#umEditContextBar { background:var(--um-bg-ctx-bar) !important; border-left:4px solid var(--um-border-ctx) !important; border-radius:8px !important; padding:9px 14px !important; color:var(--um-text-secondary) !important; }
#umEditContextBar .fw-bold, #umCtxLoginId { color:var(--um-text-primary) !important; font-size:.93rem; font-weight:700; }
#umEditContextBar .text-muted { color:var(--um-text-muted) !important; font-size:.8rem; }
#umEditContextBar strong      { color:var(--um-text-secondary) !important; }

/* ── Section dividers ── */
.um-section { font-size:.72rem; font-weight:800; text-transform:uppercase; letter-spacing:.1em; color:var(--um-text-section); margin:18px 0 9px; border-bottom:1.5px solid var(--um-border-section); padding-bottom:5px; display:flex; align-items:center; gap:7px; }
.um-section::before { content:''; display:inline-block; width:3px; height:12px; background:var(--um-blue); border-radius:2px; flex-shrink:0; }
.um-lbl { font-size:.82rem; font-weight:600; color:var(--um-text-label); margin-bottom:4px; display:block; }

/* ── Password strength ── */
.pw-strength { height:3px; border-radius:2px; margin-top:5px; transition:width .35s ease,background .35s ease; width:0; background:transparent; }
.pw-weak     { background:#e53935; width:33%; }
.pw-fair     { background:#ffa000; width:66%; }
.pw-strong   { background:#43a047; width:100%; }
#pwStrengthLabel { font-size:.71rem; font-weight:600; color:var(--um-text-muted); margin-top:2px; min-height:14px; transition:color .2s; }
#pwMismatchMsg   { font-size:.74rem; color:#e53935 !important; margin-top:4px; }

/* ── Input group pw toggle ── */
.input-group > .editable-field { border-right-color:transparent !important; border-radius:7px 0 0 7px !important; }
.input-group > .editable-field + .btn,
.input-group > .editable-field ~ .btn { border:1.5px solid var(--um-border-input) !important; border-left:none !important; border-radius:0 7px 7px 0 !important; background:var(--um-bg-input) !important; color:var(--um-text-muted) !important; transition:var(--um-trans); }
.input-group > .editable-field + .btn:hover { background:var(--um-bg-input-focus) !important; color:var(--um-blue) !important; border-color:var(--um-border-focus) !important; }
.input-group > .editable-field:focus + .btn,
.input-group > .editable-field:focus ~ .btn { border-color:var(--um-border-focus) !important; border-left:none !important; box-shadow:3px 0 0 3px rgba(21,101,192,.13),0 3px 0 3px rgba(21,101,192,.13),0 -3px 0 3px rgba(21,101,192,.13) !important; }

/* ── Danger buttons ── */
#umUnlockBtn { border-color:#f57c00 !important; color:#f57c00 !important; border-radius:7px !important; font-size:.82rem !important; font-weight:600 !important; transition:var(--um-trans); }
#umUnlockBtn:hover { background:#fff8e1 !important; color:#e65100 !important; border-color:#e65100 !important; }
.dark-mode #umUnlockBtn:hover { background:#2a1a00 !important; }
#umSuspendBtn, #umResetPwBtn { border-radius:7px !important; font-size:.8rem !important; font-weight:600 !important; transition:var(--um-trans); }

/* ── Permission matrix ── */
.perm-table-wrap { overflow-x:auto; max-height:430px; overflow-y:auto; border:1px solid var(--um-border); border-radius:8px; }
.perm-table { width:100%; border-collapse:collapse; font-size:.82rem; }
.perm-table th, .perm-table td { padding:7px 13px; border:1px solid var(--um-border); vertical-align:middle; }
.perm-table thead th { background:var(--um-bg-perm-head); color:var(--um-text-perm-head); font-weight:700; text-align:center; white-space:nowrap; font-size:.79rem; letter-spacing:.04em; text-transform:uppercase; border-color:var(--um-bg-perm-subhead); }
.perm-table thead .th-module { text-align:left; background:var(--um-bg-perm-subhead); min-width:150px; position:sticky; left:0; z-index:3; }
.perm-table tbody tr:nth-child(odd)  { background:var(--um-bg-perm-row-alt); }
.perm-table tbody tr:nth-child(even) { background:var(--um-bg-perm-row); }
.perm-table tbody tr:hover           { background:var(--um-bg-perm-hover); }
.perm-table .td-module { font-weight:600; color:var(--um-text-primary); background:var(--um-bg-card-alt); position:sticky; left:0; z-index:1; border-right:2px solid var(--um-border); }
.perm-table input[type=checkbox] { width:16px; height:16px; cursor:pointer; accent-color:var(--um-blue); }
.perm-table .role-col { text-align:center; }

/* ── Role tabs ── */
.role-tab { cursor:pointer; padding:6px 16px; border-radius:7px 7px 0 0; border:1.5px solid transparent; font-size:.8rem; font-weight:700; background:var(--um-bg-role-tab); color:var(--um-text-role-tab); margin-right:4px; display:inline-block; transition:background .15s,color .15s; margin-bottom:-1px; letter-spacing:.02em; }
.role-tab.active { background:var(--um-bg-role-active); color:var(--um-text-role-active); border-color:var(--um-bg-role-active) var(--um-bg-role-active) var(--um-bg-modal-body); }
.role-tab:hover:not(.active) { background:var(--um-blue-soft); color:var(--um-blue); }

.perm-admin-note { font-size:.75rem; color:var(--um-blue); background:var(--um-blue-soft); padding:6px 14px; border-radius:6px; display:inline-flex; align-items:center; gap:6px; margin:7px 0; font-weight:600; border:1px solid rgba(21,101,192,.15); }
#permBulkRow a { font-size:.78rem; font-weight:600; text-decoration:none; transition:opacity .15s; }
#permBulkRow a:hover { opacity:.75; text-decoration:underline; }

/* ── Filter card ── */
.y5-filter-card { background:var(--um-bg-filter); border:1px solid var(--um-border); border-radius:10px; box-shadow:var(--um-shadow-card); }

/* ── Dark-mode DataTable ── */
.dark-mode .table { color:var(--um-text-primary) !important; border-color:var(--um-border) !important; }
.dark-mode .table > thead > tr > th { background:var(--um-bg-card-alt) !important; color:var(--um-text-secondary) !important; border-color:var(--um-border) !important; }
.dark-mode .table > tbody > tr:hover > td { background:var(--um-bg-perm-hover) !important; }
.dark-mode .dataTables_wrapper .dataTables_length select,
.dark-mode .dataTables_wrapper .dataTables_filter input { background:var(--um-bg-input) !important; color:var(--um-text-input) !important; border-color:var(--um-border-input) !important; }
.dark-mode .page-item .page-link { background:var(--um-bg-card) !important; color:var(--um-text-secondary) !important; border-color:var(--um-border) !important; }
.dark-mode .page-item.active .page-link { background:var(--um-blue) !important; border-color:var(--um-blue) !important; color:#fff !important; }
.dark-mode .card { background:var(--um-bg-card) !important; border-color:var(--um-border) !important; }

/* ── Add Role sub-modal ── */
#addRoleModal .modal-header { background:linear-gradient(110deg,#1a237e,#283593) !important; color:#fff !important; border-bottom:none !important; }
#addRoleModal .modal-header .modal-title { color:#fff !important; }
#addRoleModal .modal-header .btn-close   { filter:invert(1) opacity(.85); }
#addRoleModal .modal-content { background:var(--um-bg-modal) !important; }
#addRoleModal .modal-body, #addRoleModal .modal-footer { background:var(--um-bg-modal-body) !important; color:var(--um-text-primary) !important; }
#addRoleModal .form-label { color:var(--um-text-label) !important; font-weight:600; font-size:.83rem; }

/* ── Temp-pw modal ── */
#resetPwModal .modal-content { background:var(--um-bg-modal) !important; }
#resetPwModal .modal-body    { background:var(--um-bg-modal-body) !important; color:var(--um-text-primary) !important; }
#resetPwModal .modal-footer  { background:var(--um-bg-modal) !important; border-top:1px solid var(--um-border) !important; }
#resetPwValue { font-size:1.05rem; font-weight:700; letter-spacing:.06em; }

#umSaveBtn { min-width:110px; font-weight:700 !important; font-size:.84rem !important; border-radius:7px !important; box-shadow:var(--um-shadow-btn) !important; letter-spacing:.02em; }
#permLoadingState { color:var(--um-text-muted) !important; }
.text-muted { color:var(--um-text-muted) !important; }
.form-label { color:var(--um-text-label) !important; }

@media (max-width:576px) {
  .modal-dialog       { margin:8px; }
  .um-section         { font-size:.68rem; }
  #um-toast-container { top:10px; right:10px; }
}


/* ── Assigned Company Codes widget — light/dark adaptive ── */
.um-company-codes-wrap {
  min-height: 32px;
  padding: 6px;
  border-radius: 6px;
  border: 1px solid #dee2e6;
  background: #f8f9fa;
  transition: border-color .2s, background .2s;
}

/* Dark mode: AdminLTE adds .dark-mode on <body> */
body.dark-mode .um-company-codes-wrap {
  background: #2b3035;
  border-color: #495057;
}

/* Primary-company badge (always blue) stays readable in both modes */
body.dark-mode .um-company-codes-wrap .badge.bg-primary {
  background-color: #1a73c5 !important;
  color: #fff !important;
}

/* Extra-company secondary badges */
body.dark-mode .um-company-codes-wrap .badge.bg-secondary {
  background-color: #495057 !important;
  color: #e9ecef !important;
}

/* "Loading companies…" italic placeholder */
body.dark-mode .um-company-codes-wrap #umCompanyCodesEmpty {
  color: #adb5bd !important;
}