/* ── APPEX360 Global Density System ── Release 19.1 * * Controls spacing, padding, and sizing across the entire platform. * Applied via density-{compact,comfortable,spacious} class on . * * Compact: Smaller padding, tighter gaps, denser grids * Comfortable: Current default (24px card padding, 16px gaps) * Spacious: Larger padding, bigger gaps, executive presentation mode */ /* ═══ Default (Comfortable) ═══ */ :root { --density-card-padding: 24px; --density-card-gap: 16px; --density-section-gap: 32px; --density-table-cell: 12px 16px; --density-table-cell-compact: 8px 12px; --density-kpi-min-width: 200px; --density-grid-gap: 16px; --density-sidebar-padding: 16px; --density-form-spacing: 16px; --density-section-padding: 24px; } /* ═══ Compact ═══ */ body.density-compact { --density-card-padding: 16px; --density-card-gap: 10px; --density-section-gap: 20px; --density-table-cell: 8px 12px; --density-table-cell-compact: 6px 8px; --density-kpi-min-width: 160px; --density-grid-gap: 10px; --density-sidebar-padding: 10px; --density-form-spacing: 10px; --density-section-padding: 16px; } /* ═══ Spacious ═══ */ body.density-spacious { --density-card-padding: 32px; --density-card-gap: 24px; --density-section-gap: 48px; --density-table-cell: 16px 24px; --density-table-cell-compact: 12px 16px; --density-kpi-min-width: 260px; --density-grid-gap: 24px; --density-sidebar-padding: 24px; --density-form-spacing: 24px; --density-section-padding: 32px; } /* ═══ Density-Aware Component Consumers ═══ */ /* Cards */ .exec-card, .apex-card, .ds-card, .kpi-card, [class*="card"]:not(.no-density) { padding: var(--density-card-padding) !important; } /* Card grids */ .exec-grid, .card-grid, .kpi-grid, [class*="grid"]:not(.no-density) { gap: var(--density-grid-gap) !important; } /* KPI cards minimum width */ .kpi-card, .ds-kpi-card, [class*="kpi-card"] { min-width: var(--density-kpi-min-width); } /* Tables */ table.data-table th, table.data-table td, .table-row, [class*="table"]:not(.no-density) td, [class*="table"]:not(.no-density) th { padding: var(--density-table-cell) !important; } /* Sections */ .section-group, .boardroom-section, .dashboard-section, [class*="section"]:not(.no-density) { gap: var(--density-section-gap); padding: var(--density-section-padding); } /* Sidebar */ .sidebar, [class*="sidebar"]:not(.no-density) { padding: var(--density-sidebar-padding) !important; } /* Forms */ .form-group, .form-field, [class*="form"]:not(.no-density) { gap: var(--density-form-spacing); margin-bottom: var(--density-form-spacing); } /* Boardroom specific */ .boardroom-section { padding: var(--density-card-padding) !important; margin-bottom: var(--density-card-gap); } /* Homepage sections */ .homepage-section { padding: var(--density-section-padding) !important; margin-bottom: var(--density-section-gap); }