/* Intellecta Modern Design System */
:root {
  /* Colors - Primary */
  --color-primary: #6366f1;
  /* Indigo 500 */
  --color-primary-light: #818cf8;
  /* Indigo 400 */
  --color-primary-dark: #4f46e5;
  /* Indigo 600 */

  /* Colors - Secondary */
  --color-secondary: #10b981;
  /* Emerald 500 */
  --color-secondary-light: #34d399;
  /* Emerald 400 */
  --color-secondary-dark: #059669;
  /* Emerald 600 */

  /* Colors - Grays */
  --gray-50: #F8FAFC;
  --gray-100: #F1F5F9;
  --gray-200: #E2E8F0;
  --gray-300: #CBD5E1;
  --gray-400: #94A3B8;
  --gray-500: #64748B;
  --gray-900: #0F172A;

  /* Colors - Accents */
  --color-success: #22C55E;
  --color-warning: #F59E0B;
  --color-error: #EF4444;

  /* Typography */
  --font-family: 'Inter', sans-serif;
  --font-heading: 700;
  --font-body: 400;

  /* Theme Variables - Default Light */
  --bg-body: #f8fafc;
  --bg-card: #ffffff;
  --bg-sidebar: #ffffff;
  --text-main: #0f172a;
  --text-muted: #64748b;
  --border-color: #e2e8f0;

  --shadow-sm: 0 1px 2px 0 rgb(0 0 0 / 0.05);
  --shadow-md: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
}

[data-theme='dark'] {
  --color-primary: #818cf8;
  --color-primary-hover: #6366f1;

  --bg-body: #0f172a;
  --bg-card: #1e293b;
  --bg-sidebar: #1e293b;

  --text-main: #f8fafc;
  --text-muted: #94a3b8;
  --border-color: #334155;

  --shadow-sm: 0 1px 2px 0 rgb(0 0 0 / 0.3);
  --shadow-md: 0 4px 6px -1px rgb(0 0 0 / 0.3), 0 2px 4px -2px rgb(0 0 0 / 0.3);
}

/* Global Styles */
body {
  font-family: var(--font-family);
  background-color: var(--bg-body) !important;
  color: var(--text-main) !important;
  min-height: 100vh;
  transition: background-color 0.3s ease, color 0.3s ease;
}

/* Modern Card Utility */
.modern-card,
.box,
.info-box,
.small-box,
.nav-tabs-custom {
  background-color: var(--bg-card) !important;
  border: 1px solid var(--border-color) !important;
  border-radius: 0.75rem !important;
  /* 12px */
  box-shadow: var(--shadow-sm) !important;
  color: var(--text-main) !important;
}

/* Form Controls */
.form-control,
.select2-container--default .select2-selection--single {
  background-color: var(--bg-card) !important;
  border-color: var(--border-color) !important;
  color: var(--text-main) !important;
}

/* Sidebar Component */
.modern-sidebar {
  background-color: var(--bg-sidebar);
  border-right: 1px solid var(--border-color);
}

.modern-sidebar .menu-item {
  color: var(--text-muted);
  border-radius: 0.75rem;
}

.modern-sidebar .menu-item:hover,
.modern-sidebar .menu-item.active {
  background-color: rgba(99, 102, 241, 0.1);
  color: var(--color-primary);
}

/* Button Overrides */
.btn-default {
  background-color: var(--bg-card) !important;
  border: 1px solid var(--border-color) !important;
  color: var(--text-main) !important;
}

.btn-default:hover {
  background-color: var(--border-color) !important;
  color: var(--text-main) !important;
}

/* Dark Mode Specific Overrides */
[data-theme='dark'] .table-striped>tbody>tr:nth-of-type(odd) {
  background-color: rgba(255, 255, 255, 0.05) !important;
}

[data-theme='dark'] .table-hover>tbody>tr:hover {
  background-color: rgba(255, 255, 255, 0.1) !important;
}

[data-theme='dark'] .table {
  color: var(--text-main) !important;
  background-color: var(--bg-card) !important;
}

[data-theme='dark'] .table th,
[data-theme='dark'] .table td {
  border-color: var(--border-color) !important;
  color: var(--text-main) !important;
}

/* Ensure dataTables wrapper text is visible */
[data-theme='dark'] .dataTables_wrapper {
  color: var(--text-main) !important;
}

[data-theme='dark'] .dataTables_info,
[data-theme='dark'] .dataTables_paginate {
  color: var(--text-muted) !important;
}

/* Fix Chart Backgrounds */
[data-theme='dark'] rect.highcharts-background {
  fill: var(--bg-card) !important;
}

[data-theme='dark'] .highcharts-title,
[data-theme='dark'] .highcharts-axis-title,
[data-theme='dark'] .highcharts-axis-labels text {
  fill: var(--text-muted) !important;
}

/* Mobile Responsiveness Tweaks */
@media (max-width: 768px) {
  .modern-card {
    margin-bottom: 1rem;
  }

  .pos-form-actions {
    flex-direction: column;
    width: 100%;
  }
}

/* Header & Navbar Tweaks */
.glass-header {
  background-color: rgba(255, 255, 255, 0.95);
  /* Higher opacity for light mode */
  backdrop-filter: blur(12px);
  border-bottom: 1px solid #e2e8f0;
  /* Visible border (gray-200) */
  box-shadow: 0 1px 2px 0 rgb(0 0 0 / 0.05);
  /* Subtle shadow */
}

[data-theme='dark'] .glass-header {
  background-color: rgba(15, 23, 42, 0.85) !important;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1) !important;
  box-shadow: none;
}

.header-action-btn {
  color: #475569;
  /* Slate-600, darker than text-muted */
  font-weight: 600;
}

.header-action-btn:hover {
  color: #0f172a;
  /* Slate-900 on hover */
  background-color: #f1f5f9;
}

[data-theme='dark'] .header-action-btn {
  color: var(--text-main) !important;
}

[data-theme='dark'] .header-action-btn:hover {
  color: var(--text-main) !important;
  background-color: rgba(255, 255, 255, 0.1) !important;
}

/* Ensure Logo/Text in header is visible */
[data-theme='dark'] .navbar-brand,
[data-theme='dark'] h1,
[data-theme='dark'] h2,
[data-theme='dark'] h3 {
  color: var(--text-main);
}