/* Leadstrium GUI Elite — visual tranche 23: density, typography and loading states */
/* Scoped progressive enhancement for existing dashboard components. */
:root{--gui-23-radius:14px;--gui-23-accent:#08b8af;--gui-23-gap:clamp(12px,1.5vw,22px)}
:where(.dashboard-grid,[data-dashboard-grid]){display:grid;gap:var(--gui-23-gap);grid-template-columns:repeat(auto-fit,minmax(min(100%,265px),1fr))}
:where(.dashboard-grid,[data-dashboard-grid]) > *{min-width:0}
:where(.stat-card,.metric-card,[data-stat-card]){min-width:0;border-radius:var(--gui-23-radius);overflow-wrap:anywhere}
:where(.stat-card,.metric-card,[data-stat-card]) :is(h2,h3,[data-metric-value]){font-variant-numeric:tabular-nums;letter-spacing:-.02em}
:where(.toolbar,.filter-bar,[data-toolbar]){display:flex;flex-wrap:wrap;align-items:center;gap:clamp(8px,1vw,14px);min-width:0}
:where(.toolbar,.filter-bar,[data-toolbar]) > :is(input,select,[role="searchbox"]){min-width:min(100%,185px);max-width:100%}
:where(.table-responsive,[data-table-scroll]){max-width:100%;overflow-x:auto;overscroll-behavior-inline:contain}
:where(.table-responsive,[data-table-scroll]) table{border-collapse:separate;border-spacing:0;width:100%}
:where(.table-responsive,[data-table-scroll]) :is(th,td){vertical-align:middle}
:where(.table-responsive,[data-table-scroll]) th{white-space:nowrap;font-weight:650}
:where(.table-responsive,[data-table-scroll]) td{font-variant-numeric:tabular-nums}
:where(.skeleton,[data-skeleton]){background:linear-gradient(90deg,rgba(127,145,165,.10),rgba(127,145,165,.22),rgba(127,145,165,.10));background-size:220% 100%;border-radius:8px;animation:gui-23-skeleton 1.6s ease-in-out infinite}
@keyframes gui-23-skeleton{to{background-position-x:-220%}}
:where([aria-busy="true"]){cursor:progress}
:where([role="status"],[data-empty-state]){overflow-wrap:anywhere}
:where(.empty-state,[data-empty-state]){padding:clamp(20px,4vw,44px);text-align:center}
:where(.empty-state,[data-empty-state]) > *{max-width:62ch;margin-inline:auto}
:where(.badge,.status-pill,[data-status]){display:inline-flex;align-items:center;gap:.375em;max-width:100%;line-height:1.25;overflow-wrap:anywhere}
@media(max-width:640px){:where(.toolbar,.filter-bar,[data-toolbar]) > :is(input,select,[role="searchbox"]){flex:1 1 100%}:where(.table-responsive,[data-table-scroll]){scrollbar-width:thin}}
@media(prefers-reduced-motion:reduce){:where(.skeleton,[data-skeleton]){animation:none;background:rgba(127,145,165,.17)}}
@media(forced-colors:active){:where(.skeleton,[data-skeleton]){border:1px solid CanvasText;background:Canvas}}