/* Custom CSS for FLVS */

/* Two-column layout for settings and profile pages */
@media (min-width: 1024px) {
    .settings-layout,
    .profile-layout {
        display: flex;
        flex-direction: row;
        gap: 1.5rem;
    }

    .settings-layout .sidebar-nav {
        width: 280px;
        flex-shrink: 0;
    }

    .settings-layout .content-area {
        flex: 1;
        min-width: 0;
    }

    .profile-layout .sidebar-profile {
        width: 320px;
        flex-shrink: 0;
    }

    .profile-layout .content-main {
        flex: 1;
        min-width: 0;
    }
}

@media (max-width: 1023px) {
    .settings-layout,
    .profile-layout {
        display: flex;
        flex-direction: column;
        gap: 1.5rem;
    }

    .settings-layout .sidebar-nav,
    .settings-layout .content-area,
    .profile-layout .sidebar-profile,
    .profile-layout .content-main {
        width: 100%;
    }
}

/* ============================================
   DARK MODE STYLES
   ============================================ */

/* Dark mode - Body & Backgrounds */
.dark {
    background-color: #111827;
    color: #F9FAFB;
}

.dark .bg-white {
    background-color: #1F2937 !important;
}

.dark .bg-gray-50 {
    background-color: #111827 !important;
}

.dark .bg-gray-100 {
    background-color: #1F2937 !important;
}

.dark .bg-gray-200 {
    background-color: #374151 !important;
}

.dark .bg-gray-300 {
    background-color: #4B5563 !important;
}

/* Dark mode - Text colors */
.dark .text-gray-900 {
    color: #F9FAFB !important;
}

.dark .text-gray-800 {
    color: #F3F4F6 !important;
}

.dark .text-gray-700 {
    color: #E5E7EB !important;
}

.dark .text-gray-600 {
    color: #D1D5DB !important;
}

.dark .text-gray-500 {
    color: #9CA3AF !important;
}

.dark .text-gray-400 {
    color: #6B7280 !important;
}

/* Dark mode - Borders */
.dark .border-gray-200 {
    border-color: #374151 !important;
}

.dark .border-gray-300 {
    border-color: #4B5563 !important;
}

/* Dark mode - Hover states */
.dark .hover\:bg-gray-50:hover {
    background-color: #1F2937 !important;
}

.dark .hover\:bg-gray-100:hover {
    background-color: #374151 !important;
}

.dark .hover\:bg-gray-200:hover {
    background-color: #4B5563 !important;
}

.dark .hover\:text-gray-700:hover {
    color: #E5E7EB !important;
}

.dark .hover\:text-gray-900:hover {
    color: #F9FAFB !important;
}

/* Dark mode - Forms */
.dark input[type="text"],
.dark input[type="email"],
.dark input[type="password"],
.dark input[type="search"],
.dark input[type="number"],
.dark input[type="date"],
.dark input[type="time"],
.dark select,
.dark textarea {
    background-color: #1F2937;
    border-color: #4B5563;
    color: #F9FAFB;
}

.dark input[type="text"]:focus,
.dark input[type="email"]:focus,
.dark input[type="password"]:focus,
.dark input[type="search"]:focus,
.dark input[type="number"]:focus,
.dark input[type="date"]:focus,
.dark input[type="time"]:focus,
.dark select:focus,
.dark textarea:focus {
    border-color: #DC2626;
    background-color: #111827;
}

.dark input::placeholder,
.dark textarea::placeholder {
    color: #6B7280;
}

/* Dark mode - Buttons */
.dark button:not(.bg-primary-600):not(.bg-red-600):not(.bg-green-600) {
    color: #F9FAFB;
}

/* Dark mode - Cards & Panels */
.dark .shadow {
    box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.5), 0 1px 2px 0 rgba(0, 0, 0, 0.3);
}

.dark .shadow-lg {
    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.5), 0 4px 6px -2px rgba(0, 0, 0, 0.3);
}

.dark .shadow-xl {
    box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.5), 0 10px 10px -5px rgba(0, 0, 0, 0.3);
}

/* Dark mode - Alert boxes */
.dark .bg-blue-50 {
    background-color: #1E3A5F !important;
}

.dark .border-blue-400 {
    border-color: #3B82F6 !important;
}

.dark .text-blue-700 {
    color: #93C5FD !important;
}

.dark .text-blue-600 {
    color: #BFDBFE !important;
}

.dark .bg-red-50 {
    background-color: #450A0A !important;
}

.dark .border-red-400 {
    border-color: #EF4444 !important;
}

.dark .text-red-700 {
    color: #FCA5A5 !important;
}

.dark .text-red-600 {
    color: #FECACA !important;
}

.dark .bg-green-50 {
    background-color: #052E16 !important;
}

.dark .border-green-400 {
    border-color: #22C55E !important;
}

.dark .text-green-700 {
    color: #86EFAC !important;
}

.dark .text-green-600 {
    color: #BBF7D0 !important;
}

.dark .bg-yellow-50 {
    background-color: #451A03 !important;
}

.dark .border-yellow-400 {
    border-color: #FACC15 !important;
}

.dark .text-yellow-700 {
    color: #FDE047 !important;
}

.dark .text-yellow-600 {
    color: #FEF08A !important;
}

/* Dark mode - Tables */
.dark table {
    color: #F9FAFB;
}

.dark table thead {
    background-color: #1F2937;
    border-color: #374151;
}

.dark table tbody tr {
    border-color: #374151;
}

.dark table tbody tr:hover {
    background-color: #1F2937;
}

/* Dark mode - Navigation */
.dark nav a {
    color: #D1D5DB;
}

.dark nav a:hover {
    color: #F9FAFB;
}

/* Dark mode - Header */
.dark header {
    background-color: #1F2937 !important;
    border-color: #374151 !important;
}

.dark header svg {
    color: #D1D5DB;
}

.dark header button:hover {
    background-color: #374151 !important;
}

/* Dark mode - Sidebar */
.dark aside,
.dark .sidebar {
    background-color: #1F2937 !important;
    border-color: #374151 !important;
}

.dark aside a,
.dark .sidebar a {
    color: #D1D5DB !important;
}

.dark aside a:hover,
.dark .sidebar a:hover {
    background-color: #374151 !important;
    color: #F9FAFB !important;
}

.dark aside a.active,
.dark .sidebar a.active {
    background-color: #DC2626 !important;
    color: #FFFFFF !important;
}

/* Dark mode - Sidebar category headers */
.dark aside button,
.dark .sidebar button {
    color: #9CA3AF !important;
}

.dark aside button:hover,
.dark .sidebar button:hover {
    background-color: #374151 !important;
    color: #D1D5DB !important;
}

/* Dark mode - Sidebar specific classes */
.dark .text-gray-700 {
    color: #D1D5DB !important;
}

.dark .text-gray-600 {
    color: #9CA3AF !important;
}

.dark .hover\:bg-gray-100:hover {
    background-color: #374151 !important;
}

/* Dark mode - Sidebar active states */
.dark .bg-primary-50 {
    background-color: #7F1D1D !important;
}

.dark .text-primary-700 {
    color: #FCA5A5 !important;
}

/* Dark mode - Dropdown menus */
.dark [x-show] > div[class*="bg-white"] {
    background-color: #1F2937 !important;
}

/* Dark mode - Search results */
.dark #search-results {
    background-color: #1F2937 !important;
    border-color: #374151 !important;
}