/* The dashboard (/dash) on top of /static/app.css: only what the server-rendered pages never needed. */
#main.loading > * { opacity: .55; transition: opacity .15s; pointer-events: none; }
.login-wrap { min-height: 62vh; display: grid; place-items: center; }
.login { width: min(400px, 100%); }
.login h1 { margin: 0 0 4px; font-size: 22px; }
.login .btn { width: 100%; justify-content: center; }
.who { display: flex; align-items: center; gap: 8px; font-size: 12px; color: var(--muted); }
.who b { color: var(--ink); font-weight: 600; }
.who button { background: none; border: 0; color: var(--focus); cursor: pointer; font: inherit; padding: 0; }
.filterbar { display: flex; flex-wrap: wrap; gap: 10px 14px; align-items: flex-end; margin: 0 0 18px; }
.filterbar .field { min-width: 0; }
.filterbar input[type="date"], .filterbar input[type="datetime-local"], .filterbar select, .filterbar input[type="text"],
.form-grid select, .form-grid input[type="password"], .form-grid input[type="date"], .form-grid input[type="number"] {
  font: inherit; color: var(--ink); background: var(--surface); border: 1px solid var(--border-2); border-radius: 8px; padding: 7px 10px; }
.filterbar select[multiple] { min-height: 38px; }
.metric-tabs { margin-bottom: 10px; }
.multiples { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 14px; }
.multiples .card { padding: 14px 16px; }
.multiples h4 { margin: 0; font-size: 13px; font-weight: 600; }
.multiples .v { font: 600 18px var(--mono); margin: 2px 0 6px; }
.empty { padding: 28px; text-align: center; color: var(--muted); }
.token { font: 13px var(--mono); padding: 10px 12px; background: var(--surface-2); border: 1px dashed var(--border-2); border-radius: 8px; word-break: break-all; user-select: all; }
.endpoint { display: grid; grid-template-columns: 70px 1fr; gap: 4px 14px; padding: 10px 0; border-bottom: 1px solid var(--border); }
.endpoint:last-child { border-bottom: 0; }
.endpoint .m { font: 600 12px var(--mono); color: var(--muted); }
.endpoint code { font: 13px var(--mono); }
.endpoint p { grid-column: 2; margin: 0; color: var(--ink-2); font-size: 13px; }
.camp-checks { display: flex; flex-wrap: wrap; gap: 8px; }
.user-edit { background: var(--surface-2); }
.user-edit td { padding: 16px 18px !important; }
.inline-form { display: flex; flex-wrap: wrap; gap: 10px; align-items: flex-end; }
.pager { display: flex; gap: 10px; align-items: center; padding: 12px 18px; }
.scope-note { font-size: 12px; color: var(--muted); }
.tblmode { margin-left: auto; }
@media (max-width: 720px) {
  .who span { display: none; }
  .filterbar > * { flex: 1 1 100%; }
}
/* eleven sections: one line, scrolling sideways on a narrow screen rather than wrapping */
.topbar .nav { overflow-x: auto; scrollbar-width: none; flex: 1 1 auto; min-width: 0; }
.topbar .nav::-webkit-scrollbar { display: none; }
.topbar .nav a { white-space: nowrap; }
.who { white-space: nowrap; }
.who a { text-decoration: none; }
.brand small { display: none; }
@media (max-width: 1500px) { .live span { display: none; } }
/* Explore's client picker: a dropdown of checkboxes grouped by campaign (real deployments have ~20 clients) */
details.picker { position: relative; }
details.picker > summary { list-style: none; cursor: pointer; font: inherit; color: var(--ink); background: var(--surface); border: 1px solid var(--border-2);
  border-radius: 8px; padding: 7px 30px 7px 10px; min-width: 150px; position: relative; white-space: nowrap; }
details.picker > summary::-webkit-details-marker { display: none; }
details.picker > summary::after { content: ""; position: absolute; right: 12px; top: 50%; width: 6px; height: 6px; margin-top: -5px;
  border-right: 1.5px solid var(--muted); border-bottom: 1.5px solid var(--muted); transform: rotate(45deg); }
.picker-menu { position: absolute; z-index: 30; top: calc(100% + 6px); left: 0; width: min(420px, 90vw); max-height: 380px; overflow: auto;
  background: var(--surface); border: 1px solid var(--border); border-radius: 10px; box-shadow: var(--shadow-lg); padding: 10px 12px; }
.picker-group { display: grid; gap: 4px; padding: 6px 0; border-bottom: 1px solid var(--border); }
.picker-group:last-of-type { border-bottom: 0; }
.picker-group b { font-size: 12px; color: var(--muted); font-weight: 600; text-transform: uppercase; letter-spacing: .03em; }
.picker-group label { display: flex; gap: 8px; align-items: baseline; cursor: pointer; padding: 2px 0; }
.picker-foot { display: flex; gap: 8px; justify-content: flex-end; padding-top: 10px; position: sticky; bottom: -10px; background: var(--surface); }