/**
 * WapcosMFA Global Dark/Light Theme
 * Professional Color System with Perfect Contrast
 */

/* ============================================
   LIGHT THEME (DEFAULT)
   ============================================ */
:root,
[data-bs-theme="light"] {
  /* Primary Brand */
  --bs-primary: #176b74;
  --bs-primary-rgb: 23, 107, 116;

  /* Backgrounds - Greyish body so cards stand out */
  --bs-body-bg: #f5f6f8;
  --bs-body-bg-rgb: 245, 246, 248;
  --bs-secondary-bg: #e9ecef;
  --bs-tertiary-bg: #dee2e6;

  /* Text */
  --bs-body-color: #24313d;
  --bs-body-color-rgb: 33, 37, 41;
  --bs-secondary-color: #5f7080;
  --bs-tertiary-color: #adb5bd;

  /* Borders */
  --bs-border-color: #dee2e6;
  --bs-border-color-translucent: rgba(0, 0, 0, 0.175);

  /* Semantic Colors */
  --bs-success: #198754;
  --bs-success-rgb: 25, 135, 84;
  --bs-success-bg-subtle: #d1e7dd;

  --bs-danger: #dc3545;
  --bs-danger-rgb: 220, 53, 69;
  --bs-danger-bg-subtle: #f8d7da;

  --bs-warning: #ffc107;
  --bs-warning-rgb: 255, 193, 7;
  --bs-warning-bg-subtle: #fff3cd;

  --bs-info: #0dcaf0;
  --bs-info-rgb: 13, 202, 240;
  --bs-info-bg-subtle: #cff4fc;

  /* Components */
  --bs-primary-bg-subtle: #d8ecee;
  --bs-card-bg: #ffffff;
  --bs-card-border-color: #dee2e6;
  --table-border-col: rgba(0, 0, 0, 0.08);

  /* Shadows */
  --bs-shadow-sm: 0 .125rem .25rem rgba(0,0,0,.075);
  --bs-shadow: 0 .5rem 1rem rgba(0,0,0,.15);
}

/* ============================================
   DARK THEME - VIBRANT CONTRAST WITH VISIBLE CARDS
   ============================================ */
[data-bs-theme="dark"] {
  /* Primary Brand (More vibrant) */
  --bs-primary: #8b90ff;
  --bs-primary-rgb: 139, 144, 255;

  /* Backgrounds - Clear separation between body and cards */
  --bs-body-bg: #0d1117;
  --bs-body-bg-rgb: 13, 17, 23;
  --bs-secondary-bg: #1c2128;
  --bs-tertiary-bg: #2d333b;

  /* Text - Higher contrast */
  --bs-body-color: #f0f6fc;
  --bs-body-color-rgb: 240, 246, 252;
  --bs-secondary-color: #9fb0bf;
  --bs-tertiary-color: #7d8590;

  /* Borders - Slightly lighter for visibility */
  --bs-border-color: #3d444d;
  --bs-border-color-translucent: rgba(255, 255, 255, 0.15);

  /* Semantic Colors - VIBRANT & VISIBLE (Enhanced) */
  --bs-success: #3fb950;
  --bs-success-rgb: 63, 185, 80;
  --bs-success-bg-subtle: #0f3817;

  --bs-danger: #ff6b6b;
  --bs-danger-rgb: 255, 107, 107;
  --bs-danger-bg-subtle: #49231f;

  --bs-warning: #f0ad4e;
  --bs-warning-rgb: 240, 173, 78;
  --bs-warning-bg-subtle: #341a03;

  --bs-info: #58a6ff;
  --bs-info-rgb: 88, 166, 255;
  --bs-info-bg-subtle: #0c2d42;

  /* Components - Cards clearly lighter than body */
  --bs-primary-bg-subtle: #12353a;
  --bs-card-bg: #1c2128;
  --bs-card-border-color: rgba(255, 255, 255, 0.1);
  --table-border-col: rgba(255, 255, 255, 0.1);

  /* Shadows */
  --bs-shadow-sm: 0 .125rem .25rem rgba(0,0,0,.5);
  --bs-shadow: 0 .5rem 1rem rgba(0,0,0,.6);
}

/* ============================================
   GLOBAL APPLICATION - APPLY THEME TO ALL COMPONENTS
   ============================================ */

/* Body - Greyish background so cards stand out */
body {
  background-color: var(--bs-body-bg);
  color: var(--bs-body-color);
  font-size: var(--type-size-body, 0.875rem);
  line-height: var(--type-line-body, 1.5);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* Cards - Clean with subtle hover glow */
.card {
  background: #fff;
  border: 1px solid var(--bs-border-color);
  border-radius: var(--bs-border-radius-lg);
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
  transition: all 0.2s ease;
  color: var(--bs-body-color);
}

.card:hover {
  box-shadow: 0 0.25rem 0.5rem rgba(0, 0, 0, 0.08);
}

/* Dark mode cards - Clear glow with 3D appearance (always visible) */
[data-bs-theme="dark"] .card {
  background-color: var(--bs-card-bg) !important;
  border: 1px solid rgba(255, 255, 255, 0.1) !important;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.6),
              0 8px 16px rgba(0, 0, 0, 0.4),
              0 0 0 1px rgba(74, 158, 255, 0.4),
              0 0 24px rgba(74, 158, 255, 0.15),
              inset 0 1px 0 rgba(255, 255, 255, 0.15),
              inset 0 -1px 0 rgba(0, 0, 0, 0.3);
}

/* Brand separator: make visibly light/glowing in dark theme so it reads
   against deep backgrounds. Kept conservative to match the site's subtle UI */
[data-bs-theme="dark"] .brand-sep {
  background: linear-gradient(180deg, rgba(255,255,255,0.3), rgba(255,255,255,0.1));
  box-shadow: 0 0 8px rgba(255,255,255,0.04), inset 0 1px 0 rgba(255,255,255,0.06);
  opacity: 0.98;
}

@media (max-width: 575.98px) {
  [data-bs-theme="dark"] .brand-sep { height: 35px; }
}

[data-bs-theme="dark"] .card:hover {
  border-color: rgba(74, 158, 255, 0.15) !important;
  box-shadow: 0 0.25rem 0.5rem rgba(0, 0, 0, 0.08);
}

.card-header {
  background-color: var(--bs-secondary-bg);
  border-bottom: 0.5px solid var(--bs-card-border-color);
  color: var(--bs-body-color);
}

.card-footer {
  background-color: var(--bs-secondary-bg);
  border-top: 0.5px solid var(--bs-card-border-color);
  color: var(--bs-body-color);
}

/* Modals - Same style as cards */
.modal-content {
  background-color: #fff;
  border: 1px solid var(--bs-border-color);
  color: var(--bs-body-color);
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.15);
}

[data-bs-theme="dark"] .modal-content {
  background-color: var(--bs-card-bg) !important;
  border: 1px solid rgba(255, 255, 255, 0.1) !important;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.5),
              0 0 0 1px rgba(255, 255, 255, 0.05);
}

.modal-header {
  background-color: var(--bs-secondary-bg);
  border-bottom: 1px solid var(--bs-card-border-color);
  color: var(--bs-body-color);
}

.modal-footer {
  background-color: var(--bs-secondary-bg);
  border-top: 1px solid var(--bs-card-border-color);
  color: var(--bs-body-color);
}

/* Dropdowns */
.dropdown-menu {
  background-color: var(--bs-card-bg) !important;
  border: 1px solid var(--bs-border-color);
  color: var(--bs-body-color);
  box-shadow: var(--bs-shadow);
}

.dropdown-item {
  color: var(--bs-body-color);
}

.dropdown-item:hover,
.dropdown-item:focus {
  background-color: var(--bs-secondary-bg);
}

.dropdown-divider {
  border-color: var(--bs-border-color);
}

/* Forms */
.form-control,
.form-select,
.form-check-input {
  background-color: var(--bs-body-bg);
  border: 1px solid var(--bs-border-color);
  color: var(--bs-body-color);
}

.form-control:focus,
.form-select:focus {
  background-color: var(--bs-body-bg);
  border-color: var(--bs-primary);
  color: var(--bs-body-color);
  box-shadow: 0 0 0 0.25rem rgba(var(--bs-primary-rgb), 0.25);
}

.form-control::placeholder {
  color: var(--bs-tertiary-color);
}

[data-bs-theme="dark"] .form-control,
[data-bs-theme="dark"] .form-select {
  background-color: var(--bs-secondary-bg);
  border-color: var(--bs-border-color);
}

.input-group-text {
  background-color: var(--bs-secondary-bg);
  border-color: var(--bs-border-color);
  color: var(--bs-body-color);
}

/* Tables - Dark background with subtle glow on hover */
.table {
  --bs-table-bg: transparent;
  --bs-table-border-color: var(--bs-border-color);
  color: var(--bs-body-color) !important;
}

.table thead th {
  background-color: var(--bs-secondary-bg) !important;
  border-bottom: 2px solid var(--bs-border-color);
  border-right: 1px solid var(--bs-border-color);
  color: var(--bs-body-color) !important;
  font-weight: 600;
}

/* Keep tables dark in dark mode */
[data-bs-theme="dark"] .table {
  background-color: transparent;
}

[data-bs-theme="dark"] .table thead th {
  background-color: var(--bs-card-bg) !important;
  position: sticky;
  top: 0;
  z-index: 10;
  backdrop-filter: blur(8px);
}

.table tbody td {
  border-bottom: 1px solid var(--bs-border-color) !important;
  border-right: 1px solid var(--table-border-col) !important;
  color: var(--bs-body-color) !important;
  transition: box-shadow 0.15s ease;
}

.table tbody td:last-child {
  border-right: none !important;
}

.table tbody tr {
  color: var(--bs-body-color) !important;
  transition: box-shadow 0.15s ease;
}

/* Light mode hover - subtle background */
.table tbody tr:hover {
  background-color: rgba(0, 0, 0, 0.02);
}

/* Dark mode hover - just a subtle glow, keep dark */
[data-bs-theme="dark"] .table tbody tr:hover {
  background-color: rgba(255, 255, 255, 0.02);
  box-shadow: none;
}

[data-bs-theme="dark"] .table tbody tr:hover td {
  color: var(--bs-body-color) !important;
}

/* Highlight animation for targeted rows - Premium ultra-smooth atmospheric pulse */
.highlight-audit {
  animation: audit-glow 6s cubic-bezier(0.4, 0, 0.2, 1) forwards !important;
  position: relative;
  z-index: 10;
}

@keyframes audit-glow {
  0% {
    background-color: transparent;
    box-shadow: 0 0 0 rgba(var(--bs-primary-rgb), 0);
  }
  /* Breath 1 - Slow Fade In */
  12% {
    background-color: rgba(var(--bs-primary-rgb), 0.1);
    box-shadow: 0 0 25px rgba(var(--bs-primary-rgb), 0.25);
  }
  24% {
    background-color: transparent;
    box-shadow: 0 0 0 rgba(var(--bs-primary-rgb), 0);
  }
  /* Breath 2 */
  40% {
    background-color: rgba(var(--bs-primary-rgb), 0.08);
    box-shadow: 0 0 20px rgba(var(--bs-primary-rgb), 0.2);
  }
  50% {
    background-color: transparent;
    box-shadow: 0 0 0 rgba(var(--bs-primary-rgb), 0);
  }
  /* Breath 3 */
  65% {
    background-color: rgba(var(--bs-primary-rgb), 0.08);
    box-shadow: 0 0 20px rgba(var(--bs-primary-rgb), 0.2);
  }
  80% {
    background-color: transparent;
    box-shadow: 0 0 0 rgba(var(--bs-primary-rgb), 0);
  }
  /* Final state */
  100% {
    background-color: transparent;
    box-shadow: none;
  }
}

/* Selected row - vibrant highlight */
.table tbody tr.selected {
  background-color: var(--bs-primary-bg-subtle) !important;
  box-shadow: inset 0 0 0 1px var(--bs-primary);
}

.table tbody tr.selected td {
  color: var(--bs-body-color) !important;
  font-weight: 500;
}

/* Keep tables dark in dark mode */
[data-bs-theme="dark"] .table {
  background-color: transparent;
}

[data-bs-theme="dark"] .table thead th {
  background-color: rgba(0, 0, 0, 0.3) !important;
}

/* Table responsive wrapper */
.table-responsive {
  background-color: transparent;
}

.table-container {
  background-color: transparent;
  border: 1px solid var(--bs-border-color);
}

/* Topbar */
.topbar {
  background-color: var(--bs-body-bg) !important;
  border-bottom: 1px solid var(--bs-border-color) !important;
  box-shadow: var(--bs-shadow-sm);
}

/* Sidebar - Properly themed */
.sidebar {
  background-color: var(--bs-body-bg) !important;
  border-right: 0.5px solid var(--bs-border-color);
  color: var(--bs-body-color);
}

.sidebar-menu-section {
  color: var(--bs-body-color);
}

.sidebar-menu-heading {
  color: var(--bs-body-color) !important;
}

.sidebar-menu-card {
  background-color: var(--bs-secondary-bg) !important;
  border: 0.5px solid var(--bs-border-color) !important;
}

.sidebar-menu-link {
  color: var(--bs-body-color) !important;
  transition: all 0.2s ease;
}

.sidebar-menu-link:hover {
  background-color: var(--bs-primary-bg-subtle) !important;
  color: var(--bs-primary) !important;
}

.sidebar-menu-link.active {
  background-color: var(--bs-primary-bg-subtle) !important;
  color: var(--bs-primary) !important;
  font-weight: 600;
}

/* Badges */
[data-bs-theme="dark"] .badge {
  color: var(--bs-body-color);
}

/* Alerts */
[data-bs-theme="dark"] .alert {
  border: 1px solid var(--bs-border-color);
  background-color: var(--bs-secondary-bg);
}

/* List Groups */
.list-group-item {
  background-color: var(--bs-card-bg);
  border: 1px solid var(--bs-border-color);
  color: var(--bs-body-color);
}

.list-group-item:hover {
  background-color: var(--bs-secondary-bg);
}

/* Pagination */
.page-link {
  background-color: var(--bs-card-bg);
  border: 1px solid var(--bs-border-color);
  color: var(--bs-body-color);
}

.page-link:hover {
  background-color: var(--bs-secondary-bg);
  color: var(--bs-primary);
}

.page-item.active .page-link {
  background-color: var(--bs-primary);
  border-color: var(--bs-primary);
}

/* Toasts */
.toast {
  background-color: var(--bs-card-bg);
  border: 1px solid var(--bs-border-color);
  color: var(--bs-body-color);
  box-shadow: var(--bs-shadow);
}

/* Code blocks */
code,
pre {
  background-color: var(--bs-secondary-bg);
  color: var(--bs-body-color);
  border: 1px solid var(--bs-border-color);
}

/* All box containers - fix white backgrounds in dark mode */
.condition-parameter-box,
.policy-rule-card,
.info-box,
.stat-box,
.metric-box,
[class*="-box"],
[class*="-container"] {
  background-color: var(--bs-card-bg) !important;
  color: var(--bs-body-color);
  border-color: var(--bs-border-color);
}

[data-bs-theme="dark"] .condition-parameter-box,
[data-bs-theme="dark"] .policy-rule-card,
[data-bs-theme="dark"] .info-box,
[data-bs-theme="dark"] .stat-box,
[data-bs-theme="dark"] .metric-box,
[data-bs-theme="dark"] [class*="-box"],
[data-bs-theme="dark"] [class*="-container"] {
  background-color: var(--bs-secondary-bg) !important;
  color: var(--bs-body-color);
  border-color: var(--bs-border-color);
}

/* Buttons - Make sure they have proper styling */
.btn {
  border: 1px solid var(--bs-border-color);
}

.btn-outline-secondary {
  color: var(--bs-body-color);
  border-color: var(--bs-border-color);
}

.btn-outline-secondary:hover {
  background-color: var(--bs-secondary-bg);
  border-color: var(--bs-border-color);
}

/* Text colors */
.text-muted {
  color: var(--bs-secondary-color) !important;
}

/* HR dividers */
hr {
  border-color: var(--bs-border-color);
  opacity: 1;
}


.breadcrumb-item.active {
  color: var(--bs-secondary-color);
}

/* Nav tabs/pills */
.nav-tabs {
  border-bottom-color: var(--bs-border-color);
}

.nav-tabs .nav-link {
  color: var(--bs-body-color);
}

.nav-tabs .nav-link.active {
  background-color: var(--bs-card-bg);
  border-color: var(--bs-border-color);
  color: var(--bs-body-color);
}

/* Progress bars */
.progress {
  background-color: var(--bs-secondary-bg);
}

/* Accordion - Same style as cards with hover effect */
.accordion-item {
  background-color: #fff;
  border: 1px solid var(--bs-border-color);
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
  transition: box-shadow 0.2s ease;
  margin-bottom: 0.5rem;
  border-radius: var(--bs-border-radius-lg);
  overflow: hidden;
}

.accordion-item:hover {
  box-shadow: 0 0.125rem 0.25rem rgba(0, 0, 0, 0.03);
}

.accordion-button {
  background-color: #fff;
  color: var(--bs-body-color);
  transition: background-color 0.2s ease;
}

.accordion-button:hover {
  background-color: var(--bs-secondary-bg);
}

.accordion-button:not(.collapsed) {
  background-color: var(--bs-primary-bg-subtle);
  color: var(--bs-primary);
  font-weight: 600;
}

.accordion-button:focus {
  box-shadow: none;
  border-color: var(--bs-border-color);
}

.accordion-body {
  background-color: #fff;
  color: var(--bs-body-color);
}

/* Dark mode accordions - Clear glow like cards (always visible) */
[data-bs-theme="dark"] .accordion-item {
  background-color: var(--bs-card-bg);
  border: 1px solid rgba(255, 255, 255, 0.1);
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.5),
              0 4px 8px rgba(0, 0, 0, 0.3),
              0 0 0 1px rgba(255, 255, 255, 0.12),
              0 0 12px rgba(74, 158, 255, 0.08),
              inset 0 1px 0 rgba(255, 255, 255, 0.12),
              inset 0 -1px 0 rgba(0, 0, 0, 0.2);
}

[data-bs-theme="dark"] .accordion-item:hover {
  border-color: rgba(74, 158, 255, 0.15);
  box-shadow: 0 0.125rem 0.25rem rgba(0, 0, 0, 0.05);
}

[data-bs-theme="dark"] .accordion-button {
  background-color: var(--bs-card-bg);
}

[data-bs-theme="dark"] .accordion-button:hover {
  background-color: rgba(255, 255, 255, 0.05);
}

[data-bs-theme="dark"] .accordion-button:not(.collapsed) {
  background-color: var(--bs-primary-bg-subtle);
}

[data-bs-theme="dark"] .accordion-body {
  background-color: var(--bs-card-bg);
}

/* Offcanvas */
.offcanvas {
  background-color: var(--bs-card-bg);
  color: var(--bs-body-color);
}

/* ============================================
   COMPREHENSIVE THEME APPLICATION - ALL TAGS
   ============================================ */

/* All text elements */
h1, h2, h3, h4, h5, h6,
p, span, div, a, label,
small, strong, em, b, i {
  color: inherit;
}

/* Links */
a {
  color: var(--bs-link-color, var(--bs-primary));
}

a:hover {
  color: var(--bs-link-hover-color, var(--bs-primary-dark));
}

/* All containers */
.container,
.container-fluid,
.row,
.col,
[class*="col-"] {
  color: var(--bs-body-color);
}

/* All sections */
section,
article,
aside,
nav,
header,
footer,
main {
  color: var(--bs-body-color);
}

/* Form labels and legends */
label,
legend,
.form-label {
  color: var(--bs-body-color) !important;
}

/* Input groups */
.input-group {
  color: var(--bs-body-color);
}

/* Form text and help text */
.form-text,
.invalid-feedback,
.valid-feedback {
  color: var(--bs-secondary-color);
}

[data-bs-theme="dark"] .form-text {
  color: var(--bs-tertiary-color);
}

[data-bs-theme="dark"] .invalid-feedback {
  color: var(--bs-danger-text-emphasis) !important;
}

[data-bs-theme="dark"] .valid-feedback {
  color: var(--bs-success-text-emphasis) !important;
}

/* Select options */
select option {
  background-color: var(--bs-card-bg);
  color: var(--bs-body-color);
}

/* Textarea */
textarea {
  background-color: var(--bs-body-bg);
  border-color: var(--bs-border-color);
  color: var(--bs-body-color);
}

[data-bs-theme="dark"] textarea {
  background-color: var(--bs-secondary-bg);
}

/* Fieldset */
fieldset {
  border-color: var(--bs-border-color);
}

/* All list elements */
ul, ol, dl {
  color: var(--bs-body-color);
}

li, dt, dd {
  color: inherit;
}

/* Blockquote */
blockquote {
  border-left-color: var(--bs-border-color);
  color: var(--bs-body-color);
}

/* Figure and figcaption */
figure {
  color: var(--bs-body-color);
}

figcaption {
  color: var(--bs-secondary-color);
}

/* Mark/highlight */
mark {
  background-color: var(--bs-warning-bg-subtle);
  color: var(--bs-body-color);
}

/* kbd, samp, var */
kbd,
samp,
var {
  background-color: var(--bs-secondary-bg);
  color: var(--bs-body-color);
  border: 0.5px solid var(--bs-border-color);
}

/* Details and summary */
details {
  border: 0.5px solid var(--bs-border-color);
  background-color: var(--bs-card-bg);
  color: var(--bs-body-color);
}

summary {
  background-color: var(--bs-secondary-bg);
  color: var(--bs-body-color);
}

/* Dialog */
dialog {
  background-color: var(--bs-card-bg);
  border: 0.5px solid var(--bs-border-color);
  color: var(--bs-body-color);
}

/* Address */
address {
  color: var(--bs-body-color);
}

/* Time */
time {
  color: var(--bs-secondary-color);
}

/* Abbr */
abbr[title] {
  border-bottom-color: var(--bs-border-color);
}

/* Table elements */
table {
  color: var(--bs-body-color);
  border-color: var(--bs-border-color);
}

thead,
tbody,
tfoot,
tr,
th,
td {
  color: inherit;
  border-color: var(--bs-border-color);
}

caption {
  color: var(--bs-secondary-color);
}

/* All badge variants */
.badge {
  color: var(--bs-body-color);
}

.badge.bg-light {
  color: var(--bs-dark) !important;
}

[data-bs-theme="dark"] .badge.bg-light {
  background-color: var(--bs-secondary-bg) !important;
  color: var(--bs-body-color) !important;
}

/* Alert variants */
.alert-primary,
.alert-secondary,
.alert-success,
.alert-danger,
.alert-warning,
.alert-info {
  border: 0.5px solid var(--bs-border-color);
}

#alert-ribbon .alert {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  min-height: 3.25rem;
  padding: 0.85rem 1rem;
  border-width: 1px;
  border-style: solid;
  border-radius: 0.85rem;
  box-shadow: var(--app-shadow-soft);
}

#alert-ribbon {
  pointer-events: none;
}

#alert-ribbon .alert {
  pointer-events: auto;
}

.user-project-mode-select,
.user-project-row-mode-select {
  background-color: #1c2432;
  border-color: #40506a;
  color: #d8e2f1;
}

.user-project-mode-select:focus,
.user-project-row-mode-select:focus {
  border-color: #6f85ad;
  box-shadow: 0 0 0 0.15rem rgba(111, 133, 173, 0.25);
}

.user-project-select-info {
  color: #94a8c9;
}

#alert-ribbon .alert > span {
  flex: 1 1 auto;
  min-width: 0;
  font-weight: 600;
  line-height: 1.45;
}

#alert-ribbon .btn-close {
  flex: 0 0 auto;
  margin: 0;
}

[data-bs-theme="light"] #alert-ribbon .alert-success {
  background: #ecfdf3 !important;
  border-color: #9fdfba !important;
  color: #0f5132 !important;
}

[data-bs-theme="light"] #alert-ribbon .alert-danger {
  background: #fff1f2 !important;
  border-color: #f1aeb5 !important;
  color: #842029 !important;
}

[data-bs-theme="light"] #alert-ribbon .alert-warning {
  background: #fff8db !important;
  border-color: #f4d98b !important;
  color: #7a5600 !important;
}

[data-bs-theme="light"] #alert-ribbon .alert-info {
  background: #eef8ff !important;
  border-color: #9fd4ff !important;
  color: #0b4f75 !important;
}

[data-bs-theme="dark"] #alert-ribbon .alert-success {
  background: #10291b !important;
  border-color: rgba(63, 185, 80, 0.42) !important;
  color: #7ee787 !important;
}

[data-bs-theme="dark"] #alert-ribbon .alert-danger {
  background: #31171a !important;
  border-color: rgba(255, 107, 107, 0.38) !important;
  color: #ffb3b8 !important;
}

[data-bs-theme="dark"] #alert-ribbon .alert-warning {
  background: #2f2210 !important;
  border-color: rgba(240, 173, 78, 0.42) !important;
  color: #ffd58a !important;
}

[data-bs-theme="dark"] #alert-ribbon .alert-info {
  background: #102433 !important;
  border-color: rgba(88, 166, 255, 0.4) !important;
  color: #9ed0ff !important;
}

/* Spinner */
.spinner-border,
.spinner-grow {
  color: var(--bs-primary);
}

/* Placeholder */
.placeholder {
  background-color: var(--bs-secondary-bg);
}

/* Ratio */
.ratio {
  background-color: var(--bs-secondary-bg);
}

/* Scrollspy */
.scrollspy-example {
  background-color: var(--bs-card-bg);
}

/* Tooltip */
.tooltip {
  color: var(--bs-body-color);
}

.tooltip-inner {
  background-color: var(--bs-dark);
  color: #fff;
}

[data-bs-theme="dark"] .tooltip-inner {
  background-color: var(--bs-secondary-bg);
  border: 0.5px solid var(--bs-border-color);
}

/* Popover */
.popover {
  background-color: var(--bs-card-bg);
  border: 0.5px solid var(--bs-border-color);
  color: var(--bs-body-color);
}

.popover-header {
  background-color: var(--bs-secondary-bg);
  border-bottom: 0.5px solid var(--bs-border-color);
  color: var(--bs-body-color);
}

.popover-body {
  color: var(--bs-body-color);
}

/* Close button - Dark mode specific */
[data-bs-theme="dark"] .modal-header .btn-close,
[data-bs-theme="dark"] .offcanvas-header .btn-close,
[data-bs-theme="dark"] .toast-header .btn-close {
  background-color: rgba(255, 255, 255, 0.1);
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 0.25rem;
  opacity: 1;
  width: 32px;
  height: 32px;
  background-repeat: no-repeat;
  background-position: center;
  background-size: 14px;
  filter: brightness(1.1);
}

[data-bs-theme="dark"] .modal-header .btn-close:hover,
[data-bs-theme="dark"] .offcanvas-header .btn-close:hover,
[data-bs-theme="dark"] .toast-header .btn-close:hover {
  background-color: rgba(255, 255, 255, 0.15);
  border-color: rgba(255, 255, 255, 0.3);
  transform: scale(1.05);
}

[data-bs-theme="dark"] .modal-header .btn-close:focus,
[data-bs-theme="dark"] .offcanvas-header .btn-close:focus,
[data-bs-theme="dark"] .toast-header .btn-close:focus {
  box-shadow: 0 0 0 3px rgba(74, 158, 255, 0.4);
  border-color: rgba(74, 158, 255, 0.5);
  outline: none;
}

/* Generic close buttons (fallback) */
.btn-close {
  opacity: 0.8;
}

[data-bs-theme="dark"] .btn-close {
  filter: invert(1) grayscale(100%) brightness(200%);
  opacity: 0.9;
}


/* Selection */
::selection {
  background-color: var(--bs-primary);
  color: #fff;
}

::-moz-selection {
  background-color: var(--bs-primary);
  color: #fff;
}

/* Focus visible */
:focus-visible {
  outline: 2px solid var(--bs-primary);
  outline-offset: 2px;
}

/* Disabled elements */
:disabled,
[disabled] {
  opacity: 0.6;
  cursor: not-allowed;
}

/* All custom components */
.page-item,
.page-link,
.breadcrumb-item,
.nav-item,
.nav-link {
  color: var(--bs-body-color);
}

/* Border utilities override */
/* .border,
[class*="border-"] {
  border-color: var(--bs-border-color);
} */

/* Background utilities override for theme */
.bg-white {
  background-color: var(--bs-card-bg) !important;
}

[data-bs-theme="dark"] .bg-light {
  background-color: var(--bs-secondary-bg) !important;
  color: var(--bs-body-color) !important;
}

/* Card with bg-light in dark mode - make it visible with glow (always visible) */
[data-bs-theme="dark"] .card.bg-light {
  background-color: var(--bs-secondary-bg) !important;
  border: 1px solid rgba(255, 255, 255, 0.1) !important;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.5),
              0 4px 8px rgba(0, 0, 0, 0.3),
              0 0 0 1px rgba(255, 255, 255, 0.12),
              0 0 12px rgba(74, 158, 255, 0.08),
              inset 0 1px 0 rgba(255, 255, 255, 0.12),
              inset 0 -1px 0 rgba(0, 0, 0, 0.2);
}

/* Text color utilities */
.text-dark {
  color: var(--bs-body-color) !important;
}

.text-black-50 {
  color: var(--bs-secondary-color) !important;
}

/* Login page specific */
.login-wrapper {
  background-color: var(--bs-body-bg);
  color: var(--bs-body-color);
}

.login-card {
  background-color: var(--bs-card-bg) !important;
  border: 0.5px solid var(--bs-card-border-color) !important;
}

.login-background {
  background-color: var(--bs-body-bg);
}

/* Brand elements */
.brand {
  color: var(--bs-body-color);
}

.brand-mark {
  /* SVG-based mark uses its own gradient; keep anchor sizing neutral for dark theme */
  background: transparent;
  color: #fff;
}

.brand-title {
  color: var(--bs-body-color) !important;
  /* stronger imprint for dark backgrounds */
  text-shadow: 0 1px 0 rgba(255,255,255,0.03), 0 -1px 0 rgba(0,0,0,0.6);
  font-weight: 700;
}

/* Content area - Inherit body background */
.content {
  background-color: transparent;
  color: var(--bs-body-color);
}

.main-layout {
  background-color: transparent;
}

/* Container backgrounds */
.container,
.container-fluid {
  background-color: transparent;
}

/* ============================================
   PROPER SPACING - FILTERS & TABLES
   ============================================ */

/* Space between filter/search forms and tables */
form + .card,
form + .table-responsive,
form + .table-container,
.card + .card,
.card-body > form + .table-responsive,
.card-body > form + .table-container {
  margin-top: 1.5rem;
}

/* General form spacing */
form.mb-3,
form.mb-4 {
  margin-bottom: 1.5rem !important;
}

/* Search forms before tables */
#tokenSearchForm + *,
#userSearchForm + *,
#assignmentSearchForm + *,
#auditSearchForm + *,
#eventSearchForm + *,
#machineSearchForm + *,
#applicationSearchForm + *,
#providerSearchForm + *,
#policySearchForm + *,
#realmSearchForm + *,
#resolverSearchForm + * {
  margin-top: 1.5rem;
}

/* Card body spacing */
.card-body {
  padding: 1.25rem;
}

.card-header + .card-body {
  padding-top: 1.25rem;
}

/* Table wrapper spacing */
.table-wrap,
.table-responsive,
.table-container {
  margin-top: 1rem;
}

/* Space between sections */
.row + .row {
  margin-top: 1.5rem;
}

/* Card spacing in grid */
.row > [class*="col"] > .card {
  margin-bottom: 1.5rem;
}

/* Consistent vertical rhythm */
.card + .card,
.alert + .card,
.card + .alert {
  margin-top: 1.5rem;
}

/* Stats and metrics - Same as cards with hover */
.stat-card {
  background: #fff;
  border: 1px solid var(--bs-border-color);
  border-radius: var(--bs-border-radius-lg);
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
  transition: box-shadow 0.2s ease;
  color: var(--bs-body-color);
}

.stat-card:hover {
  box-shadow: 0 0.125rem 0.25rem rgba(0, 0, 0, 0.03);
}

[data-bs-theme="dark"] .stat-card {
  background-color: var(--bs-card-bg) !important;
  border: 1px solid rgba(255, 255, 255, 0.1) !important;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.5),
              0 4px 8px rgba(0, 0, 0, 0.3),
              0 0 0 1px rgba(255, 255, 255, 0.12),
              0 0 12px rgba(74, 158, 255, 0.08),
              inset 0 1px 0 rgba(255, 255, 255, 0.12),
              inset 0 -1px 0 rgba(0, 0, 0, 0.2);
}

[data-bs-theme="dark"] .stat-card:hover {
  transform: translateY(-0.5px);
  border-color: rgba(74, 158, 255, 0.15) !important;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.6),
              0 8px 16px rgba(0, 0, 0, 0.4),
              0 0 0 1px rgba(74, 158, 255, 0.4),
              0 0 24px rgba(74, 158, 255, 0.15),
              inset 0 1px 0 rgba(255, 255, 255, 0.15),
              inset 0 -1px 0 rgba(0, 0, 0, 0.3);
}

/* Ensure all text is readable */
* {
  color: inherit;
}

body * {
  color: inherit;
}

/* ============================================
   MOBILE RESPONSIVE TOPBAR
   ============================================ */
@media (max-width: 767.98px) {
  /* Hide version badge on mobile */
  .topbar .badge {
    display: none !important;
  }

  /* Ensure icons are properly visible */
  .topbar-icon {
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    padding: 0.5rem;
  }

  /* Proper spacing between icons */
  .topbar .d-flex.gap-2 {
    gap: 0.5rem;
  }

  /* Brand title hide on very small screens */
  .brand-title {
    display: none;
  }

  /* Make sure all topbar icons are visible */
  #themeToggle,
  #notificationsDropdown,
  #userDropdown {
    display: inline-flex !important;
  }
}

/* Force theme on stubborn elements */
[data-bs-theme="dark"] [class*="card"],
[data-bs-theme="dark"] [class*="modal"],
[data-bs-theme="dark"] [class*="dropdown"],
[data-bs-theme="dark"] [class*="alert"],
[data-bs-theme="dark"] [class*="toast"] {
  color: var(--bs-body-color);
}

/* ============================================
   LIGHT MODE - CLOSE BUTTON FIX (High Visibility)
   ============================================ */
.modal-header .btn-close,
.offcanvas-header .btn-close,
.toast-header .btn-close {
  background-color: #e9ecef;
  border: 1px solid #ced4da;
  border-radius: 0.25rem;
  opacity: 1;
  width: 32px;
  height: 32px;
  padding: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23212529'%3e%3cpath d='M.293.293a1 1 0 0 1 1.414 0L8 6.586 14.293.293a1 1 0 1 1 1.414 1.414L9.414 8l6.293 6.293a1 1 0 0 1-1.414 1.414L8 9.414l-6.293 6.293a1 1 0 0 1-1.414-1.414L6.586 8 .293 1.707a1 1 0 0 1 0-1.414z'/%3e%3c/svg%3e");
  background-repeat: no-repeat;
  background-position: center;
  background-size: 14px;
}

.modal-header .btn-close:hover,
.offcanvas-header .btn-close:hover,
.toast-header .btn-close:hover {
  background-color: #dee2e6;
  border-color: #adb5bd;
  transform: scale(1.05);
}

.modal-header .btn-close:focus,
.offcanvas-header .btn-close:focus,
.toast-header .btn-close:focus {
  box-shadow: 0 0 0 3px rgba(13, 110, 253, 0.25);
  border-color: #0d6efd;
  outline: none;
}

/* ============================================
   SMOOTH TRANSITIONS - FAST & PROFESSIONAL (NO FLICKER)
   ============================================ */

/* Instant theme application - NO flicker */
html.theme-transitioning * {
  transition: none !important;
}

/* Normal smooth transitions after theme applied */
html {
  transition: background-color 0.2s ease, color 0.2s ease;
}

body,
.card,
.modal-content,
.dropdown-menu,
.sidebar,
.topbar,
.form-control,
.btn,
.accordion-item,
.alert,
.badge,
.ribbon {
  transition: background-color 0.2s ease,
              color 0.2s ease,
              border-color 0.2s ease,
              box-shadow 0.15s ease;
}

.table tbody tr,
.table tbody td,
.table thead th {
  transition: background-color 0.2s ease,
              color 0.2s ease,
              box-shadow 0.1s ease;
}

/* Vibrant focus states */
:focus-visible {
  outline: 2px solid var(--bs-primary);
  outline-offset: 2px;
  box-shadow: 0 0 0 4px rgba(var(--bs-primary-rgb), 0.2);
}

/* ============================================
   NOTIFICATION CONTAINERS - DARK MODE SUPPORT
   ============================================ */
[data-bs-theme="dark"] .notification {
  background-color: var(--bs-card-bg) !important;
  border: 1px solid rgba(255, 255, 255, 0.12) !important;
  color: var(--bs-body-color) !important;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.5),
              0 4px 8px rgba(0, 0, 0, 0.3);
}

[data-bs-theme="dark"] .notification.success {
  background-color: rgba(63, 185, 80, 0.1) !important;
  border-left: 4px solid #3fb950 !important;
  color: #3fb950 !important;
  box-shadow: 0 0 16px rgba(63, 185, 80, 0.2);
}

[data-bs-theme="dark"] .notification.error,
[data-bs-theme="dark"] .notification.danger {
  background-color: rgba(255, 107, 107, 0.1) !important;
  border-left: 4px solid #ff6b6b !important;
  color: #ff6b6b !important;
  box-shadow: 0 0 16px rgba(255, 107, 107, 0.2);
}

[data-bs-theme="dark"] .notification.warning {
  background-color: rgba(240, 173, 78, 0.1) !important;
  border-left: 4px solid #f0ad4e !important;
  color: #f0ad4e !important;
  box-shadow: 0 0 16px rgba(240, 173, 78, 0.2);
}

[data-bs-theme="dark"] .notification.info {
  background-color: rgba(88, 166, 255, 0.1) !important;
  border-left: 4px solid #58a6ff !important;
  color: #58a6ff !important;
  box-shadow: 0 0 16px rgba(88, 166, 255, 0.2);
}

[data-bs-theme="dark"] .notification-close {
  color: var(--bs-body-color) !important;
  opacity: 0.7;
}

[data-bs-theme="dark"] .notification-close:hover {
  opacity: 1;
}

/* User Badge Group */
[data-bs-theme="dark"] .user-badge-group {
  background-color: var(--bs-gray-800) !important;
}

/* ============================================
   PROJECT SURFACES - GLOBAL COMPONENT COVERAGE
   ============================================ */
:root,
[data-bs-theme="light"] {
  --app-surface-elevated: #ffffff;
  --app-surface-subtle: #f5f6f8;
  --app-surface-soft: #eef2f5;
  --app-border-soft: rgba(15, 23, 42, 0.08);
  --app-border-strong: rgba(15, 23, 42, 0.14);
  --app-text-strong: #202938;
  --app-text-muted: #697789;
  --app-shadow-soft: 0 2px 10px rgba(15, 23, 42, 0.04);
  --app-shadow-hover: 0 6px 16px rgba(15, 23, 42, 0.07);
}

[data-bs-theme="dark"] {
  --app-surface-elevated: var(--bs-card-bg);
  --app-surface-subtle: #151b23;
  --app-surface-soft: #10161d;
  --app-border-soft: rgba(255, 255, 255, 0.12);
  --app-border-strong: rgba(255, 255, 255, 0.2);
  --app-text-strong: var(--bs-body-color);
  --app-text-muted: #a8bac7;
  --app-shadow-soft: 0 8px 22px rgba(0, 0, 0, 0.28);
  --app-shadow-hover: 0 12px 28px rgba(0, 0, 0, 0.34);
}

.bg-white {
  background-color: var(--app-surface-elevated) !important;
}

.bg-light,
.bg-light-subtle,
.bg-body-tertiary {
  background-color: var(--app-surface-subtle) !important;
}

.text-dark,
.table .text-dark,
tr.text-dark > th,
tr.text-dark > td {
  color: var(--app-text-strong) !important;
}

.text-muted,
.text-body-secondary,
.small.text-muted,
.brand-sub {
  color: var(--app-text-muted) !important;
}

.border,
.border-top,
.border-bottom,
.border-start,
.border-end,
.border-light,
.border-light-subtle {
  border-color: var(--app-border-soft) !important;
}

.navbar.bg-white,
.navbar.bg-body-tertiary,
.topbar,
.notification-dropdown-menu,
.user-menu-dropdown {
  background-color: var(--app-surface-elevated) !important;
  border-color: var(--app-border-soft) !important;
  color: var(--app-text-strong) !important;
}

.navbar.navbar-light,
.navbar.navbar-light .nav-link,
.navbar.navbar-light .btn-link,
.sidebar-toggler,
.brand-title,
.theme-toggle-btn,
.theme-toggle-btn .theme-toggle-icon {
  color: var(--app-text-strong) !important;
}

.theme-toggle-btn,
.notification-dropdown-menu,
.user-menu-dropdown,
.dropdown-menu,
.dropdown-item,
.dropdown-header,
.dropdown-divider,
.input-group-text {
  border-color: var(--app-border-soft) !important;
}

.theme-toggle-btn {
  background-color: transparent !important;
}

.theme-toggle-btn:hover,
.theme-toggle-btn:focus-visible,
.navbar .nav-link:hover,
.navbar .nav-link:focus-visible,
.dropdown-item:hover,
.dropdown-item:focus {
  background-color: rgba(var(--bs-primary-rgb), 0.1) !important;
  color: var(--bs-primary) !important;
}

.badge.bg-light,
.badge.text-bg-light,
.notification-dropdown-menu .badge,
.user-menu-dropdown .badge {
  background-color: var(--app-surface-subtle) !important;
  color: var(--app-text-strong) !important;
  border-color: var(--app-border-soft) !important;
}

.premium-form-section,
.glass-card,
.summary-bar,
.summary-bar .card,
.card-section,
.kpi-card,
.stat-mini,
.stat-card,
.live-bar,
.table-responsive,
.map-monitor-toolbar,
.map-monitor-legend-overlay,
.ss-portal-menu,
.dropdown-menu.ss-menu-panel {
  background-color: var(--app-surface-elevated) !important;
  border-color: var(--app-border-soft) !important;
  color: var(--app-text-strong) !important;
  box-shadow: var(--app-shadow-soft);
}

.summary-bar,
.live-bar,
.map-monitor-stage,
.searchable-select .btn.form-select:hover,
.tpgc-searchable-select .btn.form-select:hover {
  background-color: var(--app-surface-subtle) !important;
}

.summary-bar h1,
.summary-title h1,
.kpi-number,
.stat-mini-value,
.card-section-header h3,
.map-popup-title,
.project-type-panel-title,
.project-type-mini-legend,
.map-monitor-layer-text,
.map-monitor-label {
  color: var(--app-text-strong) !important;
}

.summary-bar .subtitle,
.summary-title .subtitle,
.stat-label,
.kpi-label,
.kpi-progress-text,
.last-update-text,
.live-text,
.connection-badge,
.stat-mini-title,
.stat-row span:first-child,
.map-popup-meta,
.map-monitor-meta,
.map-monitor-legend-text,
.project-type-mini-legend .legend-label {
  color: var(--app-text-muted) !important;
}

.kpi-card:hover,
.stat-mini:hover,
.card-section:hover,
.glass-card:hover,
.stat-card:hover {
  box-shadow: var(--app-shadow-hover) !important;
}

.kpi-footer,
.card-section-header,
.card-section-footer,
.stat-mini-header,
.stat-row,
.summary-stats,
.map-monitor-toolbar,
.map-monitor-toolbar-separator,
.map-popup-head,
.map-popup-foot,
.legend-scroll-item,
.legend-scroll .text-truncate {
  border-color: var(--app-border-soft) !important;
}

.kpi-progress-track,
.stats-row::-webkit-scrollbar-track,
.map-popup-body::-webkit-scrollbar-track {
  background: var(--app-surface-soft) !important;
}

.stats-row::-webkit-scrollbar-thumb,
.map-popup-body::-webkit-scrollbar-thumb {
  background: var(--app-border-strong) !important;
}

.refresh-btn,
.map-monitor-reset-btn,
.searchable-select .btn.form-select,
.tpgc-searchable-select .btn.form-select,
.form-select,
.project-filter-select,
#project_select {
  background-color: var(--app-surface-elevated) !important;
  border-color: var(--app-border-soft) !important;
  color: var(--app-text-strong) !important;
}

.filter-section .form-label,
.form-label,
.tpgc-label,
.tpgc-form-section-subtitle {
  color: var(--app-text-muted) !important;
}

[data-bs-theme="dark"] select.form-select,
[data-bs-theme="dark"] select.form-select-premium,
[data-bs-theme="dark"] select.form-control-premium,
[data-bs-theme="dark"] select.project-filter-select,
[data-bs-theme="dark"] select#project_select {
  -webkit-appearance: none !important;
  -moz-appearance: none !important;
  appearance: none !important;
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%23c7d2da' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M2 5l6 6 6-6'/%3e%3c/svg%3e") !important;
  background-repeat: no-repeat !important;
  background-position: right 0.75rem center !important;
  background-size: 14px 10px !important;
  padding-right: 2.25rem !important;
}

[data-bs-theme="dark"] select.form-select:disabled,
[data-bs-theme="dark"] select.form-select-premium:disabled,
[data-bs-theme="dark"] select.form-control-premium:disabled,
[data-bs-theme="dark"] select.project-filter-select:disabled,
[data-bs-theme="dark"] select#project_select:disabled {
  -webkit-appearance: none !important;
  -moz-appearance: none !important;
  appearance: none !important;
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%239ba7b5' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M2 5l6 6 6-6'/%3e%3c/svg%3e") !important;
  background-repeat: no-repeat !important;
  background-position: right 0.75rem center !important;
  background-size: 14px 10px !important;
}

[data-bs-theme="dark"] .form-select-premium:not(select),
[data-bs-theme="dark"] .form-control-premium:not(select) {
  background-image: none !important;
}

[data-bs-theme="dark"] .searchable-select,
[data-bs-theme="dark"] .tpgc-searchable-select {
  --ss-border: rgba(255, 255, 255, 0.12);
  --ss-border-strong: rgba(74, 158, 255, 0.32);
  --ss-divider: rgba(255, 255, 255, 0.1);
  --ss-surface: var(--app-surface-elevated);
  --ss-surface-subtle: var(--app-surface-subtle);
  --ss-text: var(--app-text-strong);
  --ss-text-muted: var(--app-text-muted);
  --ss-hover: rgba(74, 158, 255, 0.1);
  --ss-active: rgba(74, 158, 255, 0.16);
  --ss-shadow: 0 16px 36px rgba(0, 0, 0, 0.45);
}

[data-bs-theme="dark"] .searchable-select .dropdown-menu,
[data-bs-theme="dark"] .tpgc-searchable-select .dropdown-menu,
[data-bs-theme="dark"] .ss-portal-menu,
[data-bs-theme="dark"] .dropdown-menu.ss-menu-panel {
  background: var(--app-surface-elevated) !important;
  border-color: var(--app-border-soft) !important;
  color: var(--app-text-strong) !important;
  box-shadow: var(--app-shadow-hover) !important;
}

[data-bs-theme="dark"] .searchable-select .ss-search,
[data-bs-theme="dark"] .tpgc-searchable-select .ss-search,
[data-bs-theme="dark"] .ss-portal-menu .ss-search,
[data-bs-theme="dark"] .searchable-select .btn.form-select,
[data-bs-theme="dark"] .tpgc-searchable-select .btn.form-select,
[data-bs-theme="dark"] .searchable-select .ss-item,
[data-bs-theme="dark"] .tpgc-searchable-select .ss-item,
[data-bs-theme="dark"] .ss-portal-menu .ss-item {
  background: transparent !important;
  color: var(--app-text-strong) !important;
  border-color: var(--app-border-soft) !important;
}

[data-bs-theme="dark"] .searchable-select .ss-item:hover,
[data-bs-theme="dark"] .searchable-select .ss-item.active,
[data-bs-theme="dark"] .tpgc-searchable-select .ss-item:hover,
[data-bs-theme="dark"] .tpgc-searchable-select .ss-item.active,
[data-bs-theme="dark"] .ss-portal-menu .ss-item:hover,
[data-bs-theme="dark"] .ss-portal-menu .ss-item.active {
  background: rgba(var(--bs-primary-rgb), 0.12) !important;
  color: var(--bs-body-color) !important;
}

[data-bs-theme="dark"] .searchable-select .bi-caret-down-fill,
[data-bs-theme="dark"] .tpgc-searchable-select .bi-caret-down-fill {
  color: var(--app-text-muted) !important;
}

.live-bar {
  background-image: linear-gradient(135deg, rgba(var(--bs-success-rgb), 0.08) 0%, rgba(var(--bs-primary-rgb), 0.06) 100%) !important;
}

.live-bar {
  position: relative;
  overflow: hidden;
  isolation: isolate;
  --live-accent-rgb: 25, 135, 84;
  --live-text-color: #198754;
  --live-badge-bg: rgba(25, 135, 84, 0.1);
  --live-badge-text: #198754;
  --live-border: rgba(25, 135, 84, 0.18);
  --live-flash-width: 56%;
  --live-flash-blur: 10px;
}

.live-bar > * {
  position: relative;
  z-index: 1;
}

.live-bar::before {
  content: "";
  position: absolute;
  top: -24%;
  bottom: -24%;
  left: calc(var(--live-flash-width, 44%) * -1.2);
  width: var(--live-flash-width, 44%);
  background: linear-gradient(
    var(--live-flash-angle, 106deg),
    rgba(var(--live-accent-rgb), 0) 0%,
    rgba(var(--live-accent-rgb), 0.02) 18%,
    rgba(var(--live-accent-rgb), var(--live-flash-soft-alpha, 0.05)) 34%,
    rgba(255, 255, 255, var(--live-flash-core-alpha, 0.18)) 50%,
    rgba(var(--live-accent-rgb), var(--live-flash-soft-alpha, 0.05)) 66%,
    rgba(var(--live-accent-rgb), 0.02) 82%,
    rgba(var(--live-accent-rgb), 0) 100%
  );
  transform: translate3d(0, 0, 0);
  pointer-events: none;
  opacity: 0;
  z-index: 0;
  filter: blur(var(--live-flash-blur, 10px)) saturate(112%);
}

.live-bar.is-flashing::before {
  animation: live-bar-gloss-flash var(--live-flash-duration, 2.9s) cubic-bezier(0.2, 0.7, 0.18, 1) 1;
}

@keyframes live-bar-gloss-flash {
  0% {
    transform: translate3d(0, 0, 0);
    opacity: 0;
  }
  12% {
    opacity: var(--live-flash-opacity, 0.82);
  }
  78% {
    opacity: calc(var(--live-flash-opacity, 0.82) * 0.62);
  }
  100% {
    transform: translate3d(calc(100vw + 180%), 0, 0);
    opacity: 0;
  }
}

.live-bar[data-live-state="online"] {
  --live-accent-rgb: 25, 135, 84;
  --live-text-color: #198754;
  --live-badge-bg: rgba(25, 135, 84, 0.1);
  --live-badge-text: #198754;
  --live-border: rgba(25, 135, 84, 0.18);
  border-color: var(--live-border) !important;
}

.live-bar[data-live-state="offline"] {
  --live-accent-rgb: 220, 53, 69;
  --live-text-color: #dc3545;
  --live-badge-bg: rgba(220, 53, 69, 0.12);
  --live-badge-text: #dc3545;
  --live-border: rgba(220, 53, 69, 0.2);
  border-color: var(--live-border) !important;
}

.live-bar[data-live-state="degraded"] {
  --live-accent-rgb: 245, 158, 11;
  --live-text-color: #d97706;
  --live-badge-bg: rgba(245, 158, 11, 0.14);
  --live-badge-text: #b45309;
  --live-border: rgba(245, 158, 11, 0.22);
  border-color: var(--live-border) !important;
}

.live-bar .live-indicator-dot,
.live-bar .live-dot {
  background: rgb(var(--live-accent-rgb)) !important;
  animation: live-indicator-pulse 2s ease-in-out infinite !important;
}

@keyframes live-indicator-pulse {
  0%,
  100% {
    opacity: 1;
    box-shadow: 0 0 0 0 rgba(var(--live-accent-rgb), 0.36);
  }
  50% {
    opacity: 0.82;
    box-shadow: 0 0 0 6px rgba(var(--live-accent-rgb), 0);
  }
}

.live-bar .live-text,
.live-bar .connection-badge {
  transition: color 0.2s ease, background-color 0.2s ease, border-color 0.2s ease;
}

.live-bar .live-text {
  color: var(--live-text-color) !important;
}

.live-bar .connection-badge {
  background: var(--live-badge-bg) !important;
  color: var(--live-badge-text) !important;
  border: 1px solid rgba(var(--live-accent-rgb), 0.16);
}

[data-bs-theme="light"] .live-bar[data-live-state="online"] {
  background-image: linear-gradient(135deg, rgba(25, 135, 84, 0.1) 0%, rgba(13, 110, 253, 0.05) 100%) !important;
  --live-flash-blur: 12px;
}

[data-bs-theme="light"] .live-bar[data-live-state="offline"] {
  background-image: linear-gradient(135deg, rgba(220, 53, 69, 0.1) 0%, rgba(220, 53, 69, 0.04) 100%) !important;
  --live-flash-blur: 12px;
}

[data-bs-theme="light"] .live-bar[data-live-state="degraded"] {
  background-image: linear-gradient(135deg, rgba(245, 158, 11, 0.11) 0%, rgba(245, 158, 11, 0.04) 100%) !important;
  --live-flash-blur: 12px;
}

[data-bs-theme="dark"] .live-bar[data-live-state="online"] {
  background-image: linear-gradient(135deg, rgba(99, 211, 155, 0.13) 0%, rgba(120, 185, 255, 0.05) 100%) !important;
  border-color: rgba(99, 211, 155, 0.2) !important;
}

[data-bs-theme="dark"] .live-bar[data-live-state="offline"] {
  background-image: linear-gradient(135deg, rgba(255, 139, 154, 0.12) 0%, rgba(255, 139, 154, 0.04) 100%) !important;
  border-color: rgba(255, 139, 154, 0.22) !important;
}

[data-bs-theme="dark"] .live-bar[data-live-state="degraded"] {
  background-image: linear-gradient(135deg, rgba(243, 187, 98, 0.14) 0%, rgba(243, 187, 98, 0.05) 100%) !important;
  border-color: rgba(243, 187, 98, 0.22) !important;
}

[data-bs-theme="dark"] .live-bar[data-live-state="online"] .live-text,
[data-bs-theme="dark"] .live-bar[data-live-state="online"] .connection-badge {
  color: #7ad8a4 !important;
}

[data-bs-theme="dark"] .live-bar[data-live-state="online"] .connection-badge {
  background: rgba(99, 211, 155, 0.12) !important;
  border-color: rgba(99, 211, 155, 0.18) !important;
}

[data-bs-theme="dark"] .live-bar[data-live-state="offline"] .live-text,
[data-bs-theme="dark"] .live-bar[data-live-state="offline"] .connection-badge {
  color: #ff9aa7 !important;
}

[data-bs-theme="dark"] .live-bar[data-live-state="offline"] .connection-badge {
  background: rgba(255, 139, 154, 0.12) !important;
  border-color: rgba(255, 139, 154, 0.18) !important;
}

[data-bs-theme="dark"] .live-bar[data-live-state="degraded"] .live-text,
[data-bs-theme="dark"] .live-bar[data-live-state="degraded"] .connection-badge {
  color: #f3bb62 !important;
}

[data-bs-theme="dark"] .live-bar[data-live-state="degraded"] .connection-badge {
  background: rgba(243, 187, 98, 0.14) !important;
  border-color: rgba(243, 187, 98, 0.18) !important;
}

@media (prefers-reduced-motion: reduce) {
  .live-bar::before {
    animation: none;
    transform: none;
    opacity: 0;
  }
}

.kpi-card,
.stat-mini,
.card-section {
  border-color: var(--app-border-soft) !important;
}

.kpi-trend-badge.up {
  background: rgba(var(--bs-success-rgb), 0.14) !important;
  color: var(--bs-success) !important;
}

.kpi-trend-badge.down {
  background: rgba(var(--bs-danger-rgb), 0.14) !important;
  color: var(--bs-danger) !important;
}

.kpi-trend-badge.warning {
  background: rgba(var(--bs-warning-rgb), 0.18) !important;
  color: var(--bs-warning) !important;
}

.kpi-trend-badge.info {
  background: rgba(var(--bs-info-rgb), 0.16) !important;
  color: var(--bs-info) !important;
}

.stat-mini-chip,
.status-badge,
.badge-stakeholder {
  background-color: var(--app-surface-subtle) !important;
  border-color: var(--app-border-soft) !important;
  color: var(--app-text-strong) !important;
}

#pms-monitoring-map-panel .map-monitor-stage,
#pms-monitoring-map-panel .map-monitor-toolbar,
#pms-monitoring-map-panel .map-monitor-select,
#pms-monitoring-map-panel .searchable-select,
#pms-monitoring-map-panel .searchable-select .btn.form-select,
#pms-monitoring-map-panel .map-monitor-reset-btn,
#pms-monitoring-map-panel .pms-monitor-canvas,
#pms-monitoring-map-panel .map-monitor-legend-overlay,
#pms-monitoring-map-panel .ol-popup.map-popup-shell {
  background: var(--app-surface-elevated) !important;
  border-color: var(--app-border-soft) !important;
  color: var(--app-text-strong) !important;
}

#pms-monitoring-map-panel .map-monitor-stage,
#pms-monitoring-map-panel .map-popup-body,
#pms-monitoring-map-panel .map-popup-content {
  background: var(--app-surface-subtle) !important;
}

#pms-monitoring-map-panel .map-popup-content {
  border-color: var(--app-border-soft) !important;
}

#pms-monitoring-map-panel .map-monitor-toolbar-separator {
  background: var(--app-border-soft) !important;
}

#pms-monitoring-map-panel .map-monitor-label,
#pms-monitoring-map-panel .map-monitor-layer,
#pms-monitoring-map-panel .map-popup-title,
#pms-monitoring-map-panel .map-popup-content strong {
  color: var(--app-text-strong) !important;
}

#pms-monitoring-map-panel .map-popup-content,
#pms-monitoring-map-panel .map-popup-content span,
#pms-monitoring-map-panel .map-popup-content p,
#pms-monitoring-map-panel .map-popup-content small,
#pms-monitoring-map-panel .map-monitor-layer-text {
  color: var(--app-text-muted) !important;
}

#pms-monitoring-map-panel .layer-switcher,
#pms-monitoring-map-panel .layer-switcher .panel,
#pms-monitoring-map-panel .layer-switcher button {
  background: var(--app-surface-elevated) !important;
  border-color: var(--app-border-soft) !important;
  color: var(--app-text-strong) !important;
  box-shadow: var(--app-shadow-soft) !important;
}

#pms-monitoring-map-panel .layer-switcher button:hover,
#pms-monitoring-map-panel .layer-switcher button:focus-visible,
#pms-monitoring-map-panel .layer-switcher .layer label:hover {
  background: rgba(var(--bs-primary-rgb), 0.1) !important;
  color: var(--bs-primary) !important;
}

/* Sidebar, topbar and shell details */
.sidebar,
.sidebar-card,
.sidebar .dropdown-menu,
.sidebar .navbar .nav-item.dropdown .dropdown-menu,
#pms-map-panel .ol-map-sidebar,
#pms-map-panel .ol-map-sidebar .sidebar-content,
#pms-map-panel .ol-map-sidebar .sidebar-pane,
.map-detail-modal,
.map-detail-modal .modal-header,
.map-detail-modal .modal-body,
.map-gallery-modal .modal-body,
.user-groups-panel .table-responsive,
.login-panel .card,
.guide-hero,
.guide-card,
.guide-meta-chip,
.guide-table,
.guide-table-row,
.guide-table-header {
  background-color: var(--sidebar-surface-strong, var(--app-surface-elevated)) !important;
  border-color: var(--sidebar-border, var(--app-border-soft)) !important;
  color: var(--app-text-strong) !important;
}

.sidebar .navbar .navbar-nav .nav-link,
.sidebar .navbar .nav-item .nav-link,
.sidebar .navbar .dropdown-item,
.sidebar .nav-link,
.sidebar .dropdown-toggle,
.sidebar-section-label,
.sidebar .menu-section-title,
.sidebar-menu-heading,
#pms-map-panel .map-sidebar-title,
#pms-map-panel .sidebar-close,
#pms-map-panel .ol-map-sidebar .sidebar-tabs a {
  color: var(--sidebar-text, #67748e) !important;
  font-weight: 600;
  letter-spacing: 0.01em;
}

.guide-title,
.guide-table-header h2,
.tpgc-card-form-header,
.rabill-spec-header,
.rabill-workflow-header {
  color: var(--app-text-strong) !important;
}

.sidebar .navbar .navbar-nav .nav-link i,
.sidebar .navbar .nav-item .nav-link i,
.sidebar .dropdown-toggle::after,
.sidebar .navbar .dropdown-item i,
#pms-map-panel .ol-map-sidebar .sidebar-tabs a i,
.notification-item .text-muted,
.guide-subtitle,
.guide-table-header p,
.guide-meta-chip,
.custom-dropdown label,
.login-panel .text-muted,
.summary-bar .breadcrumb,
.summary-bar .breadcrumb-item,
.summary-bar-pms .summary-title .subtitle {
  color: var(--sidebar-text-muted, var(--app-text-muted)) !important;
}

[data-bs-theme="light"] .sidebar .navbar .navbar-nav .nav-link,
[data-bs-theme="light"] .sidebar .navbar .nav-item .nav-link,
[data-bs-theme="light"] .sidebar .dropdown-menu .dropdown-item,
[data-bs-theme="light"] .sidebar-card .nav-link,
[data-bs-theme="light"] .sidebar .dropdown-toggle,
[data-bs-theme="light"] .sidebar .nav-link {
  color: var(--sidebar-text, #55657a) !important;
}

[data-bs-theme="light"] .sidebar .navbar .navbar-nav .nav-link i,
[data-bs-theme="light"] .sidebar .navbar .nav-item .nav-link i,
[data-bs-theme="light"] .sidebar .dropdown-menu .dropdown-item i,
[data-bs-theme="light"] .sidebar .dropdown-toggle::after {
  color: var(--sidebar-icon, #74869a) !important;
}

[data-bs-theme="dark"] .sidebar .navbar .navbar-nav .nav-link,
[data-bs-theme="dark"] .sidebar .navbar .nav-item .nav-link,
[data-bs-theme="dark"] .sidebar .dropdown-menu .dropdown-item,
[data-bs-theme="dark"] .sidebar-card .nav-link,
[data-bs-theme="dark"] .sidebar .dropdown-toggle,
[data-bs-theme="dark"] .sidebar .nav-link {
  color: var(--sidebar-text, #d3ddea) !important;
}

[data-bs-theme="dark"] .sidebar .navbar .navbar-nav .nav-link i,
[data-bs-theme="dark"] .sidebar .navbar .nav-item .nav-link i,
[data-bs-theme="dark"] .sidebar .dropdown-menu .dropdown-item i,
[data-bs-theme="dark"] .sidebar .dropdown-toggle::after {
  color: var(--sidebar-icon, #9fb2c8) !important;
}

.sidebar .navbar .navbar-nav .nav-link:hover,
.sidebar .navbar .navbar-nav .nav-link.active,
.sidebar .navbar .nav-item .nav-link:hover,
.sidebar .navbar .nav-item.active-dropdown > .nav-link,
.sidebar .navbar .nav-item .nav-link.active,
.sidebar .dropdown-menu .dropdown-item:hover,
.sidebar .dropdown-menu .dropdown-item.active,
.sidebar-card .nav-link:hover,
.sidebar-card .nav-link.active,
#pms-map-panel .ol-map-sidebar .sidebar-tabs li.active a,
#pms-map-panel .ol-map-sidebar .sidebar-tabs a:hover,
.notification-item:hover,
.guide-table-row:hover {
  background-color: rgba(var(--bs-primary-rgb), 0.1) !important;
  color: var(--bs-primary) !important;
  border-color: var(--app-border-soft) !important;
}

[data-bs-theme="light"] .sidebar .navbar .navbar-nav .nav-link:hover,
[data-bs-theme="light"] .sidebar .navbar .navbar-nav .nav-link.active,
[data-bs-theme="light"] .sidebar .navbar .nav-item .nav-link:hover,
[data-bs-theme="light"] .sidebar .navbar .nav-item.active-dropdown > .nav-link,
[data-bs-theme="light"] .sidebar .navbar .nav-item .nav-link.active,
[data-bs-theme="light"] .sidebar .dropdown-menu .dropdown-item:hover,
[data-bs-theme="light"] .sidebar .dropdown-menu .dropdown-item.active,
[data-bs-theme="light"] .sidebar-card .nav-link:hover,
[data-bs-theme="light"] .sidebar-card .nav-link.active {
  background-color: var(--sidebar-hover-bg, rgba(46, 49, 146, 0.08)) !important;
  color: var(--sidebar-hover-text, #24313d) !important;
}

[data-bs-theme="dark"] .sidebar .navbar .navbar-nav .nav-link:hover,
[data-bs-theme="dark"] .sidebar .navbar .navbar-nav .nav-link.active,
[data-bs-theme="dark"] .sidebar .navbar .nav-item .nav-link:hover,
[data-bs-theme="dark"] .sidebar .navbar .nav-item.active-dropdown > .nav-link,
[data-bs-theme="dark"] .sidebar .navbar .nav-item .nav-link.active,
[data-bs-theme="dark"] .sidebar .dropdown-menu .dropdown-item:hover,
[data-bs-theme="dark"] .sidebar .dropdown-menu .dropdown-item.active,
[data-bs-theme="dark"] .sidebar-card .nav-link:hover,
[data-bs-theme="dark"] .sidebar-card .nav-link.active {
  background-color: var(--sidebar-hover-bg, rgba(var(--bs-primary-rgb), 0.14)) !important;
  color: var(--sidebar-hover-text, #f7fbff) !important;
}

.sidebar .navbar .navbar-nav .nav-link.active i,
.sidebar .navbar .nav-item .nav-link.active i,
.sidebar .dropdown-menu .dropdown-item.active i,
#pms-map-panel .ol-map-sidebar .sidebar-tabs li.active a i {
  color: currentColor !important;
}

.notification-item,
.list-controls-grid .input-group-text,
.list-controls-grid .form-control,
.list-controls-grid .form-select,
.mobile-search-bar .form-control,
.custom-dropdown .form-select,
.custom-dropdown select,
.login-panel .form-control,
.login-panel .form-select,
.login-panel .input-group-text,
.tpgc-form-container,
.tpgc-form-section,
.tpgc-input,
.tpgc-select,
.tpgc-textarea,
.tpgc-card-form,
.tpgc-card-form-header,
.tpgc-card-form-footer {
  background-color: var(--app-surface-elevated) !important;
  border-color: var(--app-border-soft) !important;
  color: var(--app-text-strong) !important;
}

.summary-bar,
.summary-bar-pms,
.summary-bar .action-btn-group .btn:hover,
.summary-bar-pms .summary-actions .btn:hover,
.tpgc-form-section,
.guide-shell,
.login-hero,
#pms-map-panel .ol-map-sidebar .sidebar-tabs,
.notification-item.unread {
  background-color: var(--app-surface-subtle) !important;
}

.summary-bar h1,
.summary-bar-pms .summary-title h1,
.summary-bar .subtitle,
.summary-bar-pms .summary-title .subtitle,
.summary-bar .form-select,
.summary-bar #refresh_btn,
.summary-bar-pms #refresh_btn,
.summary-bar #office_select,
.summary-bar #project_select,
.summary-bar-pms #office_select,
.summary-bar-pms #project_select {
  color: var(--app-text-strong) !important;
  border-color: var(--app-border-soft) !important;
}

.summary-bar .form-select,
.summary-bar-pms .form-select,
.summary-bar #refresh_btn,
.summary-bar-pms #refresh_btn {
  background-color: var(--app-surface-elevated) !important;
}

.summary-bar #refresh_btn:hover,
.summary-bar-pms #refresh_btn:hover {
  background-color: rgba(var(--bs-primary-rgb), 0.08) !important;
  color: var(--bs-primary) !important;
}

.notification-item.unread::before,
.summary-bar .breadcrumb-item + .breadcrumb-item::before,
.guide-table-header,
.guide-table-row,
.guide-table-row:last-child,
.tpgc-form-section-title,
#pms-map-panel .map-sidebar-head,
#pms-map-panel .ol-map-sidebar .sidebar-tabs,
#pms-map-panel .ol-popup .card-header,
.map-detail-modal .modal-header,
.rabill-lines-card .table-responsive,
.notification-dropdown-menu .notification-list,
.custom-scrollbar::-webkit-scrollbar-track {
  border-color: var(--app-border-soft) !important;
}

/* Global scrollbars */
html,
body,
.content,
.sidebar,
.custom-scrollbar,
.table-responsive,
.ss-portal-menu,
.dropdown-menu.ss-menu-panel,
.guide-shell,
.guide-table,
.notification-dropdown-menu .notification-list {
  scrollbar-color: var(--app-border-strong) var(--app-surface-soft);
}

html::-webkit-scrollbar,
body::-webkit-scrollbar,
.content::-webkit-scrollbar,
.sidebar::-webkit-scrollbar,
.custom-scrollbar::-webkit-scrollbar,
.table-responsive::-webkit-scrollbar,
.ss-portal-menu::-webkit-scrollbar,
.dropdown-menu.ss-menu-panel::-webkit-scrollbar,
.guide-shell::-webkit-scrollbar,
.guide-table::-webkit-scrollbar,
.notification-dropdown-menu .notification-list::-webkit-scrollbar {
  width: 10px;
  height: 10px;
}

html::-webkit-scrollbar-track,
body::-webkit-scrollbar-track,
.content::-webkit-scrollbar-track,
.sidebar::-webkit-scrollbar-track,
.custom-scrollbar::-webkit-scrollbar-track,
.table-responsive::-webkit-scrollbar-track,
.ss-portal-menu::-webkit-scrollbar-track,
.dropdown-menu.ss-menu-panel::-webkit-scrollbar-track,
.guide-shell::-webkit-scrollbar-track,
.guide-table::-webkit-scrollbar-track,
.notification-dropdown-menu .notification-list::-webkit-scrollbar-track {
  background: var(--app-surface-soft);
}

html::-webkit-scrollbar-thumb,
body::-webkit-scrollbar-thumb,
.content::-webkit-scrollbar-thumb,
.sidebar::-webkit-scrollbar-thumb,
.custom-scrollbar::-webkit-scrollbar-thumb,
.table-responsive::-webkit-scrollbar-thumb,
.ss-portal-menu::-webkit-scrollbar-thumb,
.dropdown-menu.ss-menu-panel::-webkit-scrollbar-thumb,
.guide-shell::-webkit-scrollbar-thumb,
.guide-table::-webkit-scrollbar-thumb,
.notification-dropdown-menu .notification-list::-webkit-scrollbar-thumb {
  background: var(--app-border-strong);
  border-radius: 999px;
  border: 2px solid var(--app-surface-soft);
}

/* Login and guide page compatibility */
.login-panel .form-control:focus,
.login-panel .form-select:focus,
.custom-dropdown .form-select:focus,
.custom-dropdown select:focus,
.list-controls-grid .form-control:focus,
.list-controls-grid .form-select:focus,
.mobile-search-bar .form-control:focus,
.tpgc-input:focus,
.tpgc-select:focus,
.tpgc-textarea:focus {
  background-color: var(--app-surface-elevated) !important;
  border-color: rgba(var(--bs-primary-rgb), 0.45) !important;
  color: var(--app-text-strong) !important;
  box-shadow: 0 0 0 3px rgba(var(--bs-primary-rgb), 0.12) !important;
}

[data-bs-theme="dark"] .login-hero {
  background: linear-gradient(135deg, #0f172a 0%, #123250 100%) !important;
}

[data-bs-theme="dark"] .guide-hero {
  background: linear-gradient(135deg, rgba(74, 158, 255, 0.08) 0%, rgba(13, 17, 23, 0.98) 100%) !important;
}

/* Sidebar toggle button */
.navbar .sidebar-toggler,
.content .navbar .sidebar-toggler,
button.sidebar-toggler.btn.btn-link {
  background: var(--app-surface-elevated) !important;
  border: 1px solid var(--app-border-soft) !important;
  color: var(--app-text-strong) !important;
  border-radius: 10px !important;
  width: 42px;
  height: 42px;
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  box-shadow: none !important;
}

.navbar .sidebar-toggler i,
.content .navbar .sidebar-toggler i,
button.sidebar-toggler i {
  color: var(--app-text-strong) !important;
}

.navbar .sidebar-toggler:hover,
.navbar .sidebar-toggler:focus-visible,
.navbar .sidebar-toggler:active,
.content .navbar .sidebar-toggler:hover,
.content .navbar .sidebar-toggler:focus-visible,
.content .navbar .sidebar-toggler:active {
  background: rgba(var(--bs-primary-rgb), 0.1) !important;
  border-color: rgba(var(--bs-primary-rgb), 0.22) !important;
  color: var(--bs-primary) !important;
}

.navbar .sidebar-toggler:hover i,
.navbar .sidebar-toggler:focus-visible i,
.navbar .sidebar-toggler:active i,
.content .navbar .sidebar-toggler:hover i,
.content .navbar .sidebar-toggler:focus-visible i,
.content .navbar .sidebar-toggler:active i {
  color: var(--bs-primary) !important;
}

/* Dashboard headers and cards */
.card-section-header {
  background: linear-gradient(180deg, var(--app-surface-subtle) 0%, var(--app-surface-elevated) 100%) !important;
  border-bottom: 1px solid var(--app-border-soft) !important;
}

.card-section-header h3,
.card-section-header h3 span,
.card-section-header h3 strong,
.card-section-header .view-all-link,
.card-section-header .count-badge,
.card-section-header .progress-badge {
  color: var(--app-text-strong) !important;
}

.card-section-header h3 i,
.card-section-header .text-warning,
.card-section-header .text-primary,
.card-section-header .text-success,
.card-section-header .text-info,
.card-section-header .text-danger {
  opacity: 1 !important;
}

/* Progress compare and ranked cards */
.progress-compare-card,
.progress-overall-block,
.progress-row-card,
.progress-physical-card,
.progress-financial-card {
  background: var(--app-surface-elevated) !important;
  border-color: var(--app-border-soft) !important;
  color: var(--app-text-strong) !important;
}

.progress-compare-header,
.progress-overall-block + .progress-ranked-list {
  border-color: var(--app-border-soft) !important;
}

.progress-compare-header h6,
.progress-legend-value,
.progress-row-title strong,
.progress-row-value {
  color: var(--app-text-strong) !important;
}

.progress-compare-header p,
.progress-legend-label,
.progress-legend-more,
.progress-chart-caption,
.progress-row-title span,
.progress-row-meta,
#financial_overall_subtitle,
#financial_overall_metric_label,
#physicalBasis,
#financialMeta {
  color: var(--app-text-muted) !important;
}

.progress-overall-block {
  background: var(--app-surface-subtle) !important;
}

.progress-row-card.physical .progress-row-bar,
.progress-physical-card .progress-overall-track,
#physical_overall_bar {
  background: rgba(var(--bs-primary-rgb), 0.14) !important;
}

.progress-row-card.physical .progress-row-fill,
.progress-physical-card .progress-row-fill,
#physical_overall_bar.progress-bar {
  background: linear-gradient(90deg, #3478f6 0%, #65a6ff 100%) !important;
}

.progress-row-card.financial .progress-row-bar,
.progress-financial-card .progress-overall-track,
#financial_overall_bar {
  background: rgba(var(--bs-success-rgb), 0.16) !important;
}

.progress-row-card.financial .progress-row-fill,
.progress-financial-card .progress-row-fill,
#financial_overall_bar.progress-bar {
  background: linear-gradient(90deg, #22a06b 0%, #33c48d 100%) !important;
}

/* Quick actions and module cards */
.quick-actions {
  background: transparent !important;
}

.quick-action {
  background: var(--app-surface-subtle) !important;
  border-color: var(--app-border-soft) !important;
  color: var(--app-text-strong) !important;
  box-shadow: none !important;
}

.quick-action span,
.quick-action i {
  color: inherit !important;
  opacity: 1 !important;
}

.quick-action:hover,
.quick-action:focus-visible {
  background: rgba(var(--bs-primary-rgb), 0.1) !important;
  border-color: rgba(var(--bs-primary-rgb), 0.22) !important;
  color: var(--bs-primary) !important;
  box-shadow: var(--app-shadow-soft) !important;
}

.module-item {
  background: transparent !important;
  border-color: var(--app-border-soft) !important;
}

.module-item:hover,
.module-item:focus-visible {
  background: rgba(var(--bs-primary-rgb), 0.08) !important;
}

.module-info,
.module-info strong,
.module-info small,
.module-count,
.module-badge {
  opacity: 1 !important;
}

.module-info strong,
.module-count,
.module-badge {
  color: var(--app-text-strong) !important;
}

.module-info small {
  color: var(--app-text-muted) !important;
}

.module-count,
.module-badge {
  background: var(--app-surface-subtle) !important;
  border: 1px solid var(--app-border-soft) !important;
}

/* Footer */
.footer-digital {
  background: var(--app-surface-elevated) !important;
  border-top: 1px solid var(--app-border-soft) !important;
  color: var(--app-text-strong) !important;
}

.footer-digital .footer-text {
  color: var(--app-text-muted) !important;
}

.footer-digital .footer-link,
.footer-digital .digital-mark {
  color: var(--app-text-strong) !important;
}

.footer-digital .footer-link:hover,
.footer-digital .digital-mark:hover {
  color: var(--bs-primary) !important;
}

.footer-digital .digital-mark::before {
  box-shadow: 0 0 0 3px rgba(var(--bs-success-rgb), 0.12);
}

/* Premium thinner scrollbars */
html,
body,
.content,
.sidebar,
.custom-scrollbar,
.table-responsive,
.ss-portal-menu,
.dropdown-menu.ss-menu-panel,
.guide-shell,
.guide-table,
.notification-dropdown-menu .notification-list,
.progress-ranked-list,
.list-container,
#pms-monitoring-map-panel .map-popup-body,
.layer-switcher .panel {
  scrollbar-width: thin;
}

html::-webkit-scrollbar,
body::-webkit-scrollbar,
.content::-webkit-scrollbar,
.sidebar::-webkit-scrollbar,
.custom-scrollbar::-webkit-scrollbar,
.table-responsive::-webkit-scrollbar,
.ss-portal-menu::-webkit-scrollbar,
.dropdown-menu.ss-menu-panel::-webkit-scrollbar,
.guide-shell::-webkit-scrollbar,
.guide-table::-webkit-scrollbar,
.notification-dropdown-menu .notification-list::-webkit-scrollbar,
.progress-ranked-list::-webkit-scrollbar,
.list-container::-webkit-scrollbar,
#pms-monitoring-map-panel .map-popup-body::-webkit-scrollbar,
.layer-switcher .panel::-webkit-scrollbar {
  width: 4px;
  height: 4px;
}

html::-webkit-scrollbar-thumb,
body::-webkit-scrollbar-thumb,
.content::-webkit-scrollbar-thumb,
.sidebar::-webkit-scrollbar-thumb,
.custom-scrollbar::-webkit-scrollbar-thumb,
.table-responsive::-webkit-scrollbar-thumb,
.ss-portal-menu::-webkit-scrollbar-thumb,
.dropdown-menu.ss-menu-panel::-webkit-scrollbar-thumb,
.guide-shell::-webkit-scrollbar-thumb,
.guide-table::-webkit-scrollbar-thumb,
.notification-dropdown-menu .notification-list::-webkit-scrollbar-thumb,
.progress-ranked-list::-webkit-scrollbar-thumb,
.list-container::-webkit-scrollbar-thumb,
#pms-monitoring-map-panel .map-popup-body::-webkit-scrollbar-thumb,
.layer-switcher .panel::-webkit-scrollbar-thumb {
  border: 1px solid var(--app-surface-soft);
}

/* Dashboard filter + list shells */
.filter-section,
[data-dashboard-type="core"] .filter-section,
.list-container,
.ops-stat-card,
.progress-summary-tile {
  background: var(--app-surface-elevated) !important;
  border-color: var(--app-border-soft) !important;
  color: var(--app-text-strong) !important;
}

.filter-section .form-label,
.filter-section .searchable-select .btn.form-select .ss-label,
.filter-section .searchable-select .ss-item-label,
.progress-summary-label,
.list-container .empty-state p,
.list-container .empty-state small {
  color: var(--app-text-muted) !important;
}

.filter-section .form-select,
.filter-section .searchable-select .btn.form-select,
.filter-section .searchable-select .dropdown-menu,
.filter-section .searchable-select .ss-search,
.filter-section .searchable-select .ss-item,
#project_select,
.project-filter-select {
  background: var(--app-surface-elevated) !important;
  border-color: var(--app-border-soft) !important;
  color: var(--app-text-strong) !important;
}

.filter-section .form-select:hover,
.filter-section .searchable-select .btn.form-select:hover,
.filter-section .searchable-select .ss-item:hover,
.filter-section .searchable-select .ss-item.active {
  background: rgba(var(--bs-primary-rgb), 0.08) !important;
  border-color: rgba(var(--bs-primary-rgb), 0.22) !important;
  color: var(--bs-primary) !important;
}

.progress-summary-grid {
  border-top: 1px solid var(--app-border-soft) !important;
}

.progress-summary-tile {
  border-right: 1px solid var(--app-border-soft) !important;
  border-bottom: 1px solid var(--app-border-soft) !important;
}

.progress-summary-value,
.ops-stat-value,
.health-status,
.stat-row .fw-medium {
  color: var(--app-text-strong) !important;
}

.progress-summary-value.text-success,
.health-status.online,
.status-indicator.online {
  color: var(--bs-success) !important;
}

.progress-summary-value.text-danger,
.health-status.offline,
.status-indicator.offline {
  color: var(--bs-danger) !important;
}

.progress-summary-value.text-info {
  color: var(--bs-info) !important;
}

.progress-summary-value.text-warning,
.health-status.warning {
  color: var(--bs-warning) !important;
}

/* Dark-specific scrollbar cleanup for dashboard widgets */
[data-bs-theme="dark"] .stats-row,
[data-bs-theme="dark"] .progress-ranked-list,
[data-bs-theme="dark"] .list-container,
[data-bs-theme="dark"] #pms-monitoring-map-panel .map-popup-body,
[data-bs-theme="dark"] .layer-switcher .panel {
  scrollbar-color: var(--app-border-strong) var(--app-surface-soft) !important;
}

[data-bs-theme="dark"] .stats-row::-webkit-scrollbar-track,
[data-bs-theme="dark"] .progress-ranked-list::-webkit-scrollbar-track,
[data-bs-theme="dark"] .list-container::-webkit-scrollbar-track,
[data-bs-theme="dark"] #pms-monitoring-map-panel .map-popup-body::-webkit-scrollbar-track,
[data-bs-theme="dark"] .layer-switcher .panel::-webkit-scrollbar-track {
  background: var(--app-surface-soft) !important;
}

[data-bs-theme="dark"] .stats-row::-webkit-scrollbar-thumb,
[data-bs-theme="dark"] .progress-ranked-list::-webkit-scrollbar-thumb,
[data-bs-theme="dark"] .list-container::-webkit-scrollbar-thumb,
[data-bs-theme="dark"] #pms-monitoring-map-panel .map-popup-body::-webkit-scrollbar-thumb,
[data-bs-theme="dark"] .layer-switcher .panel::-webkit-scrollbar-thumb {
  background: var(--app-border-strong) !important;
}

/* Shared list filter accordion */
.list-filter-accordion,
.list-filter-card,
.list-filter-body,
.list-filter-form,
.list-filter-section {
  background: var(--app-surface-subtle) !important;
  border-color: var(--app-border-soft) !important;
  color: var(--app-text-strong) !important;
}

.list-filter-section,
.list-filter-icon-btn,
.list-filter-toggle,
.list-filter-form .form-control,
.list-filter-form .form-select,
.list-filter-form .searchable-select .btn.form-select,
.list-filter-form .searchable-select .dropdown-menu,
.list-filter-form .ss-portal-menu {
  background: var(--app-surface-elevated) !important;
  border-color: var(--app-border-soft) !important;
  color: var(--app-text-strong) !important;
}

.list-filter-header,
.list-filter-section-title,
.list-filter-footer-actions {
  border-color: var(--app-border-soft) !important;
}

.list-filter-toggle {
  box-shadow: none !important;
}

.list-filter-toggle::after {
  margin-left: auto;
}

.list-filter-toggle:not(.collapsed) {
  background: var(--app-surface-elevated) !important;
  color: var(--app-text-strong) !important;
}

.filter-badge {
  font-size: 10px;
  padding: 2px 6px;
}

.filter-badge-custom {
  cursor: help;
}

.list-filter-icon-btn {
  width: 28px;
  height: 28px;
}

.list-filter-form .form-label,
.list-filter-section-title,
.list-filter-form .text-muted {
  color: var(--app-text-muted) !important;
}

.list-filter-toggle:hover,
.list-filter-toggle:focus-visible,
.list-filter-form .form-control:focus,
.list-filter-form .form-select:focus,
.list-filter-form .searchable-select .btn.form-select:hover,
.list-filter-form .searchable-select .btn.form-select:focus,
.list-filter-form .searchable-select .ss-item:hover,
.list-filter-form .searchable-select .ss-item.active {
  background: rgba(var(--bs-primary-rgb), 0.08) !important;
  border-color: rgba(var(--bs-primary-rgb), 0.22) !important;
  color: var(--bs-primary) !important;
}

/* Searchable select typed text visibility */
.searchable-select .ss-search,
.tpgc-searchable-select .ss-search,
.ss-portal-menu .ss-search,
.ss-search-input {
  color: var(--app-text-strong) !important;
  caret-color: var(--app-text-strong) !important;
  -webkit-text-fill-color: var(--app-text-strong) !important;
}

.searchable-select .ss-search::placeholder,
.tpgc-searchable-select .ss-search::placeholder,
.ss-portal-menu .ss-search::placeholder,
.ss-search-input::placeholder {
  color: var(--app-text-muted) !important;
  opacity: 1 !important;
  -webkit-text-fill-color: var(--app-text-muted) !important;
}

[data-bs-theme="dark"] .searchable-select .ss-search,
[data-bs-theme="dark"] .tpgc-searchable-select .ss-search,
[data-bs-theme="dark"] .ss-portal-menu .ss-search,
[data-bs-theme="dark"] .ss-search-input {
  background: var(--app-surface-elevated) !important;
  border-color: var(--app-border-soft) !important;
  color: var(--app-text-strong) !important;
  caret-color: var(--app-text-strong) !important;
  -webkit-text-fill-color: var(--app-text-strong) !important;
}


/* Task detail accordions */
[data-bs-theme="dark"] .task-detail-page #accordionTask,
[data-bs-theme="dark"] .task-detail-page #accordionTask .accordion-item,
[data-bs-theme="dark"] .task-detail-page #accordionTask .accordion-body,
[data-bs-theme="dark"] .task-detail-page #accordionTask .table-responsive,
[data-bs-theme="dark"] .task-detail-page #accordionTask .table,
[data-bs-theme="dark"] .task-detail-page #accordionTask .table-light,
[data-bs-theme="dark"] .task-detail-page #accordionTask .bg-light {
  background: var(--app-surface-elevated) !important;
  color: var(--app-text-strong) !important;
  border-color: var(--app-border-soft) !important;
}

[data-bs-theme="dark"] .task-detail-page #accordionTask .accordion-item {
  box-shadow: none !important;
}

[data-bs-theme="dark"] .task-detail-page #accordionTask .accordion-button {
  background: linear-gradient(180deg, rgba(255,255,255,0.02), rgba(255,255,255,0)) !important;
  color: var(--app-text-strong) !important;
  border: 0 !important;
  box-shadow: none !important;
}

[data-bs-theme="dark"] .task-detail-page #accordionTask .accordion-button:not(.collapsed) {
  background: rgba(var(--bs-primary-rgb), 0.08) !important;
  color: var(--bs-primary) !important;
}

[data-bs-theme="dark"] .task-detail-page #accordionTask .accordion-button::after {
  filter: invert(0.92) saturate(0) brightness(1.1) !important;
}

[data-bs-theme="dark"] .task-detail-page #accordionTask .accordion-header,
[data-bs-theme="dark"] .task-detail-page #accordionTask .accordion-body .border-top,
[data-bs-theme="dark"] .task-detail-page #accordionTask .border,
[data-bs-theme="dark"] .task-detail-page #accordionTask .border-top,
[data-bs-theme="dark"] .task-detail-page #accordionTask .border-bottom,
[data-bs-theme="dark"] .task-detail-page #accordionTask .table > :not(caption) > * > * {
  border-color: var(--app-border-soft) !important;
}

[data-bs-theme="dark"] .task-detail-page #accordionTask .table > :not(caption) > * > * {
  background: transparent !important;
  color: var(--app-text-strong) !important;
}

[data-bs-theme="dark"] .task-detail-page #accordionTask thead.table-light,
[data-bs-theme="dark"] .task-detail-page #accordionTask .table-light > tr,
[data-bs-theme="dark"] .task-detail-page #accordionTask .table-light > tr > th,
[data-bs-theme="dark"] .task-detail-page #accordionTask .table-light > tr > td {
  background: var(--app-surface-soft) !important;
  color: var(--app-text-muted) !important;
}

[data-bs-theme="dark"] .task-detail-page #accordionTask tbody tr:hover > * {
  background: rgba(var(--bs-primary-rgb), 0.05) !important;
}

[data-bs-theme="dark"] .task-detail-page #accordionTask .text-muted,
[data-bs-theme="dark"] .task-detail-page #accordionTask small,
[data-bs-theme="dark"] .task-detail-page #accordionTask .small,
[data-bs-theme="dark"] .task-detail-page #accordionTask .form-check-label,
[data-bs-theme="dark"] .task-detail-page #accordionTask h6.small {
  color: var(--app-text-muted) !important;
}

[data-bs-theme="dark"] .task-detail-page #accordionTask .task-accordion-badge,
[data-bs-theme="dark"] .task-detail-page #accordionTask .badge.bg-light,
[data-bs-theme="dark"] .task-detail-page #accordionTask .badge.text-dark {
  background: rgba(var(--bs-primary-rgb), 0.12) !important;
  color: var(--app-text-strong) !important;
  border: 1px solid rgba(var(--bs-primary-rgb), 0.18) !important;
}

[data-bs-theme="dark"] .task-detail-page #accordionTask .btn-outline-primary,
[data-bs-theme="dark"] .task-detail-page #accordionTask .btn-outline-secondary,
[data-bs-theme="dark"] .task-detail-page #accordionTask .btn-outline-danger {
  background: transparent !important;
}

[data-bs-theme="dark"] .task-detail-page #accordionTask .btn-group,
[data-bs-theme="dark"] .task-detail-page #accordionTask .d-inline-flex,
[data-bs-theme="dark"] .task-detail-page #accordionTask .table-responsive {
  min-width: 0;
}

[data-bs-theme="dark"] .task-detail-page #accordionTask .task-accordion-wrap {
  color: var(--app-text-strong) !important;
}

/* Task form surfaces */
[data-bs-theme="dark"] #taskForm .task-form-readonly,
[data-bs-theme="dark"] #taskForm .task-form-currency-addon,
[data-bs-theme="dark"] .task-form-footer,
[data-bs-theme="dark"] .glass-card > .bg-light-subtle {
  background: var(--app-surface-soft) !important;
  color: var(--app-text-strong) !important;
  border-color: var(--app-border-soft) !important;
}

/* Remaining module surfaces */
[data-bs-theme="dark"] .user-groups-panel .table-responsive,
[data-bs-theme="dark"] #userGroupPermissionsModal .modal-body {
  background: var(--app-surface-elevated) !important;
  color: var(--app-text-strong) !important;
  border-color: var(--app-border-soft) !important;
}

[data-bs-theme="dark"] .user-groups-table tbody tr:hover > * {
  background: rgba(var(--bs-primary-rgb), 0.06) !important;
}

[data-bs-theme="dark"] .guide-shell,
[data-bs-theme="dark"] .guide-hero,
[data-bs-theme="dark"] .guide-card,
[data-bs-theme="dark"] .guide-table-wrap,
[data-bs-theme="dark"] .guide-table-header,
[data-bs-theme="dark"] .guide-table th,
[data-bs-theme="dark"] .guide-table td {
  background: var(--app-surface-elevated) !important;
  color: var(--app-text-strong) !important;
  border-color: var(--app-border-soft) !important;
}

[data-bs-theme="dark"] .guide-hero {
  background: linear-gradient(180deg, rgba(var(--bs-primary-rgb), 0.08), var(--app-surface-elevated)) !important;
  box-shadow: none !important;
}

[data-bs-theme="dark"] .guide-kicker,
[data-bs-theme="dark"] .guide-card-title i,
[data-bs-theme="dark"] .guide-point-icon,
[data-bs-theme="dark"] .guide-step-no,
[data-bs-theme="dark"] .guide-alert-info i,
[data-bs-theme="dark"] .guide-alert-warn i {
  color: var(--bs-primary) !important;
}

[data-bs-theme="dark"] .guide-subtitle,
[data-bs-theme="dark"] .guide-point-copy,
[data-bs-theme="dark"] .guide-step-copy,
[data-bs-theme="dark"] .guide-table-header p,
[data-bs-theme="dark"] .guide-table td,
[data-bs-theme="dark"] .guide-alert p,
[data-bs-theme="dark"] .guide-footer,
[data-bs-theme="dark"] .guide-meta-chip {
  color: var(--app-text-muted) !important;
}

[data-bs-theme="dark"] .guide-meta-chip,
[data-bs-theme="dark"] .guide-alert-info,
[data-bs-theme="dark"] .guide-alert-warn {
  background: var(--app-surface-soft) !important;
  border-color: var(--app-border-soft) !important;
}

[data-bs-theme="dark"] .internal-sop-sheet,
[data-bs-theme="dark"] .internal-sop-sheet-body,
[data-bs-theme="dark"] .internal-sop-card,
[data-bs-theme="dark"] .internal-sop-doc-card,
[data-bs-theme="dark"] .internal-sop-doc-badge,
[data-bs-theme="dark"] .internal-resource-tab-btn,
[data-bs-theme="dark"] .internal-resource-tab-count {
  background: var(--app-surface-elevated) !important;
  color: var(--app-text-strong) !important;
  border-color: var(--app-border-soft) !important;
}

[data-bs-theme="dark"] .internal-sop-sheet-header,
[data-bs-theme="dark"] .internal-sop-card-accent {
  background: linear-gradient(180deg, rgba(var(--bs-primary-rgb), 0.08), var(--app-surface-elevated)) !important;
  border-color: var(--app-border-soft) !important;
}

[data-bs-theme="dark"] .internal-sop-kicker,
[data-bs-theme="dark"] .internal-sop-hero-icon,
[data-bs-theme="dark"] .internal-sop-chip i,
[data-bs-theme="dark"] .internal-sop-card-title i,
[data-bs-theme="dark"] .internal-sop-item-icon,
[data-bs-theme="dark"] .internal-sop-step-icon,
[data-bs-theme="dark"] .internal-sop-count,
[data-bs-theme="dark"] .internal-sop-doc-icon,
[data-bs-theme="dark"] .internal-resource-tab-count {
  color: var(--bs-primary) !important;
}

[data-bs-theme="dark"] .internal-sop-chip,
[data-bs-theme="dark"] .internal-sop-item-icon,
[data-bs-theme="dark"] .internal-sop-count,
[data-bs-theme="dark"] .internal-sop-doc-icon,
[data-bs-theme="dark"] .internal-sop-doc-badge,
[data-bs-theme="dark"] .internal-resource-tab-btn.active,
[data-bs-theme="dark"] .internal-resource-tab-count {
  background: var(--app-surface-soft) !important;
  border-color: var(--app-border-soft) !important;
}

[data-bs-theme="dark"] .internal-resource-tab-btn:hover,
[data-bs-theme="dark"] .internal-resource-tab-btn:focus-visible {
  color: var(--bs-primary) !important;
  background: rgba(var(--bs-primary-rgb), 0.14) !important;
  border-color: rgba(var(--bs-primary-rgb), 0.22) !important;
  box-shadow: none !important;
}

[data-bs-theme="dark"] .internal-sop-copy,
[data-bs-theme="dark"] .internal-sop-section-copy,
[data-bs-theme="dark"] .internal-sop-item-copy,
[data-bs-theme="dark"] .internal-sop-step-copy,
[data-bs-theme="dark"] .internal-sop-doc-meta,
[data-bs-theme="dark"] .internal-sop-doc-copy,
[data-bs-theme="dark"] .internal-sop-doc-note {
  color: var(--app-text-muted) !important;
}

[data-bs-theme="dark"] .internal-sop-section-title,
[data-bs-theme="dark"] .internal-sop-doc-title,
[data-bs-theme="dark"] .internal-sop-card-title,
[data-bs-theme="dark"] .internal-sop-item-title {
  color: var(--app-text-strong) !important;
}

[data-bs-theme="dark"] .internal-sop-doc-footer,
[data-bs-theme="dark"] .internal-sop-footer {
  border-color: var(--app-border-soft) !important;
}

[data-bs-theme="dark"] .pms-gantt-page .gantt-shell,
[data-bs-theme="dark"] .gantt-summary-bar,
[data-bs-theme="dark"] .JSGanttToolTip .gantt-tooltip {
  background: var(--app-surface-elevated) !important;
  color: var(--app-text-strong) !important;
  border-color: var(--app-border-soft) !important;
  box-shadow: none !important;
}

[data-bs-theme="dark"] .pms-gantt-page .gantt-shell-header,
[data-bs-theme="dark"] .gantt-view-controls .btn,
[data-bs-theme="dark"] .gantt-toolbar-field .searchable-select .btn.form-select,
[data-bs-theme="dark"] .gantt-select-input {
  background: var(--app-surface-soft) !important;
  color: var(--app-text-strong) !important;
  border-color: var(--app-border-soft) !important;
}

[data-bs-theme="dark"] .gantt-view-controls .btn.active,
[data-bs-theme="dark"] .gantt-view-controls .btn.btn-primary {
  background: var(--bs-primary) !important;
  border-color: var(--bs-primary) !important;
  color: #fff !important;
}

[data-bs-theme="dark"] .JSGanttToolTip .gantt-tooltip__title,
[data-bs-theme="dark"] .JSGanttToolTip .gantt-tooltip__value,
[data-bs-theme="dark"] #GanttChartDIV .gantt-status-badge,
[data-bs-theme="dark"] .JSGanttToolTip .gantt-tooltip-badge {
  color: var(--app-text-strong) !important;
}

[data-bs-theme="dark"] .JSGanttToolTip .gantt-tooltip__label,
[data-bs-theme="dark"] .gantt-toolbar-field label {
  color: var(--app-text-muted) !important;
}

[data-bs-theme="dark"] .JSGanttToolTip .gantt-tooltip__badges .gantt-tooltip-badge,
[data-bs-theme="dark"] #GanttChartDIV .gantt-status-badge {
  background: rgba(var(--bs-primary-rgb), 0.12) !important;
  border: 1px solid rgba(var(--bs-primary-rgb), 0.18) !important;
}



/* Light-mode refinement: softer shell, lighter hover, slimmer scrollbar feel */
[data-bs-theme="light"] .sidebar,
[data-bs-theme="light"] .sidebar-card,
[data-bs-theme="light"] .sidebar .dropdown-menu,
[data-bs-theme="light"] .sidebar .navbar .nav-item.dropdown .dropdown-menu {
  background-color: var(--app-surface-subtle) !important;
  border-color: var(--app-border-soft) !important;
  box-shadow: none !important;
}

[data-bs-theme="light"] .sidebar-card,
[data-bs-theme="light"] .card,
[data-bs-theme="light"] .glass-card,
[data-bs-theme="light"] .card-section,
[data-bs-theme="light"] .kpi-card,
[data-bs-theme="light"] .stat-mini,
[data-bs-theme="light"] .stat-card,
[data-bs-theme="light"] .modal-content,
[data-bs-theme="light"] .dropdown-menu {
  /* box-shadow: var(--app-shadow-soft) !important; */
      box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1) !important;
}

[data-bs-theme="light"] .card:hover,
[data-bs-theme="light"] .glass-card:hover,
[data-bs-theme="light"] .card-section:hover,
[data-bs-theme="light"] .kpi-card:hover,
[data-bs-theme="light"] .stat-mini:hover,
[data-bs-theme="light"] .stat-card:hover,
[data-bs-theme="light"] .accordion-item:hover,
[data-bs-theme="light"] .quick-action:hover,
[data-bs-theme="light"] .module-item:hover {
  box-shadow: var(--app-shadow-hover) !important;
}

[data-bs-theme="light"] .sidebar .navbar .navbar-nav .nav-link:hover,
[data-bs-theme="light"] .sidebar .navbar .navbar-nav .nav-link.active,
[data-bs-theme="light"] .sidebar .navbar .nav-item .nav-link:hover,
[data-bs-theme="light"] .sidebar .navbar .nav-item.active-dropdown > .nav-link,
[data-bs-theme="light"] .sidebar .navbar .nav-item .nav-link.active,
[data-bs-theme="light"] .sidebar .dropdown-menu .dropdown-item:hover,
[data-bs-theme="light"] .sidebar .dropdown-menu .dropdown-item.active,
[data-bs-theme="light"] .sidebar-card .nav-link:hover,
[data-bs-theme="light"] .sidebar-card .nav-link.active,
[data-bs-theme="light"] .navbar .nav-link:hover,
[data-bs-theme="light"] .dropdown-item:hover,
[data-bs-theme="light"] .filter-section .form-select:hover,
[data-bs-theme="light"] .filter-section .searchable-select .btn.form-select:hover,
[data-bs-theme="light"] .filter-section .searchable-select .ss-item:hover,
[data-bs-theme="light"] .list-filter-toggle:hover,
[data-bs-theme="light"] .table tbody tr:hover > * {
  background-color: rgba(var(--bs-primary-rgb), 0.09) !important;
  color: inherit !important;
  box-shadow: none !important;
}

[data-bs-theme="light"] .list-filter-form .searchable-select .btn.form-select:hover,
[data-bs-theme="light"] .list-filter-form .searchable-select .ss-item:hover {
  background-color: rgba(var(--bs-primary-rgb), 0.14) !important;
  color: var(--bs-primary-text-emphasis, #0b3b8a) !important;
}

[data-bs-theme="light"] html,
[data-bs-theme="light"] body,
[data-bs-theme="light"] .content,
[data-bs-theme="light"] .sidebar,
[data-bs-theme="light"] .custom-scrollbar,
[data-bs-theme="light"] .table-responsive,
[data-bs-theme="light"] .ss-portal-menu,
[data-bs-theme="light"] .dropdown-menu.ss-menu-panel,
[data-bs-theme="light"] .guide-shell,
[data-bs-theme="light"] .guide-table,
[data-bs-theme="light"] .notification-dropdown-menu .notification-list,
[data-bs-theme="light"] .progress-ranked-list,
[data-bs-theme="light"] .list-container,
[data-bs-theme="light"] #pms-monitoring-map-panel .map-popup-body,
[data-bs-theme="light"] .layer-switcher .panel,
[data-bs-theme="light"] .stats-row {
  scrollbar-color: rgba(156, 163, 175, 0.2) transparent !important;
}

[data-bs-theme="light"] html::-webkit-scrollbar-track,
[data-bs-theme="light"] body::-webkit-scrollbar-track,
[data-bs-theme="light"] .content::-webkit-scrollbar-track,
[data-bs-theme="light"] .sidebar::-webkit-scrollbar-track,
[data-bs-theme="light"] .custom-scrollbar::-webkit-scrollbar-track,
[data-bs-theme="light"] .table-responsive::-webkit-scrollbar-track,
[data-bs-theme="light"] .ss-portal-menu::-webkit-scrollbar-track,
[data-bs-theme="light"] .dropdown-menu.ss-menu-panel::-webkit-scrollbar-track,
[data-bs-theme="light"] .guide-shell::-webkit-scrollbar-track,
[data-bs-theme="light"] .guide-table::-webkit-scrollbar-track,
[data-bs-theme="light"] .notification-dropdown-menu .notification-list::-webkit-scrollbar-track,
[data-bs-theme="light"] .progress-ranked-list::-webkit-scrollbar-track,
[data-bs-theme="light"] .list-container::-webkit-scrollbar-track,
[data-bs-theme="light"] #pms-monitoring-map-panel .map-popup-body::-webkit-scrollbar-track,
[data-bs-theme="light"] .layer-switcher .panel::-webkit-scrollbar-track,
[data-bs-theme="light"] .stats-row::-webkit-scrollbar-track {
  background: transparent !important;
}

[data-bs-theme="light"] html::-webkit-scrollbar-thumb,
[data-bs-theme="light"] body::-webkit-scrollbar-thumb,
[data-bs-theme="light"] .content::-webkit-scrollbar-thumb,
[data-bs-theme="light"] .sidebar::-webkit-scrollbar-thumb,
[data-bs-theme="light"] .custom-scrollbar::-webkit-scrollbar-thumb,
[data-bs-theme="light"] .table-responsive::-webkit-scrollbar-thumb,
[data-bs-theme="light"] .ss-portal-menu::-webkit-scrollbar-thumb,
[data-bs-theme="light"] .dropdown-menu.ss-menu-panel::-webkit-scrollbar-thumb,
[data-bs-theme="light"] .guide-shell::-webkit-scrollbar-thumb,
[data-bs-theme="light"] .guide-table::-webkit-scrollbar-thumb,
[data-bs-theme="light"] .notification-dropdown-menu .notification-list::-webkit-scrollbar-thumb,
[data-bs-theme="light"] .progress-ranked-list::-webkit-scrollbar-thumb,
[data-bs-theme="light"] .list-container::-webkit-scrollbar-thumb,
[data-bs-theme="light"] #pms-monitoring-map-panel .map-popup-body::-webkit-scrollbar-thumb,
[data-bs-theme="light"] .layer-switcher .panel::-webkit-scrollbar-thumb,
[data-bs-theme="light"] .stats-row::-webkit-scrollbar-thumb {
  background: rgba(156, 163, 175, 0.2) !important;
  border: 0 !important;
  border-radius: 999px !important;
}


/* Badge system refinement */
.badge,
.badge.bg-light,
.badge.text-bg-light,
.badge.bg-secondary-subtle,
.badge.bg-primary-subtle,
.badge.bg-success-subtle,
.badge.bg-danger-subtle,
.badge.bg-warning-subtle,
.badge.bg-info-subtle,
.badge.border,
.notification-dropdown-menu .badge,
.user-menu-dropdown .badge,
.custom-badge,
#pms-map-panel .gis-popup-badge {
  border-radius: 999px;
  font-weight: 600;
  letter-spacing: 0.01em;
}

[data-bs-theme="light"] .badge.bg-light,
[data-bs-theme="light"] .badge.text-bg-light,
[data-bs-theme="light"] .badge.bg-secondary-subtle,
[data-bs-theme="light"] .badge.text-secondary,
[data-bs-theme="light"] .badge.border-secondary-subtle {
  background-color: #eef1f5 !important;
  color: #4f5e72 !important;
  border-color: #d6dde7 !important;
}

[data-bs-theme="light"] .badge.bg-primary-subtle,
[data-bs-theme="light"] .badge.text-primary,
[data-bs-theme="light"] .badge.border-primary-subtle {
  background-color: rgba(46, 49, 146, 0.1) !important;
  color: #2e3192 !important;
  border-color: rgba(46, 49, 146, 0.18) !important;
}

[data-bs-theme="dark"] .badge.bg-light,
[data-bs-theme="dark"] .badge.text-bg-light,
[data-bs-theme="dark"] .badge.bg-secondary-subtle,
[data-bs-theme="dark"] .badge.text-secondary,
[data-bs-theme="dark"] .badge.border-secondary-subtle {
  background-color: rgba(255, 255, 255, 0.08) !important;
  color: var(--app-text-strong) !important;
  border-color: rgba(255, 255, 255, 0.12) !important;
}

[data-bs-theme="dark"] .badge.bg-primary-subtle,
[data-bs-theme="dark"] .badge.text-primary,
[data-bs-theme="dark"] .badge.border-primary-subtle {
  background-color: rgba(var(--bs-primary-rgb), 0.14) !important;
  color: var(--bs-primary) !important;
  border-color: rgba(var(--bs-primary-rgb), 0.24) !important;
}

/* Sidebar scrollbar refinement */
[data-bs-theme="light"] .sidebar,
[data-bs-theme="light"] .sidebar .dropdown-menu,
[data-bs-theme="light"] .sidebar .navbar .nav-item.dropdown .dropdown-menu {
  scrollbar-width: thin;
  scrollbar-color: rgba(156, 163, 175, 0.2) transparent !important;
}

[data-bs-theme="light"] .sidebar::-webkit-scrollbar,
[data-bs-theme="light"] .sidebar .dropdown-menu::-webkit-scrollbar,
[data-bs-theme="light"] .sidebar .navbar .nav-item.dropdown .dropdown-menu::-webkit-scrollbar {
  width: 4px;
  height: 4px;
}

[data-bs-theme="light"] .sidebar::-webkit-scrollbar-track,
[data-bs-theme="light"] .sidebar .dropdown-menu::-webkit-scrollbar-track,
[data-bs-theme="light"] .sidebar .navbar .nav-item.dropdown .dropdown-menu::-webkit-scrollbar-track {
  background: transparent !important;
}

[data-bs-theme="light"] .sidebar::-webkit-scrollbar-thumb,
[data-bs-theme="light"] .sidebar .dropdown-menu::-webkit-scrollbar-thumb,
[data-bs-theme="light"] .sidebar .navbar .nav-item.dropdown .dropdown-menu::-webkit-scrollbar-thumb {
  background: rgba(156, 163, 175, 0.2) !important;
  border-radius: 999px !important;
  border: 0 !important;
}

/* Chart host refinement */
[data-bs-theme="light"] .progress-chart-host,
[data-bs-theme="light"] .project-type-mini-pie,
[data-bs-theme="light"] .chart-area,
[data-bs-theme="light"] .chart-container {
  background: transparent !important;
}

[data-bs-theme="dark"] .echarts-for-react,
[data-bs-theme="dark"] .progress-chart-host,
[data-bs-theme="dark"] .project-type-mini-pie,
[data-bs-theme="dark"] .chart-area,
[data-bs-theme="dark"] .chart-container {
  background: transparent !important;
}


/* KPI and summary card refinement */
[data-bs-theme="light"] .kpi-card,
[data-bs-theme="light"] .stat-mini,
[data-bs-theme="light"] .card-section,
[data-bs-theme="light"] .summary-bar .card,
[data-bs-theme="light"] .ops-stat-card {
  background: #ffffff !important;
  border-color: #e2e8f0 !important;
}

[data-bs-theme="light"] .kpi-card.primary { border-top-color: #0d6efd !important; }
[data-bs-theme="light"] .kpi-card.success { border-top-color: #198754 !important; }
[data-bs-theme="light"] .kpi-card.info { border-top-color: #0dcaf0 !important; }
[data-bs-theme="light"] .kpi-card.danger { border-top-color: #dc3545 !important; }
[data-bs-theme="light"] .kpi-card.warning { border-top-color: #ffc107 !important; }
[data-bs-theme="light"] .kpi-card.project-type-card { border-top-color: #6f42c1 !important; }

[data-bs-theme="light"] .stat-mini-primary { --stat-mini-accent: #2563eb; }
[data-bs-theme="light"] .stat-mini-success { --stat-mini-accent: #10b981; }
[data-bs-theme="light"] .stat-mini-warning { --stat-mini-accent: #f59e0b; }
[data-bs-theme="light"] .stat-mini-info { --stat-mini-accent: #06b6d4; }
[data-bs-theme="light"] .stat-mini-danger { --stat-mini-accent: #ef4444; }
[data-bs-theme="light"] .stat-mini-muted { --stat-mini-accent: #64748b; }
[data-bs-theme="light"] .stat-mini { border-top-color: var(--stat-mini-accent) !important; }
[data-bs-theme="light"] .stat-mini-alert-critical,
html:not([data-bs-theme="dark"]) .stat-mini-alert-critical {
  border-color: rgba(220, 38, 38, 0.42) !important;
  background: linear-gradient(180deg, #fffdfd 0%, #fff1f1 100%) !important;
  /* box-shadow:
    inset 0 0 0 1px rgba(220, 38, 38, 0.42),
    inset 0 0 14px rgba(248, 113, 113, 0.24),
    0 2px 8px rgba(15, 23, 42, 0.08) !important; */
}

[data-bs-theme="light"] .stat-mini-alert-warning,
html:not([data-bs-theme="dark"]) .stat-mini-alert-warning {
  border-color: rgba(217, 119, 6, 0.4) !important;
  background: linear-gradient(180deg, #fffefb 0%, #fff8ea 100%) !important;
  box-shadow:
    inset 0 0 0 1px rgba(217, 119, 6, 0.4),
    inset 0 0 14px rgba(251, 191, 36, 0.22),
    0 2px 8px rgba(15, 23, 42, 0.08) !important;
}

[data-bs-theme="dark"] .kpi-card.primary { border-top-color: #6f8dff !important; }
[data-bs-theme="dark"] .kpi-card.success { border-top-color: #3fb950 !important; }
[data-bs-theme="dark"] .kpi-card.info { border-top-color: #58a6ff !important; }
[data-bs-theme="dark"] .kpi-card.danger { border-top-color: #ff7b72 !important; }
[data-bs-theme="dark"] .kpi-card.warning { border-top-color: #e3b341 !important; }
[data-bs-theme="dark"] .kpi-card.project-type-card { border-top-color: #b392f0 !important; }
[data-bs-theme="dark"] .stat-mini { border-top-color: var(--stat-mini-accent) !important; }

[data-bs-theme="dark"] .stat-mini-alert-critical {
  background: linear-gradient(180deg, rgba(60, 20, 22, 0.9) 0%, rgba(40, 14, 16, 0.9) 100%) !important;
  box-shadow: 0 0 0 1px rgba(255, 123, 114, 0.35), 0 8px 24px rgba(220, 53, 69, 0.28);
}

[data-bs-theme="dark"] .stat-mini-alert-warning {
  background: linear-gradient(180deg, rgba(63, 46, 18, 0.9) 0%, rgba(42, 31, 12, 0.9) 100%) !important;
  box-shadow: 0 0 0 1px rgba(227, 179, 65, 0.34), 0 8px 22px rgba(227, 179, 65, 0.24);
}

/* Keep WAPCOS title tone without spreading to all primary components in light mode */
[data-bs-theme="light"] .brand-title,
[data-bs-theme="light"] .card-section-header .text-primary,
[data-bs-theme="light"] h1 .text-primary,
[data-bs-theme="light"] h2 .text-primary,
[data-bs-theme="light"] h3 .text-primary,
[data-bs-theme="light"] h4 .text-primary,
[data-bs-theme="light"] h5 .text-primary,
[data-bs-theme="light"] h6 .text-primary,
[data-bs-theme="light"] .fw-bold > .text-primary,
[data-bs-theme="light"] td .text-primary {
  color: #2e3192 !important;
}

/* Sidebar dropdown scrollbar cleanup */
[data-bs-theme="light"] .sidebar .dropdown-menu.show,
[data-bs-theme="light"] .sidebar .navbar .nav-item.dropdown .dropdown-menu.show {
  scrollbar-width: thin !important;
  scrollbar-color: rgba(156, 163, 175, 0.2) transparent !important;
}

[data-bs-theme="light"] .sidebar .dropdown-menu.show::-webkit-scrollbar,
[data-bs-theme="light"] .sidebar .navbar .nav-item.dropdown .dropdown-menu.show::-webkit-scrollbar {
  width: 4px !important;
  height: 4px !important;
}

[data-bs-theme="light"] .sidebar .dropdown-menu.show::-webkit-scrollbar-thumb,
[data-bs-theme="light"] .sidebar .navbar .nav-item.dropdown .dropdown-menu.show::-webkit-scrollbar-thumb {
  background: rgba(156, 163, 175, 0.2) !important;
  border-radius: 999px !important;
  border: 0 !important;
}

[data-bs-theme="dark"] .sidebar .dropdown-menu.show,
[data-bs-theme="dark"] .sidebar .navbar .nav-item.dropdown .dropdown-menu.show {
  scrollbar-width: thin !important;
  scrollbar-color: rgba(168, 186, 199, 0.22) transparent !important;
}

[data-bs-theme="dark"] .sidebar .dropdown-menu.show::-webkit-scrollbar,
[data-bs-theme="dark"] .sidebar .navbar .nav-item.dropdown .dropdown-menu.show::-webkit-scrollbar {
  width: 4px !important;
  height: 4px !important;
}

[data-bs-theme="dark"] .sidebar .dropdown-menu.show::-webkit-scrollbar-track,
[data-bs-theme="dark"] .sidebar .navbar .nav-item.dropdown .dropdown-menu.show::-webkit-scrollbar-track {
  background: transparent !important;
}

[data-bs-theme="dark"] .sidebar .dropdown-menu.show::-webkit-scrollbar-thumb,
[data-bs-theme="dark"] .sidebar .navbar .nav-item.dropdown .dropdown-menu.show::-webkit-scrollbar-thumb {
  background: rgba(168, 186, 199, 0.22) !important;
  border-radius: 999px !important;
  border: 0 !important;
}

[data-bs-theme="dark"] .progress-row-action {
  background: var(--app-surface-elevated) !important;
  border-color: var(--app-border-soft) !important;
  color: var(--app-text-strong) !important;
  box-shadow: none !important;
}

[data-bs-theme="dark"] .progress-row-action:hover,
[data-bs-theme="dark"] .progress-row-action:focus-visible {
  background: rgba(var(--bs-primary-rgb), 0.12) !important;
  border-color: rgba(var(--bs-primary-rgb), 0.22) !important;
  color: var(--bs-primary) !important;
}

[data-bs-theme="dark"] .glass-card > .p-3.border-bottom.bg-light-subtle.d-flex.flex-wrap.justify-content-between.align-items-center.gap-3 {
  background: var(--app-surface-subtle) !important;
  border-color: var(--app-border-soft) !important;
  color: var(--app-text-strong) !important;
}

[data-bs-theme="dark"] .glass-card > .p-3.border-bottom.bg-light-subtle.d-flex.flex-wrap.justify-content-between.align-items-center.gap-3 h6,
[data-bs-theme="dark"] .glass-card > .p-3.border-bottom.bg-light-subtle.d-flex.flex-wrap.justify-content-between.align-items-center.gap-3 .text-primary,
[data-bs-theme="dark"] .glass-card > .p-3.border-bottom.bg-light-subtle.d-flex.flex-wrap.justify-content-between.align-items-center.gap-3 .form-control,
[data-bs-theme="dark"] .glass-card > .p-3.border-bottom.bg-light-subtle.d-flex.flex-wrap.justify-content-between.align-items-center.gap-3 .form-select {
  color: var(--app-text-strong) !important;
}

[data-bs-theme="dark"] .glass-card > .p-3.border-bottom.bg-light-subtle.d-flex.flex-wrap.justify-content-between.align-items-center.gap-3 .text-primary {
  color: var(--bs-primary) !important;
}

[data-bs-theme="dark"] .glass-card > .p-3.border-bottom.bg-light-subtle.d-flex.flex-wrap.justify-content-between.align-items-center.gap-3 .form-control,
[data-bs-theme="dark"] .glass-card > .p-3.border-bottom.bg-light-subtle.d-flex.flex-wrap.justify-content-between.align-items-center.gap-3 .form-select {
  background: var(--app-surface-elevated) !important;
  border-color: var(--app-border-soft) !important;
}

/* Light-mode container surface correction */
[data-bs-theme="light"] .summary-bar,
[data-bs-theme="light"] .summary-bar-pms,
[data-bs-theme="light"] .summary-bar .action-btn-group .btn:hover,
[data-bs-theme="light"] .summary-bar-pms .summary-actions .btn:hover,
[data-bs-theme="light"] .tpgc-form-section,
[data-bs-theme="light"] .guide-shell,
[data-bs-theme="light"] .login-hero,
[data-bs-theme="light"] #pms-map-panel .ol-map-sidebar .sidebar-tabs,
[data-bs-theme="light"] .notification-item.unread {
  background-color: #ffffff !important;
}

/* Dark monitoring popup details */
[data-bs-theme="dark"] #pms-monitoring-map-panel .gis-popup-subcard {
  background: var(--app-surface-elevated) !important;
  border-color: var(--app-border-soft) !important;
}

[data-bs-theme="dark"] #pms-monitoring-map-panel .gis-popup-subtitle,
[data-bs-theme="dark"] #pms-monitoring-map-panel .gis-popup-table td,
[data-bs-theme="dark"] #pms-monitoring-map-panel .gis-popup-thumb-title {
  color: var(--app-text-strong) !important;
}

[data-bs-theme="dark"] #pms-monitoring-map-panel .gis-popup-table th,
[data-bs-theme="dark"] #pms-monitoring-map-panel .gis-popup-thumb-meta,
[data-bs-theme="dark"] #pms-monitoring-map-panel .gis-popup-thumb-line,
[data-bs-theme="dark"] #pms-monitoring-map-panel .gis-popup-empty {
  color: var(--app-text-muted) !important;
}

[data-bs-theme="dark"] #pms-monitoring-map-panel .gis-popup-table tbody tr + tr,
[data-bs-theme="dark"] #pms-monitoring-map-panel .gis-popup-thumb,
[data-bs-theme="dark"] #pms-monitoring-map-panel .gis-popup-thumb-image,
[data-bs-theme="dark"] #pms-monitoring-map-panel .gis-popup-actions .btn {
  border-color: var(--app-border-soft) !important;
}

[data-bs-theme="dark"] #pms-monitoring-map-panel .gis-popup-thumb {
  background: var(--app-surface-soft) !important;
  box-shadow: none !important;
}

[data-bs-theme="dark"] #pms-monitoring-map-panel .gis-popup-thumb:hover,
[data-bs-theme="dark"] #pms-monitoring-map-panel .gis-popup-thumb:focus {
  background: rgba(var(--bs-primary-rgb), 0.08) !important;
  border-color: rgba(var(--bs-primary-rgb), 0.22) !important;
  box-shadow: none !important;
}

[data-bs-theme="dark"] #pms-monitoring-map-panel .gis-popup-thumb-image {
  background: var(--app-surface-subtle) !important;
}

[data-bs-theme="dark"] #pms-monitoring-map-panel .gis-popup-section-title {
  color: var(--bs-primary) !important;
}

[data-bs-theme="dark"] #pms-monitoring-map-panel .gis-popup-badge-sor {
  background: rgba(255, 123, 114, 0.14) !important;
  color: #ffb4ae !important;
}

[data-bs-theme="dark"] #pms-monitoring-map-panel .gis-popup-badge-progress {
  background: rgba(63, 185, 80, 0.14) !important;
  color: #8be28c !important;
}

/* Search input active/focus visibility */
[data-bs-theme="dark"] .searchable-select .ss-search:focus,
[data-bs-theme="dark"] .tpgc-searchable-select .ss-search:focus,
[data-bs-theme="dark"] .ss-portal-menu .ss-search:focus,
[data-bs-theme="dark"] .ss-search-input:focus,
[data-bs-theme="dark"] .searchable-select .ss-search:active,
[data-bs-theme="dark"] .tpgc-searchable-select .ss-search:active,
[data-bs-theme="dark"] .ss-portal-menu .ss-search:active,
[data-bs-theme="dark"] .ss-search-input:active {
  background: var(--app-surface-elevated) !important;
  color: var(--app-text-strong) !important;
  caret-color: var(--app-text-strong) !important;
  -webkit-text-fill-color: var(--app-text-strong) !important;
  box-shadow: none !important;
}

/* Light-mode text tone correction */
[data-bs-theme="light"] .summary-bar h1,
[data-bs-theme="light"] .summary-bar-pms .summary-title h1 {
  font-size: 1.5rem !important;
  font-weight: 600 !important;
  margin-bottom: 0.25rem !important;
  color: #2e3192 !important;
}

[data-bs-theme="light"] .sidebar .navbar .navbar-nav .nav-link,
[data-bs-theme="light"] .sidebar .navbar .nav-item .nav-link,
[data-bs-theme="light"] .sidebar .dropdown-menu .dropdown-item,
[data-bs-theme="light"] .sidebar .nav-link,
[data-bs-theme="light"] .sidebar .dropdown-toggle,
[data-bs-theme="light"] .sidebar-section-label,
[data-bs-theme="light"] .sidebar .menu-section-title,
[data-bs-theme="light"] .sidebar-menu-heading,
[data-bs-theme="light"] .summary-bar .subtitle,
[data-bs-theme="light"] .summary-bar-pms .summary-title .subtitle,
[data-bs-theme="light"] .summary-bar .breadcrumb,
[data-bs-theme="light"] .summary-bar .breadcrumb-item,
[data-bs-theme="light"] .notification-item .text-muted,
[data-bs-theme="light"] .custom-dropdown label {
  color: #67748e !important;
}



[data-bs-theme="light"] .summary-bar .action-btn-group .btn:hover,
[data-bs-theme="light"] .summary-bar-pms .summary-actions .btn:hover,
[data-bs-theme="light"] .summary-bar #refresh_btn:hover,
[data-bs-theme="light"] .summary-bar-pms #refresh_btn:hover {
  background-color: var(--bs-btn-hover-bg) !important;
  color: var(--bs-btn-hover-color) !important;
  border-color: var(--bs-btn-hover-border-color) !important;
}

/* Topbar icon actions */




/* Topbar utility buttons */
.sop-entry-btn,
.theme-toggle-btn {
  min-height: 2.25rem;
  border-radius: 0.55rem;
  box-shadow: none !important;
  transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}

[data-bs-theme="light"] .sop-entry-btn,
[data-bs-theme="light"] .theme-toggle-btn {
  background-color: #ffffff !important;
  border-color: var(--app-border-soft) !important;
  color: #67748e !important;
}

[data-bs-theme="light"] .sop-entry-btn:hover,
[data-bs-theme="light"] .sop-entry-btn:focus-visible,
[data-bs-theme="light"] .theme-toggle-btn:hover,
[data-bs-theme="light"] .theme-toggle-btn:focus-visible {
  background-color: rgba(46, 49, 146, 0.06) !important;
  border-color: rgba(46, 49, 146, 0.14) !important;
  color: #2e3192 !important;
}

[data-bs-theme="dark"] .sop-entry-btn,
[data-bs-theme="dark"] .theme-toggle-btn {
  background-color: var(--app-surface-elevated) !important;
  border-color: var(--app-border-soft) !important;
}

/* Dark mode: shared modal surfaces and PMS progress modal */
[data-bs-theme="dark"] .modal-content,
[data-bs-theme="dark"] .modal-dialog [data-modal-content],
[data-bs-theme="dark"] .progress-modal-shell,
[data-bs-theme="dark"] .map-detail-modal,
[data-bs-theme="dark"] .map-gallery-modal {
  background-color: var(--app-surface-elevated) !important;
  border-color: var(--app-border-soft) !important;
  color: var(--app-text-strong) !important;
  box-shadow: var(--app-shadow-soft) !important;
}

[data-bs-theme="dark"] .modal-header,
[data-bs-theme="dark"] .modal-footer,
[data-bs-theme="dark"] .progress-modal-header,
[data-bs-theme="dark"] .progress-modal-footer,
[data-bs-theme="dark"] .modal [class*="border-bottom"],
[data-bs-theme="dark"] .modal [class*="border-top"] {
  background-color: var(--app-surface-soft) !important;
  border-color: var(--app-border-soft) !important;
  color: var(--app-text-strong) !important;
}

[data-bs-theme="dark"] .modal-body,
[data-bs-theme="dark"] .progress-modal-body,
[data-bs-theme="dark"] .modal .bg-light-subtle,
[data-bs-theme="dark"] .modal .table-light,
[data-bs-theme="dark"] .modal .bg-white,
[data-bs-theme="dark"] .modal .text-bg-light,
[data-bs-theme="dark"] .modal .premium-form-section.bg-light-subtle,
[data-bs-theme="dark"] .modal .premium-form-section.bg-white {
  background-color: var(--app-surface-subtle) !important;
  color: var(--app-text-strong) !important;
  border-color: var(--app-border-soft) !important;
}

[data-bs-theme="dark"] .modal .card,
[data-bs-theme="dark"] .modal .glass-card,
[data-bs-theme="dark"] .modal .accordion-item,
[data-bs-theme="dark"] .modal .table-responsive,
[data-bs-theme="dark"] .modal .rounded.border,
[data-bs-theme="dark"] .modal .rounded-3.border,
[data-bs-theme="dark"] .modal .progress-lines-table-wrap,
[data-bs-theme="dark"] .modal .progress-attachment-card,
[data-bs-theme="dark"] .modal [data-modal-content] .p-3.bg-white,
[data-bs-theme="dark"] .modal [data-modal-content] .p-4.bg-white {
  background-color: var(--app-surface-elevated) !important;
  border-color: var(--app-border-soft) !important;
  color: var(--app-text-strong) !important;
  box-shadow: none !important;
}

[data-bs-theme="dark"] .modal .accordion-button,
[data-bs-theme="dark"] .modal .table > :not(caption) > * > *,
[data-bs-theme="dark"] .modal .form-control,
[data-bs-theme="dark"] .modal .form-select,
[data-bs-theme="dark"] .modal .input-group-text,
[data-bs-theme="dark"] .modal .searchable-select .btn.form-select,
[data-bs-theme="dark"] .modal .searchable-select .dropdown-menu,
[data-bs-theme="dark"] .modal .ss-menu-panel,
[data-bs-theme="dark"] .modal .ss-item {
  background-color: var(--app-surface-elevated) !important;
  border-color: var(--app-border-soft) !important;
  color: var(--app-text-strong) !important;
}

[data-bs-theme="dark"] .modal .form-control:focus,
[data-bs-theme="dark"] .modal .form-select:focus,
[data-bs-theme="dark"] .modal .searchable-select .btn.form-select:focus,
[data-bs-theme="dark"] .modal .searchable-select .btn.form-select.show,
[data-bs-theme="dark"] .modal .ss-search-input:focus {
  background-color: var(--app-surface-elevated) !important;
  color: var(--app-text-strong) !important;
  border-color: rgba(var(--bs-primary-rgb), 0.34) !important;
  box-shadow: 0 0 0 0.2rem rgba(var(--bs-primary-rgb), 0.14) !important;
}

[data-bs-theme="dark"] .modal .form-control::placeholder,
[data-bs-theme="dark"] .modal .form-text,
[data-bs-theme="dark"] .modal .text-muted,
[data-bs-theme="dark"] .modal .small.text-muted,
[data-bs-theme="dark"] .modal .breadcrumb,
[data-bs-theme="dark"] .modal .breadcrumb-item,
[data-bs-theme="dark"] .modal .js-geom-preview {
  color: var(--app-text-muted) !important;
}

[data-bs-theme="dark"] .modal .progress-modal-panel,
[data-bs-theme="dark"] .modal .progress-modal-panel__header,
[data-bs-theme="dark"] .modal .progress-modal-panel__body {
  background: var(--app-surface-elevated) !important;
  border-color: var(--app-border-soft) !important;
  color: var(--app-text-strong) !important;
  box-shadow: none !important;
}

[data-bs-theme="dark"] .modal .progress-modal-panel__header {
  background-image: none !important;
}

[data-bs-theme="dark"] .modal .progress-lines-table thead,
[data-bs-theme="dark"] .modal .progress-lines-table thead.table-light,
[data-bs-theme="dark"] .modal .progress-lines-table .table-light,
[data-bs-theme="dark"] .modal .progress-line-row,
[data-bs-theme="dark"] .modal .progress-line-empty-row,
[data-bs-theme="dark"] .modal .progress-lines-table tbody,
[data-bs-theme="dark"] .modal .progress-lines-table tr,
[data-bs-theme="dark"] .modal .progress-lines-table td,
[data-bs-theme="dark"] .modal .progress-lines-table th {
  background-color: transparent !important;
  border-color: var(--app-border-soft) !important;
  color: var(--app-text-strong) !important;
}

[data-bs-theme="dark"] .modal .progress-modal-alert,
[data-bs-theme="dark"] .modal .alert.alert-success-subtle {
  background-color: rgba(25, 135, 84, 0.14) !important;
  border-color: rgba(25, 135, 84, 0.28) !important;
  color: #a9efc5 !important;
}

[data-bs-theme="dark"] .modal .progress-line-validation-summary,
[data-bs-theme="dark"] .modal .alert.alert-danger.progress-line-validation-summary {
  background-color: rgba(220, 53, 69, 0.2) !important;
  border-color: rgba(220, 53, 69, 0.4) !important;
  color: #ffb4be !important;
}

[data-bs-theme="dark"] .modal .progress-lock-alert {
  background-color: rgba(220, 53, 69, 0.22) !important;
  border-color: rgba(220, 53, 69, 0.4) !important;
  color: #ffb4be !important;
}

[data-bs-theme="dark"] .modal .progress-runtime-error {
  background-color: rgba(220, 53, 69, 0.22) !important;
  border-color: rgba(220, 53, 69, 0.38) !important;
  color: #ffb4be !important;
}

[data-bs-theme="dark"] .modal .js-runtime-line-meta {
  background-color: rgba(148, 163, 184, 0.12) !important;
  border-color: var(--app-border-soft) !important;
  color: var(--app-text-strong) !important;
}

[data-bs-theme="dark"] .modal .progress-meta-chip--info {
  background: rgba(148, 163, 184, 0.2) !important;
  border-color: rgba(148, 163, 184, 0.35) !important;
  color: #e2e8f0 !important;
}

[data-bs-theme="dark"] .modal .progress-meta-chip--primary {
  background: rgba(59, 130, 246, 0.2) !important;
  border-color: rgba(59, 130, 246, 0.35) !important;
  color: #bfdbfe !important;
}

[data-bs-theme="dark"] .modal .progress-meta-chip--success {
  background: rgba(34, 197, 94, 0.2) !important;
  border-color: rgba(34, 197, 94, 0.35) !important;
  color: #bbf7d0 !important;
}

[data-bs-theme="dark"] .modal .progress-meta-chip--danger {
  background: rgba(239, 68, 68, 0.22) !important;
  border-color: rgba(239, 68, 68, 0.38) !important;
  color: #fecdd3 !important;
}

[data-bs-theme="dark"] .modal .progress-meta-chip--muted {
  background: rgba(148, 163, 184, 0.15) !important;
  border-color: rgba(148, 163, 184, 0.3) !important;
  color: #cbd5e1 !important;
}

[data-bs-theme="dark"] .modal .progress-line-delete-btn {
  color: #ff7b86 !important;
}

[data-bs-theme="dark"] .modal .progress-line-delete-btn:hover,
[data-bs-theme="dark"] .modal .progress-line-delete-btn:focus {
  background: rgba(220, 53, 69, 0.2) !important;
  color: #ffb4be !important;
}

[data-bs-theme="dark"] .modal .progress-mode-banner {
  background: rgba(30, 64, 175, 0.26) !important;
  border-color: rgba(96, 165, 250, 0.35) !important;
}

[data-bs-theme="dark"] .modal .progress-mode-banner__title {
  color: #bfdbfe !important;
}

[data-bs-theme="dark"] .modal .progress-mode-banner__desc {
  color: #dbeafe !important;
}

[data-bs-theme="dark"] .modal .progress-form-error-summary {
  background-color: rgba(127, 29, 29, 0.42) !important;
  border-color: rgba(248, 113, 113, 0.45) !important;
  color: #fecaca !important;
}

[data-bs-theme="dark"] .modal .progress-zero-field-wrap.is-required {
  background-color: rgba(120, 53, 15, 0.3) !important;
  border-color: rgba(251, 146, 60, 0.42) !important;
}

[data-bs-theme="dark"] .modal .progress-required-indicator {
  color: #fda4af !important;
}

[data-bs-theme="dark"] .modal #progressModal .invalid-feedback.d-block,
[data-bs-theme="dark"] .modal .progress-field-error {
  color: #fecaca !important;
  font-weight: 800;
}

[data-bs-theme="dark"] .modal .progress-zero-help {
  color: #fecaca !important;
}

[data-bs-theme="dark"] .modal .progress-zero-field-wrap.is-invalid-state {
  background-color: rgba(127, 29, 29, 0.42) !important;
  border-color: rgba(248, 113, 113, 0.5) !important;
}

[data-bs-theme="dark"] .modal .badge.text-bg-light,
[data-bs-theme="dark"] .modal .badge.bg-white.text-dark,
[data-bs-theme="dark"] .modal .badge.bg-light.text-dark {
  background-color: rgba(255, 255, 255, 0.08) !important;
  border-color: rgba(255, 255, 255, 0.14) !important;
  color: var(--app-text-strong) !important;
}

[data-bs-theme="dark"] .modal .btn-close {
  filter: invert(1) grayscale(100%);
}

/* Dark mode: exact Django modal field overrides */
html[data-bs-theme="dark"] #progressModal .form-control,
html[data-bs-theme="dark"] #progressModal .form-select,
html[data-bs-theme="dark"] #progressModal .form-control-premium,
html[data-bs-theme="dark"] #progressModal .searchable-select .btn.form-select,
html[data-bs-theme="dark"] #progressModal .searchable-select .dropdown-menu,
html[data-bs-theme="dark"] #progressModal .ss-menu-panel,
html[data-bs-theme="dark"] #progressModal .ss-item,
html[data-bs-theme="dark"] #progressModal .input-group-text,
html[data-bs-theme="dark"] #progressModal .bg-light,
html[data-bs-theme="dark"] #progressModal .bg-white,
html[data-bs-theme="dark"] #progressModal .bg-light-subtle,
html[data-bs-theme="dark"] #progressModal .table-light,
html[data-bs-theme="dark"] #progressModal .progress-lines-table-wrap,
html[data-bs-theme="dark"] #progressModal .progress-attachment-card,
html[data-bs-theme="dark"] #progressModal .progress-modal-body,
html[data-bs-theme="dark"] #progressModal .progress-modal-footer,
html[data-bs-theme="dark"] #progressModal .progress-modal-panel,
html[data-bs-theme="dark"] #progressModal .progress-modal-panel__header,
html[data-bs-theme="dark"] #progressModal .progress-modal-panel__body,
html[data-bs-theme="dark"] #progressModal .progress-line-row {
  background: var(--app-surface-elevated) !important;
  background-color: var(--app-surface-elevated) !important;
  color: var(--app-text-strong) !important;
  border-color: var(--app-border-soft) !important;
}

html[data-bs-theme="dark"] #progressModal .modal-body,
html[data-bs-theme="dark"] #progressModal .progress-modal-body,
html[data-bs-theme="dark"] #progressModal .modal-footer,
html[data-bs-theme="dark"] #progressModal .progress-modal-footer,
html[data-bs-theme="dark"] #progressModal .modal-header,
html[data-bs-theme="dark"] #progressModal .progress-modal-header,
html[data-bs-theme="dark"] #modal .modal-body,
html[data-bs-theme="dark"] #modal .modal-footer,
html[data-bs-theme="dark"] #modal .modal-header,
html[data-bs-theme="dark"] #projectAddModal .modal-body,
html[data-bs-theme="dark"] #projectAddModal .modal-footer,
html[data-bs-theme="dark"] #projectAddModal .modal-header {
  background-color: var(--app-surface-subtle) !important;
  color: var(--app-text-strong) !important;
  border-color: var(--app-border-soft) !important;
}

html[data-bs-theme="dark"] #modal [data-modal-content],
html[data-bs-theme="dark"] #modal [data-modal-content] .bg-white,
html[data-bs-theme="dark"] #modal [data-modal-content] .bg-light,
html[data-bs-theme="dark"] #modal [data-modal-content] .bg-light-subtle,
html[data-bs-theme="dark"] #modal [data-modal-content] .table-light,
html[data-bs-theme="dark"] #modal [data-modal-content] .form-control,
html[data-bs-theme="dark"] #modal [data-modal-content] .form-select,
html[data-bs-theme="dark"] #modal [data-modal-content] .form-control-premium,
html[data-bs-theme="dark"] #modal [data-modal-content] .input-group-text,
html[data-bs-theme="dark"] #modal [data-modal-content] .premium-form-section,
html[data-bs-theme="dark"] #modal [data-modal-content] .card,
html[data-bs-theme="dark"] #modal [data-modal-content] .rounded.border,
html[data-bs-theme="dark"] #modal [data-modal-content] .rounded-3.border,
html[data-bs-theme="dark"] #projectAddModalBody .bg-white,
html[data-bs-theme="dark"] #projectAddModalBody .bg-light,
html[data-bs-theme="dark"] #projectAddModalBody .bg-light-subtle,
html[data-bs-theme="dark"] #projectAddModalBody .form-control,
html[data-bs-theme="dark"] #projectAddModalBody .form-select,
html[data-bs-theme="dark"] #projectAddModalBody .form-control-premium,
html[data-bs-theme="dark"] #projectAddModalBody .input-group-text,
html[data-bs-theme="dark"] #projectAddModalBody .premium-form-section {
  background: var(--app-surface-elevated) !important;
  background-color: var(--app-surface-elevated) !important;
  color: var(--app-text-strong) !important;
  border-color: var(--app-border-soft) !important;
}

html[data-bs-theme="dark"] #modal [data-modal-content] .form-control:focus,
html[data-bs-theme="dark"] #modal [data-modal-content] .form-select:focus,
html[data-bs-theme="dark"] #modal [data-modal-content] .form-control-premium:focus,
html[data-bs-theme="dark"] #projectAddModalBody .form-control:focus,
html[data-bs-theme="dark"] #projectAddModalBody .form-select:focus,
html[data-bs-theme="dark"] #projectAddModalBody .form-control-premium:focus,
html[data-bs-theme="dark"] #progressModal .form-control:focus,
html[data-bs-theme="dark"] #progressModal .form-select:focus,
html[data-bs-theme="dark"] #progressModal .form-control-premium:focus {
  background-color: var(--app-surface-elevated) !important;
  color: var(--app-text-strong) !important;
}

html[data-bs-theme="dark"] #modal [data-modal-content] .text-muted,
html[data-bs-theme="dark"] #modal [data-modal-content] .small.text-muted,
html[data-bs-theme="dark"] #projectAddModalBody .text-muted,
html[data-bs-theme="dark"] #projectAddModalBody .small.text-muted,
html[data-bs-theme="dark"] #progressModal .text-muted,
html[data-bs-theme="dark"] #progressModal .small.text-muted,
html[data-bs-theme="dark"] #progressModal .form-text {
  color: var(--app-text-muted) !important;
}

/* Final topbar control cleanup */
html .navbar .sidebar-toggler,
html .content .navbar .sidebar-toggler,
html button.sidebar-toggler.btn.btn-link {
  background: transparent !important;
  border: 0 !important;
  border-radius: 0.7rem !important;
  color: #67748e !important;
  box-shadow: none !important;
}

html .navbar .sidebar-toggler:hover,
html .navbar .sidebar-toggler:focus-visible,
html .navbar .sidebar-toggler:active,
html .content .navbar .sidebar-toggler:hover,
html .content .navbar .sidebar-toggler:focus-visible,
html .content .navbar .sidebar-toggler:active {
  background: rgba(var(--bs-primary-rgb), 0.08) !important;
  border: 0 !important;
  color: var(--bs-primary) !important;
  box-shadow: none !important;
}

html .navbar .sidebar-toggler i,
html .content .navbar .sidebar-toggler i,
html button.sidebar-toggler i {
  color: inherit !important;
}

html .sop-entry-btn,
html .theme-toggle-btn {
  box-shadow: none !important;
}

@media (max-width: 991.98px) {
  html .sop-entry-btn,
  html .theme-toggle-btn {
    min-width: 2.5rem;
    width: 2.5rem;
    height: 2.5rem;
    padding: 0 !important;
    gap: 0 !important;
    border: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    border-radius: 0.7rem !important;
    color: #67748e !important;
  }

  html .sop-entry-btn:hover,
  html .sop-entry-btn:focus-visible,
  html .theme-toggle-btn:hover,
  html .theme-toggle-btn:focus-visible {
    background: rgba(var(--bs-primary-rgb), 0.08) !important;
    border: 0 !important;
    color: var(--bs-primary) !important;
    box-shadow: none !important;
  }

  html .sop-entry-btn .bi,
  html .theme-toggle-btn .bi,
  html .theme-toggle-btn .theme-toggle-icon {
    font-size: 1.05rem;
  }
}

html.theme-transitioning,
html.theme-transitioning body,
html.theme-transitioning .card,
html.theme-transitioning .modal-content,
html.theme-transitioning .dropdown-menu,
html.theme-transitioning .sidebar,
html.theme-transitioning .form-control,
html.theme-transitioning .form-select,
html.theme-transitioning .btn,
html.theme-transitioning .accordion-item,
html.theme-transitioning .alert,
html.theme-transitioning .badge,
html.theme-transitioning .navbar,
html.theme-transitioning .offcanvas,
html.theme-transitioning .summary-bar,
html.theme-transitioning .summary-bar-pms {
  transition: none !important;
}

html,
body,
.card,
.modal-content,
.dropdown-menu,
.sidebar,
.topbar,
.form-control,
.form-select,
.btn,
.accordion-item,
.alert,
.badge,
.ribbon,
.navbar,
.offcanvas,
.summary-bar,
.summary-bar-pms {
  transition: none !important;
}

/* Mobile topbar action alignment */
@media (max-width: 991.98px) {
  html .navbar .navbar-nav.ms-auto {
    gap: 0.35rem !important;
    align-items: center !important;
    flex-wrap: nowrap !important;
  }

  html .navbar .navbar-nav.ms-auto > .nav-item,
  html .navbar .navbar-nav.ms-auto > button {
    flex: 0 0 auto;
  }

  html .sop-entry-btn .d-none.d-lg-inline,
  html .theme-toggle-label,
  html .navbar .navbar-nav .nav-link span.d-none.d-md-inline-flex {
    display: none !important;
  }

  html .sop-entry-btn,
  html .theme-toggle-btn,
  html #notificationDropdownToggle,
  html .navbar .nav-item.dropdown.ms-2 > .nav-link {
    min-width: 2.5rem !important;
    width: 2.5rem !important;
    height: 2.5rem !important;
    padding: 0 !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 0 !important;
    border: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    border-radius: 0.72rem !important;
  }

  html .sop-entry-btn i,
  html .theme-toggle-btn i,
  html #notificationDropdownToggle i,
  html .navbar .nav-item.dropdown.ms-2 > .nav-link i {
    margin: 0 !important;
    font-size: 1.05rem !important;
  }

  html .sop-entry-btn:hover,
  html .sop-entry-btn:focus-visible,
  html .theme-toggle-btn:hover,
  html .theme-toggle-btn:focus-visible,
  html #notificationDropdownToggle:hover,
  html #notificationDropdownToggle:focus-visible,
  html .navbar .nav-item.dropdown.ms-2 > .nav-link:hover,
  html .navbar .nav-item.dropdown.ms-2 > .nav-link:focus-visible {
    background: rgba(var(--bs-primary-rgb), 0.08) !important;
    border: 0 !important;
    box-shadow: none !important;
  }

  html .navbar .nav-item.dropdown.ms-2 {
    margin-left: 0 !important;
  }
}

@media (max-width: 768px) {
  html .navbar .navbar-nav.ms-auto .sop-entry-btn .d-none.d-lg-inline,
  html .navbar .navbar-nav.ms-auto .theme-toggle-label,
  html .navbar .navbar-nav.ms-auto .nav-item.dropdown.ms-2 > .nav-link span.d-none.d-md-inline-flex {
    display: none !important;
  }

  html .navbar .navbar-nav.ms-auto .sop-entry-btn,
  html .navbar .navbar-nav.ms-auto .theme-toggle-btn,
  html .navbar .navbar-nav.ms-auto #notificationDropdownToggle,
  html .navbar .navbar-nav.ms-auto .nav-item.dropdown.ms-2 > .nav-link {
    line-height: 1 !important;
  }

  html .navbar .navbar-nav.ms-auto .sop-entry-btn i,
  html .navbar .navbar-nav.ms-auto .theme-toggle-btn i,
  html .navbar .navbar-nav.ms-auto #notificationDropdownToggle i,
  html .navbar .navbar-nav.ms-auto .nav-item.dropdown.ms-2 > .nav-link i {
    font-size: 1.05rem !important;
    line-height: 1 !important;
  }
}


/* Dark mode: mobile filter/list backgrounds */
@media (max-width: 991.98px) {
  html[data-bs-theme="dark"] .list-controls-grid,
  html[data-bs-theme="dark"] .list-controls-grid .search-wrapper,
  html[data-bs-theme="dark"] .list-controls-grid form,
  html[data-bs-theme="dark"] .list-controls-grid .row,
  html[data-bs-theme="dark"] .list-controls-grid .col-12,
  html[data-bs-theme="dark"] .p-3.border-bottom.d-flex.flex-wrap.justify-content-between.align-items-center.gap-3.bg-light-subtle,
  html[data-bs-theme="dark"] .p-4.border-bottom.bg-light-subtle.d-flex.flex-wrap.justify-content-between.align-items-center.gap-3,
  html[data-bs-theme="dark"] .px-3.py-3.border-top.bg-light-subtle,
  html[data-bs-theme="dark"] .p-3.bg-light-subtle.text-muted.small.fw-bold,
  html[data-bs-theme="dark"] .p-4.bg-light-subtle.border-top.text-center {
    background: var(--app-surface-subtle) !important;
    background-color: var(--app-surface-subtle) !important;
    border-color: var(--app-border-soft) !important;
    color: var(--app-text-strong) !important;
  }
}

@media (max-width: 768px) {
  html[data-bs-theme="dark"] .list-controls-grid,
  html[data-bs-theme="dark"] .list-controls-grid .search-wrapper,
  html[data-bs-theme="dark"] .list-controls-grid form,
  html[data-bs-theme="dark"] .list-controls-grid .row,
  html[data-bs-theme="dark"] .list-controls-grid .col-12 {
    background: var(--app-surface-subtle) !important;
    background-color: var(--app-surface-subtle) !important;
    border-color: var(--app-border-soft) !important;
  }
}

@media (max-width: 575.98px) {
  html[data-bs-theme="dark"] .list-controls-grid,
  html[data-bs-theme="dark"] .list-controls-grid .search-wrapper,
  html[data-bs-theme="dark"] .list-controls-grid form {
    background: var(--app-surface-subtle) !important;
    background-color: var(--app-surface-subtle) !important;
  }
}

/* Dark mode: map legends, gallery modal, and progress mini legends */
[data-bs-theme="dark"] .map-monitor-legend-item,
[data-bs-theme="dark"] .map-monitor-legend-item span,
[data-bs-theme="dark"] .map-monitor-legend-overlay,
[data-bs-theme="dark"] .map-monitor-legend-text {
  color: var(--app-text-strong) !important;
}

[data-bs-theme="dark"] .progress-mini-legend,
[data-bs-theme="dark"] .progress-mini-legend *,
[data-bs-theme="dark"] .chart-legend,
[data-bs-theme="dark"] .chart-legend *,
[data-bs-theme="dark"] .progress-chart-caption {
  color: var(--app-text-strong) !important;
}

[data-bs-theme="dark"] .map-gallery-modal,
[data-bs-theme="dark"] .map-gallery-modal .modal-header,
[data-bs-theme="dark"] .map-gallery-modal .modal-body {
  background: var(--app-surface-elevated) !important;
  border-color: var(--app-border-soft) !important;
  color: var(--app-text-strong) !important;
}

[data-bs-theme="dark"] .map-gallery-modal .modal-title,
[data-bs-theme="dark"] .map-gallery-caption,
[data-bs-theme="dark"] .map-gallery-counter,
[data-bs-theme="dark"] .map-gallery-empty {
  color: var(--app-text-strong) !important;
}

[data-bs-theme="dark"] .map-gallery-modal .text-muted {
  color: var(--app-text-muted) !important;
}

[data-bs-theme="dark"] .map-gallery-modal .modal-body {
  max-height: none !important;
  overflow: hidden !important;
}

[data-bs-theme="dark"] .map-gallery-stage {
  align-items: stretch;
  min-height: min(78vh, 820px);
}

[data-bs-theme="dark"] .map-gallery-figure-wrap {
  background: rgba(12, 18, 26, 0.92) !important;
  border-color: var(--app-border-soft) !important;
  min-height: min(74vh, 760px) !important;
  height: min(74vh, 760px) !important;
  padding: 1rem !important;
}

[data-bs-theme="dark"] .map-gallery-image {
  width: 100%;
  height: 100%;
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
}

[data-bs-theme="dark"] .map-gallery-nav {
  background: var(--app-surface-soft) !important;
  border-color: var(--app-border-soft) !important;
  color: var(--app-text-strong) !important;
}

[data-bs-theme="dark"] .map-gallery-nav:hover,
[data-bs-theme="dark"] .map-gallery-nav:focus-visible {
  background: rgba(var(--bs-primary-rgb), 0.12) !important;
  border-color: rgba(var(--bs-primary-rgb), 0.2) !important;
  color: var(--bs-primary) !important;
}

[data-bs-theme="dark"] .map-gallery-modal .btn-close {
  filter: invert(1) grayscale(100%);
  opacity: 0.9;
}

@media (max-width: 767.98px) {
  [data-bs-theme="dark"] .map-gallery-stage {
    grid-template-columns: 1fr;
    min-height: auto;
  }

  [data-bs-theme="dark"] .map-gallery-figure-wrap {
    min-height: min(62vh, 560px) !important;
    height: min(62vh, 560px) !important;
  }
}

/* Dark mode: PMS jsGantt full coverage */
[data-bs-theme="dark"] .pms-gantt-page .gantt-stage,
[data-bs-theme="dark"] .pms-gantt-page .gantt-scroll,
[data-bs-theme="dark"] .pms-gantt-page .gantt-container,
[data-bs-theme="dark"] .pms-gantt-page #ganttError,
[data-bs-theme="dark"] .pms-gantt-page #ganttLoader,
[data-bs-theme="dark"] #GanttChartDIV,
[data-bs-theme="dark"] #GanttChartDIV .gantt,
[data-bs-theme="dark"] #GanttChartDIV .gchartcontainer,
[data-bs-theme="dark"] #GanttChartDIV .gmain,
[data-bs-theme="dark"] #GanttChartDIV .gmainleft,
[data-bs-theme="dark"] #GanttChartDIV .gmainright,
[data-bs-theme="dark"] #GanttChartDIV .glistlbl,
[data-bs-theme="dark"] #GanttChartDIV .gchartlbl,
[data-bs-theme="dark"] #GanttChartDIV .gchartgrid,
[data-bs-theme="dark"] #GanttChartDIV .gcharttable,
[data-bs-theme="dark"] #GanttChartDIV .gcharttableh,
[data-bs-theme="dark"] #GanttChartDIV .chartgrid {
  background: var(--app-surface-elevated) !important;
  background-color: var(--app-surface-elevated) !important;
  color: var(--app-text-strong) !important;
  border-color: var(--app-border-soft) !important;
}

[data-bs-theme="dark"] .pms-gantt-page .gantt-shell-header h6,
[data-bs-theme="dark"] .pms-gantt-page .gantt-shell-header h6 .text-primary,
[data-bs-theme="dark"] .pms-gantt-page .gantt-toolbar-field label,
[data-bs-theme="dark"] #GanttChartDIV .gantt,
[data-bs-theme="dark"] #GanttChartDIV .gtaskname,
[data-bs-theme="dark"] #GanttChartDIV .gtaskname div,
[data-bs-theme="dark"] #GanttChartDIV .gname,
[data-bs-theme="dark"] #GanttChartDIV .gresource,
[data-bs-theme="dark"] #GanttChartDIV .gduration,
[data-bs-theme="dark"] #GanttChartDIV .gpccomplete,
[data-bs-theme="dark"] #GanttChartDIV .gstartdate,
[data-bs-theme="dark"] #GanttChartDIV .genddate,
[data-bs-theme="dark"] #GanttChartDIV .gmilecaption,
[data-bs-theme="dark"] #GanttChartDIV .ggroupcaption,
[data-bs-theme="dark"] #GanttChartDIV .gcaption,
[data-bs-theme="dark"] #GanttChartDIV .gtaskheading,
[data-bs-theme="dark"] #GanttChartDIV .gmajorheading,
[data-bs-theme="dark"] #GanttChartDIV .gminorheading,
[data-bs-theme="dark"] #GanttChartDIV .gminorheadingwkend,
[data-bs-theme="dark"] #GanttChartDIV .gtaskcell,
[data-bs-theme="dark"] #GanttChartDIV .gtaskcellwkend {
  color: var(--app-text-strong) !important;
}

[data-bs-theme="dark"] #GanttChartDIV .glistlbl,
[data-bs-theme="dark"] #GanttChartDIV .gtaskheading,
[data-bs-theme="dark"] #GanttChartDIV .gmajorheading,
[data-bs-theme="dark"] #GanttChartDIV .gminorheading,
[data-bs-theme="dark"] #GanttChartDIV .gminorheadingwkend,
[data-bs-theme="dark"] #GanttChartDIV .gchartlbl {
  background: var(--app-surface-soft) !important;
  background-color: var(--app-surface-soft) !important;
  border-color: var(--app-border-soft) !important;
}

[data-bs-theme="dark"] #GanttChartDIV td,
[data-bs-theme="dark"] #GanttChartDIV th,
[data-bs-theme="dark"] #GanttChartDIV tr,
[data-bs-theme="dark"] #GanttChartDIV .gline,
[data-bs-theme="dark"] #GanttChartDIV .glineh,
[data-bs-theme="dark"] #GanttChartDIV .glinev,
[data-bs-theme="dark"] #GanttChartDIV .glinevx,
[data-bs-theme="dark"] #GanttChartDIV .glinevy,
[data-bs-theme="dark"] #GanttChartDIV .gheadcell,
[data-bs-theme="dark"] #GanttChartDIV .gheadcellwkend,
[data-bs-theme="dark"] #GanttChartDIV .gheadwkend,
[data-bs-theme="dark"] #GanttChartDIV .gtaskrow,
[data-bs-theme="dark"] #GanttChartDIV .gitemhighlight {
  border-color: var(--app-border-soft) !important;
}

[data-bs-theme="dark"] #GanttChartDIV .glistlbl:hover,
[data-bs-theme="dark"] #GanttChartDIV .gtaskrow:hover,
[data-bs-theme="dark"] #GanttChartDIV .gtaskcell:hover,
[data-bs-theme="dark"] #GanttChartDIV .gtaskcellwkend:hover {
  background: rgba(var(--bs-primary-rgb), 0.06) !important;
}

[data-bs-theme="dark"] .pms-gantt-page .gantt-summary-bar,
[data-bs-theme="dark"] .pms-gantt-page .gantt-summary-bar .breadcrumb,
[data-bs-theme="dark"] .pms-gantt-page .gantt-summary-bar .breadcrumb-item,
[data-bs-theme="dark"] .pms-gantt-page .gantt-summary-bar .subtitle {
  color: var(--app-text-muted) !important;
}

[data-bs-theme="dark"] .pms-gantt-page .gantt-summary-bar h1,
[data-bs-theme="dark"] .pms-gantt-page .gantt-summary-bar a,
[data-bs-theme="dark"] .pms-gantt-page .gantt-summary-bar .breadcrumb-item.active {
  color: var(--app-text-strong) !important;
}

[data-bs-theme="dark"] .pms-gantt-page .gantt-loader .spinner-border,
[data-bs-theme="dark"] .pms-gantt-page #ganttError .alert {
  color: var(--app-text-strong) !important;
}

[data-bs-theme="dark"] .pms-gantt-page .gantt-scroll,
[data-bs-theme="dark"] #GanttChartDIV .gmainleft,
[data-bs-theme="dark"] #GanttChartDIV .gmainright {
  scrollbar-color: rgba(168, 186, 199, 0.55) transparent !important;
}

[data-bs-theme="dark"] .pms-gantt-page .gantt-scroll::-webkit-scrollbar,
[data-bs-theme="dark"] #GanttChartDIV .gmainleft::-webkit-scrollbar,
[data-bs-theme="dark"] #GanttChartDIV .gmainright::-webkit-scrollbar {
  width: 6px;
  height: 6px;
}

[data-bs-theme="dark"] .pms-gantt-page .gantt-scroll::-webkit-scrollbar-track,
[data-bs-theme="dark"] #GanttChartDIV .gmainleft::-webkit-scrollbar-track,
[data-bs-theme="dark"] #GanttChartDIV .gmainright::-webkit-scrollbar-track {
  background: transparent;
}

[data-bs-theme="dark"] .pms-gantt-page .gantt-scroll::-webkit-scrollbar-thumb,
[data-bs-theme="dark"] #GanttChartDIV .gmainleft::-webkit-scrollbar-thumb,
[data-bs-theme="dark"] #GanttChartDIV .gmainright::-webkit-scrollbar-thumb {
  background: rgba(168, 186, 199, 0.38);
  border-radius: 999px;
}

/* Dark mode: PMS Gantt task-name cells, chart headings, and global card glow */
[data-bs-theme="dark"] #GanttChartDIV td.gtaskname,
[data-bs-theme="dark"] #GanttChartDIV td.gname,
[data-bs-theme="dark"] #GanttChartDIV td.gresource,
[data-bs-theme="dark"] #GanttChartDIV td.gduration,
[data-bs-theme="dark"] #GanttChartDIV td.gpccomplete,
[data-bs-theme="dark"] #GanttChartDIV td.gstartdate,
[data-bs-theme="dark"] #GanttChartDIV td.genddate,
[data-bs-theme="dark"] #GanttChartDIV td.gtaskheading,
[data-bs-theme="dark"] #GanttChartDIV td.gmajorheading,
[data-bs-theme="dark"] #GanttChartDIV td.gminorheading,
[data-bs-theme="dark"] #GanttChartDIV td.gminorheadingwkend,
[data-bs-theme="dark"] #GanttChartDIV td.gtaskcell,
[data-bs-theme="dark"] #GanttChartDIV td.gtaskcellwkend,
[data-bs-theme="dark"] #GanttChartDIV .gtaskname,
[data-bs-theme="dark"] #GanttChartDIV .gname,
[data-bs-theme="dark"] #GanttChartDIV .gresource,
[data-bs-theme="dark"] #GanttChartDIV .gduration,
[data-bs-theme="dark"] #GanttChartDIV .gpccomplete,
[data-bs-theme="dark"] #GanttChartDIV .gstartdate,
[data-bs-theme="dark"] #GanttChartDIV .genddate {
  background: #111a24 !important;
  background-color: #111a24 !important;
  color: var(--app-text-strong) !important;
  border-color: var(--app-border-soft) !important;
}

[data-bs-theme="dark"] #GanttChartDIV .gtaskname div,
[data-bs-theme="dark"] #GanttChartDIV .gname div {
  background: transparent !important;
  color: var(--app-text-strong) !important;
  white-space: normal !important;
  overflow-wrap: anywhere !important;
  word-break: break-word !important;
  line-height: 1.35 !important;
}

[data-bs-theme="dark"] #GanttChartDIV td.gtaskname,
[data-bs-theme="dark"] #GanttChartDIV td.gname {
  height: auto !important;
}

[data-bs-theme="dark"] .chart-container .text-secondary,
[data-bs-theme="dark"] .chart-container .small.fw-medium.text-secondary,
[data-bs-theme="dark"] .chart-container .kpi-progress-text {
  color: var(--app-text-muted) !important;
}

[data-bs-theme="dark"] .chart-container,
[data-bs-theme="dark"] .chart-container .d-flex,
[data-bs-theme="dark"] .planned-actual-chart-host {
  color: var(--app-text-strong) !important;
}

[data-bs-theme="dark"] .card,
[data-bs-theme="dark"] .glass-card,
[data-bs-theme="dark"] .card-section,
[data-bs-theme="dark"] .kpi-card,
[data-bs-theme="dark"] .stat-mini,
[data-bs-theme="dark"] .stat-card,
[data-bs-theme="dark"] .summary-bar,
[data-bs-theme="dark"] .summary-bar-pms,
[data-bs-theme="dark"] .live-bar,
[data-bs-theme="dark"] .filter-section,
[data-bs-theme="dark"] .modal-content,
[data-bs-theme="dark"] .dropdown-menu,
[data-bs-theme="dark"] .sidebar-card,
[data-bs-theme="dark"] .guide-card,
[data-bs-theme="dark"] .guide-shell,
[data-bs-theme="dark"] .tpgc-form-section,
[data-bs-theme="dark"] .map-monitor-toolbar,
[data-bs-theme="dark"] .map-monitor-legend-overlay,
[data-bs-theme="dark"] .pms-gantt-page .gantt-shell {
  box-shadow: 0 0 0 1px rgba(var(--bs-primary-rgb), 0.14), 0 0 18px rgba(var(--bs-primary-rgb), 0.08) !important;
}

/* Project detail: preserve semantic timeline/progress surfaces */
[data-bs-theme="light"] .project-detail-page .project-progress-card.bg-primary.bg-opacity-10 {
  background: linear-gradient(180deg, rgba(46, 49, 146, 0.1), rgba(46, 49, 146, 0.05)) !important;
  border-color: rgba(46, 49, 146, 0.18) !important;
}

[data-bs-theme="light"] .project-detail-page .project-progress-card.bg-success.bg-opacity-10 {
  background: linear-gradient(180deg, rgba(22, 163, 74, 0.12), rgba(22, 163, 74, 0.05)) !important;
  border-color: rgba(22, 163, 74, 0.18) !important;
}

[data-bs-theme="light"] .project-detail-page .project-progress-card.bg-danger.bg-opacity-10 {
  background: linear-gradient(180deg, rgba(220, 53, 69, 0.12), rgba(220, 53, 69, 0.05)) !important;
  border-color: rgba(220, 53, 69, 0.18) !important;
}

[data-bs-theme="light"] .project-detail-page .project-progress-card__header.border-primary,
[data-bs-theme="light"] .project-detail-page .project-progress-card.border-primary {
  border-color: rgba(46, 49, 146, 0.18) !important;
}

[data-bs-theme="light"] .project-detail-page .project-progress-card__header.border-success,
[data-bs-theme="light"] .project-detail-page .project-progress-card.border-success {
  border-color: rgba(22, 163, 74, 0.18) !important;
}

[data-bs-theme="light"] .project-detail-page .project-progress-card__header.border-danger,
[data-bs-theme="light"] .project-detail-page .project-progress-card.border-danger {
  border-color: rgba(220, 53, 69, 0.18) !important;
}

[data-bs-theme="light"] .project-detail-page .project-progress-card__panel,
[data-bs-theme="light"] .project-detail-page .project-extension-record {
  background: rgba(255, 255, 255, 0.84) !important;
  border-color: rgba(15, 23, 42, 0.08) !important;
}

[data-bs-theme="light"] .project-detail-page .project-timeline-track {
  color: #202938 !important;
}

[data-bs-theme="light"] .project-detail-page .project-timeline-track--planned {
  background: rgba(46, 49, 146, 0.06) !important;
  border-color: rgba(46, 49, 146, 0.16) !important;
  border-left-color: #2e3192 !important;
}

[data-bs-theme="light"] .project-detail-page .project-timeline-track--contractual {
  background: rgba(245, 158, 11, 0.1) !important;
  border-color: rgba(245, 158, 11, 0.2) !important;
  border-left-color: #d97706 !important;
}

[data-bs-theme="light"] .project-detail-page .project-timeline-track--actual {
  background: rgba(22, 163, 74, 0.08) !important;
  border-color: rgba(22, 163, 74, 0.18) !important;
  border-left-color: #16a34a !important;
}

[data-bs-theme="light"] .project-detail-page .project-progress-card .badge.bg-white.text-dark.border.shadow-sm,
[data-bs-theme="light"] .project-detail-page .project-timeline-card .badge.bg-light.text-dark.border.shadow-sm {
  background: #fffdfa !important;
  color: #202938 !important;
  border-color: rgba(15, 23, 42, 0.12) !important;
}

[data-bs-theme="dark"] .project-detail-page .project-progress-card.bg-primary.bg-opacity-10 {
  background: linear-gradient(180deg, rgba(120, 185, 255, 0.14), rgba(120, 185, 255, 0.06)) !important;
  border-color: rgba(120, 185, 255, 0.26) !important;
}

[data-bs-theme="dark"] .project-detail-page .project-progress-card.bg-success.bg-opacity-10 {
  background: linear-gradient(180deg, rgba(99, 211, 155, 0.16), rgba(99, 211, 155, 0.06)) !important;
  border-color: rgba(99, 211, 155, 0.24) !important;
}

[data-bs-theme="dark"] .project-detail-page .project-progress-card.bg-danger.bg-opacity-10 {
  background: linear-gradient(180deg, rgba(255, 139, 154, 0.16), rgba(255, 139, 154, 0.06)) !important;
  border-color: rgba(255, 139, 154, 0.24) !important;
}

[data-bs-theme="dark"] .project-detail-page .project-progress-card__header.border-primary,
[data-bs-theme="dark"] .project-detail-page .project-progress-card.border-primary {
  border-color: rgba(120, 185, 255, 0.24) !important;
}

[data-bs-theme="dark"] .project-detail-page .project-progress-card__header.border-success,
[data-bs-theme="dark"] .project-detail-page .project-progress-card.border-success {
  border-color: rgba(99, 211, 155, 0.24) !important;
}

[data-bs-theme="dark"] .project-detail-page .project-progress-card__header.border-danger,
[data-bs-theme="dark"] .project-detail-page .project-progress-card.border-danger {
  border-color: rgba(255, 139, 154, 0.24) !important;
}

[data-bs-theme="dark"] .project-detail-page .project-progress-card__panel {
  background: rgba(11, 17, 26, 0.82) !important;
  border-color: rgba(255, 255, 255, 0.1) !important;
}

[data-bs-theme="dark"] .project-detail-page .project-progress-card .text-primary {
  color: #8fb8ff !important;
}

[data-bs-theme="dark"] .project-detail-page .project-progress-card .text-success {
  color: #63d39b !important;
}

[data-bs-theme="dark"] .project-detail-page .project-progress-card .text-danger {
  color: #ff8b9a !important;
}

[data-bs-theme="dark"] .project-detail-page .project-progress-card .badge.bg-white.text-dark.border.shadow-sm,
[data-bs-theme="dark"] .project-detail-page .project-progress-card .badge.bg-light.text-dark.border.shadow-sm,
[data-bs-theme="dark"] .project-detail-page .project-timeline-card .badge.bg-white.text-dark.border.shadow-sm,
[data-bs-theme="dark"] .project-detail-page .project-timeline-card .badge.bg-light.text-dark.border.shadow-sm {
  background: #18212c !important;
  color: #eef4fb !important;
  border-color: rgba(255, 255, 255, 0.12) !important;
}

[data-bs-theme="dark"] .project-detail-page .project-timeline-track {
  color: #eef4fb !important;
}

[data-bs-theme="dark"] .project-detail-page .project-timeline-track--planned {
  background: rgba(120, 185, 255, 0.14) !important;
  border-color: rgba(120, 185, 255, 0.18) !important;
  border-left-color: #78b9ff !important;
}

[data-bs-theme="dark"] .project-detail-page .project-timeline-track--contractual {
  background: rgba(243, 187, 98, 0.16) !important;
  border-color: rgba(243, 187, 98, 0.2) !important;
  border-left-color: #f3bb62 !important;
}

[data-bs-theme="dark"] .project-detail-page .project-timeline-track--actual {
  background: rgba(99, 211, 155, 0.16) !important;
  border-color: rgba(99, 211, 155, 0.2) !important;
  border-left-color: #63d39b !important;
}

[data-bs-theme="dark"] .project-detail-page .project-extension-record {
  background: rgba(18, 25, 34, 0.88) !important;
  border-color: rgba(255, 255, 255, 0.1) !important;
}

[data-bs-theme="dark"] .project-detail-page .project-timeline-card .project-extension-record .small.fw-bold.text-dark,
[data-bs-theme="dark"] .project-detail-page .project-timeline-card .project-timeline-track .small.fw-bold.text-dark {
  color: #eef4fb !important;
}

[data-bs-theme="dark"] .project-detail-page .lifecycle-progress {
  background: rgba(255, 255, 255, 0.1) !important;
  box-shadow: none !important;
}

/* ============================================
   GLOBAL TYPOGRAPHY DENSITY NORMALIZATION
   Loaded last to align Bootstrap, custom pages, and dynamic UI.
   ============================================ */
html {
  text-size-adjust: 100%;
}

body {
  font-size: var(--type-size-body, 0.875rem);
  line-height: var(--type-line-body, 1.5);
}

h1,
.h1 {
  font-size: var(--type-size-h1, 1.375rem);
}

h2,
.h2 {
  font-size: var(--type-size-h2, 1.25rem);
}

h3,
.h3 {
  font-size: var(--type-size-h3, 1.125rem);
}

h4,
.h4 {
  font-size: var(--type-size-h4, 1rem);
}

h5,
.h5 {
  font-size: var(--type-size-h5, 0.9375rem);
}

h6,
.h6 {
  font-size: var(--type-size-h6, 0.875rem);
}

h1,
h2,
h3,
h4,
h5,
h6,
.h1,
.h2,
.h3,
.h4,
.h5,
.h6 {
  line-height: var(--type-line-tight, 1.22);
}

.summary-bar h1,
.summary-bar-pms .summary-title h1,
.gantt-summary-bar h1 {
  font-size: var(--type-size-h1, 1.375rem) !important;
  line-height: var(--type-line-tight, 1.22) !important;
}

.summary-bar .subtitle,
.summary-bar-pms .summary-title .subtitle,
.gantt-summary-bar .subtitle,
.card-subtitle {
  font-size: var(--type-size-meta, 0.8125rem);
  line-height: var(--type-line-compact, 1.35);
}

.breadcrumb,
.breadcrumb-item,
.small,
small,
.form-text,
.invalid-feedback,
.valid-feedback,
.helptext {
  font-size: var(--type-size-sm, 0.75rem);
  line-height: var(--type-line-compact, 1.35);
}

.navbar .nav-link,
.sidebar .navbar .navbar-nav .nav-link,
.sidebar .navbar .nav-item .nav-link,
.sidebar .dropdown-menu .dropdown-item,
.sidebar .nav-link,
.dropdown-item,
.list-group-item,
.nav-tabs .nav-link,
.nav-pills .nav-link {
  font-size: var(--type-size-meta, 0.8125rem);
  line-height: var(--type-line-compact, 1.35);
}

.card,
.card-body,
.modal-body,
.alert,
.toast-body,
.accordion-body {
  font-size: var(--type-size-body, 0.875rem);
  line-height: var(--type-line-body, 1.5);
}

.card-title,
.modal-title,
.accordion-button,
.widget-title,
.section-title {
  font-size: var(--type-size-h5, 0.9375rem);
  line-height: var(--type-line-tight, 1.22);
}

.table {
  font-size: var(--type-size-meta, 0.8125rem);
}

.table th {
  font-size: var(--type-size-sm, 0.75rem);
  line-height: var(--type-line-compact, 1.35);
}

.table td {
  line-height: var(--type-line-compact, 1.35);
}

.btn {
  font-size: var(--btn-font-size, var(--type-size-meta, 0.8125rem));
  line-height: var(--type-line-compact, 1.35);
}

.btn-sm,
.input-group-sm > .btn,
.input-group-sm > .form-control,
.input-group-sm > .form-select {
  font-size: var(--type-size-sm, 0.75rem);
}

.badge,
.custom-badge,
.filter-badge,
.module-badge,
.notification-badge,
.notify-badge {
  font-size: var(--type-size-xs, 0.6875rem);
  line-height: 1.2;
}

.form-label,
.form-label-premium,
.filter-section .form-label,
.list-filter-form .form-label {
  font-size: var(--type-size-sm, 0.75rem);
  line-height: var(--type-line-compact, 1.35);
}

.form-control,
.form-select,
.input-group-text,
.form-control-premium,
.form-select-premium,
.searchable-select .btn.form-select,
.tpgc-searchable-select .btn.form-select,
.list-filter-form .form-control {
  font-size: var(--type-size-meta, 0.8125rem);
  line-height: var(--type-line-body, 1.5);
}

input::placeholder,
textarea::placeholder {
  font-size: inherit;
}

@media (max-width: 767.98px) {
  body {
    font-size: var(--type-size-body, 0.875rem);
  }

  .summary-bar h1,
  .summary-bar-pms .summary-title h1,
  .gantt-summary-bar h1 {
    font-size: var(--type-size-h2, 1.25rem) !important;
  }

  .form-control,
  .form-select,
  .input-group-text,
  .btn {
    font-size: var(--type-size-body, 0.875rem);
  }
}