/**
 * Theme styles for Terniq AI Dashboard
 * Includes light/dark mode and color scheme variables
 */

/* CSS Variables for light theme */
:root[data-theme="light"] {
  --bg-main: #f8f9fa;
  --bg-card: #ffffff;
  --bg-sidebar: #ffffff;
  --bg-header: #ffffff;
  --bg-hover: #f1f3f5;
  --bg-active: #e9ecef;
  --border-color: #dee2e6;
  --text-primary: #212529;
  --text-secondary: #6c757d;
  --text-muted: #868e96;
  --shadow-sm: 0 .125rem .25rem rgba(0, 0, 0, .075);
  --shadow: 0 .5rem 1rem rgba(0, 0, 0, .15);
}

/* CSS Variables for dark theme */
:root[data-theme="dark"] {
  --bg-main: #212529;
  --bg-card: #343a40;
  --bg-sidebar: #343a40;
  --bg-header: #343a40;
  --bg-hover: #495057;
  --bg-active: #6c757d;
  --border-color: #495057;
  --text-primary: #f8f9fa;
  --text-secondary: #ced4da;
  --text-muted: #adb5bd;
  --shadow-sm: 0 .125rem .25rem rgba(0, 0, 0, .3);
  --shadow: 0 .5rem 1rem rgba(0, 0, 0, .5);
}

/* System theme preference handling */
@media (prefers-color-scheme: dark) {
  :root[data-theme="auto"] {
    --bg-main: #212529;
    --bg-card: #343a40;
    --bg-sidebar: #343a40;
    --bg-header: #343a40;
    --bg-hover: #495057;
    --bg-active: #6c757d;
    --border-color: #495057;
    --text-primary: #f8f9fa;
    --text-secondary: #ced4da;
    --text-muted: #adb5bd;
    --shadow-sm: 0 .125rem .25rem rgba(0, 0, 0, .3);
    --shadow: 0 .5rem 1rem rgba(0, 0, 0, .5);
  }
}

@media (prefers-color-scheme: light) {
  :root[data-theme="auto"] {
    --bg-main: #f8f9fa;
    --bg-card: #ffffff;
    --bg-sidebar: #ffffff;
    --bg-header: #ffffff;
    --bg-hover: #f1f3f5;
    --bg-active: #e9ecef;
    --border-color: #dee2e6;
    --text-primary: #212529;
    --text-secondary: #6c757d;
    --text-muted: #868e96;
    --shadow-sm: 0 .125rem .25rem rgba(0, 0, 0, .075);
    --shadow: 0 .5rem 1rem rgba(0, 0, 0, .15);
  }
}

/* Color scheme variables */
:root {
  /* Default color scheme */
  --primary-color: #1a9bd7;
  --primary-hover: #1689bf;
  --primary-active: #126d9a;
  --secondary-color: #6c757d;
  --success-color: #28a745;
  --danger-color: #dc3545;
  --warning-color: #ffc107;
  --info-color: #17a2b8;
}

/* Color scheme: Blue */
body.color-scheme-blue {
  --primary-color: #0d6efd;
  --primary-hover: #0b5ed7;
  --primary-active: #0a58ca;
}

/* Color scheme: Green */
body.color-scheme-green {
  --primary-color: #198754;
  --primary-hover: #157347;
  --primary-active: #146c43;
}

/* Color scheme: Purple */
body.color-scheme-purple {
  --primary-color: #6f42c1;
  --primary-hover: #6610f2;
  --primary-active: #5a0bce;
}

/* Color scheme: Orange */
body.color-scheme-orange {
  --primary-color: #fd7e14;
  --primary-hover: #e46c08;
  --primary-active: #c5590a;
}

/* Color scheme: Red */
body.color-scheme-red {
  --primary-color: #dc3545;
  --primary-hover: #bb2d3b;
  --primary-active: #a52834;
}

/* Apply theme variables to elements */
body {
  background-color: var(--bg-main);
  color: var(--text-primary);
  transition: background-color 0.3s ease, color 0.3s ease;
}

.navbar {
  background-color: var(--bg-header);
  border-bottom: 1px solid var(--border-color);
}

.sidebar {
  background-color: var(--bg-sidebar);
  border-right: 1px solid var(--border-color);
}

.card {
  background-color: var(--bg-card);
  border: 1px solid var(--border-color);
  box-shadow: var(--shadow-sm);
}

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

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

.btn-primary:active, .btn-primary:focus {
  background-color: var(--primary-active);
  border-color: var(--primary-active);
}

.text-primary {
  color: var(--primary-color) !important;
}

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

.table {
  color: var(--text-primary);
}

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

.table-hover tbody tr:hover {
  background-color: var(--bg-hover);
}

.list-group-item {
  background-color: var(--bg-card);
  border-color: var(--border-color);
  color: var(--text-primary);
}

.form-control {
  background-color: var(--bg-card);
  border-color: var(--border-color);
  color: var(--text-primary);
}

.form-control:focus {
  background-color: var(--bg-card);
  color: var(--text-primary);
}

.dropdown-menu {
  background-color: var(--bg-card);
  border-color: var(--border-color);
}

.dropdown-item {
  color: var(--text-primary);
}

.dropdown-item:hover {
  background-color: var(--bg-hover);
}

/* Color transitions */
*, *::before, *::after {
  transition: background-color 0.3s ease, border-color 0.3s ease, color 0.3s ease;
}

/* Theme settings panel animation */
.theme-settings-container {
  transition: transform 0.3s ease-in-out;
}

.notification {
  transition: opacity 0.3s ease;
}

/* Chart color overrides for dark mode */
:root[data-theme="dark"] .chartjs-render-monitor {
  filter: invert(1) hue-rotate(180deg);
}

@media (prefers-color-scheme: dark) {
  :root[data-theme="auto"] .chartjs-render-monitor {
    filter: invert(1) hue-rotate(180deg);
  }
}

/* Table overrides for dark mode */
:root[data-theme="dark"] .table {
  border-color: var(--border-color);
}

@media (prefers-color-scheme: dark) {
  :root[data-theme="auto"] .table {
    border-color: var(--border-color);
  }
}

/* Theme toggle button styling */
#theme-toggle-btn {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background-color: var(--bg-card);
  color: var(--primary-color);
  border: 1px solid var(--border-color);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all 0.3s ease;
  box-shadow: var(--shadow-sm);
}

#theme-toggle-btn:hover {
  background-color: var(--bg-hover);
}

/* Theme settings button styling */
#theme-settings-btn {
  padding: 0.5rem 1rem;
  background-color: var(--bg-card);
  color: var(--text-primary);
  border: 1px solid var(--border-color);
  border-radius: 0.25rem;
  cursor: pointer;
  transition: all 0.3s ease;
}

#theme-settings-btn:hover {
  background-color: var(--bg-hover);
}

/* Animation for theme toggle */
.theme-transition {
  animation: theme-fade 0.5s ease;
}

@keyframes theme-fade {
  0% { opacity: 0.7; }
  100% { opacity: 1; }
}