/* ========================================================================== Unified SweetAlert2 popup styling for Gracol Operations. Applies to every Swal.fire(...) call (including loading popups) so the appearance stays consistent regardless of which page invoked it. Brand rules: * Confirm / primary action button -> rgb(0,0,60) * Cancel / destructive action button -> #d33 (matches logout popup) ========================================================================== */ :root { --gracol-primary: rgb(0, 0, 60); --gracol-primary-hover: rgb(0, 0, 90); --gracol-cancel: #d33; --gracol-cancel-hover: #b02a2a; } /* Layout guard -------------------------------------------------------------- SweetAlert2 adds `swal2-height-auto` to which forces `height: auto`. On flex-centered login/signup/OTP pages this collapses the body, making the content jump upward while the popup is open. Forcing `min-height: 100vh` keeps the body at least as tall as the viewport so flex centering still works. On longer pages (dashboards) the rule is harmless — body continues to grow to fit content. The selector is more specific than SweetAlert2's default (`html body.swal2-height-auto` has higher specificity than `body.swal2-height-auto`) and this file loads after SweetAlert2's CDN CSS, so it wins regardless of !important ordering. -------------------------------------------------------------------------- */ html body.swal2-height-auto { min-height: 100vh !important; height: auto !important; } /* Popup shell --------------------------------------------------------------- */ .swal2-popup { border-radius: 14px !important; font-family: inherit; box-shadow: 0 10px 30px rgba(0, 0, 0, 0.18) !important; } .swal2-title { color: rgb(0, 0, 60) !important; font-weight: 700 !important; } .swal2-html-container, .swal2-content { color: #1f2937 !important; } /* Buttons ------------------------------------------------------------------- */ /* Equal-size action buttons ------------------------------------------------- By default SweetAlert2 sizes each button to its own text, so "OK" ends up narrower than "Cancel" / "Log Out" / "Yes, continue". Giving every action button the same min-width and identical padding makes confirm, cancel and deny render at a uniform size on every dashboard (employee, manager, HR, system admin). The min-width comfortably exceeds the longest label used in the app, so all buttons settle at the same width. Spacing is handled by a gap on the row so the per-button margins don't reintroduce asymmetry. -------------------------------------------------------------------------- */ .swal2-actions { gap: 0.6em !important; } .swal2-actions .swal2-styled { min-width: 8.5em !important; margin: 0 !important; padding: 0.625em 1.1em !important; box-sizing: border-box !important; justify-content: center !important; text-align: center !important; } .swal2-styled.swal2-confirm, .swal2-styled.swal2-confirm:focus { background-color: var(--gracol-primary) !important; background-image: none !important; border: 1px solid var(--gracol-primary) !important; color: #fff !important; box-shadow: 0 4px 12px rgba(0, 0, 60, 0.25) !important; } .swal2-styled.swal2-confirm:hover { background-color: var(--gracol-primary-hover) !important; border-color: var(--gracol-primary-hover) !important; } .swal2-styled.swal2-cancel, .swal2-styled.swal2-cancel:focus { background-color: var(--gracol-cancel) !important; background-image: none !important; border: 1px solid var(--gracol-cancel) !important; color: #fff !important; box-shadow: 0 4px 12px rgba(211, 51, 51, 0.25) !important; } .swal2-styled.swal2-cancel:hover { background-color: var(--gracol-cancel-hover) !important; border-color: var(--gracol-cancel-hover) !important; } .swal2-styled.swal2-deny, .swal2-styled.swal2-deny:focus { background-color: var(--gracol-cancel) !important; background-image: none !important; border: 1px solid var(--gracol-cancel) !important; color: #fff !important; } .swal2-styled.swal2-deny:hover { background-color: var(--gracol-cancel-hover) !important; border-color: var(--gracol-cancel-hover) !important; } /* Loading popup ------------------------------------------------------------- */ .swal2-loader { border-color: var(--gracol-primary) transparent var(--gracol-primary) transparent !important; } .swal2-progress-steps .swal2-active-progress-step, .swal2-progress-steps .swal2-progress-step { background: var(--gracol-primary) !important; } .swal2-progress-steps .swal2-progress-step-line { background: var(--gracol-primary) !important; } /* Inputs inside popups ------------------------------------------------------ */ .swal2-input, .swal2-textarea, .swal2-select, .swal2-file { border-radius: 8px !important; border: 1px solid #d1d5db !important; box-shadow: none !important; } .swal2-input:focus, .swal2-textarea:focus, .swal2-select:focus { border-color: var(--gracol-primary) !important; box-shadow: 0 0 0 3px rgba(0, 0, 60, 0.15) !important; } .swal2-validation-message { background: #fde8e8 !important; color: #9b1c1c !important; border-radius: 8px !important; }