/* SB Admin 2 Compatible MES System Styles */ /* Radio Button Styling */ .form-check-input[type="radio"] { width: 1.25em !important; height: 1.25em !important; margin-top: 0.125em !important; margin-right: 0.5em !important; vertical-align: top !important; background-color: #fff !important; border: 1px solid #d1d3e2 !important; border-radius: 50% !important; appearance: none !important; -webkit-appearance: none !important; -moz-appearance: none !important; cursor: pointer !important; position: relative !important; flex-shrink: 0 !important; } .form-check-input[type="radio"]:checked { background-color: var(--theme-primary) !important; border-color: var(--theme-primary) !important; background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='2' fill='%23fff'/%3e%3c/svg%3e") !important; background-position: center !important; background-repeat: no-repeat !important; background-size: 100% 100% !important; } .form-check-input[type="radio"]:focus { border-color: #bac8f3 !important; outline: 0 !important; box-shadow: 0 0 0 0.2rem rgba(var(--theme-primary-rgb), 0.25) !important; } .form-check-input[type="radio"]:hover { border-color: var(--theme-primary) !important; } .form-check-label { cursor: pointer; margin-left: 0; font-weight: 400; } .form-check-inline { margin-right: 1.5rem; } .form-check-inline:last-child { margin-right: 0; } /* Custom MES System Variables */ :root { /* Theme primary: one place for all primary colors (sidebar, buttons, links, focus). Overridden by theme drawer. */ --theme-primary: #4e73df; --theme-primary-dark: #2e59d9; --theme-primary-rgb: 78, 115, 223; --mes-primary: var(--theme-primary); --mes-primary-hover: var(--theme-primary-dark); --mes-secondary: #858796; --mes-success: #1cc88a; --mes-info: #36b9cc; --mes-warning: #f6c23e; --mes-danger: #e74a3b; --mes-light: #f8f9fc; --mes-dark: #5a5c69; /* Sidebar uses theme primary */ --sidebar-bg: var(--theme-primary); --sidebar-bg-dark: var(--theme-primary-dark); --sidebar-text: #fff; --sidebar-border: rgba(255, 255, 255, 0.2); --sidebar-overlay: rgba(255, 255, 255, 0.2); --sidebar-overlay-hover: rgba(255, 255, 255, 0.3); --sidebar-overlay-border: rgba(255, 255, 255, 0.4); /* App font size: change via theme drawer or JS (persisted in localStorage) */ --app-font-size: 0.875rem; } /* ===== Dark mode: set on ===== */ html[data-theme="dark"], [data-theme="dark"] { --dm-bg: #1a1d21; --dm-surface: #25282c; --dm-surface-elevated: #2d3136; --dm-border: #3d4248; --dm-text: #e4e6eb; --dm-text-muted: #b0b3b8; --dm-input-bg: #25282c; --dm-input-border: #3d4248; } html[data-theme="dark"] body, [data-theme="dark"] body { background-color: var(--dm-bg) !important; color: var(--dm-text) !important; } html[data-theme="dark"] #wrapper, html[data-theme="dark"] #wrapper #content-wrapper, [data-theme="dark"] #wrapper, [data-theme="dark"] #wrapper #content-wrapper { background-color: var(--dm-bg) !important; } html[data-theme="dark"] #wrapper #content-wrapper #content, [data-theme="dark"] #wrapper #content-wrapper #content { background-color: transparent !important; } /* Force any .bg-white / .bg-light in dark mode to use dark surface */ html[data-theme="dark"] .bg-white, html[data-theme="dark"] .bg-light, [data-theme="dark"] .bg-white, [data-theme="dark"] .bg-light { background-color: var(--dm-surface) !important; } html[data-theme="dark"] .sticky-footer.bg-white, [data-theme="dark"] .sticky-footer.bg-white { background-color: var(--dm-surface) !important; border-top: 1px solid var(--dm-border) !important; } /* Sidebar dark mode - match dark theme instead of primary gradient (html prefix for specificity) */ html[data-theme="dark"] #accordionSidebar.bg-gradient-primary, html[data-theme="dark"] .sidebar.bg-gradient-primary, [data-theme="dark"] #accordionSidebar.bg-gradient-primary, [data-theme="dark"] .sidebar.bg-gradient-primary { background-color: var(--dm-surface) !important; background-image: none !important; border-right-color: var(--dm-border) !important; border-left-color: var(--dm-border) !important; color: var(--dm-text) !important; } [dir="rtl"] [data-theme="dark"] #accordionSidebar.bg-gradient-primary, [dir="rtl"] [data-theme="dark"] .sidebar.bg-gradient-primary { border-right: none !important; border-left: 1px solid var(--dm-border) !important; } [data-theme="dark"] .sidebar .sidebar-brand, [data-theme="dark"] .sidebar .sidebar-brand .sidebar-brand-text { color: var(--dm-text) !important; border-bottom-color: var(--dm-border) !important; } [data-theme="dark"] .sidebar .sidebar-brand .sidebar-brand-icon { background: var(--dm-surface-elevated) !important; color: var(--dm-text) !important; } [data-theme="dark"] .sidebar.sidebar-dark hr.sidebar-divider { border-top-color: var(--dm-border) !important; } [data-theme="dark"] .sidebar-dark .nav-link { color: var(--dm-text-muted) !important; } [data-theme="dark"] .sidebar-dark .nav-link:hover { color: var(--dm-text) !important; } [data-theme="dark"] .sidebar-dark #sidebarToggle { background: var(--dm-surface-elevated) !important; border-color: var(--dm-border) !important; color: var(--dm-text) !important; } [data-theme="dark"] .sidebar-dark #sidebarToggle:hover { background: var(--dm-border) !important; color: var(--dm-text) !important; } html[data-theme="dark"] .sidebar .nav-item .collapse .collapse-inner, html[data-theme="dark"] .sidebar.toggled .nav-item .collapse .collapse-inner, [data-theme="dark"] .sidebar .nav-item .collapse .collapse-inner, [data-theme="dark"] .sidebar.toggled .nav-item .collapse .collapse-inner { background-color: var(--dm-surface-elevated) !important; background-image: none !important; } html[data-theme="dark"] .sidebar-dark .nav-item .collapse .collapse-inner .collapse-header, html[data-theme="dark"] .sidebar-dark .nav-item .collapse .collapse-inner .collapse-item, [data-theme="dark"] .sidebar-dark .nav-item .collapse .collapse-inner .collapse-header, [data-theme="dark"] .sidebar-dark .nav-item .collapse .collapse-inner .collapse-item { color: var(--dm-text) !important; } html[data-theme="dark"] .sidebar-dark .nav-item .collapse .collapse-inner .collapse-item:hover, html[data-theme="dark"] .sidebar-dark .nav-item .collapse .collapse-inner .collapse-item:active, [data-theme="dark"] .sidebar-dark .nav-item .collapse .collapse-inner .collapse-item:hover, [data-theme="dark"] .sidebar-dark .nav-item .collapse .collapse-inner .collapse-item:active { background-color: rgba(255, 255, 255, 0.06) !important; color: var(--dm-text) !important; } html[data-theme="dark"] .sidebar-dark .nav-item .collapse .collapse-inner .collapse-item.active, [data-theme="dark"] .sidebar-dark .nav-item .collapse .collapse-inner .collapse-item.active { color: var(--theme-primary) !important; background-color: rgba(var(--theme-primary-rgb), 0.15) !important; } /* Second level menu (nested .collapse) - dark mode */ html[data-theme="dark"] .sidebar .nav-item .collapse .collapse-inner .collapse, html[data-theme="dark"] .sidebar.toggled .nav-item .collapse .collapse-inner .collapse, [data-theme="dark"] .sidebar .nav-item .collapse .collapse-inner .collapse, [data-theme="dark"] .sidebar.toggled .nav-item .collapse .collapse-inner .collapse { background-color: var(--dm-surface-elevated) !important; background-image: none !important; border-color: var(--dm-border) !important; box-shadow: 0 0.15rem 1.75rem 0 rgba(0, 0, 0, 0.3) !important; } html[data-theme="dark"] .sidebar-dark .nav-item .collapse .collapse-inner .collapse .collapse-item, [data-theme="dark"] .sidebar-dark .nav-item .collapse .collapse-inner .collapse .collapse-item { color: var(--dm-text) !important; } html[data-theme="dark"] .sidebar-dark .nav-item .collapse .collapse-inner .collapse .collapse-item:hover, html[data-theme="dark"] .sidebar-dark .nav-item .collapse .collapse-inner .collapse .collapse-item:active, [data-theme="dark"] .sidebar-dark .nav-item .collapse .collapse-inner .collapse .collapse-item:hover, [data-theme="dark"] .sidebar-dark .nav-item .collapse .collapse-inner .collapse .collapse-item:active { background-color: rgba(255, 255, 255, 0.06) !important; color: var(--dm-text) !important; } html[data-theme="dark"] .sidebar-dark .nav-item .collapse .collapse-inner .collapse .collapse-item.active, [data-theme="dark"] .sidebar-dark .nav-item .collapse .collapse-inner .collapse .collapse-item.active { color: var(--theme-primary) !important; background-color: rgba(var(--theme-primary-rgb), 0.15) !important; } html[data-theme="dark"] .sidebar-dark .nav-item .collapse .collapse-inner .collapse .collapse-item.text-muted, [data-theme="dark"] .sidebar-dark .nav-item .collapse .collapse-inner .collapse .collapse-item.text-muted { color: var(--dm-text-muted) !important; } html[data-theme="dark"] .sidebar-dark .nav-item .collapse .collapse-inner .collapse .collapse-item small.text-muted, [data-theme="dark"] .sidebar-dark .nav-item .collapse .collapse-inner .collapse .collapse-item small.text-muted { color: var(--dm-text-muted) !important; } html[data-theme="dark"] .topbar, html[data-theme="dark"] .navbar-light.bg-white.topbar, html[data-theme="dark"] nav.navbar.navbar-expand.navbar-light.bg-white, [data-theme="dark"] .topbar, [data-theme="dark"] .navbar-light.bg-white.topbar, [data-theme="dark"] nav.navbar.navbar-expand.navbar-light.bg-white { background-color: var(--dm-surface) !important; border-color: var(--dm-border) !important; color: var(--dm-text) !important; } [data-theme="dark"] .topbar .navbar-nav .nav-link, [data-theme="dark"] .topbar .dropdown-toggle, [data-theme="dark"] .topbar .btn-link { color: var(--dm-text) !important; } [data-theme="dark"] .topbar .dropdown-menu { background-color: var(--dm-surface-elevated) !important; border-color: var(--dm-border) !important; } [data-theme="dark"] .topbar .dropdown-item { color: var(--dm-text) !important; } [data-theme="dark"] .topbar .dropdown-item:hover, [data-theme="dark"] .topbar .dropdown-item:focus { background-color: var(--dm-surface) !important; color: var(--dm-text) !important; } [data-theme="dark"] .topbar .dropdown-divider { border-color: var(--dm-border) !important; } [data-theme="dark"] .card { background-color: var(--dm-surface) !important; border-color: var(--dm-border) !important; box-shadow: none !important; } [data-theme="dark"] .card-header { background-color: var(--dm-surface-elevated) !important; border-bottom-color: var(--dm-border) !important; color: var(--dm-text) !important; } [data-theme="dark"] .card-body { color: var(--dm-text) !important; border-color: var(--dm-border) !important; } html[data-theme="dark"] .card-footer, [data-theme="dark"] .card-footer { background-color: var(--dm-surface-elevated) !important; color: var(--dm-text) !important; border-color: var(--dm-border) !important; } [data-theme="dark"] .card .text-primary, [data-theme="dark"] .card-header .text-primary { color: var(--theme-primary) !important; } [data-theme="dark"] .table, [data-theme="dark"] .table th, [data-theme="dark"] .table td { color: var(--dm-text) !important; border-color: var(--dm-border) !important; } [data-theme="dark"] .table th { background-color: var(--dm-surface-elevated) !important; } [data-theme="dark"] .table-striped tbody tr:nth-of-type(odd) { background-color: rgba(255, 255, 255, 0.03) !important; } [data-theme="dark"] .table-hover tbody tr:hover { background-color: rgba(255, 255, 255, 0.06) !important; } [data-theme="dark"] .form-control, [data-theme="dark"] .form-select, [data-theme="dark"] input.form-control, [data-theme="dark"] select.form-control, [data-theme="dark"] textarea.form-control { background-color: var(--dm-input-bg) !important; border-color: var(--dm-input-border) !important; color: var(--dm-text) !important; } [data-theme="dark"] .form-control::placeholder, [data-theme="dark"] .form-control::-webkit-input-placeholder { color: var(--dm-text-muted) !important; } [data-theme="dark"] .form-control:focus, [data-theme="dark"] .form-select:focus { background-color: var(--dm-input-bg) !important; border-color: var(--theme-primary) !important; color: var(--dm-text) !important; } [data-theme="dark"] .input-group-text { background-color: var(--dm-surface-elevated) !important; border-color: var(--dm-input-border) !important; color: var(--dm-text-muted) !important; } [data-theme="dark"] .text-muted { color: var(--dm-text-muted) !important; } [data-theme="dark"] .text-dark { color: var(--dm-text) !important; } [data-theme="dark"] h1, [data-theme="dark"] h2, [data-theme="dark"] h3, [data-theme="dark"] h4, [data-theme="dark"] h5, [data-theme="dark"] h6 { color: var(--dm-text) !important; } /* Login / Account pages (EmptyLayout) - sb-admin-2 text-gray-* utilities */ [data-theme="dark"] .text-gray-100, [data-theme="dark"] .text-gray-200, [data-theme="dark"] .text-gray-300, [data-theme="dark"] .text-gray-400, [data-theme="dark"] .text-gray-500, [data-theme="dark"] .text-gray-600, [data-theme="dark"] .text-gray-700, [data-theme="dark"] .text-gray-800, [data-theme="dark"] .text-gray-900 { color: var(--dm-text) !important; } [data-theme="dark"] .text-gray-400, [data-theme="dark"] .text-gray-500 { color: var(--dm-text-muted) !important; } [data-theme="dark"] body.login-page-reset { background-color: var(--dm-bg) !important; color: var(--dm-text) !important; } [data-theme="dark"] .login-page-reset .container { background-color: transparent !important; } [data-theme="dark"] .bg-login-image { background: var(--dm-surface-elevated) !important; background-image: none !important; } [data-theme="dark"] .form-control-plaintext.bg-light { background-color: var(--dm-surface-elevated) !important; color: var(--dm-text) !important; } [data-theme="dark"] .alert { border-color: var(--dm-border) !important; } [data-theme="dark"] .alert-danger { background-color: rgba(231, 74, 59, 0.15) !important; color: #f8b4b4 !important; } [data-theme="dark"] .alert-success { background-color: rgba(28, 200, 138, 0.15) !important; color: #7ddfc3 !important; } [data-theme="dark"] .alert-warning { background-color: rgba(246, 194, 62, 0.15) !important; color: #f5d88c !important; } [data-theme="dark"] .alert-info { background-color: rgba(54, 185, 204, 0.15) !important; color: #7dd5e0 !important; } [data-theme="dark"] .modal-content { background-color: var(--dm-surface) !important; border-color: var(--dm-border) !important; color: var(--dm-text) !important; } [data-theme="dark"] .modal-header { border-bottom-color: var(--dm-border) !important; } [data-theme="dark"] .modal-footer { border-top-color: var(--dm-border) !important; } html[data-theme="dark"] .drawer, [data-theme="dark"] .drawer { background-color: var(--dm-surface) !important; color: var(--dm-text) !important; } [data-theme="dark"] .drawer-content, [data-theme="dark"] .drawer-form-container { background-color: var(--dm-surface) !important; color: var(--dm-text) !important; } html[data-theme="dark"] .drawer-body, [data-theme="dark"] .drawer-body { background-color: var(--dm-surface) !important; color: var(--dm-text) !important; } html[data-theme="dark"] .drawer-form-content, [data-theme="dark"] .drawer-form-content { background-color: var(--dm-surface) !important; color: var(--dm-text) !important; } [data-theme="dark"] .drawer-header { background-color: var(--dm-surface-elevated) !important; border-bottom-color: var(--dm-border) !important; color: var(--dm-text) !important; } html[data-theme="dark"] .drawer-form-footer, [data-theme="dark"] .drawer-form-footer { background-color: var(--dm-surface-elevated) !important; border-top-color: var(--dm-border) !important; color: var(--dm-text) !important; box-shadow: 0 -2px 4px rgba(0, 0, 0, 0.3) !important; } html[data-theme="dark"] .drawer-form-container .form-label, [data-theme="dark"] .drawer-form-container .form-label { color: var(--dm-text) !important; } [data-theme="dark"] .list-group-item { background-color: var(--dm-surface) !important; border-color: var(--dm-border) !important; color: var(--dm-text) !important; } [data-theme="dark"] ::-webkit-scrollbar-track { background: var(--dm-surface) !important; } [data-theme="dark"] ::-webkit-scrollbar-thumb { background: var(--dm-border) !important; } [data-theme="dark"] ::-webkit-scrollbar-thumb:hover { background: var(--dm-text-muted) !important; } /* Select2 dark mode */ [data-theme="dark"] .select2-container--bootstrap-5 .select2-selection { background-color: var(--dm-input-bg) !important; border-color: var(--dm-input-border) !important; color: var(--dm-text) !important; } [data-theme="dark"] .select2-container--bootstrap-5 .select2-selection--single .select2-selection__rendered { color: var(--dm-text) !important; } [data-theme="dark"] .select2-container--bootstrap-5 .select2-dropdown { background-color: var(--dm-surface-elevated) !important; border-color: var(--dm-border) !important; } [data-theme="dark"] .select2-container--bootstrap-5 .select2-dropdown .select2-results__option { background-color: transparent !important; color: var(--dm-text) !important; } [data-theme="dark"] .select2-container--bootstrap-5 .select2-dropdown .select2-results__option--highlighted { background-color: rgba(var(--theme-primary-rgb), 0.25) !important; color: var(--dm-text) !important; } [data-theme="dark"] .select2-container--bootstrap-5 .select2-dropdown .select2-search .select2-search__field { background-color: var(--dm-input-bg) !important; border-color: var(--dm-input-border) !important; color: var(--dm-text) !important; } [data-theme="dark"] .select2-container--bootstrap-5 .select2-selection--multiple .select2-selection__rendered .select2-selection__choice { background-color: var(--dm-surface-elevated) !important; border-color: var(--dm-border) !important; color: var(--dm-text) !important; } /* DataTables dark mode */ [data-theme="dark"] .dataTables_wrapper, [data-theme="dark"] .dataTables_filter input { color: var(--dm-text) !important; } [data-theme="dark"] .dataTables_filter input { background-color: var(--dm-input-bg) !important; border-color: var(--dm-input-border) !important; } [data-theme="dark"] .dataTables_info { color: var(--dm-text-muted) !important; } [data-theme="dark"] .page-link { background-color: var(--dm-surface) !important; border-color: var(--dm-border) !important; color: var(--dm-text) !important; } [data-theme="dark"] .page-link:hover { background-color: var(--dm-surface-elevated) !important; border-color: var(--dm-border) !important; color: var(--dm-text) !important; } [data-theme="dark"] .page-item.disabled .page-link { background-color: var(--dm-surface) !important; color: var(--dm-text-muted) !important; } /* Example: change sidebar to one color (e.g. green) — uncomment and edit in :root or in your own CSS: :root { --sidebar-bg: #1cc88a; --sidebar-bg-dark: #17a673; } For a solid (no gradient) sidebar, use the same value for both: --sidebar-bg: #1cc88a; --sidebar-bg-dark: #1cc88a; */ /* Apply app font size to body (theme drawer can override via --app-font-size) */ html { font-size: 16px; } body { font-size: var(--app-font-size); } /* Theme font size and text on inputs so theme drawer applies to form controls */ .form-control, .form-select, input.form-control, select.form-control, textarea.form-control { font-size: var(--app-font-size); } .form-control::placeholder, .form-control::-webkit-input-placeholder, .form-control::-moz-placeholder { font-size: var(--app-font-size); } /* Bootstrap primary overrides — use theme color everywhere */ .btn-primary, .btn-primary.disabled, .btn-primary:disabled { color: #fff !important; background-color: var(--theme-primary) !important; border-color: var(--theme-primary) !important; } .btn-primary:hover, .btn-primary:focus, .btn-primary.focus { color: #fff !important; background-color: var(--theme-primary-dark) !important; border-color: var(--theme-primary-dark) !important; box-shadow: 0 0 0 0.2rem rgba(var(--theme-primary-rgb), 0.5) !important; } .btn-primary:not(:disabled):not(.disabled):active, .btn-primary:not(:disabled):not(.disabled).active, .show > .btn-primary.dropdown-toggle { color: #fff !important; background-color: var(--theme-primary-dark) !important; border-color: var(--theme-primary-dark) !important; } .btn-outline-primary, .btn-outline-primary.disabled, .btn-outline-primary:disabled { color: var(--theme-primary) !important; border-color: var(--theme-primary) !important; background-color: transparent !important; } .btn-outline-primary:hover, .btn-outline-primary:focus, .btn-outline-primary.focus { color: #fff !important; background-color: var(--theme-primary) !important; border-color: var(--theme-primary) !important; box-shadow: 0 0 0 0.2rem rgba(var(--theme-primary-rgb), 0.5) !important; } .btn-outline-primary:not(:disabled):not(.disabled):active, .btn-outline-primary:not(:disabled):not(.disabled).active, .show > .btn-outline-primary.dropdown-toggle { color: #fff !important; background-color: var(--theme-primary-dark) !important; border-color: var(--theme-primary-dark) !important; } .btn-outline-primary:not(:disabled):not(.disabled):active:focus, .btn-outline-primary:not(:disabled):not(.disabled).active:focus, .show > .btn-outline-primary.dropdown-toggle:focus { box-shadow: 0 0 0 0.2rem rgba(var(--theme-primary-rgb), 0.5) !important; } .bg-primary { background-color: var(--theme-primary) !important; } a.bg-primary:hover, button.bg-primary:hover { background-color: var(--theme-primary-dark) !important; } .text-primary { color: var(--theme-primary) !important; } a.text-primary:hover, a.text-primary:focus { color: var(--theme-primary-dark) !important; } .border-primary { border-color: var(--theme-primary) !important; } a { color: var(--theme-primary); } a:hover { color: var(--theme-primary-dark); } .form-control:focus, .form-select:focus { border-color: var(--theme-primary); box-shadow: 0 0 0 0.2rem rgba(var(--theme-primary-rgb), 0.25); } .page-link { color: var(--theme-primary); } .page-link:hover { color: var(--theme-primary-dark); } .page-item.active .page-link { background-color: var(--theme-primary); border-color: var(--theme-primary); } /* Custom Button Styles */ .btn-google { color: white; background-color: #ea4335; border-color: #ea4335; } .btn-google:hover { color: white; background-color: #d33b2c; border-color: #c23321; } .btn-facebook { color: white; background-color: #3b5998; border-color: #3b5998; } .btn-facebook:hover { color: white; background-color: #2d4373; border-color: #2a3e5f; } /* Form Control User Styles */ .form-control-user { font-size: 0.8rem; border-radius: 10rem; padding: 0.75rem 1rem; width: 100%; display: block; } /* Form Control User Select Override - Select elements should not be rounded */ select.form-control-user { border-radius: 0.375rem !important; padding: 0.375rem 0.75rem !important; font-size: 0.875rem !important; background-color: #fff !important; border: 1px solid #d1d3e2 !important; appearance: auto !important; -webkit-appearance: menulist !important; -moz-appearance: menulist !important; } /* Custom switch/checkbox - use theme primary */ .custom-control-input:checked ~ .custom-control-label::before { color: #fff; border-color: var(--theme-primary); background-color: var(--theme-primary); } /* Enhanced Checkbox Styles - Modern Design with Border and White Background */ .form-check-input[type="checkbox"] { width: 1.25rem !important; height: 1.25rem !important; margin-top: 0.25rem !important; border: 2px solid #5a5c69 !important; border-radius: 0.25rem !important; background-color: #fff !important; cursor: pointer !important; transition: all 0.2s ease-in-out !important; position: relative !important; flex-shrink: 0 !important; appearance: none !important; -webkit-appearance: none !important; -moz-appearance: none !important; } .form-check-input[type="checkbox"]:hover { border-color: var(--theme-primary) !important; background-color: #fff !important; box-shadow: 0 0 0 0.125rem rgba(var(--theme-primary-rgb), 0.1) !important; } .form-check-input[type="checkbox"]:focus { border-color: var(--theme-primary) !important; background-color: #fff !important; box-shadow: 0 0 0 0.25rem rgba(var(--theme-primary-rgb), 0.25) !important; outline: none !important; } .form-check-input[type="checkbox"]:checked { background-color: var(--theme-primary) !important; border-color: var(--theme-primary) !important; background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3e%3cpath fill='none' stroke='%23fff' stroke-linecap='round' stroke-linejoin='round' stroke-width='3' d='M6 10l3 3l6-6'/%3e%3c/svg%3e") !important; background-size: 100% 100% !important; background-position: center !important; background-repeat: no-repeat !important; } .form-check-input[type="checkbox"]:checked:hover { background-color: var(--theme-primary-dark) !important; border-color: var(--theme-primary-dark) !important; box-shadow: 0 0 0 0.125rem rgba(var(--theme-primary-rgb), 0.2) !important; } .form-check-input[type="checkbox"]:indeterminate { background-color: var(--theme-primary) !important; border-color: var(--theme-primary) !important; background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3e%3cpath fill='none' stroke='%23fff' stroke-linecap='round' stroke-linejoin='round' stroke-width='3' d='M6 10h8'/%3e%3c/svg%3e") !important; background-size: 100% 100% !important; background-position: center !important; background-repeat: no-repeat !important; } .form-check-input[type="checkbox"]:disabled, .form-check-input[type="radio"]:disabled { opacity: 0.5 !important; cursor: not-allowed !important; background-color: #e9ecef !important; } .form-check-label { cursor: pointer !important; margin-left: 0.5rem !important; user-select: none !important; font-weight: 500 !important; color: #5a5c69 !important; } .form-check { display: flex !important; align-items: center !important; min-height: 1.5rem !important; padding-left: 0 !important; } .form-check-inline { display: inline-flex !important; align-items: center !important; margin-right: 1rem !important; margin-bottom: 0.5rem !important; } /* Card Enhancements */ .card { border: none; border-radius: 0.35rem; box-shadow: 0 0.15rem 1.75rem 0 rgba(58, 59, 69, 0.15); } .card-header { background-color: #f8f9fc; border-bottom: 1px solid #e3e6f0; } /* Table Enhancements */ .table th { border-top: none; font-weight: 600; text-transform: uppercase; font-size: 0.85rem; color: #5a5c69; } /* Badge Enhancements */ .badge { font-size: 0.75em; font-weight: 600; padding: 0.35em 0.65em; } /* Button Group Enhancements */ .btn-group-sm > .btn, .btn-sm { padding: 0.25rem 0.5rem; font-size: 0.875rem; line-height: 1.5; border-radius: 0.2rem; } /* Progress Bar Enhancements */ .progress { height: 0.5rem; border-radius: 0.35rem; } .progress-bar { border-radius: 0.35rem; } /* Alert Enhancements */ .alert { border: none; border-radius: 0.35rem; } /* Modal Enhancements */ .modal-content { border: none; border-radius: 0.35rem; box-shadow: 0 0.15rem 1.75rem 0 rgba(58, 59, 69, 0.15); } /* Custom Scrollbar */ ::-webkit-scrollbar { width: 8px; } ::-webkit-scrollbar-track { background: #f1f1f1; } ::-webkit-scrollbar-thumb { background: #c1c1c1; border-radius: 4px; } ::-webkit-scrollbar-thumb:hover { background: #a8a8a8; } /* RTL Support */ [dir="rtl"] .text-left { text-align: right !important; } [dir="rtl"] .text-right { text-align: left !important; } [dir="rtl"] .ml-2 { margin-left: 0 !important; margin-right: 0.5rem !important; } [dir="rtl"] .mr-2 { margin-right: 0 !important; margin-left: 0.5rem !important; } /* Custom MES System Styles */ .mes-primary { color: var(--mes-primary) !important; } .mes-bg-primary { background-color: var(--mes-primary) !important; } .mes-border-primary { border-color: var(--mes-primary) !important; } /* Loading Spinner */ .spinner-border-sm { width: 1rem; height: 1rem; } /* Custom Animations */ @keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } } .fade-in { animation: fadeIn 0.3s ease-in-out; } /* DataTable Customizations */ .dataTables_wrapper .dataTables_length, .dataTables_wrapper .dataTables_filter, .dataTables_wrapper .dataTables_info, .dataTables_wrapper .dataTables_processing, .dataTables_wrapper .dataTables_paginate { color: #5a5c69; } /* DataTable Action Buttons */ .dataTables_wrapper .d-flex.gap-1 { gap: 0.25rem !important; } .dataTables_wrapper .d-flex.gap-1 .btn { min-width: 32px; height: 32px; display: inline-flex; align-items: center; justify-content: center; padding: 0.25rem 0.5rem; font-size: 0.875rem; border-radius: 0.25rem; transition: all 0.15s ease-in-out; } .dataTables_wrapper .d-flex.gap-1 .btn:hover { transform: translateY(-1px); box-shadow: 0 2px 4px rgba(0,0,0,0.1); } .dataTables_wrapper .d-flex.gap-1 .btn i { font-size: 0.875rem; } /* DataTable Header Buttons */ .card-header .d-flex.gap-2 { gap: 0.5rem !important; } .card-header .d-flex.gap-2 .btn { min-width: auto; white-space: nowrap; display: inline-flex; align-items: center; gap: 0.25rem; } .card-header .d-flex.gap-2 .btn i { font-size: 0.875rem; } /* Responsive button text */ @media (max-width: 768px) { .card-header .d-flex.gap-2 .btn .d-none.d-md-inline { display: none !important; } .card-header .d-flex.gap-2 .btn { padding: 0.375rem 0.75rem; } } /* SB Admin 2 Button Styles */ .btn-circle { border-radius: 100%; height: 2.5rem; width: 2.5rem; font-size: 1rem; display: inline-flex; align-items: center; justify-content: center; } /* Action buttons container - better spacing for circle buttons */ .d-flex.gap-1 { gap: 0.25rem !important; } .d-flex.gap-1 .btn-circle { margin-right: 0.25rem; } .d-flex.gap-1 .btn-circle:last-child { margin-right: 0; } /* Button group with circle buttons */ .btn-group .btn-circle { border-radius: 50% !important; margin: 0 2px; } .btn-group .btn-circle:first-child { margin-left: 0; } .btn-group .btn-circle:last-child { margin-right: 0; } /* Ensure buttons are clickable */ .btn-group .btn-circle { position: relative; z-index: 1; } .btn-group .btn-circle:hover { z-index: 2; } /* Form alignment improvements */ .form-group { margin-bottom: 1rem; } .form-label { font-weight: 600; color: #5a5c69; margin-bottom: 0.5rem; } /* Bootstrap validation classes for unobtrusive validation - only invalid styling */ .form-control.is-invalid { border-color: #dc3545; padding-right: calc(1.5em + 0.75rem); background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12' width='12' height='12' fill='none' stroke='%23dc3545'%3e%3ccircle cx='6' cy='6' r='4.5'/%3e%3cpath d='m5.8 4.6 1.4 1.4 1.4-1.4'/%3e%3c/svg%3e"); background-repeat: no-repeat; background-position: right calc(0.375em + 0.1875rem) center; background-size: calc(0.75em + 0.375rem) calc(0.75em + 0.375rem); } .form-control.is-invalid:focus { border-color: #dc3545; box-shadow: 0 0 0 0.25rem rgba(220, 53, 69, 0.25); } /* Validation feedback styling - only invalid feedback */ .invalid-feedback { display: none; width: 100%; margin-top: 0.25rem; font-size: 0.875em; color: #dc3545; } .form-control.is-invalid ~ .invalid-feedback { display: block; } /* Select element validation styling */ select.form-control.is-invalid { border-color: #dc3545; padding-right: calc(1.5em + 0.75rem); background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12' width='12' height='12' fill='none' stroke='%23dc3545'%3e%3ccircle cx='6' cy='6' r='4.5'/%3e%3cpath d='m5.8 4.6 1.4 1.4 1.4-1.4'/%3e%3c/svg%3e"); background-repeat: no-repeat; background-position: right calc(0.375em + 0.1875rem) center; background-size: calc(0.75em + 0.375rem) calc(0.75em + 0.375rem); } select.form-control.is-invalid:focus { border-color: #dc3545; box-shadow: 0 0 0 0.25rem rgba(220, 53, 69, 0.25); } /* Form control user validation styling */ .form-control-user.is-invalid { border-color: #dc3545; padding-right: calc(1.5em + 0.75rem); background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12' width='12' height='12' fill='none' stroke='%23dc3545'%3e%3ccircle cx='6' cy='6' r='4.5'/%3e%3cpath d='m5.8 4.6 1.4 1.4 1.4-1.4'/%3e%3c/svg%3e"); background-repeat: no-repeat; background-position: right calc(0.375em + 0.1875rem) center; background-size: calc(0.75em + 0.375rem) calc(0.75em + 0.375rem); } .form-control-user.is-invalid:focus { border-color: #dc3545; box-shadow: 0 0 0 0.25rem rgba(220, 53, 69, 0.25); } /* Select form control user validation styling - override dropdown arrow */ select.form-control-user.is-invalid { border-color: #dc3545 !important; box-shadow: 0 0 0 0.2rem rgba(220, 53, 69, 0.25) !important; } select.form-control-user.is-invalid:focus { border-color: #dc3545 !important; box-shadow: 0 0 0 0.25rem rgba(220, 53, 69, 0.25) !important; } .btn-circle.btn-sm { height: 2rem; width: 2rem; font-size: 0.875rem; } .btn-circle.btn-lg { height: 3.5rem; width: 3.5rem; font-size: 1.25rem; } .btn-icon-split { padding: 0; overflow: hidden; display: inline-flex; align-items: stretch; justify-content: center; } .btn-icon-split .icon { background: rgba(0, 0, 0, 0.15); /*display: inline-flex;*/ align-items: center; padding: 0.375rem 0.75rem; } .btn-icon-split .text { display: inline-flex; align-items: center; padding: 0.375rem 0.75rem; } .btn-icon-split.btn-sm .icon, .btn-icon-split.btn-sm .text { padding: 0.25rem 0.5rem; font-size: 0.875rem; } .btn-icon-split.btn-lg .icon, .btn-icon-split.btn-lg .text { padding: 0.5rem 1rem; font-size: 1.25rem; } /* Admin Fill Button Styles */ .admin-credentials-container { margin: 15px 0; text-align: center; } .admin-fill-btn { background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); color: white; border: none; padding: 12px 24px; border-radius: 25px; font-size: 14px; font-weight: 600; cursor: pointer; transition: all 0.3s ease; display: inline-flex; align-items: center; gap: 8px; box-shadow: 0 4px 15px rgba(102, 126, 234, 0.3); position: relative; overflow: hidden; } .admin-fill-btn:hover { transform: translateY(-2px); box-shadow: 0 6px 20px rgba(102, 126, 234, 0.4); background: linear-gradient(135deg, #5a6fd8 0%, #6a4190 100%); } .admin-fill-btn:active { transform: translateY(0); box-shadow: 0 2px 10px rgba(102, 126, 234, 0.3); } .admin-fill-btn.filled { background: linear-gradient(135deg, #1cc88a 0%, #17a673 100%); box-shadow: 0 4px 15px rgba(28, 200, 138, 0.3); } .admin-fill-btn i { font-size: 16px; } .admin-fill-btn span { font-family: 'Nunito', sans-serif; } /* Password Strength Indicator Styles */ .password-strength-container { margin-top: 0.5rem; padding: 0.75rem; background: #f8f9fa; border-radius: 0.375rem; border: 1px solid #e9ecef; } .password-strength-bar { width: 100%; height: 6px; background-color: #e9ecef; border-radius: 3px; overflow: hidden; margin-bottom: 0.5rem; } .strength-progress { height: 100%; border-radius: 3px; transition: all 0.3s ease; box-shadow: 0 1px 3px rgba(0,0,0,0.1); } .strength-text { display: flex; align-items: center; gap: 0.5rem; font-size: 0.875rem; } .strength-text i { font-size: 1rem; } .strength-text span { font-size: 0.875rem; text-transform: uppercase; letter-spacing: 0.5px; } /* ===== Sidebar: Widget-aligned design — use :root or #accordionSidebar vars to change color ===== */ #accordionSidebar.bg-gradient-primary { background-color: var(--sidebar-bg); background-image: linear-gradient(135deg, var(--sidebar-bg) 0%, var(--sidebar-bg-dark) 100%); background-size: cover; border-right: 1px solid var(--sidebar-border); color: var(--sidebar-text); } [dir="rtl"] #accordionSidebar.bg-gradient-primary { border-right: none; border-left: 1px solid var(--sidebar-border); } /* Dark mode sidebar override (after main sidebar so it wins) */ html[data-theme="dark"] #accordionSidebar.bg-gradient-primary { background-color: var(--dm-surface) !important; background-image: none !important; border-right-color: var(--dm-border) !important; border-left-color: var(--dm-border) !important; color: var(--dm-text) !important; } [dir="rtl"] html[data-theme="dark"] #accordionSidebar.bg-gradient-primary { border-right: none !important; border-left: 1px solid var(--dm-border) !important; } /* Sidebar brand: widget header style (icon + title + subtitle) */ .sidebar .sidebar-brand { padding: 0.5rem 0.75rem; min-height: 44px; border-bottom: 1px solid var(--sidebar-border); justify-content: flex-start; gap: 0.75rem; color: var(--sidebar-text); } .sidebar .sidebar-brand .sidebar-brand-icon { width: 32px; height: 32px; min-width: 32px; min-height: 32px; border-radius: 0.2rem; background: var(--sidebar-overlay); color: var(--sidebar-text); display: flex; align-items: center; justify-content: center; flex-shrink: 0; } .sidebar .sidebar-brand .sidebar-brand-icon i { font-size: 1rem; } .sidebar .sidebar-brand .sidebar-brand-text { min-width: 0; text-align: left; font-weight: 700; font-size: 0.875rem; line-height: 1.3; letter-spacing: -0.01em; color: var(--sidebar-text); } .sidebar .sidebar-brand .sidebar-brand-text sup { font-size: 0.65rem; opacity: 0.92; } [dir="rtl"] .sidebar .sidebar-brand { justify-content: flex-start; } [dir="rtl"] .sidebar .sidebar-brand .sidebar-brand-text { text-align: right; } /* Sidebar divider: same border color */ .sidebar.sidebar-dark hr.sidebar-divider { border-top: 1px solid var(--sidebar-border); } /* Sidebar toggler: same overlay colors */ .sidebar-dark #sidebarToggle { background: var(--sidebar-overlay); border: 1px solid var(--sidebar-overlay-border); color: var(--sidebar-text); border-radius: 0.2rem; } .sidebar-dark #sidebarToggle:hover { background: var(--sidebar-overlay-hover); border-color: var(--sidebar-overlay-hover); color: var(--sidebar-text); } /* Collapse Menu Enhancements */ .sidebar .nav-item .collapse .collapse-inner .collapse-header { margin: 0; white-space: nowrap; padding: 0.75rem 1.5rem 0.5rem 1.5rem; text-transform: uppercase; font-weight: 800; font-size: 0.65rem; color: #b7b9cc; border-bottom: 1px solid rgba(255, 255, 255, 0.1); margin-bottom: 0.25rem; } .sidebar .nav-item .collapse .collapse-inner .collapse-item { /* padding: 0.75rem 1rem;*/ margin: 0 0.5rem 0.25rem 0.5rem; display: block; color: rgba(255, 255, 255, 0.8); text-decoration: none; border-radius: 0.35rem; white-space: nowrap; transition: all 0.2s ease; position: relative; } .sidebar .nav-item .collapse .collapse-inner .collapse-item:first-child { margin-top: 0.5rem; } .sidebar .nav-item .collapse .collapse-inner .collapse-item:last-child { margin-bottom: 0.5rem; } .sidebar .nav-item .collapse .collapse-inner .collapse-item:hover { background-color: #eaecf4; color: var(--theme-primary-dark); transform: translateX(2px); } .sidebar .nav-item .collapse .collapse-inner .collapse-item:active { background-color: #dddfeb; color: var(--theme-primary-dark); } .sidebar .nav-item .collapse .collapse-inner .collapse-item.active { color: var(--theme-primary); font-weight: 700; background-color: rgba(var(--theme-primary-rgb), 0.1); border-left: 3px solid var(--theme-primary); padding-left: calc(1rem - 3px); } .sidebar .nav-item .collapse .collapse-inner .collapse-item.active:before { content: ''; position: absolute; left: 0; top: 50%; transform: translateY(-50%); width: 3px; height: 60%; border-radius: 0 2px 2px 0; } /* Dark theme adjustments for collapse items */ .sidebar-dark .nav-item .collapse .collapse-inner .collapse-header { color: rgba(255, 255, 255, 0.6); border-bottom-color: rgba(255, 255, 255, 0.1); } .sidebar-dark .nav-item .collapse .collapse-inner .collapse-item { color: rgba(255, 255, 255, 0.8); } .sidebar-dark .nav-item .collapse .collapse-inner .collapse-item:hover { background-color: rgba(255, 255, 255, 0.1); color: #fff; } .sidebar-dark .nav-item .collapse .collapse-inner .collapse-item:active { background-color: rgba(255, 255, 255, 0.15); color: #fff; } .sidebar-dark .nav-item .collapse .collapse-inner .collapse-item.active { color: #fff; background-color: rgba(255, 255, 255, 0.15); border-left-color: #fff; } /* Improved collapse inner spacing (same background as sidebar) */ .sidebar .nav-item .collapse .collapse-inner { padding: 0.5rem 0; min-width: 10rem; font-size: 0.85rem; margin: 0 0 1rem 0; /*background-color: var(--sidebar-bg);*/ } /* RTL Support for collapse elements */ [dir="rtl"] .sidebar .nav-item .collapse .collapse-inner .collapse-item.active { border-left: none; border-right: 3px solid var(--theme-primary); padding-right: calc(1rem - 3px); padding-left: 1rem; } [dir="rtl"] .sidebar .nav-item .collapse .collapse-inner .collapse-item.active:before { left: auto; right: 0; border-radius: 2px 0 0 2px; } [dir="rtl"] .sidebar .nav-item .collapse .collapse-inner .collapse-item:hover { transform: translateX(-2px); } /* Bootstrap Icons Support */ .sidebar .nav-item .nav-link i, .sidebar .nav-item .collapse .collapse-inner .collapse-item i { font-size: 0.85rem; margin-right: 0.5rem; width: 1rem; text-align: center; display: inline-block; } .sidebar .nav-item .collapse .collapse-inner .collapse-header i { font-size: 0.75rem; margin-right: 0.25rem; } /* Sidebar parent menu items margin */ .sidebar .nav-item .nav-link { margin-left: 0px; margin-right: 0px; } /* Hide default CSS ::after icon for level 1 nav-link and use chevron icon instead */ .sidebar .nav-item .nav-link[data-bs-toggle="collapse"]::after { display: none !important; } /* Level 1 nav-link chevron icon styling */ .sidebar .nav-item .nav-link[data-bs-toggle="collapse"] .fa-chevron-right { transition: transform 0.2s ease; float: right; margin-top: 0.25rem; } .sidebar .nav-item .nav-link[data-bs-toggle="collapse"]:not(.collapsed) .fa-chevron-right { transform: rotate(90deg); } /* Nested collapse support for 3-level sidebar */ .sidebar .nav-item .collapse .collapse-inner .collapse-item[data-bs-toggle="collapse"] { cursor: pointer; position: relative; } .sidebar .nav-item .collapse .collapse-inner .collapse-item[data-bs-toggle="collapse"] .fa-chevron-right { transition: transform 0.2s ease; float: right; margin-top: 0.25rem; } .sidebar .nav-item .collapse .collapse-inner .collapse-item[data-bs-toggle="collapse"]:not(.collapsed) .fa-chevron-right { transform: rotate(90deg); } /* Nested collapse items (level 3) */ .sidebar .nav-item .collapse .collapse-inner .collapse .collapse-item { /* padding-left: 2rem;*/ font-size: 0.8rem; } /* Ensure nested collapses don't break layout */ .sidebar .nav-item .collapse .collapse-inner .collapse { margin: 0; padding: 0; } .sidebar .nav-item .collapse .collapse-inner .collapse.show { display: block; } /* Sidebar toggled state styles */ .sidebar.toggled .nav-item .nav-link { margin-left: 0px; margin-right: 0px; text-align: center; } /* Hide chevron icons when sidebar is toggled */ .sidebar.toggled .nav-item .nav-link[data-bs-toggle="collapse"] .fa-chevron-right { display: none; } .sidebar.toggled .nav-item .collapse .collapse-inner .collapse-item[data-bs-toggle="collapse"] .fa-chevron-right { display: none; } /* Ensure nested collapses work properly when toggled */ .sidebar.toggled .nav-item .collapse .collapse-inner .collapse-item { margin-left: 0px; margin-right: 0px; } /* Match sidebar gradient for toggled collapse-inner (same color as sidebar) */ .sidebar.toggled .nav-item .collapse .collapse-inner { background-color: var(--sidebar-bg); background-image: linear-gradient(135deg, var(--sidebar-bg) 0%, var(--sidebar-bg-dark) 100%); background-size: cover; } /* Level 2 nested collapse - same color as sidebar when toggled */ .sidebar.toggled .nav-item .collapse .collapse-inner .collapse { background-color: var(--sidebar-bg); box-shadow: 0 0.15rem 1.75rem 0 rgba(58, 59, 69, 0.15); border-radius: 0.35rem; padding: 0.5rem 0; min-width: 10rem; position: absolute; left: calc(100% + 0.75rem); top: 0; z-index: 2; -webkit-animation-name: growIn; animation-name: growIn; -webkit-animation-duration: 200ms; animation-duration: 200ms; -webkit-animation-timing-function: transform cubic-bezier(0.18, 1.25, 0.4, 1), opacity cubic-bezier(0, 1, 0.4, 1); animation-timing-function: transform cubic-bezier(0.18, 1.25, 0.4, 1), opacity cubic-bezier(0, 1, 0.4, 1); } /* Ensure parent collapse-inner has relative positioning for nested collapse */ .sidebar.toggled .nav-item .collapse .collapse-inner { position: relative; } /* Ensure Bootstrap Icons are properly sized in buttons */ .btn i { font-size: inherit; } .btn-icon-split .icon i { font-size: 0.875rem; } /* ============================================ Z-INDEX HIERARCHY - No Conflicts ============================================ 1-1000: Base content 1050: Global drawer overlay 1051: Global drawer 1070: Nested drawer overlay 1071: Nested drawer 1080-1090: Toast notifications (toastr) 1091-1092: Select2 in global drawer 1093-1094: Select2 in nested drawer 1100: Swal overlay 1101: Swal popup ============================================ */ /* Toast Notifications - Above drawers but below Swal */ #toast-container { z-index: 1080 !important; } #toast-container.toast-top-right, #toast-container.toast-top-left, #toast-container.toast-top-center, #toast-container.toast-top-full-width { z-index: 1080 !important; } #toast-container.toast-bottom-right, #toast-container.toast-bottom-left, #toast-container.toast-bottom-center, #toast-container.toast-bottom-full-width { z-index: 1080 !important; } .toast { z-index: 1081 !important; } /* SweetAlert2 - Highest priority, always on top */ .swal2-container { z-index: 1100 !important; } .swal2-popup { z-index: 1101 !important; border-radius: 1rem !important; box-shadow: 0 1rem 3rem rgba(0, 0, 0, 0.175) !important; border: none !important; padding: 2rem !important; font-family: 'Nunito', sans-serif !important; } .swal2-title { font-size: 1.5rem !important; font-weight: 700 !important; color: #5a5c69 !important; margin-bottom: 1rem !important; line-height: 1.4 !important; } .swal2-html-container { font-size: 1rem !important; color: #858796 !important; line-height: 1.6 !important; margin-top: 0.5rem !important; padding: 0 0.5rem !important; } .swal2-icon { width: 5rem !important; height: 5rem !important; margin: 1.5rem auto 1rem !important; border-width: 4px !important; } .swal2-icon.swal2-success { border-color: var(--mes-success) !important; color: var(--mes-success) !important; } .swal2-icon.swal2-error { border-color: var(--mes-danger) !important; color: var(--mes-danger) !important; } .swal2-icon.swal2-warning { border-color: var(--mes-warning) !important; color: var(--mes-warning) !important; } .swal2-icon.swal2-info { border-color: var(--mes-info) !important; color: var(--mes-info) !important; } .swal2-icon.swal2-question { border-color: var(--mes-primary) !important; color: var(--mes-primary) !important; } .swal2-icon-content { font-size: 3rem !important; font-weight: 700 !important; } .swal2-actions { margin-top: 1.5rem !important; gap: 0.5rem !important; } .swal2-confirm, .swal2-cancel { border-radius: 0.5rem !important; padding: 0.625rem 1.5rem !important; font-size: 0.875rem !important; font-weight: 600 !important; transition: all 0.3s ease !important; border: none !important; box-shadow: 0 0.125rem 0.25rem rgba(0, 0, 0, 0.075) !important; } .swal2-confirm { background: linear-gradient(135deg, var(--mes-primary) 0%, var(--mes-primary-hover) 100%) !important; color: white !important; } .swal2-confirm:hover { transform: translateY(-2px) !important; box-shadow: 0 0.5rem 1rem rgba(var(--theme-primary-rgb), 0.3) !important; background: linear-gradient(135deg, var(--mes-primary-hover) 0%, var(--theme-primary-dark) 100%) !important; } .swal2-confirm:focus { box-shadow: 0 0 0 0.25rem rgba(var(--theme-primary-rgb), 0.25) !important; } .swal2-cancel { background: linear-gradient(135deg, var(--mes-secondary) 0%, #666877 100%) !important; color: white !important; } .swal2-cancel:hover { transform: translateY(-2px) !important; box-shadow: 0 0.5rem 1rem rgba(133, 135, 150, 0.3) !important; background: linear-gradient(135deg, #666877 0%, #5a5c69 100%) !important; } .swal2-cancel:focus { box-shadow: 0 0 0 0.25rem rgba(133, 135, 150, 0.25) !important; } /* Loading spinner styling */ .swal2-loader { width: 3.5rem !important; height: 3.5rem !important; border-width: 4px !important; border-color: var(--mes-primary) !important; border-right-color: transparent !important; } /* Input styling in SweetAlert */ .swal2-input, .swal2-textarea, .swal2-file { border-radius: 0.5rem !important; border: 1px solid #d1d3e2 !important; padding: 0.625rem 0.875rem !important; font-size: 0.875rem !important; transition: all 0.3s ease !important; } .swal2-input:focus, .swal2-textarea:focus, .swal2-file:focus { border-color: var(--mes-primary) !important; box-shadow: 0 0 0 0.25rem rgba(var(--theme-primary-rgb), 0.25) !important; outline: none !important; } .swal2-validation-message { background: #f8d7da !important; color: #721c24 !important; border-radius: 0.5rem !important; padding: 0.75rem !important; margin-top: 0.5rem !important; } /* Modern animations */ @keyframes swal2-show { 0% { transform: scale(0.7) translateY(-50px); opacity: 0; } 100% { transform: scale(1) translateY(0); opacity: 1; } } @keyframes swal2-hide { 0% { transform: scale(1) translateY(0); opacity: 1; } 100% { transform: scale(0.7) translateY(-50px); opacity: 0; } } .swal2-show { animation: swal2-show 0.3s ease-out !important; } .swal2-hide { animation: swal2-hide 0.15s ease-in forwards !important; } /* Success icon animation */ .swal2-success-ring { border-color: rgba(28, 200, 138, 0.3) !important; } .swal2-success-fix { background-color: transparent !important; } /* Error icon animation */ .swal2-error [class^=swal2-x-mark-line] { background-color: var(--mes-danger) !important; } /* Warning icon animation */ .swal2-warning [class^=swal2-warning-circular-line] { background-color: var(--mes-warning) !important; } /* Info icon styling */ .swal2-info { border-color: var(--mes-info) !important; } /* Progress steps styling */ .swal2-progress-steps { background: transparent !important; } .swal2-progress-step { background: var(--mes-primary) !important; color: white !important; border-radius: 0.5rem !important; padding: 0.375rem 0.75rem !important; font-weight: 600 !important; } .swal2-active-progress-step { background: var(--mes-success) !important; } .swal2-progress-step-line { background: #e3e6f0 !important; } /* Footer styling */ .swal2-footer { border-top: 1px solid #e3e6f0 !important; margin-top: 1.5rem !important; padding-top: 1rem !important; color: #858796 !important; } /* Timer progress bar */ .swal2-timer-progress-bar-container { background: #e3e6f0 !important; } .swal2-timer-progress-bar { background: var(--mes-primary) !important; } /* Image styling */ .swal2-image { border-radius: 0.5rem !important; box-shadow: 0 0.25rem 0.5rem rgba(0, 0, 0, 0.1) !important; } /* Deny button (for confirmations with 3 buttons) */ .swal2-deny { background: linear-gradient(135deg, var(--mes-danger) 0%, #d32f2f 100%) !important; color: white !important; border-radius: 0.5rem !important; padding: 0.625rem 1.5rem !important; font-size: 0.875rem !important; font-weight: 600 !important; border: none !important; transition: all 0.3s ease !important; } .swal2-deny:hover { transform: translateY(-2px) !important; box-shadow: 0 0.5rem 1rem rgba(231, 74, 59, 0.3) !important; background: linear-gradient(135deg, #d32f2f 0%, #b71c1c 100%) !important; } .swal2-deny:focus { box-shadow: 0 0 0 0.25rem rgba(231, 74, 59, 0.25) !important; } /* HTML content styling */ .swal2-html-container p { margin-bottom: 0.5rem !important; } .swal2-html-container h1, .swal2-html-container h2, .swal2-html-container h3, .swal2-html-container h4, .swal2-html-container h5, .swal2-html-container h6 { color: #5a5c69 !important; margin-top: 1rem !important; margin-bottom: 0.5rem !important; } .swal2-html-container ul, .swal2-html-container ol { padding-left: 1.5rem !important; margin-bottom: 0.5rem !important; } .swal2-html-container li { margin-bottom: 0.25rem !important; } /* RTL Support for SweetAlert */ [dir="rtl"] .swal2-popup { text-align: right !important; } [dir="rtl"] .swal2-actions { flex-direction: row-reverse !important; } [dir="rtl"] .swal2-progress-step { margin-left: 0.5rem !important; margin-right: 0 !important; } /* Dark mode adjustments (if dark theme is used) */ @media (prefers-color-scheme: dark) { .swal2-popup { background: #2e2e3e !important; color: #e3e6f0 !important; } .swal2-title { color: #e3e6f0 !important; } .swal2-html-container { color: #b7b9cc !important; } .swal2-input, .swal2-textarea, .swal2-file { background: #3a3b49 !important; border-color: #5a5c69 !important; color: #e3e6f0 !important; } } /* Responsive adjustments */ @media (max-width: 768px) { .swal2-popup { padding: 1.5rem !important; margin: 1rem !important; } .swal2-title { font-size: 1.25rem !important; } .swal2-html-container { font-size: 0.875rem !important; } .swal2-confirm, .swal2-cancel, .swal2-deny { padding: 0.5rem 1rem !important; font-size: 0.8125rem !important; } .swal2-actions { flex-direction: column !important; width: 100% !important; } .swal2-actions button { width: 100% !important; margin: 0.25rem 0 !important; } } /* Print Styles */ @media print { .no-print { display: none !important; } .card { box-shadow: none !important; border: 1px solid #e3e6f0 !important; } } /* User Profile Styles */ .user-profile-header { padding: 1.5rem 1.5rem 0; border-bottom: 1px solid #e3e6f0; } .user-avatar-large { display: flex; justify-content: center; align-items: center; } .user-initials-avatar { width: 100px; height: 100px; border-radius: 50%; background-color: var(--theme-primary); color: white; display: flex; align-items: center; justify-content: center; font-size: 2rem; font-weight: 600; border: 3px solid var(--theme-primary); box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1); } .user-profile-name { color: #5a5c69; font-weight: 600; } .user-profile-role { font-size: 0.875rem; } .icon-circle { width: 32px; height: 32px; border-radius: 50%; color: white; display: flex; align-items: center; justify-content: center; font-size: 0.875rem; flex-shrink: 0; } .icon-circle-primary { background-color: var(--theme-primary); } .icon-circle-success { background-color: #1cc88a; } .icon-circle-info { background-color: #36b9cc; } .icon-circle-warning { background-color: #f6c23e; } .icon-circle-teal { background-color: #17a2b8; } .icon-circle-secondary { background-color: #858796; } .icon-circle-danger { background-color: #e74a3b; } .icon-circle-gray { background-color: #6c757d; } .icon-value-spacing { margin-left: 0.5rem; } /* Employee Profile left card: larger name with initial avatar */ .profile-employee-name { font-size: 1.5rem; line-height: 1.3; } /* Employee Profile tab content: label semi-bold, value regular, same font size */ .profile-tab-fields .profile-tab-label { font-weight: 600; font-size: 1rem; color: #5a5c69; margin-bottom: 0.25rem; } .profile-tab-fields .profile-tab-value { font-weight: 400; font-size: 0.875rem; color: #858796; } /* Topbar Icon Styles - Custom overrides for SB Admin */ .topbar { height: 3.5rem !important; min-height: 3.5rem; } /* Override for icon links only */ .topbar .nav-item .nav-link.topbar-icon-link { padding: 0 1rem !important; height: 3.5rem !important; min-height: 3.5rem; gap: 0.5rem; margin: 0 0.25rem; border-radius: 0; } .topbar-icon-link { font-size: 0.875rem; display: inline-flex; align-items: center; transition: background-color 0.2s ease, color 0.2s ease; color: #5a5c69 !important; text-decoration: none; position: relative; } .topbar-icon-link::after { content: ''; position: absolute; bottom: 0; left: 0; right: 0; height: 3px; background-color: transparent; transition: background-color 0.2s ease; } .topbar-icon-link:hover { background-color: rgba(var(--theme-primary-rgb), 0.08); color: var(--theme-primary) !important; } .topbar-icon-link:hover::after { background-color: var(--theme-primary); } .topbar-icon-link i { line-height: 1; font-size: 1.2rem; width: 1.2rem; text-align: center; flex-shrink: 0; } .topbar-icon-link span { white-space: nowrap; } .topbar-logout-link:hover { background-color: rgba(231, 74, 59, 0.08); color: #e74a3b !important; } .topbar-logout-link:hover::after { background-color: #e74a3b; } /* Override topbar-divider if needed */ .topbar .topbar-divider { width: 0; border-right: 1px solid #e3e6f0; height: calc(3.5rem - 2rem); margin: auto 1rem; } .topbar .img-profile { box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); flex-shrink: 0; } /* User Info Section - Top Right */ .user-info-container { padding: 0.5rem 1rem; min-height: 3.5rem; align-items: center; gap: 0.75rem; cursor: pointer; } .user-avatar { width: 40px; height: 40px; object-fit: cover; border: 3px solid #e3e6f0; box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1); transition: all 0.3s ease; flex-shrink: 0; } .user-info-container:hover .user-initials-avatar-small { border-color: var(--theme-primary); box-shadow: 0 4px 12px rgba(var(--theme-primary-rgb), 0.3); } .user-profile-link { text-decoration: none; color: inherit; } .user-profile-link:hover .user-info-container { background-color: rgba(var(--theme-primary-rgb), 0.05); border-radius: 0.5rem; } .logout-form { display: inline; } .user-name { font-size: 0.875rem; line-height: 1.2; color: #5a5c69; font-weight: 600; white-space: nowrap; } .user-initials-avatar-small { transition: all 0.3s ease; width: 40px; height: 40px; background-color: var(--theme-primary); color: white; display: flex; align-items: center; justify-content: center; font-size: 0.875rem; font-weight: 600; border: 3px solid #e3e6f0; box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1); flex-shrink: 0; } @media (max-width: 991.98px) { .user-initials-avatar-small { width: 36px !important; height: 36px !important; font-size: 0.75rem !important; } .user-info-container .d-lg-block { display: none !important; } .topbar-icon-link span { display: none !important; } .topbar .nav-item .nav-link.topbar-icon-link { padding: 0 0.75rem !important; gap: 0; margin: 0 0.125rem; } } @media (max-width: 576px) { .topbar .navbar-nav { flex-wrap: nowrap; } .topbar .nav-item .nav-link.topbar-icon-link { padding: 0 0.5rem !important; margin: 0; } } /* Select2 consistency with drawer form controls - Theme font size and styling */ .select2-container--bootstrap-5 .select2-selection { font-size: var(--app-font-size) !important; color: #6e707e !important; line-height: 1.5 !important; min-height: calc(1.5em + 0.75rem + 2px) !important; } .select2-container--bootstrap-5 .select2-selection--single .select2-selection__rendered { font-size: var(--app-font-size) !important; color: #6e707e !important; line-height: 1.5 !important; } .select2-container--bootstrap-5 .select2-selection--single .select2-selection__rendered .select2-selection__placeholder { color: #858796 !important; font-size: var(--app-font-size) !important; } /* Select2 dropdown border to match form-control design */ .select2-container--bootstrap-5 .select2-dropdown { border: 1px solid #d1d3e2 !important; border-radius: 0.375rem !important; } .select2-container--bootstrap-5 .select2-dropdown .select2-search .select2-search__field { font-size: var(--app-font-size) !important; color: #6e707e !important; } .select2-container--bootstrap-5 .select2-dropdown .select2-results__option { font-size: var(--app-font-size) !important; color: #6e707e !important; line-height: 1.5 !important; padding: 0.375rem 0.75rem !important; } .select2-container--bootstrap-5 .select2-dropdown .select2-results__option--highlighted { color: #000 !important; } /*.select2-container--bootstrap-5 .select2-dropdown .select2-results__option[aria-selected=true] { color: #fff !important; } */ /* Multiple selection consistency */ .select2-container--bootstrap-5 .select2-selection--multiple .select2-selection__rendered .select2-selection__choice { font-size: var(--app-font-size) !important; color: #6e707e !important; line-height: 1.5 !important; } .select2-container--bootstrap-5 .select2-dropdown .select2-results__options .select2-results__option.select2-results__option--selected, .select2-container--bootstrap-5 .select2-dropdown .select2-results__options .select2-results__option[aria-selected=true]:not(.select2-results__option--highlighted){ background-color:unset !important } /* Parent Menu Tabs Component Styles */ .parent-menu-tabs-container { border-bottom: 1px solid #dee2e6; margin-bottom: 1.5rem; } .parent-menu-tabs-container .nav-tabs { border-bottom: none; margin-bottom: 0; } .parent-menu-tabs-container .nav-tabs .nav-item { margin-bottom: -1px; } .parent-menu-tabs-container .nav-tabs .nav-link { color: #6e707e; border: 1px solid transparent; border-top-left-radius: 0.35rem; border-top-right-radius: 0.35rem; padding: 0.75rem 1rem; transition: all 0.15s ease-in-out; } .parent-menu-tabs-container .nav-tabs .nav-link:hover { border-color: #e3e6f0 #e3e6f0 #dee2e6; color: var(--theme-primary); background-color: #f8f9fc; } .parent-menu-tabs-container .nav-tabs .nav-link.active { color: var(--theme-primary); background-color: #fff; border-color: #dee2e6 #dee2e6 #fff; font-weight: 600; } .parent-menu-tabs-container .nav-tabs .nav-link i { font-size: 0.875rem; } /* RTL Support for Parent Menu Tabs */ [dir="rtl"] .parent-menu-tabs-container .nav-tabs .nav-link { border-top-left-radius: 0; border-top-right-radius: 0.35rem; } [dir="rtl"] .parent-menu-tabs-container .nav-tabs .nav-link.active { border-top-left-radius: 0; border-top-right-radius: 0.35rem; } /* Responsive adjustments */ @media (max-width: 768px) { .parent-menu-tabs-container .nav-tabs { flex-wrap: wrap; } .parent-menu-tabs-container .nav-tabs .nav-link { font-size: 0.875rem; padding: 0.5rem 0.75rem; } .parent-menu-tabs-container .nav-tabs .nav-link i { font-size: 0.75rem; } } /* Agent & Channel configuration flow (drawer forms) */ .config-flow { max-width: 100%; } .config-flow .config-section { border: 1px solid rgba(0,0,0,.08); border-radius: 0.35rem; } .config-flow .config-section .card-header { background-color: rgba(0,0,0,.03); border-bottom: 1px solid rgba(0,0,0,.06); font-weight: 600; font-size: 0.9rem; } .config-flow .config-section-title { color: inherit; } .config-flow .config-section .card-body { padding: 1rem; } .config-flow .channel-config-block h6 { font-weight: 600; } /* Workflow step drawer: Bootstrap 5 selects + SB Admin primary buttons */ .workflow-step-form .form-select { border-radius: 0.35rem; border-color: #d1d3e2; font-size: 0.875rem; padding-top: 0.375rem; padding-bottom: 0.375rem; } .workflow-step-form .form-select:focus { border-color: #bac8f3; box-shadow: 0 0 0 0.2rem rgba(78, 115, 223, 0.25); } .workflow-step-form .form-select-sm { font-size: 0.8125rem; padding-top: 0.25rem; padding-bottom: 0.25rem; } .workflow-step-form .btn.workflow-step-row-remove { flex-shrink: 0; align-self: center; min-width: 2rem; }