/* SaaS Controller Theme - Light/Dark Mode Support */
/* Professional Dark Mode Design */

:root {
    /* Light Mode (Default) */
    --bg-body: #FEFDFB;
    --bg-nav: #FBF9F5;
    --bg-card: #ffffff;
    --bg-card-hover: #f9fafb;
    --bg-card-elevated: #ffffff;
    --bg-input: #ffffff;
    --bg-dropdown: #ffffff;

    --border-primary: #F5F1EA;
    --border-secondary: #e5e7eb;
    --border-input: #d1d5db;
    --border-subtle: rgba(0, 0, 0, 0.05);

    --text-primary: #111827;
    --text-secondary: #6b7280;
    --text-muted: #9ca3af;
    --text-inverse: #ffffff;

    --shadow-sm: 0 1px 2px 0 rgb(0 0 0 / 0.05);
    --shadow-md: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
    --shadow-lg: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
    --shadow-glow: none;

    --brand-primary: #1B4D3E;
    --brand-hover: #143a2e;
    --accent-primary: #E5A832;
}

.dark {
    /* Professional Dark Mode - Refined color palette */
    --bg-body: #0c1222;
    --bg-nav: #111827;
    --bg-card: #1a2234;
    --bg-card-hover: #243044;
    --bg-card-elevated: #1e293b;
    --bg-input: #1e293b;
    --bg-dropdown: #1a2234;

    --border-primary: #2d3a4f;
    --border-secondary: #374151;
    --border-input: #3d4f66;
    --border-subtle: rgba(255, 255, 255, 0.06);

    --text-primary: #f8fafc;
    --text-secondary: #a1adc2;
    --text-muted: #6b7a90;
    --text-inverse: #0c1222;

    --shadow-sm: 0 1px 3px 0 rgb(0 0 0 / 0.4), 0 1px 2px -1px rgb(0 0 0 / 0.4);
    --shadow-md: 0 4px 8px -2px rgb(0 0 0 / 0.5), 0 2px 4px -2px rgb(0 0 0 / 0.4);
    --shadow-lg: 0 12px 24px -4px rgb(0 0 0 / 0.5), 0 4px 8px -4px rgb(0 0 0 / 0.4);
    --shadow-glow: 0 0 20px rgba(27, 77, 62, 0.15);

    --brand-primary: #2a7a5f;
    --brand-hover: #34916f;
    --accent-primary: #f0b840;
}

/* Apply theme variables */
body {
    background-color: var(--bg-body);
    color: var(--text-primary);
    transition: background-color 0.3s ease, color 0.3s ease;
}

/* Theme toggle button */
.theme-toggle {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 2.5rem;
    height: 2.5rem;
    border-radius: 0.5rem;
    cursor: pointer;
    transition: all 0.2s ease;
    border: none;
    background: transparent;
}

.theme-toggle:hover {
    background-color: var(--bg-card-hover);
}

.theme-toggle svg {
    width: 1.25rem;
    height: 1.25rem;
    transition: all 0.2s ease;
}

.theme-toggle .sun-icon {
    display: none;
    color: #fbbf24;
}

.theme-toggle .moon-icon {
    display: block;
    color: var(--text-secondary);
}

.theme-toggle:hover .moon-icon {
    color: var(--text-primary);
}

/* Dark mode icon visibility */
.dark .theme-toggle .sun-icon {
    display: block;
}

.dark .theme-toggle .moon-icon {
    display: none;
}

.dark .theme-toggle:hover .sun-icon {
    color: #fcd34d;
    filter: drop-shadow(0 0 4px rgba(251, 191, 36, 0.5));
}

/* Override Tailwind utilities for theme support */
.theme-bg-body { background-color: var(--bg-body) !important; }
.theme-bg-nav { background-color: var(--bg-nav) !important; }
.theme-bg-card { background-color: var(--bg-card) !important; }
.theme-bg-card-hover:hover { background-color: var(--bg-card-hover) !important; }
.theme-bg-input { background-color: var(--bg-input) !important; }
.theme-bg-dropdown { background-color: var(--bg-dropdown) !important; }

.theme-border-primary { border-color: var(--border-primary) !important; }
.theme-border-secondary { border-color: var(--border-secondary) !important; }
.theme-border-input { border-color: var(--border-input) !important; }

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

.theme-shadow-sm { box-shadow: var(--shadow-sm) !important; }
.theme-shadow-md { box-shadow: var(--shadow-md) !important; }
.theme-shadow-lg { box-shadow: var(--shadow-lg) !important; }

/* Dark mode specific overrides for common patterns */
.dark .bg-white {
    background-color: var(--bg-card) !important;
    border: 1px solid var(--border-subtle) !important;
}

.dark .bg-gray-50 { background-color: #151d2e !important; }
.dark .bg-gray-100 { background-color: #1e2a3d !important; }

.dark .text-gray-900 { color: var(--text-primary) !important; }
.dark .text-gray-800 { color: #e8ecf2 !important; }
.dark .text-gray-700 { color: #d1d9e4 !important; }
.dark .text-gray-600 { color: var(--text-secondary) !important; }
.dark .text-gray-500 { color: var(--text-secondary) !important; }
.dark .text-gray-400 { color: var(--text-muted) !important; }

.dark .border-gray-100 { border-color: var(--border-primary) !important; }
.dark .border-gray-200 { border-color: var(--border-secondary) !important; }
.dark .border-gray-300 { border-color: #4b5a70 !important; }

.dark .divide-gray-100 > :not([hidden]) ~ :not([hidden]) { border-color: var(--border-primary) !important; }
.dark .divide-gray-200 > :not([hidden]) ~ :not([hidden]) { border-color: var(--border-secondary) !important; }

.dark .hover\:bg-gray-50:hover { background-color: var(--bg-card-hover) !important; }
.dark .hover\:bg-gray-100:hover { background-color: #2a3850 !important; }

.dark .shadow-sm { box-shadow: var(--shadow-sm) !important; }
.dark .shadow-md { box-shadow: var(--shadow-md) !important; }
.dark .shadow-lg { box-shadow: var(--shadow-lg) !important; }
.dark .shadow { box-shadow: var(--shadow-md) !important; }

/* Card styling for dark mode - professional look */
.dark .rounded-xl,
.dark .rounded-lg {
    border: 1px solid var(--border-subtle);
}

.dark .rounded-xl.shadow-sm,
.dark .rounded-lg.shadow-sm {
    box-shadow: var(--shadow-sm), inset 0 1px 0 rgba(255, 255, 255, 0.03);
}

/* Navigation bar - elevated look */
.dark nav {
    background-color: var(--bg-nav) !important;
    border-color: var(--border-primary) !important;
    backdrop-filter: blur(8px);
}

/* Input styling for dark mode - refined */
.dark input, .dark select, .dark textarea {
    background-color: var(--bg-input) !important;
    border-color: var(--border-input) !important;
    color: var(--text-primary) !important;
}

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

.dark input:focus, .dark select:focus, .dark textarea:focus {
    border-color: var(--brand-primary) !important;
    box-shadow: 0 0 0 3px rgba(42, 122, 95, 0.25), var(--shadow-glow) !important;
    outline: none;
}

/* Button styling for dark mode */
.dark button[style*="background-color: #1B4D3E"],
.dark a[style*="background-color: #1B4D3E"] {
    background-color: var(--brand-primary) !important;
    box-shadow: 0 2px 8px rgba(42, 122, 95, 0.3);
}

.dark button[style*="background-color: #1B4D3E"]:hover,
.dark a[style*="background-color: #1B4D3E"]:hover {
    background-color: var(--brand-hover) !important;
    box-shadow: 0 4px 12px rgba(42, 122, 95, 0.4);
}

/* Links in dark mode */
.dark a.text-brand-500 {
    color: #3d9e7a !important;
}

.dark a.text-brand-500:hover {
    color: #4fb892 !important;
}

/* Status badge colors - professional dark mode */
.dark .bg-green-50 { background-color: rgba(34, 197, 94, 0.12) !important; }
.dark .bg-green-100 { background-color: rgba(34, 197, 94, 0.18) !important; }
.dark .text-green-800, .dark .text-green-700 { color: #4ade80 !important; }

.dark .bg-red-50 { background-color: rgba(239, 68, 68, 0.12) !important; }
.dark .bg-red-100 { background-color: rgba(239, 68, 68, 0.18) !important; }
.dark .text-red-800, .dark .text-red-700, .dark .text-red-600 { color: #f87171 !important; }

.dark .bg-yellow-50 { background-color: rgba(234, 179, 8, 0.12) !important; }
.dark .bg-yellow-100 { background-color: rgba(234, 179, 8, 0.18) !important; }
.dark .text-yellow-800, .dark .text-yellow-700 { color: #fbbf24 !important; }

.dark .bg-purple-50 { background-color: rgba(168, 85, 247, 0.12) !important; }
.dark .bg-purple-100 { background-color: rgba(168, 85, 247, 0.18) !important; }
.dark .text-purple-800, .dark .text-purple-700 { color: #c084fc !important; }

.dark .bg-orange-50 { background-color: rgba(249, 115, 22, 0.12) !important; }
.dark .bg-orange-100 { background-color: rgba(249, 115, 22, 0.18) !important; }
.dark .text-orange-800, .dark .text-orange-700 { color: #fb923c !important; }

.dark .bg-blue-50 { background-color: rgba(59, 130, 246, 0.12) !important; }
.dark .bg-blue-100 { background-color: rgba(59, 130, 246, 0.18) !important; }
.dark .text-blue-800, .dark .text-blue-700 { color: #60a5fa !important; }

/* Brand colors - enhanced for dark mode */
.dark .bg-brand-50 { background-color: rgba(42, 122, 95, 0.15) !important; }
.dark .bg-brand-100 { background-color: rgba(42, 122, 95, 0.25) !important; }
.dark .bg-brand-500 { background-color: var(--brand-primary) !important; }
.dark .text-brand-500 { color: #3d9e7a !important; }
.dark .text-brand-600 { color: #4fb892 !important; }
.dark .border-brand-500 { border-color: var(--brand-primary) !important; }

.dark .bg-accent-50 { background-color: rgba(240, 184, 64, 0.12) !important; }
.dark .text-accent-400 { color: var(--accent-primary) !important; }

/* Gradient backgrounds - refined */
.dark .bg-gradient-to-r.from-brand-50 {
    background-image: linear-gradient(to right, rgba(42, 122, 95, 0.15), rgba(240, 184, 64, 0.1)) !important;
}

/* Tables in dark mode */
.dark table {
    border-color: var(--border-primary) !important;
}

.dark th {
    background-color: var(--bg-card-elevated) !important;
    color: var(--text-secondary) !important;
    border-color: var(--border-primary) !important;
}

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

.dark tr:hover {
    background-color: var(--bg-card-hover) !important;
}

/* Footer */
.dark footer {
    background-color: var(--bg-nav) !important;
    border-color: var(--border-primary) !important;
}

/* Dropdown menus - elevated look */
.dark .absolute.bg-white,
.dark [x-show].bg-white,
.dark div[class*="dropdown"] {
    background-color: var(--bg-dropdown) !important;
    border: 1px solid var(--border-primary) !important;
    box-shadow: var(--shadow-lg) !important;
}

/* Scrollbar styling for dark mode */
.dark ::-webkit-scrollbar {
    width: 8px;
    height: 8px;
}

.dark ::-webkit-scrollbar-track {
    background: var(--bg-body);
}

.dark ::-webkit-scrollbar-thumb {
    background: var(--border-secondary);
    border-radius: 4px;
}

.dark ::-webkit-scrollbar-thumb:hover {
    background: var(--text-muted);
}

/* Code blocks in dark mode */
.dark pre, .dark code {
    background-color: #0d1520 !important;
    border: 1px solid var(--border-primary) !important;
}

/* Alert/notification styling */
.dark .border-green-200 { border-color: rgba(34, 197, 94, 0.3) !important; }
.dark .border-red-200 { border-color: rgba(239, 68, 68, 0.3) !important; }
.dark .border-yellow-200 { border-color: rgba(234, 179, 8, 0.3) !important; }
.dark .border-blue-200 { border-color: rgba(59, 130, 246, 0.3) !important; }

/* Inline border color style override */
.dark [style*="border-color: #F5F1EA"] {
    border-color: var(--border-primary) !important;
}

/* Smooth transition for all theme changes */
*, *::before, *::after {
    transition-property: background-color, border-color, color, box-shadow;
    transition-duration: 0.15s;
    transition-timing-function: ease-out;
}

/* Disable transition on page load */
.no-transition *, .no-transition *::before, .no-transition *::after {
    transition: none !important;
}

/* Focus ring for accessibility */
.dark *:focus-visible {
    outline: 2px solid var(--brand-primary);
    outline-offset: 2px;
}

/* Loading spinner in dark mode */
.dark .animate-spin {
    color: var(--brand-primary) !important;
}

/* Disabled state in dark mode */
.dark button:disabled,
.dark input:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}