/* ===== LIGHT MODE THEME ===== */
/* Clean, professional, bold colors, minimal shadows */

body.light-mode {
  background: #ffffff;
  color: #0f172a;
}

body.light-mode h1 {
  color: #0f172a;
}

body.light-mode h2 {
  color: #0f172a;
}

body.light-mode h3 {
  color: #0f172a;
}

body.light-mode p {
  color: #475569;
}

/* ===== SIDEBAR ===== */

body.light-mode .sidebar {
  background: #f8fafc;
  border-right: 1px solid #e2e8f0;
}

body.light-mode .logo img {
  opacity: 1;
}

body.light-mode #project-name {
  border: 1px solid #cbd5e1;
  background: #ffffff;
  color: #0f172a;
}

body.light-mode #project-name::placeholder {
  color: #94a3b8;
}

body.light-mode #project-name:focus {
  border-color: #3b82f6;
  background: #ffffff;
}

body.light-mode .add-project-btn {
  background: #3b82f6;
  color: white;
}

body.light-mode .add-project-btn:hover {
  background: #2563eb;
}

body.light-mode .select-project {
  border-top: 1px solid #e2e8f0;
}

body.light-mode .select-project p {
  color: #64748b;
}

body.light-mode .project-select,
body.light-mode #project-select {
  border: 1px solid #cbd5e1;
  background: #ffffff;
  color: #0f172a;
}

body.light-mode .project-select:hover,
body.light-mode #project-select:hover {
  border-color: #3b82f6;
  background: #ffffff;
}

body.light-mode .project-select:focus,
body.light-mode #project-select:focus {
  border-color: #3b82f6;
}

body.light-mode .logout {
  background: #f8fafc;
  color: #ef4444;
  border: 1px solid #e2e8f0;
}

body.light-mode .logout:hover {
  background: #f1f5f9;
  border-color: #ef4444;
}

body.light-mode .theme-toggle-container {
  border-top: 1px solid #e2e8f0;
}

body.light-mode .theme-toggle-label {
  color: #64748b;
}

body.light-mode .theme-toggle {
  background: #cbd5e1;
  border: 1px solid #94a3b8;
}

/* ===== MAIN CONTENT ===== */

body.light-mode .main-content {
  background: #ffffff;
}

/* ===== CATEGORY HEADER ===== */

body.light-mode #category-name,
body.light-mode .add-category-form input {
  border: 1px solid #cbd5e1;
  background: #ffffff;
  color: #0f172a;
}

body.light-mode #category-name::placeholder,
body.light-mode .add-category-form input::placeholder {
  color: #94a3b8;
}

body.light-mode #category-name:focus,
body.light-mode .add-category-form input:focus {
  border-color: #3b82f6;
  background: #ffffff;
}

body.light-mode #add-category-form button,
body.light-mode .add-category-form button {
  background: #3b82f6;
  color: white;
}

body.light-mode #add-category-form button:hover,
body.light-mode .add-category-form button:hover {
  background: #2563eb;
}

body.light-mode .delete-project-btn {
  background: #ef4444;
  color: white;
}

body.light-mode .delete-project-btn:hover {
  background: #dc2626;
}

/* ===== CATEGORY CARDS ===== */

body.light-mode .category {
  background: #f8fafc;
  border: none;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
}

body.light-mode .category:hover {
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.15);
}

body.light-mode .heading-wrapper {
  border-bottom: 1px solid #e2e8f0;
}

body.light-mode .form-check-input {
  background-color: #cbd5e1;
  border: 1px solid #94a3b8;
}

body.light-mode .form-switch .form-check-input:checked {
  background-color: #10b981;
  border-color: #10b981;
}

body.light-mode .form-check-label {
  color: #64748b;
}

body.light-mode .delete-category-btn {
  background: #ef4444;
  color: white;
}

body.light-mode .delete-category-btn:hover {
  background: #dc2626;
}

/* ===== ACTION TYPES ===== */

body.light-mode .action-type {
  background: #ffffff;
  border: none;
}

/* Bold vibrant colored backgrounds in light mode - striking and bold */
body.light-mode .Optional {
  background: rgba(16, 185, 129, 0.25);
}

body.light-mode .Optional:hover {
  background: rgba(16, 185, 129, 0.3);
}

body.light-mode .Fix {
  background: rgba(239, 68, 68, 0.25);
}

body.light-mode .Fix:hover {
  background: rgba(239, 68, 68, 0.3);
}

body.light-mode .Add {
  background: rgba(59, 130, 246, 0.25);
}

body.light-mode .Add:hover {
  background: rgba(59, 130, 246, 0.3);
}

body.light-mode .Update {
  background: rgba(245, 158, 11, 0.25);
}

body.light-mode .Update:hover {
  background: rgba(245, 158, 11, 0.3);
}

body.light-mode .action-type form input,
body.light-mode .action-type form select,
body.light-mode .action-type form button {
  border: 1px solid #cbd5e1;
  background: #ffffff;
  color: #0f172a;
}

body.light-mode .action-type form input:focus,
body.light-mode .action-type form select:focus {
  border-color: #3b82f6;
  background: #ffffff;
}

body.light-mode .action-type form button {
  background: #3b82f6;
  color: white;
  border: none;
}

body.light-mode .action-type form button:hover {
  background: #2563eb;
}

body.light-mode .action-title {
  color: #0f172a;
}

body.light-mode .remove-action-btn {
  color: #94a3b8;
}

body.light-mode .remove-action-btn:hover {
  color: #ef4444;
  background: rgba(239, 68, 68, 0.1);
}

/* ===== TASKS ===== */

body.light-mode .task {
  background: #f8fafc;
  border: none;
  border-left: 4px solid #94a3b8;
  color: #0f172a;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.08);
}

body.light-mode .task:hover {
  background: #f1f5f9;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.12);
}

body.light-mode .task.white {
  border-left-color: #94a3b8;
}

body.light-mode .task.in-progress,
body.light-mode .task.orange {
  border-left-color: #f59e0b;
  box-shadow: 0 0 0 1px rgba(245, 158, 11, 0.4), 0 1px 2px rgba(245, 158, 11, 0.2);
  background: #fffbeb;
}

body.light-mode .task.in-progress:hover,
body.light-mode .task.orange:hover {
  box-shadow: 0 0 0 1px rgba(245, 158, 11, 0.6), 0 2px 4px rgba(245, 158, 11, 0.3);
  background: #fef3c7;
}

body.light-mode .task.done,
body.light-mode .task.green {
  border-left-color: #10b981;
  box-shadow: 0 0 0 1px rgba(16, 185, 129, 0.4), 0 1px 2px rgba(16, 185, 129, 0.2);
  background: #ecfdf5;
  opacity: 0.95;
}

body.light-mode .task.done:hover,
body.light-mode .task.green:hover {
  box-shadow: 0 0 0 1px rgba(16, 185, 129, 0.6), 0 2px 4px rgba(16, 185, 129, 0.3);
  background: #d1fae5;
}

body.light-mode .task-text {
  color: #0f172a;
  padding-right: 0.5rem;
}

body.light-mode .status-option.white {
  background: #64748b;
  color: #ffffff;
}

body.light-mode .status-option.orange {
  background: #f59e0b;
  color: #ffffff;
}

body.light-mode .status-option.green {
  background: #10b981;
  color: #ffffff;
}

body.light-mode .status-option.delete {
  background: #ef4444;
  color: white;
}

body.light-mode .task input[type="text"] {
  border: 1px solid #cbd5e1;
  background: #ffffff;
  color: #0f172a;
}

body.light-mode .edit-task-btn:hover {
  background: rgba(59, 130, 246, 0.1);
}

body.light-mode .edit-task-btn i.fa-solid.fa-pen-to-square {
  color: #94a3b8;
}

body.light-mode .edit-task-btn:hover i.fa-solid.fa-pen-to-square {
  color: #3b82f6;
}

/* ===== ACTION TYPE SELECTOR ===== */

body.light-mode .action-type-selector {
  border: 1px solid #cbd5e1;
  background: #ffffff;
  color: #0f172a;
}

body.light-mode .action-type-selector:hover {
  border-color: #3b82f6;
  background: #ffffff;
}

body.light-mode .action-type-selector:focus {
  border-color: #3b82f6;
}

body.light-mode .add-action-type-btn {
  background: #3b82f6;
  color: white;
}

body.light-mode .add-action-type-btn:hover {
  background: #2563eb;
}

/* ===== EXPLAINER TEXT ===== */

body.light-mode .explainer-text {
  color: #dc2626;
}

/* ===== READONLY BANNER ===== */

body.light-mode .readonly-banner {
  background: #f59e0b;
  color: #0f172a;
}

/* ===== MODAL ===== */

body.light-mode .modal-overlay {
  background: rgba(0, 0, 0, 0.5);
}

body.light-mode .custom-modal {
  background: #ffffff;
  border: none;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

body.light-mode .custom-modal p {
  color: #475569;
}

body.light-mode .confirm {
  background: #ef4444;
  color: white;
}

body.light-mode .confirm:hover {
  background: #dc2626;
}

body.light-mode .confirm:disabled {
  background: #cbd5e1;
  color: #94a3b8;
}

body.light-mode .cancel {
  background: #f1f5f9;
  color: #0f172a;
  border: 1px solid #cbd5e1;
}

body.light-mode .cancel:hover {
  background: #e2e8f0;
}

body.light-mode .modal-warning {
  color: #ef4444;
}

body.light-mode .modal-info {
  color: #0f172a;
}

body.light-mode .modal-label {
  color: #64748b;
}

body.light-mode .modal-input {
  border: 1px solid #cbd5e1;
  background: #ffffff;
  color: #0f172a;
}

body.light-mode .modal-input:focus {
  border-color: #3b82f6;
  background: #ffffff;
}

/* ===== DISABLED STATES ===== */

body.light-mode input.disabled-btn,
body.light-mode textarea.disabled-btn {
  background: #f1f5f9 !important;
  color: #94a3b8 !important;
  border-color: #e2e8f0 !important;
}

body.light-mode .delete-category-btn.disabled-btn {
  background: #f1f5f9 !important;
  color: #94a3b8 !important;
  border-color: #e2e8f0 !important;
}

/* ===== SCROLLBAR ===== */

body.light-mode .main-content::-webkit-scrollbar-track {
  background: #ffffff;
}

body.light-mode .main-content::-webkit-scrollbar-thumb {
  background: #cbd5e1;
}

body.light-mode .main-content::-webkit-scrollbar-thumb:hover {
  background: #94a3b8;
}

/* ===== HAMBURGER ===== */

@media (max-width: 900px) {
  body.light-mode .hamburger {
    background: #3b82f6;
    color: white;
  }

  body.light-mode .hamburger:hover {
    background: #2563eb;
  }

  body.light-mode .sidebar.open {
    box-shadow: -2px 0 8px rgba(0, 0, 0, 0.1);
  }
}

/* ===== THEME TOGGLE ===== */

body.light-mode .theme-toggle {
  background: #cbd5e1;
  border: 1px solid #94a3b8;
}

body.light-mode .theme-toggle-slider {
  background: #ffffff;
}

body.light-mode .theme-icon {
  color: #f59e0b;
}

/* ===== TASK DETAILS MODAL - LIGHT MODE ===== */

body.light-mode .task-modal-header {
  border-bottom: 1px solid #e2e8f0;
}

body.light-mode .task-modal-close {
  color: #94a3b8;
}

body.light-mode .task-modal-close:hover {
  background: rgba(239, 68, 68, 0.1);
  color: #ef4444;
}

body.light-mode .task-modal-label {
  color: #64748b;
}

body.light-mode .task-modal-textarea {
  border: 1px solid #cbd5e1;
  background: #ffffff;
  color: #0f172a;
}

body.light-mode .task-modal-textarea:focus {
  border-color: #3b82f6;
  background: #ffffff;
}

body.light-mode .task-modal-textarea::placeholder {
  color: #94a3b8;
}

body.light-mode .task-status-btn {
  border: 1px solid #cbd5e1;
  background: #f8fafc;
  color: #0f172a;
}

body.light-mode .task-status-btn:hover {
  background: #f1f5f9;
  border-color: var(--status-color);
}

body.light-mode .task-status-btn.active {
  background: var(--status-color);
  color: #ffffff;
}

body.light-mode .task-timestamp-item {
  background: #f8fafc;
  border-left: 3px solid #3b82f6;
}

body.light-mode .task-timestamp-label {
  color: #64748b;
}

body.light-mode .task-timestamp-value {
  color: #94a3b8;
}

body.light-mode .task-modal-actions {
  border-top: 1px solid #e2e8f0;
}

body.light-mode .task-modal-delete-btn {
  background: #f8fafc;
  color: #ef4444;
  border: 1px solid #e2e8f0;
}

body.light-mode .task-modal-delete-btn:hover {
  background: #ef4444;
  color: white;
  border-color: #ef4444;
}

body.light-mode .task-modal-save-btn {
  background: #3b82f6;
  color: white;
}

body.light-mode .task-modal-save-btn:hover {
  background: #2563eb;
}

body.light-mode .task-details-modal::-webkit-scrollbar-track {
  background: #ffffff;
}

body.light-mode .task-details-modal::-webkit-scrollbar-thumb {
  background: #cbd5e1;
}

body.light-mode .task-details-modal::-webkit-scrollbar-thumb:hover {
  background: #94a3b8;
}