:root {
  --safe-top-raw: env(safe-area-inset-top);
  --safe-top: max(0px, calc(var(--safe-top-raw) - 14px)); /* reduced safe top */
  --safe-bottom: env(safe-area-inset-bottom);

  --bg: #f5f6f8;
  --fg: #0b0d12;
  --muted: #5b6472;
  --card: #ffffff;
  --accent: #2962ff;
  --warn: #fff8e1;
  --warn-border: #ffe082;
  --danger: #b71c1c;
  --ok: #2e7d32;
  --border: #e3e7ee;
}
* { box-sizing: border-box; }
html, body {
  margin:0;
  padding:0;
  background:var(--bg);
  color:var(--fg);
  font-family: system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  width:100%;
}

/* Sticky fix: don't apply overflow in the combined rule */
html { overflow-x: hidden; }
body { overflow-x: hidden; overflow-y: auto; overflow: visible; }

/* Sticky fix (Chrome):
   Avoid setting overflow on BOTH html and body in the same rule.
   Keep horizontal clipping, but don't constrain the root scroll container. */
html { overflow-x: hidden; }
body { overflow-x: hidden; overflow-y: auto; }

/* Top bar */
.topbar {
  position: -webkit-sticky;
  position: -webkit-sticky;
  position: sticky;
  top: 0;
  z-index: 10;
  background: #fff;
  border-bottom: 1px solid var(--border);
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;

  /* iOS PWA safe-area (reduced via --safe-top) */
  padding: calc(8px + var(--safe-top)) 10px 8px 10px;
}
.topbar__center { text-align:center; }
.topbar h1 { font-size:18px; margin:0; }
.topbar__right { display:flex; justify-content:flex-end; }
.icon-btn { display:inline-flex; align-items:center; justify-content:center; width:36px; height:36px; border-radius:50%; border:1px solid var(--border); background:#fff; color:var(--fg); text-decoration:none; }
.icon-btn:active { transform: translateY(1px); }

/* Layout */
.container { max-width:1000px; margin:16px auto; padding:0 16px; display:grid; gap:10px; }
.card { background:var(--card); border:1px solid var(--border); border-radius:12px; padding:10px; }
.card--compact { padding:8px 10px; }
.card.warn { background:var(--warn); border-color:var(--warn-border); }
.hidden { display:none; }

/* Titles */
.card h2, .row h2 { margin: 0 0 8px; line-height: 1.2; font-size: 17px;
  font-weight: 600; }
.card > *:first-child { margin-top: 0; }

/* Controls */
.search-form { display:grid; gap:10px; grid-template-columns: 1fr; }
.search-actions { display:flex; gap:8px; flex-wrap:wrap; }
.filters { gap:12px; flex-wrap:wrap; }
button { background:#e6e6eb; color:var(--fg); border:1px solid var(--border); padding:8px 12px; border-radius:8px; cursor:pointer; }
button:hover { border-color:#cfd6e4; }
button.danger { background:#fff5f5; border-color:#f3c1c1; color:#8b1e2d; }
input[type="text"] { background:#fff; color:var(--fg); border:1px solid var(--border); padding:8px 10px; border-radius:8px; min-width:0; width:100%; }

.muted { color:var(--muted); }

/* Table */
.responsive-table { display:block; width:100%; overflow-x:auto; -webkit-overflow-scrolling:touch; }
table { width:100%; border-collapse: collapse; min-width:0; table-layout: fixed; }
th, td { border-bottom:1px solid var(--border); padding:10px; text-align:left; vertical-align:top; }
th { font-weight:600; }
.badge { display:inline-flex; align-items:center; white-space:nowrap; padding:2px 6px; border-radius:999px; border:1px solid var(--border); font-size:11px; background:#f8fafc; }
.badge.ok { background:#e8f5e9; border-color:#c8e6c9; }
.badge.no { background:#ffebee; border-color:#ffcdd2; }
.badge.admin { background:#e3f2fd; border-color:#bbdefb; }
.badge.member { background:#fdeef3; border-color:#f8d7e3; }


.user-main{display:flex;flex-direction:column;gap:6px;}
.user-email{overflow-wrap:anywhere; word-break:break-word; line-height:1.25;}
.user-status{display:flex; flex-wrap:wrap; gap:6px;}

/* Actions below username/status */
.user-actions{
  display:grid;
  grid-template-columns: minmax(50px, 18%) 1fr; /* at least 88px, up to 18% */
  grid-auto-rows: auto;
  column-gap:12px;
  row-gap:10px;
  align-items:center;
  width:100%;
}
.user-actions button { padding:6px 6px; font-size:11px; line-height:1.1; min-width:0; white-space: normal; word-break: break-word; }

/* Guard row */
.guard-row{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;}

/* Compact guard card to shorten the section */
.guard-min {
  padding: 4px 8px !important;
  background: none !important;
  border: none !important;
  box-shadow: none !important;
}
.guard-min .guard-row {
  justify-content: flex-end !important;
  gap: 6px !important;
}
.guard-min #guard-msg {
  font-size: 13px !important;
  color: var(--muted);
  margin: 0;
}
/* === Compact and aligned Guard row === */
.guard-min .guard-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.guard-min #guard-msg {
  flex: 1;
  text-align: left;
  font-size: 14px;   /* slightly larger for message */
  margin: 0;
}

.guard-min #signout-btn {
  font-size: 12px;   /* 1px smaller text */
  height: 28px;      /* shorter pill */
  padding: 4px 8px;
  margin-left: 12px;
}

/* Mobile */
@media (max-width: 540px) {
  th, td { padding:8px; }
  /* Show only first col (User) on small screens */
  #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:32px; height:32px; }
  .topbar h1 { font-size:16px; }
}

.user-actions > small {
  display:inline-block !important;
  margin-right:10px !important;
  font-weight:700 !important;
}
.user-actions > div {
  display:inline-flex !important;
  align-items:center !important;
  flex-wrap:wrap !important;
  gap:8px !important;
}
.user-actions > div button{ width:100%; min-width:0; height:28px; font-size:10px; padding:7px 10px; line-height:1; }


/* Applied-state buttons: match the light green used by the Approved badge */
button.is-applied{
  background:#e8f5e9;
  border-color:#c8e6c9;
}
button.is-applied:hover{
  border-color:#b7dbb9;
}

/* === Title on its own line; buttons in one horizontal row === */
.user-actions{
  display: grid !important;
  grid-template-columns: 1fr !important; /* one column: title line then controls line */
  row-gap: 10px !important;
  width: 100%;
}
.user-actions > small {
  display:inline-block !important;
  margin-right:10px !important;
  font-weight:700 !important;
}
.user-actions > div {
  display:inline-flex !important;
  align-items:center !important;
  flex-wrap:wrap !important;
  gap:8px !important;
}
.user-actions > div button{
  width: auto !important;          /* stop full-width buttons */
  min-width: 96px !important;
  height: 28px !important;
  padding: 6px 8px !important;
  white-space: nowrap !important;
  font-size: 13px !important;
}
.user-actions select,
.account-picker select{
  min-width: 210px !important;
  height: 30px !important;
  border-radius: 6px !important;
  border: 1px solid rgba(130,130,130,0.35) !important;
  font-size: 13px !important;
  padding: 1px 5px !important;
}
.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: 200px !important;
  height: 30px !important;
}
#controls button {
  font-size: 12px;
  height: 28px;
  padding: 4px 8px;
}
#controls label {
  font-size: 13px;
}
/* === Align Admin Access Pill Right in Filters === */
#controls .filters {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
}
#admin-status-pill {
  margin-left: auto !important;
}
/* === Admin Access Pill Colour Logic === */
#admin-status-pill.no {
  background: #fff5f5 !important;
  border-color: #f3c1c1 !important;
  color: #8b1e2d !important; /* matches Sign out button text */
}

#admin-status-pill.ok {
  background: #e8f5e9 !important;
  border-color: #c8e6c9 !important;
  color: #2e7d32 !important; /* matches green success tone */
}
/* === Admin Access Pill Styling === */
#admin-status-pill {
  font-size: 13px !important; /* base font was ~11px, +2px larger */
  padding: 4px 10px !important;
}

/* Green (admin ok) */
#admin-status-pill.ok {
  background: #e8f5e9 !important;
  border-color: #c8e6c9 !important;
  color: #2e7d32 !important;
}

/* Red (no access) — matches Sign out button colours */
#admin-status-pill.no {
  background: #fff5f5 !important;
  border-color: #f3c1c1 !important;
  color: #8b1e2d !important;
}
/* === Font size adjustments === */
.topbar h1 { font-size: 21px !important; }
.card h2, .row h2 { font-size: 18px !important; }
.badge { font-size: 15px !important; }
#admin-status-pill { font-size: 16px !important; }
.user-actions > small {
  display:inline-block !important;
  margin-right:10px !important;
  font-weight:700 !important;
}
.user-actions > div button {
  min-width: 54px !important;
  padding: 4px 6px !important;
  line-height: 1 !important;
}
.account-picker select { font-size: 14px !important; }
#guard-msg { font-size: 14px !important; }
/* === Force black text in Admin Access Pill === */
#admin-status-pill,
#admin-status-pill.ok,
#admin-status-pill.no {
  color: #000 !important;
}
/* === Baked: place Admin Access pill on the same line as "Find Users" and align right === */
#controls > h2 {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
}
#controls > h2 #admin-status-pill {
  margin-left: auto !important;
  padding: 4px 10px !important;
  font-size: 14px !important;
}

/* Keep Pending / Approved together in filters row */
#controls .filters {
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
  justify-content: flex-start !important; /* ensure they stay together on the left */
}

/* Force black text for the admin pill in all states */
#admin-status-pill,
#admin-status-pill.ok,
#admin-status-pill.no {
  color: #000 !important;
}

/* (optional) or put the space on filters instead */
#controls .filters { margin-top: 10px; }

/* === Light transparent separator between each action section === */
.user-actions > small {
  display:inline-block !important;
  margin-right:10px !important;
  font-weight:700 !important;
}

/* Remove top border for the first section */
.user-actions > small:first-of-type {
  border-top: none !important;
  margin-top: 0 !important;
  padding-top: 0 !important;
}

/* === Grouped dropdown sections for membership/write access === */
select optgroup {
  font-weight: 600;
  color: #333;
  border-top: 1px solid rgba(0,0,0,0.08);
  padding-top: 4px;
  margin-top: 4px;
}
select optgroup:first-of-type {
  border-top: none;
  margin-top: 0;
}
select optgroup option {
  font-weight: 400;
  color: #000;
}

/* === Prevent select dropdowns from going off-screen === */
.user-actions select {
  max-height: 280px;     /* cap dropdown height; scroll if longer */
  overflow-y: auto;
}

/* bring focused selects above nearby UI */
.user-actions select:focus {
  position: relative;
  z-index: 9999;
}

/* ===== Org pills (v2: clean + minimal) =====
   Background/border/text colors come from inline styles in admin.js (org.color).
   This CSS only controls shape, spacing, states, and interactions.
*/
.org-pills-row{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
  margin:6px 0 10px;
}

.org-pill{
  appearance:none;
  border:1px solid transparent; /* will be replaced by inline borderColor */
  border-radius:10px;
  padding:6px 10px;
  font-size:12px;
  font-weight:600;
  letter-spacing:.02em;
  line-height:1;
  cursor:pointer;
  display:inline-flex;
  align-items:center;
  gap:6px;
  transition:transform .12s ease, filter .12s ease, opacity .12s ease, box-shadow .12s ease;
  user-select:none;
  white-space:nowrap;
}

/* tiny membership dot */
.org-pill.member::before{
  content:"";
  width:6px;
  height:6px;
  border-radius:50%;
  background:currentColor;
  opacity:.8;
}

/* hover: subtle pop, no shadowy “card” feel */
.org-pill:hover{
  transform:translateY(-1px);
  filter:saturate(1.05) brightness(1.02);
}

/* dimmed state when another org is filtered */
.org-pill.dimmed{
  opacity:.35;
  filter:grayscale(.15) saturate(.85);
}

/* keyboard focus */
.org-pill:focus-visible{
  outline:none;
  box-shadow:0 0 0 2px rgba(0,0,0,.9) inset, 0 0 0 3px rgba(0,0,0,.18);
}
/* Add to the end of admin.css */

/* Add to the end of the existing admin.css */

/* === Multiple selection styles === */
select[multiple] {
  min-height: 100px;
  max-height: 200px;
  overflow-y: auto;
  width: 100%;
  max-width: 400px;
}

/* Better touch targets for mobile */
@media (max-width: 768px) {
  select[multiple] {
    min-height: 120px;
    font-size: 16px; /* Prevents iOS zoom on focus */
  }
  button {
    min-height: 44px; /* Apple's recommended minimum touch target */
    padding: 12px 16px;
  }
}

/* Visual feedback for selected options */
select[multiple] option:checked {
  background-color: #007bff;
  color: white;
}

/* Make sure writer dropdown only shows non-member accounts */
.writer-select optgroup[label*="Already a member of"],
.writer-select optgroup[label*="Member of"] {
  display: none !important;
}

/* Filter styles for non-member accounts */
select.non-members-only optgroup[label*="Member of"],
select.non-members-only option[data-is-member="true"] {
  display: none !important;
}

/* Collapsed dropdown styles */
select.collapsed {
  height: 32px !important;
  min-height: 32px !important;
  overflow: hidden;
  transition: height 0.2s ease;
}

select.expanded {
  height: auto !important;
  min-height: 100px !important;
  overflow-y: auto;
}

/* Collapse/Expand toggle button */
.dropdown-toggle {
  background: #f0f0f0;
  border: 1px solid #ddd;
  border-radius: 4px;
  padding: 2px 8px;
  font-size: 12px;
  margin-left: 8px;
  cursor: pointer;
}

.dropdown-toggle:hover {
  background: #e0e0e0;
}

.dropdown-container {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 10px;
}

.dropdown-container select{
  flex: 1;
}


/* === Invoices permissions (Purchaser per org) === */
.org-pill.purchaser-on{
  box-shadow: 0 0 0 2px rgba(0,0,0,.22) inset, 0 0 0 3px rgba(255,255,255,.55);
}
.org-pill.purchaser-on::after{
  content: "INV";
  font-size: 10px;
  font-weight: 800;
  letter-spacing: .04em;
  padding: 2px 6px;
  border-radius: 999px;
  margin-left: 6px;
  background: rgba(255,255,255,.28);
  border: 1px solid rgba(255,255,255,.35);
}


/* === Payroll permissions (per org) === */
.org-pill.payroll-on{
  box-shadow: 0 0 0 2px rgba(0,0,0,.22) inset, 0 0 0 3px rgba(255,255,255,.55);
}
.org-pill.payroll-on::after{
  content: "PAY";
  font-size: 10px;
  font-weight: 800;
  letter-spacing: .04em;
  padding: 2px 6px;
  border-radius: 999px;
  margin-left: 6px;
  background: rgba(255,255,255,.28);
  border: 1px solid rgba(255,255,255,.35);
}
.org-pill.payroll-dimmed{
  opacity: .35;
  filter: grayscale(.15) saturate(.85);
}


/* === Section separator (used above "Invoices permissions") === */
.user-actions > small.section-sep{
  display:block;
  border-top: 1px solid rgba(0,0,0,0.10);
  margin-top: 12px;
  padding-top: 12px;
}

/* === Invoices permissions: dim "false" orgs when at least one is enabled === */
.org-pill.purchaser-dimmed{
  opacity: .35;
  filter: grayscale(.15) saturate(.85);
}

/* === Sticky stack: keep top of page sticky until just before Org Access ===
   Stack order:
   1) .topbar (already sticky)
   2) #controls (Find Users card)
   3) #user-summary (User header card)
   Scroll begins at #results (Org Access and below)
*/
:root{
  --topbar-h: 0px;
  --controls-h: 0px;
  --stack-gap: 0px; /* vertical gap between sticky cards */
}

/* Make the Find Users card sticky below the topbar */
#controls{
  position: sticky;
  top: var(--topbar-h);
  z-index: 9;
  background: var(--card);
}

/* Make the User summary card sticky below controls */
#user-summary{
  position: sticky;
  top: calc(var(--topbar-h) + var(--controls-h) + var(--stack-gap));
  z-index: 8;
  background: var(--card);
}

/* Tighten the summary card spacing to match screenshot */
#user-summary h2{ margin: 0 0 8px; }
#user-summary .user-email{ font-size: 18px; font-weight: 600; }
#user-summary .user-status .badge{ font-size: 14px !important; }

body { overflow-x: hidden; overflow-y: auto; }

/* === Sticky hard-fix (Chrome): make <html> the ONLY scroll container === */
html { overflow-y: auto !important; overflow-x: hidden !important; }
body { overflow: visible !important; }


/* User summary: keep title + email on one line */
.user-title{display:flex;align-items:baseline;gap:8px;flex-wrap:wrap;}
.user-title-email{font-weight:500;}