/**
 * Dark Mode Styles
 * Elegant dark theme with smooth transitions
 */

/* Root Dark Mode Colors */
:root.dark-mode {
    --bg-primary: #0f0f0f;
    --bg-secondary: #1a1a1a;
    --bg-card: #1f1f1f;
    --bg-hover: #2a2a2a;

    --text-primary: #ffffff;
    --text-secondary: #e0e0e0;
    --text-muted: #a0a0a0;

    --border-color: #333333;
    --shadow: rgba(0, 0, 0, 0.8);

    --rose-light: #E0B0B0;
    --rose-dark: #C89595;
}

/* Smooth Transitions */
.dark-mode,
.dark-mode * {
    transition: background-color 0.3s ease, color 0.3s ease, border-color 0.3s ease, box-shadow 0.3s ease;
}

/* Body & Background */
.dark-mode body {
    background: linear-gradient(180deg, #1a1a1a 0%, #0f0f0f 100%) !important;
    background-attachment: fixed;
    color: var(--text-primary) !important;
}

/* Navigation */
.dark-mode nav {
    background: var(--bg-secondary) !important;
    border-bottom: 2px solid var(--rose-dark) !important;
    box-shadow: 0 4px 12px var(--shadow) !important;
}

.dark-mode .nav-link {
    color: var(--text-secondary) !important;
}

.dark-mode .nav-link:hover {
    background: linear-gradient(135deg, #E0B0B0 0%, #C89595 100%) !important;
    color: white !important;
}

/* Cards & Containers */
.dark-mode .fashion-card,
.dark-mode .item-card,
.dark-mode .settings-card,
.dark-mode .luxury-card {
    background: var(--bg-card) !important;
    border-color: var(--border-color) !important;
    box-shadow: 0 4px 16px var(--shadow) !important;
}

.dark-mode .fashion-card:hover,
.dark-mode .item-card:hover {
    box-shadow: 0 8px 24px rgba(212, 165, 165, 0.3) !important;
    border-color: var(--rose-dark) !important;
}

/* Text Colors - Force visibility */
.dark-mode h1,
.dark-mode h2,
.dark-mode h3,
.dark-mode h4,
.dark-mode h5,
.dark-mode h6 {
    color: var(--text-primary) !important;
}

.dark-mode p {
    color: var(--text-secondary) !important;
}

.dark-mode span {
    color: var(--text-secondary) !important;
}

.dark-mode label {
    color: var(--text-secondary) !important;
}

.dark-mode div {
    color: var(--text-secondary);
}

.dark-mode .text-muted {
    color: var(--text-muted) !important;
}

/* Links */
.dark-mode a {
    color: var(--rose-light) !important;
}

.dark-mode a:hover {
    color: var(--rose-dark) !important;
}

/* Override inline styles that cause invisible text */
.dark-mode [style*="color: #2D2D2D"],
.dark-mode [style*="color:#2D2D2D"] {
    color: var(--text-primary) !important;
}

.dark-mode [style*="color: #6B6B6B"],
.dark-mode [style*="color:#6B6B6B"] {
    color: var(--text-secondary) !important;
}

.dark-mode [style*="color: #9B8B8B"],
.dark-mode [style*="color:#9B8B8B"] {
    color: var(--text-muted) !important;
}

/* Forms & Inputs */
.dark-mode input,
.dark-mode textarea,
.dark-mode select,
.dark-mode .form-input {
    background: var(--bg-secondary) !important;
    border-color: var(--border-color) !important;
    color: var(--text-primary) !important;
}

.dark-mode input:focus,
.dark-mode textarea:focus,
.dark-mode select:focus,
.dark-mode .form-input:focus {
    background: var(--bg-hover) !important;
    border-color: var(--rose-light) !important;
    box-shadow: 0 0 0 3px rgba(224, 176, 176, 0.2) !important;
}

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

/* Buttons */
.dark-mode .btn-secondary,
.dark-mode .luxury-clear-btn {
    background: var(--bg-secondary) !important;
    border-color: var(--border-color) !important;
    color: var(--text-primary) !important;
}

.dark-mode .btn-secondary:hover,
.dark-mode .luxury-clear-btn:hover {
    background: var(--bg-hover) !important;
    border-color: var(--rose-light) !important;
}

/* Calendar Specific */
.dark-mode .calendar-day {
    background: var(--bg-card) !important;
    border-color: var(--border-color) !important;
}

.dark-mode .calendar-day:hover {
    background: var(--bg-hover) !important;
    border-color: var(--rose-light) !important;
}

.dark-mode .calendar-day[style*="background: #FFF5F5"] {
    background: #3d2d2d !important;
    border-color: var(--rose-dark) !important;
}

/* Modals */
.dark-mode #day-modal {
    background: rgba(0, 0, 0, 0.85) !important;
}

.dark-mode #day-modal > div,
.dark-mode .modal-content {
    background: var(--bg-secondary) !important;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.8) !important;
}

/* Note Section */
.dark-mode .note-section-luxury > div:first-child {
    background: linear-gradient(135deg, #2d1f1f 0%, #3d2525 100%) !important;
    border-color: #4d3535 !important;
}

.dark-mode .note-section-luxury > div:last-child {
    background: var(--bg-secondary) !important;
    border-color: #4d3535 !important;
}

.dark-mode #day-note-input {
    background: var(--bg-card) !important;
    border-color: var(--border-color) !important;
    color: var(--text-primary) !important;
}

/* Dashboard Stats */
.dark-mode .stat-box,
.dark-mode .stats-card {
    background: linear-gradient(135deg, #1f1f1f 0%, #1a1a1a 100%) !important;
    border-color: var(--border-color) !important;
    color: var(--text-primary) !important;
}

.dark-mode .stat-box:hover,
.dark-mode .stats-card:hover {
    background: linear-gradient(135deg, #2a2a2a 0%, #1f1f1f 100%) !important;
    border-left-color: var(--rose-light) !important;
}

/* Dashboard numbers and text */
.dark-mode .stat-box h3,
.dark-mode .stat-box p,
.dark-mode .stat-box span,
.dark-mode .stats-card h3,
.dark-mode .stats-card p,
.dark-mode .stats-card span {
    color: var(--text-primary) !important;
}

.dark-mode .stat-box .text-muted,
.dark-mode .stats-card .text-muted {
    color: var(--text-muted) !important;
}

/* Luxury Stats Cards */
.dark-mode .luxury-stats-grid {
    background: transparent !important;
}

.dark-mode .luxury-stat-card {
    background: linear-gradient(135deg, #1f1f1f 0%, #1a1a1a 100%) !important;
    border: 1px solid var(--border-color) !important;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.5) !important;
}

.dark-mode .luxury-stat-card:hover {
    background: linear-gradient(135deg, #2a2a2a 0%, #1f1f1f 100%) !important;
    transform: translateY(-4px);
    box-shadow: 0 8px 24px rgba(212, 165, 165, 0.3) !important;
}

.dark-mode .luxury-stat-icon {
    background: rgba(212, 165, 165, 0.15) !important;
}

.dark-mode .luxury-stat-number {
    color: #ffffff !important;
    font-weight: 700;
}

.dark-mode .luxury-stat-label {
    color: #a0a0a0 !important;
}

/* Luxury Item Cards */
.dark-mode .luxury-item-card {
    background: var(--bg-card) !important;
    border: 1px solid var(--border-color) !important;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.5) !important;
}

.dark-mode .luxury-item-card:hover {
    background: var(--bg-hover) !important;
    border-color: var(--rose-light) !important;
    box-shadow: 0 8px 24px rgba(212, 165, 165, 0.3) !important;
    transform: translateY(-4px);
}

.dark-mode .luxury-item-image {
    background: var(--bg-hover) !important;
}

.dark-mode .luxury-item-badge {
    background: var(--bg-secondary) !important;
    color: var(--text-secondary) !important;
    border: 1px solid var(--border-color) !important;
}

.dark-mode .luxury-item-info {
    background: transparent !important;
}

.dark-mode .luxury-item-name {
    color: #ffffff !important;
    font-weight: 500;
}

.dark-mode .luxury-item-description,
.dark-mode .luxury-item-details {
    color: var(--text-muted) !important;
}

/* Flash Messages */
.dark-mode .alert {
    border-left-width: 4px;
}

.dark-mode .alert-success {
    background: #1e3a1e !important;
    color: #90ee90 !important;
    border-color: #2d5a2d !important;
}

.dark-mode .alert-error {
    background: #3a1e1e !important;
    color: #ff9999 !important;
    border-color: #5a2d2d !important;
}

/* Outfit Cards */
.dark-mode .outfit-card,
.dark-mode .item-preview {
    background: var(--bg-card) !important;
    border-color: var(--border-color) !important;
}

/* Tables */
.dark-mode table {
    background: var(--bg-card) !important;
}

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

.dark-mode td {
    border-color: var(--border-color) !important;
    color: var(--text-secondary) !important;
}

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

/* Scrollbar */
.dark-mode::-webkit-scrollbar {
    width: 12px;
}

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

.dark-mode::-webkit-scrollbar-thumb {
    background: var(--bg-hover);
    border-radius: 6px;
}

.dark-mode::-webkit-scrollbar-thumb:hover {
    background: var(--rose-dark);
}

/* Analytics Charts (if any) */
.dark-mode .chart-container {
    background: var(--bg-card) !important;
}

/* Mobile Menu */
.dark-mode #mobile-menu {
    background: var(--bg-secondary) !important;
}

.dark-mode #mobile-menu a {
    background: var(--bg-card) !important;
    border-color: var(--border-color) !important;
    color: var(--text-primary) !important;
}

.dark-mode #mobile-menu a:hover {
    background: linear-gradient(135deg, #E0B0B0 0%, #C89595 100%) !important;
    color: white !important;
}

/* Category Badges */
.dark-mode .category-badge {
    opacity: 0.9;
}

/* Images - Slight dimming in dark mode */
.dark-mode img {
    opacity: 0.95;
}

.dark-mode img:hover {
    opacity: 1;
}

/* Loading States */
.dark-mode .skeleton {
    background: linear-gradient(90deg, var(--bg-card) 0%, var(--bg-hover) 50%, var(--bg-card) 100%);
    background-size: 200% 100%;
    animation: skeleton-loading 1.5s ease-in-out infinite;
}

@keyframes skeleton-loading {
    0% { background-position: 200% 0; }
    100% { background-position: -200% 0; }
}

/* Special Elements */
.dark-mode .logo-text {
    color: var(--text-primary) !important;
}

.dark-mode .logo-accent {
    color: var(--rose-light) !important;
}

/* Navigation text visibility */
.dark-mode nav span,
.dark-mode nav a {
    color: var(--text-secondary) !important;
}

.dark-mode nav a:hover {
    color: white !important;
}

/* Shadows Enhancement */
.dark-mode .luxury-btn {
    box-shadow: 0 4px 14px rgba(224, 176, 176, 0.4) !important;
}

.dark-mode .luxury-btn:hover {
    box-shadow: 0 6px 20px rgba(224, 176, 176, 0.5) !important;
}

/* Empty States */
.dark-mode .empty-state {
    color: var(--text-muted) !important;
}

/* Dividers */
.dark-mode hr,
.dark-mode [style*="border-top"],
.dark-mode [style*="border-bottom"] {
    border-color: var(--border-color) !important;
}

/* Tooltips */
.dark-mode .tooltip {
    background: var(--bg-secondary) !important;
    color: var(--text-primary) !important;
    box-shadow: 0 4px 12px var(--shadow) !important;
}

/* Print - Disable dark mode */
@media print {
    :root.dark-mode {
        --bg-primary: white;
        --bg-secondary: white;
        --bg-card: white;
        --text-primary: black;
        --text-secondary: #333;
    }
}

/* COMPREHENSIVE TEXT VISIBILITY FIX */
/* Force all text elements to be visible in dark mode */

/* Override ALL white backgrounds */
.dark-mode [style*="background: white"],
.dark-mode [style*="background:white"],
.dark-mode [style*="background: #FFFFFF"],
.dark-mode [style*="background:#FFFFFF"],
.dark-mode [style*="background: #ffffff"],
.dark-mode [style*="background:#ffffff"],
.dark-mode [style*="background: #FFF"],
.dark-mode [style*="background:#FFF"],
.dark-mode [style*="background: #fff"],
.dark-mode [style*="background:#fff"],
.dark-mode [style*="background: #FAFAFA"],
.dark-mode [style*="background:#FAFAFA"] {
    background: var(--bg-card) !important;
}

/* Override light border colors */
.dark-mode [style*="border: 1px solid #E5E5E5"],
.dark-mode [style*="border:1px solid #E5E5E5"],
.dark-mode [style*="border-bottom: 1px solid #E5E5E5"],
.dark-mode [style*="border-top: 1px solid #E5E5E5"],
.dark-mode [style*="border-left: 1px solid #E5E5E5"],
.dark-mode [style*="border-right: 1px solid #E5E5E5"] {
    border-color: var(--border-color) !important;
}

/* Override light box shadows */
.dark-mode [style*="box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08)"],
.dark-mode [style*="box-shadow:0 2px 8px rgba(0, 0, 0, 0.08)"] {
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.5) !important;
}

/* Weather widget specific overrides */
.dark-mode div[style*="padding: 2rem"][style*="margin: 0 1.5rem"] {
    background: var(--bg-card) !important;
}

/* Item cards in weather widget */
.dark-mode div[style*="border-radius: 8px"][style*="border: 1px solid"] {
    background: var(--bg-secondary) !important;
    border-color: var(--border-color) !important;
}

/* Images background fix */
.dark-mode div[style*="background: #FAFAFA"],
.dark-mode div[style*="background:#FAFAFA"] {
    background: var(--bg-hover) !important;
}

.dark-mode [style*="color: #2D2D2D;"],
.dark-mode [style*="color:#2D2D2D;"],
.dark-mode [style*="color: #2d2d2d;"],
.dark-mode [style*="color:#2d2d2d;"] {
    color: var(--text-primary) !important;
}

.dark-mode [style*="color: #6B6B6B;"],
.dark-mode [style*="color:#6B6B6B;"],
.dark-mode [style*="color: #6b6b6b;"],
.dark-mode [style*="color:#6b6b6b;"] {
    color: var(--text-secondary) !important;
}

.dark-mode [style*="color: #9B8B8B;"],
.dark-mode [style*="color:#9B8B8B;"],
.dark-mode [style*="color: #9b8b8b;"],
.dark-mode [style*="color:#9b8b8b;"] {
    color: var(--text-muted) !important;
}

/* Section titles */
.dark-mode .section-title {
    color: var(--text-primary) !important;
}

.dark-mode .section-title:after {
    background: var(--rose-light) !important;
}

/* Ensure main content area text is visible */
.dark-mode main {
    color: var(--text-secondary);
}

.dark-mode main * {
    border-color: var(--border-color);
}

/* Fix any remaining invisible text */
.dark-mode .mx-auto {
    color: var(--text-secondary);
}

/* Font weight based overrides */
.dark-mode [style*="font-weight: 700"],
.dark-mode [style*="font-weight: 600"],
.dark-mode [style*="font-weight:700"],
.dark-mode [style*="font-weight:600"] {
    color: var(--text-primary) !important;
}

/* Generic div text that might be missed */
.dark-mode div[style*="font-size"] {
    color: var(--text-secondary) !important;
}

/* User info and badges */
.dark-mode .badge,
.dark-mode [class*="badge"] {
    border-color: var(--border-color) !important;
}

/* Ensure proper contrast */
.dark-mode .fashion-card div,
.dark-mode .item-card div,
.dark-mode .settings-card div {
    color: var(--text-secondary);
}

.dark-mode .fashion-card h1,
.dark-mode .fashion-card h2,
.dark-mode .fashion-card h3,
.dark-mode .fashion-card h4,
.dark-mode .item-card h1,
.dark-mode .item-card h2,
.dark-mode .item-card h3,
.dark-mode .item-card h4 {
    color: var(--text-primary) !important;
}

/* NUCLEAR OPTION - Override ALL inline white/light backgrounds */
.dark-mode main div[style*="background"],
.dark-mode main section[style*="background"],
.dark-mode main article[style*="background"] {
    /* This will be overridden by more specific rules if needed */
}

.dark-mode main div[style*="background: white"] {
    background: var(--bg-card) !important;
}

.dark-mode main div[style*="background: #FFF"] {
    background: var(--bg-card) !important;
}

.dark-mode main div[style*="background:#FFF"] {
    background: var(--bg-card) !important;
}

/* Force all divs with padding and borders to be dark */
.dark-mode main > div > div[style*="padding"][style*="border"] {
    background: var(--bg-card) !important;
    border-color: var(--border-color) !important;
}

/* Catch all remaining white cards */
.dark-mode div[style*="border-radius: 8px"][style*="background: white"] {
    background: var(--bg-card) !important;
}

.dark-mode div[style*="border-radius: 8px"][style*="box-shadow"] {
    background: var(--bg-card) !important;
}

/* Override padding containers with white background */
.dark-mode [style*="padding: 2rem; margin"][style*="background"] {
    background: var(--bg-card) !important;
}

/* ULTRA SPECIFIC - Weather widget and similar cards */
.dark-mode div[style*="background: white; border-radius: 8px; padding: 2rem"] {
    background: var(--bg-card) !important;
}

.dark-mode div[style*="background: white"][style*="border-radius"][style*="padding"][style*="box-shadow"] {
    background: var(--bg-card) !important;
}

/* All child divs within main content area */
.dark-mode main .mx-auto > div[style*="background: white"] {
    background: var(--bg-card) !important;
}

/* Grid items with white backgrounds */
.dark-mode [style*="display: grid"] > div[style*="background: white"],
.dark-mode [style*="display: flex"] > div[style*="background: white"] {
    background: var(--bg-card) !important;
}

/* Links inside dark mode */
.dark-mode a > div[style*="background: white"] {
    background: var(--bg-secondary) !important;
}

/* Last resort - any div with rounded corners and white bg */
.dark-mode div[style*="border-radius"][style*="background"][style*="white"] {
    background: var(--bg-card) !important;
}

/* =================================================================
   COMPREHENSIVE ALL-PAGE DARK MODE FIXES
   Covers: Settings, Analytics, Recommendations, Calendar, etc.
   ================================================================= */

/* Override ALL variations of light backgrounds */
.dark-mode [style*="background: #F8F8F8"],
.dark-mode [style*="background:#F8F8F8"],
.dark-mode [style*="background: #f8f8f8"],
.dark-mode [style*="background:#f8f8f8"] {
    background: var(--bg-card) !important;
}

.dark-mode [style*="background: #F0F0F0"],
.dark-mode [style*="background:#F0F0F0"],
.dark-mode [style*="background: #F9FAFB"],
.dark-mode [style*="background:#F9FAFB"],
.dark-mode [style*="background: #F3F4F6"],
.dark-mode [style*="background:#F3F4F6"] {
    background: var(--bg-secondary) !important;
}

/* Override all text color variations */
.dark-mode [style*="color: #6B7280"],
.dark-mode [style*="color:#6B7280"],
.dark-mode [style*="color: #CCCCCC"],
.dark-mode [style*="color:#CCCCCC"] {
    color: var(--text-secondary) !important;
}

/* Border color overrides - comprehensive */
.dark-mode [style*="border: 2px solid #E5E5E5"],
.dark-mode [style*="border:2px solid #E5E5E5"],
.dark-mode [style*="border: 1px solid #D1D5DB"],
.dark-mode [style*="border:1px solid #D1D5DB"],
.dark-mode [style*="border: 2px solid #D1D5DB"],
.dark-mode [style*="border:2px solid #D1D5DB"] {
    border-color: var(--border-color) !important;
}

/* Settings page specific - override all settings styles */
.dark-mode .container {
    background: transparent !important;
}

.dark-mode .header h1,
.dark-mode .header p {
    color: var(--text-primary) !important;
}

.dark-mode .settings-grid > div,
.dark-mode .settings-card {
    background: var(--bg-card) !important;
    border-color: var(--border-color) !important;
    box-shadow: 0 4px 16px var(--shadow) !important;
}

.dark-mode .card-title h2,
.dark-mode .card-title p {
    color: var(--text-primary) !important;
}

.dark-mode .card-title p {
    color: var(--text-secondary) !important;
}

.dark-mode .stat-box {
    background: var(--bg-secondary) !important;
    border-color: var(--border-color) !important;
}

.dark-mode .stat-value {
    color: var(--rose-light) !important;
}

.dark-mode .stat-label {
    color: var(--text-secondary) !important;
}

.dark-mode .toggle-container {
    background: var(--bg-secondary) !important;
}

.dark-mode .toggle-label strong {
    color: var(--text-primary) !important;
}

.dark-mode .toggle-label span {
    color: var(--text-secondary) !important;
}

.dark-mode .form-label {
    color: var(--text-primary) !important;
}

.dark-mode .form-help {
    color: var(--text-muted) !important;
}

.dark-mode .day-checkbox label {
    background: var(--bg-secondary) !important;
    border-color: var(--border-color) !important;
    color: var(--text-secondary) !important;
}

.dark-mode .day-checkbox input:checked + label {
    background: linear-gradient(135deg, #D4A5A5 0%, #B88A8A 100%) !important;
    color: white !important;
}

.dark-mode .back-link {
    color: var(--text-secondary) !important;
}

.dark-mode .back-link:hover {
    color: var(--rose-light) !important;
}

/* Recommendation cards and outfit previews */
.dark-mode .recommendation-card {
    background: var(--bg-card) !important;
    border-color: var(--border-color) !important;
}

.dark-mode .recommendation-card:hover {
    border-color: var(--rose-light) !important;
    box-shadow: 0 8px 24px rgba(212, 165, 165, 0.3) !important;
}

.dark-mode div[style*="background: #FAFAFA; border-radius"] {
    background: var(--bg-card) !important;
}

.dark-mode div[style*="background: #F8F8F8; border-radius"] {
    background: var(--bg-secondary) !important;
}

/* Analytics page - stat cards */
.dark-mode .stat-card {
    background: var(--bg-card) !important;
    border-color: var(--border-color) !important;
}

.dark-mode .stat-card:hover {
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.3) !important;
}

/* Calendar specific fixes */
.dark-mode .calendar-navigation {
    background: var(--bg-card) !important;
    box-shadow: 0 2px 8px var(--shadow) !important;
}

.dark-mode .month-title {
    color: var(--text-primary) !important;
}

.dark-mode .nav-btn {
    color: var(--text-secondary) !important;
}

.dark-mode .nav-btn:hover {
    background: var(--bg-hover) !important;
}

/* Modal backgrounds - comprehensive */
.dark-mode [id*="modal"],
.dark-mode [class*="modal"] {
    background: rgba(0, 0, 0, 0.85) !important;
}

.dark-mode [id*="modal"] > div,
.dark-mode [class*="modal"] > div {
    background: var(--bg-secondary) !important;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.8) !important;
}

.dark-mode [id*="modal"] h3,
.dark-mode [class*="modal"] h3 {
    color: var(--text-primary) !important;
}

/* Date picker modal */
.dark-mode #date-picker-modal > div {
    background: var(--bg-secondary) !important;
}

.dark-mode #date-picker-content {
    background: var(--bg-secondary) !important;
}

.dark-mode #outfit-date-input {
    background: var(--bg-card) !important;
    border-color: var(--border-color) !important;
    color: var(--text-primary) !important;
}

.dark-mode .quick-date-btn {
    background: var(--bg-card) !important;
    border-color: var(--border-color) !important;
    color: var(--text-secondary) !important;
}

/* Outfit cards - all views */
.dark-mode .outfit-card {
    background: var(--bg-card) !important;
    border-color: var(--border-color) !important;
    box-shadow: 0 4px 16px var(--shadow) !important;
}

.dark-mode .outfit-card:hover {
    box-shadow: 0 8px 20px rgba(212, 165, 165, 0.25) !important;
}

/* Outfit info sections */
.dark-mode div[style*="background: #F8F8F8; border-radius: 6px"] {
    background: var(--bg-secondary) !important;
    border-color: var(--border-color) !important;
}

/* Item preview boxes */
.dark-mode div[style*="aspect-ratio: 1; background: #FAFAFA"] {
    background: var(--bg-hover) !important;
}

/* Empty states */
.dark-mode div[style*="text-align: center; padding: 4rem"] > div {
    background: var(--bg-card) !important;
}

.dark-mode div[style*="text-align: center; padding: 3rem"] {
    background: var(--bg-card) !important;
}

/* Action buttons with white background */
.dark-mode a[style*="background: white"],
.dark-mode button[style*="background: white"] {
    background: var(--bg-secondary) !important;
    color: var(--text-primary) !important;
    border-color: var(--border-color) !important;
}

/* Notification banner */
.dark-mode div[id*="notification-banner"],
.dark-mode div[id*="banner"] {
    background: linear-gradient(135deg, #3d2d2d 0%, #4d3535 100%) !important;
}

.dark-mode div[id*="notification-banner"] h4 {
    color: var(--text-primary) !important;
}

.dark-mode div[id*="notification-banner"] p {
    color: var(--text-secondary) !important;
}

/* Today's outfit reminder gradient - keep gradient but adjust */
.dark-mode div[style*="background: linear-gradient(135deg, #D4A5A5"] {
    /* Keep gradient for these special sections */
}

/* Weather widget comprehensive fix */
.dark-mode div[style*="padding: 2rem; margin: 0 1.5rem"] {
    background: var(--bg-card) !important;
}

.dark-mode div[style*="padding-bottom: 1.5rem; border-bottom: 1px solid"] {
    border-color: var(--border-color) !important;
}

/* Weather widget item cards */
.dark-mode div[style*="padding: 0.5rem"] > p[style*="color: #2D2D2D"] {
    color: var(--text-primary) !important;
}

.dark-mode div[style*="padding: 0.5rem"] > p[style*="color: #9B8B8B"] {
    color: var(--text-muted) !important;
}

/* Category badges */
.dark-mode span[style*="background: #F8F8F8"] {
    background: var(--bg-secondary) !important;
    color: var(--text-secondary) !important;
    border-color: var(--border-color) !important;
}

/* Filter buttons */
.dark-mode .occasion-filter {
    background: var(--bg-card) !important;
    border-color: var(--border-color) !important;
    color: var(--text-secondary) !important;
}

.dark-mode .occasion-filter.active {
    background: linear-gradient(135deg, #D4A5A5 0%, #B88A8A 100%) !important;
    color: white !important;
    border-color: #D4A5A5 !important;
}

/* Share modal */
.dark-mode div[style*="max-width: 700px"] {
    background: var(--bg-secondary) !important;
}

.dark-mode .close-share-modal {
    background: var(--bg-hover) !important;
}

/* Dashboard hero section */
.dark-mode .luxury-hero {
    background: linear-gradient(135deg, #2d1f1f 0%, #3d2525 100%) !important;
}

/* Luxury theme specific */
.dark-mode .luxury-theme {
    background: transparent !important;
}

.dark-mode .luxury-dashboard {
    background: transparent !important;
}

/* Section titles */
.dark-mode .luxury-section-title {
    color: var(--text-primary) !important;
}

/* Action grid */
.dark-mode .luxury-action-card {
    background: var(--bg-card) !important;
    border: 1px solid var(--border-color) !important;
}

.dark-mode .luxury-action-card:hover {
    border-color: var(--rose-light) !important;
    box-shadow: 0 8px 24px rgba(212, 165, 165, 0.3) !important;
}

.dark-mode .luxury-action-content h3 {
    color: var(--text-primary) !important;
}

.dark-mode .luxury-action-content p {
    color: var(--text-muted) !important;
}

/* Item grid */
.dark-mode .luxury-item-grid {
    background: transparent !important;
}

/* Login/Register pages */
.dark-mode .luxury-login-container {
    background: transparent !important;
}

.dark-mode .luxury-card {
    background: var(--bg-card) !important;
    border-color: var(--border-color) !important;
}

.dark-mode .luxury-title {
    color: var(--text-primary) !important;
}

.dark-mode .luxury-subtitle {
    color: var(--text-secondary) !important;
}

.dark-mode .luxury-label {
    color: var(--text-secondary) !important;
}

.dark-mode .luxury-input {
    background: var(--bg-secondary) !important;
    border-color: var(--border-color) !important;
    color: var(--text-primary) !important;
}

.dark-mode .luxury-input:focus {
    background: var(--bg-hover) !important;
    border-color: var(--rose-light) !important;
}

.dark-mode .luxury-divider {
    color: var(--text-muted) !important;
}

.dark-mode .luxury-link {
    color: var(--rose-light) !important;
}

/* Items show/edit pages */
.dark-mode .max-w-4xl {
    background: transparent !important;
}

/* Outfit builder */
.dark-mode .item-box {
    background: var(--bg-card) !important;
    border-color: var(--border-color) !important;
}

.dark-mode .item-box.selected {
    border-color: var(--rose-light) !important;
    box-shadow: 0 0 0 3px rgba(212, 165, 165, 0.2) !important;
}

/* Analytics bars */
.dark-mode div[style*="background: #F8F8F8; border-radius: 6px; overflow: hidden"] {
    background: var(--bg-secondary) !important;
}

/* Most worn items cards */
.dark-mode a[style*="background: #FAFAFA"] {
    background: var(--bg-card) !important;
    border-color: var(--border-color) !important;
}

/* ============================================
   RECOMMENDATIONS PAGE - COMPREHENSIVE FIX
   ============================================ */

/* Weather widget - all text colors */
.dark-mode div[style*="padding: 2rem; margin: 0 1.5rem"] h3[style*="color: #2D2D2D"],
.dark-mode div[style*="padding: 2rem; margin: 0 1.5rem"] h4[style*="color: #2D2D2D"] {
    color: var(--text-primary) !important;
}

.dark-mode div[style*="padding: 2rem; margin: 0 1.5rem"] p[style*="color: #6B6B6B"],
.dark-mode div[style*="padding: 2rem; margin: 0 1.5rem"] span[style*="color: #6B6B6B"] {
    color: var(--text-secondary) !important;
}

.dark-mode div[style*="padding: 2rem; margin: 0 1.5rem"] p[style*="color: #9B8B8B"] {
    color: var(--text-muted) !important;
}

/* Weather widget specific elements */
.dark-mode h3[style*="font-size: 2rem"][style*="color: #2D2D2D"] {
    color: var(--text-primary) !important;
}

.dark-mode p[style*="font-size: 0.95rem"][style*="color: #6B6B6B"],
.dark-mode p[style*="font-size: 0.8rem"][style*="color: #9B8B8B"] {
    color: var(--text-secondary) !important;
}

.dark-mode div[style*="text-align: right"] p span[style*="color: #2D2D2D"] {
    color: var(--text-primary) !important;
}

/* Weather tips section */
.dark-mode h4[style*="font-size: 0.95rem"][style*="color: #2D2D2D"] {
    color: var(--text-primary) !important;
}

.dark-mode div[style*="display: flex; align-items: start"] span[style*="color: #6B6B6B"] {
    color: var(--text-secondary) !important;
}

/* Recommended items labels */
.dark-mode p[style*="font-size: 0.75rem"][style*="color: #6B6B6B"][style*="text-transform: uppercase"] {
    color: var(--text-secondary) !important;
}

/* Recommended item cards background */
.dark-mode a.recommended-item-card > div[style*="background: white"] {
    background: var(--bg-card) !important;
    border-color: var(--border-color) !important;
}

.dark-mode a.recommended-item-card div[style*="background: #FAFAFA"] {
    background: var(--bg-hover) !important;
}

.dark-mode a.recommended-item-card div[style*="background: #F8F8F8"] {
    background: var(--bg-secondary) !important;
}

/* Item names in recommended cards */
.dark-mode a.recommended-item-card p[style*="color: #2D2D2D"] {
    color: var(--text-primary) !important;
}

.dark-mode a.recommended-item-card p[style*="color: #9B8B8B"] {
    color: var(--text-muted) !important;
}

/* Section headers on recommendations page */
.dark-mode h2[style*="font-size: 1.25rem"][style*="color: #2D2D2D"] {
    color: var(--text-primary) !important;
}

.dark-mode p[style*="font-size: 0.875rem"][style*="color: #6B6B6B"] {
    color: var(--text-secondary) !important;
}

/* Filter controls label */
.dark-mode span[style*="font-size: 0.875rem"][style*="color: #6B6B6B"][style*="font-weight: 500"] {
    color: var(--text-secondary) !important;
}

/* Outfit card header (Look #1, etc) - keep the gradient background */
.dark-mode .outfit-card div[style*="background: #D4A5A5"] {
    background: linear-gradient(135deg, #D4A5A5 0%, #B88A8A 100%) !important;
}

/* Outfit card item preview backgrounds */
.dark-mode .outfit-card div[style*="aspect-ratio: 1; background: #FAFAFA"] {
    background: var(--bg-hover) !important;
    border-color: var(--border-color) !important;
}

/* Why This Look section */
.dark-mode .outfit-card div[style*="background: #F8F8F8; border-radius: 6px; padding: 1rem"] {
    background: var(--bg-secondary) !important;
    border-color: var(--border-color) !important;
}

.dark-mode .outfit-card h4[style*="color: #6B6B6B"] {
    color: var(--text-secondary) !important;
}

.dark-mode .outfit-card ul li[style*="color: #6B6B6B"] {
    color: var(--text-secondary) !important;
}

/* Item names section in outfit cards */
.dark-mode .outfit-card div[style*="margin-top: 0.75rem"] p span[style*="color: #6B6B6B"] {
    color: var(--text-secondary) !important;
}

.dark-mode .outfit-card div[style*="margin-top: 0.75rem"] p[style*="color: #9B8B8B"] {
    color: var(--text-muted) !important;
}

/* Load more button */
.dark-mode button[id="load-more-btn"] {
    background: var(--bg-card) !important;
    border-color: #D4A5A5 !important;
    color: #D4A5A5 !important;
}

.dark-mode button[id="load-more-btn"]:hover {
    background: linear-gradient(135deg, #D4A5A5 0%, #B88A8A 100%) !important;
    color: white !important;
}

.dark-mode p[style*="margin-top: 0.75rem"] span[id="current-count"] {
    color: var(--text-secondary) !important;
}

/* Empty state text */
.dark-mode div[style*="text-align: center; padding: 4rem"] h3[style*="color: #2D2D2D"] {
    color: var(--text-primary) !important;
}

.dark-mode div[style*="text-align: center; padding: 4rem"] p[style*="color: #6B6B6B"] {
    color: var(--text-secondary) !important;
}

/* Date picker modal header */
.dark-mode #date-picker-modal h3[style*="color: #2D2D2D"] {
    color: var(--text-primary) !important;
}

.dark-mode #date-picker-modal p[style*="color: #9B8B8B"] {
    color: var(--text-muted) !important;
}

.dark-mode #date-picker-modal label[style*="color: #2D2D2D"] {
    color: var(--text-secondary) !important;
}

/* Date picker icon gradient background */
.dark-mode #date-picker-modal div[style*="background: linear-gradient(135deg, #D4A5A5"] {
    background: linear-gradient(135deg, #D4A5A5 0%, #B88A8A 100%) !important;
}

/* Cancel button in date picker */
.dark-mode #cancel-date-btn {
    background: var(--bg-card) !important;
    border-color: var(--border-color) !important;
    color: var(--text-secondary) !important;
}

.dark-mode #cancel-date-btn:hover {
    border-color: #D4A5A5 !important;
    color: #D4A5A5 !important;
}

/* Share modal comprehensive fix */
.dark-mode div[style*="max-width: 700px"][style*="background: white"] {
    background: var(--bg-secondary) !important;
}

.dark-mode div[style*="max-width: 700px"] h3[style*="color: #2D2D2D"] {
    color: var(--text-primary) !important;
}

.dark-mode div[style*="max-width: 700px"] p[style*="color: #6B6B6B"] {
    color: var(--text-secondary) !important;
}

.dark-mode .close-share-modal[style*="background: #F8F8F8"] {
    background: var(--bg-hover) !important;
}

.dark-mode .close-share-modal:hover {
    background: linear-gradient(135deg, #D4A5A5 0%, #B88A8A 100%) !important;
}

.dark-mode .close-share-modal:hover svg {
    color: white !important;
}

/* Share modal image border */
.dark-mode div[style*="border: 3px solid #E5E5E5"][style*="background: #FAFAFA"] {
    background: var(--bg-card) !important;
    border-color: var(--border-color) !important;
}

/* Share modal buttons */
.dark-mode .download-outfit-btn {
    background: linear-gradient(135deg, #D4A5A5 0%, #B88A8A 100%) !important;
    color: white !important;
}

.dark-mode .copy-image-btn {
    background: var(--bg-card) !important;
    border-color: var(--border-color) !important;
    color: var(--text-secondary) !important;
}

.dark-mode .copy-image-btn:hover {
    border-color: #D4A5A5 !important;
    color: #D4A5A5 !important;
}

/* Category badges in recommendations */
.dark-mode span[style*="padding: 0.375rem 0.875rem"][style*="background: #F8F8F8"] {
    background: var(--bg-secondary) !important;
    color: var(--text-secondary) !important;
    border-color: var(--border-color) !important;
}

/* Italic text for category suggestions */
.dark-mode p[style*="color: #9B8B8B"][style*="font-style: italic"] {
    color: var(--text-muted) !important;
}

/* Filter buttons - ensure proper styling */
.dark-mode .occasion-filter[style*="background: white"] {
    background: var(--bg-card) !important;
    border-color: var(--border-color) !important;
    color: var(--text-secondary) !important;
}

.dark-mode .occasion-filter.active[style*="background: #D4A5A5"] {
    background: linear-gradient(135deg, #D4A5A5 0%, #B88A8A 100%) !important;
    color: white !important;
    border-color: #D4A5A5 !important;
}

.dark-mode a[style*="background: #FAFAFA"]:hover {
    background: var(--bg-hover) !important;
    border-color: var(--rose-light) !important;
}

/* Character count and save status */
.dark-mode #char-count {
    color: var(--text-muted) !important;
}

.dark-mode #save-status {
    color: var(--text-secondary) !important;
}

/* Close buttons */
.dark-mode #close-modal-btn {
    background: var(--bg-hover) !important;
}

.dark-mode #close-modal-btn svg {
    color: var(--text-secondary) !important;
}

/* Comprehensive fallback for any missed white divs */
.dark-mode div[style*="background"][style*="white"],
.dark-mode section[style*="background"][style*="white"],
.dark-mode article[style*="background"][style*="white"] {
    background: var(--bg-card) !important;
}

/* Fix for inline padding containers */
.dark-mode [style*="padding: 1.5rem"][style*="background: white"],
.dark-mode [style*="padding: 2rem"][style*="background: white"],
.dark-mode [style*="padding: 1.25rem"][style*="background: white"] {
    background: var(--bg-card) !important;
}

/* Fix gradients that should be dark */
.dark-mode [style*="background: linear-gradient(135deg, #FAFAFA"],
.dark-mode [style*="background: linear-gradient(180deg, #FAFAFA"] {
    background: linear-gradient(135deg, var(--bg-card) 0%, var(--bg-secondary) 100%) !important;
}

/* Override margin containers with white bg */
.dark-mode [style*="margin: 0 1.5rem"][style*="background: white"] {
    background: var(--bg-card) !important;
}

/* Icon containers that might be light */
.dark-mode div[style*="width: 48px; height: 48px; background: white"],
.dark-mode div[style*="width: 40px; height: 40px; background: white"] {
    background: var(--bg-secondary) !important;
}

/* Fix text inside any card-like structure */
.dark-mode [style*="border-radius"][style*="padding"] h1,
.dark-mode [style*="border-radius"][style*="padding"] h2,
.dark-mode [style*="border-radius"][style*="padding"] h3,
.dark-mode [style*="border-radius"][style*="padding"] h4 {
    color: var(--text-primary) !important;
}

.dark-mode [style*="border-radius"][style*="padding"] p,
.dark-mode [style*="border-radius"][style*="padding"] span,
.dark-mode [style*="border-radius"][style*="padding"] div {
    color: var(--text-secondary) !important;
}

/* Ensure ALL headings are visible */
.dark-mode h1, .dark-mode h2, .dark-mode h3,
.dark-mode h4, .dark-mode h5, .dark-mode h6 {
    color: var(--text-primary) !important;
}

/* Ensure ALL paragraphs are visible */
.dark-mode p {
    color: var(--text-secondary) !important;
}

/* Ensure ALL spans are visible */
.dark-mode span {
    color: var(--text-secondary) !important;
}

/* Ensure ALL labels are visible */
.dark-mode label {
    color: var(--text-secondary) !important;
}

/* Ensure font awesome icons are visible */
.dark-mode .fa,
.dark-mode .fas,
.dark-mode .far,
.dark-mode .fal,
.dark-mode .fab {
    color: var(--text-secondary) !important;
}

/* SVG icon colors */
.dark-mode svg {
    color: inherit !important;
}

/* Final catch-all for any remaining issues */
.dark-mode * {
    border-color: var(--border-color);
}

/* =================================================================
   ITEM CARD ACTION BUTTONS FIX
   Fix for View/Edit/Delete buttons at bottom of item cards
   ================================================================= */

/* Action button container with border-top */
.dark-mode .item-actions {
    border-top-color: var(--border-color) !important;
}

.dark-mode div[style*="padding: 0.75rem; display: flex; gap: 0.5rem; border-top"] {
    border-top-color: var(--border-color) !important;
}

/* View button - keep rose color */
.dark-mode .btn-view {
    background: linear-gradient(135deg, #D4A5A5 0%, #B88A8A 100%) !important;
    color: white !important;
    border: none !important;
}

.dark-mode .btn-view:hover {
    background: linear-gradient(135deg, #E0B0B0 0%, #C89595 100%) !important;
    box-shadow: 0 4px 12px rgba(212, 165, 165, 0.4) !important;
}

/* Edit button - dark theme */
.dark-mode .btn-edit {
    background: var(--bg-secondary) !important;
    color: var(--text-primary) !important;
    border-color: var(--border-color) !important;
}

.dark-mode .btn-edit:hover {
    background: var(--bg-hover) !important;
    border-color: var(--rose-light) !important;
    color: var(--rose-light) !important;
}

/* Delete button - red theme */
.dark-mode .btn-delete {
    background: var(--bg-secondary) !important;
    color: #FF6B6B !important;
    border-color: var(--border-color) !important;
}

.dark-mode .btn-delete:hover {
    background: #3d1f1f !important;
    color: #FF8888 !important;
    border-color: #DC2626 !important;
}

/* Edit button - white background with gray text */
.dark-mode a[style*="background: white; color: #6B6B6B"],
.dark-mode a[style*="background: white"][style*="color: #6B6B6B"] {
    background: var(--bg-secondary) !important;
    color: var(--text-primary) !important;
    border-color: var(--border-color) !important;
}

.dark-mode a[style*="background: white; color: #6B6B6B"]:hover,
.dark-mode a[style*="background: white"][style*="color: #6B6B6B"]:hover {
    background: var(--bg-hover) !important;
    border-color: var(--rose-light) !important;
}

/* Delete button - white background with red text */
.dark-mode button[style*="background: white; color: #DC2626"],
.dark-mode button[style*="background: white"][style*="color: #DC2626"] {
    background: var(--bg-secondary) !important;
    color: #FF6B6B !important;
    border-color: var(--border-color) !important;
}

.dark-mode button[style*="background: white; color: #DC2626"]:hover,
.dark-mode button[style*="background: white"][style*="color: #DC2626"]:hover {
    background: #3d1f1f !important;
    color: #FF8888 !important;
    border-color: #DC2626 !important;
}

/* All buttons with white background in general */
.dark-mode button[style*="background: white"] {
    background: var(--bg-secondary) !important;
    color: var(--text-primary) !important;
    border-color: var(--border-color) !important;
}

.dark-mode button[style*="background: white"]:hover {
    background: var(--bg-hover) !important;
    border-color: var(--rose-light) !important;
}

/* Links with white background and border */
.dark-mode a[style*="background: white"][style*="border: 1px solid"] {
    background: var(--bg-secondary) !important;
    border-color: var(--border-color) !important;
}

.dark-mode a[style*="background: white"][style*="border: 1px solid"]:hover {
    background: var(--bg-hover) !important;
    border-color: var(--rose-light) !important;
}

/* =================================================================
   STAR RATING FIX
   Fix for star rating visibility in dark mode
   ================================================================= */

/* Star rating container */
.dark-mode .star-rating {
    /* Keep transparent */
}

/* Filled stars - keep yellow color */
.dark-mode .star-icon[style*="color: #FCD34D"],
.dark-mode .star-icon[style*="color: rgb(252, 211, 77)"],
.dark-mode svg[style*="color: #FCD34D"],
.dark-mode svg[style*="color: rgb(252, 211, 77)"] {
    color: #FCD34D !important;
}

/* Unfilled stars - change from white rgba to dark gray for better visibility */
.dark-mode .star-icon[style*="color: rgba(255, 255, 255, 0.3)"],
.dark-mode svg[style*="color: rgba(255, 255, 255, 0.3)"] {
    color: #4a4a4a !important;
}

/* Alternative unfilled star colors */
.dark-mode .star-icon[style*="color: #E5E5E5"],
.dark-mode svg[style*="color: #E5E5E5"] {
    color: #4a4a4a !important;
}

/* Hover effect for stars */
.dark-mode .star-icon:hover,
.dark-mode .star-rating:hover .star-icon {
    opacity: 0.8;
}

/* All star icons in dark mode should be visible */
.dark-mode .star-icon {
    filter: none !important;
}

/* Star rating in outfit cards */
.dark-mode .outfit-card .star-rating svg,
.dark-mode .luxury-item-card .star-rating svg {
    /* Inherit from above rules */
}

/* =================================================================
   LIGHTBOX & IMAGE VIEWER FIX
   Fix for lightbox close button and controls visibility
   ================================================================= */

/* Lightbox close button */
.dark-mode .lightbox-close {
    background: rgba(0, 0, 0, 0.7) !important;
    color: white !important;
    border: 2px solid rgba(255, 255, 255, 0.3) !important;
}

.dark-mode .lightbox-close:hover {
    background: rgba(212, 165, 165, 0.9) !important;
    border-color: var(--rose-light) !important;
}

.dark-mode .lightbox-close svg {
    color: white !important;
    stroke: white !important;
}

/* Lightbox navigation buttons (prev/next) */
.dark-mode .lightbox-prev,
.dark-mode .lightbox-next {
    background: rgba(0, 0, 0, 0.7) !important;
    color: white !important;
}

.dark-mode .lightbox-prev:hover,
.dark-mode .lightbox-next:hover {
    background: rgba(212, 165, 165, 0.9) !important;
}

.dark-mode .lightbox-prev svg,
.dark-mode .lightbox-next svg {
    color: white !important;
    stroke: white !important;
}

/* Lightbox overlay/backdrop */
.dark-mode .lightbox-overlay,
.dark-mode [class*="lightbox"] {
    background: rgba(0, 0, 0, 0.95) !important;
}

/* Lightbox image container */
.dark-mode .lightbox-content,
.dark-mode .lightbox-image {
    background: transparent !important;
}

/* Image zoom controls */
.dark-mode .zoom-controls {
    background: rgba(0, 0, 0, 0.7) !important;
}

.dark-mode .zoom-controls button {
    background: transparent !important;
    color: white !important;
    border-color: rgba(255, 255, 255, 0.3) !important;
}

.dark-mode .zoom-controls button:hover {
    background: rgba(212, 165, 165, 0.5) !important;
    border-color: var(--rose-light) !important;
}

.dark-mode .zoom-controls svg {
    color: white !important;
    stroke: white !important;
}

/* Image caption in lightbox */
.dark-mode .lightbox-caption {
    background: rgba(0, 0, 0, 0.8) !important;
    color: white !important;
}

/* Ensure all SVG controls are visible */
.dark-mode [class*="lightbox"] svg,
.dark-mode [class*="zoom"] svg,
.dark-mode [class*="image-viewer"] svg {
    color: white !important;
}

/* =================================================================
   LUXURY BUTTON FIX
   Fix for luxury-btn visibility and styling in dark mode
   ================================================================= */

/* Primary luxury button - keep rose gradient */
.dark-mode .luxury-btn {
    background: linear-gradient(135deg, #D4A5A5 0%, #B88A8A 100%) !important;
    color: white !important;
    border: none !important;
    box-shadow: 0 4px 14px rgba(212, 165, 165, 0.4) !important;
}

.dark-mode .luxury-btn:hover {
    background: linear-gradient(135deg, #E0B0B0 0%, #C89595 100%) !important;
    box-shadow: 0 6px 20px rgba(212, 165, 165, 0.6) !important;
    transform: translateY(-2px);
}

.dark-mode .luxury-btn:active {
    transform: translateY(0);
    box-shadow: 0 2px 8px rgba(212, 165, 165, 0.3) !important;
}

/* Secondary luxury button */
.dark-mode .luxury-btn-secondary {
    background: var(--bg-secondary) !important;
    color: var(--text-primary) !important;
    border: 2px solid var(--border-color) !important;
}

.dark-mode .luxury-btn-secondary:hover {
    background: var(--bg-hover) !important;
    border-color: var(--rose-light) !important;
    color: var(--rose-light) !important;
}

/* Outline luxury button */
.dark-mode .luxury-btn-outline {
    background: transparent !important;
    color: var(--rose-light) !important;
    border: 2px solid var(--rose-light) !important;
}

.dark-mode .luxury-btn-outline:hover {
    background: linear-gradient(135deg, #D4A5A5 0%, #B88A8A 100%) !important;
    color: white !important;
    border-color: transparent !important;
}

/* Danger/Delete button */
.dark-mode .luxury-btn-danger {
    background: linear-gradient(135deg, #DC2626 0%, #B91C1C 100%) !important;
    color: white !important;
    border: none !important;
}

.dark-mode .luxury-btn-danger:hover {
    background: linear-gradient(135deg, #EF4444 0%, #DC2626 100%) !important;
    box-shadow: 0 6px 20px rgba(220, 38, 38, 0.4) !important;
}

/* Disabled button state */
.dark-mode .luxury-btn:disabled,
.dark-mode .luxury-btn-secondary:disabled,
.dark-mode .luxury-btn-outline:disabled {
    opacity: 0.5 !important;
    cursor: not-allowed !important;
    transform: none !important;
}

/* Button with icon */
.dark-mode .luxury-btn svg,
.dark-mode .luxury-btn-secondary svg,
.dark-mode .luxury-btn-outline svg {
    color: inherit !important;
}

/* =================================================================
   SHARE OUTFIT BUTTON FIX
   Fix share button visibility in dark mode
   ================================================================= */

/* Share outfit button in dark mode */
.dark-mode .share-outfit-btn {
    background: var(--bg-secondary) !important;
    border: 1px solid var(--border-color) !important;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.5) !important;
}

.dark-mode .share-outfit-btn:hover {
    background: var(--bg-hover) !important;
    border-color: var(--rose-light) !important;
    box-shadow: 0 4px 12px rgba(212, 165, 165, 0.4) !important;
}

.dark-mode .share-outfit-btn svg {
    color: var(--rose-light) !important;
}

/* =================================================================
   OUTFIT BUILDER PAGE FIX
   Fix for outfit builder item selection and form visibility
   ================================================================= */

/* Main form container */
.dark-mode form.max-w-4xl {
    background: transparent !important;
}

/* All white background containers in outfit builder */
.dark-mode form div[style*="background: white; border-radius: 8px; padding: 2rem"] {
    background: var(--bg-card) !important;
    box-shadow: 0 2px 8px var(--shadow) !important;
}

/* Category section titles in outfit builder */
.dark-mode form h3[style*="color: #2D2D2D"] {
    color: var(--text-primary) !important;
}

/* Item box containers */
.dark-mode .item-box {
    background: var(--bg-secondary) !important;
    border-color: var(--border-color) !important;
}

.dark-mode .item-box.selected {
    border-color: var(--rose-light) !important;
    box-shadow: 0 0 0 3px rgba(212, 165, 165, 0.3) !important;
    background: var(--bg-hover) !important;
}

/* No-image placeholder in item boxes */
.dark-mode .item-box div[style*="background: #FAFAFA"] {
    background: var(--bg-hover) !important;
    color: var(--text-secondary) !important;
}

/* Item names under boxes */
.dark-mode form label p[style*="color: #6B6B6B"] {
    color: var(--text-secondary) !important;
}

/* Cancel button */
.dark-mode a[style*="background: white"][style*="text-align: center"] {
    background: var(--bg-secondary) !important;
    color: var(--text-primary) !important;
    border-color: var(--border-color) !important;
}

.dark-mode a[style*="background: white"][style*="text-align: center"]:hover {
    background: var(--bg-hover) !important;
    border-color: var(--rose-light) !important;
}

/* Instruction text */
.dark-mode form p[style*="color: #6B6B6B"] {
    color: var(--text-secondary) !important;
}

/* Empty state message */
.dark-mode form div[style*="border-left: 4px solid #D4A5A5"] {
    background: var(--bg-card) !important;
}

.dark-mode form div[style*="border-left: 4px solid #D4A5A5"] p {
    color: var(--text-secondary) !important;
}

/* Item grid containers */
.dark-mode form div[style*="display: grid; grid-template-columns"] {
    background: transparent !important;
}

/* Checkbox labels */
.dark-mode form label[style*="cursor: pointer"] {
    background: transparent !important;
}

/* Make sure item images are visible */
.dark-mode .item-box img {
    opacity: 1 !important;
    border-radius: 0 !important;
}

/* Item selection hover effect */
.dark-mode .item-box:hover {
    border-color: var(--rose-light) !important;
    transform: scale(1.05);
}

/* Luxury input in outfit builder */
.dark-mode form .luxury-input {
    background: var(--bg-secondary) !important;
    border-color: var(--border-color) !important;
    color: var(--text-primary) !important;
}

.dark-mode form .luxury-input:focus {
    background: var(--bg-hover) !important;
    border-color: var(--rose-light) !important;
}

.dark-mode form .luxury-input::placeholder {
    color: var(--text-muted) !important;
}

/* Luxury label */
.dark-mode form .luxury-label {
    color: var(--text-primary) !important;
}

/* Back link in header */
.dark-mode .luxury-hero a[style*="color: white"] {
    color: white !important;
    opacity: 0.9;
}

.dark-mode .luxury-hero a[style*="color: white"]:hover {
    opacity: 1;
    text-decoration: underline;
}

/* =================================================================
   COMPREHENSIVE BUTTON HOVER FIX - ALL BUTTONS
   Fix all button hover states in dark mode for better UX
   ================================================================= */

/* Save outfit button */
.dark-mode .save-outfit-btn {
    background: linear-gradient(135deg, #D4A5A5 0%, #B88A8A 100%) !important;
    color: white !important;
    border: none !important;
}

.dark-mode .save-outfit-btn:hover {
    background: linear-gradient(135deg, #E0B0B0 0%, #C89595 100%) !important;
    transform: translateY(-2px) !important;
    box-shadow: 0 6px 16px rgba(212, 165, 165, 0.5) !important;
}

.dark-mode .save-outfit-btn:active {
    transform: translateY(0) !important;
}

/* All button elements with padding and color attributes */
.dark-mode button[style*="padding"][style*="background"] {
    transition: all 0.2s ease !important;
}

.dark-mode button[style*="padding"][style*="background"]:hover {
    transform: translateY(-1px);
}

/* Generic button hover for buttons with background: #D4A5A5 */
.dark-mode button[style*="background: #D4A5A5"],
.dark-mode button[style*="background:#D4A5A5"],
.dark-mode a[style*="background: #D4A5A5"],
.dark-mode a[style*="background:#D4A5A5"] {
    background: linear-gradient(135deg, #D4A5A5 0%, #B88A8A 100%) !important;
    transition: all 0.2s ease !important;
}

.dark-mode button[style*="background: #D4A5A5"]:hover,
.dark-mode button[style*="background:#D4A5A5"]:hover,
.dark-mode a[style*="background: #D4A5A5"]:hover,
.dark-mode a[style*="background:#D4A5A5"]:hover {
    background: linear-gradient(135deg, #E0B0B0 0%, #C89595 100%) !important;
    transform: translateY(-2px);
    box-shadow: 0 6px 16px rgba(212, 165, 165, 0.5) !important;
}

/* Buttons with border: 1px solid #E5E5E5 */
.dark-mode button[style*="border: 1px solid #E5E5E5"],
.dark-mode button[style*="border:1px solid #E5E5E5"],
.dark-mode a[style*="border: 1px solid #E5E5E5"],
.dark-mode a[style*="border:1px solid #E5E5E5"] {
    border-color: var(--border-color) !important;
    transition: all 0.2s ease !important;
}

.dark-mode button[style*="border: 1px solid #E5E5E5"]:hover,
.dark-mode button[style*="border:1px solid #E5E5E5"]:hover,
.dark-mode a[style*="border: 1px solid #E5E5E5"]:hover,
.dark-mode a[style*="border:1px solid #E5E5E5"]:hover {
    border-color: var(--rose-light) !important;
    box-shadow: 0 4px 12px rgba(212, 165, 165, 0.3) !important;
    transform: translateY(-1px);
}

/* Buttons with border: 2px solid */
.dark-mode button[style*="border: 2px solid #E5E5E5"],
.dark-mode button[style*="border: 2px solid #D4A5A5"],
.dark-mode a[style*="border: 2px solid #E5E5E5"],
.dark-mode a[style*="border: 2px solid #D4A5A5"] {
    transition: all 0.2s ease !important;
}

.dark-mode button[style*="border: 2px solid #E5E5E5"]:hover,
.dark-mode a[style*="border: 2px solid #E5E5E5"]:hover {
    border-color: var(--rose-light) !important;
    background: var(--bg-hover) !important;
    transform: translateY(-1px);
}

.dark-mode button[style*="border: 2px solid #D4A5A5"]:hover,
.dark-mode a[style*="border: 2px solid #D4A5A5"]:hover {
    background: linear-gradient(135deg, #D4A5A5 0%, #B88A8A 100%) !important;
    color: white !important;
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(212, 165, 165, 0.4) !important;
}

/* Form buttons */
.dark-mode form button[type="submit"] {
    transition: all 0.2s ease !important;
}

.dark-mode form button[type="submit"]:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 16px rgba(212, 165, 165, 0.5) !important;
}

/* Generic link buttons */
.dark-mode a[style*="padding"][style*="border-radius"][style*="text-decoration: none"] {
    transition: all 0.2s ease !important;
}

.dark-mode a[style*="padding"][style*="border-radius"][style*="text-decoration: none"]:hover {
    transform: translateY(-1px);
}

/* Buttons with cursor: pointer */
.dark-mode button[style*="cursor: pointer"],
.dark-mode a[style*="cursor: pointer"] {
    transition: all 0.2s ease !important;
}

.dark-mode button[style*="cursor: pointer"]:hover,
.dark-mode a[style*="cursor: pointer"]:hover {
    opacity: 0.9;
}

/* Apply Filters button */
.dark-mode button[type="submit"].luxury-btn:hover {
    background: linear-gradient(135deg, #E0B0B0 0%, #C89595 100%) !important;
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(212, 165, 165, 0.6) !important;
}

/* Mobile menu button hover */
.dark-mode button[id*="mobile-menu"]:hover,
.dark-mode button[id*="menu-btn"]:hover {
    background: var(--bg-hover) !important;
}

.dark-mode button[id*="mobile-menu"]:hover svg,
.dark-mode button[id*="menu-btn"]:hover svg {
    color: var(--rose-light) !important;
}

/* Navigation link buttons */
.dark-mode nav a[style*="padding"]:hover {
    background: var(--bg-hover) !important;
    color: var(--rose-light) !important;
}

/* Icon buttons (small circular buttons) */
.dark-mode button[style*="width: 40px; height: 40px"],
.dark-mode button[style*="width: 48px; height: 48px"] {
    transition: all 0.2s ease !important;
}

.dark-mode button[style*="width: 40px; height: 40px"]:hover,
.dark-mode button[style*="width: 48px; height: 48px"]:hover {
    transform: scale(1.05);
}

/* Buttons in grid layout */
.dark-mode div[style*="grid-template-columns: 1fr 1fr"] button:hover,
.dark-mode div[style*="display: grid"] button:hover {
    transform: translateY(-1px);
}

/* Quick date buttons in modal */
.dark-mode .quick-date-btn:hover {
    background: var(--bg-hover) !important;
    border-color: var(--rose-light) !important;
    color: var(--rose-light) !important;
    transform: translateY(-1px);
}

.dark-mode .quick-date-btn:active {
    transform: translateY(0) !important;
}

/* Confirm button hover */
.dark-mode #confirm-date-btn:hover {
    box-shadow: 0 8px 20px rgba(212, 165, 165, 0.6) !important;
    transform: translateY(-2px);
}

.dark-mode #confirm-date-btn:active {
    transform: translateY(0) !important;
}

/* Download and copy buttons in share modal */
.dark-mode .download-outfit-btn:hover {
    box-shadow: 0 8px 20px rgba(212, 165, 165, 0.6) !important;
    transform: translateY(-2px);
}

.dark-mode .copy-image-btn:hover {
    background: var(--bg-hover) !important;
    border-color: var(--rose-light) !important;
    color: var(--rose-light) !important;
    transform: translateY(-1px);
}

/* Outfit card action buttons */
.dark-mode .outfit-card button:hover,
.dark-mode .outfit-card a:hover {
    transform: translateY(-1px);
}

/* Prevent disabled buttons from transforming */
.dark-mode button:disabled:hover,
.dark-mode button[disabled]:hover {
    transform: none !important;
    cursor: not-allowed !important;
}

/* Add button (+ Add Item style buttons) */
.dark-mode a[style*="+ Add"]:hover,
.dark-mode button[style*="+ Add"]:hover {
    background: linear-gradient(135deg, #E0B0B0 0%, #C89595 100%) !important;
    transform: translateY(-2px);
    box-shadow: 0 6px 16px rgba(212, 165, 165, 0.5) !important;
}

/* Generic all buttons default smooth hover */
.dark-mode button,
.dark-mode a[role="button"] {
    transition: all 0.2s ease !important;
}

/* Ensure SVG icons inside buttons follow the color */
.dark-mode button:hover svg,
.dark-mode a[role="button"]:hover svg {
    transition: all 0.2s ease;
}

/* Fix for buttons that shouldn't move on hover (like checkbox styled buttons) */
.dark-mode input[type="checkbox"] + label:hover,
.dark-mode input[type="radio"] + label:hover {
    transform: none !important;
}

/* Special: Calendar date buttons hover */
.dark-mode .calendar-day:hover {
    background: var(--bg-hover) !important;
    color: var(--rose-light) !important;
    transform: scale(1.05);
}

/* Special: Filter/tag buttons hover */
.dark-mode button[class*="filter"]:hover,
.dark-mode button[class*="tag"]:hover {
    transform: translateY(-1px);
    box-shadow: 0 3px 10px rgba(212, 165, 165, 0.3) !important;
}

/* Special: Notification buttons */
.dark-mode button[id*="notification"]:hover,
.dark-mode button[id*="alert"]:hover {
    background: var(--bg-hover) !important;
    border-color: var(--rose-light) !important;
}

/* Smooth all transitions for consistency */
.dark-mode * {
    transition-timing-function: ease !important;
}

/* =================================================================
   TEXTAREA & INPUT FIELDS FIX
   Fix all textarea and input fields in dark mode
   ================================================================= */

/* Calendar day note textarea */
.dark-mode #day-note-input,
.dark-mode textarea[id*="note"],
.dark-mode textarea[id*="day"] {
    background: var(--bg-secondary) !important;
    border-color: var(--border-color) !important;
    color: var(--text-primary) !important;
    box-shadow: inset 0 2px 6px rgba(0, 0, 0, 0.3) !important;
}

.dark-mode #day-note-input:focus,
.dark-mode textarea[id*="note"]:focus,
.dark-mode textarea[id*="day"]:focus {
    background: var(--bg-hover) !important;
    border-color: var(--rose-light) !important;
    box-shadow: 0 0 0 4px rgba(212, 165, 165, 0.2), inset 0 2px 6px rgba(0, 0, 0, 0.3) !important;
    outline: none !important;
}

.dark-mode #day-note-input::placeholder,
.dark-mode textarea[id*="note"]::placeholder,
.dark-mode textarea[id*="day"]::placeholder {
    color: var(--text-muted) !important;
    opacity: 0.7;
}

/* All textarea elements with inline styles */
.dark-mode textarea[style*="background: #FAFAFA"],
.dark-mode textarea[style*="background:#FAFAFA"],
.dark-mode textarea[style*="background: #FFFFFF"],
.dark-mode textarea[style*="background:#FFFFFF"] {
    background: var(--bg-secondary) !important;
    border-color: var(--border-color) !important;
    color: var(--text-primary) !important;
}

.dark-mode textarea[style*="background: #FAFAFA"]:focus,
.dark-mode textarea[style*="background:#FAFAFA"]:focus,
.dark-mode textarea[style*="background: #FFFFFF"]:focus,
.dark-mode textarea[style*="background:#FFFFFF"]:focus {
    background: var(--bg-hover) !important;
    border-color: var(--rose-light) !important;
}

/* Textarea with border styling */
.dark-mode textarea[style*="border: 2px solid #F0E0E0"],
.dark-mode textarea[style*="border: 2px solid #E5E5E5"],
.dark-mode textarea[style*="border:2px solid"] {
    border-color: var(--border-color) !important;
}

.dark-mode textarea[style*="border: 2px solid #F0E0E0"]:focus,
.dark-mode textarea[style*="border: 2px solid #E5E5E5"]:focus,
.dark-mode textarea[style*="border:2px solid"]:focus {
    border-color: var(--rose-light) !important;
}

/* Textarea with specific color styling */
.dark-mode textarea[style*="color: #2D2D2D"],
.dark-mode textarea[style*="color:#2D2D2D"] {
    color: var(--text-primary) !important;
}

/* Generic textarea styling */
.dark-mode textarea {
    background: var(--bg-secondary) !important;
    border-color: var(--border-color) !important;
    color: var(--text-primary) !important;
}

.dark-mode textarea:focus {
    background: var(--bg-hover) !important;
    border-color: var(--rose-light) !important;
    box-shadow: 0 0 0 4px rgba(212, 165, 165, 0.2) !important;
}

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

/* Input fields with white background */
.dark-mode input[style*="background: #FAFAFA"],
.dark-mode input[style*="background:#FAFAFA"],
.dark-mode input[style*="background: #FFFFFF"],
.dark-mode input[style*="background:#FFFFFF"],
.dark-mode input[style*="background: white"],
.dark-mode input[style*="background:white"] {
    background: var(--bg-secondary) !important;
    border-color: var(--border-color) !important;
    color: var(--text-primary) !important;
}

.dark-mode input[style*="background: #FAFAFA"]:focus,
.dark-mode input[style*="background:#FAFAFA"]:focus,
.dark-mode input[style*="background: #FFFFFF"]:focus,
.dark-mode input[style*="background:#FFFFFF"]:focus,
.dark-mode input[style*="background: white"]:focus,
.dark-mode input[style*="background:white"]:focus {
    background: var(--bg-hover) !important;
    border-color: var(--rose-light) !important;
    box-shadow: 0 0 0 4px rgba(212, 165, 165, 0.2) !important;
}

/* Input placeholders */
.dark-mode input::placeholder {
    color: var(--text-muted) !important;
}

/* Select dropdowns */
.dark-mode select[style*="background: #FAFAFA"],
.dark-mode select[style*="background:#FAFAFA"],
.dark-mode select[style*="background: #FFFFFF"],
.dark-mode select[style*="background:#FFFFFF"],
.dark-mode select[style*="background: white"] {
    background: var(--bg-secondary) !important;
    border-color: var(--border-color) !important;
    color: var(--text-primary) !important;
}

.dark-mode select:focus {
    background: var(--bg-hover) !important;
    border-color: var(--rose-light) !important;
    box-shadow: 0 0 0 4px rgba(212, 165, 165, 0.2) !important;
}

/* Select option styling */
.dark-mode select option {
    background: var(--bg-secondary) !important;
    color: var(--text-primary) !important;
}

/* All form controls general fix */
.dark-mode input[type="text"],
.dark-mode input[type="email"],
.dark-mode input[type="password"],
.dark-mode input[type="number"],
.dark-mode input[type="tel"],
.dark-mode input[type="url"],
.dark-mode input[type="search"],
.dark-mode input[type="date"],
.dark-mode input[type="time"] {
    background: var(--bg-secondary) !important;
    border-color: var(--border-color) !important;
    color: var(--text-primary) !important;
}

.dark-mode input[type="text"]:focus,
.dark-mode input[type="email"]:focus,
.dark-mode input[type="password"]:focus,
.dark-mode input[type="number"]:focus,
.dark-mode input[type="tel"]:focus,
.dark-mode input[type="url"]:focus,
.dark-mode input[type="search"]:focus,
.dark-mode input[type="date"]:focus,
.dark-mode input[type="time"]:focus {
    background: var(--bg-hover) !important;
    border-color: var(--rose-light) !important;
    box-shadow: 0 0 0 4px rgba(212, 165, 165, 0.2) !important;
    outline: none !important;
}

/* Remove autofill yellow background */
.dark-mode input:-webkit-autofill,
.dark-mode input:-webkit-autofill:hover,
.dark-mode input:-webkit-autofill:focus,
.dark-mode textarea:-webkit-autofill,
.dark-mode textarea:-webkit-autofill:hover,
.dark-mode textarea:-webkit-autofill:focus,
.dark-mode select:-webkit-autofill,
.dark-mode select:-webkit-autofill:hover,
.dark-mode select:-webkit-autofill:focus {
    -webkit-box-shadow: 0 0 0 1000px var(--bg-secondary) inset !important;
    -webkit-text-fill-color: var(--text-primary) !important;
    border-color: var(--border-color) !important;
}

/* Calendar specific input styling */
.dark-mode .calendar-navigation input,
.dark-mode .calendar-container input,
.dark-mode div[style*="calendar"] input {
    background: var(--bg-secondary) !important;
    border-color: var(--border-color) !important;
    color: var(--text-primary) !important;
}

.dark-mode .calendar-navigation input:focus,
.dark-mode .calendar-container input:focus,
.dark-mode div[style*="calendar"] input:focus {
    border-color: var(--rose-light) !important;
    box-shadow: 0 0 0 4px rgba(212, 165, 165, 0.2) !important;
}

/* =================================================================
   FILE UPLOAD INPUT FIX
   Fix file upload labels and buttons in dark mode
   ================================================================= */

/* File upload label with dashed border */
.dark-mode label[for*="file"],
.dark-mode label[for*="upload"],
.dark-mode label[style*="border: 2px dashed"] {
    background: var(--bg-secondary) !important;
    border-color: var(--rose-light) !important;
    transition: all 0.2s ease !important;
}

.dark-mode label[for*="file"]:hover,
.dark-mode label[for*="upload"]:hover,
.dark-mode label[style*="border: 2px dashed"]:hover {
    background: var(--bg-hover) !important;
    border-color: var(--rose-dark) !important;
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(212, 165, 165, 0.3) !important;
}

.dark-mode label[for*="file"]:active,
.dark-mode label[for*="upload"]:active,
.dark-mode label[style*="border: 2px dashed"]:active {
    transform: translateY(0);
}

/* File upload label with light pink background */
.dark-mode label[style*="background: #FFF5F5"],
.dark-mode label[style*="background:#FFF5F5"] {
    background: var(--bg-secondary) !important;
    border-color: var(--rose-light) !important;
}

.dark-mode label[style*="background: #FFF5F5"]:hover,
.dark-mode label[style*="background:#FFF5F5"]:hover {
    background: var(--bg-hover) !important;
    border-color: var(--rose-dark) !important;
}

/* File upload label text - "Choose File" */
.dark-mode label[for*="file"] div[style*="color: #2D2D2D"],
.dark-mode label[for*="upload"] div[style*="color: #2D2D2D"],
.dark-mode label[style*="border: 2px dashed"] div[style*="color: #2D2D2D"] {
    color: var(--text-primary) !important;
}

/* File upload label text - "Upload from device" */
.dark-mode label[for*="file"] div[style*="color: #6B6B6B"],
.dark-mode label[for*="upload"] div[style*="color: #6B6B6B"],
.dark-mode label[style*="border: 2px dashed"] div[style*="color: #6B6B6B"] {
    color: var(--text-secondary) !important;
}

/* File upload SVG icon - keep rose color */
.dark-mode label[for*="file"] svg,
.dark-mode label[for*="upload"] svg,
.dark-mode label[style*="border: 2px dashed"] svg {
    color: var(--rose-light) !important;
}

.dark-mode label[for*="file"]:hover svg,
.dark-mode label[for*="upload"]:hover svg,
.dark-mode label[style*="border: 2px dashed"]:hover svg {
    color: var(--rose-dark) !important;
    transform: scale(1.1);
}

/* File input button (styled as button) */
.dark-mode input[type="file"] {
    color: var(--text-primary) !important;
}

.dark-mode input[type="file"]::file-selector-button {
    background: linear-gradient(135deg, #D4A5A5 0%, #B88A8A 100%) !important;
    color: white !important;
    border: none !important;
    padding: 0.5rem 1rem;
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.2s ease;
}

.dark-mode input[type="file"]::file-selector-button:hover {
    background: linear-gradient(135deg, #E0B0B0 0%, #C89595 100%) !important;
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(212, 165, 165, 0.4) !important;
}

/* Webkit file upload button */
.dark-mode input[type="file"]::-webkit-file-upload-button {
    background: linear-gradient(135deg, #D4A5A5 0%, #B88A8A 100%) !important;
    color: white !important;
    border: none !important;
    padding: 0.5rem 1rem;
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.2s ease;
}

.dark-mode input[type="file"]::-webkit-file-upload-button:hover {
    background: linear-gradient(135deg, #E0B0B0 0%, #C89595 100%) !important;
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(212, 165, 165, 0.4) !important;
}

/* File name display text */
.dark-mode input[type="file"] {
    color: var(--text-secondary) !important;
}

/* Drop zone styling */
.dark-mode .drop-zone,
.dark-mode [class*="dropzone"],
.dark-mode [id*="dropzone"] {
    background: var(--bg-secondary) !important;
    border-color: var(--rose-light) !important;
}

.dark-mode .drop-zone:hover,
.dark-mode [class*="dropzone"]:hover,
.dark-mode [id*="dropzone"]:hover {
    background: var(--bg-hover) !important;
    border-color: var(--rose-dark) !important;
}

.dark-mode .drop-zone.active,
.dark-mode [class*="dropzone"].active,
.dark-mode [id*="dropzone"].active {
    background: rgba(212, 165, 165, 0.1) !important;
    border-color: var(--rose-light) !important;
}

/* Upload progress bar */
.dark-mode .upload-progress,
.dark-mode [class*="progress"] {
    background: var(--bg-secondary) !important;
}

.dark-mode .upload-progress-bar,
.dark-mode [class*="progress-bar"] {
    background: linear-gradient(135deg, #D4A5A5 0%, #B88A8A 100%) !important;
}

/* File preview container */
.dark-mode .file-preview,
.dark-mode [class*="file-preview"] {
    background: var(--bg-card) !important;
    border-color: var(--border-color) !important;
}

/* Remove file button */
.dark-mode button[class*="remove-file"],
.dark-mode button[id*="remove-file"] {
    background: rgba(220, 38, 38, 0.2) !important;
    color: #FF6B6B !important;
    border-color: rgba(220, 38, 38, 0.3) !important;
}

.dark-mode button[class*="remove-file"]:hover,
.dark-mode button[id*="remove-file"]:hover {
    background: rgba(220, 38, 38, 0.3) !important;
    color: #FF8888 !important;
    border-color: #DC2626 !important;
}

/* =================================================================
   SHARE BUTTON COMPREHENSIVE FIX
   Fix all share buttons across the application
   ================================================================= */

/* Share button with rose background */
.dark-mode button.share-outfit-btn[style*="background: #D4A5A5"],
.dark-mode button[class*="share"][style*="background: #D4A5A5"] {
    background: linear-gradient(135deg, #D4A5A5 0%, #B88A8A 100%) !important;
    color: white !important;
    border: none !important;
}

.dark-mode button.share-outfit-btn[style*="background: #D4A5A5"]:hover,
.dark-mode button[class*="share"][style*="background: #D4A5A5"]:hover {
    background: linear-gradient(135deg, #E0B0B0 0%, #C89595 100%) !important;
    transform: translateY(-2px);
    box-shadow: 0 6px 16px rgba(212, 165, 165, 0.5) !important;
}

.dark-mode button.share-outfit-btn[style*="background: #D4A5A5"]:active,
.dark-mode button[class*="share"][style*="background: #D4A5A5"]:active {
    transform: translateY(0);
}

/* Share button with white background (alternative style) */
.dark-mode button.share-outfit-btn[style*="background: white"],
.dark-mode button[class*="share"][style*="background: white"] {
    background: var(--bg-secondary) !important;
    color: var(--text-primary) !important;
    border: 1px solid var(--border-color) !important;
}

.dark-mode button.share-outfit-btn[style*="background: white"]:hover,
.dark-mode button[class*="share"][style*="background: white"]:hover {
    background: var(--bg-hover) !important;
    border-color: var(--rose-light) !important;
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(212, 165, 165, 0.3) !important;
}

/* Share button SVG icon */
.dark-mode button.share-outfit-btn svg,
.dark-mode button[class*="share"] svg {
    color: inherit !important;
}

.dark-mode button.share-outfit-btn:hover svg,
.dark-mode button[class*="share"]:hover svg {
    transform: scale(1.05);
}

/* Generic share buttons throughout the app */
.dark-mode button[data-share],
.dark-mode button[id*="share"],
.dark-mode a[class*="share-btn"] {
    transition: all 0.2s ease !important;
}

.dark-mode button[data-share]:hover,
.dark-mode button[id*="share"]:hover,
.dark-mode a[class*="share-btn"]:hover {
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(212, 165, 165, 0.3) !important;
}

/* Upload Section - Items Create Page */
.dark-mode .smart-upload {
    background: var(--bg-card) !important;
    border-color: var(--border-color) !important;
}

.dark-mode .smart-upload:hover {
    background: var(--bg-hover) !important;
    border-color: var(--rose-dark) !important;
}

.dark-mode .smart-upload svg {
    color: var(--rose-light) !important;
}

.dark-mode .smart-upload p {
    color: var(--text-secondary) !important;
}

/* Image Preview */
.dark-mode .image-preview {
    background: var(--bg-card) !important;
    border-color: var(--border-color) !important;
    box-shadow: 0 4px 16px var(--shadow) !important;
}

.dark-mode .preview-info {
    background: var(--bg-secondary) !important;
    border-top-color: var(--border-color) !important;
}

.dark-mode .preview-info span,
.dark-mode .preview-info p {
    color: var(--text-secondary) !important;
}

/* Preview Action Buttons */
.dark-mode .preview-btn {
    background: var(--bg-secondary) !important;
    border-color: var(--border-color) !important;
    box-shadow: 0 2px 8px var(--shadow) !important;
}

.dark-mode .preview-btn svg {
    color: var(--text-secondary) !important;
}

.dark-mode .preview-btn:hover {
    background: linear-gradient(135deg, var(--rose-light) 0%, var(--rose-dark) 100%) !important;
    border-color: var(--rose-dark) !important;
}

.dark-mode .preview-btn:hover svg {
    color: white !important;
}

/* Background Removal Container */
.dark-mode #bg-removal-container {
    background: var(--bg-card) !important;
    border-color: var(--border-color) !important;
}

.dark-mode #bg-removal-container label {
    color: var(--text-secondary) !important;
}

/* Camera Modal - Quick Photo Capture */
.dark-mode #camera-modal [data-modal-content] {
    background: var(--bg-card) !important;
}

.dark-mode #camera-modal [data-text-primary] {
    color: var(--text-primary) !important;
}

.dark-mode #camera-modal [data-text-secondary] {
    color: var(--text-secondary) !important;
}

.dark-mode #camera-modal [data-bg-secondary] {
    background: var(--bg-secondary) !important;
}

.dark-mode #camera-modal [data-bg-upload] {
    background: var(--bg-secondary) !important;
}

.dark-mode #camera-modal [data-border] {
    border-color: var(--border-color) !important;
}

.dark-mode #open-camera-btn:hover,
.dark-mode label[for="file-upload-input"]:hover {
    background: var(--bg-hover) !important;
    border-color: var(--rose-dark) !important;
}

.dark-mode #close-camera-btn:hover {
    background: var(--bg-hover) !important;
}

.dark-mode #retake-btn {
    background: var(--bg-card) !important;
    border-color: var(--border-color) !important;
    color: var(--text-primary) !important;
}

.dark-mode #retake-btn:hover {
    background: var(--bg-hover) !important;
    border-color: var(--rose-dark) !important;
}

/* Camera Control Buttons */
#capture-btn {
    position: relative;
    overflow: hidden;
}

#capture-btn::before {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(255,255,255,0.3) 0%, transparent 70%);
    opacity: 0;
    transition: opacity 0.3s ease;
}

#capture-btn:hover::before {
    opacity: 1;
}

#capture-btn:active {
    transform: scale(0.95) !important;
}

#switch-camera-btn {
    transition: all 0.3s ease !important;
}

#switch-camera-btn:active {
    transform: scale(0.9) rotate(180deg) !important;
}