/* 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}}
/* Visual tranche 25 — RTL-safe spacing, high-density action patterns and humane error feedback. */
:where(.action-group,[data-action-group]){display:flex;align-items:center;gap:8px;flex-wrap:wrap;min-width:0}
:where(.action-group,[data-action-group]) > :is(button,a,[role="button"]){min-height:40px;display:inline-flex;align-items:center;justify-content:center;gap:.45em}
:where(.action-group,[data-action-group]) :is(svg,img){flex-shrink:0}
:where(.filter-chips,[data-filter-chips]){display:flex;align-items:center;flex-wrap:wrap;gap:8px;min-width:0}
:where(.filter-chip,[data-filter-chip]){display:inline-flex;align-items:center;gap:.45em;max-width:100%;padding:.4em .7em;border-radius:999px;overflow-wrap:anywhere}
:where(.filter-chip,[data-filter-chip]) :is(button,[role="button"]){min-width:28px;min-height:28px;display:inline-flex;align-items:center;justify-content:center}
:where(.list-row,[data-list-row]){min-width:0;display:flex;align-items:center;gap:12px}
:where(.list-row,[data-list-row]) > :is(.title,.content,[data-row-content]){min-width:0;flex:1 1 auto;overflow-wrap:anywhere}
:where(.list-row,[data-list-row]) > :is(.actions,[data-row-actions]){flex:0 0 auto;display:flex;align-items:center;gap:6px}
:where(.form-actions,[data-form-actions]){display:flex;justify-content:flex-end;align-items:center;flex-wrap:wrap;gap:10px}
:where(.form-actions,[data-form-actions]) :is(button,[type="submit"]){min-height:40px}
:where(.field-error,[data-field-error]){font-size:.875rem;line-height:1.45;overflow-wrap:anywhere;color:var(--gui-error-color,#d34c52)}
:where(.field-error,[data-field-error])[role="alert"]{margin-block-start:4px}
:where(.notification-list,[data-notification-list]) > * + *{border-block-start:1px solid color-mix(in srgb,currentColor 12%,transparent)}
:where(.notification-item,[data-notification-item]){display:flex;align-items:flex-start;gap:12px;padding-block:12px;min-width:0}
:where(.notification-item,[data-notification-item]) > :is(.content,[data-notification-content]){min-width:0;flex:1 1 auto;overflow-wrap:anywhere}
:where(.toolbar,.filter-bar,[data-toolbar]) :is(button,a,[role="button"]){min-height:38px}
:where([aria-current="page"],[aria-selected="true"]):focus-visible{outline:2px solid var(--gui-24-accent);outline-offset:3px}
@media(max-width:640px){:where(.form-actions,[data-form-actions]) > :is(button,[type="submit"]){flex:1 1 auto}:where(.list-row,[data-list-row]){align-items:flex-start}:where(.list-row,[data-list-row]) > :is(.actions,[data-row-actions]){flex-wrap:wrap;justify-content:flex-end;max-width:45%}}
@media(forced-colors:active){:where(.field-error,[data-field-error]){color:Mark}:where(.notification-list,[data-notification-list]) > * + *{border-color:CanvasText}}
/* Visual tranche 26 — operational dashboard clarity and accessible data surfaces. */
:where(.activity-feed,[data-activity-feed]){min-width:0;max-width:100%;overflow-wrap:anywhere}
:where(.activity-feed,[data-activity-feed]) > * + *{border-block-start:1px solid color-mix(in srgb,currentColor 10%,transparent)}
:where(.activity-feed,[data-activity-feed]) time{font-variant-numeric:tabular-nums;white-space:nowrap;font-size:.875em;opacity:.78}
:where(.chart-card,[data-chart-card]){min-width:0;max-width:100%;overflow:hidden}
:where(.chart-card,[data-chart-card]) :is(svg,canvas){max-width:100%}
:where(.chart-legend,[data-chart-legend]){display:flex;align-items:center;gap:8px 16px;flex-wrap:wrap;min-width:0}
:where(.chart-legend,[data-chart-legend]) > *{display:inline-flex;align-items:center;gap:6px;min-width:0;overflow-wrap:anywhere}
:where(.summary-strip,[data-summary-strip]){display:flex;align-items:stretch;gap:clamp(10px,1.5vw,22px);flex-wrap:wrap;min-width:0}
:where(.summary-strip,[data-summary-strip]) > *{min-width:min(100%,165px);flex:1 1 165px}
:where(.data-kpi,[data-kpi]){font-variant-numeric:tabular-nums;overflow-wrap:anywhere}
:where(.data-kpi,[data-kpi]) :is(.delta,[data-kpi-delta]){font-size:.875em;font-weight:600}
:where(.keyboard-hint,[data-keyboard-hint]){display:inline-flex;align-items:center;gap:.3em;min-width:0}
:where(.keyboard-hint,[data-keyboard-hint]) kbd{font:inherit;font-size:.8em;padding:.1em .4em;border:1px solid color-mix(in srgb,currentColor 25%,transparent);border-radius:5px}
:where(.command-list,[data-command-list]){max-width:100%;overflow-x:auto;overscroll-behavior-inline:contain}
:where(.command-list,[data-command-list]) :is(button,[role="option"]){min-height:40px}
:where(.data-table,[data-data-table]){font-variant-numeric:tabular-nums}
:where(.data-table,[data-data-table]) :is(th,td){overflow-wrap:normal}
:where(.data-table,[data-data-table]) :is(th,td):first-child{text-align:start}
:where(.data-table,[data-data-table]) :is(th,td)[data-numeric]{text-align:end;white-space:nowrap}
@media(max-width:640px){:where(.activity-feed,[data-activity-feed]) time{white-space:normal}:where(.summary-strip,[data-summary-strip]) > *{flex-basis:min(100%,140px)}}
@media(forced-colors:active){:where(.activity-feed,[data-activity-feed]) > * + *{border-color:CanvasText}:where(.keyboard-hint,[data-keyboard-hint]) kbd{border-color:CanvasText}}