/* Admin panel (admin.html) — builds on app.css */

.wrap{max-width:1100px; margin:0 auto; padding:8px 24px 70px;}
.page-head{padding:30px 0 6px;}
.page-head .eyebrow{margin:0 0 6px; font-size:12px; font-weight:700; letter-spacing:.12em; text-transform:uppercase; color:var(--brand-strong);}
.page-head h1{font-size:clamp(26px,3.2vw,34px); font-weight:800; letter-spacing:-.025em;}
.page-head .sub{margin:6px 0 0; color:var(--muted); font-size:15px; max-width:46rem;}
#who{margin-top:8px; font-size:13.5px;}

.grid{display:grid; grid-template-columns:repeat(auto-fit,minmax(230px,1fr)); gap:16px;}
.card{padding:24px;}
.card h2{font-size:19px; margin-bottom:6px;}
.top{display:flex; justify-content:space-between; align-items:center; gap:10px;}

/* Tabs: a segmented control */
.worktabs{
  display:flex; gap:6px; margin:18px 0 22px; padding:5px;
  background:var(--surface-2); border:1px solid var(--border); border-radius:14px;
}
.worktab{
  flex:1; display:flex; align-items:center; justify-content:center; gap:9px;
  padding:11px 10px; border:0; border-radius:10px; background:transparent;
  color:var(--muted); font-family:inherit; font-size:14.5px; font-weight:600; cursor:pointer; min-height:44px;
  transition:background .15s ease, color .15s ease;
}
.worktab .ic{display:flex;}
.worktab .ic svg{width:19px; height:19px;}
.worktab:hover:not(.active){color:var(--text); background:color-mix(in srgb, var(--surface) 60%, transparent);}
.worktab.active{background:var(--surface); color:var(--text); box-shadow:var(--shadow-sm);}
.workpanel{display:none;}
.workpanel.active{display:block;}

/* Inline "add" rows */
.inline-add{display:flex; gap:8px; margin-top:12px; flex-wrap:wrap;}
.inline-add input{flex:1 1 180px;}
.inline-add button{flex-shrink:0;}
.org-head{display:flex; justify-content:space-between; align-items:center; gap:10px; flex-wrap:wrap;}
.org{border-bottom:1px solid var(--border); padding:14px 0;}
.org:last-child{border-bottom:0;}
.org-sites{display:flex; flex-wrap:wrap; gap:8px; margin-top:10px;}
.org-site-chip{
  display:inline-flex; align-items:center; gap:8px; background:var(--brand-soft); color:var(--brand-strong);
  border:1px solid var(--ok-border); border-radius:999px; padding:5px 8px 5px 13px; font-size:13px; font-weight:600;
}
.org-site-chip button{
  border:0; background:transparent; color:var(--danger); width:22px; height:22px; border-radius:50%;
  display:inline-flex; align-items:center; justify-content:center; padding:0; font-size:16px; line-height:1; font-weight:700;
}
.org-site-chip button:hover{background:var(--danger-soft);}

/* Users */
.user{display:flex; justify-content:space-between; gap:16px; align-items:center; border:1px solid var(--border); border-radius:14px; background:var(--surface-2); padding:16px 18px;}
.user.inactive{opacity:.6;}
.user .muted{margin-top:4px;}
.pill{display:inline-block; padding:3px 10px; border-radius:999px; background:var(--brand-soft); color:var(--brand-strong); border:1px solid var(--ok-border); font-size:12px; font-weight:700; vertical-align:middle; margin-left:6px;}
.pill.role-external{background:#EAF3DE; color:#3B6D11; border-color:#CFE3B5;}
.pill.role-admin{background:var(--text); color:var(--surface); border-color:transparent;}
:root[data-theme="dark"] .pill.role-external{background:#243318; color:#B5D98A; border-color:#3A5226;}
@media (prefers-color-scheme: dark){:root:not([data-theme="light"]) .pill.role-external{background:#243318; color:#B5D98A; border-color:#3A5226;}}

/* Assign tab */
.assign-org{border:1px solid var(--border); border-radius:14px; padding:18px; margin-bottom:14px; background:var(--surface-2);}
.assign-org h4{margin:0 0 6px; font-size:16px; display:flex; justify-content:space-between; align-items:center; gap:10px; flex-wrap:wrap;}
.assign-org h4 .removeOrgBtn{float:none !important; color:var(--danger) !important; background:none; border:0; font-weight:600 !important; padding:6px 10px; border-radius:8px;}
.assign-org h4 .removeOrgBtn:hover{background:var(--danger-soft);}
.assign-org select{max-width:240px;}

/* Password field with show/hide */
.pwd-wrap{position:relative;}
.pwd-wrap input{padding-right:46px;}
.pwd-toggle{position:absolute; right:3px; top:3px; bottom:3px; width:40px; background:none; border:0; color:var(--muted); padding:0; display:flex; align-items:center; justify-content:center; border-radius:8px;}
.pwd-toggle:hover{color:var(--brand-strong);}
.pwd-toggle svg{width:19px; height:19px;}

@media (max-width:760px){
  .wrap{padding:4px 14px 60px;}
  .page-head{padding:22px 0 4px;}
  .card{padding:18px;}
  .worktab{flex-direction:column; gap:3px; font-size:12.5px; padding:9px 4px;}
  .user{flex-direction:column; align-items:flex-start; gap:12px;}
  .user > div:last-child{width:100%;}
  .user button{flex:1;}
  .top{flex-direction:column; align-items:stretch;}
  .inline-add button{flex:1 1 100%;}
}