/* ============================================================
   SIVIA Enhanced - Clinical Blue Glassmorphism Theme v16.0
   Cool blue/slate background
   Top header ribbon matches blue theme
   Chart tabs in 2 rows (override nav-fill)
   Bootstrap colored card-headers RESTORED
   All text visible everywhere
   ============================================================ */

/* --- 1. FONT IMPORT --- */
@import url('https://fonts.googleapis.com/css2?family=DM+Sans:ital,opsz,wght@0,9..40,300;0,9..40,400;0,9..40,500;0,9..40,600;0,9..40,700;1,9..40,400&display=swap');

/* --- 2. CSS VARIABLES --- */
:root {
  /* Background - COOL BLUE/SLATE */
  --warm-bg: #EEF2F7;
  --warm-border: rgba(120, 150, 190, 0.40);
  --warm-border-strong: rgba(100, 135, 180, 0.55);

  /* Sidebar */
  --sidebar-dark: #0F1A2E;
  --sidebar-dark-hover: #1A2744;
  --sidebar-dark-active: #263A5C;

  /* Glass effects - BLUE/FROST tint */
  --glass-white: rgba(240, 245, 252, 0.82);
  --glass-white-strong: rgba(245, 248, 254, 0.92);
  --glass-border: rgba(120, 155, 200, 0.30);
  --glass-blur: blur(18px);
  --glass-shadow: 0 4px 24px rgba(60, 90, 140, 0.10);

  /* Text - STRONG dark */
  --text-primary: #0F1729;
  --text-secondary: #2D3748;
  --text-muted: #4A5568;

  /* Tab colors */
  --tab-active-bg: #ffffff;
  --tab-active-text: #0F1729;
  --tab-active-border: #3B82F6;
  --tab-inactive-bg: rgba(200, 218, 240, 0.40);
  --tab-inactive-text: #4A5568;
  --tab-inactive-border: rgba(120, 155, 200, 0.35);
  --tab-hover-bg: rgba(210, 225, 245, 0.60);
  --tab-hover-text: #0F1729;

  /* Buttons */
  --btn-outline-border: rgba(120, 150, 190, 0.45);
  --btn-outline-hover-bg: rgba(220, 232, 248, 0.55);

  /* Radii */
  --radius-sm: 10px;
  --radius-md: 14px;
  --radius-lg: 20px;
  --radius-xl: 24px;
}

/* --- 3. BASE / BODY --- COOL BLUE GRADIENT --- */
html {
  background: var(--warm-bg) !important;
}

body {
  background:
    radial-gradient(ellipse 80% 80% at 78% 15%, rgba(140, 180, 230, 0.18) 0%, transparent 55%),
    radial-gradient(ellipse 65% 65% at 88% 50%, rgba(120, 165, 220, 0.14) 0%, transparent 50%),
    radial-gradient(ellipse 60% 55% at 50% 10%, rgba(160, 195, 240, 0.12) 0%, transparent 45%),
    radial-gradient(ellipse 50% 55% at 95% 65%, rgba(130, 175, 230, 0.14) 0%, transparent 45%),
    radial-gradient(ellipse 45% 45% at 15% 60%, rgba(170, 200, 240, 0.08) 0%, transparent 40%),
    radial-gradient(ellipse 85% 85% at 50% 50%, rgba(180, 210, 245, 0.06) 0%, transparent 70%),
    var(--warm-bg) !important;
  background-attachment: fixed !important;
  font-family: 'DM Sans', 'Inter', -apple-system, BlinkMacSystemFont, sans-serif !important;
  color: var(--text-primary) !important;
  min-height: 100vh;
}

/* --- 4. FONT AWESOME PROTECTION --- */
.fas, .far, .fab, .fa-solid, .fa-regular, .fa-brands, .fa-light, .fa-thin, .fa-duotone,
i.fas, i.far, i.fab, i.fa-solid, i.fa-regular, i.fa-brands,
.fa, i.fa,
[class*="fa-"]:not(body):not(div):not(span):not(a):not(button):not(p):not(h1):not(h2):not(h3):not(h4):not(h5):not(h6):not(td):not(th):not(li):not(label):not(input):not(select):not(textarea) {
  font-family: "Font Awesome 6 Free", "Font Awesome 6 Brands", "FontAwesome" !important;
}
i[class*="fa-"] {
  font-family: "Font Awesome 6 Free", "Font Awesome 6 Brands", "FontAwesome" !important;
}

/* --- 5. GLOBAL FONT --- */
h1, h2, h3, h4, h5, h6,
p, span, a, label, td, th, li, div,
input, select, textarea, button, option {
  font-family: 'DM Sans', 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
}

/* --- 6. APP CONTAINER --- */
.app-container {
  background: transparent !important;
}

/* --- 7. SIDEBAR --- */
.sidebar {
  background: var(--sidebar-dark) !important;
  border-right: 1px solid rgba(100, 140, 200, 0.15) !important;
  box-shadow: none !important;
  border-radius: 0 !important;
}

.sidebar .logo, .sidebar .logo-icon { color: #ffffff !important; background: transparent !important; }
.logo h1 { color: #ffffff !important; }
.logo p { color: rgba(255, 255, 255, 0.5) !important; }
.sidebar .logo-text, .sidebar .logo-text span { color: #ffffff !important; }

.sidebar-toggle {
  background: var(--sidebar-dark-hover) !important;
  border-color: rgba(100, 140, 200, 0.20) !important;
  color: #ffffff !important;
  box-shadow: none !important;
}
.sidebar-toggle:hover { background: var(--sidebar-dark-active) !important; }

/* Sidebar nav links — SCOPED to .sidebar ONLY */
.sidebar .nav-link {
  color: rgba(255, 255, 255, 0.65) !important;
  background: transparent !important;
  border-radius: var(--radius-sm) !important;
  border-color: transparent !important;
}
.sidebar .nav-link:hover {
  color: #ffffff !important;
  background: var(--sidebar-dark-hover) !important;
  border-color: transparent !important;
}
.sidebar .nav-link.active {
  color: #ffffff !important;
  background: var(--sidebar-dark-active) !important;
  border-color: transparent !important;
  box-shadow: none !important;
}
.sidebar .nav-link i { background: transparent !important; color: inherit !important; }
.sidebar .nav-link:hover i { background: transparent !important; color: inherit !important; }
.sidebar .nav-link.active i { background: transparent !important; color: inherit !important; }
.sidebar .nav-text { color: inherit !important; }
.sidebar .nav-description { color: rgba(255, 255, 255, 0.4) !important; }
.sidebar.collapsed .nav-link::after {
  background: var(--sidebar-dark) !important;
  color: #ffffff !important;
  border-radius: var(--radius-sm) !important;
}
.sidebar .sidebar-bottom, .sidebar .sidebar-footer { border-color: rgba(100, 140, 200, 0.15) !important; }
.logo { border-bottom-color: rgba(100, 140, 200, 0.15) !important; }

/* --- 8. MAIN CONTENT --- */
.main-content {
  background: transparent !important;
}

/* --- 9. HEADER BAR - COOL BLUE FROSTED --- */
.header {
  background: rgba(225, 235, 248, 0.82) !important;
  -webkit-backdrop-filter: var(--glass-blur) !important;
  backdrop-filter: var(--glass-blur) !important;
  border-bottom: 1px solid var(--warm-border) !important;
  box-shadow: none !important;
  border-radius: 0 !important;
}
.user-info { color: var(--text-primary) !important; }
.logout-btn {
  background: rgba(240, 245, 252, 0.7) !important;
  color: var(--text-primary) !important;
  border: 1px solid var(--warm-border) !important;
  border-radius: var(--radius-sm) !important;
}
.logout-btn:hover { background: rgba(240, 245, 252, 0.95) !important; }

/* --- 10. CARDS & CONTAINERS (Frosted Glass) --- */
.card {
  background: var(--glass-white-strong) !important;
  -webkit-backdrop-filter: var(--glass-blur) !important;
  backdrop-filter: var(--glass-blur) !important;
  border: 1px solid var(--glass-border) !important;
  border-radius: var(--radius-lg) !important;
  box-shadow: var(--glass-shadow) !important;
}
.card:hover { box-shadow: 0 6px 30px rgba(60, 100, 160, 0.08) !important; }

/* --- 11. CARD HEADERS --- */
/* Default: cool blue-tinted background with dark text */
.card-header {
  background: rgba(220, 232, 248, 0.50) !important;
  border-bottom: 1px solid var(--warm-border) !important;
  border-radius: var(--radius-lg) var(--radius-lg) 0 0 !important;
  color: var(--text-primary) !important;
}

/* RESTORE Bootstrap colored card-headers with their ORIGINAL background colors */
.card-header.bg-primary {
  background: #0d6efd !important;
  color: #ffffff !important;
}
.card-header.bg-danger {
  background: #dc3545 !important;
  color: #ffffff !important;
}
.card-header.bg-success {
  background: #198754 !important;
  color: #ffffff !important;
}
.card-header.bg-info {
  background: #0dcaf0 !important;
  color: #ffffff !important;
}
.card-header.bg-warning {
  background: #ffc107 !important;
  color: #000000 !important;
}
.card-header.bg-gradient-primary,
.card-header[class*="bg-gradient-primary"] {
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%) !important;
  color: #ffffff !important;
}

/* Opacity-10 variants keep their tinted look */
.card-header.bg-success.bg-opacity-10 {
  background: rgba(25, 135, 84, 0.10) !important;
  color: var(--text-primary) !important;
}
.card-header.bg-danger.bg-opacity-10 {
  background: rgba(220, 53, 69, 0.10) !important;
  color: var(--text-primary) !important;
}

/* All colored card-headers get rounded top corners */
.card-header.bg-primary,
.card-header.bg-danger,
.card-header.bg-success,
.card-header.bg-info,
.card-header.bg-warning,
.card-header.bg-gradient-primary,
.card-header[class*="bg-gradient"] {
  border-radius: var(--radius-lg) var(--radius-lg) 0 0 !important;
  border-bottom: 1px solid rgba(255,255,255,0.15) !important;
}

/* text-white on colored card-headers must stay white */
.card-header.bg-primary.text-white,
.card-header.bg-danger.text-white,
.card-header.bg-success.text-white,
.card-header.bg-info.text-white,
.card-header.bg-gradient-primary.text-white,
.card-header[class*="bg-gradient-primary"].text-white {
  color: #ffffff !important;
}

/* --- 12. MODAL HEADERS - PRESERVE ORIGINAL BOOTSTRAP COLORS --- */
.modal-header { border-radius: var(--radius-lg) var(--radius-lg) 0 0 !important; padding: 10px 20px !important; }
.modal-header .modal-title { font-size: 1rem !important; margin: 0 !important; line-height: 1.4 !important; }
.modal-footer .btn { padding: 6px 16px !important; font-size: 0.85rem !important; border-radius: 6px !important; }
.modal-content {
  border-radius: var(--radius-lg) !important;
  border: 1px solid var(--glass-border) !important;
  box-shadow: 0 20px 60px rgba(30, 60, 110, 0.16) !important;
}
.modal-footer { border-top: 1px solid var(--warm-border) !important; }

/* --- 13. CARD BODY --- */
.card-body { background: transparent !important; }

/* --- 14. TABLE CONTAINERS --- */
.table-container {
  background: var(--glass-white-strong) !important;
  -webkit-backdrop-filter: var(--glass-blur) !important;
  backdrop-filter: var(--glass-blur) !important;
  border: 1px solid var(--glass-border) !important;
  border-radius: var(--radius-lg) !important;
  box-shadow: var(--glass-shadow) !important;
}
.stat-card {
  background: var(--glass-white-strong) !important;
  -webkit-backdrop-filter: var(--glass-blur) !important;
  backdrop-filter: var(--glass-blur) !important;
  border: 1px solid var(--glass-border) !important;
  border-radius: var(--radius-md) !important;
  box-shadow: var(--glass-shadow) !important;
}
.framework-card {
  background: var(--glass-white-strong) !important;
  border: 1px solid var(--glass-border) !important;
  border-radius: var(--radius-md) !important;
}
.risk-item { background: var(--glass-white-strong) !important; border-radius: var(--radius-sm) !important; }
.risk-distribution-compact {
  background: var(--glass-white-strong) !important;
  border: 1px solid var(--glass-border) !important;
  border-radius: var(--radius-sm) !important;
}
.compliance-item { background: rgba(230, 238, 250, 0.5) !important; border-radius: var(--radius-sm) !important; }
.file-item {
  background: var(--glass-white) !important;
  border: 1px solid var(--glass-border) !important;
  border-radius: var(--radius-md) !important;
}

/* --- 15. TABLE STYLING --- */
.table { color: var(--text-primary) !important; }
.table thead th {
  background: rgba(220, 232, 248, 0.40) !important;
  color: var(--text-primary) !important;
  font-weight: 600 !important;
  border-color: var(--warm-border) !important;
}
.table td { border-color: rgba(120, 155, 200, 0.18) !important; color: var(--text-primary) !important; }
.table-hover tbody tr:hover { background: rgba(220, 232, 248, 0.30) !important; }
.table-striped tbody tr:nth-of-type(odd) { background: rgba(225, 235, 248, 0.20) !important; }

/* --- 16. FORM CONTROLS --- */
.form-control, .form-select {
  background: rgba(245, 248, 254, 0.90) !important;
  border: 1px solid var(--warm-border-strong) !important;
  color: var(--text-primary) !important;
  border-radius: var(--radius-sm) !important;
}
.form-control:focus, .form-select:focus {
  border-color: var(--tab-active-border) !important;
  box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.15) !important;
}

/* --- 17. BUTTONS --- */
.btn { border-radius: var(--radius-sm) !important; font-weight: 500 !important; }
.btn-outline-primary, .btn-outline-secondary, .btn-outline-success,
.btn-outline-danger, .btn-outline-warning, .btn-outline-info { border-width: 1.5px !important; }
.btn-light, .btn-outline-light {
  background: rgba(240, 245, 252, 0.85) !important;
  border: 1.5px solid var(--btn-outline-border) !important;
  color: var(--text-primary) !important;
}
.btn-light:hover, .btn-outline-light:hover {
  background: var(--btn-outline-hover-bg) !important;
  border-color: var(--warm-border-strong) !important;
}

/* --- 18. BADGES --- */
.badge { border-radius: var(--radius-sm) !important; }

/* ============================================================
   19. TABS - ALL TABS ACROSS THE APP
   ============================================================ */

/* --- Chart tabs wrapper - transparent panel --- */
.chart-tabs-wrapper, #chartTabsWrapper {
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
}

/* --- CRITICAL: Override nav-fill so tabs use AUTO width --- */
/* Force 7 tabs per row: override nav-fill auto sizing */
#patientChartTabs.nav-fill .nav-item,
#patientChartTabs .nav-item {
  flex: 0 0 calc(100% / 7) !important;
  max-width: calc(100% / 7) !important;
  text-align: center !important;
  box-sizing: border-box !important;
}
#patientChartTabs.nav-fill > .nav-link {
  text-align: center !important;
}

/* --- Chart tabs container --- */
.chart-tabs-wrapper .nav-tabs,
#chartTabsWrapper .nav-tabs,
#patientChartTabs {
  background: transparent !important;
  border-bottom: 2px solid var(--warm-border-strong) !important;
  flex-wrap: wrap !important;
  gap: 0px !important;
  display: flex !important;
}

/* --- Chart tabs - COMPACT sizing for 2 rows --- */
.chart-tabs-wrapper .nav-link,
#chartTabsWrapper .nav-link,
#patientChartTabs .nav-link {
  padding: 6px 8px !important;
  margin: 0 1px !important;
  font-size: 0.80rem !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  width: 100% !important;
  box-sizing: border-box !important;
}

/* --- ALL TABS - INACTIVE STATE --- */
.chart-tabs-wrapper .nav-link,
#chartTabsWrapper .nav-link,
#patientChartTabs .nav-link,
.main-content .nav-link:not(.sidebar .nav-link),
.content-area .nav-link:not(.sidebar .nav-link),
.page-content .nav-link:not(.sidebar .nav-link),
.nav-tabs:not(.sidebar *) .nav-link,
.nav-pills:not(.sidebar *) .nav-link,
[role="tablist"]:not(.sidebar *) .nav-link {
  color: var(--tab-inactive-text) !important;
  background: var(--tab-inactive-bg) !important;
  border: 1.5px solid var(--tab-inactive-border) !important;
  border-bottom-color: transparent !important;
  border-radius: var(--radius-sm) var(--radius-sm) 0 0 !important;
  font-weight: 500 !important;
  transition: all 0.2s ease !important;
}

/* --- ALL TABS - HOVER STATE --- */
.chart-tabs-wrapper .nav-link:hover,
#chartTabsWrapper .nav-link:hover,
#patientChartTabs .nav-link:hover,
.main-content .nav-link:not(.sidebar .nav-link):hover,
.content-area .nav-link:not(.sidebar .nav-link):hover,
.page-content .nav-link:not(.sidebar .nav-link):hover,
.nav-tabs:not(.sidebar *) .nav-link:hover,
.nav-pills:not(.sidebar *) .nav-link:hover,
[role="tablist"]:not(.sidebar *) .nav-link:hover {
  color: var(--tab-hover-text) !important;
  background: var(--tab-hover-bg) !important;
  border-color: rgba(100, 150, 210, 0.40) !important;
  border-bottom-color: transparent !important;
}

/* --- ALL TABS - ACTIVE STATE --- */
.chart-tabs-wrapper .nav-link.active,
#chartTabsWrapper .nav-link.active,
#patientChartTabs .nav-link.active,
.main-content .nav-link.active:not(.sidebar .nav-link),
.content-area .nav-link.active:not(.sidebar .nav-link),
.page-content .nav-link.active:not(.sidebar .nav-link),
.nav-tabs:not(.sidebar *) .nav-link.active,
.nav-pills:not(.sidebar *) .nav-link.active,
[role="tablist"]:not(.sidebar *) .nav-link.active {
  color: var(--tab-active-text) !important;
  background: var(--tab-active-bg) !important;
  border: 2px solid var(--tab-active-border) !important;
  border-bottom-color: var(--tab-active-bg) !important;
  border-radius: var(--radius-sm) var(--radius-sm) 0 0 !important;
  font-weight: 700 !important;
  box-shadow: 0 -2px 8px rgba(59, 130, 246, 0.12) !important;
}

/* Tab icons inherit color */
.nav-tabs .nav-link i,
[role="tablist"] .nav-link i {
  color: inherit !important;
  background: transparent !important;
}

/* Nav pills active - rounded fully */
.nav-pills:not(.sidebar *) .nav-link.active {
  border-radius: var(--radius-sm) !important;
  border-color: var(--tab-active-border) !important;
}

.nav-tabs { border-bottom-color: var(--warm-border-strong) !important; }

/* Summary section nav tabs */
.nav.nav-tabs.nav-fill:not(#patientChartTabs) {
  background: transparent !important;
  border-bottom: 2px solid var(--warm-border-strong) !important;
  flex-wrap: wrap !important;
}
.nav.nav-tabs.mb-3 { border-bottom: 1px solid var(--warm-border-strong) !important; }

/* --- 20. PATIENT TABLE ROWS --- */
#patientTableBody > div { border-radius: var(--radius-sm) !important; }

/* --- 21. SCROLLBAR --- */
::-webkit-scrollbar { width: 6px; height: 6px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: rgba(100, 140, 190, 0.25); border-radius: 10px; }
::-webkit-scrollbar-thumb:hover { background: rgba(80, 120, 170, 0.40); }

/* --- 22. TEXT CONTRAST --- */
h1, h2, h3, h4, h5, h6 { color: var(--text-primary) !important; font-weight: 600 !important; }
p, span, label, div, td, th, li, a { color: inherit; }
.text-muted { color: var(--text-muted) !important; }
.text-secondary { color: var(--text-secondary) !important; }
::placeholder { color: #8899AA !important; opacity: 1 !important; }

/* --- 23. TEXT-WHITE: Only force white on COLORED backgrounds --- */
.bg-primary .text-white,
.bg-danger .text-white,
.bg-success .text-white,
.bg-info .text-white,
.bg-gradient-primary .text-white,
[class*="bg-gradient-primary"] .text-white,
.modal-header.bg-primary .text-white,
.modal-header.bg-danger .text-white,
.modal-header.bg-success .text-white,
.modal-header.bg-info .text-white,
.bg-primary.text-white,
.bg-danger.text-white,
.bg-success.text-white,
.bg-info.text-white,
.bg-gradient-primary.text-white,
[class*="bg-gradient-primary"].text-white,
.modal-header.bg-primary,
.modal-header.bg-danger,
.modal-header.bg-success,
.modal-header.bg-info {
  color: #ffffff !important;
}

/* Generic text-white WITHOUT a colored bg parent - make it dark for visibility */
.card-header.text-white:not(.bg-primary):not(.bg-danger):not(.bg-success):not(.bg-info):not(.bg-warning):not([class*="bg-gradient"]) {
  color: var(--text-primary) !important;
}

/* --- 24. LOGIN PAGE --- */
.login-container { background: transparent !important; }
.login-card {
  background: var(--glass-white-strong) !important;
  -webkit-backdrop-filter: var(--glass-blur) !important;
  backdrop-filter: var(--glass-blur) !important;
  border-radius: var(--radius-xl) !important;
  border: 1px solid var(--glass-border) !important;
  box-shadow: 0 8px 40px rgba(30, 60, 110, 0.12) !important;
}
.login-header h1 { color: var(--text-primary) !important; }

/* --- 25. UPLOAD AREA --- */
.upload-area, .drop-zone {
  border-radius: var(--radius-lg) !important;
  background: var(--glass-white) !important;
  border: 2px dashed var(--warm-border-strong) !important;
  color: var(--text-primary) !important;
}
.upload-area *, .drop-zone * { color: var(--text-primary) !important; }
.upload-area p, .drop-zone p, .upload-area span, .drop-zone span,
.upload-area label, .drop-zone label { color: var(--text-secondary) !important; }

/* --- 26. CHAT / AI ASSISTANT --- */
.chat-container {
  background: var(--glass-white-strong) !important;
  -webkit-backdrop-filter: var(--glass-blur) !important;
  backdrop-filter: var(--glass-blur) !important;
  border-radius: var(--radius-lg) !important;
}
.chat-message, .assistant-message, .user-message { border-radius: var(--radius-md) !important; }

/* --- 27. TOOLTIPS & POPOVERS --- */
.tooltip-inner { border-radius: var(--radius-sm) !important; }
.popover { border-radius: var(--radius-md) !important; }

/* --- 28. PROGRESS --- */
.progress, .progress-bar { border-radius: var(--radius-sm) !important; }

/* --- 29. LIST GROUP --- */
.list-group-item:first-child { border-radius: var(--radius-md) var(--radius-md) 0 0 !important; }
.list-group-item:last-child { border-radius: 0 0 var(--radius-md) var(--radius-md) !important; }

/* ============================================================
   INLINE STYLE OVERRIDES
   ============================================================ */

/* White backgrounds → frosted glass */
div[style*="background: #ffffff"],
div[style*="background:#ffffff"],
div[style*="background: #fff"],
div[style*="background: white"],
div[style*="background-color: #ffffff"],
div[style*="background-color: white"] {
  background: var(--glass-white-strong) !important;
  -webkit-backdrop-filter: var(--glass-blur) !important;
  backdrop-filter: var(--glass-blur) !important;
  border-color: var(--warm-border) !important;
  border-radius: var(--radius-md) !important;
}

/* Filter row - outer wrapper only, NOT the inner search box */
div[style*="border: 1px solid #d4e3ed"] {
  background: rgba(220, 232, 248, 0.70) !important;
  -webkit-backdrop-filter: var(--glass-blur) !important;
  backdrop-filter: var(--glass-blur) !important;
  border-color: var(--warm-border) !important;
  border-radius: var(--radius-md) !important;
}
/* Inner search box: keep white background, subtle border, no extra radius */
#searchInput_patients {
  background: transparent !important;
  border: none !important;
  border-radius: 0 !important;
}
div[style*="border: 1px solid #c8dce4"]:has(> .fa-search),
div[style*="border: 1px solid #c8dce4"]:has(> i.fas) {
  background: #ffffff !important;
  border: 1px solid var(--warm-border) !important;
  border-radius: 4px !important;
  backdrop-filter: none !important;
}
/* Selects with #c8dce4 border (sort, location, status) keep cool tint */
select[style*="border: 1px solid #c8dce4"] {
  background: #ffffff !important;
  border: 1px solid var(--warm-border) !important;
  border-radius: 4px !important;
}

/* Table container wrapper */
div[style*="border: 1px solid #dee2e6"] {
  background: var(--glass-white-strong) !important;
  -webkit-backdrop-filter: var(--glass-blur) !important;
  backdrop-filter: var(--glass-blur) !important;
  border: 1px solid var(--warm-border) !important;
  border-radius: var(--radius-lg) !important;
}

/* Table header row */
div[style*="background: #f8f9fa"],
div[style*="background:#f8f9fa"],
div[style*="background: #f8fafc"],
div[style*="background-color: #f8f9fa"],
div[style*="background-color: #f8fafc"] {
  background: rgba(220, 232, 248, 0.40) !important;
  border-color: var(--warm-border) !important;
}

/* Patient data rows */
div[style*="border-bottom: 1px solid #e9ecef"],
div[style*="border-bottom: 1px solid #eee"],
div[style*="border-bottom: 1px solid #dee2e6"] {
  border-color: rgba(120, 155, 200, 0.20) !important;
}

/* IN PROGRESS card */
div[style*="background: #fee2e2"] { border-radius: var(--radius-md) !important; }

/* Header gradient overrides */
div[style*="background: linear-gradient(135deg, #667eea"],
div[style*="background: linear-gradient(135deg, #f5f7fa"],
div[style*="background: linear-gradient(180deg, #ffffff"],
div[style*="background-color: #f8f9fa"] {
  background: transparent !important;
}

/* Light gray backgrounds → cool blue tint */
div[style*="background: #f5f5f5"],
div[style*="background: #f0f0f0"],
div[style*="background: #eee"],
div[style*="background: #e9ecef"],
div[style*="background: #fafbfc"],
div[style*="background: #fafafa"],
div[style*="background: #f9fafb"],
div[style*="background-color: #f5f5f5"],
div[style*="background-color: #f0f0f0"],
div[style*="background-color: #fafbfc"] {
  background: rgba(220, 232, 248, 0.30) !important;
}

/* ============================================================
   GLOBAL ROUNDED CORNERS
   ============================================================ */
div[style*="border-radius: 4px"],
div[style*="border-radius: 2px"],
div[style*="border-radius: 0px"] { border-radius: var(--radius-sm) !important; }
div[style*="border-radius: 6px"],
div[style*="border-radius: 8px"] { border-radius: var(--radius-md) !important; }

button:not(.sidebar-toggle):not(.chart-tabs-toggle),
.alert, .toast, .popover, .tooltip-inner, .dropdown-menu, .dropdown-item,
input:not(.home-search-bar input):not(#homeSearchInput), select, textarea, .form-control, .form-select {
  border-radius: var(--radius-sm) !important;
}
/* Home search bar gets its own round style */
#homeSearchInput {
  border-radius: 60px !important;
}
.home-search-wrapper.dropdown-open #homeSearchInput {
  border-radius: 24px 24px 0 0 !important;
}

/* ============================================================
   PATIENT CHART PAGE
   ============================================================ */
button[style*="border-bottom: 2px solid"],
button[style*="border-bottom: 3px solid"] {
  border-radius: var(--radius-sm) var(--radius-sm) 0 0 !important;
}
button[style*="linear-gradient"][style*="padding: 8px"] {
  border-radius: var(--radius-sm) !important;
}

/* ============================================================
   ADDITIONAL ELEMENT OVERRIDES
   ============================================================ */
.compliance-header { border-radius: var(--radius-lg) !important; }
.analytics-header, .analytics-header-compact {
  background: var(--glass-white-strong) !important;
  border: 1px solid var(--glass-border) !important;
  border-radius: var(--radius-lg) !important;
}
.dashboard-card {
  background: var(--glass-white-strong) !important;
  border: 1px solid var(--glass-border) !important;
  border-radius: var(--radius-lg) !important;
}
.enhanced-modal .card { border-radius: var(--radius-lg) !important; }
.enhanced-modal .card-header { border-radius: var(--radius-lg) var(--radius-lg) 0 0 !important; }
#patientChartContent .card { border-radius: var(--radius-lg) !important; }

/* ============================================================
   SEARCH FILTER RIBBON
   ============================================================ */
/* Search input: make it visually fill the white search box with no inner border/radius */
#searchInput_patients {
  width: 100% !important;
  min-width: 0 !important;
  flex: 1 1 0% !important;
  box-sizing: border-box !important;
  background: transparent !important;
  border: none !important;
  border-radius: 0 !important;
  outline: none !important;
  padding: 4px 0 !important;
}

/* ============================================================
   Z-INDEX FIXES
   ============================================================ */
.app-container { position: relative; z-index: 1; }
#weekStripWrapper { z-index: 100 !important; }
#weekStripDropdown { z-index: 1000 !important; }
div[style*="border: 1px solid #d4e3ed"] { position: relative !important; z-index: 10 !important; }
.dropdown-menu { z-index: 1050 !important; }
.flatpickr-calendar, .datepicker, [class*="picker-dropdown"], [class*="calendar-popup"] { z-index: 1050 !important; }
.modal { z-index: 1060 !important; }
.modal-backdrop { z-index: 1055 !important; }
.tooltip { z-index: 1080 !important; }

/* ============================================================
   SIDEBAR DRAG-RESIZE HANDLE
   ============================================================ */
.sidebar-resize-handle {
  position: absolute !important;
  top: 0 !important;
  right: -4px !important;
  width: 8px !important;
  height: 100% !important;
  cursor: col-resize !important;
  z-index: 1000 !important;
  background: transparent !important;
  transition: background 0.2s ease !important;
}
.sidebar-resize-handle:hover, .sidebar-resize-handle.active {
  background: rgba(80, 130, 190, 0.25) !important;
}
.sidebar.resizing { transition: none !important; }
.sidebar.resizing + .main-content { transition: none !important; }

/* ============================================================
   ENSURE TEXT VISIBILITY EVERYWHERE
   ============================================================ */
label { color: var(--text-primary) !important; }
small, .small, .help-text, .form-text { color: var(--text-muted) !important; }
.bg-gradient-primary small, .bg-primary small, .text-white small,
.card-header.bg-gradient-primary small { color: rgba(255, 255, 255, 0.85) !important; }

/* Upload area specific text fix */
div[style*="border: 2px dashed"] { color: var(--text-primary) !important; }
div[style*="border: 2px dashed"] * { color: inherit !important; }
div[style*="border: 2px dashed"] p,
div[style*="border: 2px dashed"] span,
div[style*="border: 2px dashed"] label,
div[style*="border: 2px dashed"] div { color: var(--text-secondary) !important; }

/* ============================================================
   ALERT BOXES
   ============================================================ */
.alert { border-radius: var(--radius-sm) !important; }

#patientChartContent button[style*="padding: 8px"],
#patientChartContent button[style*="padding: 10px"] {
  border-radius: var(--radius-sm) !important;
}

/* ============================================================
   COOL BLUE BORDER OVERRIDES
   ============================================================ */
div[style*="border: 1px solid #ccc"],
div[style*="border: 1px solid #ddd"],
div[style*="border: 1px solid #e0e0e0"],
div[style*="border: 1px solid #e5e5e5"],
div[style*="border-color: #dee2e6"],
div[style*="border-color: #e9ecef"] {
  border-color: var(--warm-border) !important;
}
hr { border-color: var(--warm-border) !important; opacity: 0.5; }
.border { border-color: var(--warm-border) !important; }
.border-top, .border-bottom, .border-start, .border-end { border-color: var(--warm-border) !important; }

/* ============================================================
   DROPDOWN MENUS
   ============================================================ */
.dropdown-menu {
  background: rgba(245, 248, 254, 0.98) !important;
  border: 1px solid var(--warm-border-strong) !important;
  box-shadow: 0 8px 30px rgba(30, 60, 110, 0.12) !important;
}
.dropdown-item { color: var(--text-primary) !important; font-weight: 500 !important; }
.dropdown-item:hover, .dropdown-item:focus {
  background: rgba(220, 232, 248, 0.55) !important;
  color: var(--text-primary) !important;
}
.dropdown-item.active, .dropdown-item:active {
  background: var(--tab-active-border) !important;
  color: #ffffff !important;
}

/* ============================================================
   SELECT DROPDOWNS
   ============================================================ */
select.form-select, select.form-control, select {
  color: var(--text-primary) !important;
  font-weight: 500 !important;
  background-color: rgba(245, 248, 254, 0.90) !important;
  border: 1.5px solid var(--warm-border-strong) !important;
}
select option { color: var(--text-primary) !important; background: #ffffff !important; }