/* Light Theme - Clean, neutral light backgrounds */

:root {
    color-scheme: light;
    --bg-base: #f8fafc;
    --bg-elevated: #ffffff;
    --bg-panel: #ffffff;
    --bg-section-gradient: #ffffff;
    --bg-hover: rgba(100, 116, 139, 0.08);
    --bg-active: rgba(100, 116, 139, 0.15);
    --border-subtle: rgba(71, 85, 105, 0.15);
    --border-default: rgba(71, 85, 105, 0.2);
    --border-strong: rgba(71, 85, 105, 0.4);
    --glow-primary: rgba(100, 116, 139, 0.2);
    --accent-gradient: linear-gradient(135deg, #2563eb, #0ea5e9);
    --accent-solid: #0ea5e9;
    --accent-bg: rgba(14, 165, 233, 0.1);
    --text-primary: #0f172a;
    --text-secondary: #475569;
    --text-muted: #64748b;
    --btn-text-color: #ffffff;
    --pwa-theme-color: #ffffff;

    /* Team View / Card styling */
    --card-bg: #ffffff;
    --card-header-bg: #f8fafc;
    --body-bg: #f8fafc;
    --border-color: #e2e8f0;
    --border-color-light: rgba(226, 232, 240, 0.7);
    --hover-bg: #f1f5f9;
    --scrollbar-track: rgba(226, 232, 240, 0.5);
    --scrollbar-thumb: rgba(148, 163, 184, 0.5);
    --scrollbar-thumb-hover: rgba(148, 163, 184, 0.7);
    --sidebar-width: 256px;
}

* {
    scrollbar-color: var(--accent-solid) var(--bg-base);
}

::-webkit-scrollbar-track {
    background: var(--bg-base);
}

::-webkit-scrollbar-thumb {
    background: var(--accent-solid);
    border: 2px solid var(--bg-base);
}

::-webkit-scrollbar-thumb:hover {
    background: var(--accent-solid);
    filter: brightness(1.1);
}

body {
    background: #f8fafc !important;
    background-color: #f8fafc !important;
    background-image: none !important;
    color: var(--text-primary);
    padding-bottom: 80px;
    position: relative;
}

/* Adjust for PWA nav bar on mobile */
@media (max-width: 768px) {
    body {
        padding-bottom: 100px;
    }
}

/* Force neutral background - override any dynamically generated styles */
html body {
    background: #f8fafc !important;
    background-color: #f8fafc !important;
    background-image: none !important;
}

.bg-slate-900 {
    background: rgba(241, 245, 249, 0.95) !important;
}

.bg-slate-800 {
    background: rgba(226, 232, 240, 0.8) !important;
}

.bg-slate-700 {
    background: rgba(203, 213, 225, 0.6) !important;
}

.bg-slate-600 {
    background: rgba(148, 163, 184, 0.4) !important;
}

.border-slate-700 {
    border-color: rgba(71, 85, 105, 0.2) !important;
}

.border-slate-800 {
    border-color: rgba(71, 85, 105, 0.25) !important;
}

/* text-slate-100/200 are used in many contexts - don't override globally */
/* Instead, let them inherit naturally and override specific problem areas below */

.text-slate-300 {
    color: rgba(51, 65, 85, 0.9) !important;
}

.text-slate-400,
.text-slate-500 {
    color: var(--text-secondary) !important;
}

.text-slate-600 {
    color: rgba(100, 116, 139, 0.8) !important;
}

.hover\:bg-slate-700:hover {
    background: rgba(203, 213, 225, 0.6) !important;
}

.hover\:bg-slate-600:hover {
    background: rgba(148, 163, 184, 0.4) !important;
}

.text-blue-600,
.hover\:text-blue-800:hover,
.text-blue-800 {
    color: #2563eb !important;
}

/* Keep semantic colors for status backgrounds */
.bg-blue-100 {
    background: rgba(59, 130, 246, 0.15) !important;
}
.bg-green-100 {
    background: rgba(34, 197, 94, 0.15) !important;
}
.bg-red-100 {
    background: rgba(239, 68, 68, 0.15) !important;
}
.bg-yellow-100 {
    background: rgba(234, 179, 8, 0.15) !important;
}
.bg-purple-100 {
    background: rgba(168, 85, 247, 0.15) !important;
}

.text-blue-800,
.text-green-800,
.text-red-800,
.text-yellow-800,
.text-purple-800 {
    color: #1f2937 !important;
}

.border-slate-300,
.border-slate-200 {
    border-color: rgba(148, 163, 184, 0.25) !important;
}

.text-gray-500,
.text-gray-400 {
    color: var(--text-secondary) !important;
}

.bg-white {
    background: #ffffff !important;
}

/* Sidebar */
.sidebar {
    background: #ffffff;
    border-right: 1px solid var(--border-subtle);
}

.sidebar-header {
    border-bottom: 1px solid var(--border-subtle);
}

.sidebar-header h1 {
    color: var(--text-primary);
}

.sidebar-nav a {
    color: var(--text-secondary);
}

.sidebar-nav a:hover {
    color: var(--text-primary);
    box-shadow: inset 0 0 0 1px rgba(100, 116, 139, 0.25);
    background: rgba(100, 116, 139, 0.08);
}

.sidebar-nav a.sidebar-active {
    background: linear-gradient(135deg, color-mix(in srgb, var(--accent-solid) 28%, transparent), color-mix(in srgb, var(--accent-solid) 18%, transparent));
    border-left: 3px solid color-mix(in srgb, var(--accent-solid) 90%, transparent);
    color: var(--text-primary);
    box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--accent-solid) 20%, transparent), 0 12px 30px -12px color-mix(in srgb, var(--accent-solid) 60%, transparent);
}

.sidebar-nav a.sidebar-locked,
.sidebar-nav a.sidebar-teaser {
    background: rgba(100, 116, 139, 0.08);
    color: var(--text-secondary);
    box-shadow: inset 0 0 0 1px rgba(100, 116, 139, 0.15);
}

.sidebar-nav a.sidebar-locked:hover,
.sidebar-nav a.sidebar-teaser:hover {
    background: rgba(100, 116, 139, 0.12);
    box-shadow: inset 0 0 0 1px rgba(100, 116, 139, 0.25);
}

.sidebar-footer {
    border-top: 1px solid var(--border-subtle);
}

.customize-menu-trigger {
    color: var(--text-muted);
}

.customize-menu-trigger:hover,
.customize-menu-trigger:focus {
    color: #2563eb;
}

.customize-menu-icon {
    color: rgba(100, 116, 139, 0.7);
}

.customize-menu-trigger:hover .customize-menu-icon,
.customize-menu-trigger:focus .customize-menu-icon {
    color: #2563eb;
}

/* Top Bar */
.top-bar {
    background: linear-gradient(160deg, rgba(255, 255, 255, 0.8) 0%, rgba(248, 250, 252, 0.92) 100%);
    border-bottom: 1px solid var(--border-subtle);
}

.top-bar::after {
    background: linear-gradient(to bottom, rgba(255, 255, 255, 0.3), rgba(255, 255, 255, 0));
}

.top-bar h2 {
    color: var(--text-primary);
}

/* Input Fields - Card Styling */
.input-field,
.select-field,
.textarea-field {
    background: rgba(255, 255, 255, 0.9) !important;
    border: 1px solid rgba(100, 116, 139, 0.25) !important;
    color: var(--text-primary) !important;
}

.input-field::placeholder,
.textarea-field::placeholder {
    color: var(--text-secondary) !important;
}

.input-field:focus,
.select-field:focus,
.textarea-field:focus {
    border-color: var(--accent-solid) !important;
    box-shadow: 0 0 0 3px rgba(14, 165, 233, 0.15) !important;
    background: rgba(255, 255, 255, 0.95) !important;
}

.input-field option {
    background: #ffffff;
    color: var(--text-primary);
}

/* Buttons */
.btn-primary {
    background: linear-gradient(135deg, #2563eb, #0ea5e9);
    color: #ffffff;
}

.btn-primary:hover {
    background: linear-gradient(135deg, #1e52c8, #0a91d2);
    box-shadow: 0 15px 30px -20px rgba(37, 99, 235, 0.6);
}

.btn-secondary {
    background: rgba(100, 116, 139, 0.1);
    color: var(--text-primary);
    border: 1px solid rgba(100, 116, 139, 0.3);
}

.btn-secondary:hover {
    background: rgba(100, 116, 139, 0.15);
    border-color: rgba(100, 116, 139, 0.5);
}

.btn-ghost {
    color: var(--text-secondary);
}

.btn-ghost:hover {
    color: var(--text-primary);
}

.btn-logout {
    background: linear-gradient(135deg, rgba(37, 99, 235, 0.95), rgba(14, 165, 233, 0.95)) !important;
    color: var(--btn-text-color) !important;
    box-shadow: 0 15px 30px -20px rgba(37, 99, 235, 0.4), 0 6px 20px -10px rgba(37, 99, 235, 0.5);
}

.btn-logout:hover {
    box-shadow: 0 20px 35px -20px rgba(37, 99, 235, 0.5), 0 8px 25px -12px rgba(37, 99, 235, 0.6);
}

/* Override text-white on button-like elements to use theme button text color */
button.text-white, a.text-white, [role="button"].text-white,
.btn.text-white, .btn-primary.text-white,
.bg-cyan-500.text-white, .bg-cyan-600.text-white, .bg-cyan-400.text-white,
.bg-blue-500.text-white, .bg-blue-600.text-white, .bg-blue-700.text-white,
.hover\:bg-cyan-500.text-white, .hover\:bg-cyan-600.text-white,
.hover\:bg-blue-500.text-white, .hover\:bg-blue-600.text-white, .hover\:bg-blue-700.text-white {
    color: var(--btn-text-color, white) !important;
}

/* Glass Panel */
.glass-panel {
    background: rgba(255, 255, 255, 0.95) !important;
    border: 1px solid rgba(100, 116, 139, 0.2) !important;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08) !important;
    backdrop-filter: blur(12px);
}

/* Hide decorative blur elements on light theme - they cause color tints */
/* Only target elements that are both colored AND blurred (decorative glows) */
/* DO NOT hide .bg-cyan-500/20 etc globally - they're used for button selection states */
[class*="blur-3xl"],
[class*="blur-2xl"] {
    opacity: 0 !important;
    visibility: hidden !important;
}

/* Only hide colored backgrounds when combined with blur (decorative only) */
.bg-blue-500\/20[class*="blur"],
.bg-cyan-500\/20[class*="blur"],
.bg-purple-500\/20[class*="blur"] {
    opacity: 0 !important;
    visibility: hidden !important;
}

/* Specifically target the signin/signup decorative blurs */
.glass-panel .absolute[class*="blur-"],
.glass-panel .absolute.bg-blue-500\/20,
.glass-panel > .absolute.-top-10,
.relative .absolute[class*="blur-3xl"] {
    display: none !important;
}

/* Cards - MUST use !important to override theme.css dark gradients */
/* Using multiple selectors for maximum specificity */
.card,
html .card,
body .card,
div.card,
.card.text-center,
.card.p-4,
.card.p-6 {
    background: #ffffff !important;
    background-color: #ffffff !important;
    background-image: none !important;
    border: 1px solid rgba(100, 116, 139, 0.2) !important;
    box-shadow: 0 4px 20px -8px rgba(0, 0, 0, 0.08) !important;
}

.card::before,
html .card::before,
body .card::before {
    display: none !important;
    content: none !important;
    opacity: 0 !important;
}

.card.highlight {
    background: rgba(241, 245, 249, 0.9) !important;
    border-color: color-mix(in srgb, var(--accent-solid) 30%, transparent) !important;
}

/* Card text - ensure dark text on light background */
.card .text-white:not(button):not(.btn):not([class*="bg-cyan"]):not([class*="bg-blue"]) {
    color: var(--text-primary) !important;
}

.card .text-slate-100,
.card .text-slate-200 {
    color: var(--text-primary) !important;
}

.card .text-slate-300,
.card .text-slate-400 {
    color: var(--text-secondary) !important;
}

/* Modals */
.modal-backdrop {
    background: rgba(0, 0, 0, 0.3);
}

.modal-backdrop:not(.hidden) {
    display: flex;
    align-items: center;
    justify-content: center;
}

.modal-panel {
    background: #ffffff;
    border: 1px solid var(--border-subtle);
    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.15);
}

/* Tables */
.table thead {
    background: rgba(241, 245, 249, 0.9);
    border-bottom: 1px solid rgba(100, 116, 139, 0.2);
}

.table th {
    color: var(--text-primary);
}

.table td {
    border-bottom: 1px solid var(--border-subtle);
    color: var(--text-secondary);
}

.table tbody tr:hover {
    background: rgba(241, 245, 249, 0.7);
}

/* Badges */
.badge-primary {
    background: rgba(37, 99, 235, 0.2);
    color: #1e40af;
}

.badge-success {
    background: rgba(16, 185, 129, 0.2);
    color: #047857;
}

.badge-danger {
    background: rgba(239, 68, 68, 0.2);
    color: #991b1b;
}

.badge-warning {
    background: rgba(234, 179, 8, 0.2);
    color: #92400e;
}

/* User Profile */
.user-profile-card:hover {
    background: rgba(100, 116, 139, 0.08);
}

.user-avatar {
    background: linear-gradient(135deg, #2563eb, #0ea5e9);
}

.user-name {
    color: var(--text-primary);
}

.user-email {
    color: var(--text-muted);
}

/* Paywall/Premium Panel */
.paywall-panel {
    background: #f8fafc;
    border: 1px solid rgba(100, 116, 139, 0.25);
    box-shadow: 0 30px 80px -20px rgba(0, 0, 0, 0.1);
}

.paywall-aurora {
    background: radial-gradient(circle at 20% 20%, rgba(45, 212, 191, 0.15), transparent 60%),
                radial-gradient(circle at 80% 10%, rgba(96, 165, 250, 0.15), transparent 55%),
                radial-gradient(circle at 50% 70%, rgba(236, 72, 153, 0.1), transparent 65%);
    opacity: 0.6;
}

/* Paywall modal text - dark text on light background */
.paywall-panel .text-white {
    color: var(--text-primary) !important;
}

.paywall-panel .text-cyan-200,
.paywall-panel .text-cyan-200\/80 {
    color: #0e7490 !important;
}

.paywall-panel .text-slate-300,
.paywall-panel .text-slate-300\/80 {
    color: var(--text-secondary) !important;
}

/* Main Content Background */
.main-content::before {
    background: radial-gradient(circle at 80% 20%, rgba(148, 163, 184, 0.1), transparent 50%);
    opacity: 0.4;
}

/* Gamification Mission Cards */
.gamify-mission-card {
    border-radius: 1.25rem;
    border: 1px solid rgba(100, 116, 139, 0.2);
    background: rgba(255, 255, 255, 0.8);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
}

.gamify-mission {
    position: relative;
    padding: 1rem;
    border-radius: 1rem;
    background: rgba(255, 255, 255, 0.85);
    border: 1px solid rgba(100, 116, 139, 0.15);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
}

.gamify-mission:hover {

    box-shadow: 0 18px 30px -22px rgba(0, 0, 0, 0.15);
}

.gamify-mission.complete {
    border-color: rgba(250, 204, 21, 0.6);
    box-shadow: 0 0 22px rgba(250, 204, 21, 0.25);
}

.gamify-mission-title {
    font-weight: 600;
    color: var(--text-primary);
}

.gamify-mission-sub {
    margin-top: 0.25rem;
    font-size: 0.85rem;
    color: var(--text-secondary);
}

.gamify-mission-progress {
    position: relative;
    height: 0.55rem;
    border-radius: 9999px;
    background: rgba(100, 116, 139, 0.15);
    border: 1px solid rgba(100, 116, 139, 0.25);
    overflow: hidden;
}

.gamify-mission-progress-bar {
    position: absolute;
    inset: 0;
    background: linear-gradient(90deg, var(--accent-solid), #0284c7);
    transition: width 0.45s ease;
    box-shadow: 0 0 16px rgba(14, 165, 233, 0.4);
}

.gamify-mission-progress-text {
    margin-top: 0.35rem;
    font-size: 0.75rem;
    color: var(--text-secondary);
}

.gamify-mission-reward {
    font-size: 0.75rem;
    font-weight: 600;
    padding: 0.25rem 0.65rem;
    border-radius: 9999px;
    border: 1px solid rgba(100, 116, 139, 0.3);
    color: var(--text-secondary);
    background: rgba(100, 116, 139, 0.1);
}

.gamify-mission-reward.completed {
    background: rgba(34, 197, 94, 0.15);
    border-color: rgba(34, 197, 94, 0.5);
    color: #047857;
}

.gamify-mission.empty {
    text-align: center;
    color: var(--text-secondary);
    font-style: italic;
}

.gamify-reward-chip {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0.35rem 0.85rem;
    border-radius: 9999px;
    background: rgba(100, 116, 139, 0.1);
    border: 1px solid rgba(100, 116, 139, 0.3);
    color: var(--text-secondary);
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
}

.gamify-mission.skeleton {
    color: rgba(100, 116, 139, 0.4);
    background: linear-gradient(90deg, rgba(100, 116, 139, 0.08) 25%, rgba(100, 116, 139, 0.15) 50%, rgba(100, 116, 139, 0.08) 75%);
    background-size: 200% 100%;
}

/* Gamification Hero Section - Light Theme */
.gamify-hero {
    background: rgba(255, 255, 255, 0.8) !important;
    border: 1px solid rgba(100, 116, 139, 0.2) !important;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05) !important;
    color: var(--text-primary) !important;
}

.gamify-hero * {
    color: var(--text-primary) !important;
}

.gamify-hero .text-cyan-100,
.gamify-hero .text-cyan-50,
.gamify-hero .text-cyan-50\/70,
.gamify-hero .text-cyan-100\/70,
.gamify-hero .text-cyan-100\/70,
.gamify-hero .text-cyan-400,
.gamify-hero .text-white {
    color: var(--text-primary) !important;
}

/* Gamification Progress Bar */
.gamify-progress {
    background: rgba(100, 116, 139, 0.1) !important;
    border: 1px solid rgba(100, 116, 139, 0.2) !important;
    box-shadow: inset 0 2px 6px rgba(0, 0, 0, 0.04) !important;
}

.gamify-progress-bar {
    background: linear-gradient(90deg, var(--accent-solid), #0284c7) !important;
    box-shadow: 0 0 18px rgba(14, 165, 233, 0.4) !important;
}

/* Gamification Streak */
.gamify-streak {
    background: rgba(100, 116, 139, 0.08) !important;
    border: 1px solid rgba(100, 116, 139, 0.15) !important;
    box-shadow: inset 0 0 0 1px rgba(100, 116, 139, 0.1) !important;
}

.gamify-streak-value {
    color: var(--accent-solid) !important;
    text-shadow: 0 0 12px rgba(14, 165, 233, 0.4) !important;
}

/* Gamification Nudge */
.gamify-nudge {
    background: rgba(100, 116, 139, 0.1) !important;
    border: 1px solid rgba(100, 116, 139, 0.25) !important;
    color: var(--text-primary) !important;
    box-shadow: 0 0 16px rgba(0, 0, 0, 0.05) !important;
}

/* Gamification Rank Badge - keeps inherent rank colors, DO NOT override */

/* Gamify inline elements */
.gamify-inline {
    background: linear-gradient(135deg, rgba(14, 165, 233, 0.12), rgba(124, 58, 237, 0.10)) !important;
    border: 1px solid rgba(14, 165, 233, 0.25) !important;
    box-shadow: 0 4px 12px rgba(14, 165, 233, 0.08) !important;
}

.gamify-inline-header {
    border-bottom: none !important;
}

.gamify-inline-level strong {
    color: var(--text-primary) !important;
}

.gamify-inline-label {
    color: var(--text-secondary) !important;
}

.gamify-inline-rank {
    color: var(--text-primary) !important;
}

.gamify-inline-reminder {
    color: #b45309 !important;
    background: rgba(251, 191, 36, 0.15) !important;
    padding: 0.25rem 0.5rem !important;
    border-radius: 0.375rem !important;
}

.gamify-inline-track {
    background: rgba(100, 116, 139, 0.18) !important;
    border: 1px solid rgba(100, 116, 139, 0.25) !important;
}

.gamify-inline-bar {
    background: linear-gradient(90deg, #facc15, #f472b6, var(--accent-solid)) !important;
    box-shadow: 0 0 12px rgba(250, 204, 21, 0.35) !important;
}

.gamify-inline-progress {
    color: var(--text-primary) !important;
}

/* Contact Card Elements */
.contact-card {
    background: rgba(255, 255, 255, 0.8) !important;
    border: 1px solid rgba(100, 116, 139, 0.2) !important;
    box-shadow: none !important;
}

.contact-card:hover {
    border-color: rgba(100, 116, 139, 0.35) !important;
    box-shadow: none !important;
    transform: translateY(-1px);
}

.contact-card::after {
    display: none !important;
}

.contact-card-name-row {
    color: var(--text-primary) !important;
}

.contact-card-name {
    color: #2563eb !important;
}

.contact-card-name:hover {
    color: #1d4ed8 !important;
}

.contact-card-details {
    color: var(--text-secondary) !important;
}

.contact-card-detail {
    background: rgba(100, 116, 139, 0.08) !important;
    border: 1px solid rgba(100, 116, 139, 0.2) !important;
    color: var(--text-secondary) !important;
}

.contact-card-detail-muted {
    background: transparent !important;
    border: none !important;
    color: var(--text-secondary) !important;
}

/* User Profile Card in Sidebar */
.user-profile-card {
    background: rgba(100, 116, 139, 0.06) !important;
    border: 1px solid rgba(100, 116, 139, 0.15) !important;
}

.user-profile-card:hover {
    background: rgba(100, 116, 139, 0.1) !important;
    border-color: rgba(100, 116, 139, 0.25) !important;
}

/* Conversations Thread Container */
#threadContainer {
    background: rgba(255, 255, 255, 0.7) !important;
    border-color: rgba(100, 116, 139, 0.2) !important;
}

#conversationsList {
    background: rgba(255, 255, 255, 0.9) !important;
    border-color: rgba(100, 116, 139, 0.2) !important;
}

#conversationsList .p-4 {
    background: rgba(255, 255, 255, 0.95) !important;
    border-color: rgba(100, 116, 139, 0.15) !important;
}

.attachment-chip {
    background-color: rgba(100, 116, 139, 0.1) !important;
    border: 1px solid rgba(100, 116, 139, 0.25) !important;
    color: var(--text-secondary) !important;
}

.attachment-chip button {
    background: rgba(100, 116, 139, 0.15) !important;
    color: var(--text-secondary) !important;
}

.attachment-chip button:hover {
    background: rgba(239, 68, 68, 0.3) !important;
}

/* Phone Dialer Elements */
#dialPadInput {
    background: transparent !important;
    color: var(--text-primary) !important;
}

.dialpad-btn {
    background: rgba(100, 116, 139, 0.1) !important;
    color: var(--text-primary) !important;
    border: 1px solid rgba(100, 116, 139, 0.2) !important;
}

.dialpad-btn:hover {
    background: rgba(100, 116, 139, 0.18) !important;
}

#recentCallsList {
    color: var(--text-secondary) !important;
}

#recentCallsList > div {
    background: rgba(100, 116, 139, 0.06) !important;
}

#recentCallsList > div:hover {
    background: rgba(100, 116, 139, 0.12) !important;
}

/* Filter Buttons (Projects page) */
.filter-btn {
    background: rgba(100, 116, 139, 0.08) !important;
    color: var(--text-secondary) !important;
    border: 1px solid rgba(100, 116, 139, 0.2) !important;
}

.filter-btn:hover {
    background: rgba(100, 116, 139, 0.15) !important;
    border-color: rgba(100, 116, 139, 0.35) !important;
    color: var(--text-primary) !important;
}

.filter-btn.active {
    background: var(--accent-solid) !important;
    color: white !important;
    border-color: var(--accent-solid) !important;
}

/* Opportunity List (Pipelines) */
.opportunity-list {
    color: var(--text-secondary) !important;
}

.opportunity-card {
    color: var(--text-primary) !important;
    background: rgba(255, 255, 255, 0.7) !important;
    border: 1px solid rgba(100, 116, 139, 0.2) !important;
    box-shadow: 0 4px 20px -8px rgba(0, 0, 0, 0.08) !important;
}

/* Override Tailwind dark classes with maximum specificity */
html .bg-slate-900\/50,
html .bg-slate-900 {
    background-color: rgba(241, 245, 249, 0.95) !important;
}

html .bg-slate-800,
html .bg-slate-800\/60 {
    background-color: rgba(226, 232, 240, 0.8) !important;
}

html .border-slate-800\/60,
html .border-slate-800 {
    border-color: rgba(100, 116, 139, 0.2) !important;
}

html .text-slate-100 {
    color: var(--text-primary) !important;
}

html .bg-gray-50 {
    background-color: rgba(255, 255, 255, 0.9) !important;
}

/* Transparent backgrounds stay transparent */
html .bg-transparent {
    background-color: transparent !important;
}

html .text-slate-400 {
    color: var(--text-secondary) !important;
}

/* Conversations List - Darken text */
#conversationListItems button {
    background-color: rgba(100, 116, 139, 0.05) !important;
}

#conversationListItems button:hover {
    background-color: rgba(100, 116, 139, 0.12) !important;
}

#conversationListItems button.selected,
#conversationListItems button[style*="selected"] {
    background-color: rgba(100, 116, 139, 0.15) !important;
}

#conversationListItems h4 {
    color: var(--text-primary) !important;
}

#conversationListItems h4:hover {
    color: var(--accent-solid) !important;
}

#conversationListItems .text-slate-500 {
    color: var(--text-secondary) !important;
}

#conversationListItems .text-slate-400 {
    color: var(--text-secondary) !important;
}

html .text-slate-300 {
    color: rgba(51, 65, 85, 0.9) !important;
}

html .text-slate-500 {
    color: var(--text-secondary) !important;
}

html .text-slate-600 {
    color: rgba(100, 116, 139, 0.8) !important;
}

html .text-slate-700 {
    color: var(--text-secondary) !important;
}

html .bg-slate-700 {
    background-color: rgba(203, 213, 225, 0.6) !important;
}

html .bg-slate-700\/50 {
    background-color: rgba(203, 213, 225, 0.3) !important;
}

/* Mobile Bottom Nav - Vibrant Blue Gradient */
#mobileBottomNav {
    background: linear-gradient(135deg, rgba(37, 99, 235, 0.95), rgba(14, 165, 233, 0.95)) !important;
    border-color: rgba(37, 99, 235, 0.5) !important;
}

#mobileBottomNav a {
    color: white !important;
}

#mobileBottomNav a:hover {
    color: rgba(255, 255, 255, 0.8) !important;
    text-shadow: 0 0 12px rgba(37, 99, 235, 0.6);
}

html .bg-slate-800\/40,
html .bg-slate-800\/50,
html .bg-slate-800\/30,
html .bg-slate-800\/60,
html .bg-slate-800\/70 {
    background-color: rgba(226, 232, 240, 0.6) !important;
}

html .bg-slate-900\/30,
html .bg-slate-900\/40,
html .bg-slate-900\/50,
html .bg-slate-900\/60,
html .bg-slate-900\/70 {
    background-color: rgba(241, 245, 249, 0.7) !important;
}

/* Override all grey backgrounds - use neutral slate */
html .bg-gray-100,
html .bg-gray-200,
html .bg-gray-300,
html .bg-gray-400,
html .bg-gray-500,
html .bg-gray-600,
html .bg-gray-700,
html .bg-gray-800,
html .bg-gray-900 {
    background-color: rgba(241, 245, 249, 0.8) !important;
}

html .bg-slate-600 {
    background-color: rgba(148, 163, 184, 0.4) !important;
}

html .border-gray-100,
html .border-gray-200,
html .border-gray-300,
html .border-gray-400,
html .border-gray-500 {
    border-color: rgba(100, 116, 139, 0.2) !important;
}

html .text-gray-100,
html .text-gray-200,
html .text-gray-300,
html .text-gray-400,
html .text-gray-500,
html .text-gray-600,
html .text-gray-700 {
    color: var(--text-secondary) !important;
}

/* Contact card name row specific override */
.contact-card-name-row {
    color: var(--text-primary) !important;
}

.contact-card-details {
    color: var(--text-secondary) !important;
}

html .text-cyan-100,
html .text-cyan-50,
html .text-cyan-400,
html .text-cyan-300,
html .text-cyan-200 {
    color: var(--text-primary) !important;
}

html .text-amber-200,
html .text-amber-100 {
    color: var(--text-primary) !important;
}

/* Gamify Top Trigger - Keep accent color for this interactive element */
.gamify-top-trigger {
    background: linear-gradient(135deg, var(--accent-solid), #0284c7) !important;
    border-color: rgba(14, 165, 233, 0.5) !important;
    color: white !important;
    box-shadow: 0 18px 35px -24px rgba(14, 165, 233, 0.6) !important;
}

.gamify-top-trigger:hover,
.gamify-top-trigger:focus-visible {
    background: linear-gradient(135deg, #0284c7, var(--accent-solid)) !important;
    box-shadow: 0 25px 40px -24px rgba(14, 165, 233, 0.8) !important;
}

.gamify-top-trigger-icon {
    filter: drop-shadow(0 0 8px rgba(14, 165, 233, 0.6)) !important;
}

/* Calendar Page - Dark text on light backgrounds */
#calendarContainer,
#monthView,
#weekView,
#dayView,
#listView {
    background-color: rgba(255, 255, 255, 0.9) !important;
}

#calendarContainer .text-slate-100,
#calendarContainer .text-slate-200,
#calendarContainer .text-slate-300,
#monthView .text-slate-100,
#monthView .text-slate-200,
#monthView .text-slate-300,
#weekView .text-slate-100,
#weekView .text-slate-200,
#weekView .text-slate-300,
#dayView .text-slate-100,
#dayView .text-slate-200,
#dayView .text-slate-300,
#listView .text-slate-100,
#listView .text-slate-200,
#listView .text-slate-300 {
    color: var(--text-primary) !important;
}

#calendarContainer .bg-slate-700,
#calendarContainer .bg-slate-700\/80,
#calendarContainer .bg-slate-800,
#calendarContainer .bg-slate-800\/30,
#monthView .bg-slate-700,
#monthView .bg-slate-700\/80,
#monthView .bg-slate-800,
#monthView .bg-slate-800\/30 {
    background-color: rgba(226, 232, 240, 0.6) !important;
}

#calendarContainer .border-slate-700,
#calendarContainer .border-slate-700\/30,
#monthView .border-slate-700,
#monthView .border-slate-700\/30,
#weekView .border-slate-700,
#dayView .border-slate-700,
#listView .border-slate-700 {
    border-color: rgba(100, 116, 139, 0.2) !important;
}

/* Settings Navigation - Card Styling */
/* Use class-based selector to catch ALL settings nav items including themes */
#settingsNavGrid .settings-nav-item {
    background: rgba(255, 255, 255, 0.9) !important;
    border: 1px solid rgba(100, 116, 139, 0.2) !important;
    color: var(--text-primary) !important;
}

#settingsNavGrid .settings-nav-item:hover {
    background: rgba(100, 116, 139, 0.1) !important;
    border-color: rgba(100, 116, 139, 0.3) !important;
}

/* Active/selected state (has ring class) */
#settingsNavGrid .settings-nav-item[class*="ring"] {
    background: rgba(14, 165, 233, 0.1) !important;
    border-color: var(--accent-solid) !important;
}

/* Message Bubble Overrides */
/* Outbound (your messages) - Vibrant Blue */
.bg-blue-900\/30 {
    background: linear-gradient(135deg, rgba(37, 99, 235, 0.95), rgba(14, 165, 233, 0.95)) !important;
    color: white !important;
}

.bg-blue-900\/30.border-blue-700\/40 {
    border-color: rgba(37, 99, 235, 0.5) !important;
}

html .bg-blue-900\/30 .text-blue-100,
html .bg-blue-900\/30.text-blue-100,
html .text-blue-100,
.glass-panel.bg-blue-900\/30.text-blue-100 {
    color: #ffffff !important;
}

/* Inbound (contact reply) - Dark Blue - scoped to messages only */
#messagesContainer .bg-slate-700\/30 {
    background: linear-gradient(135deg, rgba(15, 23, 42, 0.85), rgba(30, 41, 59, 0.85)) !important;
}

#messagesContainer .bg-slate-700\/30.border-slate-700\/60 {
    border-color: rgba(71, 85, 105, 0.4) !important;
}

#messagesContainer .bg-slate-700\/30 .text-slate-200,
#messagesContainer .bg-slate-700\/30.text-slate-200 {
    color: #ffffff !important;
}

/* Force white text on message bubbles */
#messagesContainer .text-slate-100,
#messagesContainer .text-slate-200,
#messagesContainer .text-blue-100 {
    color: #ffffff !important;
}

/* Badge/Pill Accessibility - Dark text on light backgrounds */
/* Override light text colors from theme.css badge classes */
.badge-green {
    background: rgba(16, 185, 129, 0.25) !important;
    color: #047857 !important;
}

.badge-blue {
    background: rgba(37, 99, 235, 0.25) !important;
    color: #1e40af !important;
}

.badge-red {
    background: rgba(239, 68, 68, 0.25) !important;
    color: #991b1b !important;
}

.badge-yellow {
    background: rgba(234, 179, 8, 0.25) !important;
    color: #92400e !important;
}

.badge-purple {
    background: rgba(168, 85, 247, 0.25) !important;
    color: #6b21a8 !important;
}

.badge-slate {
    background: rgba(100, 116, 139, 0.25) !important;
    color: #334155 !important;
}

.badge-amber {
    background: rgba(245, 158, 11, 0.25) !important;
    color: #92400e !important;
}

.badge-cyan {
    background: rgba(6, 182, 212, 0.25) !important;
    color: #0e7490 !important;
}

.badge-gold {
    background: rgba(234, 179, 8, 0.3) !important;
    color: #78350f !important;
}

/* Meta pill styling for light theme */
.meta-pill {
    background: rgba(100, 116, 139, 0.1) !important;
    color: var(--text-secondary) !important;
}

/* Status badges with inline Tailwind classes */
.bg-green-500\/20,
.bg-green-500\/30 {
    background: rgba(16, 185, 129, 0.2) !important;
}

.bg-green-500\/20 .text-green-200,
.bg-green-500\/30 .text-green-200,
.text-green-200,
.text-green-300,
.text-green-400 {
    color: #047857 !important;
}

.bg-blue-500\/20,
.bg-blue-500\/30 {
    background: rgba(37, 99, 235, 0.2) !important;
}

.bg-blue-500\/20 .text-blue-200,
.bg-blue-500\/30 .text-blue-200,
.text-blue-200,
.text-blue-300 {
    color: #1e40af !important;
}

.bg-red-500\/20,
.bg-red-500\/30 {
    background: rgba(239, 68, 68, 0.2) !important;
}

.bg-red-500\/20 .text-red-200,
.bg-red-500\/30 .text-red-200,
.text-red-200,
.text-red-300 {
    color: #991b1b !important;
}

.bg-yellow-500\/20,
.bg-yellow-500\/30,
.bg-amber-500\/20 {
    background: rgba(234, 179, 8, 0.2) !important;
}

.bg-yellow-500\/20 .text-yellow-200,
.bg-yellow-500\/30 .text-yellow-200,
.text-yellow-200,
.text-amber-200 {
    color: #92400e !important;
}

.bg-purple-500\/20,
.bg-purple-500\/30 {
    background: rgba(168, 85, 247, 0.2) !important;
}

.bg-purple-500\/20 .text-purple-200,
.bg-purple-500\/30 .text-purple-200,
.text-purple-200,
.text-purple-300 {
    color: #6b21a8 !important;
}

/* Timeclock and other areas with light backgrounds need dark text */
/* bg-slate-700/800 become light blue in light theme, so text needs to be dark */
.bg-slate-700 > .text-slate-200,
.bg-slate-800 > .text-slate-200,
.bg-slate-700 .text-slate-200:not(.glass-panel *),
.bg-slate-800 .text-slate-200:not(.glass-panel *),
#myTimeclockEntries .text-slate-200,
#myTimeclockSummary .text-slate-200,
#teamTimeclockEntries .text-slate-200 {
    color: var(--text-primary) !important;
}

/* Stat cards have light backgrounds in light theme - need dark text */
.stat-card-themed .text-white {
    color: var(--text-primary) !important;
}

.stat-card-themed .text-slate-300 {
    color: var(--text-secondary) !important;
}

/* Timeclock weekly breakdown cards */
#weeklyTallyCards .text-white {
    color: var(--text-primary) !important;
}

#weeklyTallyCards .text-slate-200,
#weeklyTallyCards .text-slate-300,
#weeklyTallyCards .text-slate-400 {
    color: var(--text-secondary) !important;
}

/* Workflow trigger/status pills */
.badge.text-xs {
    color: inherit !important;
}

/* Global Admin Settings Navigation - Amber styling */
#globalAdminSettings a,
#globalAdminSettings .global-admin-nav-item,
html #globalAdminSettings a.global-admin-nav-item {
    background-color: rgba(245, 158, 11, 0.2) !important;
    border: 1px solid rgba(245, 158, 11, 0.3) !important;
    color: #b45309 !important;
}

#globalAdminSettings a:hover,
#globalAdminSettings .global-admin-nav-item:hover,
html #globalAdminSettings a.global-admin-nav-item:hover {
    background-color: rgba(245, 158, 11, 0.3) !important;
    border-color: rgba(245, 158, 11, 0.5) !important;
}

/* Form inputs inside cards - override Tailwind dark colors for light theme */
.card input[type="text"],
.card input[type="email"],
.card input[type="password"],
.card input[type="search"],
.card input[type="number"],
.card input[type="tel"],
.card input[type="url"],
.card input[type="date"],
.card input[type="datetime-local"],
.card input[type="time"],
.card select,
.card textarea {
    background: rgba(255, 255, 255, 0.95) !important;
    border-color: rgba(100, 116, 139, 0.2) !important;
    color: var(--text-primary) !important;
}

.card input::placeholder,
.card textarea::placeholder {
    color: var(--text-secondary) !important;
}

.card input:focus,
.card select:focus,
.card textarea:focus {
    border-color: var(--accent-solid) !important;
    box-shadow: 0 0 0 3px rgba(14, 165, 233, 0.12) !important;
    background: #ffffff !important;
}

.card select option {
    background: #ffffff;
    color: var(--text-primary);
}

/* Modal form inputs - for modals using bg-slate-800 */
[class*="bg-slate-800"] input[type="text"],
[class*="bg-slate-800"] input[type="email"],
[class*="bg-slate-800"] input[type="password"],
[class*="bg-slate-800"] input[type="search"],
[class*="bg-slate-800"] input[type="number"],
[class*="bg-slate-800"] input[type="datetime-local"],
[class*="bg-slate-800"] select,
[class*="bg-slate-800"] textarea {
    background: rgba(255, 255, 255, 0.95) !important;
    border-color: rgba(100, 116, 139, 0.2) !important;
    color: var(--text-primary) !important;
}

[class*="bg-slate-800"] input::placeholder,
[class*="bg-slate-800"] textarea::placeholder {
    color: var(--text-secondary) !important;
}

/* Modal headers and text */
[class*="bg-slate-800"] h2,
[class*="bg-slate-800"] h3,
[class*="bg-slate-800"] label {
    color: var(--text-primary) !important;
}

[class*="bg-slate-800"] .text-slate-100,
[class*="bg-slate-800"] .text-slate-200,
[class*="bg-slate-800"] .text-slate-300 {
    color: var(--text-primary) !important;
}

/* Modal/dialog panel backgrounds */
.fixed.inset-0 > [class*="bg-slate-800"] {
    background: rgba(255, 255, 255, 0.98) !important;
    border: 1px solid rgba(100, 116, 139, 0.2) !important;
    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.15) !important;
}

/* Secondary buttons in modals */
[class*="bg-slate-700"].rounded-lg {
    background: rgba(100, 116, 139, 0.1) !important;
    color: var(--text-primary) !important;
}

[class*="bg-slate-700"].rounded-lg:hover {
    background: rgba(100, 116, 139, 0.18) !important;
}

/* Dividers */
.divide-slate-700 > * + * {
    border-color: rgba(100, 116, 139, 0.15) !important;
}

.border-t.border-slate-700 {
    border-color: rgba(100, 116, 139, 0.15) !important;
}

.border-b.border-slate-700 {
    border-color: rgba(100, 116, 139, 0.15) !important;
}

/* Quill Editor - Light Theme Overrides */
.ql-container {
    background: rgba(255, 255, 255, 0.95) !important;
    border-color: rgba(100, 116, 139, 0.2) !important;
    color: var(--text-primary) !important;
}

.ql-editor {
    color: var(--text-primary) !important;
}

.ql-editor.ql-blank::before {
    color: var(--text-secondary) !important;
    font-style: italic;
}

.ql-toolbar {
    background: rgba(255, 255, 255, 0.9) !important;
    border-color: rgba(100, 116, 139, 0.2) !important;
}

.ql-toolbar .ql-stroke {
    stroke: var(--text-secondary) !important;
}

.ql-toolbar .ql-fill {
    fill: var(--text-secondary) !important;
}

.ql-toolbar .ql-picker {
    color: var(--text-secondary) !important;
}

.ql-toolbar .ql-picker-options {
    background: #ffffff !important;
    border-color: rgba(100, 116, 139, 0.2) !important;
}

.ql-toolbar .ql-picker-options .ql-picker-item {
    color: var(--text-primary) !important;
}

.ql-toolbar button:hover .ql-stroke,
.ql-toolbar button.ql-active .ql-stroke {
    stroke: #2563eb !important;
}

.ql-toolbar button:hover .ql-fill,
.ql-toolbar button.ql-active .ql-fill {
    fill: #2563eb !important;
}

.ql-toolbar .ql-picker-label:hover,
.ql-toolbar .ql-picker-label.ql-active {
    color: #2563eb !important;
}

/* Quill snow theme border overrides */
.ql-snow.ql-toolbar {
    border-color: rgba(100, 116, 139, 0.2) !important;
}

.ql-snow .ql-picker-label {
    color: var(--text-secondary) !important;
}

.ql-snow .ql-picker-label:hover {
    color: #2563eb !important;
}

/* Settings Navigation Icons - ensure proper color on light theme */
#settingsNavGrid .settings-nav-item svg,
#settingsNavGrid a svg {
    color: currentColor !important;
}

/* Settings page colored cards - darker text for light theme */
/* Blue card (Update App) */
.card.bg-blue-500\/10 .text-blue-300,
.card.bg-blue-500\/10 h3.text-blue-300 {
    color: #1e40af !important;
}

.card.bg-blue-500\/10 .text-blue-200\/70,
.card.bg-blue-500\/10 p {
    color: #1e40af !important;
    opacity: 0.8;
}

/* Amber card (Clear Cache) */
.card.bg-amber-500\/10 .text-amber-300,
.card.bg-amber-500\/10 h3.text-amber-300 {
    color: #b45309 !important;
}

.card.bg-amber-500\/10 .text-amber-200\/70,
.card.bg-amber-500\/10 p {
    color: #b45309 !important;
    opacity: 0.8;
}

/* Account Settings / Notification Preferences - Light theme overrides */
/* Category containers */
.card .bg-slate-800\/20,
.card .bg-slate-800\/40 {
    background: rgba(255, 255, 255, 0.7) !important;
    border-color: rgba(100, 116, 139, 0.15) !important;
}

/* Notification toggle rows */
.card .hover\:bg-slate-700\/20:hover {
    background: rgba(100, 116, 139, 0.08) !important;
}

/* Category headers and text */
.card .text-slate-200,
.card h3.text-slate-200,
.card h4.text-slate-200 {
    color: var(--text-primary) !important;
}

.card .text-slate-300 {
    color: var(--text-primary) !important;
}

/* Toggle switch backgrounds */
.card .bg-slate-700 {
    background: rgba(148, 163, 184, 0.35) !important;
}

/* Info/status boxes */
.bg-slate-800\/40.rounded-lg,
.rounded-lg.bg-slate-800\/40 {
    background: rgba(255, 255, 255, 0.7) !important;
}

/* Border fixes for notification containers */
.border-slate-700\/40 {
    border-color: rgba(100, 116, 139, 0.2) !important;
}

/* Dropdown menus - Light theme overrides */
/* Timeclock team member filter dropdown and similar dropdowns */
#teamMemberFilterDropdown,
.absolute.bg-slate-800,
div[class*="absolute"][class*="bg-slate-800"] {
    background: rgba(255, 255, 255, 0.98) !important;
    border-color: rgba(100, 116, 139, 0.2) !important;
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1) !important;
}

#teamMemberFilterDropdown > div,
#teamMemberFilterDropdown .text-slate-200 {
    color: var(--text-primary) !important;
}

#teamMemberFilterDropdown > div:hover,
#teamMemberFilterDropdown .hover\:bg-slate-700:hover {
    background: rgba(100, 116, 139, 0.1) !important;
}

#teamMemberFilterDropdown .border-slate-700,
#teamMemberFilterDropdown .border-b {
    border-color: rgba(100, 116, 139, 0.15) !important;
}

#teamMemberFilterDropdown .text-slate-400 {
    color: var(--text-secondary) !important;
}

/* Search dropdowns - Tasks page and similar */
#assigneeDropdown,
#contactDropdown,
.bg-slate-900[class*="absolute"],
div.absolute.bg-slate-900 {
    background: rgba(255, 255, 255, 0.98) !important;
    border-color: rgba(100, 116, 139, 0.2) !important;
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1) !important;
    z-index: 50 !important;
}

#assigneeDropdown > div,
#contactDropdown > div {
    color: var(--text-primary) !important;
    border-color: rgba(100, 116, 139, 0.15) !important;
}

#assigneeDropdown > div:hover,
#contactDropdown > div:hover {
    background: rgba(100, 116, 139, 0.1) !important;
}

#assigneeDropdown .text-slate-100,
#contactDropdown .text-slate-100 {
    color: var(--text-primary) !important;
}

#assigneeDropdown .text-slate-400,
#contactDropdown .text-slate-400 {
    color: var(--text-secondary) !important;
}

/* Email Mode Styles - Light Theme */
#emailModeBar {
    background: linear-gradient(135deg, rgba(241, 245, 249, 0.9), rgba(226, 232, 240, 0.8)) !important;
    border-bottom: 1px solid rgba(100, 116, 139, 0.2) !important;
}

#emailModeBar .text-slate-100,
#emailModeBar .text-slate-300,
#emailModeBar .text-slate-400 {
    color: var(--text-primary) !important;
}

.email-message-card {
    background: rgba(255, 255, 255, 0.95) !important;
    border: 1px solid rgba(100, 116, 139, 0.2) !important;
}

.email-message-card .email-header {
    background: rgba(241, 245, 249, 0.8) !important;
    border-bottom: 1px solid rgba(100, 116, 139, 0.15) !important;
}

.email-message-card .email-body {
    color: var(--text-primary) !important;
}

.email-message-card .email-sender-name {
    color: var(--text-primary) !important;
}

.email-message-card .email-meta {
    color: var(--text-secondary) !important;
}

.email-message-card .email-subject-text {
    color: var(--text-primary) !important;
}

.email-message-card .email-actions {
    background: rgba(241, 245, 249, 0.6) !important;
    border-top: 1px solid rgba(100, 116, 139, 0.1) !important;
}

.email-message-card.outbound {
    border-left: 3px solid #2563eb !important;
}

.email-message-card.inbound {
    border-left: 3px solid #64748b !important;
}

/* Email thread list - Light Theme */
.email-thread-item {
    background: transparent;
}

.email-thread-item:hover {
    background: rgba(100, 116, 139, 0.08) !important;
}

.email-thread-item.selected {
    background: rgba(100, 116, 139, 0.15) !important;
    border-left-color: var(--accent-solid) !important;
}

.email-thread-item.unread {
    background: rgba(100, 116, 139, 0.08) !important;
}

.email-thread-item .email-sender {
    color: var(--text-primary) !important;
}

.email-thread-item .email-subject {
    color: var(--text-secondary) !important;
}

.email-thread-item .email-preview {
    color: var(--text-muted) !important;
}

/* Email compose box - Light Theme */
#emailComposeBox {
    background: rgba(255, 255, 255, 0.95) !important;
}

#emailComposeBox .border-slate-700 {
    border-color: rgba(100, 116, 139, 0.2) !important;
}

#emailComposeBox .text-slate-100 {
    color: var(--text-primary) !important;
}

#emailComposeBox .text-slate-400 {
    color: var(--text-secondary) !important;
}

/* Messages container background in email mode */
#messagesContainer.bg-gray-50 {
    background: rgba(248, 250, 252, 0.95) !important;
}

/* Dashboard widget modal styles for light theme */
.dashboard-widget-option {
    background: rgba(255, 255, 255, 0.92);
    border-color: rgba(15, 23, 42, 0.12);
}

.dashboard-widget-status.is-on {
    color: #0d9488;
}

.dashboard-widget-status.is-off {
    color: rgba(71, 85, 105, 0.85);
}

.dashboard-widget-switch {
    background: rgba(148, 163, 184, 0.4);
}

.dashboard-widget-switch::after {
    background: rgba(15, 23, 42, 0.8);
}

/* ============================================
   Select/Dropdown Styling - Light Theme
   Ensure proper text visibility
   ============================================ */
select {
    color: var(--text-primary) !important;
    background-color: var(--bg-elevated) !important;
}

select option {
    color: #0f172a !important;
    background-color: #ffffff !important;
    padding: 0.5rem;
}

select option:checked {
    background-color: rgba(14, 165, 233, 0.15) !important;
}

/* ============================================
   Currency Input Wrapper - Light Theme
   ============================================ */
.currency-input-wrapper .currency-symbol {
    color: var(--text-secondary);
}

/* ============================================
   Wizard Components - Light Theme
   Setup wizard, industry selection, etc.
   ============================================ */
.wizard-step {
    background: rgba(255, 255, 255, 0.95) !important;
}

.wizard-industry-section {
    background: rgba(255, 255, 255, 0.95) !important;
    border-radius: 1rem;
}

.wizard-industry-title {
    color: var(--text-primary) !important;
}

.wizard-industry-subtitle {
    color: var(--text-secondary) !important;
}

.industry-option {
    background: rgba(255, 255, 255, 0.9) !important;
    color: var(--text-primary) !important;
}

.industry-option:hover {
    background: rgba(241, 245, 249, 0.95) !important;
}

.industry-option .text-secondary {
    color: var(--text-secondary) !important;
}

/* Wizard hero section */
.wizard-hero-content {
    color: var(--text-primary) !important;
}

.wizard-hero-title {
    color: var(--text-primary) !important;
}

.wizard-hero-subtitle {
    color: var(--text-secondary) !important;
}

.wizard-hero-badge {
    background: rgba(100, 116, 139, 0.1) !important;
    color: var(--text-secondary) !important;
    border: 1px solid rgba(100, 116, 139, 0.2) !important;
}

/* ============================================
   Info Panels / Alert Boxes - Light Theme
   ============================================ */
.info-panel,
.alert-info,
[class*="bg-cyan-500/10"],
[class*="bg-cyan-500/20"],
[class*="bg-blue-500/10"] {
    background: rgba(14, 165, 233, 0.1) !important;
    color: var(--text-primary) !important;
}

.info-panel .text-cyan-100,
.info-panel .text-cyan-200,
.info-panel .text-cyan-300 {
    color: #0e7490 !important;
}

/* ============================================
   Navigation Menu Items - Light Theme
   Website builder nav menu items
   ============================================ */
.nav-menu-item {
    background: rgba(255, 255, 255, 0.9) !important;
    border-color: rgba(100, 116, 139, 0.2) !important;
    color: var(--text-primary) !important;
}

.nav-menu-item:hover {
    background: rgba(241, 245, 249, 0.95) !important;
    border-color: rgba(100, 116, 139, 0.35) !important;
}

.nav-menu-item .text-slate-200,
.nav-menu-item .text-slate-300 {
    color: var(--text-primary) !important;
}

.nav-menu-item .text-slate-400,
.nav-menu-item .text-slate-500 {
    color: var(--text-secondary) !important;
}

/* Section items in page sections */
.section-item {
    background: rgba(255, 255, 255, 0.9) !important;
    border-color: rgba(100, 116, 139, 0.2) !important;
    color: var(--text-primary) !important;
}

.section-item:hover {
    background: rgba(241, 245, 249, 0.95) !important;
    border-color: rgba(100, 116, 139, 0.35) !important;
}

/* ============================================
   Tab-like pill navigation - Light Theme
   ============================================ */
.bg-slate-800\/50 {
    background: rgba(241, 245, 249, 0.9) !important;
}

.bg-slate-800\/30 {
    background: rgba(241, 245, 249, 0.7) !important;
}

.bg-slate-800\/40 {
    background: rgba(241, 245, 249, 0.8) !important;
}

.bg-slate-800\/60 {
    background: rgba(226, 232, 240, 0.8) !important;
}

.bg-slate-800\/70 {
    background: rgba(226, 232, 240, 0.85) !important;
}

.bg-slate-900\/50 {
    background: rgba(241, 245, 249, 0.9) !important;
}

.bg-slate-900\/30 {
    background: rgba(248, 250, 252, 0.8) !important;
}

.bg-slate-900\/40 {
    background: rgba(248, 250, 252, 0.85) !important;
}

.bg-slate-900\/60 {
    background: rgba(241, 245, 249, 0.9) !important;
}

.bg-slate-900\/70 {
    background: rgba(241, 245, 249, 0.92) !important;
}

/* ============================================
   Stat Cards - Light Theme
   Dashboard stats, ratings stats, etc.
   ============================================ */
.stat-card,
#statsContainer .card {
    background: rgba(255, 255, 255, 0.95) !important;
}

.stat-card .text-white,
#statsContainer .card .text-white {
    color: var(--text-primary) !important;
}

.stat-card .text-slate-300,
#statsContainer .card .text-slate-300 {
    color: var(--text-secondary) !important;
}

/* ============================================
   Modal Panels with Dark Backgrounds - Light
   ============================================ */
.bg-slate-800.rounded-xl,
.bg-slate-900.rounded-xl,
div.bg-slate-800[class*="rounded"],
div.bg-slate-900[class*="rounded"] {
    background: rgba(255, 255, 255, 0.98) !important;
    border: 1px solid rgba(100, 116, 139, 0.2) !important;
    color: var(--text-primary) !important;
}

/* Ensure modal text is dark */
.bg-slate-800.rounded-xl .text-white,
.bg-slate-900.rounded-xl .text-white,
.bg-slate-800.rounded-xl h2,
.bg-slate-800.rounded-xl h3,
.bg-slate-900.rounded-xl h2,
.bg-slate-900.rounded-xl h3 {
    color: var(--text-primary) !important;
}

/* ============================================
   Preview Containers - Light Theme
   ============================================ */
#previewContainer.bg-slate-900 {
    background: rgba(248, 250, 252, 0.95) !important;
    border: 1px solid rgba(100, 116, 139, 0.2) !important;
}

/* ============================================
   Checkbox/Radio Containers - Light Theme
   ============================================ */
#locationsCheckboxes.bg-slate-800,
.bg-slate-800.rounded-lg.p-4 {
    background: rgba(248, 250, 252, 0.95) !important;
    border-color: rgba(100, 116, 139, 0.2) !important;
}

/* ============================================
   Selected Contact Pills - Light Theme
   ============================================ */
#selectedContact.bg-slate-800 {
    background: rgba(241, 245, 249, 0.95) !important;
    border: 1px solid rgba(100, 116, 139, 0.2) !important;
    color: var(--text-primary) !important;
}

/* ============================================
   Toggle Switches - Light Theme
   ============================================ */
.bg-slate-700 {
    background: rgba(148, 163, 184, 0.35) !important;
}

button.bg-slate-700,
[type="button"].bg-slate-700 {
    background: rgba(148, 163, 184, 0.3) !important;
    border: 1px solid rgba(100, 116, 139, 0.2) !important;
}

button.bg-slate-700:hover,
[type="button"].bg-slate-700:hover {
    background: rgba(148, 163, 184, 0.45) !important;
}

/* Toggle knobs */
.bg-slate-900\/70 {
    background: rgba(51, 65, 85, 0.7) !important;
}

/* Toggle switch tracks - need visible background */
.w-11.h-6.bg-slate-700.rounded-full,
div.bg-slate-700.rounded-full.peer,
.peer.bg-slate-700 {
    background: rgba(100, 116, 139, 0.35) !important;
    border: 1px solid rgba(100, 116, 139, 0.25) !important;
}

/* Toggle switch knobs - ensure white with shadow for visibility */
.w-5.h-5.bg-white.rounded-full,
.absolute.bg-white.rounded-full,
div.absolute.bg-white.rounded-full.transition-transform {
    background: #ffffff !important;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.25), 0 0 0 1px rgba(0, 0, 0, 0.08) !important;
    z-index: 1;
}

/* ============================================
   Progress Bars - Light Theme
   ============================================ */
.bg-slate-700.rounded-full,
.bg-slate-700.rounded-full.h-2,
.bg-slate-700.rounded-full.h-3 {
    background: rgba(203, 213, 225, 0.6) !important;
}

/* ============================================
   Skeleton Loaders - Light Theme
   ============================================ */
.bg-slate-700.rounded,
.h-4.bg-slate-700,
.h-6.bg-slate-700,
.h-10.bg-slate-700,
.h-48.bg-slate-700 {
    background: rgba(203, 213, 225, 0.5) !important;
}

/* ============================================
   AI Credits / Admin Panels - Light Theme
   ============================================ */
.bg-slate-800\/50.rounded-lg,
div[class*="bg-slate-800/50"][class*="rounded"] {
    background: rgba(241, 245, 249, 0.9) !important;
    border: 1px solid rgba(100, 116, 139, 0.15) !important;
}

.bg-slate-700\/50.rounded-lg,
div[class*="bg-slate-700/50"][class*="rounded"] {
    background: rgba(248, 250, 252, 0.9) !important;
    border: 1px solid rgba(100, 116, 139, 0.15) !important;
}

/* ============================================
   Table Headers - Light Theme
   ============================================ */
thead.bg-slate-700\/50,
.bg-slate-700\/50 th {
    background: rgba(241, 245, 249, 0.9) !important;
    color: var(--text-primary) !important;
}

/* ============================================
   Hover States - Light Theme
   ============================================ */
.hover\:bg-slate-700:hover {
    background: rgba(203, 213, 225, 0.4) !important;
}

.hover\:bg-slate-800:hover {
    background: rgba(226, 232, 240, 0.6) !important;
}

.hover\:bg-slate-800\/50:hover {
    background: rgba(241, 245, 249, 0.8) !important;
}

/* ============================================
   Border Colors - Light Theme
   ============================================ */
.border-slate-600 {
    border-color: rgba(100, 116, 139, 0.25) !important;
}

.border-slate-700\/50,
.border-slate-700\/30,
.border-slate-700\/80 {
    border-color: rgba(100, 116, 139, 0.2) !important;
}

/* ============================================
   Color Pickers / Input Accents - Light Theme
   ============================================ */
input[type="color"].bg-slate-700 {
    background: rgba(241, 245, 249, 0.95) !important;
    border: 1px solid rgba(100, 116, 139, 0.25) !important;
}

/* ============================================
   Plan Cards / Pricing - Light Theme
   ============================================ */
.p-4.bg-slate-800,
div.p-4[class*="bg-slate-800"][class*="border"] {
    background: rgba(255, 255, 255, 0.95) !important;
    border-color: rgba(100, 116, 139, 0.2) !important;
}

.bg-slate-700.text-slate-400 {
    background: rgba(148, 163, 184, 0.25) !important;
    color: var(--text-secondary) !important;
}

/* ============================================
   Gradient Stat Cards - Light Theme
   Support tickets and similar fancy stat cards
   MUST override theme.css gradient variables
   ============================================ */

/* Override gradient CSS variables from theme.css */
.from-slate-800\/60,
[class*="from-slate-800"] {
    --tw-gradient-from: rgba(241, 245, 249, 0.95) !important;
}

.to-slate-900\/60,
[class*="to-slate-900"] {
    --tw-gradient-to: rgba(255, 255, 255, 0.95) !important;
}

/* Override the entire gradient background */
.bg-gradient-to-b.from-slate-800\/60,
.bg-gradient-to-b[class*="from-slate-800"],
[class*="bg-gradient-to-b"][class*="from-slate-800"],
[class*="bg-gradient-to-b"][class*="from-slate-900"],
#statsContainer > div,
#statsContainer .group {
    background: rgba(255, 255, 255, 0.98) !important;
    background-image: none !important;
    border: 1px solid rgba(100, 116, 139, 0.2) !important;
}

/* Override theme.css stat card specific selectors */
.stat-card,
#statsContainer > div,
#statsCards > div {
    background: #ffffff !important;
    background-image: none !important;
    border: 1px solid rgba(100, 116, 139, 0.2) !important;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.06) !important;
}

/* Override the white/5 borders to be visible in light theme */
.border-white\/5,
.ring-white\/5 {
    border-color: rgba(100, 116, 139, 0.15) !important;
    --tw-ring-color: rgba(100, 116, 139, 0.15) !important;
}

/* Stat card text in gradient cards */
[class*="from-slate-800"] .text-white,
[class*="from-slate-900"] .text-white,
#statsContainer .text-white {
    color: var(--text-primary) !important;
}

[class*="from-slate-800"] .text-slate-500,
[class*="from-slate-900"] .text-slate-500,
#statsContainer .text-slate-500 {
    color: var(--text-secondary) !important;
}

/* Hover shadows - make them subtle in light theme */
.hover\:shadow-\[0_0_20px_rgba\(59\,130\,246\,0\.3\)\]:hover,
.hover\:shadow-\[0_0_20px_rgba\(234\,179\,8\,0\.3\)\]:hover,
.hover\:shadow-\[0_0_20px_rgba\(249\,115\,22\,0\.3\)\]:hover {
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1) !important;
}

/* Gradient overlays inside stat cards - hide in light theme */
[class*="from-slate-800"] .absolute.bg-gradient-to-br,
[class*="from-slate-900"] .absolute.bg-gradient-to-br,
#statsContainer .absolute.bg-gradient-to-br {
    opacity: 0 !important;
}

/* ============================================
   Form Inputs with bg-slate-700 - Light Theme
   ============================================ */
input.bg-slate-700,
select.bg-slate-700,
textarea.bg-slate-700,
.bg-slate-700.border.border-slate-600 {
    background: rgba(255, 255, 255, 0.95) !important;
    border-color: rgba(100, 116, 139, 0.25) !important;
    color: var(--text-primary) !important;
}

input.bg-slate-700::placeholder,
textarea.bg-slate-700::placeholder {
    color: var(--text-secondary) !important;
}

input.bg-slate-700:focus,
select.bg-slate-700:focus,
textarea.bg-slate-700:focus {
    border-color: var(--accent-solid) !important;
    box-shadow: 0 0 0 3px rgba(14, 165, 233, 0.15) !important;
}

/* ============================================
   Table Headers (standalone) - Light Theme
   ============================================ */
thead.bg-slate-800 {
    background: rgba(241, 245, 249, 0.95) !important;
}

thead.bg-slate-800 th {
    color: var(--text-secondary) !important;
}

/* ============================================
   Card Internal Text - Light Theme
   Force dark text for light-colored text inside cards
   ============================================ */
.card .text-slate-100,
.card .text-2xl.text-slate-100,
.card .font-bold.text-slate-100,
.card .font-semibold.text-slate-100 {
    color: var(--text-primary) !important;
}

.card .text-slate-300,
.card .text-sm.text-slate-300,
.card .font-medium.text-slate-300 {
    color: var(--text-primary) !important;
}

.card .text-slate-400,
.card .text-sm.text-slate-400,
.card .text-xs.text-slate-400 {
    color: var(--text-secondary) !important;
}

.card .text-slate-500 {
    color: var(--text-muted) !important;
}

/* Keep colored text for status indicators */
.card .text-red-400 {
    color: #f87171 !important;
}

.card .text-green-400,
.card .text-emerald-400 {
    color: #34d399 !important;
}

.card .text-cyan-400 {
    color: #22d3ee !important;
}

/* ============================================
   Tab Buttons - Light Theme
   ============================================ */
.tab-btn {
    color: var(--text-secondary) !important;
}

.tab-btn:hover {
    color: var(--text-primary) !important;
}

.tab-btn.active {
    color: var(--accent-solid) !important;
    border-bottom-color: var(--accent-solid) !important;
}

/* Tab container borders */
.border-slate-700\/40 {
    border-color: rgba(100, 116, 139, 0.2) !important;
}

/* ============================================
   Table Rows - Light Theme
   ============================================ */
.divide-slate-700 > * + * {
    border-color: rgba(100, 116, 139, 0.15) !important;
}

tr.border-b.border-slate-700\/20,
.border-slate-700\/20 {
    border-color: rgba(100, 116, 139, 0.15) !important;
}

tr.hover\:bg-slate-800\/30:hover {
    background: rgba(241, 245, 249, 0.7) !important;
}

/* ============================================
   Invoice Builder Dropdowns - Light Theme
   ============================================ */
#contactDropdown.bg-slate-800,
#productDropdown.bg-slate-800,
#paymentTermsDropdown.bg-slate-800,
#discountTypeDropdown.bg-slate-800,
#paymentGatewayDropdown.bg-slate-800 {
    background: rgba(255, 255, 255, 0.98) !important;
    border-color: rgba(100, 116, 139, 0.25) !important;
}

/* Invoice builder inputs */
.bg-slate-800\/40,
.bg-slate-800\/60 {
    background: rgba(255, 255, 255, 0.9) !important;
}

input.bg-slate-800\/40,
input.bg-slate-800\/60 {
    background: rgba(255, 255, 255, 0.95) !important;
    color: var(--text-primary) !important;
}

/* Invoice builder buttons */
.bg-slate-800.hover\:bg-slate-700 {
    background: rgba(241, 245, 249, 0.95) !important;
    color: var(--text-secondary) !important;
}

.bg-slate-800.hover\:bg-slate-700:hover {
    background: rgba(226, 232, 240, 0.95) !important;
    color: var(--text-primary) !important;
}