/*
 * Dark theme for OK Tools
 * Uses CSS variables from _tokens.css
 * Activated via [data-theme="dark"]
 */

/* Dark styles apply when data-theme="dark" is set on the html element */
[data-theme="dark"] {
  /* Bootstrap 5 overrides */
  --bs-primary: #ff6600;
  --bs-primary-rgb: 255, 102, 0;
  --bs-link-color: #ff6600;
  --bs-link-hover-color: #ff9933;
  --bs-body-bg: #1a1a2e;
  --bs-body-color: #e9ecef;
  --bs-gray-100: #2d2d42;
  --bs-gray-200: #3a3a50;
  --bs-gray-300: #47475d;
  --bs-gray-400: #5a5a6d;
  --bs-gray-500: #7a7a8c;
  --bs-gray-600: #9a9aa8;
  --bs-gray-700: #babac4;
  --bs-gray-800: #d5d5df;
  --bs-gray-900: #f0f0f4;

  /* Semantic colors */
  --color-bg-primary: #1a1a2e;
  --color-bg-secondary: #252538;
  --color-bg-tertiary: #2f2f45;
  --color-bg-card: #252538;
  --color-bg-overlay: rgba(0, 0, 0, 0.7);

  --color-text-primary: #f8f9fa;
  --color-text-secondary: #adb5bd;
  --color-text-muted: #868e96;
  --color-text-white: #ffffff;

  --color-border: #3f3f55;
  --color-border-light: #34344a;
  --color-border-dark: #54546a;

  --color-success: #2dce89;
  --color-warning: #fb6340;
  --color-danger: #f5365c;
  --color-info: #11cdef;

  /* Component tokens */
  --card-bg: var(--color-bg-secondary);
  --card-border: var(--color-bg-tertiary);
  --card-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
  --input-border: #3f3f55;
  --input-focus-border: #ff6600;
  --input-focus-shadow: 0 0 0 0.25rem rgba(255, 102, 0, 0.25);

  /* Sidebar */
  --sidebar-bg: #252538;
  --sidebar-text: #f8f9fa;
  --sidebar-hover: rgba(255, 102, 0, 0.1);
  --sidebar-active: rgba(255, 102, 0, 0.2);
}

/* Additional component styles for the dark theme */
[data-theme="dark"] body,
[data-theme="dark"] .dashboard-body {
  background-color: var(--color-bg-primary);
  color: var(--color-text-primary);
}

/* Sidebar styles for the dark theme */
[data-theme="dark"] .sidebar {
  background: linear-gradient(135deg, var(--sidebar-bg) 100%, #2d2d42 100%);
}

@media (max-width: 991.98px) {
  [data-theme="dark"] .sidebar.show {
    background-color: transparent !important;
    background-image: none !important;
    backdrop-filter: none !important;
  }
}

/* Top navbar styles for the dark theme */
[data-theme="dark"] .top-navbar {
  background: var(--sidebar-bg);
  border-bottom-color: var(--color-border);
}

[data-theme="dark"] .top-navbar h4 {
  color: var(--color-text-white);
}

/* Dashboard card styles for the dark theme */
[data-theme="dark"] .dashboard-card {
  background: var(--card-bg) !important;
  border-color: var(--card-border);
  color: var(--color-text-primary);
}

[data-theme="dark"] .dashboard-card .card-header {
  background: var(--color-bg-tertiary) !important;
  border-bottom-color: var(--color-border-dark) !important;
}

[data-theme="dark"] .dashboard-card .card-body {
  background: var(--card-bg);
  color: var(--color-text-primary);
}

[data-theme="dark"] .card-title,
[data-theme="dark"] .widget-title,
[data-theme="dark"] .dashboard-card h1,
[data-theme="dark"] .dashboard-card h2,
[data-theme="dark"] .dashboard-card h3,
[data-theme="dark"] .dashboard-card h4,
[data-theme="dark"] .dashboard-card h5,
[data-theme="dark"] .dashboard-card h6 {
  color: var(--color-text-white) !important;
}

[data-theme="dark"] .card-subtitle,
[data-theme="dark"] .dashboard-card p,
[data-theme="dark"] .dashboard-card .text-muted {
  color: var(--color-text-secondary) !important;
}

[data-theme="dark"] .dashboard-card small {
  color: var(--color-text-secondary) !important;
}

/* Stats card styles for the dark theme */
[data-theme="dark"] .stats-number {
  color: var(--color-text-white);
}

[data-theme="dark"] .stats-label {
  color: var(--color-text-secondary);
}

/* Form control styles for the dark theme */
[data-theme="dark"] .form-control,
[data-theme="dark"] .form-select,
[data-theme="dark"] select,
[data-theme="dark"] input[type="text"],
[data-theme="dark"] input[type="email"],
[data-theme="dark"] input[type="password"],
[data-theme="dark"] input[type="date"],
[data-theme="dark"] input[type="tel"],
[data-theme="dark"] input[type="number"],
[data-theme="dark"] input[type="file"] {
  background-color: var(--card-bg);
  border-color: var(--input-border);
  color: var(--color-text-white);
}

[data-theme="dark"] input[type="file"]::file-selector-button {
  background-color: var(--color-bg-tertiary);
  border-color: var(--input-border);
  color: var(--color-text-white);
}

[data-theme="dark"] .form-control:focus,
[data-theme="dark"] .form-select:focus,
[data-theme="dark"] select:focus,
[data-theme="dark"] input:focus {
  background-color: var(--card-bg);
  border-color: var(--input-focus-border);
  color: var(--color-text-white);
  box-shadow: var(--input-focus-shadow);
}

[data-theme="dark"] .form-label,
[data-theme="dark"] label {
  color: var(--color-text-white) !important;
}

/* Form labels in the license create page - override inline styles */
[data-theme="dark"] #license-form .form-label,
[data-theme="dark"] #license-form label {
  color: var(--color-text-white) !important;
}

/* Table styles for the dark theme */
[data-theme="dark"] .table-card {
  background: var(--card-bg);
}

[data-theme="dark"] .table-card .table {
  color: var(--color-text-secondary);
}

[data-theme="dark"] .table-card .table th {
  background-color: var(--color-bg-tertiary);
  color: var(--color-text-white);
  border-color: var(--color-border);
}

[data-theme="dark"] .table-card .table td {
  border-color: var(--color-border);
  color: var(--color-text-secondary);
}

/* Button styles for the dark theme */
[data-theme="dark"] .btn-primary {
  background-color: var(--color-accent-500);
  border-color: var(--color-accent-500);
  color: var(--color-text-white);
}

[data-theme="dark"] .btn-primary:hover {
  background-color: var(--color-accent-400);
  border-color: var(--color-accent-400);
}

[data-theme="dark"] .btn-outline-primary {
  color: var(--color-accent-500);
  border-color: var(--color-accent-500);
  background-color: transparent;
}

[data-theme="dark"] .btn-outline-primary:hover {
  background-color: var(--color-accent-500);
  border-color: var(--color-accent-500);
  color: var(--color-text-white);
}

/* Link styles for the dark theme */
[data-theme="dark"] a {
  color: var(--color-accent-500);
}

[data-theme="dark"] a:hover {
  color: var(--color-accent-400);
}

/* Alert styles for the dark theme */
[data-theme="dark"] .alert-success {
  background-color: rgba(45, 206, 137, 0.2);
  border-color: var(--color-success);
  color: var(--color-success);
}

[data-theme="dark"] .alert-info {
  background-color: rgba(17, 205, 239, 0.2);
  border-color: var(--color-info);
  color: var(--color-info);
}

[data-theme="dark"] .alert-warning {
  background-color: rgba(251, 99, 64, 0.2);
  border-color: var(--color-warning);
  color: var(--color-warning);
}

[data-theme="dark"] .alert-danger {
  background-color: rgba(245, 54, 92, 0.2);
  border-color: var(--color-danger);
  color: var(--color-danger);
}

/* Text color styles for the dark theme */
[data-theme="dark"] .text-primary {
  color: var(--color-accent-500) !important;
}

/* Tooltip styles for the dark theme */
[data-theme="dark"] .tooltip,
[data-theme="dark"] .tooltip .tooltip-inner {
  color: var(--color-text-white);
}

[data-theme="dark"] .tooltip .tooltip-inner {
  background-color: #11111c;
  border: 1px solid var(--color-border);
}

[data-theme="dark"] .tooltip .tooltip-arrow::before {
  border-top-color: #11111c;
  border-bottom-color: #11111c;
}

/* Profile section styles for the dark theme */
[data-theme="dark"] .profile-name {
  color: var(--color-text-white);
}

[data-theme="dark"] .profile-email {
  color: var(--color-text-secondary);
}

[data-theme="dark"] .profile-meta-item {
  background-color: var(--color-bg-tertiary);
  color: var(--color-text-secondary);
}

/* Dropdown styles for the dark theme */
[data-theme="dark"] .dropdown-menu {
  background-color: var(--card-bg);
  border-color: var(--color-border);
}

[data-theme="dark"] .dropdown-item {
  color: var(--color-text-secondary);
}

[data-theme="dark"] .dropdown-item:hover {
  background-color: var(--color-bg-tertiary);
  color: var(--color-text-white);
}

[data-theme="dark"] .dropdown-header {
  background-color: var(--color-bg-tertiary);
  color: var(--color-text-white);
}

/* Modal styles for the dark theme */
[data-theme="dark"] .modal-content {
  background-color: var(--card-bg);
  color: var(--color-text-secondary);
}

[data-theme="dark"] .modal-header {
  border-bottom-color: var(--color-border);
  background-color: var(--color-bg-tertiary) !important;
}

[data-theme="dark"] .modal-header .modal-title {
  color: var(--color-text-white);
}

[data-theme="dark"] .modal-footer {
  border-top-color: var(--color-border);
  background-color: var(--color-bg-tertiary) !important;
}

[data-theme="dark"] .modal-body {
  color: var(--color-text-secondary);
}

/* Close button styles for the dark theme */
[data-theme="dark"] .btn-close {
  filter: invert(1) grayscale(100%) brightness(200%);
}

/* Select dropdown styles for the dark theme */
[data-theme="dark"] select option {
  background-color: var(--card-bg);
  color: var(--color-text-white);
}

/* Input group text styles for the dark theme */
[data-theme="dark"] .input-group-text {
  background-color: var(--color-bg-tertiary) !important;
  border-color: var(--color-border) !important;
  color: var(--color-text-white) !important;
}

/* Calendar picker icon styles for the dark theme */
[data-theme="dark"] input[type="datetime-local"]::-webkit-calendar-picker-indicator,
[data-theme="dark"] input[type="date"]::-webkit-calendar-picker-indicator {
  filter: invert(1) brightness(2);
  cursor: pointer;
  opacity: 0.9;
}

[data-theme="dark"] input[type="datetime-local"]::-webkit-calendar-picker-indicator:hover,
[data-theme="dark"] input[type="date"]::-webkit-calendar-picker-indicator:hover {
  opacity: 1;
}

/* Placeholder text styles for the dark theme */
[data-theme="dark"] .form-control::placeholder,
[data-theme="dark"] input::placeholder,
[data-theme="dark"] textarea::placeholder {
  color: var(--color-text-muted) !important;
  opacity: 1 !important;
}

/* Page content styles for the dark theme */
[data-theme="dark"] .page-content {
  background-color: var(--color-bg-primary);
}