:root {
        --main-color: #44bc81;
        --secondary-color: #2f845a;
        --secondary-color-darker: #1e563a;
        --premium-color: #f59e0b; /* Amber/Gold */
        --pro-color: #1E4D4D; /* NEW: Dark Teal for Pro branding */
        --pavement-color: #44bc81;
        --edging-color: #2f845a;
        --utilities-color: #68d3a0;
        --misc-color: #1e563a;
        --earthworks-color: #f59e0b;
        --construction-color: #d97706;
        --general-color: #f97316;
        --haulage-color: #a3e6c8;
    }
    body {
        font-family: 'Instrument Sans', sans-serif;
        font-size: 0.8rem; /* Reduced by 20% from 0.8rem */
        min-height: 100vh;
    }

    h1, h2, h3, h4, h5, h6 {
        font-family: 'Montserrat', sans-serif;
        font-weight: 800;
    }

    .table-input {
        width: 100%;
        padding: 0.5rem;
        border: 1px solid #d1d5db;
        border-radius: 0.375rem;
        text-align: right;
        transition: border-color 0.2s;
    }

    .table-input:focus {
        outline: none;
        border-color: var(--main-color);
        box-shadow: 0 0 0 1px var(--main-color);
        background-color: #f0fdf4; /* A very light green */
    }
    .table-select {
        width: 100%;
        padding: 0.5rem;
        border: 1px solid #d1d5db;
        border-radius: 0.375rem;
        background-color: white;
    }
    .table-select:focus {
        outline: none;
        border-color: var(--main-color);
        box-shadow: 0 0 0 1px var(--main-color);
    }

        /* NEW: Add subtle hover effect for all inputs and selects */
    .table-input:hover,
    .table-select:hover {
        border-color: #9ca3af; /* gray-400 */
    }

    /* NEW: Style for the first column (Item/Layer description) */
    .item-description-cell {
        width: 250px; /* Adjust this value as needed for your ideal width */
    }

    /* Target the input inside the description cell to override text alignment */
    .item-description-cell .table-input {
        text-align: left;
    }
    .output-cell {
        background-color: #f3f4f6;
        text-align: right;
        padding: 0.5rem;
        border-radius: 0.375rem;
        font-weight: 500;
    }

    .actions-cell {
        min-width: 120px; /* Provides enough space for 3 buttons */
        white-space: nowrap; /* Prevents buttons from wrapping */
    }

    /* --- BUTTON STYLES --- */
    /* 1. Primary Button (Solid) */
    .primary-btn {
        background-color: var(--main-color);
        color: white;
        padding: 0.5rem 1rem;
        border-radius: 0.375rem;
        font-weight: 500;
        cursor: pointer;
        transition: background-color 0.2s;
    }
    .primary-btn:hover {
        background-color: var(--secondary-color);
    }

    /* 2. Secondary "Ghost" Buttons */
    .ghost-btn {
        background-color: transparent;
        color: var(--secondary-color);
        border: 1px solid var(--main-color);
        padding: 0.5rem 1rem;
        border-radius: 0.375rem;
        font-weight: 500;
        cursor: pointer;
        transition: all 0.2s ease-in-out;
        text-align: center !important;
    }
    .ghost-btn:hover {
        background-color: var(--main-color);
        color: white;
    }
    
    .secondary-btn {
        background-color: #6b7280; /* gray-500 */
        color: white;
        padding: 0.5rem 1rem;
        border-radius: 0.375rem;
        font-weight: 500;
    }

    /* 3. Tertiary "Icon" Buttons */
    .header-icon-btn {
        background-color: transparent;
        color: #6b7280; /* Default state: gray-500 */
        padding: 0.5rem;
        border-radius: 0.375rem;
        transition: all 0.2s ease-in-out;
    }
    .header-icon-btn:hover {
        background-color: #f1f5f9; /* slate-100 */
        color: var(--main-color); /* Hover state: brand green */
        transform: scale(1.1);
    }
    
    /* Consistent Focus and Active States for ALL buttons */
    .primary-btn:focus,
    .ghost-btn:focus,
    .header-icon-btn:focus {
        outline: none;
        box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.9), 0 0 0 4px var(--main-color);
    }

    .primary-btn:active,
    .ghost-btn:active,
    .header-icon-btn:active {
        transform: scale(0.98);
        filter: brightness(0.95);
    }

    .tab-button.active {
        border-bottom-color: var(--main-color);
        color: var(--main-color);
        font-weight: 600;
    }

    .tab-button {
      color: #64748b;
        font-weight: 500;
        border-bottom: 2px solid transparent;
        transition: color 0.2s ease-in-out, border-color 0.2s ease-in-out;
    }

    .tab-button:not(.active):hover {
        color: #334155;
        border-bottom-color: #cbd5e1; /* slate-300 */
    }

    .add-row-btn {
        background-color: var(--main-color);
        color: white;
        padding: 0.5rem 1rem;
        border-radius: 0.375rem;
        font-weight: 500;
        transition: background-color 0.2s;
    }
    .add-row-btn:hover {
        background-color: var(--secondary-color);
    }

    .remove-row-btn { /*also used for other destructive actions */
        background-color: #ef4444;
        color: white;
        padding: 0.25rem 0.5rem;
        border-radius: 0.375rem;
        line-height: 1rem;
    }

    .actions-cell .remove-row-btn { /*reduced font size for the actual remove row button */
        font-size: 0.75rem;
    }
    .remove-row-btn:hover {
        background-color: #dc2626;
    }

    /* scenario modal tweaks */
    #scenario-modal .ghost-btn {
        padding: 0.25rem 0.75rem;
        border-radius: 0.375rem;
    }

    #scenario-modal .remove-row-btn {
        padding: 0.25rem 0.75rem;
        border-radius: 0.375rem;
        line-height: inherit;
    }
    /*
    .epd-btn {
        background-color: #6b7280;
        color: white;
        padding: 0.25rem 0.5rem;
        border-radius: 0.375rem;
        font-size: 0.75rem;
        line-height: 1rem;
    }
    .epd-btn:not(.active):hover {
    background-color: #4b5563;
    }
    .epd-btn.active {
        background-color: var(--main-color);
    }
    .epd-btn.active:hover {
        background-color: var(--secondary-color);
    }
    .scenario-btn {
        background-color: var(--secondary-color);
    }
    .scenario-btn:hover {
        background-color: var(--secondary-color-darker);
    }

    .duplicate-row-btn {
        background-color: #9ca3af; 
        color: white;
        padding: 0.25rem 0.5rem;
        border-radius: 0.375rem;
        font-size: 0.75rem;
        line-height: 1rem;
    }
    .duplicate-row-btn:hover {
        background-color: #6b7280;
    }
    */

    /* --- NEW: IN-TABLE GHOST-STYLE DELETE BUTTON --- */

    /* * This overrides the solid red style *only* for buttons 
    * inside the table's "actions-cell". Your modal buttons 
    * will remain solid red.
    */
    .actions-cell .remove-row-btn {
        background-color: transparent;
        color: #ef4444; /* red-500 */
        border: 1px solid #fca5a5; /* red-300 */
        font-weight: 500;
        transition: all 0.2s ease-in-out;
    }

    /* New hover state for the in-table button */
    .actions-cell .remove-row-btn:hover {
        background-color: #fee2e2; /* red-50 */
        color: #b91c1c; /* red-700 */
        border-color: #ef4444; /* red-500 */
    }

    /* --- NEW: IN-TABLE GHOST BUTTONS --- */

    /* * This block targets your existing .epd-btn and .duplicate-row-btn 
    * classes and applies the new "ghost" style, including all sizing.
    */
    .epd-btn,
    .duplicate-row-btn {
        background-color: transparent;
        color: #6b7280; /* gray-500 */
        border: 1px solid #d1d5db; /* gray-300 */
        font-weight: 500;
        
        /* ADDING THESE MISSING PROPERTIES: */
        padding: 0.25rem 0.5rem;
        border-radius: 0.375rem;
        font-size: 0.75rem;
        line-height: 1rem;
        transition: all 0.2s ease-in-out;
    }

    .epd-btn:hover,
    .duplicate-row-btn:hover {
        background-color: #f3f4f6; /* gray-100 */
        border-color: #9ca3af; /* gray-400 */
        color: #1f2937; /* gray-800 */
    }

    /* EPD active state is still green */
    .epd-btn.active {
        background-color: var(--main-color);
        border-color: var(--main-color);
        color: white;
    }
    .epd-btn.active:hover {
        background-color: var(--secondary-color);
        border-color: var(--secondary-color);
        color: white;
    }

    #tour-finish .primary-btn {
        visibility: hidden;
        display: none;
    }

    /* This targets the table *itself* that has the .responsive-table class */
    @media (max-width: 1024px) {
            table.responsive-table {
            min-width: 900px; 
            width: auto;      /* This overrides Tailwind's w-full */
        }
    }

    /* --- NEW: AUTH MODAL BRANDING --- */
    #auth-submit-btn {
        background-color: var(--main-color);
        transition: background-color 0.2s ease-in-out;
    }
    #auth-submit-btn:hover {
        background-color: var(--secondary-color);
    }
    .auth-modal-link {
        color: var(--main-color);
        transition: color 0.2s ease-in-out;
    }
    .auth-modal-link:hover {
        color: var(--secondary-color);
    }

    /* --- ONBOARDING TOUR STYLES --- */
    #tour-spotlight {
        position: fixed;
        border-radius: 0.375rem;
        box-shadow: 0 0 0 9999px rgba(0, 0, 0, 0.5);
        transition: all 0.3s ease-in-out;
        pointer-events: none; /* Allows clicks to go through */
        z-index: 9998; /* Below the modal */
    }

    #tour-modal {
        transition: opacity 0.3s ease-in-out, transform 0.3s ease-in-out;
        z-index: 9999; /* Above the spotlight */
    }
    .tour-step h3 {
        font-family: 'Montserrat', sans-serif;
        font-weight: 700;
        font-size: 1.125rem;
        color: #1e293b;
    }
     .tour-step p {
        color: #475569;
        margin-top: 0.5rem;
     }

    /* --- PAYWALL STYLES (UPDATED) --- */
    
    /* Style the locked button to be clickable */
    .premium-lock {
        cursor: pointer;
        position: relative;
        /* REMOVED opacity and filter */
    }

    /* UPDATED: Badge is now just the colored icon */
    .premium-lock::after {
        content: ''; /* Empty, we use background-image */
        position: absolute;
        top: -8px;
        right: -8px;
        width: 18px; /* Badge size */
        height: 18px;
        background-color: transparent; /* REMOVED background color */
        /* URL-encoded version of your SVG with fill set to premium-color */
        background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none'%3E%3Cpath opacity='1' d='M22 12C22 17.5228 17.5228 22 12 22C6.47715 22 2 17.5228 2 12C2 6.47715 6.47715 2 12 2C17.5228 2 22 6.47715 22 12Z' fill='%231E4D4D'%3E%3C/path%3E%3Cpath d='M10.4127 8.49812L10.5766 8.20419C11.2099 7.06807 11.5266 6.5 12 6.5C12.4734 6.5 12.7901 7.06806 13.4234 8.20419L13.5873 8.49813C13.7672 8.82097 13.8572 8.98239 13.9975 9.0889C14.1378 9.19541 14.3126 9.23495 14.6621 9.31402L14.9802 9.38601C16.2101 9.66428 16.825 9.80341 16.9713 10.2739C17.1176 10.7443 16.6984 11.2345 15.86 12.215L15.643 12.4686C15.4048 12.7472 15.2857 12.8865 15.2321 13.0589C15.1785 13.2312 15.1965 13.4171 15.2325 13.7888L15.2653 14.1272C15.3921 15.4353 15.4554 16.0894 15.0724 16.3801C14.6894 16.6709 14.1137 16.4058 12.9622 15.8756L12.6643 15.7384C12.337 15.5878 12.1734 15.5124 12 15.5124C11.8266 15.5124 11.663 15.5878 11.3357 15.7384L11.0378 15.8756C9.88633 16.4058 9.31059 16.6709 8.92757 16.3801C8.54456 16.0894 8.60794 15.4353 8.7347 14.1272L8.76749 13.7888C8.80351 13.4171 8.82152 13.2312 8.76793 13.0589C8.71434 12.8865 8.59521 12.7472 8.35696 12.4686L8.14005 12.215C7.30162 11.2345 6.88241 10.7443 7.02871 10.2739C7.17501 9.80341 7.78994 9.66427 9.01977 9.38601L9.33794 9.31402C9.68743 9.23495 9.86217 9.19541 10.0025 9.0889C10.1428 8.98239 10.2328 8.82097 10.4127 8.49812Z' fill='white'%3E%3C/path%3E%3C/svg%3E");
        background-repeat: no-repeat;
        background-position: center;
        background-size: 16px 16px; /* Adjust size of the icon */
        border-radius: 0.25rem;
        z-index: 100;
    }

    /* Style for tab button "PRO" badge */
    .tab-button.premium-lock::after {
        right: 4px;
        top: 2px;
    }
    
    .account-tier-badge {
        font-size: 0.75rem;
        font-weight: 600;
        padding: 0.25rem 0.75rem;
        border-radius: 9999px;
        text-transform: uppercase;
        letter-spacing: 0.05em;
    }
    
    /* UPDATED: Badge style for "Pro Plan" (now uses dark teal) */
    .pro-plan-badge {
        background-color: var(--pro-color);
        color: white;
        padding: 0.5rem 1rem;
    }
    
    /* Button style for "Upgrade to Pro" */
    .upgrade-btn-header {
        background-color: var(--main-color);
        color: white;
        padding: 0.5rem 1rem;
        border-radius: 0.375rem;
        font-weight: 600;
        cursor: pointer;
        transition: all 0.2s ease-in-out;
        white-space: nowrap;
        border: 1px solid transparent; 
    }
    .upgrade-btn-header:hover {
        background-color: var(--secondary-color);
        transform: translateY(-1px);
        box-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
    }

    .pro-feature-item {
        display: flex;
        align-items: flex-start; /* Aligns icon with the top of the text */
        gap: 0.75rem; /* Space between icon and text */
        color: #334155; /* slate-700 */
    }
    .pro-feature-icon {
        flex-shrink: 0; /* Prevents the icon from shrinking */
        width: 1.25rem; /* 20px */
        height: 1.25rem; /* 20px */
        color: var(--main-color); /* Worsley Green */
    }

    /* --- NEW: SAVE STATUS STYLES --- */
    #save-status {
    /* This ensures the text/icon change is smooth */
    transition: opacity 0.3s ease-in-out;
    }

    #save-status .icon-spin {
    animation: spin 1s linear infinite;
    }

    #save-status.status-fade-out {
    opacity: 0;
    transition: opacity 0.5s 2s ease-in-out; /* 0.5s fade, 2s delay */
    }

    @keyframes spin {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
    }

    /* --- NEW: IMPROVED "MY PROJECTS" MODAL STYLES --- */
    .project-list-header {
        display: flex;
        justify-content: space-between;
        padding: 0.5rem 1rem;
        font-size: 0.75rem; /* text-xs */
        font-weight: 600; /* font-semibold */
        color: #64748b; /* slate-500 */
        text-transform: uppercase;
        letter-spacing: 0.05em;
        border-bottom: 1px solid #e2e8f0; /* slate-200 */
    }

    .project-item {
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 0.75rem 1rem;
        border-radius: 0.375rem; /* rounded-md */
        transition: background-color 0.2s;
    }

    .project-item:hover {
        background-color: #f8fafc; /* slate-50 */
    }

    .project-item-name {
        display: flex;
        flex-direction: column;
    }

    .project-item-details {
        display: flex;
        align-items: center;
        gap: 0.75rem; /* space-x-3 */
        flex-shrink: 0;
    }

    /* Tweak your existing buttons for this context */
    .project-item-details .ghost-btn {
        padding: 0.25rem 0.75rem;
    }
    .project-item-details .remove-row-btn {
        padding: 0.375rem; /* p-1.5 */
        color: #6b7280; /* gray-500 */
        background-color: transparent;
    }
    .project-item-details .remove-row-btn:hover {
        color: #dc2626; /* red-600 */
        background-color: #fee2e2; /* red-50 */
    }

    .project-list-empty {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        padding: 3rem 1rem;
        text-align: center;
        border-radius: 0.375rem;
        border: 2px dashed #e2e8f0; /* slate-200 */
        margin-top: 1rem;
    }

    /* --- NEW/MODIFIED: AI Teaser Styles --- */
    .ai-teaser-container {
        position: relative;
        overflow: hidden;
        border-radius: 0.5rem;
        background-color: transparent; 
    }
    .ai-teaser-headline {
        font-family: 'Montserrat', sans-serif;
        font-weight: 700;
        font-size: 1.125rem;
        /*color: var(--pro-color); /* Dark Teal */
    }
    .ai-teaser-text {
        color: #475569; /* slate-600 */
        margin-top: 0.5rem;
        margin-bottom: 1rem;
    }
    .ai-teaser-button {
        display: inline-flex; /* Use inline-flex to fit content */
        background-color: var(--main-color);
        color: white;
        padding: 0.5rem 1.25rem;
        border-radius: 0.375rem;
        font-weight: 600;
        transition: all 0.2s ease-in-out;
        text-decoration: none;
    }
    .ai-teaser-button:hover {
        background-color: var(--secondary-color);
        transform: translateY(-1px);
    }
    .blurred-text {
        color: #cbd5e1; /* slate-300 */
        filter: blur(1px);
        user-select: none;
        margin-top: 1rem;
        line-height: 1.2;
        border-top: 1px solid #e2e8f0; /* slate-200 */
        padding-top: 1rem;
    }

    /* --- NEW: APP HEADER STYLES (Mobile First) --- */
    .app-header {
        background-color: white;
        border-bottom: 1px solid #e2e8f0; /* slate-200 */
        top: 0;
        z-index: 10;
        padding: 0.75rem 1rem;
    }
    .app-header-main {
        display: flex;
        flex-wrap: wrap; /* Allows sections to wrap */
        justify-content: space-between;
        align-items: center;
        gap: 1rem;
    }
    .app-header-left {
        display: flex;
        align-items: center;
        gap: 1rem;
        min-width: 0; 
        flex-grow: 1;
    }
    .app-header-right {
        /* On mobile, this container takes the full width */
        width: 100%;
        flex-shrink: 0;
    }
    .header-actions {
        display: flex;
        /* On mobile, stack the buttons vertically */
        flex-direction: column; 
        gap: 0.75rem;
        width: 100%;
    }
    @media (max-width: 1024px) {
        .header-actions .primary-btn, .secondary-btn:not(#tour-modal .secondary-btn), .ghost-btn {
            /* On mobile, buttons are full-width and text is centered */
            width: 100%;
            justify-content: center;
            white-space: nowrap;
        }
    }
    .header-divider {
        /* Hide the divider on mobile by default */
        display: none;
    }

    /* Mobile-first: Style the icon group as a toolbar */
    .header-icon-group {
        display: flex;
        justify-content: space-around;
        width: 100%;
        background-color: #f8fafc; /* slate-50 */
        padding: 0.5rem;
        border-radius: 0.5rem;
        align-items: center;
    }

    .app-branding {
        display: flex;
        align-items: center;
        gap: 0.75rem;
        padding-right: 1rem;
        border-right: 1px solid #e2e8f0; /* slate 200 */
    }
    .app-logo {
        height: 2rem;
        width: auto;
    }
    .app-title {
        font-size: 1.125rem;
        font-weight: 800;
        color: #1e293b;
        white-space: nowrap;
    }
    .app-project-name {
        flex-grow: 1; 
        min-width: 0;
    }
    .app-project-name input {
        font-size: 1.5rem;
        font-weight: 700;
        color: #1e293b;
        border: none;
        padding: 0;
        width: 100%;
    }
    .app-project-name input:focus {
        outline: none;
        box-shadow: 0 0 0 2px var(--main-color);
    }

    .beta-badge {
        background-color: #2f845a;
        color: white;
        font-weight: 600; 
        font-size: 0.7rem; 
        padding: 2px 6px; 
        border-radius: 9px;
    }

    /* On smaller screens, stack the project name below the branding */
    @media (max-width: 640px) {
        .app-header-left {
            flex-direction: column;
            align-items: flex-start;
            width: 100%;
        }
        .app-branding {
            border-right: none;
            padding-bottom: 0.5rem; /* Add some space below branding */
            width: 100%;
        }
        .app-project-name {
            width: 100%;
            padding-left: 0.25rem;
        }
    }

    /* --- DESKTOP OVERRIDES --- */
    /* On larger screens, switch to a horizontal layout */
    @media (min-width: 1024px) {
        /* NEW: Make header sticky on desktop only */
        .app-header {
            position: sticky;
            top: 0;
            z-index: 10;
        }
        .app-header-right {
            width: auto; /* Allow the right section to shrink to its content size */
        }
        /* NEW: This targets the container of the desktop buttons and divider */
        .app-header-right > .hidden {
            align-items: stretch; /* This makes the divider full height */
        }
        .header-actions {
            flex-direction: row; /* Buttons are side-by-side */
            width: auto;
        }
        .header-actions .primary-btn {
            width: auto; /* Buttons shrink to their content size */
        }
        .header-divider {
            display: block; /* Show the vertical divider */
            border-left: 1px solid #e2e8f0; /* slate-200 */
            margin: 0 0.5rem;
        }
        .header-icon-group {
            display: contents; /* Makes the wrapper disappear, promoting children to the main flex container */
        }
        .secondary-btn, .ghost-btn {
            width: auto;
        }
    }

    /*
    * This snippet overrides the default browser autofill style (gray/blue background)
    * for the project name input field, ensuring it remains transparent.
    */
    input#project-name:-webkit-autofill,
    input#project-name:-webkit-autofill:hover, 
    input#project-name:-webkit-autofill:focus, 
    input#project-name:-webkit-autofill:active {
        -webkit-text-fill-color: #1e293b; /* Corresponds to text-slate-800 */
        -webkit-box-shadow: 0 0 0px 1000px #ffffff inset; /* Forces a white background */
        transition: background-color 5000s ease-in-out 0s;
    }

    /* --- INTERACTIVITY & TRANSITIONS --- */
    
    /* 1. Buttons */
    .add-row-btn,
    .remove-row-btn,
    .primary-btn,
    .epd-btn,
    .scenario-btn,
    .duplicate-row-btnm
    .header-icon-btn:focus
    .secondary-btn:focus {
        /* Adds a smooth transition to background color changes */
        transition: background-color 0.2s ease-in-out, box-shadow 0.2s ease-in-out;
    }

    /* Adds a focus ring for accessibility on keyboard navigation */
    .add-row-btn:focus,
    .remove-row-btn:focus,
    .primary-btn:focus,
    .epd-btn:focus,
    .scenario-btn:focus,
    .duplicate-row-btn:focus,
    .header-icon-btn:focus
    .secondary-btn:focus { 
        outline: none;
        box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.9), 0 0 0 4px var(--main-color);
    }

    /* NEW: Active (pressed) state for all buttons */
    .add-row-btn:active,
    .remove-row-btn:active,
    .primary-btn:active,
    .epd-btn:active,
    .scenario-btn:active,
    .duplicate-row-btn:active,
    .header-icon-btn:active {
        transform: scale(0.98);
        filter: brightness(0.95);
    }

    .primary-btn:hover, .ghost-btn:hover {
        transform: translateY(-1px);
        box-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
    }

    .secondary-btn:hover {
        background-color: #4b5563; /* gray-600 */
    }

    /* 2. Table Rows */
    /* CORRECTED: Targets the cells directly for a reliable hover effect */
    .table-auto tbody tr td {
        transition: background-color 0.15s ease-in-out;
    }

    .table-auto tbody tr:hover td {
        background-color: #f8fafc; /* Equivalent to Tailwind's slate-50 */
    }

    /* 3. Modals */
    /* This creates the fade-in and scale-up effect when a modal appears */
    #epd-modal, #scenario-modal, #confirmation-modal {
        transition: opacity 0.2s ease-out;
    }

    #epd-modal > div, #scenario-modal > div, #confirmation-modal > div { /* This targets the inner panel */
        transition: transform 0.2s ease-out;
    }

    #confirmation-modal {
      z-index: 60; /* Higher than the default z-50 */
    }

    /* --- NEW: KPI CARD STYLES --- */
    .kpi-card {
        background-color: white;
        padding: 1rem;
        border-radius: 0.5rem;
        box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px -1px rgba(0, 0, 0, 0.1);
    }
    .kpi-title {
        font-size: 0.75rem; /* text-xs */
        font-weight: 500; /* font-medium */
        color: #64748b; /* slate-500 */
        margin-bottom: 0.25rem;
    }
    .kpi-value {
        font-size: 1.5rem; /* text-2xl */
        font-weight: 800; /* font-extrabold */
        color: #1e293b; /* slate-800 */
        line-height: 1.2;
    }
    .kpi-percent {
        font-size: 0.875rem; /* text-sm */
        font-weight: 600; /* font-semibold */
        color: #475569; /* slate-600 */
    }

    /* --- NEW: IN-LINE BAR CHART STYLES --- */
    .inline-bar-container {
        width: 100%;
        height: 8px;
        background-color: #f1f5f9; /* slate-100 */
        border-radius: 9999px;
        overflow: hidden;
    }
    .inline-bar {
        height: 100%;
        width: 0%; /* Default width */
        border-radius: 9999px;
        transition: width 0.5s ease-out; /* Smooth animation */
    }

    /* --- NEW: SCENARIO COMPARISON STYLES --- */
    /* Style for the new % Difference column */
    .diff-positive {
        color: #dc2626; /* Red-600 */
        font-weight: 600;
    }
    .diff-negative {
        color: #16a34a; /* Green-600 */
        font-weight: 600;
    }
    .diff-neutral {
        color: #64748b; /* Slate-500 */
    }

    /* --- TYPOGRAPHY STYLES --- */
    .prose-content h2 {
        font-size: 1.25rem; /* text-xl */
        font-weight: 600; /* semibold */
        margin-bottom: 1rem;
        color: #000;
    }
    .prose-content h3 {
        font-size: 1rem; /* text-base */
        font-weight: 600;
        margin-top: 1.5rem;
        margin-bottom: 0.5rem;
        color: #1f2937; /* gray-800 */
    }
    .prose-content p,
    .prose-content li {
        font-size: 0.875rem; /* text-sm */
        color: #374151; /* gray-700 */
    }
    .prose-content p {
        margin-bottom: 1rem;
    }
    .prose-content ul,
    .prose-content ol {
        margin-top: 0.5rem;
        margin-bottom: 1rem;
        list-style-position: outside; /* This is the key fix */
        padding-left: 1.5rem; /* Indents the entire list */
    }
    .prose-content ul {
        list-style-type: disc;
    }
    .prose-content ol {
        list-style-type: decimal;
    }
    .prose-content li {
        padding-left: 0.5rem; /* Space between marker and text */
        margin-bottom: 0.5rem;
    }

    /* --- NEW: STYLES FOR EPD MODAL LINK --- */
    .external-link {
        display: inline-flex; /* Use flexbox for easy alignment */
        align-items: center;
        text-decoration: underline;
        color: var(--main-color);
        font-weight: 500;
        transition: color 0.2s ease-in-out;
    }
    .external-link:hover {
        color: var(--secondary-color); /* Darken on hover for feedback */
    }
    .external-link-icon {
        height: 1em;
        width: 1em;
        margin-left: 0.25rem; /* Add a small space between text and icon */
    }

 /*--- PRINT MODE ---*/

    body.pdf-export-mode .container {
        width: 1200px !important;
        max-width: 1200px !important;
    }

    body.pdf-export-mode .bg-white,
    body.pdf-export-mode .kpi-card {
      border: 1px solid#e2e8f0; /* This Tailwind color corresponds to border-slate-200 */
      box-shadow: none !important; /* Remove shadows for cleaner rendering */
    }

    body.pdf-export-mode #summary .grid {
        display: flex;
        gap: 2rem; /* Creates space between the columns */
    }

    /* This targets the chart's container */
    body.pdf-export-mode #summary .grid .summary-chart > .lg\\:col-span-2 {
        flex: 2; /* Makes the chart container take up 2/3 of the space */
    }

    /* This targets the container for the two results sections */
    body.pdf-export-mode #summary .grid .summary-chart > .space-y-8 {
        flex: 1; /* Makes the results container take up 1/3 of the space */
    }
    body.pdf-export-mode #summary > .grid:not(.summary-chart) {
        display: grid !important; /* Force display: grid */
        grid-template-columns: repeat(3, minmax(0, 1fr)) !important; /* Force 3 columns */
        width: 100% !important; /* Force full width */
        gap: 1rem !important; /* Re-apply a gap (adjust '1rem' if needed) */
    }

    /* This more specific set of rules will override Tailwind classes for printing */
    .summary-print-scale h2,
    .summary-print-scale h3 {
      /* You can set a specific size, e.g., 1.75rem, or scale the existing one */
      font-size: 1.6rem !important; 
    }

    .summary-print-scale p,
    .summary-print-scale label,
    .summary-print-scale li,
    .summary-print-scale span {
      /* You can adjust this 'rem' value as needed */
      font-size: 1.1rem !important;
    }

    .pdf-export-mode th {
      padding-bottom: 1rem !important;
    }

    .pdf-export-mode label {
        padding-bottom: 1rem !important;
        display: block !important; /* Ensures padding is applied correctly */
    }

    /*
    * This rule applies only during PDF export to force the text in
    * item description input boxes to be left-aligned.
    */
    .pdf-export-mode input[type="text"] {
        text-align: left !important;
    }

    /*
    * This rule applies only during PDF export and hides all UI buttons
    * by targeting their specific IDs and classes.
    */
    .pdf-export-mode #add-pavement-row,
    .pdf-export-mode #add-edging-row,
    .pdf-export-mode #add-pipe-row,
    .pdf-export-mode #add-pit-row,
    .pdf-export-mode #add-misc-row,
    .pdf-export-mode #add-general-row,
    .pdf-export-mode #add-custom-material,
    .pdf-export-mode #add-custom-fuel,
    .pdf-export-mode .remove-row-btn,
    .pdf-export-mode .epd-btn,
    .pdf-export-mode .duplicate-row-btn,
    .pdf-export-mode .actions-cell {
        display: none !important;
    }

    /* --- NEW: MESSAGE CONSOLE STYLES --- */
    #message-console {
        opacity: 0;
        transform: translateY(100px);
        transition: opacity 0.3s ease-out, transform 0.3s ease-out;
        z-index: 100;
        /* NEW: Robust centering that accounts for scrollbars */
        left: 0;
        right: 0;
        margin-left: auto;
        margin-right: auto;
    }

    #message-console.success {
        background-color: var(--secondary-color); /* Dark Green */
    }
    #message-console.error {
        background-color: #dc2626; /* Red-600 */
    }
    #message-console.info {
        background-color: #4b5563; /* Gray-600 */
    }

    /* Active state for the message console */
    #message-console.show {
        opacity: 1;
        transform: translateY(0);
    }