/* ========================================================================== COREUI FULL THEME Matches CoreUI 5.3 Free Bootstrap Admin Template exactly. Source: https://coreui.io/demos/bootstrap/5.3/free/?theme=light Activated by: data-skin="coreui" on (data-bs-theme stays "light") ========================================================================== */ /* --- Core Variables --- */ [data-skin="coreui"] { /* Font: system stack (CoreUI default — starts with system-ui) */ --bs-font-sans-serif: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", "Noto Sans", "Liberation Sans", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"; /* Base font: 1rem (CoreUI default 16px, NOT 14px) */ --bs-body-font-size: 1rem; --bs-body-line-height: 1.5; /* Body colors: CoreUI uses near-black text at 95% opacity */ --bs-body-color: rgba(37, 43, 54, 0.95); --bs-body-color-rgb: 37, 43, 54; --bs-body-bg: #fff; --bs-body-bg-rgb: 255, 255, 255; /* Headings */ --bs-heading-color: #080a0c; --bs-emphasis-color: #080a0c; --bs-emphasis-color-rgb: 8, 10, 12; /* Secondary text */ --bs-secondary-color: rgba(37, 43, 54, 0.68); --bs-secondary-color-rgb: 37, 43, 54; /* Paper / card backgrounds */ --bs-paper-bg: #fff; --bs-paper-bg-rgb: 255, 255, 255; /* Tertiary bg (table headers, code blocks, etc.) */ --bs-tertiary-bg: #f3f4f7; --bs-tertiary-bg-rgb: 243, 244, 247; /* Secondary bg */ --bs-secondary-bg: #e7eaee; --bs-secondary-bg-rgb: 231, 234, 238; /* Base color (used in color-mix calculations) */ --bs-base-color: #252b36; --bs-base-color-rgb: 37, 43, 54; /* ========= Primary: CoreUI indigo ========= */ --bs-primary: #5856d6; --bs-primary-rgb: 88, 86, 214; --bs-primary-bg-subtle: #deddfa; --bs-primary-border-subtle: #bcbbf0; --bs-primary-text-emphasis: #232256; /* ========= Secondary: slate gray ========= */ --bs-secondary: #6b7785; --bs-secondary-rgb: 107, 119, 133; /* ========= Success ========= */ --bs-success: #1b9e3e; --bs-success-rgb: 27, 158, 62; --bs-success-bg-subtle: #d1f0d9; --bs-success-border-subtle: #a3e1b3; --bs-success-text-emphasis: #0b3f19; /* ========= Info ========= */ --bs-info: #0dcaf0; --bs-info-rgb: 13, 202, 240; --bs-info-bg-subtle: #cff4fc; --bs-info-border-subtle: #9eeaf9; --bs-info-text-emphasis: #055160; /* ========= Warning ========= */ --bs-warning: #f9b115; --bs-warning-rgb: 249, 177, 21; --bs-warning-bg-subtle: #fef0d0; --bs-warning-border-subtle: #fce1a1; --bs-warning-text-emphasis: #634708; /* ========= Danger ========= */ --bs-danger: #e55353; --bs-danger-rgb: 229, 83, 83; --bs-danger-bg-subtle: #f9d9d9; --bs-danger-border-subtle: #f3b3b3; --bs-danger-text-emphasis: #5c2121; /* Light / Dark */ --bs-light: #f3f4f7; --bs-light-rgb: 243, 244, 247; --bs-dark: #252b36; --bs-dark-rgb: 37, 43, 54; /* Links */ --bs-link-color: #5856d6; --bs-link-hover-color: #4644ab; --bs-link-color-rgb: 88, 86, 214; --bs-link-hover-color-rgb: 70, 68, 171; /* Borders */ --bs-border-color: #dbdfe6; --bs-border-color-translucent: rgba(8, 10, 12, 0.1); /* Gray scale */ --bs-gray-25: #f9fafb; --bs-gray-50: #f3f4f7; --bs-gray-75: #eef0f3; --bs-gray-100: #e7eaee; --bs-gray-200: #dbdfe6; --bs-gray-300: #c4c9d0; --bs-gray-400: #b1b7c1; --bs-gray-500: #9da5b1; --bs-gray-600: #8a93a2; --bs-gray-700: #768192; --bs-gray-800: #636f83; --bs-gray-900: #4f5d73; /* Shadows: flatter, less pronounced (corporate feel) */ --bs-box-shadow: 0 1px 2px 0 rgba(37, 43, 54, 0.07); --bs-box-shadow-xs: 0 1px 1px 0 rgba(37, 43, 54, 0.05); --bs-box-shadow-sm: 0 1px 3px 0 rgba(37, 43, 54, 0.07); --bs-box-shadow-lg: 0 2px 8px 0 rgba(37, 43, 54, 0.1); --bs-box-shadow-xl: 0 4px 16px 0 rgba(37, 43, 54, 0.1); --bs-floating-component-shadow: 0 2px 8px 0 rgba(37, 43, 54, 0.12); /* Navbar */ --bs-navbar-bg: #fff; --bs-navbar-box-shadow: none; --bs-navbar-border-color: #dbdfe6; --bs-navbar-border-width: 1px; } /* ========================================================================== SIDEBAR / MENU — Dark navy (CoreUI 5.3 signature: #212631) ========================================================================== */ [data-skin="coreui"] { --bs-menu-bg: #212631; --bs-menu-bg-rgb: 33, 38, 49; --bs-menu-color: rgba(255, 255, 255, 0.6); --bs-menu-color-rgb: 255, 255, 255; --bs-menu-hover-bg: rgba(255, 255, 255, 0.04); --bs-menu-hover-color: rgba(255, 255, 255, 0.87); --bs-menu-sub-active-bg: rgba(255, 255, 255, 0.04); --bs-menu-sub-active-color: rgba(255, 255, 255, 0.87); --bs-menu-active-bg: #5856d6; --bs-menu-active-color: rgba(255, 255, 255, 0.87); --bs-menu-horizontal-active-bg: rgba(88, 86, 214, 0.1); --bs-menu-box-shadow: none; --bs-menu-divider-color: rgba(255, 255, 255, 0.06); --bs-menu-header-color: rgba(255, 255, 255, 0.4); } /* Menu header labels */ [data-skin="coreui"] .menu-inner > .menu-header { color: rgba(255, 255, 255, 0.4) !important; font-size: 0.75rem; text-transform: uppercase; letter-spacing: 0.05em; } /* Menu icons */ [data-skin="coreui"] .menu-inner .menu-item .menu-link .menu-icon { color: rgba(255, 255, 255, 0.5); } [data-skin="coreui"] .menu-inner .menu-item .menu-link:hover .menu-icon, [data-skin="coreui"] .menu-inner .menu-item.active > .menu-link .menu-icon { color: rgba(255, 255, 255, 0.87); } /* Active menu item: primary bg with white text (CoreUI 5.3 style) */ [data-skin="coreui"] .menu-inner > .menu-item.active > .menu-link { background-color: #5856d6 !important; color: rgba(255, 255, 255, 0.87) !important; border-radius: 0; } [data-skin="coreui"] .menu-inner > .menu-item.active > .menu-link .menu-icon { color: rgba(255, 255, 255, 0.87) !important; } /* Sub-menu dots/arrows */ [data-skin="coreui"] .menu-inner .menu-sub .menu-link::before { background-color: rgba(255, 255, 255, 0.3) !important; } [data-skin="coreui"] .menu-inner .menu-sub .menu-item.active > .menu-link::before { background-color: #fff !important; } /* Perfect scrollbar thumb in menu */ [data-skin="coreui"] .bg-menu-theme .ps__thumb-y { background-color: rgba(255, 255, 255, 0.15) !important; } /* ========================================================================== APP BRAND (sidebar logo area) ========================================================================== */ [data-skin="coreui"] .app-brand-text { color: rgba(255, 255, 255, 0.87) !important; font-weight: 600; } [data-skin="coreui"] .app-brand-logo svg rect { fill: #5856d6; } [data-skin="coreui"] .layout-menu-toggle i { color: rgba(255, 255, 255, 0.6) !important; } /* ========================================================================== NAVBAR — Light with bottom border (CoreUI style) ========================================================================== */ [data-skin="coreui"] .layout-navbar.navbar-detached.bg-navbar-theme { background-color: #fff !important; border-bottom: 1px solid #dbdfe6; box-shadow: none; backdrop-filter: none; } [data-skin="coreui"] .navbar-nav .nav-link { color: rgba(37, 43, 54, 0.95); } /* ========================================================================== CARDS — Bordered, flat, no shadow (corporate feel) ========================================================================== */ [data-skin="coreui"] .card { border: 1px solid #dbdfe6; box-shadow: none; border-radius: 0.375rem; } [data-skin="coreui"] .card-header { background-color: transparent; border-bottom: 1px solid #dbdfe6; padding: 1rem 1.25rem; font-weight: 600; color: rgba(37, 43, 54, 0.95); } [data-skin="coreui"] .card-body { padding: 1.25rem; } /* ========================================================================== TABLES — CoreUI style ========================================================================== */ [data-skin="coreui"] .table thead th { background-color: #f3f4f7; font-weight: 600; font-size: 0.875rem; text-transform: none; letter-spacing: normal; color: rgba(37, 43, 54, 0.68); border-bottom-width: 2px; border-bottom-color: #dbdfe6; padding: 0.75rem; } [data-skin="coreui"] .table td { vertical-align: middle; padding: 0.75rem; color: rgba(37, 43, 54, 0.95); } [data-skin="coreui"] .table-bordered > :not(caption) > * > * { border-color: #dbdfe6; } /* ========================================================================== BUTTONS — CoreUI sizing ========================================================================== */ [data-skin="coreui"] .btn { font-size: 1rem; border-radius: 0.375rem; padding: 0.375rem 0.75rem; font-weight: 400; } [data-skin="coreui"] .btn-sm { font-size: 0.875rem; padding: 0.25rem 0.5rem; } [data-skin="coreui"] .btn-lg { font-size: 1.25rem; padding: 0.5rem 1rem; } /* Outlined buttons */ [data-skin="coreui"] .btn-outline-primary { border-color: #5856d6; color: #5856d6; } [data-skin="coreui"] .btn-outline-primary:hover { background-color: #5856d6; color: #fff; } /* ========================================================================== FORM CONTROLS ========================================================================== */ [data-skin="coreui"] .form-control, [data-skin="coreui"] .form-select { font-size: 1rem; border-color: #b1b7c1; border-radius: 0.375rem; padding: 0.375rem 0.75rem; color: rgba(37, 43, 54, 0.95); } [data-skin="coreui"] .form-control:focus, [data-skin="coreui"] .form-select:focus { border-color: #8c8be5; box-shadow: 0 0 0 0.25rem rgba(88, 86, 214, 0.25); } [data-skin="coreui"] .form-label { font-size: 1rem; font-weight: 400; color: rgba(37, 43, 54, 0.95); margin-bottom: 0.5rem; } [data-skin="coreui"] .input-group-text { font-size: 1rem; background-color: #f3f4f7; border-color: #b1b7c1; color: rgba(37, 43, 54, 0.68); border-radius: 0.375rem; } /* ========================================================================== BADGES ========================================================================== */ [data-skin="coreui"] .badge { font-size: 0.75em; font-weight: 600; border-radius: 0.375rem; padding: 0.35em 0.65em; } [data-skin="coreui"] .badge.bg-label-primary { color: #5856d6; } /* ========================================================================== DROPDOWNS ========================================================================== */ [data-skin="coreui"] .dropdown-menu { border: 1px solid #dbdfe6; box-shadow: 0 2px 12px rgba(8, 10, 12, 0.08); border-radius: 0.375rem; font-size: 1rem; } [data-skin="coreui"] .dropdown-item { padding: 0.25rem 1rem; color: rgba(37, 43, 54, 0.95); } [data-skin="coreui"] .dropdown-item:hover, [data-skin="coreui"] .dropdown-item:focus { background-color: #f3f4f7; color: #080a0c; } [data-skin="coreui"] .dropdown-item.active, [data-skin="coreui"] .dropdown-item:active { background-color: #5856d6; color: #fff; } /* ========================================================================== MODALS — Bordered header/footer ========================================================================== */ [data-skin="coreui"] .modal-content { border: 1px solid #dbdfe6; border-radius: 0.375rem; box-shadow: 0 4px 16px rgba(8, 10, 12, 0.12); } [data-skin="coreui"] .modal-header { border-bottom: 1px solid #dbdfe6; padding: 1rem; } [data-skin="coreui"] .modal-footer { border-top: 1px solid #dbdfe6; padding: 0.75rem 1rem; } /* ========================================================================== PAGINATION ========================================================================== */ [data-skin="coreui"] .page-link { color: #5856d6; border-color: #dbdfe6; border-radius: 0.375rem; } [data-skin="coreui"] .page-item.active .page-link { background-color: #5856d6; border-color: #5856d6; } /* ========================================================================== ALERTS ========================================================================== */ [data-skin="coreui"] .alert { border-radius: 0.375rem; } /* ========================================================================== BREADCRUMBS ========================================================================== */ [data-skin="coreui"] .breadcrumb-item a { color: #5856d6; } /* ========================================================================== DATATABLES overrides ========================================================================== */ [data-skin="coreui"] .dataTables_wrapper .dataTables_length, [data-skin="coreui"] .dataTables_wrapper .dataTables_filter, [data-skin="coreui"] .dataTables_wrapper .dataTables_info { color: rgba(37, 43, 54, 0.68); } [data-skin="coreui"] .dataTables_wrapper .dataTables_filter input { border-color: #b1b7c1; border-radius: 0.375rem; } /* ========================================================================== SWEETALERT2 — match CoreUI colors ========================================================================== */ [data-skin="coreui"] .swal2-popup { font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; border-radius: 0.375rem; } [data-skin="coreui"] .swal2-title { color: #080a0c; font-size: 1.25rem; } [data-skin="coreui"] .swal2-html-container { color: rgba(37, 43, 54, 0.68); } /* ========================================================================== NOTYF — match CoreUI font ========================================================================== */ [data-skin="coreui"] .notyf, [data-skin="coreui"] .notyf__message { font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif !important; } /* ========================================================================== SELECT2 — match CoreUI inputs ========================================================================== */ [data-skin="coreui"] .select2-container--default .select2-selection--single, [data-skin="coreui"] .select2-container--default .select2-selection--multiple { border-color: #b1b7c1; border-radius: 0.375rem; } [data-skin="coreui"] .select2-container--default .select2-selection--single:focus, [data-skin="coreui"] .select2-container--default.select2-container--focus .select2-selection--multiple { border-color: #8c8be5; box-shadow: 0 0 0 0.25rem rgba(88, 86, 214, 0.25); } [data-skin="coreui"] .select2-container--default .select2-dropdown { border-color: #dbdfe6; border-radius: 0.375rem; } [data-skin="coreui"] .select2-container--default .select2-results__option--highlighted[aria-selected] { background-color: #5856d6; } /* ========================================================================== FLATPICKR — match CoreUI ========================================================================== */ [data-skin="coreui"] .flatpickr-calendar { border: 1px solid #dbdfe6; box-shadow: 0 2px 12px rgba(8, 10, 12, 0.08); border-radius: 0.375rem; } /* ========================================================================== FOOTER ========================================================================== */ [data-skin="coreui"] .footer.bg-footer-theme { background-color: #f3f4f7; border-top: 1px solid #dbdfe6; color: rgba(37, 43, 54, 0.68); } /* ========================================================================== TYPOGRAPHY — CoreUI default sizes (same as Bootstrap 5 defaults) ========================================================================== */ [data-skin="coreui"] h1, [data-skin="coreui"] .h1 { font-size: 2.5rem; font-weight: 500; } [data-skin="coreui"] h2, [data-skin="coreui"] .h2 { font-size: 2rem; font-weight: 500; } [data-skin="coreui"] h3, [data-skin="coreui"] .h3 { font-size: 1.75rem; font-weight: 500; } [data-skin="coreui"] h4, [data-skin="coreui"] .h4 { font-size: 1.5rem; font-weight: 500; } [data-skin="coreui"] h5, [data-skin="coreui"] .h5 { font-size: 1.25rem; font-weight: 500; } [data-skin="coreui"] h6, [data-skin="coreui"] .h6 { font-size: 1rem; font-weight: 500; } /* ========================================================================== SCROLLBAR — subtle ========================================================================== */ [data-skin="coreui"] ::-webkit-scrollbar { width: 8px; height: 8px; } [data-skin="coreui"] ::-webkit-scrollbar-track { background: #f3f4f7; } [data-skin="coreui"] ::-webkit-scrollbar-thumb { background: #c4c9d0; border-radius: 4px; } [data-skin="coreui"] ::-webkit-scrollbar-thumb:hover { background: #9da5b1; } /* ========================================================================== CONTENT BACKDROP ========================================================================== */ [data-skin="coreui"] .content-backdrop { background-color: rgba(8, 10, 12, 0.4); }