/* ============================================================ 
   DOCUGEN THEME SYSTEM (Indigo & Slate)
   Handles Dark/Light mode visibility for all text and UI
   ============================================================ */

:root {
    /* DEFAULT THEME (Dark Mode - Indigo/Slate) */
    --bg-primary: #020617;
    /* Slate-950 */
    --bg-secondary: #0f172a;
    /* Slate-900 */
    --bg-tertiary: #1e293b;
    /* Slate-800 */
    --text-primary: #ffffff;
    /* White-ish */
    --text-secondary: #94a3b8;
    /* Slate-400 */
    --text-accent: #6366f1;
    /* Indigo-500 */
    --border-color: rgba(148, 163, 184, 0.1);
    --shadow: 0 10px 30px rgba(0, 0, 0, 0.5);
    --glass-bg: rgba(15, 23, 42, 0.8);
    --glass-border: rgba(255, 255, 255, 0.05);
}

/* OVERRIDE FOR LIGHT MODE - ENHANCED */
body.light-theme {
    /* Enhanced base colors with subtle gradients */
    --bg-primary: #ffffff;
    --bg-secondary: #fefcfb;
    --bg-tertiary: #f8fafc;
    --text-primary: #0f172a;
    --text-secondary: #475569;
    --text-accent: #4f46e5;

    /* Vibrant accent colors for contextual zones */
    --accent-primary: #4f46e5;
    /* Indigo */
    --accent-coral: #ff6b6b;
    /* Coral for CTAs */
    --accent-teal: #14b8a6;
    /* Teal for success */
    --accent-amber: #f59e0b;
    /* Amber for highlights */
    --accent-purple: #a855f7;
    /* Purple for premium */

    /* Soft shadows for depth - multi-level system */
    --shadow-sm: 0 2px 8px rgba(79, 70, 229, 0.08);
    --shadow-md: 0 4px 16px rgba(79, 70, 229, 0.12);
    --shadow-lg: 0 8px 32px rgba(79, 70, 229, 0.16);
    --shadow-xl: 0 12px 48px rgba(79, 70, 229, 0.20);
    --shadow: var(--shadow-md);

    /* Border colors with subtle tints */
    --border-color: rgba(79, 70, 229, 0.12);
    --border-light: rgba(79, 70, 229, 0.08);
    --border-accent: rgba(79, 70, 229, 0.24);

    /* Glassmorphism effects */
    --glass-bg: rgba(255, 255, 255, 0.85);
    --glass-border: rgba(79, 70, 229, 0.15);
    --glass-blur: blur(12px);

    /* Remove dark gradients but add subtle light background */
    background: linear-gradient(135deg, #ffffff 0%, #f0f9ff 100%) !important;
    background-attachment: fixed !important;
}

/* ========================================
   1. GLOBAL VISIBILITY OVERRIDES
   Ensures text is always visible regardless of hardcoded styles
   ======================================== */

/* Base background transitions */
body {
    background-color: var(--bg-primary) !important;
    color: var(--text-primary) !important;
    transition: background-color 0.3s ease, color 0.3s ease, background-image 0.3s ease;
}

/* Heading Visibility */
h1,
h2,
h3,
h4,
h5,
h6 {
    color: var(--text-primary) !important;
    letter-spacing: -0.025em;
}

/* General Text Visibility */
p,
span,
li,
td,
th,
label,
div:not(.status-badge) {
    color: var(--text-secondary);
    /* Use secondary by default for better hierarchy */
}

/* LIGHT MODE: Force ALL text to be dark and readable */
body.light-theme,
body.light-theme p,
body.light-theme span:not(.status-badge):not(.badge),
body.light-theme li,
body.light-theme td,
body.light-theme th,
body.light-theme label,
body.light-theme div:not(.status-badge):not(.badge),
body.light-theme .hero-content p,
body.light-theme .section-subtitle,
body.light-theme .type-card p,
body.light-theme .feature-item p,
body.light-theme .feature-card p,
body.light-theme .free-features li,
body.light-theme .pricing-features li,
body.light-theme .card p,
body.light-theme .description {
    color: var(--text-secondary) !important;
}

/* Ensure headings are also dark in light mode */
body.light-theme h1,
body.light-theme h2,
body.light-theme h3,
body.light-theme h4,
body.light-theme h5,
body.light-theme h6,
body.light-theme .hero-content h1,
body.light-theme .type-card h3,
body.light-theme .feature-item h3 {
    color: var(--text-primary) !important;
}

/* Modal Headers should remain white as they usually have a dark primary background */
body.light-theme .modal-header h1,
body.light-theme .modal-header h2,
body.light-theme .modal-header h3,
body.light-theme .modal-header .close {
    color: white !important;
}


/* Body meta text and smaller labels */
small,
.meta,
.text-muted,
.cta-subtext {
    color: var(--text-secondary) !important;
    opacity: 0.8;
}

/* Link Visibility */
a:not(.btn) {
    color: var(--text-accent) !important;
    text-decoration: none;
    transition: opacity 0.2s;
}

a:hover {
    opacity: 0.8;
}

/* ========================================
   2. COMPONENT SPECIFIC OVERRIDES
   ======================================== */

/* Sections & Cards */
.section,
.card,
.glass-card,
.sidebar-section,
.dashboard-container,
.modal-content {
    background: var(--bg-secondary) !important;
    border: 1px solid var(--border-color) !important;
    color: var(--text-primary) !important;
    box-shadow: var(--shadow) !important;
}

/* LIGHT MODE: Enhanced Cards with Depth */
body.light-theme .card,
body.light-theme .info-card,
body.light-theme .step-card,
body.light-theme .glass-card {
    background: linear-gradient(135deg, #ffffff 0%, #fefcfb 100%) !important;
    border: 1px solid var(--border-light) !important;
    box-shadow: var(--shadow-sm), 0 2px 4px rgba(0, 0, 0, 0.04) !important;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

body.light-theme .card:hover,
body.light-theme .info-card:hover,
body.light-theme .step-card:hover {
    transform: translateY(-4px);
    box-shadow: var(--shadow-lg), 0 4px 8px rgba(0, 0, 0, 0.08) !important;
    border-color: var(--border-accent) !important;
}

body.light-theme .dashboard-container {
    background: linear-gradient(135deg, #ffffff 0%, #fefcfb 100%) !important;
    border: 1px solid var(--border-light) !important;
    box-shadow: var(--shadow-md) !important;
}

/* Navigation Bar */
.navbar,
.dashboard-nav,
.dashboard-nav-top {
    background: var(--bg-secondary) !important;
    border-bottom: 1px solid var(--border-color) !important;
}

/* LIGHT MODE: Enhanced Navigation with Gradient */
body.light-theme .navbar,
body.light-theme .dashboard-nav,
body.light-theme .dashboard-nav-top {
    background: linear-gradient(135deg, #ffffff 0%, #f0f9ff 50%, #fef3c7 100%) !important;
    border-bottom: 2px solid var(--border-light) !important;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.06) !important;
    backdrop-filter: blur(12px);
}

/* Sidebar Styling */
.sidebar,
.dashboard-sidebar {
    background: var(--bg-secondary) !important;
    border-right: 1px solid var(--border-color) !important;
}

/* LIGHT MODE: Warm Sidebar Gradient */
body.light-theme .sidebar,
body.light-theme .dashboard-sidebar {
    background: linear-gradient(180deg, #fefcfb 0%, #fff7ed 100%) !important;
    border-right: 2px solid rgba(251, 146, 60, 0.15) !important;
    box-shadow: 4px 0 16px rgba(251, 146, 60, 0.08) !important;
}

.nav-item:hover,
.doc-link:hover {
    background: var(--bg-tertiary) !important;
}

/* LIGHT MODE: Enhanced Navigation Items - SLATE THEME for visibility */
body.light-theme .doc-link,
body.light-theme .nav-item {
    background: linear-gradient(135deg, #475569 0%, #334155 100%) !important;
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
    border-radius: 12px;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06) !important;
}

body.light-theme .doc-link:hover,
body.light-theme .nav-item:hover {
    background: linear-gradient(135deg, #64748b 0%, #475569 100%) !important;
    border-color: rgba(255, 255, 255, 0.2) !important;
    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05) !important;
    transform: translateX(4px);
}

body.light-theme .doc-link.active,
body.light-theme .nav-item.active {
    background: linear-gradient(135deg, #3b82f6 0%, #1d4ed8 100%) !important;
    border-color: rgba(255, 255, 255, 0.3) !important;
    box-shadow: 0 10px 15px -3px rgba(59, 130, 246, 0.3) !important;
}

/* Inputs & Forms */
input,
select,
textarea {
    background: var(--bg-tertiary) !important;
    border: 1px solid var(--border-color) !important;
    color: var(--text-primary) !important;
    border-radius: 8px !important;
    padding: 10px 14px !important;
}

/* LIGHT MODE: Soft Form Inputs with Focus Glow */
body.light-theme input,
body.light-theme select,
body.light-theme textarea {
    background: linear-gradient(135deg, #ffffff 0%, #f8fafc 100%) !important;
    border: 2px solid var(--border-light) !important;
    color: var(--text-primary) !important;
    transition: all 0.3s ease;
}

body.light-theme input:focus,
body.light-theme select:focus,
body.light-theme textarea:focus {
    background: #ffffff !important;
    border-color: var(--accent-primary) !important;
    box-shadow: 0 0 0 4px rgba(79, 70, 229, 0.1),
        0 4px 12px rgba(79, 70, 229, 0.15) !important;
    outline: none;
}

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

/* ========================================
   LIGHT MODE: ENHANCED BUTTONS & INTERACTIONS
   ======================================== */

/* Primary Buttons - Vibrant Gradient */
body.light-theme .btn-primary,
body.light-theme button.btn-primary {
    background: linear-gradient(135deg, #4f46e5 0%, #7c3aed 100%) !important;
    color: white !important;
    border: none !important;
    box-shadow: 0 4px 12px rgba(79, 70, 229, 0.3),
        inset 0 1px 0 rgba(255, 255, 255, 0.2) !important;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    position: relative;
    overflow: hidden;
}

/* Ensure spans and icons inside primary buttons are white in light mode - ULTRA SPECIFIC to beat global span rules */
body.light-theme .btn-primary span,
body.light-theme .btn-primary i,
body.light-theme button.btn-primary span,
body.light-theme button.btn-primary i,
body.light-theme .btn-accent span,
body.light-theme .btn-accent i,
body.light-theme .extract-tab-btn.active,
body.light-theme .btn-primary strong,
body.light-theme .modal-content .btn-primary span,
body.light-theme .modal-content .btn-primary i {
    color: #ffffff !important;
    -webkit-text-fill-color: #ffffff !important;
}

body.light-theme .btn-primary:hover,
body.light-theme button.btn-primary:hover {
    background: linear-gradient(135deg, #4338ca 0%, #6d28d9 100%) !important;
    transform: translateY(-2px);
    box-shadow: 0 8px 20px rgba(79, 70, 229, 0.4) !important;
}

body.light-theme .btn-primary:active,
body.light-theme button.btn-primary:active {
    transform: translateY(0);
    box-shadow: 0 2px 8px rgba(79, 70, 229, 0.3) !important;
}

/* Secondary Buttons - Soft Outline */
body.light-theme .btn-secondary,
body.light-theme .btn-outline {
    background: linear-gradient(135deg, #ffffff 0%, #f8fafc 100%) !important;
    color: var(--accent-primary) !important;
    border: 2px solid var(--accent-primary) !important;
    box-shadow: 0 2px 8px rgba(79, 70, 229, 0.1) !important;
    transition: all 0.3s ease;
}

body.light-theme .btn-secondary:hover,
body.light-theme .btn-outline:hover {
    background: linear-gradient(135deg, #eef2ff 0%, #e0e7ff 100%) !important;
    border-color: #4338ca !important;
    box-shadow: 0 4px 12px rgba(79, 70, 229, 0.2) !important;
    transform: translateY(-1px);
}

/* Success Buttons - Teal Gradient */
body.light-theme .btn-success,
body.light-theme .btn-free-sign {
    background: linear-gradient(135deg, #14b8a6 0%, #0d9488 100%) !important;
    color: white !important;
    box-shadow: 0 4px 12px rgba(20, 184, 166, 0.3) !important;
    transition: all 0.3s ease;
}

body.light-theme .btn-success:hover,
body.light-theme .btn-free-sign:hover {
    background: linear-gradient(135deg, #0d9488 0%, #0f766e 100%) !important;
    box-shadow: 0 8px 20px rgba(20, 184, 166, 0.4) !important;
    transform: translateY(-2px);
}

/* Ripple Animation on Click */
@keyframes ripple-light {
    0% {
        box-shadow: 0 0 0 0 rgba(79, 70, 229, 0.4);
    }

    100% {
        box-shadow: 0 0 0 20px rgba(79, 70, 229, 0);
    }
}

body.light-theme .btn-primary:active::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 0;
    height: 0;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.5);
    transform: translate(-50%, -50%);
    animation: ripple-light 0.6s ease-out;
}


/* ========================================
   3. "BRUTE FORCE" CONTRAST FIXES
   Targets common hardcoded colors from UI libraries/legacy code
   ======================================== */

/* Dark Theme specific visibility boosts */
body.dark-theme [style*="color: #333"],
body.dark-theme [style*="color:#333"],
body.dark-theme [style*="color: #666"],
body.dark-theme [style*="color: rgb(51, 51, 51)"],
body.dark-theme .nav-item span {
    color: var(--text-primary) !important;
}


/* ========================================
   4. THEME SWITCHER COMPONENT UI
   ======================================== */
.theme-switcher {
    display: none !important;
}

/* Old Switcher UI removed */

/* ========================================
   5. SPECIAL CASES: STATUS BADGES
   We want these to STAY colored but visible
   ======================================== */
.status-badge.status-signed,
.badge-signed {
    background: rgba(16, 185, 129, 0.15) !important;
    color: #10b981 !important;
    /* Emerald-500 */
}

.status-badge.status-pending,
.badge-pending {
    background: rgba(245, 158, 11, 0.15) !important;
    color: #f59e0b !important;
    /* Amber-500 */
}

/* ========================================
   ADDITIONAL INLINE STYLE OVERRIDES
   For app.html specific elements
   ======================================== */

/* Override all light gray backgrounds */
body.dark-theme [style*="background: #f8f9fa"],
body.dark-theme [style*="background:#f8f9fa"],
body.dark-theme [style*="background-color: #f8f9fa"],
body.dark-theme [style*="background-color:#f8f9fa"],
body.dark-theme [style*="background: #fafafa"],
body.dark-theme [style*="background:#fafafa"] {
    background: var(--bg-secondary) !important;
}

/* Override all dark text colors */
body.dark-theme [style*="color: #333"],
body.dark-theme [style*="color:#333"],
body.dark-theme [style*="color: #212529"],
body.dark-theme [style*="color:#212529"],
body.dark-theme [style*="color: #495057"],
body.dark-theme [style*="color:#495057"],
body.dark-theme [style*="color: #666"],
body.dark-theme [style*="color:#666"] {
    color: var(--text-primary) !important;
}

/* Override gradient backgrounds */
body.dark-theme [style*="background: linear-gradient"][style*="#f8f9fa"],
body.dark-theme [style*="background:linear-gradient"][style*="#f8f9fa"] {
    background: var(--bg-secondary) !important;
}

/* Watermark controls and preview sections */
body.dark-theme .watermark-controls,
body.dark-theme .watermark-preview {
    background: var(--bg-secondary) !important;
    border-color: var(--border-color) !important;
}

/* Document preview backgrounds */
body.dark-theme .document-background {
    background: var(--bg-secondary) !important;
}

/* Mobile document selector */
body.dark-theme .mobile-doc-selector label,
body.dark-theme .mobile-doc-selector select {
    color: var(--text-primary) !important;
    background: var(--bg-secondary) !important;
}

/* Table headers with light backgrounds */
body.dark-theme tr[style*="background: #f8f9fa"],
body.dark-theme tr[style*="background:#f8f9fa"] {
    background: var(--bg-tertiary) !important;
}

body.dark-theme th,
body.dark-theme td {
    color: var(--text-primary) !important;
    border-color: var(--border-color) !important;
}

/* Button groups and action sections */
body.dark-theme .button-group[style*="background: #f8f9fa"],
body.dark-theme .button-group[style*="background:#f8f9fa"] {
    background: var(--bg-secondary) !important;
}

/* Client info display sections */
body.dark-theme [id*="ClientInfoDisplay"],
body.dark-theme [id*="ClientDisplay"] {
    background: var(--bg-secondary) !important;
    border-color: var(--border-color) !important;
}

body.dark-theme [id*="ClientInfoDisplay"] span,
body.dark-theme [id*="ClientDisplay"] span {
    color: var(--text-primary) !important;
}

/* All spans with dark text colors */
body.dark-theme span[style*="color: #212529"],
body.dark-theme span[style*="color:#212529"],
body.dark-theme span[style*="color: #495057"],
body.dark-theme span[style*="color:#495057"] {
    color: var(--text-primary) !important;
}

/* Preserve accent colors but make them lighter in dark mode */
body.dark-theme [style*="color: #ff9800"],
body.dark-theme [style*="color:#ff9800"] {
    color: #ffb74d !important;
    /* Lighter orange */
}

body.dark-theme [style*="color: #2196f3"],
body.dark-theme [style*="color:#2196f3"] {
    color: #64b5f6 !important;
    /* Lighter blue */
}

body.dark-theme [style*="color: #007bff"],
body.dark-theme [style*="color:#007bff"] {
    color: #4a9eff !important;
    /* Lighter blue */
}

/* Border colors */
body.dark-theme [style*="border: 1px solid #dee2e6"],
body.dark-theme [style*="border:1px solid #dee2e6"],
body.dark-theme [style*="border: 1px solid #e9ecef"],
body.dark-theme [style*="border:1px solid #e9ecef"],
body.dark-theme [style*="border: 2px solid #dee2e6"],
body.dark-theme [style*="border:2px solid #dee2e6"] {
    border-color: var(--border-color) !important;
}

/* Ensure dropdowns and selects are visible */
body.dark-theme select option {
    background: var(--bg-secondary) !important;
    color: var(--text-primary) !important;
}

/* ========================================
   MOBILE WORKFLOW SECTIONS - DARK/LIGHT MODE
   ======================================== */

/* Dark mode - default styles (already dark in styles.css) */
body.dark-theme .mobile-workflow-container {
    color: var(--text-primary) !important;
}

body.dark-theme .mobile-section {
    background: var(--bg-secondary) !important;
    border-color: var(--border-color) !important;
}

body.dark-theme .mobile-section-title {
    color: var(--text-primary) !important;
}

body.dark-theme .mobile-section-desc {
    color: var(--text-secondary) !important;
}

body.dark-theme .mobile-form-group label {
    color: var(--text-secondary) !important;
}

body.dark-theme .mobile-form-group select {
    background: var(--bg-tertiary) !important;
    color: var(--text-primary) !important;
    border-color: rgba(74, 158, 255, 0.3) !important;
}

body.dark-theme .mobile-action-item {
    background: var(--bg-tertiary) !important;
    color: var(--text-primary) !important;
}

body.dark-theme .mobile-action-item .action-text {
    color: var(--text-primary) !important;
}

/* Light mode overrides */
body.light-theme .mobile-workflow-container {
    color: #1f2937 !important;
}

body.light-theme .mobile-section {
    background: #ffffff !important;
    border: 1px solid #e5e7eb !important;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08) !important;
}

body.light-theme .mobile-section-title {
    color: #1f2937 !important;
    border-bottom-color: rgba(74, 158, 255, 0.4) !important;
}

body.light-theme .mobile-section-desc {
    color: #6b7280 !important;
}

body.light-theme .mobile-form-group label {
    color: #6b7280 !important;
}

body.light-theme .mobile-form-group select {
    background: #f9fafb !important;
    color: #1f2937 !important;
    border: 2px solid #e5e7eb !important;
}

body.light-theme .mobile-form-group select:focus {
    border-color: #4a9eff !important;
}

body.light-theme .mobile-action-item {
    background: #f3f4f6 !important;
    color: #1f2937 !important;
    border: 1px solid #e5e7eb !important;
}

body.light-theme .mobile-action-item .action-text {
    color: #1f2937 !important;
}

body.light-theme .mobile-action-item:hover {
    background: #e0f2fe !important;
    border-color: #93c5fd !important;
}

body.light-theme .mobile-action-item.action-primary {
    background: linear-gradient(135deg, #10b981, #059669) !important;
    color: white !important;
}

body.light-theme .mobile-action-item.action-primary .action-text {
    color: white !important;
}

body.light-theme .mobile-action-item.action-featured {
    background: linear-gradient(135deg, rgba(139, 92, 246, 0.1), rgba(124, 58, 237, 0.1)) !important;
    border: 2px solid rgba(139, 92, 246, 0.3) !important;
}

body.light-theme .mobile-create-btn {
    background: linear-gradient(135deg, #4a9eff, #667eea) !important;
    color: white !important;
}

/* ========================================
   LIGHT MODE: CONTEXTUAL COLOR ZONES
   ======================================== */

/* Pricing Section - Premium Purple Gradient */
body.light-theme .pricing {
    background: linear-gradient(135deg, #faf5ff 0%, #f5f3ff 50%, #ede9fe 100%) !important;
    position: relative;
}

body.light-theme .pricing::before {
    background: radial-gradient(circle at 50% 50%, rgba(168, 85, 247, 0.08) 0%, transparent 70%) !important;
}

body.light-theme .pricing h2 {
    background: linear-gradient(135deg, #4f46e5 0%, #7c3aed 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    text-shadow: none !important;
}

body.light-theme .subscription-card {
    background: linear-gradient(135deg, #ffffff 0%, #faf5ff 100%) !important;
    border: 2px solid rgba(168, 85, 247, 0.2) !important;
    box-shadow: 0 4px 16px rgba(168, 85, 247, 0.12) !important;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

body.light-theme .subscription-card:hover {
    transform: translateY(-6px);
    box-shadow: 0 12px 32px rgba(168, 85, 247, 0.2) !important;
    border-color: rgba(168, 85, 247, 0.4) !important;
}

body.light-theme .subscription-card.free-trial-card {
    background: linear-gradient(135deg, #ede9fe 0%, #ddd6fe 100%) !important;
    border-color: rgba(168, 85, 247, 0.3) !important;
}

/* Document Type Cards */
/* DARK THEME: Indigo/Slate glass cards to match landing hero + pricing */
body.dark-theme .type-card {
    background: var(--glass-bg) !important;
    border: 1px solid var(--border-color) !important;
    box-shadow: var(--shadow) !important;
    backdrop-filter: blur(18px);
    border-radius: 16px;
    transition: transform 0.3s ease, box-shadow 0.3s ease, border-color 0.3s ease;
}

body.dark-theme .type-card:hover {
    transform: translateY(-6px);
    border-color: rgba(148, 163, 184, 0.6) !important;
    box-shadow: 0 24px 55px rgba(15, 23, 42, 0.9) !important;
}

/* Dark theme buttons inside document type cards */
body.dark-theme .type-card .btn-outline {
    background: transparent !important;
    color: var(--text-accent) !important;
    border: 2px solid rgba(99, 102, 241, 0.85) !important;
    box-shadow: 0 0 0 1px rgba(15, 23, 42, 0.7);
}

body.dark-theme .type-card .btn-outline:hover {
    background: rgba(99, 102, 241, 0.12) !important;
    transform: translateY(-2px);
    box-shadow: 0 10px 26px rgba(15, 23, 42, 0.8);
}

/* LIGHT THEME: keep clean light cards */
body.light-theme .type-card {
    background: linear-gradient(135deg, #ffffff 0%, #fefcfb 100%) !important;
    border: 2px solid rgba(79, 70, 229, 0.1) !important;
    box-shadow: 0 4px 12px rgba(79, 70, 229, 0.08) !important;
    transition: all 0.3s ease;
}

body.light-theme .type-card:hover {
    border-color: rgba(79, 70, 229, 0.3) !important;
    box-shadow: 0 12px 32px rgba(79, 70, 229, 0.15) !important;
    transform: translateY(-6px);
}

/* Status Badges - Enhanced Colors */
body.light-theme .status-badge.status-signed,
body.light-theme .badge-signed {
    background: linear-gradient(135deg, rgba(20, 184, 166, 0.15) 0%, rgba(16, 185, 129, 0.15) 100%) !important;
    color: #0d9488 !important;
    border: 1px solid rgba(20, 184, 166, 0.3) !important;
}

body.light-theme .status-badge.status-pending,
body.light-theme .badge-pending {
    background: linear-gradient(135deg, rgba(245, 158, 11, 0.15) 0%, rgba(251, 146, 60, 0.15) 100%) !important;
    color: #d97706 !important;
    border: 1px solid rgba(245, 158, 11, 0.3) !important;
}


/* ========================================
   6. BRANDED DARK SECTIONS
   Sections that MUST keep their dark background and light text IN DARK MODE ONLY
   ======================================== */

/* DARK MODE ONLY - White text on dark backgrounds */
body.dark-theme .free-upload-sign,
body.dark-theme .free-upload-sign *,
body.dark-theme .saved-addresses-section,
body.dark-theme .saved-addresses-section *,
body.dark-theme .hero-content,
body.dark-theme .hero-content *,
body.dark-theme .document-types,
body.dark-theme .document-types *,
body.dark-theme .features,
body.dark-theme .features * {
    color: #ffffff !important;
}

/* LIGHT MODE - These sections should have DARK text on light backgrounds */
body.light-theme .free-upload-sign h1,
body.light-theme .free-upload-sign h2,
body.light-theme .free-upload-sign h3,
body.light-theme .free-upload-sign p,
body.light-theme .document-types h2,
body.light-theme .document-types h3,
body.light-theme .document-types p,
body.light-theme .features h2,
body.light-theme .features h3,
body.light-theme .features p,
body.light-theme .saved-addresses-section h2,
body.light-theme .saved-addresses-section h3,
body.light-theme .saved-addresses-section p,
body.light-theme .hero-content h1,
body.light-theme .hero-content p {
    color: var(--text-primary) !important;
}

body.light-theme .free-upload-sign .section-subtitle,
body.light-theme .saved-addresses-section .section-subtitle,
body.light-theme .document-types .section-subtitle,
body.light-theme .features .section-subtitle {
    color: var(--text-secondary) !important;
}


/* ========================================
   LIGHT MODE: MODALS & OVERLAYS
   ======================================== */

body.light-theme .modal-content {
    background: linear-gradient(135deg, #ffffff 0%, #fefcfb 100%) !important;
    border: 1px solid var(--border-light) !important;
    box-shadow: 0 20px 60px rgba(79, 70, 229, 0.2) !important;
}

body.light-theme .modal-header {
    background: linear-gradient(135deg, #4f46e5 0%, #7c3aed 100%) !important;
    border-bottom: none !important;
}

/* Feature Items on Landing Page */
body.light-theme .feature-item {
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.8) 0%, rgba(254, 252, 251, 0.8) 100%) !important;
    border: 1px solid rgba(79, 70, 229, 0.1) !important;
    border-radius: 16px;
    padding: 2rem;
    box-shadow: 0 4px 12px rgba(79, 70, 229, 0.08) !important;
    transition: all 0.3s ease;
}

body.light-theme .feature-item:hover {
    transform: translateY(-4px);
    box-shadow: 0 12px 32px rgba(79, 70, 229, 0.15) !important;
    border-color: rgba(79, 70, 229, 0.2) !important;
}

.invitation-history-section {
    background: var(--bg-secondary) !important;
    border: 1px solid var(--border-color) !important;
    border-radius: 16px !important;
    padding: 24px !important;
    margin-top: 20px !important;
}

/* Modal Highlight Theme Refinement */
.invitation-modal-highlight {
    background: var(--bg-primary) !important;
    border-color: var(--text-accent) !important;
    box-shadow: var(--shadow) !important;
}

.body.light-theme .invitation-modal-highlight {
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.95) 0%, rgba(248, 249, 250, 0.95) 100%) !important;
}

.invitation-header-highlight {
    background: linear-gradient(135deg, var(--text-accent) 0%, #4f46e5 100%) !important;
    color: white !important;
}

.invitation-item {
    background: var(--bg-tertiary) !important;
    border: 1px solid var(--border-color) !important;
    border-radius: 12px !important;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1) !important;
}

.invitation-item:hover {
    border-color: var(--text-accent) !important;
    background: var(--bg-tertiary) !important;
    box-shadow: 0 12px 24px rgba(0, 0, 0, 0.4) !important;
    transform: translateY(-2px) !important;
}

.invitation-email {
    color: var(--text-primary) !important;
    font-weight: 700 !important;
}

.code-display {
    background: var(--bg-primary) !important;
    color: var(--text-accent) !important;
    border: 1px solid var(--border-color) !important;
    border-radius: 8px !important;
    font-family: var(--latin-modern-mono), monospace !important;
    box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.3) !important;
}

.invitation-message {
    background: var(--bg-primary) !important;
    color: var(--text-secondary) !important;
    border-left: 4px solid var(--text-accent) !important;
    border-radius: 8px !important;
    font-style: italic !important;
}

.invitation-dates {
    color: var(--text-secondary) !important;
    font-size: 0.85rem !important;
}

.btn-copy {
    background: var(--bg-secondary) !important;
    border-color: var(--border-color) !important;
    color: var(--text-primary) !important;
}

.btn-copy:hover {
    background: var(--bg-tertiary) !important;
    color: var(--text-accent) !important;
}

/* Status specific item markers */
/* Status specific item markers - Ensure solid background to override transparency */
.invitation-item.status-active,
.invitation-item.status-used,
.invitation-item.status-expired {
    background: var(--bg-tertiary) !important;
}

.invitation-item.status-active {
    border-left: 4px solid #10b981 !important;
}

.invitation-item.status-used {
    border-left: 4px solid var(--text-accent) !important;
}

.invitation-item.status-expired {
    border-left: 4px solid #ef4444 !important;
}

/* Status Badge Styling */
.invitation-status {
    padding: 6px 12px !important;
    border-radius: 20px !important;
    font-size: 0.75rem !important;
    font-weight: 700 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.5px !important;
}

.invitation-status.status-active {
    background: rgba(16, 185, 129, 0.1) !important;
    color: #10b981 !important;
    border: 1px solid rgba(16, 185, 129, 0.2) !important;
}

.invitation-status.status-used {
    background: rgba(99, 102, 241, 0.1) !important;
    color: #6366f1 !important;
    border: 1px solid rgba(99, 102, 241, 0.2) !important;
}

.invitation-status.status-expired {
    background: rgba(239, 68, 68, 0.1) !important;
    color: #ef4444 !important;
    border: 1px solid rgba(239, 68, 68, 0.2) !important;
}

/* ========================================
   LIGHT MODE: HEADER TEXT VISIBILITY FIX
   Makes text white on dark header backgrounds
   HIGHER SPECIFICITY TO OVERRIDE CONFLICTS
   ======================================== */

/* App Title - White text for visibility on dark background */
body.light-theme #appTitle,
body.light-theme .app-header h1,
body.light-theme .header-section h1 {
    color: #ffffff !important;
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.3) !important;
}

/* Back to Dashboard Button - Slate background with white text */
body.light-theme #backToDashboard {
    display: inline-flex !important;
    /* Override inline display:none */
    align-items: center !important;
    gap: 8px !important;
    color: #ffffff !important;
    background: #64748b !important;
    /* Slate-500 */
    border: 2px solid #475569 !important;
    /* Slate-600 */
    box-shadow: 0 2px 8px rgba(100, 116, 139, 0.3) !important;
    padding: 10px 20px !important;
    border-radius: 8px !important;
    cursor: pointer !important;
    transition: all 0.3s ease !important;
}

body.light-theme #backToDashboard span {
    color: #ffffff !important;
}

body.light-theme #backToDashboard:hover {
    background: #475569 !important;
    /* Slate-600 on hover */
    border-color: #334155 !important;
    /* Slate-700 */
    box-shadow: 0 4px 12px rgba(100, 116, 139, 0.4) !important;
    transform: translateY(-2px) !important;
}

/* All header buttons with dark backgrounds - White text */
body.light-theme .header-section button:not(#backToDashboard),
body.light-theme .app-header button:not(#backToDashboard) {
    color: #ffffff !important;
}

/* DocuGen Pro branding text */
body.light-theme .nav-logo,
body.light-theme .brand-text {
    color: #ffffff !important;
}

/* Document Type Navigation Labels - White text with HIGHEST SPECIFICITY */
body.light-theme .doc-link,
body.light-theme .doc-link>*,
body.light-theme .doc-link span,
body.light-theme .doc-link label,
body.light-theme .nav-item,
body.light-theme .nav-item>*,
body.light-theme .nav-item span,
body.light-theme .nav-item label,
body.light-theme .document-nav-item,
body.light-theme .document-nav-item>*,
body.light-theme .document-nav-item span,
body.light-theme .document-nav-item label,
body.light-theme .tab-btn,
body.light-theme .tab-btn>*,
body.light-theme .tab-btn span,
body.light-theme .tab-btn label {
    color: #ffffff !important;
}

/* Force white text on hover and active states too */
body.light-theme .doc-link:hover,
body.light-theme .doc-link:hover *,
body.light-theme .doc-link.active,
body.light-theme .doc-link.active *,
body.light-theme .nav-item:hover,
body.light-theme .nav-item:hover *,
body.light-theme .nav-item.active,
body.light-theme .nav-item.active *,
body.light-theme .tab-btn:hover,
body.light-theme .tab-btn:hover *,
body.light-theme .tab-btn.active,
body.light-theme .tab-btn.active * {
    color: #ffffff !important;
}

/* ULTRA-SPECIFIC: Target .tab-label and .tab-icon directly */
body.light-theme .tab-btn .tab-label,
body.light-theme .tab-btn .tab-icon,
body.light-theme .tab-btn:hover .tab-label,
body.light-theme .tab-btn:hover .tab-icon,
body.light-theme .tab-btn.active .tab-label,
body.light-theme .tab-btn.active .tab-icon,
body.light-theme .tab-btn:not(.active) .tab-label,
body.light-theme .tab-btn:not(.active) .tab-icon {
    color: #ffffff !important;
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.7) !important;
}

/* Fix for Active Company Banner Visibility - MATCHING THEME SWITCHER SPECIFICITY */
body.light-theme .active-company-banner,
body.light-theme .active-company-banner *,
body.light-theme #activeCompanyBanner,
body.light-theme #activeCompanyBanner *,
body.light-theme #companyNameMini,
body.light-theme #activeCompanySubtext,
body.dark-theme .active-company-banner,
body.dark-theme .active-company-banner *,
body.dark-theme #activeCompanyBanner,
body.dark-theme #activeCompanyBanner *,
body.dark-theme #companyNameMini,
body.dark-theme #activeCompanySubtext {
    color: #ffffff !important;
    -webkit-text-fill-color: #ffffff !important;
    text-shadow: none !important;
}

/* Force white text for featured Client Profiles highlight in sidebar */
body.light-theme .client-profiles-highlight,
body.light-theme .client-profiles-highlight *,
body.light-theme .importance-badge {
    color: #ffffff !important;
    -webkit-text-fill-color: #ffffff !important;
}

/* Force white text for featured Company Profiles highlight in sidebar */
body.light-theme .company-profiles-highlight,
body.light-theme .company-profiles-highlight *,
body.dark-theme .company-profiles-highlight,
body.dark-theme .company-profiles-highlight * {
    color: #ffffff !important;
    -webkit-text-fill-color: #ffffff !important;
}

body.light-theme .active-company-banner small,
body.light-theme #activeCompanyBanner small,
body.light-theme #activeCompanySubtext,
body.dark-theme .active-company-banner small,
body.dark-theme #activeCompanyBanner small,
body.dark-theme #activeCompanySubtext {
    color: rgba(255, 255, 255, 0.95) !important;
    -webkit-text-fill-color: rgba(255, 255, 255, 0.95) !important;
}

/* FINAL OVERRIDE: Ensure all primary action button labels are WHITE for readability */
body.light-theme .btn-primary span,
body.light-theme .btn-primary i,
body.light-theme .btn-primary strong,
body.light-theme button.btn-primary span,
body.light-theme #clientProfilesModal .btn-primary span,
body.light-theme .client-form-section .btn-primary span,
body.light-theme .modal-header h2,
body.light-theme .modal-header h3 {
    color: #ffffff !important;
    -webkit-text-fill-color: #ffffff !important;
}

/* ========================================
   LIGHT MODE: DASHBOARD BENTO VISIBILITY FIXES
   ======================================== */

/* PRIORITY Badge - White text for visibility on dark badge background */
body.light-theme .priority-badge {
    color: #ffffff !important;
    -webkit-text-fill-color: #ffffff !important;
    background: rgba(59, 130, 246, 0.85) !important;
    border: 1px solid rgba(255, 255, 255, 0.3) !important;
}

/* Token Balance Number - White text for visibility in token card */
body.light-theme .token-balance-large,
body.light-theme .token-balance-large span,
body.light-theme .bento-tokens .token-balance,
body.light-theme .bento-tokens .token-balance-large span.token-balance {
    color: #ffffff !important;
    -webkit-text-fill-color: #ffffff !important;
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.3) !important;
}

/* Hero Description Text - Blue/Dark for readability on light backgrounds */
body.light-theme .bento-hero #documentTypeDescription,
body.light-theme .hero-content #documentTypeDescription,
body.light-theme .bento-hero .hero-content p {
    color: #1e40af !important;
    -webkit-text-fill-color: #1e40af !important;
    font-weight: 500 !important;
}

/* Analytics Section - Make labels and values visible */
body.light-theme .bento-analytics .stat-label,
body.light-theme .bento-analytics .stat-box .stat-label {
    color: #1e3a5f !important;
    -webkit-text-fill-color: #1e3a5f !important;
    font-weight: 600 !important;
    text-transform: uppercase;
}

body.light-theme .bento-analytics .stat-value,
body.light-theme .bento-analytics .stat-box .stat-value,
body.light-theme #analyticsTotalInvoiced,
body.light-theme #analyticsNetBusiness {
    color: #0f172a !important;
    -webkit-text-fill-color: #0f172a !important;
    font-weight: 700 !important;
}

/* Analytics Quick Report text */
body.light-theme .bento-analytics .stat-box div[style*="color: var(--text-muted)"] {
    color: #475569 !important;
}

/* Analytics Bento Title */
body.light-theme .bento-analytics .bento-title {
    color: #0f172a !important;
    -webkit-text-fill-color: #0f172a !important;
}

/* Analytics Dropdown styling */
body.light-theme .bento-analytics select.form-control {
    background: rgba(15, 23, 42, 0.08) !important;
    color: #0f172a !important;
    border: 1px solid rgba(15, 23, 42, 0.2) !important;
}

/* Bento Item Titles in Light Mode - Ensure visibility */
body.light-theme .bento-title {
    color: #0f172a !important;
    -webkit-text-fill-color: #0f172a !important;
}

/* Token Card Title should be white since it has dark background gradient */
body.light-theme .bento-tokens .bento-title {
    color: #ffffff !important;
    -webkit-text-fill-color: #ffffff !important;
}

/* ========================================
   LIGHT MODE: NAVIGATION TOKEN COUNTER VISIBILITY
   ======================================== */

/* Token Counter in Nav Bar - Make number visible */
body.light-theme .nav-user .token-counter,
body.light-theme .token-counter {
    background: linear-gradient(135deg, #1e3a5f 0%, #0f172a 100%) !important;
    color: #ffffff !important;
    border: 1px solid rgba(255, 255, 255, 0.2) !important;
}

body.light-theme .nav-user .token-counter .token-balance,
body.light-theme .token-counter .token-balance {
    color: #fbbf24 !important;
    -webkit-text-fill-color: #fbbf24 !important;
    font-weight: 700 !important;
}

/* ========================================
   LIGHT MODE: HERO TITLE VISIBILITY FIX
   ======================================== */

/* Document Type Title (e.g. "Invoice Generator") - Dark blue for visibility */
body.light-theme #documentTypeTitle,
body.light-theme .bento-hero h1,
body.light-theme .hero-content h1#documentTypeTitle {
    color: #1e3a5f !important;
    -webkit-text-fill-color: #1e3a5f !important;
    background: none !important;
    text-shadow: none !important;
}

/* ========================================
   LIGHT MODE: ANALYTICS DROPDOWN VISIBILITY
   ======================================== */

/* Analytics Dropdown - Make it visible with dark text */
body.light-theme .bento-analytics select,
body.light-theme .bento-analytics select.form-control,
body.light-theme #businessAnalyticsSection select {
    background: #ffffff !important;
    color: #0f172a !important;
    -webkit-text-fill-color: #0f172a !important;
    border: 2px solid rgba(59, 130, 246, 0.3) !important;
    border-radius: 10px !important;
    padding: 6px 12px !important;
    font-weight: 500 !important;
}

body.light-theme .bento-analytics select option,
body.light-theme #businessAnalyticsSection select option {
    background: #ffffff !important;
    color: #0f172a !important;
}

/* ================================================
   COMPANY SETUP SIDEBAR - Status Badges Fix
   ================================================ */

/* "Not Set" status badge - make text visible in light mode */
body.light-theme .company-status.empty {
    background: rgba(251, 191, 36, 0.9) !important;
    color: #1e293b !important;
    font-weight: 600 !important;
    text-shadow: none !important;
    border: 1px solid rgba(217, 119, 6, 0.3) !important;
}

/* Active/Set status badge */
body.light-theme .company-status:not(.empty):not(.new) {
    background: rgba(34, 197, 94, 0.9) !important;
    color: #ffffff !important;
    font-weight: 600 !important;
}

/* New badge styling */
body.light-theme .company-status.new {
    background: #22c55e !important;
    color: #ffffff !important;
    font-weight: 600 !important;
}

/* ================================================
   SIGNATURE TOOLS - Text Color Fix
   ================================================ */

/* Ensure Signature Tools text is white in light mode */
body.light-theme .signature-tools-highlight .featured-text strong {
    color: #ffffff !important;
}

body.light-theme .signature-tools-highlight .featured-text small {
    color: #ffffff !important;
    opacity: 0.95 !important;
}

/* ================================================
   SCROLL INDICATOR - Light Theme
   ================================================ */

body.light-theme .scroll-track {
    background: rgba(71, 85, 105, 0.15) !important;
    /* slate-500 */
}

body.light-theme .scroll-track:hover {
    background: rgba(71, 85, 105, 0.25) !important;
}

body.light-theme .scroll-thumb {
    background: rgba(71, 85, 105, 0.5) !important;
    /* slate-500 */
}

body.light-theme .scroll-thumb:hover,
body.light-theme .scroll-thumb.dragging {
    background: rgba(51, 65, 85, 0.7) !important;
    /* slate-700 */
}

/* Sidebar Scroll Track - Light Theme (contrasts with warm cream sidebar) */
body.light-theme .sidebar-scroll-track {
    background: rgba(194, 65, 12, 0.15) !important;
    /* orange-700 to match warm theme */
}

body.light-theme .sidebar-scroll-track .scroll-thumb {
    background: rgba(194, 65, 12, 0.4) !important;
    /* orange-700 thumb */
}

body.light-theme .sidebar-scroll-track .scroll-thumb:hover,
body.light-theme .sidebar-scroll-track .scroll-thumb.dragging {
    background: rgba(194, 65, 12, 0.6) !important;
    /* orange-700 on hover */
}

/* ========================================
   LIGHT MODE: WHITE TEXT FOR DARK SECTIONS
   Override global span rules for Company Information
   Mirror the dark mode structure but force white text
   ======================================== */

/* Company Information sections have dark backgrounds in light mode */
/* These elements need WHITE text to be visible, overriding the light theme defaults */

/* Labels in info items - should be white like in dark mode */
/* Increased specificity by chaining .active-company-display (NO SPACE) */
body.light-theme .active-company-display.active-company-display .info-item label,
body.light-theme .active-company-display.active-company-display .info-label {
    color: #ffffff !important;
}

/* Value spans in info items - should be white like in dark mode */
/* Increased specificity by chaining .active-company-display (NO SPACE) */
body.light-theme .active-company-display.active-company-display .info-item span,
body.light-theme .active-company-display.active-company-display .company-info-grid span,
body.light-theme .active-company-display.active-company-display span[id*="Display"] {
    color: #ffffff !important;
}

/* Company note text - should be light grey like in dark mode */
body.light-theme .active-company-display .company-note small {
    color: #94a3b8 !important;
}

/* Company note links - keep the primary color */
body.light-theme .active-company-display .company-note a {
    color: var(--primary-color) !important;
}

/* ============================================================ 
   LIGHT MODE: COMPREHENSIVE DARK ZONE VISIBILITY FIXES
   ============================================================ */

/* 
   THE "DARK CONTEXT" FIX:
   Instead of overriding every single child tag's color, we reset 
   the theme variables locally for these sections. This way, 
   the global rules (like body.light-theme span) still work but 
   use the light colors from these overridden variables.
*/

body.light-theme .app-header.app-header,
body.light-theme .document-tabs-container.document-tabs-container,
body.light-theme .active-document-info.active-document-info,
body.light-theme .profile-controls.profile-controls,
body.light-theme .mobile-section.mobile-section,
body.light-theme .itinerary-section.itinerary-section,
body.light-theme .active-company-display.active-company-display,
body.light-theme .watermark-controls.watermark-controls,
body.light-theme .document-background.document-background,
body.light-theme .quick-sharing-section.quick-sharing-section,
body.light-theme .contract-page.contract-page,
body.light-theme .signature-integration.signature-integration,
body.light-theme .signature-selection-group.signature-selection-group,
body.light-theme .definition-group.definition-group,
body.light-theme .client-info-box.client-info-box,
body.light-theme .signature-helper-container.signature-helper-container,
body.light-theme .save-load-agreement.save-load-agreement,
body.light-theme .signature-locations.signature-locations,
body.light-theme #artistAgreementSection.section,
body.light-theme [style*="background: var(--slate-800)"],
body.light-theme [style*="background:var(--slate-800)"],
body.light-theme [style*="background: var(--slate-900)"],
body.light-theme [style*="background:var(--slate-900)"],
body.light-theme [style*="background: var(--slate-950)"],
body.light-theme [style*="background:var(--slate-950)"],
body.light-theme .force-dark-context {
    /* Reset to Dark Mode defaults for dark-background containers */
    --text-primary: #ffffff !important;
    --text-secondary: #94a3b8 !important;
    --text-accent: #6366f1 !important;

    /* Force the background to stay dark Slate even in Light Mode */
    background-color: #0f172a !important;
    /* Slate-900 */
    border-color: rgba(148, 163, 184, 0.2) !important;
}

body.light-theme .contract-page.contract-page {
    background-color: rgba(30, 41, 59, 0.7) !important;
    /* Slate-800 with transparency */
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
}




/* Specific Reset for Action Buttons (Pure white looks better on gradients) */
body.light-theme .gen-btn-primary.gen-btn-primary,
body.light-theme .gen-btn-secondary.gen-btn-secondary,
body.light-theme .btn-primary.btn-primary,
body.light-theme .btn-secondary.btn-secondary,
body.light-theme .save-btn.save-btn,
body.light-theme .use-btn.use-btn,
body.light-theme .delete-btn.delete-btn,
body.light-theme .profile-button.profile-button,
body.light-theme .mobile-create-btn.mobile-create-btn,
body.light-theme #addItem,
body.light-theme #generatePDF,
body.light-theme #clearSignature,
body.light-theme #backToDashboard {
    --text-primary: #ffffff !important;
    --text-secondary: #ffffff !important;
    --text-accent: #ffffff !important;
}




/* Force headings in these zones to use our new white variable */
body.light-theme .profile-controls h3,
body.light-theme .profile-controls h4,
body.light-theme .watermark-controls h3,
body.light-theme .watermark-controls h4,
body.light-theme .mobile-section h3,
body.light-theme .active-company-display h2,
body.light-theme .contract-page h2,
body.light-theme .contract-page h3,
body.light-theme .document-background div {
    color: var(--text-primary) !important;
}


/* Ensure spans, labels, strong, and small inside these zones also follow the new variables */
body.light-theme .profile-controls span,
body.light-theme .profile-controls label,
body.light-theme .profile-controls strong,
body.light-theme .profile-controls small,
body.light-theme .profile-controls a,
body.light-theme .watermark-controls label,
body.light-theme .watermark-controls span,
body.light-theme .contract-page label,
body.light-theme .contract-page span,
body.light-theme .contract-page strong,
body.light-theme .contract-page small,
body.light-theme .contract-page p,
body.light-theme .definition-group label,
body.light-theme .definition-group span,
body.light-theme .definition-group strong,
body.light-theme .definition-group p,
body.light-theme [style*="background: var(--slate-"] label,
body.light-theme [style*="background: var(--slate-"] span,
body.light-theme [style*="background: var(--slate-"] strong,
body.light-theme [style*="background: var(--slate-"] small,
body.light-theme [style*="background: var(--slate-"] p,
body.light-theme .mobile-section .mobile-section-desc,
body.light-theme .mobile-create-btn span,
body.light-theme .gen-btn-primary span,
body.light-theme .gen-btn-secondary span,
body.light-theme #addItem span,
body.light-theme #clearSignature span,
body.light-theme #backToDashboard span,
body.light-theme .tab-label {
    color: #ffffff !important;
}



body.light-theme .current-doc-name,
body.light-theme .app-header h1,
body.light-theme .tab-btn.active .tab-label {
    color: #ffffff !important;
}





/* Specific fix for "DOCUMENT PREVIEW" text in Watermark Preview */
body.light-theme .document-background div {
    color: #ffffff !important;
}

/* Small info text in these dark zones should be light, not dark grey */
body.light-theme .form-group span[style*="color:#666"],
body.light-theme .form-group span[style*="color: #666"],
body.light-theme .form-group small {
    color: rgba(255, 255, 255, 0.7) !important;
}

/* Light Slate Input Backgrounds for Dark Zones in Light Mode */
body.light-theme .contract-page input,
body.light-theme .contract-page textarea,
body.light-theme .contract-page select,
body.light-theme .active-company-display input,
body.light-theme .active-company-display textarea,
body.light-theme .active-company-display select,
body.light-theme .profile-controls input,
body.light-theme .profile-controls textarea,
body.light-theme .profile-controls select,
body.light-theme .watermark-controls input,
body.light-theme .watermark-controls select,
body.light-theme .definition-group input,
body.light-theme .definition-group textarea,
body.light-theme .signature-integration input,
body.light-theme .mobile-form-group input,
body.light-theme .mobile-form-group select,
body.light-theme [style*="background: var(--slate-"] input,
body.light-theme [style*="background: var(--slate-"] textarea,
body.light-theme [style*="background: var(--slate-"] select,
body.light-theme .force-dark-context input,
body.light-theme .force-dark-context textarea,
body.light-theme .force-dark-context select {
    background: rgba(45, 55, 72, 0.8) !important;
    /* The studied "Light Slate" color */
    color: #ffffff !important;
    border: 1px solid rgba(255, 255, 255, 0.2) !important;
    border-radius: 8px !important;
    padding: 10px 14px !important;
    box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.2) !important;
    transition: all 0.2s ease !important;
}

/* Focus state for these inputs */
body.light-theme .contract-page input:focus,
body.light-theme .active-company-display input:focus,
body.light-theme .profile-controls input:focus {
    background: rgba(30, 41, 59, 0.9) !important;
    /* Slightly darker on focus */
    border-color: #6366f1 !important;
    outline: none !important;
    box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.3), inset 0 2px 4px rgba(0, 0, 0, 0.2) !important;
}