/* P2-8 FIX (2025-10-22): Dark Mode Support with CSS Variables */
:root {
  /* Light theme (default) */
  --bg-primary: #F6F8FC;
  --bg-secondary: #FFFFFF;
  --bg-tertiary: #E9ECEF;
  --text-primary: #0F1B2A;
  --text-secondary: #495057;
  --text-muted: #6C757D;
  --border-color: #DEE2E6;
  --card-bg: #FFFFFF;
  --card-shadow: rgba(0, 0, 0, 0.1);
  --link-color: #0D6EFD;
  --link-hover: #0A58CA;
  --success-color: #198754;
  --warning-color: #FFC107;
  --danger-color: #DC3545;
  --info-color: #0DCAF0;
  
  /* Legacy compatibility */
  --bg: var(--bg-primary);
  --ink: var(--text-primary);
}

/* Dark theme */
[data-theme="dark"] {
  --bg-primary: #0F1B2A;
  --bg-secondary: #1A2332;
  --bg-tertiary: #252D3A;
  --text-primary: #E9ECEF;
  --text-secondary: #CED4DA;
  --text-muted: #ADB5BD;
  --border-color: #343A40;
  --card-bg: #1A2332;
  --card-shadow: rgba(0, 0, 0, 0.3);
  --link-color: #6EA8FE;
  --link-hover: #9EC5FE;
  --success-color: #75B798;
  --warning-color: #FFD966;
  --danger-color: #EA868F;
  --info-color: #6EDFF6;
  
  /* Bootstrap overrides for dark mode */
  --bs-body-bg: var(--bg-primary);
  --bs-body-color: var(--text-primary);
  --bs-border-color: var(--border-color);
}

html,body{height:100%} 
body{
  background:var(--bg-primary);
  color:var(--text-primary);
  transition: background-color 0.3s ease, color 0.3s ease;
}
main{min-height:80vh;overflow:auto} main::-webkit-scrollbar{display:none} main{-ms-overflow-style:none;scrollbar-width:none}
.card{
  border-radius:.75rem;
  background-color: var(--card-bg);
  border-color: var(--border-color);
  color: var(--text-primary);
  transition: background-color 0.3s ease, border-color 0.3s ease;
}
.progress{height:12px} 
.footer-links a{margin-left:12px}

/* Dark mode specific adjustments */
[data-theme="dark"] .navbar {
  background-color: var(--bg-secondary) !important;
  border-bottom: 1px solid var(--border-color);
}

[data-theme="dark"] .table {
  --bs-table-bg: var(--bg-secondary);
  --bs-table-striped-bg: var(--bg-tertiary);
  --bs-table-hover-bg: var(--bg-tertiary);
  color: var(--text-primary);
}

[data-theme="dark"] .modal-content {
  background-color: var(--card-bg);
  color: var(--text-primary);
}

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

[data-theme="dark"] .form-control:focus,
[data-theme="dark"] .form-select:focus {
  background-color: var(--bg-tertiary);
  border-color: var(--link-color);
  color: var(--text-primary);
}

/* --- App shell full-height layout helpers --- */
html, body { height: 100%; }
body { min-height: 100vh; display: flex; flex-direction: column; }
main { flex: 1 0 auto; display: flex; flex-direction: column; min-height: 0; }
footer { flex-shrink: 0; }
.page-center { flex: 1 1 auto; display: flex; align-items: center; justify-content: center; min-height: 0; }
/* When viewport is short, let content scroll instead of pushing footer */
.page-center > * { max-width: 100%; }

/* Navbar brand sizing (logo + text) */
.navbar .brand-logo { height: 24px; width: auto; }
@media (min-width: 576px) { /* sm */
  .navbar .brand-logo { height: 28px; }
}
@media (min-width: 992px) { /* lg */
  .navbar .brand-logo { height: 32px; }
}
.navbar .brand-text { font-size: 1rem; }
@media (min-width: 576px) {
  .navbar .brand-text { font-size: 1.05rem; }
}
@media (min-width: 992px) {
  .navbar .brand-text { font-size: 1.1rem; }
}


/* Insurance Demo: Results table scrollbars and sticky headers */
#resultsWrap {
  max-height: 420px;          /* adjust as needed */
  overflow: auto;             /* both axes */
}
#resultsWrap table thead th {
  position: sticky;
  top: 0;
  z-index: 2;
  background: var(--bs-body-bg, #fff);
}
/* Hide ms column when table has .no-ms class */
.no-ms thead tr th.ms-col,
.no-ms tbody tr td.ms-col { display: none !important; }


/* Logistics backlog chart responsiveness */
#backlogCard .card-body { padding-left: 1rem; padding-right: 1rem; }
#backlogChart { width: 100%; min-height: 220px; }
@media (min-width: 992px) {
  #backlogChart { min-height: 260px; }
}

/* Backlog card & chart responsive expansion */
#backlogCard{width:100%; max-width:100%;}
#backlogCard .card-body{width:100%; max-width:100%; overflow-x:auto;}
#chartBacklog{width:100% !important; min-height:220px;}
@media (min-width: 1200px){ #chartBacklog{min-height:260px;} }