/* ============================================================================ INFORMATION DENSITY — DS-006 .density-compact applied to (or layout root) activates compact mode. Auto-applied on ≥1024px desktops via density-init.js. ============================================================================ */ /* ============================================================================ COMPACT DENSITY — reduced padding, row height, section spacing ============================================================================ */ .density-compact { /* Typography role overrides — tighter in dense contexts */ --sf-type-page-title: var(--sf-text-xl); --sf-type-section-title: var(--sf-text-base); --sf-type-card-title: var(--sf-text-sm); } /* Cards */ .density-compact .sf-card, .density-compact .card { padding: var(--sf-space-3) var(--sf-space-4); } .density-compact .sf-card--compact { padding: var(--sf-space-2) var(--sf-space-3); } .density-compact .card-body { padding: var(--sf-space-3); } .density-compact .card-header, .density-compact .card-footer { padding: var(--sf-space-2) var(--sf-space-3); } /* Page header */ .density-compact .sf-page-header { padding-top: var(--sf-space-3); padding-bottom: var(--sf-space-3); } .density-compact .sf-page-title { font-size: var(--sf-type-page-title); margin-bottom: 0; } /* Tables */ .density-compact .sf-table th, .density-compact .sf-table td { padding: var(--sf-space-2) var(--sf-space-3); } /* Lists and rows */ .density-compact .sf-row, .density-compact .list-group-item { padding-top: var(--sf-space-2); padding-bottom: var(--sf-space-2); } /* Sections */ .density-compact .sf-section + .sf-section, .density-compact .mb-4 { margin-bottom: var(--sf-space-3) !important; } .density-compact .mb-6 { margin-bottom: var(--sf-space-4) !important; } /* Form fields */ .density-compact .sf-field { margin-bottom: var(--sf-space-3); gap: var(--sf-space-1); } .density-compact .sf-input, .density-compact .sf-select, .density-compact .sf-textarea { padding: var(--sf-space-1) var(--sf-space-3); font-size: var(--sf-font-size-sm); } /* Buttons */ .density-compact .sf-btn { padding: var(--sf-space-1) var(--sf-space-4); font-size: var(--sf-font-size-xs); } .density-compact .sf-btn--lg { padding: var(--sf-space-2) var(--sf-space-5); font-size: var(--sf-font-size-sm); } /* Badges */ .density-compact .sf-badge { padding: 1px var(--sf-space-2); } /* Gap and stack reductions */ .density-compact .gap-4 { gap: var(--sf-space-3) !important; } .density-compact .gap-6 { gap: var(--sf-space-4) !important; } .density-compact .gap-8 { gap: var(--sf-space-5) !important; } /* ============================================================================ COMFORTABLE DENSITY — default layout (no overrides needed beyond removing the density-compact class) ============================================================================ */ /* Comfortable is the absence of .density-compact — no rules required here. */ /* ============================================================================ RESPONSIVE: Apply compact automatically on desktop (≥1024px) JS (density-init.js) adds .density-compact to on wide viewports. The media query below provides a CSS-only fallback for broad executive pages. ============================================================================ */ @media (min-width: 1024px) { body.density-auto .sf-card, body.density-auto .card { padding: var(--sf-space-3) var(--sf-space-4); } body.density-auto .sf-page-header { padding-top: var(--sf-space-3); padding-bottom: var(--sf-space-3); } }