/* Leadstrium GUI Elite — visual tranche 24: density, typography and loading states */
/* Scoped progressive enhancement for existing dashboard components. */
:root{--gui-24-radius:14px;--gui-24-accent:#08b8af;--gui-24-gap:clamp(12px,1.5vw,22px)}
:where(.dashboard-grid,[data-dashboard-grid]){display:grid;gap:var(--gui-24-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-24-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-24-skeleton 1.6s ease-in-out infinite}
@keyframes gui-24-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}}
/* Tranche 24: forms, dialogs, navigation and dense-content usability. */
:where(.form-grid,[data-form-grid]){display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,240px),1fr));gap:clamp(12px,1.25vw,20px);align-items:start}
:where(.form-grid,[data-form-grid]) > *{min-width:0}
:where(.form-field,[data-form-field]){min-width:0;display:flex;flex-direction:column;gap:6px}
:where(.form-field,[data-form-field]) :is(input,textarea,select){max-width:100%;min-width:0}
:where(input,textarea,select):focus-visible{outline:2px solid var(--gui-24-accent);outline-offset:2px}
:where(.field-help,[data-field-help]){font-size:.875em;line-height:1.45;overflow-wrap:anywhere}
:where([aria-invalid="true"]){outline:2px solid #c04444;outline-offset:1px}
:where(dialog[open],[role="dialog"][aria-modal="true"]){max-width:min(94vw,700px);max-height:min(90dvh,900px);overflow:auto;overscroll-behavior:contain}
:where(dialog)::backdrop{background:rgba(8,18,33,.58)}
:where(.breadcrumb,[aria-label="Breadcrumb"]){display:flex;flex-wrap:wrap;align-items:center;gap:.35em;min-width:0;overflow-wrap:anywhere}
:where(.tab-list,[role="tablist"]){max-width:100%;overflow-x:auto;overscroll-behavior-inline:contain;scrollbar-width:thin}
:where(.tab-list,[role="tablist"]) [role="tab"]{min-height:40px;white-space:nowrap}
:where(.pagination,[data-pagination]){display:flex;flex-wrap:wrap;align-items:center;justify-content:flex-end;gap:6px}
:where(.pagination,[data-pagination]) :is(button,a){min-width:36px;min-height:36px;display:inline-flex;align-items:center;justify-content:center}
:where(.alert,[role="alert"]){overflow-wrap:anywhere}
@media(max-width:640px){:where(.form-grid,[data-form-grid]){grid-template-columns:minmax(0,1fr)}:where(.pagination,[data-pagination]){justify-content:center}}
@media(forced-colors:active){:where([aria-invalid="true"]){outline-color:Mark}}