/* ============================================================
   BPMS247 – Dark Mode Override
   Activated by: body.dark-mode
   Palette: navy #0d2137, gold accent #f59e0b
   ============================================================ */

/* ------------------------------------------------------------------
   BOOTSTRAP CSS VARIABLE OVERRIDES (scoped to dark-mode body)
   ------------------------------------------------------------------ */
body.dark-mode {
  --bs-body-bg: #0a1929;
  --bs-body-color: #e2e8f0;
  --bs-card-bg: #132b45;
  --bs-border-color: #1e3a52;

  /* Admin custom properties */
  --admin-sidebar-bg: #0d2137;
  --admin-body-bg: #0a1929;
  --admin-card-bg: #132b45;
  --admin-border: #1e3a52;
  --admin-text: #e2e8f0;
  --admin-text-muted: #8ca0b3;
  --admin-topbar-bg: #0f2538;
  --admin-topbar-border: #1e3a52;

  background: #0a1929 !important;
  color: #e2e8f0;
}

/* ------------------------------------------------------------------
   LAYOUT SHELL
   ------------------------------------------------------------------ */
body.dark-mode .admin-body,
body.dark-mode .dashboard-layout {
  background: #0a1929;
  color: #e2e8f0;
}

/* Page content / main wrapper */
body.dark-mode .page-content,
body.dark-mode .content-wrapper,
body.dark-mode .main-content {
  background: #0a1929;
  color: #e2e8f0;
}

/* ------------------------------------------------------------------
   TOPBAR
   ------------------------------------------------------------------ */
body.dark-mode .topbar {
  background: #0f2538 !important;
  border-bottom-color: #1e3a52 !important;
  box-shadow: 0 1px 8px rgba(0, 0, 0, .35);
}

body.dark-mode .topbar-title,
body.dark-mode .topbar h2 {
  color: #e2e8f0;
}

body.dark-mode .topbar .user-menu {
  color: #8ca0b3;
}

/* Search input in topbar */
body.dark-mode #globalSearchInput,
body.dark-mode .topbar .form-control {
  background: #132b45 !important;
  border-color: #1e3a52 !important;
  color: #e2e8f0 !important;
}

body.dark-mode #globalSearchInput::placeholder {
  color: #8ca0b3;
}

body.dark-mode .topbar .input-group-text {
  background: #132b45 !important;
  border-color: #1e3a52 !important;
  color: #8ca0b3 !important;
}

/* Mobile burger button */
body.dark-mode .topbar .btn-light {
  background: #1e3a52 !important;
  color: #e2e8f0 !important;
  border-color: #1e3a52 !important;
}

/* Action items icon */
body.dark-mode #actionItemsHeaderBtn {
  color: #8ca0b3 !important;
}

body.dark-mode #actionItemsHeaderBtn:hover {
  color: #f59e0b !important;
}

/* ------------------------------------------------------------------
   SIDEBAR
   ------------------------------------------------------------------ */
body.dark-mode .sidebar {
  background: #0d2137;
  border-right: 1px solid #1e3a52;
}

body.dark-mode .sidebar-header {
  border-bottom-color: rgba(255, 255, 255, .06);
  background: linear-gradient(135deg, #0d2137, #1a3a5c);
}

body.dark-mode .sidebar-link {
  color: rgba(226, 232, 240, .78) !important;
}

body.dark-mode .sidebar-link:hover {
  background: rgba(245, 158, 11, .08) !important;
  color: #f59e0b !important;
}

body.dark-mode .sidebar-link.active {
  background: rgba(245, 158, 11, .12) !important;
  color: #f59e0b !important;
}

body.dark-mode .sidebar-link.active::before {
  background: #f59e0b;
}

body.dark-mode .sidebar-category {
  color: rgba(226, 232, 240, .32);
}

body.dark-mode .sidebar-footer {
  border-top-color: rgba(255, 255, 255, .06);
}

/* ------------------------------------------------------------------
   CARDS
   ------------------------------------------------------------------ */
body.dark-mode .card {
  background: #132b45 !important;
  border-color: #1e3a52 !important;
  box-shadow: 0 2px 12px rgba(0, 0, 0, .25);
  color: #e2e8f0;
}

body.dark-mode .card-header {
  background: rgba(255, 255, 255, .03) !important;
  border-bottom-color: #1e3a52 !important;
  color: #e2e8f0;
}

body.dark-mode .card-body {
  color: #e2e8f0;
}

body.dark-mode .card-footer {
  background: rgba(255, 255, 255, .03) !important;
  border-top-color: #1e3a52 !important;
  color: #8ca0b3;
}

body.dark-mode .card-title,
body.dark-mode .card-subtitle {
  color: #e2e8f0 !important;
}

/* ------------------------------------------------------------------
   WIDGET / STAT CARDS
   ------------------------------------------------------------------ */
body.dark-mode .widget-card {
  background: #132b45 !important;
  border-color: #1e3a52 !important;
  box-shadow: 0 2px 12px rgba(0, 0, 0, .3);
}

body.dark-mode .widget-card:hover {
  box-shadow: 0 6px 24px rgba(0, 0, 0, .45);
  border-color: rgba(245, 158, 11, .3) !important;
}

body.dark-mode .widget-value {
  color: #e2e8f0;
}

body.dark-mode .widget-label {
  color: #8ca0b3;
}

body.dark-mode .widget-sub {
  color: #8ca0b3;
}

/* ------------------------------------------------------------------
   TABLES
   ------------------------------------------------------------------ */
body.dark-mode .table {
  color: #e2e8f0;
  --bs-table-bg: transparent;
  --bs-table-border-color: #1e3a52;
  --bs-table-striped-bg: rgba(255, 255, 255, .03);
  --bs-table-hover-bg: rgba(245, 158, 11, .06);
}

body.dark-mode .table th {
  color: #8ca0b3;
  border-bottom-color: #1e3a52;
}

body.dark-mode .table td {
  color: #e2e8f0;
  border-bottom-color: #1e3a52;
}

body.dark-mode .table thead th {
  background: rgba(255, 255, 255, .04);
  border-bottom-color: #1e3a52;
}

body.dark-mode .table-bordered th,
body.dark-mode .table-bordered td {
  border-color: #1e3a52;
}

body.dark-mode .table-hover tbody tr:hover {
  background: rgba(245, 158, 11, .06) !important;
  color: #e2e8f0;
}

body.dark-mode .table-striped > tbody > tr:nth-of-type(odd) > * {
  background-color: rgba(255, 255, 255, .03);
  color: #e2e8f0;
}

/* ------------------------------------------------------------------
   FORMS
   ------------------------------------------------------------------ */
body.dark-mode .form-control,
body.dark-mode .form-select {
  background-color: #0f2538 !important;
  border-color: #1e3a52 !important;
  color: #e2e8f0 !important;
}

body.dark-mode .form-control:focus,
body.dark-mode .form-select:focus {
  background-color: #0f2538 !important;
  border-color: #f59e0b !important;
  color: #e2e8f0 !important;
  box-shadow: 0 0 0 .2rem rgba(245, 158, 11, .2) !important;
}

body.dark-mode .form-control::placeholder {
  color: #8ca0b3;
}

body.dark-mode .form-control:disabled,
body.dark-mode .form-control[readonly] {
  background-color: #0a1929 !important;
  color: #8ca0b3 !important;
}

body.dark-mode .form-select option {
  background: #0f2538;
  color: #e2e8f0;
}

body.dark-mode .input-group-text {
  background-color: #1e3a52 !important;
  border-color: #1e3a52 !important;
  color: #8ca0b3 !important;
}

body.dark-mode .form-label {
  color: #c8d8e8;
}

body.dark-mode .form-text {
  color: #8ca0b3;
}

body.dark-mode .form-check-label {
  color: #c8d8e8;
}

/* ------------------------------------------------------------------
   MODALS
   ------------------------------------------------------------------ */
body.dark-mode .modal-content {
  background: #132b45 !important;
  border-color: #1e3a52 !important;
  color: #e2e8f0;
}

body.dark-mode .modal-header {
  background: rgba(255, 255, 255, .04) !important;
  border-bottom-color: #1e3a52 !important;
  color: #e2e8f0;
}

body.dark-mode .modal-header .modal-title {
  color: #e2e8f0;
}

body.dark-mode .modal-footer {
  background: rgba(255, 255, 255, .04) !important;
  border-top-color: #1e3a52 !important;
}

body.dark-mode .modal-body {
  color: #e2e8f0;
}

body.dark-mode .btn-close {
  filter: invert(1) grayscale(100%) brightness(200%);
}

/* ------------------------------------------------------------------
   BADGES
   ------------------------------------------------------------------ */
body.dark-mode .badge.bg-light {
  background-color: #1e3a52 !important;
  color: #e2e8f0 !important;
}

body.dark-mode .badge.text-dark {
  color: #e2e8f0 !important;
}

body.dark-mode .badge.bg-secondary {
  background-color: #2a4a64 !important;
}

/* ------------------------------------------------------------------
   NAV TABS
   ------------------------------------------------------------------ */
body.dark-mode .nav-tabs {
  border-bottom-color: #1e3a52;
}

body.dark-mode .nav-tabs .nav-link {
  color: #8ca0b3;
  border-color: transparent;
}

body.dark-mode .nav-tabs .nav-link:hover {
  color: #e2e8f0;
  border-color: #1e3a52 #1e3a52 transparent;
  background: rgba(255, 255, 255, .04);
}

body.dark-mode .nav-tabs .nav-link.active {
  background: #132b45 !important;
  border-color: #1e3a52 #1e3a52 #132b45 !important;
  color: #f59e0b !important;
  font-weight: 600;
}

body.dark-mode .nav-pills .nav-link {
  color: #8ca0b3;
}

body.dark-mode .nav-pills .nav-link.active {
  background-color: #f59e0b !important;
  color: #0d2137 !important;
  font-weight: 600;
}

/* ------------------------------------------------------------------
   ALERTS
   ------------------------------------------------------------------ */
body.dark-mode .alert {
  border-width: 1px;
}

body.dark-mode .alert-success {
  background: rgba(16, 185, 129, .12) !important;
  border-color: rgba(16, 185, 129, .3) !important;
  color: #6ee7b7 !important;
}

body.dark-mode .alert-danger {
  background: rgba(239, 68, 68, .12) !important;
  border-color: rgba(239, 68, 68, .3) !important;
  color: #fca5a5 !important;
}

body.dark-mode .alert-warning {
  background: rgba(245, 158, 11, .12) !important;
  border-color: rgba(245, 158, 11, .3) !important;
  color: #fcd34d !important;
}

body.dark-mode .alert-info {
  background: rgba(59, 130, 246, .12) !important;
  border-color: rgba(59, 130, 246, .3) !important;
  color: #93c5fd !important;
}

body.dark-mode .alert-primary {
  background: rgba(74, 144, 226, .12) !important;
  border-color: rgba(74, 144, 226, .3) !important;
  color: #93c5fd !important;
}

body.dark-mode .alert-secondary {
  background: rgba(100, 116, 139, .15) !important;
  border-color: rgba(100, 116, 139, .3) !important;
  color: #cbd5e1 !important;
}

/* ------------------------------------------------------------------
   BUTTONS – outline variants
   ------------------------------------------------------------------ */
body.dark-mode .btn-outline-secondary {
  border-color: #2a4a64;
  color: #8ca0b3;
}

body.dark-mode .btn-outline-secondary:hover {
  background: #1e3a52;
  border-color: #2a4a64;
  color: #e2e8f0;
}

body.dark-mode .btn-outline-primary {
  border-color: #4a90e2;
  color: #7ab3e8;
}

body.dark-mode .btn-outline-primary:hover {
  background: rgba(74, 144, 226, .2);
  border-color: #4a90e2;
  color: #e2e8f0;
}

body.dark-mode .btn-outline-danger {
  border-color: #ef4444;
  color: #f87171;
}

body.dark-mode .btn-outline-danger:hover {
  background: rgba(239, 68, 68, .2);
  color: #e2e8f0;
}

body.dark-mode .btn-outline-success {
  border-color: #22c55e;
  color: #4ade80;
}

body.dark-mode .btn-outline-success:hover {
  background: rgba(34, 197, 94, .2);
  color: #e2e8f0;
}

body.dark-mode .btn-outline-warning {
  border-color: #f59e0b;
  color: #fcd34d;
}

body.dark-mode .btn-outline-warning:hover {
  background: rgba(245, 158, 11, .2);
  color: #0d2137;
}

body.dark-mode .btn-outline-info {
  border-color: #0ea5e9;
  color: #7dd3fc;
}

body.dark-mode .btn-outline-info:hover {
  background: rgba(14, 165, 233, .2);
  color: #e2e8f0;
}

body.dark-mode .btn-outline-light {
  border-color: #1e3a52;
  color: #8ca0b3;
}

body.dark-mode .btn-outline-light:hover {
  background: #1e3a52;
  color: #e2e8f0;
}

body.dark-mode .btn-light {
  background: #1e3a52 !important;
  border-color: #1e3a52 !important;
  color: #e2e8f0 !important;
}

body.dark-mode .btn-light:hover {
  background: #2a4a64 !important;
}

/* Dark mode toggle button */
body.dark-mode #darkModeToggle {
  color: #f59e0b;
}

/* ------------------------------------------------------------------
   LIST GROUPS
   ------------------------------------------------------------------ */
body.dark-mode .list-group-item {
  background-color: #132b45 !important;
  border-color: #1e3a52 !important;
  color: #e2e8f0;
}

body.dark-mode .list-group-item.active {
  background-color: #f59e0b !important;
  border-color: #f59e0b !important;
  color: #0d2137 !important;
}

body.dark-mode .list-group-item:hover:not(.active) {
  background-color: #1e3a52 !important;
  color: #e2e8f0;
}

body.dark-mode .list-group-item-action {
  color: #c8d8e8;
}

/* ------------------------------------------------------------------
   DROPDOWN MENUS
   ------------------------------------------------------------------ */
body.dark-mode .dropdown-menu {
  background: #132b45 !important;
  border-color: #1e3a52 !important;
  box-shadow: 0 8px 32px rgba(0, 0, 0, .45) !important;
}

body.dark-mode .dropdown-item {
  color: #c8d8e8 !important;
}

body.dark-mode .dropdown-item:hover,
body.dark-mode .dropdown-item:focus {
  background: rgba(245, 158, 11, .1) !important;
  color: #f59e0b !important;
}

body.dark-mode .dropdown-item.active {
  background: rgba(245, 158, 11, .2) !important;
  color: #f59e0b !important;
}

body.dark-mode .dropdown-divider {
  border-top-color: #1e3a52;
}

body.dark-mode .dropdown-header {
  color: #8ca0b3;
}

/* ------------------------------------------------------------------
   SETTINGS / MISC HELPERS
   ------------------------------------------------------------------ */
body.dark-mode .settings-section-hdr {
  color: #8ca0b3;
  border-bottom-color: #1e3a52;
}

body.dark-mode .toggle-row {
  border-bottom-color: #1e3a52;
}

body.dark-mode .toggle-label strong {
  color: #e2e8f0;
}

body.dark-mode .toggle-label small {
  color: #8ca0b3;
}

body.dark-mode hr {
  border-color: #1e3a52;
  opacity: 1;
}

body.dark-mode .border,
body.dark-mode .border-bottom,
body.dark-mode .border-top,
body.dark-mode .border-start,
body.dark-mode .border-end {
  border-color: #1e3a52 !important;
}

body.dark-mode .text-muted {
  color: #8ca0b3 !important;
}

body.dark-mode .text-dark {
  color: #e2e8f0 !important;
}

body.dark-mode small,
body.dark-mode .small {
  color: #8ca0b3;
}

/* ------------------------------------------------------------------
   GLOBAL SEARCH DROPDOWN
   ------------------------------------------------------------------ */
body.dark-mode #globalSearchDropdown {
  background: #132b45 !important;
  border-color: #1e3a52 !important;
  box-shadow: 0 8px 24px rgba(0, 0, 0, .4) !important;
}

body.dark-mode #globalSearchDropdown .dropdown-item {
  color: #c8d8e8 !important;
}

body.dark-mode #globalSearchDropdown .dropdown-item:hover {
  background: rgba(245, 158, 11, .1) !important;
  color: #f59e0b !important;
}

body.dark-mode #globalSearchDropdown .border-top {
  border-color: #1e3a52 !important;
}

body.dark-mode #globalSearchDropdown .text-muted {
  color: #8ca0b3 !important;
}

/* ------------------------------------------------------------------
   QUILL EDITOR
   ------------------------------------------------------------------ */
body.dark-mode .ql-toolbar {
  background: #1e3a52;
  border-color: #1e3a52 !important;
}

body.dark-mode .ql-container {
  background: #0f2538;
  border-color: #1e3a52 !important;
  color: #e2e8f0;
}

body.dark-mode .ql-editor {
  color: #e2e8f0;
}

body.dark-mode .ql-toolbar .ql-stroke {
  stroke: #8ca0b3;
}

body.dark-mode .ql-toolbar .ql-fill {
  fill: #8ca0b3;
}

body.dark-mode .ql-toolbar button:hover .ql-stroke,
body.dark-mode .ql-toolbar button.ql-active .ql-stroke {
  stroke: #f59e0b;
}

/* ------------------------------------------------------------------
   PROGRESS BARS
   ------------------------------------------------------------------ */
body.dark-mode .progress {
  background-color: #1e3a52;
}

/* ------------------------------------------------------------------
   PAGINATION
   ------------------------------------------------------------------ */
body.dark-mode .page-item .page-link {
  background-color: #132b45;
  border-color: #1e3a52;
  color: #8ca0b3;
}

body.dark-mode .page-item .page-link:hover {
  background-color: #1e3a52;
  color: #e2e8f0;
}

body.dark-mode .page-item.active .page-link {
  background-color: #f59e0b;
  border-color: #f59e0b;
  color: #0d2137;
}

body.dark-mode .page-item.disabled .page-link {
  background-color: #0f2538;
  color: #2a4a64;
  border-color: #1e3a52;
}

/* ------------------------------------------------------------------
   ACCORDION
   ------------------------------------------------------------------ */
body.dark-mode .accordion-item {
  background: #132b45;
  border-color: #1e3a52;
}

body.dark-mode .accordion-button {
  background: #1e3a52;
  color: #e2e8f0;
}

body.dark-mode .accordion-button:not(.collapsed) {
  background: rgba(245, 158, 11, .12);
  color: #f59e0b;
  box-shadow: inset 0 -1px 0 #1e3a52;
}

body.dark-mode .accordion-button::after {
  filter: invert(1) brightness(1.5);
}

body.dark-mode .accordion-body {
  background: #132b45;
  color: #e2e8f0;
}

/* ------------------------------------------------------------------
   TOAST NOTIFICATIONS
   ------------------------------------------------------------------ */
body.dark-mode .toast:not([class*="bg-"]) {
  background: #132b45;
  border-color: #1e3a52;
  color: #e2e8f0;
}

/* ------------------------------------------------------------------
   POPOVER / TOOLTIP
   ------------------------------------------------------------------ */
body.dark-mode .popover {
  background: #132b45;
  border-color: #1e3a52;
}

body.dark-mode .popover-header {
  background: #1e3a52;
  border-bottom-color: #1e3a52;
  color: #e2e8f0;
}

body.dark-mode .popover-body {
  color: #e2e8f0;
}

body.dark-mode .tooltip .tooltip-inner {
  background: #0d2137;
  color: #e2e8f0;
}

/* ------------------------------------------------------------------
   SCROLLBARS (webkit + firefox)
   ------------------------------------------------------------------ */
body.dark-mode * {
  scrollbar-width: thin;
  scrollbar-color: #f59e0b #0a1929;
}

body.dark-mode *::-webkit-scrollbar {
  width: 6px;
  height: 6px;
}

body.dark-mode *::-webkit-scrollbar-track {
  background: #0a1929;
  border-radius: 3px;
}

body.dark-mode *::-webkit-scrollbar-thumb {
  background: #f59e0b;
  border-radius: 3px;
}

body.dark-mode *::-webkit-scrollbar-thumb:hover {
  background: #fbbf24;
}

/* Sidebar scrollbar remains subtle */
body.dark-mode .sidebar::-webkit-scrollbar-thumb {
  background: rgba(245, 158, 11, .35);
}

/* ------------------------------------------------------------------
   DARK MODE TOGGLE BUTTON (topbar)
   ------------------------------------------------------------------ */
#darkModeToggle {
  color: #6c757d;
  transition: color .2s;
}

#darkModeToggle:hover {
  color: #f59e0b;
}

body.dark-mode #darkModeToggle {
  color: #f59e0b;
}

/* ------------------------------------------------------------------
   LOW-CONTRAST TEXT FIXES (2026-08-11)
   Catches text/utility classes that previously stayed dark-on-dark,
   which made some fonts invisible in dark mode.
   ------------------------------------------------------------------ */

/* Bootstrap text-colour utilities that render dark by default */
body.dark-mode .text-secondary,
body.dark-mode .text-black,
body.dark-mode .text-black-50,
body.dark-mode .text-body,
body.dark-mode .text-body-secondary,
body.dark-mode .text-body-tertiary {
  color: #c8d8e8 !important;
}

/* Headings inherit the light body colour even when a theme forces dark */
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 .h1, body.dark-mode .h2, body.dark-mode .h3,
body.dark-mode .h4, body.dark-mode .h5, body.dark-mode .h6 {
  color: #e2e8f0;
}

/* White / light surfaces: flip to a dark surface so any dark text on
   them becomes readable (labels, values, panels, sections, etc.) */
body.dark-mode .bg-white,
body.dark-mode .bg-light,
body.dark-mode .bg-body,
body.dark-mode .bg-body-tertiary,
body.dark-mode .bg-light-subtle {
  background-color: #132b45 !important;
  color: #e2e8f0 !important;
}

/* Their common dark-text children */
body.dark-mode .bg-white .text-dark,
body.dark-mode .bg-light .text-dark,
body.dark-mode .bg-white .fw-bold,
body.dark-mode .bg-light .fw-bold {
  color: #e2e8f0 !important;
}

/* Subtle badges keep their accent text colour on a legible chip */
body.dark-mode .badge.bg-primary-subtle { color: #93c5fd !important; }
body.dark-mode .badge.bg-success-subtle { color: #6ee7b7 !important; }
body.dark-mode .badge.bg-warning-subtle { color: #fcd34d !important; }
body.dark-mode .badge.bg-danger-subtle  { color: #fca5a5 !important; }
body.dark-mode .badge.bg-info-subtle    { color: #7dd3fc !important; }
body.dark-mode .badge.bg-secondary-subtle { color: #cbd5e1 !important; }

/* Note: views that hardcode an inline color (style="color:#1e293b")
   cannot be overridden from CSS and must be fixed per-view. */