/* ============================================
   ERP Theme System - Light/Dark Mode
   Material Dark UI with Purple Accent
   ============================================ */

:root {
  /* === Primary Brand Colors === */
  --theme-primary: #7365ff;
  --theme-primary-hover: #5a4de6;
  --theme-primary-light: #b2aaff;
  --theme-primary-dark: #4a3db8;

  /* === Purple Accent Colors === */
  --theme-accent: #7c3aed;
  --theme-accent-light: #a78bfa;
  --theme-accent-dark: #6d28d9;
  --theme-accent-soft: #ede9fe;

  /* === Background Colors === */
  --theme-bg-primary: #ffffff;
  --theme-bg-secondary: #f8f8f8;
  --theme-bg-tertiary: #f0f0f0;
  --theme-bg-elevated: #ffffff;
  --theme-bg-input: #ffffff;
  --theme-bg-hover: #f5f5f5;
  --theme-bg-selected: #ede9fe;
  --theme-bg-disabled: #f0f0f0;

  /* === Surface Colors (Cards, Modals, etc.) === */
  --theme-surface: #ffffff;
  --theme-surface-elevated: #ffffff;
  --theme-surface-overlay: rgba(0, 0, 0, 0.5);

  /* === Text Colors === */
  --theme-text-primary: #1b1d1d;
  --theme-text-secondary: #535353;
  --theme-text-tertiary: #6b7280;
  --theme-text-muted: #9b9b9b;
  --theme-text-inverse: #ffffff;
  --theme-text-link: #7365ff;
  --theme-text-link-hover: #5a4de6;

  /* === Border Colors === */
  --theme-border: #d9d9d9;
  --theme-border-light: #e4e3e6;
  --theme-border-dark: #535353;
  --theme-border-focus: #7365ff;
  --theme-border-input: #535353;

  /* === Status Colors === */
  --theme-success: #00aa00;
  --theme-success-bg: #dcfce7;
  --theme-success-text: #166534;

  --theme-warning: #b48700;
  --theme-warning-bg: #fef3c7;
  --theme-warning-text: #92400e;

  --theme-danger: #ff5f5f;
  --theme-danger-bg: #fee2e2;
  --theme-danger-text: #dc2626;
  --theme-danger-hover: #ef4444;

  --theme-info: #209cee;
  --theme-info-bg: #dbeafe;
  --theme-info-text: #1e40af;

  /* === Row Highlight Colors === */
  --theme-row-red: #ffabab;
  --theme-row-orange: #ffd690;
  --theme-row-teal: #90ffed;
  --theme-row-green: #33CC33;
  --theme-row-grey: #d3d3d3;

  /* === Shadow Colors === */
  --theme-shadow-sm: rgba(0, 0, 0, 0.05);
  --theme-shadow: rgba(0, 0, 0, 0.1);
  --theme-shadow-md: rgba(0, 0, 0, 0.15);
  --theme-shadow-lg: rgba(0, 0, 0, 0.24);

  /* === Sidebar === */
  --theme-sidebar-bg: #ffffff;
  --theme-sidebar-text: #3b404e;
  --theme-sidebar-hover: #f5f5f5;
  --theme-sidebar-active: #ede9fe;
  --theme-sidebar-border: #f0f0f0;

  /* === Navigation === */
  --theme-nav-bg: #ffffff;
  --theme-nav-text: #1b1d1d;
  --theme-nav-hover: #f5f5f5;
  --theme-nav-active: #7365ff;

  /* === Table === */
  --theme-table-bg: #ffffff;
  --theme-table-header-bg: #f8f8f8;
  --theme-table-row-hover: #f5f5f5;
  --theme-table-row-selected: #ede9fe;
  --theme-table-border: #e4e3e6;

  /* === Modal === */
  --theme-modal-bg: #ffffff;
  --theme-modal-backdrop: rgba(0, 0, 0, 0.5);

  /* === Form Elements === */
  --theme-input-bg: #ffffff;
  --theme-input-border: #535353;
  --theme-input-focus-border: #7365ff;
  --theme-input-placeholder: #9b9b9b;
  --theme-checkbox-checked: #00aa00;
  --theme-switch-bg: #d9d9d9;
  --theme-switch-checked: #7365ff;

  /* === Scrollbar === */
  --theme-scrollbar-track: #f0f0f0;
  --theme-scrollbar-thumb: #c1c1c1;
  --theme-scrollbar-thumb-hover: #a8a8a8;

  /* === Button Colors === */
  --theme-button-bg: #f0f0f0;
  --theme-button-text: #1b1d1d;
  --theme-button-hover: #e4e4e4;
  --theme-button-primary-bg: #7365ff;
  --theme-button-primary-text: #ffffff;
}

/* ============================================
   DARK MODE - Material Dark UI with Purple Accent
   ============================================ */

.dark,
[data-mode="dark"],
html.dark {
  /* === Primary Brand Colors (Purple accent in dark mode) === */
  --theme-primary: #a78bfa;
  --theme-primary-hover: #c4b5fd;
  --theme-primary-light: #ddd6fe;
  --theme-primary-dark: #8b5cf6;

  /* === Purple Accent Colors (Enhanced for dark) === */
  --theme-accent: #a78bfa;
  --theme-accent-light: #c4b5fd;
  --theme-accent-dark: #8b5cf6;
  --theme-accent-soft: #2e1065;

  /* === Background Colors - Material Dark === */
  --theme-bg-primary: #121212;
  --theme-bg-secondary: #1e1e1e;
  --theme-bg-tertiary: #252525;
  --theme-bg-elevated: #2d2d2d;
  --theme-bg-input: #2d2d2d;
  --theme-bg-hover: #383838;
  --theme-bg-selected: #3d2a5c;
  --theme-bg-disabled: #2d2d2d;

  /* === Surface Colors - Material Dark === */
  --theme-surface: #1e1e1e;
  --theme-surface-elevated: #27272a;
  --theme-surface-overlay: rgba(0, 0, 0, 0.7);

  /* === Text Colors - Material Dark === */
  --theme-text-primary: #e0e0e0;
  --theme-text-secondary: #b0b0b0;
  --theme-text-tertiary: #909090;
  --theme-text-muted: #666666;
  --theme-text-inverse: #121212;
  --theme-text-link: #a78bfa;
  --theme-text-link-hover: #c4b5fd;

  /* === Border Colors - Material Dark === */
  --theme-border: #333333;
  --theme-border-light: #404040;
  --theme-border-dark: #555555;
  --theme-border-focus: #a78bfa;
  --theme-border-input: #404040;

  /* === Status Colors (Adjusted for Material Dark) === */
  --theme-success: #4caf50;
  --theme-success-bg: #1b3d1e;
  --theme-success-text: #81c784;

  --theme-warning: #ff9800;
  --theme-warning-bg: #3d2c10;
  --theme-warning-text: #ffb74d;

  --theme-danger: #f44336;
  --theme-danger-bg: #3d1515;
  --theme-danger-text: #ef9a9a;
  --theme-danger-hover: #e57373;

  --theme-info: #2196f3;
  --theme-info-bg: #153050;
  --theme-info-text: #64b5f6;

  /* === Row Highlight Colors (Material Dark variants) === */
  --theme-row-red: #4a1c1c;
  --theme-row-orange: #4a3010;
  --theme-row-teal: #103d3d;
  --theme-row-green: #1b3d1e;
  --theme-row-grey: #333333;

  /* === Shadow Colors - Material Dark === */
  --theme-shadow-sm: rgba(0, 0, 0, 0.4);
  --theme-shadow: rgba(0, 0, 0, 0.5);
  --theme-shadow-md: rgba(0, 0, 0, 0.6);
  --theme-shadow-lg: rgba(0, 0, 0, 0.7);

  /* === Sidebar - Material Dark === */
  --theme-sidebar-bg: #1e1e1e;
  --theme-sidebar-text: #b0b0b0;
  --theme-sidebar-hover: #2d2d2d;
  --theme-sidebar-active: #3d2a5c;
  --theme-sidebar-border: #333333;

  /* === Navigation - Material Dark === */
  --theme-nav-bg: #1e1e1e;
  --theme-nav-text: #e0e0e0;
  --theme-nav-hover: #2d2d2d;
  --theme-nav-active: #a78bfa;

  /* === Table - Material Dark === */
  --theme-table-bg: #1e1e1e;
  --theme-table-header-bg: #252525;
  --theme-table-row-hover: #2d2d2d;
  --theme-table-row-selected: #3d2a5c;
  --theme-table-border: #333333;

  /* === Modal - Material Dark === */
  --theme-modal-bg: #252525;
  --theme-modal-backdrop: rgba(0, 0, 0, 0.85);

  /* === Form Elements - Material Dark === */
  --theme-input-bg: #2d2d2d;
  --theme-input-border: #404040;
  --theme-input-focus-border: #a78bfa;
  --theme-input-placeholder: #666666;
  --theme-checkbox-checked: #4caf50;
  --theme-switch-bg: #404040;
  --theme-switch-checked: #a78bfa;

  /* === Scrollbar - Material Dark === */
  --theme-scrollbar-track: #252525;
  --theme-scrollbar-thumb: #404040;
  --theme-scrollbar-thumb-hover: #555555;

  /* === Button Colors - Material Dark === */
  --theme-button-bg: #2d2d2d;
  --theme-button-text: #e0e0e0;
  --theme-button-hover: #383838;
  --theme-button-primary-bg: #7c3aed;
  --theme-button-primary-text: #ffffff;
}

/* ============================================
   BASE ELEMENT STYLING WITH CSS VARIABLES
   ============================================ */

/* Body & HTML */
html, body {
  background-color: var(--theme-bg-secondary);
  color: var(--theme-text-primary);
  transition: background-color 0.3s ease, color 0.3s ease;
}

/* All text elements */
*, *::before, *::after {
  border-color: var(--theme-border);
}

/* Links */
a {
  color: var(--theme-text-link);
}
a:hover {
  color: var(--theme-text-link-hover);
}

/* Scrollbar Styling */
::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}
::-webkit-scrollbar-track {
  background: var(--theme-scrollbar-track);
}
::-webkit-scrollbar-thumb {
  background: var(--theme-scrollbar-thumb);
  border-radius: 4px;
}
::-webkit-scrollbar-thumb:hover {
  background: var(--theme-scrollbar-thumb-hover);
}

/* Selection */
::selection {
  background-color: var(--theme-primary);
  color: var(--theme-text-inverse);
}

.dark ::selection,
[data-mode="dark"] ::selection {
  background-color: var(--theme-accent);
  color: var(--theme-text-inverse);
}

/* ============================================
   AG GRID THEMING
   ============================================ */

/* AG Grid Light Mode - Base styling */
.ag-theme-balham {
  --ag-background-color: var(--theme-surface);
  --ag-foreground-color: var(--theme-text-primary);
  --ag-header-background-color: var(--theme-table-header-bg);
  --ag-header-foreground-color: var(--theme-text-primary);
  --ag-border-color: var(--theme-table-border);
  --ag-row-hover-color: var(--theme-table-row-hover);
  --ag-selected-row-background-color: var(--theme-table-row-selected);
  --ag-odd-row-background-color: var(--theme-surface);
  --ag-modal-overlay-background-color: var(--theme-surface-overlay);
  --ag-input-focus-border-color: var(--theme-border-focus);
  --ag-range-selection-border-color: var(--theme-primary);
  --ag-checkbox-checked-color: var(--theme-primary);
  --ag-input-border-color: var(--theme-input-border);
  --ag-card-shadow: 0 4px 6px var(--theme-shadow);
}

.ag-theme-balham .ag-header {
  background-color: var(--theme-table-header-bg);
  border-bottom: 1px solid var(--theme-table-border);
}

.ag-theme-balham .ag-header-cell {
  color: var(--theme-text-primary);
}

.ag-theme-balham .ag-cell {
  color: var(--theme-text-primary);
  border-color: var(--theme-table-border);
}

.ag-theme-balham .ag-row {
  background-color: var(--theme-surface);
  border-color: var(--theme-table-border);
}

.ag-theme-balham .ag-row-odd {
  background-color: var(--theme-bg-secondary);
}

.ag-theme-balham .ag-row:hover {
  background-color: var(--theme-table-row-hover);
}

.ag-theme-balham .ag-row-selected {
  background-color: var(--theme-table-row-selected);
}

.ag-theme-balham .ag-paging-panel {
  background-color: var(--theme-surface);
  color: var(--theme-text-primary);
  border-top: 1px solid var(--theme-table-border);
}

.ag-theme-balham .ag-menu {
  background-color: var(--theme-surface);
  border-color: var(--theme-border);
}

.ag-theme-balham .ag-popup-child {
  background-color: var(--theme-surface);
  border-color: var(--theme-border);
}

/* AG Grid Dark Mode */
.dark .ag-theme-balham,
[data-mode="dark"] .ag-theme-balham {
  --ag-background-color: var(--theme-surface);
  --ag-foreground-color: var(--theme-text-primary);
  --ag-header-background-color: var(--theme-table-header-bg);
  --ag-header-foreground-color: var(--theme-text-primary);
  --ag-border-color: var(--theme-table-border);
  --ag-row-hover-color: var(--theme-table-row-hover);
  --ag-selected-row-background-color: var(--theme-table-row-selected);
  --ag-odd-row-background-color: var(--theme-bg-secondary);
  --ag-range-selection-border-color: var(--theme-accent);
  --ag-checkbox-checked-color: var(--theme-accent);
}

.dark .ag-theme-balham .ag-header,
[data-mode="dark"] .ag-theme-balham .ag-header {
  background-color: var(--theme-table-header-bg);
  border-bottom-color: var(--theme-table-border);
}

.dark .ag-theme-balham .ag-header-cell,
[data-mode="dark"] .ag-theme-balham .ag-header-cell {
  color: var(--theme-text-primary);
}

.dark .ag-theme-balham .ag-cell,
[data-mode="dark"] .ag-theme-balham .ag-cell {
  color: var(--theme-text-primary);
}

.dark .ag-theme-balham .ag-row,
[data-mode="dark"] .ag-theme-balham .ag-row {
  background-color: var(--theme-surface);
}

.dark .ag-theme-balham .ag-row-odd,
[data-mode="dark"] .ag-theme-balham .ag-row-odd {
  background-color: var(--theme-bg-tertiary);
}

.dark .ag-theme-balham .ag-paging-panel,
[data-mode="dark"] .ag-theme-balham .ag-paging-panel {
  background-color: var(--theme-surface);
  color: var(--theme-text-primary);
  border-top-color: var(--theme-table-border);
}

.dark .ag-theme-balham .ag-menu,
[data-mode="dark"] .ag-theme-balham .ag-menu {
  background-color: var(--theme-surface);
  border-color: var(--theme-border);
}

/* ============================================
   BULMA OVERRIDES FOR THEMING
   ============================================ */

/* Bulma Variables Override */
:root {
  --bulma-body-background-color: var(--theme-bg-secondary);
  --bulma-body-color: var(--theme-text-primary);
  --bulma-link: var(--theme-text-link);
  --bulma-link-hover: var(--theme-text-link-hover);
  --bulma-primary: var(--theme-primary);
  --bulma-info: var(--theme-info);
  --bulma-success: var(--theme-success);
  --bulma-warning: var(--theme-warning);
  --bulma-danger: var(--theme-danger);
}

/* Bulma Box */
.box {
  background-color: var(--theme-surface);
  color: var(--theme-text-primary);
  box-shadow: 0 2px 4px var(--theme-shadow);
}

/* Bulma Button */
.button {
  background-color: var(--theme-bg-elevated);
  border-color: var(--theme-border);
  color: var(--theme-text-primary);
}

.button:hover {
  background-color: var(--theme-bg-hover);
  border-color: var(--theme-border-dark);
}

.button.is-primary {
  background-color: var(--theme-primary);
  border-color: var(--theme-primary);
  color: var(--theme-text-inverse);
}

.button.is-primary:hover {
  background-color: var(--theme-primary-hover);
  border-color: var(--theme-primary-hover);
}

/* Bulma Input/Select/Textarea */
.input,
.textarea,
.select select {
  background-color: var(--theme-input-bg);
  border-color: var(--theme-input-border);
  color: var(--theme-text-primary);
}

.input:focus,
.textarea:focus,
.select select:focus {
  border-color: var(--theme-border-focus);
  box-shadow: 0 0 0 2px rgba(115, 101, 255, 0.2);
}

.input::placeholder,
.textarea::placeholder {
  color: var(--theme-input-placeholder);
}

/* Bulma Label */
.label {
  color: var(--theme-text-primary);
}

/* Bulma Card */
.card {
  background-color: var(--theme-surface);
  box-shadow: 0 2px 4px var(--theme-shadow);
}

.card-header {
  background-color: var(--theme-surface);
  box-shadow: 0 1px 0 var(--theme-border);
}

.card-header-title {
  color: var(--theme-text-primary);
}

.card-content {
  background-color: var(--theme-surface);
  color: var(--theme-text-primary);
}

.card-footer {
  background-color: var(--theme-surface);
  border-top: 1px solid var(--theme-border);
}

/* Bulma Navbar */
.navbar {
  background-color: var(--theme-nav-bg);
}

.navbar-item,
.navbar-link {
  color: var(--theme-text-primary);
}

.navbar-item:hover,
.navbar-link:hover {
  background-color: var(--theme-bg-hover);
  color: var(--theme-text-primary);
}

.navbar-dropdown {
  background-color: var(--theme-surface);
  border-color: var(--theme-border);
}

/* Bulma Menu */
.menu-label {
  color: var(--theme-text-tertiary);
}

.menu-list a {
  color: var(--theme-text-primary);
}

.menu-list a:hover {
  background-color: var(--theme-bg-hover);
  color: var(--theme-text-primary);
}

.menu-list a.is-active {
  background-color: var(--theme-primary);
  color: var(--theme-text-inverse);
}

/* Bulma Message */
.message {
  background-color: var(--theme-surface);
}

.message-header {
  background-color: var(--theme-primary);
  color: var(--theme-text-inverse);
}

.message-body {
  border-color: var(--theme-border);
  color: var(--theme-text-primary);
}

/* Bulma Modal */
.modal-background {
  background-color: var(--theme-modal-backdrop);
}

.modal-card,
.modal-content {
  background-color: var(--theme-modal-bg);
}

.modal-card-head,
.modal-card-foot {
  background-color: var(--theme-surface);
  border-color: var(--theme-border);
}

.modal-card-title {
  color: var(--theme-text-primary);
}

.modal-card-body {
  background-color: var(--theme-modal-bg);
  color: var(--theme-text-primary);
}

/* Bulma Panel */
.panel {
  background-color: var(--theme-surface);
}

.panel-heading {
  background-color: var(--theme-table-header-bg);
  color: var(--theme-text-primary);
}

.panel-block {
  border-color: var(--theme-border);
  color: var(--theme-text-primary);
}

.panel-block:hover {
  background-color: var(--theme-bg-hover);
}

/* Bulma Table */
.table {
  background-color: var(--theme-table-bg);
  color: var(--theme-text-primary);
}

.table th {
  background-color: var(--theme-table-header-bg);
  color: var(--theme-text-primary);
}

.table td,
.table th {
  border-color: var(--theme-table-border);
}

.table tr:hover {
  background-color: var(--theme-table-row-hover);
}

.table.is-striped tbody tr:nth-child(even) {
  background-color: var(--theme-bg-secondary);
}

/* Bulma Tabs */
.tabs {
  border-bottom-color: var(--theme-border);
}

.tabs a {
  color: var(--theme-text-primary);
  border-bottom-color: var(--theme-border);
}

.tabs a:hover {
  border-bottom-color: var(--theme-text-primary);
  color: var(--theme-text-primary);
}

.tabs li.is-active a {
  border-bottom-color: var(--theme-primary);
  color: var(--theme-primary);
}

/* Bulma Tag */
.tag {
  background-color: var(--theme-bg-tertiary);
  color: var(--theme-text-primary);
}

.tag.is-primary {
  background-color: var(--theme-primary);
  color: var(--theme-text-inverse);
}

/* Bulma Title/Subtitle */
.title {
  color: var(--theme-text-primary);
}

.subtitle {
  color: var(--theme-text-secondary);
}

/* ============================================
   TEDIR COMPONENTS THEMING
   ============================================ */

/* Tedir Table */
.tedirTable {
  background-color: var(--theme-table-bg);
  color: var(--theme-text-primary);
}

.tedirTable th {
  background-color: var(--theme-table-header-bg);
  color: var(--theme-text-primary);
  border-color: var(--theme-table-border);
}

.tedirTable td {
  border-color: var(--theme-table-border);
  color: var(--theme-text-primary);
}

.tedirTable tr:hover {
  background-color: var(--theme-table-row-hover);
}

/* Tedir Select/Picker */
.pickerWrap {
  background-color: var(--theme-surface);
}

.pickerContent {
  background-color: var(--theme-surface);
  border-color: var(--theme-border);
  box-shadow: 0 4px 6px var(--theme-shadow);
}

.pickerItem {
  color: var(--theme-text-primary);
  background-color: var(--theme-surface);
}

.pickerItem:hover {
  background-color: var(--theme-bg-hover);
}

.pickerItem.active,
.pickerItem.selected {
  background-color: var(--theme-primary);
  color: var(--theme-text-inverse);
}

/* Tedir Calendar */
.tedirCalendar {
  background-color: var(--theme-surface);
  border-color: var(--theme-border);
}

.tedirCalendar .calendarHeader {
  background-color: var(--theme-table-header-bg);
  color: var(--theme-text-primary);
}

.tedirCalendar .calendarDay {
  color: var(--theme-text-primary);
}

.tedirCalendar .calendarDay:hover {
  background-color: var(--theme-bg-hover);
}

.tedirCalendar .calendarDay.active,
.tedirCalendar .calendarDay.selected {
  background-color: var(--theme-primary);
  color: var(--theme-text-inverse);
}

.tedirCalendar .calendarDay.today {
  border-color: var(--theme-primary);
}

/* Tedir Dropzone */
.tedirDropzone {
  background-color: var(--theme-bg-secondary);
  border-color: var(--theme-border);
  color: var(--theme-text-secondary);
}

.tedirDropzone:hover {
  border-color: var(--theme-primary);
  background-color: var(--theme-bg-hover);
}

/* ============================================
   AMCHARTS THEMING
   ============================================ */

/* AmCharts will inherit from these CSS variables */
.dark .am5-tooltip,
[data-mode="dark"] .am5-tooltip {
  background-color: var(--theme-surface);
  color: var(--theme-text-primary);
}

/* ============================================
   FORM COMPONENTS THEMING
   ============================================ */

/* All Input Types */
input[type="text"],
input[type="email"],
input[type="password"],
input[type="number"],
input[type="tel"],
input[type="url"],
input[type="search"],
input[type="date"],
input[type="time"],
input[type="datetime-local"],
input[type="month"],
input[type="week"],
textarea {
  background-color: var(--theme-input-bg);
  color: var(--theme-text-primary);
  border-color: var(--theme-input-border);
  transition: background-color 0.3s ease, border-color 0.3s ease, color 0.3s ease;
}

input[type="text"]:focus,
input[type="email"]:focus,
input[type="password"]:focus,
input[type="number"]:focus,
input[type="tel"]:focus,
input[type="url"]:focus,
input[type="search"]:focus,
input[type="date"]:focus,
input[type="time"]:focus,
input[type="datetime-local"]:focus,
input[type="month"]:focus,
input[type="week"]:focus,
textarea:focus {
  border-color: var(--theme-border-focus);
  outline: none;
  box-shadow: 0 0 0 2px rgba(115, 101, 255, 0.2);
}

.dark input[type="text"]:focus,
.dark input[type="email"]:focus,
.dark input[type="password"]:focus,
.dark input[type="number"]:focus,
[data-mode="dark"] input[type="text"]:focus,
[data-mode="dark"] input[type="email"]:focus,
[data-mode="dark"] input[type="password"]:focus,
[data-mode="dark"] input[type="number"]:focus {
  box-shadow: 0 0 0 2px rgba(167, 139, 250, 0.3);
}

input::placeholder,
textarea::placeholder {
  color: var(--theme-input-placeholder);
}

/* Select Elements */
select {
  background-color: var(--theme-input-bg);
  color: var(--theme-text-primary);
  border-color: var(--theme-input-border);
}

select:focus {
  border-color: var(--theme-border-focus);
  outline: none;
}

/* Checkbox and Radio */
input[type="checkbox"],
input[type="radio"] {
  accent-color: var(--theme-primary);
}

.dark input[type="checkbox"],
.dark input[type="radio"],
[data-mode="dark"] input[type="checkbox"],
[data-mode="dark"] input[type="radio"] {
  accent-color: var(--theme-accent);
}

/* Form Groups */
.field,
.form-group,
.control {
  color: var(--theme-text-primary);
}

.field .label,
.form-group label,
.control label {
  color: var(--theme-text-primary);
}

/* Help Text */
.help,
.form-text {
  color: var(--theme-text-muted);
}

.help.is-danger,
.form-text.text-danger {
  color: var(--theme-danger);
}

.help.is-success,
.form-text.text-success {
  color: var(--theme-success);
}

/* Input Groups */
.group,
.input-group {
  background-color: var(--theme-input-bg);
  border-color: var(--theme-input-border);
}

.group .groupItem,
.input-group .input-group-text {
  background-color: var(--theme-bg-tertiary);
  color: var(--theme-text-primary);
  border-color: var(--theme-input-border);
}

/* Fieldset and Legend */
fieldset {
  border-color: var(--theme-border);
  background-color: var(--theme-surface);
}

legend {
  color: var(--theme-text-primary);
  background-color: var(--theme-surface);
}

/* ============================================
   MODAL AND DIALOG THEMING
   ============================================ */

/* Generic Modal */
.modal {
  background-color: var(--theme-modal-backdrop);
}

.modal .modalContent,
.modal-content,
.modal-dialog {
  background-color: var(--theme-modal-bg);
  color: var(--theme-text-primary);
  border-color: var(--theme-border);
  box-shadow: 0 4px 20px var(--theme-shadow-lg);
}

.modal .modalHeader,
.modal-header {
  background-color: var(--theme-surface);
  color: var(--theme-text-primary);
  border-bottom: 1px solid var(--theme-border);
}

.modal .modalBody,
.modal-body {
  background-color: var(--theme-modal-bg);
  color: var(--theme-text-primary);
}

.modal .modalFooter,
.modal-footer {
  background-color: var(--theme-surface);
  border-top: 1px solid var(--theme-border);
}

/* Close Button */
.modal .close,
.modal-close,
.btn-close {
  color: var(--theme-text-secondary);
}

.modal .close:hover,
.modal-close:hover,
.btn-close:hover {
  color: var(--theme-text-primary);
}

/* Off-Canvas */
.offCanvas,
.offcanvas {
  background-color: var(--theme-surface);
  color: var(--theme-text-primary);
  border-color: var(--theme-border);
}

.offCanvasHeader,
.offcanvas-header {
  background-color: var(--theme-surface);
  border-bottom: 1px solid var(--theme-border);
}

.offCanvasBody,
.offcanvas-body {
  background-color: var(--theme-surface);
}

/* ============================================
   TABLE AND DATA DISPLAY THEMING
   ============================================ */

/* Table Responsive Wrapper */
.tableResponsive,
.table-responsive {
  background-color: var(--theme-table-bg);
}

/* Generic Tables */
table,
.table {
  background-color: var(--theme-table-bg);
  color: var(--theme-text-primary);
  border-collapse: collapse;
}

table th,
.table th {
  background-color: var(--theme-table-header-bg);
  color: var(--theme-text-primary);
  border-color: var(--theme-table-border);
  font-weight: 600;
}

table td,
.table td {
  border-color: var(--theme-table-border);
  color: var(--theme-text-primary);
}

table tr:hover,
.table tr:hover {
  background-color: var(--theme-table-row-hover);
}

table tr:nth-child(even),
.table tr:nth-child(even) {
  background-color: var(--theme-bg-secondary);
}

table tr.selected,
.table tr.selected {
  background-color: var(--theme-table-row-selected);
}

/* Data Lists */
.list,
.list-group {
  background-color: var(--theme-surface);
  border-color: var(--theme-border);
}

.list .listItem,
.list-group-item {
  background-color: var(--theme-surface);
  color: var(--theme-text-primary);
  border-color: var(--theme-border);
}

.list .listItem:hover,
.list-group-item:hover {
  background-color: var(--theme-bg-hover);
}

.list .listItem.active,
.list-group-item.active {
  background-color: var(--theme-primary);
  color: var(--theme-text-inverse);
  border-color: var(--theme-primary);
}

/* Pagination */
.pagination {
  background-color: var(--theme-surface);
}

.pagination .page-item .page-link {
  background-color: var(--theme-surface);
  color: var(--theme-text-primary);
  border-color: var(--theme-border);
}

.pagination .page-item .page-link:hover {
  background-color: var(--theme-bg-hover);
}

.pagination .page-item.active .page-link {
  background-color: var(--theme-primary);
  color: var(--theme-text-inverse);
  border-color: var(--theme-primary);
}

.dark .pagination .page-item.active .page-link,
[data-mode="dark"] .pagination .page-item.active .page-link {
  background-color: var(--theme-accent);
  border-color: var(--theme-accent);
}

/* ============================================
   CARD AND CONTAINER THEMING
   ============================================ */

/* Generic Cards */
.card {
  background-color: var(--theme-surface);
  color: var(--theme-text-primary);
  border: 1px solid var(--theme-border);
  box-shadow: 0 2px 4px var(--theme-shadow);
  transition: background-color 0.3s ease, border-color 0.3s ease;
}

.card .cardHeader,
.card-header {
  background-color: var(--theme-surface);
  color: var(--theme-text-primary);
  border-bottom: 1px solid var(--theme-border);
}

.card .cardBody,
.card-body {
  background-color: var(--theme-surface);
  color: var(--theme-text-primary);
}

.card .cardFooter,
.card-footer {
  background-color: var(--theme-surface);
  border-top: 1px solid var(--theme-border);
}

/* Banner */
.banner {
  background-color: var(--theme-surface);
  border-color: var(--theme-border);
  color: var(--theme-text-primary);
}

/* Boxes/Containers */
.box,
.container-box {
  background-color: var(--theme-surface);
  color: var(--theme-text-primary);
  border-color: var(--theme-border);
}

/* ============================================
   NOTIFICATION AND ALERT THEMING
   ============================================ */

/* Toast/Notifications */
.notification,
.toast {
  background-color: var(--theme-surface);
  color: var(--theme-text-primary);
  border-color: var(--theme-border);
  box-shadow: 0 4px 12px var(--theme-shadow);
}

.notification.is-primary,
.toast.bg-primary {
  background-color: var(--theme-primary);
  color: var(--theme-text-inverse);
}

.notification.is-success,
.toast.bg-success {
  background-color: var(--theme-success);
  color: var(--theme-text-inverse);
}

.notification.is-warning,
.toast.bg-warning {
  background-color: var(--theme-warning);
  color: var(--theme-text-inverse);
}

.notification.is-danger,
.toast.bg-danger {
  background-color: var(--theme-danger);
  color: var(--theme-text-inverse);
}

.notification.is-info,
.toast.bg-info {
  background-color: var(--theme-info);
  color: var(--theme-text-inverse);
}

/* Alert */
.alert {
  border-color: var(--theme-border);
}

.alert-primary {
  background-color: var(--theme-primary);
  color: var(--theme-text-inverse);
}

.alert-success {
  background-color: var(--theme-success-bg);
  color: var(--theme-success-text);
  border-color: var(--theme-success);
}

.alert-warning {
  background-color: var(--theme-warning-bg);
  color: var(--theme-warning-text);
  border-color: var(--theme-warning);
}

.alert-danger {
  background-color: var(--theme-danger-bg);
  color: var(--theme-danger-text);
  border-color: var(--theme-danger);
}

.alert-info {
  background-color: var(--theme-info-bg);
  color: var(--theme-info-text);
  border-color: var(--theme-info);
}

/* ============================================
   BADGE AND TAG THEMING
   ============================================ */

.badge,
.tag {
  background-color: var(--theme-bg-tertiary);
  color: var(--theme-text-primary);
}

.badge.is-primary,
.tag.is-primary {
  background-color: var(--theme-primary);
  color: var(--theme-text-inverse);
}

.badge.is-success,
.tag.is-success {
  background-color: var(--theme-success);
  color: var(--theme-text-inverse);
}

.badge.is-warning,
.tag.is-warning {
  background-color: var(--theme-warning);
  color: var(--theme-text-inverse);
}

.badge.is-danger,
.tag.is-danger {
  background-color: var(--theme-danger);
  color: var(--theme-text-inverse);
}

.badge.is-info,
.tag.is-info {
  background-color: var(--theme-info);
  color: var(--theme-text-inverse);
}

/* Dark mode purple badges */
.dark .badge.is-primary,
.dark .tag.is-primary,
[data-mode="dark"] .badge.is-primary,
[data-mode="dark"] .tag.is-primary {
  background-color: var(--theme-accent);
}

/* ============================================
   TOOLTIP THEMING
   ============================================ */

.tooltip,
[data-tooltip] {
  background-color: var(--theme-surface-elevated);
  color: var(--theme-text-primary);
  border: 1px solid var(--theme-border);
  box-shadow: 0 2px 8px var(--theme-shadow);
}

/* ============================================
   PROGRESS BAR THEMING
   ============================================ */

.progress {
  background-color: var(--theme-bg-tertiary);
}

.progress-bar,
.progress::-webkit-progress-value {
  background-color: var(--theme-primary);
}

.dark .progress-bar,
.dark .progress::-webkit-progress-value,
[data-mode="dark"] .progress-bar,
[data-mode="dark"] .progress::-webkit-progress-value {
  background-color: var(--theme-accent);
}

/* ============================================
   DROPDOWN THEMING
   ============================================ */

.dropdown-menu,
.dropDown,
.dropDownContent {
  background-color: var(--theme-surface);
  border: 1px solid var(--theme-border);
  box-shadow: 0 4px 12px var(--theme-shadow);
}

.dropdown-item,
.dropDownItem {
  color: var(--theme-text-primary);
  background-color: var(--theme-surface);
}

.dropdown-item:hover,
.dropDownItem:hover {
  background-color: var(--theme-bg-hover);
  color: var(--theme-text-primary);
}

.dropdown-item.active,
.dropDownItem.active {
  background-color: var(--theme-primary);
  color: var(--theme-text-inverse);
}

.dark .dropdown-item.active,
.dark .dropDownItem.active,
[data-mode="dark"] .dropdown-item.active,
[data-mode="dark"] .dropDownItem.active {
  background-color: var(--theme-accent);
}

/* ============================================
   ACCORDION THEMING
   ============================================ */

.accordion {
  background-color: var(--theme-surface);
  border-color: var(--theme-border);
}

.accordion-item {
  background-color: var(--theme-surface);
  border-color: var(--theme-border);
}

.accordion-header {
  background-color: var(--theme-surface);
}

.accordion-button {
  background-color: var(--theme-surface);
  color: var(--theme-text-primary);
}

.accordion-button:not(.collapsed) {
  background-color: var(--theme-bg-selected);
  color: var(--theme-primary);
}

.dark .accordion-button:not(.collapsed),
[data-mode="dark"] .accordion-button:not(.collapsed) {
  color: var(--theme-accent);
}

.accordion-body {
  background-color: var(--theme-surface);
  color: var(--theme-text-primary);
}

/* ============================================
   LOADING/SPINNER THEMING
   ============================================ */

.spinner,
.loader {
  border-color: var(--theme-border);
  border-top-color: var(--theme-primary);
}

.dark .spinner,
.dark .loader,
[data-mode="dark"] .spinner,
[data-mode="dark"] .loader {
  border-top-color: var(--theme-accent);
}

/* ============================================
   CODE/PRE THEMING
   ============================================ */

code,
pre {
  background-color: var(--theme-bg-tertiary);
  color: var(--theme-text-primary);
  border-color: var(--theme-border);
}

.dark code,
.dark pre,
[data-mode="dark"] code,
[data-mode="dark"] pre {
  background-color: var(--theme-bg-elevated);
}

/* ============================================
   HR/DIVIDER THEMING
   ============================================ */

hr,
.divider {
  border-color: var(--theme-border);
  background-color: var(--theme-border);
}

/* ============================================
   SKELETON LOADING THEMING
   ============================================ */

.skeleton {
  background: linear-gradient(
    90deg,
    var(--theme-bg-tertiary) 25%,
    var(--theme-bg-hover) 50%,
    var(--theme-bg-tertiary) 75%
  );
  background-size: 200% 100%;
  animation: skeleton-loading 1.5s infinite;
}

@keyframes skeleton-loading {
  0% {
    background-position: 200% 0;
  }
  100% {
    background-position: -200% 0;
  }
}

/* ============================================
   UTILITY CLASSES FOR THEME
   ============================================ */

/* Background utilities */
.bg-themed {
  background-color: var(--theme-surface) !important;
}

.bg-themed-secondary {
  background-color: var(--theme-bg-secondary) !important;
}

.bg-themed-elevated {
  background-color: var(--theme-bg-elevated) !important;
}

/* Text utilities */
.text-themed {
  color: var(--theme-text-primary) !important;
}

.text-themed-secondary {
  color: var(--theme-text-secondary) !important;
}

.text-themed-muted {
  color: var(--theme-text-muted) !important;
}

/* Border utilities */
.border-themed {
  border-color: var(--theme-border) !important;
}

/* Transition for smooth theme switching */
.theme-transition,
.theme-transition * {
  transition: background-color 0.3s ease, color 0.3s ease, border-color 0.3s ease !important;
}