/* admin.css — Dark glass theme matching index.css
   All colour tokens come from index.css :root.
   This file only adds admin-specific layout & component styles. */

/* ─── Base ──────────────────────────────────────────────── */
:root {
  --safe-top-raw: env(safe-area-inset-top);
  --safe-top: max(0px, calc(var(--safe-top-raw) - 14px));
  --safe-bottom: env(safe-area-inset-bottom);
  --topbar-h: 0px;
  --controls-h: 0px;
  --stack-gap: 0px;
}

*, *::before, *::after { box-sizing: border-box; }

html {
  overflow-y: auto !important;
  overflow-x: hidden !important;
}
body {
  margin: 0;
  overflow: visible !important;
  font-family: 'Sora', system-ui, -apple-system, sans-serif;
  background: var(--ink-950);
  color: var(--ink-050);
  -webkit-font-smoothing: antialiased;
  background-image:
    radial-gradient(ellipse 80% 50% at 50% -20%, rgba(16,185,129,.08) 0%, transparent 65%),
    radial-gradient(ellipse 60% 40% at 80% 80%, rgba(201,168,76,.05) 0%, transparent 55%);
  min-height: 100vh;
}

body::before {
  content: '';
  position: fixed;
  inset: 0;
  background-image:
    linear-gradient(rgba(255,255,255,.012) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.012) 1px, transparent 1px);
  background-size: 48px 48px;
  pointer-events: none;
  z-index: 0;
}

.hidden { display: none !important; }

/* ─── Topbar ────────────────────────────────────────────── */
.topbar {
  position: sticky;
  top: 0;
  z-index: 50;
  padding: calc(14px + var(--safe-top)) 16px 14px;
  border-bottom: 1px solid rgba(255,255,255,.055);
  background: rgba(8,12,20,.85);
  -webkit-backdrop-filter: blur(24px) saturate(180%);
  backdrop-filter: blur(24px) saturate(180%);
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
}

.topbar__center { text-align: center; }
.topbar__right  { display: flex; justify-content: flex-end; }

.topbar h1 {
  margin: 0;
  font-size: 17px;
  font-weight: 700;
  letter-spacing: -.02em;
  color: #fff;
}

/* Back button */
.icon-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  border: 1px solid rgba(255,255,255,.1);
  background: rgba(255,255,255,.05);
  color: var(--ink-100);
  text-decoration: none;
  transition: all .18s ease;
}
.icon-btn:hover {
  background: rgba(255,255,255,.1);
  border-color: rgba(255,255,255,.18);
  color: #fff;
}
.icon-btn:active { transform: scale(.96); }

/* ─── Layout ────────────────────────────────────────────── */
#app {
  position: relative;
  z-index: 1;
  max-width: 860px;
  margin: 0 auto;
  padding: 14px 16px 40px;
  display: grid;
  gap: 8px;
}

/* ─── Cards ─────────────────────────────────────────────── */
.card {
  position: relative;
  background: rgba(17,24,39,.78);
  border: 1px solid rgba(255,255,255,.07);
  border-radius: 18px;
  padding: 16px;
  -webkit-backdrop-filter: blur(18px);
  backdrop-filter: blur(18px);
  box-shadow: 0 8px 32px rgba(0,0,0,.4), inset 0 1px 0 rgba(255,255,255,.055);
}

.card::before {
  content: '';
  position: absolute;
  top: 0; left: 16px; right: 16px;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.09), transparent);
}

.card.warn {
  border-color: rgba(245,158,11,.22);
  background: rgba(245,158,11,.07);
}
.card.warn::before {
  background: linear-gradient(90deg, transparent, rgba(245,158,11,.25), transparent);
}

/* Sticky cards */
#controls {
  position: sticky;
  top: var(--topbar-h);
  z-index: 9;
  background: rgba(13,18,32,.92);
}
#user-summary {
  position: sticky;
  top: calc(var(--topbar-h) + var(--controls-h) + var(--stack-gap));
  z-index: 8;
  background: rgba(13,18,32,.92);
}

/* ─── Typography ────────────────────────────────────────── */
.card h2 {
  margin: 0 0 12px;
  font-size: 14px;
  font-weight: 700;
  letter-spacing: -.01em;
  color: var(--ink-100);
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.muted { color: var(--ink-400); font-size: 13px; }
code {
  font-family: 'JetBrains Mono', monospace;
  font-size: 12px;
  background: rgba(255,255,255,.07);
  border: 1px solid rgba(255,255,255,.1);
  border-radius: 5px;
  padding: 1px 6px;
  color: var(--ink-200);
}

/* ─── Search & Controls ─────────────────────────────────── */
.search-form { display: grid; gap: 8px; }

input[type="text"] {
  background: rgba(8,12,20,.6);
  color: var(--ink-050);
  border: 1px solid rgba(255,255,255,.09);
  border-radius: 11px;
  padding: 10px 13px;
  font: 500 14px / 1 'Sora', system-ui, sans-serif;
  width: 100%;
  min-width: 0;
  outline: none;
  transition: border-color .2s, box-shadow .2s;
}
input[type="text"]::placeholder { color: var(--ink-400); }
input[type="text"]:focus {
  border-color: rgba(201,168,76,.4);
  box-shadow: 0 0 0 3px rgba(201,168,76,.1);
}

.row.filters {
  display: flex;
  align-items: center;
  gap: 14px;
  flex-wrap: wrap;
  margin-top: 10px;
  font-size: 13px;
  color: var(--ink-300);
}
.row.filters label {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  cursor: pointer;
  font-size: 13px;
  color: var(--ink-300);
}
.row.filters input[type="checkbox"] {
  width: 15px;
  height: 15px;
  accent-color: var(--emerald);
  cursor: pointer;
}

#controls button {
  font-size: 12px;
  height: 28px;
  padding: 4px 10px;
}

/* ─── Buttons ───────────────────────────────────────────── */
button {
  font-family: 'Sora', system-ui, sans-serif;
  background: rgba(255,255,255,.06);
  color: var(--ink-100);
  border: 1px solid rgba(255,255,255,.1);
  padding: 8px 13px;
  border-radius: 9px;
  cursor: pointer;
  font-size: 13px;
  font-weight: 600;
  transition: all .18s ease;
  line-height: 1;
}
button:hover {
  background: rgba(255,255,255,.1);
  border-color: rgba(255,255,255,.18);
  color: #fff;
}
button:active { transform: scale(.97); }

button.danger {
  background: rgba(239,68,68,.1);
  border-color: rgba(239,68,68,.25);
  color: #f87171;
}
button.danger:hover {
  background: rgba(239,68,68,.18);
  border-color: rgba(239,68,68,.45);
}

button.is-applied {
  background: rgba(16,185,129,.12);
  border-color: rgba(16,185,129,.3);
  color: var(--emerald);
}
button.is-applied:hover {
  background: rgba(16,185,129,.2);
  border-color: rgba(16,185,129,.5);
}

/* ─── Badges ────────────────────────────────────────────── */
.badge {
  display: inline-flex;
  align-items: center;
  white-space: nowrap;
  padding: 3px 9px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 500;
  border: 1px solid rgba(255,255,255,.1);
  background: rgba(255,255,255,.06);
  color: var(--ink-200);
}
.badge.ok {
  background: rgba(16,185,129,.12);
  border-color: rgba(16,185,129,.3);
  color: var(--emerald);
}
.badge.no {
  background: rgba(239,68,68,.1);
  border-color: rgba(239,68,68,.25);
  color: #f87171;
}
.badge.admin {
  background: rgba(56,189,248,.1);
  border-color: rgba(56,189,248,.25);
  color: var(--sky);
}
.badge.member {
  background: rgba(16,185,129,.1);
  border-color: rgba(16,185,129,.25);
  color: #34d399;
}

/* Admin status pill */
#admin-status-pill {
  font-size: 10px !important;
  padding: 4px 12px !important;
  font-weight: 700;
  letter-spacing: .02em;
  color: var(--ink-200) !important;
}
#admin-status-pill.ok {
  background: rgba(16,185,129,.12) !important;
  border-color: rgba(16,185,129,.3) !important;
  color: var(--emerald) !important;
}
#admin-status-pill.no {
  background: rgba(239,68,68,.1) !important;
  border-color: rgba(239,68,68,.25) !important;
  color: #f87171 !important;
}

/* ─── Table ─────────────────────────────────────────────── */
.table-scroll {
  display: block;
  width: 100%;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

table {
  width: 100%;
  border-collapse: collapse;
  min-width: 0;
  table-layout: fixed;
  font-size: 13.5px;
}
th, td {
  border-bottom: 1px solid rgba(255,255,255,.06);
  padding: 11px 10px;
  text-align: left;
  vertical-align: top;
}
th {
  font-weight: 700;
  font-size: 11px;
  letter-spacing: .07em;
  text-transform: uppercase;
  color: var(--ink-400);
}
td { color: var(--ink-200); }
tr:last-child td { border-bottom: none; }
tr:hover td { background: rgba(255,255,255,.02); }

/* ─── User card ─────────────────────────────────────────── */
.user-main    { display: flex; flex-direction: column; gap: 5px; }
.user-title   { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; }
.user-title-email { font-weight: 500; color: var(--ink-100); }
.user-email   { overflow-wrap: anywhere; word-break: break-word; line-height: 1.3; color: var(--ink-200); }
.user-status  { display: flex; flex-wrap: wrap; gap: 6px; }

/* ─── User summary card ─────────────────────────────────── */
#user-summary {
  border-left: 3px solid rgba(16,185,129,.35);
  padding: 14px 16px 14px 18px;
}
#user-summary h2 {
  margin: 0 0 8px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .07em;
  text-transform: uppercase;
  color: #4b5563;
}
#user-summary .user-title-email {
  display: block;
  font-size: 18px;
  font-weight: 500;
  letter-spacing: -.02em;
  color: #f9fafb;
  line-height: 1.2;
  margin-bottom: 8px;
  overflow-wrap: anywhere;
  word-break: break-word;
}
#user-summary .user-status .badge { font-size: 11px !important; }

/* Keep member badge color in sync with Roles 'Member' pill */
#user-summary .user-status .badge.member {
  background: rgba(16,185,129,.12);
  border-color: rgba(16,185,129,.3);
  color: var(--emerald);
}
/* ─── User actions & collapsible sections ───────────────── */
.user-actions {
  display: flex;
  flex-direction: column;
  width: 100%;
  gap: 0;
}

/* Each collapsible section is a mini card with a header toggle */
.action-section {
  border-radius: 12px;
  border: 1px solid rgba(255,255,255,.07);
  background: rgba(255,255,255,.025);
  overflow: hidden;
  margin-bottom: 8px;
  transition: border-color .2s;
}
.action-section:last-child { margin-bottom: 0; }
.action-section.open {
  border-color: rgba(255,255,255,.11);
  background: rgba(255,255,255,.04);
}

/* Header row */
.action-section__header {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 11px 14px;
  cursor: pointer;
  user-select: none;
  transition: background .15s;
  -webkit-tap-highlight-color: transparent;
}
.action-section__header:hover {
  background: rgba(255,255,255,.04);
}
.action-section__header:active {
  background: rgba(255,255,255,.06);
}

/* Icon */
.action-section__icon {
  font-size: 16px !important;
  color: #6b7280;
  flex-shrink: 0;
  line-height: 1;
}
.action-section.open .action-section__icon {
  color: #9ca3af;
}

/* Title text */
.action-section__title {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .07em;
  text-transform: uppercase;
  color: #6b7280;
  flex: 1;
  line-height: 1;
  transition: color .15s;
}
.action-section.open .action-section__title {
  color: #d1d5db;
}

/* Chevron */
.action-section__chevron {
  font-size: 18px !important;
  color: #374151;
  transition: transform .22s ease, color .15s;
  flex-shrink: 0;
  line-height: 1;
}
.action-section.open .action-section__chevron {
  transform: rotate(180deg);
  color: #6b7280;
}

/* Animated body — uses max-height instead of grid for reliable cross-browser */
.action-section__body {
  max-height: 0;
  overflow: hidden;
  transition: max-height .28s cubic-bezier(.4,0,.2,1);
}
.action-section.open .action-section__body {
  max-height: 2000px; /* large enough; transition still looks smooth on open */
}

.action-section__body-inner {
  padding: 6px 18px 10px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

/* Button rows inside sections */
.action-section__body-inner .btn-row {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
  align-items: center;
}
.action-section__body-inner button {
  height: 30px !important;
  padding: 0 12px !important;
  font-size: 12px !important;
  border-radius: 8px !important;
  white-space: nowrap;
}

/* ─── Selects ───────────────────────────────────────────── */
select {
  font-family: 'Sora', system-ui, sans-serif;
  background: rgba(8,12,20,.7);
  color: var(--ink-100);
  border: 1px solid rgba(255,255,255,.1);
  border-radius: 9px;
  padding: 6px 10px;
  font-size: 13px;
  outline: none;
  transition: border-color .2s;
}
select:focus {
  border-color: rgba(201,168,76,.4);
  box-shadow: 0 0 0 3px rgba(201,168,76,.1);
}

.user-actions select,
.account-picker select {
  min-width: 210px !important;
  height: 32px !important;
  font-size: 13px !important;
}

select[multiple] {
  min-height: 100px;
  max-height: 220px;
  overflow-y: auto;
  width: 100%;
  max-width: 400px;
  height: auto !important;
  padding: 4px;
  /* Force dark background on native select — critical for dark mode */
  background: #0d1120 !important;
  color: #e8ecf0 !important;
  color-scheme: dark;
}
select[multiple] option {
  padding: 6px 10px;
  border-radius: 5px;
  background: #0d1120;
  color: #e8ecf0;
}
select[multiple] option:hover {
  background: rgba(255,255,255,.08);
}
select[multiple] option:checked,
select[multiple] option:checked:focus {
  background: rgba(16,185,129,.25) !important;
  color: #34d399 !important;
}
select[multiple] option:disabled {
  color: #4b5563;
  background: transparent;
}
select optgroup {
  font-weight: 700;
  color: #6b7280;
  font-size: 11px;
  letter-spacing: .05em;
  text-transform: uppercase;
  background: #0a0f1c;
}
select optgroup option {
  font-weight: 400;
  color: #e8ecf0;
  background: #0d1120;
  text-transform: none;
  letter-spacing: normal;
  font-size: 13px;
  padding: 6px 14px;
}
select:focus { position: relative; z-index: 9999; }

.account-picker {
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
  width: 100% !important;
}
.account-picker input[type="text"] {
  flex: 1 1 200px !important;
  min-width: 160px !important;
  height: 32px !important;
  padding: 6px 10px !important;
}

/* ─── Custom account picker ─────────────────────────────── */
.acct-picker {
  display: flex;
  flex-direction: column;
  border: 1px solid rgba(255,255,255,.1);
  border-radius: 11px;
  overflow: hidden;
  background: rgba(8,12,20,.7);
  width: 100%;
}

.acct-picker__search-row {
  padding: 8px 10px;
  border-bottom: 1px solid rgba(255,255,255,.07);
}
.acct-picker__search {
  width: 100%;
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.09);
  border-radius: 7px;
  padding: 6px 10px;
  font: 13px 'Sora', system-ui, sans-serif;
  color: var(--ink-100, #e8ecf0);
  outline: none;
  min-width: 0;
  box-sizing: border-box;
  transition: border-color .18s;
}
.acct-picker__search::placeholder { color: var(--ink-400, #6b7280); }
.acct-picker__search:focus { border-color: rgba(201,168,76,.4); box-shadow: 0 0 0 3px rgba(201,168,76,.08); }

.acct-picker__list {
  max-height: 220px;
  overflow-y: auto;
  overscroll-behavior: contain;
}
/* Scrollbar */
.acct-picker__list::-webkit-scrollbar { width: 4px; }
.acct-picker__list::-webkit-scrollbar-track { background: transparent; }
.acct-picker__list::-webkit-scrollbar-thumb { background: rgba(255,255,255,.1); border-radius: 2px; }

.acct-picker__group-header {
  padding: 6px 12px 4px;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .07em;
  text-transform: uppercase;
  color: #4b5563;
  background: rgba(0,0,0,.2);
  position: sticky;
  top: 0;
}

.acct-picker__row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 12px;
  cursor: pointer;
  transition: background .13s;
  border-bottom: 1px solid rgba(255,255,255,.04);
  -webkit-tap-highlight-color: transparent;
}
.acct-picker__row:last-child { border-bottom: none; }
.acct-picker__row:hover { background: rgba(255,255,255,.05); }
.acct-picker__row:active { background: rgba(255,255,255,.08); }
.acct-picker__row.checked { background: rgba(16,185,129,.07); }
.acct-picker__row.checked:hover { background: rgba(16,185,129,.12); }

.acct-picker__check {
  flex-shrink: 0;
  line-height: 1;
  display: flex;
  align-items: center;
}
.acct-picker__check .material-symbols-rounded {
  font-size: 18px !important;
  color: #374151;
}
.acct-picker__row.checked .acct-picker__check .material-symbols-rounded {
  color: #34d399;
}

.acct-picker__label {
  font-size: 13px;
  color: var(--ink-200, #d1d5db);
  flex: 1;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.acct-picker__row.checked .acct-picker__label {
  color: var(--ink-100, #e8ecf0);
}

.acct-picker__empty {
  padding: 16px 12px;
  font-size: 13px;
  color: #4b5563;
  text-align: center;
}

.acct-picker__footer {
  padding: 6px 12px;
  font-size: 11px;
  font-weight: 600;
  color: #4b5563;
  border-top: 1px solid rgba(255,255,255,.06);
  letter-spacing: .03em;
}

/* ─── Org pills ─────────────────────────────────────────── */
.org-pills-row {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin: 4px 0 6px;
  padding: 2px;   /* tiny inset so edge pills don't clip against container */
}

.org-pill {
  appearance: none;
  position: relative;
  border: 1.5px solid rgba(0,0,0,.22);
  border-radius: 9px;
  padding: 0 14px;
  height: 30px;
  font: 700 11px / 28px 'Sora', system-ui, sans-serif;
  letter-spacing: .04em;
  text-transform: uppercase;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  transition: transform .14s ease, box-shadow .14s ease, opacity .14s ease, filter .14s ease;
  user-select: none;
  white-space: nowrap;
  box-shadow: 0 2px 6px rgba(0,0,0,.3), inset 0 1px 0 rgba(255,255,255,.15);
}
/* No ::before — removed per feedback */

.org-pill.member {
  box-shadow: 0 2px 10px rgba(0,0,0,.4), inset 0 1px 0 rgba(255,255,255,.2), 0 0 0 2px rgba(255,255,255,.1) inset;
}
/* Member indicator — tiny corner star for orgs where user is a Member */
.org-pill.member::before {
  content: "★";
  position: absolute;
  top: -6px;
  right: -6px;
  width: 16px;
  height: 16px;
  border-radius: 999px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 10px;
  font-weight: 900;
  line-height: 1;
  background: #d4af37; /* gold */
  border: 1px solid rgba(255,255,255,.35);
  box-shadow: 0 6px 14px rgba(0,0,0,.45);
  color: #0b0f1d;
  pointer-events: none;
}

.org-pill:hover  { transform: translateY(-2px); box-shadow: 0 5px 14px rgba(0,0,0,.45), inset 0 1px 0 rgba(255,255,255,.2); filter: brightness(1.1); }
.org-pill:active { transform: translateY(0); }
.org-pill.dimmed,
.org-pill.payroll-dimmed,
.org-pill.purchaser-dimmed { opacity: .3; filter: grayscale(.3) saturate(.7); }
.org-pill:focus-visible { outline: none; box-shadow: 0 0 0 3px rgba(201,168,76,.45); }
.org-pill.filter-on { outline: 2px solid rgba(255,255,255,.4); outline-offset: 1px; }

/* Permission mini-badge after the pill text — kept inline, not taller than pill */
.org-pill.payroll-on,
.org-pill.purchaser-on {
  box-shadow: 0 2px 10px rgba(0,0,0,.4), inset 0 0 0 2px rgba(255,255,255,.18);
}
.org-pill.payroll-on::after,
.org-pill.purchaser-on::after,
.org-pill.attendance-view::after,
.org-pill.attendance-edit::after,
.org-pill.attendance-super::after {
  content: '';
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 16px;            /* capped to fit inside 28px pill */
  padding: 0 4px;
  font-size: 8px;
  font-weight: 800;
  letter-spacing: .05em;
  border-radius: 4px;
  background: rgba(0,0,0,.35);
  border: 1px solid rgba(255,255,255,.2);
  flex-shrink: 0;
  line-height: 16px;
}
.org-pill.payroll-on::after    { content: "PAY"; }
.org-pill.purchaser-on::after  { content: "INV"; }
.org-pill.attendance-view::after  { content: "VIEW"; }
.org-pill.attendance-edit::after  { content: "EDIT"; }
.org-pill.attendance-super::after { content: "SUPER"; }
.org-pill.attendance-edit,
.org-pill.attendance-super { box-shadow: 0 2px 10px rgba(0,0,0,.4), inset 0 0 0 2px rgba(255,255,255,.18); }

/* ─── Section header summary chips ──────────────────────── */
.section-summary {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  flex-wrap: wrap;
}
.section-chip {
  display: inline-flex;
  align-items: center;
  height: 18px;
  padding: 0 7px;
  border-radius: 5px;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .03em;
  background: rgba(16,185,129,.15);
  border: 1px solid rgba(16,185,129,.3);
  color: #34d399;
  white-space: nowrap;
  flex-shrink: 0;
}
.section-chip.neutral {
  background: rgba(255,255,255,.07);
  border-color: rgba(255,255,255,.12);
  color: #6b7280;
}
.section-chip.warn {
  background: rgba(239,68,68,.1);
  border-color: rgba(239,68,68,.25);
  color: #f87171;
}
.action-section__header-right {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-left: auto;
  flex-shrink: 0;
}

/* ─── Org sub-sections (Member In & Transfer Rights nested under Org Access) ── */
.org-sub-section {
  margin-top: 12px;
  border-top: 1px solid rgba(255,255,255,.07);
  padding-top: 10px;
}
.org-sub-section__title {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .07em;
  text-transform: uppercase;
  color: #4b5563;
  margin-bottom: 8px;
}

/* ─── Membership revoke pills ────────────────────────────── */
.membership-pills {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.membership-pill {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  height: 26px;
  padding: 0 4px 0 10px;
  border-radius: 8px;
  background: rgba(16,185,129,.1);
  border: 1px solid rgba(16,185,129,.25);
  color: #34d399;
  font: 600 12px/1 'Sora', system-ui, sans-serif;
  cursor: default;
}
.membership-pill__revoke {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 18px; height: 18px;
  border-radius: 4px;
  background: rgba(239,68,68,.12);
  border: 1px solid rgba(239,68,68,.2);
  color: #f87171;
  cursor: pointer;
  flex-shrink: 0;
  transition: background .15s;
  padding: 0;
  line-height: 1;
}
.membership-pill__revoke .material-symbols-rounded {
  font-size: 12px !important;
  line-height: 1;
}
.membership-pill__revoke:hover {
  background: rgba(239,68,68,.3) !important;
  border-color: rgba(239,68,68,.5) !important;
  color: #fca5a5 !important;
}

/* ─── Mobile ────────────────────────────────────────────── */
@media (max-width: 540px) {
  th, td { padding: 8px; }
  #users-table th:nth-child(2), #users-table td:nth-child(2),
  #users-table th:nth-child(3), #users-table td:nth-child(3),
  #users-table th:nth-child(4), #users-table td:nth-child(4),
  #users-table th:nth-child(5), #users-table td:nth-child(5) { display: none; }
  table { table-layout: auto; }
  .icon-btn { width: 30px; height: 30px; }
  .topbar h1 { font-size: 15px; }
  select[multiple] { font-size: 16px; min-height: 120px; }
}

/* ─── Scrollbar ─────────────────────────────────────────── */
::-webkit-scrollbar { width: 6px; height: 6px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: rgba(255,255,255,.1); border-radius: 3px; }
::-webkit-scrollbar-thumb:hover { background: rgba(255,255,255,.18); }

/* ─── select[multiple] base dark styling ────────────────── */
select[multiple] {
  width: 100%;
  background: #0b0f1d;
  color: #e8ecf0;
  color-scheme: dark;
}
select[multiple] option {
  background: #0b0f1d;
  color: #e8ecf0;
  padding: 5px 10px;
}
select[multiple] option:checked {
  background: rgba(16,185,129,.28) !important;
  color: #34d399 !important;
}
select[multiple] option:disabled {
  color: #374151;
  background: transparent;
}
select optgroup {
  background: #080c18;
  color: #4b5563;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
}
select optgroup option {
  background: #0b0f1d;
  color: #e8ecf0;
  font-weight: 400;
  font-size: 13px;
  text-transform: none;
  letter-spacing: normal;
}

/* ─── Member badge dot ───────────────────────────────────── */
.badge.member {
  display: inline-flex;
  align-items: center;
  gap: 5px;
}

/* ─── User summary accent ────────────────────────────────── */
#user-summary {
  border-left: 3px solid rgba(16,185,129,.3);
}

/* ─── Guard row ──────────────────────────────────────────── */
.guard-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.guard-min { padding: 6px 10px !important; background: none !important; border: none !important; box-shadow: none !important; }
.guard-min #guard-msg { flex: 1; font-size: 13px; color: var(--ink-300); margin: 0; }
.guard-min #signout-btn { font-size: 12px; height: 28px; padding: 4px 10px; }

/* === CLEAN FIX membership revoke (X) button (keep original color) === */
.membership-pill__revoke {
  appearance: none !important;
  -webkit-appearance: none !important;
  background: transparent !important;
  border: 0 !important;
  outline: none !important;
  box-shadow: none !important;
  padding: 0 !important;
  margin-left: 6px !important;
  width: 18px !important;
  height: 18px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  border-radius: 50% !important;
  color: inherit !important;   /* keep original pill color */
  cursor: pointer;
}

.membership-pill__revoke .material-symbols-rounded {
  font-size: 12px !important;
  line-height: 1 !important;
}

.membership-pill__revoke:hover {
  background: rgba(255,255,255,.06) !important;
}