/* SweetAlert2 z-index fix — must sit above Bootstrap modal (1090) and offcanvas (1090) */ div:where(.swal2-container) { z-index: 1100 !important; } /* SweetAlert2 backdrop — ensure visible dark overlay (theme overrides default with --theme-emphasis-color) */ div:where(.swal2-container).swal2-backdrop-show, div:where(.swal2-container).swal2-noanimation { background: rgba(0, 0, 0, 0.4) !important; } /* SweetAlert2 popup box — theme uses var(--theme-secondary-bg) which is scoped and doesn't reach swal2-popup appended directly to outside theme wrapper */ div:where(.swal2-container) .swal2-popup { background-color: #fff !important; border-radius: 0.5rem; box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.15); } /* SweetAlert2 icon colors — theme uses CSS variables (--theme-success, --theme-warning, etc.) that don't resolve inside swal2 popup appended outside the theme wrapper scope. Hardcode the resolved values from the theme: --theme-success:#02bc9c, --theme-warning:#e5a54b, etc. */ div:where(.swal2-container) .swal2-icon.swal2-success [class^=swal2-success-line] { background-color: #02bc9c !important; } div:where(.swal2-container) .swal2-icon.swal2-success .swal2-success-ring { border-color: #02bc9c !important; } div:where(.swal2-container) .swal2-icon.swal2-warning { border-color: #e5a54b !important; color: #e5a54b !important; } div:where(.swal2-container) .swal2-icon.swal2-error { border-color: #ff4d49 !important; color: #ff4d49 !important; } div:where(.swal2-container) .swal2-icon.swal2-error [class^=swal2-x-mark-line] { background-color: #ff4d49 !important; } div:where(.swal2-container) .swal2-icon.swal2-info { border-color: #16b1ff !important; color: #16b1ff !important; } div:where(.swal2-container) .swal2-icon.swal2-question { border-color: #16b1ff !important; color: #16b1ff !important; } /* ═══════════════════════════════════════════════════════════════ OFFCANVAS SLIDE PANEL — Global width and sticky footer All forms use the offcanvas slide panel (right-to-left) ═══════════════════════════════════════════════════════════════ */ #pdOffCanvas { width: 50%; max-width: 800px; } @media (max-width: 1200px) { #pdOffCanvas { width: 65%; } } @media (max-width: 992px) { #pdOffCanvas { width: 80%; } } @media (max-width: 576px) { #pdOffCanvas { width: 100%; max-width: 100%; } } /* Offcanvas body — flex layout to push buttons to bottom */ #pdOffCanvas .offcanvas-body { display: flex; flex-direction: column; padding-bottom: 0; overflow: hidden; } /* Form inside offcanvas — flex column, fills the offcanvas body */ #pdOffCanvas .offcanvas-body form { display: flex; flex-direction: column; flex: 1; min-height: 0; overflow: hidden; } /* Form content — stays at top, scrolls when content overflows */ #pdOffCanvas .offcanvas-body form .offcanvas-form-content, #pdOffCanvas .offcanvas-body form > :not(.offcanvas-form-footer) { flex: 0 0 auto; } /* The last content element before footer takes remaining space for scrolling */ #pdOffCanvas .offcanvas-body form > .row { flex: 1 1 auto; overflow-y: auto; align-content: flex-start; min-height: 0; } /* Sticky footer buttons — always pinned to the bottom */ #pdOffCanvas .offcanvas-body form .offcanvas-form-footer, #pdOffCanvas .offcanvas-body .offcanvas-form-footer { flex: 0 0 auto; background: #fff; border-top: 1px solid #e9ecef; padding: 0.75rem 0; margin-top: auto; z-index: 10; } /* Offcanvas header — h4 title styling */ #pdOffCanvas .offcanvas-title { font-size: 1.25rem; font-weight: 600; color: #2c3e50; } .bg-login { min-height: 100vh; background: url('../../images/login-bg.png') no-repeat center center fixed; background-size: 100vw 100vh; } .mandatory-symbol { color: red; font-size: 12px; } .field-validation-error { font-size: 0.8125rem; font-weight: 400; } .validation-summary-errors { background-color: #f5e9c4; color: #f72828; padding: 0.3rem; border-radius: 6px; text-align: center; margin-bottom: 0.5rem; font-size: 13px; } .validation-summary-errors ul { padding: 0; margin-bottom: 0; } .validation-summary-errors ul li { list-style: none !important; } .validation-errors ul { margin-bottom: 0; padding-left: 1.25rem; } .validation-errors ul li { list-style: disc !important; } .authentication-wrapper .auth-cover-illustration { max-inline-size: 30rem !important; } .fa-icon { font-size: 1.2rem !important; } .user-profile-header-banner img { block-size: 20px !important; } .user-profile-header .user-profile-img { background: #e9e9ec; } .user-profile-info .icon-base { font-size: 1rem !important; } .error-page { min-height: 80vh; } .error-page-img { max-width: 100%; height: auto; max-height: 55vh; } /* Module Switcher */ .module-switcher-toggle { background: rgba(0, 0, 0, 0.05); border-radius: 0.5rem; } .module-switcher-menu { min-width: 280px; max-height: 400px; border-radius: 0.75rem; overflow: hidden; } .module-switcher-label { max-width: 180px; } .module-switcher-search { position: sticky; top: 0; background: #fff; z-index: 1; } .module-switcher-list { max-height: 330px; } .module-icon { width: 28px; height: 28px; border-radius: 6px; } /* ── Search Overlay (Materialize-style) ── */ #searchOverlay { position: fixed; top: 0; left: 0; right: 0; bottom: 0; z-index: 9999; background: rgba(0, 0, 0, 0.5); backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px); } #searchOverlay>div { max-width: 620px; margin: 80px auto 0; background: #fff; border-radius: 0.75rem; box-shadow: 0 25px 60px rgba(0, 0, 0, 0.3); overflow: hidden; animation: searchFadeIn 0.15s ease-out; } @keyframes searchFadeIn { from { opacity: 0; transform: translateY(-10px); } to { opacity: 1; transform: translateY(0); } } #searchOverlayResults .search-category { padding: 0.5rem 1.25rem; font-size: 0.7rem; font-weight: 700; text-transform: uppercase; letter-spacing: 1px; color: #a1acb8; } #searchOverlayResults .search-result-item { display: flex; align-items: center; gap: 0.75rem; padding: 0.5rem 1.25rem; cursor: pointer; text-decoration: none; color: inherit; transition: background 0.15s; } #searchOverlayResults .search-result-item:hover, #searchOverlayResults .search-result-item.active { background: rgba(105, 108, 255, 0.08); } #searchOverlayResults .search-result-item .result-icon { width: 32px; height: 32px; border-radius: 6px; display: flex; align-items: center; justify-content: center; background: rgba(105, 108, 255, 0.1); color: #696cff; font-size: 1rem; } #searchOverlayResults { max-height: 350px; overflow-y: auto; padding: 0.5rem 0; } #searchOverlayResults .search-no-result { text-align: center; padding: 2rem; color: #a1acb8; } /* ── DataTable global defaults ── */ .dataTable thead th, table.table-sm thead th { background-color:#eef2f7 !important; font-size: 0.8rem !important; } .dataTable tbody td, table.table-sm tbody td { font-size: 0.75rem !important; } .dataTable thead th:not([class*="text-center"]):not([class*="text-end"]):not([class*="dt-center"]):not([class*="dt-right"]), .dataTable tbody td:not([class*="text-center"]):not([class*="text-end"]):not([class*="dt-center"]):not([class*="dt-right"]) { text-align: left !important; } /* ── DataTable pagination — right-align page number buttons ── */ /* DataTables 2.x uses div.dt-container + div.dt-paging */ div.dt-container div.dt-paging ul.pagination { justify-content: flex-end !important; } /* Legacy DataTables 1.x uses div.dataTables_wrapper + div.dataTables_paginate */ div.dataTables_wrapper div.dataTables_paginate ul.pagination { justify-content: flex-end !important; } /* ── DataTable action icon buttons ── */ .dataTable .btn-icon, table.table-sm .btn-icon { width: 32px; height: 32px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; padding: 0; border: none; background-color: rgba(0, 0, 0, 0.05); transition: background-color 0.15s; } .dataTable .btn-icon:hover, table.table-sm .btn-icon:hover { background-color: rgba(0, 0, 0, 0.1); } .dataTable .btn-icon:has(.text-primary), table.table-sm .btn-icon:has(.text-primary) { background-color: rgba(105, 108, 255, 0.1); } .dataTable .btn-icon:has(.text-success), table.table-sm .btn-icon:has(.text-success) { background-color: rgba(40, 167, 69, 0.1); } .dataTable .btn-icon:has(.text-danger), table.table-sm .btn-icon:has(.text-danger) { background-color: rgba(220, 53, 69, 0.1); } .dataTable .btn-icon:has(.text-info), table.table-sm .btn-icon:has(.text-info) { background-color: rgba(13, 202, 240, 0.1); } .dataTable .btn-icon:has(.text-warning), table.table-sm .btn-icon:has(.text-warning) { background-color: rgba(255, 193, 7, 0.1); } .dataTable .btn-icon:has(.text-primary):hover, table.table-sm .btn-icon:has(.text-primary):hover { background-color: rgba(105, 108, 255, 0.2); } .dataTable .btn-icon:has(.text-danger):hover, table.table-sm .btn-icon:has(.text-danger):hover { background-color: rgba(220, 53, 69, 0.2); } .dataTable .btn-icon:has(.text-info):hover, table.table-sm .btn-icon:has(.text-info):hover { background-color: rgba(13, 202, 240, 0.2); } .content-page{ padding-top:20px ; }