/* ===== Staff page (light/dark) ===== */
:root{
  --bg: #f6f7f8;
  --surface:#ffffff;
  --surface-1:#fafafa;
  --surface-2:#f1f5f9;
  --surface-3:#eef2f7;
  --text:#0f172a;
  --muted:#6b7280;
  --muted-strong:#374151;
  --border:#e5e7eb;
  --brand-50:#eef6ff;
  --brand-700:#0f5fb9;
  --brand-500:#137fec;
  --danger-500:#e11d48;
  --danger-600:#be123c;
  --emerald:#10b981;
  --rose:#f43f5e;
  --shadow: 0 1px 0 rgba(0,0,0,.04);
  --radius: 12px;
}
.dark{
  --bg:#101922;
  --surface:#0b1220;
  --surface-1:#0f172a;
  --surface-2:#0e1726;
  --surface-3:#0c1522;
  --text:#e5e7eb;
  --muted:#94a3b8;
  --muted-strong:#cbd5e1;
  --border:#1f2937;
  --brand-50:#0c1f33;
  --brand-700:#2b88e4;
  --brand-500:#3ba0ff;
  --danger-500:#f43f5e;
  --danger-600:#e11d48;
  --shadow: 0 1px 0 rgba(255,255,255,.06);
}

*{ box-sizing:border-box; }
html,body{ height:100%; }
body{
  margin:0; font-family:Inter, ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial;
  color:var(--text); background:var(--bg); line-height:1.4;
}
a{ color:inherit; text-decoration:none; }
button{ font:inherit; color:inherit; background:none; border:0; padding:0; cursor:pointer; }
input,select,textarea{ font:inherit; color:inherit; }
.material-symbols-outlined{ font-variation-settings:'OPSZ' 24; }

/* Utilities */
.hide-sm{ display:none; } @media (min-width:640px){ .hide-sm{ display:flex; } }
.row{ display:flex; align-items:center; gap:.5rem; }
.gap-6{ gap:.6rem; }
.muted{ color:var(--muted); }
.xs{ font-size:.78rem; }
.semibold{ font-weight:600; }
.link{ color:var(--brand-700); }

/* Page shell */
.page{ min-height:100vh; }
.app{ display:flex; height:100vh; overflow:hidden; position:relative; }
.overlay{ position:fixed; inset:0; background:rgba(0,0,0,.45); z-index:40; }
.skiplink{ position:absolute; left:-9999px; }
.skiplink:focus{ position:fixed; left:12px; top:12px; z-index:1000; padding:8px 10px; border-radius:10px; background:var(--surface); border:1px solid var(--border); }

/* Sidebar */
.sidebar{
  position:fixed; left:0; top:0; bottom:0; z-index:50; width:256px;
  transform:translateX(-100%); background:var(--surface); border-right:1px solid var(--border);
  transition:transform .28s ease, width .28s ease;
}
.sidebar.is-open{ transform:translateX(0); }
@media (min-width:1024px){ .sidebar{ transform:none; } }
.sidebar__inner{ height:100%; display:flex; flex-direction:column; }
.brand{ display:flex; align-items:center; gap:10px; padding:16px 20px; border-bottom:1px solid var(--border); }
.brand__icon{ width:28px; height:28px; color:var(--brand-500); }
.brand__name{ font-size:1.05rem; font-weight:800; }
.nav{ display:flex; flex-direction:column; padding:10px; gap:6px; }
.nav__item{ display:flex; align-items:center; gap:10px; padding:10px 12px; border-radius:10px; color:var(--muted); }
.nav__item:hover{ background:var(--brand-50); color:var(--brand-700); }
.nav__item--active{ background:rgba(19,127,236,.12); color:var(--brand-700); }
.nav__text{ font-size:.95rem; font-weight:600; }
.nav--footer{ margin-top:auto; padding-top:8px; border-top:1px solid var(--border); }

/* Content */
.content{ display:flex; flex-direction:column; flex:1 1 auto; margin-left:0; transition:margin-left .28s ease; }
@media (min-width:1024px){ .content{ margin-left:256px; } }
.content--collapsed{ margin-left:80px; }
.content--expanded{ margin-left:256px; }
.container{ max-width:1200px; margin:0 auto; padding:20px 16px; }

/* Header */
.header{
  position:sticky; top:0; z-index:30;
  display:flex; align-items:center; justify-content:space-between;
  padding:10px 16px; background:var(--surface);
  border-bottom:1px solid var(--border); box-shadow:var(--shadow);
}
.header__left, .header__right{ display:flex; align-items:center; gap:10px; }
.header__title{ font-size:1.1rem; font-weight:800; letter-spacing:-.01em; }

.icon-btn{
  display:inline-flex; align-items:center; justify-content:center;
  width:40px; height:40px; border-radius:10px;
  background:var(--surface-2); border:1px solid var(--border);
}
.icon-btn:hover{ background:var(--surface-3); }
.icon-btn.ghost{ background:transparent; border-color:var(--border); }
.avatar{ --size:40px; width:var(--size); height:var(--size); border-radius:50%; background: center/cover no-repeat var(--avatar); border:1px solid var(--border); }

/* Search */
.search{ display:flex; align-items:center; gap:8px; background:var(--bg); border:1px solid var(--border); padding:6px 10px; border-radius:10px; }
.search__icon{ color:var(--muted); }
.search__input{ border:0; outline:0; background:transparent; min-width:220px; color:var(--text); }

/* Toolbar */
.toolbar{ display:flex; align-items:center; justify-content:space-between; margin:10px 0 16px; gap:10px; }
.chip{ display:inline-flex; align-items:center; gap:.5rem; background:var(--surface-2); border:1px solid var(--border); padding:.45rem .6rem; border-radius:999px; color:var(--muted); font-size:.85rem; }
.switch{ width:16px; height:16px; }

/* Card / table */
.card{ border:1px solid var(--border); border-radius:var(--radius); background:var(--surface); padding:16px; box-shadow:var(--shadow); }
.card__head{ display:flex; align-items:center; justify-content:space-between; gap:10px; }
.card__title{ font-weight:700; }

.table-wrap{ position:relative; overflow:auto; border-radius:12px; }
.table{ width:100%; border-collapse:separate; border-spacing:0; }
.table th, .table td{ padding:.75rem .9rem; border-bottom:1px solid var(--border); vertical-align:middle; }
.table thead th{ background:var(--surface-2); color:var(--muted-strong); font-weight:600; text-align:center; }
.table tr:hover td{ background:var(--surface-1); }
.th-actions{ width:1%; white-space:nowrap; }

.table-loading{ display:grid; place-items:center; gap:8px; padding:28px 0; }
.spinner{ width:28px; height:28px; border-radius:999px; border:3px solid #dbeafe; border-top-color:var(--brand-500); animation:spin .9s linear infinite; }
@keyframes spin{ to { transform:rotate(360deg); } }
.empty-row{ padding:18px; text-align:center; color:var(--muted); border:1px dashed var(--border); border-radius:12px; background:var(--surface); }

/* Buttons */
.btn{ display:inline-flex; align-items:center; gap:6px; padding:9px 12px; border-radius:10px; border:1px solid var(--border); background:var(--surface); color:var(--text); font-weight:600; }
.btn:hover{ background:var(--brand-50); }
.btn--primary{ background:var(--brand-500); color:#fff; border-color:transparent; }
.btn--primary:hover{ background:#0f6ed6; }
.btn--danger{ background:var(--danger-500); color:#fff; border-color:transparent; }
.btn--danger:hover{ background:var(--danger-600); }
.btn--ghost{ background:transparent; }

/* Pills */
.pill{ display:inline-flex; align-items:center; gap:.35rem; padding:.2rem .55rem; border-radius:999px; font-size:.75rem; border:1px solid var(--border); background:var(--surface-2); }
.pill--admin{ background:#eef2ff; color:#4338ca; }
.pill--neutral{ background:#f1f5f9; color:#334155; }
.pill--active{ background:#ecfdf5; color:#065f46; }
.pill--inactive{ background:#fef2f2; color:#991b1b; }
.dot{ width:.45rem; height:.45rem; border-radius:50%; background:#cbd5e1; }
.dot--purple{ background:#7c3aed; }
.dot--slate{ background:#64748b; }
.dot--green{ background:#10b981; }
.dot--rose{ background:#ef4444; }

.actions{ display:flex; gap:.5rem; align-items:center; }

/* Modal (shared) */
.modal-scrim{ position:fixed; inset:0; display:grid; place-items:center; background:rgba(2,8,23,.46); z-index:80; }
.modal{ width:min(720px, calc(100vw - 24px)); background:var(--surface); border:1px solid var(--border); border-radius:16px; box-shadow:0 20px 60px rgba(0,0,0,.28); max-height:80vh; overflow:auto; }
.modal--panel{ display:flex; flex-direction:column; }
.modal__head{ display:flex; align-items:center; justify-content:space-between; padding:14px 16px; border-bottom:1px solid var(--border); }
.modal__title{ font-weight:800; font-size:1rem; }
.modal__body{ padding:16px; }
.modal__foot{ display:flex; align-items:center; justify-content:flex-end; gap:10px; padding:12px 16px; border-top:1px solid var(--border); }

.form.grid.gap{ display:grid; gap:12px; }
.field .field__label{ display:block; font-size:.85rem; color:var(--muted); margin-bottom:6px; }
.input{ width:100%; padding:9px 10px; border-radius:10px; border:1px solid var(--border); background:var(--surface); color:var(--text); outline:none; }
.input:focus{ border-color:var(--brand-500); box-shadow:0 0 0 3px rgba(19,127,236,.16); }
.req{ color:#d22; }

/* Avatars */
.avatar.sm{ width:28px; height:28px; border-radius:50%; background: center/cover no-repeat var(--avatar); border:1px solid var(--border); }






/* denser rows and cleaner lines */
.table th, .table td { padding:.65rem .9rem; vertical-align:middle; }
.table tr:hover td { background:var(--surface-1); }

/* that faint line under 'admin2' is usually from a child block; remove it */
.table td .semibold,
.table td .muted { border-bottom:0 !important; }

/* optional: subtler borders so badges/buttons pop more */
.table th, .table td { border-bottom:1px solid color-mix(in oklab, var(--border) 85%, transparent); }






/* clamp long email text */
.table td a.link {
  display:inline-block; max-width:220px; overflow:hidden;
  text-overflow:ellipsis; white-space:nowrap; vertical-align:middle;
}
@media (min-width:1024px){ .table td a.link { max-width:300px; } }





.actions { gap:.4rem; flex-wrap:wrap; justify-content:flex-start; }
@media (min-width:900px){ .actions { flex-wrap:nowrap; } }

.pill--admin{ background:#eef2ff; color:#3730a3; border-color:#e0e7ff; }
.pill--active{ background:#ecfdf5; color:#065f46; border-color:#d1fae5; }
.pill--inactive{ background:#fef2f2; color:#991b1b; border-color:#fee2e2; }



.card { padding:12px; }
.table-wrap { border-radius:12px; }
.empty-row { margin:6px 0; }