/* sidebar.css */

:root { 
    --primary: #0f172a; 
    --secondary: #334155; 
    --accent: #2563eb; 
    --accent-hover: #1d4ed8; 
    --bg: #f1f5f9; 
    --surface: #ffffff; 
    --border: #e2e8f0; 
    --success: #22c55e; 
    --danger: #ef4444; 
    --warning: #f59e0b; 
    --text: #1e293b; 
    --text-light: #64748b; 
    --code-bg: #eff6ff;
    --code-text: #1e40af;
    --nav-height-mobile: 60px;
    --code-bg: #eff6ff;
    --code-text: #1e40af;
}

* { box-sizing: border-box; }

body { 
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif; 
    background-color: var(--bg); 
    color: var(--text); 
    margin: 0; 
    padding: 0; 
    height: 100vh; 
    overflow: hidden; 
}

/* --- FLEXBOX LAYOUT --- */
.app-wrapper { display: flex; height: 100vh; width: 100vw; }

/* --- SIDEBAR --- */
.sidebar {
    width: 260px;
    background: var(--primary);
    color: white;
    display: flex;
    flex-direction: column;
    padding: 1.5rem;
    flex-shrink: 0;
    overflow-y: auto;
    z-index: 50;
}

.brand {
    font-size: 1.25rem;
    font-weight: 700;
    margin-bottom: 2rem;
    display: flex;
    align-items: center;
    gap: 0.75rem;
    letter-spacing: -0.5px;
}

.nav-links { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 0.5rem; }

.nav-item {
    padding: 0.75rem 1rem;
    border-radius: 0.5rem;
    color: #94a3b8;
    text-decoration: none;
    font-weight: 500;
    display: flex;
    align-items: center;
    gap: 0.75rem;
    transition: all 0.2s;
    font-size: 0.95rem;
}

.nav-item:hover { background: rgba(255,255,255,0.08); color: white; }
.nav-item.active { background: var(--accent); color: white; box-shadow: 0 4px 12px rgba(37, 99, 235, 0.3); }
.nav-item svg { width: 20px; height: 20px; opacity: 0.8; flex-shrink: 0; }

/* UPGRADE BUTTON DESKTOP STYLES */
.nav-item.upgrade-btn { 
    margin-top: 10px; 
    background: rgba(59, 130, 246, 0.08); 
    border: 1px solid rgba(37, 99, 235, 0.3); 
    padding: 0.5rem 1rem; 
}
.nav-item.upgrade-btn span {
    color: var(--accent); 
    font-weight: 700;
}
.nav-item.upgrade-btn svg { 
    color: var(--accent);
}
.nav-item.upgrade-btn.active { 
    background: var(--accent); 
}
.nav-item.upgrade-btn.active span, .nav-item.upgrade-btn.active svg { 
    color: white; 
}

/* SIDEBAR PROJECT INDICATOR STYLES */
.current-context-box {
    margin-top: 1.5rem;
    padding: 1rem;
    background: rgba(255, 255, 255, 0.05);
    border: 1px dashed rgba(255, 255, 255, 0.2);
    border-radius: 0.5rem;
    display: none;
}
.context-label { font-size: 0.65rem; color: var(--accent); font-weight: 800; text-transform: uppercase; margin-bottom: 0.25rem; display: block; }
.context-title { font-size: 0.85rem; color: white; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* AUTH SECTION STYLES */
.user-profile {
    margin-top: auto;
    padding-top: 1rem;
    border-top: 1px solid rgba(255,255,255,0.1);
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.auth-card { display: flex; align-items: center; gap: 0.75rem; }

.avatar {
    width: 36px; height: 36px; background: var(--accent); border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    font-weight: 600; font-size: 0.9rem; overflow: hidden;
}
.avatar img { width: 100%; height: 100%; object-fit: cover; }

/* SIGN OUT BUTTON (DESKTOP DEFAULT) */
.btn-signout {
    background: rgba(255,255,255,0.1); 
    color: #94a3b8; 
    border: none; 
    padding: 0.4rem;
    font-size: 0.75rem; 
    cursor: pointer; 
    border-radius: 4px; 
    width: 100%; 
    margin-top: 2px;
    display: flex;
    align-items: center;
    justify-content: center;
}
.btn-signout:hover { color: white; background: rgba(255,255,255,0.2); }
.btn-signout span { display: inline; }
.btn-signout svg { display: none; }

/* SIGN IN BUTTON */
.btn-signin-sidebar {
    background: var(--surface); color: var(--primary); border: none; padding: 0.6rem;
    font-size: 0.85rem; font-weight: 700; cursor: pointer; display: flex; 
    align-items: center; justify-content: center; gap: 0.5rem; width: 100%; 
    border-radius: 4px; transition: background 0.2s;
}
.btn-signin-sidebar:hover { background: var(--accent)}

.spinner { border: 2px solid rgba(0,0,0,0.1); border-left-color: var(--accent); border-radius: 50%; width: 16px; height: 16px; animation: spin 1s linear infinite; display: none; }
@keyframes spin { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } }

/* --- MAIN CONTENT GLOBALS & CALCULATION LAYOUTS --- */
.main-content { flex-grow: 1; overflow-y: auto; padding: 2rem; scroll-behavior: smooth; background: var(--bg); }
.header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 2rem; text-align: left;}
.header h1, .page-title { font-size: 1.75rem; font-weight: 700; color: var(--primary); margin: 0; text-align: left; }
.btn-new { background: var(--accent); color: white; border: none; padding: 0.75rem 1.5rem; border-radius: 0.5rem; font-weight: 600; cursor: pointer; display: flex; align-items: center; gap: 0.5rem; text-decoration: none; }
.btn-new:hover { background: var(--accent-hover); }

/* Calculator Specific Grid & Cards */
.container { max-width: 100%; margin: 0 auto; padding-bottom: 3rem; }
.grid-layout { display: grid; grid-template-columns: 1fr 1fr; gap: 1.5rem; }
.card { background: var(--surface); border: 1px solid var(--border); border-radius: 0.75rem; padding: 1.5rem; margin-bottom: 1.5rem; box-shadow: 0 1px 3px rgba(0,0,0,0.05); }
.card h2 { margin: 0 0 1.5rem 0; font-size: 1.1rem; font-weight: 700; color: var(--primary); border-bottom: 1px solid var(--border); padding-bottom: 1rem; }

/* Inputs */
.input-group { margin-bottom: 1.25rem; }
.label-row { display: flex; justify-content: space-between; align-items: center; margin-bottom: 0.5rem; }
label { font-size: 0.85rem; font-weight: 600; color: var(--text-light); }
select, input { width: 100%; padding: 0.75rem; border: 1px solid var(--border); border-radius: 0.4rem; background: var(--surface); font-size: 0.95rem; color: var(--text); transition: 0.2s; }
select:focus, input:focus { border-color: var(--accent); outline: none; }

/* Diagrams */
.diagram-box { text-align: center; padding: 2rem; background: var(--surface); border-radius: 0.5rem; border: 1px solid var(--border); margin-bottom: 1.5rem; display: flex; justify-content: center; align-items: center; min-height: 200px; }
svg { max-width: 100%; height: auto; }
.caption { font-size: 0.8rem; color: var(--text-light); margin-top: 0.5rem; line-height: 1.4; }

/* Action Buttons */
.action-bar { display: flex; gap: 0.5rem; margin-top: 1.5rem; padding-top: 1rem; border-top: 1px solid var(--border); }
.btn-action { flex: 1; padding: 0.75rem; border: none; border-radius: 0.4rem; font-weight: 600; font-size: 0.9rem; cursor: pointer; color: white; display: flex; align-items: center; justify-content: center; gap: 0.4rem; transition: opacity 0.2s; }
.btn-excel { background: #166534; }
.btn-pdf { background: #e11d48; }
.btn-save { background: #7c3aed; }
.btn-action:hover { opacity: 0.9; }

/* --- MODALS & TOASTS --- */
.toast { visibility: hidden; min-width: 250px; margin-left: -125px; background-color: #1e293b; color: #fff; text-align: center; border-radius: 8px; padding: 16px; position: fixed; z-index: 2000; left: 50%; bottom: 30px; font-size: 14px; opacity: 0; transition: opacity 0.3s, bottom 0.3s; box-shadow: 0 4px 6px rgba(0,0,0,0.1); }
.toast.show { visibility: visible; opacity: 1; bottom: 50px; }

.modal-overlay { display: none; position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0,0,0,0.5); z-index: 3000; align-items: center; justify-content: center; backdrop-filter: blur(2px); }
.modal { background: var(--surface); padding: 2rem; border-radius: 0.75rem; width: 100%; max-width: 450px; position: relative; box-shadow: 0 20px 25px -5px rgba(0,0,0,0.1); }
.modal h3, .modal h2 { margin-top: 0; color: var(--primary); margin-bottom: 1.5rem; }
.modal-btn-group { margin-top: 1.5rem; display: flex; gap: 1rem; justify-content: flex-end; }

.btn-close { position: absolute; top: 1rem; right: 1rem; cursor: pointer; border: none; background: none; font-size: 1.5rem; color: #94a3b8; transition: color 0.2s; }
.btn-close:hover { color: var(--text); }

.btn-cancel { background: #f1f5f9; border: none; color: var(--text); padding: 0.75rem 1.25rem; border-radius: 0.4rem; cursor: pointer; font-weight: 600; }
.btn-confirm { background: var(--accent); border: none; color: white; padding: 0.75rem 1.25rem; border-radius: 0.4rem; cursor: pointer; font-weight: 600; }

.btn-google { background: var(--surface); color: var(--text); border: 1px solid var(--border); border-radius: 4px; padding: 0.75rem; font-size: 0.9rem; font-weight: 600; cursor: pointer; display: flex; align-items: center; justify-content: center; gap: 0.75rem; width: 100%; transition: background 0.2s; margin-bottom: 1.5rem; }
.btn-google:hover { background: var(--accent); }

input[type="email"], input[type="password"], input[type="text"] { width: 100%; padding: 0.75rem; border: 1px solid var(--border); border-radius: 0.5rem; margin-bottom: 1rem; font-size: 0.9rem; }
.btn-submit-login { background: var(--accent); color: white; border: none; padding: 0.75rem; border-radius: 0.5rem; font-weight: 600; cursor: pointer; width: 100%; }
.btn-submit-login:hover { background: var(--accent-hover); }

/* --- RESPONSIVE MOBILE LAYOUT --- */
@media (max-width: 850px) {
    .app-wrapper { flex-direction: column; height: auto; }
    .form-grid { grid-template-columns: 1fr; } /* Keep this: stacks settings fields */

    /* 1. TOP HEADER: Brand and User Profile */
    .sidebar { 
        width: 100%; 
        height: var(--nav-height-mobile); 
        padding: 0 1rem; 
        flex-direction: row; 
        justify-content: space-between; 
        align-items: center; 
        position: fixed;
        top: 0; left: 0; z-index: 1000;
        border-bottom: 1px solid rgba(255,255,255,0.1);
        box-shadow: 0 2px 10px rgba(0,0,0,0.2);
    }

    .brand { margin-bottom: 0; font-size: 1rem; }
    .brand svg { width: 18px; height: 18px; }

    /* 2. BOTTOM NAVIGATION BAR */
    .nav-links { 
        position: fixed;
        bottom: 0; left: 0; width: 100%;
        height: var(--nav-height-mobile);
        background: var(--primary);
        flex-direction: row; 
        justify-content: space-around;
        align-items: center;
        padding: 0 5px;
        z-index: 1000;
        border-top: 1px solid rgba(255,255,255,0.1);
    }

    .nav-item { padding: 0.5rem; flex-direction: column; justify-content: center; }
    .nav-item span { display: none; } /* Hide labels on mobile */
    .nav-item svg { width: 22px; height: 22px; margin: 0; opacity: 1; }

    /* Reset Upgrade Button for Mobile (Highlighted in Blue) */
    .nav-item.upgrade-btn { 
        margin-top: 0; 
        background: rgba(59, 130, 246, 0.08); 
        border: none; 
        padding: 0.5rem; 
    }
    .nav-item.upgrade-btn svg { 
        color: var(--accent); 
    }
    .nav-item.upgrade-btn.active { 
        background: var(--accent); 
    }
    .nav-item.upgrade-btn.active svg { 
        color: white; 
    }

    /* HIDE Secondary Links on Mobile Nav Bar */
    .nav-item[href="Contact.html"], 
    .nav-item[href="Settings.html"] { display: none; }

    .current-context-box { display: none !important; }

    /* 3. USER PROFILE (Top Right) */
    .user-profile { 
        display: flex !important; 
        margin-top: 0; padding-top: 0; border-top: none; 
        flex-direction: row; align-items: center; width: auto;
    }
    .user-profile .auth-card > div:last-child { display: none; } /* Hide name/email text */
    
    /* 4. SIGN OUT BUTTON (Mobile Icon Style) */
    .btn-signout { 
        width: 32px; height: 32px; 
        margin-top: 0; padding: 0; 
        margin-left: 10px;
    }
    .btn-signout span { display: none; } /* Hide "Sign Out" text */
    .btn-signout svg { display: block; width: 20px; height: 20px; }

    /* 5. CONTENT AREA ADJUSTMENTS */
    body { overflow: auto; }
    .main-content { 
        margin-top: var(--nav-height-mobile); 
        padding-bottom: calc(var(--nav-height-mobile) + 2rem); 
        padding-left: 1rem; padding-right: 1rem;
        overflow: visible; height: auto;
    }

    .container { grid-template-columns: 1fr; }
    
    .header { flex-direction: column; align-items: flex-start; gap: 1rem; }
    .btn-new { width: 100%; justify-content: center; }
    .grid-layout { grid-template-columns: 1fr; }


@media (max-width: 850px) {
            .dashboard-layout { grid-template-columns: 1fr; gap: 1rem; }
            .sidebar-right { position: static; }

/* Reset Upgrade Button for Mobile - Highlighted in Blue */
.nav-item.upgrade-btn { 
    margin-top: 0; 
    /* Optional: Add a very subtle blue background to make it pop even more */
    background: rgba(59, 130, 246, 0.08); 
    border: none; 
    padding: 0.5rem; 
}
.nav-item.upgrade-btn svg { 
    color: var(--accent); /* <--- This keeps the icon blue! */
}
.nav-item.upgrade-btn.active { 
    background: var(--accent); 
}
.nav-item.upgrade-btn.active svg { 
    color: white; 
}
            
            /* ADDED: Push header down so it isn't hidden by the new active project banner */
            .header { margin-top: 3rem; }

            /* ADDED: Mobile styling for active project indicator (Top Banner) */
            #currentProjectIndicator {
                display: none !important; /* Base hide to override sidebar.css default */
            }
            #currentProjectIndicator.show-mobile {
                display: flex !important;
                flex-direction: row;
                align-items: center;
                justify-content: space-between;
                position: fixed;
                top: 35px; /* Adjust based on your top nav height */
                left: 0;
                width: 100%;
                z-index: 998;
                background: #1e293b;
                border: none;
                border-bottom: 1px solid rgba(255,255,255,0.1);
                border-radius: 0;
                padding: 0.7rem 1rem;
                box-sizing: border-box;
                box-shadow: 0 4px 6px -1px rgba(0,0,0,0.15);
                gap: 10px;
            }
        
            /* 1. Ensure the label stays on the left and doesn't wrap */
            #currentProjectIndicator .context-label {
                margin-bottom: 0;
                font-size: 0.7rem;
                color: #94a3b8;
                white-space: nowrap; 
                display: flex;
                align-items: center;
                flex-shrink: 0; /* Prevents the label from getting squashed */
            }
        
            /* 2. Style the title to be the main focus on the right */
            #currentProjectIndicator .context-title {
                font-size: 0.85rem;
                font-weight: 600;
                color: #10b981;
                text-align: right;
                flex: 1; 
                white-space: nowrap; 
                overflow: hidden; 
                text-overflow: ellipsis; 
                /* max-width is handled by flex: 1 and gap */
            }
    
            /* 3. HIDDEN ON MOBILE: This stops the overlap */
            #currentProjectIndicator small {
                display: none !important;
            }

  /* Target the SELECT specifically to push it right and match font */
    #activeProjectSelector {
        font-size: 0.85rem !important; /* Forces match with label */
        text-align: right;
        text-align-last: right; /* Better way to force right-alignment on mobile */
        direction: ltr !important; /* FIX: Keeps the dropdown arrow on the right */
        flex: 1;
        max-width: 60%; /* Prevents long titles from hitting the label */
        color: #10b981;
        font-weight: 700;
    }
    
    /* You can also delete or update the option rule right below it */
    #activeProjectSelector option {
        direction: ltr;
    }

        }
    
}

            .live-indicator {
                display: inline-block;
                width: 8px;
                height: 8px;
                background: #10b981;
                border-radius: 50%;
                margin-right: 6px;
                box-shadow: 0 0 0 rgba(16, 185, 129, 0.4);
                animation: pulse 2s infinite;
            }
            @keyframes pulse {
                0% { box-shadow: 0 0 0 0px rgba(16, 185, 129, 0.7); }
                70% { box-shadow: 0 0 0 10px rgba(16, 185, 129, 0); }
                100% { box-shadow: 0 0 0 0px rgba(16, 185, 129, 0); }
            }



/* --- DARK MODE VARIABLES & OVERRIDES --- */
[data-theme="dark"] {
    --bg: #0f172a;           /* Dark slate background */
    --surface: #1e293b;      /* Slightly lighter slate for cards */
    --border: #334155;       /* Subtle dark border */
    --text: #f8fafc;         /* White text */
    --text-light: #94a3b8;   /* Muted gray text */
    --primary: #f8fafc;      /* Re-map primary text to white for headers */
    --code-bg: #020617;
    --code-text: #93c5fd;
}

/* Because --primary is now white in dark mode, we must explicitly keep the sidebar background dark */
[data-theme="dark"] .sidebar {
    background: #020617; /* Very dark background for sidebar */
    border-right: 1px solid var(--border);
}

/* Dark mode overrides for inputs and select dropdowns */
[data-theme="dark"] input, 
[data-theme="dark"] select {
    background: #0f172a;
    color: var(--text);
}

/* Override for the disabled email input */
[data-theme="dark"] input:disabled {
    background: #1e293b !important;
    opacity: 0.7;
}

/* Adjust the Danger Card for Dark Mode */
[data-theme="dark"] .danger-card {
    background: rgba(239, 68, 68, 0.05);
    border-color: rgba(239, 68, 68, 0.2);
}

/* General Secondary button dark mode adjustment */
[data-theme="dark"] .btn-secondary {
    background: #1e293b;
    border-color: #3b82f6;
    color: #60a5fa;
}
[data-theme="dark"] .btn-secondary:hover {
    background: #3b82f6;
    color: white;
}

/* Fix mobile sidebar/header background in dark mode */
[data-theme="dark"] @media (max-width: 850px) {
    .sidebar {
        background: #020617; /* Very dark background */
    }
}

/* Fix mobile bottom navigation bar in dark mode */
[data-theme="dark"] .nav-links {
    background: #020617;
}

/* Fix Textareas in dark mode (globally) */
[data-theme="dark"] textarea {
    background: #0f172a;
    color: var(--text);
}

/* Optional: Fix the background of the "Sign in on Dashboard" fallback button if logged out */
[data-theme="dark"] .user-profile button[onclick*='Dashboard.html'] {
    background: #1e293b !important;
    color: var(--text) !important;
    border: 1px solid var(--border) !important;
}

/* --- DARK MODE OVERRIDES FOR PROJECTS.HTML --- */

/* Make the Active Project card look good in dark mode */
[data-theme="dark"] .project-card.active {
    background: rgba(37, 99, 235, 0.08); /* Subtle transparent blue */
    border: 2px solid var(--accent);
}

/* Calculation Result Badge */
[data-theme="dark"] .calc-res {
    background: rgba(37, 99, 235, 0.15);
}

/* Icon button hover states */
[data-theme="dark"] .btn-icon:hover,
[data-theme="dark"] .btn-calc-action:hover {
    background: var(--border);
    color: var(--accent);
}

/* Delete button hover states */
[data-theme="dark"] .btn-icon.delete:hover,
[data-theme="dark"] .btn-calc-action.delete:hover {
    background: rgba(239, 68, 68, 0.15); /* Transparent red */
    border-color: var(--danger);
    color: var(--danger);
}

/* Form inputs inside the Modal */
[data-theme="dark"] .modal input {
    background: #0f172a;
    color: var(--text);
}

/* --- DARK MODE OVERRIDES FOR CLIENTS.HTML --- */

/* Form inputs inside the Modal */
[data-theme="dark"] .modal input,
[data-theme="dark"] .modal select,
[data-theme="dark"] .modal textarea {
    background: #0f172a;
    color: var(--text);
}

/* Edit button hover state on the client cards */
[data-theme="dark"] .edit-btn:hover {
    background: var(--border);
    color: var(--accent);
}

/* Adjust the internal stats row so it stands out slightly from the card surface */
[data-theme="dark"] .stat-row {
    background: #0f172a; 
}

/* Adjust the "AUTO" tag colors for dark mode */
[data-theme="dark"] .tag-auto {
    background: rgba(37, 99, 235, 0.15);
    color: #60a5fa;
}

/* Fix the "Delete Client" hover state to map to dark red */
[data-theme="dark"] .btn-danger:hover {
    background: rgba(239, 68, 68, 0.15);
    border: 1px solid var(--danger);
    color: var(--danger);
}
[data-theme="dark"] .btn-danger:disabled {
    background: #451a1a;
    color: #9ca3af;
}

/* --- DARK MODE OVERRIDES FOR DASHBOARD --- */

/* 1. Eurocode Labels (Fixes white-on-white invisible text) */
[data-theme="dark"] .section-header span.ec-label {
    background: rgba(255, 255, 255, 0.1);
    color: var(--text-light);
}

/* 2. Standard Icon Boxes */
[data-theme="dark"] .icon-box {
    background: rgba(37, 99, 235, 0.15) !important;
    color: #60a5fa !important;
}

/* 3. Special Icon Boxes (Keep Timber green and Seismic red, but dark-mode friendly) */
[data-theme="dark"] #timberToolCard .icon-box {
    background: rgba(34, 197, 94, 0.15) !important;
    color: #4ade80 !important;
}
[data-theme="dark"] #seismicToolCard .icon-box {
    background: rgba(239, 68, 68, 0.15) !important;
    color: #f87171 !important;
}

/* 4. Badges (Ready & Dev) */
[data-theme="dark"] .badge-ready {
    background: rgba(34, 197, 94, 0.15);
    color: #4ade80;
}
[data-theme="dark"] .badge-dev {
    background: rgba(249, 115, 22, 0.15);
    color: #fb923c;
    border-color: rgba(249, 115, 22, 0.2);
}

/* Overrides the JS-injected yellow "PRO ONLY" badge */
[data-theme="dark"] .badge[style*="background-color: rgb(254, 240, 138)"],
[data-theme="dark"] .badge[style*="background-color: #fef08a"] {
    background-color: rgba(234, 179, 8, 0.15) !important;
    color: #fde047 !important;
}

/* 5. Right Sidebar Action Buttons */
[data-theme="dark"] .btn-action {
    background: rgba(255, 255, 255, 0.05);
    border-color: var(--border);
    color: var(--text);
}
[data-theme="dark"] .btn-action:hover {
    background: rgba(255, 255, 255, 0.1);
    color: var(--accent);
}

/* 6. Auth Modal Inputs */
[data-theme="dark"] .modal input {
    background: #0f172a;
    color: var(--text);
    border-color: var(--border);
}

 /* --- SVG FORKLIFT DIAGRAM RECOLORING FOR DARK MODE --- */
[data-theme="dark"] .diagram-box path[fill="#e2e8f0"],
[data-theme="dark"] .diagram-box rect[fill="#e2e8f0"] {
    fill: #1e293b; /* Darker forklift body */
    stroke: #64748b;
}
[data-theme="dark"] .diagram-box line[stroke="#334155"] {
    stroke: #94a3b8; /* Lighter ground line */
}
[data-theme="dark"] .diagram-box rect[fill="#334155"],
[data-theme="dark"] .diagram-box circle[fill="#334155"] {
    fill: #94a3b8; /* Lighter wheels */
}
[data-theme="dark"] .diagram-box text[fill="#334155"] {
    fill: #94a3b8; /* Lighter text */
}

/* =========================================================
   DARK MODE OVERRIDES FOR CALC-STYLES.CSS ELEMENTS
   ========================================================= */

/* 1. Info Tips, Clauses, & Equations */
[data-theme="dark"] .intro-box { background: rgba(37, 99, 235, 0.1); border-color: rgba(37, 99, 235, 0.2); }
[data-theme="dark"] .intro-box h3, [data-theme="dark"] .intro-box p, [data-theme="dark"] .intro-box ul { color: #93c5fd; }
[data-theme="dark"] .formula-box { background: #020617; color: #93c5fd; border-left-color: var(--accent); }
[data-theme="dark"] .clause-badge { background: rgba(37, 99, 235, 0.15); color: #60a5fa; border-color: rgba(37, 99, 235, 0.3); }
[data-theme="dark"] .clause-title, [data-theme="dark"] .equation { color: var(--primary); }
[data-theme="dark"] .coeff-val { background: rgba(37, 99, 235, 0.15); color: #93c5fd; }

/* 2. Checkboxes & Toggles */
[data-theme="dark"] .checkbox-label { background: rgba(255, 255, 255, 0.05); border-color: var(--border); }
[data-theme="dark"] .toggle-row { background: rgba(255, 255, 255, 0.05); }
[data-theme="dark"] .toggle-row:hover { background: rgba(255, 255, 255, 0.1); }
[data-theme="dark"] .toggle-row:has(input:checked) { background: rgba(37, 99, 235, 0.15); border-color: var(--accent); }

/* 3. Table Headers & Borders (U-Value, Estimator, Breakdowns) */
[data-theme="dark"] th, 
[data-theme="dark"] .layer-table th, 
[data-theme="dark"] .boq-table th, 
[data-theme="dark"] .detail-table th, 
[data-theme="dark"] .spec-table th,
[data-theme="dark"] .breakdown-table th { 
    background: #0f172a; 
    color: var(--text-light); 
    border-color: var(--border); 
}
[data-theme="dark"] td, 
[data-theme="dark"] .layer-table td, 
[data-theme="dark"] .boq-table td, 
[data-theme="dark"] .detail-table td, 
[data-theme="dark"] .spec-table td,
[data-theme="dark"] .breakdown-table td { 
    border-color: var(--border); 
}
[data-theme="dark"] .breakdown-table tr:hover { background: rgba(255, 255, 255, 0.05); }

/* 4. Visualizers & Canvas Boxes */
[data-theme="dark"] .canvas-box, 
[data-theme="dark"] .visualizer-box { 
    background: rgba(255, 255, 255, 0.02); 
    border-color: var(--border); 
}
[data-theme="dark"] .visualizer-title { 
    background: rgba(15, 23, 42, 0.8); 
    color: var(--text-light); 
}

/* 5. Special Result Containers (Carbon, Checklists, Logistics) */
[data-theme="dark"] .check-container { background: rgba(255, 255, 255, 0.02); border-color: var(--border); }
[data-theme="dark"] .check-item:hover { background: rgba(255, 255, 255, 0.05); border-color: var(--border); }
[data-theme="dark"] .carbon-display { background: rgba(34, 197, 94, 0.1); border-color: rgba(34, 197, 94, 0.2); }
[data-theme="dark"] .carbon-val { color: #4ade80; }
[data-theme="dark"] .logistics-box { background: rgba(34, 197, 94, 0.05); border-color: rgba(34, 197, 94, 0.2); }

/* 6. Fix Result Row Total Lines */
[data-theme="dark"] .result-row:last-of-type { 
    color: var(--primary); 
    border-top-color: var(--border); 
}

/* =========================================================
   DARK MODE OVERRIDES FOR STEEL BEAM & REMAINING BUTTONS
   ========================================================= */

/* 1. Fix the global Button styling (since --primary becomes white) */
[data-theme="dark"] button:not(.btn-outline):not(.btn-cancel):not(.btn-signout):not(.btn-confirm):not(.btn-close-modal) {
    background: var(--accent) !important; /* Use blue instead of white */
    color: white !important;
}

/* 2. Fix the "PDF Report" Outline Button */
[data-theme="dark"] .btn-outline {
    background: rgba(255, 255, 255, 0.05) !important;
    color: #93c5fd !important;
    border-color: rgba(59, 130, 246, 0.5) !important;
}
[data-theme="dark"] .btn-outline:hover {
    background: rgba(59, 130, 246, 0.15) !important;
}

/* 3. Fix the Carbon mass text (var(--secondary) is too dark) */
[data-theme="dark"] #res_carbon {
    color: #94a3b8 !important; /* Lighter slate gray */
}

/* 4. Fix Inline #eee Separators */
[data-theme="dark"] div[style*="border-top: 1px solid #eee"] {
    border-top-color: var(--border) !important;
}

/* 5. Fix the hardcoded Cancel button in the PDF Modal */
[data-theme="dark"] .modal button[style*="background:#f1f5f9"] {
    background: rgba(255, 255, 255, 0.1) !important;
    color: white !important;
}

/* 6. MAGIC FIX FOR THE CANVAS DIAGRAM */
/* This inverts the dark lines to light lines, while keeping reds/blues/greens intact */
[data-theme="dark"] .canvas-wrapper canvas {
    filter: invert(0.9) hue-rotate(180deg);
}