/* ============================================================
   LIGHT THEME — Amikacin DoseCare Pro v2.0
   Overrides dark-theme defaults when [data-theme="light"]
   ============================================================ */

/* --- Base Body --- */
html[data-theme="light"] body {
  background-color: #f0f2f5 !important;
  color: #2d3748 !important;
}

html[data-theme="light"] .content-wrapper {
  background: #f0f2f5 !important;
}

/* --- Sidebar --- */
html[data-theme="light"] .main-sidebar,
html[data-theme="light"] .main-sidebar .sidebar {
  background: linear-gradient(180deg, #ffffff 0%, #f7f8fc 50%, #eef1f6 100%) !important;
  border-right: 1px solid rgba(0, 0, 0, 0.08) !important;
  box-shadow: 2px 0 12px rgba(0, 0, 0, 0.04) !important;
}

/* Brand / Logo area at top of sidebar */
html[data-theme="light"] .main-sidebar .brand-link,
html[data-theme="light"] .main-sidebar .brand-link .brand-text,
html[data-theme="light"] .brand-link {
  background: #ffffff !important;
  color: #1a202c !important;
  border-bottom: 1px solid rgba(0, 0, 0, 0.06) !important;
}

html[data-theme="light"] .brand-link .brand-image,
html[data-theme="light"] .main-sidebar .brand-link img {
  border: none !important;
  box-shadow: none !important;
}

/* Sidebar elevation override */
html[data-theme="light"] .main-sidebar.elevation-4,
html[data-theme="light"] .main-sidebar[class*="elevation-"] {
  box-shadow: 2px 0 12px rgba(0, 0, 0, 0.04) !important;
}

/* Sidebar user panel */
html[data-theme="light"] .main-sidebar .user-panel {
  border-bottom: 1px solid rgba(0, 0, 0, 0.06) !important;
}

html[data-theme="light"] .sidebar-menu > li > a,
html[data-theme="light"] .nav-sidebar > .nav-item > .nav-link {
  color: #4a5568 !important;
}

html[data-theme="light"] .sidebar-menu > li > a:hover,
html[data-theme="light"] .nav-sidebar > .nav-item > .nav-link:hover {
  background: rgba(0, 150, 167, 0.06) !important;
  color: #0097a7 !important;
}

html[data-theme="light"] .sidebar-menu > li.active > a,
html[data-theme="light"] .nav-sidebar > .nav-item > .nav-link.active {
  background: linear-gradient(135deg, rgba(0, 150, 167, 0.1), rgba(0, 188, 212, 0.15)) !important;
  color: #00838f !important;
  box-shadow: 0 2px 10px rgba(0, 150, 167, 0.08) !important;
  border-left: 3px solid #0097a7 !important;
}

html[data-theme="light"] .sidebar-menu > li > a > .fa,
html[data-theme="light"] .sidebar-menu > li > a > .fas,
html[data-theme="light"] .sidebar-menu > li > a > .far,
html[data-theme="light"] .sidebar-menu > li > a > .fab,
html[data-theme="light"] .sidebar-menu > li > a > .glyphicon,
html[data-theme="light"] .sidebar-menu > li > a > i,
html[data-theme="light"] .nav-sidebar .nav-link > i,
html[data-theme="light"] .nav-sidebar .nav-link > .nav-icon {
  color: #0097a7 !important;
}

html[data-theme="light"] .nav-sidebar .nav-header {
  color: #a0aec0 !important;
}

html[data-theme="light"] .nav-treeview > .nav-item > .nav-link {
  color: #718096 !important;
}

html[data-theme="light"] .nav-treeview > .nav-item > .nav-link:hover {
  color: #0097a7 !important;
}

/* --- Navbar --- */
html[data-theme="light"] .main-header,
html[data-theme="light"] .main-header .navbar {
  background: linear-gradient(90deg, #ffffff, #f7f8fc, #eef1f6) !important;
  border-bottom: 1px solid rgba(0, 0, 0, 0.06) !important;
  box-shadow: 0 1px 8px rgba(0, 0, 0, 0.05) !important;
}

html[data-theme="light"] .brand-text {
  color: #1a202c !important;
}

html[data-theme="light"] .navbar .nav-link {
  color: #4a5568 !important;
}

/* Version text */
html[data-theme="light"] .nav-link[style*="color: #8892b0"] {
  color: #a0aec0 !important;
}

/* --- Cards --- */
html[data-theme="light"] .card {
  background: #ffffff !important;
  border: 1px solid rgba(0, 0, 0, 0.06) !important;
  box-shadow: 0 1px 8px rgba(0, 0, 0, 0.04), 0 1px 3px rgba(0, 0, 0, 0.02) !important;
}

html[data-theme="light"] .card:hover {
  border-color: rgba(0, 150, 167, 0.15) !important;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.06) !important;
}

html[data-theme="light"] .card-header {
  background: #f7f8fc !important;
  border-bottom: 1px solid rgba(0, 0, 0, 0.06) !important;
  color: #2d3748 !important;
}

html[data-theme="light"] .card-header .card-title {
  color: #1a202c !important;
}

html[data-theme="light"] .card-body {
  color: #4a5568 !important;
}

/* Card header transparent override */
html[data-theme="light"] .card .card-header,
html[data-theme="light"] .card-primary > .card-header,
html[data-theme="light"] .card-info > .card-header {
  background: #f7f8fc !important;
}

/* Card icon in title */
html[data-theme="light"] .card-title i,
html[data-theme="light"] .card-header i {
  color: #0097a7 !important;
}

/* --- Dashboard Stat Cards --- */
html[data-theme="light"] .stat-primary {
  background: linear-gradient(145deg, rgba(0, 150, 167, 0.05), rgba(0, 188, 212, 0.1)) !important;
}

html[data-theme="light"] .stat-success {
  background: linear-gradient(145deg, rgba(39, 174, 96, 0.05), rgba(83, 215, 105, 0.1)) !important;
}

html[data-theme="light"] .stat-danger {
  background: linear-gradient(145deg, rgba(233, 69, 96, 0.05), rgba(255, 107, 129, 0.1)) !important;
}

html[data-theme="light"] .dashboard-stat-card {
  border: 1px solid rgba(0, 0, 0, 0.06) !important;
  box-shadow: 0 1px 6px rgba(0, 0, 0, 0.04) !important;
}

html[data-theme="light"] .dashboard-stat-card:hover {
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.08) !important;
}

html[data-theme="light"] .stat-number {
  color: #1a202c !important;
}

html[data-theme="light"] .stat-label {
  color: #718096 !important;
}

html[data-theme="light"] .stat-icon-primary {
  background: linear-gradient(135deg, #0097a7, #00bcd4) !important;
  color: #fff !important;
  box-shadow: 0 4px 12px rgba(0, 150, 167, 0.25) !important;
}

html[data-theme="light"] .stat-icon-success {
  background: linear-gradient(135deg, #27ae60, #2ecc71) !important;
  color: #fff !important;
  box-shadow: 0 4px 12px rgba(39, 174, 96, 0.25) !important;
}

html[data-theme="light"] .stat-icon-danger {
  background: linear-gradient(135deg, #e94560, #ff6b81) !important;
  color: #fff !important;
  box-shadow: 0 4px 12px rgba(233, 69, 96, 0.25) !important;
}

/* --- Quick Link Buttons --- */
html[data-theme="light"] .quick-link-btn {
  background: rgba(0, 150, 167, 0.04) !important;
  border: 1px solid rgba(0, 0, 0, 0.08) !important;
  color: #4a5568 !important;
}

html[data-theme="light"] .quick-link-btn:hover {
  background: rgba(0, 150, 167, 0.08) !important;
  border-color: rgba(0, 150, 167, 0.2) !important;
  color: #0097a7 !important;
}

html[data-theme="light"] .quick-link-btn i {
  color: #0097a7 !important;
}

/* --- Info Boxes / Value Boxes --- */
html[data-theme="light"] .info-box,
html[data-theme="light"] .small-box {
  background: #ffffff !important;
  border: 1px solid rgba(0, 0, 0, 0.06) !important;
}

html[data-theme="light"] .info-box:hover,
html[data-theme="light"] .small-box:hover {
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.06) !important;
}

html[data-theme="light"] .info-box .info-box-text,
html[data-theme="light"] .small-box .inner p {
  color: #718096 !important;
}

html[data-theme="light"] .info-box .info-box-number,
html[data-theme="light"] .small-box .inner h3 {
  color: #1a202c !important;
}

/* --- DataTables --- */
html[data-theme="light"] .dataTables_wrapper {
  color: #4a5568 !important;
}

html[data-theme="light"] table.dataTable thead th {
  background: #f7f8fc !important;
  color: #2d3748 !important;
  border-bottom: 2px solid rgba(0, 0, 0, 0.08) !important;
}

html[data-theme="light"] table.dataTable tbody tr {
  background: transparent !important;
  color: #4a5568 !important;
  border-bottom: 1px solid rgba(0, 0, 0, 0.04) !important;
}

html[data-theme="light"] table.dataTable tbody tr:hover {
  background: rgba(0, 150, 167, 0.04) !important;
  color: #1a202c !important;
}

html[data-theme="light"] table.dataTable tbody tr.selected {
  background: rgba(0, 150, 167, 0.08) !important;
}

html[data-theme="light"] .dataTables_filter input {
  background: #ffffff !important;
  border: 1px solid rgba(0, 0, 0, 0.12) !important;
  color: #2d3748 !important;
}

html[data-theme="light"] .dataTables_filter input:focus {
  border-color: #0097a7 !important;
  box-shadow: 0 0 0 3px rgba(0, 150, 167, 0.1) !important;
}

html[data-theme="light"] .dataTables_info,
html[data-theme="light"] .dataTables_paginate {
  color: #718096 !important;
}

html[data-theme="light"] .dataTables_length select {
  background: #ffffff !important;
  border: 1px solid rgba(0, 0, 0, 0.12) !important;
  color: #2d3748 !important;
}

html[data-theme="light"] .page-item .page-link {
  background: #ffffff !important;
  border-color: rgba(0, 0, 0, 0.1) !important;
  color: #4a5568 !important;
}

html[data-theme="light"] .page-item .page-link:hover {
  background: rgba(0, 150, 167, 0.08) !important;
  color: #0097a7 !important;
}

html[data-theme="light"] .page-item.active .page-link {
  background: linear-gradient(135deg, #0097a7, #00bcd4) !important;
  color: #fff !important;
  border-color: transparent !important;
}

/* --- Form Controls --- */
html[data-theme="light"] .form-control,
html[data-theme="light"] .selectize-input,
html[data-theme="light"] .selectize-dropdown {
  background: #ffffff !important;
  border: 1px solid rgba(0, 0, 0, 0.12) !important;
  color: #2d3748 !important;
}

html[data-theme="light"] .form-control:focus {
  border-color: #0097a7 !important;
  box-shadow: 0 0 0 3px rgba(0, 150, 167, 0.1) !important;
  background: #ffffff !important;
}

html[data-theme="light"] .selectize-input.focus {
  border-color: #0097a7 !important;
  box-shadow: 0 0 0 3px rgba(0, 150, 167, 0.1) !important;
  background: #ffffff !important;
}

html[data-theme="light"] .selectize-dropdown-content .option {
  color: #2d3748 !important;
}

html[data-theme="light"] .selectize-dropdown-content .option:hover,
html[data-theme="light"] .selectize-dropdown-content .active {
  background: rgba(0, 150, 167, 0.08) !important;
  color: #0097a7 !important;
}

html[data-theme="light"] label {
  color: #4a5568 !important;
}

/* --- DateTime Inputs --- */
html[data-theme="light"] .dt-field-box {
  background: #ffffff !important;
  border-color: rgba(0, 0, 0, 0.12) !important;
}

html[data-theme="light"] .dt-field-box:focus-within {
  border-color: #0097a7 !important;
  box-shadow: 0 0 0 3px rgba(0, 150, 167, 0.1) !important;
  background: #ffffff !important;
}

html[data-theme="light"] .dt-field-icon {
  color: #a0aec0 !important;
}

html[data-theme="light"] .dt-field-box:focus-within .dt-field-icon {
  color: #0097a7 !important;
  background: rgba(0, 150, 167, 0.06) !important;
}

html[data-theme="light"] .form-control.dt-date-input,
html[data-theme="light"] .form-control.dt-time-input,
html[data-theme="light"] .dt-date-input,
html[data-theme="light"] .dt-time-input {
  color: #1a202c !important;
  background: transparent !important;
}

html[data-theme="light"] .dt-hint {
  color: #a0aec0 !important;
}

html[data-theme="light"] .dt-date-input::placeholder,
html[data-theme="light"] .dt-time-input::placeholder {
  color: #cbd5e0 !important;
}

/* --- Buttons --- */
html[data-theme="light"] .btn-primary {
  background: linear-gradient(135deg, #0097a7, #00bcd4) !important;
  box-shadow: 0 2px 8px rgba(0, 150, 167, 0.2) !important;
}

html[data-theme="light"] .btn-primary:hover {
  background: linear-gradient(135deg, #00838f, #0097a7) !important;
  box-shadow: 0 4px 16px rgba(0, 150, 167, 0.3) !important;
}

html[data-theme="light"] .btn-secondary {
  background: #edf2f7 !important;
  border: 1px solid rgba(0, 0, 0, 0.08) !important;
  color: #4a5568 !important;
}

html[data-theme="light"] .btn-secondary:hover {
  background: #e2e8f0 !important;
  color: #2d3748 !important;
}

html[data-theme="light"] .btn-outline-primary {
  border-color: rgba(0, 150, 167, 0.4) !important;
  color: #0097a7 !important;
}

html[data-theme="light"] .btn-outline-primary:hover {
  background: rgba(0, 150, 167, 0.06) !important;
  color: #00838f !important;
}

/* Focus visible */
html[data-theme="light"] .btn:focus-visible {
  box-shadow: 0 0 0 3px rgba(0, 150, 167, 0.3) !important;
}

/* --- Modals --- */
html[data-theme="light"] .modal {
  background-color: rgba(0, 0, 0, 0.4) !important;
}

html[data-theme="light"] .modal-content {
  background: #ffffff !important;
  border: 1px solid rgba(0, 0, 0, 0.1) !important;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.15) !important;
  color: #2d3748 !important;
}

html[data-theme="light"] .modal-header {
  background: #f7f8fc !important;
  border-bottom: 1px solid rgba(0, 0, 0, 0.06) !important;
}

html[data-theme="light"] .modal-header .modal-title {
  color: #1a202c !important;
}

html[data-theme="light"] .modal-header .close,
html[data-theme="light"] .modal-header .btn-close {
  color: #718096 !important;
}

html[data-theme="light"] .modal-header .close:hover,
html[data-theme="light"] .modal-header .btn-close:hover {
  color: #e94560 !important;
}

html[data-theme="light"] .modal-body {
  color: #4a5568 !important;
}

html[data-theme="light"] .modal-body .form-group label,
html[data-theme="light"] .modal-body .control-label {
  color: #4a5568 !important;
}

html[data-theme="light"] .modal-body .form-control {
  background: #ffffff !important;
  border: 1.5px solid rgba(0, 0, 0, 0.1) !important;
  color: #1a202c !important;
}

html[data-theme="light"] .modal-body .form-control:focus {
  border-color: #0097a7 !important;
  box-shadow: 0 0 0 3px rgba(0, 150, 167, 0.1) !important;
}

html[data-theme="light"] .modal-body .selectize-input {
  background: #ffffff !important;
  border: 1.5px solid rgba(0, 0, 0, 0.1) !important;
  color: #1a202c !important;
}

html[data-theme="light"] .modal-body select.form-control {
  background: #ffffff !important;
  border: 1.5px solid rgba(0, 0, 0, 0.1) !important;
  color: #1a202c !important;
}

html[data-theme="light"] .modal-footer {
  background: #f7f8fc !important;
  border-top: 1px solid rgba(0, 0, 0, 0.06) !important;
}

/* --- Tabs --- */
html[data-theme="light"] .nav-tabs {
  border-bottom: 2px solid rgba(0, 0, 0, 0.06) !important;
}

html[data-theme="light"] .nav-tabs .nav-link,
html[data-theme="light"] .nav-tabs .nav-item .nav-link,
html[data-theme="light"] .card-primary > .card-header .nav-tabs .nav-link,
html[data-theme="light"] .card-info > .card-header .nav-tabs .nav-link,
html[data-theme="light"] .card-primary:not(.card-outline) > .card-header .nav-tabs .nav-link,
html[data-theme="light"] .card-info:not(.card-outline) > .card-header .nav-tabs .nav-link {
  color: #718096 !important;
  border-bottom: 3px solid transparent !important;
}

html[data-theme="light"] .nav-tabs .nav-link:hover,
html[data-theme="light"] .card-primary > .card-header .nav-tabs .nav-link:hover,
html[data-theme="light"] .card-info > .card-header .nav-tabs .nav-link:hover {
  color: #1a202c !important;
  background: rgba(0, 150, 167, 0.04) !important;
  border-bottom: 3px solid rgba(0, 150, 167, 0.3) !important;
}

html[data-theme="light"] .nav-tabs .nav-link.active,
html[data-theme="light"] .nav-tabs .nav-item .nav-link.active,
html[data-theme="light"] .card-primary > .card-header .nav-tabs .nav-link.active,
html[data-theme="light"] .card-info > .card-header .nav-tabs .nav-link.active,
html[data-theme="light"] .card-primary:not(.card-outline) > .card-header .nav-tabs .nav-link.active,
html[data-theme="light"] .card-info:not(.card-outline) > .card-header .nav-tabs .nav-link.active,
html[data-theme="light"] .card-primary:not(.card-outline) > .card-header .nav-tabs .nav-link.active:hover {
  color: #0097a7 !important;
  background: rgba(0, 150, 167, 0.04) !important;
  border-bottom: 3px solid #0097a7 !important;
  text-shadow: none !important;
}

/* Nav Pills */
html[data-theme="light"] .nav-pills .nav-link {
  color: #4a5568 !important;
  background: #edf2f7 !important;
}

html[data-theme="light"] .nav-pills .nav-link:hover {
  background: rgba(0, 150, 167, 0.08) !important;
  color: #0097a7 !important;
}

html[data-theme="light"] .nav-pills .nav-link.active {
  background: linear-gradient(135deg, #0097a7, #00bcd4) !important;
  color: #ffffff !important;
}

/* --- Notifications --- */
html[data-theme="light"] .shiny-notification {
  background: #ffffff !important;
  border: 1px solid rgba(0, 0, 0, 0.08) !important;
  color: #2d3748 !important;
  box-shadow: 0 8px 30px rgba(0, 0, 0, 0.1) !important;
}

/* --- Patient Info --- */
html[data-theme="light"] .info-item {
  border-bottom: 1px solid rgba(0, 0, 0, 0.04) !important;
}

html[data-theme="light"] .info-item:hover {
  border-bottom-color: rgba(0, 150, 167, 0.15) !important;
}

html[data-theme="light"] .info-label {
  color: #718096 !important;
}

html[data-theme="light"] .info-label i {
  color: #0097a7 !important;
}

html[data-theme="light"] .info-value {
  color: #1a202c !important;
}

/* --- Quick Guide --- */
html[data-theme="light"] .quick-guide h5 {
  color: #1a202c !important;
}

html[data-theme="light"] .quick-guide ol li {
  color: #4a5568 !important;
}

html[data-theme="light"] .quick-guide ol li::before {
  background: linear-gradient(135deg, rgba(0, 150, 167, 0.15), rgba(0, 188, 212, 0.2)) !important;
  color: #0097a7 !important;
}

html[data-theme="light"] .quick-guide ol li:hover {
  color: #1a202c !important;
}

/* --- Scrollbar --- */
html[data-theme="light"] ::-webkit-scrollbar-track {
  background: #f7f8fc !important;
}

html[data-theme="light"] ::-webkit-scrollbar-thumb {
  background: #cbd5e0 !important;
}

html[data-theme="light"] ::-webkit-scrollbar-thumb:hover {
  background: #a0aec0 !important;
}

/* --- Footer --- */
html[data-theme="light"] .main-footer {
  background: #ffffff !important;
  border-top: 1px solid rgba(0, 0, 0, 0.06) !important;
  color: #718096 !important;
}

/* --- HR --- */
html[data-theme="light"] hr {
  border-top: 1px solid rgba(0, 0, 0, 0.08) !important;
}

/* --- Box Tools --- */
html[data-theme="light"] .btn-tool {
  color: #718096 !important;
}

html[data-theme="light"] .btn-tool:hover {
  color: #0097a7 !important;
  background: rgba(0, 150, 167, 0.06) !important;
}

/* --- Empty State --- */
html[data-theme="light"] .empty-state {
  color: #a0aec0 !important;
}

html[data-theme="light"] .empty-state i {
  color: rgba(0, 150, 167, 0.25) !important;
}

/* --- Tooltips --- */
html[data-theme="light"] [data-tooltip]::before {
  background: #1a202c !important;
  color: #ffffff !important;
  border: 1px solid rgba(0, 0, 0, 0.2) !important;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15) !important;
}

/* --- Table Dark (PK Results) --- */
html[data-theme="light"] .table-dark {
  background: transparent !important;
}

html[data-theme="light"] .table-dark thead th {
  background: #f7f8fc !important;
  border-bottom: 2px solid rgba(0, 0, 0, 0.06) !important;
  color: #718096 !important;
}

/* Preserve colored header columns (Individual / Population) */
html[data-theme="light"] .table-dark thead th[style*="#e94560"] {
  color: #d32f2f !important;
}
html[data-theme="light"] .table-dark thead th[style*="#42a5f5"] {
  color: #1565c0 !important;
}

html[data-theme="light"] .table-dark tbody tr {
  border-bottom: 1px solid rgba(0, 0, 0, 0.04) !important;
}

html[data-theme="light"] .table-dark tbody tr:hover {
  background: rgba(0, 150, 167, 0.04) !important;
}

html[data-theme="light"] .table-dark td, 
html[data-theme="light"] .table-dark th {
  border-color: rgba(0, 0, 0, 0.04) !important;
}

/* Default text color for cells WITHOUT inline color */
html[data-theme="light"] .table-dark td:not([style*="color"]),
html[data-theme="light"] .table-dark th:not([style*="color"]) {
  color: #2d3748 !important;
}

/* Cells WITH inline color: preserve their specific colors */
html[data-theme="light"] .table-dark td[style*="#e94560"] {
  color: #d32f2f !important;
}
html[data-theme="light"] .table-dark td[style*="#42a5f5"] {
  color: #1565c0 !important;
}
html[data-theme="light"] .table-dark td[style*="#53d769"] {
  color: #2e7d32 !important;
}
html[data-theme="light"] .table-dark td[style*="#00e5ff"] {
  color: #00838f !important;
}

/* --- PK Engine Specific --- */
html[data-theme="light"] .pk-patient-summary .patient-name {
  border-bottom: 1px solid rgba(0, 0, 0, 0.08) !important;
}

html[data-theme="light"] .pk-patient-summary .patient-name b {
  color: #1a202c !important;
}

html[data-theme="light"] .pk-patient-summary .info-row {
  border-bottom: 1px solid rgba(0, 0, 0, 0.04) !important;
}

html[data-theme="light"] .pk-patient-summary .info-row:hover {
  border-bottom-color: rgba(0, 150, 167, 0.15) !important;
}

html[data-theme="light"] .pk-patient-summary .info-row .label {
  color: #718096 !important;
}

html[data-theme="light"] .pk-patient-summary .info-row .value {
  color: #1a202c !important;
}

/* PK Patient Table */
html[data-theme="light"] .pk-patient-name b {
  color: #1a202c !important;
}

html[data-theme="light"] .pk-patient-name i {
  color: #0097a7 !important;
}

html[data-theme="light"] .pk-patient-name {
  border-bottom: 1px solid rgba(0, 0, 0, 0.08) !important;
}

html[data-theme="light"] .pk-patient-tbl tr:hover {
  background: rgba(0, 150, 167, 0.03) !important;
}

html[data-theme="light"] .pk-patient-tbl td {
  border-bottom: 1px solid rgba(0, 0, 0, 0.04) !important;
}

html[data-theme="light"] .pk-tbl-label {
  color: #718096 !important;
}

html[data-theme="light"] .pk-tbl-value {
  color: #1a202c !important;
}

/* PK Info Table Cells (patient_info_summary) */
html[data-theme="light"] .pk-info-label {
  color: #4a5568 !important;
  font-weight: 600 !important;
  border-bottom-color: rgba(0, 0, 0, 0.06) !important;
}

html[data-theme="light"] .pk-info-value {
  color: #1a202c !important;
  font-weight: 400 !important;
  border-bottom-color: rgba(0, 0, 0, 0.06) !important;
}

html[data-theme="light"] .pk-info-value-colored {
  font-weight: 500 !important;
  border-bottom-color: rgba(0, 0, 0, 0.06) !important;
}

/* --- Navbar Inline-styled Elements --- */
html[data-theme="light"] #navbar_user_info {
  color: #4a5568 !important;
}

html[data-theme="light"] #logout_btn {
  color: #e94560 !important;
}

/* Version text in navbar */
html[data-theme="light"] .nav-item .nav-link {
  color: #4a5568 !important;
}

/* --- General Text Color Catch-all --- */
html[data-theme="light"] h1, 
html[data-theme="light"] h2, 
html[data-theme="light"] h3, 
html[data-theme="light"] h4, 
html[data-theme="light"] h5, 
html[data-theme="light"] h6 {
  color: #1a202c !important;
}

html[data-theme="light"] p {
  color: #4a5568 !important;
}

html[data-theme="light"] strong,
html[data-theme="light"] b {
  color: #1a202c !important;
}

/* Allow <b>/<strong> inside colored table cells to inherit parent color */
html[data-theme="light"] .table-dark td[style*="#e94560"] b,
html[data-theme="light"] .table-dark td[style*="#e94560"] strong {
  color: #d32f2f !important;
}
html[data-theme="light"] .table-dark td[style*="#42a5f5"] b,
html[data-theme="light"] .table-dark td[style*="#42a5f5"] strong {
  color: #1565c0 !important;
}
html[data-theme="light"] .table-dark td[style*="#53d769"] b,
html[data-theme="light"] .table-dark td[style*="#53d769"] strong {
  color: #2e7d32 !important;
}

/* Preserve colored spans inside table cells (e.g., evaluation icons) */
html[data-theme="light"] .table-dark td span[style*="#53d769"] {
  color: #2e7d32 !important;
}
html[data-theme="light"] .table-dark td span[style*="#e94560"] {
  color: #d32f2f !important;
}
html[data-theme="light"] .table-dark td span[style*="#42a5f5"] {
  color: #1565c0 !important;
}
html[data-theme="light"] .table-dark td span[style*="#00e5ff"] {
  color: #00838f !important;
}

/* Override AdminLTE text-dark/text-light */
html[data-theme="light"] .text-dark,
html[data-theme="light"] .text-light {
  color: #2d3748 !important;
}

/* DataTable user-status colors stay as-is (inline spans with colored status) */

/* About page text */
html[data-theme="light"] .card-body h3,
html[data-theme="light"] .card-body h5 {
  color: #1a202c !important;
}

html[data-theme="light"] .card-body p {
  color: #4a5568 !important;
}

html[data-theme="light"] .card-body ul li {
  color: #4a5568 !important;
}

/* PK results: "Thông số" column (1st col) — dark gray label */
html[data-theme="light"] .table.table-dark td:first-child:not([style*="color"]) {
  color: #4a5568 !important;
}

/* PK results: "Đánh giá" column (last col) — dark gray evaluation text */
html[data-theme="light"] .table.table-dark td:last-child:not([style*="color"]) {
  color: #4a5568 !important;
}

/* Override border-top color for PK sim results separator */
html[data-theme="light"] .table-dark tr[style*="border-top"] {
  border-top-color: rgba(0, 0, 0, 0.08) !important;
}

/* Sidebar brand text */
html[data-theme="light"] .brand-link .brand-text {
  color: #1a202c !important;
}

/* --- Inline style overrides (these elements have color set via R style="") --- */
/* Empty state placeholder text in cards */
html[data-theme="light"] .text-center[style*="color: #8892b0"],
html[data-theme="light"] .text-center[style*="color:#8892b0"],
html[data-theme="light"] div[style*="color: #8892b0"],
html[data-theme="light"] span[style*="color: #8892b0"],
html[data-theme="light"] p[style*="color: #8892b0"] {
  color: #718096 !important;
}

html[data-theme="light"] span[style*="color: #a3b1c6"],
html[data-theme="light"] div[style*="color: #a3b1c6"] {
  color: #4a5568 !important;
}

/* Footer text */
html[data-theme="light"] .main-footer span[style*="color: #8892b0"] {
  color: #718096 !important;
}

/* PK Engine: model description text */
html[data-theme="light"] p[style*="color: #8892b0"],
html[data-theme="light"] div[style*="color: #8892b0"] {
  color: #718096 !important;
}

/* Settings page description */
html[data-theme="light"] .settings-panel h5 {
  color: #1a202c !important;
}

html[data-theme="light"] .settings-panel p {
  color: #4a5568 !important;
}

/* PK Formula Panel */
html[data-theme="light"] .pk-formula-panel {
  background: #f7f8fc !important;
  border: 1px solid rgba(0, 0, 0, 0.08) !important;
}

html[data-theme="light"] .pk-formula-panel .pk-formula-header {
  background: #edf2f7 !important;
  border-bottom: 1px solid rgba(0, 0, 0, 0.06) !important;
  color: #718096 !important;
}

html[data-theme="light"] .pk-formula-panel .pk-formula-header i {
  color: #0097a7 !important;
}

html[data-theme="light"] .pk-formula-close-btn {
  color: #718096 !important;
}

html[data-theme="light"] .pk-formula-line {
  color: #2d3748 !important;
  background: rgba(0, 150, 167, 0.04) !important;
  border-left: 3px solid #0097a7 !important;
}

/* #pk_engine-toggle_formula */
html[data-theme="light"] #pk_engine-toggle_formula {
  color: #0097a7 !important;
}

html[data-theme="light"] #pk_engine-toggle_formula:hover {
  color: #00838f !important;
}

/* --- PK Results Dosing Suggestion Row --- */
html[data-theme="light"] .pk-results-table .dose-suggestion-row {
  background-color: rgba(39, 174, 96, 0.08) !important;
  border-top: 2px solid rgba(39, 174, 96, 0.2) !important;
}

/* --- Checkbox custom --- */
html[data-theme="light"] .custom-control-input:checked ~ .custom-control-label::before {
  background-color: #0097a7 !important;
  border-color: #0097a7 !important;
}

html[data-theme="light"] .form-check-input:checked {
  background-color: #0097a7 !important;
  border-color: #0097a7 !important;
}

/* --- Search Input --- */
html[data-theme="light"] .search-input {
  background: #ffffff !important;
  border: 1px solid rgba(0, 0, 0, 0.1) !important;
  color: #2d3748 !important;
}

html[data-theme="light"] .search-input:focus {
  border-color: #0097a7 !important;
  box-shadow: 0 0 0 3px rgba(0, 150, 167, 0.1) !important;
}

html[data-theme="light"] .search-input::placeholder {
  color: #a0aec0 !important;
}

/* --- Waiter overlay --- */
html[data-theme="light"] .waiter-overlay {
  background: rgba(255, 255, 255, 0.85) !important;
}

/* --- Box status borders (bs4Dash specific) --- */
html[data-theme="light"] .card[class*="card-primary"] {
  border-top: 3px solid #0097a7 !important;
}

html[data-theme="light"] .card[class*="card-info"] {
  border-top: 3px solid #00bcd4 !important;
}

/* ============================================================
   SETTINGS PAGE — Theme Selector
   ============================================================ */

.settings-panel {
  max-width: 600px;
}

.theme-selector {
  display: flex;
  gap: 16px;
  flex-wrap: wrap;
  margin-top: 12px;
}

.theme-option {
  flex: 1;
  min-width: 160px;
  padding: 20px;
  border-radius: 14px;
  cursor: pointer;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  position: relative;
  text-align: center;
}

.theme-option:hover {
  transform: translateY(-3px);
}

.theme-option.selected {
  transform: translateY(-2px);
}

.theme-option.selected::after {
  content: '\f058';
  font-family: 'Font Awesome 6 Free';
  font-weight: 900;
  position: absolute;
  top: 10px;
  right: 10px;
  font-size: 18px;
}

/* Light option styling */
.theme-option-light {
  background: #f7f8fc;
  border: 2px solid rgba(0, 0, 0, 0.08);
  color: #2d3748;
}

.theme-option-light:hover {
  border-color: rgba(0, 150, 167, 0.3);
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.06);
}

.theme-option-light.selected {
  border-color: #0097a7;
  box-shadow: 0 4px 16px rgba(0, 150, 167, 0.15);
}

.theme-option-light.selected::after {
  color: #0097a7;
}

.theme-option-light .theme-preview {
  width: 100%;
  height: 40px;
  border-radius: 8px;
  margin-bottom: 12px;
  background: linear-gradient(135deg, #ffffff, #f0f2f5);
  border: 1px solid rgba(0, 0, 0, 0.08);
}

.theme-option-light .theme-name {
  font-weight: 600;
  font-size: 14px;
  color: #2d3748;
}

.theme-option-light .theme-desc {
  font-size: 12px;
  color: #718096;
  margin-top: 4px;
}

/* Dark option styling */
.theme-option-dark {
  background: #16213e;
  border: 2px solid rgba(255, 255, 255, 0.1);
  color: #e6f1ff;
}

.theme-option-dark:hover {
  border-color: rgba(0, 188, 212, 0.4);
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.2);
}

.theme-option-dark.selected {
  border-color: #00bcd4;
  box-shadow: 0 4px 16px rgba(0, 188, 212, 0.2);
}

.theme-option-dark.selected::after {
  color: #00bcd4;
}

.theme-option-dark .theme-preview {
  width: 100%;
  height: 40px;
  border-radius: 8px;
  margin-bottom: 12px;
  background: linear-gradient(135deg, #0a0a1a, #16213e);
  border: 1px solid rgba(255, 255, 255, 0.08);
}

.theme-option-dark .theme-name {
  font-weight: 600;
  font-size: 14px;
  color: #e6f1ff;
}

.theme-option-dark .theme-desc {
  font-size: 12px;
  color: #8892b0;
  margin-top: 4px;
}

/* Theme icon in selector */
.theme-option i.theme-icon {
  font-size: 28px;
  margin-bottom: 8px;
  display: block;
}

.theme-option-light i.theme-icon {
  color: #f6ad55 !important;
}

.theme-option-dark i.theme-icon {
  color: #63b3ed !important;
}

/* --- Navbar Theme Toggle Button --- */
.theme-toggle-nav {
  display: flex;
  align-items: center;
  gap: 6px;
  color: #8892b0;
  cursor: pointer;
  padding: 6px 12px;
  border-radius: 8px;
  transition: all 0.25s ease;
  font-size: 13px;
  font-weight: 500;
  border: none;
  background: transparent;
}

html[data-theme="light"] .theme-toggle-nav {
  color: #4a5568;
}

.theme-toggle-nav:hover {
  background: rgba(0, 188, 212, 0.08);
  color: #00bcd4;
}

html[data-theme="light"] .theme-toggle-nav:hover {
  background: rgba(0, 150, 167, 0.06);
  color: #0097a7;
}

.theme-toggle-nav .theme-toggle-icon {
  font-size: 16px;
  transition: transform 0.3s ease;
}

.theme-toggle-nav:hover .theme-toggle-icon {
  transform: rotate(20deg);
}

/* ============================================================
   LOGIN PAGE — Light theme support
   ============================================================ */
html[data-theme="light"] .auth-container .auth-card {
  background: rgba(255, 255, 255, 0.97) !important;
  border: 1px solid rgba(0, 0, 0, 0.08) !important;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.08) !important;
}

html[data-theme="light"] .auth-title {
  color: #1a202c !important;
}

html[data-theme="light"] .auth-subtitle {
  color: #718096 !important;
}

html[data-theme="light"] .auth-label {
  color: #2d3748 !important;
}

html[data-theme="light"] .auth-input {
  background: #f7f8fc !important;
  border: 1.5px solid rgba(0, 0, 0, 0.1) !important;
  color: #1a202c !important;
}

html[data-theme="light"] .auth-input:focus {
  border-color: #0097a7 !important;
  box-shadow: 0 0 0 3px rgba(0, 150, 167, 0.12) !important;
  background: #ffffff !important;
}

html[data-theme="light"] .auth-input::placeholder {
  color: #a0aec0 !important;
}

html[data-theme="light"] .auth-switch {
  color: #718096 !important;
}

html[data-theme="light"] .auth-switch a {
  color: #0097a7 !important;
}

html[data-theme="light"] .auth-switch a:hover {
  color: #00838f !important;
}

html[data-theme="light"] .auth-divider {
  border-top: 1px solid rgba(0, 0, 0, 0.08) !important;
}

/* Login page body background */
html[data-theme="light"] body {
  background: linear-gradient(135deg, #e2e8f0, #edf2f7, #f7f8fc) !important;
}

/* --- Plotly Charts: polished look in light theme --- */
html[data-theme="light"] .plotly .main-svg {
  background: transparent !important;
}

html[data-theme="light"] .plotly .bg {
  fill: transparent !important;
}

html[data-theme="light"] .plotly .gridlayer line {
  stroke: rgba(0, 0, 0, 0.06) !important;
}

html[data-theme="light"] .plotly .zerolinelayer line {
  stroke: rgba(0, 0, 0, 0.10) !important;
}

html[data-theme="light"] .plotly text {
  fill: #546e7a !important;
}

/* Axis titles slightly bolder */
html[data-theme="light"] .plotly .g-xtitle text,
html[data-theme="light"] .plotly .g-ytitle text {
  fill: #37474f !important;
  font-weight: 500 !important;
}

/* Tick labels */
html[data-theme="light"] .plotly .xtick text,
html[data-theme="light"] .plotly .ytick text {
  fill: #546e7a !important;
}

/* Legend text */
html[data-theme="light"] .plotly .legend text {
  fill: #546e7a !important;
}

/* Hover label — solid, readable */
html[data-theme="light"] .plotly .hoverlayer .hovertext rect {
  fill: rgba(255, 255, 255, 0.97) !important;
  stroke: rgba(0, 0, 0, 0.18) !important;
  rx: 6 !important;
  ry: 6 !important;
  filter: drop-shadow(0 2px 8px rgba(0, 0, 0, 0.12));
}

html[data-theme="light"] .plotly .hoverlayer .hovertext text {
  fill: #1a202c !important;
  font-size: 13px !important;
}

html[data-theme="light"] .plotly .hoverlayer .hovertext tspan {
  fill: #1a202c !important;
}

/* Unified hover spike line */
html[data-theme="light"] .plotly .hoverlayer line {
  stroke: rgba(0, 0, 0, 0.25) !important;
}

/* Hover crosshair / spike */
html[data-theme="light"] .plotly .xspikelayer line,
html[data-theme="light"] .plotly .yspikelayer line {
  stroke: rgba(0, 0, 0, 0.2) !important;
}

/* Modebar (toolbar) */
html[data-theme="light"] .plotly .modebar-btn path {
  fill: #90a4ae !important;
}

html[data-theme="light"] .plotly .modebar-btn:hover path {
  fill: #0097a7 !important;
}

/* Plotly container subtle styling */
html[data-theme="light"] .plotly-graph-div {
  border-radius: 8px;
}

/* Axis lines */
html[data-theme="light"] .plotly .xlines-above line,
html[data-theme="light"] .plotly .ylines-above line {
  stroke: rgba(0, 0, 0, 0.08) !important;
}