/* ============================================================= SEPADZN — app.css Main entry point. Imports entire design system in order. Load AFTER Bootstrap in . ============================================================= */ /* 1. Tokens — must be first */ @import url("./design-tokens.css"); /* 2. Themes — overrides Bootstrap CSS vars + dark mode */ @import url("./themes.css"); /* 3. Reset */ @import url("./reset.css"); /* 4. Typography */ @import url("./typography.css"); /* 5. Layout */ @import url("./layout.css"); /* 6. Utilities */ @import url("./utilities.css"); /* 7. Components */ @import url("./components/navbar.css"); @import url("./components/sidebar.css"); @import url("./components/buttons.css"); @import url("./components/forms.css"); @import url("./components/cards.css"); @import url("./components/tables.css"); @import url("./components/alerts.css"); @import url("./components/badges.css"); @import url("./components/modals.css"); @import url("./components/dropdowns.css"); @import url("./components/stat-cards.css"); /* 8. Modules */ @import url("./modules/heatmaps.css"); @import url("./modules/analytics.css"); @import url("./modules/reportes-ia.css"); /* ============================================================= BOOTSTRAP INTEGRATION PATCHES Overrides that can't be done through CSS variable tokens alone. Placed here (after Bootstrap) so they win the cascade naturally. Uses :where() to keep specificity at 0 where possible. ============================================================= */ /* Spinner */ :where(.spinner-border) { color: var(--theme-primary); } /* Progress */ :where(.progress) { background-color: var(--theme-border); border-radius: var(--radius-full); } :where(.progress-bar) { background-color: var(--palette-4); border-radius: var(--radius-full); } [data-theme="dark"] .progress-bar { background-color: var(--palette-2); } /* Breadcrumbs */ :where(.breadcrumb) { background: transparent; padding: var(--space-2) 0; font-size: var(--text-sm); } :where(.breadcrumb-item.active) { color: var(--theme-fg-muted); } :where(.breadcrumb-item + .breadcrumb-item::before) { color: var(--theme-fg-subtle); } /* Pagination */ :where(.pagination .page-link) { color: var(--theme-primary); background-color: var(--theme-bg-elevated); border-color: var(--theme-border); border-radius: var(--radius-md); font-size: var(--text-sm); padding: var(--space-2) var(--space-3); transition: color var(--duration-fast), background-color var(--duration-fast), border-color var(--duration-fast); } :where(.pagination .page-link:hover) { background-color: var(--theme-hover-overlay); border-color: var(--theme-border-strong); color: var(--theme-primary-hover); } :where(.pagination .page-item.active .page-link) { background-color: var(--palette-4); border-color: var(--palette-4); color: #FFFFFF; } [data-theme="dark"] .pagination .page-link { background-color: var(--theme-bg-elevated); border-color: var(--theme-border); color: var(--theme-primary); } [data-theme="dark"] .pagination .page-item.active .page-link { background-color: var(--palette-2); border-color: var(--palette-2); color: var(--palette-5); } /* Tooltips */ :where(.tooltip-inner) { background-color: var(--palette-5); font-size: var(--text-xs); border-radius: var(--radius-md); } :where(.bs-tooltip-top .tooltip-arrow::before) { border-top-color: var(--palette-5); } :where(.bs-tooltip-bottom .tooltip-arrow::before) { border-bottom-color: var(--palette-5); } /* Nav tabs */ :where(.nav-tabs) { border-bottom: 1px solid var(--theme-border); } :where(.nav-tabs .nav-link) { color: var(--theme-fg-muted); border: 1px solid transparent; border-radius: var(--radius-md) var(--radius-md) 0 0; font-size: var(--text-sm); font-weight: var(--font-medium); padding: var(--space-2) var(--space-4); transition: color var(--duration-fast), background-color var(--duration-fast); } :where(.nav-tabs .nav-link:hover) { color: var(--theme-fg); background-color: var(--theme-hover-overlay); border-color: transparent; } :where(.nav-tabs .nav-link.active) { color: var(--theme-primary); background-color: var(--theme-bg-elevated); border-color: var(--theme-border) var(--theme-border) var(--theme-bg-elevated); font-weight: var(--font-semibold); } [data-theme="dark"] .nav-tabs .nav-link.active { color: var(--palette-2); background-color: var(--theme-bg-card); border-color: var(--theme-border) var(--theme-border) var(--theme-bg-card); } /* List group */ :where(.list-group-item) { background-color: var(--theme-bg-elevated); border-color: var(--theme-border); color: var(--theme-fg); font-size: var(--text-sm); } :where(.list-group-item.active) { background-color: var(--palette-4); border-color: var(--palette-4); color: #FFFFFF; } [data-theme="dark"] .list-group-item { background-color: var(--theme-bg-elevated); border-color: var(--theme-border); color: var(--theme-fg); } /* Offcanvas */ :where(.offcanvas) { background-color: var(--theme-bg-elevated); color: var(--theme-fg); } [data-theme="dark"] .offcanvas { background-color: var(--theme-bg-elevated); } /* Toast */ :where(.toast) { background-color: var(--theme-bg-elevated); border: 1px solid var(--theme-border); border-radius: var(--radius-lg); box-shadow: var(--shadow-lg); } /* Accordion */ :where(.accordion-item) { background-color: var(--theme-bg-elevated); border-color: var(--theme-border); color: var(--theme-fg); } :where(.accordion-button) { background-color: var(--theme-bg-subtle); color: var(--theme-fg); font-weight: var(--font-medium); font-size: var(--text-sm); } :where(.accordion-button:not(.collapsed)) { background-color: rgba(var(--palette-4-rgb), 0.08); color: var(--palette-4); box-shadow: none; } [data-theme="dark"] .accordion-button:not(.collapsed) { background-color: rgba(var(--palette-2-rgb), 0.12); color: var(--palette-2); } /* ============================================================= LEGACY COMPATIBILITY Maps old class names to the new system. Remove as views are updated. ============================================================= */ .text-muted { color: var(--theme-fg-muted) !important; } .bg-surface { background-color: var(--theme-bg) !important; }