/* static/css/dark-theme.css */
:root {
  --dark-bg: #121212;
  --dark-card-bg: #1e1e1e;
  --dark-text: #e0e0e0;
  --dark-text-secondary: #aaaaaa;
  --dark-border: #333333;
  --dark-input-bg: #2a2a2a;
  --dark-input-text: #e0e0e0;
  --dark-header-bg: #1a2332;
  --dark-section-bg: #1e1e1e;
  --dark-dropdown-bg: #252525;
  --dark-dropdown-hover: #333333;
  --dark-modal-bg: #1e1e1e;
  --dark-table-bg: #1e1e1e;
  --dark-table-border: #333333;
  --dark-table-hover: #252525;
  --dark-card-border: #333333;
}

html.dark-theme, html.dark-theme body, body.dark-theme {
  background: var(--dark-bg);
  color: var(--dark-text);
}

/* Login page styles */
body.dark-theme .login-card {
  background: var(--dark-card-bg);
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.2);
}

body.dark-theme .dashboard-title {
  color: #4da3ff;
}

body.dark-theme .form-label {
  color: var(--dark-text);
}

body.dark-theme .form-control {
  background-color: var(--dark-input-bg);
  border-color: var(--dark-border);
  color: var(--dark-input-text);
}

body.dark-theme .form-control:focus {
  background-color: var(--dark-input-bg);
  color: var(--dark-input-text);
  border-color: #4da3ff;
  box-shadow: 0 0 0 0.25rem rgba(77, 163, 255, 0.25);
}

body.dark-theme .text-muted {
  color: var(--dark-text-secondary) !important;
}

/* Header styles */
html.dark-theme .main-header, body.dark-theme .main-header {
  background: var(--dark-header-bg);
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.15);
}

body.dark-theme .app-title {
  color: #4da3ff;
}

body.dark-theme .page-title {
  color: #cccccc;
}

body.dark-theme .header-company-info {
  color: #aaaaaa;
}

body.dark-theme .header-company-info .fw-bold {
  color: #e0e0e0 !important;
}

/* Section styles */
html.dark-theme .section, body.dark-theme .section {
  background: var(--dark-section-bg);
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
  color: var(--dark-text);
}

body.dark-theme .section h1,
body.dark-theme .section h2,
body.dark-theme .section h3,
body.dark-theme .section h4,
body.dark-theme .section h5,
body.dark-theme .section h6 {
  color: var(--dark-text);
}

body.dark-theme .section.red {
  border-left-color: #d9534f !important;
  background-color: rgba(217, 83, 79, 0.1);
}

body.dark-theme .section.yellow {
  border-left-color: #f0ad4e !important;
  background-color: rgba(240, 173, 78, 0.1);
}

body.dark-theme .report-issue-section {
  background: var(--dark-section-bg);
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
  color: var(--dark-text);
}

/* Custom elements */
body.dark-theme .img-thumb {
  border-color: var(--dark-border);
  background: #1a1a1a;
}

/* Form elements */
html.dark-theme .form-select, body.dark-theme .form-select {
  background-color: var(--dark-input-bg);
  border-color: var(--dark-border);
  color: var(--dark-input-text);
}

/* Cards and UI elements */
html.dark-theme .card, body.dark-theme .card {
  background-color: var(--dark-card-bg);
  border-color: var(--dark-card-border);
}

body.dark-theme .card-header {
  background-color: rgba(0, 0, 0, 0.2);
  border-bottom-color: var(--dark-border);
}

body.dark-theme .card-footer {
  background-color: rgba(0, 0, 0, 0.2);
  border-top-color: var(--dark-border);
}

/* Dropdowns and menus */
body.dark-theme .dropdown-menu {
  background-color: var(--dark-dropdown-bg);
  border-color: var(--dark-border);
}

body.dark-theme .dropdown-item {
  color: var(--dark-text);
}

body.dark-theme .dropdown-item:hover,
body.dark-theme .dropdown-item:focus {
  background-color: var(--dark-dropdown-hover);
  color: var(--dark-text);
}

body.dark-theme .dropdown-divider {
  border-top-color: var(--dark-border);
}

/* Modals */
html.dark-theme .modal-content, body.dark-theme .modal-content {
  background-color: var(--dark-modal-bg);
  border-color: var(--dark-border);
}

body.dark-theme .modal-header {
  border-bottom-color: var(--dark-border);
}

body.dark-theme .modal-footer {
  border-top-color: var(--dark-border);
}

body.dark-theme .close {
  color: var(--dark-text);
  text-shadow: none;
}

/* Tables */
html.dark-theme .table, body.dark-theme .table {
  color: var(--dark-text);
}

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

body.dark-theme .table-hover tbody tr:hover {
  background-color: var(--dark-table-hover);
}

body.dark-theme .table-striped tbody tr:nth-of-type(odd) {
  background-color: rgba(255, 255, 255, 0.05);
}

body.dark-theme .table-bordered {
  border-color: var(--dark-table-border);
}

/* List groups */
body.dark-theme .list-group-item {
  background-color: var(--dark-card-bg);
  border-color: var(--dark-border);
  color: var(--dark-text);
}

body.dark-theme .list-group-item-action:hover,
body.dark-theme .list-group-item-action:focus {
  background-color: var(--dark-dropdown-hover);
  color: var(--dark-text);
}

/* Alerts */
body.dark-theme .alert {
  border-color: var(--dark-border);
}

body.dark-theme .alert-secondary {
  background-color: #2d3748;
  color: var(--dark-text);
}

/* Buttons */
body.dark-theme .btn-outline-dark {
  color: #adb5bd;
  border-color: #495057;
}

body.dark-theme .btn-outline-dark:hover {
  background-color: #495057;
  color: #e9ecef;
}

/* Pagination */
body.dark-theme .page-link {
  background-color: var(--dark-card-bg);
  border-color: var(--dark-border);
  color: var(--dark-text);
}

body.dark-theme .page-item.active .page-link {
  background-color: #2d89ef;
  border-color: #2d89ef;
}

body.dark-theme .page-item.disabled .page-link {
  background-color: var(--dark-card-bg);
  border-color: var(--dark-border);
  color: #6c757d;
}

/* Item Cards */
body.dark-theme .item-card {
  background: var(--dark-card-bg);
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
  color: var(--dark-text);
}

body.dark-theme .item-card--history {
  border-left: 5px solid #2d89ef;
}

body.dark-theme .item-card--issue {
  border-left: 5px solid #be13a0;
}

body.dark-theme .item-card__thumbnail {
  background: #1a1a1a;
  border-color: var(--dark-border);
}

body.dark-theme .item-card__note {
  color: var(--dark-text);
}

/* SVG elements */
body.dark-theme svg circle[fill="#eaf3fb"] {
  fill: #1a2332;
}

body.dark-theme svg path[stroke="#2d89ef"],
body.dark-theme svg circle[stroke="#2d89ef"] {
  stroke: #4da3ff;
}

/* Bootstrap overrides */
body.dark-theme .text-secondary {
  color: #9aa0a6 !important;
}

body.dark-theme .text-muted {
  color: #9aa0a6 !important;
}

body.dark-theme .text-dark {
  color: #e0e0e0 !important;
}

body.dark-theme .text-primary {
  color: #4da3ff !important;
}

body.dark-theme .border {
  border-color: var(--dark-border) !important;
}

body.dark-theme .border-bottom {
  border-bottom-color: var(--dark-border) !important;
}

body.dark-theme .border-top {
  border-top-color: var(--dark-border) !important;
}

body.dark-theme .bg-light {
  background-color: #252525 !important;
}

body.dark-theme .bg-white {
  background-color: var(--dark-card-bg) !important;
}

/* Upload spinner overlay */
body.dark-theme .upload-spinner-overlay {
  background: rgba(0, 0, 0, 0.7);
}

/* Form controls */
body.dark-theme .form-check-input {
  background-color: var(--dark-input-bg);
  border-color: var(--dark-border);
}

body.dark-theme .form-check-input:checked {
  background-color: #2d89ef;
  border-color: #2d89ef;
}

/* Badges */
body.dark-theme .badge.bg-secondary {
  background-color: #495057 !important;
}

/* Tooltips */
body.dark-theme .tooltip .tooltip-inner {
  background-color: #000;
  color: #fff;
}

body.dark-theme .tooltip .tooltip-arrow::before {
  border-top-color: #000;
}

/* Popovers */
body.dark-theme .popover {
  background-color: var(--dark-card-bg);
  border-color: var(--dark-border);
}

body.dark-theme .popover-header {
  background-color: rgba(0, 0, 0, 0.2);
  border-bottom-color: var(--dark-border);
}

body.dark-theme .popover-body {
  color: var(--dark-text);
}

/* Buttons */
body.dark-theme .btn-close {
  filter: invert(1) grayscale(100%) brightness(200%);
}

/* Theme switch positioning */
body .theme-switch-container {
  position: absolute;
  top: 15px;
  right: 15px;
}

/* For base template header */
header .theme-switch-container {
  position: relative;
  top: auto;
  right: auto;
  margin: 0;
}

/* Theme toggle switch */
.theme-switch {
  position: relative;
  display: inline-block;
  width: 50px;
  height: 24px;
}

.theme-switch input {
  opacity: 0;
  width: 0;
  height: 0;
}

.theme-switch-slider {
  position: absolute;
  cursor: pointer;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: #ccc;
  transition: .4s;
  border-radius: 24px;
}

.theme-switch-slider:before {
  position: absolute;
  content: "";
  height: 18px;
  width: 18px;
  left: 3px;
  bottom: 3px;
  background-color: white;
  transition: .4s;
  border-radius: 50%;
}

input:checked + .theme-switch-slider {
  background-color: #2d89ef;
}

input:focus + .theme-switch-slider {
  box-shadow: 0 0 1px #2d89ef;
}

input:checked + .theme-switch-slider:before {
  transform: translateX(26px);
}

.theme-switch-slider:after {
  content: "☀️";
  position: absolute;
  left: 6px;
  top: 3px;
  font-size: 12px;
  transition: .4s;
}

input:checked + .theme-switch-slider:after {
  content: "🌙";
  left: 28px;
}

.theme-switch-label {
  margin-right: 8px;
  font-size: 0.9rem;
  color: #666;
}

body.dark-theme .theme-switch-label {
  color: #aaa;
}

/* Schedule page specific styles */
body.dark-theme .schedule-gantt tbody tr td:first-child:hover,
body.dark-theme .day-view-grid .employee-name:hover {
  background-color: #333333 !important;
}

body.dark-theme .day-slot {
  background-image: linear-gradient(to right, #333333 1px, transparent 1px) !important;
}

body.dark-theme .day-slot.unavailable-permanent {
  background-color: #333333 !important;
}

body.dark-theme .day-slot.unavailable-permanent::after {
  color: #aaaaaa !important;
}

body.dark-theme .day-slot.unavailable-temporary {
  background-color: #3a3000 !important;
}

body.dark-theme .day-slot.unavailable-temporary::after {
  color: #ffd970 !important;
}

body.dark-theme .day-view-grid .employee-name {
  background-color: #252525 !important;
  border-color: var(--dark-border) !important;
  color: var(--dark-text) !important;
}

body.dark-theme .bar-background {
  background-color: #333333 !important;
}

body.dark-theme .table-light {
  background-color: #252525 !important;
  color: var(--dark-text) !important;
}

body.dark-theme .table-bordered {
  border-color: var(--dark-border) !important;
}

body.dark-theme .table-bordered th,
body.dark-theme .table-bordered td {
  border-color: var(--dark-border) !important;
}

body.dark-theme .table-light th,
body.dark-theme .table-light td {
  border-color: var(--dark-border) !important;
}

body.dark-theme .shift-bar {
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.5) !important;
  border: 1px solid rgba(0, 0, 0, 0.3) !important;
}

/* Fix for white backgrounds in schedule page */
body.dark-theme .day-view-grid {
  border-top-color: var(--dark-border) !important;
}

body.dark-theme .form-select option {
  background-color: var(--dark-input-bg);
  color: var(--dark-input-text);
}

/* Custom popup styles for dark theme */
body.dark-theme .custom-popup {
  background-color: var(--dark-modal-bg) !important;
  border-color: var(--dark-border) !important;
  color: var(--dark-text) !important;
}

body.dark-theme .custom-popup .title {
  color: var(--dark-text) !important;
}

/* Drag tooltip */
body.dark-theme .drag-tooltip {
  background: #000 !important;
  color: #fff !important;
}

/* Batch selection styles */
body.dark-theme .day-slot.batch-selected {
  background-color: rgba(77, 163, 255, 0.3) !important;
  border: 2px solid #4da3ff !important;
}

/* Context menu styles */
body.dark-theme .context-menu-item {
  background-color: var(--dark-dropdown-bg);
  color: var(--dark-text);
  border-bottom-color: var(--dark-border);
}

body.dark-theme .context-menu-item:hover {
  background-color: var(--dark-dropdown-hover) !important;
}

body.dark-theme .context-menu-item.danger:hover {
  background-color: rgba(220, 53, 69, 0.2) !important;
}

body.dark-theme .context-menu-item.warning:hover {
  background-color: rgba(255, 193, 7, 0.2) !important;
}

/* Fix remaining white backgrounds and dark text */
body.dark-theme .schedule-gantt,
body.dark-theme .schedule-gantt tbody,
body.dark-theme .schedule-gantt tbody tr,
body.dark-theme .schedule-gantt tbody tr td {
  background-color: var(--dark-card-bg) !important;
  color: var(--dark-text) !important;
}

body.dark-theme .schedule-gantt thead th {
  background-color: #252525 !important;
  color: var(--dark-text) !important;
}

body.dark-theme .day-view-grid > div:first-child {
  background-color: #252525 !important;
  color: var(--dark-text) !important;
}

body.dark-theme .hours-summary-chart .employee-hours-row .name {
  color: var(--dark-text) !important;
}

body.dark-theme .hours-label {
  color: var(--dark-text) !important;
}

body.dark-theme .text-muted.fst-italic,
body.dark-theme .text-muted.d-block {
  color: #aaaaaa !important;
}

body.dark-theme small.text-muted {
  color: #aaaaaa !important;
}

/* Schedule Settings section */
body.dark-theme .form-control-sm {
  background-color: var(--dark-input-bg) !important;
  border-color: var(--dark-border) !important;
  color: var(--dark-input-text) !important;
}

body.dark-theme .form-select-sm {
  background-color: var(--dark-input-bg) !important;
  border-color: var(--dark-border) !important;
  color: var(--dark-input-text) !important;
}

body.dark-theme .table-sm th,
body.dark-theme .table-sm td {
  background-color: var(--dark-card-bg) !important;
  color: var(--dark-text) !important;
  border-color: var(--dark-border) !important;
}

/* Card titles and headings */
body.dark-theme .card-header h5,
body.dark-theme .card-title,
body.dark-theme h1, body.dark-theme h2, body.dark-theme h3, 
body.dark-theme h4, body.dark-theme h5, body.dark-theme h6 {
  color: var(--dark-text) !important;
}