/* Dedicated staff workbench. Customer transactions live in the Android app. */
:root { --primary:#0969ed; --primary-soft:#eaf3ff; --text:#122b4a; --muted:#71839b; --line:#e2e9f2; --radius:8px; }
.sr-only { position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0; }
[hidden] { display:none!important; }
.staff-shell .app { grid-template-columns:238px minmax(0,1fr); background:#f7f9fc; }
.staff-shell .sidebar { position:sticky; top:0; height:100dvh; min-height:0; overflow-y:auto; padding:0 14px 18px; background:#fff; }
.staff-shell .logo { min-height:72px; padding:16px 8px; margin-bottom:16px; gap:10px; }
.staff-shell .logo strong { font-size:21px; letter-spacing:1px; }
.staff-shell .logo small { display:block; font-size:11px; margin-top:2px; }
.staff-shell #nav { gap:4px; }
.nav-group { padding:19px 12px 9px; font-size:12px; color:#8292a6; }
.staff-shell .nav-button { min-height:42px; gap:13px; padding:10px 13px; border-radius:7px; color:#314961; font-size:14px; font-weight:500; }
.staff-shell .nav-button.active { color:#0068ef; background:#e7f0ff; font-weight:650; box-shadow:none; }
.admin-icon { width:20px; height:20px; flex:none; vertical-align:middle; }
.staff-shell .sidebar-note { margin-top:auto; padding:24px 12px 0; border:0; background:none; font-weight:400; color:#8c9cb0; }
.staff-shell .workspace { min-width:0; }
.staff-shell .workspace > header { position:sticky; top:0; z-index:30; height:72px; min-height:72px; padding:0 28px; border-bottom:1px solid var(--line); background:#fff; box-shadow:none; }
.breadcrumb { display:flex; align-items:center; gap:14px; font-size:14px; color:#8192a8; }
.staff-shell .workspace > header h2 { margin:0; font-size:14px; font-weight:500; }
.staff-shell .user-menu { gap:12px; }
.staff-shell .avatar { width:34px; height:34px; border-radius:50%; color:white; background:#086ced; }
.staff-shell .user-menu small { font-size:10px; }
.staff-shell .user-menu strong { font-size:13px; }
.staff-shell .workspace main { max-width:1600px; margin:0 auto; padding:24px 28px 40px; }
.console-page-heading { display:flex; align-items:center; justify-content:space-between; gap:16px; margin-bottom:22px; }
.console-page-heading > div { display:flex; align-items:center; gap:12px; }
.console-page-heading h1 { margin:0; font-size:27px; letter-spacing:-.5px; line-height:1.4; }
.console-page-heading time { color:#7186a0; font-size:12px; margin-right:8px; }
.environment-tag { padding:4px 8px; border-radius:5px; background:#e3efff; color:#0069ed; font-size:11px; font-weight:600; }
.policy-strip { display:flex; align-items:center; gap:12px; padding:13px 17px; margin-bottom:16px; border-radius:6px; background:#eaf3ff; color:#0969ed; font-size:13px; }
.dashboard-metrics { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:16px; margin-bottom:18px; }
.dashboard-metric { display:flex; flex-direction:column; align-items:flex-start; min-height:134px; padding:20px; background:white; border:1px solid var(--line); border-radius:8px; text-align:left; font-weight:400; }
.dashboard-metric:hover:not(:disabled) { border-color:#9ac2ff; background:#fcfdff; }
.dashboard-metric > span { display:flex; gap:11px; align-items:center; font-size:14px; color:#4a6482; }
.dashboard-metric .admin-icon { width:24px; height:24px; color:#0873ff; }
.dashboard-metric > strong { margin:12px 0 6px; font-size:30px; line-height:1; font-weight:650; color:#122b4a; }
.dashboard-metric > small { font-size:11px; color:#8294aa; }
.dashboard-grid { display:grid; grid-template-columns:minmax(0,2fr) minmax(290px,1fr); gap:16px; align-items:stretch; }
.dashboard-panel { padding:19px; border:1px solid var(--line); border-radius:8px; background:#fff; min-width:0; }
.panel-heading { display:flex; justify-content:space-between; align-items:center; gap:12px; margin-bottom:16px; }
.panel-heading h3 { margin:0; font-size:17px; }
.panel-heading > .muted { font-size:12px; }
.text-link { display:inline-flex; align-items:center; justify-content:center; gap:5px; border:0; background:none; color:#0873ff; padding:3px 0; min-height:30px; font-size:12px; font-weight:500; white-space:nowrap; }
.text-link:hover { color:#0046af; text-decoration:underline; }
.text-link .admin-icon { width:13px; height:13px; }
.queue-tabs { display:flex; gap:8px; margin-bottom:13px; flex-wrap:wrap; }
.queue-tab { min-height:30px; padding:6px 15px; border:1px solid #e6edf6; border-radius:20px; background:#fafcff; color:#59718e; font-size:12px; font-weight:400; }
.queue-tab span { margin-left:6px; font-variant-numeric:tabular-nums; }
.queue-tab[aria-pressed=true] { background:#076cef; color:white; border-color:#076cef; }
.staff-shell table { width:100%; font-size:12px; }
.staff-shell th { padding:11px 12px; background:#f4f7fb; color:#506987; font-weight:500; white-space:nowrap; }
.staff-shell td { padding:12px; border-bottom:1px solid #edf1f6; }
.staff-shell .badge { padding:3px 7px; font-size:11px; border-radius:5px; white-space:nowrap; }
.queue-subject { max-width:210px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.review-table { max-height:292px; overflow:auto; }
.panel-footnote { margin-top:16px; color:#899bb0; font-size:11px; line-height:1.5; }
.status-ring { width:146px; height:146px; border-radius:50%; margin:4px auto 22px; display:grid; place-items:center; }
.status-ring > div { width:111px; height:111px; border-radius:50%; background:white; display:flex; flex-direction:column; justify-content:center; align-items:center; gap:3px; }
.status-ring strong { font-size:29px; font-weight:600; }
.status-ring span { color:#7389a4; font-size:12px; }
.status-legend { display:grid; grid-template-columns:1fr 1fr; gap:13px 22px; font-size:12px; }
.status-legend > div { display:flex; align-items:center; gap:8px; }
.status-legend i { width:9px; height:9px; border-radius:50%; flex:none; }
.status-legend strong { margin-left:auto; font-weight:500; }
.deadline-row { display:flex; align-items:center; gap:12px; padding:13px 0; border-bottom:1px solid #edf1f6; font-size:12px; }
.deadline-row > .admin-icon { color:#7b93ae; }
.deadline-row > div { flex:1; min-width:0; }
.deadline-row strong { display:block; font-weight:500; }
.deadline-row small { display:block; margin-top:5px; color:#8699b0; }
.audit-preview { list-style:none; padding:0; margin:0; }
.audit-preview li { position:relative; display:flex; align-items:flex-start; gap:14px; border-left:1px solid #e3ebf6; padding:0 0 20px 15px; margin-left:4px; font-size:12px; }
.audit-preview li:before { position:absolute; left:-4px; top:4px; content:''; width:7px; height:7px; border-radius:50%; background:#61a1fc; }
.audit-preview time { flex:none; color:#798ea8; font-size:11px; }
.audit-preview strong { font-weight:500; overflow-wrap:anywhere; line-height:1.5; }
.audit-preview small { display:block; margin-top:5px; color:#8295ad; font-size:10px; overflow-wrap:anywhere; }
.admin-empty { min-height:145px; display:grid; place-items:center; color:#8999ac; font-size:13px; }
.staff-shell .card { padding:20px; border:1px solid var(--line); border-radius:8px; box-shadow:none; margin-bottom:16px; }
.staff-shell .card h3 { font-size:17px; margin:0 0 16px; }
.staff-shell .order-list { display:grid; grid-template-columns:1fr; }
.staff-shell .card .card { background:#fcfdff; margin-bottom:0; }
.admin-search { display:flex; gap:15px; align-items:center; margin-bottom:16px; font-size:12px; }
.admin-search label { width:min(320px,100%); }
.admin-search input { min-height:36px; font-size:12px; }
.create-panel { margin:0 0 18px; border:1px solid var(--line); border-radius:6px; }
.create-panel > summary { padding:12px 15px; color:var(--primary); cursor:pointer; font-size:13px; }
.create-panel > form { margin:0; padding:5px 16px 16px; max-width:850px; }
.staff-shell .form-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }
.login-access-note { color:var(--muted); font-size:12px; text-align:center; margin:20px 0 0; }
.login-card { box-shadow:0 8px 30px #18314e08; }
.login-card h2 { font-size:22px; }
@media(min-width:801px) { .staff-shell #menuButton { display:none; } }
@media(max-width:1100px) { .staff-shell .app { grid-template-columns:210px minmax(0,1fr); } .staff-shell .workspace main { padding:20px; } .dashboard-grid { grid-template-columns:1fr; } .console-page-heading time { display:none; } .dashboard-metric { padding:16px; } .dashboard-metrics { gap:10px; } }
@media(max-width:800px) { .staff-shell .app { display:block; } .staff-shell .sidebar { position:fixed; z-index:60; width:238px; height:100dvh; } .staff-shell .workspace > header { padding:0 16px; } .staff-shell .workspace main { padding:16px; } .console-page-heading { flex-wrap:wrap; } .console-page-heading h1 { font-size:23px; } .dashboard-metrics { grid-template-columns:repeat(2,minmax(0,1fr)); } .staff-shell .form-grid { grid-template-columns:1fr; } .breadcrumb { gap:8px; } .user-menu #userMeta { display:none; } .staff-shell .user-menu strong { max-width:80px; overflow:hidden; white-space:nowrap; text-overflow:ellipsis; } }
@media(max-width:480px) { .breadcrumb > span { display:none; } .staff-shell .workspace > header { gap:8px; } .staff-shell .user-menu { gap:6px; } .deadline-row { flex-wrap:wrap; } .environment-tag { display:none; } }
.modal-actions { display: flex; justify-content: flex-end; gap: 10px; margin-top: 8px; }
.action-error { margin: 0; color: #b42318; font-size: 13px; }
.modal [aria-busy="true"] { cursor: progress; }