/* CoreUI 4/5 + Ribsarap Theme Overrides Place this at the end of your tag. */ :root { /* Ribsarap Brand Tokens */ --ribs-maroon: #8E1F1F; --ribs-maroon-dark: #6B1717; --ribs-maroon-active: #B22222; --ribs-orange: #E65A2B; --ribs-cream: #F9F7F2; --ribs-dark: #1A1918; /* CoreUI Global Variable Overrides */ --cui-primary: var(--ribs-maroon-dark); --cui-primary-rgb: 107, 23, 23; --cui-secondary: var(--ribs-cream); --cui-secondary-rgb: 249, 247, 242; --cui-link-color: #6c757d; --cui-link-hover-color: var(--ribs-maroon-dark); /* Sidebar Variables - Explicit Light Theme */ --cui-sidebar-bg: #ffffff; --cui-sidebar-color: #4f5d73; --cui-sidebar-nav-link-color: #4f5d73; --cui-sidebar-nav-link-active-bg: rgba(178, 34, 34, 0.08); --cui-sidebar-nav-link-active-color: var(--ribs-maroon-active); --cui-sidebar-nav-link-hover-bg: #f8f9fa; /* Header & Footer Variable Overrides */ --cui-header-bg: var(--ribs-maroon-dark); --cui-header-border-color: var(--ribs-maroon); --cui-footer-bg: #ffffff; /* Progress Bar Overrides */ --cui-progress-bar-bg: var(--ribs-maroon); } /* 1. Body & Background Styling */ body, .wrapper, .body { background-color: var(--ribs-cream) !important; font-family: 'Inter', -apple-system, system-ui, sans-serif; color: #333; } /* Standard Links */ a { color: var(--cui-link-color); text-decoration: none; transition: color 0.2s ease; } a:hover { color: var(--cui-link-hover-color); } /* 2. Sidebar Customization */ .sidebar { background: #ffffff !important; border-right: 1px solid rgba(0,0,0,0.08) !important; box-shadow: 2px 0 10px rgba(0,0,0,0.02); } /* Navbar Title Class Styling - Updated padding to 10px top and 10px bottom */ .nav-title { color: var(--cui-sidebar-color) !important; font-size: 0.65rem !important; font-weight: 800 !important; text-transform: uppercase !important; letter-spacing: 0.05rem !important; padding: 10px 1rem 10px !important; } /* Sidebar Navigation Link Styling - Bolded */ .sidebar-nav .nav-link { transition: background 0.2s ease, color 0.2s ease; font-weight: 600 !important; color: var(--cui-sidebar-nav-link-color) !important; padding: 0.75rem 1rem; } /* Sidebar Icon Color Sync (Hover & Active) */ .sidebar-nav .nav-link .nav-icon { color: inherit !important; /* Forces icon to follow text color */ fill: currentColor !important; transition: color 0.2s ease; } /* Group/Parent Item Styling - Bolded */ .sidebar-nav .nav-group-toggle, .sidebar .nav-link.nav-dropdown-toggle { color: var(--cui-sidebar-nav-link-color) !important; font-weight: 700 !important; position: relative; background-color: transparent !important; /* Fix: Remove grey background from toggles */ } /* Arrow background image overrides */ .sidebar-nav .nav-group-toggle::after, .sidebar .nav-link.nav-dropdown-toggle::after, .sidebar .nav-dropdown-toggle::after { background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%238E1F1F' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M2 5l6 6 6-6'/%3e%3c/svg%3e") !important; background-size: 1rem !important; transition: transform 0.2s ease-in-out, background-image 0.2s ease !important; } /* Indentation and Background Reset for Sub-items */ .sidebar-nav .nav-group-items, .sidebar .nav-dropdown-items { background-color: #ffffff !important; /* Fix: Force sub-menu background to white */ } .sidebar-nav .nav-group-items .nav-link, .sidebar .nav-dropdown-items .nav-link { padding-left: 2.5rem !important; font-size: 0.85rem; opacity: 0.85; background-color: transparent !important; /* Fix: Remove grey background from sub-links */ } /* Hover States - Unified for Parent and Child */ .sidebar-nav .nav-link:hover, .sidebar-nav .nav-group-toggle:hover { color: var(--ribs-maroon-active) !important; background-color: var(--cui-sidebar-nav-link-hover-bg) !important; } /* Active States - Bolded */ .sidebar-nav .nav-link.active { color: var(--ribs-maroon-active) !important; background-color: var(--cui-sidebar-nav-link-active-bg) !important; font-weight: 700 !important; } /* Sidebar Left Accent Bar */ .sidebar-nav > .nav-item > .nav-link.active::before, .sidebar-nav > .nav-group.show > .nav-group-toggle::before { content: ""; position: absolute; left: 0; top: 15%; height: 70%; width: 4px; background-color: var(--ribs-maroon-active); border-radius: 0 4px 4px 0; z-index: 1; } /* 3. Header Styling (Navbar) */ .app-header, .header { background-color: var(--ribs-maroon-dark) !important; border-bottom: 1px solid var(--ribs-maroon) !important; box-shadow: 0 2px 4px rgba(0,0,0,0.1) !important; color: #ffffff !important; } .app-header .navbar-brand, .header .navbar-brand { color: #ffffff !important; font-weight: 800 !important; } /* Fix: Ensuring Header nav-links are pure white */ .app-header .header-nav .nav-link, .header .nav-link, .app-header .nav-link { color: #ffffff !important; font-weight: 600 !important; opacity: 1 !important; } .app-header .header-nav .nav-link:hover, .header .nav-link:hover { color: var(--ribs-orange) !important; } /* Navbar Dropdown Enhancements - Higher specificity */ .app-header .dropdown-menu, .header .dropdown-menu { margin-top: 20px !important; /* Increased to 20px */ border: 1px solid rgba(0,0,0,0.1) !important; box-shadow: 0 4px 12px rgba(0,0,0,0.1) !important; padding-top: 0 !important; /* Ensure header touches the top */ overflow: hidden !important; /* Keep rounded corners with the maroon header */ } .app-header .dropdown-header, .header .dropdown-header { background-color: var(--ribs-maroon) !important; color: #ffffff !important; font-weight: 700 !important; text-transform: uppercase !important; font-size: 0.75rem !important; padding: 0.75rem 1rem !important; margin-top: 0 !important; border-top-left-radius: inherit; border-top-right-radius: inherit; } /* Dropdown Item Color Overrides - Fix for the "Blue" state */ .dropdown-item.active, .dropdown-item:active { background-color: var(--ribs-maroon-active) !important; color: #ffffff !important; } .dropdown-item:hover, .dropdown-item:focus { background-color: rgba(142, 31, 31, 0.1) !important; /* Subtle maroon tint on hover */ color: var(--ribs-maroon-dark) !important; } /* Navbar Toggler - Border Removed */ .app-header .header-toggler, .header .header-toggler, .navbar-toggler { color: #ffffff !important; border: none !important; outline: none !important; box-shadow: none !important; background-color: transparent !important; padding: 0.5rem !important; } /* White Hamburger Icon using Mask Logic */ .app-header .header-toggler-icon, .header .header-toggler-icon, .navbar-toggler-icon { background-image: none !important; background-color: #ffffff !important; display: inline-block; width: 1.5rem; height: 1.5rem; vertical-align: middle; mask-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='black' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e"); -webkit-mask-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='black' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e"); mask-repeat: no-repeat; -webkit-mask-repeat: no-repeat; mask-position: center; -webkit-mask-position: center; } .header-toggler:hover { background-color: rgba(255, 255, 255, 0.1) !important; border-radius: 4px; } /* 4. Footer Styling */ .footer, .app-footer { background-color: #ffffff !important; border-top: 1px solid rgba(0, 0, 0, 0.08) !important; color: #4f5d73 !important; font-size: 0.85rem; } .footer a, .app-footer a, .footer .fw-bold { color: var(--ribs-maroon-dark) !important; text-decoration: none !important; font-weight: 700; } /* 5. Progress Bar Specific Overrides */ .progress-bar, .bg-primary, .progress-group-bars .progress-bar, div[role="progressbar"], .progress-bar-animated { background-color: var(--ribs-maroon) !important; --cui-progress-bar-bg: var(--ribs-maroon) !important; } .progress { background-color: rgba(0,0,0,0.05) !important; --cui-progress-bg: rgba(0,0,0,0.05) !important; } .progress-bar.bg-primary { background-color: var(--ribs-maroon) !important; } /* 6. Pace.js (Automatic Page Load Progress Bar) Overrides */ .pace .pace-progress { background: var(--ribs-maroon) !important; } .pace .pace-progress-inner { box-shadow: 0 0 10px var(--ribs-maroon), 0 0 5px var(--ribs-maroon) !important; } .pace .pace-activity { border-top-color: var(--ribs-maroon) !important; border-left-color: var(--ribs-maroon) !important; } /* 7. Primary & Secondary Utility Overrides */ .btn-primary { background-color: var(--ribs-maroon-dark) !important; border-color: var(--ribs-maroon-dark) !important; color: #ffffff !important; } .btn-primary:hover { background-color: var(--ribs-maroon) !important; border-color: var(--ribs-maroon) !important; } .bg-primary { background-color: var(--ribs-maroon-dark) !important; } .text-primary { color: var(--ribs-maroon-dark) !important; } .btn-secondary { background-color: var(--ribs-cream) !important; border-color: #ddd !important; color: var(--ribs-maroon-dark) !important; } .btn-secondary:hover { background-color: #eee9df !important; } .bg-secondary { background-color: var(--ribs-cream) !important; } .text-secondary { color: #6c757d !important; } /* 8. Card Header Overrides */ .card-header { background-color: var(--ribs-maroon) !important; color: #ffffff !important; border-bottom: 1px solid var(--ribs-maroon-dark) !important; font-weight: 700 !important; text-transform: uppercase !important; font-size: 0.85rem !important; padding: 0.75rem 1.25rem !important; } .card-header .nav-icon, .card-header i, .card-header svg { color: #ffffff !important; } /* 9. DataTables Pagination & UI Overrides - Lighter Aesthetic */ .page-item.active .page-link { background-color: var(--ribs-maroon-active) !important; border-color: var(--ribs-maroon-active) !important; color: #ffffff !important; box-shadow: 0 2px 4px rgba(178, 34, 34, 0.2); } .page-link { color: #4f5d73 !important; /* Lighter text color */ background-color: #ffffff !important; border: 1px solid rgba(0,0,0,0.08) !important; /* Softer border */ padding: 0.5rem 0.85rem; font-size: 0.875rem; transition: all 0.2s ease; } .page-link:hover { background-color: #f8f9fa !important; color: var(--ribs-maroon-active) !important; border-color: rgba(0,0,0,0.15) !important; } .page-item:first-child .page-link { border-top-left-radius: 6px !important; border-bottom-left-radius: 6px !important; } .page-item:last-child .page-link { border-top-right-radius: 6px !important; border-bottom-right-radius: 6px !important; } .page-item.disabled .page-link { color: #d8dbe0 !important; background-color: #ffffff !important; border-color: rgba(0,0,0,0.05) !important; pointer-events: none; } .dataTables_filter input, .dataTables_length select { border: 1px solid rgba(0,0,0,0.1) !important; border-radius: 4px !important; padding: 0.3rem 0.5rem !important; font-size: 0.875rem !important; } .dataTables_filter input:focus, .dataTables_length select:focus { border-color: var(--ribs-maroon-active) !important; box-shadow: 0 0 0 0.2rem rgba(178, 34, 34, 0.1) !important; outline: 0; }