/* ============================================================
   ProjectTelemetry — Org Admin Module Styles
   assets/org-admin.css
   ============================================================ */

.oa-wrap { display:flex; flex-direction:column; }
.oa-tabs { display:flex; gap:2px; border-bottom:1px solid var(--bd); margin-bottom:16px; overflow-x:auto; flex-wrap:nowrap; scrollbar-width:none; }
.oa-tabs::-webkit-scrollbar { display:none; }
.oa-tabs > * { flex:none; }
.oa-tab-btn { padding:8px 16px; font-size:12px; font-weight:600; color:var(--ink-soft); border:none; background:none; cursor:pointer; border-bottom:2px solid transparent; font-family:Raleway,sans-serif; display:flex; align-items:center; gap:6px; }
.oa-tab-btn.on { color:var(--accent); border-bottom-color:var(--accent); }
.oa-tab-btn:hover:not(.on) { color:var(--ink); }
.oa-body { max-width:640px; }
.oa-loading { display:flex; justify-content:center; padding:40px 0; color:var(--ink-faint); }
.oa-empty { padding:24px; text-align:center; color:var(--ink-faint); font-size:13px; }
.oa-section { margin-bottom:8px; }
.oa-section-title { font-size:11px; font-weight:700; text-transform:uppercase; letter-spacing:.06em; color:var(--ink-soft); margin-bottom:10px; }

/* Toggle rows */
.oa-toggle-row { display:flex; align-items:center; justify-content:space-between; gap:16px; padding:10px 0; border-bottom:1px solid var(--bd); }
.oa-toggle-label { font-size:13px; font-weight:600; color:var(--ink); }
.oa-toggle-desc { font-size:11px; color:var(--ink-faint); margin-top:2px; }
.oa-switch { position:relative; display:inline-block; width:38px; height:22px; flex-shrink:0; }
.oa-switch input { opacity:0; width:0; height:0; }
.oa-switch-slider { position:absolute; cursor:pointer; inset:0; background:var(--bd); border-radius:22px; transition:.15s; }
.oa-switch-slider:before { content:""; position:absolute; height:16px; width:16px; left:3px; bottom:3px; background:var(--white); border-radius:50%; transition:.15s; }
.oa-switch input:checked + .oa-switch-slider { background:var(--accent); }
.oa-switch input:checked + .oa-switch-slider:before { transform:translateX(16px); }

/* Member / invite rows */
.oa-member-row { display:flex; align-items:center; gap:10px; padding:8px 10px; background:var(--white); border:1px solid var(--bd); border-radius:6px; }
.oa-member-info { flex:1; min-width:0; display:flex; flex-direction:column; }
.oa-member-name { font-size:12px; font-weight:700; color:var(--ink); }
.oa-member-meta { font-size:10px; color:var(--ink-faint); }
.oa-role-sel { font-size:10px; padding:3px 6px; border:1px solid var(--bd); border-radius:4px; background:var(--bg); color:var(--ink); }

/* Permission checklist (role editor) */
.oa-perm-cat { margin-bottom:14px; }
.oa-perm-cat-title { font-size:10px; font-weight:700; text-transform:uppercase; letter-spacing:.05em; color:var(--accent); margin-bottom:6px; }
.oa-perm-item { display:flex; align-items:flex-start; gap:8px; font-size:12px; color:var(--ink); padding:4px 0; cursor:pointer; }
.oa-perm-item input { margin-top:2px; accent-color:var(--accent); }
.oa-perm-desc { display:block; font-size:10px; color:var(--ink-faint); font-weight:400; }

/* ── Roles & Permissions editor (inline, role-first) ─────────── */
.oa-body-wide { max-width:1000px; }
.re-toolbar { display:flex; align-items:center; justify-content:space-between; gap:12px; margin-bottom:6px; flex-wrap:wrap; }
.re-toolbar-actions { display:flex; gap:8px; }
.re-hint { font-size:12px; color:var(--ink-faint); margin:0 0 16px; line-height:1.5; }
.re-role { border:1px solid var(--bd); border-radius:8px; margin-bottom:14px; background:var(--white); overflow:hidden; }
.re-role-head { display:flex; align-items:center; gap:12px; padding:11px 14px; border-bottom:1px solid var(--bd); background:var(--bg2); }
.re-moves { display:flex; flex-direction:column; gap:2px; flex-shrink:0; }
.re-move { width:22px; height:17px; display:grid; place-items:center; border:1px solid var(--bd); background:var(--white); border-radius:4px; cursor:pointer; color:var(--ink-soft); padding:0; font-size:12px; }
.re-move:hover:not(:disabled) { border-color:var(--accent); color:var(--accent); }
.re-move:disabled { opacity:.35; cursor:default; }
.re-role-id { flex:1; min-width:0; display:flex; flex-direction:column; gap:2px; }
.re-role-name { font-size:14px; font-weight:700; color:var(--ink); }
.re-role-desc { font-size:11.5px; color:var(--ink-soft); line-height:1.4; margin:1px 0; max-width:70ch; }
.re-role-meta { font-size:11px; color:var(--ink-faint); font-variant-numeric:tabular-nums; }
.oa-role-desc-input { width:100%; font-family:Raleway,sans-serif; font-size:13px; padding:7px 9px; border:1px solid var(--bd); border-radius:6px; background:var(--bg); color:var(--ink); resize:vertical; }
.re-tag { font-size:9px; font-weight:700; text-transform:uppercase; letter-spacing:.04em; padding:2px 6px; border-radius:20px; vertical-align:middle; white-space:nowrap; }
.re-tag-def { background:#E0E7FF; color:#3730A3; }
.re-tag-custom { background:#FEF3C7; color:#92400E; }
.re-role-actions { display:flex; gap:6px; flex-shrink:0; }
.re-role-body { padding:12px 14px; }
.re-cat { margin-bottom:12px; }
.re-cat:last-child { margin-bottom:0; }
.re-cat-title { font-size:10px; font-weight:700; text-transform:uppercase; letter-spacing:.05em; color:var(--ink-soft); margin-bottom:7px; }
.re-perms { display:flex; flex-wrap:wrap; gap:6px; }
.re-perm { display:inline-flex; align-items:center; gap:5px; font-size:12px; font-family:Raleway,sans-serif; padding:5px 9px; border-radius:6px; border:1px solid var(--bd); background:var(--white); color:var(--ink-faint); cursor:pointer; transition:background .12s, border-color .12s, color .12s; }
.re-perm i { font-size:12px; }
.re-perm:hover { border-color:var(--accent); color:var(--ink); }
.re-perm.on { background:var(--accent); border-color:var(--accent); color:#fff; }
.re-perm.on:hover { color:#fff; opacity:.92; }
.re-perm.changed { box-shadow:0 0 0 2px rgba(234,179,8,.55); }
.re-perm.locked { cursor:default; }
.re-perm.locked.on { opacity:.85; }
.re-perm.locked.off { opacity:.55; color:var(--ink-faint); }
.re-perm.disabled { cursor:not-allowed; opacity:.4; }
.re-perm.disabled:hover { border-color:var(--bd); }
.re-tag-lock { background:#DCFCE7; color:#166534; display:inline-flex; align-items:center; gap:4px; }
.re-tag-ro { background:#E5E7EB; color:var(--ink); display:inline-flex; align-items:center; gap:4px; }
.re-lock-note, .re-ro-note { font-size:11px; color:var(--ink-soft); background:var(--bg2); border:1px dashed var(--bd); border-radius:6px; padding:8px 10px; margin-bottom:10px; display:flex; align-items:center; gap:7px; }
.re-savebar { position:sticky; bottom:12px; margin-top:10px; display:flex; align-items:center; justify-content:space-between; gap:12px; padding:10px 14px; background:var(--white); border:1px solid var(--accent); border-radius:8px; box-shadow:0 6px 20px rgba(0,0,0,.12); font-size:12px; color:var(--ink); z-index:5; }

/* ── Organization overview ───────────────────────────────────── */
.oa-stat-grid { display:grid; grid-template-columns:repeat(auto-fit, minmax(120px,1fr)); gap:10px; margin-bottom:10px; }
.oa-stat-card { background:var(--bg2); border:1px solid var(--bd); border-radius:8px; padding:12px; }
.oa-stat-label { font-size:9px; text-transform:uppercase; letter-spacing:.05em; color:var(--ink-faint); font-weight:700; margin-bottom:4px; }
.oa-stat-value { font-size:20px; font-weight:700; color:var(--ink); font-family:JetBrains Mono,monospace; }
.oa-stat-sub { font-size:10px; color:var(--ink-soft); margin-top:2px; }
.oa-seat-bar-wrap { height:6px; background:var(--bd); border-radius:4px; overflow:hidden; margin-bottom:6px; }
.oa-seat-bar { height:100%; transition:width .3s; }
.oa-activity-list { display:flex; flex-direction:column; gap:2px; max-height:320px; overflow-y:auto; }
.oa-activity-row { display:flex; align-items:center; gap:8px; padding:7px 4px; border-bottom:1px solid var(--bd); font-size:12px; }

/* ══════════════════════════════════════════════════════════
   ACCESS GRID — roles down the side, permissions across the top.
   An alternate view of the same staged edits as Roles & Permissions.
   ══════════════════════════════════════════════════════════ */
.pg-search { padding:6px 10px; border:1px solid var(--bd); border-radius:7px; font-size:12.5px; min-width:230px; background:var(--white); color:var(--ink); }

.pg-chips { display:flex; flex-wrap:wrap; gap:6px; margin:0 0 14px; }
.pg-chip { padding:5px 11px; border:1px solid var(--bd); border-radius:999px; background:var(--white); color:var(--ink-soft); font-size:12px; cursor:pointer; white-space:nowrap; transition:background .12s,color .12s,border-color .12s; }
.pg-chip:hover { border-color:var(--accent); color:var(--ink); }
.pg-chip.on { background:var(--accent); border-color:var(--accent); color:#fff; font-weight:600; }

.pg-count { font-size:11.5px; color:var(--ink-soft); margin:0 0 8px; }
.pg-count b { color:var(--ink); }
.pg-count-hint { color:var(--ink-faint); margin-left:8px; }
.pg-count-hint .ti { font-size:12px; vertical-align:-1px; }

/* `contain` tells the browser this box's insides can never affect anything
   outside it, so a scroll repaint stops at the grid instead of inviting the
   page to re-check its own layout. */
.pg-scroll { overflow:auto; max-height:70vh; border:1px solid var(--bd); border-radius:10px; background:var(--white); contain:paint; will-change:scroll-position; -webkit-overflow-scrolling:touch; }
/* Rows outside the viewport are skipped entirely — no layout, no paint — which
   is what stops a 1,200-cell table from costing 1,200 cells' worth of work on
   every frame. contain-intrinsic-size keeps the scrollbar honest by reserving
   each skipped row's height. Browsers without content-visibility simply ignore
   this and behave exactly as before. */
.pg-table tbody tr { content-visibility:auto; contain-intrinsic-size:auto 34px; }
.pg-table { border-collapse:separate; border-spacing:0; font-size:12px; }

/* Sticky header row + sticky role column; the corner outranks both. */
.pg-table thead th { position:sticky; top:0; z-index:2; background:var(--bg); border-bottom:1px solid var(--bd); }
.pg-rolecol { position:sticky; left:0; z-index:3; background:var(--white); border-right:1px solid var(--bd); text-align:left; padding:8px 12px; min-width:190px; max-width:190px; }
.pg-corner { z-index:4; background:var(--bg); }
.pg-table tbody tr:nth-child(even) .pg-rolecol { background:var(--bg); }

.pg-head { padding:8px 6px; min-width:118px; max-width:118px; vertical-align:bottom; text-align:center; font-weight:600; color:var(--ink); line-height:1.25; }
.pg-head-lbl { display:block; font-size:11px; }
.pg-head-cat { display:block; font-size:9.5px; font-weight:400; color:var(--ink-faint); text-transform:uppercase; letter-spacing:.03em; margin-top:3px; }

.pg-role-name { display:block; font-weight:600; color:var(--ink); font-size:12.5px; }
.pg-role-name .ti { font-size:12px; color:var(--ink-faint); vertical-align:baseline; }
.pg-role-meta { display:block; font-size:10.5px; color:var(--ink-faint); margin-top:2px; }

.pg-cell { text-align:center; padding:7px 6px; border-bottom:1px solid var(--bd); }
.pg-table tbody tr:nth-child(even) .pg-cell { background:var(--bg); }

/* The switch itself */
/* A thousand-plus of these exist at once, so each one's paint cost is
   multiplied by the whole grid.
   · The knob carried a box-shadow — 1,200 shadowed circles is one of the most
     expensive things you can ask a compositor to repaint on every scroll frame.
     A flat knob is visually indistinguishable at 13px and costs nothing.
   · The transitions are worth keeping (they only run on the toggle you touch),
     but they are named explicitly so the browser never has to consider
     animating anything else. */
.pg-tog { display:inline-block; width:34px; height:19px; border-radius:999px; border:1px solid var(--bd); background:var(--bd); position:relative; cursor:pointer; padding:0; vertical-align:middle; transition:background .14s,border-color .14s; }
.pg-tog::after { content:''; position:absolute; top:2px; left:2px; width:13px; height:13px; border-radius:50%; background:var(--white); transition:transform .14s; }
.pg-tog.on { background:var(--accent); border-color:var(--accent); }
.pg-tog.on::after { transform:translateX(15px); }
.pg-tog:not(.locked):not(.disabled):hover { border-color:var(--accent); }
.pg-tog.locked, .pg-tog.disabled { cursor:not-allowed; opacity:.45; }
/* A staged, unsaved change gets a ring so it is findable before saving. */
.pg-tog.changed { box-shadow:0 0 0 2px var(--white), 0 0 0 4px #D97706; }

@media (max-width:700px) {
  .pg-rolecol { min-width:132px; max-width:132px; }
  .pg-head { min-width:96px; max-width:96px; }
}

/* ── Account ownership ───────────────────────────────────────────
   Deliberately heavier than the rest of the members tab. Handing over the
   account is the one action nobody should perform while skim-reading, and a
   panel that looked like every other settings box would invite exactly that. */
.oa-own-box { margin-top:18px; padding:14px 16px; border:1px solid var(--bd); border-radius:10px;
  background:var(--bg2); }
.oa-own-box.warn { border-color:#B45309; background:color-mix(in srgb,#B45309 7%,transparent); }
.oa-own-h { display:flex; align-items:center; gap:7px; font-size:13px; font-weight:800; color:var(--ink); margin-bottom:6px; }
.oa-own-box.warn .oa-own-h { color:#B45309; }
.oa-own-p { font-size:12.5px; line-height:1.55; color:var(--ink-soft); margin:0 0 10px; }
.oa-own-note { font-size:12.5px; font-style:italic; color:var(--ink); margin:0 0 10px;
  padding-left:10px; border-left:3px solid var(--bd); }
.oa-own-l { display:block; font-size:11px; font-weight:700; color:var(--ink-soft); margin:0 0 4px; }
.oa-own-in { width:100%; padding:8px 10px; border:1px solid var(--bd); border-radius:7px;
  background:var(--white); color:var(--ink); font-size:13px; margin-bottom:8px; }
/* The phrase is typed in capitals, so the field should not fight the user by
   rendering it any other way. */
#oa-own-confirm, #oa-own-accept { font-family:ui-monospace,Menlo,monospace; letter-spacing:.04em; text-transform:uppercase; }
.oa-own-acts { display:flex; gap:8px; justify-content:flex-end; }
/* The one person the account is registered to. */
.oa-holder-chip { display:inline-flex; align-items:center; gap:4px; margin-left:7px; vertical-align:middle;
  font-size:10px; font-weight:800; letter-spacing:.02em; padding:1px 7px; border-radius:20px;
  background:color-mix(in srgb,#B45309 14%,transparent); color:#B45309; white-space:nowrap; }
.oa-holder-chip i { font-size:11px; }