/* Admin area: denser layout, darker header so staff always know they're in admin. */
main.wide { max-width: 1200px; }
.admin-top { background: linear-gradient(90deg, #111a2e, #1b2d55); border-bottom: 3px solid var(--orange); }
.admin-top .brand small { color: #ffb37a; }
.admin-top nav a[aria-current="page"] { text-decoration: underline; text-underline-offset: 6px; text-decoration-thickness: 2px; }
.who { color: #c9d6ee; font-size: .9rem; } .who em { font-style: normal; background: rgba(255,255,255,.12); padding: 1px 8px; border-radius: 99px; margin-left: 4px; text-transform: capitalize; }
.admin-login { text-align: center; } .admin-login form { text-align: left; }
.admin-login-logo { width: 88px; height: 88px; }

.stats { display: grid; grid-template-columns: repeat(5, 1fr); gap: 12px; margin-bottom: 16px; }
.stats div { background: #fff; border: 1px solid var(--line); border-radius: 12px; padding: 14px 16px; }
.stats b { display: block; font-size: 1.6rem; color: var(--navy); } .stats span { color: var(--muted); font-size: .9rem; }
@media (max-width: 800px) { .stats { grid-template-columns: repeat(2, 1fr); } }

.search { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.search input[name=q] { flex: 1 1 280px; margin: 0; }
select { padding: 9px 10px; font: inherit; border: 1px solid #c4cedb; border-radius: 8px; background: #fff; }
.table-wrap { overflow-x: auto; }
table.list td { vertical-align: top; } table.list small { font-size: .82rem; }
table.list tbody tr:hover { background: #f8fafd; }
table.log td { font-size: .9rem; } table.log code { font-size: .82rem; background: var(--bg); padding: 1px 6px; border-radius: 4px; }
tr.inactive td { opacity: .55; }
.nowrap { white-space: nowrap; }
.pager { display: flex; gap: 16px; justify-content: center; align-items: center; margin-top: 12px; }

.crumbs { margin: 0 0 4px; }
.cust-head { display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap; align-items: flex-end; margin-bottom: 12px; }
.cust-head h1 { margin: 0; } .cust-head p { margin: 4px 0 0; } .right { text-align: right; }
.grid3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; margin-bottom: 12px; }
@media (max-width: 800px) { .grid3 { grid-template-columns: 1fr; } }
.grid2.tight { gap: 12px; margin-top: 8px; }
.label { font-size: .8rem; text-transform: uppercase; letter-spacing: .06em; color: var(--muted); font-weight: 700; margin: 10px 0 6px; }
.stack label { margin-bottom: 10px; }
.stack input, .stack select, .grid-form input, .grid-form select { width: 100%; margin-top: 4px; }
.grid-form { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 12px; align-items: end; }
.grid-form label { margin: 0; }
.actions-list form { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; margin-bottom: 12px; }
.lock-form input { flex: 1 1 200px; margin: 0; }
.btn.danger { background: var(--bad); } .btn.ghost.small { border-width: 1px; }
.btn[disabled] { opacity: .45; cursor: not-allowed; }
details summary { cursor: pointer; list-style: none; } details summary::-webkit-details-marker { display: none; }
details summary h2, details summary h3 { display: inline; } details summary::before { content: '▸ '; color: var(--muted); }
details[open] summary::before { content: '▾ '; }
details.card summary h2 { font-size: 1.1rem; }
section.card details { border-top: 1px solid var(--line); padding-top: 12px; margin-top: 12px; }
.options.compact { grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: 8px; }
.options.compact .opt { padding: 8px 10px; }
.plan-total { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 12px; margin-top: 12px; padding: 12px; background: var(--bg); border-radius: 10px; }
.plan-total .btns { display: flex; gap: 8px; flex-wrap: wrap; }
.open-inv { background: #fff7ea; border: 1px solid #f2d7a6; border-radius: 10px; padding: 12px; margin: 8px 0; }
.copyrow { display: flex; gap: 8px; align-items: center; margin: 8px 0; } .copyrow input { flex: 1; margin: 0; font-family: ui-monospace, monospace; font-size: .9rem; }
.inline-actions { display: flex; gap: 8px; flex-wrap: wrap; }
.temp-pw { background: #fff7ea; border: 2px solid var(--orange); border-radius: 12px; padding: 14px 16px; margin-bottom: 16px; }
.temp-pw code { font-size: 1.3rem; font-weight: 800; letter-spacing: .06em; background: #fff; padding: 4px 12px; border-radius: 6px; border: 1px solid var(--line); margin: 0 8px; }
.temp-pw p { margin: 8px 0 0; font-size: .92rem; }
.inline-check { display: inline-flex; margin: 0 !important; align-items: center; }
.role-form select { padding: 4px 6px; }

/* ---------- Two-step sign-in ---------- */
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
.code-input { font-size: 1.6rem !important; letter-spacing: .25em; text-align: center; font-family: ui-monospace, monospace; }
.small-code { font-size: 1.1rem !important; max-width: 160px; }
.phone-ico { width: 56px; height: 56px; margin: 4px auto 8px; color: var(--navy); }
.left-text { text-align: left; margin-top: 16px; }
.setup2fa { max-width: 760px; margin: 0 auto 16px; }
.steps { padding-left: 22px; } .steps > li { margin: 0 0 18px; padding-left: 4px; }
.qr-row { display: flex; gap: 24px; align-items: center; flex-wrap: wrap; margin-top: 12px; }
.qr { background: #fff; border: 1px solid var(--line); border-radius: 12px; padding: 8px; line-height: 0; }
.manual p { margin: 6px 0; }
.setup-key { font-size: 1.05rem; font-weight: 700; letter-spacing: .05em; background: var(--bg); padding: 4px 8px; border-radius: 6px; word-break: break-all; }
.code-row { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; margin-top: 10px; }
.code-row .code-input { width: 200px; margin: 0; }
.codes { columns: 2; padding-left: 28px; font-size: 1.15rem; } .codes li { margin: 6px 0; }
.codes code { font-weight: 700; letter-spacing: .06em; }
hr { border: 0; border-top: 1px solid var(--line); margin: 18px 0; }
@media print {
  .admin-top, footer, .btn, .flash { display: none !important; }
  .recovery { border: 0; box-shadow: none; }
}
.code-row .stacked { display: flex; flex-direction: column; gap: 4px; margin: 0; font-weight: 400; }
.code-row { align-items: flex-end; }

/* ---------- Claims & alerts ---------- */
.badge { display: inline-block; min-width: 20px; padding: 1px 7px; border-radius: 99px; background: var(--gold); color: var(--navy); font-size: .75rem; font-weight: 800; text-align: center; vertical-align: 1px; }
.badge.red { background: #e53e3e; color: #fff; }
.bell { position: relative; display: inline-flex; align-items: center; }
.bell svg { width: 22px; height: 22px; }
.bell .badge { position: absolute; top: -8px; right: -12px; }
.claim-tabs { max-width: 720px; }
tr.late-row { background: #fff1f1; }
table.claims td { vertical-align: top; }
.alerts { list-style: none; padding: 0; margin: 0; }
.alerts li { display: flex; gap: 12px; padding: 10px 6px; border-bottom: 1px solid var(--line); }
.alerts li.unread { background: #f3f8ff; font-weight: 600; }
.alerts .ai { flex: none; width: 46px; font-size: .7rem; font-weight: 800; text-align: center; padding: 3px 0; border-radius: 6px; background: var(--bg); color: var(--navy); height: fit-content; }
.alerts li.overdue .ai, .alerts li.email_failed .ai { background: #fdecec; color: var(--bad); }
.alerts li.new_claim .ai { background: #fff5e0; color: #7a4d00; }
.toasts { position: fixed; right: 16px; bottom: 16px; display: flex; flex-direction: column; gap: 8px; z-index: 50; max-width: 360px; }
.toast { display: block; background: var(--navy); color: #fff; padding: 12px 16px; border-radius: 10px; box-shadow: 0 8px 24px rgba(0,0,0,.25); text-decoration: none; font-weight: 600; border-left: 5px solid var(--gold); }
.toast.overdue { border-left-color: #e53e3e; }
.inv-img { max-width: 100%; max-height: 520px; border: 1px solid var(--line); border-radius: 8px; display: block; margin-bottom: 10px; }
.big-amt { font-size: 1.4rem; color: var(--navy); }
.inline-edit { display: inline-block; vertical-align: top; } .inline-edit[open] { display: block; min-width: 260px; }
.inline-edit summary::before { content: none; } .inline-edit summary { display: inline-block; }
.stack label.check { display: flex; gap: 10px; align-items: flex-start; }
.stack label.check input { width: 18px !important; height: 18px; margin: 3px 0 0 !important; flex: none; }
.badge[hidden] { display: none !important; }
.retention { background: var(--bg); border-radius: 10px; padding: 10px 12px; margin-bottom: 10px; }
.retention details { border-top: 0 !important; margin-top: 6px !important; padding-top: 0 !important; }

/* ---------- Analytics ---------- */
.an-head { display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; }
.period-tabs { max-width: 560px; flex: 1; margin: 0; }
.an-section { margin: 28px 0 10px; font-size: 1.3rem; }
.kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 12px; margin-bottom: 16px; }
.kpi { background: #fff; border: 1px solid var(--line); border-radius: 12px; padding: 12px 14px; display: flex; flex-direction: column; gap: 2px; }
.kpi-label { color: var(--muted); font-size: .85rem; font-weight: 600; }
.kpi-value { font-size: 1.7rem; color: var(--navy); font-variant-numeric: tabular-nums; line-height: 1.2; }
.kpi-sub { color: var(--muted); font-size: .8rem; }
.kpi.good .kpi-value { color: var(--ok); } .kpi.warn .kpi-value { color: var(--warn); } .kpi.bad .kpi-value { color: var(--bad); }
.hbars { list-style: none; padding: 0; margin: 0; }
.hbars li { display: grid; grid-template-columns: minmax(110px, 38%) 1fr auto; align-items: center; gap: 10px; padding: 5px 0; }
.hbars li:hover { background: #f5f8fc; }
.hb-label { font-size: .92rem; }
.hb-track { height: 16px; }
.hb-bar { display: block; height: 16px; background: #2a78d6; border-radius: 0 4px 4px 0; min-width: 2px; }
.hb-value { font-variant-numeric: tabular-nums; font-weight: 700; color: var(--ink); text-align: right; white-space: nowrap; }
.hb-value small { font-weight: 400; color: var(--muted); margin-left: 4px; }
.trend { width: 100%; height: auto; display: block; }
.trend .grid { stroke: #e4e8ee; stroke-width: 1; }
.trend .tick { fill: #5d6b7e; font-size: 11px; }
.trend .s1 { fill: #2a78d6; } .trend .s2 { fill: #eb6834; }
.trend path:hover { opacity: .8; }
.legend { display: flex; gap: 16px; font-size: .9rem; color: var(--ink); margin-bottom: 6px; }
.legend .sw { display: inline-block; width: 12px; height: 12px; border-radius: 3px; margin-right: 6px; vertical-align: -1px; }
.sw.s1 { background: #2a78d6; } .sw.s2 { background: #eb6834; }
.table-view { margin-top: 8px; } .table-view summary { color: var(--blue); font-size: .9rem; }
.num-table td:not(:first-child), .num-table th:not(:first-child) { text-align: right; font-variant-numeric: tabular-nums; }

.hb-bar[data-w="0"]{width:0%}.hb-bar[data-w="1"]{width:1%}.hb-bar[data-w="2"]{width:2%}.hb-bar[data-w="3"]{width:3%}.hb-bar[data-w="4"]{width:4%}.hb-bar[data-w="5"]{width:5%}.hb-bar[data-w="6"]{width:6%}.hb-bar[data-w="7"]{width:7%}.hb-bar[data-w="8"]{width:8%}.hb-bar[data-w="9"]{width:9%}.hb-bar[data-w="10"]{width:10%}.hb-bar[data-w="11"]{width:11%}.hb-bar[data-w="12"]{width:12%}.hb-bar[data-w="13"]{width:13%}.hb-bar[data-w="14"]{width:14%}.hb-bar[data-w="15"]{width:15%}.hb-bar[data-w="16"]{width:16%}.hb-bar[data-w="17"]{width:17%}.hb-bar[data-w="18"]{width:18%}.hb-bar[data-w="19"]{width:19%}.hb-bar[data-w="20"]{width:20%}.hb-bar[data-w="21"]{width:21%}.hb-bar[data-w="22"]{width:22%}.hb-bar[data-w="23"]{width:23%}.hb-bar[data-w="24"]{width:24%}.hb-bar[data-w="25"]{width:25%}.hb-bar[data-w="26"]{width:26%}.hb-bar[data-w="27"]{width:27%}.hb-bar[data-w="28"]{width:28%}.hb-bar[data-w="29"]{width:29%}.hb-bar[data-w="30"]{width:30%}.hb-bar[data-w="31"]{width:31%}.hb-bar[data-w="32"]{width:32%}.hb-bar[data-w="33"]{width:33%}.hb-bar[data-w="34"]{width:34%}.hb-bar[data-w="35"]{width:35%}.hb-bar[data-w="36"]{width:36%}.hb-bar[data-w="37"]{width:37%}.hb-bar[data-w="38"]{width:38%}.hb-bar[data-w="39"]{width:39%}.hb-bar[data-w="40"]{width:40%}.hb-bar[data-w="41"]{width:41%}.hb-bar[data-w="42"]{width:42%}.hb-bar[data-w="43"]{width:43%}.hb-bar[data-w="44"]{width:44%}.hb-bar[data-w="45"]{width:45%}.hb-bar[data-w="46"]{width:46%}.hb-bar[data-w="47"]{width:47%}.hb-bar[data-w="48"]{width:48%}.hb-bar[data-w="49"]{width:49%}.hb-bar[data-w="50"]{width:50%}.hb-bar[data-w="51"]{width:51%}.hb-bar[data-w="52"]{width:52%}.hb-bar[data-w="53"]{width:53%}.hb-bar[data-w="54"]{width:54%}.hb-bar[data-w="55"]{width:55%}.hb-bar[data-w="56"]{width:56%}.hb-bar[data-w="57"]{width:57%}.hb-bar[data-w="58"]{width:58%}.hb-bar[data-w="59"]{width:59%}.hb-bar[data-w="60"]{width:60%}.hb-bar[data-w="61"]{width:61%}.hb-bar[data-w="62"]{width:62%}.hb-bar[data-w="63"]{width:63%}.hb-bar[data-w="64"]{width:64%}.hb-bar[data-w="65"]{width:65%}.hb-bar[data-w="66"]{width:66%}.hb-bar[data-w="67"]{width:67%}.hb-bar[data-w="68"]{width:68%}.hb-bar[data-w="69"]{width:69%}.hb-bar[data-w="70"]{width:70%}.hb-bar[data-w="71"]{width:71%}.hb-bar[data-w="72"]{width:72%}.hb-bar[data-w="73"]{width:73%}.hb-bar[data-w="74"]{width:74%}.hb-bar[data-w="75"]{width:75%}.hb-bar[data-w="76"]{width:76%}.hb-bar[data-w="77"]{width:77%}.hb-bar[data-w="78"]{width:78%}.hb-bar[data-w="79"]{width:79%}.hb-bar[data-w="80"]{width:80%}.hb-bar[data-w="81"]{width:81%}.hb-bar[data-w="82"]{width:82%}.hb-bar[data-w="83"]{width:83%}.hb-bar[data-w="84"]{width:84%}.hb-bar[data-w="85"]{width:85%}.hb-bar[data-w="86"]{width:86%}.hb-bar[data-w="87"]{width:87%}.hb-bar[data-w="88"]{width:88%}.hb-bar[data-w="89"]{width:89%}.hb-bar[data-w="90"]{width:90%}.hb-bar[data-w="91"]{width:91%}.hb-bar[data-w="92"]{width:92%}.hb-bar[data-w="93"]{width:93%}.hb-bar[data-w="94"]{width:94%}.hb-bar[data-w="95"]{width:95%}.hb-bar[data-w="96"]{width:96%}.hb-bar[data-w="97"]{width:97%}.hb-bar[data-w="98"]{width:98%}.hb-bar[data-w="99"]{width:99%}.hb-bar[data-w="100"]{width:100%}
.chat-inbox { list-style: none; margin: 0; padding: 0; }
.chat-inbox li a { display: grid; grid-template-columns: 1fr auto; gap: 2px 12px; padding: 10px 8px; border-bottom: 1px solid var(--line); text-decoration: none; color: var(--ink); }
.chat-inbox .ci-last { grid-column: 1; color: var(--muted); font-size: .92rem; }
.chat-inbox .ci-time { grid-column: 2; grid-row: 1; }
.chat-inbox li.unread a { background: #f3f8ff; }
.staff-chat .chat-form { border: 0; padding: 10px 0 0; }

/* ---- staff training guide ---- */
.guide { max-width: 920px; }
.guide .lead { font-size: 1.08rem; }
.guide section { border-top: 1px solid #dde3ec; padding-top: 18px; margin-top: 28px; scroll-margin-top: 90px; }
.guide h3 { margin: 18px 0 6px; }
.guide-toc { background: #fff; border: 1px solid #dde3ec; border-radius: 12px; padding: 12px 20px; margin: 14px 0; }
.guide-toc ol { columns: 2; margin: 0; padding-left: 20px; } .guide-toc li { margin: 4px 0; }
.guide ol.steps li, .guide ul li { margin: 6px 0; }
.guide figure { margin: 14px 0; } .guide figure img { width: 100%; height: auto; border: 1px solid #d5dce7; border-radius: 10px; box-shadow: 0 2px 8px rgba(20,40,80,.08); }
.guide figcaption { font-size: .88rem; color: var(--muted); margin-top: 4px; }
.guide .two-up { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.guide .tip, .guide .warn { border-radius: 10px; padding: 12px 16px; margin: 14px 0; }
.guide .tip { background: #eaf2fd; border: 1px solid #c5daf5; } .guide .warn { background: #fdf0e8; border: 1px solid #f2cdb3; }
.guide-table { width: 100%; border-collapse: collapse; margin: 10px 0; background: #fff; }
.guide-table th, .guide-table td { text-align: left; vertical-align: top; padding: 8px 10px; border-bottom: 1px solid #e3e8ef; }
.guide .dd { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.guide .do, .guide .dont { border-radius: 10px; padding: 4px 16px; }
.guide .do { background: #ecf7f0; border: 1px solid #bfe3cc; } .guide .dont { background: #fdeeee; border: 1px solid #f1c4c4; }
.guide .pill { text-transform: none; }
@media (max-width: 700px) { .guide .two-up, .guide .dd { grid-template-columns: 1fr; } .guide-toc ol { columns: 1; } }
@media print { header.top, footer, .toasts { display: none !important; } .guide section { break-inside: auto; } .guide figure { break-inside: avoid; } }

@media (max-width: 1360px) and (min-width: 900px) { .admin-top nav { gap: 12px; } .admin-top nav a { font-size: .93rem; } }