/* ============================================
   COMPREHENSIVE DARK MODE STYLES
   Manual toggle only - NO automatic detection
   ============================================ */

/* Base body and background */
body.dark-mode {
    background: #0E0F12;
    color: #e5e7eb;
}

/* ============================================
   HEADER & NAVIGATION
   ============================================ */
.dark-mode .site-header {
    background: #1A1B1E;
    border-bottom: 1px solid #25262B;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
}

.dark-mode .navbar {
    background: #1A1B1E;
}

.dark-mode .nav-container {
    background: transparent;
}

.dark-mode .nav-link {
    color: #D1D5DB;
}

.dark-mode .nav-link:hover {
    color: #F3F4F6;
    background: rgba(55, 65, 81, 0.3);
}

.dark-mode .dropdown-toggle {
    color: #D1D5DB;
}

.dark-mode .dropdown-arrow {
    color: #9CA3AF;
}

.dark-mode .dropdown-content,
.dark-mode .mega-dropdown-content {
    background: #1A1B1E;
    border: 1px solid #25262B;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.5);
}

.dark-mode .dropdown-item {
    color: #D1D5DB;
}

.dark-mode .dropdown-item:hover {
    background: #25262B;
    color: #F3F4F6;
}

.dark-mode .mega-grid {
    background: transparent;
}

.dark-mode .mega-section h3 {
    color: #F3F4F6;
}

.dark-mode .mega-item {
    color: #D1D5DB;
}

.dark-mode .mega-item:hover {
    background: #25262B;
    color: #F3F4F6;
}

.dark-mode .mega-featured {
    background: #25262B;
    border-color: #374151;
}

.dark-mode .mega-cta {
    background: #25262B;
    border-color: #374151;
}

.dark-mode .mega-cta h3 {
    color: #F3F4F6;
}

.dark-mode .mega-cta p {
    color: #9CA3AF;
}

.dark-mode .dropdown-divider {
    background: #25262B;
}

/* Mobile Menu */
.dark-mode .mobile-menu-btn span {
    background: #F3F4F6;
}

.dark-mode .mobile-menu {
    background: #1A1B1E;
    border-bottom: 1px solid #25262B;
}

.dark-mode .mobile-link {
    color: #D1D5DB;
    border-bottom-color: #25262B;
}

.dark-mode .mobile-link:hover {
    color: #F3F4F6;
    background: #25262B;
}

.dark-mode .mobile-dropdown-btn {
    color: #D1D5DB;
    border-bottom-color: #25262B;
}

.dark-mode .mobile-dropdown-content a {
    color: #9CA3AF;
}

.dark-mode .mobile-dropdown-content a:hover {
    color: #F3F4F6;
    background: #25262B;
}

/* ============================================
   HERO SECTIONS
   ============================================ */
.dark-mode .hero-section {
    background: linear-gradient(135deg, #1A1B1E 0%, #0E0F12 100%);
    border-bottom-color: #25262B;
}

.dark-mode .page-header {
    background: linear-gradient(135deg, #1A1B1E 0%, #0E0F12 100%);
    border-bottom-color: #25262B;
}

.dark-mode .hero-content {
    color: #F3F4F6;
}

/* ============================================
   TYPOGRAPHY
   ============================================ */
.dark-mode h1,
.dark-mode h2,
.dark-mode h3,
.dark-mode h4,
.dark-mode h5,
.dark-mode h6 {
    color: #F3F4F6;
}

.dark-mode p {
    color: #D1D5DB;
}

.dark-mode .subtitle {
    color: #9CA3AF;
}

.dark-mode .text-muted {
    color: #6B7280;
}

.dark-mode a {
    color: #5B8FBF;
}

.dark-mode a:hover {
    color: #7BA3CC;
}

/* ============================================
   FORMS & INPUTS
   ============================================ */
.dark-mode .form-container {
    background: #1A1B1E;
    border-color: #25262B;
}

.dark-mode .form-group {
    background: transparent;
}

.dark-mode .form-label {
    color: #F3F4F6;
}

.dark-mode .form-control,
.dark-mode .form-select,
.dark-mode .form-input,
.dark-mode .form-textarea,
.dark-mode select,
.dark-mode input[type="text"],
.dark-mode input[type="email"],
.dark-mode input[type="password"],
.dark-mode input[type="search"],
.dark-mode input[type="number"],
.dark-mode textarea {
    background: #0E0F12;
    border-color: #25262B;
    color: #F3F4F6;
}

.dark-mode .form-control:hover,
.dark-mode .form-select:hover,
.dark-mode .form-input:hover,
.dark-mode select:hover,
.dark-mode input:hover,
.dark-mode textarea:hover {
    border-color: #374151;
}

.dark-mode .form-control:focus,
.dark-mode .form-select:focus,
.dark-mode .form-input:focus,
.dark-mode .form-textarea:focus,
.dark-mode select:focus,
.dark-mode input:focus,
.dark-mode textarea:focus {
    background: #0E0F12;
    border-color: #5B8FBF;
    color: #F3F4F6;
    box-shadow: 0 0 0 3px rgba(91, 143, 191, 0.1);
}

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

/* Checkboxes */
.dark-mode .checkbox-group label {
    color: #D1D5DB;
}

.dark-mode input[type="checkbox"] {
    border-color: #374151;
    background: #25262B;
}

/* ============================================
   BUTTONS
   ============================================ */
.dark-mode .btn {
    color: #F3F4F6;
}

.dark-mode .btn-primary {
    background: #5B8FBF;
    color: #F3F4F6;
}

.dark-mode .btn-primary:hover {
    background: #7BA3CC;
}

.dark-mode .btn-secondary {
    background: #25262B;
    color: #F3F4F6;
    border-color: #374151;
}

.dark-mode .btn-secondary:hover {
    background: #374151;
}

.dark-mode .card-btn {
    background: #25262B;
    color: #F3F4F6;
}

.dark-mode .card-btn:hover {
    background: #374151;
}

/* ============================================
   CARDS
   ============================================ */
.dark-mode .card {
    background: #1A1B1E;
    border-color: #25262B;
}

.dark-mode .card:hover {
    background: #25262B;
    border-color: #374151;
}

.dark-mode .name-card {
    background: #1A1B1E;
    border-color: #25262B;
    color: #F3F4F6;
}

.dark-mode .name-card:hover {
    background: #25262B;
    border-color: #374151;
}

.dark-mode .generator-card {
    background: #1A1B1E;
    border-color: #25262B;
    border-left-color: #5B8FBF;
}

.dark-mode .generator-card:hover {
    background: #25262B;
    border-color: #374151;
}

.dark-mode .generator-name {
    color: #F3F4F6;
}

.dark-mode .generator-description {
    color: #9CA3AF;
}

/* ============================================
   SECTIONS & LAYOUT
   ============================================ */
.dark-mode .section {
    background: #0E0F12;
}

.dark-mode .section:nth-child(even) {
    background: #1A1B1E;
}

.dark-mode .category-section {
    background: #1A1B1E;
    border-color: #25262B;
}

.dark-mode .category-header {
    color: #F3F4F6;
}

.dark-mode .hub-section {
    background: #1A1B1E;
}

.dark-mode .hub-card {
    background: #0E0F12;
    border-color: #25262B;
}

/* ============================================
   FOOTER
   ============================================ */
.dark-mode .site-footer {
    background: #0E0F12;
    border-top: 1px solid #25262B;
}

.dark-mode .footer-title {
    color: #F3F4F6;
}

.dark-mode .footer-links a {
    color: #9CA3AF;
}

.dark-mode .footer-links a:hover {
    color: #F3F4F6;
}

.dark-mode .footer-text {
    color: #6B7280;
}

/* ============================================
   ADMIN PAGES
   ============================================ */
.dark-mode .admin-header {
    background: #1A1B1E;
    border-bottom-color: #25262B;
}

.dark-mode .admin-card {
    background: #1A1B1E;
    border-color: #25262B;
}

.dark-mode .admin-table {
    background: #1A1B1E;
}

.dark-mode .admin-table th {
    background: #25262B;
    color: #F3F4F6;
}

.dark-mode .admin-table td {
    border-color: #25262B;
    color: #D1D5DB;
}

.dark-mode .admin-toolbar {
    background: #1A1B1E;
    border-color: #25262B;
}

/* ============================================
   MODALS & OVERLAYS
   ============================================ */
.dark-mode .modal {
    background: rgba(14, 15, 18, 0.9);
}

.dark-mode .modal-content {
    background: #1A1B1E;
    border-color: #25262B;
}

.dark-mode .modal-header {
    border-bottom-color: #25262B;
}

.dark-mode .modal-footer {
    border-top-color: #25262B;
}

/* ============================================
   BADGES & TAGS
   ============================================ */
.dark-mode .badge {
    background: #25262B;
    color: #F3F4F6;
}

.dark-mode .tag {
    background: #25262B;
    border-color: #374151;
    color: #D1D5DB;
}

.dark-mode .saved-badge {
    background: #5B8FBF;
    color: #F3F4F6;
}

/* ============================================
   ERROR PAGES
   ============================================ */
.dark-mode .error-page {
    background: #0E0F12;
}

.dark-mode .error-container {
    background: #1A1B1E;
    border-color: #25262B;
}

.dark-mode .error-title {
    color: #F3F4F6;
}

.dark-mode .error-message {
    color: #9CA3AF;
}

/* ============================================
   BREADCRUMBS
   ============================================ */
.dark-mode .breadcrumb {
    background: transparent;
}

.dark-mode .breadcrumb a {
    color: #9CA3AF;
}

.dark-mode .breadcrumb a:hover {
    color: #F3F4F6;
}

/* ============================================
   SEARCH
   ============================================ */
.dark-mode .search-container {
    background: #1A1B1E;
    border-color: #25262B;
}

.dark-mode .search-input {
    background: #0E0F12;
    border-color: #25262B;
    color: #F3F4F6;
}

.dark-mode .search-results {
    background: #1A1B1E;
    border-color: #25262B;
}

/* ============================================
   LOADING STATES
   ============================================ */
.dark-mode .skeleton {
    background: linear-gradient(90deg, #25262B 25%, #1A1B1E 50%, #25262B 75%);
}

.dark-mode .spinner {
    border-color: #25262B;
    border-top-color: #5B8FBF;
}

/* Dark Mode Toggle Button */
.dark-mode-toggle {
    position: fixed;
    bottom: 20px;
    right: 20px;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    color: white;
    border: none;
    border-radius: 50%;
    width: 50px;
    height: 50px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
    z-index: 999;
    transition: transform 0.3s ease;
}

.dark-mode-toggle:hover {
    transform: scale(1.1);
}

.dark-mode-toggle svg {
    width: 24px;
    height: 24px;
}

/* PWA Install Button */
.pwa-install-btn {
    position: fixed;
    bottom: 80px;
    right: 20px;
    background: linear-gradient(135deg, #10b981 0%, #059669 100%);
    color: white;
    border: none;
    border-radius: 50%;
    width: 50px;
    height: 50px;
    display: none;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
    z-index: 999;
    transition: transform 0.3s ease;
}

.pwa-install-btn:hover {
    transform: scale(1.1);
}

@media (max-width: 768px) {
    .dark-mode-toggle,
    .pwa-install-btn {
        width: 45px;
        height: 45px;
        bottom: 15px;
        right: 15px;
    }
    
    .pwa-install-btn {
        bottom: 70px;
    }
}