/* ==================== LIGHT MODE OVERRIDES ==================== */
/* These styles ONLY apply when NOT in dark mode */
/* Dark mode uses the original styles (untouched) */

/* Base */

/* Body base styles */
body {
    font-family: 'Inter', sans-serif;
    margin: 0;
    padding: 0;
}

/* Dark mode body */
html.dark body {
    background-color: #0f172a !important;
    color: #e2e8f0 !important;
}

/* ============ STEP 1: WARM DARK BASE + WARM TEXT ============
   To revert: delete from this comment down through the matching END comment. */
html.dark body {
    background-color: #1a1625 !important;
    color: #f5f1ea !important;
}
html.dark {
    background-color: #1a1625 !important;
}
/* Header and footer match the warm base */
html.dark #mainHeader {
    background-color: rgba(26, 22, 37, 0.8) !important;
}
html.dark footer.bg-slate-900 {
    background-color: #1a1625 !important;
    border-top-color: rgba(212, 165, 116, 0.08) !important;
}
/* ============ STEP 1 END ============ */

/* ============ STEP 2: WARM CARD SURFACES ============
   To revert: delete from this comment down through the matching END comment. */
html.dark .bg-slate-800,
html.dark .bg-slate-800\/50,
html.dark .bg-slate-800\/80 {
    background-color: #252033 !important;
}
html.dark .bg-slate-700\/30,
html.dark .bg-slate-700\/50 {
    background-color: rgba(45, 38, 56, 0.6) !important;
}
/* Inset card footers (Posts / Reviews / Leave a Review section) */
html.dark .bg-slate-900\/30,
html.dark .bg-slate-900\/50 {
    background-color: rgba(31, 27, 46, 0.6) !important;
}
/* ============ STEP 2 END ============ */

/* ============ STEP 3: WARM FORM FIELD BORDERS ============
   To revert: delete from this comment down through the matching END comment. */
html.dark input:not([type="checkbox"]):not([type="radio"]):not([type="submit"]):not([type="button"]):not(#searchBtn):not(#signInBtn),
html.dark select,
html.dark textarea {
    background-color: #2d2638 !important;
    border: 1px solid rgba(212, 165, 116, 0.18) !important;
    color: #f5f1ea !important;
    transition: border-color 0.2s ease, box-shadow 0.2s ease !important;
}
html.dark input:not([type="checkbox"]):not([type="radio"]):not([type="submit"]):not([type="button"])::placeholder,
html.dark textarea::placeholder {
    color: #a89db0 !important;
}
html.dark input:not([type="checkbox"]):not([type="radio"]):not([type="submit"]):not([type="button"]):focus,
html.dark select:focus,
html.dark textarea:focus {
    border-color: rgba(212, 165, 116, 0.6) !important;
    box-shadow: 0 0 0 3px rgba(212, 165, 116, 0.12) !important;
    outline: none !important;
}
/* ============ STEP 3 END ============ */

/* ============ STEP 4: HEADING TYPOGRAPHY REFINEMENT ============
   To revert: delete from this comment down through the matching END comment. */
html.dark h1,
html.dark h2,
html.dark h3 {
    font-weight: 600 !important;
    letter-spacing: -0.02em !important;
}
/* Hero-scale headings get even lighter for editorial feel */
html.dark .text-3xl,
html.dark .text-4xl,
html.dark .text-5xl {
    font-weight: 600 !important;
    letter-spacing: -0.025em !important;
}
/* ============ STEP 4 END ============ */

/* ============ STEP 5: SURGICAL ROSE GOLD ACCENTS ============
   To revert: delete from this comment down through the matching END comment.
   Strategy: rose gold replaces purple ONLY on secondary/informational elements.
   Purple is preserved for: brand logo, primary CTAs (Search, Sign In, Schedule),
   active category chips, avatar fallback, Pro Plan badge gradient. */

/* Secondary informational links and small accents */
html.dark .text-purple-400:not(button):not(a.font-semibold) {
    color: #d4a574 !important;
}
html.dark .hover\:text-purple-300:hover {
    color: #e4bc8f !important;
}

/* "How are search results ranked?" expandable info */
html.dark #howRankedToggle,
html.dark #howRankedToggle svg {
    color: #d4a574 !important;
}

/* "Products: Aveda" type secondary text-purple-300 links */
html.dark .text-purple-300:not(button):not(a.font-semibold) {
    color: #d4a574 !important;
}

/* Tier badges (BUSINESS / PRO / Business Plan / Pro Plan) — premium signal */
html.dark .bg-purple-500\/20,
html.dark .bg-purple-500\/10,
html.dark .bg-purple-600\/20 {
    background-color: rgba(212, 165, 116, 0.15) !important;
}
html.dark .border-purple-500\/30,
html.dark .border-purple-500\/40,
html.dark .border-purple-400\/30 {
    border-color: rgba(212, 165, 116, 0.3) !important;
}
html.dark .text-purple-300.bg-purple-500\/20,
html.dark span.text-purple-300 {
    color: #e4bc8f !important;
}

/* Section dividers and subtle borders shift to warm rose-gold tint */
html.dark .border-slate-700,
html.dark .border-slate-700\/50,
html.dark .border-slate-600 {
    border-color: rgba(212, 165, 116, 0.12) !important;
}

/* Pro Plan / Business Plan badge gradient (premium tier signal) */
html.dark .from-purple-500.to-indigo-500.rounded-full:not(button):not(.gradient-button),
html.dark span.bg-gradient-to-r.from-purple-500 {
    background: linear-gradient(135deg, #d4a574 0%, #c9956a 100%) !important;
    color: #1a1625 !important;
}

/* BUSINESS tier badge on search result cards (uses indigo variants) */
html.dark span.bg-indigo-500\/15 {
    background-color: rgba(212, 165, 116, 0.15) !important;
    border-color: rgba(212, 165, 116, 0.3) !important;
    color: #e4bc8f !important;
}
html.dark .text-indigo-300.bg-indigo-500\/15 {
    color: #e4bc8f !important;
}

/* Other indigo borders and links that aren't role-coded buttons */
html.dark .border-indigo-500\/30,
html.dark .border-indigo-500\/40 {
    border-color: rgba(212, 165, 116, 0.3) !important;
}

/* Secondary indigo text (e.g., "Find Talent" subtext, address indigo links) */
html.dark .text-indigo-300:not(button):not(a.font-semibold):not(#selectSalonBtn *) {
    color: #d4a574 !important;
}
/* ============ STEP 5 END ============ */

/* ============ STEP 6: SOFTER CORNER RADII ============
   To revert: delete from this comment down through the matching END comment. */
html.dark .rounded-lg {
    border-radius: 0.875rem !important; /* 14px, up from 8px */
}
html.dark .rounded-xl {
    border-radius: 1.125rem !important; /* 18px, up from 12px */
}
html.dark .rounded-2xl {
    border-radius: 1.5rem !important; /* 24px, up from 16px */
}
/* ============ STEP 6 END ============ */

/* ============ STEP 7: DEEPER, SOFTER SHADOWS ============
   To revert: delete from this comment down through the matching END comment. */
html.dark .shadow-lg {
    box-shadow: 0 12px 24px -8px rgba(0, 0, 0, 0.4), 0 4px 8px -4px rgba(0, 0, 0, 0.2) !important;
}
html.dark .shadow-xl {
    box-shadow: 0 16px 32px -10px rgba(0, 0, 0, 0.45), 0 6px 12px -6px rgba(0, 0, 0, 0.25) !important;
}
html.dark .shadow-2xl {
    box-shadow: 0 24px 48px -12px rgba(0, 0, 0, 0.5), 0 8px 16px -8px rgba(0, 0, 0, 0.3) !important;
}
/* ============ STEP 7 END ============ */

/* ============ HERO PANEL: WARM RADIAL GLOW + TOP BORDER ============
   Adds subtle warm ambient light at top-center of search panel,
   plus a thin rose-gold top border as an editorial "opening flourish."
   To revert: delete this block. */
html.dark #search {
    background: radial-gradient(ellipse 80% 60% at 50% 0%, rgba(212, 165, 116, 0.07) 0%, transparent 70%), #252033 !important;
    border-top: 1px solid rgba(212, 165, 116, 0.25) !important;
}
/* ============ HERO PANEL END ============ */

/* ============ FEATURED PROFILES FADE-IN ============
   To revert: delete this block. Also remove the .featured-fade-in className
   from grid.classList.add() in showSearchPromptState. */
.featured-fade-in {
    animation: featuredFadeIn 0.6s ease-out;
}
@keyframes featuredFadeIn {
    from {
        opacity: 0;
        transform: translateY(8px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}
/* ============ FEATURED PROFILES FADE-IN END ============ */

/* ==================== CAPACITOR / NATIVE APP SAFE AREAS ==================== */
/* These env() values are 0 on web browsers, active on iOS with notch/Dynamic Island */
#mainHeader {
    padding-top: env(safe-area-inset-top);
}
#cookieConsent {
    padding-bottom: env(safe-area-inset-bottom);
}
#activeSliderPanel {
    padding-bottom: env(safe-area-inset-bottom);
}
/* Fixed bottom modals and panels */
.modal, [class*="fixed"][class*="inset-0"] {
    padding-top: env(safe-area-inset-top);
    padding-bottom: env(safe-area-inset-bottom);
}
/* ==================== END CAPACITOR SAFE AREAS ==================== */

/* Light mode body */
html:not(.dark) body {
    background-color: #f9fafb !important;
    color: #1f2937 !important;
}

/* Header */
html:not(.dark) #mainHeader {
    background-color: rgba(255, 255, 255, 0.95);
    border-bottom: 1px solid #e5e7eb;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
}

/* Logo gradient for light mode */
html:not(.dark) #logo span {
    background: linear-gradient(to right, #7c3aed, #4f46e5);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}

/* Navigation buttons */
html:not(.dark) #joinBtn {
    color: #7c3aed;
    border-color: #7c3aed;
}

html:not(.dark) #joinBtn:hover {
    background-color: #7c3aed;
    color: #ffffff;
}

html:not(.dark) #signInBtn {
    background: linear-gradient(135deg, #7c3aed 0%, #4f46e5 100%);
}

html:not(.dark) #myAccountBtn {
    color: #7c3aed;
    border-color: #7c3aed;
}

html:not(.dark) #myAccountBtn:hover {
    background-color: #7c3aed;
    color: #ffffff;
}

html:not(.dark) #signOutBtn {
    color: #dc2626;
    border-color: #dc2626;
}

html:not(.dark) #signOutBtn:hover {
    background-color: #dc2626;
    color: #ffffff;
}

/* Theme toggle icon */
html:not(.dark) #themeToggle,
html:not(.dark) #themeToggleUser {
    color: #6b7280;
}

html:not(.dark) #themeToggle:hover,
html:not(.dark) #themeToggleUser:hover {
    color: #1f2937;
}

/* Notification bell */
html:not(.dark) #notificationBellBtn {
    color: #6b7280;
}

html:not(.dark) #notificationBellBtn:hover {
    color: #1f2937;
}

/* Main content area */
html:not(.dark) #publicView {
    background-color: #f9fafb;
}

/* Search section */
html:not(.dark) #search {
    background: linear-gradient(135deg, #faf5ff 0%, #f3e8ff 100%);
    border: 1px solid #e9d5ff;
    box-shadow: 0 4px 12px rgba(124, 58, 237, 0.08);
}

html:not(.dark) #search h1 {
    color: #111827;
}

/* Search inputs */
html:not(.dark) #search input,
html:not(.dark) #search select {
    background-color: #ffffff;
    color: #1f2937;
    border-color: #d1d5db;
}

html:not(.dark) #search input:focus,
html:not(.dark) #search select:focus {
    border-color: #7c3aed;
    box-shadow: 0 0 0 3px rgba(124, 58, 237, 0.1);
}

html:not(.dark) #search input::placeholder {
    color: #9ca3af;
}

/* Location button */
html:not(.dark) #useMyLocationBtn {
    color: #6b7280;
    border-color: #d1d5db;
}

html:not(.dark) #useMyLocationBtn:hover {
    color: #7c3aed;
    border-color: #7c3aed;
}

/* Search buttons */
html:not(.dark) #search button[type="submit"] {
    background: linear-gradient(135deg, #7c3aed 0%, #4f46e5 100%);
    box-shadow: 0 2px 8px rgba(124, 58, 237, 0.3);
}

html:not(.dark) #search button[type="submit"]:hover {
    box-shadow: 0 4px 12px rgba(124, 58, 237, 0.4);
}

html:not(.dark) button:contains("Clear") {
    background-color: #f3f4f6;
    color: #4b5563;
}

/* Profile Cards */
html:not(.dark) .bg-slate-800 {
    background: linear-gradient(135deg, #ffffff 0%, #fafafa 100%) !important;
    border: 2px solid #e5e7eb !important;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08) !important;
}

html:not(.dark) .bg-slate-800:hover {
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.12), 0 4px 8px rgba(124, 58, 237, 0.08) !important;
    border-color: #d8b4fe !important;
}

/* Profile card text */
html:not(.dark) .bg-slate-800 .text-white {
    color: #111827 !important;
}

html:not(.dark) .bg-slate-800 .text-gray-300,
html:not(.dark) .bg-slate-800 .text-gray-400 {
    color: #6b7280 !important;
}

html:not(.dark) .bg-slate-800 .text-gray-200 {
    color: #6b7280 !important;
}

/* Profile card badges */
html:not(.dark) .bg-slate-800 .bg-green-500 {
    background-color: #10b981 !important;
}

html:not(.dark) .bg-slate-800 .bg-red-500 {
    background-color: #ef4444 !important;
}

/* Schedule Appointment buttons */
html:not(.dark) button:contains("Schedule Appointment") {
    background: linear-gradient(135deg, #8b5cf6 0%, #6366f1 100%);
}

/* Button shimmer — hover sweep on per-card CTAs, continuous on the primary product action */
.schedule-appointment-btn,
.send-message-btn {
    position: relative;
    overflow: hidden;
}
.schedule-appointment-btn::after,
.send-message-btn::after {
    content: '';
    position: absolute;
    top: 0; left: -75%;
    width: 50%; height: 100%;
    background: linear-gradient(120deg, transparent, rgba(255, 255, 255, 0.35), transparent);
    transform: skewX(-20deg);
    pointer-events: none;
}
.schedule-appointment-btn:hover::after,
.send-message-btn:hover::after {
    animation: cl-shine 0.8s ease;
}
@keyframes cl-shine {
    from { left: -75%; }
    to { left: 125%; }
}

/* Search + header Sign In — continuous shimmer (primary product actions) */
#searchBtn,
#signInBtn {
    background: linear-gradient(135deg, #7c3aed 0%, #a855f7 35%, #6366f1 50%, #a855f7 65%, #7c3aed 100%);
    background-size: 200% auto;
    animation: cl-shimmer-move 3s linear infinite;
}
@keyframes cl-shimmer-move {
    to { background-position: 200% center; }
}

/* Respect reduced-motion preferences */
@media (prefers-reduced-motion: reduce) {
    #searchBtn, #signInBtn { animation: none; }
    .schedule-appointment-btn:hover::after,
    .send-message-btn:hover::after { animation: none; }
}

/* Profile card accent — subtle line at rest, full line + glow on hover (ChairLook palette) */
#results .cl-profile-card {
    position: relative;
    transition: transform 0.3s ease, box-shadow 0.3s ease, border-color 0.3s ease;
}
#results .cl-profile-card::before {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 3px;
    background: linear-gradient(90deg, transparent, #a855f7, #6366f1, transparent);
    opacity: 0.45;
    transition: opacity 0.3s ease;
    z-index: 2;
    pointer-events: none;
}
#results .cl-profile-card:hover {
    border-color: rgba(168, 85, 247, 0.7);
    box-shadow: 0 12px 40px rgba(168, 85, 247, 0.25);
}
#results .cl-profile-card:hover::before { opacity: 1; }

/* Static top accent — modals (auto, by signature) + any panel opted in via .cl-accent-top */
.bg-slate-800.rounded-2xl.shadow-2xl,
.cl-accent-top {
    position: relative;
}
.bg-slate-800.rounded-2xl.shadow-2xl::before,
.cl-accent-top::before {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 3px;
    background: linear-gradient(90deg, transparent, #a855f7, #6366f1, transparent);
    opacity: 0.8;
    pointer-events: none;
    z-index: 10;
}

/* Service dropdown in cards */
html:not(.dark) .bg-slate-800 select {
    background-color: #f9fafb;
    border-color: #d1d5db;
    color: #111827;
}

/* All global text colors */
html:not(.dark) .text-white {
    color: #111827;
}

html:not(.dark) .text-gray-200,
html:not(.dark) .text-gray-300 {
    color: #4b5563;
}

html:not(.dark) .text-gray-400 {
    color: #6b7280;
}

/* Global inputs, selects, textareas */
html:not(.dark) input,
html:not(.dark) select,
html:not(.dark) textarea {
    background-color: #ffffff;
    color: #1f2937;
    border-color: #d1d5db;
}

html:not(.dark) input:focus,
html:not(.dark) select:focus,
html:not(.dark) textarea:focus {
    border-color: #7c3aed;
    box-shadow: 0 0 0 3px rgba(124, 58, 237, 0.1);
}

/* Smooth transitions */
body, #mainHeader, #search, .bg-slate-800, input, select, button {
    transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease;
}

/* ==================== CHART FIXES ==================== */
/* Analytics section */
html:not(.dark) #analytics {
    background: linear-gradient(135deg, #ffffff 0%, #fafafa 100%);
    border: 1px solid #e5e7eb;
}

html:not(.dark) #analytics h2 {
    color: #111827;
}

html:not(.dark) #analytics p {
    color: #6b7280;
}

/* Chart container - ensure it's visible */
html:not(.dark) .chart-container {
    background-color: #ffffff;
}

html:not(.dark) .chart-container canvas {
    background-color: #ffffff !important;
}

/* ==================== GLOBAL FOUNDATION ==================== */

/* All Buttons - Global defaults */
html:not(.dark) button {
    color: #1f2937;
}

html:not(.dark) button:hover {
    opacity: 0.9;
}

/* Purple/Primary Buttons */
html:not(.dark) button.bg-purple-600,
html:not(.dark) button.bg-purple-500 {
    background: linear-gradient(135deg, #7c3aed 0%, #6366f1 100%);
    color: #ffffff;
}

html:not(.dark) .bg-gradient-to-r.from-purple-500 {
    background: linear-gradient(to right, #7c3aed, #6366f1);
}

/* Secondary Buttons */
html:not(.dark) button.bg-slate-600,
html:not(.dark) button.bg-slate-700 {
    background-color: #e5e7eb;
    color: #374151;
}

html:not(.dark) button.bg-slate-600:hover,
html:not(.dark) button.bg-slate-700:hover {
    background-color: #d1d5db;
}

/* Danger/Delete Buttons */
html:not(.dark) button.bg-red-600,
html:not(.dark) button.bg-red-500 {
    background-color: #dc2626;
    color: #ffffff;
}

/* Success/Green Buttons */
html:not(.dark) button.bg-green-600,
html:not(.dark) button.bg-green-500 {
    background-color: #059669;
    color: #ffffff;
}

/* Gray Buttons */
html:not(.dark) button.bg-gray-600 {
    background-color: #f3f4f6;
    color: #4b5563;
}

/* Links */
html:not(.dark) a {
    color: #7c3aed;
}

html:not(.dark) a:hover {
    color: #6d28d9;
}

/* Text Links (colored) */
html:not(.dark) .text-purple-300,
html:not(.dark) .text-purple-400 {
    color: #7c3aed;
}

html:not(.dark) .text-indigo-300,
html:not(.dark) .text-indigo-400 {
    color: #4f46e5;
}

html:not(.dark) .text-teal-300 {
    color: #0d9488;
}

html:not(.dark) .text-red-400 {
    color: #dc2626;
}

/* All Headings */
html:not(.dark) h1,
html:not(.dark) h2,
html:not(.dark) h3,
html:not(.dark) h4,
html:not(.dark) h5,
html:not(.dark) h6 {
    color: #111827;
}

/* All Paragraphs and Text */
html:not(.dark) p {
    color: #4b5563;
}

html:not(.dark) .text-gray-500 {
    color: #6b7280;
}

html:not(.dark) .text-gray-600 {
    color: #4b5563;
}

/* Labels */
html:not(.dark) label {
    color: #374151;
}

/* Borders - Global */
html:not(.dark) .border-slate-600,
html:not(.dark) .border-slate-700 {
    border-color: #d1d5db;
}

html:not(.dark) .border-gray-600 {
    border-color: #d1d5db;
}

/* Background sections */
html:not(.dark) .bg-slate-800\/50,
html:not(.dark) .bg-slate-800\/30 {
    background-color: #ffffff;
    border: 1px solid #e5e7eb;
}

html:not(.dark) .bg-slate-700,
html:not(.dark) .bg-slate-700\/50,
html:not(.dark) .bg-slate-700\/30 {
    background-color: #f9fafb;
    border-color: #e5e7eb;
}

html:not(.dark) .bg-slate-600 {
    background-color: #f3f4f6;
}

/* Badges */
html:not(.dark) .bg-green-500,
html:not(.dark) .bg-green-600 {
    background-color: #059669;
}

html:not(.dark) .bg-red-500,
html:not(.dark) .bg-red-600 {
    background-color: #dc2626;
}

html:not(.dark) .bg-yellow-500 {
    background-color: #f59e0b;
}

html:not(.dark) .bg-blue-500 {
    background-color: #3b82f6;
}

/* Dividers */
html:not(.dark) .border-slate-600,
html:not(.dark) .border-slate-700 {
    border-color: #e5e7eb;
}

/* Placeholder text */
html:not(.dark) input::placeholder,
html:not(.dark) textarea::placeholder {
    color: #9ca3af;
}

/* Disabled states */
html:not(.dark) button:disabled,
html:not(.dark) input:disabled,
html:not(.dark) select:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

/* SVG icons */
html:not(.dark) svg {
    color: inherit;
}

/* Loader */
html:not(.dark) .loader {
    border-color: #e5e7eb;
    border-top-color: #7c3aed;
}

/* ==================== MODALS ==================== */

/* Modal backdrop */
html:not(.dark) .modal-backdrop {
    background: rgba(0, 0, 0, 0.4);
}

html:not(.dark) .modal {
    background: rgba(0, 0, 0, 0.5);
}

/* Modal containers */
html:not(.dark) .modal-content {
    background: #ffffff;
    box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.2);
    border: 1px solid #e5e7eb;
}

html:not(.dark) .bg-slate-800.rounded-2xl,
html:not(.dark) .bg-slate-800.rounded-xl,
html:not(.dark) .bg-slate-800.rounded-lg {
    background: #ffffff;
    border: 1px solid #e5e7eb;
}

/* Modal headers */
html:not(.dark) .modal h2,
html:not(.dark) .modal h3 {
    color: #111827;
}

/* Modal close buttons */
html:not(.dark) .modal button[onclick*="closeModal"],
html:not(.dark) .modal button[onclick*="close"] {
    color: #6b7280;
}

html:not(.dark) .modal button[onclick*="closeModal"]:hover,
html:not(.dark) .modal button[onclick*="close"]:hover {
    color: #1f2937;
}

/* Modal form sections */
html:not(.dark) .modal .bg-slate-700,
html:not(.dark) .modal .bg-slate-700\/50 {
    background-color: #f9fafb;
    border: 1px solid #e5e7eb;
}

html:not(.dark) .modal .bg-slate-600 {
    background-color: #f3f4f6;
}

/* Modal inputs */
html:not(.dark) .modal input,
html:not(.dark) .modal select,
html:not(.dark) .modal textarea {
    background-color: #ffffff;
    color: #1f2937;
    border-color: #d1d5db;
}

html:not(.dark) .modal input:focus,
html:not(.dark) .modal select:focus,
html:not(.dark) .modal textarea:focus {
    border-color: #7c3aed;
    box-shadow: 0 0 0 3px rgba(124, 58, 237, 0.1);
}

/* Modal text colors */
html:not(.dark) .modal p,
html:not(.dark) .modal span,
html:not(.dark) .modal div {
    color: inherit;
}

html:not(.dark) .modal .text-gray-400 {
    color: #6b7280;
}

html:not(.dark) .modal .text-gray-300 {
    color: #6b7280;
}

/* Specific Modals */

/* Login/Signup Modal */
html:not(.dark) #loginModal .bg-slate-800,
html:not(.dark) #signupModal .bg-slate-800 {
    background: #ffffff;
}

/* Review Modal */
html:not(.dark) #reviewModal .bg-slate-700\/50 {
    background-color: #f9fafb;
}

html:not(.dark) #reviewModal .text-yellow-400 {
    color: #f59e0b;
}

/* Reviews List Modal */
html:not(.dark) #reviewsListModal .bg-slate-700\/50 {
    background-color: #f9fafb;
}

/* Settings Modal */
html:not(.dark) #settingsModal .bg-slate-700,
html:not(.dark) #notificationSettingsModal .bg-slate-700 {
    background-color: #f9fafb;
}

/* Client/Appointment Modals */
html:not(.dark) #clientModal .bg-slate-700,
html:not(.dark) #appointmentModal .bg-slate-700,
html:not(.dark) #appointmentDetailsModal .bg-slate-700 {
    background-color: #f9fafb;
}

/* Photo Editor Modal */
html:not(.dark) #photoEditorModal .bg-slate-800 {
    background: #ffffff;
    border: 1px solid #e5e7eb;
}

html:not(.dark) #photoEditorModal .bg-slate-900 {
    background: #f9fafb;
}

html:not(.dark) #photoEditorModal .bg-slate-700 {
    background-color: #f3f4f6;
}

html:not(.dark) #photoEditorModal .bg-slate-600 {
    background-color: #e5e7eb;
}

html:not(.dark) #photoEditorModal button {
    background-color: #f3f4f6;
    color: #374151;
}

html:not(.dark) #photoEditorModal button:hover {
    background-color: #e5e7eb;
}

html:not(.dark) #photoEditorModal .bg-purple-600 {
    background: linear-gradient(135deg, #7c3aed 0%, #6366f1 100%);
    color: #ffffff;
}

html:not(.dark) #photoEditorModal input[type="range"] {
    background: #d1d5db;
}

html:not(.dark) #photoEditorModal .slider {
    background: #d1d5db;
}

html:not(.dark) #photoEditorModal label {
    color: #4b5563;
}

html:not(.dark) #photoEditorModal .value {
    color: #6b7280;
}

/* Modal dividers/borders */
html:not(.dark) .modal .border-slate-600,
html:not(.dark) .modal .border-slate-700 {
    border-color: #e5e7eb;
}

html:not(.dark) .modal .border-t,
html:not(.dark) .modal .border-b {
    border-color: #e5e7eb;
}

/* Star ratings in modals */
html:not(.dark) .modal .text-gray-600 {
    color: #d1d5db;
}

/* Toggle switches in modals */
html:not(.dark) .modal input[type="checkbox"] {
    background-color: #e5e7eb;
    border-color: #d1d5db;
}

html:not(.dark) .modal input[type="checkbox"]:checked {
    background-color: #7c3aed;
    border-color: #7c3aed;

    /* ==================== APPOINTMENT BOOK / CALENDAR ==================== */

/* Appointment Book Container */
html:not(.dark) #appointmentBookContent {
    background: #ffffff !important;
}

html:not(.dark) #appointmentBookContent .bg-slate-800 {
    background: #ffffff !important;
    border: 1px solid #e5e7eb !important;
}

/* Calendar Header */
html:not(.dark) .calendar-header,
html:not(.dark) .calendar-header-fixed .calendar-header {
    background: linear-gradient(135deg, #7c3aed 0%, #6366f1 100%) !important;
    color: #ffffff !important;
}

/* Calendar Grid */
html:not(.dark) .calendar-grid,
html:not(.dark) .calendar-grid-body {
    background: #d1d5db !important;
}

/* Time slots */
html:not(.dark) .time-slot {
    background: #f9fafb !important;
    color: #6b7280 !important;
    border-right: 1px solid #d1d5db !important;
}

/* Calendar cells - Meevo style */
html:not(.dark) .calendar-cell {
    background: #ffffff;
    border-color: #f3f4f6;
}

html:not(.dark) .calendar-cell.hour-start {
    border-top-color: #e5e7eb;
}

html:not(.dark) .calendar-cell:hover {
    background: #f9fafb;
}

html:not(.dark) .calendar-cell.selected {
    background: rgba(139, 92, 246, 0.15) !important;
}

html:not(.dark) .calendar-cell.closed-hours {
    background: repeating-linear-gradient(
        -45deg,
        #f9fafb,
        #f9fafb 4px,
        #f3f4f6 4px,
        #f3f4f6 8px
    ) !important;
}

html:not(.dark) .time-slot {
    background: #f9fafb;
    color: #6b7280;
    border-right-color: #e5e7eb;
    border-bottom-color: #f3f4f6;
}

html:not(.dark) .time-slot.hour-mark {
    border-bottom-color: #e5e7eb;
}

html:not(.dark) .calendar-grid-body {
    background: #e5e7eb;
}

html:not(.dark) .appointment-block {
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08), 0 1px 2px rgba(0, 0, 0, 0.05);
}

/* Week Navigation */
html:not(.dark) .week-nav-btn {
    background: linear-gradient(135deg, #7c3aed 0%, #6366f1 100%) !important;
}

html:not(.dark) .week-nav-btn:disabled {
    background: linear-gradient(135deg, #9ca3af 0%, #6b7280 100%) !important;
}

html:not(.dark) .current-week {
    color: #111827 !important;
}

/* Date picker input */
html:not(.dark) #appointmentBookContent input[type="date"] {
    background-color: #ffffff !important;
    color: #1f2937 !important;
    border-color: #d1d5db !important;
}

/* Selection info panel */
html:not(.dark) #selectionInfo {
    background: linear-gradient(135deg, #f9fafb 0%, #f3f4f6 100%) !important;
    border: 1px solid #d1d5db !important;
}

html:not(.dark) #selectionInfo .text-sm {
    color: #6b7280 !important;
}

html:not(.dark) #selectedTimeRange {
    color: #111827 !important;
}

/* Appointment form */
html:not(.dark) .appointment-form {
    background: linear-gradient(135deg, #f9fafb 0%, #f3f4f6 100%) !important;
    border: 1px solid #d1d5db !important;
}

html:not(.dark) .appointment-form label {
    color: #374151 !important;
}

/* Appointment Book Section */
html:not(.dark) #appointmentBookSection {
    background: #ffffff !important;
}

html:not(.dark) #appointmentBookSection h2 {
    color: #111827 !important;
}

/* ==================== MAP SECTION ==================== */

/* Map container */
html:not(.dark) #mapSection {
    background: linear-gradient(135deg, #ffffff 0%, #fafafa 100%) !important;
    border: 1px solid #e5e7eb !important;
}

html:not(.dark) #mapSection h2 {
    color: #111827 !important;
}

html:not(.dark) #mapSection p {
    color: #6b7280 !important;
}

/* Map container background */
html:not(.dark) #mapContainer {
    background-color: #f3f4f6 !important;
    border: 1px solid #d1d5db !important;
}

html:not(.dark) #searchMap {
    background-color: #ffffff !important;
}

/* Location Map heading */
html:not(.dark) section h2:contains("Location Map") {
    color: #111827 !important;
}

/* ==================== NOTIFICATION PANEL ==================== */

/* Panel container */
html:not(.dark) #notificationPanel {
    background: #ffffff !important;
    border-left: 1px solid #e5e7eb !important;
}

/* Panel header */
html:not(.dark) #notificationPanel .bg-gradient-to-r {
    background: linear-gradient(to right, #7c3aed, #6366f1) !important;
}

html:not(.dark) #notificationPanel h2 {
    color: #ffffff !important;
}

/* Action bar */
html:not(.dark) #notificationPanel .bg-slate-700\/50 {
    background-color: #f9fafb !important;
    border-color: #e5e7eb !important;
}

/* Filter buttons */
html:not(.dark) #filterAllNotifications,
html:not(.dark) #filterUnreadNotifications {
    background-color: #e5e7eb !important;
    color: #374151 !important;
}

html:not(.dark) #filterAllNotifications.bg-purple-600,
html:not(.dark) #filterUnreadNotifications.bg-purple-600 {
    background: linear-gradient(135deg, #7c3aed 0%, #6366f1 100%) !important;
    color: #ffffff !important;
}

/* Mark all read button */
html:not(.dark) #markAllReadBtn {
    color: #7c3aed !important;
}

html:not(.dark) #markAllReadBtn:hover {
    color: #6d28d9 !important;
}

/* Notifications list */
html:not(.dark) #notificationsList {
    background-color: #ffffff !important;
}

/* Individual notification items */
html:not(.dark) .notification-item {
    background-color: #ffffff !important;
    border-bottom: 1px solid #e5e7eb !important;
}

html:not(.dark) .notification-item:hover {
    background-color: #f9fafb !important;
}

/* Unread notifications */
html:not(.dark) .notification-item.bg-purple-900\/20 {
    background-color: #faf5ff !important;
    border-left-color: #7c3aed !important;
}

html:not(.dark) .notification-item .bg-slate-700\/30 {
    background-color: #f9fafb !important;
}

/* Notification text */
html:not(.dark) .notification-item .text-white {
    color: #111827 !important;
}

html:not(.dark) .notification-item .text-gray-300,
html:not(.dark) .notification-item .text-gray-400 {
    color: #6b7280 !important;
}

/* Notification icons/badges */
html:not(.dark) .notification-item .bg-purple-600 {
    background-color: #7c3aed !important;
}

html:not(.dark) .notification-item .bg-green-600 {
    background-color: #059669 !important;
}

html:not(.dark) .notification-item .bg-blue-600 {
    background-color: #2563eb !important;
}

html:not(.dark) .notification-item .bg-orange-600 {
    background-color: #ea580c !important;
}

/* Empty state */
html:not(.dark) #notificationsEmptyState {
    color: #6b7280 !important;
}

/* Settings button in panel */
html:not(.dark) #notificationPanel button[onclick*="Settings"] {
    color: #6b7280 !important;
}

html:not(.dark) #notificationPanel button[onclick*="Settings"]:hover {
    color: #1f2937 !important;
}

/* Close button */
html:not(.dark) #notificationPanel button[onclick*="classList.add('hidden')"] {
    color: #6b7280 !important;
}

html:not(.dark) #notificationPanel button[onclick*="classList.add('hidden')"]:hover {
    color: #1f2937 !important;
}

/* ==================== DASHBOARD SECTIONS ==================== */

/* Main dashboard container */
html:not(.dark) #userDashboardView {
    background-color: #f9fafb !important;
}

html:not(.dark) #userDashboardView h1 {
    color: #111827 !important;
}

/* Dashboard section cards */
html:not(.dark) #userDashboardView .bg-slate-800\/50 {
    background: #ffffff !important;
    border: 1px solid #e5e7eb !important;
}

html:not(.dark) #userDashboardView .bg-slate-700 {
    background-color: #f9fafb !important;
    border-color: #e5e7eb !important;
}

html:not(.dark) #userDashboardView .bg-slate-700\/30 {
    background-color: #f9fafb !important;
}

/* Section headers */
html:not(.dark) #userDashboardView h2,
html:not(.dark) #userDashboardView h3 {
    color: #111827 !important;
}

/* ==================== CLIENTS SECTION ==================== */

html:not(.dark) #clientsView {
    background-color: transparent !important;
}

/* Client cards/list items */
html:not(.dark) #clientsList .bg-slate-700 {
    background-color: #ffffff !important;
    border: 1px solid #e5e7eb !important;
}

html:not(.dark) #clientsList .bg-slate-700:hover {
    background-color: #f9fafb !important;
    border-color: #d1d5db !important;
}

/* Client search */
html:not(.dark) #clientSearch {
    background-color: #ffffff !important;
    color: #1f2937 !important;
    border-color: #d1d5db !important;
}

/* ==================== STAFF SECTION ==================== */

html:not(.dark) #staffView {
    background-color: transparent !important;
}

/* Staff cards/list items */
html:not(.dark) #staffList .bg-slate-700,
html:not(.dark) .staff-card {
    background-color: #ffffff !important;
    border: 1px solid #e5e7eb !important;
}

html:not(.dark) #staffList .bg-slate-700:hover,
html:not(.dark) .staff-card:hover {
    background-color: #f9fafb !important;
    border-color: #d1d5db !important;
}

/* Staff filter buttons */
html:not(.dark) #staffView button[id*="filter"] {
    background-color: #e5e7eb !important;
    color: #374151 !important;
}

html:not(.dark) #staffView button[id*="filter"].bg-purple-600,
html:not(.dark) #staffView button[id*="filter"].active {
    background: linear-gradient(135deg, #7c3aed 0%, #6366f1 100%) !important;
    color: #ffffff !important;
}

/* Staff search */
html:not(.dark) #staffSearch {
    background-color: #ffffff !important;
    color: #1f2937 !important;
    border-color: #d1d5db !important;
}

/* Staff status badges */
html:not(.dark) .staff-card .bg-green-600 {
    background-color: #059669 !important;
}

html:not(.dark) .staff-card .bg-yellow-500 {
    background-color: #f59e0b !important;
}

html:not(.dark) .staff-card .bg-red-600 {
    background-color: #dc2626 !important;
}

html:not(.dark) .staff-card .bg-gray-600 {
    background-color: #6b7280 !important;
}

/* ==================== PORTFOLIO/WORK SAMPLES ==================== */

html:not(.dark) #portfolioView {
    background-color: transparent !important;
}

/* Portfolio grid */
html:not(.dark) #portfolioGrid .bg-slate-700 {
    background-color: #ffffff !important;
    border: 1px solid #e5e7eb !important;
}

/* Portfolio items */
html:not(.dark) .portfolio-item {
    background-color: #ffffff !important;
    border: 1px solid #e5e7eb !important;
}

html:not(.dark) .portfolio-item:hover {
    border-color: #7c3aed !important;
}

/* ==================== REVIEWS SECTION ==================== */

html:not(.dark) #reviewsView {
    background-color: transparent !important;
}

/* Review cards */
html:not(.dark) #reviewsList .bg-slate-700\/50,
html:not(.dark) .review-card {
    background-color: #ffffff !important;
    border: 1px solid #e5e7eb !important;
}

/* Review stats */
html:not(.dark) #reviewStats .bg-slate-700 {
    background-color: #f9fafb !important;
    border: 1px solid #e5e7eb !important;
}

/* ==================== LOCATION MANAGEMENT ==================== */

html:not(.dark) #locationManager {
    background: #ffffff !important;
    border: 1px solid #e5e7eb !important;
}

html:not(.dark) #locationsList .bg-slate-700 {
    background-color: #f9fafb !important;
    border: 1px solid #e5e7eb !important;
}

html:not(.dark) #locationSelectorDashboard {
    background-color: #f9fafb !important;
}

html:not(.dark) #locationSelectorDashboard select {
    background-color: #ffffff !important;
    color: #1f2937 !important;
    border-color: #d1d5db !important;
}

/* ==================== TABLES ==================== */

/* Table headers */
html:not(.dark) table thead {
    background-color: #f3f4f6 !important;
}

html:not(.dark) table th {
    color: #374151 !important;
    border-bottom: 2px solid #e5e7eb !important;
}

/* Table rows */
html:not(.dark) table tbody tr {
    background-color: #ffffff !important;
    border-bottom: 1px solid #e5e7eb !important;
}

html:not(.dark) table tbody tr:hover {
    background-color: #f9fafb !important;
}

html:not(.dark) table td {
    color: #4b5563 !important;
}

/* ==================== TABS/NAVIGATION ==================== */

/* Tab buttons */
html:not(.dark) .tab-button,
html:not(.dark) [role="tab"] {
    background-color: #e5e7eb !important;
    color: #374151 !important;
}

html:not(.dark) .tab-button.active,
html:not(.dark) .tab-button[aria-selected="true"],
html:not(.dark) [role="tab"][aria-selected="true"] {
    background: linear-gradient(135deg, #7c3aed 0%, #6366f1 100%) !important;
    color: #ffffff !important;
}

/* ==================== EMPTY STATES ==================== */

html:not(.dark) .empty-state {
    color: #6b7280 !important;
}

html:not(.dark) .empty-state svg,
html:not(.dark) .empty-state .emoji {
    opacity: 0.5;
}

/* ==================== PROFILE CARD FIXES (NUCLEAR) ==================== */

/* Target the exact bottom section with Posts/Reviews */
html:not(.dark) div[class*="bg-slate-900"] {
    background-color: #f9fafb !important;
}

html:not(.dark) div[class*="bg-slate-900/50"] {
    background-color: #f9fafb !important;
}

html:not(.dark) div[class*="bg-slate-900/30"] {
    background-color: #f9fafb !important;
}

/* More specific - within profile cards */
html:not(.dark) .bg-slate-800 div[class*="border-slate-700"] {
    border-color: #e5e7eb !important;
    background-color: #f9fafb !important;
}

html:not(.dark) .bg-slate-800 .mt-auto {
    background-color: #f9fafb !important;
}

/* ==================== PROFILE-ONLY VIEW (NUCLEAR) ==================== */

/* Kill ALL bg-slate-900 in profile-only contexts */
html:not(.dark) main[class*="bg-slate-900"],
html:not(.dark) section[class*="bg-slate-900"],
html:not(.dark) #profileOnlyHeader[class*="bg-slate-900"],
html:not(.dark) #profileOnlyCard[class*="bg-slate-900"] {
    background-color: #f9fafb !important;
}

/* Target the exact parent divs */
html:not(.dark) #profileOnlyHeader > div[class*="bg-slate-900"] {
    background-color: transparent !important;
}

html:not(.dark) #profileOnlyCard > div[class*="bg-slate-900"] {
    background-color: transparent !important;
}

/* Force transparent on any nested bg-slate-900 in profile view */
html:not(.dark) [id*="profileOnly"] [class*="bg-slate-900"] {
    background-color: transparent !important;
}

/* But keep the actual content cards white */
html:not(.dark) [id*="profileOnly"] .bg-slate-800[class*="rounded"] {
    background-color: #ffffff !important;
    border: 1px solid #e5e7eb !important;
}

/* ==================== FINAL POLISH & REFINEMENTS ==================== */

/* Catch-all for any remaining dark backgrounds (but NOT chart) */
html:not(.dark) [class*="bg-slate-9"]:not(.chart-container):not(#analytics):not(#analytics *) {
    background-color: #f9fafb !important;
}

/* Exclude chart from catch-all */
html:not(.dark) #analytics,
html:not(.dark) #analytics * {
    /* Let chart styles be handled by specific chart rules */
}

/* Ensure all overlays/backdrops are semi-transparent */
html:not(.dark) [class*="backdrop"] {
    background-color: rgba(0, 0, 0, 0.5) !important;
}

/* ==================== GOOGLE PLACES AUTOCOMPLETE ==================== */

/* Google Places dropdown styling */
html:not(.dark) .pac-container {
    background-color: #ffffff !important;
    border: 1px solid #d1d5db !important;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1) !important;
}

html:not(.dark) .pac-item {
    background-color: #ffffff !important;
    color: #1f2937 !important;
    border-top: 1px solid #e5e7eb !important;
}

html:not(.dark) .pac-item:hover {
    background-color: #f3f4f6 !important;
}

html:not(.dark) .pac-item-query {
    color: #111827 !important;
}

html:not(.dark) .pac-matched {
    color: #7c3aed !important;
    font-weight: 600;
}

/* ==================== HOVER STATES REFINEMENT ==================== */

/* Button hover states */
html:not(.dark) button:not([disabled]):hover {
    opacity: 0.9;
    transform: translateY(-1px);
    transition: all 0.2s ease;
}

html:not(.dark) button:not([disabled]):active {
    transform: translateY(0);
}

/* Link hover states */
html:not(.dark) a:hover {
    text-decoration: underline;
}

/* Card hover states */
html:not(.dark) .bg-slate-800:hover,
html:not(.dark) .bg-slate-700:hover {
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1) !important;
}

/* ==================== FOCUS STATES ==================== */

/* Focus rings for accessibility */
html:not(.dark) *:focus-visible {
    outline: 2px solid #7c3aed;
    outline-offset: 2px;
}

html:not(.dark) input:focus-visible,
html:not(.dark) select:focus-visible,
html:not(.dark) textarea:focus-visible {
    outline: none;
    border-color: #7c3aed;
    box-shadow: 0 0 0 3px rgba(124, 58, 237, 0.1);
}

/* ==================== TEXT SELECTIONS ==================== */

html:not(.dark) ::selection {
    background-color: #e9d5ff;
    color: #5b21b6;
}

/* ==================== SCROLLBARS ==================== */

/* Custom scrollbar for light mode */
html:not(.dark) ::-webkit-scrollbar {
    width: 12px;
    height: 12px;
}

html:not(.dark) ::-webkit-scrollbar-track {
    background: #f3f4f6;
}

html:not(.dark) ::-webkit-scrollbar-thumb {
    background: #d1d5db;
    border-radius: 6px;
}

html:not(.dark) ::-webkit-scrollbar-thumb:hover {
    background: #9ca3af;
}

/* ==================== LOADING STATES ==================== */

/* Loading spinner in light mode */
html:not(.dark) .loader {
    border-color: #e5e7eb !important;
    border-top-color: #7c3aed !important;
}

/* Skeleton loaders */
html:not(.dark) [class*="skeleton"],
html:not(.dark) [class*="loading"] {
    background: linear-gradient(90deg, #f3f4f6 25%, #e5e7eb 50%, #f3f4f6 75%);
    background-size: 200% 100%;
    animation: loading 1.5s ease-in-out infinite;
}

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

/* ==================== BADGES & TAGS ==================== */

/* Status badges - ensure visibility */
html:not(.dark) .bg-green-500,
html:not(.dark) .bg-green-600 {
    background-color: #059669 !important;
    color: #ffffff !important;
}

html:not(.dark) .bg-red-500,
html:not(.dark) .bg-red-600 {
    background-color: #dc2626 !important;
    color: #ffffff !important;
}

html:not(.dark) .bg-yellow-500,
html:not(.dark) .bg-yellow-600 {
    background-color: #f59e0b !important;
    color: #ffffff !important;
}

html:not(.dark) .bg-blue-500,
html:not(.dark) .bg-blue-600 {
    background-color: #2563eb !important;
    color: #ffffff !important;
}

html:not(.dark) .bg-purple-500,
html:not(.dark) .bg-purple-600 {
    background-color: #7c3aed !important;
    color: #ffffff !important;
}

/* ==================== DIVIDERS & SEPARATORS ==================== */

html:not(.dark) hr {
    border-color: #e5e7eb !important;
}

html:not(.dark) [class*="border-t"],
html:not(.dark) [class*="border-b"],
html:not(.dark) [class*="border-l"],
html:not(.dark) [class*="border-r"] {
    border-color: #e5e7eb !important;
}

/* ==================== SHADOWS ==================== */

/* Consistent shadow system */
html:not(.dark) .shadow-sm {
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05) !important;
}

html:not(.dark) .shadow {
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1) !important;
}

html:not(.dark) .shadow-md {
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1) !important;
}

html:not(.dark) .shadow-lg {
    box-shadow: 0 10px 15px rgba(0, 0, 0, 0.1) !important;
}

html:not(.dark) .shadow-xl {
    box-shadow: 0 20px 25px rgba(0, 0, 0, 0.1) !important;
}

html:not(.dark) .shadow-2xl {
    box-shadow: 0 25px 50px rgba(0, 0, 0, 0.15) !important;
}

/* ==================== TOOLTIPS & POPOVERS ==================== */

html:not(.dark) [role="tooltip"],
html:not(.dark) [class*="tooltip"] {
    background-color: #1f2937 !important;
    color: #ffffff !important;
    border: 1px solid #374151 !important;
}

/* ==================== SPECIFIC COMPONENT FIXES ==================== */

/* Ensure photo grid items look good */
html:not(.dark) .portfolio-item,
html:not(.dark) [class*="portfolio"] img {
    border: 1px solid #e5e7eb !important;
}

/* Service dropdowns in cards */
html:not(.dark) .bg-slate-800 select {
    background-color: #ffffff !important;
    border-color: #d1d5db !important;
    color: #1f2937 !important;
}

/* Phone/contact links */
html:not(.dark) a[href^="tel:"],
html:not(.dark) a[href^="sms:"] {
    color: #7c3aed !important;
}

html:not(.dark) a[href^="tel:"]:hover,
html:not(.dark) a[href^="sms:"]:hover {
    color: #6d28d9 !important;
}

/* Star ratings - ensure visibility */
html:not(.dark) .text-yellow-400 {
    color: #f59e0b !important;
}

html:not(.dark) [class*="star"] {
    color: #f59e0b !important;
}

/* Empty gray stars */
html:not(.dark) .text-gray-600 {
    color: #d1d5db !important;
}

/* ==================== PRINT STYLES ==================== */

@media print {
    html:not(.dark) {
        background: white !important;
    }

    html:not(.dark) * {
        background: white !important;
        color: black !important;
    }
}

/* ==================== SMOOTH TRANSITIONS ==================== */

/* Global transition for theme switching (exclude canvas) */
html:not(.dark) *:not(canvas):not(.chart-container *) {
    transition-property: background-color, border-color, color, fill, stroke, opacity, box-shadow, transform;
    transition-duration: 200ms;
    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
}

/* Don't transition on page load */
html:not(.dark).no-transition * {
    transition: none !important;
}

/* ==================== THEME TOGGLE PILL STYLES ==================== */

.theme-toggle-container {
    display: inline-block !important;
    margin: 0 8px;
}

.theme-toggle-pill {
    position: relative !important;
    display: flex !important;
    align-items: center !important;
    gap: 0 !important;
    padding: 3px !important;
    border-radius: 9999px !important;
    cursor: pointer !important;
    border: none !important;
    transition: all 0.3s ease !important;
    background: rgba(51, 65, 85, 0.8) !important;
}

html:not(.dark) .theme-toggle-pill {
    background: rgba(229, 231, 235, 0.8) !important;
}

.theme-toggle-pill .theme-option {
    position: relative !important;
    display: flex !important;
    align-items: center !important;
    gap: 6px !important;
    padding: 6px 12px !important;
    border-radius: 9999px !important;
    z-index: 2 !important;
    transition: all 0.3s ease !important;
    color: #9ca3af !important;
}

html:not(.dark) .theme-toggle-pill .theme-option {
    color: #6b7280 !important;
}

.theme-toggle-pill .theme-option[data-theme="dark"] {
    color: #ffffff !important;
}

html:not(.dark) .theme-toggle-pill .theme-option[data-theme="light"] {
    color: #111827 !important;
}

.theme-toggle-pill .theme-label {
    font-size: 0.875rem !important;
    font-weight: 500 !important;
    white-space: nowrap !important;
}

.theme-toggle-pill .theme-toggle-slider {
    position: absolute !important;
    top: 3px !important;
    left: 3px !important;
    height: calc(100% - 6px) !important;
    width: calc(50% - 3px) !important;
    border-radius: 9999px !important;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
    z-index: 1 !important;
    background: linear-gradient(135deg, #6366f1 0%, #8b5cf6 100%) !important;
    box-shadow: 0 2px 8px rgba(139, 92, 246, 0.4) !important;
    transform: translateX(calc(100% + 3px)) !important;
}

html:not(.dark) .theme-toggle-pill .theme-toggle-slider {
    background: linear-gradient(135deg, #7c3aed 0%, #6366f1 100%) !important;
    box-shadow: 0 2px 8px rgba(124, 58, 237, 0.3) !important;
    transform: translateX(0) !important;
}

.theme-toggle-pill:hover {
    transform: translateY(-1px) !important;
}

.theme-toggle-pill .theme-option:hover {
    opacity: 0.8 !important;
}

@media (max-width: 640px) {
    .theme-toggle-pill .theme-label {
        display: none !important;
    }

    .theme-toggle-pill .theme-option {
        padding: 6px 8px !important;
    }
}

/* Favorite button styling */
.favorite-btn {
    background: transparent;
    border: none;
    cursor: pointer;
    padding: 0.25rem;
    border-radius: 0.375rem;
    transition: all 0.2s ease;
    font-size: 1.5rem;
    line-height: 1;
    color: #9ca3af;
}

.favorite-btn:hover {
    background-color: rgba(139, 92, 246, 0.1);
    color: #a78bfa;
    transform: scale(1.1);
}

button.favorite-btn.favorited {
    color: #fbbf24 !important;
    font-weight: bold;
}

.favorite-btn:active {
    transform: scale(0.95);
}

/* Light mode */
html:not(.dark) .favorite-btn {
    color: #6b7280;
}

html:not(.dark) .favorite-btn:hover {
    background-color: rgba(124, 58, 237, 0.1);
    color: #7c3aed;
}

html:not(.dark) button.favorite-btn.favorited {
    color: #f59e0b !important;
    font-weight: bold;
}