/* path:filename app/static/css/theme.css */

/* Light mode default colors */
:root {
    /* Text colors */
    --light-gray-50: #f9fafb;
    --light-gray-100: #f3f4f6;
    --light-gray-200: #e5e7eb;
    --light-gray-300: #d1d5db;
    --light-gray-400: #9ca3af;
    --light-gray-500: #6b7280;
    --light-gray-600: #4b5563;
    --light-gray-700: #374151;
    --light-gray-800: #1f2937;
    --light-gray-900: #111827;

    /* Background colors */
    --light-bg-white: #ffffff;
    --light-bg-gray-50: #f9fafb;
    --light-bg-gray-100: #f3f4f6;
    --light-bg-gray-200: #e5e7eb;
}

/* Light mode base styles */
body {color: var(--light-gray-900);}

.text-gray-500 { color: var(--light-gray-500); }
.text-gray-600 { color: var(--light-gray-600); }
.text-gray-700 { color: var(--light-gray-700); }
.text-gray-800 { color: var(--light-gray-800); }
.text-gray-900 { color: var(--light-gray-900); }

.bg-white { background-color: var(--light-bg-white); }
.bg-gray-50 { background-color: var(--light-bg-gray-50); }
.bg-gray-100 { background-color: var(--light-bg-gray-100); }
.bg-gray-200 { background-color: var(--light-bg-gray-200); }

/* Force light mode text colors on dropdowns */
.dropdown-menu {color: var(--light-gray-700);}
.dropdown-menu a {color: var(--light-gray-700) !important;}
.dropdown-menu a:hover {color: var(--light-gray-900) !important;}

/* Light mode input styles */
input[type="text"],
input[type="email"],
input[type="password"],
input[type="number"],
input[type="tel"],
input[type="url"],
input[type="search"],
input[type="date"],
textarea,
select {
    background-color: var(--light-bg-white);
    color: var(--light-gray-900);
    border-color: var(--light-bg-gray-200);
}

input[type="checkbox"] {
    appearance: none;
    -webkit-appearance: none;
    width: 16px;
    height: 16px;
    border: 1px solid var(--light-gray-300);
    border-radius: 3px;
    outline: none;
    cursor: pointer;
    position: relative;
    background-color: var(--light-bg-white);
}

input[type="checkbox"]:checked {
    background-color: #3b82f6;
    border-color: #3b82f6;
}

input[type="checkbox"]:checked::before {
    content: "✓";
    position: absolute;
    color: white;
    font-size: 12px;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

/* Dark mode CSS variables */
:root {
    color-scheme: light dark; /* Tells browser about supported color schemes */
}

/* Dark mode overrides for Tailwind classes */
html.dark {
    /* Primary colors */
    --primary-blue: #1a365d;
    --primary-hover: #2d4a8a;
    --primary-active: #1e40af;
    --accent-light: #3b82f6;
    --accent-hover: #60a5fa;

    /* Background colors */
    --bg-gray-50: #121212;
    --bg-gray-100: #1a1a1a;
    --bg-gray-200: #2d2d2d;
    --bg-gray-300: #333333;
    --bg-gray-800: #404040;
    --bg-white: #2d2d2d;
    --bg-green-100: #28a745;
    --bg-red-100: #dc3545;

    /* Text colors */
    --text-gray-200: #a0a0a0;
    --text-gray-500: #a0a0a0;
    --text-gray-600: #a0a0a0;
    --text-gray-700: #e0e0e0;
    --text-gray-800: #e0e0e0;
    --text-gray-900: #e0e0e0;
    --text-green-800: #e0e0e0;
    --text-red-600: #e0e0e0;
    --text-red-800: #e0e0e0;

    /* Border colors */
    --border-gray-200: #404040;

    /* Table colors */
    --table-stripe: #262626;
    --table-hover: #333333;
    --table-header: #363636;
}

/* Only apply dark mode styles when .dark class is present */
html.dark .bg-blue-500 { background-color: var(--primary-blue); }
html.dark .hover\:bg-blue-600:hover { background-color: var(--primary-hover); }
html.dark .hover\:text-blue-200:hover { color: var(--accent-hover); }
html.dark .text-blue-500 { color: var(--accent-light); }
html.dark .btn-primary { background-color: var(--primary-blue); }
html.dark .btn-primary:hover { background-color: var(--primary-hover); }
html.dark .btn-primary:active { background-color: var(--primary-active); }
html.dark .bg-blue-600 { background-color: var(--primary-blue); }
html.dark .bg-blue-600:hover { background-color: var(--primary-hover); }
html.dark .bg-blue-600:active { background-color: var(--primary-active); }
html.dark .bg-gray-50 { background-color: var(--bg-gray-50); }
html.dark .bg-gray-100 { background-color: var(--bg-gray-100); }
html.dark .bg-gray-200 { background-color: var(--bg-gray-200); }
html.dark .bg-gray-300 { background-color: var(--bg-gray-300); }
html.dark .bg-gray-800 { background-color: var(--bg-gray-800); }
html.dark .bg-white { background-color: var(--bg-white); }
html.dark .bg-green-100 { background-color: var(--bg-green-100); }
html.dark .bg-red-100 { background-color: var(--bg-red-100); }
html.dark .text-gray-500 { color: var(--text-gray-500); }
html.dark .text-gray-600 { color: var(--text-gray-600); }
html.dark .text-gray-700 { color: var(--text-gray-700); }
html.dark .text-gray-800 { color: var(--text-gray-800); }
html.dark .text-gray-900 { color: var(--text-gray-900); }
html.dark .text-green-800 { color: var(--text-green-800); }
html.dark .text-red-600 { color: var(--text-red-600); }
html.dark .text-red-800 { color: var(--text-red-800); }
html.dark .border-gray-200 { border-color: var(--border-gray-200); }

/* Table styles */
html.dark .even\:bg-gray-50:nth-child(even),
html.dark tr:nth-child(even) { background-color: var(--table-stripe); }
html.dark tr:hover { background-color: var(--table-hover); }
html.dark thead th,
html.dark th {
    background-color: var(--table-header);
    color: var(--text-gray-500);
}

/* Protect Invoice Preview from Dark Mode */
html.dark .invoice-pdf-preview-wrapper,
html.dark .invoice-pdf-preview-container { background-color: white !important; }

html.dark .invoice-pdf-preview-wrapper *:not(.zoom-controls):not(.zoom-button) {
    color: #000 !important;
    border-color: #dee2e6 !important;
}

/* Template-specific styles for dark mode */
html.dark .invoice-pdf-preview-wrapper .invoice-pdf-default-items-table th {
    background-color: #f0f0f0 !important;
    color: #000 !important;
}

html.dark .invoice-pdf-preview-wrapper .invoice-pdf-standard-items-table th {
    background-color: #f0ad4e !important;
    color: white !important;
}

html.dark .invoice-pdf-preview-wrapper .invoice-pdf-idabble-items-table th {
    background: linear-gradient(180deg, #4a90e2, #50e3c2) !important;
    color: white !important;
}

html.dark .invoice-pdf-preview-wrapper a { color: #007bff !important; }

html.dark .invoice-pdf-preview-wrapper .invoice-pdf-idabble-invoice-title,
html.dark .invoice-pdf-preview-wrapper .invoice-pdf-idabble-bill-to h2,
html.dark .invoice-pdf-preview-wrapper .invoice-pdf-idabble-invoice-details h2,
html.dark .invoice-pdf-preview-wrapper .invoice-pdf-idabble-total-row {color: #3498db !important;}
html.dark .invoice-pdf-preview-wrapper tr:nth-child(even) {background-color: #f8f9fa !important;}
html.dark .invoice-pdf-preview-wrapper tr:hover {background-color: #f5f5f5 !important;}

/* Light mode defaults */
.dropdown-menu {background-color: #ffffff;}
.dropdown-menu a {color: #374151; /* gray-700 */}
.dropdown-menu a:hover {background-color: #f3f4f6; /* gray-100 */}

/* Dark mode overrides */
html.dark .dropdown-menu {
    background-color: var(--bg-gray-800);
    border-color: var(--border-gray-200);
}

html.dark .dropdown-menu a {color: #e5e7eb !important; /* gray-200 */}
html.dark .dropdown-menu a:hover {background-color: var(--table-hover) !important;}

/* Fix text colors in dark mode */
html.dark .text-gray-700 {color: #e5e7eb !important; /* gray-200 */}

/* Ensure dropdown text remains visible in dark mode */
html.dark .text-sm {color: #e5e7eb;}

/* Fix hover states in dark mode */
html.dark .hover\:bg-gray-100:hover {background-color: var(--table-hover);}

/* Keep profile menu text visible in dark mode */
html.dark .block.px-4.py-2.text-sm.text-gray-700:hover {
    background-color: var(--table-hover);
    color: #ffffff !important;
}

html.dark body {color: var(--text-gray-200);}
html.dark .dropdown-menu a {color: var(--text-gray-200) !important;}
html.dark .dropdown-menu a:hover {color: #ffffff !important;}

/* Dark mode input overrides */
html.dark input[type="text"],
html.dark input[type="email"],
html.dark input[type="password"],
html.dark input[type="number"],
html.dark input[type="tel"],
html.dark input[type="url"],
html.dark input[type="search"],
html.dark input[type="date"],
html.dark textarea,
html.dark select {
    background-color: var(--bg-gray-800);
    color: var(--text-gray-200);
    border-color: var(--border-gray-200);
}

html.dark input[type="checkbox"] {
    background-color: var(--bg-gray-800);
    border-color: var(--border-gray-200);
}

html.dark input[type="checkbox"]:checked {
    background-color: #3b82f6;
    border-color: #3b82f6;
}

/* Input placeholder colors */
input::placeholder,
textarea::placeholder {
    color: var(--light-gray-500);
}

html.dark input::placeholder,
html.dark textarea::placeholder {
    color: var(--text-gray-500);
}

/* Focus states */
input:focus,
textarea:focus,
select:focus {
    border-color: var(--accent-light);
    outline: none;
    ring-color: var(--accent-light);
}

/* Disabled states */
input:disabled,
textarea:disabled,
select:disabled {
    background-color: var(--light-bg-gray-100);
    cursor: not-allowed;
}

html.dark input:disabled,
html.dark textarea:disabled,
html.dark select:disabled {
    background-color: var(--bg-gray-100);
}