/* Theme CSS - Dark/Light mode support */

/* CSS Variables for themes */
:root {
    /* Dark theme (default) */
    --bg-primary: #111827;
    --bg-secondary: #1f2937;
    --bg-tertiary: #374151;
    --bg-input: #374151;
    --bg-hover: #4b5563;

    --text-primary: #ffffff;
    --text-secondary: #d1d5db;
    --text-tertiary: #9ca3af;
    --text-muted: #6b7280;

    --border-primary: #374151;
    --border-secondary: #4b5563;

    --accent-blue: #2563eb;
    --accent-blue-hover: #1d4ed8;
    --accent-red: #dc2626;
    --accent-red-hover: #b91c1c;
    --accent-green: #16a34a;
    --accent-yellow: #ca8a04;

    --shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.3);
    --modal-bg: rgba(0, 0, 0, 0.5);
}

/* Light theme */
.light-theme {
    --bg-primary: #f3f4f6;
    --bg-secondary: #ffffff;
    --bg-tertiary: #e5e7eb;
    --bg-input: #ffffff;
    --bg-hover: #d1d5db;

    --text-primary: #111827;
    --text-secondary: #374151;
    --text-tertiary: #6b7280;
    --text-muted: #9ca3af;

    --border-primary: #d1d5db;
    --border-secondary: #e5e7eb;

    --shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
    --modal-bg: rgba(0, 0, 0, 0.3);
}

/* Base styles */
body {
    background-color: var(--bg-primary) !important;
    color: var(--text-primary) !important;
    transition: background-color 0.3s ease, color 0.3s ease;
}

/* Navigation */
nav, .nav-bar {
    background-color: var(--bg-secondary) !important;
    border-color: var(--border-primary) !important;
}

/* Cards and panels */
.bg-gray-800,
.card,
.panel {
    background-color: var(--bg-secondary) !important;
    border-color: var(--border-primary) !important;
}

.bg-gray-900 {
    background-color: var(--bg-primary) !important;
}

.bg-gray-700 {
    background-color: var(--bg-tertiary) !important;
}

.bg-gray-600 {
    background-color: var(--bg-hover) !important;
}

/* Text colors */
.text-white {
    color: var(--text-primary) !important;
}

.text-gray-300 {
    color: var(--text-secondary) !important;
}

.text-gray-400 {
    color: var(--text-tertiary) !important;
}

.text-gray-500,
.text-gray-600 {
    color: var(--text-muted) !important;
}

/* Borders */
.border-gray-700,
.border-gray-600 {
    border-color: var(--border-primary) !important;
}

/* Inputs */
input, select, textarea {
    background-color: var(--bg-input) !important;
    border-color: var(--border-primary) !important;
    color: var(--text-primary) !important;
}

input::placeholder,
textarea::placeholder {
    color: var(--text-muted) !important;
}

input:focus, select:focus, textarea:focus {
    border-color: var(--accent-blue) !important;
}

/* Buttons - keep accent colors */
.bg-blue-600 {
    background-color: var(--accent-blue) !important;
}

.bg-blue-600:hover,
.hover\:bg-blue-700:hover {
    background-color: var(--accent-blue-hover) !important;
}

.bg-red-600 {
    background-color: var(--accent-red) !important;
}

.bg-red-600:hover,
.hover\:bg-red-700:hover {
    background-color: var(--accent-red-hover) !important;
}

/* Modal overlay */
.fixed.inset-0.bg-black.bg-opacity-50 {
    background-color: var(--modal-bg) !important;
}

/* Status badges - keep their colors */
.bg-green-900\/50 {
    background-color: rgba(20, 83, 45, 0.5) !important;
}

.bg-red-900\/50 {
    background-color: rgba(127, 29, 29, 0.5) !important;
}

.bg-yellow-900\/30 {
    background-color: rgba(113, 63, 18, 0.3) !important;
}

/* Scrollbar for light theme */
.light-theme ::-webkit-scrollbar {
    width: 8px;
    height: 8px;
}

.light-theme ::-webkit-scrollbar-track {
    background: var(--bg-tertiary);
}

.light-theme ::-webkit-scrollbar-thumb {
    background: var(--text-muted);
    border-radius: 4px;
}

.light-theme ::-webkit-scrollbar-thumb:hover {
    background: var(--text-tertiary);
}

/* Theme toggle button */
#themeToggle {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0.5rem;
    border-radius: 0.5rem;
    background-color: transparent;
    color: var(--text-secondary);
    transition: all 0.2s ease;
    cursor: pointer;
    border: none;
}

#themeToggle:hover {
    background-color: var(--bg-tertiary);
    color: var(--text-primary);
}

/* Smooth transitions for theme change */
* {
    transition: background-color 0.2s ease, border-color 0.2s ease;
}

/* Code/pre blocks */
pre, code {
    background-color: var(--bg-primary) !important;
    color: var(--text-secondary) !important;
}

/* Tables */
table {
    background-color: var(--bg-secondary) !important;
}

th {
    background-color: var(--bg-tertiary) !important;
    color: var(--text-primary) !important;
}

td {
    border-color: var(--border-primary) !important;
}

/* Hover states for list items */
.hover\:bg-gray-700:hover,
.hover\:bg-gray-600:hover {
    background-color: var(--bg-hover) !important;
}

/* Links */
a {
    color: var(--text-secondary);
}

a:hover {
    color: var(--text-primary);
}

/* Light theme specific overrides */
.light-theme .bg-gray-800 {
    box-shadow: var(--shadow);
}

.light-theme nav {
    box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1);
}

/* Notification styles */
.light-theme .bg-green-900\/50 {
    background-color: rgba(220, 252, 231, 0.8) !important;
    border-color: #86efac !important;
}

.light-theme .text-green-200,
.light-theme .text-green-300 {
    color: #166534 !important;
}

.light-theme .bg-red-900\/50 {
    background-color: rgba(254, 226, 226, 0.8) !important;
    border-color: #fca5a5 !important;
}

.light-theme .text-red-200 {
    color: #991b1b !important;
}