/* Поверх Pico CSS (vendor/pico.min.css): макет, карточки, статусы, таблица клиентов. Без внешних ресурсов. */
:root{--vpn-ok:#2e7d32;--vpn-warn:#b26a00;--vpn-problem:#c62828}
@media (prefers-color-scheme:dark){:root:not([data-theme=light]){--vpn-ok:#66bb6a;--vpn-warn:#ffb74d;--vpn-problem:#ef7a72}}
header.site{border-bottom:1px solid var(--pico-muted-border-color);margin-bottom:1rem}
header.site .bar{display:flex;align-items:center;gap:1rem;flex-wrap:wrap;padding-block:.5rem}
header.site nav{flex:1 1 auto}
header.site nav ul{flex-wrap:wrap}
header.site .brand{white-space:nowrap}
header.site .logout{margin:0}
header.site .logout button{margin:0;padding:.35rem .9rem;width:auto}
[aria-current=page]{font-weight:700;text-decoration:underline}
.narrow{max-width:32rem;margin-inline:auto}
.narrow button,.narrow form{margin-top:.5rem}
[role=alert],.alert{color:var(--vpn-problem)}
[role=status].notice{color:var(--pico-muted-color)}
.snapshot{display:flex;align-items:center;gap:1rem;flex-wrap:wrap;margin-bottom:1rem}
.snapshot form{margin:0}
.snapshot button{margin:0;width:auto}
.cards{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,20rem),1fr));gap:1rem}
.card{margin:0;border-left:.35rem solid var(--vpn-ok);overflow-wrap:anywhere}
.card.warn{border-left-color:var(--vpn-warn)}
.card.problem{border-left-color:var(--vpn-problem);background:color-mix(in srgb,var(--vpn-problem) 8%,var(--pico-card-background-color))}
.card>header{display:flex;justify-content:space-between;align-items:center;gap:.5rem}
.card h2{font-size:1.15rem;margin:0}
.badge{font-size:.8rem;font-weight:700;padding:.1rem .55rem;border-radius:1rem;border:1px solid currentColor;white-space:nowrap;color:var(--vpn-ok)}
.badge.warn{color:var(--vpn-warn)}
.badge.problem{color:var(--vpn-problem)}
.reasons{margin:0 0 .75rem;padding-left:1.1rem;color:var(--vpn-problem)}
.card.warn .reasons{color:var(--vpn-warn)}
.card dl{display:grid;grid-template-columns:max-content 1fr;gap:.2rem .75rem;margin:0}
.card dt{color:var(--pico-muted-color)}
.card dd{margin:0}
.card>footer{margin-top:.75rem}
#dashboard>.card{margin-bottom:1rem}
.filters{display:grid;grid-template-columns:repeat(auto-fit,minmax(10rem,1fr));gap:.75rem;align-items:end}
.filters button,.filters [role=button]{margin:0;width:100%}
table.clients th a{text-decoration:none;white-space:nowrap}
table.clients td,table.clients th{white-space:nowrap}
pre{overflow:auto}
/* htmx: индикатор запроса (встроенные стили htmx отключены ради CSP) */
.htmx-request{opacity:.6}
@media (max-width:576px){header.site .bar{flex-direction:column;align-items:stretch}.card dl{grid-template-columns:1fr}.card dt{margin-top:.3rem}}