/* ═══════════════════════════════════════════════════ DMS — Global Dark Mode Applied when is set ═══════════════════════════════════════════════════ */ /* ── CSS Variables ── */ body.dark-mode { --bg-page: #1a1f2e; --bg-surface: #222736; --bg-raised: #2a3145; --bg-hover: #323a52; --border: #2e3650; --border-subtle: #38435e; --text-primary: #e8edf5; --text-secondary: #9aa5be; --text-muted: #5e6a84; --accent: #7c3aed; --accent-light: rgba(124,58,237,0.15); background-color: var(--bg-page) !important; color: var(--text-primary) !important; } /* ── Page backgrounds ── */ body.dark-mode .main-page, body.dark-mode .dms-body, body.dark-mode .dms-content, body.dark-mode .bg-gray-25, body.dark-mode .bg-gray-50, body.dark-mode .bg-gray-100, body.dark-mode .container.cr5 { background-color: var(--bg-page) !important; } /* ── Text colors ── */ body.dark-mode, body.dark-mode span, body.dark-mode div, body.dark-mode a, body.dark-mode li { color: var(--text-primary); } body.dark-mode .color-gray-900, body.dark-mode .color-gray-800, body.dark-mode .color-gray-700 { color: var(--text-primary) !important; } body.dark-mode .color-gray-600, body.dark-mode .text-muted, body.dark-mode small, body.dark-mode small.ts { color: var(--text-secondary) !important; } /* ── Headings ── */ body.dark-mode h1, body.dark-mode h2, body.dark-mode h3, body.dark-mode h4, body.dark-mode h5, body.dark-mode h6, body.dark-mode p { color: var(--text-primary) !important; } /* ── Cards & surfaces ── */ body.dark-mode .bg-white, body.dark-mode .card, body.dark-mode .card-body { background-color: var(--bg-surface) !important; color: var(--text-primary) !important; } body.dark-mode .border, body.dark-mode .border-bottom, body.dark-mode .border-top { border-color: var(--border) !important; } body.dark-mode .cr3, body.dark-mode .cr5, body.dark-mode .cr7 { border-color: var(--border) !important; } /* ── Tables ── */ body.dark-mode .table { color: var(--text-primary) !important; border-color: var(--border) !important; } body.dark-mode .table thead, body.dark-mode .th-header, body.dark-mode .table th { background-color: var(--bg-raised) !important; color: var(--text-secondary) !important; border-color: var(--border) !important; } body.dark-mode .table td { background-color: transparent !important; border-color: var(--border) !important; color: var(--text-primary) !important; } body.dark-mode .table-striped tbody tr:nth-of-type(odd) td { background-color: rgba(255,255,255,0.02) !important; } body.dark-mode .table-hover tbody tr:hover td { background-color: var(--bg-hover) !important; } body.dark-mode .table-hover tbody tr:hover { color: var(--text-primary) !important; } body.dark-mode .mb-2 { background: var(--bg-surface) !important; border-color: var(--border) !important; } body.dark-mode .table tbody tr { border-color: var(--border) !important; } /* ── Forms & Inputs ── */ body.dark-mode .form-control, body.dark-mode input.form-control, body.dark-mode textarea.form-control, body.dark-mode select.form-control, body.dark-mode input[type="text"], body.dark-mode input[type="password"], body.dark-mode input[type="email"], body.dark-mode input[type="number"], body.dark-mode input[type="search"], body.dark-mode input[type="date"], body.dark-mode input[type="time"], body.dark-mode input[type="color"], body.dark-mode textarea, body.dark-mode select, body.dark-mode .form-body input, body.dark-mode .form-body select, body.dark-mode .form-body textarea { background-color: var(--bg-raised) !important; border-color: var(--border-subtle) !important; color: var(--text-primary) !important; -webkit-text-fill-color: var(--text-primary) !important; } body.dark-mode .form-control:focus, body.dark-mode input:focus, body.dark-mode textarea:focus, body.dark-mode select:focus { border-color: #7c3aed !important; box-shadow: 0 0 0 3px rgba(124,58,237,0.15) !important; background-color: var(--bg-raised) !important; } body.dark-mode .form-control::placeholder, body.dark-mode input::placeholder, body.dark-mode textarea::placeholder { color: var(--text-muted) !important; } body.dark-mode .form-label, body.dark-mode label, body.dark-mode .c-g500, body.dark-mode .c-g600, body.dark-mode .c-g700, body.dark-mode .c-g800, body.dark-mode .c-g900 { color: var(--text-secondary) !important; } /* ── Autofill override ── */ body.dark-mode input:-webkit-autofill, body.dark-mode input:-webkit-autofill:hover, body.dark-mode input:-webkit-autofill:focus { -webkit-box-shadow: 0 0 0 1000px var(--bg-raised) inset !important; -webkit-text-fill-color: var(--text-primary) !important; caret-color: var(--text-primary) !important; } /* ── ng-select ── */ body.dark-mode .ng-select .ng-select-container, body.dark-mode .ng-select.form-control .ng-select-container, body.dark-mode .form-control.ng-select .ng-select-container { background-color: var(--bg-raised) !important; border-color: var(--border-subtle) !important; color: var(--text-primary) !important; } body.dark-mode .ng-select .ng-value-label, body.dark-mode .ng-select .ng-value { color: var(--text-primary) !important; } body.dark-mode .ng-select .ng-placeholder { color: var(--text-muted) !important; } body.dark-mode .ng-select .ng-input input { color: var(--text-primary) !important; background: transparent !important; } body.dark-mode .ng-select .ng-arrow-wrapper .ng-arrow { border-color: var(--text-muted) transparent transparent !important; } body.dark-mode .ng-select.ng-select-opened .ng-select-container { border-color: #7c3aed !important; } body.dark-mode .ng-select.ng-select-focused .ng-select-container { border-color: #7c3aed !important; box-shadow: 0 0 0 3px rgba(124,58,237,0.15) !important; } body.dark-mode .ng-dropdown-panel, body.dark-mode .ng-dropdown-panel.ng-select-bottom { background-color: var(--bg-surface) !important; border-color: var(--border) !important; box-shadow: 0 4px 20px rgba(0,0,0,0.4) !important; } body.dark-mode .ng-dropdown-panel .ng-dropdown-panel-items { background-color: var(--bg-surface) !important; } body.dark-mode .ng-dropdown-panel .ng-option { background-color: var(--bg-surface) !important; color: var(--text-primary) !important; } body.dark-mode .ng-dropdown-panel .ng-option:hover, body.dark-mode .ng-dropdown-panel .ng-option.ng-option-marked { background-color: var(--bg-hover) !important; color: var(--text-primary) !important; } body.dark-mode .ng-dropdown-panel .ng-option.ng-option-selected { background-color: var(--accent-light) !important; color: #a78bfa !important; } /* ── Buttons ── */ body.dark-mode .btn-outline-secondary, body.dark-mode .rb-btn-secondary { background-color: var(--bg-raised) !important; border-color: var(--border-subtle) !important; color: var(--text-primary) !important; } body.dark-mode .btn-outline-secondary:hover, body.dark-mode .rb-btn-secondary:hover { border-color: var(--accent) !important; color: #a78bfa !important; } /* purple bg/color already handled by module-color section above */ body.dark-mode .btn-light { background-color: var(--bg-raised) !important; border-color: var(--border) !important; color: var(--text-primary) !important; } /* ── Badges & Tags dark ── */ body.dark-mode .badge { opacity: 0.9; } /* ── HR divider ── */ body.dark-mode hr { border-color: var(--border) !important; } /* ── Skeleton loader ── */ body.dark-mode .table-skelton, body.dark-mode app-table-skelton { background: var(--bg-surface) !important; } /* ── Pagination ── */ body.dark-mode .page-link { background-color: var(--bg-surface) !important; border-color: var(--border) !important; color: var(--text-secondary) !important; } body.dark-mode .page-item.active .page-link { background-color: var(--accent) !important; border-color: var(--accent) !important; color: #fff !important; } body.dark-mode .page-item.disabled .page-link { color: var(--text-muted) !important; } /* ── Modal ── */ body.dark-mode .modal-content { background-color: var(--bg-surface) !important; border-color: var(--border) !important; color: var(--text-primary) !important; } body.dark-mode .modal-header, body.dark-mode .modal-footer { border-color: var(--border) !important; } body.dark-mode .modal-backdrop { opacity: 0.7 !important; } body.dark-mode .btn-close { filter: invert(1); } /* ── Dropdowns ── */ body.dark-mode .dropdown-menu { background-color: var(--bg-surface) !important; border-color: var(--border) !important; } body.dark-mode .dropdown-item { color: var(--text-primary) !important; } body.dark-mode .dropdown-item:hover { background-color: var(--bg-hover) !important; } body.dark-mode .dropdown-divider { border-color: var(--border) !important; } /* ── Sidebar (generic .sidebar class) ── */ body.dark-mode .sidebar { background-color: var(--bg-surface) !important; border-color: var(--border) !important; } body.dark-mode .sidebar-header { background-color: var(--bg-raised) !important; border-color: var(--border) !important; color: var(--text-primary) !important; } /* ── Alerts / info boxes ── */ body.dark-mode .alert { border-color: var(--border) !important; } body.dark-mode .alert-info { background-color: rgba(14,165,233,0.1) !important; color: #7dd3fc !important; } body.dark-mode .alert-warning { background-color: rgba(245,158,11,0.1) !important; color: #fcd34d !important; } body.dark-mode .alert-danger { background-color: rgba(239,68,68,0.1) !important; color: #fca5a5 !important; } body.dark-mode .alert-success { background-color: rgba(16,185,129,0.1) !important; color: #6ee7b7 !important; } body.dark-mode [style*="background-color: #fff5f5"] { background-color: rgba(239,68,68,0.1) !important; } body.dark-mode [style*="background-color: #f0fff4"] { background-color: rgba(16,185,129,0.1) !important; } body.dark-mode [style*="background-color: #fffbeb"] { background-color: rgba(245,158,11,0.1) !important; } /* ── Misc utility overrides ── */ body.dark-mode .mb-2 { background-color: transparent !important; } body.dark-mode .shadow, body.dark-mode .shadow-sm { box-shadow: 0 2px 12px rgba(0,0,0,0.4) !important; } body.dark-mode .list-group-item { background-color: var(--bg-surface) !important; border-color: var(--border) !important; color: var(--text-primary) !important; } /* ── PrimeNG components ── */ body.dark-mode .p-calendar .p-inputtext { background: var(--bg-raised) !important; color: var(--text-primary) !important; border-color: var(--border-subtle) !important; } body.dark-mode .p-datepicker { background: var(--bg-surface) !important; border-color: var(--border) !important; color: var(--text-primary) !important; } body.dark-mode .p-datepicker .p-datepicker-header { background: var(--bg-raised) !important; border-color: var(--border) !important; } body.dark-mode .p-datepicker table td > span { color: var(--text-primary) !important; } body.dark-mode .p-datepicker table td > span:hover { background: var(--bg-hover) !important; } body.dark-mode .p-datepicker table td.p-datepicker-today > span { background: var(--accent-light) !important; color: #a78bfa !important; } body.dark-mode .p-chips .p-chips-multiple-container { background: var(--bg-raised) !important; border-color: var(--border-subtle) !important; } body.dark-mode .p-chips .p-chips-token { background: var(--accent-light) !important; color: #a78bfa !important; } body.dark-mode .p-inputswitch .p-inputswitch-slider { background: var(--bg-hover) !important; } body.dark-mode .p-inputswitch.p-inputswitch-checked .p-inputswitch-slider { background: var(--accent) !important; } /* ── RTL support ── */ [dir="rtl"] body.dark-mode .border-right { border-right: none !important; border-left: 1px solid var(--border) !important; } /* ═══════════════════════════════════════════════════ SCROLL FIX — custom.css sets overflow-y:hidden on body ═══════════════════════════════════════════════════ */ body { overflow-y: auto !important; overflow-x: hidden !important; } .dms-shell { min-height: 100vh; overflow-y: visible !important; } .dms-body { overflow-y: visible !important; } .dms-content { overflow-y: visible !important; } /* ═══════════════════════════════════════════════════ GLOBAL RESPONSIVE — loaded last so overrides bootstrap ═══════════════════════════════════════════════════ */ /* Page wrapper padding on mobile */ @media (max-width: 768px) { .mb-2 { padding: 8px !important; } .dms-content--padded { padding: 12px 10px !important; } } /* Tables: always scroll horizontally, never overflow page */ .scolled { overflow-x: auto !important; white-space: normal !important; /* allow cell text to wrap */ } table { width: 100%; } /* Table cells: allow wrapping on small screens */ @media (max-width: 900px) { table tr th, table tr td { white-space: normal !important; word-break: break-word; } } /* Bootstrap col-2 filter grids: stack on small screens */ @media (max-width: 900px) { .form-body .col-2, .form-body .col-3 { flex: 0 0 auto; width: 33.333% !important; } } @media (max-width: 600px) { .form-body .col-2, .form-body .col-3, .form-body .col-4 { flex: 0 0 auto; width: 50% !important; } } @media (max-width: 420px) { .form-body .col-2, .form-body .col-3, .form-body .col-4, .form-body .col-6 { flex: 0 0 auto; width: 100% !important; } } /* Page headers: stack buttons on mobile */ @media (max-width: 600px) { .d-flex.justify-content-between.align-items-center { flex-wrap: wrap; gap: 8px; } .d-flex.justify-content-between.align-items-center > .d-flex { flex-wrap: wrap; gap: 4px; } } /* Login responsive */ @media (max-width: 768px) { .login-root { flex-direction: column !important; } .brand-panel { flex: none !important; min-height: 35vh !important; padding: 32px 24px !important; } .form-panel { flex: none !important; padding: 32px 20px 48px !important; } .form-panel::before { display: none !important; } .brand-footer { display: none !important; } } /* ═══════════════════════════════════════════════════ PLAYFUL TABLE REDESIGN — global ═══════════════════════════════════════════════════ */ /* Page card wrapper */ .mb-2 { background: #ffffff; border-radius: 16px; border: 1px solid #e8e5df; box-shadow: 0 2px 12px rgba(0,0,0,0.05); overflow: hidden; } /* Page header row */ .mb-2 > .d-flex.justify-content-between { padding: 18px 20px 14px !important; border-bottom: 2px solid #f3f0eb; } /* Page title */ .mb-2 h2.color-gray-600 { font-size: 1.25rem !important; font-weight: 700 !important; color: #0f172a !important; letter-spacing: -0.02em; } /* Count badge */ .mb-2 .bg-purple-50 { font-size: 0.7rem !important; font-weight: 700 !important; letter-spacing: 0.06em; border-radius: 20px !important; padding: 3px 10px !important; } /* Divider */ .mb-2 > hr { margin: 0 !important; border-color: #f3f0eb !important; opacity: 1 !important; } /* Search form area */ .mb-2 .form-body { padding: 14px 20px !important; background: #faf9f7; border-bottom: 1px solid #ede9e3; } /* Table container */ .scolled { padding: 0 !important; overflow-x: auto !important; overflow-y: visible !important; } /* Table */ .table { margin-bottom: 0 !important; border-collapse: separate !important; border-spacing: 0 !important; width: 100% !important; } /* Header */ .table .th-header th, .table thead th { background: #f7f5f1 !important; color: #64748b !important; font-size: 0.72rem !important; font-weight: 700 !important; text-transform: uppercase !important; letter-spacing: 0.08em !important; padding: 12px 16px !important; border-bottom: 2px solid #ede9e3 !important; border-top: none !important; white-space: nowrap; position: sticky; top: 0; z-index: 9; } .table .th-header th:first-child { border-radius: 0 !important; padding-left: 20px !important; } .table .th-header th:last-child { padding-right: 20px !important; } /* Sort icon */ .sort-icon { font-size: 0.8rem; color: #cbd5e1; } .sort-icon-ase { color: var(--mod-color, #f59e0b) !important; } .sort-icon-des { color: var(--mod-color, #f59e0b) !important; } /* Body rows */ .table tbody tr { transition: background 0.15s, transform 0.15s !important; border-bottom: 1px solid #f1ede8 !important; } .table tbody tr:last-child { border-bottom: none !important; } .table tbody tr td { background: #ffffff !important; color: #334155 !important; font-size: 0.875rem !important; padding: 13px 16px !important; border: none !important; border-bottom: 1px solid #f1ede8 !important; vertical-align: middle !important; transition: background 0.15s !important; } .table tbody tr td:first-child { padding-left: 20px !important; } .table tbody tr td:last-child { padding-right: 20px !important; } /* Row number cell — small muted */ .table tbody tr td:first-child { color: #94a3b8 !important; font-size: 0.78rem !important; font-weight: 600 !important; } /* Hover — left accent bar via box-shadow */ .table-hover tbody tr:hover td { background: #fef9f0 !important; color: #1e293b !important; } .table-hover tbody tr:hover td:first-child { box-shadow: inset 3px 0 0 var(--mod-color, #f59e0b) !important; } /* No data row */ .table tbody tr td[colspan] { text-align: center !important; padding: 48px 20px !important; color: #94a3b8 !important; font-size: 0.875rem !important; background: #ffffff !important; } /* Pagination wrapper */ .pb-2 { padding: 10px 20px 14px !important; border-top: 1px solid #f1ede8; background: #faf9f7; } /* ── DARK MODE table overrides ── */ body.dark-mode .mb-2 { background: var(--bg-surface) !important; border-color: var(--border) !important; box-shadow: 0 2px 12px rgba(0,0,0,0.2) !important; } body.dark-mode .mb-2 > .d-flex.justify-content-between { border-bottom-color: var(--border) !important; } body.dark-mode .mb-2 h2.color-gray-600 { color: var(--text-primary) !important; } body.dark-mode .mb-2 > hr { border-color: var(--border) !important; } body.dark-mode .mb-2 .form-body { background: var(--bg-raised) !important; border-bottom-color: var(--border) !important; } body.dark-mode .table .th-header th, body.dark-mode .table thead th { background: var(--bg-raised) !important; color: var(--text-muted) !important; border-bottom-color: var(--border) !important; } body.dark-mode .table tbody tr { border-bottom-color: var(--border) !important; } body.dark-mode .table tbody tr td { background: var(--bg-surface) !important; color: var(--text-secondary) !important; border-bottom-color: var(--border) !important; } body.dark-mode .table tbody tr td:first-child { color: var(--text-muted) !important; } body.dark-mode .table-hover tbody tr:hover td { background: var(--bg-raised) !important; color: var(--text-primary) !important; } body.dark-mode .table-hover tbody tr:hover td:first-child { box-shadow: inset 3px 0 0 var(--mod-color, #f59e0b) !important; } body.dark-mode .table tbody tr td[colspan] { background: var(--bg-surface) !important; color: var(--text-muted) !important; } body.dark-mode .pb-2 { border-top-color: var(--border) !important; background: var(--bg-raised) !important; } /* ═══════════════════════════════════════════════════ CREATE / EDIT PAGE REDESIGN — global ═══════════════════════════════════════════════════ */ /* ── Page header bar ── */ .dms-content--padded .d-flex.justify-content-between.align-items-center.py-2 { background: #ffffff; border-radius: 16px 16px 0 0; border: 1.5px solid #e8e5df; border-bottom: none; padding: 16px 24px !important; margin-bottom: 0 !important; position: relative; } /* colored top accent on header */ .dms-content--padded .d-flex.justify-content-between.align-items-center.py-2::before { content: ''; position: absolute; top: 0; left: 24px; right: 24px; height: 3px; background: var(--mod-color, #f59e0b); border-radius: 0 0 4px 4px; } /* ── Back + title ── */ .dms-content--padded p.mb-0.color-gray-600.ts-3 { font-size: 1.1rem !important; font-weight: 700 !important; color: #0f172a !important; display: flex !important; align-items: center !important; gap: 10px !important; } .dms-content--padded p.mb-0.color-gray-600.ts-3 img { width: 22px; height: 22px; opacity: 0.4; transition: opacity 0.2s, transform 0.2s; } .dms-content--padded p.mb-0.color-gray-600.ts-3 img:hover { opacity: 0.9; transform: translateX(-3px); } /* ── Hide the bare

── */ .dms-content--padded > * > hr, .dms-content--padded hr { margin: 0 !important; border: none !important; height: 0 !important; display: none !important; } /* ── Form card ── */ .dms-content--padded form { background: #ffffff; border: 1.5px solid #e8e5df; border-top: none; border-radius: 0 0 16px 16px; padding: 32px 28px 36px !important; box-shadow: 0 8px 32px rgba(0,0,0,0.06); position: relative; overflow: hidden; } /* Decorative dot-grid background on form */ .dms-content--padded form::after { content: ''; position: absolute; top: 0; right: 0; width: 240px; height: 240px; background-image: radial-gradient(circle, color-mix(in srgb, var(--mod-color, #f59e0b) 18%, transparent) 1.5px, transparent 1.5px); background-size: 18px 18px; border-radius: 0 0 0 100%; opacity: 0.5; pointer-events: none; } /* ── Field rows ── */ .dms-content--padded form .row { row-gap: 20px !important; } .dms-content--padded form .row.pb-4, .dms-content--padded form .row.pb-5 { padding-bottom: 20px !important; margin-bottom: 4px; border-bottom: 1px dashed #ede9e3; } .dms-content--padded form .row.pb-4:last-of-type, .dms-content--padded form .row.pb-5:last-of-type { border-bottom: none; padding-bottom: 0 !important; } /* ── Save / action buttons ── */ .dms-content--padded .bg-purple-500, .dms-content--padded .bg-brand-500 { border-radius: 10px !important; padding: 10px 24px !important; font-size: 0.875rem !important; font-weight: 600 !important; letter-spacing: 0.03em; box-shadow: 0 3px 10px color-mix(in srgb, var(--mod-color, #f59e0b) 40%, transparent) !important; transition: filter 0.18s, box-shadow 0.18s, transform 0.15s !important; position: relative; overflow: hidden; } .dms-content--padded .bg-purple-500::after, .dms-content--padded .bg-brand-500::after { content: ''; position: absolute; inset: 0; background: linear-gradient(135deg, rgba(255,255,255,0.15) 0%, transparent 60%); pointer-events: none; } .dms-content--padded .bg-purple-500:hover:not(:disabled), .dms-content--padded .bg-brand-500:hover:not(:disabled) { filter: brightness(0.92); transform: translateY(-2px); box-shadow: 0 6px 18px color-mix(in srgb, var(--mod-color, #f59e0b) 50%, transparent) !important; } .dms-content--padded .bg-purple-500:active:not(:disabled), .dms-content--padded .bg-brand-500:active:not(:disabled) { transform: translateY(0); } /* ── DARK MODE ── */ body.dark-mode .dms-content--padded .d-flex.justify-content-between.align-items-center.py-2 { background: var(--bg-surface) !important; border-color: var(--border) !important; } body.dark-mode .dms-content--padded p.mb-0.color-gray-600.ts-3 { color: var(--text-primary) !important; } body.dark-mode .dms-content--padded form { background: var(--bg-surface) !important; border-color: var(--border) !important; box-shadow: 0 8px 32px rgba(0,0,0,0.25) !important; } body.dark-mode .dms-content--padded form .row.pb-4, body.dark-mode .dms-content--padded form .row.pb-5 { border-bottom-color: var(--border) !important; } /* ═══════════════════════════════════════════════════ MODULE COLOR — remap purple utility classes bg-purple-* and color-purple-* use --mod-color so every page follows its module's theme color ═══════════════════════════════════════════════════ */ /* solid fill buttons / backgrounds */ .bg-purple-500, .bg-purple-600, .bg-purple-700 { background-color: var(--mod-color, #972ccc) !important; } .bg-purple-400 { background-color: color-mix(in srgb, var(--mod-color, #ae45e5) 85%, white) !important; } .bg-purple-300 { background-color: color-mix(in srgb, var(--mod-color, #c368f9) 60%, white) !important; } .bg-purple-200 { background-color: color-mix(in srgb, var(--mod-color, #db9dff) 35%, white) !important; } .bg-purple-100 { background-color: color-mix(in srgb, var(--mod-color, #eed1ff) 20%, white) !important; } .bg-purple-50, .bg-purple-25 { background-color: color-mix(in srgb, var(--mod-color, #f8ebff) 10%, white) !important; } /* text colors */ .color-purple-700, .color-purple-600 { color: var(--mod-color, #6d1a99) !important; } .color-purple-500 { color: var(--mod-color, #972ccc) !important; } .color-purple-400, .color-purple-300 { color: color-mix(in srgb, var(--mod-color, #ae45e5) 80%, white) !important; } /* border colors */ .bc-purple-500, .bc-purple-600, .bc-purple-700 { border-color: var(--mod-color, #972ccc) !important; } /* Search button inside rb-btn-secondary */ .rb-btn-secondary { color: var(--mod-color, #6d1a99) !important; border-color: color-mix(in srgb, var(--mod-color, #972ccc) 40%, transparent) !important; } .rb-btn-secondary:hover { background-color: color-mix(in srgb, var(--mod-color, #972ccc) 8%, transparent) !important; } /* ngx-pagination current page */ .ngx-pagination .current { background-color: color-mix(in srgb, var(--mod-color, #972ccc) 12%, transparent) !important; color: var(--mod-color, #6d1a99) !important; } /* ═══════════════════════════════════════════════════ PROFESSIONAL FORM ELEMENTS — LIGHT MODE BASELINE Applied globally (light mode is the default) ═══════════════════════════════════════════════════ */ /* ── Inputs & Textareas ── */ .form-control, input.form-control, textarea.form-control, input[type="text"]:not([class*="search"]), input[type="password"], input[type="email"], input[type="number"], input[type="search"], input[type="date"], input[type="time"], textarea, select.form-control { height: 38px; padding: 0 12px; font-size: 0.875rem; border: 1px solid #d1d5db; border-radius: 8px; background: #ffffff; color: #1e293b; transition: border-color 0.18s, box-shadow 0.18s; box-shadow: 0 1px 2px rgba(0,0,0,0.04); } textarea.form-control { height: auto; padding: 10px 12px; } .form-control:focus, input[type="text"]:focus, input[type="password"]:focus, input[type="email"]:focus, input[type="number"]:focus, input[type="date"]:focus, input[type="time"]:focus, textarea:focus, select.form-control:focus { border-color: var(--mod-color, #f59e0b) !important; box-shadow: 0 0 0 3px color-mix(in srgb, var(--mod-color, #f59e0b) 20%, transparent) !important; outline: none; } .form-control::placeholder, input::placeholder, textarea::placeholder { color: #9ca3af; font-size: 0.85rem; } /* ── Labels ── */ .form-label, label:not(.form-check-label):not(.btn) { font-size: 0.8rem; font-weight: 600; color: #374151; margin-bottom: 4px; letter-spacing: 0.01em; } /* ── ng-select (light) ── */ .ng-select .ng-select-container { min-height: 38px !important; border: 1px solid #d1d5db !important; border-radius: 8px !important; background: #ffffff !important; color: #1e293b !important; font-size: 0.875rem !important; box-shadow: 0 1px 2px rgba(0,0,0,0.04) !important; transition: border-color 0.18s, box-shadow 0.18s !important; padding: 0 !important; } .ng-select .ng-select-container .ng-value-container { padding: 0 10px !important; align-items: center !important; } .ng-select .ng-select-container .ng-value-container .ng-input { padding: 0 !important; top: auto !important; } .ng-select .ng-select-container .ng-value-container .ng-placeholder { top: auto !important; padding: 0 !important; transform: none !important; position: relative !important; } .ng-select.ng-select-focused .ng-select-container, .ng-select.ng-select-opened .ng-select-container { border-color: var(--mod-color, #f59e0b) !important; box-shadow: none !important; } /* when open bottom, flatten the bottom of the input */ .ng-select.ng-select-opened.ng-select-bottom .ng-select-container { border-bottom-left-radius: 0 !important; border-bottom-right-radius: 0 !important; border-bottom-color: transparent !important; } /* when open top, flatten the top of the input */ .ng-select.ng-select-opened.ng-select-top .ng-select-container { border-top-left-radius: 0 !important; border-top-right-radius: 0 !important; border-top-color: transparent !important; } .ng-select .ng-placeholder { color: #9ca3af !important; font-size: 0.85rem !important; } .ng-select .ng-value-label { color: #1e293b !important; font-size: 0.875rem !important; } .ng-select .ng-arrow-wrapper .ng-arrow { border-color: #9ca3af transparent transparent !important; } .ng-select.ng-select-opened .ng-arrow { border-color: transparent transparent #9ca3af !important; } .ng-dropdown-panel { border: 1px solid var(--mod-color, #d1d5db) !important; border-top: none !important; border-radius: 0 0 8px 8px !important; box-shadow: 0 6px 20px rgba(0,0,0,0.08) !important; background: #ffffff !important; overflow: hidden; margin-top: 0 !important; margin-inline-start: 0 !important; padding: 0 !important; } .ng-dropdown-panel.ng-select-top { border-radius: 8px 8px 0 0 !important; border-top: 1px solid var(--mod-color, #d1d5db) !important; border-bottom: none !important; box-shadow: 0 -6px 20px rgba(0,0,0,0.08) !important; margin-bottom: 0 !important; padding: 0 !important; } .ng-dropdown-panel .ng-dropdown-panel-items { padding: 4px !important; } .ng-dropdown-panel .ng-dropdown-panel-items { background: #ffffff !important; } .ng-dropdown-panel .ng-option { padding: 9px 14px !important; font-size: 0.875rem !important; color: #1e293b !important; border-radius: 0 !important; transition: background 0.12s !important; } .ng-dropdown-panel .ng-option:hover, .ng-dropdown-panel .ng-option.ng-option-marked { background: #fef9ee !important; color: #92400e !important; } .ng-dropdown-panel .ng-option.ng-option-selected { background: rgba(245,158,11,0.1) !important; color: #d97706 !important; font-weight: 600 !important; } /* ── Buttons — base reset ── */ .btn { font-size: 0.85rem !important; font-weight: 500 !important; border-radius: 8px !important; padding: 7px 16px !important; transition: background 0.18s, border-color 0.18s, box-shadow 0.18s, color 0.18s !important; display: inline-flex !important; align-items: center !important; gap: 6px !important; border: 1px solid transparent !important; cursor: pointer !important; white-space: nowrap !important; } .btn:focus { box-shadow: 0 0 0 3px rgba(245,158,11,0.2) !important; } /* Primary — uses module color */ .btn-primary, .btn-with-icon, .btn-without-icon { background: var(--mod-color, #0083e6) !important; border-color: var(--mod-color, #0083e6) !important; color: #fff !important; } .btn-primary:hover, .btn-with-icon:hover, .btn-without-icon:hover { filter: brightness(0.88); color: #fff !important; } /* Success */ .btn-success { background: #10b981 !important; border-color: #10b981 !important; color: #fff !important; } .btn-success:hover { background: #059669 !important; border-color: #059669 !important; } /* Danger */ .btn-danger { background: #ef4444 !important; border-color: #ef4444 !important; color: #fff !important; } .btn-danger:hover { background: #dc2626 !important; border-color: #dc2626 !important; } /* Warning */ .btn-warning { background: #f59e0b !important; border-color: #f59e0b !important; color: #fff !important; } .btn-warning:hover { background: #d97706 !important; border-color: #d97706 !important; } /* Secondary / outline */ .btn-secondary, .btn-outline-secondary { background: #f8fafc !important; border-color: #d1d5db !important; color: #374151 !important; } .btn-secondary:hover, .btn-outline-secondary:hover { background: #f1f5f9 !important; border-color: #9ca3af !important; color: #1e293b !important; } /* Light */ .btn-light { background: #f3f4f6 !important; border-color: #e5e7eb !important; color: #374151 !important; } .btn-light:hover { background: #e5e7eb !important; } /* Disabled */ .btn:disabled, .btn[disabled] { opacity: 0.45 !important; cursor: not-allowed !important; pointer-events: none !important; } /* bs-datepicker styles moved to bottom unified section */ /* ── Checkboxes & Radios ── */ .form-check-input { border-radius: 4px !important; border: 1.5px solid #d1d5db !important; background: #fff !important; cursor: pointer !important; transition: border-color 0.18s, box-shadow 0.18s !important; } .form-check-input:checked { background-color: #f59e0b !important; border-color: #f59e0b !important; } .form-check-input:focus { box-shadow: 0 0 0 3px rgba(245,158,11,0.2) !important; border-color: #f59e0b !important; } .form-check-input[type="radio"] { border-radius: 50% !important; } /* ── Pagination ── */ .ngx-pagination .current { background-color: rgba(245,158,11,0.12) !important; color: #d97706 !important; border-radius: 6px !important; } .ngx-pagination li:hover:not(.current):not(.disabled) { background-color: #f1f5f9 !important; border-radius: 6px !important; } /* ════════════════════════════════════════════════════ DARK MODE OVERRIDES for all the above ════════════════════════════════════════════════════ */ /* Inputs */ body.dark-mode .form-control, body.dark-mode input.form-control, body.dark-mode textarea.form-control, body.dark-mode input[type="text"], body.dark-mode input[type="password"], body.dark-mode input[type="email"], body.dark-mode input[type="number"], body.dark-mode input[type="date"], body.dark-mode input[type="time"], body.dark-mode textarea, body.dark-mode select.form-control { background: var(--bg-raised) !important; border-color: var(--border-subtle) !important; color: var(--text-primary) !important; box-shadow: none !important; } body.dark-mode .form-control:focus, body.dark-mode input[type="text"]:focus, body.dark-mode input[type="password"]:focus, body.dark-mode input[type="email"]:focus, body.dark-mode input[type="number"]:focus, body.dark-mode input[type="date"]:focus, body.dark-mode input[type="time"]:focus, body.dark-mode textarea:focus, body.dark-mode select.form-control:focus { border-color: #f59e0b !important; box-shadow: 0 0 0 3px rgba(245,158,11,0.15) !important; } body.dark-mode .form-label, body.dark-mode label:not(.form-check-label):not(.btn) { color: var(--text-secondary) !important; } /* ng-select dark */ body.dark-mode .ng-select .ng-select-container { background: var(--bg-raised) !important; border-color: var(--border-subtle) !important; color: var(--text-primary) !important; box-shadow: none !important; } body.dark-mode .ng-select.ng-select-focused .ng-select-container, body.dark-mode .ng-select.ng-select-opened .ng-select-container { border-color: var(--mod-color, #f59e0b) !important; box-shadow: none !important; } body.dark-mode .ng-select.ng-select-opened.ng-select-bottom .ng-select-container { border-bottom-left-radius: 0 !important; border-bottom-right-radius: 0 !important; border-bottom-color: transparent !important; } body.dark-mode .ng-select.ng-select-opened.ng-select-top .ng-select-container { border-top-left-radius: 0 !important; border-top-right-radius: 0 !important; border-top-color: transparent !important; } body.dark-mode .ng-select .ng-placeholder { color: var(--text-muted) !important; } body.dark-mode .ng-select .ng-value-label { color: var(--text-primary) !important; } body.dark-mode .ng-dropdown-panel { background: var(--bg-surface) !important; border: 1px solid var(--mod-color, var(--border)) !important; border-top: none !important; box-shadow: 0 6px 24px rgba(0,0,0,0.3) !important; margin-inline-start: 0 !important; border-radius: 0 0 8px 8px !important; margin-top: 0 !important; padding: 0 !important; } body.dark-mode .ng-dropdown-panel.ng-select-top { border-radius: 8px 8px 0 0 !important; border-top: 1px solid var(--mod-color, var(--border)) !important; border-bottom: none !important; } body.dark-mode .ng-dropdown-panel .ng-dropdown-panel-items { padding: 4px !important; } body.dark-mode .ng-dropdown-panel .ng-dropdown-panel-items { background: var(--bg-surface) !important; } body.dark-mode .ng-dropdown-panel .ng-option { background: var(--bg-surface) !important; color: var(--text-primary) !important; } body.dark-mode .ng-dropdown-panel .ng-option:hover, body.dark-mode .ng-dropdown-panel .ng-option.ng-option-marked { background: var(--bg-hover) !important; color: var(--text-primary) !important; } body.dark-mode .ng-dropdown-panel .ng-option.ng-option-selected { background: rgba(245,158,11,0.12) !important; color: #fbbf24 !important; } /* Buttons dark */ body.dark-mode .btn-secondary, body.dark-mode .btn-outline-secondary { background: var(--bg-raised) !important; border-color: var(--border-subtle) !important; color: var(--text-primary) !important; } body.dark-mode .btn-secondary:hover, body.dark-mode .btn-outline-secondary:hover { background: var(--bg-hover) !important; border-color: #f59e0b !important; color: #fbbf24 !important; } body.dark-mode .btn-light { background: var(--bg-raised) !important; border-color: var(--border) !important; color: var(--text-primary) !important; } body.dark-mode .btn-light:hover { background: var(--bg-hover) !important; } /* bs-datepicker dark moved to bottom unified section */ /* Checkboxes dark */ body.dark-mode .form-check-input { background: var(--bg-raised) !important; border-color: var(--border-subtle) !important; } body.dark-mode .form-check-input:checked { background-color: #f59e0b !important; border-color: #f59e0b !important; } /* Pagination dark */ body.dark-mode .ngx-pagination .current { background-color: rgba(245,158,11,0.15) !important; color: #fbbf24 !important; } body.dark-mode .ngx-pagination li { color: var(--text-secondary) !important; } body.dark-mode .ngx-pagination li:hover:not(.current):not(.disabled) { background-color: var(--bg-raised) !important; } body.dark-mode .ngx-pagination .disabled { color: var(--text-muted) !important; } /* ════════════════════════════════════════════════════ UNIFIED DATE INPUTS — light & dark Applies to both bsDatepicker (type="text") and native date picker (type="date") via ng-control ════════════════════════════════════════════════════ */ /* ── Light mode base ── */ input[type="date"], input[bsDatepicker], input.form-control[readonly][bsDatepicker] { height: 38px !important; padding: 0 12px !important; font-size: 0.875rem !important; border: 1px solid #d1d5db !important; border-radius: 8px !important; background: #ffffff !important; color: #1e293b !important; box-shadow: 0 1px 2px rgba(0,0,0,0.04) !important; transition: border-color 0.18s, box-shadow 0.18s !important; cursor: pointer !important; width: 100% !important; box-sizing: border-box !important; } input[type="date"]:focus, input[bsDatepicker]:focus { border-color: var(--mod-color, #f59e0b) !important; box-shadow: 0 0 0 3px color-mix(in srgb, var(--mod-color, #f59e0b) 20%, transparent) !important; outline: none !important; } /* native calendar icon – light mode */ input[type="date"]::-webkit-calendar-picker-indicator { opacity: 0.5; cursor: pointer; filter: none; } input[type="date"]:hover::-webkit-calendar-picker-indicator { opacity: 0.9; } /* ── Dark mode ── */ body.dark-mode input[type="date"], body.dark-mode input[bsDatepicker], body.dark-mode input.form-control[readonly][bsDatepicker] { background: var(--bg-raised) !important; border-color: var(--border-subtle) !important; color: var(--text-primary) !important; -webkit-text-fill-color: var(--text-primary) !important; box-shadow: none !important; } body.dark-mode input[type="date"]:focus, body.dark-mode input[bsDatepicker]:focus { border-color: var(--accent, #7c3aed) !important; box-shadow: 0 0 0 3px rgba(124,58,237,0.15) !important; } /* native calendar icon – dark mode (invert to white) */ body.dark-mode input[type="date"]::-webkit-calendar-picker-indicator { filter: invert(1) brightness(1.8) !important; opacity: 0.7 !important; cursor: pointer !important; } body.dark-mode input[type="date"]:hover::-webkit-calendar-picker-indicator { opacity: 1 !important; } /* ── bs-datepicker popup – light mode ── */ bs-datepicker-container { z-index: 9999 !important; box-shadow: 0 8px 32px rgba(0,0,0,0.12) !important; border-radius: 12px !important; overflow: hidden !important; } .bs-datepicker { border-radius: 12px !important; overflow: hidden !important; box-shadow: none !important; } .bs-datepicker-head { background: linear-gradient(135deg, #f59e0b 0%, #d97706 100%) !important; border-radius: 12px 12px 0 0 !important; padding: 10px 16px !important; } .bs-datepicker-head button { color: #fff !important; font-weight: 600 !important; border-radius: 6px !important; } .bs-datepicker-head button:hover { background: rgba(0,0,0,0.15) !important; } .bs-datepicker-body { background: #ffffff !important; border: 1px solid #e5e7eb !important; border-top: none !important; border-radius: 0 0 12px 12px !important; padding: 8px !important; } .bs-datepicker-body table th { color: #6b7280 !important; font-size: 0.75rem !important; font-weight: 600 !important; padding: 4px !important; } .bs-datepicker-body table td { background: transparent !important; padding: 2px !important; } .bs-datepicker-body table td span { color: #1e293b !important; border-radius: 8px !important; font-size: 0.85rem !important; } .bs-datepicker-body table td span:hover { background: #fef3c7 !important; color: #92400e !important; } .bs-datepicker-body table td span.selected, .theme-green .bs-datepicker-body table td.selected span { background: #f59e0b !important; color: #fff !important; } .bs-datepicker-body table td.is-highlighted:not(.disabled):not(.selected) span { background: rgba(245,158,11,0.12) !important; color: #92400e !important; } .bs-datepicker-body table td.is-other-month span { color: #d1d5db !important; } /* ── bs-datepicker popup – dark mode ── */ body.dark-mode bs-datepicker-container { background: var(--bg-surface) !important; box-shadow: 0 8px 32px rgba(0,0,0,0.45) !important; } body.dark-mode .bs-datepicker-head { background: linear-gradient(135deg, #d97706 0%, #b45309 100%) !important; } body.dark-mode .bs-datepicker-body { background: var(--bg-surface) !important; border-color: var(--border) !important; } body.dark-mode .bs-datepicker-body table th { color: var(--text-muted) !important; } body.dark-mode .bs-datepicker-body table td span { color: var(--text-primary) !important; } body.dark-mode .bs-datepicker-body table td span:hover { background: var(--bg-hover) !important; color: var(--text-primary) !important; } body.dark-mode .bs-datepicker-body table td span.selected, body.dark-mode .theme-green .bs-datepicker-body table td.selected span { background: #f59e0b !important; color: #fff !important; } body.dark-mode .bs-datepicker-body table td.is-highlighted:not(.disabled):not(.selected) span { background: rgba(245,158,11,0.15) !important; color: #fbbf24 !important; } body.dark-mode .bs-datepicker-body table td.is-other-month span { color: var(--text-muted) !important; }