/* * pims-ui.css — global UI polish for Nirikshan. * Loaded AFTER Mazer's compiled CSS so it refines (never fights) the theme. * Everything is driven by Bootstrap 5.3 --bs-* tokens, so it adapts to light * and dark automatically. Kept intentionally conservative. */ /* --------------------------------------------------------------------------- Theme switch: kill ALL transitions/animations for the single frame the theme flips (dark.js adds .theme-switching on , removes it next frame). This stops padding/size/colour differences between light & dark from ANIMATING, which otherwise looked like the content, sidebar and logo "moving". --------------------------------------------------------------------------- */ html.theme-switching, html.theme-switching *, html.theme-switching *::before, html.theme-switching *::after { transition: none !important; animation: none !important; } /* =========================================================================== CONTENT CRISP TOKENS IMPORTANT: the Mazer SHELL (top navbar + sidebar) is left ALONE — its font, colours, spacing and active accents stay exactly as Mazer ships them. The "crystal clear" treatment further below is scoped to CONTENT surfaces only (cards, forms, tables, modals), so working screens read sharp instead of dull while the app still looks like the Mazer the team knows. Only reusable elevation + a content hairline live globally here. =========================================================================== */ :root { --pims-shadow-sm: 0 1px 2px rgba(16, 24, 40, .05); --pims-shadow: 0 1px 2px rgba(16, 24, 40, .04), 0 10px 28px rgba(16, 24, 40, .06); --pims-shadow-lg: 0 18px 48px rgba(16, 24, 40, .12); /* Crisp hairline used ONLY by content components (never the shell). */ --pims-hairline: #e6eaf1; --pims-card-bg: #ffffff; /* Subtle cool ground for the CONTENT area so white cards read crisp, not dull. The navbar + sidebar sit outside #main-content, so the Mazer shell is unaffected. */ --pims-content-bg: #f4f7fb; } [data-bs-theme="dark"] { --pims-shadow-sm: 0 1px 2px rgba(0, 0, 0, .35); --pims-shadow: 0 1px 2px rgba(0, 0, 0, .30), 0 12px 32px rgba(0, 0, 0, .38); --pims-shadow-lg: 0 20px 52px rgba(0, 0, 0, .5); --pims-hairline: #2a374e; --pims-card-bg: var(--bs-secondary-bg); --pims-content-bg: #0b111e; } /* Crisp content ground (site-wide; shell untouched). */ #main-content { background-color: var(--pims-content-bg); } /* Aligned numerals keep data columns tidy (content tables only). */ .table, .table td, .table th { font-variant-numeric: tabular-nums; } /* --------------------------------------------------------------------------- Form controls — more defined, less "dull" --------------------------------------------------------------------------- */ .form-control, .form-select, .input-group-text { border-color: var(--bs-border-color); transition: border-color .15s ease, box-shadow .15s ease, background-color .15s ease; } .form-label { color: var(--bs-heading-color, var(--bs-body-color)); font-weight: 600; margin-bottom: .35rem; } .form-control::placeholder { color: var(--bs-secondary-color); opacity: 1; } .form-control:hover:not(:disabled):not([readonly]):not(:focus), .form-select:hover:not(:disabled):not(:focus) { border-color: color-mix(in srgb, var(--bs-primary) 40%, var(--bs-border-color)); } .form-control:focus, .form-select:focus { border-color: var(--bs-primary); box-shadow: 0 0 0 .2rem color-mix(in srgb, var(--bs-primary) 20%, transparent); } /* Dark mode: lift inputs off the near-black page so they read as solid fields */ [data-bs-theme="dark"] .form-control, [data-bs-theme="dark"] .form-select, [data-bs-theme="dark"] .input-group-text { background-color: var(--bs-secondary-bg); /* #343a40 — a step up from #212529 */ border-color: #5c636a; color: var(--bs-body-color); } [data-bs-theme="dark"] .form-control::placeholder { color: rgba(222, 226, 230, .55); } [data-bs-theme="dark"] .form-control:focus, [data-bs-theme="dark"] .form-select:focus { background-color: var(--bs-secondary-bg); border-color: var(--bs-primary); } /* Choices.js searchable dropdowns get the same treatment */ .choices__inner { border-color: var(--bs-border-color) !important; background-color: var(--bs-body-bg) !important; transition: border-color .15s ease, box-shadow .15s ease; } .choices.is-focused .choices__inner, .choices.is-open .choices__inner { border-color: var(--bs-primary) !important; box-shadow: 0 0 0 .2rem color-mix(in srgb, var(--bs-primary) 20%, transparent); } [data-bs-theme="dark"] .choices__inner { background-color: var(--bs-secondary-bg) !important; border-color: #5c636a !important; } [data-bs-theme="dark"] .choices__list--dropdown, [data-bs-theme="dark"] .choices__list[aria-expanded] { background-color: var(--bs-secondary-bg); border-color: #5c636a; } /* Every Choices dropdown in this app is created with itemSelectText:'' (no "press to select" hint). Choices nonetheless reserves 100px of right-padding on each option at >=640px to make room for that hint, which squeezes long labels (e.g. "Engineering Department") into the narrow area on the left and forces an early wrap/cut even though the space beside them is empty. Since we never render the hint, reclaim that space so labels use the full width and wrap a WHOLE word to the next line only when they genuinely don't fit. This only overrides the padding; it does not touch any Choices JS behaviour. */ @media (min-width: 640px) { .choices__list--dropdown .choices__item--selectable, .choices__list[aria-expanded] .choices__item--selectable { /* !important: on some pages choices.css loads AFTER pims-ui.css, and its padding-right:100px has equal specificity, so it would otherwise win. */ padding-right: 10px !important; } } /* Let long option/selected labels wrap on word boundaries instead of breaking mid-word or being clipped. */ .choices__list--dropdown .choices__item, .choices__list[aria-expanded] .choices__item, .choices__list--single .choices__item { white-space: normal; overflow-wrap: break-word; word-break: normal; } /* --------------------------------------------------------------------------- Cards — crisper edge + soft depth --------------------------------------------------------------------------- */ .card { border: 1px solid var(--bs-border-color); box-shadow: 0 1px 2px rgba(16, 24, 40, .04), 0 6px 20px rgba(16, 24, 40, .05); } [data-bs-theme="dark"] .card { box-shadow: 0 1px 2px rgba(0, 0, 0, .35), 0 8px 24px rgba(0, 0, 0, .28); } .card .card-title { color: var(--bs-heading-color, var(--bs-body-color)); } /* Slightly stronger body text so content doesn't read washed-out */ .text-muted { color: var(--bs-secondary-color) !important; } /* --------------------------------------------------------------------------- Buttons & icon micro-animations --------------------------------------------------------------------------- */ .btn { transition: transform .12s ease, box-shadow .15s ease, background-color .15s ease, border-color .15s ease; } .btn:active { transform: translateY(1px); } .btn i, .nav-link i, .sidebar-link i, .submenu-link i, .dropdown-item i { transition: transform .15s ease; } .btn:hover i { transform: translateY(-1px); } .sidebar-link:hover i, .submenu-link:hover i { transform: scale(1.14); } .btn-light.rounded-circle:hover { box-shadow: 0 4px 12px rgba(16, 24, 40, .12); } /* Visible keyboard focus everywhere (a11y) */ :focus-visible { outline: 2px solid color-mix(in srgb, var(--bs-primary) 65%, transparent); outline-offset: 2px; } @media (prefers-reduced-motion: reduce) { .form-control, .form-select, .btn, .btn i, .nav-link i, .sidebar-link i, .submenu-link i { transition: none !important; } .btn:hover i, .sidebar-link:hover i, .submenu-link:hover i, .btn:active { transform: none !important; } } /* Adaptive brand-ink tokens: the app's navy (#25396f) in light, readable light text in dark. Use var(--pims-ink) / var(--pims-ink-soft) instead of hardcoded navy so headings & labels stay visible in both themes. */ :root { --pims-ink: #25396f; --pims-ink-soft: #6c7aa0; } [data-bs-theme="dark"] { --pims-ink: var(--bs-body-color); --pims-ink-soft: var(--bs-secondary-color); } /* =========================================================================== DARK MODE — keep author-added content legible. Utility classes that pin a LIGHT surface or DARK text don't adapt on their own, so text/boxes added in custom markup can vanish in dark mode. Remap the common offenders to theme tokens (dark theme only — light stays untouched). =========================================================================== */ /* Light surfaces -> dark surfaces */ [data-bs-theme="dark"] .bg-white { background-color: var(--bs-secondary-bg) !important; } [data-bs-theme="dark"] .bg-light { background-color: var(--bs-tertiary-bg) !important; } /* Dark text -> light body text */ [data-bs-theme="dark"] .text-dark, [data-bs-theme="dark"] .text-black, [data-bs-theme="dark"] .text-gray-600, [data-bs-theme="dark"] .text-gray-700, [data-bs-theme="dark"] .text-gray-800, [data-bs-theme="dark"] .text-gray-900 { color: var(--bs-body-color) !important; } /* Badges / chips that used a light background keep readable (dark) -> light text */ [data-bs-theme="dark"] .badge.bg-light, [data-bs-theme="dark"] .badge.bg-white, [data-bs-theme="dark"] .badge.text-dark { color: var(--bs-body-color) !important; } /* Mazer's soft "bg-light-*" chips stay LIGHT-tinted in dark mode (they are not part of Bootstrap's theming), so they glare and any remapped .text-dark on them turns invisible. Remap them to translucent tints of their own hue with a readable light text — fixes chips across hrms/master/pms/users/otp pages. */ [data-bs-theme="dark"] .bg-light-primary { background-color: rgba(67, 94, 190, .22) !important; color: #9db2ff !important; } [data-bs-theme="dark"] .bg-light-secondary { background-color: rgba(108, 117, 125, .28) !important; color: var(--bs-body-color) !important; } [data-bs-theme="dark"] .bg-light-success { background-color: rgba(25, 135, 84, .22) !important; color: #39d39e !important; } [data-bs-theme="dark"] .bg-light-info { background-color: rgba(13, 202, 240, .20) !important; color: #3ed3ea !important; } [data-bs-theme="dark"] .bg-light-warning { background-color: rgba(255, 193, 7, .20) !important; color: #f6b64d !important; } [data-bs-theme="dark"] .bg-light-danger { background-color: rgba(220, 53, 69, .22) !important; color: #ff8a95 !important; } /* text-dark forced onto these chips must not override the readable colors above */ [data-bs-theme="dark"] .bg-light-primary.text-dark, [data-bs-theme="dark"] .bg-light-success.text-dark, [data-bs-theme="dark"] .bg-light-info.text-dark, [data-bs-theme="dark"] .bg-light-warning.text-dark, [data-bs-theme="dark"] .bg-light-danger.text-dark, [data-bs-theme="dark"] .bg-light-secondary.text-dark { color: var(--bs-body-color) !important; } /* The remapped light surfaces carry the readable body color so any nested text without its own colour stays visible on the now-dark surface. (Standard cards/modals/tables are handled by Mazer's own dark theme.) */ [data-bs-theme="dark"] .bg-white, [data-bs-theme="dark"] .bg-light { color: var(--bs-body-color); } /* Common heading helpers stay bright in dark mode */ [data-bs-theme="dark"] h1, [data-bs-theme="dark"] h2, [data-bs-theme="dark"] h3, [data-bs-theme="dark"] h4, [data-bs-theme="dark"] h5, [data-bs-theme="dark"] h6, [data-bs-theme="dark"] .card-title, [data-bs-theme="dark"] .page-title h3 { color: var(--bs-heading-color, var(--bs-body-color)); } /* Header profile pill (.user-menu): its light-blue gradient is inlined and stays light in dark mode, so the light --pims-ink username/designation text washes out. Give it a dark surface in dark mode (!important beats the inline bg) and ensure both lines stay readable. */ [data-bs-theme="dark"] .user-menu { background: var(--bs-secondary-bg) !important; border-color: var(--bs-border-color) !important; } [data-bs-theme="dark"] .user-menu .user-name h6 { color: var(--bs-body-color) !important; } [data-bs-theme="dark"] .user-menu .user-name p { color: var(--bs-secondary-color) !important; } /* Card headers: Mazer pins text to --bs-card-cap-color which can stay dark, so titles/subtitles (e.g. "Configured Actions" + its caption) vanish in dark. Force readable text; text-white/colored-header utilities (with !important) win. */ [data-bs-theme="dark"] .card-header { color: var(--bs-body-color); } [data-bs-theme="dark"] .card-header.bg-white { background-color: var(--bs-secondary-bg) !important; } [data-bs-theme="dark"] .card-header .text-muted { color: var(--bs-secondary-color) !important; } /* Auth (login/register) logo: rounded corners, and a white plate in dark theme so the logo stays legible on the dark background. */ /* border-box so the dark white-plate padding stays inside the logo box and doesn't resize/shift it when the theme changes. */ .auth-logo { border-radius: 12px; box-sizing: border-box; } [data-bs-theme="dark"] .auth-logo { background: #fff; padding: 10px 14px; box-shadow: 0 2px 10px rgba(0, 0, 0, .4); } /* Borders pinned to light greys soften into the dark palette */ [data-bs-theme="dark"] .border, [data-bs-theme="dark"] .border-top, [data-bs-theme="dark"] .border-bottom, [data-bs-theme="dark"] .border-start, [data-bs-theme="dark"] .border-end { border-color: var(--bs-border-color) !important; } /* =========================================================================== CRYSTAL-CLEAR CONTENT — cards, forms & tables ONLY. These components are content-exclusive (the Mazer sidebar/navbar don't use .card/.table/.form-*), so refining them here sharpens the working surfaces WITHOUT touching the shell — which stays exactly Mazer. =========================================================================== */ /* Cards — clean hairline, calm depth, well-defined header, roomy body. */ .card { border: 1px solid var(--pims-hairline); border-radius: 14px; box-shadow: var(--pims-shadow-sm); } .card > .card-header { background: transparent; border-bottom: 1px solid var(--pims-hairline); padding: 1rem 1.25rem; font-weight: 700; } .card > .card-body { padding: 1.25rem 1.35rem; } .card .card-title { font-weight: 700; letter-spacing: -.01em; } [data-bs-theme="dark"] .card { border-color: var(--pims-hairline); } /* Tables — quiet uppercase micro-headers, hairline rows, calm hover, roomy cells. */ .table { --bs-table-border-color: var(--pims-hairline); } .table > :not(caption) > * > * { border-color: var(--pims-hairline); } .table thead th { text-transform: uppercase; font-size: .72rem; letter-spacing: .05em; font-weight: 700; color: var(--bs-secondary-color); border-bottom: 1px solid var(--pims-hairline); padding: .8rem .9rem; } .table tbody td { vertical-align: middle; padding: .72rem .9rem; } .table-hover > tbody > tr:hover > * { background-color: color-mix(in srgb, var(--bs-primary) 5%, transparent); } /* Forms — crisper field definition (focus/hover handled above), tidy hairlines. */ .form-control, .form-select, .input-group-text { border-color: var(--pims-hairline); } /* =========================================================================== THEME SYSTEM — 4 selectable, government-professional presets. A preset = brand palette + (for Midnight) dark mode. Set via data-pims-theme on ; Midnight additionally sets data-bs-theme="dark". Persisted per user (server row) and per device (localStorage), applied before paint by the head script. The crisp neutral foundation above is shared, so every preset is clean. mazer · classic indigo (DEFAULT, light) — matches stock Mazer shell ocean · Delhi Jal Board deep blue (light) — professional graphite · steel/slate (light) — professional midnight · dark mode =========================================================================== */ :root, [data-pims-theme="mazer"] { --bs-primary:#435ebe; --bs-primary-rgb:67,94,190; --pims-accent:#5b8def; } /* DEFAULT — stock Mazer indigo */ [data-pims-theme="ocean"] { --bs-primary:#1657d0; --bs-primary-rgb:22,87,208; --pims-accent:#0c8f9c; } [data-pims-theme="graphite"] { --bs-primary:#2c5282; --bs-primary-rgb:44,82,130; --pims-accent:#4a6b8a; } /* Dark ground (Midnight, or any preset with dark toggled on) lifts the brand for contrast. Default dark brand is the Ocean blue; each light preset gets a fitting lift if the user dark-toggles it. */ [data-bs-theme="dark"], [data-bs-theme="dark"][data-pims-theme="ocean"], [data-bs-theme="dark"][data-pims-theme="midnight"] { --bs-primary:#5a90f2; --bs-primary-rgb:90,144,242; } [data-bs-theme="dark"][data-pims-theme="mazer"] { --bs-primary:#7d94e8; --bs-primary-rgb:125,148,232; } [data-bs-theme="dark"][data-pims-theme="graphite"] { --bs-primary:#6f9bd1; --bs-primary-rgb:111,155,209; } /* Make Bootstrap/Mazer's primary-driven surfaces follow --bs-primary (the compiled CSS hardcodes indigo) so switching a theme actually recolours the app. */ .text-primary { color: var(--bs-primary) !important; } .bg-primary { background-color: var(--bs-primary) !important; } .border-primary { border-color: var(--bs-primary) !important; } a { color: var(--bs-primary); } a:hover { color: color-mix(in srgb, var(--bs-primary) 82%, #000); } .btn-primary { --bs-btn-bg: var(--bs-primary); --bs-btn-border-color: var(--bs-primary); --bs-btn-hover-bg: color-mix(in srgb, var(--bs-primary) 88%, #000); --bs-btn-hover-border-color: color-mix(in srgb, var(--bs-primary) 84%, #000); --bs-btn-active-bg: color-mix(in srgb, var(--bs-primary) 80%, #000); --bs-btn-active-border-color: color-mix(in srgb, var(--bs-primary) 78%, #000); --bs-btn-disabled-bg: var(--bs-primary); --bs-btn-disabled-border-color: var(--bs-primary); } .btn-outline-primary { --bs-btn-color: var(--bs-primary); --bs-btn-border-color: var(--bs-primary); --bs-btn-hover-bg: var(--bs-primary); --bs-btn-hover-border-color: var(--bs-primary); --bs-btn-active-bg: var(--bs-primary); --bs-btn-active-border-color: var(--bs-primary); } .bg-light-primary { background-color: color-mix(in srgb, var(--bs-primary) 12%, transparent) !important; color: var(--bs-primary) !important; } [data-bs-theme="dark"] .bg-light-primary { background-color: color-mix(in srgb, var(--bs-primary) 26%, transparent) !important; color: color-mix(in srgb, var(--bs-primary) 55%, #fff) !important; } /* Sidebar active accent (Mazer) follows the theme. */ .sidebar-item.active > .sidebar-link, .sidebar-link.active, #sidebar .sidebar-item.active .sidebar-link { color: var(--bs-primary) !important; } /* Theme picker swatches (used by the header menu). */ .pims-theme-swatch { width: 20px; height: 20px; border-radius: 6px; display: inline-block; border: 1px solid var(--bs-border-color); flex: 0 0 auto; } .pims-theme-item.active { background: color-mix(in srgb, var(--bs-primary) 12%, transparent); font-weight: 600; } .pims-theme-item.active .pims-check { opacity: 1; } .pims-theme-item .pims-check { opacity: 0; margin-left: auto; color: var(--bs-primary); } /* =========================================================================== MOBILE-FIRST + broader UI/UX polish. All ADDITIVE and token-driven: opt-in helper classes + cosmetic refinements, so nothing existing changes shape unexpectedly. Adapts to theme + dark. =========================================================================== */ /* --- Icon-first actions on phones --- Put a button's text in and add class "pims-action": on phones the label collapses and the button becomes a tidy icon-only touch target; desktop keeps the full label. Add title="…" for an accessible tooltip. Purely opt-in — only affects buttons you tag. */ @media (max-width: 575.98px) { .pims-btn-label { display: none !important; } .btn.pims-action { padding-left: .62rem; padding-right: .62rem; } .btn.pims-action i, .btn.pims-action .bi { margin: 0 !important; } /* Comfortable 42px+ touch targets for icon buttons. */ .btn.rounded-circle, .btn-icon, .btn.pims-action { min-width: 42px; min-height: 42px; } } /* Wide content scrolls inside its own box on small screens, never the page. */ .pims-scroll-x { overflow-x: auto; -webkit-overflow-scrolling: touch; } /* Content modals — crisp hairlines + calm elevation (modals are content). */ .modal-content { border: 1px solid var(--pims-hairline); box-shadow: var(--pims-shadow-lg); } .modal-header, .modal-footer { border-color: var(--pims-hairline); } /* Alerts inside content. */ .alert { border-radius: 12px; } /* Reusable empty-state block. */ .pims-empty { text-align: center; padding: 2.75rem 1rem; color: var(--bs-secondary-color); } .pims-empty i, .pims-empty .bi { font-size: 2.1rem; opacity: .5; display: block; margin-bottom: .5rem; } .pims-empty h6 { color: var(--bs-body-color); font-weight: 700; }