/* Users & Access — modern access-management UI (dark-theme aware) */
#admin-users-page { --ax-gap: 16px; }

/* bare .btn (Cancel etc.) has no background in base CSS -> white-on-white.
   Give every non-variant button in the Access UI a proper secondary style. */
#admin-users-page .btn:not([class*="btn-"]),
.ax-drawer-back .btn:not([class*="btn-"]) {
  background: var(--bg-hover);
  color: var(--text-primary);
  border: 1px solid var(--border);
}
#admin-users-page .btn:not([class*="btn-"]):hover,
.ax-drawer-back .btn:not([class*="btn-"]):hover { border-color: var(--accent); }
.ax-head { margin-bottom: 8px; }
.ax-title { font-size: 22px; font-weight: 800; margin: 0; }
.ax-sub { color: var(--text-secondary); font-size: 13px; margin: 4px 0 0; }
.ax-tabs { display: flex; gap: 8px; margin: 16px 0; border-bottom: 1px solid var(--border); }
.ax-tab { background: none; border: 0; border-bottom: 2px solid transparent; color: var(--text-secondary); font: inherit; font-size: 14px; font-weight: 600; padding: 10px 16px; cursor: pointer; }
.ax-tab.on { color: var(--text-primary); border-bottom-color: var(--accent); }

.ax-toolbar { display: flex; gap: 10px; align-items: center; margin-bottom: 14px; flex-wrap: wrap; }
.ax-input { background: var(--bg-primary); border: 1px solid var(--border); color: var(--text-primary); border-radius: 9px; padding: 8px 12px; font: inherit; font-size: 13px; outline: none; }
.ax-input:focus { border-color: var(--accent); }
.ax-sel { cursor: pointer; }
#ax-q { min-width: 240px; }

.ax-card { background: var(--bg-card); border: 1px solid var(--border); border-radius: 14px; overflow: hidden; }
.ax-table { width: 100%; border-collapse: collapse; font-size: 13.5px; }
.ax-table th { text-align: left; color: var(--text-secondary); font-size: 11px; text-transform: uppercase; letter-spacing: .05em; padding: 12px 16px; border-bottom: 1px solid var(--border); font-weight: 600; }
.ax-table td { padding: 12px 16px; border-bottom: 1px solid var(--border); vertical-align: middle; }
.ax-table tr:last-child td { border-bottom: 0; }
.ax-table tbody tr:hover { background: var(--bg-hover); }

.ax-user { display: flex; align-items: center; gap: 12px; }
.ax-avatar { width: 38px; height: 38px; border-radius: 50%; color: #fff; font-weight: 700; font-size: 14px; display: inline-flex; align-items: center; justify-content: center; flex: 0 0 auto; }
.ax-uname { font-weight: 600; }
.ax-uemail { color: var(--text-secondary); font-size: 12px; margin-top: 1px; }
.ax-baserole { color: var(--text-muted); font-size: 11px; margin-top: 3px; }
.ax-dim { color: var(--text-muted); }

.ax-badge { display: inline-block; border-radius: 999px; padding: 2px 10px; font-size: 11px; font-weight: 700; }
.ax-b-super { background: rgba(239,68,68,.16); color: #fca5a5; }
.ax-b-admin { background: rgba(245,158,11,.16); color: #fcd34d; }
.ax-b-sup { background: rgba(192,132,252,.16); color: #d8b4fe; }
.ax-b-agent { background: rgba(34,197,94,.16); color: #86efac; }
.ax-b-mut { background: rgba(148,163,184,.16); color: #cbd5e1; }
.ax-b-std { background: rgba(148,163,184,.14); color: #94a3b8; }
.ax-b-custom { background: rgba(59,130,246,.16); color: #93c5fd; }
.ax-b-ok { background: rgba(34,197,94,.16); color: #86efac; }
.ax-b-off { background: rgba(148,163,184,.16); color: #cbd5e1; }

.ax-kebab { background: none; border: 0; color: var(--text-secondary); font-size: 20px; line-height: 1; cursor: pointer; padding: 4px 10px; border-radius: 8px; }
.ax-kebab:hover { background: var(--bg-hover); color: var(--text-primary); }
.ax-menu { position: fixed; z-index: 200; background: var(--bg-card); border: 1px solid var(--border); border-radius: 10px; box-shadow: 0 12px 30px rgba(0,0,0,.45); padding: 6px; min-width: 175px; display: grid; gap: 1px; }
.ax-menu button { text-align: left; background: none; border: 0; color: var(--text-primary); font: inherit; font-size: 13px; padding: 8px 12px; border-radius: 7px; cursor: pointer; }
.ax-menu button:hover:not(:disabled) { background: var(--bg-hover); }
.ax-menu button:disabled { color: var(--text-muted); opacity: .5; cursor: default; }
.ax-menu button.ax-danger { color: #fca5a5; }
.ax-empty { padding: 40px; text-align: center; color: var(--text-muted); }

/* drawer */
.ax-drawer-back { position: fixed; inset: 0; background: rgba(0,0,0,.55); z-index: 150; display: flex; justify-content: flex-end; }
.ax-drawer { width: min(620px, 100%); height: 100%; background: var(--bg-card); border-left: 1px solid var(--border); display: flex; flex-direction: column; animation: ax-slide .2s ease; }
@keyframes ax-slide { from { transform: translateX(30px); opacity: .5; } to { transform: none; opacity: 1; } }
.ax-modal { width: min(520px, 100%); margin: auto; background: var(--bg-card); border: 1px solid var(--border); border-radius: 16px; overflow: hidden; }
.ax-drawer-back:has(.ax-modal) { align-items: center; justify-content: center; }
.ax-drawer-head { display: flex; align-items: center; justify-content: space-between; padding: 16px 20px; border-bottom: 1px solid var(--border); }
.ax-drawer-head h2 { margin: 0; font-size: 16px; }
.ax-x { background: none; border: 0; color: var(--text-secondary); font-size: 24px; line-height: 1; cursor: pointer; }
.ax-drawer-body { flex: 1; overflow-y: auto; padding: 20px; }
.ax-drawer-foot { display: flex; gap: 10px; justify-content: flex-end; padding: 14px 20px; border-top: 1px solid var(--border); }

.ax-section { margin-bottom: 24px; }
.ax-section h3 { font-size: 13px; text-transform: uppercase; letter-spacing: .05em; color: var(--text-secondary); margin: 0 0 12px; }
.ax-grid2 { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.ax-grid2 label, .ax-block { display: grid; gap: 5px; font-size: 12px; color: var(--text-secondary); }
.ax-grid2 input, .ax-grid2 select, .ax-block select { background: var(--bg-primary); border: 1px solid var(--border); color: var(--text-primary); border-radius: 9px; padding: 9px 11px; font: inherit; font-size: 13px; outline: none; }
.ax-grid2 input:focus, .ax-block select:focus { border-color: var(--accent); }
.ax-block { margin-bottom: 12px; }
.ax-hint { color: var(--text-muted); font-size: 11.5px; font-weight: 400; }
.ax-req { color: #f87171; font-weight: 700; }
.ax-invalid { border-color: #ef4444 !important; box-shadow: 0 0 0 2px rgba(239,68,68,.15); }
.ax-err { color: #f87171; font-size: 11px; min-height: 0; display: block; }
.ax-err:empty { display: none; }
@media (max-width: 560px) { .ax-grid2 { grid-template-columns: 1fr; } }

.ax-modeseg { display: inline-flex; border: 1px solid var(--border); border-radius: 10px; overflow: hidden; margin-bottom: 14px; }
.ax-modebtn { background: var(--bg-primary); border: 0; color: var(--text-secondary); font: inherit; font-size: 13px; font-weight: 600; padding: 9px 18px; cursor: pointer; }
.ax-modebtn.on { background: var(--accent); color: #fff; }

.ax-permbar { display: flex; gap: 6px; align-items: center; flex-wrap: wrap; margin: 12px 0; }
.ax-mini { background: var(--bg-primary); border: 1px solid var(--border); color: var(--text-secondary); font: inherit; font-size: 11.5px; padding: 5px 10px; border-radius: 8px; cursor: pointer; }
.ax-mini:hover { border-color: var(--accent); color: var(--text-primary); }

.ax-perms { display: grid; gap: 6px; }
.ax-prow { border: 1px solid var(--border); border-radius: 10px; background: var(--bg-primary); overflow: hidden; }
.ax-prow-main { display: flex; align-items: center; gap: 8px; padding: 8px 10px; }
.ax-caret { background: none; border: 0; color: var(--text-muted); cursor: pointer; font-size: 12px; padding: 2px 4px; }
.ax-pmod { font-size: 13px; font-weight: 600; flex: 1; min-width: 0; }
.ax-warn-dot { display: inline-block; width: 15px; height: 15px; line-height: 15px; text-align: center; border-radius: 50%; background: rgba(245,158,11,.2); color: #fcd34d; font-size: 10px; font-weight: 800; }
.ax-seg { display: inline-flex; border: 1px solid var(--border); border-radius: 8px; overflow: hidden; flex: 0 0 auto; }
.ax-seg button { background: var(--bg-card); border: 0; border-right: 1px solid var(--border); color: var(--text-secondary); font: inherit; font-size: 11.5px; padding: 5px 9px; cursor: pointer; white-space: nowrap; }
.ax-seg button:last-child { border-right: 0; }
.ax-seg button.on { background: var(--accent); color: #fff; }
.ax-seg-custom { padding: 5px 9px; font-size: 11px; color: #93c5fd; font-weight: 700; }
.ax-detail { padding: 4px 12px 12px 34px; display: grid; grid-template-columns: 1fr 1fr; gap: 4px 14px; border-top: 1px dashed var(--border); }
.ax-chk { display: flex; align-items: center; gap: 7px; font-size: 12.5px; color: var(--text-primary); }
.ax-chk input { width: auto; }

.ax-eff { background: var(--bg-primary); border: 1px solid var(--border); border-radius: 12px; padding: 16px; }
.ax-eff-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; }
.ax-eff-grid div { text-align: center; }
.ax-eff-grid span { display: block; color: var(--text-muted); font-size: 10.5px; text-transform: uppercase; letter-spacing: .04em; margin-bottom: 3px; }
.ax-eff-grid b { font-size: 18px; }
@media (max-width: 560px) { .ax-eff-grid { grid-template-columns: 1fr 1fr; } .ax-detail { grid-template-columns: 1fr; } }

.ax-prev-list { display: grid; gap: 4px; }
.ax-prev-row { display: flex; align-items: center; gap: 10px; font-size: 13px; padding: 4px 0; }
.ax-dot { width: 9px; height: 9px; border-radius: 50%; flex: 0 0 auto; }
.ax-dot.ok { background: #22c55e; }
.ax-dot.off { background: var(--text-muted); }