/* ========================================================
   LIGHT THEME OVERRIDES
   Safely adds legibility to all fonts and components 
   when the user is in light mode ('dark' class absent).
   No existing CSS files are modified — this is additive.
   ======================================================== */

/* ======================
   1. GLOBAL TEXT COLORS
   ====================== */

/* Convert all light/white Tailwind text utilities to readable dark gray */
html:not(.dark) .text-white,
html:not(.dark) .text-gray-50,
html:not(.dark) .text-gray-100,
html:not(.dark) .text-gray-200,
html:not(.dark) .text-gray-300,
html:not(.dark) .text-slate-50,
html:not(.dark) .text-slate-100,
html:not(.dark) .text-slate-200,
html:not(.dark) .text-slate-300,
html:not(.dark) .text-slate-400,
html:not(.dark) .text-zinc-50,
html:not(.dark) .text-zinc-100,
html:not(.dark) .text-zinc-200,
html:not(.dark) .text-zinc-300,
html:not(.dark) .text-zinc-400 {
    color: #64748b !important; /* Soft gray for normal text */
}

/* Headings get slightly darker for hierarchy */
html:not(.dark) h1:not(.text-transparent),
html:not(.dark) h2:not(.text-transparent),
html:not(.dark) h3:not(.text-transparent),
html:not(.dark) h4:not(.text-transparent),
html:not(.dark) h5:not(.text-transparent),
html:not(.dark) h6:not(.text-transparent) {
    color: #1a202c !important; /* Almost black but softer, modern look */
}

/* Body text inside glass components */
html:not(.dark) p,
html:not(.dark) span,
html:not(.dark) li {
    color: #64748b; 
}

html:not(.dark) .glass-card p,
html:not(.dark) .glass-card li,
html:not(.dark) .glass-card span,
html:not(.dark) .glass-panel p,
html:not(.dark) .glass-panel li,
html:not(.dark) .glass-panel span {
    color: #64748b !important;
}

/* Placeholder text */
html:not(.dark) ::placeholder {
    color: #9ca3af !important; /* gray-400 */
}

/* ======================
   2. EXCEPTIONS — Keep white text on colored backgrounds
   ====================== */
html:not(.dark) .button,
html:not(.dark) .button *,
html:not(.dark) button.bg-indigo-600,
html:not(.dark) button.bg-indigo-600 *,
html:not(.dark) .bg-indigo-500,
html:not(.dark) .bg-indigo-600,
html:not(.dark) .bg-blue-500,
html:not(.dark) .bg-blue-600,
    html:not(.dark) .bg-emerald-500,
    html:not(.dark) .bg-red-500,
    html:not(.dark) .chat-unread-badge {
        color: #ffffff !important;
    }

/* Fix light mode gradient for Error Dashboard */
html:not(.dark) .from-blue-200.via-white.to-blue-200 {
    background: linear-gradient(to right, #1d4ed8, #3b82f6, #1d4ed8) !important;
    -webkit-background-clip: text !important;
    background-clip: text !important;
    color: transparent !important;
    -webkit-text-fill-color: transparent !important;
}

/* ======================
   3. UNIVERSAL TRANSPARENT GLASS (Matches Dark Mode)
   ====================== */
/* Force all standard structural Divs to be transparent glass */
html:not(.dark) .card,
html:not(.dark) .bg-white,
html:not(.dark) .bg-slate-800,
html:not(.dark) .bg-slate-900,
html:not(.dark) .glass-card,
html:not(.dark) .glass-panel {
    background: rgba(255, 255, 255, 0.1) !important;
    backdrop-filter: blur(16px) saturate(180%) !important;
    -webkit-backdrop-filter: blur(16px) saturate(180%) !important;
    border: 1px solid rgba(255, 255, 255, 0.2) !important;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.05), inset 0 1px 0 rgba(255, 255, 255, 0.1) !important;
    transition: all 0.3s cubic-bezier(0.34, 1.56, 0.64, 1) !important;
}

/* Replicate dark mode hover effects globally for Light Mode elements */
html:not(.dark) .card:hover,
html:not(.dark) .glass-card:hover {
    background: linear-gradient(135deg, rgba(30, 144, 255, 0.1) 0%, rgba(255, 255, 255, 0.15) 100%) !important;
    border: 1px solid rgba(30, 144, 255, 0.25) !important;
    transform: translateY(-4px) !important;
    box-shadow: 0 12px 40px rgba(30, 144, 255, 0.15), 0 12px 40px rgba(0, 0, 0, 0.05) !important;
}

/* Ensure inner card parts (headers, footers) don't overwrite transparency */
html:not(.dark) .card-header,
html:not(.dark) .card-footer,
html:not(.dark) .card-body {
    background: transparent !important;
}

/* ======================
   4. NAVBAR — Complete light mode overrides
   ====================== */

/* Navbar bar itself - perfectly transparent so islands split */
html:not(.dark) .glass-navbar {
    background: transparent !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    border: none !important;
    box-shadow: none !important;
}

/* Sidebar override - purplish dark glassmorphism like dark mode */
html:not(.dark) .sidenav {
    background: linear-gradient(180deg, rgba(30, 27, 75, 0.85), rgba(15, 23, 42, 0.95)) !important;
    backdrop-filter: blur(24px) saturate(180%) !important;
    -webkit-backdrop-filter: blur(24px) saturate(180%) !important;
    border-right: 1px solid rgba(255, 255, 255, 0.05) !important;
    border-left: none !important;
    border-top: none !important;
    border-bottom: none !important;
    box-shadow: 4px 0 30px rgba(0, 0, 0, 0.2) !important;
}

/* Sidebar Links & Text - Force white/light since background is dark */
html:not(.dark) .sidenav .nav-link,
html:not(.dark) .sidenav .nav-link-text,
html:not(.dark) .sidenav-header .navbar-brand span {
    color: #f8fafc !important;
    transition: all 0.3s ease !important;
}

html:not(.dark) .sidenav .nav-link:hover {
    color: #ffffff !important;
    background: rgba(255, 255, 255, 0.1) !important;
    border-radius: 8px !important;
}

html:not(.dark) .sidenav .nav-link.active {
    background: rgba(59, 130, 246, 0.3) !important;
    color: #ffffff !important;
    border-radius: 8px !important;
    font-weight: 600 !important;
    box-shadow: none !important;
}

/* Override hardcoded white SVG fills for Light Mode (keep them white!) */
html:not(.dark) .sidenav svg [fill="#FFFFFF"], html:not(.dark) .sidenav svg g[fill="#FFFFFF"] {
    fill: #f8fafc !important;
}

html:not(.dark) .sidenav .nav-link:hover svg [fill="#FFFFFF"] {
    fill: #ffffff !important;
}

html:not(.dark) .sidenav .nav-link.active svg [fill="#FFFFFF"] {
    fill: #ffffff !important;
}

html:not(.dark) .sidenav li.list-unstyled {
    color: #94a3b8 !important; /* softer gray for section headers */
}

/* Nav island pill container - restore glassmorphism so it floats */
html:not(.dark) .nav-island {
    background: transparent !important;
}

/* Nav links — default state */
html:not(.dark) .nav-island li a {
    color: #64748b !important;
}

/* Nav links — hover */
html:not(.dark) .nav-island li a:hover {
    color: #1a202c !important; 
}

/* Nav links — active */
html:not(.dark) .nav-island li a.active {
    background: rgba(59, 130, 246, 0.08) !important;
    color: #2563eb !important; 
    border: none !important;
    box-shadow: none !important;
}

/* Logo text gradient → dark gradient in light mode */
html:not(.dark) .logo-island span {
    background: linear-gradient(135deg, #374151, #1f2937) !important;
    -webkit-background-clip: text !important;
    -webkit-text-fill-color: transparent !important;
    background-clip: text !important;
}


/* ======================
   5. USER ISLAND & DROPDOWN — Light mode text
   ====================== */

/* User button name */
html:not(.dark) .user-setup-btn .user-name {
    color: #374151 !important; /* gray-700 */
}

/* Dropdown arrow */
html:not(.dark) .user-setup-btn .dropdown-arrow,
html:not(.dark) .dropdown-arrow {
    color: #6b7280 !important; /* gray-500 */
}


/* Dropdown menu */
html:not(.dark) .user-setup-menu {
    background: rgba(255, 255, 255, 0.85) !important;
    backdrop-filter: blur(10px) !important;
    -webkit-backdrop-filter: blur(10px) !important;
    border: 1px solid rgba(0, 0, 0, 0.05) !important;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.05) !important;
    border-radius: 12px !important;
}

/* Account Type Badges */
html:not(.dark) .account-type-manufacturer {
    background-color: #f3e8ff !important;
    color: #7e22ce !important;
}

html:not(.dark) .account-type-hospital {
    background-color: #dbeafe !important;
    color: #1d4ed8 !important;
}

html:not(.dark) .account-type-service_provider {
    background-color: #dcfce7 !important;
    color: #15803d !important;
}

/* User display name in dropdown */
html:not(.dark) .user-display-name,
html:not(.dark) .mobile-user-name {
    color: #374151 !important; /* gray-700 */
}

/* User email in dropdown */
html:not(.dark) .user-email,
html:not(.dark) .mobile-user-email {
    color: #9ca3af !important; /* gray-400 */
}

/* Menu divider */
html:not(.dark) .menu-divider {
    background: linear-gradient(90deg, transparent, rgba(0, 0, 0, 0.08), transparent) !important;
}

/* Menu items — default */
html:not(.dark) .menu-item {
    color: #64748b !important;
    padding: 12px 20px !important;
    border-radius: 8px !important;
    transition: all 0.3s ease !important;
}

/* Menu items — hover */
html:not(.dark) .menu-item:hover {
    color: #1a202c !important; 
    background: rgba(0, 0, 0, 0.04) !important;
}

html:not(.dark) .menu-item::before {
    background: linear-gradient(135deg, rgba(59, 130, 246, 0.06), rgba(147, 51, 234, 0.06)) !important;
}

/* Admin item */
html:not(.dark) .menu-item.admin-item {
    color: #2563eb !important;
}

/* Logout item */
html:not(.dark) .menu-item.logout-item {
    color: #dc2626 !important;
}

/* Chevron arrow */
html:not(.dark) .arrow-right {
    color: #9ca3af !important;
}

/* Auth links */
html:not(.dark) .auth-links a {
    color: #4b5563 !important;
}

/* ======================
   6. MOBILE MENU — Light mode
   ====================== */

html:not(.dark) .mobile-menu-content {
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.97), rgba(248, 250, 252, 0.97)) !important;
    box-shadow: 10px 0 30px rgba(0, 0, 0, 0.1) !important;
}

html:not(.dark) .mobile-menu-header {
    border-bottom: 1px solid rgba(0, 0, 0, 0.08) !important;
}

html:not(.dark) .mobile-user-section {
    background: rgba(0, 0, 0, 0.03) !important;
    border: 1px solid rgba(0, 0, 0, 0.06) !important;
}

html:not(.dark) .mobile-nav-item {
    background: rgba(0, 0, 0, 0.03) !important;
    border: 1px solid rgba(0, 0, 0, 0.06) !important;
    color: #4b5563 !important;
}

html:not(.dark) .mobile-nav-item:hover {
    background: rgba(59, 130, 246, 0.08) !important;
    color: #1f2937 !important;
}

html:not(.dark) .mobile-nav-item.active {
    background: rgba(59, 130, 246, 0.1) !important;
    border: 1px solid rgba(59, 130, 246, 0.2) !important;
    color: #2563eb !important;
}

html:not(.dark) .mobile-menu-item {
    background: rgba(0, 0, 0, 0.02) !important;
    border: 1px solid rgba(0, 0, 0, 0.05) !important;
    color: #4b5563 !important;
}

html:not(.dark) .mobile-menu-item:hover {
    background: rgba(0, 0, 0, 0.05) !important;
    color: #1f2937 !important;
}

html:not(.dark) .mobile-menu-divider {
    background: rgba(0, 0, 0, 0.08) !important;
}

html:not(.dark) .mobile-menu-item.logout {
    background: rgba(239, 68, 68, 0.08) !important;
    border-color: rgba(239, 68, 68, 0.15) !important;
    color: #dc2626 !important;
}

/* Hamburger lines → dark */
html:not(.dark) .hamburger-line {
    background: linear-gradient(90deg, #4b5563, #374151) !important;
}

/* ======================
   7. GLASS BUTTONS — Light Mode
   ====================== */

/* Generic glass button */
html:not(.dark) .glass-btn:not(.glass-btn-blue):not(.glass-btn-green):not(.glass-btn-red):not(.glass-btn-yellow) {
    background: rgba(255, 255, 255, 0.7) !important;
    backdrop-filter: blur(12px) saturate(180%) !important;
    -webkit-backdrop-filter: blur(12px) saturate(180%) !important;
    border: 1px solid rgba(255, 255, 255, 0.6) !important;
    color: #1a202c !important;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05) !important;
}

html:not(.dark) .glass-btn:not(.glass-btn-blue):not(.glass-btn-green):not(.glass-btn-red):not(.glass-btn-yellow):hover {
    background: rgba(243, 244, 246, 1) !important;
    color: #1f2937 !important;
}

/* Solid colored buttons for light mode */
html:not(.dark) .glass-btn-blue {
    background: #2563eb !important;
    border: none !important;
    border-radius: 10px !important;
    color: white !important;
    box-shadow: 0 4px 6px rgba(37, 99, 235, 0.2) !important;
    transition: all 0.3s ease !important;
    background-image: none !important;
}
html:not(.dark) .glass-btn-blue:hover { 
    background: #1d4ed8 !important; 
    transform: translateY(-2px) !important;
    box-shadow: 0 6px 12px rgba(37, 99, 235, 0.3) !important;
}

html:not(.dark) .glass-btn-green {
    background: #10b981 !important;
    border: 1px solid #059669 !important;
    color: white !important;
    background-image: none !important;
}
html:not(.dark) .glass-btn-green:hover { background: #059669 !important; }

html:not(.dark) .glass-btn-red {
    background: #ef4444 !important;
    border: 1px solid #dc2626 !important;
    color: white !important;
    background-image: none !important;
}
html:not(.dark) .glass-btn-red:hover { background: #dc2626 !important; }

/* ======================
   8. GLASS INPUTS & FORMS
   ====================== */

html:not(.dark) .glass-input,
html:not(.dark) .glass-select,
html:not(.dark) .glass-textarea {
    background: rgba(255, 255, 255, 0.6) !important;
    backdrop-filter: blur(12px) saturate(180%) !important;
    -webkit-backdrop-filter: blur(12px) saturate(180%) !important;
    border: 1px solid rgba(255, 255, 255, 0.5) !important;
    color: #1a202c !important;
}

html:not(.dark) .glass-input:focus,
html:not(.dark) .glass-select:focus,
html:not(.dark) .glass-textarea:focus {
    border: 1px solid rgba(59, 130, 246, 0.4) !important;
    box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.08) !important;
}

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

/* ======================
   9. GLASS BADGES & ALERTS
   ====================== */

html:not(.dark) .glass-badge {
    background: rgba(0, 0, 0, 0.06) !important;
    border: 1px solid rgba(0, 0, 0, 0.1) !important;
    color: #4b5563 !important;
}

html:not(.dark) .glass-alert {
    color: #374151 !important;
}

/* ======================
   10. GLASS LIST ITEMS
   ====================== */

html:not(.dark) .glass-list-item {
    background: rgba(0, 0, 0, 0.02) !important;
    border: 1px solid rgba(0, 0, 0, 0.06) !important;
    color: #4b5563 !important;
}

html:not(.dark) .glass-list-item:hover {
    background: rgba(0, 0, 0, 0.05) !important;
    color: #1f2937 !important;
}

/* ======================
   11. SCROLL-TO-TOP BUTTON
   ====================== */

html:not(.dark) .scroll-to-top {
    background: rgba(255, 255, 255, 0.85) !important;
    border: 1px solid rgba(0, 0, 0, 0.1) !important;
}

html:not(.dark) .scroll-to-top svg {
    color: #4b5563 !important;
}

html:not(.dark) .scroll-to-top:hover {
    background: rgba(255, 255, 255, 0.95) !important;
}

/* ======================
   12. GRADIENT TEXT — Boost saturation for readability
   ====================== */

html:not(.dark) .text-transparent.bg-clip-text {
    filter: brightness(0.7) saturate(1.6);
}

/* ======================
   13. GLASS MODAL
   ====================== */

html:not(.dark) .glass-modal {
    background: rgba(255, 255, 255, 0.95) !important;
    border: 1px solid rgba(0, 0, 0, 0.1) !important;
}

html:not(.dark) .glass-modal-overlay {
    background: rgba(0, 0, 0, 0.2) !important;
}

/* ======================
   14. GLASS DIVIDERS
   ====================== */

html:not(.dark) .glass-divider {
    background: linear-gradient(90deg, transparent, rgba(0, 0, 0, 0.08), transparent) !important;
}