/* PeerOnCall Admin — styling for the admin panel.
   Same color tokens/typography as assets/auth.css (the main app's stylesheet)
   so the two read as one product family, but this is its own file: the admin
   panel is a SEPARATE Vercel project (root directory admin/) and cannot reach
   files outside this directory at runtime, so tokens are duplicated here on
   purpose, not imported. Denser/more utilitarian than the trainee-facing
   pages — this is an internal tool, not a practice surface. */

:root {
  --navy:#0f2035; --navy-mid:#1a3350; --navy-light:#234468;
  --ember:#c8401a; --ember-light:#e8562a; --ember-pale:#fdf0eb;
  --slate:#4a5568; --mist:#f4f6f9; --border:#dce3ed;
  --text:#1a2332; --text-muted:#6b7a8d;
  --green:#1a7a4a; --green-bg:#eaf5ef;
  --amber:#9a6200; --amber-bg:#fef9ee;
  --red:#a32020; --red-bg:#fef0f0;
  --shadow:0 2px 12px rgba(15,32,53,0.08);
  --shadow-lg:0 8px 32px rgba(15,32,53,0.14);
}

*{box-sizing:border-box;margin:0;padding:0}
body{font-family:'DM Sans',sans-serif;background:var(--mist);color:var(--text);min-height:100vh}

/* ---- nav ---- */
.nav{background:var(--navy);padding:0 28px;display:flex;align-items:center;justify-content:space-between;height:54px;position:sticky;top:0;z-index:200}
.nav-brand{display:flex;align-items:center;gap:10px;text-decoration:none}
.nav-logo{width:32px;height:32px;display:block;object-fit:contain;flex-shrink:0}
.nav-title{font-family:'DM Serif Display',serif;font-size:17px;color:white}
.nav-subtitle{font-size:10px;color:rgba(255,255,255,0.4);letter-spacing:.1em;text-transform:uppercase}
.nav-right{display:flex;align-items:center;gap:12px}

/* ---- account dropdown (mirrors assets/auth.js#mountAccountMenu's markup) ---- */
.acct{position:relative}
.acct-btn{display:flex;align-items:center;gap:6px;background:rgba(255,255,255,0.08);border:1px solid rgba(255,255,255,0.14);color:white;font-family:'DM Sans',sans-serif;font-size:13px;font-weight:500;padding:7px 12px;border-radius:8px;cursor:pointer;transition:background .15s}
.acct-btn:hover{background:rgba(255,255,255,0.16)}
.acct-caret{font-size:10px;opacity:.7;transition:transform .15s}
.acct-btn[aria-expanded="true"] .acct-caret{transform:rotate(180deg)}
.acct-menu{position:absolute;top:calc(100% + 8px);right:0;min-width:200px;background:white;border:1px solid var(--border);border-radius:10px;box-shadow:var(--shadow-lg);padding:6px;z-index:300}
.acct-menu[hidden]{display:none}
.acct-email{font-size:12px;color:var(--text-muted);padding:8px 10px 9px;border-bottom:1px solid var(--border);margin-bottom:4px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.acct-item{display:block;width:100%;text-align:left;background:none;border:none;font-family:'DM Sans',sans-serif;font-size:13px;font-weight:500;color:var(--text);padding:9px 10px;border-radius:7px;cursor:pointer;text-decoration:none}
.acct-item:hover{background:var(--mist)}
.acct-signout{color:var(--red)}

/* ---- buttons ---- */
.btn{padding:9px 18px;border-radius:8px;font-size:13px;font-weight:600;font-family:'DM Sans',sans-serif;cursor:pointer;border:none;transition:all .15s;text-decoration:none;display:inline-flex;align-items:center;justify-content:center;gap:8px}
.btn-primary{background:var(--navy);color:white}
.btn-primary:hover:not(:disabled){background:var(--navy-mid)}
.btn-secondary{background:white;color:var(--text);border:1px solid var(--border)}
.btn-secondary:hover:not(:disabled){background:var(--mist)}
.btn-ember{background:var(--ember);color:white}
.btn-ember:hover:not(:disabled){background:var(--ember-light)}
.btn:disabled{opacity:.45;cursor:default}
.btn-block{width:100%}
.btn-sm{padding:6px 14px;font-size:12px}

.bspin{width:14px;height:14px;border:2px solid rgba(255,255,255,.4);border-top-color:#fff;border-radius:50%;animation:spin .7s linear infinite;display:none}
.btn.loading .bspin{display:inline-block}
.btn-secondary .bspin{border-color:rgba(15,32,53,.2);border-top-color:var(--navy)}
@keyframes spin{to{transform:rotate(360deg)}}

/* ---- auth card (admin/login.html) ---- */
.authwrap{max-width:420px;margin:0 auto;padding:56px 24px}
.authcard{background:white;border:1px solid var(--border);border-radius:16px;padding:32px;box-shadow:var(--shadow)}
.authcard h1{font-family:'DM Serif Display',serif;font-size:25px;color:var(--navy);font-weight:400;margin-bottom:6px}
.authcard .sub{font-size:13px;color:var(--text-muted);line-height:1.6;margin-bottom:24px}

.field{margin-bottom:16px}
.field label{display:block;font-size:11px;font-weight:600;color:var(--text-muted);letter-spacing:.06em;text-transform:uppercase;margin-bottom:6px}
.field input{width:100%;padding:10px 14px;border:1px solid var(--border);border-radius:8px;font-size:14px;font-family:'DM Sans',sans-serif;color:var(--text);background:white;outline:none;transition:border-color .15s}
.field input:focus{border-color:var(--navy-light)}
.field input[aria-invalid="true"]{border-color:var(--red)}
.field .err{display:none;font-size:12px;color:var(--red);margin-top:5px;line-height:1.45}
.field.invalid .err{display:block}

.alert{border-radius:8px;padding:11px 14px;font-size:13px;line-height:1.55;margin-bottom:18px;border:1px solid;display:none}
.alert.show{display:block}
.alert-error{background:var(--red-bg);border-color:#f5c6c6;color:var(--red)}
.alert-ok{background:var(--green-bg);border-color:#b8e0c8;color:var(--green)}
.alert-info{background:var(--amber-bg);border-color:#f0d89a;color:var(--amber)}

/* full-page gate shown while the session is being checked */
.gate{position:fixed;inset:0;background:var(--mist);z-index:9999;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:14px}
.gate .lspinner{width:38px;height:38px;border:3px solid var(--border);border-top-color:var(--navy);border-radius:50%;animation:spin .7s linear infinite}
.gate .gtxt{font-size:13px;color:var(--text-muted)}

/* ---- admin dashboard shell ---- */
.admwrap{max-width:1180px;margin:0 auto;padding:32px 28px 64px}
.admhead{margin-bottom:24px}
.admhead h1{font-family:'DM Serif Display',serif;font-size:26px;color:var(--navy);font-weight:400;margin-bottom:4px}
.admhead .sub{font-size:13px;color:var(--text-muted)}

/* ---- tabs ---- */
.tabs{display:flex;gap:4px;border-bottom:1px solid var(--border);margin-bottom:24px}
.tab-btn{background:none;border:none;font-family:'DM Sans',sans-serif;font-size:13px;font-weight:600;color:var(--text-muted);padding:10px 16px;cursor:pointer;border-bottom:2px solid transparent;margin-bottom:-1px}
.tab-btn:hover{color:var(--text)}
.tab-btn.active{color:var(--navy);border-bottom-color:var(--ember)}
.tab-panel[hidden]{display:none}

/* ---- stat cards ---- */
.statgrid{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:14px;margin-bottom:20px}
.statcard{background:white;border:1px solid var(--border);border-radius:12px;padding:16px 18px;box-shadow:var(--shadow)}
.statval{font-family:'DM Serif Display',serif;font-size:26px;color:var(--navy);line-height:1.2}
.statlbl{font-size:11px;font-weight:600;color:var(--text-muted);letter-spacing:.05em;text-transform:uppercase;margin-top:4px}

/* ---- generic content card ---- */
.card{background:white;border:1px solid var(--border);border-radius:12px;padding:20px;box-shadow:var(--shadow);margin-bottom:20px}
.card-title{font-size:14px;font-weight:600;color:var(--navy);margin-bottom:14px}
.card-note{font-size:11px;color:var(--text-muted);line-height:1.5;margin-top:10px}

/* ---- hand-rolled bar chart (sessions per scenario) ---- */
.barchart{display:flex;flex-direction:column;gap:8px}
.barrow{display:grid;grid-template-columns:180px 1fr 40px;align-items:center;gap:10px}
.barrow .barlbl{font-size:12px;color:var(--text);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.barrow .bartrack{background:var(--mist);border-radius:4px;height:16px;overflow:hidden}
.barrow .barfill{background:var(--ember);height:100%;border-radius:4px;min-width:2px}
.barrow .barval{font-size:12px;color:var(--text-muted);text-align:right}

/* ---- data tables (users / per-user cost) ---- */
.dtable{width:100%;border-collapse:collapse;font-size:13px}
.dtable th{text-align:left;font-size:11px;font-weight:600;color:var(--text-muted);letter-spacing:.04em;text-transform:uppercase;padding:8px 10px;border-bottom:1px solid var(--border);white-space:nowrap}
.dtable th.sortable{cursor:pointer;user-select:none}
.dtable th.sortable:hover{color:var(--text)}
.dtable th .sort-ind{opacity:.5;margin-left:3px}
.dtable td{padding:9px 10px;border-bottom:1px solid var(--border);color:var(--text)}
.dtable tbody tr:hover{background:var(--mist)}
.dtable tbody tr.clickable{cursor:pointer}
.dtable .num{text-align:right;font-variant-numeric:tabular-nums}
.dtable-wrap{overflow-x:auto}

.badge{display:inline-block;font-size:10px;font-weight:600;padding:2px 8px;border-radius:99px;white-space:nowrap}
.badge-pending{background:var(--amber-bg);color:var(--amber)}
.badge-approved{background:var(--green-bg);color:var(--green)}
.badge-disabled{background:var(--red-bg);color:var(--red)}

.empty-state{padding:32px;text-align:center;font-size:13px;color:var(--text-muted)}
.loading-state{padding:32px;text-align:center;font-size:13px;color:var(--text-muted)}

/* ---- users filter pills ---- */
.filter-row{display:flex;gap:8px;margin-bottom:14px;flex-wrap:wrap}
.filter-pill{background:white;border:1px solid var(--border);border-radius:99px;padding:6px 14px;font-size:12px;font-weight:600;color:var(--text-muted);cursor:pointer;font-family:'DM Sans',sans-serif}
.filter-pill:hover{background:var(--mist)}
.filter-pill.active{background:var(--navy);border-color:var(--navy);color:white}

/* ---- user detail modal ---- */
.modal-backdrop{position:fixed;inset:0;background:rgba(15,32,53,.5);display:flex;align-items:center;justify-content:center;z-index:500;padding:20px}
/* The [hidden] attribute and this class carry equal CSS specificity, and this
   author rule comes after the UA stylesheet's `[hidden]{display:none}` in the
   cascade -- without this override, `display:flex` above wins the tie and the
   modal renders as a permanent full-screen overlay regardless of the `hidden`
   attribute the JS sets/clears, blocking the whole page from the moment it
   loads. This is the actual fix for that. */
.modal-backdrop[hidden]{display:none}
.modal{background:white;border-radius:14px;padding:26px;max-width:440px;width:100%;box-shadow:var(--shadow-lg);max-height:90vh;overflow-y:auto}
.modal-head{display:flex;align-items:flex-start;justify-content:space-between;gap:12px;margin-bottom:18px}
.modal-title{font-family:'DM Serif Display',serif;font-size:19px;color:var(--navy);font-weight:400;word-break:break-word}
.modal-close{background:none;border:none;font-size:20px;line-height:1;color:var(--text-muted);cursor:pointer;padding:2px 6px}
.modal-close:hover{color:var(--text)}
.modal-fields{display:grid;grid-template-columns:auto 1fr;gap:9px 14px;font-size:13px;margin-bottom:22px}
.modal-fields dt{color:var(--text-muted);font-weight:600}
.modal-fields dd{color:var(--text)}
.modal-actions{display:flex;gap:10px;flex-wrap:wrap}
.modal-note{font-size:12px;color:var(--text-muted);margin-top:14px;line-height:1.5}

/* ---- pagination (audit log) ---- */
.pager{display:flex;align-items:center;justify-content:center;gap:12px;margin-top:16px}
.pager[hidden]{display:none}
.pager-btn{background:white;border:1px solid var(--border);border-radius:8px;padding:6px 14px;font-size:12px;font-weight:600;color:var(--text);cursor:pointer}
.pager-btn:hover:not(:disabled){background:var(--mist)}
.pager-btn:disabled{opacity:.4;cursor:default}
.pager-info{font-size:12px;color:var(--text-muted)}

/* ---- user drill-down page (admin/user.html) ---- */
.backlink{display:inline-flex;align-items:center;gap:6px;font-size:13px;color:var(--text-muted);text-decoration:none;margin-bottom:16px}
.backlink:hover{color:var(--text)}

.userhead{background:white;border:1px solid var(--border);border-radius:12px;padding:20px;box-shadow:var(--shadow);margin-bottom:20px}
.userhead h1{font-family:'DM Serif Display',serif;font-size:22px;color:var(--navy);font-weight:400;margin-bottom:14px;word-break:break-word}
.userhead .modal-fields{margin-bottom:0}

/* Session accordion — same expand/collapse interaction as practices.html's
   .praccard/.prachdr/.pracbody (the trainee-facing history list), not a new
   pattern; renamed sess- here only because admin.css can't reach
   assets/auth.css's rules (separate Vercel project — see admin.css's own
   top-of-file note), not because the behaviour differs. */
.sess-card{background:white;border:1px solid var(--border);border-radius:12px;box-shadow:var(--shadow);margin-bottom:12px;overflow:hidden}
.sess-hdr{display:flex;align-items:center;gap:14px;padding:16px 18px;cursor:pointer;width:100%;background:none;border:none;text-align:left;font-family:'DM Sans',sans-serif}
.sess-hdr:hover{background:var(--mist)}
.sess-main{flex:1;min-width:0}
.sess-name{font-size:14px;font-weight:600;color:var(--navy);margin-bottom:3px}
.sess-date{font-size:12px;color:var(--text-muted)}
.sess-cost{font-size:12px;color:var(--text-muted);white-space:nowrap}
.sess-score{font-size:18px;font-weight:600;white-space:nowrap}
.sess-score span{font-size:12px;color:var(--text-muted);font-weight:400}
.sess-chev{font-size:16px;color:var(--text-muted);transition:transform .15s}
.sess-hdr[aria-expanded="true"] .sess-chev{transform:rotate(90deg)}
.sess-band{font-size:11px;font-weight:600;padding:3px 9px;border-radius:99px;white-space:nowrap}
.sb-ready{background:var(--green-bg);color:var(--green)}
.sb-good{background:var(--mist);color:var(--slate)}
.sb-keep{background:var(--amber-bg);color:var(--amber)}
.sb-more{background:var(--red-bg);color:var(--red)}
.sess-body{padding:0 18px 18px;border-top:1px solid var(--border)}
.sess-body[hidden]{display:none}
.sess-summary{font-size:13px;line-height:1.7;color:var(--slate);padding:14px 0}
.sess-thr{display:flex;gap:8px;font-size:12px;line-height:1.6;color:var(--red);background:var(--red-bg);border-radius:8px;padding:10px 12px;margin-top:14px}
.sess-complbl{font-size:11px;font-weight:600;color:var(--text-muted);letter-spacing:.06em;text-transform:uppercase;margin-bottom:8px}
.sess-comps{display:grid;grid-template-columns:1fr auto;gap:8px 14px;align-items:start}
.sess-comps .sess-cn{font-size:13px;color:var(--text);line-height:1.5}
.sess-comps .sess-cn em{display:block;font-style:normal;font-size:12px;color:var(--text-muted);line-height:1.55;margin-top:2px}
.sess-sp{font-size:11px;font-weight:600;padding:2px 8px;border-radius:99px;white-space:nowrap;height:fit-content}
.sess-sp1{background:var(--red-bg);color:var(--red)}
.sess-sp2{background:var(--amber-bg);color:var(--amber)}
.sess-sp3{background:var(--green-bg);color:var(--green)}

@media (max-width:760px){
  .admwrap{padding:24px 16px 48px}
  .barrow{grid-template-columns:110px 1fr 34px;gap:6px}
  .sess-hdr{flex-wrap:wrap;gap:8px 12px}
  .sess-band{order:3}
}