/* ═══════════════════════════════════════════════════════════════════
   PING V3 — USERS & ACCESS PAGE PREMIUM REDESIGN  |  May 2026
   Matches the reference: clean table, tab nav, slide-in drawer
   ═══════════════════════════════════════════════════════════════════ */

/* ─── DESIGN TOKENS ─────────────────────────────────────────────── */
:root {
  --ua-white:      #ffffff;
  --ua-bg:         #f5f7fa;
  --ua-border:     #e4eaf2;
  --ua-text:       #1a2640;
  --ua-sub:        #5a6a80;
  --ua-muted:      #8a9ab0;
  --ua-brand:      #2563eb;
  --ua-brand-dk:   #1d4ed8;
  --ua-brand-bg:   #eff6ff;
  --ua-green:      #16a34a;
  --ua-green-bg:   #dcfce7;
  --ua-red:        #dc2626;
  --ua-red-bg:     #fee2e2;
  --ua-amber:      #d97706;
  --ua-radius:     10px;
  --ua-font:       "Inter", "Segoe UI", -apple-system, BlinkMacSystemFont, sans-serif;
  --ua-shadow:     0 4px 16px rgba(0,0,0,0.07), 0 1px 3px rgba(0,0,0,0.05);
}

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap');

/* ══════════════════════════════════════════════════════════════════
   CONTENT AREA
   ══════════════════════════════════════════════════════════════════ */
body[data-mar-route="/master/access"] .content-area {
  background: var(--ua-bg) !important;
  font-family: var(--ua-font) !important;
}

body[data-mar-route="/master/access"] * {
  font-family: var(--ua-font) !important;
}

/* ══════════════════════════════════════════════════════════════════
   HIDE ORIGINAL INLINE CREATE FORM & HEAVY BUTTONS
   ══════════════════════════════════════════════════════════════════ */
/* Hide the inline create user form panel */
body[data-mar-route="/master/access"] .compact-toolbar-panel,
body[data-mar-route="/master/access"] .compact-toolbar-header,
body[data-mar-route="/master/access"] .compact-toolbar-body {
  display: none !important;
}

/* Hide per-row Save Role button & bulky action buttons */
body[data-mar-route="/master/access"] .mar-page button[class*="save"],
body[data-mar-route="/master/access"] .mar-page td button:not(.ua-action-btn) {
  display: none !important;
}

/* ══════════════════════════════════════════════════════════════════
   UA ROOT WRAPPER (injected by JS)
   ══════════════════════════════════════════════════════════════════ */
#ua-root {
  font-family: var(--ua-font) !important;
  color: var(--ua-text) !important;
  display: flex;
  flex-direction: column;
  gap: 16px;
  padding: 20px 24px;
}

/* ══════════════════════════════════════════════════════════════════
   TOP HEADER
   ══════════════════════════════════════════════════════════════════ */
.ua-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
}

.ua-header-left {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.ua-breadcrumb {
  font-size: 12px;
  font-weight: 600;
  color: var(--ua-brand);
  text-decoration: none;
  letter-spacing: 0.01em;
}
.ua-breadcrumb:hover { text-decoration: underline; }

.ua-header-left h1 {
  font-size: 22px;
  font-weight: 700;
  letter-spacing: -0.03em;
  color: var(--ua-text);
  margin: 0;
  line-height: 1.1;
}

.ua-header-left p {
  font-size: 13px;
  color: var(--ua-sub);
  margin: 0;
  font-weight: 400;
}

.ua-header-right {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-shrink: 0;
}

.ua-stat-card {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  background: var(--ua-white);
  border: 1px solid var(--ua-border);
  border-radius: var(--ua-radius);
  padding: 10px 16px;
  box-shadow: var(--ua-shadow);
  min-width: 90px;
}

.ua-stat-card .ua-stat-num {
  font-size: 22px;
  font-weight: 700;
  color: var(--ua-text);
  line-height: 1;
  letter-spacing: -0.03em;
}

.ua-stat-card .ua-stat-lbl {
  font-size: 11px;
  font-weight: 500;
  color: var(--ua-sub);
  margin-top: 2px;
}

/* + New User button */
.ua-new-btn {
  display: inline-flex !important;
  align-items: center !important;
  gap: 6px !important;
  background: var(--ua-brand) !important;
  color: #ffffff !important;
  border: 1px solid var(--ua-brand) !important;
  border-radius: 8px !important;
  padding: 10px 18px !important;
  font-size: 13.5px !important;
  font-weight: 600 !important;
  cursor: pointer !important;
  box-shadow: 0 2px 8px rgba(37,99,235,0.3) !important;
  transition: all 0.15s ease !important;
  font-family: var(--ua-font) !important;
  white-space: nowrap !important;
  min-height: 40px !important;
}
.ua-new-btn:hover {
  background: var(--ua-brand-dk) !important;
  box-shadow: 0 3px 12px rgba(37,99,235,0.4) !important;
  transform: translateY(-1px) !important;
}

/* ══════════════════════════════════════════════════════════════════
   TAB NAVIGATION (Users | Sessions | Permissions)
   ══════════════════════════════════════════════════════════════════ */
.ua-tabs {
  display: flex;
  background: var(--ua-white);
  border: 1px solid var(--ua-border);
  border-radius: var(--ua-radius);
  overflow: hidden;
  box-shadow: var(--ua-shadow);
}

.ua-tab {
  display: flex;
  align-items: center;
  gap: 8px;
  flex: 1;
  padding: 14px 20px;
  font-size: 14px;
  font-weight: 600;
  color: var(--ua-sub);
  border: none;
  background: transparent;
  cursor: pointer;
  border-bottom: 2px solid transparent;
  justify-content: center;
  transition: all 0.15s ease;
  font-family: var(--ua-font) !important;
  position: relative;
}

.ua-tab:not(:last-child) {
  border-right: 1px solid var(--ua-border);
}

.ua-tab:hover { color: var(--ua-brand); background: #f8f9ff; }

.ua-tab.active {
  color: var(--ua-brand);
  border-bottom: 2px solid var(--ua-brand);
  background: var(--ua-brand-bg);
}

.ua-tab svg { flex-shrink: 0; }

/* ══════════════════════════════════════════════════════════════════
   TABLE CARD
   ══════════════════════════════════════════════════════════════════ */
.ua-table-card {
  background: var(--ua-white);
  border: 1px solid var(--ua-border);
  border-radius: var(--ua-radius);
  box-shadow: var(--ua-shadow);
  overflow: hidden;
}

/* Toolbar row inside table card */
.ua-table-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 16px;
  border-bottom: 1px solid var(--ua-border);
  gap: 12px;
  flex-wrap: wrap;
}

.ua-ttb-left {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}

.ua-count-pill {
  display: inline-flex;
  align-items: center;
  background: var(--ua-text);
  color: #ffffff;
  border-radius: 20px;
  padding: 4px 12px;
  font-size: 12.5px;
  font-weight: 600;
  letter-spacing: 0.01em;
  white-space: nowrap;
}

.ua-chip-stat {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 12.5px;
  font-weight: 600;
  color: var(--ua-sub);
  white-space: nowrap;
}

.ua-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  flex-shrink: 0;
}
.ua-dot.green { background: var(--ua-green); }
.ua-dot.grey  { background: var(--ua-muted); }

.ua-ttb-right {
  display: flex;
  align-items: center;
  gap: 8px;
}

.ua-select-wrap {
  position: relative;
  display: inline-flex;
  align-items: center;
}

.ua-select-wrap select {
  appearance: none;
  -webkit-appearance: none;
  border: 1px solid var(--ua-border) !important;
  border-radius: 7px !important;
  background: var(--ua-white) !important;
  color: var(--ua-text) !important;
  font-size: 13px !important;
  font-weight: 500 !important;
  padding: 7px 30px 7px 12px !important;
  min-height: unset !important;
  cursor: pointer !important;
  height: 34px !important;
  font-family: var(--ua-font) !important;
}

.ua-select-wrap svg {
  position: absolute;
  right: 9px;
  pointer-events: none;
  color: var(--ua-sub);
}

.ua-filter-btn {
  display: inline-flex !important;
  align-items: center !important;
  gap: 6px !important;
  border: 1px solid var(--ua-border) !important;
  border-radius: 7px !important;
  background: var(--ua-white) !important;
  color: var(--ua-text) !important;
  font-size: 13px !important;
  font-weight: 500 !important;
  padding: 7px 12px !important;
  cursor: pointer !important;
  font-family: var(--ua-font) !important;
  height: 34px !important;
  min-height: unset !important;
  transition: border-color 0.15s !important;
}
.ua-filter-btn:hover { border-color: #b0bdd0 !important; background: #f8f9fb !important; }

.ua-table-wrap {
  overflow-x: auto;
}

.ua-loading {
  padding: 48px 20px;
  text-align: center;
  color: var(--ua-muted);
  font-size: 14px;
  font-weight: 500;
}

.ua-err-banner {
  margin: 16px;
  background: var(--ua-red-bg);
  border: 1px solid #fca5a5;
  border-radius: 8px;
  color: var(--ua-red);
  font-size: 13px;
  font-weight: 600;
  padding: 12px 16px;
}

/* User table */
.ua-table {
  width: 100%;
  border-collapse: collapse;
  min-width: 700px;
}

.ua-table thead th {
  padding: 10px 16px;
  text-align: left;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ua-sub);
  background: #f8f9fb;
  border-bottom: 1px solid var(--ua-border);
  white-space: nowrap;
}

.ua-table thead th:first-child { padding-left: 20px; }
.ua-table thead th:last-child  { padding-right: 20px; }

.ua-sort {
  font-size: 10px;
  color: var(--ua-muted);
  margin-left: 3px;
  cursor: pointer;
}

.ua-table tbody td {
  padding: 13px 16px;
  border-bottom: 1px solid #f1f5f9;
  font-size: 13px;
  color: var(--ua-text);
  vertical-align: middle;
}

.ua-table tbody td:first-child { padding-left: 20px; }
.ua-table tbody td:last-child  { padding-right: 20px; }

.ua-table tbody tr:hover td { background: #f8faff; }
.ua-table tbody tr:last-child td { border-bottom: none; }

/* User name cell */
.ua-user-cell {
  display: flex;
  align-items: center;
  gap: 10px;
}

.ua-avatar {
  width: 34px;
  height: 34px;
  min-width: 34px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 13px;
  font-weight: 700;
  color: #ffffff;
  flex-shrink: 0;
}

.ua-uname {
  font-size: 13.5px;
  font-weight: 600;
  color: var(--ua-text);
}

.ua-email-cell {
  font-size: 13px !important;
  color: var(--ua-sub) !important;
}

.ua-emp-cell {
  font-size: 12.5px !important;
  color: var(--ua-muted) !important;
}

/* Role pill */
.ua-role-pill {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  background: #f1f5f9;
  border: 1px solid var(--ua-border);
  border-radius: 6px;
  padding: 4px 10px;
  font-size: 12px;
  font-weight: 600;
  color: var(--ua-sub);
  white-space: nowrap;
}
.ua-role-pill.is-admin { background: var(--ua-brand-bg); border-color: #bfdbfe; color: var(--ua-brand); }
.ua-chevron { font-size: 9px; color: var(--ua-muted); }

/* Status pill */
.ua-status-pill {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  border-radius: 20px;
  padding: 4px 10px;
  font-size: 12px;
  font-weight: 600;
  white-space: nowrap;
}
.ua-status-pill.active   { background: var(--ua-green-bg); color: var(--ua-green); }
.ua-status-pill.inactive { background: #f1f5f9;            color: var(--ua-sub);   }

/* Actions cell */
.ua-act-cell {
  display: flex;
  align-items: center;
  gap: 8px;
  justify-content: flex-end;
}

.ua-view-btn {
  display: inline-flex !important;
  align-items: center !important;
  gap: 5px !important;
  background: var(--ua-white) !important;
  border: 1px solid var(--ua-border) !important;
  border-radius: 6px !important;
  padding: 5px 12px !important;
  font-size: 12.5px !important;
  font-weight: 600 !important;
  color: var(--ua-text) !important;
  cursor: pointer !important;
  transition: all 0.15s !important;
  font-family: var(--ua-font) !important;
  min-height: unset !important;
  white-space: nowrap !important;
}
.ua-view-btn:hover {
  background: #f5f8ff !important;
  border-color: #b8c8e8 !important;
}

.ua-kebab-btn {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 28px !important;
  height: 28px !important;
  border: 1px solid var(--ua-border) !important;
  border-radius: 6px !important;
  background: var(--ua-white) !important;
  color: var(--ua-muted) !important;
  cursor: pointer !important;
  font-size: 14px !important;
  font-family: var(--ua-font) !important;
  min-height: unset !important;
  padding: 0 !important;
  transition: all 0.15s !important;
  line-height: 1 !important;
}
.ua-kebab-btn:hover {
  background: var(--ua-bg) !important;
  color: var(--ua-text) !important;
}

/* ══════════════════════════════════════════════════════════════════
   PAGINATION
   ══════════════════════════════════════════════════════════════════ */
.ua-pagination {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 20px;
  border-top: 1px solid var(--ua-border);
  flex-wrap: wrap;
  gap: 10px;
}

.ua-pagi-info {
  font-size: 12.5px;
  color: var(--ua-sub);
  font-weight: 500;
}

.ua-pagi-right {
  display: flex;
  align-items: center;
  gap: 12px;
}

.ua-pagi-btns {
  display: flex;
  align-items: center;
  gap: 4px;
}

.ua-pg-btn {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  min-width: 32px !important;
  height: 32px !important;
  border: 1px solid var(--ua-border) !important;
  border-radius: 6px !important;
  background: var(--ua-white) !important;
  color: var(--ua-text) !important;
  font-size: 13px !important;
  font-weight: 500 !important;
  cursor: pointer !important;
  padding: 0 8px !important;
  min-height: unset !important;
  transition: all 0.15s !important;
  font-family: var(--ua-font) !important;
}
.ua-pg-btn:hover:not(:disabled) { background: #f5f8ff !important; border-color: #b8c8e8 !important; }
.ua-pg-btn.active {
  background: var(--ua-brand) !important;
  border-color: var(--ua-brand) !important;
  color: #ffffff !important;
  font-weight: 700 !important;
}
.ua-pg-btn:disabled { opacity: 0.4 !important; cursor: not-allowed !important; }

.ua-pg-ellipsis { padding: 0 4px; color: var(--ua-muted); font-size: 13px; }

.ua-pp-select {
  border: 1px solid var(--ua-border) !important;
  border-radius: 6px !important;
  background: var(--ua-white) !important;
  color: var(--ua-text) !important;
  font-size: 12.5px !important;
  padding: 5px 10px !important;
  min-height: unset !important;
  cursor: pointer !important;
  font-family: var(--ua-font) !important;
}

/* Placeholder card for other tabs */
.ua-placeholder-card {
  padding: 60px 20px !important;
  text-align: center !important;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
}
.ua-placeholder-card p {
  font-size: 15px;
  font-weight: 600;
  color: var(--ua-text);
  margin: 0;
}
.ua-placeholder-card small {
  font-size: 13px;
  color: var(--ua-sub);
}

/* ══════════════════════════════════════════════════════════════════
   SLIDE-IN DRAWER (New User Form)
   ══════════════════════════════════════════════════════════════════ */
.ua-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(15, 23, 42, 0.35);
  z-index: 900;
  backdrop-filter: blur(2px);
  opacity: 0;
  transition: opacity 0.2s ease;
}
.ua-backdrop.open { opacity: 1; }

.ua-drawer {
  position: fixed;
  top: 0;
  right: 0;
  height: 100vh;
  width: min(480px, 94vw);
  background: var(--ua-white);
  border-left: 1px solid var(--ua-border);
  box-shadow: -20px 0 60px rgba(0,0,0,0.12);
  z-index: 901;
  display: flex;
  flex-direction: column;
  transform: translateX(100%);
  transition: transform 0.25s cubic-bezier(0.4, 0, 0.2, 1);
}
.ua-drawer.open { transform: translateX(0); }

.ua-drawer-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 20px 24px;
  border-bottom: 1px solid var(--ua-border);
  flex-shrink: 0;
}

.ua-drawer-head h2 {
  font-size: 18px !important;
  font-weight: 700 !important;
  color: var(--ua-text) !important;
  margin: 0 !important;
  letter-spacing: -0.02em !important;
}

.ua-drawer-head p {
  font-size: 13px !important;
  color: var(--ua-sub) !important;
  margin: 4px 0 0 !important;
  font-weight: 400 !important;
}

.ua-close-btn {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 32px !important;
  height: 32px !important;
  border-radius: 8px !important;
  background: var(--ua-bg) !important;
  border: 1px solid var(--ua-border) !important;
  color: var(--ua-sub) !important;
  font-size: 16px !important;
  cursor: pointer !important;
  transition: all 0.15s !important;
  line-height: 1 !important;
  padding: 0 !important;
  min-height: unset !important;
}
.ua-close-btn:hover {
  background: #f1f5f9 !important;
  color: var(--ua-text) !important;
}

.ua-drawer-body {
  flex: 1;
  overflow-y: auto;
  padding: 24px;
}

.ua-form {
  display: flex;
  flex-direction: column;
  gap: 18px;
}

.ua-form-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
}

.ua-field {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.ua-field label {
  font-size: 13px !important;
  font-weight: 600 !important;
  color: var(--ua-text) !important;
}

.ua-field input,
.ua-field select {
  font-family: var(--ua-font) !important;
  font-size: 13px !important;
  color: var(--ua-text) !important;
  background: var(--ua-white) !important;
  border: 1px solid #d0daea !important;
  border-radius: 8px !important;
  padding: 10px 13px !important;
  min-height: 40px !important;
  outline: none !important;
  width: 100% !important;
  box-sizing: border-box !important;
  transition: border-color 0.15s, box-shadow 0.15s !important;
}
.ua-field input:focus,
.ua-field select:focus {
  border-color: var(--ua-brand) !important;
  box-shadow: 0 0 0 3px rgba(37,99,235,0.12) !important;
}

.ua-field-hint {
  font-size: 11.5px;
  color: var(--ua-muted);
  margin: 0;
}

.ua-form-divider {
  height: 1px;
  background: var(--ua-border);
  margin: 4px 0;
}

.ua-submit-btn {
  background: var(--ua-brand) !important;
  color: #ffffff !important;
  border: 1px solid var(--ua-brand) !important;
  border-radius: 8px !important;
  padding: 12px 24px !important;
  font-size: 14px !important;
  font-weight: 600 !important;
  cursor: pointer !important;
  width: 100% !important;
  box-shadow: 0 2px 8px rgba(37,99,235,0.3) !important;
  transition: all 0.15s !important;
  font-family: var(--ua-font) !important;
  min-height: 44px !important;
}
.ua-submit-btn:hover {
  background: var(--ua-brand-dk) !important;
  box-shadow: 0 3px 12px rgba(37,99,235,0.4) !important;
}

.ua-error-msg {
  background: var(--ua-red-bg);
  border: 1px solid #fca5a5;
  border-radius: 8px;
  color: var(--ua-red);
  font-size: 13px;
  font-weight: 600;
  padding: 10px 14px;
}

.ua-success-msg {
  background: var(--ua-green-bg);
  border: 1px solid #86efac;
  border-radius: 8px;
  color: var(--ua-green);
  font-size: 13px;
  font-weight: 600;
  padding: 10px 14px;
}

/* ══════════════════════════════════════════════════════════════════
   HIDE ORIGINAL ACCESS PAGE CONTENT (replaced by #ua-root)
   ══════════════════════════════════════════════════════════════════ */
body[data-mar-route="/master/access"] .mar-page.mar-clean-page {
  /* let JS control visibility */
}

/* ══════════════════════════════════════════════════════════════════
   DRAWER FORM ELEMENTS
   ══════════════════════════════════════════════════════════════════ */
.ua-form-err {
  background: var(--ua-red-bg);
  border: 1px solid #fca5a5;
  border-radius: 8px;
  color: var(--ua-red);
  font-size: 13px;
  font-weight: 600;
  padding: 10px 14px;
}

.ua-form-ok {
  background: var(--ua-green-bg);
  border: 1px solid #86efac;
  border-radius: 8px;
  color: var(--ua-green);
  font-size: 13px;
  font-weight: 600;
  padding: 10px 14px;
}

.ua-req { color: var(--ua-red); margin-left: 2px; }

.ua-hint {
  font-size: 11.5px;
  color: var(--ua-muted);
  margin-top: 3px;
}

.ua-form-sep {
  height: 1px;
  background: var(--ua-border);
  margin: 4px 0;
}

@keyframes ua-spin-anim { to { transform: rotate(360deg); } }
.ua-spin { animation: ua-spin-anim 0.8s linear infinite; }

/* ══════════════════════════════════════════════════════════════════
   RESPONSIVE
   ══════════════════════════════════════════════════════════════════ */
@media (max-width: 860px) {
  #ua-root { padding: 14px 12px; }
  .ua-header { flex-direction: column; }
  .ua-header-right { width: 100%; justify-content: space-between; }
  .ua-form-row { grid-template-columns: 1fr; }
}

@media (max-width: 620px) {
  .ua-table thead th:nth-child(4),
  .ua-table tbody td:nth-child(4),
  .ua-table thead th:nth-child(5),
  .ua-table tbody td:nth-child(5) { display: none; }
}

/* ══════════════════════════════════════════════════════════════════
   SEARCH INPUT
   ══════════════════════════════════════════════════════════════════ */
.ua-search-wrap {
  position: relative;
  display: inline-flex;
  align-items: center;
}
.ua-search-wrap svg {
  position: absolute;
  left: 9px;
  pointer-events: none;
  color: var(--ua-muted);
}
.ua-search-input {
  padding: 0 12px 0 30px !important;
  width: 200px !important;
  border: 1px solid var(--ua-border) !important;
  border-radius: 7px !important;
  background: var(--ua-white) !important;
  color: var(--ua-text) !important;
  font-size: 13px !important;
  font-weight: 400 !important;
  height: 34px !important;
  outline: none !important;
  font-family: var(--ua-font) !important;
  box-sizing: border-box !important;
  transition: border-color 0.15s !important;
}
.ua-search-input:focus {
  border-color: var(--ua-brand) !important;
  box-shadow: 0 0 0 3px rgba(37,99,235,0.1) !important;
}

/* ══════════════════════════════════════════════════════════════════
   KEBAB DROPDOWN MENU
   ══════════════════════════════════════════════════════════════════ */
.ua-kebab-wrap {
  position: relative;
}
.ua-kebab-menu {
  position: absolute;
  top: calc(100% + 4px);
  right: 0;
  background: var(--ua-white);
  border: 1px solid var(--ua-border);
  border-radius: 9px;
  box-shadow: 0 8px 24px rgba(0,0,0,0.12), 0 2px 6px rgba(0,0,0,0.07);
  z-index: 200;
  min-width: 172px;
  padding: 4px;
  animation: ua-km-appear 0.12s ease;
}
@keyframes ua-km-appear {
  from { opacity: 0; transform: translateY(-4px) scale(0.97); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}
.ua-km-item {
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
  width: 100% !important;
  padding: 9px 12px !important;
  font-size: 13px !important;
  font-weight: 500 !important;
  color: var(--ua-text) !important;
  background: transparent !important;
  border: none !important;
  border-radius: 6px !important;
  cursor: pointer !important;
  text-align: left !important;
  font-family: var(--ua-font) !important;
  min-height: unset !important;
  transition: background 0.1s !important;
}
.ua-km-item:hover { background: var(--ua-bg) !important; }
.ua-km-item.danger { color: var(--ua-red) !important; }
.ua-km-item.danger:hover { background: var(--ua-red-bg) !important; }
.ua-km-sep {
  height: 1px;
  background: var(--ua-border);
  margin: 3px 6px;
}

/* ══════════════════════════════════════════════════════════════════
   BADGE WARN
   ══════════════════════════════════════════════════════════════════ */
.ua-badge-warn {
  display: inline-block;
  background: #fef3c7;
  color: #92400e;
  border: 1px solid #fcd34d;
  border-radius: 4px;
  padding: 1px 6px;
  font-size: 10.5px;
  font-weight: 600;
  margin-top: 2px;
}

/* ══════════════════════════════════════════════════════════════════
   SESSIONS TAB
   ══════════════════════════════════════════════════════════════════ */
.ua-sess-count {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: #e0e7ff;
  color: #4f46e5;
  border-radius: 20px;
  padding: 3px 12px;
  font-size: 12px;
  font-weight: 700;
}
.ua-revoke-btn { color: var(--ua-red) !important; border-color: #fca5a5 !important; }
.ua-revoke-btn:hover { background: var(--ua-red-bg) !important; }

/* ══════════════════════════════════════════════════════════════════
   EDIT DRAWER
   ══════════════════════════════════════════════════════════════════ */
.ua-avatar-lg {
  width: 44px !important;
  height: 44px !important;
  min-width: 44px !important;
  font-size: 17px !important;
}

.ua-drawer-tabs {
  display: flex;
  border-bottom: 1px solid var(--ua-border);
  padding: 0 16px;
  flex-shrink: 0;
  background: var(--ua-white);
}
.ua-drawer-tab {
  padding: 11px 16px !important;
  font-size: 13.5px !important;
  font-weight: 600 !important;
  color: var(--ua-sub) !important;
  border: none !important;
  background: transparent !important;
  cursor: pointer !important;
  border-bottom: 2px solid transparent !important;
  margin-bottom: -1px;
  transition: all 0.15s !important;
  font-family: var(--ua-font) !important;
  min-height: unset !important;
}
.ua-drawer-tab:hover { color: var(--ua-text) !important; }
.ua-drawer-tab.active {
  color: var(--ua-brand) !important;
  border-bottom-color: var(--ua-brand) !important;
}

.ua-drawer-footer {
  border-top: 1px solid var(--ua-border);
  padding: 16px 24px;
  flex-shrink: 0;
}

.ua-deactivate-btn {
  display: inline-flex !important;
  align-items: center !important;
  gap: 7px !important;
  background: var(--ua-red-bg) !important;
  color: var(--ua-red) !important;
  border: 1px solid #fca5a5 !important;
  border-radius: 8px !important;
  padding: 10px 18px !important;
  font-size: 13px !important;
  font-weight: 600 !important;
  cursor: pointer !important;
  transition: all 0.15s !important;
  font-family: var(--ua-font) !important;
  min-height: 40px !important;
}
.ua-deactivate-btn:hover { background: #fee2e2 !important; border-color: var(--ua-red) !important; }
.ua-deactivate-btn:disabled { opacity: 0.5 !important; cursor: not-allowed !important; }

.ua-activate-btn {
  display: inline-flex !important;
  align-items: center !important;
  gap: 7px !important;
  background: var(--ua-green-bg) !important;
  color: var(--ua-green) !important;
  border: 1px solid #86efac !important;
  border-radius: 8px !important;
  padding: 10px 18px !important;
  font-size: 13px !important;
  font-weight: 600 !important;
  cursor: pointer !important;
  transition: all 0.15s !important;
  font-family: var(--ua-font) !important;
  min-height: 40px !important;
}
.ua-activate-btn:hover { background: #d1fae5 !important; }
.ua-activate-btn:disabled { opacity: 0.5 !important; cursor: not-allowed !important; }

.ua-info-box {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  background: var(--ua-brand-bg);
  border: 1px solid #bfdbfe;
  border-radius: 8px;
  color: var(--ua-brand);
  font-size: 12.5px;
  font-weight: 500;
  padding: 12px 14px;
  line-height: 1.5;
}

.ua-role-display {
  padding: 10px 13px;
  border: 1px solid var(--ua-border);
  border-radius: 8px;
  background: var(--ua-bg);
}

/* ══════════════════════════════════════════════════════════════════
   PERMISSIONS TAB
   ══════════════════════════════════════════════════════════════════ */
.ua-perm-section {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.ua-perm-table { min-width: 580px; }

.perm-role-col,
.perm-act-col {
  text-align: center !important;
  min-width: 82px;
  text-transform: capitalize;
}

.ua-perm-cell { vertical-align: middle; }

.ua-perm-tag {
  display: inline-block;
  background: var(--ua-brand-bg);
  color: var(--ua-brand);
  border: 1px solid #bfdbfe;
  border-radius: 4px;
  padding: 1px 5px;
  font-size: 10.5px;
  font-weight: 600;
  margin: 1px;
  text-transform: uppercase;
  letter-spacing: 0.03em;
}

.ua-perm-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}
.ua-perm-toggle input { display: none; }
.ua-perm-check {
  width: 18px;
  height: 18px;
  border: 2px solid var(--ua-border);
  border-radius: 5px;
  background: var(--ua-white);
  transition: all 0.15s;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  position: relative;
}
.ua-perm-check.on {
  background: var(--ua-brand);
  border-color: var(--ua-brand);
}
.ua-perm-check.on::after {
  content: '';
  display: block;
  width: 4px;
  height: 8px;
  border: 2px solid white;
  border-top: none;
  border-left: none;
  transform: rotate(45deg) translateY(-1px);
}
.ua-perm-toggle:hover .ua-perm-check:not(.on) { border-color: var(--ua-brand); }

/* ─── TAB VISIBILITY FIX (dark-mode override) ──────────────────── */
#ua-root .ua-tabs {
  background: #ffffff !important;
  border: 1px solid #e4eaf2 !important;
}
#ua-root .ua-tab {
  color: #5a6a80 !important;
  background: transparent !important;
}
#ua-root .ua-tab.active {
  color: #2563eb !important;
  background: #eff6ff !important;
  border-bottom-color: #2563eb !important;
}
#ua-root .ua-tab:hover:not(.active) {
  color: #2563eb !important;
  background: #f0f4ff !important;
}