:root {
  /* =========================================
     LIGHT MODE (Default)
     ========================================= */
  --color-primary: #1E1E2D;
  /* Deep Dark Slate for Sidebar */
  --color-accent: #C49A50;
  /* Sacred Antique Gold (For Accents only) */
  --color-background: #EBEDF3;
  /* Darker Cool Grey to reduce excessive brightness */
  --color-secondary: #294A3B;
  /* Deep Traditional Green */
  --color-typography-dark: #2F3349;
  --color-typography-muted: #5E6278;
  --color-card: #F9FAFB;
  /* Soft off-white instead of pure harsh #FFF */
  --border-color: #E4E6EF;

  /* UI Mapping */
  --sidebar-bg: var(--color-primary);
  --sidebar-menu-active-bg: rgba(196, 154, 80, 0.12);
  /* Very subtle gold highlight */
  --main-bg: var(--color-background);
  --dashboard-card-bg: var(--color-card);
  --inner-card-bg: var(--color-card);
  /* Soft shaded warm white removed for consistency */
  --table-header-bg: #F3F6F9;

  --btn-primary-bg: var(--color-primary);
  --btn-primary-hover: #13131C;
  --btn-secondary-bg: var(--color-secondary);

  --icon-color: #A0A8B8;
  --icon-active-color: var(--color-accent);

  --page-heading-color: var(--color-typography-dark);
  --text-default: var(--color-typography-dark);
  --text-primary: var(--color-typography-dark);
  --text-secondary: var(--color-typography-muted);

  --status-success: #50CD89;
  /* Modern soft green */
  --status-pending: #F1C40F;
  --status-error: #F1416C;

  /* Text mapping for backgrounds */
  --sidebar-text: #C8C8DC;
  --sidebar-menu-active-text: var(--color-accent);
  --btn-primary-text: #FFFFFF;

  /* Form & Transaction Aliases */
  --bg: var(--main-bg);
  --surface: var(--dashboard-card-bg);
  --surface-darker: var(--table-header-bg);
  --border: var(--border-color);
  --border-dark: #cbd5e1;
  --input-border: #cbd5e1;
  --text: var(--text-default);
  --text-muted: var(--text-secondary);
  --text-light: var(--text-secondary);
  --input-bg: var(--dashboard-card-bg);
  --input-focus-bg: #FFFFFF;
}

/* =========================================
   DARK MODE
   ========================================= */
[data-theme="dark"] {
  --color-primary: #151521;
  /* Even darker Sidebar */
  --color-background: #1E1E2D;
  /* Main UI Background */
  --color-card: #1B1B29;
  /* Card Background */
  --color-typography-dark: #FFFFFF;
  /* High contrast text */
  --color-typography-muted: #6D6D80;
  /* Muted dark text */
  --border-color: #2B2B40;

  --sidebar-bg: var(--color-primary);
  --main-bg: var(--color-background);
  --dashboard-card-bg: var(--color-card);
  --inner-card-bg: var(--color-card);
  --table-header-bg: #151521;

  --btn-primary-bg: #C49A50;
  /* Button becomes Accent Gold in Dark Mode */
  --btn-primary-text: #151521;
  /* Dark text on Gold button */
  --btn-primary-hover: #A37F41;

  --page-heading-color: var(--color-typography-dark);
  --text-default: #E1E3EA;
  --sidebar-text: #C8C8DC;
  --icon-color: #C8C8DC;
  --text-primary: #FFFFFF;
  --text-secondary: #A1A5B7;

  /* Form & Transaction Aliases */
  --bg: var(--main-bg);
  --surface: var(--dashboard-card-bg);
  --surface-darker: var(--table-header-bg);
  --border: var(--border-color);
  --border-dark: #334155;
  --input-border: #475569;
  --text: var(--text-default);
  --text-muted: var(--text-secondary);
  --text-light: var(--text-secondary);
  --input-bg: var(--dashboard-card-bg);
  --input-focus-bg: #151521;

  color-scheme: dark;

  /* Bootstrap 5 Native Theme Bridges */
  --bs-body-color: var(--text-default);
  --bs-table-bg: transparent;
  --bs-table-color: var(--text-default);
  --bs-table-hover-color: var(--text-default);
  --bs-table-striped-color: var(--text-default);
}

/* Global Dark Mode Dropdown & Form Controls */
[data-theme="dark"] select,
[data-theme="dark"] select option,
[data-theme="dark"] .form-select,
[data-theme="dark"] .form-select option {
  background-color: var(--dashboard-card-bg, #1B1B29) !important;
  color: var(--text-default, #FFFFFF) !important;
}

[data-theme="dark"] input[type="date"]::-webkit-calendar-picker-indicator {
  filter: invert(0.85);
  cursor: pointer;
}

/* Scale down text and components exclusively in the main content area */
.main-content {
  font-size: 0.85rem;
}

.main-content h1,
.main-content .h1 {
  font-size: 1.6rem;
}

.main-content h2,
.main-content .h2 {
  font-size: 1.4rem;
}

.main-content h3,
.main-content .h3 {
  font-size: 1.25rem;
}

.main-content h4,
.main-content .h4 {
  font-size: 1.1rem;
}

.main-content h5,
.main-content .h5 {
  font-size: 1.0rem;
}

.main-content h6,
.main-content .h6 {
  font-size: 0.85rem;
}

.main-content .btn {
  font-size: 0.85rem;
  padding: 0.35rem 0.7rem;
}

.main-content .form-control,
.main-content .form-select {
  font-size: 0.85rem;
  padding: 0.35rem 0.7rem;
  border: 1px solid var(--color-accent) !important;
  background-color: transparent !important;
  color: var(--text-primary) !important;
}

.main-content .form-control:focus,
.main-content .form-select:focus {
  outline: none;
  box-shadow: 0 0 0 0.2rem rgba(196, 154, 80, 0.25) !important;
  border-color: var(--color-accent) !important;
}

.main-content .form-control::placeholder,
.modal-content .form-control::placeholder {
  color: var(--text-secondary) !important;
}

.main-content .form-check-input {
  border: 1px solid var(--color-accent) !important;
  background-color: transparent !important;
  cursor: pointer;
}

.main-content .form-check-input:checked {
  background-color: var(--color-accent) !important;
  border-color: var(--color-accent) !important;
}

.main-content .card-title,
.main-content .dashboard-card h2 {
  font-size: 1.6rem;
}

body {
  background-color: var(--main-bg);
  color: var(--text-default);
  font-family: 'Inter', 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
  margin: 0;
  padding: 0;
  transition: background-color 0.3s ease, color 0.3s ease;
}

/* Sidebar Placeholder Styles */
.sidebar {
  background-color: var(--sidebar-bg);
  border-right: 1px solid var(--border-color);
  color: var(--sidebar-text);
  transition: background-color 0.3s ease;
}

.sidebar .active {
  background-color: var(--sidebar-menu-active-bg);
  color: var(--sidebar-menu-active-text);
  border-left: 3px solid var(--color-accent);
}

.sidebar .menu-item i {
  color: var(--icon-color);
}

.sidebar .active i {
  color: var(--icon-active-color);
}

/* Dashboard Cards */
.dashboard-card,
.main-content {
  background-color: var(--dashboard-card-bg);
  border-radius: 8px;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.05);
  border: 1px solid var(--border-color);
  transition: background-color 0.3s ease, border-color 0.3s ease;
}

/* Buttons */
.btn-primary {
  background-color: var(--btn-primary-bg);
  color: var(--btn-primary-text);
  border: none;
  border-radius: 4px;
}

.btn-primary:hover {
  background-color: var(--btn-primary-hover);
}

/* Page Headings and Labels */
h1,
h2,
h3,
h4,
h5,
.page-header {
  color: var(--page-heading-color);
}

.modal-content .form-label {
  color: var(--text-default) !important;
}

/* Statuses */
.status-success {
  color: var(--status-success);
  font-weight: bold;
}

.status-pending {
  color: var(--status-pending);
  font-weight: bold;
}

.status-error {
  color: var(--status-error);
  font-weight: bold;
}

/* Table */
thead,
.table-header {
  background-color: var(--table-header-bg);
}

/* Global Slim Scrollbar */
::-webkit-scrollbar {
  width: 6px;
  height: 6px;
}

::-webkit-scrollbar-track {
  background: transparent;
}

::-webkit-scrollbar-thumb {
  background-color: var(--border-color);
  border-radius: 20px;
}

::-webkit-scrollbar-thumb:hover {
  background-color: var(--text-color);
}

/* Global Table Theme Forcer */
html[data-theme="dark"] .table {
  color: var(--text-default) !important;
  --bs-table-color: var(--text-default);
  --bs-table-hover-color: var(--text-default);
  --bs-table-striped-color: var(--text-default);
}

html[data-theme="dark"] .table td,
html[data-theme="dark"] .table th {
  color: inherit !important;
}