:root{
  --acc:#4f46e5; --acc-d:#4338ca; --bd:#e5e7eb; --mut:#6b7280; --ink:#111827;
  --bg:#f6f7f9; --card:#ffffff; --nav:#111827; --danger:#b91c1c;
}
*{box-sizing:border-box}
html,body{height:100%}
body{margin:0;font:14px/1.55 system-ui,-apple-system,sans-serif;color:var(--ink);background:var(--bg)}
a{color:var(--acc);text-decoration:none}

/* layout */
.admin-layout{display:flex;min-height:100vh}
.admin-nav{width:224px;flex:0 0 auto;background:var(--nav);color:#e5e7eb;display:flex;flex-direction:column;padding:14px 12px;gap:2px}
.admin-nav .brand{font-weight:800;font-size:16px;color:#fff;padding:8px 10px 14px}
.admin-nav .brand span{color:#a5b4fc}
.admin-nav a.nav-item{display:flex;align-items:center;gap:9px;padding:9px 11px;border-radius:8px;color:#cbd5e1;font-weight:500}
.admin-nav a.nav-item:hover{background:#1f2937;color:#fff}
.admin-nav a.nav-item.active{background:var(--acc);color:#fff}
.admin-nav .nav-group{margin-top:12px;padding-top:10px;border-top:1px solid #1f2937}
.admin-nav .nav-group-label{padding:2px 11px 8px;font-size:11px;text-transform:uppercase;letter-spacing:.05em;color:#64748b;font-weight:700;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.admin-nav a.nav-item.sub{margin-left:9px;padding-left:13px;border-left:2px solid #1f2937}
.admin-nav a.nav-item.sub:hover{border-left-color:#334155}
.admin-nav a.nav-item.sub.active{border-left-color:#a5b4fc}
.admin-nav .nav-sp{flex:1}
.admin-nav .nav-foot{padding:10px;font-size:12px;color:#94a3b8;border-top:1px solid #1f2937}
.admin-nav .nav-foot a{color:#a5b4fc}

.admin-body{flex:1 1 auto;min-width:0;display:flex;flex-direction:column}
.admin-top{display:flex;align-items:center;gap:14px;padding:12px 24px;background:var(--card);border-bottom:1px solid var(--bd)}
.admin-top .acct{font-weight:600}
.admin-top .sp{flex:1}
.admin-top .who{color:var(--mut);font-size:13px}
.admin-main{padding:24px;width:100%;min-width:0}

/* typography / bits */
.page-title{font-size:22px;margin:0}
.muted{color:var(--mut)}
.empty{padding:40px;text-align:center;color:var(--mut)}
.row{display:flex;gap:10px;align-items:center;flex-wrap:wrap}
.toolbar{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:16px;flex-wrap:wrap}

/* card */
.card{background:var(--card);border:1px solid var(--bd);border-radius:12px;padding:18px;margin-bottom:18px;box-shadow:0 1px 2px rgba(16,24,40,.04)}
.card h2,.card h3{margin:0 0 12px;font-size:15px}

/* buttons */
.btn{display:inline-flex;align-items:center;gap:6px;font:inherit;padding:8px 14px;border-radius:8px;border:1px solid var(--bd);background:#fff;color:var(--ink);cursor:pointer;white-space:nowrap}
.btn:hover{background:#f9fafb}
.btn.primary{background:var(--acc);border-color:var(--acc);color:#fff}
.btn.primary:hover{background:var(--acc-d)}
.btn.danger{color:var(--danger);border-color:#fecaca}
.btn.danger:hover{background:#fef2f2}
.btn.ghost{border-color:transparent;background:transparent;padding:6px 10px}
.btn.ghost:hover{background:#f3f4f6}
.btn:disabled{opacity:.5;cursor:default}

/* fields */
.input,.select{font:inherit;padding:9px 11px;border:1px solid var(--bd);border-radius:8px;background:#fff;width:100%}
.input:focus,.select:focus{outline:2px solid #c7d2fe;border-color:var(--acc)}
.field{display:flex;flex-direction:column;gap:4px}
.field label{font-size:12px;color:var(--mut)}

/* table */
.table{width:100%;border-collapse:collapse}
.table th{text-align:left;font-size:11px;text-transform:uppercase;letter-spacing:.04em;color:var(--mut);padding:8px 10px;border-bottom:1px solid var(--bd)}
.table td{padding:10px;border-bottom:1px solid #f1f2f4;vertical-align:middle}
.table tr:last-child td{border-bottom:0}

/* badges */
.badge{display:inline-block;padding:2px 9px;border-radius:999px;font-size:12px;font-weight:600}
.badge.view{background:#f1f5f9;color:#475569}
.badge.comment{background:#fef3c7;color:#92400e}
.badge.edit{background:#dbeafe;color:#1e40af}
.badge.admin{background:#e0e7ff;color:#3730a3}

/* stats */
.stat-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:16px;margin-bottom:18px}
.stat{background:var(--card);border:1px solid var(--bd);border-radius:12px;padding:18px;display:block;color:inherit}
.stat:hover{border-color:var(--acc)}
.stat-n{font-size:30px;font-weight:800;line-height:1}
.stat-l{color:var(--mut);margin-top:6px}

/* modal */
.modal{position:fixed;inset:0;background:rgba(17,24,39,.5);display:flex;align-items:center;justify-content:center;z-index:1000;padding:20px}
.modal-card{background:#fff;border-radius:14px;width:min(620px,96vw);max-height:86vh;overflow:auto;padding:20px}
.modal-card h2{margin:0 0 14px;font-size:17px}

/* zebra rows + hover for readability */
.table tbody tr:nth-child(even){background:#fafbfe}
.table tbody tr:hover{background:#eef2ff}
.table td a.link{color:var(--acc);font-weight:600}
.table td a.link:hover{text-decoration:underline}

/* org-role badges */
.badge.owner{background:#fee2e2;color:#991b1b}
.badge.member{background:#f1f5f9;color:#475569}

/* org context banner + switcher in the topbar */
.org-banner{display:flex;align-items:center;gap:10px;background:#fef9c3;border-bottom:1px solid #fde68a;color:#854d0e;padding:8px 24px;font-size:13px}
.org-banner .sp{flex:1}
.admin-top .role{font-size:11px;text-transform:uppercase;letter-spacing:.04em;color:#6b7280;border:1px solid var(--bd);border-radius:999px;padding:1px 8px}
.admin-top .orgpill{font-weight:600}
.admin-top .orgpill small{color:var(--mut);font-weight:400}

/* toast */
#toast{position:fixed;bottom:18px;right:18px;background:var(--nav);color:#fff;padding:11px 16px;border-radius:9px;font-size:14px;opacity:0;transform:translateY(6px);transition:.2s;z-index:2000;box-shadow:0 8px 24px rgba(0,0,0,.25)}
#toast.show{opacity:1;transform:none}

/* prevent the whole page from scrolling sideways; wide content scrolls inside its own container */
html,body{max-width:100%;overflow-x:hidden}
.card{overflow-x:auto}                 /* wide tables scroll within their card, not the page */

/* ---- mobile: sidebar becomes a scrollable top bar; rows stack ---- */
@media (max-width:720px){
  .admin-layout{flex-direction:column}
  .admin-nav{width:auto;flex-direction:row;align-items:center;gap:4px;
    padding:8px 10px;overflow-x:auto;-webkit-overflow-scrolling:touch}
  .admin-nav .brand{padding:6px 6px;font-size:15px;white-space:nowrap}
  .admin-nav a.nav-item{padding:8px 11px;white-space:nowrap;border-radius:999px}
  .admin-nav .nav-group{display:flex;align-items:center;gap:4px;margin:0;padding:0;border:0}
  .admin-nav .nav-group-label{display:none}
  .admin-nav a.nav-item.sub{margin:0;padding-left:11px;border-left:0}
  .admin-nav .nav-sp{display:none}
  /* keep the Sign out link, drop the "Signed in as <email>" text to save the row */
  .admin-nav .nav-foot{border:0;padding:6px 8px;font-size:0;white-space:nowrap}
  .admin-nav .nav-foot br,.admin-nav .nav-foot strong{display:none}
  .admin-nav .nav-foot a{font-size:12px}

  .admin-top{flex-wrap:wrap;gap:8px;padding:10px 14px}
  .admin-top .sp{flex-basis:100%;height:0}   /* force a line break after the org pill */
  .admin-main{padding:16px 14px}

  .toolbar{flex-direction:column;align-items:stretch}
  .toolbar .btn{width:100%;justify-content:center}
  .row{flex-direction:column;align-items:stretch}
  .field{min-width:0}
  .modal{padding:10px}
  .modal-card{width:96vw;padding:16px}
}