/*
 * ERPC Theme Variables
 *
 * CSS custom properties for light/dark theme support.
 * Uses Bootstrap 5.3's data-bs-theme attribute for switching.
 *
 * Usage: var(--bg-body), var(--text-primary), etc.
 */

:root {
  /* ===== Background Colors ===== */
  --bg-body: #ffffff;
  --bg-surface: #f8f9fa;
  --bg-surface-raised: #ffffff;
  --bg-surface-sunken: #f1f3f5;
  --bg-muted: #e9ecef;
  --bg-hover: #f0f0f0;
  --bg-overlay: rgba(0, 0, 0, 0.5);

  /* ===== Text Colors ===== */
  --text-primary: #212529;
  --text-secondary: #6c757d;
  --text-muted: #495057;
  --text-inverse: #ffffff;
  --text-link: #0d6efd;
  --text-link-hover: #0a58ca;

  /* ===== Border Colors ===== */
  --border-default: #dee2e6;
  --border-light: #e9ecef;
  --border-emphasis: #adb5bd;
  --border-focus: #86b7fe;

  /* ===== Status Colors - Success ===== */
  --color-success: var(--bs-success, #198754);
  --color-success-bg: #d1e7dd;
  --color-success-bg-subtle: #f8fff9;
  --color-success-text: #0f5132;
  --color-success-border: #badbcc;

  /* ===== Status Colors - Danger ===== */
  --color-danger: var(--bs-danger, #dc3545);
  --color-danger-bg: #f8d7da;
  --color-danger-bg-subtle: #fff5f5;
  --color-danger-text: #842029;
  --color-danger-border: #f5c2c7;

  /* ===== Status Colors - Warning ===== */
  --color-warning: var(--bs-warning, #ffc107);
  --color-warning-bg: #fff3cd;
  --color-warning-bg-subtle: #fffdf5;
  --color-warning-text: #664d03;
  --color-warning-text-alt: #856404;
  --color-warning-border: #ffecb5;

  /* ===== Status Colors - Info ===== */
  --color-info: var(--bs-info, #0dcaf0);
  --color-info-bg: #cff4fc;
  --color-info-bg-subtle: #f0fcff;
  --color-info-text: #055160;
  --color-info-border: #b6effb;

  /* ===== Primary/Brand Colors ===== */
  --color-primary: var(--bs-primary, #0d6efd);
  --color-primary-hover: #0b5ed7;
  --color-primary-bg: #cfe2ff;
  --color-primary-text: #084298;

  /* ===== Accent Colors ===== */
  --color-purple: #6f42c1;
  --color-orange: #ff6b35;
  --color-fire: #ff6b35;

  /* ===== Auth/Signin Page ===== */
  --signin-gradient-start: #A80000;
  --signin-gradient-end: #500f0f;
  --signin-card-bg: #ffffff;
  --signin-title: #333333;
  --signin-subtitle: #666666;
  --signin-footer-border: #e0e0e0;

  /* ===== Shadow Colors ===== */
  --shadow-color: rgba(0, 0, 0, 0.1);
  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.1);
  --shadow-md: 0 4px 6px rgba(0, 0, 0, 0.15);
  --shadow-lg: 0 10px 15px rgba(0, 0, 0, 0.2);
  --shadow-xl: 0 20px 25px rgba(0, 0, 0, 0.25);

  /* ===== Overlay Colors ===== */
  --overlay-light: rgba(255, 255, 255, 0.5);
  --overlay-dark: rgba(0, 0, 0, 0.5);
  --overlay-hover: rgba(0, 0, 0, 0.05);

  /* ===== Component-Specific ===== */
  --card-bg: var(--bg-surface-raised);
  --card-border: var(--border-default);
  --modal-bg: var(--bg-surface-raised);
  --modal-backdrop: rgba(0, 0, 0, 0.5);
  --drawer-bg: var(--bg-surface-raised);
  --dropdown-bg: var(--bg-surface-raised);
  --dropdown-border: var(--border-default);
  --input-bg: var(--bg-body);
  --input-border: var(--border-default);
  --input-focus-border: var(--border-focus);
  --table-bg: var(--bg-body);
  --table-stripe-bg: var(--bg-surface);
  --table-hover-bg: var(--bg-hover);
  --nav-bg: var(--bg-surface);
  --nav-link-color: var(--text-secondary);
  --nav-link-hover-color: var(--text-primary);
  --toast-bg: var(--bg-surface-raised);
  --tooltip-bg: #212529;
  --tooltip-text: #ffffff;

  /* ===== Scrollbar (for custom scrollbar styling) ===== */
  --scrollbar-track: var(--bg-surface);
  --scrollbar-thumb: var(--border-emphasis);
  --scrollbar-thumb-hover: var(--text-secondary);

  /* ===== Sidebar (dark background in both modes) ===== */
  --sidebar-text: #ffffff;
  --sidebar-text-muted: #d7d7d7;
  --sidebar-hover: rgba(255, 255, 255, 0.1);
  --sidebar-active: rgba(255, 255, 255, 0.37);
  --sidebar-border: rgba(255, 255, 255, 0.2);
}

/* ===== Dark Mode ===== */
[data-bs-theme="dark"] {
  /* ===== Background Colors ===== */
  --bg-body: #121212;
  --bg-surface: #1e1e1e;
  --bg-surface-raised: #2d2d2d;
  --bg-surface-sunken: #0a0a0a;
  --bg-muted: #3d3d3d;
  --bg-hover: #3a3a3a;
  --bg-overlay: rgba(0, 0, 0, 0.7);

  /* ===== Text Colors ===== */
  --text-primary: #e4e4e4;
  --text-secondary: #a0a0a0;
  --text-muted: #808080;
  --text-inverse: #121212;
  --text-link: #6ea8fe;
  --text-link-hover: #9ec5fe;

  /* ===== Border Colors ===== */
  --border-default: #404040;
  --border-light: #333333;
  --border-emphasis: #606060;
  --border-focus: #6ea8fe;

  /* ===== Status Colors - Success (Dark) ===== */
  --color-success-bg: #0f3d2c;
  --color-success-bg-subtle: #0d2818;
  --color-success-text: #75d9a3;
  --color-success-border: #1a5d3f;

  /* ===== Status Colors - Danger (Dark) ===== */
  --color-danger-bg: #4a1c1f;
  --color-danger-bg-subtle: #2d1012;
  --color-danger-text: #f5a3a8;
  --color-danger-border: #6b2529;

  /* ===== Status Colors - Warning (Dark) ===== */
  --color-warning-bg: #4a3c0a;
  --color-warning-bg-subtle: #2d2506;
  --color-warning-text: #ffe066;
  --color-warning-text-alt: #ffd43b;
  --color-warning-border: #6b570f;

  /* ===== Status Colors - Info (Dark) ===== */
  --color-info-bg: #0a3d4a;
  --color-info-bg-subtle: #062530;
  --color-info-text: #6edff6;
  --color-info-border: #0f5a6b;

  /* ===== Primary/Brand Colors (Dark) ===== */
  --color-primary-hover: #4d94ff;
  --color-primary-bg: #1a3a5c;
  --color-primary-text: #9ec5fe;

  /* ===== Accent Colors (Dark) ===== */
  --color-purple: #9d7dd9;
  --color-orange: #ff8c5a;
  --color-fire: #ff8c5a;

  /* ===== Auth/Signin Page (Dark) - intentionally same as light for brand consistency ===== */
  --signin-gradient-start: #A80000;
  --signin-gradient-end: #500f0f;
  --signin-card-bg: #2d2d2d;
  --signin-title: #e4e4e4;
  --signin-subtitle: #a0a0a0;
  --signin-footer-border: #404040;

  /* ===== Shadow Colors (Dark) ===== */
  --shadow-color: rgba(0, 0, 0, 0.4);
  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.3);
  --shadow-md: 0 4px 6px rgba(0, 0, 0, 0.4);
  --shadow-lg: 0 10px 15px rgba(0, 0, 0, 0.5);
  --shadow-xl: 0 20px 25px rgba(0, 0, 0, 0.6);

  /* ===== Overlay Colors (Dark) ===== */
  --overlay-light: rgba(255, 255, 255, 0.1);
  --overlay-dark: rgba(0, 0, 0, 0.7);
  --overlay-hover: rgba(255, 255, 255, 0.05);

  /* ===== Component-Specific (Dark) ===== */
  --tooltip-bg: #e4e4e4;
  --tooltip-text: #121212;

  /* ===== Scrollbar (Dark) ===== */
  --scrollbar-track: var(--bg-surface-sunken);
  --scrollbar-thumb: var(--border-emphasis);
  --scrollbar-thumb-hover: var(--text-secondary);

  /* ===== Sidebar (same in dark mode - always dark background) ===== */
  --sidebar-text: #ffffff;
  --sidebar-text-muted: #d7d7d7;
  --sidebar-hover: rgba(255, 255, 255, 0.1);
  --sidebar-active: rgba(255, 255, 255, 0.37);
  --sidebar-border: rgba(255, 255, 255, 0.2);
}

/* Dark mode heading colors */
[data-bs-theme="dark"] h1,
[data-bs-theme="dark"] h2,
[data-bs-theme="dark"] h3,
[data-bs-theme="dark"] h4,
[data-bs-theme="dark"] h5,
[data-bs-theme="dark"] h6,
[data-bs-theme="dark"] .h1,
[data-bs-theme="dark"] .h2,
[data-bs-theme="dark"] .h3,
[data-bs-theme="dark"] .h4,
[data-bs-theme="dark"] .h5,
[data-bs-theme="dark"] .h6 {
  color: #ffffff !important;
}

/* ===== Utility Classes ===== */

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

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

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

/* Card/Surface styling */
.surface-card {
  background-color: var(--bg-surface-raised);
  border: 1px solid var(--border-default);
  color: var(--text-primary);
}

/* Status backgrounds */
.bg-success-subtle { background-color: var(--color-success-bg) !important; }
.bg-danger-subtle { background-color: var(--color-danger-bg) !important; }
.bg-warning-subtle { background-color: var(--color-warning-bg) !important; }
.bg-info-subtle { background-color: var(--color-info-bg) !important; }