/* modern-core.css v3 — Hardened for Metronic v4 + Sidebar/Menu/Dashboard Fixes */
/* Load AFTER components.min.css & plugins.min.css */

:root {
  --font-sans: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --font-heading: "Poppins", var(--font-sans);
  --color-primary: #ba895d;       /* your golden */
  --bg-surface: #e3e2df;/*#9eb9b4*/
  --border-color: #e1e5ec;
  --text-primary: #34495e;
  --shadow-sm: 0 1px 3px rgba(0,0,0,0.03);
  --shadow-md: 0 2px 8px rgba(0,0,0,0.05);
}

/* === GLOBAL FONT & TYPOGRAPHY === */
body {
  font-family: var(--font-sans) !important;
  font-size: 18px !important;      /* Increased from 13px */
  line-height: 1.6 !important;
  color: #041e19 !important ;
  background-color: #f9fafc !important;
}

/* === SIDEBAR MENU === */
.page-sidebar .page-sidebar-menu > li > a {
  font-size: 18px !important;        /* Larger than default 13px */
  font-weight: 600 !important;       /* Bold */
  padding: 10px 15px !important;
  border-top: none !important;
  transition: all 0.2s ease !important;
}
.page-sidebar .page-sidebar-menu > li:hover > a,
.page-sidebar .page-sidebar-menu > li.open > a {
  background: #2c7a6c !important;    /* Darker green on hover */
  color: #fff !important;
}
.page-sidebar .page-sidebar-menu > li.active > a {
  background: var(--color-primary) !important;
  color: #fff !important;
  border-left: 4px solid #fff !important;
}
.page-sidebar .page-sidebar-menu > li.active > a > i {
  color: #fff !important;
}
.page-sidebar .page-sidebar-menu .sub-menu > li > a {
  padding-left: 25px !important;
  font-size: 13px !important;
  font-weight: 500 !important;
}
.page-sidebar .page-sidebar-menu .sub-menu > li.active > a {
  color: var(--color-primary) !important;
  font-weight: 600 !important;
}

/* === TOP MENU (HORIZONTAL) === */
.page-header.navbar .hor-menu .navbar-nav > li > a {
  font-size: 18px !important;
  font-weight: 600 !important;
  padding: 12px 16px !important;
  margin: 0 4px !important;
  border-radius: 6px !important;
  transition: all 0.2s ease !important;
}
.page-header.navbar .hor-menu .navbar-nav > li.active > a,
.page-header.navbar .hor-menu .navbar-nav > li:hover > a {
  background: var(--color-primary) !important;
  color: #fff !important;
}
.page-header.navbar .hor-menu .navbar-nav > li.dropdown > .dropdown-toggle {
  padding: 12px 16px !important;
}
.page-header.navbar .top-menu .navbar-nav > li.dropdown-user > .dropdown-toggle > .username {
  font-size: 18px !important;
  font-weight: 600 !important;
}

/* === DASHBOARD STATS === */
.dashboard-stat .visual > i {
  font-size: 24px !important;         /* Larger icon */
  color: #fff !important;
  opacity: 0.8 !important;
}
.dashboard-stat .details .number {
  font-size: 28px !important;          /* Much larger number */
  font-weight: 600 !important;         /* Bold */
  color: #fff !important;
  letter-spacing: -0.5px !important;
}
.dashboard-stat .details .desc {
  font-size: 18px !important;
  font-weight: 500 !important;
  color: #fff !important;
  opacity: 0.9 !important;
}
.dashboard-stat .more {
  font-size: 13px !important;
  font-weight: 500 !important;
  color: #fff !important;
  background: rgba(255,255,255,0.2) !important;
}
.dashboard-stat:hover {
  transform: translateY(-2px) !important;
  box-shadow: var(--shadow-md) !important;
}

/* === PORTLETS === */
.portlet {
  border: none !important;
  border-radius: 8px !important;
  background: var(--bg-surface) !important;
  box-shadow: var(--shadow-sm) !important;
  overflow: hidden !important;
  transition: box-shadow 0.2s ease !important;
}
.portlet:hover {
  box-shadow: var(--shadow-md) !important;
}
.portlet > .portlet-title {
  border-bottom: none !important;
  padding: 0.625rem 1rem !important;
  background: transparent !important;
}
.portlet > .portlet-body {
  padding: 1rem !important;
}
.portlet .caption i,
.portlet .caption .caption-subject {
    font-size: 22px !important;
}
div.echarts-tooltip {
    font-size: 16px !important;
}
#sent-stats-chart div,
#actions-stats-chart div,
#daily-earnings-chart div,
#monthly-earnings-chart div {
    font-size: 16px !important;
}
.echarts-tooltip, 
#chart-tooltip, 
div[id^="tip"] {
    font-size: 16px !important;
}

/* === BUTTONS === */
.btn {
  border: none !important;
  border-radius: 6px !important;
  padding: 0.5rem 1rem !important;
  font-weight: 500 !important;
  letter-spacing: -0.01em !important;
  box-shadow: var(--shadow-sm) !important;
  transition: all 0.2s ease !important;
}
.btn:hover {
  transform: translateY(-1px) !important;
  box-shadow: var(--shadow-md) !important;
}

/* === FORMS === */

.form-control {
  border-radius: 6px !important;
  /*border: 1px solid var(--border-color) !important;*/
  padding: 0.5rem 0.75rem !important;
  font-size: 18px !important;
  height: auto !important;
  min-height: 36px !important;
}

#send-process-form .form-control {
  border-color: #24695c !important;
 
}
#healthmonitor{
  border-color: #24695c !important;
 
}
.form-control {
  border-color: #24695c !important;
}
/* Visible button of bootstrap-select */
.bootstrap-select .btn {
    background-color: #b8d1cc !important;
	font-weight: bold!important;
    
}

.form-control:focus {
  border-color: var(--color-primary) !important;
  box-shadow: 0 0 0 3px rgba(186,137,93,0.15) !important;
}
textarea.form-control {
    height: 200px !important;  /* visible height */
    overflow-y: auto !important;
    white-space: pre-wrap;     /* wrap long lines */
}

textarea#body {
  height: 500px !important;
}

textarea[id^="header"] {
      height: 320px !important;
}
textarea#rcpts {
  height: 300px !important;
}

textarea#auto-reply-mailboxes {
  height: 290px !important;
}

select#servers {
  height: 400px !important;
}


select#available-vmtas {
  height: 400px !important;
}



select#selected-vmtas {
  height: 340px !important;
}
textarea#filter-select-text {
  height: 370px !important;
}




/* === TABLES === */
.table > tbody > tr {
  background: var(--bg-surface) !important;
}
.table > thead > tr > th {
  border-top: none !important;
  border-bottom: 2px solid var(--border-color) !important;
  padding: 0.75rem 1rem !important;
  font-size: 18px !important;
  font-weight: 600 !important; /* Headers usually slightly bolder */
  background-color: #ba895d !important; /* Optional */
}
.table > tbody > tr > td {
  border-top: none !important;
  border-bottom: 1px solid var(--border-color) !important;
  padding: 0.75rem 1rem !important;
  font-size: 16px !important;
  font-weight: 400 !important;
}

.table-hover tbody tr:hover {
  background-color: #f9fafc !important;
}



/* === OVERRIDE COMPONENTS.MIN.CSS RESETS === */
*,
a,button,code,div,img,input,label,li,p,pre,select,span,svg,table,td,textarea,th,ul {
  border-radius: 0 !important;
}
/* Re-apply rounded corners with higher specificity */
.portlet,
.btn,
.form-control,
.input-group > .form-control,
.bootstrap-select .btn,
.select2-container--bootstrap .select2-selection,
.bootstrap-switch,
.tox .tox-dialog,
.dataTables_wrapper .dataTables_filter .form-control {
  border-radius: 6px !important;
}
.portlet > .portlet-title,
.portlet.solid,
.portlet.light {
  border-radius: 8px !important;
}

/* === DARK MODE (optional) === */


/* Dark mode (optional) */
/* ===== Dark Mode Theme ===== */
/* Uses [data-theme="dark"] for JS control (more reliable than .dark-mode class) */
[data-theme="dark"] {
  --bg-surface: #1e293b;
  --border-color: #334155;
  --text-primary: #f1f5f9;
  --color-primary: #c69f73; /* Slightly lighter gold for better contrast */
}

/* Body & global */
[data-theme="dark"] body {
  background-color: #0f172a !important; /* Deeper background */
  color: var(--text-primary) !important;
}

/* Portlets & Cards */
[data-theme="dark"] .portlet,
[data-theme="dark"] .card,
[data-theme="dark"] .tile {
  background: var(--bg-surface) !important;
  border-color: var(--border-color) !important;
}

/* Inputs & Selects */
[data-theme="dark"] .form-control,
[data-theme="dark"] .select2-container--bootstrap .select2-selection,
[data-theme="dark"] .bootstrap-select .btn,
[data-theme="dark"] .input-group > .form-control {
  background-color: #273244 !important;
  border-color: var(--border-color) !important;
  color: var(--text-primary) !important;
}
[data-theme="dark"] .form-control::placeholder {
  color: #94a3b8 !important;
  opacity: 1 !important;
}
[data-theme="dark"] .form-control:focus {
  border-color: var(--color-primary) !important;
  box-shadow: 0 0 0 3px rgba(198, 159, 115, 0.2) !important;
}

/* Tables */
[data-theme="dark"] .table,
[data-theme="dark"] .table > thead > tr > th,
[data-theme="dark"] .table > tbody > tr > td {
  color: var(--text-primary) !important;
  border-color: var(--border-color) !important;
}
[data-theme="dark"] .table-hover tbody tr:hover {
  background-color: #273244 !important;
}

/* Navbar (Top Header) */
[data-theme="dark"] .page-header.navbar {
  background: #111827 !important;
  border-bottom-color: #1e293b !important;
}
[data-theme="dark"] .page-header .hor-menu .navbar-nav > li > a {
  color: #cbd5e1 !important;
}
[data-theme="dark"] .page-header .hor-menu .navbar-nav > li.active > a,
[data-theme="dark"] .page-header .hor-menu .navbar-nav > li:hover > a {
  background: var(--color-primary) !important;
  color: #0f172a !important;
}

/* Sidebar */
[data-theme="dark"] .page-sidebar,
[data-theme="dark"] .page-sidebar-wrapper {
  background: #111827 !important;
}
[data-theme="dark"] .page-sidebar-menu > li > a {
  color: #cbd5e1 !important;
}
[data-theme="dark"] .page-sidebar-menu > li.active > a,
[data-theme="dark"] .page-sidebar-menu > li:hover > a,
[data-theme="dark"] .page-sidebar-menu > li.open > a {
  background: #1e293b !important;
  color: #f1f5f9 !important;
  border-left-color: var(--color-primary) !important;
}

/* Footer */
[data-theme="dark"] .page-footer {
  background: #111827 !important;
  color: #94a3b8 !important;
  border-top-color: #1e293b !important;
}

/* Buttons (basic) */
[data-theme="dark"] .btn-default {
  background: #334155 !important;
  color: #f1f5f9 !important;
  border-color: #334155 !important;
}
[data-theme="dark"] .btn-default:hover {
  background: #475569 !important;
}
/* === DARK MODE — Global Text Safety Net === */
[data-theme="dark"] * {
  color: var(--text-primary) !important;
}
[data-theme="dark"] a,
[data-theme="dark"] a:hover,
[data-theme="dark"] a:focus {
  color: #94c7b2 !important; /* Soft green link */
  text-decoration: none !important;
}
[data-theme="dark"] .btn,
[data-theme="dark"] .btn-default,
[data-theme="dark"] .btn-primary {
  color: #f1f5f9 !important;
}
[data-theme="dark"] .form-control,
[data-theme="dark"] .input-group-addon {
  color: var(--text-primary) !important;
}
/* ===== Dark Mode Toggle Button — Header-Aligned ===== */



/* ===== Dark Mode Toggle Button — Gold & Aligned ===== */
.page-header .top-menu .theme-toggle-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  margin: 0 4px !important; /* match spacing of other menu items */
  padding: 0 !important;
  border-radius: 6px !important;
  background: var(--color-primary) !important; /* GOLD by default */
  color: #fff !important;
  font-size: 18px !important;
  line-height: 1 !important;
  text-decoration: none !important;
  box-sizing: border-box !important;
  vertical-align: middle !important;
}

/* Ensure icon is crisp and centered */
#theme-icon {
  display: inline-block;
  width: 1em;
  height: 1em;
  vertical-align: middle;
  backface-visibility: hidden;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* Optional: Slightly dim icon for subtle contrast */
#theme-icon {
  opacity: 0.9;
}

/* Dark mode: keep same gold, text white */
[data-theme="dark"] .page-header .top-menu .theme-toggle-btn {
  background: var(--color-primary) !important; /* same gold */
  color: #000 !important; /* black for max contrast on gold */
}

/* === DARK MODE — Text Readability Fixes === */

/* Page content & portlets */
[data-theme="dark"] .page-content,
[data-theme="dark"] .portlet-body,
[data-theme="dark"] .portlet-title,
[data-theme="dark"] .caption,
[data-theme="dark"] .caption-subject {
  color: var(--text-primary) !important;
}

/* Tables */
[data-theme="dark"] .table th,
[data-theme="dark"] .table td,
[data-theme="dark"] .table caption {
  color: var(--text-primary) !important;
}

/* Forms */
[data-theme="dark"] label,
[data-theme="dark"] .help-block,
[data-theme="dark"] .form-group .control-label {
  color: var(--text-primary) !important;
}

/* Links (non-hover) */
[data-theme="dark"] a:not(.btn):not([class*="btn-"]) {
  color: #94c7b2 !important; /* soft green, readable */
}
[data-theme="dark"] a:hover:not(.btn) {
  color: #c69f73 !important; /* match primary */
}

/* Dashboard stats text (if light-mode-only hardcoded) */
[data-theme="dark"] .dashboard-stat .details .desc,
[data-theme="dark"] .dashboard-stat .details .number {
  color: #f1f5f9 !important;
}

/* ===== Dark Mode Toggle Button — Perfectly Aligned & Readable ===== */
.page-header .top-menu .theme-toggle-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  padding: 0 !important;
  margin: 0 6px !important;
  border-radius: 6px !important;
  background: transparent !important;
  color: #2c7a6c !important; /* Your sidebar hover green */
  font-size: 18px !important;
  line-height: 1 !important;
  transition: all 0.2s ease !important;
  text-decoration: none !important;
  box-sizing: border-box !important;
}

.page-header .top-menu .theme-toggle-btn:hover {
  background: var(--color-primary) !important;
  color: #fff !important;
  transform: translateY(-1px) !important;
}

/* Dark mode */
[data-theme="dark"] .page-header .top-menu .theme-toggle-btn {
  color: #cbd5e1 !important; /* Light gray for dark header */
}
[data-theme="dark"] .page-header .top-menu .theme-toggle-btn:hover {
  background: var(--color-primary) !important;
  color: #000 !important; /* Black on gold = max contrast */
}

/* Ensure icon is crisp */
#theme-icon {
  display: inline-block;
  width: 1em;
  height: 1em;
  vertical-align: middle;
  backface-visibility: hidden;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
/* === DARK MODE — Dashboard Stats Readability Fixes === */
[data-theme="dark"] .dashboard-stat2 .number h3,
[data-theme="dark"] .dashboard-stat2 .number small {
  color: var(--text-primary) !important;
}

/* Optional: Make icons match text color */
[data-theme="dark"] .dashboard-stat2 .icon i {
  color: var(--text-primary) !important;
  opacity: 0.8 !important;
}

/* If you want to keep original color but make it readable, use this instead */
/* [data-theme="dark"] .dashboard-stat2 .number h3 {
  filter: brightness(1.5) !important;
} */

/* For chart titles and labels */
[data-theme="dark"] .portlet-title .caption-subject,
[data-theme="dark"] .portlet-title .caption-helper {
  color: var(--text-primary) !important;
}
[data-theme="dark"] .flot-base,
[data-theme="dark"] .flot-overlay,
[data-theme="dark"] .plot-container {
  background: #1e293b !important;
  border-color: #334155 !important;
}
/* === DARK MODE — Fix Dashboard Stats Colors === */
[data-theme="dark"] .dashboard-stat2 .number h3,
[data-theme="dark"] .dashboard-stat2 .number small,
[data-theme="dark"] .dashboard-stat2 .number .font-blue-chambray,
[data-theme="dark"] .dashboard-stat2 .number .font-blue-ebonyclay,
[data-theme="dark"] .dashboard-stat2 .number .font-purple-studio,
[data-theme="dark"] .dashboard-stat2 .number .font-purple-intense,
[data-theme="dark"] .dashboard-stat2 .number .font-green-sharp,
[data-theme="dark"] .dashboard-stat2 .number .font-green-steel,
[data-theme="dark"] .dashboard-stat2 .number .font-green-dark,
[data-theme="dark"] .dashboard-stat2 .number .font-blue-madison,
[data-theme="dark"] .dashboard-stat2 .number .font-red,
[data-theme="dark"] .dashboard-stat2 .number .font-blue,
[data-theme="dark"] .dashboard-stat2 .number .font-purple,
[data-theme="dark"] .dashboard-stat2 .number .font-green {
  color: var(--text-primary) !important; /* #f1f5f9 — light gray */
}

/* Optional: dim icons slightly */
[data-theme="dark"] .dashboard-stat2 .icon i {
  color: var(--text-primary) !important;
  opacity: 0.7 !important;
}

/* FINAL FIX – FORCE GOLD BUTTON IN BOTH THEMES */
.page-header .top-menu .theme-toggle-btn {
    background: var(--color-primary) !important;
    color: #fff !important;
}

/* Dark Mode – maintain gold background */
[data-theme="dark"] .page-header .top-menu .theme-toggle-btn {
    background: var(--color-primary) !important;
    color: #000 !important; /* Matches your gold design */
}

/* Prevent global dark-mode override from killing button text color */
[data-theme="dark"] .page-header .top-menu .theme-toggle-btn * {
    color: inherit !important;
}
/* === DARK MODE — Dashboard Stats v2 — Full Readability === */
[data-theme="dark"] .dashboard-stat2 .number h3,
[data-theme="dark"] .dashboard-stat2 .number small {
  color: #f1f5f9 !important; /* Light gray — high contrast */
}

/* Override all font-* colors in dark mode */
[data-theme="dark"] .dashboard-stat2 .number .font-blue-chambray,
[data-theme="dark"] .dashboard-stat2 .number .font-blue-ebonyclay,
[data-theme="dark"] .dashboard-stat2 .number .font-purple-studio,
[data-theme="dark"] .dashboard-stat2 .number .font-purple-intense,
[data-theme="dark"] .dashboard-stat2 .number .font-green-sharp,
[data-theme="dark"] .dashboard-stat2 .number .font-green-steel,
[data-theme="dark"] .dashboard-stat2 .number .font-green-dark,
[data-theme="dark"] .dashboard-stat2 .number .font-blue-madison,
[data-theme="dark"] .dashboard-stat2 .number .font-red,
[data-theme="dark"] .dashboard-stat2 .number .font-blue,
[data-theme="dark"] .dashboard-stat2 .number .font-purple,
[data-theme="dark"] .dashboard-stat2 .number .font-green {
  color: #f1f5f9 !important; /* Forces light text in dark mode */
}

/* Optional: Gold highlights for key numbers (e.g., earnings) */
[data-theme="dark"] .dashboard-stat2 .number .font-green,
[data-theme="dark"] .dashboard-stat2 .number .font-yellow {
  color: #c69f73 !important; /* your dark-mode gold */
}
[data-theme="dark"] .dashboard-stat2 .icon i {
  color: #cbd5e1 !important;
  opacity: 0.9 !important;
}
/* 🔥 FINAL OVERRIDE — beat *any* !important, even if components.min.css loads after */
#app-root[data-theme="dark"] .font-blue-chambray,
#app-root[data-theme="dark"] .font-blue-ebonyclay,
#app-root[data-theme="dark"] .font-purple-studio,
#app-root[data-theme="dark"] .font-purple-intense,
#app-root[data-theme="dark"] .font-green-sharp,
#app-root[data-theme="dark"] .font-green-steel,
#app-root[data-theme="dark"] .font-green-dark,
#app-root[data-theme="dark"] .font-blue-madison,
#app-root[data-theme="dark"] .font-red,
#app-root[data-theme="dark"] .font-blue,
#app-root[data-theme="dark"] .font-purple,
#app-root[data-theme="dark"] .font-green {
  color: var(--text-primary) !important;
}

/* Also fix background/text contrast for stat2 cards */
#app-root[data-theme="dark"] .dashboard-stat2 {
  background: var(--bg-surface) !important;
  border-color: var(--border-color) !important;
}
#app-root[data-theme="dark"] .dashboard-stat2 .icon i {
  color: var(--text-primary) !important;
  opacity: 0.9 !important;
}
/* ===== THEME TOGGLE BUTTON — FINAL, STABLE VERSION ===== */
#theme-toggle {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 36px !important;
  height: 36px !important;
  margin: 0 6px !important;
  padding: 0 !important;
  border-radius: 6px !important;
  background: var(--color-primary) !important; /* #ba895d — your gold */
  color: #000 !important; /* black for max contrast on gold */
  font-size: 18px !important;
  text-decoration: none !important;
  transition: all 0.2s ease !important;
  line-height: 1 !important;
}

#theme-toggle:hover {
  transform: scale(1.05) !important;
  box-shadow: 0 2px 6px rgba(0,0,0,0.15) !important;
}

/* Ensure icon inherits color & centers */
#theme-icon {
  display: inline-block !important;
  width: 1em !important;
  height: 1em !important;
  vertical-align: middle !important;
  text-align: center !important;
}
/* 🔑 Fix 1: Ensure theme toggle button is always visible & clickable */
.theme-toggle-btn {
  z-index: 1000 !important;
  pointer-events: auto !important;
  opacity: 1 !important;
}

/* 🔑 Fix 2: Force body bg to respond — works whether data-theme is on <html> or <body> */
html[data-theme="dark"] body,
body[data-theme="dark"] {
  background-color: #0f172a !important;
  color: #f1f5f9 !important;
}
/* Ensure dark mode applies when data-theme="dark" is on <body> */
body[data-theme="dark"] {
    background-color: #0f172a !important;
    color: #f1f5f9 !important;
}
body[data-theme="dark"] * {
    color: inherit !important;
}
/* ===== DARK MODE — DataTables Overrides ===== */
body[data-theme="dark"] .table-hover > tbody > tr:hover,
body[data-theme="dark"] .table-hover > tbody > tr:hover > td {
  background: #273244 !important; /* match dark input bg */
}

body[data-theme="dark"] table.dataTable td.sorting_1,
body[data-theme="dark"] table.dataTable td.sorting_2,
body[data-theme="dark"] table.dataTable td.sorting_3,
body[data-theme="dark"] table.dataTable th.sorting_1,
body[data-theme="dark"] table.dataTable th.sorting_2,
body[data-theme="dark"] table.dataTable th.sorting_3 {
  background: #1e293b !important; /* match --bg-surface */
  color: var(--text-primary) !important;
}

/* Borders & separators */
body[data-theme="dark"] .table-bordered,
body[data-theme="dark"] .table-bordered > tbody > tr > td,
body[data-theme="dark"] .table-bordered > tbody > tr > th,
body[data-theme="dark"] .table-bordered > tfoot > tr > td,
body[data-theme="dark"] .table-bordered > tfoot > tr > th,
body[data-theme="dark"] .table-bordered > thead > tr > td,
body[data-theme="dark"] .table-bordered > thead > tr > th,
body[data-theme="dark"] .table > thead > tr > th,
body[data-theme="dark"] .table > tbody > tr > td {
  border-color: var(--border-color) !important; /* #334155 */
}

/* Search/filter input (often overlooked) */
body[data-theme="dark"] .dataTables_wrapper .dataTables_filter .form-control {
  background-color: #273244 !important;
  border-color: var(--border-color) !important;
  color: var(--text-primary) !important;
}
body[data-theme="dark"] .dataTables_wrapper .dataTables_filter .form-control::placeholder {
  color: #94a3b8 !important;
  opacity: 1 !important;
}
/* ===== DARK MODE — DataTables Hard Override (must be LAST) ===== */

/* Header row — beats tr.heading > th */
body[data-theme="dark"] table.dataTable thead tr,
body[data-theme="dark"] table.dataTable thead tr th,
body[data-theme="dark"] table.dataTable thead tr td {
  background: var(--bg-surface) !important;
  color: var(--text-primary) !important;
  border-color: var(--border-color) !important;
}

/* Sorted column highlight — beats .sorting_1/.2/.3 */
body[data-theme="dark"] table.dataTable td.sorting_1,
body[data-theme="dark"] table.dataTable td.sorting_2,
body[data-theme="dark"] table.dataTable td.sorting_3,
body[data-theme="dark"] table.dataTable th.sorting_1,
body[data-theme="dark"] table.dataTable th.sorting_2,
body[data-theme="dark"] table.dataTable th.sorting_3 {
  background: #273244 !important; /* slightly lighter than bg for visibility */
  color: var(--text-primary) !important;
}

/* Hover row — beats .table-hover > tbody > tr:hover */
body[data-theme="dark"] .table-hover > tbody > tr:hover,
body[data-theme="dark"] .table-hover > tbody > tr:hover > td {
  background: #273244 !important;
  color: var(--text-primary) !important;
}

/* Sort icons — make visible in dark */
body[data-theme="dark"] table.dataTable thead .sorting:after,
body[data-theme="dark"] table.dataTable thead .sorting_asc:after,
body[data-theme="dark"] table.dataTable thead .sorting_desc:after {
  opacity: 0.7 !important;
  color: var(--text-primary) !important;
}/* =======================================================================
   LOGO — FULL FIXED VERSION
   This CSS overrides global resets, Metronic defaults, and your global <a> rules.
   ======================================================================= */

/* Ensure the logo link behaves as intended */
.page-logo > a {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    height: 100%;
    padding: 0 !important;
    text-decoration: none !important;
}

/* Ensure the gold color is not overridden by global a{} styles */
.page-logo a,
.page-logo .logo-text,
.page-logo .logo-name,
.page-logo .logo-icon {
    color: #ba895d !important;
}

/* Final full logo layout + styling */
.page-logo .logo-text {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    height: 45px;
    margin-top: -7px;
    font-family: 'Rockwell Extra Bold', sans-serif;
    font-weight: 600;
    font-size: 20px;
    color: #ba895d;
    letter-spacing: 1.5px;
    line-height: 1;
}

/* Logo wrapper positioning (your original) */
.page-logo {
    position: relative;
    top: 5px;
    left: 20px;
}

/* Icon styling */
.page-logo .logo-icon {
    font-size: 24px;
    line-height: 1;
    color: #ba895d !important;
}

/* Text styling */
.page-logo .logo-name {
    color: #ba895d !important;
    white-space: nowrap;
}

/* Hover effect */
.page-logo .logo-text:hover {
    transform: translateY(-1px);
    text-shadow: 0 0 8px rgba(186, 137, 93, 0.3);
}

/* /* ====================== */
   Mobile — hide the name
   ====================== */
@media (max-width: 768px) {
    .page-logo .logo-name {
        display: none;
    }
    .page-logo .logo-icon {
        font-size: 26px !important;
    }
}
[data-theme="dark"] .table thead th {
  background: #ba895d !important;
  backdrop-filter: blur(2px); /* if supported */
}


[data-theme="dark"] .note-info {
  
    background: #0f172a !important;

}
/* ✅ <code> in dark mode: pure black for high contrast & readability */
[data-theme="dark"] code,
[data-theme="dark"] pre code,
[data-theme="dark"] kbd,
[data-theme="dark"] samp {
  color: #000 !important;
  background-color: #f1f1f1 !important; /* optional: light bg for inline code */
  border-radius: 3px !important;
  padding: 0.1em 0.3em !important;
}

/* ========================================
   <code> — Inline code styling (light & dark)
   ======================================== */

/* 🔹 Light mode (default) */
code {
  background-color: #f1f1f1 !important;
  color: #ba895d !important;         /* your golden primary */
  padding: 0.15em 0.4em !important;
  border-radius: 4px !important;
  font-family: Consolas, Monaco, 'Andale Mono', monospace !important;
  font-size: 0.92em !important;
  line-height: 1.4 !important;
  white-space: nowrap !important;
}

/* 🔹 Dark mode — high-contrast, readable */
[data-theme="dark"] code {
  background-color: #273244 !important;  /* matches dark inputs */
  color: #c69f73 !important;             /* light gold for readability */
  /* Optional: subtle border for separation */
  border: 1px solid #334155 !important;
}
body[data-theme="dark"] .page-content {
  color: #ba895d !important;
}
body[data-theme="dark"] .page-content * {
  color: inherit !important;
}