/* =================================================================== */
/* === DARK MODE THEMING ============================================= */
/* =================================================================== */

:root {
    /* LIGHT MODE (Default) */
    --bg-color: #ffffff;
    --text-primary: #000000;
    --text-secondary: #555555;
    --header-bg: #ffffff;
    --input-bg: rgba(255, 255, 255, 0.08);
    --input-border: #000000;
    --input-text: #000000;
    --map-opacity: 0.4; /* High contrast for light mode */
}

[data-theme="dark"] {
    /* DARK MODE */
    --bg-color: #111111; /* The "New Black" (Dark Grey/Black) */
    --text-primary: #f0f0f0; /* Off-white */
    --text-secondary: #a0a0a0; /* Light grey */
    --header-bg: #111111;
    --input-bg: rgba(255, 255, 255, 0.05);
    --input-border: #444;
    --input-text: #ffffff;
    --map-opacity: 0.1; /* Lower opacity for dark mode so it's subtle */
}


html, body {
    background-color: var(--bg-color) !important;
    color: var(--text-primary) !important;
    transition: background-color 0.3s ease, color 0.3s ease;
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
    height: 100%;
    margin: 0;
    padding: 0;
    width: 100%;
    box-sizing: border-box;
    /* Removed bottom padding as footer handles space */
    /* padding-bottom: 50px; */
    /*overflow: hidden;*/ /* Prevent overall body scroll if possible */
    /*overflow-x: hidden;*/
}

/* Apply box-sizing to all elements for consistent sizing */
*, *::before, *::after {
    box-sizing: inherit;
}

#ios-install-banner {
    /* --- Core Positioning --- /
position: fixed; / Keep it fixed so it stays in view when scrolling /
bottom: 20px; / Position it 20px from the bottom /
right: 20px; / Position it 20px from the right */
    /* --- Sizing --- */
    width: 30%; /* Set the width to 50% of the viewport */
    max-width: 400px; /* Add a max-width for larger screens to prevent it from being too wide */
    /* --- Color and Appearance --- */
    background-color: #dc3545; /* A standard Bootstrap "danger" red */
    color: white; /* White text for good contrast */
    border-radius: 8px; /* Rounded corners */
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2); /* A subtle drop shadow */
    padding: 12px 15px; /* Add some internal spacing */
    /* --- Layout for Internal Items (Flexbox) --- */
    display: flex;
    align-items: center; /* Vertically align the text and button */
    justify-content: space-between; /* Push items to opposite ends */
    /* --- Other Properties --- */
    z-index: 1000; /* Ensure it's on top of other content */
    font-family: sans-serif; /* Ensure a clean, readable font */
    font-size: 0.6rem;
    /* Initially hidden, will be shown by JavaScript */
    display: none;
}

    #ios-install-banner p {
        margin: 0;
        margin-right: 10px; /* Add some space between the text and the close button /
flex-grow: 1;
text-align: left; / Align text to the left for better readability */
    }

    #ios-install-banner button {
        background: none;
        border: none;
        font-size: 1rem;
        color: white; /* Make the 'X' button white /
cursor: pointer;
padding: 0 5px;
line-height: 1;
opacity: 0.8; / Slightly transparent to not be too visually jarring /
flex-shrink: 0; / Prevent the button from shrinking */
    }

        #ios-install-banner button:hover {
            opacity: 1; /* Full opacity on hover */
        }

/* --- Initial Load Slow Indicator Styling --- */
.initial-load-indicator {
    position: fixed; /* Keep it visible even if page scrolls */
    top: 15px; /* Position top */
    right: 15px; /* Position right */
    z-index: 10001; /* High z-index (adjust if needed to be above header) */
    padding: 5px;
    background-color: rgba(255, 255, 255, 0.8); /* Optional background */
    border-radius: 50%;
    box-shadow: 0 2px 5px rgba(0,0,0,0.2);
    display: none; /* <<< START HIDDEN - JS will show it */
    align-items: center;
    justify-content: center;
}


    .initial-load-indicator .icon { /* Ensure you have a general .icon style or scope this */
        fill: #ffc107; /* Amber/warning color */
        width: 24px; /* Adjust size */
        height: 24px;
        display: block; /* Or inline-block */
    }

/* --- NEW Separator Styling --- */
.new-alternatives-separator {
    text-align: center;
    margin: 25px 0 15px 0; /* Add space above and below */
    font-size: 0.9rem;
    font-weight: bold;
    color: #2563eb; /* Or your preferred color */
    text-transform: uppercase;
    letter-spacing: 1px;
    position: relative; /* For pseudo-elements if needed */    
}

    /* Optional: Add lines */
    .new-alternatives-separator::before,
    .new-alternatives-separator::after {
        content: '';
        position: absolute;
        top: 50%;
        width: calc(50% - 30px); /* Adjust width based on text */
        height: 1px;
        background-color: #dee2e6; /* Light gray line */
    }

    .new-alternatives-separator::before {
        left: 0;
    }

    .new-alternatives-separator::after {
        right: 0;
    }

    /* Adjust span padding if using lines */
    .new-alternatives-separator span {
        padding: 0 10px;
        background-color: #fff; /* Match background to hide line behind text */
        position: relative; /* Ensure span is above pseudo-elements */
        z-index: 1;
    }

.small-spinner {
    display: inline-block;
    width: 50px; /* Adjust size */
    height: 50px;
    border: 3px solid rgba(0, 0, 0, 0.1);
    border-radius: 50%;
    border-top-color: #6c757d; /* Adjust color */
    animation: spin 1s ease-in-out infinite;
    margin: 5px; /* Adjust spacing */
    margin-bottom: 150px;
}

.small-spinner-nomargin {
    display: inline-block;
    width: 50px; /* Adjust size */
    height: 50px;
    border: 3px solid rgba(0, 0, 0, 0.1);
    border-radius: 50%;
    border-top-color: #6c757d; /* Adjust color */
    animation: spin 1s ease-in-out infinite;
    margin: 5px; /* Adjust spacing */
    margin-bottom: 5px;
}

/* --- Error UI Styling --- */

/* Common styles for both error overlays/indicators */
.error-overlay,
#full-screen-loader-overlay #blazor-load-slow-indicator {
    text-align: center;
    color: #495057; /* Darker grey text */
    font-family: Arial, sans-serif;
}

/* Blazor's Default Error UI Overlay */
#blazor-error-ui {
    background: rgba(0, 0, 0, 0.65); /* Darker semi-transparent overlay */
    /* display: block; */ /* Blazor controls this */
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 1060; /* Above most content */
    display: flex; /* Use flex to center the content box */
    align-items: center;
    justify-content: center;
}

    /* Content box for Blazor Error UI */
    #blazor-error-ui .error-content { /* Target the specific content div */
        background-color: #ffffff;
        padding: 30px 40px;
        border-radius: 8px;
        box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2);
        max-width: 450px;
        width: 90%;
        position: relative; /* Needed for absolute positioning dismiss button */
        display: flex; /* Use flex for vertical layout */
        flex-direction: column;
        align-items: center; /* Center items horizontally */
    }

/* Styling for Slow Load Indicator (within its overlay) */
#blazor-load-slow-indicator {
    /* Already centered by parent overlay (#full-screen-loader-overlay) */
    /* Change display to flex column for better vertical layout */
    display: none; /* Keep hidden initially */
    flex-direction: column;
    align-items: center; /* Center items */
    gap: 15px; /* Space between elements */
    padding: 20px; /* Add some padding */
    max-width: 450px; /* Match error UI */
    width: 90%;
    color: #333; /* Use text color defined in overlay or override */
}


/* Common Icon Styling */
.error-icon { /* Applied to SVG in both error UIs */
    width: 48px;
    height: 48px;
    fill: #dc3545; /* Red color for error/warning */
    margin-bottom: 15px; /* Space below icon */
}

#blazor-load-slow-indicator .error-icon {
    fill: #ffc107; /* Amber/Warning color for slow load */
}


/* Common Heading Styling */
#blazor-error-ui h2,
#blazor-load-slow-indicator h2 {
    font-size: 1.5rem;
    font-weight: 600;
    color: #343a40; /* Darker heading color */
    margin-top: 0;
    margin-bottom: 10px;
}

/* Common Paragraph Styling */
#blazor-error-ui p,
#blazor-load-slow-indicator p {
    font-size: 0.95rem;
    line-height: 1.5;
    color: #495057;
    margin-bottom: 25px; /* Space before actions */
}

/* Common Action Area Styling */
.error-actions {
    display: flex;
    justify-content: center; /* Center button(s) */
    width: 100%;
}

/* Common Button Styling */
.error-button.reload { /* Target the reload button specifically */
    /* Use styles similar to your main buttons */
    display: inline-block;
    padding: 10px 25px;
    border: none;
    border-radius: 5px;
    font-size: 0.95rem;
    font-weight: 500;
    cursor: pointer;
    text-decoration: none; /* For the <a> link in error-ui */
    transition: background-color 0.2s ease, box-shadow 0.2s ease;
    background-color: #2563eb; /* Primary blue */
    color: white;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

    .error-button.reload:hover {
        background-color: #0b5ed7; /* Darker blue */
        box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15);
    }

    .error-button.reload:active {
        background-color: #0a58ca;
        box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.2);
    }

/* Blazor Error UI Dismiss Button (Optional Styling) */
#blazor-error-ui .dismiss {
    position: absolute;
    top: 10px;
    right: 15px;
    font-size: 1.5rem;
    font-weight: bold;
    color: #adb5bd; /* Light grey */
    text-decoration: none;
    cursor: pointer;
    padding: 5px;
    line-height: 1;
}

    #blazor-error-ui .dismiss:hover {
        color: #495057; /* Darker grey on hover */
    }

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

/*
    ORIGINAL CSS
    ORIGINAL CSS
    ORIGINAL CSS
    ORIGINAL CSS
    ORIGINAL CSS
*/
/* For Chrome, Edge, Safari, etc. */
/*.sidebar-scroller::-webkit-scrollbar {
    width: 8px;*/ /* Scroll bar width */
/*}

.sidebar-scroller::-webkit-scrollbar-track {
    background: #f5f5f5;*/ /* Track colour */
/*}

.sidebar-scroller::-webkit-scrollbar-thumb {
    background-color: #888;*/ /* Thumb colour */
/*border-radius: 4px;*/ /* Round corners */
/*border: 2px solid #f5f5f5;*/ /* Space around thumb */
/*}*/

/* For Firefox */
/*.sidebar-scroller {
    scrollbar-width: thin;*/ /* 'auto' or 'thin' */
/*scrollbar-color: #888 #f5f5f5;*/ /* thumb + track */
/*}*/

.alternatives-container {
    display: flex;
    flex-direction: column;
    gap: 20px;
    margin-top: 20px;
}

.alternative-card {
    background: #f9f9f9;
    border: 1px solid #ddd;
    border-radius: 10px;
    padding: 20px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}

    .alternative-card .card-header {
        font-size: 1.5rem;
        font-weight: bold;
        margin-bottom: 10px;
    }

    .alternative-card .card-body {
        font-size: 1rem;
        line-height: 1.5;
        margin-bottom: 10px;
    }

        .alternative-card .card-body div {
            margin-bottom: 10px;
        }

    .alternative-card .card-footer {
        text-align: right;
    }

    .alternative-card .btn {
        padding: 10px 20px;
        font-size: 1rem;
        border-radius: 5px;
        cursor: pointer;
        transition: background-color 0.3s ease;
    }

    .alternative-card .btn-success {
        background-color: #28a745;
        color: #fff;
        border: none;
    }

        .alternative-card .btn-success:hover {
            background-color: #218838;
        }

.centered-content {
    display: flex;
    justify-content: center; /* Center horizontally */
    align-items: center; /* Center vertically */
    flex-direction: column; /* Stack items vertically */
    text-align: center; /* Optional: Center text within items */
}


.malnu-container {
    font-family: 'Inter', sans-serif;
    color: #333;
    margin: 0 auto;
    width: 100%; /* Add width: 100% to allow it to expand */
    height: 100%; /* Add height: 100% to take full height of parent */
    display: flex; /* Add display flex */
    flex-direction: column; /* Stack children vertically */
}

.loadingTitle {
    text-align: center;
    margin-left: auto;
    margin-right: auto;
    margin-top: 5rem;
}

.title {
    font-size: 2.2rem;
    font-weight: 700;
    text-align: center;
    margin-bottom: 10px;
}

.subtitle {
    font-size: 1.2rem;
    text-align: center;
    color: #666;
    margin-bottom: 30px;
}

.intro-box {
    background: #f1f1f1;
    padding: 20px;
    border-radius: 10px;
    margin-bottom: 20px;
    box-shadow: 0 2px 10px rgba(0,0,0,0.05);
}

.intro-heading {
    font-size: 1.4rem;
    font-weight: 600;
    margin-bottom: 10px;
}

.intro-paragraph {
    font-size: 1rem;
    line-height: 1.5;
    margin-bottom: 10px;
}

.encounter-controls {
    text-align: center;
    margin-bottom: 20px;
}

.encounter-select {
    padding: 10px;
    border-radius: 5px;
    border: 1px solid #ccc;
    font-size: 1rem;
}

.start-button-container,
.controls,
.actions {
    text-align: center;
    margin: 20px 0;
}

.primary-button,
.secondary-button {
    padding: 15px 25px;
    border: none;
    border-radius: 5px;
    font-size: 1rem;
    cursor: pointer;
    transition: background-color 0.2s ease;
}

.primary-button {
    background: #4f8ef7;
    color: #fff;
    font-weight: 600;
}

    .primary-button:hover {
        background: #3a76da;
    }

.secondary-button {
    background: #fff;
    color: #4f8ef7;
    border: 2px solid #4f8ef7;
    font-weight: 600;
}

    .secondary-button:hover {
        background: #4f8ef7;
        color: #fff;
    }

.large-button {
    font-size: 1.2rem;
    padding: 20px 40px;
}

.recording-animation {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%; /* Fill the width */
    height: 100%; /* Fill the height */
}

.mic-icon {
    font-size: 50px; /* Adjust size as needed */
    color: #dc3545;
}

.sound-wave {
    display: inline-block;
    width: 10px; /* Adjust size as needed */
    height: 30px; /* Adjust size as needed */
    background-color: #dc3545;
    margin: 0 4px; /* Adjust spacing as needed */
    animation: soundWave 1s infinite ease-in-out;
}

.recording-state {
    /* width: 100%;  Let's remove explicit width for now, it should expand to container width */
    /* display: flex;  Centered content already handles flexbox */
    /* flex-direction: column; Centered content already handles flex direction */
    /* align-items: center;  Centered content already handles vertical alignment */
    padding: 20px 0; /* Add some vertical padding if needed for visual spacing */
    min-height: 300px; /* Ensure a minimum height for vertical centering to be visible - adjust as needed */
    /* background-color: rgba(255, 0, 0, 0.1);  Uncomment for debugging to visualize recording-state area */
}

.listening-indicator {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    margin-bottom: 20px; /* Add some space below the indicator */
}

.pulsing-circle {
    width: 50px;
    height: 50px;
    background: #4f8ef7;
    border-radius: 50%;
    animation: pulse 1.5s infinite;
    display: block; /* Ensure block display for margin auto to work if needed */
    margin: 0 auto; /* If still not centered, try this - but flexbox SHOULD handle it */
}

.status-text {
    margin-top: 15px;
    font-size: 1.2rem;
    color: #4f8ef7;
    font-weight: 500;
}

.controls {
    text-align: center; /* Ensure controls are centered */
}

.post-consultation {
    margin-top: 0px;
    width: 100%; /* Ensure it takes full width */
    height: 100%; /* Ensure it takes full height */
    display: flex; /* Add display flex */
    flex-direction: column; /* Stack children vertically */
}

.plan-title {
    font-size: 1.8rem;
    font-weight: 600;
    margin-bottom: 20px;
}

.plan-card {
    background: #f9f9f9;
    border: 1px solid #eee;
    border-radius: 10px;
    padding: 20px;
    line-height: 1.5;
    margin-bottom: 20px;
    box-shadow: 0 2px 10px rgba(0,0,0,0.05);
}

.user-alert {
    text-align: center;
    color: #999;
    margin-top: 10px;
    font-size: 0.9rem;
}

.language-selector {
    text-align: center;
    margin-bottom: 20px;
    position: relative;
    display: inline-block;
}

.autocomplete-container {
    position: relative; /* Ensure this is relative for the dropdown */
    width: 100%; /* Fill the parent (.landinglanguage-search) */
}
/*  .autocomplete-container {
    position: relative;
    display: inline-block;
    width: 250px;
    text-align: left;
    }
 */
/* The input field itself */
.autocomplete-input {
    padding: 10px 12px; /* Adjusted padding slightly */
    border-radius: 5px;
    border: 1px solid #ccc;
    font-size: 1rem;
    width: 100%; /* Make input fill its container */
    box-sizing: border-box; /* Include padding/border in width */
}

.autocomplete-dropdown {
    position: absolute;
    top: 100%; /* Position below the input */
    left: 0;
    background: #fff;
    border: 1px solid #ddd;
    border-top: none; /* Optional: Remove top border if touching input */
    border-radius: 0 0 5px 5px; /* Match bottom corners */
    margin-top: -1px; /* Overlap border slightly if border-top removed */
    z-index: 1000;
    box-shadow: 0 4px 8px rgba(0,0,0,0.1); /* Slightly softer shadow */
    max-height: 200px;
    overflow-y: auto;
    width: 100%; /* Make dropdown match input width */
    box-sizing: border-box;
}

/* Dropdown items */
.autocomplete-item {
    padding: 8px 12px; /* Match input padding */
    cursor: pointer;
    font-size: 0.9rem;
    border-bottom: 1px solid #eee;
    text-align: left; /* Ensure text aligns left */
}

    .autocomplete-item:last-child {
        border-bottom: none;
    }

    .autocomplete-item:hover {
        background-color: #f0f0f0;
    }

.selected-language {
    margin-top: 10px;
    font-size: 0.9rem;
    color: #666;
    text-align: left;
}

/* Loader Overlay */
.overlay {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(255,255,255,0.8);
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    z-index: 2000;
}

/*.loader {
    border: 8px solid #f3f3f3;*/ /* Light grey */
    /*border-top: 8px solid #2563eb;*/ /* Blue */
    /*border-radius: 50%;
    width: 60px;*/ /* <<< Same size as index.html */
    /*height: 60px;*/ /* <<< Same size as index.html */
    /*animation: spin 1s linear infinite;
}

.loader-text {
    font-size: 1rem;
    color: #333;
    font-weight: 500;
}*/

/* Modal Styling (simple) */
.modal.show {
    display: block;
    background: rgba(0,0,0,0.5);
}

.modal-dialog {
    margin: 1.75rem auto;
    max-width: 600px;
}

.modal-content {
    background-color: #fff;
    border-radius: 6px;
    padding: 1rem;
}

.modal-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.modal-body, .modal-footer {
    padding-top: 1rem;
}

/* Modal Styles */
.modal-fullscreen {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.7); /* Semi-transparent black */
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 1000; /* Ensure it's on top */
    overflow-y: auto; /* Allow scrolling if content is long */
}

.modal-content-custom {
    background-color: #fff;
    border-radius: 15px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
    padding: 20px;
    width: 100%; /* Changed from max-width: 90% to width: 100% */
    height: 100%; /* Changed from max-height: 90% to height: 100% */
    position: relative; /* For the close button */
    display: flex; /* Added flex display */
    flex-direction: column; /* Added flex direction column */
}

.btn-close {
    background: none;
    border: none;
    font-size: 1.2rem;
    cursor: pointer;
}

.full-screen-content {
    display: flex; /* Already present, ensure it's there */
    width: 100%;
    flex-direction: column;
    height: 100vh; /* Take up full viewport height */
  /*  overflow: auto;*/
    opacity: 100%;
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center;
}
/* Modal Styles */
.modal-fullscreen {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.7); /* Semi-transparent black */
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 1000; /* Ensure it's on top */
    overflow-y: auto; /* Allow scrolling if content is long */
}

.modal-content-custom {
    background-color: #fff;
    border-radius: 15px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
    padding: 20px;
    max-width: 90%; /* Adjust as needed */
    max-height: 90%;
    position: relative; /* For the close button */
}

.modal-close {
    position: absolute;
    top: 10px;
    right: 10px;
    font-size: 24px;
    cursor: pointer;
    background: none;
    border: none;
}

/* Card Styles */
.plan-card {
    background-color: #f8f9fa;
    border: 1px solid #ddd;
    border-radius: 10px;
    padding: 15px;
    margin-bottom: 15px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
    transition: transform 0.2s ease, box-shadow 0.2s ease; /* Smooth hover effect */
}

    .plan-card:hover {
        transform: translateY(-2px);
        box-shadow: 0 4px 6px rgba(0, 0, 0, 0.15);
    }

    .plan-card h5 {
        font-weight: 600;
        margin-bottom: 5px;
    }

    .plan-card .summary {
        font-size: 0.9rem;
        color: #555;
        margin-bottom: 10px;
    }

    .plan-card .view-details {
        background-color: #2563eb; /* Bootstrap primary color */
        color: #fff;
        border: none;
        padding: 8px 16px;
        border-radius: 5px;
        text-decoration: none; /* Remove underline from links */
        transition: background-color 0.2s ease;
    }

        .plan-card .view-details:hover {
            background-color: #0b5ed7;
        }

.btn-primary.btn-lg.px-5.py-3.d-flex.align-items-center.gap-2 { /* Target the specific button */
    margin: 0 auto; /* Center the button horizontally */
    display: block; /* Ensure button takes full available width to center properly */
    text-align: center; /* Center text inside button for extra measure, though display:block should handle it */
    font-size: 0.8rem;
    font-weight: 700;
}

.tab-content {
    margin-top: 20px;
    width: 100%; /* Ensure it takes full width */
    height: 100%; /* Ensure it takes full height */
    display: flex; /* Add display flex */
    flex-direction: column; /* Stack children vertically */
    overflow: auto; /* Add scroll if content overflows */
}

    /* You might also need to adjust styles for content inside tabs, for example for tables and forms */
    .tab-content > div { /* Target the content divs inside tab-content (plan, details, etc.) */
        height: 100%; /* Make content divs take full height of tab-content */
        display: flex; /* Enable flexbox for content divs */
        flex-direction: column; /* Stack content vertically */
    }

    /* If you want the table in the "plan" tab to fill height */
    .tab-content .table-bordered {
        height: 100%; /* Make the table take full height */
        display: flex;
        flex-direction: column;
    }

        .tab-content .table-bordered tbody {
            display: block; /* Allow tbody to have scroll if needed */
            overflow-y: auto; /* Add vertical scroll if content overflows */
            height: calc(100% - (thead tr).offsetHeight); /* Adjust height to leave space for thead */
        }

            .tab-content .table-bordered thead, .tab-content .table-bordered tbody tr, .tab-content .table-bordered th, .tab-content .table-bordered td {
                display: block; /* Ensure table elements work with flex direction */
            }

    .tab-content .variable-form { /* For patient details form */
        height: 100%;
        overflow-y: auto; /* Add scroll if patient details form overflows */
    }

    .tab-content textarea { /* For transcript and notes textareas */
        height: auto; /* Allow textarea to grow with content */
        flex-grow: 1; /* Allow textarea to take up remaining vertical space */
        width: 100%; /* Ensure textarea takes full width */
    }

/*  
    ORIGINAL CSS
    ORIGINAL CSS
    ORIGINAL CSS
    ORIGINAL CSS
    ORIGINAL CSS
*/


h1:focus {
    outline: none;
}

a, .btn-link {
    color: #0071c1;
}

.btn-outline-secondary {
    background-color: white;
    border-color: black;
    border: 1px solid #f3f3f3;
}

.btn-primary {
    color: #fff;
    font-size: 0.8rem;
    font-weight: 700;
    background-color: black;
    border-color: #1861ac;
}

.btn {
    font-size: 0.8rem;
    font-weight: 700;
}

.btn-sm {
    font-size: 0.8rem;
    font-weight: 700;
}

.btn-outline-secondary {
    font-size: 0.8rem;
    font-weight: 700;
}
@keyframes spin {
    0% {
        transform: rotate(0deg);
    }

    100% {
        transform: rotate(360deg);
    }
}

.content {
    padding-top: 1.1rem;
}

.valid.modified:not([type=checkbox]) {
    outline: 1px solid #26b050;
}

.invalid {
    outline: 1px solid red;
}

.validation-message {
    color: red;
}

#blazor-error-ui {
    background: lightyellow;
    bottom: 0;
    box-shadow: 0 -1px 2px rgba(0, 0, 0, 0.2);
    display: none;
    left: 0;
    padding: 0.6rem 1.25rem 0.7rem 1.25rem;
    position: fixed;
    width: 100%;
    z-index: 1000;
}

    #blazor-error-ui .dismiss {
        cursor: pointer;
        position: absolute;
        right: 0.75rem;
        top: 0.5rem;
    }

.blazor-error-boundary {
    background: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNTYiIGhlaWdodD0iNDkiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIG92ZXJmbG93PSJoaWRkZW4iPjxkZWZzPjxjbGlwUGF0aCBpZD0iY2xpcDAiPjxyZWN0IHg9IjIzNSIgeT0iNTEiIHdpZHRoPSI1NiIgaGVpZ2h0PSI0OSIvPjwvY2xpcFBhdGg+PC9kZWZzPjxnIGNsaXAtcGF0aD0idXJsKCNjbGlwMCkiIHRyYW5zZm9ybT0idHJhbnNsYXRlKC0yMzUgLTUxKSI+PHBhdGggZD0iTTI2My41MDYgNTFDMjY0LjcxNyA1MSAyNjUuODEzIDUxLjQ4MzcgMjY2LjYwNiA1Mi4yNjU4TDI2Ny4wNTIgNTIuNzk4NyAyNjcuNTM5IDUzLjYyODMgMjkwLjE4NSA5Mi4xODMxIDI5MC41NDUgOTIuNzk1IDI5MC42NTYgOTIuOTk2QzI5MC44NzcgOTMuNTEzIDI5MSA5NC4wODE1IDI5MSA5NC42NzgyIDI5MSA5Ny4wNjUxIDI4OS4wMzggOTkgMjg2LjYxNyA5OUwyNDAuMzgzIDk5QzIzNy45NjMgOTkgMjM2IDk3LjA2NTEgMjM2IDk0LjY3ODIgMjM2IDk0LjM3OTkgMjM2LjAzMSA5NC4wODg2IDIzNi4wODkgOTMuODA3MkwyMzYuMzM4IDkzLjAxNjIgMjM2Ljg1OCA5Mi4xMzE0IDI1OS40NzMgNTMuNjI5NCAyNTkuOTYxIDUyLjc5ODUgMjYwLjQwNyA1Mi4yNjU4QzI2MS4yIDUxLjQ4MzcgMjYyLjI5NiA1MSAyNjMuNTA2IDUxWk0yNjMuNTg2IDY2LjAxODNDMjYwLjczNyA2Ni4wMTgzIDI1OS4zMTMgNjcuMTI0NSAyNTkuMzEzIDY5LjMzNyAyNTkuMzEzIDY5LjYxMDIgMjU5LjMzMiA2OS44NjA4IDI1OS4zNzEgNzAuMDg4N0wyNjEuNzk1IDg0LjAxNjEgMjY1LjM4IDg0LjAxNjEgMjY3LjgyMSA2OS43NDc1QzI2Ny44NiA2OS43MzA5IDI2Ny44NzkgNjkuNTg3NyAyNjcuODc5IDY5LjMxNzkgMjY3Ljg3OSA2Ny4xMTgyIDI2Ni40NDggNjYuMDE4MyAyNjMuNTg2IDY2LjAxODNaTTI2My41NzYgODYuMDU0N0MyNjEuMDQ5IDg2LjA1NDcgMjU5Ljc4NiA4Ny4zMDA1IDI1OS43ODYgODkuNzkyMSAyNTkuNzg2IDkyLjI4MzcgMjYxLjA0OSA5My41Mjk1IDI2My41NzYgOTMuNTI5NSAyNjYuMTE2IDkzLjUyOTUgMjY3LjM4NyA5Mi4yODM3IDI2Ny4zODcgODkuNzkyMSAyNjcuMzg3IDg3LjMwMDUgMjY2LjExNiA4Ni4wNTQ3IDI2My41NzYgODYuMDU0N1oiIGZpbGw9IiNGRkU1MDAiIGZpbGwtcnVsZT0iZXZlbm9kZCIvPjwvZz48L3N2Zz4=) no-repeat 1rem/1.8rem, #b32121;
    padding: 1rem 1rem 1rem 3.7rem;
    color: white;
}

    .blazor-error-boundary::after {
        content: "An error has occurred."
    }

@keyframes pulse {
    0% {
        transform: scale(1);
        opacity: 1;
    }

    50% {
        transform: scale(1.2);
        opacity: 0.7;
    }

    100% {
        transform: scale(1);
        opacity: 1;
    }
}

.overlay {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(255,255,255,0.8);
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    z-index: 2000;
}

.loader {
    border: 8px solid #f3f3f3; /* Light grey */
    border-top: 8px solid #2563eb; /* Blue */
    border-radius: 50%;
    width: 60px; /* <<< Same size as index.html */
    height: 60px; /* <<< Same size as index.html */
    animation: spin 1s linear infinite;
}


.loading-text {
    margin-top: 15px;
    font-style: italic;
    color: #333; /* Match overlay text color */
    /* Add other styles if needed */
}

.blazor-loading-container {
    display: flex;
    flex-direction: column; /* Stack spinner and text */
    justify-content: center; /* Vertical center */
    align-items: center; /* Horizontal center */
    /* --- Mimic the overlay's positioning behavior --- */
    /* This assumes the Blazor app root takes over the full viewport *after* static elements are hidden */
    position: fixed; /* Or absolute if parent is properly positioned */
    top: 50px; /* Adjust if Blazor layout has persistent header */
    left: 0;
    right: 0;
    bottom: 50px; /* Adjust if Blazor layout has persistent footer */
    background-color: #ffffff; /* Match overlay background */
    z-index: 9998; /* High z-index, below potential error UI */
}


/* Vendor prefixes for broader compatibility */
@-webkit-keyframes spin {
    0% {
        -webkit-transform: rotate(0deg);
    }

    100% {
        -webkit-transform: rotate(360deg);
    }
}

@keyframes spin {
    0% {
        transform: rotate(0deg);
    }

    100% {
        transform: rotate(360deg);
    }
}

/* Spinner Overlay */
.spinner-overlay {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(255,255,255,0.8);
    z-index: 2000;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

.spinner {
    width: 50px;
    height: 50px;
    border: 6px solid #eee;
    border-top: 6px solid #4f8ef7;
    border-radius: 50%;
    animation: spin 1s linear infinite;
    margin-bottom: 20px;
}

@keyframes spin {
    0% {
        transform: rotate(0deg);
    }

    100% {
        transform: rotate(360deg);
    }
}

.loading-text {
    font-size: 1.1rem;
    color: #333;
    font-weight: 500;
    text-align: center;
}

@media (prefers-reduced-motion: reduce) {
    .carousel,
    .carousel * {
        animation-duration: initial !important;
        transition-duration: initial !important;
    }
}

.recording-animation {
    display: flex;
    align-items: center;
    justify-content: center;
}

.mic-icon {
    font-size: 30px;
    color: #dc3545;
}

.sound-wave {
    display: inline-block;
    width: 5px;
    height: 20px;
    background-color: #dc3545;
    margin: 0 2px;
    animation: soundWave 1s infinite ease-in-out;
}

    .sound-wave:nth-child(2) {
        animation-delay: 0.01s;
    }

    .sound-wave:nth-child(3) {
        animation-delay: 0.02s;
        height: 30px;
    }

    .sound-wave:nth-child(4) {
        animation-delay: 0.03s;
    }

    .sound-wave:nth-child(5) {
        animation-delay: 0.04s;
    }

@keyframes soundWave {
    0% {
        transform: scaleY(1);
    }

    50% {
        transform: scaleY(1.5);
    }

    100% {
        transform: scaleY(1);
    }
}


.hero-title {
    font-size: 90px;
    font-weight: bold;
    margin-bottom: 20px;
    color: white;
}

/* Media Query for Mobile Devices */
@media (max-width: 768px) {
    .hero-title {
        font-size: 50px; /* Adjust font size for mobile */
    }
}

/* Media Query for Mobile Devices (Screens less than 768px wide) */
@media (max-width: 768px) {
    .landinghero-section {
        flex-direction: column; /* Stack items vertically */
        align-items: center; /* Center items horizontally in mobile view */
        text-align: center; /* Center text within hero section on mobile */
    }
}

.newplantab-button {
    background: none;
    border: none;
    padding: 10px 20px;
    cursor: pointer;
    color: #777;
    font-weight: bold;
    transition: background-color 0.3s ease, color 0.3s ease;
    flex: 0 0 auto; /* Prevent buttons from stretching and allow them to shrink */
    text-align: center;
    white-space: nowrap; /* Prevent text in buttons from wrapping */
}


/* Media query for smaller screens, e.g., mobile */
@media (max-width: 768px) {
    .newplantab-button {
        padding: 10px 8px; /* Slightly reduce padding on smaller screens */
        font-size: 10px; /* Slightly reduce font size on smaller screens */
    }
}

body {
    height: 100%;
    margin: 0;
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
    background-color: var(--bg-color) !important;
    color: var(--text-primary) !important;
    transition: background-color 0.3s ease, color 0.3s ease;
}

.header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 1rem 1.5rem;
    background-color: #fff;
    /*border-bottom: 1px solid #dee2e6;*/
    position: fixed; /* Makes the header stick to the top */
    top: 0;
    width: 100%;
    z-index: 1030; /* Ensures it stays above other content */
    background-color: var(--header-bg) !important;
    border-bottom: 1px solid rgba(0,0,0,0.1); /* Subtle border */
    /*box-shadow: 0 2px 4px rgba(0,0,0,0.1);*/ /* Add a subtle shadow */
}

/* Fix Header Text Colors in Dark Mode */
[data-theme="dark"] .main-title {
    color: #fff;
}

[data-theme="dark"] .header {
    border-bottom: 1px solid #333;
}

[data-theme="dark"] .landing-cta-third {
    color: #fff;
    border-color: #fff;
}

    [data-theme="dark"] .landing-cta-third:hover {
        background-color: #fff;
        color: #000;
    }

/* Optional: Use Flexbox for perfect vertical alignment */
.label-container {
    display: flex;
    align-items: center;
    gap: 8px; /* Adds space between the triangle and the text */
    font-size: 0.8rem;
    font-weight: 700;
}

@media (max-width: 767.98px) {
    .header {
        padding: 0.5rem 0.75rem; /* Tighter padding on mobile */
    }

    .logo-image {
        width: 20px; /* Smaller logo */
        height: 20px;
    }

    .main-title {
        font-size: 0.8rem;
        font-weight: 700;
    }

    .titlesubtitle {
        font-size: 0.65rem;
    }

    .service-traffic-indicator {
        display: none; /* Hide the traffic indicator to save space on small screens */
    }
}

/*.header {
    position: sticky;*/ /* Or fixed, depending on desired scroll behavior */
    /*top: 0;
    left: 0;
    width: 100%;
    z-index: 10000;*/ /* Higher than the loader overlay */
    /*background-color: #D3D3D3;*/ /* Or your actual header background color */
    /* Add any other existing .header styles back if needed */
/*}*/

/* --- Header Logo Styles --- */
.logo-button {
    display: flex; /* Use flexbox for alignment */
    align-items: center; /* Vertically center the flag and text block */
    text-decoration: none; /* Remove underline if it's acting like a link */
    color: #000; /* Set a default text color (black) */
    cursor: pointer; /* Show it's clickable */
}

.logo-image {
    height: 35px; /* Adjust the height of your flag image */
    width: auto; /* Maintain aspect ratio */
    margin-right: 10px; /* Add some space between the flag and text */
}

.logo-text-area {
    display: flex;
    flex-direction: column;
    /* REMOVED justify-content: center; */
    align-items: flex-start; /* ADDED: This aligns items to the left */
    line-height: 1.1;
}

.logo-title {
    font-size: 0.8rem;
    font-weight: 700;
    color: #000;
    white-space: nowrap;
    /* Ensure it aligns children by baseline */
    display: inline-flex; /* Use inline-flex */
    align-items: baseline; /* Align to the baseline */
}

.main-title {
    /* Inherits styles */
}

.com-part {
    font-size: 0.6em; /* Keep it smaller */
    color: #333;
    font-weight: normal;
    margin-left: -2px;
    /* REMOVED position and top - baseline alignment handles it now */
}

.titlesubtitle {
    font-size: 0.6em;
    color: #333;
    font-weight: normal;
    margin-top: -4px;
    /* It will now be left-aligned due to .logo-text-area changes */
}

.logo-text {
    font-size: 1.25rem; /* Adjust as needed */
    font-weight: bold;
    color: #333; /* Adjust color as needed */
}

.header-controls-right {
    display: flex; /* Arrange items inside horizontally */
    align-items: center; /* Vertically align items in the middle */
    gap: 1rem; /* Adjust the space between the language button and the toggle container */
    margin-right: 1rem;
}

.header-buttons {
    display: flex;
    gap: 10px;
}

.header-button {
    border: 1px solid #ddd;
    padding: 10px 20px;
    border-radius: 5px;
    cursor: pointer;
    font-weight: bold;
    background-color: transparent;
  /*  color: #333;*/
    transition: background-color 0.3s ease, color 0.3s ease;
}

    .header-button.patients {
        background-color: #000;
        color: #fff;
        border: none;
    }

    .header-button:hover {
        background-color: #eee;
    }

    .header-button.patients:hover {
        background-color: #333;
    }

.main-content { /* Container for gradient and content */
    background-image: url('gr.jpg');
    background-size: cover; /* Add this line to make the image cover the container */
    background-repeat: no-repeat; /* Optional: prevent image from repeating if it's smaller than the container */
    padding: 20px 30px 30px 30px; /* Top, Right, Bottom, Left padding */
    border-radius: 12px;
    margin: 0 20px 20px 20px; /* Top, Right, Bottom, Left margins to create space from edges */
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
    /*overflow: hidden;*/ /* Clip content at the rounded border */
    position: relative; /* Needed for pseudo-element and content card positioning */
    display: flex; /* Use flexbox to control content-card height */
    flex-direction: column; /* Arrange hero and content-card vertically */
}

    .main-content::after { /* Pseudo-element for visual "cut-off" */
        content: '';
        position: absolute;
        left: 0;
        right: 0;
        bottom: 0;
        height: 50px; /* Adjust height to control "cut-off" amount */
        background: linear-gradient(to bottom, rgba(255, 255, 255, 0), #fff); /* Fade to white */
        pointer-events: none; /* Make it non-interactive */
    }


.hero-section {
    padding: 80px 0 50px 0; /* Adjust top and bottom padding within main-content */
    text-align: center;
}

.hero-subtitle {
    font-size: 18px;
    color: white;
    margin-bottom: 40px;
}

.save-lives-button {
    background-color: black;
    color: white;
    border: none;
    padding: 18px 40px;
    border-radius: 12px;
    cursor: pointer;
    font-size: 20px;
    font-weight: bold;
}

.content-card {
    background-color: #fff;
    color: #000;
    border-radius: 12px;
    padding: 20px;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
    margin-bottom: -50px; /* Negative margin to extend visually below gradient */
    z-index: 2; /* Ensure content-card is above the pseudo-element */
}

.tabs {
    display: flex;
    border-bottom: 1px solid #ddd;
    margin-bottom: 20px;
}

.tab-button {
    background: none;
    border: none;
    padding: 10px 15px;
    cursor: pointer;
    color: #777;
    font-weight: bold;
    border-bottom: 2px solid transparent;
}

    .tab-button.active {
        color: #000;
        border-bottom-color: #007bff; /* Example active tab color */
    }

.diagnosis-section {
    margin-bottom: 20px;
}

.diagnosis-label {
    font-weight: bold;
    margin-bottom: 5px;
    display: block;
}

.diagnosis-textarea {
    width: 100%;
    padding: 10px;
    border: 1px solid #ccc;
    border-radius: 5px;
    resize: vertical;
    font-family: inherit; /* Inherit font from body */
    font-size: 14px;
    box-sizing: border-box; /* To include padding and border in width calculation */
}




.landingcontainer {
    padding: 20px;
    display: flex;
    gap: 50px;
    align-items: flex-start;
    width: 100%;
    /*min-height: 100vh;*/ /* Ensure full viewport height */
    /* justify-content: flex-start;  You can adjust this if needed */
}

.landingleft-section {
    flex-grow: 1;
    width: auto;
    max-width: 800px;
    justify-content: center;
    align-items: center;
    display: flex; /* Make left section a flex container */
    flex-direction: column; /* Stack items vertically */
    /* max-width: 400px;  You might want to remove max-width if using flex-grow for full flexibility */
}

.landingright-section {
    width: 250px;
    height: 500px;
    background-color: black;
    border-radius: 30px;
    display: flex;
    justify-content: center;
    align-items: center;
    overflow: hidden;
    margin-left: 50px;
}

h1 {
    font-size: 2.5em;
    margin-bottom: 10px;
}

p {
    color: #555;
    margin-bottom: 30px;
    font-size: 0.9em;
}

.landingform-container {
    background: linear-gradient(to bottom, #f8f8f8, #f0f0f0);
    border-radius: 10px;
    padding: 20px;
    /* Optionally make form container scrollable if content is too long */
    /* overflow-y: auto;
    max-height: calc(100vh - some_fixed_height_for_header_and_padding);  Adjust fixed height accordingly */
}

.landingsection {
    margin-bottom: 10px;
    padding: 10px;
    border: 1px solid #ddd;
    border-radius: 10px;
    background-color: white;
}

.landingsection-title {
    font-weight: bold;
    margin-bottom: 15px;
}

.landingframework-buttons {
    display: flex;
    flex-wrap: nowrap;
    align-items: center;
}

    .landingframework-buttons button {
        padding: 10px 20px;
        border: 1px solid #ccc;
        border-radius: 20px;
        background-color: white;
        cursor: pointer;
        margin-right: 10px;
        font-size: 0.9em;
        white-space: nowrap;
    }

        .landingframework-buttons button.active {
            background-color: black;
            color: white;
            border-color: black;
        }

.landingresources-button button {
    padding: 10px 30px;
    border: none;
    border-radius: 30px;
    background-color: black;
    color: white;
    cursor: pointer;
    font-size: 0.9em;
}


/* Styles for the language input section */
.landinglanguage-search {
    position: relative; /* Needed for absolute positioning of dropdown */
    margin-bottom: 70px; /* Add space below the input group before buttons */
    /* Width/centering now handled by adding .rapidres-constrained-width-centered in HTML */
}



.landingstart-button {
    padding: 0px;
    background-color: white;
    border-radius: 10px;
    border: 1px solid #ddd;
    margin-top: auto; /* Push to bottom in flex column */
}

    .landingstart-button button {
        width: 100%;
        padding: 15px;
        border: none;
        border-radius: 15px;
        background-color: black;
        color: white;
        font-size: 1.2em;
        cursor: pointer;
        font-weight: bold;
    }

.landingloader {
    border: 8px solid #f3f3f3;
    border-top: 8px solid #3498db;
    border-radius: 50%;
    width: 50px;
    height: 50px;
    animation: spin 2s linear infinite;
}

.landingphone-screen-content {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100%;
    width: 100%;
}

.landingframework-buttons button.landingactive {
    background-color: black;
    color: white;
    border-color: black; /* Optional: if you want to also change the border color to black when active */
}

.landingspinner {
    width: 60px;
    height: 60px;
    border-radius: 50%;
    background: conic-gradient(#ccc 0%, #333 100%);
    -webkit-mask: radial-gradient(farthest-side, white calc(100% - 8px), white);
    mask: radial-gradient(farthest-side, white calc(100% - 8px), white);
    animation: spin 1s linear infinite;
}

@keyframes spin {
    0% {
        transform: rotate(0deg);
    }

    100% {
        transform: rotate(360deg);
    }
}

/* Media Query for smaller screens (e.g., mobile) */
@media (max-width: 768px) {
    .landingcontainer {
        flex-direction: column;
        gap: 20px;
        padding: 20px;
        align-items: center;
        width: 100%;
        max-width: none;
        justify-content: flex-start;
        /*min-height: 100vh;*/ /* Ensure full viewport height in mobile too */
    }

    .landingleft-section {
        width: 100%;
        max-width: 400px;
        display: flex; /* Ensure flex in mobile too */
        flex-direction: column; /* Ensure flex column in mobile too */
    }

    .landingright-section {
        width: 100%;
        max-width: 250px;
        height: auto;
        margin-left: 0;
    }

    .landingphone-screen-content {
        width: 100%;
        height: auto;
        aspect-ratio: 250 / 500;
    }

    .landingspinner {
        /* Spinner size scales with .phone-screen-content */
    }
}





.patientspatients-container {
    background-color: #f9f9f9;
    border-radius: 15px;
    padding: 20px;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.05);
    max-width: 550px; /* Slightly wider to accommodate new column */
    width: 100%;
    margin-left: auto;
    margin-right: auto;
}


.patientspatients-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 20px;
}

.patientspatients-title {
    font-size: 2.5em;
    color: #333;
    margin: 0;
}

.patientsclose-button {
    background-color: black;
    color: white;
    border: none;
    border-radius: 10px;
    width: 30px;
    height: 30px;
    display: flex;
    justify-content: center;
    align-items: center;
    cursor: pointer;
    font-size: 0.9em;
}

.patientspatients-table {
    width: 100%;
}

.patientstable-header-row, .patientstable-data-row {
    display: grid;
    grid-template-columns: 2fr 0.8fr 0.8fr 1fr 0.7fr; /* Adjusted column widths to include COM. RISK */
    gap: 10px;
    padding: 10px 0;
    align-items: center;
}

.patientstable-header-row {
    font-weight: bold;
    color: #555;
    border-bottom: 1px solid #ddd;
    margin-bottom: 10px;
}

.patientstable-data-row {
    border-bottom: 1px solid #eee; /* Lighter border for data rows */
    padding-bottom: 15px;
    margin-bottom: 15px;
}

    .patientstable-data-row:last-child {
        border-bottom: none;
        margin-bottom: 0;
        padding-bottom: 0;
    }

.patientstable-header-cell, .patientstable-data-cell {
    font-size: 0.9em;
    color: #333;
    text-align: left; /* Default to left align, adjust if needed */
    padding-right: 5px;
}

    .patientstable-data-cell:last-child {
        text-align: right; /* Align the record button to the right */
    }

.patientsrecord-button {
    background-color: black;
    color: white;
    border: none;
    border-radius: 10px;
    padding: 10px 15px;
    cursor: pointer;
    display: inline-flex; /* Use inline-flex for alignment */
    align-items: center;
    justify-content: center;
}

    .patientsrecord-button svg {
        width: 15px; /* Adjust arrow size */
        height: 15px;
        fill: white; /* Arrow color */
    }


.resourcemanagerresource-manager-container {
    /*background-color: #f9f9f9;*/
    border-radius: 10px;
    padding: 20px; /* Reduced padding */
    padding-top: 10px; /* Adjusted top padding to be a bit larger than other sides */
    /*box-shadow: 0 0 10px rgba(0, 0, 0, 0.05);*/
    max-width: 600px;
    width: 100%;
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -80%);
    z-index: 1000;
    text-align: center;
}

.resourcemanagerresource-manager-title {
    font-size: 2.0em; /* Reduced font size */
    margin-bottom: 15px; /* Slightly reduced margin */
    color: #333;
    text-align: center;
}

.resourcemanagerresource-manager-subtitle {
    color: #777;
    font-size: 0.85em; /* Reduced font size */
    margin-bottom: 15px; /* Reduced margin */
}

.resourcemanagerresource-section {
    background-color: white;
    border-radius: 10px;
    padding: 15px; /* Reduced padding */
    margin-bottom: 15px; /* Reduced margin */
    border: 1px solid #ddd;
    max-height: 350px; /* Slightly reduced max height if needed - adjust as needed */
    overflow-y: auto;
}

.resourcemanagerresource-section-title {
    font-weight: bold;
    margin-bottom: 10px; /* Reduced margin */
    font-size: 1.05em; /* Reduced font size */
    color: #333;
}

.resourcemanagerresource-list {
    list-style: none;
    padding: 0;
    margin: 0;
}

/* Style for Header List Items - No Background, Larger Font */
.resourcemanagerresource-list-item-header {
    padding: 8px 0px; /* Reduced padding */
    margin-bottom: 6px; /* Reduced margin */
}

.resourcemanagerresource-header-label {
    font-size: 1.1em; /* Slightly reduced font size from previous */
    font-weight: bold;
    color: #555;
    margin-bottom: 4px; /* Reduced margin */
}


.resourcemanagerresource-list-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 8px 12px; /* Reduced padding */
    border-radius: 5px; /* Slightly smaller border radius to match smaller elements */
    background-color: #f0f0f0;
    margin-bottom: 6px; /* Reduced margin */
}

    .resourcemanagerresource-list-item.unavailable-resource {
        background-color: #ffe0e0; /* Light red for unavailable resource */
    }

    .resourcemanagerresource-list-item:last-child {
        margin-bottom: 0;
    }

.resourcemanagerresource-name {
    font-size: 0.9em; /* Slightly reduced font size */
    color: #333;
}

.resourcemanagerremove-button {
    background-color: #ff4d4d; /* Red color for remove */
    color: white;
    border: none;
    border-radius: 50%;
    width: 18px; /* Slightly smaller button */
    height: 18px; /* Slightly smaller button */
    display: flex;
    justify-content: center;
    align-items: center;
    cursor: pointer;
    font-size: 0.7em; /* Slightly smaller font size in button */
    line-height: 0.7em; /* Slightly smaller line height in button */
    padding: 0;
}

    .resourcemanagerremove-button.available-resource-button {
        background-color: #4CAF50; /* Green color for available */
    }

.resourcemanageradd-resource-input-group {
    display: flex;
    align-items: center;
}

.resourcemanageradd-resource-input {
    flex-grow: 1;
    padding: 8px; /* Reduced padding */
    border: 1px solid #ccc;
    border-radius: 5px;
    font-size: 0.85em; /* Reduced font size */
    color: #777;
    margin-right: 10px;
}

.resourcemanageradd-resource-button {
    background-color: #28a745; /* Green color for add */
    color: white;
    border: none;
    border-radius: 5px;
    padding: 8px 12px; /* Reduced padding */
    cursor: pointer;
    font-size: 0.85em; /* Reduced font size */
}

.resourcemanagerdone-button-container {
    margin-top: 15px; /* Reduced margin */
    width: 33%; /* or any specific width you prefer */
    margin-left: auto;
    margin-right: auto;
}

.resourcemanagerdone-button {
    background-color: black;
    color: white;
    border: none;
    border-radius: 5px;
    padding: 12px 25px; /* Reduced padding */
    cursor: pointer;
    font-size: 1.0em; /* Reduced font size */
    font-weight: bold;
    width: 100%;
    text-align: center;
    display: block; /* Make it a block to take full width */
}

.currentlycontainer {
    height: 100%; /* Take full viewport height */
    width: 100%; /* Take full viewport width */
    display: flex; /* Enable Flexbox for container */
    flex-direction: column; /* Stack items vertically */
    align-items: center; /* Center items horizontally */
    justify-content: space-between; /* Distribute space between items, pushing button to bottom */
    padding: 20px; /* Padding around edges */
    box-sizing: border-box; /* Include padding in width and height */
}

.currentlyhero-section {
    padding: 50px;
    border-radius: 15px;
    text-align: center;
    color: black;
    display: flex; /* Enable Flexbox for hero section content */
    flex-direction: column; /* Stack content vertically within hero section */
    align-items: center; /* Center content horizontally within hero section */
}

.currentlyhero-text-container {
    margin-bottom: 30px;
}

.currentlyhero-title {
    font-size: 40px;
    margin-bottom: 10px;
    line-height: 1.2;
}

.hero-subtitle {
    font-size: 16px;
    opacity: 0.8;
}

.currentlystop-button {
    background-color: #000; /* Black background */
    color: #fff; /* White text */
    border: none;
    padding: 20px 60px;
    border-radius: 15px;
    font-size: 24px;
    font-weight: bold;
    cursor: pointer;
    margin-top: auto; /* Push button to the bottom */
}

.recording-dot-container {
    display: flex;
    justify-content: center;
    align-items: center;
}

.recording-dot {
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background-color: red;
    animation: pulse 1.5s ease-in-out infinite alternate;
}

@keyframes pulse {
    0% {
        transform: scale(1);
        opacity: 1;
    }

    100% {
        transform: scale(1.4);
        opacity: 0.7;
    }
}





.processingcontainer {
    height: 100%;
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
}

.processinghero-section {
    background-color: rgba(255, 255, 255, 0.1);
    padding: 50px;
    border-radius: 15px;
    text-align: center;
    color: black;
}

@keyframes pulse { /* Keep pulse animation - you might be using it elsewhere */
    0% {
        transform: scale(1);
        opacity: 1;
    }

    100% {
        transform: scale(1.4);
        opacity: 0.7;
    }
}


.loading-spinner-container {
    display: flex;
    justify-content: center;
    align-items: center;
}

.loading-spinner {
    width: 30px;
    height: 30px;
    border-radius: 50%;
    border: 8px solid #000; /* White spinner */
    border-top-color: transparent; /* Make top part transparent to create spinning effect */
    animation: spin 1.2s linear infinite; /* Apply spin animation */
}

/* ADD THIS @keyframes spin BLOCK HERE, WITHIN THIS <style> SECTION */
@keyframes spin {
    0% {
        transform: rotate(0deg);
    }

    100% {
        transform: rotate(360deg);
    }
}



.newplancontainer {
    width: 100%;
    height: 100%;
    padding: 20px;
}


.newplanplan-header {
    font-size: 28px;
    font-weight: bold;
    color: #333;
    margin-bottom: 20px;
}

.newplantab-navigation {
    display: flex;
    background-color: #eee;
    border-radius: 8px;
    overflow-x: auto; /* Enable horizontal scrolling if content overflows */
    -webkit-overflow-scrolling: touch; /* For smooth scrolling on iOS */
    margin-bottom: 20px;
    white-space: nowrap; /* Prevent tab buttons from wrapping */
    justify-content: center; /* ADDED THIS LINE TO CENTER THE BUTTONS */
}


.newplantab-button:hover {
    background-color: #ddd;
    color: #555;
}

.newplantab-button.active {
    background-color: #fff;
    color: #000;
    box-shadow: inset 0 -3px 0 #007bff; /* Example active indicator */
}






/**TEST*/



.newplantab-content-container {
    background-color: #fff;
    border-radius: 12px;
    padding: 20px;
    box-shadow: 0 0 15px rgba(0, 0, 0, 0.05);
    position: relative; /* Still keep relative for other potential absolute positioning */
}

.newplanplan-sub-navigation {
    display: flex;
    justify-content: center;
    margin-bottom: 20px;
}

.newplanplan-sub-button {
    background-color: #eee;
    border: none;
    padding: 8px 20px;
    border-radius: 8px;
    cursor: pointer;
    color: #555;
    font-weight: bold;
    margin: 0 5px;
    transition: background-color 0.3s ease, color: 0.3s ease;
}

    .newplanplan-sub-button:hover {
        background-color: #ddd;
        color: #333;
    }

    .newplanplan-sub-button.active {
        background-color: #007bff; /* More distinct active background */
        color: #fff; /* White text for active state */
        font-weight: bolder; /* Make text bolder when active */
    }

.newplandata-row {
    margin-bottom: 15px;
}

.newplandata-label {
    font-weight: bold;
    display: block;
    margin-bottom: 5px;
    color: #555;
}

.newplandata-input, .newplandata-textarea { /* Apply same styles to both input and textarea */
    width: 100%;
    padding: 10px;
    border: none; /* Remove border */
    border-radius: 5px;
    box-sizing: border-box; /* To include padding in width */
    font-size: 16px;
    font-family: sans-serif; /* Ensure font matches body font */
    color: #333; /* Match header text color or choose a readable color */
    background-color: #f0f0f0; /* Very light grey background */
}

.newplandata-textarea {
    resize: vertical;
    min-height: 80px;
}

.newplanchange-resource-button {
    background-color: #000;
    color: #fff;
    border: none;
    padding: 12px 25px;
    border-radius: 8px;
    cursor: pointer;
    font-weight: bold;
    position: fixed; /* Changed to fixed */
    bottom: 20px;
    right: 20px;
    transition: background-color 0.3s ease;
}

    .newplanchange-resource-button:hover {
        background-color: #333;
    }


.newplantab-content {
    display: none; /* Initially hide all content areas */
}

    .newplantab-content.active {
        display: block; /* Show active content area */
    }

.newplanplan-content-section {
    display: none; /* Initially hide plan content sections */
}

    .newplanplan-content-section.active {
        display: block; /* Show active plan content section */
    }


/* Custom scrollbar for textarea - if needed, adjust styles */
/*.newplandata-textAREA:-webkit-scrollbar {
        width: 8px;
    }

    .newplandata-textAREA:-webkit-scrollbar-track {
        background: #f1f1f1;
    }

    .newplandata-textAREA:-webkit-scrollbar-thumb {
        background: #ccc;
        border-radius: 4px;
    }

        .newplandata-textAREA:-webkit-scrollbar-thumb:hover {
            background: #bbb;
        }*/







.framework-manager-modal.show {
    display: block;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.5); /* Semi-transparent black for overlay */
    z-index: 1050; /* Ensure it's on top of other content */
    overflow-x: hidden; /* Prevent horizontal scroll */
    overflow-y: auto; /* Allow vertical scroll if content overflows */
    display: flex; /* Enable flexbox for centering */
    justify-content: center; /* Center horizontally */
    align-items: center; /* Center vertically */
}

.framework-manager-content {
    background-color: #f9f9f9; /* Light background color */
    border-radius: 15px;
    padding: 20px;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
    max-width: 500px; /* Adjust max-width as needed */
    width: 90%; /* Take up 90% of viewport width on smaller screens */
    margin: 20px; /* Add some margin around the modal content */
}

.framework-manager-title {
    font-size: 2.0em;
    margin-bottom: 10px;
    color: #333;
    text-align: center;
}

.framework-manager-subtitle {
    color: #777;
    font-size: 0.85em;
    margin-bottom: 20px;
    text-align: center;
}

.framework-section {
    background-color: white;
    border-radius: 10px;
    padding: 15px;
    margin-bottom: 15px;
    border: 1px solid #ddd;
}

.framework-section-title {
    font-weight: bold;
    margin-bottom: 10px;
    font-size: 1.05em;
    color: #333;
}

.framework-buttons {
    display: flex;
    justify-content: space-around; /* Distribute buttons evenly */
    gap: 10px; /* Space between buttons */
}

.framework-button {
    padding: 10px 20px;
    border: 1px solid #ccc;
    border-radius: 5px;
    background-color: white;
    cursor: pointer;
    font-size: 0.9em;
    white-space: nowrap;
    color: #333;
    transition: background-color 0.3s ease, color: 0.3s ease;
}

    .framework-button.landingactive {
        background-color: black;
        color: white;
        border-color: black; /* Keep border consistent with background when active */
    }

    .framework-button:hover {
        background-color: #eee; /* Light grey hover effect */
        color: #555; /* Darker text on hover */
    }


.framework-manager-done-button-container {
    margin-top: 20px;
    text-align: center; /* Center the button */
}

.framework-manager-done-button {
    background-color: black;
    color: white;
    border: none;
    border-radius: 5px;
    padding: 12px 25px;
    cursor: pointer;
    font-size: 1.0em;
    font-weight: bold;
}

.tooltip-container {
    position: relative; /* Needed to position the tooltip */
    display: inline-block; /* So it wraps around the word */
}

    .tooltip-container .tooltip-text {
        visibility: hidden;
        width: 160px;
        background-color: black;
        color: #fff;
        text-align: center;
        border-radius: 6px;
        padding: 5px;
        position: absolute;
        z-index: 1;
        bottom: 125%;
        left: 50%;
        margin-left: -80px; /* Half of the width to center */
        opacity: 0;
        transition: opacity 0.3s;
    }

        .tooltip-container .tooltip-text::after {
            content: "";
            position: absolute;
            top: 100%;
            left: 50%;
            margin-left: -5px;
            border-width: 5px;
            border-style: solid;
            border-color: black transparent transparent transparent;
        }

    .tooltip-container:hover .tooltip-text {
        visibility: visible;
        opacity: 1;
    }

/* Target the transcript tab content specifically */
#transcript.newplantab-content {
    display: flex; /* Enable flexbox for vertical layout */
    flex-direction: column; /* Stack elements vertically */
    height: 100%; /* Take up full height of parent container */
    overflow: hidden; /* Prevent scroll on tab content, textarea will handle scrolling */
}

    /* Target the row containing the transcript textarea */
    #transcript.newplantab-content .newplandata-row {
        display: flex; /* Enable flexbox for row (though vertical direction is default in column flex container) */
        flex-direction: column; /* Stack label and textarea vertically */
        flex-grow: 1; /* Allow this row to take up remaining vertical space in tab content */
    }

    /* Target the transcript textarea specifically */
    #transcript.newplantab-content .newplandata-textarea {
        width: 100%;
        padding: 10px;
        border: none;
        border-radius: 5px;
        box-sizing: border-box;
        font-size: 16px;
        font-family: sans-serif;
        color: #333;
        background-color: #f0f0f0;
        resize: vertical; /* Keep resize option */
        flex-grow: 1; /* Make the textarea expand vertically within its row */
        min-height: 300px; /* Set a reasonable minimum height for visibility */
        overflow-y: auto; /* Enable vertical scrolling for content within textarea */
    }

/* Reusing styles from your app.css - adjust as needed */
.details-container {
    background-color: #f9f9f9;
    border-radius: 15px;
    padding: 20px;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.05);
    max-width: 550px; /* Adjust as needed */
    width: 100%;
    font-family: 'Arial', sans-serif; /* Ensure font consistency */
    color: #333; /* Default text color */
}

.details-header {
    margin-bottom: 20px;
    text-align: left; /* Align title to the left */
}

.details-title {
    font-size: 2.5em;
    color: #000; /* Black title */
    margin: 0;
    font-weight: bold;
}

.details-section {
    margin-bottom: 15px;
}

.details-label {
    font-weight: bold;
    display: block;
    margin-bottom: 5px;
    color: #000; /* Black label text */
    font-size: 1em;
}

.details-input-row {
    display: flex;
    gap: 10px;
    align-items: center;
    margin-bottom: 8px; /* Spacing between input rows */
}

.details-input {
    padding: 8px;
    border: 1px solid #ccc;
    border-radius: 5px;
    font-size: 1em;
    color: #777;
    flex-grow: 1; /* Allow input to take available space */
    box-sizing: border-box; /* Include padding in width */
}

.details-input-unit {
    font-size: 0.9em;
    color: #555;
    white-space: nowrap; /* Prevent unit from wrapping */
}

.details-radio-group {
    display: flex;
    gap: 10px;
    align-items: center;
}

.details-radio-label {
    margin-right: 5px;
}

.details-radio-input {
    margin-right: 3px;
}

.details-button-group {
    display: flex;
    gap: 10px;
}

.details-button {
    padding: 8px 15px;
    border: 1px solid #ccc;
    border-radius: 20px; /* Rounded buttons */
    background-color: white;
    cursor: pointer;
    font-size: 0.9em;
    color: #333;
    text-align: center;
    flex: 1; /* Equal width buttons */
    box-sizing: border-box;
    white-space: nowrap; /* Prevent text wrapping */
    display: inline-block; /* Ensure button takes correct width */
}

    .details-button.active {
        background-color: black;
        color: white;
        border-color: black;
    }

.details-textarea {
    width: 100%;
    padding: 10px;
    border: 1px solid #ccc;
    border-radius: 5px;
    font-size: 1em;
    color: #777;
    box-sizing: border-box;
    resize: vertical; /* Allow vertical resizing */
    min-height: 80px; /* Minimum height for textarea */
}

.get-plan-button-container {
    margin-top: 25px;
    text-align: center; /* Center the button */
}

.get-plan-button {
    background-color: black;
    color: white;
    border: none;
    border-radius: 15px;
    padding: 15px 30px;
    cursor: pointer;
    font-size: 1.2em;
    font-weight: bold;
    width: 100%; /* Full width button */
    display: block; /* Ensure block display for width to work */
    text-align: center; /* Center text inside button */
    box-sizing: border-box; /* Include padding in width */
}

.reference-icon::after {
    content: '\f129'; /* Example Font Awesome reference icon */
    font-family: 'Font Awesome 5 Free'; /* Or your icon font family */
    font-weight: 900; /* Solid style for Font Awesome */
    /* Add more styling for size, color, etc. */
    display: inline-block;
    margin-left: 5px;
    cursor: pointer; /* Make it look clickable */
}

.swap-icon::after {
    content: '\f212'; /* Example Font Awesome swap icon */
    font-family: 'Font Awesome 5 Free';
    font-weight: 900;
    display: inline-block;
    margin-left: 5px;
    cursor: pointer;
}

.layman-icon::after {
    content: '\f015'; /* Example Font Awesome info circle icon */
    font-family: 'Font Awesome 5 Free';
    font-weight: 900;
    display: inline-block;
    margin-left: 5px;
    cursor: pointer;
}

.action-button {
    /* Basic button styling */
    padding: 2px 5px;
    border: 1px solid #ccc;
    border-radius: 3px;
    background-color: #f9f9f9;
    cursor: pointer;
    font-size: 0.8em; /* Adjust as needed */
    margin-left: 5px; /* Spacing between buttons */
}

/* You can add specific styles for each type of button if needed */
.alternative-button { /* Style for 🔄 button */
}

.counseling-button { /* Style for 👪 button */
}


/*RapidRes*/

/* Define a CSS variable for the shared height */
:root {
    --footer-nav-height: 50px; /* Set your desired height here */
}

::-webkit-scrollbar {
    width: 6px;
}

::-webkit-scrollbar-track {
    background: transparent;
}

::-webkit-scrollbar-thumb {
    background: rgba(0, 0, 0, 0.2);
    border-radius: 3px;
}

    ::-webkit-scrollbar-thumb:hover {
        background: rgba(0, 0, 0, 0.3);
    }

/* For Firefox */
* {
    scrollbar-width: thin;
    scrollbar-color: rgba(0, 0, 0, 0.2) transparent;
}

.rapidres-body { /* Assuming this wraps .rapidres-containeralternatives */
    width: 100%;
    font-family: Arial, sans-serif;
    display: flex;
    justify-content: center;
    /* align-items: center; -- Remove this if you want container to fill height */
    /* min-height: 100vh; -- Body handles height */
    margin: 0;
    /* background-color: #f7f7f7; */
    padding: 0; /* Remove padding if container handles it */
    height: calc(100vh - 70px); /* Adjust header height (70px) if needed */
    overflow: hidden; /* Prevent scroll on this body part */
}
.rapidres-container {
    text-align: center;
    width: 100%;
    /* max-width: 600px; */ /* Keep commented or remove if not needed */
    /* --- Add this line --- */
    margin-top: 5rem; /* Adjust the value (1rem, 2rem, 20px, 30px, etc.) as needed */
    /* --- End Add --- */
}

.rapidres-containeralternatives {
    display: flex; /* Use Flexbox */
    flex-direction: column; /* Stack items vertically: title, list */
    width: 100%; /* Take full width */
    /* === Height Calculation === */
    /* Calculate height to fill space between header and fixed footer */
    /* Assuming header height is roughly 60-70px and footer is 50px */
    /* Adjust header height (e.g., 70px) if different */
    height: calc(100vh - 70px - var(--footer-nav-height)); /* Fill available viewport height minus header/footer */
    max-height: calc(100vh - 70px - var(--footer-nav-height)); /* Ensure it doesn't exceed */
    /* === End Height Calculation === */
    overflow: hidden; /* IMPORTANT: Prevent this container from showing scrollbars */
    /* Keep text-align if needed for title centering */
    text-align: center;
    margin-left: auto;
    margin-right: auto;
}

.rapidres-alternatives-list {
    overflow-y: auto; /* Makes this section scrollable */
    /*flex-grow: 1;*/ /* Takes up available space */
    margin: 0px 0;
    max-height: 60%;
    display: block; /* Ensure it behaves as a standard block element */
    width: 100%; /* CRITICAL: Force it to take full width of its parent */
    max-width: 100%; /* Prevent shrinking below 100% */
    margin: 0; /* Reset any default margins */
    padding: 0;
    padding-bottom: 50px; /* Adjust this value to match your footer's actual height */
    box-sizing: border-box; /* Important: Makes padding included in element's total height */
}

.alternatives-list-scrollable {
    flex-grow: 1; /* Allow this div to take up available vertical space */
    overflow-y: auto; /* <<<< THE KEY: Add vertical scrollbar ONLY when needed */
    min-height: 0; /* Essential for flex + overflow interaction */
    width: 100%; /* Take full width of parent */
    /* === Add Padding for Fixed Footer === */
    padding-bottom: var(--footer-nav-height); /* Space at bottom so content isn't hidden */
    /* === End Padding === */
    padding-left: 15px; /* Add some side padding for content */
    padding-right: 15px; /* Add some side padding for content */
    box-sizing: border-box; /* Include padding in height calculation */
    /* Optional: Add top/bottom border */
    /* border-top: 1px solid #eee; */
    /* border-bottom: 1px solid #eee; */
}

.rapidres-heading {
    font-size: xx-large;
    margin-bottom: 20px;
    color: #222;
    flex-shrink: 0; /* Prevents heading from shrinking */
}

.rapidres-headinghometitle {
    font-size: 3rem;
    margin-bottom: 20px;
    color: #222;
    flex-shrink: 0; /* Prevents heading from shrinking */
}

/* Container to position the input and placeholder */

.placeholder-container {
    box-shadow: 0 10px 40px -10px rgba(0,0,0,0.15); /* Deep, soft shadow */
    border-radius: 16px; /* Modern rounding */
    transition: transform 0.2s ease, box-shadow 0.2s ease;
    background: white;
    position: relative; /* Allows absolute positioning of the child span */
    width: 33%; /* Match your input width */
    margin-left: auto;
    margin-right: auto;
    margin-bottom: 5px; /* Keep original margin */
}

    .placeholder-container:focus-within {
        transform: translateY(-2px);
        box-shadow: 0 20px 40px -10px rgba(37, 99, 235, 0.2); /* Blue glow on focus */
    }

/*.placeholder-container {
    position: relative;*/ /* Allows absolute positioning of the child span */
    /*width: 33%;*/ /* Match your input width */
    /*margin-left: auto;
    margin-right: auto;
    margin-bottom: 5px;*/ /* Keep original margin */
/*}*/

.placeholder-containerNoBottomMargin {
    position: relative; /* Allows absolute positioning of the child span */
    width: 33%; /* Match your input width */
    margin-left: auto;
    margin-right: auto;
    margin-bottom: 0px; /* Keep original margin */
}

/* rapidres-toggle styles */

.rapidres-toggle-container {
    display: inline-flex;
    border-radius: 25px; /* Outer container radius */
    overflow: hidden; /* Clip contents */
    border: 1px solid #dee2e6; /* Outer border */
    background-color: #f8f9fa; /* Light grey container background */
    padding: 2px; /* Optional: Add tiny padding inside container */
}

.rapidres-toggle-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    /* Adjust padding slightly if container has padding */
    padding: 0.4rem 1rem;
    border: none; /* No border on the button itself */
    background-color: transparent; /* Inactive state is transparent */
    cursor: pointer;
    font-size: 0.875rem;
    color: #6c757d; /* Default/inactive text color */
    border-radius: 25px; /* <<< MATCH the container radius */
    transition: background-color 0.3s ease, color 0.3s ease, box-shadow 0.3s ease; /* Smooth transition */
    position: relative; /* Needed for z-index potentially */
    z-index: 1;
}

/* Icon styles */
.icon {
    fill: currentColor; /* Icon color inherits from button text color */
    vertical-align: middle;
    /* margin-right: 0.25rem; /* Remove if using gap */
    width: 1em; /* Consistent icon sizing */
    height: 1em;
}

/* Active State - White background with shadow */
.rapidres-active {
    background-color: white; /* <<< Active background is white */
    color: #007bff; /* <<< Active text/icon is blue */
    font-weight: bold;
    /* Add a subtle shadow to make it look raised */
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1), 0 1px 2px rgba(0, 0, 0, 0.06);
    z-index: 2; /* Ensure active is visually 'on top' */
}

/* Inactive State - Explicitly reset */
.rapidres-inactive {
    background-color: transparent;
    color: #6c757d;
    font-weight: normal;
    box-shadow: none; /* Ensure no shadow on inactive */
}


.language-button {
    /* Inherits display, padding, font etc from .rapidres-toggle-btn */
    border: 1px solid #dee2e6; /* Give it the border */
    background-color: #f8f9fa; /* Give it the background */
    border-radius: 25px; /* Make it rounded */
    color: #6c757d; /* Default icon/text color (like inactive toggle) */
    transition: background-color 0.2s ease, border-color 0.2s ease, color 0.2s ease; /* Smooth transition */
    /* Ensure it aligns well */
    vertical-align: middle;
}

    /* Hover effect for the language button */
    .language-button:hover {
        background-color: #e9ecef; /* Slightly darker background */
        border-color: #adb5bd; /* Slightly darker border */
        color: #495057; /* Darker text/icon color */
    }

    /* Ensure icon color is correct initially and inherits hover color */
    .language-button .icon {
        fill: currentColor; /* Make sure it takes the button's color */
    }

/* Input style adjustments */
.rapidres-input,
.rapidres-inputpatient {
    width: 100%; /* Input takes full width of the container */
    padding: 15px;
    border-radius: 5px;
    border: 1px solid #ddd;
    font-size: 16px;
    line-height: 1.4;
    box-sizing: border-box;
    display: block; /* Was already block */
    position: relative; /* Helps stacking context if needed */
    z-index: 1; /* Ensure input is clickable */
    background-color: white; /* Ensure background is opaque */
    /* Hide the NATIVE placeholder (can use transparent or just remove attribute) */
    /* Option 1: Style it transparent */
    /* color: black; /* Set actual typing color */ */
    /* &::placeholder {
        color: transparent;
    } */
    /* Option 2: Just ensure placeholder attribute isn't set in HTML when using fake one */
}

/* Style for our custom animated placeholder span */
.animated-placeholder {
    position: absolute;
    top: 0;
    left: 0;
    /* Match EXACTLY the input's text position */
    padding: 15px;
    font-size: 16px;
    line-height: 1.4;
    color: gray; /* Style like a placeholder */
    pointer-events: none; /* Allows clicks to go through to the input */
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    width: calc(100% - 30px); /* Account for input padding */
    box-sizing: border-box;
    z-index: 2; /* Position above input visually (but below focus outline) */
    /* Base state for animation */
    opacity: 1;
    transform: translateY(0);
}

/* Animation Keyframes */
@keyframes dropOut {
    from {
        opacity: 1;
        transform: translateY(0);
    }

    to {
        opacity: 0;
        transform: translateY(50%); /* Drop down */
    }
}

@keyframes dropIn {
    from {
        opacity: 0;
        transform: translateY(-50%); /* Start from above */
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Animation Classes */
.dropping-out {
    animation: dropOut 0.4s ease-out forwards; /* 'forwards' keeps the end state */
}

.dropping-in {
    animation: dropIn 0.4s ease-in forwards;
}

.rapidres-inputpatient { /* Apply to both input types */
    width: 100%;
    padding: 15px;
    border-radius: 5px;
    border: 1px solid #ddd;
    font-size: 16px; /* Explicitly set to 16px or higher */
    line-height: 1.4; /* Ensure adequate line height */
    margin-bottom: 0px;
    box-sizing: border-box;
    display: block;
    margin-left: auto;
    margin-right: auto;
}

/* Specific style for patient input if needed, otherwise it inherits */
.rapidres-inputpatient {
    width: 100%; /* Example: Patient input might take full width of its container */
    margin-left: 0;
    margin-right: 0;
    /* Inherits font-size: 16px from above */
}



/* Container for the buttons */
/* Remove centering from button container if button itself is full width */
.rapidres-button-container {
    /* display: flex; */ /* No longer needed if button is block */
    /* justify-content: center; */ /* No longer needed */
    gap: 15px;
    margin-top: 0; /* Inputs already have margin-bottom */
    margin-bottom: 20px;
    flex-shrink: 0;
    /* --- Make container center its content (the button) --- */
    width: 33%; /* Match the input width */
    margin-left: auto;
    margin-right: auto;
    /* --- End centering --- */
}

/* Modify the Button Style */
.rapidres-btn {
    display: block; /* Make button a block element */
    width: 100%; /* Make button fill its container */
    /* --- Keep other styles --- */
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    padding: 12px 20px;
    border-radius: 5px;
    border: none;
    font-size: 0.9rem;
    cursor: pointer;
    /* min-width: 120px; */ /* Remove or comment out min-width */
    text-align: center;
    white-space: nowrap;
    text-decoration: none;
    transition: background-color 0.2s ease;
    box-sizing: border-box; /* Add for consistent width calculation */
}

/* Modify the Button Style */
.rapidres-btncta {
    display: block; /* Make button a block element */
    width: 100%; /* Make button fill its container */
    /* --- Keep other styles --- */
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    padding: 12px 20px;
    border-radius: 5px;
    border: none;
    /*  font-weight: bold;*/
    font-size: x-large;
    cursor: pointer;
    /* min-width: 120px; */ /* Remove or comment out min-width */
    text-align: center;
    white-space: nowrap;
    text-decoration: none;
    transition: background-color 0.2s ease;
    box-sizing: border-box; /* Add for consistent width calculation */
}

/* == NEW Modifier Class for Icon-Only Buttons == */
.rapidres-btn-icon {
    width: 44px; /* Fixed width */
    height: 44px; /* Fixed height */
    padding: 0; /* Remove padding for centering */
    min-width: auto; /* Override base min-width */
    /* Optional: Uncomment for circular buttons */
    /* border-radius: 50%; */
}

/* Style for the icon (ensure this exists and is general) */
.icon {
    fill: currentColor;
    flex-shrink: 0;
    display: inline-block; /* Or block */
    vertical-align: middle;
    width: 1em;
    height: 1em;
}
/* Specific icon sizing WITHIN icon-only buttons */
.rapidres-btn-icon {
    width: 44px;
    height: 44px;
    padding: 0;
    min-width: auto;
    /* border-radius: 50%; */
}

    .rapidres-btn-icon .icon {
        width: 1.5em;
        height: 1.5em;
    }
/* == End New Modifier Class == */


/* Dark button style (Update Button) */
.rapidres-btnmultibutton.rapidres-btn-dark {
    background-color: #111;
    color: white;
    border-color: #111; /* Match background */
}

    .rapidres-btnmultibutton.rapidres-btn-dark:hover {
        background-color: #333;
        border-color: #333;
    }

/* Outline button style (Cancel Button) */
.rapidres-btnmultibutton.rapidres-btn-outline {
    background-color: white; /* White background */
    color: black; /* Black text and icon */
    border: 1px solid black; /* Black border */
}

    .rapidres-btnmultibutton.rapidres-btn-outline:hover {
        background-color: #f0f0f0; /* Light grey background on hover */
        color: black;
        border-color: black;
    }

/* Dark button style */
.rapidres-btn-dark {
    background-color: #111;
    color: white; /* Sets text and icon color */
}

    .rapidres-btn-dark:hover {
        background-color: #333;
    }

/* "Outline" button style */
.rapidres-btn-outline {
    background-color: black;
    color: white; /* Sets text and icon color */
    /* --- IF YOU WANT AN ACTUAL OUTLINE STYLE --- */
    /* background-color: transparent; */
    /* color: #111; */ /* Icon color */
    /* border: 1px solid #111; */
    /* --- End Outline Style --- */
}

/* "Outline" button style */
.rapidres-btn-outlinemin100 {
    background-color: black;
    color: white; /* Sets text and icon color */
    min-width: 100px;
    width: 100px;
    /* --- IF YOU WANT AN ACTUAL OUTLINE STYLE --- */
    /* background-color: transparent; */
    /* color: #111; */ /* Icon color */
    /* border: 1px solid #111; */
    /* --- End Outline Style --- */
}


.rapidres-btn-outline:hover {
    background-color: #333;
    /* Adjust hover for outline style if used */
    /* background-color: #f0f0f0; */
    /* color: black; */
}


.langbtn {
    border-radius: 25px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    padding: 0.5rem 1rem;
    border: 1px solid #dee2e6;
    background-color: #f8f9fa;
    cursor: pointer;
    font-size: 0.875rem;
    transition: all 0.3s ease;
}


/*.rapidres-active {
    background-color: #007bff;*/ /* <<< CHANGED: Blue background */
    /*color: white;*/ /* <<< CHANGED: White text/icon */
    /*font-weight: bold;
    box-shadow: none;*/ /* <<< REMOVED: Inset shadow */
    /* Optional: Add a subtle transition specifically for the active state change */
    /* transition: background-color 0.3s ease, color 0.3s ease; */
/*}

.rapidres-inactive {
    background-color: transparent;
    color: #6c757d;
}

.rapidres-active .icon {
    fill: white;*/ /* Explicitly set icon fill */
/*}

.rapidres-inactive {
    background-color: transparent;*/ /* Keep transparent */
    /*color: #6c757d;*/ /* Keep grey text/icon */
    /*font-weight: normal;*/ /* Ensure inactive is not bold */
/*}*/
    /* Ensure icon color is grey in inactive state */
    /*.rapidres-inactive .icon {
        fill: #6c757d;*/ /* Explicitly set icon fill */
    /*}*/



/* Ensure Patient Info container matches the input width for consistency */
.rapidres-patient-info {
    background-color: white;
    border-radius: 0px;
    padding: 0px;
    margin-bottom: 0px; /* Add consistent margin below */
    border: none;
    text-align: left;
    width: 33%; /* Match the input width */
    margin-left: auto;
    margin-right: auto;
    box-sizing: border-box;
}


.rapidres-field {
    display: flex;
    align-items: center; /* Ensure items align properly */
    margin-bottom: 5px;
}

.rapidres-label {
    width: 120px; /* Keep width consistent across all fields */
    /*   font-weight: bold;*/
    color: #333;
    flex-shrink: 0; /* Prevent label from shrinking */
}

.rapidres-options {
    display: flex;
    gap: 1px;
    flex-wrap: wrap;
    flex: 1;
    align-items: end;
}

.rapidres-option {
    flex: 1;
    align-items: end;
    padding: 8px 0px;
    border: 1px solid #ddd;
    border-radius: 5px;
    cursor: pointer;
    background-color: white;
    color: #666;
    text-align: center;
    /*font-size: small;*/
}

    .rapidres-option.rapidres-selected {
        background-color: #f0f0f0;
        color: #333;
        font-weight: 500;
    }

.rapidres-gender-option {
    flex: 1;
    padding: 8px 15px;
    border: 1px solid #ddd;
    border-radius: 5px;
    cursor: pointer;
    text-align: center;
    background-color: white;
    color: #666;
    /* font-size: small;*/
}

    .rapidres-gender-option.rapidres-selected {
        background-color: #f0f0f0;
        color: #333;
        font-weight: 500;
    }



.rapidres-alternative {
    border: 1px solid #e0e0e0;
    border-radius: 8px;
    padding: 1.5rem;
    background-color: #ffffff;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.01);
    position: relative;
    margin-bottom: 1.5rem;
    width: 100%; /* Make sure card takes full width of scrollable parent */
    box-sizing: border-box;
    text-align: left; /* Ensure card content aligns left */
}
/* Remove margin from the last card */
.alternatives-list-scrollable .rapidres-alternative:last-child {
    margin-bottom: 0;
}

.rapidres-alternative-title {
    font-weight: bold;
    font-size: 1.2em;
    margin-bottom: 1rem;
    color: #000;
}


.natural-indicator-icon {
    position: absolute;
    top: 10px; /* Adjust distance from top */
    right: 10px; /* Adjust distance from right */
    z-index: 5; /* Ensure it's above background */
    color: #28a745; /* Green color for the icon */
    line-height: 1; /* Prevent extra height */
    opacity: 0.8; /* Optional: make it slightly subtle */
}

    .natural-indicator-icon .icon {
        width: 20px; /* Icon size */
        height: 20px; /* Icon size */
        fill: currentColor; /* Use the color set on the span */
        vertical-align: top; /* Align nicely */
    }

.rapidres-section {
    margin-bottom: 15px;
}

.rapidres-section-title {
    font-weight: bold;
    margin-bottom: 0.25rem;
    color: #333;
    font-size: 0.95em;
}   

.rapidres-section-content {
    font-size: 0.9em;
    color: #555;
    line-height: 1.6;
    overflow-wrap: break-word;
    word-wrap: break-word;
    word-break: normal;
    text-align: left; /* Or 'start' for better RTL support if needed */
}

/* Error Dialog Styling */
.rapidres-error-dialog-backdrop {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.5);
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 1052;
}

.rapidres-error-dialog {
    background-color: white;
    border-radius: 5px;
    padding: 25px;
    width: 90%;
    max-width: 400px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15);
    text-align: center;
    z-index: 1053;
}

.rapidres-error-title {
    font-size: 1.3rem;
    font-weight: bold;
    margin-bottom: 15px;
    color: black;
}

.rapidres-continue-title {
    /*font-size: small;*/
    margin-bottom: 15px;
    color: black;
}

.rapidres-error-message {
    font-size: 1rem;
    margin-bottom: 25px;
    color: #333;
    line-height: 1.5;
}

.rapidres-dialog-buttons {
    display: flex;
    flex-direction: column; /* Stack vertically */
    align-items: center; /* Center buttons horizontally if they don't take full width */
    gap: 10px; /* Vertical gap between buttons */
    margin-top: 25px; /* Space above the button group */
    width: 100%; /* Container takes full width of dialog's padded area */
}

/* Base style for buttons inside the dialog */
.rapidres-error-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem; /* Space between icon and text */
    padding: 10px 15px; /* Slightly adjusted padding maybe? */
    border-radius: 5px;
    border: 1px solid black; /* Base transparent border for consistent height */
    font-size: 0.9rem;
    font-weight: 500; /* Slightly bolder maybe */
    cursor: pointer;
    white-space: nowrap;
    text-decoration: none;
    transition: background-color 0.2s ease, border-color 0.2s ease, color 0.2s ease;
    /* --- Make buttons fill container width --- */
    width: 100%; /* Make button take full width of the container */
    box-sizing: border-box; /* Include padding and border in width calculation */
}

    /* Style for the icon within these buttons */
    .rapidres-error-button .icon { /* Use specificity */
        fill: currentColor;
        flex-shrink: 0;
        display: inline-block;
        vertical-align: middle;
        width: 1em;
        height: 1em;
    }

    .rapidres-error-button:hover {
        background-color: #a1a1a1;
    }

/* Continue Button (Dark Style) */
.rapidres-continue-button {
    background-color: #111;
    color: white;
    border-color: #111; /* Match background for consistent border space */
}

/* Cancel Button (Outline Style) */
.rapidres-cancel-button {
    background-color: white; /* White background */
    color: black; /* Black text and icon */
    border: 1px solid black; /* Black border (overrides transparent base) */
}

    .rapidres-cancel-button:hover {
        background-color: #f0f0f0; /* Light grey background on hover */
        color: black;
        border-color: black;
    }

.rapidres-continue-button:hover {
    background-color: #333;
    border-color: #333;
}
/* === FULLY RESPONSIVE COOKIE CONSENT BANNER === */

.cookie-consent-wrapper {
    position: fixed;
    bottom: 0;
    left: 0;
    width: 100%;
    z-index: 1000;
    display: flex;
    justify-content: center;
    padding: 1rem; /* Use relative units */
    pointer-events: none; /* Allows clicks to pass through the wrapper */
}

.cookie-consent {
    width: 100%; /* Take up available width */
    max-width: 700px; /* Max width on desktop */
    background-color: #262626;
    color: #f4f4f4;
    border-radius: 12px;
    box-shadow: 0 -10px 30px rgba(0,0,0,0.2);
    padding: 1rem;
    pointer-events: auto; /* Re-enable pointer events for the banner itself */
    /* --- MOBILE FIRST: Stacked layout by default --- */
    display: flex;
    flex-direction: column; /* Stack items vertically on mobile */
    align-items: center; /* Center-align items */
    text-align: center; /* Center-align text */
    gap: 1rem; /* Space between icon, content, and buttons */
    /* Animation properties */
    opacity: 0;
    visibility: hidden;
    transform: translateY(100%);
    transition: all 0.4s ease-in-out;
}

    .cookie-consent.visible {
        opacity: 1;
        visibility: visible;
        transform: translateY(0);
    }

.cookie-icon {
    font-size: 36px;
    line-height: 1; /* Remove extra space from the emoji */
}

.cookie-content h3 {
    margin: 0 0 10px 0;
    font-size: 1rem; /* Adjusted for mobile */
    font-weight: 600;
}

.cookie-content p {
    margin: 0;
    font-size: 0.85rem; /* Adjusted for mobile */
    color: #ccc;
    line-height: 1.5;
}

.cookie-buttons {
    display: flex;
    flex-direction: column; /* Stack buttons vertically on mobile */
    width: 100%;
    gap: 0.5rem; /* Space between the two buttons */
}

.cookie-btn {
    padding: 10px 20px;
    border: none;
    border-radius: 6px;
    cursor: pointer;
    transition: all 0.3s ease;
    font-weight: 500;
    width: 100%; /* Make buttons full-width on mobile */
}

.cookie-btn-accept {
    background-color: #f4f4f4;
    color: #121212;
}

.cookie-btn-decline {
    background-color: #444; /* Slightly darker for better contrast */
    color: #f4f4f4;
}

.cookie-btn:hover {
    opacity: 0.9;
}


/* --- DESKTOP VIEW: Use a media query for wider screens --- */
@media (min-width: 768px) {
    .cookie-consent {
        flex-direction: row; /* Go back to horizontal layout */
        text-align: left; /* Align text to the left */
        padding: 20px;
        gap: 20px;
    }

    .cookie-icon {
        font-size: 40px;
    }

    .cookie-content h3 {
        font-size: 18px;
    }

    .cookie-content p {
        font-size: 14px;
    }

    .cookie-buttons {
        flex-direction: row; /* Place buttons side-by-side */
        width: auto; /* Allow buttons to take their natural width */
    }

    .cookie-btn {
        width: auto; /* Reset width */
    }
}


.rapidres-continue-button {
    background-color: #000; /* Black background */
    color: white; /* White text */
    border: none;
}

    .rapidres-continue-button:hover {
        background-color: #333; /* Slightly lighter black on hover */
    }

.rapidres-cancel-button {
    background-color: white; /* White background */
    color: #000; /* Black text */
    border: 2px solid #000; /* Black border */
}

    .rapidres-cancel-button:hover {
        background-color: #f4f4f4; /* Slight gray background on hover */
    }


/* Container for stacked multi-buttons */
.rapidres-button-containermultibutton {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    margin-top: 20px; /* Keep top margin */
    margin-bottom: 20px; /* Keep bottom margin */
    flex-shrink: 0;
    /* REMOVED: width, max-width, margin-left, margin-right - Now handled by shared class */
    /* Keep width: 100% on buttons inside *if* needed, but they usually fill flex columns */
}

.rapidres-button-containermultibuttonhomeregen {
    display: flex;
    justify-content: center;
    gap: 15px;
    margin-top: 20px;
    margin-bottom: 10px;
    flex-shrink: 0;
}

/* Base style for buttons within this container */
.rapidres-btnmultibutton {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    padding: 12px 20px;
    border-radius: 5px;
    border: 1px solid transparent; /* Start with transparent border for consistent height */
    font-size: 0.9rem;
    cursor: pointer;
    white-space: nowrap;
    text-decoration: none;
    transition: background-color 0.2s ease, border-color 0.2s ease, color 0.2s ease;
    /* --- Make buttons fill container width --- */
    width: 100%; /* Make button take full width of the container */
    box-sizing: border-box; /* Include padding and border in width calculation */
}

.rapidres-constrained-width-centered {
    width: 90%; /* Base width */
    max-width: 350px; /* Max width (same as button container had) */
    margin-left: auto; /* Center the block */
    margin-right: auto; /* Center the block */
    box-sizing: border-box; /* Include padding/border in width */
}

/* == Fixed Bottom Navigation Bar == */

.fixed-bottom-nav {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    background-color: #e0e0e0;
    border-top: 1px solid #cccccc;
    display: flex;
    align-items: stretch; /* Stretch buttons vertically */
    justify-content: center;
    padding: 8px; /* Keep padding inside the height */
    gap: 8px;
    box-sizing: border-box;
    z-index: 1000; /* Keep z-index */
    /* --- Apply Shared Height --- */
    height: var(--footer-nav-height); /* Use the variable */
}

.iconnav { /* Ensure a general .icon style exists if not already defined */
    display: inline-block;
    vertical-align: middle;
    fill: currentColor;
}


/* Style for buttons specifically within the bottom nav */
.fixed-bottom-nav-btn {
    /* --- Remove Flex Grow/Basis --- */
    /* flex-grow: 1; */ /* <<<< REMOVED */
    /* flex-basis: 0; */ /* <<<< REMOVED */
    /* --- End Remove --- */
    /* --- Set explicit width --- */
    width: 25%; /* <<<< ADDED */
    max-width: 150px; /* <<<< ADDED (Optional: Prevents excessive width on large screens) */
    /* --- End Set Width --- */

    display: flex;
    align-items: center;
    justify-content: center;
    border: none;
    border-radius: 5px;
    /* background-color: #f8f9fa;*/
    background-color: transparent;
    color: #495057;
    /* font-size: 1.2rem; -- Base size reference, less critical now */
    cursor: pointer;
    transition: background-color 0.2s ease;
    padding: 0;
    overflow: hidden;
}

    .fixed-bottom-nav-btn:hover {
        background-color: #e9ecef;
    }

    /* Ensure icons within these buttons are sized appropriately */
    .fixed-bottom-nav-btn .iconnav {
        /* --- Reduce Icon Size --- */
        width: 24px; /* <<<< CHANGED (Example smaller size, adjust as needed) */
        height: 24px; /* <<<< CHANGED */
        /* width: 1.2em; */ /* Alternative using em */
        /* height: 1.2em; */
        /* --- End Reduce Size --- */
        fill: currentColor;
    }

/* == End Fixed Bottom Navigation Bar == */

/* Adjust styles for the main modal container if needed */
.resourcemanagerresource-manager-container {
    display: flex; /* Use flex to arrange body and footer */
    flex-direction: column; /* Stack body and footer vertically */
    /* Keep existing styles like max-width, position, transform etc. */
    max-height: 90vh; /* Example: Limit modal height */
    /* overflow: hidden; Prevents scrollbar on container itself */
}

/* Style for the main scrollable content area */
.modal-main-content {
    flex-grow: 1; /* Allows this section to take available space */
    overflow-y: auto; /* Makes THIS section scrollable */
    padding: 20px; /* Keep padding inside the scrollable area */
    padding-bottom: 0; /* Remove bottom padding if footer handles it */
}

/* Style for the footer area */
.modal-footer-actions {
    flex-shrink: 0; /* Prevent footer from shrinking */
    padding: 15px 20px; /* Padding for the footer */
    /*border-top: 1px solid #dee2e6;*/ /* Separator line */
    /*background-color: #f8f9fa;*/ /* Optional background */
    border-radius: 0 0 10px 10px; /* Match bottom corners if modal has radius */
}

    /* Ensure button container inside footer doesn't add extra margins */
    .modal-footer-actions .rapidres-button-containermultibutton {
        margin-top: 0;
        margin-bottom: 0;
        width: 100%; /* Make button container take full footer width */
    }

/* Keep existing dropdown styles, they should work fine relative to the input */
.autocomplete-container {
    position: relative;
    /* Existing styles */
}

.autocomplete-dropdown {
    position: absolute;
    top: 100%;
    left: 0;
    z-index: 1000; /* Ensure dropdown is above modal content */
    /* Existing styles: background, border, max-height etc. */
}

/* --- Styling for the new Stats Footer --- */
.stats-footer {
    position: fixed;
    bottom: 0;
    left: 0;
    width: 100%;
    background-color: #e0e0e0;
    border-top: 1px solid #cccccc;
    text-align: center;
    z-index: 1000; /* Keep z-index */
    box-sizing: border-box;
    /* --- Apply Shared Height --- */
    height: var(--footer-nav-height); /* Use the variable */
    /* --- Use Flexbox to Center Content Vertically --- */
    display: flex;
    align-items: center; /* Vertically center */
    justify-content: center; /* Horizontally center */
    /* --- Adjust Padding (Only Horizontal Needed) --- */
    padding: 0 1.5rem; /* Remove vertical padding, keep horizontal */
}

    .stats-footer p {
        margin: 0;
        font-size: 0.8rem;
        color: #6c757d;
    }
/* --- End Stats Footer Styles --- */


/* The main error container - controlled by Blazor JS (display: none/block) */
#blazor-error-ui {
    /* display: none; */ /* Blazor handles toggling this */
    position: fixed; /* Take up viewport */
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 10000; /* Ensure it's on top */
    background-color: rgba(0, 0, 0, 0.7); /* Semi-transparent background */
    color: #333; /* Default text color for content */
}

    /* Optional: Hide the default dismiss 'X' if you don't want it */
    #blazor-error-ui .dismiss {
        /* display: none; */ /* Uncomment to hide */
        position: absolute;
        top: 15px;
        right: 20px;
        font-size: 1.5rem;
        color: #aaa;
        text-decoration: none;
        cursor: pointer;
    }

        #blazor-error-ui .dismiss:hover {
            color: #fff;
        }


/* Wrapper to center the content box */
.error-overlay {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
}

/* The actual content box */
.error-content {
    background-color: #fff;
    padding: 30px 40px;
    border-radius: 8px;
    text-align: center;
    max-width: 500px;
    width: 90%;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
    position: relative; /* Needed if using absolute dismiss */
}

.error-icon {
    width: 50px;
    height: 50px;
    fill: #dc3545; /* Red color for error */
    margin-bottom: 15px;
}

.error-content h2 {
    margin-top: 0;
    margin-bottom: 15px;
    color: #dc3545;
}

.error-content p {
    margin-bottom: 25px;
    color: #555;
    line-height: 1.6;
}

.error-actions {
    display: flex;
    justify-content: center;
    gap: 15px;
}

.error-button {
    display: inline-block;
    padding: 10px 20px;
    border-radius: 5px;
    text-decoration: none;
    font-weight: bold;
    transition: background-color 0.2s ease;
}

    .error-button.reload {
        background-color: #007bff;
        color: white;
    }

        .error-button.reload:hover {
            background-color: #0056b3;
        }

    .error-button.home {
        background-color: #6c757d;
        color: white;
    }

        .error-button.home:hover {
            background-color: #5a6268;
        }

.slow-connection-indicator {
    display: inline-flex; /* Align with other flex items in header */
    align-items: center;
    margin-left: 10px; /* Adjust spacing as needed */
    /* Add other styling if desired */
}

.wifi-error-icon {
    fill: red; /* Make the icon red */
    /* Add other icon styling */
}

/* Default (LTR) text alignment */
.rapidres-alternative-title,
.rapidres-section-title,
.rapidres-section-content {
    text-align: left; /* or 'start' */
}

/* RTL Specific Styles - Apply when dir="rtl" is on a parent */
[dir="rtl"] .rapidres-alternative-title,
[dir="rtl"] .rapidres-section-title,
[dir="rtl"] .rapidres-section-content {
    text-align: right; /* or 'start' */
}

/* Optional: Adjust icon position if needed for RTL */
[dir="rtl"] .natural-indicator-icon {
    right: auto;
    left: 10px;
}

.button-center-container {
    display: flex; /* Enable flexbox */
    justify-content: center; /* Center child horizontally */
    width: 100%; /* Ensure wrapper takes full available width */
    margin-top: 20px; /* Add some spacing above if needed */
    margin-bottom: 150px; /* Add some spacing below if needed */
}

.operation-results-container {
    display: flex;
    flex-direction: column;
    /* This calculation ensures it fits exactly between header and footer */
    height: calc(100vh - 70px - var(--footer-nav-height));
    overflow: hidden; /* CRITICAL: Prevents the whole page from scrolling */
}

/*.operation-results-container {
    display: flex;
    flex-direction: column;
    height: calc(100vh - 70px - var(--footer-nav-height));*/ /* Fill available space */
    /*overflow: hidden;*/ /* Prevent this outer container from scrolling */
/*}*/



/* --- Operation Mode Results Specific --- */
.operation-results-container .rapidres-heading {
    margin-bottom: 15px;
}

.operation-mode-scroll {
    /* Inherits from alternatives-list-scrollable */
    /* Add specific overrides if needed */
}

.operation-resource-item {
    border: 1px solid #e0e0e0;
    border-radius: 8px;
    margin-bottom: 15px;
    background-color: #fdfdfd;
    overflow: hidden; /* Important for containing flex children and rounded corners */
    text-align: left;
    /* --- CORE MODIFICATIONS --- */
    display: flex; /* Make this a flex container */
    flex-direction: column; /* Stack children (header and details) vertically */
    /*
       Optional: If you want to limit the maximum height of an *entire expanded item*
       within the main list, you can set a max-height here. If set, the
       .operation-resource-details will scroll within this overall item max-height.
       If not set, the item will grow with its content, and the details' max-height
       (set below) will be the primary constraint for internal scrolling.
    */
    /* max-height: 80vh; */ /* Example: limits the entire item's height */
}

.operation-resource-header {
    display: flex;
    flex-wrap: nowrap; /* Try to keep on one line */
    align-items: center;
    justify-content: space-between;
    gap: 10px;
}

/*.operation-resource-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 1rem;*/ /* Space between name and actions block */
    /*padding: 0.75rem 1rem;*/
    /* This is the key change for the base style */
    /*flex-wrap: wrap;*/ /* Allow wrapping by default (for mobile) */
/*}*/

.operation-resource-name {
    flex: 1 1 auto; /* Grow to fill space, shrink if needed */
    min-width: 0; /* CRITICAL: Allows text truncation flexbox magic */
    white-space: normal; /* Allow name to wrap to two lines if needed */
    word-break: break-word;
    padding-right: 5px;
}

/*.operation-resource-name {*/
    /* This element will grow to take up space, but can also shrink */
    /*flex-grow: 1;
    flex-shrink: 1;*/
    /* Ensure it doesn't get smaller than its content */
/*    min-width: 200px;*/
/*}*/

.resource-item-actions {
    width: auto !important; /* Do not take full width */
    flex-shrink: 0; /* Prevent container from squishing too small */
    display: flex;
    align-items: center;
    gap: 0.5rem;
    flex-wrap: wrap; /* Allow buttons to wrap to next line if screen is TINY */
    justify-content: flex-end; /* Keep buttons aligned to the right */
}

    .resource-item-actions .landing-cta-button {
        width: auto !important; /* Override the global 100% width rule */
        flex: 0 1 auto !important; /* Allow shrinking, prevent growing */
        min-width: 0; /* Allow shrinking below content size if necessary */
        display: inline-flex !important;
        /* Optional: Reduce padding slightly inside header to save space */
        padding: 0.4rem 0.8rem !important;
        font-size: 0.8rem !important;
    }


/*.resource-item-actions {
    display: flex;
    align-items: center;
    gap: 0.5rem;*/
    /* This prevents the button group itself from wrapping its contents */
    /*flex-wrap: nowrap;
}*/

@media (min-width: 768px) {
    .operation-resource-header {
        /* On desktop, explicitly PREVENT the main items from wrapping. */
        flex-wrap: nowrap;
    }
}



.accordion-toggle-btn {
    background: none;
    border: none;
    padding: 5px;
    cursor: pointer;
    line-height: 1;
    color: #555; /* Icon color */
}

    .accordion-toggle-btn svg {
        width: 20px; /* Adjust icon size */
        height: 20px;
        fill: currentColor;
        transition: transform 0.2s ease-in-out; /* Smooth rotation */
    }
/* Optional: Rotate icon when expanded 
 .operation-resource-item .expanded .accordion-toggle-btn svg {
        transform: rotate(180deg);
    }
*/
/* --- Existing Styles (Keep) --- */
.operation-resource-summary {
    padding: 5px 15px 10px 15px; /* Padding below header */
    font-size: 0.9em;
    color: #666;
    border-bottom: 1px solid #eee; /* Separate summary from details */
    /* NOTE: This entire block might become redundant if you only show details on expand */
}
    /* Styles below might be less relevant now as summary is redesigned */
    .operation-resource-summary .summary-line {
        margin-bottom: 3px;
        line-height: 1.4;
    }

    .operation-resource-summary .alt-label {
        font-weight: 500;
        color: #444;
        margin-right: 5px;
    }

    .operation-resource-summary .alt-name { /* Unused? */
    }

    .operation-resource-summary .alt-risk {
        font-weight: bold;
        margin-left: 5px;
    }

    .operation-resource-summary .no-alt {
        font-style: italic;
        color: #999;
    }


/* --- Updated/Existing Styles --- */
.operation-resource-details {
    padding: 15px;
    background-color: #fff;
    border-top: 1px solid #eee;
    margin-top: 0;
    /* --- CORE MODIFICATIONS --- */
    overflow-y: auto; /* Enable vertical scrolling for this section */
    flex-grow: 1; /* Allow this section to take available vertical space (if parent has fixed height) */
    min-height: 0; /* Necessary for flex children that scroll */
    /*
       Set a max-height for the details section. This is the primary mechanism
       that will make the details scroll internally, rather than making the
       entire .operation-resource-item grow indefinitely.
       Adjust this value based on how much content you want visible before scrolling.
    */
    max-height: 400px; /* EXAMPLE VALUE: Adjust as needed. Could be vh units too e.g., 50vh */
}

.operation-alternative-detail {
    border: none;
    box-shadow: none;
    padding: 10px 0;
    margin-bottom: 15px; /* Keep margin between detail blocks */
}

    .operation-alternative-detail:last-child {
        margin-bottom: 0;
        padding-bottom: 0;
    }

.natural-alt-detail {
    margin-top: 15px;
    padding-top: 15px;
    border-top: 1px dotted #eee;
    position: relative;
}

.alt-risk-inline { /* Style for Risk within the TITLE of expanded details */
    font-weight: bold;
    font-size: 0.9em;
    margin-left: 8px;
    vertical-align: middle;
}

.operation-alternative-detail .rapidres-alternative-title {
    margin-bottom: 0.75rem;
}



.load-more-header-button {
    /* Use btn-sm styles */
    padding: 0.25rem 0.5rem;
    font-size: 0.8rem;
    line-height: 1.2;
    white-space: nowrap;
    display: inline-flex; /* Align icon */
    align-items: center;
    gap: 4px;
    /* Use a subtle style, e.g., outline-primary */
    /* background-color: transparent; */
    /* border: 1px solid #2563eb; */
    /* color: #2563eb; */
}

    .load-more-header-button .icon {
        width: 1em; /* Match font size */
        height: 1em;
    }

    .load-more-header-button:disabled {
        /* Standard disabled styles */
        opacity: 0.65;
        cursor: not-allowed;
    }

/* Remove styles for Load More section inside details if no longer used */
.add-more-container-item.add-more-container-top {
    display: none;
}

hr.load-more-separator {
    display: none;
}

.load-more-button { /* If this class was ONLY used inside details */
    display: none;
}

.no-more-alts-text { /* If this class was ONLY used inside details */
    display: none;
}

.get-alts-button { /* Keep */
    padding: 0.25rem 0.6rem;
    font-size: 0.8rem;
    font-weight: 700;
    line-height: 1.2;
    white-space: nowrap;
    vertical-align: middle;
    background-color: #2563eb; /* Strong blue */
    color: white;
}


.get-alts-button { /* Keep */
    padding: 0.25rem 0.6rem;
    font-size: 0.8rem;
    font-weight: 700;
    line-height: 1.2;
    white-space: nowrap;
    vertical-align: middle;
}

    .get-alts-button .spinner-border-sm { /* Keep */
        width: 0.85rem;
        height: 0.85rem;
        border-width: .2em;
        vertical-align: text-bottom;
        margin-right: 4px;
    }

.small-spinner-inline { /* Keep */
    display: inline-block;
    width: 18px;
    height: 18px;
    border: 2px solid rgba(0, 0, 0, 0.1);
    border-radius: 50%;
    border-top-color: #6c757d;
    animation: spin 1s linear infinite;
    vertical-align: middle;
}

.no-alts-found-indicator { /* Keep */
    font-size: 0.8em;
    color: #888;
    font-style: italic;
    padding: 5px 0;
    white-space: nowrap;
}

.accordion-toggle-btn { /* Keep base style, animation added below */
    background: none;
    border: none;
    padding: 0;
    margin: 0;
    cursor: pointer;
    line-height: 1;
    color: #555;
    display: flex;
    align-items: center;
    justify-content: center;
}

    .accordion-toggle-btn svg { /* Keep */
        width: 18px;
        height: 18px;
        fill: currentColor;
        transition: transform 0.2s ease-in-out;
    }

.get-all-alts-container { /* Keep */
    text-align: center;
    padding: 10px 15px;
    border-bottom: 1px solid #eee;
    margin-bottom: 10px;
}

    .get-all-alts-container .small-spinner-inline {
        margin-right: 5px;
    }
    /* Keep */
    .get-all-alts-container span {
        vertical-align: middle;
        color: #6c757d;
    }
/* Keep */

.resource-category-group { /* Keep */
}

.resource-category-header-container { /* Keep */
    display: flex;
    align-items: center;
    border-bottom: 1px solid #eee;
    padding-bottom: 5px;
    margin-bottom: 10px;
    justify-content: space-between;
}

.resource-category-header { /* Keep */
    flex-grow: 1;
}

.small-spinner-category { /* Keep */
    width: 14px;
    height: 14px;
    border-width: 2px;
    display: inline-block;
    vertical-align: middle;
    margin-left: 8px;
    border: 2px solid rgba(0, 0, 0, 0.1);
    border-radius: 50%;
    border-top-color: #6c757d;
    animation: spin 1s ease-in-out infinite;
    flex-shrink: 0;
}

/* --- New / Specific Styles for Summary+Detail --- */

/* --- Summary Row --- */
.alternative-summary {
    display: flex;
    justify-content: space-between;
    align-items: center; /* Vertically center left column and right actions */
    padding: 10px 12px;
    cursor: pointer;
    /* Remove border-bottom, spacing handled by wrapper margin */
    /* border-bottom: 1px dotted #eee; */
    transition: background-color 0.2s ease;
}

    .alternative-summary:hover {
        background-color: #f8f9fa;
    }

    .alternative-summary.newly-loaded-alternative { /* Keep highlight animation */
        animation: highlight-fade 2.5s ease-out forwards;
    }

    .alternative-summary:last-of-type {
        border-bottom: none;
    }

    .alternative-summary:hover {
        background-color: #f8f9fa;
    }

.alternative-summary-left {
    display: flex;
    flex-direction: column; /* Stack rows vertically */
    align-items: flex-start;
    gap: 5px;
    flex-grow: 1;
    margin-right: 10px;
    min-width: 0; /* Allow shrinking */
}
.alternative-summary-row1 {
    display: flex;
    align-items: center;
    gap: 5px;
    width: 100%;
}

.alternative-summary-left .natural-indicator-icon { /* Keep icon styles */
    position: static;
    margin-right: 0;
    opacity: 1;
    flex-shrink: 0;
    width: 16px;
    height: 16px;
}

.alternative-summary-left .alt-name {
    font-weight: 600;
    color: #212529;
    font-size: 1em;
    line-height: 1.3;
    margin-right: 0;
    padding-top: 0; /* Reset previous alignment styles */
    word-break: break-word;
    flex-grow: 1; /* Allow name to take space */
    min-width: 0; /* Allow shrinking if needed */
}

    .alternative-summary .natural-indicator-icon .icon {
        width: 100%;
        height: 100%; /* Make SVG fill container */
    }

.alternative-summary .alt-name {
    font-weight: 500;
    color: #333;
    margin-right: auto; /* Push indicators right */
    line-height: 1.4; /* Ensure consistent line height */
    padding-top: 2px; /* Align baseline roughly with indicators */
}

.alt-indicator {
    display: inline-block;
    padding: 0.35em 0.65em;
    font-size: 0.8rem;
    font-weight: 700;
    line-height: 1;
    text-align: center;
    white-space: nowrap;
    vertical-align: baseline;
    border-radius: 50rem; /* Creates the pill shape */
    cursor: pointer; /* Indicates it's tappable */
    transition: transform 0.1s ease-in-out, box-shadow 0.1s ease-in-out;
    user-select: none; /* Prevents text selection on tap */
}

    .alt-indicator:hover {
        transform: translateY(-1px);
        box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    }

.assessment-pills-container {
    display: flex;
    flex-wrap: wrap; /* Allow pills to wrap on smaller screens if needed */
    gap: 0.5rem;
    justify-content: center; /* Center the group of pills in the cell */
}

.pill-style-container {
    display: inline-flex; /* Changed from inline-block to inline-flex for better alignment */
    align-items: center;
    padding: 0.4em 0.8em;
    border: 1px solid #ccc;
    border-radius: 50rem;
    font-size: 0.75rem;
    font-weight: 700;
    line-height: 1;
    cursor: pointer;
    background-color: #f8f9fa;
    color: #495057;
    transition: transform 0.1s ease-in-out, box-shadow 0.1s ease-in-out;
    user-select: none;
    max-width: 100%; /* It cannot be wider than its parent cell */
    box-sizing: border-box; /* Ensures padding is included in the width calculation */
    flex-shrink: 1; /* Allow this specific item to shrink */
    min-width: 0; /* Allow flex child to shrink */
}

/*.pill-style-container {
    display: inline-block;*/ /* Use flex to align icon and text */
    /*align-items: center;
    padding: 0.4em 0.8em;
    border: 1px solid #ccc;
    border-radius: 50rem;
    font-size: 0.75rem;
    font-weight: 700;
    line-height: 1;
    cursor: pointer;
    background-color: #f8f9fa;
    color: #495057;
    transition: transform 0.1s ease-in-out, box-shadow 0.1s ease-in-out;
    user-select: none;
    max-width: 100%;*/ /* It cannot be wider than its parent cell */
    /*box-sizing: border-box;*/ /* Ensures padding is included in the width calculation */
/*}*/

    .pill-style-container:hover {
        transform: translateY(-1px);
        box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
        background-color: #e9ecef;
    }

    /* Style for icons inside the pill container */
    .pill-style-container .icon {
        margin-right: 0.5em;
        width: 1em;
        height: 1em;
        flex-shrink: 0; /* Prevent the icon from shrinking */
    }

    /* Style for text inside the pill container, handles truncation */
    .pill-style-container span {
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }
    .pill-style-container > span {
        display: inline-flex;
        align-items: center;
        width: 100%;
    }

    /*.pill-style-container .text-content {*/ /* Add this class to the text span */
        /*white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }*/

    .pill-style-container span .text-content {
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        display: block; /* Ensure block behavior for overflow to work */
        flex-grow: 1;
        min-width: 0; /* Critical for text-overflow in flex containers */
    }

/*.alternative-name-and-use {
    display: flex;  
    flex-wrap: wrap;  
    align-items: center;
    gap: 0.5rem;  
    width: 100%;  
}*/

.alternative-name-and-use {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem;
    width: 100%;
    min-width: 0; /* CRITICAL: Allows flex children to shrink below content size */
}

    /* --- 2. Style the pills themselves --- */
    /* Your existing .pill-style-container is a good base, but we'll add
   some specific rules for this context to ensure they behave correctly. */
    .alternative-name-and-use .pill-style-container {
        flex-grow: 0;
        flex-shrink: 0;  
    }

/*.alt-indicator {
    font-size: 0.15em;
    padding: 3px;
    border-radius: 4px;
    display: inline-flex;
    align-items: center;
    gap: 4px;
    border: 1px solid;*/ /* Border color set by specific classes */
    /*margin-bottom: 3px;*/ /* Spacing if wrapped */
    /*white-space: nowrap;*/ /* Default to nowrap for most */
    /* Colors and backgrounds set by specific classes below */
/*}*/



/* Specific styles for indicators */
.risk-indicator { /* Add specific styles if needed */
}

.prep-indicator { /* Add specific styles if needed */
}

.sourcing-indicator { /* Add specific styles if needed */
}

.suitability-indicator { /* Add specific styles if needed */
}

.evidence-indicator { /* Add specific styles if needed */
}

.interactionrisk-indicator { /* Add specific styles if needed */
}


.prep-indicator {
}

.sourcing-indicator {
}

.requirements-indicator {
    cursor: help;
    /* Apply neutral colors directly or via class */
    background-color: #e9ecef;
    color: #495057;
    border-color: #dee2e6;
    /* Allow wrapping for requirements text */
    white-space: normal;
    text-align: left;
    /* Override inline-flex alignment if needed */
    align-items: flex-start;
}

    /*.requirements-indicator:before {
        content: '\26A0';*/ /* Warning sign */
        /*font-family: initial;*/ /* Use system font for emoji */
        /*margin-right: 3px;
        font-size: 1.1em;
        line-height: 1;
    }*/

/* Color coding for indicators */
.risk-low, .prep-time-seconds, .prep-time-minutes, .sourcing-facility-pharmacy, .sourcing-household-garden {
    background-color: #d1e7dd;
    color: #0f5132;
    border-color: #a3cfbb;
}

.risk-medium, .prep-time-hours, .sourcing-outdoor-garden, .sourcing-foraging-travel {
    background-color: #fff3cd;
    color: #664d03;
    border-color: #ffe69c;
}
/* Grouped colors */
.risk-high, .prep-time-days, .sourcing-specialized-rare {
    background-color: #f8d7da;
    color: #842029;
    border-color: #f5c2c7;
}

.sourcing-unknown {
    background-color: #e9ecef;
    color: #495057;
    border-color: #dee2e6;
}

/* Color Definitions */
.indicator-green { /* LOW Risk */
    background-color: #d1e7dd; /* Bootstrap success light */
    color: #0f5132; /* Bootstrap success dark */
    border-color: #a3cfbb; /* Bootstrap success border */
}

.indicator-blue { /* MEDIUM Risk */
    background-color: #cfe2ff; /* Bootstrap info light */
    color: #055160; /* Bootstrap info dark */
    border-color: #b6d4fe; /* Bootstrap info border */
}

.indicator-orange { /* VERY HIGH Risk */
    background-color: #ffe5d0; /* Custom Orange Light (adjust HSL/Hex) */
    color: #803300; /* Custom Orange Dark (adjust HSL/Hex) */
    border-color: #ffc7a1; /* Custom Orange Border (adjust HSL/Hex) */
    /* OR use Bootstrap's existing orange if suitable */
    /* background-color: #fff0c7; color: #997404; border-color: #ffdf7e; */
}

.indicator-yellow { /* HIGH Risk */
    background-color: #fff3cd; /* Bootstrap warning light */
    color: #664d03; /* Bootstrap warning dark */
    border-color: #ffe69c; /* Bootstrap warning border */
}

.indicator-red { /* EXTREMELY HIGH Risk */
    background-color: #f8d7da; /* Bootstrap danger light */
    color: #842029; /* Bootstrap danger dark */
    border-color: #f5c2c7; /* Bootstrap danger border */
    font-weight: bold; /* Make Extremely High stand out more */
}

.indicator-grey { /* Unknown/Default */
    background-color: #e9ecef; /* Bootstrap secondary light */
    color: #495057; /* Bootstrap secondary dark */
    border-color: #dee2e6; /* Bootstrap secondary border */
}

/* Specific indicator types might have slight tweaks */
.risk-indicator { /* e.g., slightly bolder text? */
    /*font-weight: 500;*/
}

.prep-indicator {
}

.sourcing-indicator {
}


    /* Grey for requirements */
    /*.requirements-indicator:before {
        content: '\26A0';
        font-family: initial;
        margin-right: 3px;
        font-size: 1.1em;
        line-height: 1;
    }*/

/* Individual detail expand button */
.alternative-summary-expand-btn {
    background: none;
    border: none;
    padding: 0 5px;
    cursor: pointer;
    color: #6c757d;
    flex-shrink: 0;
    align-self: center; /* Center vertically */
}

    .alternative-summary-expand-btn svg {
        width: 14px;
        height: 14px;
        fill: currentColor;
        transition: transform 0.2s ease-in-out;
    }

    .alternative-summary-expand-btn.expanded svg {
        transform: rotate(180deg);
    }
/* Applied via class */

.alternative-item-wrapper {
    border: 1px solid #d0d0d0;
    border-radius: 6px;
    margin-bottom: 12px;
    background-color: #fff;
    overflow: hidden;
    transition: box-shadow 0.2s ease;
}

    .alternative-item-wrapper:last-child {
        margin-bottom: 0;
    }

    .alternative-item-wrapper:hover {
        box-shadow: 0 2px 5px rgba(0,0,0,0.08);
    }

    .alternative-item-wrapper.is-preferred-alternative {
        border-left: 4px solid #198754;
        background-color: #f0fff4;
    }


.alternative-full-details {
    padding: 10px 12px 15px 12px;
    background-color: #fdfdfd;
    border-top: 1px solid #eee;
    /*display: none;*/ /* Hidden by default, shown by Blazor @if */
}

    .alternative-full-details .rapidres-section {
        margin-bottom: 10px;
    }

    .alternative-full-details .rapidres-section-title {
        font-size: 0.9em;
        font-weight: 600;
    }

    .alternative-full-details .rapidres-section-content {
        font-size: 0.85em;
        line-height: 1.5;
    }





.selected-alt-indicator {
    color: #198754; /* Bootstrap success green (adjust as needed) */
    font-weight: 600; /* Make it slightly bold */
    font-size: 0.9em; /* Slightly smaller than main name */
    margin-left: 8px; /* Space after the resource name */
    vertical-align: middle; /* Align nicely if on same line */
}

.new-badge {
    background-color: green;
    color: white;
    font-size: 1em;
    font-weight: bold;
    padding: 2px 5px;
    border-radius: 4px;
    margin-right: 5px;
    vertical-align: middle;
    text-transform: uppercase;
    line-height: 1;
    display: inline-block;
   
}

    /* Base style for ALL badges (NEW, Selected, etc.) */
    .badge-indicator { /* NEW Base Class */
        color: white;
        font-size: 0.65em;
        font-weight: bold;
        padding: 3px 6px; /* Slightly larger padding maybe */
        border-radius: 4px;
        margin-left: 8px; /* Space AFTER the resource name */
        vertical-align: middle; /* Align with resource name */
        text-transform: uppercase;
        line-height: 1;
        display: inline-block; /* Important for layout */
    }
    /* Color Modifier for NEW badge */
    .badge-indicator.badge-new {
        background-color: #2563eb; /* Blue */
    }
    /* Color Modifier for SELECTED badge */
    .badge-indicator.badge-selected { /* NEW Modifier Class */
        background-color: #198754; /* Bootstrap Success Green */
    }
    /* Keep NEW badge animation reference if needed */
    .accordion-toggle-btn.has-new-alternatives-indicator .new-badge {
        animation: pulse-indicator 1.5s infinite ease-in-out;
    }


    .selected-badge-action-wrapper {
        display: inline-block; /* Allow interaction */
        cursor: pointer; /* Indicate clickable */
        /* Optional: Add slight visual cue on hover */
        /* transition: opacity 0.2s ease; */
    }
    /*.selected-badge-action-wrapper:hover .badge-indicator {*/
    /* opacity: 0.85; */ /* Example hover effect */
    /*}*/
    /* Keep existing badge styles */
    .badge-indicator { /* ... */
    }

    .badge-indicator.badge-selected { /* ... */
    }
    /* Animation for the main accordion toggle when NEW */
    @keyframes pulse-indicator {
        0%, 100% {
        transform: scale(1);
        opacity: 0.7;
    }

    50% {
        transform: scale(1.15);
        opacity: 1.0;
    }
}

.accordion-toggle-btn.has-new-alternatives-indicator svg {
    animation: pulse-indicator 1.5s infinite ease-in-out;
}

.view-mode-toggle-container {
    display: flex;
    justify-content: center; /* Or flex-start / flex-end */
    gap: 10px;
    margin-bottom: 15px; /* Space below toggles */
}
    /* Adjust button sizes if needed */
    .view-mode-toggle-container .btn-sm {
        padding: 0.3rem 0.6rem;
        font-size: 0.8rem;
    }

/* Style for the Select/Pin button */
.select-pin-button {
    padding: 1px 5px; /* Make it small */
    line-height: 1;
    margin-right: 8px; /* Space after pin button */
    flex-shrink: 0;
    font-size: 0.9em; /* Adjust icon size if using text */
}

/* Style for highlighting the summary when its alternative is selected */
.alternative-summary.is-preferred-alternative {
    background-color: #d1e7dd; /* Light green background */
    border-left: 3px solid #198754; /* Green left border */
    padding-left: 5px; /* Adjust padding slightly */
}
/* Optional: Style for header when its resource has a selected alternative */
.operation-resource-header.is-selected-resource {
    /* background-color: #eef; */ /* Example: Light blue background for header */
    /* border-left: 3px solid #2563eb; */
}
/* Style for the main View/Hide Alternatives button in the header */
.view-hide-button {
    /* Inherit general button styles (btn, btn-sm) */
    /* Add specific padding/margins if needed */
    white-space: nowrap;
    display: inline-flex; /* Align icon and text */
    align-items: center;
}

    .view-hide-button svg { /* Style arrow inside */
        margin-left: 5px;
        width: 12px;
        height: 12px;
        transition: transform 0.2s ease-in-out; /* Keep transition */
    }
        /* Rotate arrow only, not the button text */
        .view-hide-button svg path { /* Target path if SVG structure allows */
            /* Ensure icon state matches overall expansion */
            /* transform: rotate(0deg); /* Default down */ */
            /* No rotation needed here, state is handled by swapping SVG path in markup */
        }

.alt-compare-button {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 0.2rem 0.5rem;
    font-size: 0.8em; /* Make slightly larger */
}

.detail-toggle-button {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 0.2rem 0.5rem;
    font-size: 0.8em; /* Make slightly larger */
}

.detail-toggle-arrow {
    width: 12px;
    height: 12px;
    fill: currentColor;
    transition: transform 0.2s ease-in-out;
}

.detail-toggle-button.expanded .detail-toggle-arrow { /* Apply rotation based on parent button class */
    transform: rotate(180deg);
}

.select-pin-button {
    padding: 2px 6px;
    font-size: 0.9em;
    line-height: 1;
    margin-right: 0; /* Removed margin */
}

.comparison-table tbody tr.comparison-action-row {
    background-color: #f8f9fa; /* Slightly different background for action row */
}

.comparison-table .cell-action {
    text-align: center; /* Center the button in the cell */
    vertical-align: middle;
    padding: 0.5rem; /* Adjust padding */
}

.comparison-header-actions {
    display: flex;
    justify-content: center; /* Center the group of buttons */
    align-items: center;
    gap: 8px; /* Space between the two buttons */
    margin-top: 0.3rem; /* Small space above buttons */
    width: 100%; /* Make the container take full width */
}


.select-pin-button-table {
    width: 100%; /* <<< Make button take full width of its cell */
    display: block; /* <<< Needed for width: 100% to work correctly on a button */
    padding: 0.4rem 0.5rem; /* Adjust padding as needed */
    font-size: 0.85rem;
    white-space: nowrap; /* Prevent text wrapping if too long */
    overflow: hidden;
    text-overflow: ellipsis;
}

.select-pin-button-header,
.remove-from-compare-btn-header {
    flex-grow: 1; /* Allow buttons to grow and share space */
    flex-basis: 0; /* Distribute space evenly */
    text-align: center;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    padding: 0.25rem 0.4rem; /* Adjust padding for desired size */
    font-size: 0.75rem; /* Adjust font size */
    /* Bootstrap .btn and .btn-sm provide base styling */
}

    .alternative-summary:last-of-type {
        border-bottom: none;
    }


.alternative-summary-actions {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-shrink: 0;
}

.alternative-summary-indicators {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    width: 100%;
}

.alternative-summary .alt-indicator {
    font-size: 0.8rem;
    font-weight: 700;
    padding: 3px; /* Keep padding */
    border-radius: 4px; /* Keep border-radius */
    white-space: nowrap;
    display: inline-flex;
    align-items: center;
    gap: 4px;
    border: 1px solid; /* Keep border style, color set by specific class */
    margin-bottom: 3px;
    /* background-color: #e9ecef; <-- REMOVE */
    /* color: #495057;           <-- REMOVE */
    /* border-color: #dee2e6;     <-- REMOVE (or set to transparent) */
}
/* Keep color classes: .indicator-green, .indicator-orange, etc. */
/* Keep specific indicator styles: .risk-indicator, .prep-indicator, etc. */

/* Row 3: Requirements Indicator */
.alternative-summary-requirements {
    width: 100%; /* Take full width */
    margin-top: 2px; /* Slight space above requirements */
}



    .alternative-summary-requirements .requirements-indicator {
        /* Inherits base .alt-indicator styles */
        /* Option A: Allow wrapping (Remove white-space: nowrap) */
        /*white-space: normal;*/ /* <<< ALLOW WRAPPING */
        /*text-align: left;*/ /* Ensure wrapped text aligns left */
        /*display: block;*/ /* Make it block to take full width */
        /*width: 100%;*/ /* Explicitly set width */
        /* Remove inline-flex gap if using block */
        /*gap: 0;
        padding: 4px 6px;*/ /* Adjust padding for block */
       /*  Option B: Truncate (Keep white-space: nowrap from base) */
         white-space: nowrap;  
         overflow: hidden; 
         text-overflow: ellipsis; 
         display: inline-block;   
         max-width: 100%; 
    }

        /*.alternative-summary-requirements .requirements-indicator:before {*/
            /* Keep icon style */
            /*content: '\26A0';
            font-family: initial;
            margin-right: 4px;*/ /* Adjust space */
            /* display: inline-block; <- Needed if span itself is block */
            /* vertical-align: middle; <- Adjust alignment if needed */
        /*}*/

.alternative-summary .alt-name {
    margin-right: 0; /* Remove auto margin */
    line-height: initial; /* Reset line height */
    padding-top: 0; /* Remove padding */
    font-weight: 600; /* Make name bolder */
}


/* Adjustments for the summary expand button if needed */
.alternative-summary-expand-btn {
    /* Renamed to detail-toggle-button, remove if not used */
    display: none; /* Hide the old arrow button */
}

.alternative-summary.newly-loaded-alternative {
    animation: highlight-fade 2.5s ease-out forwards; /* Adjust duration */
}

@keyframes highlight-fade {
    0% {
        background-color: #e7f3ff; /* Light blue highlight start */
        /* Or #fff3cd; for yellowish */
    }

    70% { /* Hold highlight for a bit */
        background-color: #e7f3ff;
    }

    100% {
        background-color: transparent; /* Fade back to default (or hover color) */
    }
}

.resourcesrequiredcontainer {
    width: 100%;
    margin-top: 1rem;
    padding: 5px; /* Padding on all sides */
    border: none; /* A very light border color */
    border-radius: 8px; /* Soft, rounded corners */
    background-color: transparent; /* A very light grey background to lift it off the page */
}


.alternativebuttoncontainer {
    width: 100%;
    margin-top: 1rem;
    padding: 5px; /* Padding on all sides */
    border: 1px solid #e9ecef; /* A very light border color */
    border-radius: 8px; /* Soft, rounded corners */
    background-color: #f8f9fa; /* A very light grey background to lift it off the page */
}

.assessmentsection {
    width: 100%;
    margin-top: 1rem;
    padding: 5px; /* Padding on all sides */
    border: 1px solid #e9ecef; /* A very light border color */
    border-radius: 8px; /* Soft, rounded corners */
    background-color: #f8f9fa; /* A very light grey background to lift it off the page */
}

.citationssection {
    width: 100%;
    margin-top: 1rem;
    padding: 5px; /* Padding on all sides */
    border: none; /* A very light border color */
    border-radius: 8px; /* Soft, rounded corners */
    background-color: transparent; /* A very light grey background to lift it off the page */
}

.resources-required-label {
    width: 100%;
    font-size: 1.6rem;
    font-weight: 700; /* Make it slightly bold */
    color: #555; /* Slightly darker grey */
    margin-top: 10px; /* Space above the label */
    margin-bottom: 8px; /* Space below the label, before the list starts */
    padding-left: 15px; /* Align with list content padding */
    padding-right: 15px;
    text-align: left; /* Default to left */
    /* Ensure text alignment respects directionality */
}

.category-title-top-label {
    font-size: 0.8rem;
    font-weight: 700;
    color: #555; /* Slightly darker grey */
    margin-top: 10px; /* Space above the label */
    margin-bottom: 8px; /* Space below the label, before the list starts */
    padding-left: 15px; /* Align with list content padding */
    padding-right: 15px;
    text-align: center; /* Default to left */
    /* Ensure text alignment respects directionality */
}


.section-title-header {
    /* Inherit some properties from .new-badge or define explicitly */
    background-color: #6c757d; /* Example: Bootstrap secondary/grey */
    color: white;
    font-size: 1em; /* Adjust size to be distinct but readable */
    font-weight: 500; /* Normal or slightly bold */
    padding: 3px;
    border-radius: 4px;
    margin-left: 8px; /* Space after the separator */
    vertical-align: middle;
    /* text-transform: uppercase; /* Optional: Keep if you want uppercase */
    line-height: 1.2;
    display: inline-block;
    white-space: nowrap;
}

.currently-viewing-container {
    background-color: #2563eb; /* Example: Blue */
    color: white;
    font-size: 0.65em;
    font-weight: bold;
    padding: 3px 6px; /* Slightly more padding for readability */
    border-radius: 4px;
    margin-left: 5px;
    vertical-align: middle;
    text-transform: uppercase;
    line-height: 1.2; /* Adjusted for better vertical centering with text */
    display: inline-block;
    white-space: nowrap; /* Prevent wrapping */
}

/* Style for the "Currently Viewing Resource" span */
.currently-viewing-resource {
    /* Inherit some properties from .new-badge or define explicitly */
    background-color: #6c757d; /* Example: Bootstrap secondary/grey */
    color: white;
    font-size: 0.7em; /* Adjust size to be distinct but readable */
    font-weight: 500; /* Normal or slightly bold */
    padding: 3px;
    border-radius: 4px;
    margin-left: 8px; /* Space after the separator */
    vertical-align: middle;
    /* text-transform: uppercase; /* Optional: Keep if you want uppercase */
    line-height: 1.2;
    display: inline-block;
    white-space: nowrap;
}

.reccomendedlabel {
    /* Inherit some properties from .new-badge or define explicitly */
    background-color: #6c757d; /* Example: Bootstrap secondary/grey */
    color: white;
    font-size: 0.7em; /* Adjust size to be distinct but readable */
    font-weight: 500; /* Normal or slightly bold */
    padding: 3px;
    border-radius: 4px;
    margin-left: 8px; /* Space after the separator */
    vertical-align: middle;
    /* text-transform: uppercase; /* Optional: Keep if you want uppercase */
    line-height: 1.2;
    display: inline-block;
    white-space: nowrap;
}



/* Style for the "Currently Viewing Alternative Detail" span */
.currently-viewing-alt-detail {
    /* Inherit some properties from .new-badge or define explicitly */
    background-color: #198754; /* Example: Bootstrap success/green */
    color: white;
    font-size: 0.7em; /* Consistent with resource viewing span */
    font-weight: 500;
    padding: 3px;
    border-radius: 4px;
    margin-left: 5px; /* Space after the preceding text/separator */
    vertical-align: middle;
    /* text-transform: uppercase; /* Optional */
    line-height: 1.2;
    display: inline-block;
    white-space: nowrap;
}

.currently-viewing-alt-detail-section {
    /* Inherit some properties from .new-badge or define explicitly */
    background-color: #2563eb; /* Example: Bootstrap success/green */
    color: white;
    font-size: 0.7em; /* Consistent with resource viewing span */
    font-weight: 500;
    padding: 3px;
    border-radius: 4px;
    margin-left: 5px; /* Space after the preceding text/separator */
    vertical-align: middle;
    /* text-transform: uppercase; /* Optional */
    line-height: 1.2;
    display: inline-block;
    white-space: nowrap;
}

.whatyouneedstyle {
    font-size: 1.6rem;
    font-weight: 700;
    /* Inherit some properties from .new-badge or define explicitly */
    background-color: white; /* Example: Bootstrap secondary/grey */
    color: black;
    font-size: 1em; /* Adjust size to be distinct but readable */
    font-weight: 500; /* Normal or slightly bold */
    padding: 3px;
    border-radius: 4px;
    margin-left: 8px; /* Space after the separator */
    vertical-align: middle;
    /* text-transform: uppercase; /* Optional: Keep if you want uppercase */
    line-height: 1.2;
    display: inline-block;
    white-space: nowrap;
}

.resourcesrequiredsprefix {
    /* Inherit some properties from .new-badge or define explicitly */
    background-color: white; /* Example: Bootstrap secondary/grey */
    color: black;
    font-size: 1em; /* Adjust size to be distinct but readable */
    font-weight: 500; /* Normal or slightly bold */
    padding: 3px;
    border-radius: 4px;
    margin-left: 8px; /* Space after the separator */
    vertical-align: middle;
    /* text-transform: uppercase; /* Optional: Keep if you want uppercase */
    line-height: 1.2;
    display: inline-block;
    white-space: nowrap;
}

.citation-backgroundwhite {
    font-size: 0.5em; /* Adjust size to be distinct but readable */
    font-weight: 500; /* Normal or slightly bold */
    padding: 3px;
    border-radius: 4px;
    margin-left: 8px; /* Space after the separator */
    vertical-align: middle;
    /* text-transform: uppercase; /* Optional: Keep if you want uppercase */
    line-height: 1.2;
    display: inline-block;
    white-space: nowrap;
}

.citationsprefix {
    /* Inherit some properties from .new-badge or define explicitly */
    background-color: #6c757d; /* Example: Bootstrap secondary/grey */
    color: white;
    font-size: 0.5em; /* Adjust size to be distinct but readable */
    font-weight: 500; /* Normal or slightly bold */
    padding: 3px;
    border-radius: 4px;
    margin-left: 8px; /* Space after the separator */
    vertical-align: middle;
    /* text-transform: uppercase; /* Optional: Keep if you want uppercase */
    line-height: 1.2;
    display: inline-block;
    white-space: nowrap;
}

.alternativebuttoncontainerprefix {
    /* Inherit some properties from .new-badge or define explicitly */
    background-color: black; /* Example: Bootstrap secondary/grey */
    color: white;
    font-size: 0.5em; /* Adjust size to be distinct but readable */
    font-weight: 500; /* Normal or slightly bold */
    padding: 3px;
    border-radius: 4px;
    margin-left: 8px; /* Space after the separator */
    vertical-align: middle;
    /* text-transform: uppercase; /* Optional: Keep if you want uppercase */
    line-height: 1.2;
    display: inline-block;
    white-space: nowrap;
}

.assessmentprefix {
    /* Inherit some properties from .new-badge or define explicitly */
    background-color: black; /* Example: Bootstrap secondary/grey */
    color: white;
    font-size: 0.5em; /* Adjust size to be distinct but readable */
    font-weight: 500; /* Normal or slightly bold */
    padding: 3px;
    border-radius: 4px;
    margin-left: 8px; /* Space after the separator */
    vertical-align: middle;
    /* text-transform: uppercase; /* Optional: Keep if you want uppercase */
    line-height: 1.2;
    display: inline-block;
    white-space: nowrap;
}

.assessmentprefix {
    /* Inherit some properties from .new-badge or define explicitly */
    background-color: black; /* Example: Bootstrap secondary/grey */
    color: white;
    font-size: 0.5em; /* Adjust size to be distinct but readable */
    font-weight: 500; /* Normal or slightly bold */
    padding: 3px;
    border-radius: 4px;
    margin-left: 8px; /* Space after the separator */
    vertical-align: middle;
    /* text-transform: uppercase; /* Optional: Keep if you want uppercase */
    line-height: 1.2;
    display: inline-block;
    white-space: nowrap;
}

.resourceprefixspan {
    /* Inherit some properties from .new-badge or define explicitly */
    background-color: #000; /* Example: Bootstrap secondary/grey */
    color: white;
    font-size: 0.5em; /* Adjust size to be distinct but readable */
    font-weight: 500; /* Normal or slightly bold */
    padding: 3px;
    border-radius: 4px;
    margin-left: 8px; /* Space after the separator */
    vertical-align: middle;
    /* text-transform: uppercase; /* Optional: Keep if you want uppercase */
    line-height: 1.2;
    display: inline-block;
    white-space: nowrap;
}

.alternativeprefixspan {
    /* Inherit some properties from .new-badge or define explicitly */
    background-color: #6c757d; /* Example: Bootstrap secondary/grey */
    color: white;
    font-size: 0.5em; /* Adjust size to be distinct but readable */
    font-weight: 500; /* Normal or slightly bold */
    padding: 3px;
    border-radius: 4px;
    margin-left: 8px; /* Space after the separator */
    vertical-align: middle;
    /* text-transform: uppercase; /* Optional: Keep if you want uppercase */
    line-height: 1.2;
    display: inline-block;
    white-space: nowrap;
}

.citation-backgroundwhite {
    /* Inherit some properties from .new-badge or define explicitly */
    background-color: #FFF; /* Example: Bootstrap success/green */
    color: white;
    font-size: 0.7em; /* Consistent with resource viewing span */
    font-weight: 500;
    padding: 3px;
    border-radius: 4px;
    margin-left: 5px; /* Space after the preceding text/separator */
    vertical-align: middle;
    /* text-transform: uppercase; /* Optional */
    line-height: 1.2;
    display: inline-block;
    white-space: nowrap;
    border: 1px solid #000;
}

.categoryheaderprefixspan {
    /* Inherit some properties from .new-badge or define explicitly */
    background-color: #6c757d; /* Example: Bootstrap secondary/grey */
    color: white;
    font-size: 0.5em; /* Adjust size to be distinct but readable */
    font-weight: 500; /* Normal or slightly bold */
    padding: 3px;
    border-radius: 4px;
    margin-left: 8px; /* Space after the separator */
    vertical-align: middle;
    /* text-transform: uppercase; /* Optional: Keep if you want uppercase */
    line-height: 1.2;
    display: inline-block;
    white-space: nowrap;
}

.citation-backgroundblack {
    /* Inherit some properties from .new-badge or define explicitly */
    background-color: #000; /* Example: Bootstrap success/green */
    color: white;
    font-size: 0.7em; /* Consistent with resource viewing span */
    font-weight: 500;
    padding: 3px;
    border-radius: 4px;
    margin-left: 5px; /* Space after the preceding text/separator */
    vertical-align: middle;
    /* text-transform: uppercase; /* Optional */
    line-height: 1.2;
    display: inline-block;
    white-space: nowrap;
    border: 1px solid #FFF;
}



/* Style for the single-line filter bar */
.filter-bar-container {
    display: flex;
    flex-wrap: wrap; /* Allow wrapping on small screens */
    align-items: center;
    justify-content: center; /* Center filter groups */
    gap: 0.5rem 1rem; /* Vertical and horizontal gap */
    padding: 8px 15px;
    margin-bottom: 10px; /* Space before hr */
    /*background-color: #f8f9fa;*/ /* Optional light background */
    border-radius: 4px;
    /* border: 1px solid #dee2e6; Optional border */
    font-size: xx-small; /* Base font size for the container */
}




.filter-bar-label {
    font-size: 0.8rem;
    font-weight: 700;
    color: black;
    margin-left: 0.5rem;
    margin-right: 0.5rem; /* Space after label */
    flex-shrink: 0; /* Prevent label from shrinking */
}

.filter-btn-group {
    /* Optional: Add specific styles for the button groups */
    flex-shrink: 0; /* Prevent groups shrinking too much */
    font-size: xx-small; /* Font size for the group */
}

    /* Ensure small buttons in groups look good */
    .filter-btn-group .btn-sm {
        padding: 0.3rem 0.6rem;
        font-size: xx-small;
        font-size: 0.8rem;
        font-weight: 700; /* <<< THIS SHOULD APPLY TO YOUR BUTTONS */
        /* Add other Bootstrap button styles if needed */
    }


.filter-bar-container .filter-btn-group button.btn.btn-sm {
    font-size: xx-small;
    /* You might need to adjust padding again if Bootstrap's btn-sm padding overrides */
    padding: 0.25rem 0.5rem; /* Example padding for very small text */
}

.filter-bar-container .filter-btn-group button.btn {
    font-size: xx-small;
    padding: 0.25rem 0.5rem; /* Adjust padding */
}

.filter-bar-container .filter-btn-group .btn-sm { /* or your preferred selector */
    font-size: 0.65rem; /* Example: equivalent to ~10px if base is 16px */
    /* or font-size: 10px; */
    padding: 0.2rem 0.4rem; /* Adjust padding for the smaller text */
}

    /*COMPARSION UI*/
/* Styles for Comparison View */
.comparison-view-container {
    padding: 10px;
}

.comparison-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 15px;
    padding-bottom: 10px;
    border-bottom: 1px solid #ccc;
}

    .comparison-header h4 {
        margin: 0;
        font-weight: 600;
    }

/* Container to make table responsive horizontally */
.comparison-table-container {
    width: 100%;
    overflow-x: auto; /* Add horizontal scroll on small screens */
    margin-top: 10px;
}

/* Base table styling */
.comparison-table {
    width: 100%;
    min-width: 600px; /* Minimum width before horizontal scroll appears */
    border-collapse: collapse;
    table-layout: fixed; /* Helps columns maintain width */
}

/* Header Cell Styling */
.comparison-header-cell {
    background-color: #f8f9fa;
    padding: 0.5rem 0.75rem;
    text-align: left;
    vertical-align: top; /* Align header content top */
    font-size: 0.85rem;
    font-weight: 600;
    border: 1px solid #dee2e6;
}

.selected-alt-name {
    font-weight: normal; /* Make selected name normal weight */
    font-size: 0.9em;
}

/* Label Column Styling (First Column) */
th.comparison-label-col {
    width: 100px; /* Fixed width for labels */
    font-weight: 600;
    background-color: #f8f9fa;
    vertical-align: middle; /* Center labels vertically */
    text-align: right;
    padding-right: 10px;
}

/* Data Cell Styling */
.comparison-data-cell {
    padding: 0.5rem 0.75rem;
    vertical-align: top; /* Align content top */
    font-size: 0.85rem;
    border: 1px solid #dee2e6;
    word-wrap: break-word; /* Allow long content to wrap */
    width: 180px; /* Suggest a width, but table-layout: fixed helps */
    /* If using fixed layout, the width is distributed */
}

/* Specific cell styles (e.g., for centering or text wrapping) */
.cell-risk, .cell-sourcing, .cell-prep, .cell-evidence, .cell-suitability, .cell-interactionrisk {
    text-align: center;
    font-weight: 500;
    white-space: nowrap; /* Prevent indicators from wrapping */
}

.cell-how div, .cell-caution div { /* Target div inside for pre-wrap */
    white-space: pre-wrap; /* Preserve formatting for How/Caution */
}

.cell-requirements {
    font-style: italic;
    color: #555;
}


/* Apply background colors to cells based on risk/sourcing/prep */
/* Risk */
.cell-risk.risk-low {
    background-color: #d1e7dd;
}

.cell-risk.risk-medium {
    background-color: #fff3cd;
}

.cell-risk.risk-high {
    background-color: #f8d7da;
}

.cell-risk.risk-very-high {
    background-color: #f1aeb5;
}
/* Slightly less intense red */
.cell-risk.risk-extremely-high {
    background-color: #dc3545;
    color: white;
}
/* Intense red */

/* Sourcing */
.cell-sourcing.sourcing-on-site-local {
    background-color: #d1e7dd;
}

.cell-sourcing.sourcing-requires-travel-delivery {
    background-color: #f8d7da;
}

/* Prep Time */
.cell-prep.prep-time-lt-1-min,
.cell-prep.prep-time-1-10-mins {
    background-color: #d1e7dd;
}

.cell-prep.prep-time-10-60-mins,
.cell-prep.prep-time-1-4-hrs {
    background-color: #fff3cd;
}

.cell-prep.prep-time-days {
    background-color: #f8d7da;
}

/* Risk Cell Colors */
.comparison-data-cell.cell-risk.indicator-green {
    background-color: #d1e7dd;
    color: #0f5132;
}

.comparison-data-cell.cell-risk.indicator-orange {
    background-color: #fff3cd;
    color: #664d03;
}

.comparison-data-cell.cell-risk.indicator-red {
    background-color: #f8d7da;
    color: #842029;
}

.comparison-data-cell.cell-risk.indicator-darkred {
    background-color: #dc3545;
    color: #ffffff;
    font-weight: 500;
}

.comparison-data-cell.cell-risk.indicator-black {
    background-color: #212529;
    color: #ffffff;
    font-weight: bold;
}

.comparison-data-cell.cell-risk.indicator-grey {
    background-color: #e9ecef;
    color: #495057;
}

/* Sourcing Cell Colors */
.comparison-data-cell.cell-sourcing.indicator-green {
    background-color: #d1e7dd;
    color: #0f5132;
}

.comparison-data-cell.cell-sourcing.indicator-orange {
    background-color: #fff3cd;
    color: #664d03;
}
/* For 'Local' if that's orange */
.comparison-data-cell.cell-sourcing.indicator-red {
    background-color: #f8d7da;
    color: #842029;
}

.comparison-data-cell.cell-sourcing.indicator-grey {
    background-color: #e9ecef;
    color: #495057;
}

/* Prep Time Cell Colors */
.comparison-data-cell.cell-prep.indicator-green {
    background-color: #d1e7dd;
    color: #0f5132;
}

.comparison-data-cell.cell-prep.indicator-orange {
    background-color: #fff3cd;
    color: #664d03;
}

.comparison-data-cell.cell-prep.indicator-red {
    background-color: #f8d7da;
    color: #842029;
}

.comparison-data-cell.cell-prep.indicator-grey {
    background-color: #e9ecef;
    color: #495057;
}

.comparison-data-cell.cell-evidence.indicator-green {
    background-color: #d1e7dd;
    color: #0f5132;
}

.comparison-data-cell.cell-evidence.indicator-orange {
    background-color: #fff3cd;
    color: #664d03;
}

.comparison-data-cell.cell-evidence.indicator-red {
    background-color: #f8d7da;
    color: #842029;
}

.comparison-data-cell.cell-evidence.indicator-grey {
    background-color: #e9ecef;
    color: #495057;
}

.comparison-data-cell.cell-suitability.indicator-green {
    background-color: #d1e7dd;
    color: #0f5132;
}

.comparison-data-cell.cell-suitability.indicator-orange {
    background-color: #fff3cd;
    color: #664d03;
}

.comparison-data-cell.cell-suitability.indicator-red {
    background-color: #f8d7da;
    color: #842029;
}

.comparison-data-cell.cell-suitability.indicator-grey {
    background-color: #e9ecef;
    color: #495057;
}

.comparison-data-cell.cell-interactionrisk.indicator-green {
    background-color: #d1e7dd;
    color: #0f5132;
}

.comparison-data-cell.cell-interactionrisk.indicator-orange {
    background-color: #fff3cd;
    color: #664d03;
}

.comparison-data-cell.cell-interactionrisk.indicator-red {
    background-color: #f8d7da;
    color: #842029;
}

.comparison-data-cell.cell-interactionrisk.indicator-grey {
    background-color: #e9ecef;
    color: #495057;
}

/* Base styles for cells if not already clear */
.comparison-data-cell {
    padding: 0.5rem 0.75rem;
    vertical-align: top;
    font-size: 0.85rem;
    border: 1px solid #dee2e6;
    word-wrap: break-word;
}

.cell-risk, .cell-sourcing, .cell-prep {
    text-align: center; /* Center the text within these colored cells */
    font-weight: 500; /* Make text slightly bolder */
    /* white-space: nowrap; /* Remove this if text needs to wrap */
}

/* Style for the "View Comparing" button in the resource item header */
.view-comparing-button {
    /* Similar to other header buttons, e.g., btn-info or outline */
    margin-left: 8px; /* Space from other buttons */
}

/* Style for the "Compare" toggle button on each alternative summary */
.compare-toggle-button {
    padding: 1px 5px; /* Small button */
    font-size: 0.8em;
    margin-right: 8px; /* Space between compare and name/icon */
    flex-shrink: 0;
}

    .compare-toggle-button.btn-info svg { /* Example for active compare */
        /* fill: white; */
    }

    .compare-toggle-button .icon { /* If using an icon */
        width: 1em;
        height: 1em;
    }

/* Style for alternative summary when marked for compare */
.alternative-summary.marked-for-compare {
    background-color: #e6f7ff; /* Light blueish tint */
    /* border-left: 3px solid #0dcaf0; */ /* Optional side border */
}

/* Message when no items are in compare view */
.no-items-in-view-message {
    text-align: center;
    padding: 15px;
    font-style: italic;
    color: #6c757d;
}

.comparison-table th.is-preferred-column,
.comparison-table td.is-preferred-column {
    background-color: #e6ffed !important; /* Light green background, use !important if other BGs conflict */
    /* You can also add a border or other visual cues */
    /* border-left: 2px solid #198754; */
    /* border-right: 2px solid #198754; */
}

    /* Ensure selected button within the preferred column maintains its active style */
    .comparison-table td.is-preferred-column .select-pin-button-table.btn-success {
        /* background-color: #198754; /* Keep its success color */
        /* color: white; */
    }

/* Action row might need a slightly different shade if the column is highlighted */
.comparison-table tr.comparison-action-row td.is-preferred-column {
    background-color: #d9f7e3 !important; /* Slightly different shade for action row if needed */
}

.natural-indicator-icon-small {
    font-size: 0.8em; /* Adjust size */
    margin-left: 4px;
}

/* NEW: Style for the "Remove from Compare" button */
.remove-from-compare-btn {
    padding: 0.1rem 0.3rem; /* Make it small */
    line-height: 1;
    font-size: 0.9em; /* Adjust text/icon size */
    flex-shrink: 0; /* Prevent button from shrinking */
    /* Bootstrap outline-danger provides red outline */
}

    .remove-from-compare-btn:hover {
        /* background-color: #dc3545; */ /* Optional: Red background on hover */
        /* color: white; */
    }





    /*CHAT QNA UI*/
/* --- Q&A Section Styles --- */
.qna-section {
    margin-top: 20px;
    padding-top: 15px;
    border-top: 1px #ddd; /* Separator from other details */
}

.qna-title {
    font-size: 0.95em;
    font-weight: 600;
    color: #444;
    margin-bottom: 10px;
}

.qna-history {
    max-height: 150px; /* Limit history height */
    overflow-y: auto; /* Scroll for long history */
    margin-bottom: 10px;
    padding: 8px;
    background-color: #f9f9f9; /* Light background for history */
    border-radius: 4px;
    font-size: 0.8em;
}

.qna-question {
    margin-bottom: 2px;
    color: #333;
}

    .qna-question strong {
        color: #007bff; /* Blue for "Q:" */
    }

.qna-answer {
    margin-bottom: 8px; /* Space between Q&A pairs */
    color: #555;
    padding-left: 10px; /* Indent answer slightly */
    white-space: pre-wrap; /* Preserve answer formatting */
}

    .qna-answer strong {
        color: #28a745; /* Green for "A:" */
    }


.qna-input-group {
    display: flex;
    gap: 8px;
    align-items: center; /* Vertically align input and button */
}

.qna-input {
    flex-grow: 1; /* Input takes most space */
    font-size: 0.85em;
    /* Use Bootstrap's form-control for basic styling if available */
}

.qna-send-button {
    flex-shrink: 0; /* Prevent button from shrinking */
    /* Uses btn btn-primary btn-sm */
    font-size: 0.85em;
    padding: 0.25rem 0.6rem; /* Adjust padding */
}

    .qna-send-button .spinner-border-sm {
        width: 0.9em; /* Adjust spinner size within button */
        height: 0.9em;
    }


.qna-thinking-indicator {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 5px 0; /* Add some vertical space */
    font-size: 0.8em;
    color: #6c757d; /* Secondary text color */
    font-style: italic;
}

    .qna-thinking-indicator .spinner-grow-sm {
        /* Bootstrap handles size, just ensure color */
        color: #6c757d; /* Match text color */
    }


@keyframes dropOut { /* ... */
}

@keyframes dropIn { /* ... */
}

.placeholder-container {
    position: relative;
    flex-grow: 1; /* Allow container to grow in flex layout */
}

    .placeholder-container.qna-placeholder-container { /* Specific adjustments for Q&A */
        /* No specific styles needed unless layout differs */
    }

.animated-placeholder {
    position: absolute;
    top: 0;
    left: 0;
    padding: 0.375rem 0.75rem; /* Match form-control padding (adjust if using btn-sm size) */
    font-size: inherit; /* Match input font-size */
    line-height: 1.5; /* Match input line-height */
    color: gray; /* Placeholder color */
    pointer-events: none;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    width: 100%; /* Cover the input */
    box-sizing: border-box;
    z-index: 2;
    opacity: 1;
    transform: translateY(0);
    
    /* Match input font family if needed */
    /* font-family: inherit; */
}

/* Specific styles for placeholder inside Q&A if needed */
.qna-placeholder-container .animated-placeholder {
    font-size: 0.85em; /* Match .qna-input font-size */
    padding: 0.5rem 1rem; /* Match Bootstrap form-control-sm padding */
    /* Adjust padding top slightly if needed for vertical alignment */
    padding-top: 0.55rem;
}

.dropping-out {
    animation: dropOut 0.4s ease-out forwards;
}

.dropping-in {
    animation: dropIn 0.4s ease-in forwards;
}

/* Ensure input text is visible above placeholder */
.qna-input {
    position: relative;
    z-index: 1;
    background-color: transparent; /* Important: Make input background transparent */
}
    /* Add background back on focus or when filled */
    .qna-input:focus,
    .qna-input:not(:placeholder-shown) { /* Might not work reliably with bind */
        background-color: white; /* Or your input background color */
    }
/* Alternatively, style the placeholder container */
.qna-placeholder-container {
    background-color: white; /* Set background on container */
    border-radius: inherit; /* Inherit from input if needed */
    border: 1px solid #ced4da; /* Add border like input */
}

    .qna-placeholder-container input.qna-input {
        border: none; /* Remove border from input itself */
        background: transparent;
    }


.fast-compare-button {
    /* Similar to view-comparing-button but maybe different color */
    /* e.g., btn-outline-success */
    white-space: nowrap; /* Prevent text wrapping */
}

    .fast-compare-button .icon { /* If you add an icon */
        margin-right: 4px;
    }

/* Optional: Style for "No items to compare" message in compare view */
.no-items-in-view-message {
    text-align: center;
    padding: 15px;
    font-style: italic;
    color: #6c757d;
}

.icon-blue {
    color: blue;
}

/* Overall container for a detailed guide section */
.detailed-guide-container {
    font-size: 0.95rem; /* Base font size for guide text, adjust as needed */
    line-height: 1.6;
}

/* Preamble text before steps */
.guide-preamble {
    margin-bottom: 1rem;
    font-style: italic;
}

/* Major Step Styling */
.guide-major-step {
    margin-bottom: 0.75rem; /* Space below each major step block */
}

.guide-major-step-header {
    /* Retains button styling from previous suggestion, adding specific color */
    /* background-color: #28a745; /* Example: Bootstrap success green */
    /* color: white !important; Keep text white */
    /* padding: 0.6rem 0.85rem; */ /* Slightly more padding */
    font-weight: bold;
    font-size: 1.1em; /* Larger than sub-step title */
}
    /* Ensure text and arrow are explicitly colored if overriding button styles */
    .guide-major-step-header.bg-guide-green {
        background-color: #28a745; /* Example: Bootstrap success green */
        color: white;
    }

        .guide-major-step-header.bg-guide-green .guide-step-title-text,
        .guide-major-step-header.bg-guide-green .guide-accordion-arrow {
            color: white;
        }


.guide-major-step-content {
    /* Retains border, padding from previous suggestion */
    /* border: 1px solid #dee2e6; */
    /* padding: 0.75rem; */
    /* margin-top: 0.25rem; */
    background-color: #fdfdfd; /* Slightly off-white for content area */
}

.guide-step-purpose {
    margin-bottom: 0.75rem;
    font-size: 0.95em; /* Slightly smaller than sub-step title */
    /* font-style: italic; */ /* Already in your Razor */
}

    .guide-step-purpose strong {
        font-style: normal; /* Keep "Purpose:" not italic */
    }


/* Sub-Step Title Styling */
h6.guide-sub-step-title { /* Targeting the h6 element itself */
    font-size: 1.05em; /* Larger than detail labels, smaller than major step titles */
    font-weight: 600; /* Semi-bold */
    margin-top: 0.75rem;
    margin-bottom: 0.4rem;
    color: #333; /* Default color if no background span used */
}

/* Span within sub-step title for background color */
.guide-sub-step-title span.bg-guide-blue {
    background-color: #007bff; /* Bootstrap primary blue */
    color: white;
    padding: 0.25em 0.5em; /* Use em for padding relative to its own font size */
    border-radius: 0.25rem;
    /* display: inline-block; */ /* Already in your Razor within span */
}


/* Detail Block & Label Styling (for Action Detail, Rationale etc.) */
.guide-detail-block {
    margin-bottom: 0.85rem;
}

.guide-detail-label { /* The <strong> tag */
    font-weight: bold;
    display: inline-flex;
    align-items: center;
    margin-bottom: 0.3rem; /* Space between label and its text */
    padding: 0.25em 0.5em;
    border-radius: 0.25rem;
    font-size: 0.9em; /* Smaller than sub-step title */
    line-height: 1.4;
}

    .guide-detail-label .icon {
        margin-right: 0.5em;
        width: 1.1em;
        height: 1.1em;
        fill: currentColor;
    }

/* Specific Label Styles with Backgrounds & Text Colors */
.guide-detail-label-action {
    background-color: #28a745; /* Green background for label */
    color: white;
}

    .guide-detail-label-action .icon {
        fill: white;
    }

.guide-detail-label-rationale {
    background-color: #000; /* Blue background for label */
    color: #FFF;
}

    .guide-detail-label-rationale .icon {
        fill: white;
    }

.guide-detail-label-caution {
    background-color: #dc3545; /* Red background for label */
    color: white;
}

    .guide-detail-label-caution .icon {
        fill: white;
    }

.guide-detail-label-tip {
    background-color: #ffc107; /* Yellow background for label */
    color: #212529; /* Dark text for yellow bg */
}

    .guide-detail-label-tip .icon {
        fill: #212529;
    }

.guide-detail-label-tools,
.guide-detail-label-improvisation {
    background-color: #6c757d; /* Grey background for label */
    color: white;
}

    .guide-detail-label-tools .icon,
    .guide-detail-label-improvisation .icon {
        fill: white;
    }


/* Text Block Styles (for text content under labels) */
.guide-detail-block > div,
.guide-detail-block > ul { /* Target direct div or ul after a label block */
    padding: 0.5rem;
    border-radius: 0.25rem;
    margin-top: 0.25rem; /* Small space after label if label has bg */
    font-size: 0.95em; /* Slightly smaller than sub-step title text */
}

.guide-rationale-text { /* Applied to the div/ul containing rationale text */
    background-color: #e7f3ff;
    color: #004085;
    border-left: 4px solid #007bff;
}

.guide-caution-text { /* Applied to the div/ul containing caution text/list */
    background-color: #f8d7da;
    color: #721c24;
    border-left: 4px solid #dc3545;
}

    .guide-caution-text li, .guide-caution-text p {
        color: #721c24;
    }
/* Ensure consistent text color */

.guide-tip-text { /* Applied to the div/ul containing tip text/list */
    background-color: #fff3cd;
    color: #856404;
    border-left: 4px solid #ffc107;
}

    .guide-tip-text li, .guide-tip-text p {
        color: #856404;
    }


.guide-list {
    margin-top: 0.1rem; /* Reduced from 0.25rem as text block has padding now */
    padding-left: 1.2rem;
}

    .guide-list li {
        margin-bottom: 0.25rem;
    }

/* Q&A and Citations for Guide sections */
.qna-for-section .section-title-header-qna,
.detailed-guide-container > .mt-3 > .resources-required-label { /* Targeting "Citations for this section" heading */
    font-size: 1em; /* Slightly smaller than sub-step title */
    font-weight: bold;
    color: #444;
    margin-bottom: 0.5rem;
    padding-bottom: 0.25rem;
    border-bottom: 1px solid #eee;
}



/* Styles for Further Explanation Pop-up/Inline Display */
.further-explanation-container {
    border: 1px solid #007bff; /* Blue border to signify it's an explanation */
    border-radius: 0.3rem;
    padding: 0.8rem;
    margin-top: 0.5rem;
    background-color: #f8f9fa; /* Light grey background */
    position: relative; /* For the question mark icon */
}

.further-explanation-header {
    font-size: 1.1em;
    font-weight: bold;
    color: #0056b3; /* Darker blue */
    margin-bottom: 0.75rem;
    display: flex;
    align-items: center;
}

    .further-explanation-header .icon {
        width: 20px; /* Adjust size as needed */
        height: 20px;
        fill: #007bff; /* Blue icon */
        margin-right: 0.5rem;
    }

.further-explanation-section {
    margin-bottom: 0.6rem;
}

    .further-explanation-section h6 { /* For section titles like "Deeper Reasoning:" */
        font-size: 0.95em;
        font-weight: bold;
        color: #333;
        margin-bottom: 0.25rem;
        display: flex;
        align-items: center;
    }

        .further-explanation-section h6 .icon { /* Optional icons for these sub-headers */
            width: 0.9em;
            height: 0.9em;
            margin-right: 0.3em;
            fill: #555;
        }


    .further-explanation-section div,
    .further-explanation-section p,
    .further-explanation-section ul {
        font-size: 0.9em;
        line-height: 1.5;
        margin-left: 0.5rem; /* Indent content under headers */
    }

    .further-explanation-section ul {
        padding-left: 1.2rem; /* Indent list items */
    }

        .further-explanation-section ul li {
            margin-bottom: 0.2rem;
        }

/* Style for the Q&A within the further explanation */
.further-explanation-qna h6 {
    margin-top: 0.8rem; /* More space before Q&A header */
}

.further-explanation-qna p {
    margin-left: 0; /* Q&A content not indented as much */
    margin-bottom: 0.3rem;
}

    .further-explanation-qna p strong { /* Q: and A: labels */
        color: #0056b3;
    }

/* Citation styling for further explanation section (can be smaller) */
.further-explanation-citations {
    margin-top: 0.8rem;
    font-size: 0.8em;
    border-top: 1px dashed #ccc;
    padding-top: 0.5rem;
}

    .further-explanation-citations .citation-backgroundwhite {
        /* You might reuse your existing .citation-backgroundwhite or make it smaller */
        font-size: 0.95em;
    }

.further-explanation-section ul.guide-like-list {
    list-style-type: none; /* Remove default bullets */
    padding-left: 0.5rem; /* Small indent for the whole list */
    margin-top: 0.3rem;
}

    .further-explanation-section ul.guide-like-list li {
        padding: 0.4rem 0.5rem;
        margin-bottom: 0.5rem; /* Space between steps */
        border-left: 3px solid #007bff; /* Blue left border like a step indicator */
        background-color: #f0f8ff; /* Very light aliceblue background for each step item */
        border-radius: 0.25rem;
        position: relative; /* For potential custom numbering or icons */
    }

        /* Optional: Custom numbering or icon for each step item */
        .further-explanation-section ul.guide-like-list li::before {
            /* content: "➔"; /* Example: Right arrow */
            /* content: "•"; /* Larger bullet if you prefer */
            /* Or use an SVG icon */
            /* For simple numbering if LLM doesn't provide it:
       If you can't guarantee LLM provides "1.", "2." in items,
       you can use CSS counters, but it's more complex to reset for each list.
       It's better if the LLM output itself implies steps.
    */
            /* color: #007bff; */
            /* font-weight: bold; */
            /* margin-right: 0.5em; */
            /* position: absolute; */
            /* left: -1.2em; */ /* Adjust to position before the padding */
        }

        /* Ensure good readability for content within the list item */
        .further-explanation-section ul.guide-like-list li,
        .further-explanation-section ul.guide-like-list li a { /* Style links within too */
            color: #333; /* Dark text for readability */
        }

            .further-explanation-section ul.guide-like-list li strong { /* If you have bold text inside */
                color: #0056b3; /* Slightly emphasize bolded parts */
            }

.llm-emphasis-bold {
    color: #B22222; /* Firebrick red - a strong emphasis color */
    font-weight: 650; /* Ensure it's visually distinct if your base bold is 600 */
    /* background-color: #fff5f5; */ /* Optional: very light red/pink highlight */
    /* padding: 0 0.1em; */
}

.llm-emphasis-italic {
    color: #0056b3; /* A distinct blue for italics, or keep default italic style */
    font-style: italic;
    /* font-weight: 500; /* Slightly heavier than normal if desired */
    /* background-color: #e7f3ff; */ /* Optional: very light blue highlight */
    /* padding: 0 0.1em; */
}

.detailed-guide-display-container .guide-simplified-step .guide-major-step-content {
    background-color: #fdfdfd; /* Slightly off-white for content area */

}

.guide-detail-block {
    margin-bottom: 0.75rem; /* Space between StepText, Tips, Caution blocks */
}

.guide-detail-label {
    display: flex;
    align-items: center;
    font-weight: bold;
    font-size: 0.95em; /* Consistent label size */
    margin-bottom: 0.3rem;
    color: #444;
}

    .guide-detail-label .icon {
        width: 1em;
        height: 1em;
        margin-right: 0.5em;
        fill: currentColor;
    }

/* Specific Label Styles (examples, reuse from previous) */
.guide-detail-label-step-text .icon {
    fill: #2563eb;
}
/* Example: Blue for text */
.guide-detail-label-step-tip .icon {
    fill: #17a2b8;
}
/* Teal for Tip */
.guide-detail-label-caution .icon {
    fill: #dc3545;
}
/* Red for Caution */

.content-block-text { /* For StepText content */
    padding-left: 1.8em; /* Indent text under its label */
    line-height: 1.6;
}

.guide-list { /* For Tips and Cautions lists */
    list-style-type: none; /* Or your preferred style like disc/circle */
    padding-left: 1.8em; /* Indent list items */
    margin-top: 0.25rem;
}

    .guide-list li {
        margin-bottom: 0.3rem;
        line-height: 1.5;
        position: relative; /* For custom bullets if needed */
    }

        .guide-list li::before { /* Example of custom bullet */
            /* content: "•"; */ /* Or an SVG icon */
            /* color: #2563eb; */
            /* position: absolute; */
            /* left: -1.2em; */
        }


/* Further Explanation Container (reused from before) */
.further-explanation-container {
    border-left: 3px solid #0dcaf0; /* Example color */
    padding: 0.75rem 1rem 0.75rem 0.75rem; /* Adjust padding */
    margin-top: 0.5rem !important; /* Ensure space */
    background-color: #f4f8fa; /* Light background */
    font-size: 0.9em;
}

.further-explanation-header {
    font-weight: bold;
    margin-bottom: 0.5rem;
    display: flex;
    align-items: center;
}

    .further-explanation-header .icon {
        margin-right: 0.3em;
    }

.further-explanation-section {
    margin-bottom: 0.75rem;
}

    .further-explanation-section h6 {
        font-weight: bold;
        color: #333;
        margin-bottom: 0.25rem;
        font-size: 1.05em; /* Slightly larger than normal text */
    }

.further-explanation-citations {
    margin-bottom: 0.75rem;
}

    .further-explanation-citations small {
        font-size: 0.85em;
    }

.further-explanation-qna p {
    margin-bottom: 0.3rem !important;
}

.further-explanation-qna strong {
    font-weight: 600;
}

.guide-like-list { /* For PracticalStepsOrExamples in FurtherExplanation */
    list-style-type: disc;
    padding-left: 20px; /* Standard ul padding */
    margin-top: 0.25rem;
}

    .guide-like-list li {
        margin-bottom: 0.3rem;
    }





    /**Guide Modal*/
.guide-modal-overlay {
    position: fixed; /* Lock to the viewport */
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: #ffffff; /* Opaque white background */
    z-index: 1050; /* High z-index to cover the alternatives list */
    display: flex;
    flex-direction: column; /* Stack header, body, footer */
}

/*.guide-modal-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.6);
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 1060;*/ /* High z-index to be on top */
/*}*/
/* 2. Style the content area to respect the Tactical Header */
.guide-modal-content {
    width: 100%;
    height: 100%;
    padding: 0; /* Remove padding */
    border-radius: 0; /* Remove rounded corners */
    box-shadow: none; /* Remove shadow */
    display: flex;
    flex-direction: column;
    /* CRITICAL: Push the entire content down to clear the fixed header+HUD */
    padding-top: 140px; /* Adjust this to match your header+HUD height */
}
/*.guide-modal-content {
    background: white;
    padding: 20px;
    border-radius: 8px;
    width: 90%;
    max-width: 1200px;
    height: 90vh;
    display: flex;
    flex-direction: column;
    box-shadow: 0 5px 15px rgba(0,0,0,.5);
    z-index: 1061;
}
*/
.guide-modal-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-bottom: 1px solid #dee2e6;
    padding-bottom: 1rem;
}
.guide-modal-header,
.guide-modal-footer {
    flex-shrink: 0;
    background-color: #f8f9fa; /* Give them a background */
}
.guide-modal-body {
    flex-grow: 1;
    overflow-y: auto; /* Make the guide content scrollable */
    padding: 1.5rem;
}

.guide-modal-footer {
    border-top: 1px solid #dee2e6;
    padding-top: 1rem;
    text-align: right;
}

.guide-modal-footer {
    justify-content: center;
}



/*NEW LANDING PAGE UI*/
/* Main wrapper to contain the background and content */
/*.landing-page-wrapper {
    position: relative;
    width: 100%;*/
    /* CHANGE THIS: Instead of filling the whole screen with 'vh', 
    we give it a large but fixed minimum height. This allows content
    below it to appear on shorter screens. 650px is a good starting point.
    */
    /*min-height: 650px;
    padding: 4rem 2rem;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;*/ /* This is still needed for the background image effect */
/*}*/

.landing-page-wrapper {
    position: relative;
    width: 100%;
    padding: 4rem 1rem;
    display: flex;
    /* THIS IS THE FIX: Tell the main wrapper to stack content vertically. */
    flex-direction: column;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    background-color: transparent;
}

/* The background image itself */
.landing-background-image {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    /* CORRECTED PATH: Starts with a '/' to reference from the wwwroot folder directly. */
    /*background-image: url('../landing.jpg');*/
    background-color: transparent;  
    background-size: cover;
    background-position: center;
    transform: scale(1.05);
    z-index: 1;
}

/* The semi-transparent content box on top */
.landing-content-overlay {
    position: relative;
    z-index: 2;
    /*background-color: rgba(10, 25, 41, 0.7);*/ /* Dark blue with 70% opacity */
    /*backdrop-filter: blur(10px);*/ /* Frosted glass effect for modern browsers */
    /* -webkit-backdrop-filter: blur(10px);*/
    padding: 2.5rem 3rem;
    border-radius: 15px;
    border: 1px solid rgba(255, 255, 255, 0.1);
    max-width: 800px;
    width: 100%;
    text-align: center;
    color: transparent;
    /*box-shadow: 0 8px 32px rgba(0, 0, 0, 0.37);*/
}

.landing-title {
    color: black;
    font-family: 'Roboto', sans-serif;
    text-align: center;
    max-width: 800px;
    margin: 0 auto 2rem auto;
    font-weight: 500;
    line-height: 1.6;
    /* --- Default styles for Desktop / Tablet --- */
    width: 90%;
    padding: 1.5rem;
    font-size: clamp(1.75rem, 4vw, 2.5rem);
}

/* --- CRITICAL: Media Query for Mobile Screens --- */
/* This targets typical phone screen widths and below */
@media (max-width: 500px) {
    .landing-title {
        /*
         * THE FIX: We are overriding the clamp() with a fixed, predictable size.
         * This removes all calculation and guarantees the size.
         * Adjust this value slightly if needed, but it should work.
        */
        font-size: 1.5rem;
        /*
         * Give the text the absolute maximum horizontal space available.
        */
        width: 95%; /* Use almost the full screen width */
        padding: 1rem 0.5rem; /* Reduce side padding to a minimum */
        margin-bottom: 1.5rem; /* Slightly reduce bottom margin */
    }
}

/* Optional: A rule for extremely narrow screens if the problem persists */
@media (max-width: 375px) {
    .landing-title {
        font-size: 1.1rem; /* Even smaller for the narrowest devices */
    }
}
    /* Base style for each line that gets created by the JS */
    .landing-title span {
        display: block; /* Each line on its own */
        /*
     * We REMOVED white-space: nowrap and overflow: hidden.
     * The JS handles the typing, so we don't need CSS to hide text.
     */
    }

/* The blinking cursor, created by the JavaScript */
.cursor {
    display: inline-block;
    width: .15em; /* Width of the cursor */
    background-color: orange; /* Color of the cursor */
    margin-left: .1em;
    animation: blink-caret .85s step-end infinite;
}

@keyframes blink-caret {
    from, to {
        background-color: transparent
    }

    50% {
        background-color: orange;
    }
}


/* --- Specific styles for narrative hierarchy --- */

.landing-title .line-2 {
    font-weight: 400; /* Regular weight for the problem statement */
    opacity: 0.7;
}

.landing-title .line-4 {
    color: #2ECC71; /* Triumphant green */
    font-weight: 500; /* Extra bold */
}

/* Fading out class (used by JS) */
.fade-out {
    transition: opacity 0.8s ease-out;
    opacity: 0 !important;
}


.landing-subtitle {
    color: white;
    font-size: clamp(0.4rem, 2.5vw, 0.75rem);
    margin: 0 auto;
    line-height: 1.6;
}


.landing-input-section {
    display: flex;
    gap: 1rem;
    width: 100%;
    margin-bottom: 1rem;
    position: relative !important;
    z-index: 1000 !important; /* This MUST be higher than the buttons below */
}

/* Your existing .placeholder-container should work well here */
.placeholder-container {
    flex-grow: 1;
}

.landing-input {
    border: 1px solid #e2e8f0; /* Soft border */
    border-radius: 16px;
    padding: 1.2rem 1.5rem 1.2rem 3.5rem !important; /* Taller, plumper input */
    font-size: 1.1rem;
    background-color: var(--input-bg) !important;
    border-color: var(--input-border) !important;
    color: var(--input-text) !important;
}

/* Update the Input to make room for the icon */
/*.landing-input {
    width: 100%;*/
    /* Increased left padding from ~1rem to 3rem to clear the icon */
    /*padding: 0.8rem 1.25rem 0.8rem 3rem;
    font-size: 1.1rem;
    background-color: rgba(255, 255, 255, 0.08);
    border: 1px solid black;
    color: black;
    border-radius: 8px;
    transition: all 0.3s ease;
    padding: 0.8rem 1.25rem 0.8rem 45px !important;
}*/


/*
.landing-input {
    width: 100%;
    padding: 0.5rem 1rem;
    font-size: 1.1rem;
    background-color: rgba(255, 255, 255, 0.1);
    border: 1px solid black;
    color: black;
    border-radius: 8px;
    transition: all 0.3s ease;
    border: 1px solid black;
}*/
/*
    .landing-input::placeholder {
        color: gray;
    }*/

    .landing-input:focus {
        background-color: rgba(255, 255, 255, 0.2);
        border: 1px solid black;
        /*box-shadow: 0 0 0 3px rgba(77, 171, 247, 0.3);*/
        outline: none;
        color:black;
    }

.landing-cta-button {
    padding: 0.5rem 1rem;
    font-size: 1.1rem;
    font-weight: 600;
    background-color: #2563eb; /* A strong, professional blue */
    color: black;
    border: black;
    border-radius: 8px;
    cursor: pointer;
    transition: background-color 0.3s ease;
    display: flex;
    align-items: center;
    justify-content: center;
}

    .landing-cta-button span {
        transform: translateY(-1px); /* Nudges text up 1 pixel */
        display: inline-block; /* Ensures the transform applies */
    }

.landing-downloadcta-button {
    padding: 0.5rem 1rem;
    font-size: 1.1rem;
    font-weight: 600;
    background-color: #2563eb; /* A strong, professional blue */
    color: black;
    border: black;
    border-radius: 8px;
    cursor: pointer;
    transition: background-color 0.3s ease;
    display: flex;
    align-items: center;
    justify-content: center;
}

    .landing-cta-button:hover {
        background-color: #1c7ed6; /* Darker blue on hover */
    }

    .landing-cta-button:disabled {
        background-color: #555;
        cursor: not-allowed;
    }

.landing-error-text {
    color: #ff8787; /* A light red for errors, visible on the dark background */
    margin-top: 0.5rem;
    font-size: 0.9rem;
}

.landing-quick-actions {
    margin-top: 2rem;
    display: flex;
    justify-content: center;
    gap: 1rem;
    flex-wrap: wrap; /* Allow buttons to wrap on smaller screens */
}

.quick-action-btn {
    background-color: rgba(255, 255, 255, 0.1);
    border: 1px solid rgba(255, 255, 255, 0.2);
    color: rgba(255, 255, 255, 0.8);
    padding: 0.5rem 1rem;
    border-radius: 20px; /* Pill shape */
    cursor: pointer;
    transition: all 0.3s ease;
    font-size: 0.9rem;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

    .quick-action-btn:hover {
        background-color: rgba(255, 255, 255, 0.2);
        color: #ffffff;
    }

    .quick-action-btn .icon {
        width: 16px;
        height: 16px;
        fill: currentColor;
    }



    /*new indexhtml*/
/* Disclaimer Banner (Top of page) */
/* Disclaimer Banner */
.disclaimer-banner {
    width: 100%;
    background-color: #ffffff;
    text-align: center;
    padding: 0.5rem 1rem; /* Use relative units (rem) */
    border-bottom: 1px solid #e0e0e0;
    flex-shrink: 0; /* Prevent this banner from shrinking */
}

    .disclaimer-banner p {
        margin: 0;
        color: #d9534f;
        font-weight: bold;
        font-size: clamp(0.7rem, 2vw, 0.9rem); /* Responsive font size */
        text-transform: uppercase;
    }

/* Main Hero Section Wrapper */
.landing-page-wrapper {
    position: relative;
    width: 100%;
    /* We use padding for vertical size instead of a fixed min-height */
    padding: 4rem 1rem; /* Reduced padding slightly for smaller screens */
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    flex-shrink: 0; /* Prevent the hero from shrinking too much */
    background-color: transparent;
}

.landing-content-overlay {
    position: relative;
    z-index: 2;
    background-color: var(--input-bg) !important;
    /* backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);*/
    padding: clamp(0.8rem, 5vw, 1.5rem); /* Responsive padding */
    border-radius: 16px;
    /*   border: 1px solid rgba(255, 255, 255, 0.15);*/
    max-width: 750px;
    width: 95%;
    text-align: center;
    color: transparent;
}


.landing-form-section {
    width: 100%;
    max-width: 500px;
    margin: 0 auto;
    overflow: visible;
}

    .landing-form-section .placeholder-container {
        width: 100%;
    }

.landing-input {
    width: 100%;
    padding: 0.8rem 1.25rem;
    font-size: 1.1rem;
    background-color: rgba(255, 255, 255, 0.08);
    border: 1px solid black;
    color: black;
    border-radius: 8px;
    transition: all 0.3s ease;
}

    .landing-input:focus {
        color: black;
        background-color: rgba(255, 255, 255, 0.15);
        border: 1px solid black;
    /*    box-shadow: 0 0 0 3px rgba(77, 171, 247, 0.3);*/
        outline: none;
    }

.placeholder-container .animated-placeholder {
    /* Match the input's padding exactly so text aligns */
    padding: 0.8rem 1.25rem 0.8rem 3rem;
    font-size: 1.1rem;
    text-align: left;
    color: #6b7280 !important; /* Darker Cool Grey */
    font-weight: 500; /* Slightly thicker weight for clarity */
}

/*.placeholder-container .animated-placeholder {
    padding: 0.8rem 1.25rem;
    font-size: 1.1rem;
    color: gray;
    text-align: left;
}
*/
/* Update the native placeholder style to match, just in case */
.landing-input::placeholder {
    color: var(--text-secondary) !important;
}

/* Background Map Layer Adjustment */
body::before {
    opacity: var(--map-opacity);
    transition: opacity 0.3s ease;
}

/* Footer Adjustment */
[data-theme="dark"] .stats-footer {
    background-color: #1a1a1a;
    border-top: 1px solid #333;
}

/* =================================================================== */
/* Landing Page CTA Button Styles (Unified & Animated)
/* =================================================================== */

/* The container for BOTH buttons */

.landing-button-container {
    gap: 1rem;
    z-index: 1;
    margin-top: 2rem;
    position: relative !important;
    z-index: 1 !important; /* This MUST be lower than the input section */
}
/*.landing-button-container {
    margin-top: 1.5rem;
    width: 100%;
    display: flex;
    justify-content: center;*/ /* Center the group of buttons */
    /*align-items: center;*/ /* Align them vertically */
    /*gap: 1rem;*/ /* Create space between the buttons */
    /*flex-wrap: wrap;*/ /* Allows buttons to stack on very narrow screens if needed */
/*}*/

/* Base style for BOTH buttons */

.landing-cta-button {
    border-radius: 50px; /* Full pill shape */
    padding: 0.8rem 2rem;
    font-size: 1rem;
    font-weight: 600;
    letter-spacing: 0.01em;
    transition: all 0.2s ease;
}
/*.landing-cta-button {*/
    /* Layout */
    /*display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.8rem;*/ /* Space between text and icon wrapper */
    /*flex-shrink: 0;*/
    /* Appearance */
    /*border-radius: 5px;*/ /* Pill shape */
    /*padding: 0.7rem 1.4rem;
    font-size: 0.8rem;
    font-weight: 700;*/
/*    text-transform: uppercase;*/
    /*letter-spacing: 0.75px;
    border: 1px solid white;*/ /* Start with a transparent border */
    /* Interaction */
    /*cursor: pointer;
    transition: all 0.3s ease;*/ /* Smooth transition for hover effects */
/*}*/


/* The wrapper for the icon inside each button */
.icon-wrapper {
    display: flex;
    align-items: center;
    justify-content: center;
}


/* --- PRIMARY BUTTON ("Get Alts") --- */

.landing-cta-primary {
    background-color: #2563eb; /* Modern Blue */
    box-shadow: 0 4px 12px rgba(37, 99, 235, 0.3); /* Colored shadow */
    border: none;
}
/*.landing-cta-primary {
    background-color: #2563eb;*/ /* Strong blue */
    /*color: white;*/
    /* Apply the blue pulse animation constantly */
    /*animation: pulse-blue 2s infinite;*/
/*}*/

.landing-cta-gray {
    background-color: gray; /* Strong blue */
    color: white;
    /* Apply the blue pulse animation constantly */
    /*animation: pulse-blue 2s infinite;*/
}

.landing-cta-primary:hover {
    background-color: #1d4ed8;
    transform: translateY(-2px);
    box-shadow: 0 8px 20px rgba(37, 99, 235, 0.4);
}

    /*.landing-cta-primary:hover {
        background-color: #1c7ed6;*/ /* Darker blue on hover */
        /*transform: translateY(-2px);*/
        /* Pause the animation and apply a stronger, static shadow for a stable feel */
        /*animation-play-state: paused;
        box-shadow: 0 6px 20px rgba(34, 139, 230, 0.4);
    }*/

.landing-cta-secondary {
    background-color: white;
    color: #0f172a;
    border: 1px solid #e2e8f0;
    box-shadow: 0 2px 5px rgba(0,0,0,0.05);
}

    .landing-cta-secondary:hover {
        border-color: #cbd5e1;
        background-color: #f8fafc;
        transform: translateY(-2px);
        color: #0f172a;
    }

/* --- SECONDARY BUTTON ("Offline Use") --- */
/*.landing-cta-secondary {
    background-color: transparent;
    color: rgba(255, 255, 255, 0.7);*/ /* Muted white text */
    /*border: 1px solid rgba(255, 255, 255, 0.3);
}

    .landing-cta-secondary:hover {
        background-color: rgba(255, 255, 255, 0.1);
        color: #ffffff;*/ /* Full white text on hover */
        /*border-color: rgba(255, 255, 255, 0.7);
    }*/

.landing-cta-special {
    background-color: #2563eb;
    color: white; /* Muted white text */
    border: none;
    padding: 0.5rem 1rem;
    font-size: 0.8rem;
    font-weight: 700;
    border-radius: 5px;
    cursor: pointer;
    transition: background-color 0.3s ease;
    display: flex;
    align-items: center;
    justify-content: center;
}

    .landing-cta-special:hover {
        background-color: transparent;
        color: black; /* Muted white text */
        border-color: black;
    }



    /* --- 'INSTALL-READY' STATE for the Secondary Button --- */
    /* This class is added by your PWA JavaScript when the app is installable */
    .landing-cta-secondary.install-ready {
        border-color: black; /* Highlight with green border */
        color: black; /* Make text fully white */
        /* Apply the GREEN pulse animation */
        /*animation: pulse-green 2s infinite;*/
    }

.landing-cta-third {
    background-color: transparent;
    color: black;
    border: 1px solid black;
}

.landing-cta-download {
    background-color: transparent;
    color: black;
    border: none;
    display: none;
}

    .landing-cta-third:hover {
        background-color: black;
        color: #ffffff; /* Full white text on hover */
        border-color: rgba(255, 255, 255, 0.7);
    }

/* --- Keyframe Animations for the Pulse Effects --- */

/* Keyframes for the BLUE pulse */
@keyframes pulse-blue {
    0% {
        box-shadow: 0 0 0 0 rgba(34, 139, 230, 0.7);
    }

    70% {
        box-shadow: 0 0 0 10px rgba(34, 139, 230, 0);
    }

    100% {
        box-shadow: 0 0 0 0 rgba(34, 139, 230, 0);
    }
}

/* Keyframes for the GREEN pulse */
@keyframes pulse-green {
    0% {
        box-shadow: 0 0 0 0 black;
    }

    70% {
        box-shadow: 0 0 0 10px black;
    }

    100% {
        box-shadow: 0 0 0 0 black;
    }
}

.trusted-sources-section {
    /* Reset positioning so it flows naturally */
    position: relative !important;
    height: auto !important;
    width: 100%;
    /* Styling */
    background-color: #f9fafb; /* Slight contrast */
    padding: 3rem 0;
    border-top: 1px solid #e5e7eb;
    border-bottom: 1px solid #e5e7eb;
    text-align: center;
    /* Ensure it sits above the background but below the fixed footer */
    z-index: 10;
    /* Add padding at the bottom so it doesn't get hidden behind your fixed footer */
    padding-bottom: calc(3rem + 60px);
}

/* Trusted Sources Section */
/*.trusted-sources-section {
    width: 100%;
    background-color: white;*/ /* Light grey to separate it */
    /*margin-top: 100px;
    padding: 3rem 0;
    flex-shrink: 0;*/ /* Prevent this section from shrinking */
/*}*/


.trusted-sources-title {
    font-size: 0.75rem;
    font-weight: 700;
    color: #9ca3af;
    letter-spacing: 1.5px;
    margin-bottom: 2rem;
    text-transform: uppercase;
}

.logos-carousel {
    overflow: hidden;
    white-space: nowrap;
    position: relative;
    width: 100%;
    max-width: 1000px;
    margin: 0 auto;
    /* Fade out edges for that premium look */
    mask-image: linear-gradient(to right, transparent, black 10%, black 90%, transparent);
    -webkit-mask-image: linear-gradient(to right, transparent, black 10%, black 90%, transparent);
}

.logos-slide img {
    height: 35px;
    margin: 0 30px;
    filter: grayscale(100%) opacity(0.5); /* Premium grey look */
    vertical-align: middle;
    transition: filter 0.3s ease;
}


.logos-slide {
    display: inline-block;
    animation: scroll-logos 40s linear infinite;
}


body.static-landing-page {
    background-color: var(--bg-color) !important;
    color: var(--text-primary) !important;
    display: grid;
    grid-template-rows: auto 1fr auto; /* Header, Main (stretches), Footer */
    min-height: 100vh; /* Ensure body takes at least full screen height */
    margin: 0;
    overflow-y: auto; /* Allow vertical scrolling when needed. */
    overflow-x: hidden; /* Continue to prevent horizontal scrolling. */
}

/* This is the wrapper for ALL static content between header and footer */
main#static-content-wrapper {
    display: block; /* It just acts as a container */
    width: 100%;
}

.logos-slide img:hover {
    filter: grayscale(0%) opacity(1);
}

@keyframes scroll-logos {
    0% {
        transform: translateX(0);
    }

    100% {
        transform: translateX(-50%);
    }
}

@keyframes scroll {
    from {
        transform: translateX(0);
    }

    to {
        transform: translateX(-50%);
    }
}

.logos-carousel img {
    height: 40px; /* Slightly smaller logos for better fit */
    margin: 0 35px;
    filter: grayscale(100%);
    opacity: 0.7;
    transition: all 0.3s ease;
}

.logos-carousel:hover .logos-slide {
    animation-play-state: paused;
}

.logos-carousel img:hover {
    filter: grayscale(0%);
    opacity: 1;
    transform: scale(1.1);
}

.service-traffic-indicator {
    display: flex;
    align-items: center;
    padding: 0.4rem 0.8rem; /* Adjust padding as needed */
    background-color: #ffffff; /* White background as requested */
    border-radius: 6px;
    border: 1px solid #dee2e6; /* A subtle border */
    margin-right: 1rem; /* Space between the indicator and the next button */
    font-size: 0.8rem; /* A slightly smaller font size */
    white-space: nowrap; /* Prevent text from wrapping */
}

/* Styles for the "SERVICE TRAFFIC:" part */
.traffic-label {
    color: #212529; /* Standard black/dark text */
    font-weight: 400; /* Standard font weight */
    margin-right: 0.4rem; /* Space between the label and the status */
    text-transform: uppercase;
}

/* Styles for the status text (e.g., "TYPICAL") */
.traffic-status {
    font-weight: 700; /* Bold font weight */
    text-transform: uppercase;
}

/* Specific color for the "TYPICAL" status */
.status-typical {
    color: #198754; /* A professional green (Bootstrap success color) */
}

/* Optional: You can pre-define other status colors for future use */
.status-high {
    color: #ffc107; /* A cautionary amber/yellow */
}

.status-overloaded {
    color: #dc3545; /* An alert red */
}

html, body {
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
    background-color: var(--bg-color) !important;
    color: var(--text-primary) !important;
    transition: background-color 0.3s ease, color 0.3s ease;
    height: 100%;
    margin: 0;
    overflow-x: hidden; /* Prevent horizontal scroll from the logo carousel */
    padding-top: 0px;
}

    body.static-landing-page {
        display: flex;
        flex-direction: column;
        min-height: 100vh;
        margin: 0;
    }

/* The new <main> wrapper will now grow to fill available space. */
main#static-content-wrapper {
    flex-grow: 1;
    display: flex;
    flex-direction: column;
}

.back-to-list-btn {
    margin-left: 1rem;
    font-size: 0.85rem;
    border-radius: 20px; /* Pill shape */
}



/*ALTERNATIVES TABLE NOT COMPARING*/
.alternatives-table-container {
    width: 100%;
    overflow-x: auto; /* Allows table to be scrolled horizontally on very small screens */
}

.alternatives-table {
    width: 100%;
    border-collapse: collapse; /* Cleaner borders */
    font-size: 0.9rem;
    white-space: nowrap; /* Prevents text from wrapping in cells initially */
}

    .alternatives-table th,
    .alternatives-table td {
        padding: 0.75rem;
        text-align: left;
        vertical-align: middle;
        border-bottom: 1px solid #dee2e6;
    }

    .alternatives-table th {
        font-weight: 600;
        color: #495057;
        background-color: #f8f9fa;
        text-transform: uppercase;
        font-size: 0.75rem;
        letter-spacing: 0.5px;
    }

.alternative-row:hover {
    background-color: #f8f9fa;
}

.is-preferred-alternative {
    background-color: #e6f9f1; /* A light green to highlight selected rows */
    border-left: 4px solid #198754;
}

.alt-name-cell .alt-name {
    font-weight: 600;
    color: #212529;
}

.alt-name-cell span {
    margin-right: 8px;
}

.mini-assessment-table {
    width: 100%;
    border-collapse: separate; /* Allows spacing between cells */
    border-spacing: 0 4px; /* Add vertical spacing between rows */
}

    .mini-assessment-table td {
        padding: 2px 4px;
        border-bottom: none; /* Remove the main table's border style */
        white-space: normal; /* Allow content to wrap if needed */
        font-size: 0.85rem;
    }

        /* Style the label column (e.g., "Suitability:") */
        .mini-assessment-table td:first-child {
            font-weight: 600;
            color: #495057;
            width: 80px; /* Give labels a fixed width for clean alignment */
        }

    /* Style the value column */
    .mini-assessment-table .alt-indicator {
        padding: 2px 8px;
        border-radius: 12px;
        display: inline-block; /* Ensures padding and radius apply correctly */
        font-size: 0.8rem;
        font-weight: 700;
    }


.alt-assessment-cell .indicator-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.alt-assessment-cell .alt-indicator {
    padding: 2px 8px;
    border-radius: 12px;
    font-size: 0.8rem;
    font-weight: 700;
    border: 1px solid transparent;
}

.alt-context-cell {
    white-space: normal; /* Allow this column to wrap */
    font-size: 0.8rem;
    font-weight: 700;
    color: #495057;
}

    .alt-context-cell .context-item {
        margin-bottom: 4px;
    }

        .alt-context-cell .context-item:last-child {
            margin-bottom: 0;
        }

    .alt-context-cell .sourcing-indicator-table {
        padding: 2px 6px;
        border-radius: 4px;
        margin-left: 4px;
    }


.citations-in-table .citation-link,
.citations-in-table .citation-more-link {
    margin-left: 4px;  
    font-size: 0.8rem;
    font-weight: 700;
    color: #2563eb;
}

.citations-in-table .citation-more-link {
    font-size: 0.8rem;
    font-weight: 700;
    color: #2563eb;
    cursor: default;
}


.alternative-card-list {
    display: flex;
    flex-direction: column;
    gap: 1rem; /* Space between cards */
}

.alt-card {
    width: 100%;
    border: 1px solid #dee2e6;
    border-radius: 8px;
    background-color: #fff;
    transition: box-shadow 0.2s ease-in-out;
}

    .alt-card:hover {
        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
    }

    .alt-card.is-preferred-alternative {
        border-left: 5px solid #198754; /* Green accent for preferred */
        background-color: #f6fff8;
    }

.alt-card-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0.75rem 1rem;
    border-bottom: 1px solid #e9ecef;
}

.alt-card-title {
    font-size: 1.1rem;
    font-weight: 600;
    color: #212529;
}

    .alt-card-title .natural-indicator-icon-small {
        margin-right: 8px;
    }

.alt-card-body {
    padding: 0.75rem 1rem;
}

.alt-details-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); /* Responsive columns */
    gap: 0.5rem 1.5rem; /* Row and column gap */
}

.alt-details-column .detail-item {
    display: flex;
    align-items: baseline;
    font-size: 0.5rem;
    padding: 4px 0;
}

    .alt-details-column .detail-item strong {
        color: #495057;
        width: 85px; /* Aligns the labels */
        flex-shrink: 0;
    }

/*.alt-indicator {
    padding: 2px 8px;
    border-radius: 12px;
    font-size: 0.5rem;
    font-weight: 500;
}*/

.alt-card-footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0.75rem 1rem;
    background-color: #f8f9fa;
    border-top: 1px solid #e9ecef;
    border-radius: 0 0 7px 7px;
}

.citations-in-card {
    font-size: 0.5rem;
    color: #6c757d;
}

    .citations-in-card strong {
        color: #495057;
    }

.guide-actions .btn {
    margin-left: 0.5rem;
}


.alt-card-responsive {
    border-bottom: 1px solid #dee2e6;
    padding: 1rem 0;
}

    .alt-card-responsive .card-cell {
        padding: 0.5rem 5px;
    }

.desktop-only-header {
    display: none;
}

.alt-actions-cell {
    display: flex;
    gap: 0.5rem;
    flex-wrap: wrap; /* CRITICAL: Allow buttons to stack if space is tight */
    width: 100%;
    justify-content: flex-end; /* Default alignment */
}

@media (max-width: 991.98px) {
    .alt-actions-cell {
        justify-content: flex-start; /* Align left on mobile */
    }
}


/* Base style for the cell itself */
/*.alt-actions-cell {
    display: flex;*/ /* Use flexbox to control button alignment */
    /*gap: 0.5rem;*/ /* Default space between buttons */
/*}*/

.alt-actions-cell .landing-cta-button {
    flex: 0 1 auto; /* Allow shrinking, don't force growth */
    white-space: nowrap; /* Keep text on one line usually... */
    /* Reset and adopt the pill style */
    border-radius: 50rem !important; /* Force the pill shape */
    font-size: 0.9rem !important;
    font-weight: 600 !important;
    padding: 0.4em 1em !important; /* Adjust padding for a pill look */
    /* Your desired blue color */
    background-color: #2563eb !important;
    border-color: #2563eb !important;
    /* Add the hover effect we use elsewhere */
    transition: transform 0.1s ease-in-out, box-shadow 0.1s ease-in-out;
    max-width: 100%;
    min-width: 0;
}




    /*.alt-actions-cell .landing-cta-button {*/
        /* Reset and adopt the pill style */
        /*border-radius: 50rem !important;*/ /* Force the pill shape */
        /*font-size: 0.9rem !important;
        font-weight: 600 !important;
        padding: 0.4em 1em !important;*/ /* Adjust padding for a pill look */
        /* Your desired blue color */
        /*background-color: #2563eb !important;
        border-color: #2563eb !important;*/
        /* Add the hover effect we use elsewhere */
        /*transition: transform 0.1s ease-in-out, box-shadow 0.1s ease-in-out;
    }*/

        .alt-actions-cell .landing-cta-button:hover {
            transform: translateY(-1px);
            box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15);
            background-color: #0000DD !important; /* Slightly darker blue on hover */
        }

/* --- Mobile View (< 992px) --- */
@media (max-width: 991.98px) {
    /* On mobile, align buttons to the left, next to the "Actions:" label */
    .alt-actions-cell {
        justify-content: flex-start;
    }
}


/* --- Desktop View (>= 992px) --- */
@media (min-width: 992px) {
    /* On desktop, align buttons to the right edge of the table column */
    .alt-actions-cell {
        justify-content: flex-end;
    }
}

/* On mobile, use the data-label attribute to create labels for each cell */
@media (max-width: 991.98px) {
    .alternatives-table, .alternatives-table tbody, .alternatives-table tr, .alternatives-table td {
        display: block; /* Make table elements stack like blocks */
        width: 100%;
    }

    .alternative-row {
        border: 1px solid #dee2e6;
        border-radius: 8px;
        margin-bottom: 1rem;
        padding: 0.5rem;
    }

    .alternatives-table td {
        display: flex;
        justify-content: space-between; /* Pushes label and value apart */
        align-items: center;
        text-align: right;
        padding: 0.5rem;
        border-bottom: 1px dashed #e9ecef; /* Lighter separator inside cards */
    }

        .alternatives-table td:last-child {
            border-bottom: none;
        }

        /* Create the label using the 'data-label' attribute from the HTML */
        .alternatives-table td[data-label]::before {
            content: attr(data-label);
            font-weight: 600;
            text-align: left;
            margin-right: 1rem;
            color: #495057;
        }

    /* The first cell (Name) doesn't need a pseudo-label on mobile */
    .alt-name-cell {
        justify-content: flex-start;
    }

        .alt-name-cell::before {
            content: "";
        }
}

.responsive-alternatives-list {
    /* This is the container for the single header and all the rows. */
    width: 100%;
}

.responsive-table-header {
    display: none; /* The header row is HIDDEN on mobile by default. */
}

.alt-responsive-row {
    display: block; /* Each row is its own block */
    border: 1px solid #e0e0e0;
    border-radius: 8px;
    margin-bottom: 1rem;
    padding: 0.5rem;
    background-color: #fff;
}

    .alt-responsive-row.is-preferred-alternative {
        border-left: 5px solid #198754;
        background-color: #f6fff8;
    }

.alt-cell {
    display: flex;
    justify-content: space-between; /* Pushes label and value apart */
    align-items: center;
    padding: 0.75rem 0.5rem;
    text-align: right;
    border-bottom: 1px solid #f1f3f5; /* Light separator line inside the card */
}

.alt-responsive-row .alt-cell:last-of-type {
    border-bottom: none; /* Remove the line from the last item in the card */
}

/* Use the data-label to create the label text on mobile */
.alt-cell[data-label]::before {
    content: attr(data-label);
    font-weight: 600;
    color: #495057;
    text-align: left;
    margin-right: 1rem;
}

/* Special styling for the name on mobile */
.alt-name-cell {
    justify-content: flex-start;
    font-size: 1.1rem;
    font-weight: bold;
    padding-top: 0; /* Tighter padding for the name */
}

    .alt-name-cell::before {
        display: none; /* No "Alternative:" label needed */
    }

.responsive-table-header.is-sticky {
    position: sticky;
    top: 0; /* Or whatever your offset is */
    /* --- THIS IS THE CRITICAL FIX --- */
    /* Add a solid background color that matches your page's background */
    background-color: #ffffff; /* Or your page's specific background color */
    /* Add a high z-index to ensure it stays on top of the scrolling content */
    z-index: 100;
    /* (Optional but recommended) Add a subtle shadow to show elevation */
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
}

/* --- 2. Desktop View (>= 992px): The Grid Table Layout --- */
/* This media query overrides the mobile styles ONLY on large screens. */
@media (min-width: 992px) {

    /* --- THE NEW SINGLE, STICKY HEADER --- */
    .responsive-table-header {
        display: grid; /* Show the header on desktop */
        /*grid-template-columns: 2.5fr auto auto auto 1fr 1fr 1fr 1.5fr 0.5fr;*/ /* 7 Columns */
        grid-template-columns: 2.5fr 1fr 1fr 1fr 200px 200px 250px; /* 7 Columns */
        gap: 1rem;
        padding: 0.5rem 1rem;
        border-bottom: 2px solid #dee2e6;
        text-transform: uppercase;
        font-size: 0.75rem;
        font-weight: 600;
        color: #6c757d;
        /* Make it sticky */
        position: sticky;
        top: 0; /* Stick to the top of its scrolling container */
        background-color: #ffffff; /* Give it a background to hide content scrolling under it */
        z-index: 10; /* Ensure it stays above the rows */
    }

        .responsive-table-header > div {
            text-align: center; /* Center all header text by default */
        }

            /* 2. Create a specific override for the first header (ALTERNATIVE) to be left-aligned */
            .responsive-table-header > div:first-child {
                text-align: left;
            }



    /*.mobile-filter-btn {
        display: inline-flex !important;*/ /* Force display as flex */
        /*align-items: center;
        gap: 0.5rem;
    }*/

    /* On Large Screens (Desktop >= 992px), HIDE the button */
    /*@media (min-width: 992px) {
        .mobile-filter-btn {
            display: none !important;*/ /* Force hide on desktop */
        /*}
    }*/




    /* Redefine the row for desktop */
    .alt-responsive-row {
        display: grid;
        /* CRITICAL: This MUST match the header's grid definition */
        grid-template-columns: 2.5fr 1fr 1fr 1fr 200px 200px 250px; /* 7 Columns */
        gap: 1rem;
        border-bottom: 1px solid #dee2e6;
        align-items: center;
        /* Reset mobile styles */
        margin-bottom: 0;
        border-radius: 0;
        padding: 0 1rem;
        border: none; /* The border is now just a bottom line */
        position: relative; /* This is needed for z-index to apply */
        z-index: 1; /* A low z-index, below the header */
    }

    

    /* Redefine the cell for desktop */
    .alt-cell {
        padding: 0.75rem 0;
        text-align: left;
        border-bottom: none;
        display: flex; /* Still useful for alignment within the cell */
        align-items: center;
    }

        /* Hide the mobile pseudo-labels on desktop */
        .alt-cell[data-label]::before {
            display: none;
        }

    /* --- Column-specific alignment and layout for desktop --- */

    /* The first cell (Name) can wrap if needed */
    .alt-name-cell {
        font-size: 1rem;
        font-weight: 500;
        flex-direction: column; /* Stack icon and name vertically if needed */
        align-items: flex-start;
    }

    /* Group the indicator pills together */
    .alt-assessment-cell {
        display: flex;
        flex-wrap: wrap;
        gap: 6px;
        justify-content: flex-start;
    }

    /* The guides and citations columns */
    .alt-actions-cell, .alt-citations-cell {
        justify-content: flex-start;
    }

    .alt-responsive-row .alt-cell {
        display: flex;
        justify-content: center; /* Horizontally center content */
        align-items: center; /* Vertically center content */
        padding: 0.75rem 0.5rem; /* Add some horizontal padding */
        /* ... other existing styles ... */
    }

        /* 2. Create a SPECIFIC OVERRIDE for the 'Alternative' column. */
        .alt-responsive-row .alt-cell[data-label="ALTERNATIVE"] {
            justify-content: flex-start; /* Align content to the start (left) */
        }

        /* 3. (Optional but recommended) Ensure the GUIDES buttons are centered. */
        .alt-responsive-row .alt-cell[data-label="GUIDES"] {
            justify-content: center;
        }
}



/* On desktop screens (992px and wider), show the table header and hide the pseudo-labels */
@media (min-width: 992px) {
    .desktop-only-header {
        display: table-header-group; /* Show the table header */
    }

    .alternatives-table td[data-label]::before {
        display: none; /* Hide the mobile pseudo-labels */
    }


    /*MOBILE SCREENS*/
    /* Media Query for smaller screens (e.g., mobile) */
    @media (max-width: 768px) {

        .logo-title {
            font-size: 0.8rem;
            font-weight: 700;
        }

        .com-part {
            font-size: 0.5em; /* Keep it smaller */
        }

        .titlesubtitle {
            font-size: 0.5em;
            /* It will now be left-aligned due to .logo-text-area changes */
        }


        /* Container to position the input and placeholder */
        .placeholder-container {
            position: relative; /* Allows absolute positioning of the child span */
            width: 90%; /* Match your input width */
            margin-left: auto;
            margin-right: auto;
            margin-bottom: 5px; /* Keep original margin */
            z-index: 100 !important; /* Places it above the buttons (z-index 1) */
        }

        .placeholder-containerNoBottomMargin {
            position: relative; /* Allows absolute positioning of the child span */
            width: 90%; /* Match your input width */
            margin-left: auto;
            margin-right: auto;
            margin-bottom: 0px; /* Keep original margin */
        }

        .rapidres-input,
        .rapidres-inputpatient { /* Apply to both input types */
            /*width: 90%;*/ /* Adjust width for mobile */
            font-size: 16px; /* CRITICAL: Ensure font-size is >= 16px */
            /* Other mobile-specific styles if needed */
        }

        /* Ensure patient input takes full width inside its flex container on mobile */
        .rapidres-inputpatient {
            width: 100%;
            margin-left: 0;
            margin-right: 0;
        }

        .rapidres-patient-info {
            background-color: white;
            border-radius: 0px;
            padding: 0px;
            margin-bottom: 0px;
            border: none;
            text-align: left;
            width: 90%; /* or any specific width you prefer */
            margin-left: auto;
            margin-right: auto;
        }

        .rapidres-containeralternatives {
            text-align: center;
            width: 100%;
            /*  height: 100vh;*/
        }

        .rapidres-heading {
            font-size: x-large;
            margin-bottom: 20px;
            color: #222;
            flex-shrink: 0; /* Prevents heading from shrinking */
        }

        .rapidres-headinghometitle {
            font-size: xx-large;
            margin-bottom: 20px;
            color: #222;
            flex-shrink: 0; /* Prevents heading from shrinking */
        }

        .rapidres-btn {
            display: inline-flex; /* Use flexbox */
            align-items: center; /* Vertically center icon and text */
            justify-content: center; /* Center content block if button is wider */
            gap: 0.5rem; /* Space between icon and text */
            /* --- Crucial Fixes --- */
            flex-wrap: nowrap; /* Explicitly prevent wrapping icon/text to next line */
            vertical-align: middle; /* Helps align the inline-flex box itself with surrounding elements */
            /* --- End Fixes --- */

            padding: 12px 20px;
            border-radius: 5px;
            border: none;
            font-size: 0.9rem;
            cursor: pointer;
            min-width: 120px;
            text-align: center; /* Fallback if flex fails */
            white-space: nowrap; /* Prevent text ITSELF from wrapping */
            text-decoration: none;
            transition: background-color 0.2s ease;
            overflow: hidden; /* Prevent content spillover */
        }

        /* Modify the Button Style */
        .rapidres-btncta {
            display: block; /* Make button a block element */
            width: 100%; /* Make button fill its container */
            /* --- Keep other styles --- */
            align-items: center;
            justify-content: center;
            gap: 0.5rem;
            padding: 12px 20px;
            border-radius: 5px;
            border: none;
            /*        font-weight: bold;*/
            font-size: large;
            cursor: pointer;
            /* min-width: 120px; */ /* Remove or comment out min-width */
            text-align: center;
            white-space: nowrap;
            text-decoration: none;
            transition: background-color 0.2s ease;
            box-sizing: border-box; /* Add for consistent width calculation */
        }

        .rapidres-button-container {
            width: 90%; /* Match mobile input width */
        }

        .cookie-consent {
            flex-direction: column;
            text-align: center;
        }

        .cookie-buttons {
            width: 100%;
            flex-direction: column;
        }

        .cookie-btn {
            width: 100%;
        }
    }
}

/* === STYLES FOR NEW CITATIONS MODAL & BUTTON === */

/* The "more" button in the table */
.citation-more-btn {
    background: none;
    border: none;
    padding: 0;
    margin-left: 4px;
    text-decoration: underline;
    cursor: pointer;
    font-size: inherit;
    font-size: 0.8rem;
    font-weight: 700;
    color: #2563eb;
}

    .citation-more-btn:hover {
        color: #0a58ca; /* Darker blue on hover */
    }

/* Modal styles */
.simple-modal-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.6);
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 1060;
}

.simple-modal-content {
    background: white;
    padding: 0;
    border-radius: 8px;
    width: 90%;
    max-width: 500px;
    max-height: 80vh;
    display: flex;
    flex-direction: column;
    box-shadow: 0 5px 15px rgba(0,0,0,.5);
}

.simple-modal-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 1rem 1.5rem;
    border-bottom: 1px solid #dee2e6;
}

.simple-modal-title {
    margin-bottom: 0;
    font-size: 1.25rem;
}

.simple-modal-body {
    padding: 1.5rem;
    overflow-y: auto;
}

.citation-modal-list {
    list-style-type: none;
    padding: 0;
    margin: 0;
}

    .citation-modal-list li {
        margin-bottom: 1rem;
    }

    .citation-modal-list a {
        text-decoration: none;
        color: #212529;
        display: block;
    }

        .citation-modal-list a:hover .citation-title {
            color: #2563eb;
            text-decoration: underline;
        }

    .citation-modal-list .citation-number {
        font-weight: bold;
        color: #2563eb;
        margin-right: 0.5rem;
    }

    .citation-modal-list .citation-link-icon {
        font-size: 0.8rem;
        font-weight: 700;
        color: #2563eb;
        display: inline-block;
        transform: translateY(-2px);
    }



    /*FILTER BAR*/
/* === FINAL RESPONSIVE ALTERNATIVES GRID === */

/* --- Mobile First (Default): Stacked Card View --- */
.alt-grid-header {
    display: none; /* Hide desktop header on mobile */
}

.alt-grid-row {
    display: block;
    border: 1px solid #dee2e6;
    border-radius: 8px;
    margin-bottom: 1rem;
    background-color: #fff;
    padding: 0.75rem;
}

    .alt-grid-row.is-preferred-alt {
        border-left: 5px solid #198754;
        background-color: #f6fff8;
    }

.alt-grid-cell {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0.6rem 0;
    text-align: right;
    border-bottom: 1px solid #f1f3f5;
}

.alt-grid-row .alt-grid-cell:last-child {
    border-bottom: none;
}

.alt-grid-cell[data-label]::before {
    content: attr(data-label);
    font-weight: 600;
    color: #495057;
    text-align: left;
    padding-right: 1rem;
}

/* Specific mobile styles */
.alt-name-cell {
    font-size: 1.1rem;
    font-weight: bold;
    justify-content: flex-start;
    padding-bottom: 0.75rem;
    text-align:left;
}

    .alt-name-cell::before {
        display: none;
    }

    .alt-name-cell .alt-name-content span {
        margin-right: 8px;
    }

.indicator-wrapper {
    display: flex;
    flex-wrap: wrap;
    gap: 5px;
    justify-content: flex-end;
}

.requirements-list {
    font-size: 0.9rem;
    text-align: right;
}

.req-item {
    margin-bottom: 3px;
}


.citations-wrapper {
    font-size: 0.8rem;
}

.actions-wrapper {
    display: flex;
    gap: 0.5rem;
}


/* --- Desktop View (992px and wider): Grid Table Layout --- */
@media (min-width: 992px) {
    .alt-grid-header {
        display: grid;
        grid-template-columns: 2.5fr 2fr 2.5fr 2fr; /* 4 Columns */
        gap: 1rem;
        padding: 0.5rem 1rem;
        border-bottom: 2px solid #dee2e6;
        text-transform: uppercase;
        font-size: 0.75rem;
        font-weight: 600;
        color: #6c757d;
    }

    .alt-grid-row {
        display: grid;
        grid-template-columns: 2.5fr 2fr 2.5fr 2fr; /* Match header */
        gap: 1rem;
        border: none;
        border-radius: 0;
        margin-bottom: 0;
        padding: 0;
        border-bottom: 1px solid #dee2e6;
    }

    /* On desktop, hide the mobile ::before labels */
    .alt-grid-cell[data-label]::before {
        display: none;
    }

    .alt-grid-cell {
        padding: 1rem;
        text-align: left;
        border-bottom: none;
        align-items: center; /* Vertically center content in cells */
    }

    .alt-assessment-cell .indicator-wrapper {
        flex-direction: column; /* Stack indicators vertically on desktop for clarity */
        align-items: flex-start;
        justify-content: center;
    }

    .alt-context-cell .requirements-list {
        text-align: left;
    }

}


/* The main container for the top-level buttons */
/*.page-controls-wrapper {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: center;
    gap: 1rem;
    padding: 0.5rem 0;
}*/

/*.page-controls-wrapper {
    display: flex;
    flex-wrap: wrap;*/
    /* =================================================================== */
    /* === THE DEFINITIVE FIX: Change space-between to flex-start ======== */
    /* =================================================================== */
    /*justify-content: flex-start;*/ /* This will align items to the left and let them wrap naturally. */
    /*align-items: center;
    gap: 1rem;
    padding: 0.5rem 0;
}*/

.alternatives-list-scrollable.operation-mode-scroll {
    flex-grow: 1; /* This is still correct, it will fill the rest of the space */
    overflow-y: auto;
    min-height: 0;
    margin-top: 15px;
}

.page-controls-wrapper {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: center;
    gap: 1rem;
    padding: 0.5rem 0;
    flex-shrink: 0; /* IMPORTANT: Prevents it from being hidden */
    margin-bottom: 10px;
}

.view-toggle-group {
    display: flex;
    gap: 0;
}

/*.page-controls-wrapper {
    display: flex !important;
    justify-content: space-between !important;*/ /* Push View Toggles left, Filter Toggle right */
    /*align-items: center !important;
    flex-wrap: nowrap !important;*/ /* Prevent wrapping that hides items */
    /*padding: 0.5rem 1rem !important;
    background-color: #ffffff !important;
    border-bottom: 1px solid #dee2e6 !important;
    z-index: 100 !important;
    flex-shrink: 0 !important;
}*/

/*.page-controls-wrapper {
    flex-shrink: 0;*/ /* CRITICAL: Forces it to stay visible */
    /*padding: 0.5rem 1rem;
    background-color: #ffffff;
    z-index: 100;
    border-bottom: 1px solid #dee2e6;
    display: flex;
    justify-content: space-between;
    align-items: center;
}*/

/*.page-controls-wrapper {
    flex-shrink: 0;*/ /* Prevent this header from shrinking */
    /*padding: 0.5rem 1rem;*/ /* Use padding on the wrapper */
    /*border-bottom: 1px solid #dee2e6;
    background-color: #ffffff;*/ /* Give it a solid background */
    /*z-index: 100;*/ /* Ensure it stays on top of the list */
    /* All the flexbox rules for its children are still correct */
    /*display: flex;
    justify-content: space-between;
    align-items: center;
}*/

/*.actions-and-filter-toggle {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}*/

/* Add a rule to ensure the filter button's container takes up necessary space */
.actions-and-filter-toggle {
    display: flex !important;
    align-items: center !important;
    /*margin-left: auto !important;*/ /* Double insurance to push right */
}

/* On mobile, the filter button is visible */
.filter-toggle-button {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
}

/* The filter panel itself is HIDDEN by default on mobile, positioned off-screen to the right. */
.filter-panel {
    display: flex; /* It needs to be flex to become a flex-column */
    flex-direction: column;
    position: fixed;
    top: 0;
    right: 0;
    width: 300px;
    height: 100%;
    background-color: #ffffff;
    box-shadow: -4px 0 15px rgba(0,0,0,0.1);
    z-index: 1051;
    transform: translateX(100%); /* Start off-screen */
    transition: transform 0.3s ease-in-out;
}

    /* The .is-open class, added by your C# toggle, makes the panel slide into view */
    .filter-panel.is-open {
        transform: translateX(0);
    }

.filter-panel-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 1rem 1.5rem;
    border-bottom: 1px solid #dee2e6;
    flex-shrink: 0;
}

    .filter-panel-header h4 {
        margin: 0;
        font-size: 1.1rem;
    }

.filter-panel-body {
    display: flex;
    flex-direction: column;
    padding: 1.5rem;
    overflow-y: auto;
    gap: 1.5rem;
    font-size: 0.8rem;
    font-weight: 700;

}

.filter-category {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.filter-category-label {
    font-size: 0.8rem;
    font-weight: 700;
    color: #495057;
}

.filter-panel .btn-group {
    display: flex;
    flex-direction: row; /* Buttons side-by-side inside the group */
    flex-wrap: wrap; /* Allow buttons to wrap if needed */
    gap: 0.5rem;
}

/* The dark overlay that appears behind the panel on mobile */
.filter-backdrop {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.5);
    z-index: 1050;
}


/* --- Step 2: Desktop Overrides --- */
/* These rules apply ONLY to screens 992px and wider */
/*@media (min-width: 992px) {*/

    /* Hide the mobile-only elements on desktop */
    /*.filter-toggle-button,
    .filter-backdrop,
    .filter-panel-header {
        display: none;
    }*/

    /* Reset the filter panel to be a simple, visible, horizontal bar */
    /*.filter-panel {
        display: flex;
        flex-direction: row;*/ /* Align items horizontally */
        /*flex-wrap: wrap;*/ /* Allow wrapping on desktop too if needed */
        /*position: static;*/ /* Not fixed */
        /*width: 100%;
        height: auto;
        transform: none;*/ /* No sliding */
        /*box-shadow: none;
        background-color: #f8f9fa;*/ /* Light background for the bar */
        /*border: 1px solid #dee2e6;
        border-radius: 8px;
        margin-top: 0.5rem;
        padding: 0.75rem 1rem;
    }

    .filter-panel-body {
        display: flex;
        flex-direction: row;
        align-items: center;
        padding: 0;
        overflow-y: visible;
        gap: 1rem;
        font-size: 0.8rem;
        font-weight: 700;
    }

    .filter-category {
        flex-direction: row;*/ /* Place label and buttons side-by-side */
        /*align-items: center;
        gap: 0.75rem;
    }

        .filter-category .btn-group {
            flex-wrap: nowrap;*/ /* Prevent buttons inside a group from wrapping */
        /*}
}*/
/* --- Mobile-First Styles: The Slide-Out Panel --- */
.filter-backdrop {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.5);
    z-index: 1050;
}

.filter-panel {
    display: flex;
    flex-direction: column;
    position: fixed;
    top: 0;
    right: 0;
    width: 320px;
    max-width: 90%;
    height: 100%;
    background-color: #ffffff;
    box-shadow: -4px 0 15px rgba(0,0,0,0.1);
    z-index: 1051;
    transform: translateX(100%);
    transition: transform 0.3s ease-in-out;
}

    .filter-panel.is-open {
        transform: translateX(0);
    }

.filter-panel-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 1rem 1.5rem;
    border-bottom: 1px solid #dee2e6;
    flex-shrink: 0;
}

    .filter-panel-header h4 {
        margin: 0;
        font-size: 1.1rem;
    }

.filter-panel-body {
    display: flex;
    flex-direction: column;
    padding: 1.5rem;
    overflow-y: auto;
    gap: 1.75rem;
    font-size: 0.8rem;
    font-weight: 700;
}

    /* --- The New Pill Button Styling --- */
    .filter-panel-body .btn-group {
        /* This is the key. It removes the default Bootstrap spacing. */
        gap: 0;
        font-size: 0.8rem;
        font-weight: 700;
    }

    .filter-panel-body .btn {
        /* Make the button flexible and remove default rounding */
        flex: 1 1 0;
        border-radius: 0;
        transition: background-color 0.2s ease, color 0.2s ease;
        padding: 0.5rem 0.75rem;
        font-size: 0.8rem;
        font-weight: 700;
        border: 1px solid #2563eb; /* Use the primary color for the border */
    }

        /* Create the rounded "pill" shape for the group */
        .filter-panel-body .btn:first-child {
            border-top-left-radius: 30px;
            border-bottom-left-radius: 30px;
            font-size: 0.8rem;
            font-weight: 700;
        }

        .filter-panel-body .btn:last-child {
            border-top-right-radius: 30px;
            border-bottom-right-radius: 30px;
            font-size: 0.8rem;
            font-weight: 700;
        }

        /* --- Active vs. Inactive Button Styles --- */
        .filter-panel-body .btn.btn-primary {
            /* Style for the ACTIVE button */
            background-color: #2563eb;
            color: #fff;
            z-index: 2;
            font-size: 0.8rem;
            font-weight: 700;
        }

        .filter-panel-body .btn.btn-outline-secondary {
            /* Style for the INACTIVE button */
            background-color: #fff;
            color: #2563eb; /* Use primary color for the text to match the border */
            z-index: 1;
            font-size: 0.8rem;
            font-weight: 700;
        }

        /* Remove the blue focus ring for a cleaner look */
        .filter-panel-body .btn:focus {
            box-shadow: 0 0 0 0.25rem rgba(13, 110, 253, 0.25);
            z-index: 3;
            font-size: 0.8rem;
            font-weight: 700;
        }

.filter-group-label-container {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    margin-bottom: -1rem;
    font-size: 0.8rem;
    font-weight: 700;
}

/* Remove the blue focus ring for a cleaner look */
.filter-group .btn:focus {
    box-shadow: none;
    font-size: 0.8rem;
    font-weight: 700;
}

.filter-help-button { /* Your lightbulb icon button */
    background: none;
    border: none;
    padding: 0;
    margin: 0;
    cursor: pointer;
    color: #6c757d;
    line-height: 1;
    font-size: 0.8rem;
    font-weight: 700;
}

    .filter-help-button:hover {
        color: #2563eb;
        font-size: 0.8rem;
        font-weight: 700;
    }

    .filter-help-button .icon {
        width: 1.1em;
        height: 1.1em;
        font-size: 0.8rem;
        font-weight: 700;
    }



/* --- Desktop Overrides (for the horizontal bar) --- */
/*@media (min-width: 992px) {*/

    /* Hide mobile-only elements */
    /*.filter-backdrop, .filter-panel-header, .filter-toggle-button {
        display: none;
    }*/

    /* Reset the filter panel to be a simple, visible, horizontal bar */
    /*.filter-panel {
        position: static;
        width: 100%;
        height: auto;
        transform: none;
        box-shadow: none;
        background-color: transparent;
        border: none;
        margin-top: 0.5rem;
        padding: 0.75rem 0;
        font-size: 0.8rem;
        font-weight: 700;
    }

    .filter-panel-body {
        flex-direction: row;
        flex-wrap: wrap;
        align-items: center;
        padding: 0;
        gap: 1.5rem;
        font-size: 0.8rem;
        font-weight: 700;
    }
}*/

.btn {
    font-size: 0.8rem;
    font-weight: 700;
}


.help-modal-backdrop {
    position: fixed; /* Fixed position stays in place even on scroll */
    top: 0;
    left: 0;
    width: 100vw; /* Full viewport width */
    height: 100vh; /* Full viewport height */
    background-color: rgba(0, 0, 0, 0.6); /* Semi-transparent black */
    z-index: 1050; /* High z-index to be on top of everything */
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 1rem;
    cursor: pointer; /* Indicates the backdrop can be clicked to close */
    z-index: 1050;
}

/* --- 2. The Modal Content Box --- */
/* This is the white box that holds the actual information. */
.help-modal-content {
    background-color: #ffffff;
    border-radius: 12px; /* Nicely rounded corners */
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.3);
    max-width: 500px; /* A good max width for desktop */
    width: 100%;
    max-height: 80vh; /* Max height to prevent it from going off-screen */
    display: flex;
    flex-direction: column;
    cursor: default; /* Reset cursor to normal for the content */
    border: 1px solid #ddd;
    z-index: 1051;
}

/* --- 3. The Modal Header --- */
.help-modal-header {
    padding: 1rem 1.5rem;
    border-bottom: 1px solid #e9ecef;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

    .help-modal-header h3 {
        margin: 0;
        font-size: 1.25rem;
        font-weight: 600;
        color: #333;
    }

/* --- 4. The Modal Body (where the text goes) --- */
.help-modal-body {
    padding: 1.5rem;
    overflow-y: auto; /* Make the body scrollable if content is long */
    flex-grow: 1;
}

    .help-modal-body p {
        margin-top: 0;
        line-height: 1.6;
    }

    .help-modal-body hr {
        margin: 1rem 0;
        border-top: 1px solid #eee;
    }

    .help-modal-body h6 {
        font-weight: bold;
        color: #555;
        margin-top: 1.5rem;
        margin-bottom: 0.5rem;
        text-transform: uppercase;
        font-size: 0.8rem;
    }

    .help-modal-body .scale-list {
        list-style: none;
        padding-left: 0;
        margin-bottom: 0;
    }

        .help-modal-body .scale-list li {
            padding: 0.25rem 0;
            color: #495057;
        }

/* --- 5. The Modal Footer and the Large Close Button --- */
.help-modal-footer {
    padding: 1rem;
    display: flex;
    justify-content: center; /* Center the button */
    border-top: 1px solid #e9ecef;
    background-color: #f8f9fa; /* A slightly off-white background */
    border-bottom-left-radius: 12px;
    border-bottom-right-radius: 12px;
}

.help-modal-close-button {
    background-color: #dc3545; /* A distinct "close" red color */
    color: white;
    border: none;
    border-radius: 50%; /* Make it a perfect circle */
    width: 50px; /* A large, easy-to-tap size */
    height: 50px;
    font-size: 2rem; /* Make the 'x' character large */
    line-height: 1;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background-color 0.2s ease-in-out;
    padding-bottom: 4px; /* Adjust for vertical centering of the 'x' */
}

    .help-modal-close-button:hover {
        background-color: #c82333; /* Darker red on hover */
    }


/*Reason Modal*/

/* --- Styles for Simple Modal --- */
.simple-modal-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.6); /* Semi-transparent black background */
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 1050; /* Ensure it's above other content */
    backdrop-filter: blur(5px);
}

.simple-modal-content {
    background: white;
    padding: 20px;
    border-radius: 8px;
    box-shadow: 0 5px 15px rgba(0,0,0,0.3);
    width: 90%;
    max-width: 500px; /* Control max width */
    z-index: 1051;
    display: flex;
    flex-direction: column;
}

.simple-modal-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-bottom: 1px solid #dee2e6;
    padding-bottom: 0.75rem;
    margin-bottom: 1rem;
}

    .simple-modal-header h3 {
        margin-bottom: 0;
        font-size: 1.25rem;
        color: #333;
    }

.simple-modal-body {
    flex-grow: 1; /* Allows body to expand */
    padding-bottom: 1rem;
}

.simple-modal-footer {
    display: flex;
    justify-content: flex-end;
    gap: 0.5rem; /* Space between buttons */
    border-top: 1px solid #dee2e6;
    padding-top: 1rem;
    margin-top: 1rem;
}


/*WEBLLM UI*/
html, body {
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    height: 100%;
    margin: 0;
    padding: 0;
    overflow: hidden; /* Prevent the main body from scrolling */
    background-color: var(--bg-color) !important;
    color: var(--text-primary) !important;
    transition: background-color 0.3s ease, color 0.3s ease;
}

/* --- Main Layout Containers --- */
.page-container {
    display: flex;
    flex-direction: column;
    height: 100vh; /* Full viewport height */
    max-width: 800px;
    margin: 0 auto;
    background-color: #ffffff;
    box-shadow: 0 0 15px rgba(0,0,0,0.1);
}

.chat-wrapper {
    flex-grow: 1; /* This makes the chat history take up all available vertical space */
    overflow-y: auto; /* Adds a scrollbar ONLY to the chat history area */
    padding: 1rem 1rem 0 1rem;
}

.chat-history {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    padding-bottom: 1rem; /* Space at the bottom */
}

/* --- Message Bubbles --- */
.message-bubble {
    padding: 0.5rem 1rem;
    border-radius: 1.5rem;
    max-width: 85%;
    word-wrap: break-word;
    line-height: 1.5;
    animation: fadeIn 0.3s ease-in-out;
}

    .message-bubble.user {
        background-color: #007bff;
        color: white;
        align-self: flex-end;
        border-bottom-right-radius: 0.5rem;
    }

    .message-bubble.assistant {
        background-color: #e9ecef;
        color: #212529;
        align-self: flex-start;
        border-bottom-left-radius: 0.5rem;
    }

/* --- Prompt Input Area --- */
.prompt-request {
    flex-shrink: 0; /* Prevents this bar from shrinking */
    padding: 0.75rem;
    display: flex;
    gap: 0.5rem;
    border-top: 1px solid #dee2e6;
    background-color: #f8f9fa;
    align-items: center;
}

    .prompt-request input {
        flex-grow: 1;
        border-radius: 20px;
        border: 1px solid #ced4da;
        padding: 0.6rem 1rem;
        font-size: 1rem;
        line-height: 1.5;
    }

        .prompt-request input:focus {
            outline: none;
            border-color: #80bdff;
            box-shadow: 0 0 0 0.2rem rgba(0,123,255,.25);
        }

    .prompt-request button {
        flex-shrink: 0;
        border: none;
        border-radius: 50%;
        width: 44px;
        height: 44px;
        cursor: pointer;
        display: flex;
        align-items: center;
        justify-content: center;
        transition: background-color 0.2s ease;
    }

        .prompt-request button.send-button {
            background-color: #007bff;
            color: white;
        }

        .prompt-request button.new-chat-btn {
            background-color: #6c757d;
            color: white;
        }

        .prompt-request button:hover:not(:disabled) {
            filter: brightness(1.1);
        }

        .prompt-request button:disabled {
            background-color: #ced4da;
            cursor: not-allowed;
        }

/* --- Status and Upgrade Bar --- */
.status-bar {
    flex-shrink: 0;
    padding: 0.5rem 1rem;
    background-color: #e9ecef;
    border-top: 1px solid #dee2e6;
    font-size: 0.8rem;
    color: #6c757d;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.upgrade-btn {
    background-color: #28a745;
    color: white;
    border: none;
    padding: 0.25rem 0.75rem;
    border-radius: 20px;
    cursor: pointer;
    font-size: 0.75rem;
    font-weight: bold;
}

    .upgrade-btn:hover {
        background-color: #218838;
    }

/* --- Loading and Animations --- */
.loading-container {
    /* --- Position and Sizing (The Key Changes) --- */
    width: 100%; /* Take the full width of the screen */
    min-height: 50px; /* Give it a minimum height so it doesn't look squashed when empty */
    height: auto; /* CRITICAL: This makes the container only as tall as its content */
    /* --- Layout --- */
    display: flex;
    flex-direction: column;
    align-items: center; /* Center content horizontally */
    justify-content: center; /* Center content vertically WITHIN the banner's height */
    /* --- Appearance --- */
    text-align: center;
    padding: 1rem 1.5rem; /* Give the content some breathing room */
    background-color: #f8f9fa; /* A light background to stand out from the page */
    border-bottom: 1px solid #dee2e6; /* A subtle separator line */
    color: #212529; /* Dark text for readability on a light background */
    /* Ensure it's part of the normal page flow, not an overlay */
    position: relative;
    z-index: 10; /* Keep it above other content if necessary */
}

    /* Style adjustments for the content inside the banner */
    .loading-container h3,
    .loading-container h5 {
        margin-top: 0;
        margin-bottom: 0.75rem;
    }

    .loading-container p {
        margin-bottom: 1rem;
        font-size: 0.9rem;
        color: #495057;
    }

    .loading-container ul {
        text-align: left; /* Make the list items easier to read */
        max-width: 500px; /* Constrain width for readability */
        margin-bottom: 1.5rem;
        padding-left: 20px; /* Standard list indentation */
    }

    .loading-container progress {
        margin-bottom: 0.5rem;
    }

.thinking-indicator {
    display: inline-block;
    width: 24px;
    height: 6px;
    background: radial-gradient(circle closest-side, currentColor 90%, #0000) 0% 50%, radial-gradient(circle closest-side, currentColor 90%, #0000) 50% 50%, radial-gradient(circle closest-side, currentColor 90%, #0000) 100% 50%;
    background-size: calc(100%/3) 100%;
    background-repeat: no-repeat;
    animation: thinking 1s infinite linear;
}

@keyframes thinking {
    20% {
        background-position: 0% 50%, 50% 50%, 100% 50%
    }

    40% {
        background-position: 0% 100%, 50% 50%, 100% 50%
    }

    60% {
        background-position: 0% 50%, 50% 100%, 100% 50%
    }

    80% {
        background-position: 0% 50%, 50% 50%, 100% 100%
    }
}

@keyframes fadeIn {
    from {
        opacity: 0;
        transform: translateY(10px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}


/* Styles for the Blazor autocomplete dropdown */
.autocomplete-container {
    position: relative;
}

#procedure-autocomplete-dropdown.blazor-autocomplete {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    background: #fff;
    border: 1px solid #ced4da;
    border-top: none;
    border-radius: 0 0 0.375rem 0.375rem;
    z-index: 1001;
    max-height: 300px;
    overflow-y: auto;
    box-shadow: 0 4px 8px rgba(0,0,0,0.1);
}

    #procedure-autocomplete-dropdown.blazor-autocomplete .autocomplete-item {
        padding: 0.5rem 1rem;
        cursor: pointer;
        border-bottom: 1px solid #eee;
        color: #212529;
        text-align: left;
    }

        #procedure-autocomplete-dropdown.blazor-autocomplete .autocomplete-item:last-child {
            border-bottom: none;
        }

        #procedure-autocomplete-dropdown.blazor-autocomplete .autocomplete-item:hover {
            background-color: #f8f9fa;
        }

.landing-form-section,
.autocomplete-container {
    overflow: visible !important;
}

.autocomplete-container {
    overflow: visible !important;
}

/* Apply a pulse animation specifically to the primary button's icon wrapper */
/*.landing-cta-primary .icon-wrapper {*/
    /* Use a blue glow to match the button color */
    /*animation: pulse-blue 2s infinite;
}*/

/* Keyframes for the BLUE pulse */
.search-dropdown-container {
    /* This uses position:fixed to break out of all parent containers,
       solving the clipping issue permanently. */
    position: fixed;
    z-index: 1050; /* High z-index to appear over everything */
    border-radius: 0 0 0.375rem 0.375rem;
    box-shadow: 0 4px 8px rgba(0,0,0,0.15);
    background: #fff;
    border: 1px solid #ddd;
}

.search-dropdown-list {
    max-height: 300px; /* Make the list scrollable if it's too long */
    overflow-y: auto;
}

.search-dropdown-item {
    padding: 0.5rem 1rem;
    cursor: pointer;
    border-bottom: 1px solid #eee;
    color: #212529;
    text-align: left;
    white-space: nowrap;
}

    .search-dropdown-item:last-child {
        border-bottom: none;
    }

    .search-dropdown-item:hover {
        background-color: #f8f9fa;
    }

/* --- 1. The Inline Pill-Style Input Group (in each row) --- */
.qna-input-group-inline {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    width: 100%;
    border: 1px solid #ccc;
    border-radius: 50rem;
    background-color: #f8f9fa;
    padding: 0.1rem 0.2rem 0.1rem 0.8rem;
    transition: box-shadow 0.15s ease-in-out;
}

    /* Add a focus ring to the entire pill when the input is active */
    .qna-input-group-inline:focus-within {
        box-shadow: 0 0 0 0.2rem rgba(13, 110, 253, 0.25);
        border-color: #86b7fe;
    }

    /* The <input> field itself, made to look invisible */
    .qna-input-group-inline .qna-input {
        flex-grow: 1;
        border: none;
        background-color: transparent;
        padding: 0.4em 0;
        font-size: 0.9rem;
        color: #495057;
        outline: none;
        box-shadow: none;
        width: 100%; /* Helps with layout consistency */
        min-width: 50px; /* Prevents it from becoming too small */
    }

        /* Style for the input's placeholder text */
        .qna-input-group-inline .qna-input::placeholder {
            color: #888;
            font-style: italic;
            opacity: 1; /* Ensure placeholder is visible */
        }

    /* The circular send button */
    .qna-input-group-inline .qna-send-button {
        flex-shrink: 0;
        width: 28px;
        height: 28px;
        border-radius: 50%;
        background-color: #2563eb;
        border: none;
        color: white;
        display: flex;
        align-items: center;
        justify-content: center;
        padding: 0;
        cursor: pointer;
        transition: background-color 0.15s ease-in-out;
    }

        .qna-input-group-inline .qna-send-button:hover {
            background-color: #0b5ed7;
        }

        .qna-input-group-inline .qna-send-button:disabled {
            background-color: #6c757d;
            cursor: not-allowed;
        }

        /* The arrow icon inside the send button */
        .qna-input-group-inline .qna-send-button span {
            font-size: 1.2rem;
            line-height: 1;
            transform: translateX(1px); /* Minor visual centering */
        }

/* --- 2. The Chat Modal (reusing your help modal styles) --- */
/* Your .help-modal-backdrop and .help-modal-content styles are a good base.
   We just add a specific class for any chat-specific overrides. */
.qna-modal-content {
    /* You can add chat-specific styles here, e.g., a different max-width */
    max-width: 600px;
}

/* The main container for the chat history and input within the modal */
.qna-section {
    width: 100%;
}

.qna-title {
    font-size: 0.95em;
    font-weight: 600;
    color: #444;
    margin-bottom: 10px;
}

/* The scrollable chat history area */
.qna-history {
    max-height: 40vh; /* Give it more vertical space in the modal */
    overflow-y: auto;
    margin-bottom: 15px;
    padding: 10px;
    background-color: #f9f9f9;
    border-radius: 6px;
    border: 1px solid #eee;
    font-size: 0.9em;
}

.qna-question {
    margin-bottom: 4px;
    color: #333;
}

    .qna-question strong {
        color: #0d6efd; /* Blue for "Q:" */
    }

.qna-answer {
    margin-bottom: 12px;
    color: #555;
    padding-left: 15px;
    white-space: pre-wrap; /* Preserve formatting like newlines from the AI */
    border-left: 2px solid #ccc;
}

    .qna-answer strong {
        color: #198754; /* Green for "A:" */
    }

/* The input group at the bottom of the modal */
.qna-input-group {
    display: flex;
    gap: 8px;
    align-items: center;
}

    .qna-input-group .qna-input {
        flex-grow: 1;
        font-size: 0.9em;
    }

    .qna-input-group .qna-send-button {
        flex-shrink: 0;
        font-size: 0.9em;
        padding: 0.3rem 0.75rem;
    }

        .qna-input-group .qna-send-button .spinner-border-sm {
            width: 1em;
            height: 1em;
        }

/* Specific styles for the iOS install modal */
.ios-install-modal .help-modal-header h3 {
    margin: 0;
    font-size: 1.25rem;
}

.ios-install-modal .close-button {
    background: none;
    border: none;
    font-size: 1.5rem;
    line-height: 1;
    cursor: pointer;
    color: #6c757d;
}

.ios-install-intro {
    font-size: 1rem;
    color: #495057;
    margin-bottom: 1.5rem;
    text-align: center;
}

.ios-install-steps {
    list-style: none;
    padding: 0;
    margin: 0;
}

.ios-install-step {
    display: flex;
    align-items: center;
    margin-bottom: 1.5rem;
    gap: 1rem; /* Space between number, text, and icon */
}

    .ios-install-step .step-number {
        flex-shrink: 0;
        width: 30px;
        height: 30px;
        border-radius: 50%;
        background-color: #0d6efd; /* Your primary blue color */
        color: #fff;
        font-weight: bold;
        display: flex;
        align-items: center;
        justify-content: center;
    }

    .ios-install-step .step-text {
        flex-grow: 1;
        font-size: 0.95rem;
        text-align: left;
    }

    .ios-install-step .step-icon {
        flex-shrink: 0;
        width: 40px;
        display: flex;
        align-items: center;
        justify-content: center;
        color: #0d6efd; /* Match the step number color */
    }

    /* Style for the text-based "Add" icon */
    .ios-install-step .add-text-icon {
        font-weight: bold;
        font-size: 1rem;
    }

.why-modal-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.6);
    display: none; /* Hidden by default */
    justify-content: center;
    align-items: center;
    z-index: 10000; /* CRITICAL: A very high number to ensure it's on top of everything */
    backdrop-filter: blur(5px);
    -webkit-backdrop-filter: blur(5px);
}

.why-modal-content {
    background: #ffffff;
    color: #333;
    border-radius: 12px;
    box-shadow: 0 5px 20px rgba(0,0,0,0.3);
    width: 90%;
    max-width: 600px;
    max-height: 90vh;
    display: flex;
    flex-direction: column;
    overflow: hidden; /* Prevents content from spilling out of rounded corners */
}

.why-modal-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 1rem 1.5rem;
    border-bottom: 1px solid #e9ecef;
}

    .why-modal-header h2 {
        margin: 0;
        font-size: 1.5rem;
    }

.why-modal-close-btn {
    background: none;
    border: none;
    font-size: 2rem;
    line-height: 1;
    color: #6c757d;
    cursor: pointer;
    padding: 0;
}

.why-modal-body {
    padding: 1.5rem;
    overflow-y: auto; /* Make the list of use cases scrollable */
    display: flex;
    flex-direction: column;
    gap: 1rem; /* Space between each use case item */
}

.use-case-item {
    border: 1px solid #dee2e6;
    border-radius: 8px;
}

.use-case-header {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 1rem;
    cursor: pointer;
    background-color: #f8f9fa;
}

    .use-case-header:hover {
        background-color: #e9ecef;
    }

.use-case-icon {
    width: 32px;
    height: 32px;
    flex-shrink: 0;
}

.use-case-title {
    font-weight: 600;
    flex-grow: 1;
}

.use-case-arrow {
    font-weight: bold;
    transition: transform 0.3s ease;
}

.use-case-item.open .use-case-arrow {
    transform: rotate(180deg);
}

.use-case-detail {
    display: none; /* Detail is hidden by default */
    padding: 0 1rem 1rem 1rem; /* Padding for the text */
    line-height: 1.6;
    font-size: 0.95rem;
}

    .use-case-detail p {
        margin: 0 0 1rem 0;
    }

.use-case-tabs {
    display: flex;
    gap: 10px;
    border-bottom: 1px solid #dee2e6;
    padding: 0 1.5rem; /* Match body padding */
    margin: -1.5rem -1.5rem 1.5rem -1.5rem; /* Pull up against header */
    background: #f8f9fa; /* Match header background */
}

.use-case-tab {
    position: relative;
    padding: 1rem;
    font-weight: 600;
    color: #6c757d;
    cursor: pointer;
    border-bottom: 3px solid transparent;
    transition: all 0.3s ease;
    overflow: hidden; /* For the background image */
}

    .use-case-tab .tab-bg {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background-size: cover;
        background-position: center;
        opacity: 0.1; /* Very subtle */
        transition: opacity 0.3s ease;
    }

    .use-case-tab span {
        position: relative; /* Keep text above background */
    }

    .use-case-tab:hover {
        color: #000000;
    }

    .use-case-tab.active {
        color: #007bff; /* Your primary brand color */
        border-bottom-color: #007bff;
    }

        .use-case-tab.active .tab-bg {
            opacity: 0.2;
        }

.use-case-content {
    /* Styles for the content area */
}

.use-case-pane {
    display: none; /* Hide all panes by default */
}

    .use-case-pane.active {
        display: block; /* Show only the active one */
    }

    .use-case-pane h4 {
        font-size: 1.1rem;
        font-weight: 600;
        margin-bottom: 1.5rem;
        text-align: center;
    }

    .use-case-pane strong {
        font-weight: 700;
        color: #333;
    }

.solution-block {
    margin: 1.5rem 0 0 0;
    padding: 1rem;
    background-color: #e6f7ff; /* A light, hopeful blue */
    border-left: 5px solid #007bff; /* Your primary brand color */
    border-radius: 0 8px 8px 0;
    font-size: 0.9rem;
}

    .solution-block strong {
        color: #0056b3; /* A darker shade of blue for the heading */
    }

body.blazor-active {
    overflow: hidden;
}

/* --- Demo Mode Styles --- */
.hover-effect {
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(34, 139, 230, 0.4);
    background-color: #0056b3 !important; /* Darker blue active state */
    color: white !important;
    transition: all 0.2s ease;
}

/* Scale effect for button clicks in demo */
.click-effect {
    transform: scale(0.95);
}

/* Fade in animation for demo elements */
@keyframes demoFadeIn {
    from {
        opacity: 0;
        transform: translateY(10px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.demo-element {
    animation: demoFadeIn 0.5s ease-out forwards;
}

@media (max-width: 991.98px) {
    .alt-cell {
        /* ... other styles ... */
        width: 100%; /* Force cell to take full width of the card */
        box-sizing: border-box; /* Ensure padding doesn't add to width */
        /* This handles the content overflow inside the cell */
        min-width: 0;
    }
}

@media (max-width: 500px) {
    .operation-resource-header {
        flex-wrap: wrap; /* Allow stacking */
    }

    .operation-resource-name {
        width: 100%; /* Name takes full top row */
        margin-bottom: 5px;
    }

    .resource-item-actions {
        width: 100% !important; /* Container takes full width */
        justify-content: flex-start; /* Align buttons to left */
    }

        /* Keep buttons compact even when stacked */
        .resource-item-actions .landing-cta-button {
            width: auto !important;
        }
}

@media (max-width: 991.98px) {
    .page-controls-wrapper .btn.d-lg-none {
        display: inline-flex !important; /* Override any hidden state */
    }
}

/* 4. Ensure the Desktop Filter Button (if any) is hidden on mobile */
@media (max-width: 991.98px) {
    .page-controls-wrapper .btn.d-none.d-lg-inline-flex {
        display: none !important;
    }
}

.container-class {
    display: flex;
    justify-content: flex-start; /* Aligns items to the left */
    background-color: transparent; /* Sets background to transparent */
    border: none; /* Optional: removes border if present */
}

.hero-title-problem {
    color: #000000; /* Stark Black */
    font-weight: 600; /* Semi-Bold */
    margin-bottom: 0.5rem;
}

.hero-title-solution {
    color: #444444; /* Dark Grey */
    font-weight: 400; /* Normal */
}

.highlight-offline {
    color: #2563eb; /* A more modern, vibrant blue */
    font-weight: 600;
}

/* Add this to your <style> block or app.css */
@media (max-width: 600px) {
    .desktop-only-break {
        display: none; /* Hides the <br> on mobile so text flows naturally */
    }
}

.landing-title-container {
    margin-bottom: 3.5rem; /* Increased from 2rem to let the headline breathe */
    text-align: center;
}

/* The Icon itself */
.search-icon {
    position: absolute;
    left: 15px; /* sits inside the 45px padding zone */
    top: 50%;
    transform: translateY(-50%);
    width: 20px;
    height: 20px;
    color: #9ca3af;
    z-index: 10;
    pointer-events: none;
}

.landing-title-problem {
    font-size: clamp(2.5rem, 5vw, 4rem); /* Bigger! */
    font-weight: 800;
    letter-spacing: -0.04em; /* Tight tracking looks premium */
    line-height: 1.1;
    color: var(--text-primary) !important;
    margin-bottom: 1rem;
}

.landing-title-solution {
    font-size: clamp(1.1rem, 2vw, 1.5rem);
    color: var(--text-secondary) !important;
    font-weight: 400;
    line-height: 1.6;
    max-width: 600px;
    margin: 0 auto 3rem auto;
}

@media (max-width: 600px) {
    .landing-content-overlay {
        padding-left: 1.5rem !important;
        padding-right: 1.5rem !important;
    }
}

/* The Wrapper */
.ambient-demo-wrapper {
    margin-top: 3rem;
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    opacity: 0; /* Start hidden for fade-in */
    animation: fadeInUp 1s ease-out 0.5s forwards;
}

.ambient-label {
    font-size: 0.7rem;
    font-weight: 700;
    color: #9ca3af; /* Muted grey */
    letter-spacing: 1.5px;
    margin-bottom: 10px;
    text-transform: uppercase;
}

/* The "Card" mimicking the app */
.ambient-demo-card {
    background: #ffffff;
    border: 1px solid #e5e7eb;
    border-radius: 12px;
    box-shadow: 0 10px 30px -5px rgba(0, 0, 0, 0.1); /* Nice deep shadow */
    width: 100%;
    max-width: 500px; /* Smaller than main width */
    padding: 15px;
    overflow: hidden;
    height: 180px; /* Fixed height to prevent jumping */
    position: relative;
    text-align: left;
}

/* The Fake Search Bar inside the card */
.ambient-search-bar {
    background: #f3f4f6;
    border-radius: 6px;
    padding: 8px 12px;
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 15px;
    color: #1f2937;
    font-family: monospace;
    font-size: 0.9rem;
}

.ambient-icon {
    font-size: 0.8rem;
    opacity: 0.5;
}

/* The Result Card Styling (Miniaturized) */
.mini-result-card {
    border: 1px solid #d1e7dd;
    background-color: #f0fff4; /* Green tint background */
    border-left: 4px solid #198754; /* Green success border */
    border-radius: 6px;
    padding: 12px;
    animation: slideUpFade 0.5s ease-out;
}

.mini-result-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 8px;
}

.mini-result-title {
    font-weight: 800;
    color: #0f5132;
    font-size: 0.95rem;
}

.mini-tags {
    display: flex;
    gap: 4px;
}

.mini-tag {
    font-size: 0.6rem;
    font-weight: 700;
    background: #d1e7dd;
    color: #0f5132;
    padding: 2px 6px;
    border-radius: 4px;
}

.mini-result-body {
    font-size: 0.8rem;
    color: #333;
    line-height: 1.4;
}

@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(20px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes slideUpFade {
    from {
        opacity: 0;
        transform: translateY(10px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Ambient Demo Container */
.ambient-demo-container {
    width: 100%;
    /* Increased height to ensure the full phone fits without clipping */
    height: 450px;
    position: relative;
    overflow: hidden; /* Keep this to prevent scrollbars on main page */
    display: flex;
    justify-content: center;
    align-items: flex-start; /* Align top */
    opacity: 0.8; /* Bumped up slightly for readability */
    transition: opacity 0.3s ease;
    margin-top: 2rem;
    pointer-events: none;
    /* Add padding to prevent clipping of shadows/transformations */
    padding-bottom: 20px;
}
    /* Hover effect: If the user gets curious, make it clear */
    .ambient-demo-container:hover {
        opacity: 1;
    }

/* The Scaled Device Frame */
.ambient-device-scale-wrapper {
    transform: scale(0.6); /* Scale the whole 700px phone down to ~420px */
    transform-origin: top center;
    width: 700px; /* Match original device width */
    /* Ensure it has enough height allocated in the layout flow */
    height: 650px;
}


/* =================================================================== */
/* === DARK MODE FIXES (ADD TO END OF CSS) =========================== */
/* =================================================================== */

[data-theme="dark"] {
    /* 1. Fix Logo Text */
    --text-primary: #ffffff !important;
    --text-secondary: #a0a0a0 !important;
}

    /* 2. Fix the Logo Button Text specifically */
    [data-theme="dark"] .logo-title {
        color: #ffffff !important;
    }

    /* 3. Fix "Use Offline" Button */
    [data-theme="dark"] .landing-cta-secondary {
        color: #ffffff !important;
        border-color: rgba(255,255,255,0.5) !important;
    }

        [data-theme="dark"] .landing-cta-secondary:hover {
            background-color: rgba(255,255,255,0.1) !important;
            border-color: #ffffff !important;
        }

    /* 4. Fix "How It Works" Button */
    [data-theme="dark"] #how-it-works-button span {
        color: #ffffff !important;
    }

    [data-theme="dark"] #how-it-works-button svg {
        fill: #ffffff !important; /* Make the icon white */
    }

    [data-theme="dark"] #how-it-works-button {
        border-color: rgba(255,255,255,0.3) !important;
    }

        [data-theme="dark"] #how-it-works-button:hover {
            background-color: rgba(255,255,255,0.1) !important;
        }

[data-theme="dark"] .landing-input {
    background-color: #1a1a1a !important; /* Dark background */
    color: #ffffff !important; /* White text */
    border: 1px solid #444 !important; /* Subtle border */
}

/* 2. The Placeholder Text (when empty) */
[data-theme="dark"] .placeholder-container .animated-placeholder {
    color: #888 !important; /* Dimmed grey for placeholder */
}

/* 3. The Dropdown Container */
[data-theme="dark"] #procedure-autocomplete-dropdown {
    background-color: #1a1a1a !important; /* Match input background */
    border: 1px solid #444 !important;
    border-top: none !important; /* Merge with input */
    color: #ffffff !important;
}

/* 4. Dropdown Items */
[data-theme="dark"] .autocomplete-item {
    color: #e0e0e0 !important; /* Off-white text */
    border-bottom: 1px solid #333 !important; /* Dark separator */
    background-color: #1a1a1a !important;
}

    /* 5. Dropdown Hover State (User selecting an item) */
    [data-theme="dark"] .autocomplete-item:hover {
        background-color: #333 !important; /* Lighter grey on hover */
        color: #fff !important;
    }

/* 6. The Search Icon inside the box */
[data-theme="dark"] .search-icon {
    color: #888 !important; /* Dimmed icon */
}

    /* 6. Fix Trusted Sources Section Background */
    [data-theme="dark"] .trusted-sources-section {
        background-color: #111111 !important; /* Match body background */
        border-top: 1px solid #333 !important;
    }

    [data-theme="dark"] .trusted-sources-title {
        color: #666 !important; /* Darker grey for the label */
    }
    /* Invert Logos for Dark Mode (Optional but looks pro) */
    [data-theme="dark"] .logos-slide img {
        filter: grayscale(100%) invert(1) opacity(0.5) !important;
    }

        [data-theme="dark"] .logos-slide img:hover {
            filter: grayscale(0%) invert(1) opacity(1) !important;
        }

    /* 7. Fix Ambient Demo Card Background */
    [data-theme="dark"] .ambient-demo-card {
        background-color: #1a1a1a !important;
        border-color: #333 !important;
    }

    [data-theme="dark"] .ambient-search-bar {
        background-color: #222 !important;
        color: #fff !important;
    }

    [data-theme="dark"] .mini-result-body {
        color: #ddd !important;
    }

    [data-theme="dark"] .landing-content-overlay {
        background-color: transparent !important; /* Remove the box */
        border: none !important; /* Remove the border */
        box-shadow: none !important; /* Remove any shadow if present */
    }

/* 1. Fake OS Home Screen */
.demo-os-screen {
    height: 100%;
    width: 100%;
    background: linear-gradient(135deg, #1e3c72 0%, #2a5298 100%);
    display: flex;
    flex-direction: column;
    padding: 20px;
    box-sizing: border-box;
    overflow: hidden; /* Clip anything that still tries to overflow */
}

    .demo-os-screen > div:last-child {
        margin-top: auto; /* Push to bottom */
        margin-bottom: 5px; /* Small buffer from bezel */
        flex-shrink: 0; /* Prevent dock from getting squashed */
        padding: 15px;
        background: rgba(255,255,255,0.3);
        border-radius: 24px;
        display: flex;
        justify-content: space-around;
        /* Limit dock width to match grid visually */
        max-width: 400px;
        align-self: center; /* Center the dock itself */
        width: 100%;
    }

.os-status-bar {
    display: flex;
    justify-content: space-between;
    color: white;
    font-size: 12px;
    margin-bottom: 20px;
    font-weight: bold;
}

.os-app-grid {
    display: grid;
    /* Instead of 1fr (flexible), we use 90px (fixed) */
    /* This guarantees 4 icons = ~400px wide, leaving plenty of room */
    grid-template-columns: repeat(4, 90px);
    gap: 20px;
    /* Center the grid block in the middle of the screen */
    justify-content: center;
    margin: 20px auto; /* Center horizontally, add space from top */

    width: 100%;
    flex-shrink: 1; /* Allow grid to shrink if needed */
}
.os-app-icon {
    width: 100%; /* Fills the 90px slot */
    aspect-ratio: 1 / 1; /* Force square */
    background-color: rgba(255,255,255,0.2);
    border-radius: 18px; /* Slightly softer radius for iOS look */
    position: relative;
    cursor: pointer;
    transition: transform 0.2s;
}

    /* The Hero App Icon */
    .os-app-icon.lifesaver-app {
        background-color: white;
        display: flex;
        align-items: center;
        justify-content: center;
        box-shadow: 0 4px 10px rgba(0,0,0,0.3);
    }

/* Pulse animation for the icon */
@keyframes appPulse {
    0% {
        transform: scale(1);
        box-shadow: 0 4px 10px rgba(0,0,0,0.3);
    }

    50% {
        transform: scale(1.1);
        box-shadow: 0 0 0 10px rgba(255, 255, 255, 0.3);
    }

    100% {
        transform: scale(1);
        box-shadow: 0 4px 10px rgba(0,0,0,0.3);
    }
}

.os-app-icon.lifesaver-app.pulsing {
    animation: appPulse 1.5s infinite;
    z-index: 10;
}

/* 2. Fake Chat App */
.demo-chat-screen {
    height: 100%;
    width: 100%;
    background-color: #ece5dd; /* WhatsApp-ish background */
    display: flex;
    flex-direction: column;
}

.chat-header {
    background-color: #075e54;
    color: white;
    padding: 15px;
    display: flex;
    align-items: center;
    gap: 10px;
}

.chat-avatar {
    width: 35px;
    height: 35px;
    background: #ccc;
    border-radius: 50%;
}

.chat-name {
    font-weight: bold;
    font-size: 1rem;
}

.chat-body {
    flex-grow: 1;
    padding: 15px;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

/*.chat-bubble {
    border-radius: 8px;
    max-width: 80%;
    font-size: 1.4rem !important;
    line-height: 1.4 !important;
    padding: 15px 20px !important;
    position: relative;
    animation: popIn 0.3s cubic-bezier(0.68, -0.55, 0.265, 1.55);
    text-align: left !important;
    align-self: flex-start;*/ /* Ensures the bubble itself aligns left in flex container */
/*}*/

@keyframes popIn {
    from {
        opacity: 0;
        transform: scale(0.8);
    }

    to {
        opacity: 1;
        transform: scale(1);
    }
}

.chat-bubble.received {
    background-color: white;
    align-self: flex-start;
    border-top-left-radius: 0;
}

.chat-bubble.sent {
    text-align: left !important;
    align-self: flex-end !important;
    border-bottom-right-radius: 0 !important;
    border-bottom-left-radius: 25px !important;
    background-color: #dcf8c6;
}

/* The Emergency Alert Bubble */
.chat-bubble.emergency {
    background-color: #dc3545;
    color: white;
    text-align: center !important;
    align-self: center !important; /* Keep the bubble centered in the screen */
    width: 100% !important; /* Ensure it spans width for centering */
    border-radius: 20px;
    box-shadow: 0 2px 5px rgba(0,0,0,0.2);
    font-size: 1.8rem !important;
    letter-spacing: 2px !important;
    padding: 25px !important;
}

.chat-input-area {
    background: white;
    padding: 10px;
    display: flex;
    gap: 10px;
    align-items: center;
}

.chat-input-fake {
    flex-grow: 1;
    background: #f0f0f0;
    padding: 10px;
    border-radius: 20px;
    color: #333;
    min-height: 40px;
    display: flex;
    align-items: center;
    font-size: 1.3rem !important;
    height: 50px !important; /* Taller input bar */
}

/* Notification Banner */
/* Notification Banner */
.os-notification {
    /* Start positioned just above the screen edge */
    position: absolute;
    top: -200px;
    left: 10px;
    right: 10px;
    /* High Contrast Styling */
    background-color: #dc3545 !important;
    border: 1px solid #ff6b6b !important;
    border-radius: 16px !important;
    padding: 20px !important;
    box-shadow: 0 10px 40px rgba(0,0,0,0.6) !important;
    z-index: 200; /* Above everything */
    /* Smooth Transition */
    transition: transform 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    /* Flex Layout */
    display: flex !important;
    gap: 15px !important;
    align-items: flex-start !important;
}
    .os-notification.visible {
        transform: translateY(230px);
    }

.notif-icon {
    background-color: white !important;
    color: #dc3545 !important;
    width: 45px !important;
    height: 45px !important;
    border-radius: 10px !important;
    font-size: 24px !important;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* The small "MESSAGES • NOW" text */
.notif-header {
    color: rgba(255, 255, 255, 0.9) !important;
    font-size: 1rem !important;
    font-weight: 700 !important;
    margin-bottom: 5px !important;
    text-transform: uppercase;
    letter-spacing: 1px;
}

/* The Main Message text */
.notif-body {
    color: #ffffff !important;
    font-size: 1.4rem !important; /* Large and readable */
    font-weight: 900 !important;
    line-height: 1.2 !important;
    text-shadow: 0 2px 4px rgba(0,0,0,0.2);
}

.notif-content {
    flex-grow: 1;
    overflow: hidden;
}

.notif-header {
    display: flex;
    justify-content: space-between;
    font-size: 0.8rem;
    color: #666;
    margin-bottom: 2px;
    font-weight: 600;
    text-transform: uppercase;
}

.notif-body {
    font-size: 0.9rem;
    font-weight: 500;
    color: #000;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Fix Chat Bubble Text Visibility */
.chat-bubble {
    color: #000 !important; /* Force black text inside bubbles */
    font-size: 1.1rem; /* Larger text */
    padding: 15px 20px;
}

    /* Ensure the chat bubble strips any internal span styling from the prologue */
    .chat-bubble span {
        color: #000 !important;
        font-weight: normal !important;
    }

.chat-body {
    padding: 30px 20px !important;
    gap: 30px !important; /* More space between bubbles */
    scroll-behavior: smooth; /* Essential for the auto-scroll */
}


/* Chat Medical Report Card Styling */
.chat-medical-report {
    display: flex;
    flex-direction: column;
    gap: 20px !important; /* Space between data points */
    min-width: 200px;
}

.chat-report-row {
    display: flex;
    flex-direction: column; /* Stack Label on top of Value */
    align-items: flex-start;
    border-bottom: 2px solid #eee !important; /* Thicker divider */
    padding-bottom: 15px !important;
}

    .chat-report-row:last-child {
        border-bottom: none !important;
    }

.chat-report-label {
    font-size: 1rem !important;
    color: #dc3545 !important; /* Urgent Red */
    font-weight: 900 !important;
    text-transform: uppercase;
    letter-spacing: 1px;
    margin-bottom: 5px !important;
}
.chat-report-value {
    font-size: 1.9rem !important;
    color: #000000 !important;
    font-weight: 800 !important;
    line-height: 1.1 !important;
}

    .chat-report-value.risk {
        color: #dc3545; /* Red for the risk row */
    }

.chat-bubble {
    font-size: 1.6rem !important; /* Huge text */
    line-height: 1.4 !important;
    padding: 20px 30px !important;
    border-radius: 25px !important;
    box-shadow: 0 4px 10px rgba(0,0,0,0.1) !important;
}

.chat-input-area {
    height: auto !important;
    align-items: flex-end !important;
    padding-bottom: 20px !important;
}

.chat-input-fake {
    /* 1. Allow height to grow */
    height: auto !important;
    min-height: 60px !important;
    /* 2. Force text to wrap */
    white-space: normal !important;
    overflow-wrap: anywhere !important;
    /* 3. Layout & Alignment */
    display: block !important;
    text-align: left !important; /* <--- THE FIX */
    /* 4. Spacing */
    padding-top: 15px !important;
    padding-bottom: 15px !important;
    line-height: 1.3 !important;
}

/* Chat Medical Card - Scaled Up */
.chat-medical-report {
    gap: 10px;
}

.chat-report-label {
    font-size: 0.85rem;
}

.chat-report-value {
    font-size: 1.3rem;
}

#ambient-chat-send-btn {
    /* This is the magic property */
    flex-shrink: 0 !important;
    /* Enforce dimensions */
    width: 50px !important;
    height: 50px !important;
    min-width: 50px !important; /* Double insurance */
}





/* 1. Notification Container (Holds the stack) */
.notification-stack {
    position: absolute;
    top: 40px; /* Below status bar */
    left: 10px;
    right: 10px;
    display: flex;
    flex-direction: column;
    gap: 8px; /* Space between messages */
    z-index: 200;
    pointer-events: none; /* Let clicks pass through unless specified */
}

/* 2. The WhatsApp Banner */
.whatsapp-banner {
    background-color: rgba(255, 255, 255, 0.95);
    backdrop-filter: blur(10px);
    border-radius: 12px;
    padding: 10px 12px;
    box-shadow: 0 4px 15px rgba(0,0,0,0.15);
    display: flex;
    gap: 10px;
    align-items: flex-start;
    transform: translateY(-100px); /* Start hidden */
    opacity: 0;
    transition: all 0.4s cubic-bezier(0.34, 1.56, 0.64, 1); /* Bouncy pop-in */
}

    .whatsapp-banner.visible {
        transform: translateY(0);
        opacity: 1;
    }

    .whatsapp-banner.clicked {
        transform: scale(0.95);
        background-color: #f0f0f0;
    }

/* Avatar in Notification */
.wa-avatar {
    width: 38px;
    height: 38px;
    border-radius: 50%;
    background-color: #ccc; /* Fallback */
    background-size: cover;
    background-position: center;
    flex-shrink: 0;
}

.wa-content {
    flex-grow: 1;
    overflow: hidden;
}

.wa-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 2px;
}

.wa-name {
    font-weight: 700;
    font-size: 0.95rem;
    color: #000;
}

.wa-time {
    font-size: 0.75rem;
    color: #888;
    font-weight: 400;
}

.wa-message {
    font-size: 0.9rem;
    color: #333;
    line-height: 1.2;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* 3. Chat UI Updates (Avatars & Timestamps) */

/* Row for Received Messages (Avatar + Bubble) */
.chat-row-received {
    display: flex;
    gap: 8px;
    align-items: flex-end; /* Align avatar to bottom of bubble */
    width: 100%;
    margin-bottom: 5px;
}

.chat-row-sent {
    display: flex;
    justify-content: flex-end;
    width: 100%;
    margin-bottom: 5px;
}

.chat-avatar-small {
    width: 30px;
    height: 30px;
    border-radius: 50%;
    background-color: #ccc;
    background-size: cover;
    flex-shrink: 0;
    margin-bottom: 2px;
}

/* Update Bubble Styles to accommodate timestamp */
.chat-bubble {
    display: flex;
    flex-direction: column;
    min-width: 120px; /* Ensure room for time */
    padding-bottom: 6px !important; /* Make room for time */
    align-items: flex-start !important; /* Align children (text) to the left */
}

.msg-content {
    margin-bottom: 4px;
    text-align: left !important;
}

.msg-time {
    font-size: 0.65rem;
    align-self: flex-end;
    opacity: 0.6;
    margin-top: 2px;
    line-height: 1;
}

.chat-bubble.received .msg-time {
    color: #555;
}

.chat-bubble.sent .msg-time {
    color: #333;
}
/* Darker because green bg */

/* In your style block */
#ambient-screen-content {
    overflow-y: auto !important; /* Enable scrolling */
    scrollbar-width: none; /* Firefox: Hide scrollbar */
    -ms-overflow-style: none; /* IE: Hide scrollbar */
}

    #ambient-screen-content::-webkit-scrollbar {
        width: 0;
        height: 0; /* Chrome/Safari: Hide scrollbar */
    }


#intro-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: #000000; /* Pure Black */
    z-index: 99999; /* Above absolutely everything */
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    transition: opacity 1.5s ease-out; /* Slow fade out */
}
.intro-content {
    max-width: 600px;
    width: 90%;
    text-align: left;
    position: relative;
    z-index: 100001;
    /* Ensure transform works */
    display: block;
    transform-origin: center center;
}

#intro-text {
    color: #ffffff;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
    font-size: 1.6rem;
    line-height: 1.6;
    font-weight: 500;
    min-height: 200px; /* Prevent layout jumps */
    white-space: pre-wrap;
}

/* Highlight specific words for impact */
.intro-highlight {
    color: #dc3545; /* Red */
    font-weight: 700;
}

#skip-intro-btn {
    background: transparent;
    border: 1px solid #333;
    color: #555;
    padding: 8px 16px;
    border-radius: 20px;
    margin-top: 50px;
    cursor: pointer;
    font-size: 0.8rem;
    opacity: 0; /* Hidden initially, fades in */
    transition: opacity 1s ease, color 0.3s ease, border-color 0.3s ease;
    margin-left: auto;
    margin-right: auto;
    display: block;
}

    #skip-intro-btn:hover {
        color: #fff;
        border-color: #fff;
    }

.cursor {
    display: inline-block;
    color: #0000FF; /* Brand Blue Cursor */
    font-weight: bold;
    animation: blink 1s step-end infinite;
    margin-left: 2px;
}

@keyframes blink {
    0%, 100% {
        opacity: 1;
    }

    50% {
        opacity: 0;
    }
}

@keyframes narrativePop {
    0% {
        opacity: 0;
        transform: translateY(10px) scale(0.98); /* Start slightly lower and smaller */
    }

    100% {
        opacity: 1;
        transform: translateY(0) scale(1); /* End in place */
    }
}

.narrative-pop {
    animation: narrativePop 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275); /* Bouncy entry */
}


/* Tunnel Vision Overlay */
.intro-vignette {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: radial-gradient(circle, transparent 40%, black 120%);
    pointer-events: none;
    z-index: 100000;
    opacity: 0.8;
    animation: stress-pulse 4s infinite ease-in-out;
}

@keyframes stress-pulse {
    0% {
        opacity: 0.7;
        transform: scale(1);
    }

    50% {
        opacity: 0.9;
        transform: scale(1.05);
    }
    /* Breath in */
    100% {
        opacity: 0.7;
        transform: scale(1);
    }
}

/* Glitch Effect Class */
.glitch-text {
    position: relative;
    display: inline-block;
    color: white;
}

/* Creates the Red/Blue split */
.glitch-active {
    animation: glitch-anim 0.3s cubic-bezier(.25, .46, .45, .94) both infinite;
    color: rgba(255,255,255,0.8);
}

    .glitch-active::before, .glitch-active::after {
        content: attr(data-text);
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        opacity: 0.8;
    }

    .glitch-active::before {
        color: #0ff;
        z-index: -1;
        transform: translate(-2px, 2px);
    }

    .glitch-active::after {
        color: #f0f;
        z-index: -2;
        transform: translate(2px, -2px);
    }

@keyframes glitch-anim {
    0% {
        transform: translate(0);
    }

    20% {
        transform: translate(-2px, 2px);
    }

    40% {
        transform: translate(-2px, -2px);
    }

    60% {
        transform: translate(2px, 2px);
    }

    80% {
        transform: translate(2px, -2px);
    }

    100% {
        transform: translate(0);
    }
}

/* The "Tremor" - Mimics shaking hands / adrenaline */
@keyframes tremor {
    0% {
        transform: translate(0, 0);
    }

    10% {
        transform: translate(-1px, 0);
    }

    20% {
        transform: translate(1px, 0);
    }

    30% {
        transform: translate(-1px, 1px);
    }

    40% {
        transform: translate(1px, -1px);
    }

    50% {
        transform: translate(-1px, 0);
    }

    60% {
        transform: translate(1px, 0);
    }

    70% {
        transform: translate(-1px, -1px);
    }

    80% {
        transform: translate(1px, 1px);
    }

    90% {
        transform: translate(-1px, 0);
    }

    100% {
        transform: translate(0, 0);
    }
}

.text-tremor {
    display: inline-block;
    animation: tremor 0.2s infinite; /* Fast, nervous shaking */
}

/* The "Dissociation" - Mimics eyes tearing up or losing focus */
.text-blur {
    filter: blur(2px);
    opacity: 0.8;
    transition: filter 2s ease, opacity 2s ease;
}

.text-focus {
    filter: blur(0px);
    opacity: 1;
    transition: filter 0.5s ease;
}

/* The "Heartbeat" Vignette - Updates the existing vignette */
@keyframes heartbeat-vignette {
    0% {
        background: radial-gradient(circle, transparent 40%, black 120%);
    }

    15% {
        background: radial-gradient(circle, transparent 35%, black 110%);
    }
    /* Pulse in */
    100% {
        background: radial-gradient(circle, transparent 40%, black 120%);
    }
}

.intro-vignette.panic {
    animation: heartbeat-vignette 1.5s infinite ease-in-out; /* Mimics elevated heart rate */
}

/* The Subliminal Flash - "Intrusive Thoughts" */
.subliminal-layer {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: -1;
    pointer-events: none;
    overflow: hidden;
}

.subliminal-word {
    position: fixed; /* Fixed relative to viewport */
    font-family: 'Courier New', monospace;
    font-weight: 900;
    color: rgba(255, 255, 255, 0.1); /* Subtle ghost */
    text-transform: uppercase;
    opacity: 0;
    pointer-events: none;
    white-space: nowrap;
    z-index: 10000; /* Behind main text (which is 100001) */
    /* Responsive Text */
    font-size: clamp(2rem, 6vw, 5rem);
}

/* Standard Flash */
.flash-active {
    animation: chaotic-flash 0.8s ease-out forwards;
}


/* The "Panic" Screen Flash (Red background tint) */
.screen-panic {
    animation: red-out 0.2s linear;
}

@keyframes chaotic-flash {
    0% {
        opacity: 0;
        transform: scale(0.8) skewX(0deg);
        filter: blur(10px);
    }
    /* Pop in fast */
    20% {
        opacity: 1;
        transform: scale(1) skewX(-10deg);
        filter: blur(0px);
    }
    /* Hang and distort */
    60% {
        opacity: 0.8;
        transform: scale(1.1) skewX(10deg);
        filter: blur(2px);
    }
    /* Fade out */
    100% {
        opacity: 0;
        transform: scale(1.2) skewX(0deg);
        filter: blur(10px);
    }
}

@keyframes red-out {
    0% {
        background-color: #000000;
    }

    50% {
        background-color: #5a0000;
    }
    /* Deep, Solid Blood Red */
    100% {
        background-color: #000000;
    }
}

@keyframes flash-thought {
    0% {
        opacity: 0;
        transform: scale(1);
    }

    50% {
        opacity: 0.2;
        transform: scale(1.1);
        filter: blur(0px);
        color: red;
    }
    /* Flash Red briefly */
    100% {
        opacity: 0;
        transform: scale(1.2);
    }
}

.cursor-hidden {
    cursor: none !important;
}


/* 2. THE HEARTBEAT (Pulsing the view) */
@keyframes heartbeat {
    0% {
        transform: scale(1);
    }

    5% {
        transform: scale(1.02);
    }
    /* Thump */
    10% {
        transform: scale(1);
    }

    15% {
        transform: scale(1.02);
    }
    /* Thump */
    50% {
        transform: scale(1);
    }

    100% {
        transform: scale(1);
    }
}

/* Class Modifiers */
.intro-content.pulse-fast {
    animation: heartbeat 0.5s infinite ease-in-out !important; /* 120 BPM Panic */
}

.intro-content.pulse-slow {
    animation: heartbeat 1.5s infinite ease-in-out !important; /* 40 BPM Dread */
}

.intro-content.flatline {
    animation: none !important;
    transform: scale(1) !important;
}

.pulse-fast {
    animation: heartbeat 0.5s infinite;
}
/* 120 BPM - Panic */
.pulse-slow {
    animation: heartbeat 1.5s infinite;
}
/* 40 BPM - Dying */
.flatline {
    transform: scale(1) !important;
    animation: none !important;
}
/* 0 BPM - Death */

/* 3. RETINAL BURN (The Flash) */
.retinal-burn {
    color: #fff !important;
    text-shadow: 0 0 20px #fff, 0 0 40px #fff !important; /* Blinding glow */
    transform: scale(1.5);
    filter: contrast(200%);
}

/* =================================================================== */
/* === TACTICAL MODE (MILITARY / HARDWARE THEME) ===================== */
/* =================================================================== */

/* 1. GLOBAL OVERRIDES (The "Dark Room" Vibe) */
body.tactical-mode {
    background-color: #0b0c10 !important;
    background-image: linear-gradient(rgba(102, 252, 241, 0.05) 1px, transparent 1px), linear-gradient(90deg, rgba(102, 252, 241, 0.05) 1px, transparent 1px) !important;
    background-size: 40px 40px !important;
    color: #c5c6c7 !important;
    font-family: 'Roboto Mono', 'Courier New', monospace !important;
}

    /* 2. RESET THE SAAS CONTAINER */
    /* Remove the soft glass effect/borders from the standard overlay */
    body.tactical-mode .landing-content-overlay {
        /* Make it solid and dark, not glassy */
        background-color: #050608 !important;
        /* Hard, thin border */
        border: 1px solid #45a29e !important;
        /* No rounded corners */
        border-radius: 0 !important;
        /* Remove soft shadow, add a sharp "glow" only on edges */
        box-shadow: 0 0 0 1px rgba(69, 162, 158, 0.2) !important;
        /* Keep your corner brackets! They are great. */
    }

    /* 3. TYPOGRAPHY OVERRIDES (The "Terminal" Look) */
    body.tactical-mode .landing-title-problem {
        /* Shrink and dim the title */
        font-size: 1.8rem !important;
        color: #45a29e !important; /* Teal, not White */
        text-shadow: none !important;
        font-weight: 700 !important;
        letter-spacing: 1px !important;
        text-transform: uppercase !important;
        margin-bottom: 0.5rem !important;
    }

    body.tactical-mode .landing-title-solution {
        /* Make subtext very technical */
        font-size: 0.75rem !important;
        color: #6c757d !important; /* Dark Grey */
        font-family: 'Roboto Mono', monospace !important;
        letter-spacing: 0.5px !important;
    }

    /* Hide the blue "Works Offline" highlight span style in tactical mode */
    body.tactical-mode #landing-highlight {
        color: #66fcf1 !important;
        font-weight: normal !important;
    }

    body.tactical-mode .landing-input {
        background-color: transparent !important;
        border: none !important;
        border-bottom: 3px solid #66fcf1 !important;
        border-radius: 0 !important;
        color: #ffffff !important;
        font-weight: 700 !important;
        font-family: 'Courier New', monospace !important;
        text-transform: uppercase !important;
        padding: 15px 0 15px 40px !important; /* Space for the > prompt */
        padding-left: 25px !important;
        box-shadow: none !important;
    }

        /* 2. Focus State - Brightens when typing */
        body.tactical-mode .landing-input:focus {
            background-color: rgba(0, 0, 0, 0.6) !important; /* Slightly darker bg */
            border-bottom: 3px solid #66fcf1 !important;
            /* Add a "Floor Glow" effect */
            box-shadow: 0 10px 20px -10px rgba(102, 252, 241, 0.2) !important;
            outline: none !important;
        }

        /* 3. Placeholder Text - Dimmed Tactical Teal */
        body.tactical-mode .landing-input::placeholder {
            color: #45a29e !important; /* The accent teal color */
            opacity: 1 !important; /* Force full visibility */
            font-weight: 500 !important;
            text-shadow: none !important;
            letter-spacing: 1px;
        }


    /* 4. Hide the Standard Search Icon (We use the ">" prompt instead) */
    body.tactical-mode .search-icon {
        display: none !important;
    }

    /* 5. Create the ">" Command Prompt Symbol */
    /* This attaches to the container holding the input */
    body.tactical-mode .placeholder-container::before {
        content: ">";
        color: #66fcf1;
        font-weight: 900;
        font-size: 1.4rem; /* Larger */
        left: 0;
        top: 45%; /* Fine-tune vertical align */
        transform: translateY(-50%);
        text-shadow: 0 0 5px #66fcf1; /* Glow */
    }

    body.tactical-mode .placeholder-container,
    body.tactical-mode .autocomplete-container {
        background-color: transparent !important; /* Kill the white/grey background */
        box-shadow: none !important; /* Kill the drop shadow */
        border: none !important; /* Kill the surrounding border */
        border-radius: 0 !important; /* Remove rounded corners */
    }

@keyframes blink-prompt {
    50% {
        opacity: 0;
    }
}

    /* 4. INPUT FIELD (The "Command Line") */
    /*body.tactical-mode .landing-input {
        background-color: transparent !important;
        border: none !important;
        border-bottom: 2px solid #45a29e !important;*/ /* Only bottom line */
        /*color: #ffffff !important;
        font-family: 'Courier New', monospace !important;
        font-size: 1.1rem !important;
        padding: 1rem 0 !important;*/ /* Remove side padding */
        /*padding-left: 2rem !important;*/ /* Room for the prompt character */
        /*text-transform: uppercase !important;
        box-shadow: none !important;
    }*/

/*    body.tactical-mode .placeholder-container::before {
        content: ">";
        position: absolute;
        left: 15px;
        top: 50%;
        transform: translateY(-50%);
        color: #66fcf1;
        font-weight: bold;
        font-size: 1.2rem;
        z-index: 10;
    }*/

    /*body.tactical-mode .landing-input::placeholder {
        color: #45a29e !important;
        opacity: 0.6;
        letter-spacing: 1px;
    }

    body.tactical-mode .landing-input:focus {
        background-color: rgba(0, 0, 0, 0.8) !important;
        border-bottom: 2px solid #66fcf1 !important;*/ /* Brightens on focus */
        /*box-shadow: 0 10px 20px -10px rgba(102, 252, 241, 0.2) !important;
    }*/

    /* Hide the search icon in tactical mode (it looks too "app-like") */
    body.tactical-mode .search-icon {
        display: none !important;
    }
    /* Remove the left padding reserved for the icon */
    /*body.tactical-mode .landing-input {
        padding-left: 1.2rem !important;
    }*/

    /* 5. BUTTONS (The "Physical Switch") */
    body.tactical-mode .landing-button-container {
        justify-content: stretch !important; /* Full width button */
    }

body.tactical-mode .landing-cta-primary {
    /* Brighter Teal/Cyan Background */
    background-color: #45a29e !important;
    /* PITCH BLACK TEXT - Maximum Contrast */
    color: #000000 !important;
    font-weight: 900 !important; /* Extra Bold */
    letter-spacing: 2px !important;
    border: 2px solid #66fcf1 !important; /* Glowing Edge */
    /* Keep the stripes, they are good */
    background-image: linear-gradient(45deg, transparent 25%, rgba(0, 0, 0, 0.1) 25%, rgba(0, 0, 0, 0.1) 50%, transparent 50%, transparent 75%, rgba(0, 0, 0, 0.1) 75%, rgba(0, 0, 0, 0.1)) !important;
}

    body.tactical-mode .landing-cta-primary:hover {
        background-color: #66fcf1 !important; /* Even brighter on hover */
        box-shadow: 0 0 20px rgba(102, 252, 241, 0.6) !important;
    }

@keyframes stripe-scroll {
    100% {
        background-position: 40px 0;
    }
}

    /* Hide the secondary button in tactical mode */
    body.tactical-mode #how-it-works-button {
        display: none !important;
    }

/* 6. HUD DECORATIONS (The Corner Brackets) */
/* These make it look like a viewfinder or military screen */

/* Note: You need to add these divs in your HTML inside the .landing-content-overlay 
   if you want them to appear. If you don't add the divs, this CSS does nothing. */

.hud-corner {
    display: none; /* Hidden by default */
}

body.tactical-mode .hud-corner {
    display: block;
    position: absolute;
    width: 20px;
    height: 20px;
    border: 3px solid #66fcf1;
    pointer-events: none;
    opacity: 0.8;
}

body.tactical-mode .top-left {
    top: -2px;
    left: -2px;
    border-right: none;
    border-bottom: none;
}

body.tactical-mode .top-right {
    top: -2px;
    right: -2px;
    border-left: none;
    border-bottom: none;
}

body.tactical-mode .bottom-left {
    bottom: -2px;
    left: -2px;
    border-right: none;
    border-top: none;
}

body.tactical-mode .bottom-right {
    bottom: -2px;
    right: -2px;
    border-left: none;
    border-top: none;
}

/* 7. STATUS BAR ANIMATION */
@keyframes blink-status {
    0%, 100% {
        opacity: 1;
    }

    50% {
        opacity: 0.2;
    }
}

body.tactical-mode #tactical-status-bar span:first-child {
    animation: blink-status 2s infinite;
    color: #66fcf1;
    text-shadow: 0 0 5px #66fcf1;
}

/* 8. HIDE FOOTER/HEADER ELEMENTS THAT BREAK IMMERSION */
body.tactical-mode .stats-footer {
    display: none !important;
}

body.tactical-mode .trusted-sources-section {
    display: none !important; /* Hide logos for the "Hardware" look */
}

body.tactical-mode .animated-placeholder {
    display: none !important;
    visibility: hidden !important;
    opacity: 0 !important;
}

/* Also ensure the search icon is definitely gone */
body.tactical-mode .search-icon {
    display: none !important;
}

/* Only show in Tactical Mode */
body.tactical-mode #tactical-hud {
    display: block !important;
    z-index: 10000 !important;
}

.tactical-hud {
    width: 100%;
    background-color: #000;
    background-image: linear-gradient(rgba(18, 16, 16, 0) 50%, rgba(0, 0, 0, 0.25) 50%), linear-gradient(90deg, rgba(255, 0, 0, 0.06), rgba(0, 255, 0, 0.02), rgba(0, 0, 255, 0.06));
    border: 1px solid #45a29e;
    background-size: 100% 2px, 3px 100%;
    border-left: 4px solid #45a29e; /* Accent bar */
    border-bottom: 2px solid #45a29e;
    padding: 15px 20px;
    margin-bottom: 2rem;
    font-family: 'Roboto Mono', 'Courier New', monospace;
    box-shadow: 0 0 15px rgba(69, 162, 158, 0.1);
}

.hud-row {
    display: flex;
    gap: 15px;
    margin-bottom: 5px;
    font-size: 0.85rem;
}

.tactical-hud .hud-label {
    color: #45a29e;
    font-size: 0.8rem;
    font-weight: 700;
    letter-spacing: 1px;
    width: 80px;
    opacity: 0.8;
}

#hud-action-text {
    font-size: 1.4rem;
    line-height: 1;
    color: #ffffff;
    text-shadow: 0 0 10px rgba(102, 252, 241, 0.8);
    letter-spacing: 1px;
}

#hud-status-text {
    font-size: 1rem;
    color: #66fcf1;
}

#hud-step-counter {
    position: absolute;
    right: 20px;
    top: 50%;
    transform: translateY(-50%);
    color: #45a29e;
    font-size: 2rem;
    font-weight: 900;
    opacity: 0.2;
    font-family: 'Arial Black', sans-serif;
}

/* 5. New: Progress Indicator Style */
.hud-progress {
    position: absolute;
    right: 20px;
    top: 50%;
    transform: translateY(-50%);
    color: #45a29e;
    font-size: 2rem;
    font-weight: 900;
    opacity: 0.2; /* Watermark style */
    font-family: 'Arial Black', sans-serif;
    letter-spacing: -2px;
}

.hud-row:last-child { margin-bottom: 0; }

.hud-label {
    color: #45a29e;
    font-size: 0.8rem; /* Keep labels small technical data */
    font-weight: 700;
    letter-spacing: 1px;
    width: 80px; /* Fixed width alignment */
    display: inline-block;
    opacity: 0.8;
}
.hud-value {
    color: #66fcf1; /* Bright Cyan */
    font-weight: bold;
    text-transform: uppercase;
}

.blink {
    animation: blink-cursor 1s step-end infinite;
}

@keyframes blink-cursor {
    50% { opacity: 0; }
}

.tactical-hud .hud-row {
    display: flex;
    gap: 15px;
    margin-bottom: 5px;
    font-size: 0.85rem;
}

/* 1. Position the HUD directly under the fixed header */
body.tactical-mode #tactical-hud {
    display: block !important;
    position: relative !important; /* No longer fixed */
    width: 100% !important; /* Take full width of the header */
    margin-top: 10px; /* Space below the logo/buttons */
    /* Visuals */
    background-color: rgba(0, 0, 0, 0.5) !important;
    border-top: 1px solid #45a29e;
    border-bottom: 2px solid #45a29e;
    padding: 10px 15px;
    box-shadow: none !important;
    z-index: 1; /* Sits naturally within the header */
}
/* 2. Adjust content padding so it doesn't hide behind the HUD */
/* 3. Push page content down so it doesn't hide behind the HUD */
body.tactical-mode main {
    /* 80px (Header) + 70px (HUD) + 20px (Space) */
/*    padding-top: 100px !important;*/
}

/* 3. CRITICAL: "Dark Mode" the Header itself in Tactical Mode */
body.tactical-mode .header {
    display: flex !important;
    flex-wrap: wrap !important; /* CRITICAL: Allows HUD to drop to a new line */
    height: auto !important;
    padding: 0.75rem 1rem !important; /* Padding for the top row */
    padding-bottom: 0 !important;
    background-color: #0b0c10 !important;
    border-bottom: none !important;
    align-content: flex-start;
    z-index: 10001 !important; /* Must be above loading screens */
}

/* Invert logo text color in header */
    body.tactical-mode .header .logo-title,
    body.tactical-mode .header .main-title,
    body.tactical-mode .header .header-controls-right button {
        color: #66fcf1 !important;
    }

    body.tactical-mode .header .header-controls-right button {
        border-color: #45a29e !important;
    }


/* Make header buttons look tactical */
body.tactical-mode .header-button,
body.tactical-mode #header-why-button,
body.tactical-mode #header-download-offline-button {
    color: #66fcf1 !important;
    border-color: #45a29e !important;
}

body.tactical-mode .filter-panel,
body.tactical-mode .filter-backdrop {
    z-index: 10005 !important;
}

body.tactical-mode .filter-backdrop {
    z-index: 10005 !important;
}

/* 2. The Panel (The Content) */
/* Must be the HIGHEST layer so buttons are clickable */
body.tactical-mode .filter-panel {
    z-index: 10006 !important;
}

/* The Alert Animation */
.tactical-alert {
    animation: text-pulse 1s infinite alternate; /* Smooth pulsing */
    color: #fff !important; /* Flash White */
    text-shadow: 0 0 10px #66fcf1; /* Glow effect */
}


@keyframes text-pulse {
    0% {
        opacity: 1;
        color: #66fcf1;
        text-shadow: none;
    }

    100% {
        opacity: 1;
        color: #ffffff;
        text-shadow: 0 0 15px #66fcf1;
    }
}

/* 1. The Full-Screen Overlay */
.tactical-loading-overlay {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: #0b0c10; /* Match the tactical body background */
    /* Add the grid pattern as well for consistency */
    background-image: linear-gradient(rgba(102, 252, 241, 0.05) 1px, transparent 1px), linear-gradient(90deg, rgba(102, 252, 241, 0.05) 1px, transparent 1px);
    background-size: 40px 40px;
    z-index: 9999; /* High z-index to cover content */
    /* Center the content */
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

/* 2. The "Boot Grid" Animation */
.tactical-loader-grid {
    display: grid;
    grid-template-columns: repeat(2, 50px);
    grid-template-rows: repeat(2, 50px);
    gap: 5px;
}

    .tactical-loader-grid div {
        background-color: #45a29e; /* Tactical Teal */
        opacity: 0;
        animation: boot-light 1.6s infinite ease-in-out;
    }
        /* Stagger the animation for each square */
        .tactical-loader-grid div:nth-child(1) {
            animation-delay: 0s;
        }

        .tactical-loader-grid div:nth-child(2) {
            animation-delay: 0.2s;
        }

        .tactical-loader-grid div:nth-child(4) {
            animation-delay: 0.4s;
        }

        .tactical-loader-grid div:nth-child(3) {
            animation-delay: 0.6s;
        }

@keyframes boot-light {
    0%, 100% {
        opacity: 0.1;
        transform: scale(0.9);
    }

    50% {
        opacity: 1;
        transform: scale(1);
        box-shadow: 0 0 15px #66fcf1;
    }
}

.tactical-ring-spinner {
    width: 60px;
    height: 60px;
    border-radius: 50%;
    /* The Spinner Ring */
    /* A conic-gradient creates the "Wipe" effect */
    background: conic-gradient( #66fcf1, /* Bright Cyan */
    #45a29e, /* Tactical Teal */
    transparent 30% /* Make the rest of the circle transparent */
    );
    /* This creates the "hollow" center of the ring */
    -webkit-mask: radial-gradient(farthest-side, transparent 65%, black 70%);
    mask: radial-gradient(farthest-side, transparent 65%, black 70%);
    /* THE ANIMATION: Just rotate it forever */
    animation: tactical-spin 1s infinite linear;
}

@keyframes tactical-spin {
    to {
        transform: rotate(1turn);
    }
}

/* 3. The Loading Text */
.tactical-loading-text {
    margin-top: 2rem;
    font-family: 'Roboto Mono', 'Courier New', monospace;
    color: #66fcf1; /* Bright Cyan */
    font-size: 1rem;
    font-weight: bold;
    text-transform: uppercase;
    letter-spacing: 1px;
    text-shadow: 0 0 5px rgba(102, 252, 241, 0.5);
}







body.tactical-mode .rapidres-containeralternatives {
    background-color: #0b0c10 !important; /* Match the dark body */
}

/* 2. Resource Item Card */
body.tactical-mode .operation-resource-item {
    background-color: #1f2833 !important; /* Dark panel color */
    border: 1px solid #45a29e !important; /* Teal border */
    border-radius: 0 !important;
}

/* 3. Resource Name & Text */
body.tactical-mode .operation-resource-name {
    color: #ffffff !important;
    font-family: 'Roboto Mono', monospace !important;
}

body.tactical-mode .resourceprefixspan { /* "RESOURCE" label */
    background-color: #45a29e !important;
    color: #0b0c10 !important;
    font-weight: 800 !important;
    border-radius: 2px !important;
}

/* 4. The "Instant Alternatives" Button */
body.tactical-mode .get-alts-button,
body.tactical-mode .landing-cta-button.landing-cta-primary {
    background-color: #45a29e !important;
    color: #0b0c10 !important;
    font-family: 'Roboto Mono', monospace !important;
    font-weight: 900 !important;
    text-transform: uppercase !important;
    letter-spacing: 1px !important;
    border-radius: 0 !important;
    border: none !important;
}

    body.tactical-mode .get-alts-button:hover,
    body.tactical-mode .landing-cta-button.landing-cta-primary:hover {
        background-color: #66fcf1 !important; /* Bright cyan on hover */
        box-shadow: 0 0 10px rgba(102, 252, 241, 0.5) !important;
    }

/* 5. Center Text (What do you need for...) */
body.tactical-mode .resourcesrequiredcontainer p {
    color: #c5c6c7 !important;
    font-family: 'Courier New', monospace !important;
    text-transform: uppercase;
    font-size: 1.1rem;
}

/* 6. Citations & Category Labels */
body.tactical-mode .citationsprefix,
body.tactical-mode .categoryheaderprefixspan {
    background-color: transparent !important;
    color: #45a29e !important;
    border: 1px solid #45a29e;
}

body.tactical-mode .citation-link,
body.tactical-mode .citation-more-btn {
    color: #66fcf1 !important;
}

/* 1. The Backdrop (Darker, less blur) */
body.tactical-mode .filter-backdrop {
    background-color: rgba(0, 0, 0, 0.8) !important;
    backdrop-filter: none !important;
}

/* 2. The Panel (Main Container) */
body.tactical-mode .filter-panel {
    background-color: #0b0c10 !important; /* Match body */
    border-left: 2px solid #45a29e !important;
    box-shadow: -10px 0 30px rgba(0,0,0,0.5) !important;
}

/* 3. The Header */
body.tactical-mode .filter-panel-header {
    background-color: #1f2833 !important;
    border-bottom: 1px solid #45a29e !important;
}

    body.tactical-mode .filter-panel-header h4 {
        color: #66fcf1 !important; /* Bright Cyan */
        font-family: 'Roboto Mono', monospace !important;
        text-transform: uppercase;
        font-weight: 700;
    }
    /* Style the 'X' close button */
    body.tactical-mode .filter-panel-header .btn-close {
        filter: brightness(0) invert(1); /* Invert the color to white */
        opacity: 0.8;
    }

/* 4. The Body (Content Area) */
body.tactical-mode .filter-panel-body {
    font-family: 'Roboto Mono', monospace !important;
    gap: 2rem !important; /* More vertical space between filter groups */
}

/* 5. "Filter By:" Label */
body.tactical-mode .filter-bar-label {
    color: #66fcf1 !important;
    font-size: 1rem !important;
    font-weight: 700 !important;
}

body.tactical-mode .filter-help-button {
    color: #45a29e !important;
}

    body.tactical-mode .filter-help-button:hover {
        color: #66fcf1 !important;
    }

/* 6. The Button Groups (The Core of the Change) */
body.tactical-mode .filter-panel-body .btn-group {
    width: 100%;
}

body.tactical-mode .filter-panel-body .btn {
    border-radius: 0 !important; /* NO ROUNDED CORNERS */
    border: 1px solid #45a29e !important;
    font-size: 0.9rem !important;
    font-weight: 700 !important;
    padding: 0.8rem 0.5rem !important;
    flex: 1 1 0; /* Ensure they share space equally */
}

    /* INACTIVE BUTTON STYLE */
    body.tactical-mode .filter-panel-body .btn.btn-outline-secondary {
        background-color: transparent !important;
        color: #45a29e !important; /* Dull Teal */
    }

        body.tactical-mode .filter-panel-body .btn.btn-outline-secondary:hover {
            background-color: rgba(69, 162, 158, 0.2) !important;
            color: #66fcf1 !important;
        }

    /* ACTIVE BUTTON STYLE */
    body.tactical-mode .filter-panel-body .btn.btn-primary {
        background-color: #45a29e !important;
        color: #0b0c10 !important; /* Dark text on Teal bg */
        box-shadow: 0 0 15px rgba(102, 252, 241, 0.4);
    }


body.tactical-mode .rapidres-error-dialog-backdrop {
    z-index: 10007 !important;
}

/* 2. STYLE THE MODAL */
body.tactical-mode .rapidres-error-dialog {
    background-color: #1f2833 !important; /* Dark Panel Color */
    color: #c5c6c7 !important; /* Light Grey Text */
    border: 2px solid #45a29e !important; /* Teal Border */
    border-radius: 0 !important; /* Sharp Edges */
    box-shadow: 0 0 20px rgba(102, 252, 241, 0.2) !important;
    font-family: 'Roboto Mono', 'Courier New', monospace !important;
}

/* 3. STYLE THE TEXT & BUTTON */
body.tactical-mode .rapidres-error-title {
    color: #66fcf1 !important; /* Bright Cyan Title */
    text-transform: uppercase;
    font-weight: 700;
}

body.tactical-mode .rapidres-error-message {
    color: #c5c6c7 !important;
    font-size: 0.9rem;
    line-height: 1.6;
}

    body.tactical-mode .rapidres-error-message ul li strong {
        color: #66fcf1; /* Highlight keywords in Cyan */
    }

/* Style the "OK" button to match the tactical theme */
body.tactical-mode .rapidres-error-button {
    background-color: #45a29e !important;
    color: #0b0c10 !important;
    border: none !important;
    border-radius: 0 !important;
    font-weight: 900 !important;
    text-transform: uppercase !important;
    letter-spacing: 1px !important;
    width: 100%;
}

    body.tactical-mode .rapidres-error-button:hover {
        background-color: #66fcf1 !important;
    }




/* =================================================================== */
/* === TACTICAL MODE: ALTERNATIVES LIST & TABLE THEME ================ */
/* =================================================================== */

/* 1. Main Backgrounds */
body.tactical-mode .operation-results-container,
body.tactical-mode .alternatives-list-scrollable {
    background-color: #0b0c10 !important; /* Deep Black Background */
}

/* 2. The "Back to Full List" Button Area */
body.tactical-mode .resourcesrequiredcontainer div[style*="background-color: #f8f9fa"] {
    background-color: #1f2833 !important; /* Dark Grey/Blue Panel */
    border: 1px solid #45a29e !important;
    border-radius: 0 !important; /* Sharp corners */
}

/* 3. The Table Header (Alternative, Assessment, etc.) */
body.tactical-mode .responsive-table-header {
    background-color: #1f2833 !important; /* Dark Header */
    color: #45a29e !important; /* Teal Text */
    border-bottom: 2px solid #45a29e !important;
    font-family: 'Roboto Mono', monospace !important;
    text-transform: uppercase !important;
    letter-spacing: 1px !important;
}

/* 4. The Alternative Rows (The Cards) */
body.tactical-mode .alt-responsive-row {
    background-color: #000000 !important; /* Pure Black Card */
    border-bottom: 1px solid #333 !important;
    border-left: 4px solid #333 !important; /* Default border */
    color: #c5c6c7 !important; /* Light Grey Text */
    border-radius: 0 !important;
    font-family: 'Courier New', monospace !important;
}

    /* Highlight "Preferred" rows with the Tactical Cyan color */
    body.tactical-mode .alt-responsive-row.is-preferred-alternative {
        background-color: rgba(69, 162, 158, 0.1) !important; /* Very subtle teal tint */
        border-left: 4px solid #66fcf1 !important; /* Bright Cyan Indicator */
    }

/* 5. Typography inside rows */
body.tactical-mode .alt-name-cell span {
    color: #ffffff !important; /* White Name */
    font-weight: 700 !important;
    font-size: 1rem !important;
}

/* 6. The "Pills" (Assessment, Needs, Cautions) - De-pill them */
body.tactical-mode .alt-indicator,
body.tactical-mode .pill-style-container {
    background-color: transparent !important;
    border: 1px solid #45a29e !important; /* Wireframe style */
    color: #66fcf1 !important; /* Cyan Text */
    border-radius: 0 !important; /* Square */
    font-family: 'Roboto Mono', monospace !important;
    font-size: 0.7rem !important;
    text-transform: uppercase !important;
}

/* Specific styling for the 'Needs' and 'Cautions' text to be readable */
body.tactical-mode .alt-cell span {
    font-family: 'Courier New', monospace !important;
}

    body.tactical-mode .alt-cell span[style*="color:#dc3545"] {
        color: #ff6b6b !important; /* Make Red warning text brighter/readable on black */
    }

/* 7. The Q&A Input Box */
body.tactical-mode .qna-input-group-inline {
    background-color: #000 !important;
    border: 1px solid #555 !important;
    border-radius: 0 !important;
}

body.tactical-mode .qna-input {
    color: #fff !important;
    font-family: 'Courier New', monospace !important;
}

body.tactical-mode .qna-send-button {
    background-color: #45a29e !important;
    border-radius: 0 !important;
    color: #000 !important;
}

/* 8. The Action Buttons (How / Sourcing) */
body.tactical-mode .alt-actions-cell .landing-cta-button {
    /* Remove the solid block color */
    background-color: transparent !important;
    /* Add the Tactical Border */
    border: 1px solid #45a29e !important;
    /* Text Color */
    color: #45a29e !important; /* Muted Teal (Idle state) */
    /* Typography */
    font-family: 'Roboto Mono', monospace !important;
    font-size: 0.75rem !important;
    font-weight: 700 !important;
    letter-spacing: 1px !important;
    /* Layout */
    flex-grow: 1 !important; /* Force them to share width equally */
    width: 50% !important; /* Split the cell evenly */
    padding: 8px 4px !important; /* Compact padding */
    margin: 0 !important;
    border-radius: 0 !important; /* Sharp corners */
    justify-content: center;
    box-shadow: none !important;
}

    body.tactical-mode .alt-actions-cell .landing-cta-button:hover {
        /* Light up when touched */
        background-color: #66fcf1 !important; /* Bright Cyan */
        color: #000000 !important; /* Black Text */
        border-color: #66fcf1 !important;
        box-shadow: 0 0 15px rgba(102, 252, 241, 0.4) !important;
        transform: translateY(0) !important; /* Stop the movement */
    }

/* 9. Citations Links */
body.tactical-mode .citation-link,
body.tactical-mode .citation-more-btn {
    color: #45a29e !important;
    text-decoration: none !important;
}

    body.tactical-mode .citation-link:hover {
        color: #66fcf1 !important;
        text-decoration: underline !important;
    }

/* 10. Header Controls (Compare / Hide Buttons) */
body.tactical-mode .landing-cta-gray {
    background-color: transparent !important;
    border: 1px solid #66fcf1 !important;
    color: #66fcf1 !important;
    border-radius: 0 !important;
    font-family: 'Roboto Mono', monospace !important;
}

    body.tactical-mode .landing-cta-gray:hover {
        background-color: rgba(102, 252, 241, 0.1) !important;
    }




/* 1. The Container that holds the list (This was likely the white box) */
body.tactical-mode .operation-resource-details {
    background-color: #0b0c10 !important; /* Match the dark background */
    border-top: 1px solid #45a29e !important; /* Teal separator */
    color: #c5c6c7 !important;
}

/* 2. The Desktop Table Header (Visible only on wide screens) */
body.tactical-mode .responsive-table-header {
    background-color: #1f2833 !important; /* Dark Panel Grey */
    color: #45a29e !important; /* Teal Text */
    border-bottom: 2px solid #45a29e !important;
}

/* 3. The Rows themselves (Reinforcing the dark background) */
body.tactical-mode .alt-responsive-row {
    background-color: #000000 !important;
    border: 1px solid #333 !important; /* Subtle border */
    border-left: 4px solid #333 !important; /* Default indicator */
}

/* 4. Ensure individual cells don't hold onto white backgrounds */
body.tactical-mode .alt-cell {
    background-color: transparent !important;
    color: #c5c6c7 !important;
    border-bottom: 1px solid #333 !important;
}

/* 1. Base Pill Style (Keep square & monospace) */
body.tactical-mode .alt-indicator {
    border-radius: 0 !important; /* Square edges */
    font-family: 'Roboto Mono', monospace !important;
    font-weight: 700 !important;
    text-transform: uppercase !important;
    border: 1px solid transparent !important; /* Remove generic teal border */
    color: #000 !important; /* Black text for high contrast on colored bg */
}

/* 2. Success / Good (Green) */
body.tactical-mode .indicator-green {
    background-color: #25D366 !important; /* Bright Cyan/Green */
    box-shadow: 0 0 5px rgba(102, 252, 241, 0.4); /* Glow */
}

/* 3. Warning / Caution (Orange/Yellow) */
body.tactical-mode .indicator-orange,
body.tactical-mode .indicator-yellow {
    background-color: #ffc107 !important; /* Standard Warning Yellow */
    box-shadow: 0 0 5px rgba(255, 193, 7, 0.4);
}

/* 4. Danger / Stop (Red) */
body.tactical-mode .indicator-red,
body.tactical-mode .indicator-darkred {
    background-color: #dc3545 !important; /* Alert Red */
    color: #fff !important; /* White text on red for readability */
    box-shadow: 0 0 5px rgba(220, 53, 69, 0.4);
}

/* 5. Neutral / Unknown (Grey) */
body.tactical-mode .indicator-grey {
    background-color: #6c757d !important;
    color: #fff !important;
    border: 1px solid #6c757d !important;
}

/* =================================================================== */
/* === TACTICAL MODE: HELP MODAL THEME =============================== */
/* =================================================================== */

/* 1. Backdrop (Consistent dark overlay) */
body.tactical-mode .help-modal-backdrop {
    background-color: rgba(0, 0, 0, 0.85) !important;
    backdrop-filter: blur(2px) !important;
    z-index: 10010 !important; /* Ensure it's above everything */
}

/* 2. Modal Content Box */
body.tactical-mode .help-modal-content {
    background-color: #0b0c10 !important; /* Dark Background */
    border: 2px solid #45a29e !important; /* Teal Border */
    border-radius: 0 !important; /* Sharp Corners */
    box-shadow: 0 0 30px rgba(102, 252, 241, 0.15) !important; /* Cyan Glow */
    color: #c5c6c7 !important; /* Light Grey Text */
    font-family: 'Roboto Mono', monospace !important;
}

/* 3. Header */
body.tactical-mode .help-modal-header {
    background-color: #1f2833 !important; /* Slightly lighter panel */
    border-bottom: 1px solid #45a29e !important;
    padding: 1.5rem !important;
}

    body.tactical-mode .help-modal-header h3 {
        color: #66fcf1 !important; /* Bright Cyan Title */
        text-transform: uppercase !important;
        font-weight: 700 !important;
        letter-spacing: 1px !important;
        font-size: 1.1rem !important;
    }

/* 4. Body Content */
body.tactical-mode .help-modal-body {
    padding: 1.5rem !important;
}

    /* Strong/Bold text highlights */
    body.tactical-mode .help-modal-body strong {
        color: #ffffff !important;
        font-weight: 900 !important;
    }

    /* Section Headings (h6) */
    body.tactical-mode .help-modal-body h6 {
        color: #45a29e !important; /* Teal */
        font-size: 0.9rem !important;
        border-bottom: 1px dashed #45a29e !important;
        padding-bottom: 5px !important;
        margin-top: 1.5rem !important;
    }

    /* Separator Lines */
    body.tactical-mode .help-modal-body hr {
        border-color: #333 !important;
    }

    /* List Items */
    body.tactical-mode .help-modal-body .scale-list li {
        color: #c5c6c7 !important;
        border-left: 2px solid transparent;
        padding-left: 10px !important;
    }

        /* Highlight the "Current" item in the list */
        body.tactical-mode .help-modal-body .scale-list li strong {
            color: #66fcf1 !important; /* Cyan */
        }

/* 5. Footer & Close Button */
body.tactical-mode .help-modal-footer {
    background-color: #0b0c10 !important; /* Match body */
    border-top: 1px solid #45a29e !important;
    padding: 1.5rem !important;
    border-radius: 0 !important;
}

/* The Big Red Close Button -> Tactical Style */
body.tactical-mode .help-modal-close-button {
    background-color: transparent !important;
    border: 2px solid #45a29e !important;
    color: #45a29e !important;
    border-radius: 0 !important; /* Square button */
    width: auto !important; /* Allow text width */
    height: auto !important;
    padding: 10px 30px !important;
    font-size: 1rem !important;
    font-weight: 700 !important;
    text-transform: uppercase !important;
    transition: all 0.2s ease !important;
}

    /* Add text content to the button via CSS for a clearer action */
    body.tactical-mode .help-modal-close-button::before {
        content: "DISMISS";
        font-family: 'Roboto Mono', monospace !important;
        margin-right: 0;
    }

/* Hide the 'X' inside if you prefer the text-only look, or keep it */
body.tactical-mode .help-modal-close-button {
    font-size: 0 !important; /* Hide the HTML 'x' */
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
}

    body.tactical-mode .help-modal-close-button::before {
        font-size: 1rem !important; /* Show the pseudo-element text */
    }

    /* Hover State */
    body.tactical-mode .help-modal-close-button:hover {
        background-color: #45a29e !important;
        color: #0b0c10 !important;
        box-shadow: 0 0 15px rgba(102, 252, 241, 0.4) !important;
    }



/* =================================================================== */
/* === TACTICAL MODE: CHAT MODAL THEME =============================== */
/* =================================================================== */

/* 1. Backdrop (Consistent dark overlay) */
body.tactical-mode .help-modal-backdrop {
    /* Reuse the existing help modal backdrop style */
    z-index: 10020 !important; /* Ensure it's above everything else */
}

/* 2. Chat Modal Content Box */
body.tactical-mode .qna-modal-content {
    background-color: #0b0c10 !important; /* Dark Background */
    border: 2px solid #45a29e !important; /* Teal Border */
    border-radius: 0 !important; /* Sharp Corners */
    box-shadow: 0 0 30px rgba(102, 252, 241, 0.15) !important; /* Cyan Glow */
    color: #c5c6c7 !important; /* Light Grey Text */
    font-family: 'Roboto Mono', monospace !important;
}

/* 3. Header */
body.tactical-mode .help-modal-header {
    background-color: #1f2833 !important;
    border-bottom: 1px solid #45a29e !important;
}

    body.tactical-mode .help-modal-header h3 {
        color: #66fcf1 !important; /* Cyan Title */
        text-transform: uppercase !important;
        font-weight: 700 !important;
        letter-spacing: 1px !important;
    }
    /* Close Button */
    body.tactical-mode .help-modal-header button {
        color: #45a29e !important;
        font-size: 2rem !important;
        transition: color 0.2s ease;
    }

        body.tactical-mode .help-modal-header button:hover {
            color: #66fcf1 !important;
        }

/* 4. Chat History Area */
body.tactical-mode .qna-history {
    background-color: #000000 !important; /* Pure Black Screen */
    border: 1px solid #333 !important;
    border-radius: 0 !important;
    color: #c5c6c7 !important;
    font-family: 'Courier New', monospace !important;
}

/* 5. Chat Bubbles / Text */
body.tactical-mode .qna-question strong {
    color: #45a29e !important; /* Teal "Q:" */
}

body.tactical-mode .qna-answer {
    border-left: 2px solid #66fcf1 !important; /* Cyan vertical line */
    color: #fff !important;
}

    body.tactical-mode .qna-answer strong {
        color: #66fcf1 !important; /* Cyan "A:" */
    }

/* 6. Input Area */
body.tactical-mode .qna-input-group .qna-input {
    background-color: #1f2833 !important;
    border: 1px solid #45a29e !important;
    color: #ffffff !important;
    border-radius: 0 !important;
    font-family: 'Roboto Mono', monospace !important;
}

    body.tactical-mode .qna-input-group .qna-input::placeholder {
        color: #6c757d !important;
    }

/* 7. Send Button */
body.tactical-mode .qna-input-group .qna-send-button {
    background-color: #45a29e !important;
    border: none !important;
    border-radius: 0 !important;
    color: #0b0c10 !important;
    font-weight: 900 !important;
    text-transform: uppercase !important;
}

    body.tactical-mode .qna-input-group .qna-send-button:hover {
        background-color: #66fcf1 !important;
        box-shadow: 0 0 10px rgba(102, 252, 241, 0.4) !important;
    }

    /* 1. Override the "White Background on Type/Focus" rule */
body.tactical-mode .qna-input:focus,
body.tactical-mode .qna-input:not(:placeholder-shown) {
    background-color: transparent !important; /* Don't turn white! */
    color: #ffffff !important; /* Keep text white */
    box-shadow: none !important; /* Remove any default glow */
}

/* 2. Ensure the wrapper pill is the thing providing the black background */
body.tactical-mode .qna-input-group-inline {
    background-color: #000000 !important;
    border: 1px solid #45a29e !important; /* Teal border */
}

/* 3. Placeholder color for contrast */
body.tactical-mode .qna-input::placeholder {
    color: #6c757d !important;
    font-style: italic;
}


/* 1. Reset the Main Header Container */
body.tactical-mode .operation-resource-header {
    display: flex !important;
    flex-wrap: wrap !important; /* Allow wrapping on tiny screens */
    align-items: center !important;
    justify-content: space-between !important;
    gap: 10px !important;
    padding: 10px !important;
}

/* 2. Reset the Resource Name Area */
body.tactical-mode .operation-resource-name {
    flex: 1 1 auto !important; /* Allow growing */
    min-width: 0 !important; /* Allow text truncation */
    margin-right: 10px !important;
}

/* 3. Reset the Actions Container (The button group) */
body.tactical-mode .resource-item-actions {
    display: flex !important;
    flex-direction: row !important; /* Force horizontal row */
    align-items: center !important;
    gap: 8px !important; /* Consistent spacing */
    width: auto !important; /* Only take space needed */
    flex-shrink: 0 !important; /* Don't get squashed */
    margin-left: auto !important; /* Push to the right */
}

    /* 4. CRITICAL: Reset ALL Buttons inside the header */
    /* This forces them to be the size of their text, not full width */
    body.tactical-mode .resource-item-actions button,
    body.tactical-mode .resource-item-actions .landing-cta-button,
    body.tactical-mode .resource-item-actions .landing-cta-gray {
        width: auto !important;
        min-width: 0 !important;
        max-width: none !important;
        flex: 0 0 auto !important; /* Stop growing/shrinking */
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        margin: 0 !important;
        /* Tactical Styling adjustments for buttons */
        padding: 6px 12px !important;
        font-size: 0.8rem !important;
        line-height: 1 !important;
        height: 32px !important; /* Enforce consistent height */
    }

/* 5. Mobile Specific Tweak */
@media (max-width: 500px) {
    /* On tiny screens, let the name be on top row, buttons on bottom row */
    body.tactical-mode .operation-resource-header {
        align-items: flex-start !important;
    }

    body.tactical-mode .resource-item-actions {
        width: 100% !important;
        justify-content: flex-end !important; /* Align buttons to right */
        margin-top: 5px !important;
    }
}

/* 1. Fix the Action Buttons (How / Sourcing) */
body.tactical-mode .alt-actions-cell {
    display: flex !important;
    flex-direction: row !important; /* Force side-by-side */
    flex-wrap: nowrap !important; /* Never wrap to next line */
    gap: 8px !important; /* Consistent spacing */
    align-items: stretch !important; /* Make them equal height */
    padding: 10px 5px !important;
}

    body.tactical-mode .alt-actions-cell .landing-cta-button {
        border: 1px solid #66fcf1 !important; /* Bright Neon Border */
        background-color: rgba(102, 252, 241, 0.05) !important; /* Slight fill */
        color: #66fcf1 !important;
        box-shadow: 0 0 5px rgba(102, 252, 241, 0.2); /* Slight Glow */
    }
    /* 2. Resize the Tactical Buttons */
    /*body.tactical-mode .alt-actions-cell .landing-cta-button {*/
        /* Reduce padding to fit better */
        /*padding: 8px 12px !important;*/
        /* Allow them to shrink if necessary */
        /*flex: 0 1 auto !important;*/
        /* Ensure text doesn't force width */
        /*font-size: 0.75rem !important;*/
        /* Add a small margin for when they wrap */
        /*margin-bottom: 2px;
    }*/

/* 3. Fix the Citations Overflow */
body.tactical-mode .alt-citations-cell {
    /* Prevent overflow */
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    /* Ensure the cell respects grid boundaries */
    min-width: 0;
}

body.tactical-mode .alt-cell .pill-style-container {
    /* Remove the heavy box look */
    border: none !important;
    border-bottom: 1px dashed #45a29e !important; /* Dashed line implies "More Info" */
    background-color: transparent !important;
    border-radius: 0 !important;
    padding: 2px 0 !important; /* Reduce padding to look like text */
    /* Text styling */
    color: #c5c6c7 !important; /* Standard Data Color */
    font-family: 'Courier New', monospace !important;
    transition: all 0.2s ease;
}

    body.tactical-mode .alt-cell .pill-style-container:hover {
        background-color: #45a29e !important; /* Highlight background on hover */
        color: #000 !important; /* Text turns black */
        border-bottom: 1px solid #66fcf1 !important;
        cursor: help; /* Changes cursor to question mark or pointer */
        box-shadow: 0 0 10px rgba(69, 162, 158, 0.5);
    }

body.tactical-mode .alternative-name-and-use .pill-style-container:first-child {
    font-size: 0.9rem !important;
    font-weight: 700 !important;
    color: #ffffff !important; /* Bright white name */
    border-bottom: 1px solid #45a29e !important; /* Solid line for the main title */
}

/* 5. The "Use" description text - Keep it subtle */
body.tactical-mode .alternative-name-and-use .pill-style-container:nth-child(2) {
    color: #45a29e !important; /* Teal text */
    font-style: italic;
    border-bottom: none !important; /* No underline for the sub-text unless hovered */
}

body.tactical-mode .citations-in-table {
    display: block; /* Ensure it respects parent width */
    width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* 4. OPTIONAL: Adjust Grid Columns for Better Spacing */
/* Give more space to the actions/citations columns if possible */
@media (min-width: 992px) {
    body.tactical-mode .alt-responsive-row,
    body.tactical-mode .responsive-table-header {
        /* 
           Original: 1.8fr 1.4fr 1.2fr 1.2fr 1.5fr 1fr 0.5fr 
           New: Slightly reduced Name/Needs to give more to Actions/Citations
        */
        grid-template-columns: 1.6fr 1.4fr 1.1fr 1.1fr 1.5fr 1.2fr 0.6fr !important;
    }
}

@media (max-width: 991.98px) {

    /* Target the label generated by the data-label attribute */
    body.tactical-mode .alt-actions-cell::before {
        content: attr(data-label);
        /* 1. Typography matches other labels */
        font-family: 'Courier New', monospace !important;
        font-size: 0.75rem !important; /* Match other labels (usually 0.75rem or 0.8rem) */
        font-weight: 600 !important; /* Semi-bold, not extra bold */
        text-transform: uppercase;
        letter-spacing: 0.5px;
        /* 2. Color matches other labels */
        color: #495057 !important; /* Use standard grey/dark text for labels */
        /* OR if your tactical theme uses Teal for labels: */
        /* color: #45a29e !important; */
        /* 3. Layout */
        display: block;
        width: 100%;
        margin-bottom: 5px;
        text-align: left;
    }

    /* Ensure the container doesn't add extra weirdness */
    body.tactical-mode .alt-actions-cell {
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        width: 100%;
        padding-top: 10px; /* Slight separation from previous row */
    }
}


/* =================================================================== */
/* === TACTICAL POLISH: SCANLINES, BRACKETS, & ANIMATIONS ============ */
/* =================================================================== */

/* 1. CRT SCANLINE OVERLAY */
/* This puts a faint line texture over the whole screen */
body.tactical-mode::after {
    content: " ";
    display: block;
    position: fixed;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
/*    background: linear-gradient(rgba(18, 16, 16, 0) 50%, rgba(0, 0, 0, 0.25) 50%), linear-gradient(90deg, rgba(255, 0, 0, 0.06), rgba(0, 255, 0, 0.02), rgba(0, 0, 255, 0.06));*/
    z-index: 99999; /* On top of everything */
    background-size: 100% 2px, 3px 100%;
    pointer-events: none; /* Let clicks pass through */
    opacity: 0.6;
    background: radial-gradient(circle, transparent 60%, #000000 130%), linear-gradient(rgba(18, 16, 16, 0) 50%, rgba(0, 0, 0, 0.25) 50%), linear-gradient(90deg, rgba(255, 0, 0, 0.06), rgba(0, 255, 0, 0.02), rgba(0, 0, 255, 0.06));
}

/* 2. TARGETING CORNERS FOR THE MAIN CARD */
/* Remove the full border and replace with corner brackets */
body.tactical-mode .landing-content-overlay {
    border: 1px solid #45a29e !important;
    position: relative;
    background-color: rgba(10, 12, 16, 0.95) !important;
    backdrop-filter: blur(5px);
}

    /* Add technical labels to the main card */
    body.tactical-mode .landing-content-overlay::before {
        content: "ENCRYPTION: ACTIVE // NODE: LOCAL";
        position: absolute;
        bottom: -20px;
        right: 0;
        font-size: 0.6rem;
        color: #45a29e;
        font-family: 'Roboto Mono', monospace;
        opacity: 0.7;
        letter-spacing: 1px;
    }

    body.tactical-mode .landing-content-overlay::after {
        content: "WARNING: AUTHORIZED PERSONNEL ONLY";
        position: absolute;
        top: -20px;
        left: 0;
        font-size: 0.6rem;
        color: #dc3545; /* Red warning text */
        font-family: 'Roboto Mono', monospace;
        letter-spacing: 1px;
        font-weight: bold;
    }


/* 4. GLOWING INPUT FOCUS */
/*body.tactical-mode .landing-input:focus {
    box-shadow: 0 0 15px rgba(102, 252, 241, 0.3), inset 0 0 10px rgba(0,0,0,0.8) !important;
    border-color: #66fcf1 !important;
    background-color: rgba(0, 0, 0, 0.9) !important;
}*/

.tactical-overlay-data {
    display: none;
}

body.tactical-mode .tactical-overlay-data {
    display: block;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none; /* Let clicks pass through */
    z-index: 9999;
}

/* Only show in tactical mode */
.tactical-corners {
    display: none;
}

body.tactical-mode .tactical-corners {
    display: block;
}

.corner {
    position: fixed;
    color: #45a29e;
    font-family: 'Roboto Mono', monospace;
    font-size: 0.6rem;
    opacity: 0.6;
    letter-spacing: 1px;
    z-index: 9999;
}

    .corner.top-left {
        top: 150px;
        left: 20px;
    }
    /* Below HUD */
    .corner.top-right {
        top: 150px;
        right: 20px;
    }

    .corner.bottom-left {
        bottom: 20px;
        left: 20px;
    }

    .corner.bottom-right {
        bottom: 20px;
        right: 20px;
    }


.tactical-telemetry {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: 1000; /* Below Header/HUD */
}

.telemetry-item {
    position: absolute;
    font-family: 'Roboto Mono', monospace;
    font-size: 0.65rem;
    color: #45a29e;
    opacity: 0.5;
    letter-spacing: 1px;
}

.top-left {
    top: 180px;
    left: 20px;
}
/* Below header */
.top-right {
    top: 180px;
    right: 20px;
}

.bottom-left {
    bottom: 20px;
    left: 20px;
}

.bottom-right {
    bottom: 20px;
    right: 20px;
}


/* 1. FORCE THE INPUT TO BE TRANSPARENT (No Grey Box) */
body.tactical-mode .landing-input {
    /* Completely remove background color */
    background: transparent !important;
    background-color: transparent !important;
    /* Make the bottom line thicker and brighter */
    border-bottom: 3px solid #66fcf1 !important;
    /* Ensure no other borders exist */
    border-top: none !important;
    border-left: none !important;
    border-right: none !important;
    /* Text Styles */
    color: #ffffff !important; /* Typing text is white */
    font-weight: 700 !important;
    padding-left: 0 !important; /* Reset padding */
    margin-left: 30px !important; /* Move it right to clear the ">" prompt */
    width: calc(100% - 30px) !important;
}

    /* Make the placeholder text solid, not ghostly */
    /*body.tactical-mode .landing-input::placeholder {
        color: #45a29e !important;*/ /* Darker Teal */
        /*opacity: 1 !important;*/ /* Solid, not see-through */
        /*text-shadow: none !important;
        font-weight: 600 !important;
    }*/

/* 2. FORCE THE BUTTON TO BE NEON (High Contrast) */
body.tactical-mode .landing-cta-primaryheadline {
    /* Switch to the brightest Cyan you have */
    background-color: #66fcf1 !important;
    /* Keep text Pitch Black for max contrast */
    color: #000000 !important;
    /* Darken the stripes slightly so they contrast against the bright neon */
    background-image: linear-gradient( 45deg, rgba(0, 0, 0, 0.15) 25%, transparent 25%, transparent 50%, rgba(0, 0, 0, 0.15) 50%, rgba(0, 0, 0, 0.15) 75%, transparent 75%, transparent ) !important;
    /* Add a glow to the button itself */
    box-shadow: 0 0 20px rgba(102, 252, 241, 0.5) !important;
    border: 2px solid #ffffff !important; /* White border to contain the glow */
}

    body.tactical-mode .landing-cta-primaryheadline:hover {
        background-color: #ffffff !important; /* Turn white on hover */
        box-shadow: 0 0 30px rgba(255, 255, 255, 0.8) !important;
    }


body.tactical-mode .landing-title-problem,
body.tactical-mode .landing-input {
    text-shadow: 0 0 5px rgba(255, 255, 255, 0.4);
}

body.tactical-mode #landing-sub-title {
    /* Make the sub-headline glow with the accent color */
    text-shadow: 0 0 4px rgba(102, 252, 241, 0.4);
}


/* =================================================================== */
/* === TACTICAL MODE: CITATIONS MODAL THEME ========================== */
/* =================================================================== */

/* 1. Backdrop Boost (Above filters) */
body.tactical-mode .simple-modal-overlay {
    z-index: 10020 !important;
    background-color: rgba(0, 0, 0, 0.85) !important;
    backdrop-filter: blur(2px) !important;
}

/* 2. The Modal Content (Dark Panel) */
body.tactical-mode .simple-modal-content {
    background-color: #0b0c10 !important;
    border: 2px solid #45a29e !important;
    border-radius: 0 !important;
    box-shadow: 0 0 30px rgba(102, 252, 241, 0.15) !important;
    font-family: 'Roboto Mono', monospace !important;
}

/* 3. The Header */
body.tactical-mode .simple-modal-header {
    background-color: #1f2833 !important;
    border-bottom: 1px solid #45a29e !important;
}

body.tactical-mode .simple-modal-title {
    color: #66fcf1 !important; /* Bright Cyan Title */
    text-transform: uppercase;
    font-weight: 700;
    letter-spacing: 1px;
}

body.tactical-mode .simple-modal-header .btn-close {
    filter: brightness(0) invert(1); /* White X */
    opacity: 0.8;
}

/* 4. The Body & List Items */
body.tactical-mode .simple-modal-body {
    background-color: #0b0c10 !important;
}

/* Links */
body.tactical-mode .citation-modal-list a {
    color: #c5c6c7 !important; /* Light Grey Text */
    border-left: 2px solid transparent;
    padding-left: 10px;
    transition: all 0.2s ease;
}

    body.tactical-mode .citation-modal-list a:hover {
        border-left: 2px solid #66fcf1; /* Cyan indicator on hover */
        background-color: rgba(69, 162, 158, 0.1);
    }

/* Numbers ([1], [2]) */
body.tactical-mode .citation-modal-list .citation-number {
    color: #45a29e !important; /* Teal */
}

/* Title Hover */
body.tactical-mode .citation-modal-list a:hover .citation-title {
    color: #ffffff !important;
    text-decoration: none !important;
}

/* External Link Icon */
body.tactical-mode .citation-modal-list .citation-link-icon {
    color: #45a29e !important;
}

/* =================================================================== */
/* === TACTICAL MODE: GUIDE MODAL (COMPLETE & POLISHED) ============== */
/* =================================================================== */

/* 1. MAIN CONTAINER & TEXTURE */
body.tactical-mode .guide-modal-content {
    background-color: #0b0c10 !important; /* Deep Black */
    /* Add a subtle grid texture to the modal background */
    background-image: linear-gradient(rgba(102, 252, 241, 0.03) 1px, transparent 1px), linear-gradient(90deg, rgba(102, 252, 241, 0.03) 1px, transparent 1px) !important;
    background-size: 20px 20px !important;
    color: #e0e0e0 !important; /* Off-White for better readability */
    font-family: 'Roboto Mono', monospace !important;
    border-left: 1px solid #45a29e !important;
    border-right: 1px solid #45a29e !important;
}

/* 2. THE HEADER */
body.tactical-mode .guide-modal-header {
    background-color: #1f2833 !important; /* Dark Panel Grey */
    border-bottom: 2px solid #45a29e !important; /* Teal Divider */
    padding: 1rem 1.5rem !important;
}

    body.tactical-mode .guide-modal-header h3 {
        color: #66fcf1 !important; /* Bright Cyan Title */
        font-weight: 700 !important;
        text-transform: uppercase !important;
        letter-spacing: 1px !important;
        text-shadow: 0 0 5px rgba(102, 252, 241, 0.3) !important;
    }

    body.tactical-mode .guide-modal-header .btn-close {
        filter: brightness(0) invert(1) !important; /* White X */
        opacity: 0.8 !important;
    }

/* 3. THE BODY CONTENT */
body.tactical-mode .guide-modal-body {
    padding: 1.5rem !important;
}
/* Section Headers */
body.tactical-mode .guide-section-overall-title {
    color: #45a29e !important;
    font-style: normal !important;
    text-transform: uppercase !important;
    border-bottom: 1px dashed #45a29e !important;
    padding-bottom: 5px !important;
    margin-bottom: 15px !important;
}

/* 4. THE STEPS (ACCORDION) */
body.tactical-mode .guide-simplified-step {
    border: 1px solid #333 !important;
    border-radius: 0 !important; /* Square Corners */
    background-color: transparent !important;
    margin-bottom: 10px !important;
    scroll-margin-top: 150px !important;
}

/* Step Button (Collapsed/Expanded) */
body.tactical-mode .guide-major-step-header {
    background-color: #1f2833 !important;
    color: #66fcf1 !important;
    font-weight: 700 !important;
    text-transform: uppercase !important;
    border-left: 4px solid transparent; /* Prepare for hover */
    transition: all 0.2s ease;
    padding: 15px 20px !important; /* Make the click target bigger */
    font-size: 1.1rem !important; /* Slightly larger text */
    border: 1px solid #45a29e !important; /* Give it a full border so it looks like a button */
    margin-bottom: 5px !important; /* Separate them clearly */
}

    body.tactical-mode .guide-major-step-header:hover,
    body.tactical-mode .guide-major-step-header[aria-expanded="true"] {
        border-left: 4px solid #66fcf1; /* Cyan indicator on the left */
        background-color: #1a1a1a !important;
    }
    body.tactical-mode .guide-major-step-header[aria-expanded="true"] {
        background-color: #45a29e !important; /* Invert colors when open */
        color: #0b0c10 !important;
        font-weight: 900 !important;
    }

body.tactical-mode .guide-accordion-arrow {
    font-size: 1.2rem; /* Bigger target */
    color: #66fcf1; /* Glowing cyan */
}

/* Expanded Content Area */
body.tactical-mode .guide-major-step-content {
    /* FIX: Reduce padding to make cards wider */
    padding: 10px 5px !important;
    background-color: #050608 !important; /* Darker inner background */
    border-top: 1px solid #45a29e !important;
    height: auto !important;
    overflow: visible !important; /* Critical for zoom effect */
}

/* 5. CONTENT BLOCKS (Text, Tips, Cautions) */
body.tactical-mode .guide-detail-label {
    display: flex !important;
    align-items: center !important;
    color: #fff !important;
    font-weight: 900 !important;
    text-transform: uppercase !important;
    font-size: 0.85rem !important;
    letter-spacing: 0.5px !important;
}

/* Standard Text Block */
body.tactical-mode .content-block-text {
    font-size: 1rem !important; /* Bump size */
    line-height: 1.7 !important; /* More breathing room */
    color: #e0e0e0 !important; /* Bright white/grey */
    max-width: 800px; /* Prevent lines from getting too long to track */
    line-height: 1.8 !important; /* Increase spacing between lines significantly */
    padding-top: 10px;
    padding-bottom: 10px;
    border-left: none !important;
    padding-left: 0 !important;
    background-color: transparent !important;
}

body.tactical-mode .guide-detail-block:has(.content-block-text) {
    background-color: #0d1117 !important; /* Very dark blue */
    border: 1px solid #45a29e !important;
    border-left: 6px solid #45a29e !important;
}

/* Tip Block (Yellow) */
body.tactical-mode .guide-tip-text {
    background-color: rgba(255, 193, 7, 0.1) !important;
    border-left: 4px solid #ffc107 !important;
    color: #e0e0e0 !important; /* Keep text white for contrast on dark bg */
    padding: 10px !important;
}

/* Target the wrapper div instead */
body.tactical-mode .guide-detail-block:has(.content-block-text) {
    background-color: #0d1117 !important; /* Very dark blue */
    border: 1px solid #45a29e !important;
    border-left: 6px solid #45a29e !important;
}

/* 3. "TIP" Card (Advisory) */
body.tactical-mode .guide-detail-block:has(.guide-tip-text) {
    background-color: rgba(255, 193, 7, 0.05) !important;
    border: 1px solid #ffc107 !important;
    border-left: 6px solid #ffc107 !important;
}

/* Color the Tip Label */
body.tactical-mode .guide-detail-label-step-tip {
    color: #ffc107 !important;
}

/* Caution Block (Red + Hazard Stripes) */
body.tactical-mode .guide-caution-text {
    font-weight: 700 !important; /* Bold */
    color: #ffffff !important; /* Pure White text on the red background */
    text-transform: uppercase !important; /* Urgent */
    border-left: 6px solid #ff4d4d !important; /* Thicker "Strike" bar */
    background: rgba(220, 53, 69, 0.25) !important; /* Darker red fill */
}
/* Color the Caution Label */
body.tactical-mode .guide-detail-label-caution {
    color: #ff6b6b !important;
}

/* 5. Upgrade the Buttons (Explain & Read) */
body.tactical-mode .btn-explain-further {
    flex-grow: 1; /* Stretch to fill space */
    text-align: center;
    padding: 12px 0 !important; /* Taller hit area */
    font-size: 0.8rem !important;
    margin-left: 5px;
    margin-right: 5px;
    /* Add a subtle background so they look like pressable bars */
    background-color: rgba(69, 162, 158, 0.1) !important;
}

    body.tactical-mode .btn-explain-further:hover {
        background-color: #66fcf1 !important;
        color: #000 !important;
        box-shadow: 0 0 8px #66fcf1 !important;
    }

    body.tactical-mode .btn-explain-further[title*="Read"] {
        border-color: #66fcf1 !important;
        color: #66fcf1 !important;
    }


/* 7. THE FOOTER */
body.tactical-mode .guide-modal-footer {
    display: none !important;
}
    /* "Back to Alternatives" Button */
    body.tactical-mode .guide-modal-footer .btn {
        background-color: transparent !important;
        color: #45a29e !important;
        border: 1px solid #45a29e !important;
        border-radius: 0 !important;
        font-weight: 700 !important;
        text-transform: uppercase !important;
        letter-spacing: 1px !important;
        padding: 10px 20px !important;
        transition: all 0.2s ease !important;
    }

        body.tactical-mode .guide-modal-footer .btn:hover {
            background-color: #45a29e !important;
            color: #0b0c10 !important; /* Invert */
            box-shadow: 0 0 15px rgba(69, 162, 158, 0.4) !important;
        }

/* 4. PREAMBLE / CONTEXT TEXT */
/* The text at the very top (before Step 1) looks a bit messy. Let's clean it up. */
body.tactical-mode .guide-preamble {
    font-style: normal !important;
    color: #45a29e !important; /* Teal for "Context/Intel" */
    border-bottom: 1px solid #333;
    padding-bottom: 15px;
    margin-bottom: 20px;
    font-size: 0.9rem;
}


/* =================================================================== */
/* === TACTICAL GUIDE UPGRADE: CARDS & ANIMATION ===================== */
/* =================================================================== */

/* 1. ANIMATION: Smooth Slide Down */
/* Apply this to the content wrapper */
body.tactical-mode .guide-major-step-content {
    animation: slide-down 0.3s ease-out forwards;
    transform-origin: top;
}

@keyframes slide-down {
    from {
        opacity: 0;
        transform: scaleY(0.95);
    }

    to {
        opacity: 1;
        transform: scaleY(1);
    }
}

/* 2. CARD-IFY THE SECTIONS */

/* The Main Text Block (The "Instruction Manual") */
body.tactical-mode .guide-detail-block {
    margin-bottom: 15px !important;
    padding: 15px !important;
    border-radius: 0 !important;
    box-shadow: 0 4px 10px rgba(0,0,0,0.5) !important;
    opacity: 0;
    animation: slide-in-tactical 0.3s ease-out forwards;
}

@keyframes slide-in-tactical {
    from {
        opacity: 0;
        transform: translateX(-10px);
    }

    to {
        opacity: 1;
        transform: translateX(0);
    }
}

/* The Tip Block (The "Post-it Note") */
body.tactical-mode .guide-tip-text {
    background: transparent !important;
    border: none !important;
    padding: 0 !important;
}

/* 4. "CAUTION" Card (Warning) */
body.tactical-mode .guide-detail-block:has(.guide-caution-text) {
    background-color: rgba(220, 53, 69, 0.1) !important;
    border: 1px solid #dc3545 !important;
    border-left: 6px solid #dc3545 !important;
    /* Hazard stripes on the CARD background */
    background-image: repeating-linear-gradient(45deg, rgba(220,53,69,0.05), rgba(220,53,69,0.05) 10px, transparent 10px, transparent 20px) !important;
}

/* The Caution Block (The "Warning Sign") */
body.tactical-mode .guide-caution-text {
    background: transparent !important;
    border: none !important;
    padding: 0 !important;
}

/* 3. HEADERS FOR THE CARDS */
/* Make "STEP TEXT:", "TIP:", "CAUTION:" look like labels on the cards */
body.tactical-mode .guide-detail-label {
    display: inline-block;
    background-color: #0b0c10; /* Match background to look like it cuts the border */
    padding: 0 10px;
    margin-bottom: -10px; /* Pull it down to overlap the border */
    position: relative;
    z-index: 1;
    margin-left: 10px;
    font-size: 0.75rem !important;
    letter-spacing: 1px;
}



/* =================================================================== */
/* === TACTICAL MODE: ACTION BUTTONS (READ / EXPLAIN) ================ */
/* =================================================================== */

/* 1. Wrapper to hold buttons inline */
body.tactical-mode .guide-actions-wrapper {
    display: inline-flex !important;
    vertical-align: middle;
}

/* 2. The Buttons (READ and EXPLAIN share this style) */
body.tactical-mode .btn-explain-further {
    border-radius: 0 !important; /* Square */
    border: 1px solid #45a29e !important;
    background-color: rgba(0,0,0,0.3) !important;
    color: #45a29e !important; /* Muted Teal by default */

    font-family: 'Roboto Mono', monospace !important;
    font-weight: 700 !important;
    font-size: 0.65rem !important; /* Tiny tech text */
    letter-spacing: 1px !important;
    padding: 4px 8px !important;
    /* Remove fixed width/height constraints from previous icon version */
    width: auto !important;
    height: auto !important;
    min-width: 50px;
    text-transform: uppercase;
    transition: all 0.2s ease;
}

    /* 3. Hover State (Lit Up) */
    body.tactical-mode .btn-explain-further:hover {
        background-color: #45a29e !important;
        color: #0b0c10 !important; /* Black Text */
        box-shadow: 0 0 10px rgba(69, 162, 158, 0.4) !important;
        border-color: #66fcf1 !important;
    }

    /* 4. Active State (When clicked) */
    body.tactical-mode .btn-explain-further:active {
        background-color: #66fcf1 !important;
        color: #000 !important;
    }

/* =================================================================== */
/* === TACTICAL MODE: GUIDE CARDS (MASTER BLOCK) ===================== */
/* =================================================================== */

body.tactical-mode .guide-cards-container {
    display: flex;
    flex-direction: column;
    gap: 15px;
    padding: 0 5px; /* Minimal side padding */
    /* Buffer for zoom animation */
    padding-right: 15px !important;
    max-width: 100%;
    overflow-x: visible !important;
    counter-reset: card-index;
}

/* 2. Base Card Style */
body.tactical-mode .guide-card {
    /* Layout */
    display: flex !important;
    flex-direction: column !important;
    position: relative;
    box-sizing: border-box !important;
    /* Sizing */
    width: 100% !important;
    /* Visuals */
    background-color: rgba(31, 40, 51, 0.6) !important;
    border: 1px solid #333;
    padding: 20px !important;
    border-radius: 0;
    /* Animation Initial State */
    opacity: 0;
    animation: tactical-slide-in 0.3s ease-out forwards;
    /* SMOOTH ZOOM TRANSITION */
    transition: transform 0.15s cubic-bezier(0.175, 0.885, 0.32, 1.275), box-shadow 0.15s ease, background-color 0.15s ease !important;
    transform-origin: center center; /* Zoom from center */
}


@keyframes tactical-slide-in {
    from {
        opacity: 0;
        transform: translateY(15px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

body.tactical-mode .guide-card:hover {
    /* MAGNIFY: Scale up 4% (Noticeable jump) */
    transform: scale(1.04) !important;
    /* LAYER: Pop on top */
    z-index: 100 !important;
    /* BORDER: Bright Neon Cyan */
    border-color: #66fcf1 !important;
    /* BACKGROUND: Lighter opacity */
    background-color: #161b22 !important;
    /* GLOW: Deep shadow + Cyan rim light */
    box-shadow: 0 0 0 1px #66fcf1, /* Hard glow ring */
    0 10px 40px rgba(0, 0, 0, 0.9) !important;
}

/* 4. CONTENT & WRAPPING FIX (The "Nuclear" Option) */
body.tactical-mode .guide-card-content,
body.tactical-mode .content-block-text {
    /* Force Wrapping */
    white-space: pre-wrap !important;
    overflow-wrap: break-word !important;
    /* Typography */
    font-size: 1.15rem !important;
    line-height: 1.6 !important;
    /* FIX: FORCE PURE WHITE ALWAYS */
    color: #ffffff !important;
    font-weight: 500;
    letter-spacing: 0.3px;
    position: relative;
    z-index: 2;
    transition: text-shadow 0.15s ease;
}

    /* 5. Highlight Bold Text */
    body.tactical-mode .guide-card-content strong {
        color: #66fcf1 !important; /* Cyan highlight for keywords */
        font-weight: 900 !important;
    }

/* 6. WATERMARK NUMBERING (Visual Indexing) */
body.tactical-mode .guide-card::before {
    counter-increment: card-index;
    content: counter(card-index, decimal-leading-zero);
    position: absolute;
    top: 5px;
    right: 10px;
    font-size: 3rem;
    font-weight: 900;
    color: rgba(255, 255, 255, 0.04);
    font-family: 'Arial Black', sans-serif;
    pointer-events: none;
    z-index: 1;
    line-height: 1;
}

/* 7. SAFETY COLORS (The Card Variants) */
/* Cautions (Red) */
body.tactical-mode .guide-card.card-caution {
    border-left: 6px solid #dc3545 !important;
    background-color: rgba(220, 53, 69, 0.15) !important;
    /* Hazard Stripes */
    background-image: repeating-linear-gradient( 45deg, rgba(220, 53, 69, 0.05), rgba(220, 53, 69, 0.05) 10px, transparent 10px, transparent 20px ) !important;
}

    body.tactical-mode .guide-card.card-caution .guide-card-content {
        color: #ffffff !important; /* Ensure readable on red bg */
        font-weight: 700;
    }

body.tactical-mode .guide-card.card-rationale .guide-card-content {
    color: #b2f5ea !important; /* Slight tint for rationale */
}

/* Tips (Yellow) */
body.tactical-mode .guide-card.card-tip {
    border-left: 6px solid #ffc107 !important;
    background-color: rgba(255, 193, 7, 0.05) !important;
}
/* Instruction (Teal) */
body.tactical-mode .guide-card.card-instruction {
    border-left: 6px solid #45a29e !important;
}
/* Rationale (Dashed) */
body.tactical-mode .guide-card.card-rationale {
    border-left: 6px dashed #45a29e !important;
    font-style: italic;
    opacity: 0.9;
}

/* 8. LARGE TOUCH TARGET BUTTONS */
body.tactical-mode .guide-card-actions {
    display: flex;
    justify-content: space-between;
    gap: 10px;
    margin-top: 15px;
    padding-top: 10px;
    border-top: 1px dashed rgba(69, 162, 158, 0.3);
    position: relative;
    z-index: 5;
}

body.tactical-mode .btn-explain-further {
    flex-grow: 1;
    text-align: center;
    justify-content: center;
    padding: 12px 0 !important;
    font-size: 0.8rem !important;
    font-weight: 700 !important;
    text-transform: uppercase;
    letter-spacing: 1px;
    border-radius: 0 !important;
    border: 1px solid #45a29e !important;
    background-color: rgba(69, 162, 158, 0.1) !important;
    color: #45a29e !important;
    transition: all 0.2s ease;
}

    body.tactical-mode .btn-explain-further:hover {
        background-color: #45a29e !important;
        color: #0b0c10 !important;
    }

    /* Make READ button distinct */
    /* Read Button Distinct Style */
    body.tactical-mode .btn-explain-further[title*="Read"] {
        border-color: #66fcf1 !important;
        color: #66fcf1 !important;
    }

        body.tactical-mode .btn-explain-further[title*="Read"]:hover {
            background-color: #66fcf1 !important;
            color: #000 !important;
        }

body.tactical-mode .guide-card-content p,
body.tactical-mode .guide-card-content span,
body.tactical-mode .guide-card-content div {
    color: #ffffff !important;
}

/* TEXT BLOOM ON HOVER (Makes it feel bigger/bolder) */
body.tactical-mode .guide-card:hover .guide-card-content {
    text-shadow: 0 0 1px rgba(255, 255, 255, 0.6) !important;
}

body.tactical-mode .step-tactical-toolbar {
    display: flex;
    gap: 10px;
    margin-bottom: 15px;
    padding-bottom: 10px;
    border-bottom: 1px dashed #45a29e;
}

/* The Big Action Buttons */
body.tactical-mode .btn-tactical-action {
    flex-grow: 1; /* Full width split */
    background-color: rgba(69, 162, 158, 0.1);
    border: 1px solid #45a29e;
    color: #66fcf1;
    padding: 10px;
    font-family: 'Roboto Mono', monospace;
    font-weight: 700;
    text-transform: uppercase;
    cursor: pointer;
    transition: all 0.2s ease;
}

    body.tactical-mode .btn-tactical-action:hover {
        background-color: #45a29e;
        color: #000;
        box-shadow: 0 0 10px rgba(102, 252, 241, 0.4);
    }



/* =================================================================== */
/* === TACTICAL MODE: AI DEEP DIVE (FULL INTEL REPORT STYLE) ========= */
/* =================================================================== */

/* 1. THE MAIN CONTAINER (The "File") */
body.tactical-mode .further-explanation-container {
    background-color: #0d1117 !important; /* Dark Navy/Black */
    border: 1px solid #45a29e !important; /* Teal Border */
    border-left: 4px solid #66fcf1 !important; /* Bright Cyan Accent Bar */
    border-radius: 0 !important; /* Square Corners */
    padding: 20px !important;
    margin-top: 15px !important;
    box-shadow: inset 0 0 30px rgba(0,0,0,0.8) !important; /* Deep recessed look */
    font-family: 'Roboto Mono', monospace !important;
    color: #c5c6c7 !important;
    position: relative;
}

/* 2. THE MAIN HEADER ("INTEL: FIELD NAME") */
body.tactical-mode .further-explanation-header {
    border-bottom: 2px solid #45a29e !important;
    padding-bottom: 10px;
    margin-bottom: 20px;
    font-weight: 900;
    font-size: 1rem;
    text-transform: uppercase;
    letter-spacing: 2px;
    color: #66fcf1 !important; /* Cyan */
    display: flex;
    align-items: center;
}

    body.tactical-mode .further-explanation-header .icon {
        fill: #66fcf1 !important;
        margin-right: 10px;
        width: 20px;
        height: 20px;
    }

/* 3. CITATIONS SECTION (Source Intelligence) */
body.tactical-mode .further-explanation-container .citationssection {
    background-color: rgba(0,0,0,0.3);
    padding: 10px;
    border: 1px dashed #45a29e;
    margin-bottom: 20px;
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 10px;
}

body.tactical-mode .further-explanation-container .citationsprefix {
    color: #45a29e !important;
    font-weight: bold;
    margin-right: 10px;
}

body.tactical-mode .further-explanation-container .citation-link {
    color: #66fcf1 !important;
    text-decoration: none;
    border-bottom: 1px dotted #66fcf1;
}

    body.tactical-mode .further-explanation-container .citation-link:hover {
        background-color: #45a29e;
        color: #000 !important;
    }

/* 4. COLLAPSIBLE SECTION HEADERS (The Menus) */
body.tactical-mode .explanation-subsection-header {
    width: 100%;
    display: flex;
    justify-content: space-between;
    align-items: center;
    /* Tactical Button Look */
    background-color: rgba(69, 162, 158, 0.05);
    color: #45a29e !important;
    border: 1px solid #45a29e;
    border-radius: 0;
    padding: 12px 15px;
    margin-bottom: 8px; /* Spacing between menus */

    font-family: 'Roboto Mono', monospace;
    font-weight: 700;
    font-size: 0.85rem;
    cursor: pointer;
    text-align: left;
    text-transform: uppercase;
    transition: all 0.2s ease;
}

    /* Hover State */
    body.tactical-mode .explanation-subsection-header:hover {
        background-color: rgba(69, 162, 158, 0.2);
        color: #66fcf1 !important;
        border-color: #66fcf1;
        padding-left: 20px; /* Physical movement on hover */
    }

    /* The Arrow */
    body.tactical-mode .explanation-subsection-header .arrow {
        font-size: 0.7rem;
        color: #66fcf1;
    }

/* 5. EXPANDED CONTENT WRAPPER */
body.tactical-mode .explanation-subsection-content {
    border-left: 1px dashed #45a29e; /* Visual guide line on the left */
    margin-left: 15px;
    padding-left: 15px;
    margin-bottom: 20px;
    padding-top: 10px;
    animation: tactical-slide-down 0.2s ease-out;
}

@keyframes tactical-slide-down {
    from {
        opacity: 0;
        transform: translateY(-10px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* 6. TEXT SEGMENT CARDS (The Split Text Blocks) */
body.tactical-mode .explanation-segment-card {
    background-color: rgba(255, 255, 255, 0.02) !important; /* Extremely subtle highlight */
    border: 1px solid #333;
    padding: 12px 15px !important;
    margin-bottom: 10px !important;
    /* Text Styling */
    color: #e0e0e0 !important; /* High readability white */
    font-size: 0.95rem !important;
    line-height: 1.6 !important;
    /* Animation */
    opacity: 0;
    animation: tactical-entry 0.3s ease-out forwards;
}

/* 7. PRACTICAL STEPS LISTS */
body.tactical-mode .guide-like-list li {
    background-color: rgba(0, 0, 0, 0.3) !important;
    border-left: 3px solid #ffc107 !important; /* Yellow indicator for steps */
    color: #e0e0e0 !important;
    margin-bottom: 8px;
    padding: 10px !important;
    list-style-type: none;
}

/* 8. Q&A SECTION (Interrogation Log) */
body.tactical-mode .further-explanation-qna {
    background-color: #000 !important;
    border: 1px solid #333;
    padding: 15px;
}

    body.tactical-mode .further-explanation-qna div {
        border-bottom: 1px dashed #333 !important; /* Separator between Qs */
    }

    body.tactical-mode .further-explanation-qna strong {
        color: #66fcf1 !important; /* Cyan for "Q:" and "A:" */
    }

    body.tactical-mode .further-explanation-qna p {
        color: #c5c6c7 !important;
    }

/* 9. LOADING STATE */
body.tactical-mode .further-explanation-container .spinner-border {
    color: #66fcf1 !important;
    width: 1.5rem;
    height: 1.5rem;
}

@keyframes tactical-entry {
    0% {
        opacity: 0;
        transform: translateY(10px);
    }

    100% {
        opacity: 1;
        transform: translateY(0);
    }
}

/* =================================================================== */
/* === TACTICAL MODE: EXECUTION STATE TRACKING ======================= */
/* =================================================================== */

/* 1. ACTIVE STEP (Focus) */
body.tactical-mode .guide-simplified-step:has(.step-active) {
    border: 2px solid #66fcf1 !important; /* Bright border */
    box-shadow: 0 0 20px rgba(102, 252, 241, 0.2);
}

body.tactical-mode .guide-major-step-header.step-active {
    background-color: #000 !important;
    color: #66fcf1 !important;
}
    /* Add a "IN PROGRESS" badge */
    body.tactical-mode .guide-major-step-header.step-active::before {
        content: "▶ EXECUTING";
        font-size: 0.7rem;
        background: #66fcf1;
        color: #000;
        padding: 2px 6px;
        margin-right: 10px;
        font-weight: 900;
    }

/* 2. COMPLETED STEP (Dimmed) */
body.tactical-mode .guide-simplified-step:has(.step-complete) {
    opacity: 0.5; /* Fade it out */
    border-color: #333 !important;
}

body.tactical-mode .guide-major-step-header.step-complete {
    color: #45a29e !important; /* Dull Teal */
    text-decoration: line-through; /* Visual "Done" cue */
}
    /* Add a checkmark */
    body.tactical-mode .guide-major-step-header.step-complete::before {
        content: "✓ DONE";
        font-size: 0.7rem;
        background: #45a29e;
        color: #000;
        padding: 2px 6px;
        margin-right: 10px;
        font-weight: 900;
        text-decoration: none !important;
    }

/* =================================================================== */
/* === TACTICAL CHECKLIST STYLING ==================================== */
/* =================================================================== */

/* --- 1. THE CHECKBOX ITSELF --- */
.tactical-checkbox-wrapper {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0 15px;
    background-color: #1f2833; /* Darker than header */
    border: 1px solid #45a29e;
    border-right: none; /* Merge with header */
    cursor: pointer;
    min-width: 60px;
}

.tactical-checkbox {
    width: 24px;
    height: 24px;
    border: 2px solid #45a29e;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #0b0c10; /* Checkmark color (when filled) */
    font-weight: 900;
    font-size: 1.2rem;
    transition: all 0.2s ease;
}

    /* Checked State */
    .tactical-checkbox.checked {
        background-color: #45a29e; /* Fill Teal */
        border-color: #45a29e;
    }

/* --- 2. STATE: COMPLETED (Dark & Dim) --- */
.guide-simplified-step.state-complete {
    opacity: 0.5; /* Fade out the whole row */
    filter: grayscale(0.8); /* Remove most color */
    transition: all 0.3s ease;
}

    /* Strike-through title */
    .guide-simplified-step.state-complete .guide-step-title-text {
        text-decoration: line-through;
        color: #6c757d;
    }

/* --- 3. STATE: ACTIVE (The "Next Step" Glow) --- */
.guide-simplified-step.state-active {
    /* Lift it up visually */
    transform: scale(1.01);
    z-index: 10;
    box-shadow: 0 0 25px rgba(102, 252, 241, 0.15); /* Ambient glow */
}

    /* Brighten the checkbox border */
    .guide-simplified-step.state-active .tactical-checkbox {
        border-color: #66fcf1;
        box-shadow: 0 0 10px #66fcf1;
    }

    /* Brighten the Header Background */
    .guide-simplified-step.state-active .guide-major-step-header {
        background-color: rgba(69, 162, 158, 0.2) !important;
        border-color: #66fcf1 !important;
    }

    /* Brighten the Title Text */
    .guide-simplified-step.state-active .guide-step-title-text {
        color: #ffffff;
        text-shadow: 0 0 5px rgba(102, 252, 241, 0.5);
    }

/* --- 4. STATE: PENDING (Standard) --- */
.guide-simplified-step.state-pending {
    opacity: 1;
}

/* =================================================================== */
/* === TACTICAL MODE: NAVIGATION DOCK (FULL & FINAL) ================= */
/* =================================================================== */

/* 1. Hide the Old Footer in Tactical Mode */
body.tactical-mode .guide-modal-footer {
    display: none !important;
}

/* 2. The Dock Container (Fixed to Bottom) */
body.tactical-mode .tactical-nav-dock {
    position: fixed !important;
    bottom: 0 !important;
    left: 0 !important;
    right: 0 !important;
    width: 100% !important;
    /* Visuals */
    background-color: rgba(11, 12, 16, 0.98) !important; /* Nearly solid black */
    backdrop-filter: blur(10px);
    border-top: 4px solid #45a29e !important; /* Thick Tactical Border */
    box-shadow: 0 -10px 40px rgba(0, 0, 0, 0.9) !important;
    /* Layout */
    display: flex !important;
    justify-content: space-between;
    gap: 15px; /* Space between buttons */
    padding: 15px 20px !important;
    z-index: 11000 !important; /* Topmost layer */
}

/* 3. Navigation Buttons (Prev / Next) */
body.tactical-mode .btn-nav-tactical {
    flex-grow: 1; /* Expand to fill space */
    background-color: #1f2833 !important;
    color: #66fcf1 !important; /* Neon Cyan Text */
    border: 1px solid #45a29e !important;
    border-radius: 0 !important; /* Square corners */

    font-family: 'Roboto Mono', monospace !important;
    font-weight: 900 !important;
    font-size: 1.1rem !important;
    text-transform: uppercase;
    padding: 15px 0 !important; /* Tall hit area */
    transition: all 0.2s ease;
}

    body.tactical-mode .btn-nav-tactical:hover {
        background-color: #45a29e !important;
        color: #0b0c10 !important; /* Black Text */
        box-shadow: 0 0 20px rgba(102, 252, 241, 0.4) !important;
    }

    body.tactical-mode .btn-nav-tactical:disabled {
        opacity: 0.3;
        cursor: not-allowed;
        border-color: #333 !important;
        color: #555 !important;
        box-shadow: none !important;
    }

/* 4. The Exit/Back Button (Middle) */
body.tactical-mode .btn-nav-exit {
    flex-grow: 0 !important; /* Do not expand */
    width: 100px !important; /* Fixed narrow width */
    background-color: transparent !important;
    border: 1px solid #6c757d !important; /* Neutral Grey Border */
    color: #6c757d !important; /* Neutral Text */
    font-size: 0.9rem !important;
}

    body.tactical-mode .btn-nav-exit:hover {
        border-color: #dc3545 !important; /* Red Border */
        color: #dc3545 !important; /* Red Text */
        background-color: rgba(220, 53, 69, 0.1) !important;
        box-shadow: 0 0 15px rgba(220, 53, 69, 0.3) !important;
    }

/* 5. Ensure Content isn't hidden behind the dock */
body.tactical-mode .guide-modal-body {
    padding-bottom: 140px !important; /* Dock Height + Buffer */
}


/* =================================================================== */
/* === TACTICAL MODE: HEADER SWITCHES ================================ */
/* =================================================================== */

.tactical-mode-switch {
    display: flex;
    margin-top: 2px;
    width: 100%;
    border: 1px solid #45a29e;
}

    .tactical-mode-switch button {
        flex: 1; /* Split width 50/50 */
        background-color: transparent;
        color: #45a29e; /* Dim Teal */
        font-family: 'Roboto Mono', monospace;
        font-size: 0.75rem;
        font-weight: 700;
        text-transform: uppercase;
        letter-spacing: 1px;
        padding: 5px 5px;
        border: none;
        cursor: pointer;
        transition: all 0.2s ease;
        /* Separator line between buttons */
        border-right: 1px solid #45a29e;
    }

        .tactical-mode-switch button:last-child {
            border-right: none;
        }

        /* Hover State */
        .tactical-mode-switch button:hover {
            background-color: rgba(69, 162, 158, 0.2);
            color: #fff;
        }

        /* Active State (The "On" Switch) */
        .tactical-mode-switch button.active {
            background-color: #45a29e;
            color: #0b0c10; /* Black Text */
            box-shadow: inset 0 0 10px rgba(0,0,0,0.5); /* Inner shadow for depth */
        }


/* =================================================================== */
/* === SAFETY INTERLOCK STYLES ======================================= */
/* =================================================================== */

.safety-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: #000000; /* Solid black to block view */
    z-index: 99999; /* Highest possible */
    display: flex;
    align-items: center;
    justify-content: center;
    backdrop-filter: blur(10px);
}

.safety-modal {
    background-color: #0b0c10;
    border: 2px solid #dc3545; /* Danger Red Border */
    width: 90%;
    max-width: 550px;
    box-shadow: 0 0 50px rgba(220, 53, 69, 0.2);
    font-family: 'Roboto Mono', monospace;
    color: #e0e0e0;
}

.safety-header {
    background-color: #1a0505; /* Dark Red tint */
    border-bottom: 1px solid #dc3545;
    padding: 15px 20px;
    display: flex;
    align-items: center;
    gap: 10px;
}

    .safety-header span {
        color: #dc3545;
        font-weight: 900;
        letter-spacing: 1px;
        font-size: 1.1rem;
    }

.warning-icon {
    fill: #dc3545;
}

.safety-body {
    padding: 25px;
    font-size: 0.85rem;
    line-height: 1.5;
}

.safety-list {
    margin-top: 15px;
    padding-left: 15px;
    list-style: none;
}

    .safety-list li {
        margin-bottom: 10px;
        position: relative;
    }

        .safety-list li::before {
            content: "!";
            position: absolute;
            left: -15px;
            color: #dc3545;
            font-weight: bold;
        }

    .safety-list strong {
        color: #fff;
    }

.safety-footer {
    padding: 20px;
    border-top: 1px solid #333;
    display: flex;
    flex-direction: column;
    gap: 15px;
    text-align: center;
}

.btn-safety-accept {
    background-color: #dc3545; /* Red Button */
    color: white;
    border: none;
    padding: 15px;
    font-weight: 900;
    letter-spacing: 1px;
    cursor: pointer;
    text-transform: uppercase;
    font-family: 'Roboto Mono', monospace;
    transition: all 0.2s;
}

    .btn-safety-accept:hover {
        background-color: #b02a37;
        box-shadow: 0 0 15px rgba(220, 53, 69, 0.4);
    }

.safety-exit-link {
    color: #666;
    text-decoration: none;
    font-size: 0.75rem;
}

    .safety-exit-link:hover {
        color: #999;
        text-decoration: underline;
    }



/* =================================================================== */
/* === TACTICAL MODE: COOKIE CONSENT (SYSTEM ALERT STYLE) ============ */
/* =================================================================== */

/* 1. The Container (Bottom Bar) */
body.tactical-mode .cookie-consent {
    background-color: #050608 !important; /* Almost pure black */
    border-top: 2px solid #45a29e !important; /* Teal top border */
    border-radius: 0 !important; /* Square corners */
    box-shadow: 0 -10px 50px rgba(0,0,0,0.9) !important;
    font-family: 'Roboto Mono', monospace !important;
    color: #c5c6c7 !important;
    padding: 1.5rem !important;
    /* Add a subtle grid texture */
    background-image: linear-gradient(rgba(102, 252, 241, 0.03) 1px, transparent 1px), linear-gradient(90deg, rgba(102, 252, 241, 0.03) 1px, transparent 1px) !important;
    background-size: 20px 20px !important;
}

/* 2. The Icon (Grayscale the Emoji) */
body.tactical-mode .cookie-icon {
    font-size: 1.5rem !important;
    /* Turn the cookie emoji into a ghostly grey icon */
    filter: grayscale(100%) contrast(200%) brightness(0.7);
    opacity: 0.8;
}

/* 3. The Title */
body.tactical-mode .cookie-content h3 {
    color: #66fcf1 !important; /* Neon Cyan */
    text-transform: uppercase !important;
    font-weight: 900 !important;
    font-size: 1rem !important;
    letter-spacing: 1px !important;
    margin-bottom: 5px !important;
}
/* Optional: Change text to sound more technical via ::after hack or just styling */
/* But styling the existing text is safer */

/* 4. The Text */
body.tactical-mode .cookie-content p {
    font-size: 0.75rem !important;
    color: #a0a0a0 !important;
}

/* 5. The Buttons */
body.tactical-mode .cookie-btn {
    border-radius: 0 !important;
    font-weight: 900 !important;
    text-transform: uppercase !important;
    font-size: 0.8rem !important;
    padding: 10px 20px !important;
    letter-spacing: 1px !important;
    transition: all 0.2s ease !important;
}

/* ACCEPT (Primary Action) */
body.tactical-mode .cookie-btn-accept {
    background-color: #45a29e !important; /* Dull Teal */
    color: #0b0c10 !important; /* Black text */
    border: 1px solid #45a29e !important;
}

    body.tactical-mode .cookie-btn-accept:hover {
        background-color: #66fcf1 !important; /* Bright Cyan */
        box-shadow: 0 0 15px rgba(102, 252, 241, 0.5) !important;
    }

/* DECLINE (Secondary Action) */
body.tactical-mode .cookie-btn-decline {
    background-color: transparent !important;
    color: #6c757d !important; /* Dark Grey */
    border: 1px solid #333 !important;
}

    body.tactical-mode .cookie-btn-decline:hover {
        border-color: #dc3545 !important; /* Red Border */
        color: #dc3545 !important; /* Red Text */
        box-shadow: inset 0 0 10px rgba(220, 53, 69, 0.2) !important;
    }


/* =================================================================== */
/* === TACTICAL MODE: ERROR UI / SYSTEM FAILURE THEME ================ */
/* =================================================================== */

/* 1. The Backdrop */
body.tactical-mode #blazor-error-ui {
    background-color: rgba(0, 0, 0, 0.9) !important;
    backdrop-filter: blur(5px) !important;
    z-index: 20000 !important; /* Critical Priority */
}

    /* 2. The Content Box (The Alert Window) */
    body.tactical-mode #blazor-error-ui .error-content {
        background-color: #0b0c10 !important; /* Deep Black */
        border: 2px solid #dc3545 !important; /* Danger Red Border */
        border-radius: 0 !important; /* Sharp corners */
        /* Red Glow for "Critical Error" feel */
        box-shadow: 0 0 40px rgba(220, 53, 69, 0.3), inset 0 0 20px rgba(220, 53, 69, 0.1) !important;
        color: #c5c6c7 !important;
        font-family: 'Roboto Mono', monospace !important;
        max-width: 500px !important;
        padding: 2rem !important;
    }

    /* 3. The Icon (Warning Symbol) */
    body.tactical-mode #blazor-error-ui .error-icon {
        fill: #dc3545 !important; /* Red */
        filter: drop-shadow(0 0 5px #dc3545) !important;
        width: 60px !important;
        height: 60px !important;
        margin-bottom: 20px !important;
        animation: tactical-pulse 1s infinite alternate;
    }

@keyframes tactical-pulse {
    from {
        opacity: 1;
        transform: scale(1);
    }

    to {
        opacity: 0.8;
        transform: scale(1.05);
    }
}

/* 4. The Title (Header) */
body.tactical-mode #blazor-error-ui h2 {
    color: #ffffff !important;
    font-family: 'Arial Black', sans-serif !important;
    text-transform: uppercase !important;
    letter-spacing: 1px !important;
    font-size: 1.5rem !important;
    text-shadow: 0 0 10px rgba(220, 53, 69, 0.5) !important;
    margin-bottom: 15px !important;
}

/* 5. The Message Text */
body.tactical-mode #blazor-error-ui p {
    color: #ff6b6b !important; /* Light Red text for readability */
    font-size: 0.9rem !important;
    line-height: 1.6 !important;
    border-left: 2px solid #dc3545 !important;
    padding-left: 15px !important;
    text-align: left !important;
    width: 100% !important;
}

/* 6. The "Reload" Button */
body.tactical-mode .error-button.reload {
    background-color: #dc3545 !important; /* Red background */
    color: #000000 !important; /* Black text */
    border: 2px solid #ff6b6b !important;
    border-radius: 0 !important;
    font-family: 'Roboto Mono', monospace !important;
    font-weight: 900 !important;
    text-transform: uppercase !important;
    letter-spacing: 2px !important;
    padding: 15px 40px !important;
    box-shadow: 0 0 15px rgba(220, 53, 69, 0.4) !important;
    transition: all 0.2s ease !important;
}

    body.tactical-mode .error-button.reload:hover {
        background-color: #ff6b6b !important;
        color: #000 !important;
        box-shadow: 0 0 30px rgba(220, 53, 69, 0.8) !important;
    }

/* 7. The Dismiss 'X' */
body.tactical-mode #blazor-error-ui .dismiss {
    color: #45a29e !important; /* Teal (to show it's a secondary UI element) */
    font-size: 1.2rem !important;
    top: 10px !important;
    right: 10px !important;
    opacity: 0.7 !important;
}

    body.tactical-mode #blazor-error-ui .dismiss:hover {
        color: #66fcf1 !important;
        opacity: 1 !important;
    }

/* =================================================================== */
/* === TACTICAL REFS BUTTON ========================================== */
/* =================================================================== */

body.tactical-mode .btn-show-refs {
    /* Slightly different border to distinguish from AI tools */
    border-color: #6c757d !important;
    color: #6c757d !important;
}

    body.tactical-mode .btn-show-refs:hover {
        background-color: rgba(255, 255, 255, 0.1) !important;
        color: #ffffff !important;
        border-color: #ffffff !important;
        box-shadow: 0 0 10px rgba(255, 255, 255, 0.3) !important;
    }










/* =================================================================== */
/* === MOBILE TACTICAL PATCH (Fix Sizing & Cutoff) =================== */
/* =================================================================== */

@media (max-width: 768px) {

    /* 1. COMPACT HEADER (Fixing Overlap) */
    body.tactical-mode .header {
        flex-wrap: nowrap !important; /* Force single line */
        padding: 0.5rem 0.5rem !important; /* Reduce padding */
        justify-content: space-between !important;
        height: 50px !important; /* Force shorter height */
    }

    /* Shrink the Logo Text */
    body.tactical-mode .logo-title .main-title {
        font-size: 0.9rem !important;
        letter-spacing: 1px !important;
    }

    /* Shrink the Offline Button & Text */
    body.tactical-mode #header-download-offline-button {
        font-size: 0.6rem !important; /* Smaller text */
        padding: 6px 10px !important; /* Smaller button */
        white-space: nowrap;
    }

    /* 2. COMPACT HUD (Fixing Huge Text) */
    body.tactical-mode #tactical-hud {
        padding: 5px 10px !important; /* Less internal space */
        margin-top: 0 !important;
        border-bottom-width: 1px !important;
    }

    body.tactical-mode .hud-row {
        gap: 5px !important;
        margin-bottom: 2px !important;
    }

    /* Shrink Labels */
    body.tactical-mode .hud-label {
        width: auto !important; /* Let them shrink */
        font-size: 0.65rem !important;
        margin-right: 5px;
    }

    /* Shrink Values (The "Action" Text) */
    body.tactical-mode #hud-action-text,
    body.tactical-mode #hud-status-text {
        font-size: 0.8rem !important; /* Match status size */
        white-space: nowrap; /* Prevent wrapping */
        overflow: hidden;
        text-overflow: ellipsis;
    }

    /* Hide the huge "1/3" counter on mobile to save space if needed, 
       OR just make it tiny */
    body.tactical-mode #hud-step-counter {
        font-size: 1rem !important;
        right: 10px !important;
    }

    /* 3. RE-CALCULATE TOP PADDING (Fixing the Gap) */
    /* Since Header + HUD are now smaller, pull the page content UP */
    body.tactical-mode main {
        /* 50px (Header) + 50px (HUD) + 20px gap */
       /* padding-top: 75px !important;*/
    }

    /* 4. COMPACT MAIN CARD (Fixing Cut-off Button) */
    body.tactical-mode .landing-content-overlay {
        padding: 1.5rem 1rem !important; /* Reduce massive padding */
        margin-top: 0 !important;
        width: 95% !important; /* Maximize width */
    }

    /* Shrink the big "Re-Run" Title */
    body.tactical-mode .landing-title-problem {
        font-size: 1.5rem !important;
        margin-bottom: 0.5rem !important;
    }

    /* Shrink the Subtitle */
    body.tactical-mode .landing-title-solution {
        font-size: 0.7rem !important;
        line-height: 1.2 !important;
    }

    /* Tighten Input spacing */
    body.tactical-mode .landing-input {
        padding: 10px 0 10px 30px !important;
        font-size: 0.9rem !important;
    }

    /* Ensure the button fits */
    body.tactical-mode .landing-cta-primary {
        padding: 1rem !important;
        margin-top: 10px !important; /* Less gap above button */
    }
}


/* =================================================================== */
/* === FIX: REMOVE GAP & SNAP TO TOP ================================= */
/* =================================================================== */

/* 1. Stop centering the card vertically */
body.tactical-mode .landing-page-wrapper {
    justify-content: flex-start !important; /* Push content to top */
    padding-top: 0 !important; /* Remove wrapper padding */
    min-height: auto !important; /* Let it shrink if needed */
}

/* 2. Define the precise start point for the content */
/* This value determines the gap between HUD and Card */
body.tactical-mode main {
    /* 
       Calculation: 
       Header Height (~70px) + 
       HUD Height (~90px) + 
       Desired Gap (10px) 
       = ~170px
    */
/*    padding-top: 170px !important;*/
}

/* 3. Mobile Adjustment */
@media (max-width: 768px) {
    body.tactical-mode main {
        /* Mobile Header (~50px) + Mobile HUD (~60px) + Gap (10px) */
/*        padding-top: 120px !important;*/
    }
}


body.tactical-mode main {
    padding-top: 0 !important; /* JS will overwrite this */
    transition: padding-top 0.1s ease; /* Smooth adjustment */
}

/* Ensure the card has no top margin pushing it away */
body.tactical-mode .landing-page-wrapper,
body.tactical-mode .landing-content-overlay {
    margin-top: 0 !important;
    padding-top: 0 !important; /* The card content starts immediately */
}






/* =================================================================== */
/* === TACTICAL MODE: UNIFIED MASTER HEADER ========================== */
/* =================================================================== */

/* 1. The Master Wrapper (The only thing that is fixed) */
body.tactical-mode .tactical-fixed-top {
    display: flex !important;
    flex-direction: column !important;
    justify-content: flex-start !important; /* Pack items to the top */
    height: auto !important; /* Do not stretch to fill arbitrary height */
    padding-bottom: 0 !important; /* Kill any bottom padding */
    border-bottom: none !important; /* Let the HUD provide the final border */
}

/* 2. Reset the Inner Header */
body.tactical-mode .header {
    position: relative !important; /* Not fixed */
    top: auto !important;
    width: 100% !important;
    background-color: transparent !important; /* Let wrapper bg show */
    border-bottom: none !important; /* Remove divider, HUD handles it */
    box-shadow: none !important;
    padding: 0.5rem 1rem !important;
}

/* 3. Reset the HUD */
body.tactical-mode #tactical-hud {
    position: relative !important; /* Not fixed */
    top: auto !important;
    margin-top: 0 !important; /* Snap tight to header */
    border-top: 1px solid #45a29e; /* Divider between Logo area and HUD */
    border-bottom: 2px solid #45a29e;
    margin-bottom: 0 !important;
    flex-grow: 0 !important; /* Do not grow */
    flex-shrink: 0 !important;
    /* Optional: Tighten internal HUD padding further if needed */
    /* padding-bottom: 5px !important; */
    z-index: 1;
}

/* 4. PUSH PAGE CONTENT DOWN EXACTLY THE RIGHT AMOUNT */
/* This is the magic number. It must match height of (Header + HUD). */
body.tactical-mode main {
    padding-top: 150px !important; /* 60px (Header) + 80px (HUD) + 10px buffer */
}

/* Mobile Adjustment */
@media (max-width: 768px) {
    body.tactical-mode main {
        padding-top: 110px !important; /* Smaller on mobile */
    }
}

/* =================================================================== */
/* === TACTICAL HUD: TIGHTENING PATCH ================================ */
/* =================================================================== */

/* 1. Reduce Container Padding */
body.tactical-mode #tactical-hud {
    /* Reduce top/bottom padding to bring borders closer to text */
    padding-top: 8px !important;
    padding-bottom: 8px !important;
    /* Ensure it flexes correctly to fit content tightly */
    display: flex !important;
    flex-direction: column !important;
    justify-content: center !important;
}

/* 2. Remove Margins between Text Rows */
body.tactical-mode .hud-row {
    margin-bottom: 2px !important; /* Tiny gap between Status and Action */
    line-height: 1.1 !important; /* Tighten text line height */
}

    /* 3. Ensure the last row has ZERO margin */
    body.tactical-mode .hud-row:last-child {
        margin-bottom: 0 !important;
    }

/* 4. Tighten the big Action Text */
body.tactical-mode #hud-action-text {
    line-height: 1 !important; /* Prevents text from being taller than it looks */
    display: inline-block;
    margin-top: 2px !important;
}



body.tactical-mode #app {
    padding-top: 0 !important;
    margin-top: 0 !important;
    /* Ensure it fills the screen correctly */
    width: 100%;
    min-height: 100vh;
    /* Ensure it behaves as a clean container */
    display: block !important;
}




/* =================================================================== */
/* === TACTICAL MODE: MICRO ACTION BUTTONS =========================== */
/* =================================================================== */

/* 1. Micro Button Base */
body.tactical-mode .btn-micro {
    font-size: 0.6rem !important; /* Tiny text */
    padding: 2px 6px !important; /* Very tight padding */
    min-width: auto !important; /* Allow shrinking */
    width: auto !important;
    height: auto !important;
    line-height: 1 !important;
    margin: 0 2px !important; /* Tiny gap between buttons */
    border: 1px solid rgba(69, 162, 158, 0.4) !important; /* Dim border */
    background-color: transparent !important;
    color: rgba(69, 162, 158, 0.8) !important; /* Dim text */
}

    /* 2. Micro Icons */
    body.tactical-mode .btn-micro .icon {
        width: 10px !important;
        height: 10px !important;
        margin-right: 3px !important;
        fill: currentColor;
    }

    /* 3. Hover State (Light up) */
    body.tactical-mode .btn-micro:hover {
        background-color: rgba(69, 162, 158, 0.2) !important;
        color: #66fcf1 !important; /* Bright Cyan */
        border-color: #66fcf1 !important;
        box-shadow: 0 0 5px rgba(102, 252, 241, 0.3) !important;
    }

/* 4. Tighter Wrapper */
body.tactical-mode .guide-actions-wrapper {
    gap: 2px !important;
    margin-left: auto !important; /* Push to right of card header if needed */
}


/* 1. Set the Main Container to fill the exact available screen space */
body.tactical-mode .operation-results-container {
    /* 
       Calculation:
       100vh (Total Screen)
       - 130px (Top Padding / Header & HUD space)
       - 50px (Bottom Footer / Home Button space)
       = Remaining space for the table
    */
    height: calc(100vh - 130px - 50px) !important;
    display: flex !important;
    flex-direction: column !important;
    overflow: hidden !important; /* Prevent double scrollbars */
    margin-top: 0 !important;
    padding-bottom: 0 !important;
}

/* 2. Force the Scrollable List to consume all that available space */
body.tactical-mode .alternatives-list-scrollable {
    flex-grow: 1 !important; /* Grow to fill the container */
    height: 100% !important;
    overflow-y: auto !important; /* Enable scrolling INSIDE this box */
    padding-bottom: 20px !important; /* Add breathing room at the bottom of list */
    /* Ensure background is consistent */
    background-color: #0b0c10 !important;
}


/* =================================================================== */
/* === FIX: GUIDE MODAL FULL VERTICAL STRETCH ======================== */
/* =================================================================== */

/* 1. Force the Overlay to be full screen */
body.tactical-mode .guide-modal-overlay {
    height: 100vh !important;
    align-items: stretch !important; /* Force children to stretch */
    padding: 0 !important;
}

/* 2. Force the Content Box to fill the Overlay */
body.tactical-mode .guide-modal-content {
    height: 100% !important;
    max-height: 100% !important;
    width: 100% !important;
    max-width: 100% !important;
    display: flex !important;
    flex-direction: column !important;
    /* Ensure the black background covers the WHOLE screen */
    background-color: #0b0c10 !important;
    /* Remove borders that constrain the box size visually */
    border: none !important;
    border-left: 1px solid #45a29e !important; /* Keep side borders */
    border-right: 1px solid #45a29e !important;
    /* Clear the Header/HUD area */
    padding-top: 150px !important;
}

/* 3. Force the Scrollable Body to Expand */
body.tactical-mode .guide-modal-body {
    flex-grow: 1 !important; /* Take up all remaining space */
    height: auto !important;
    min-height: 0 !important; /* Critical for flex scrolling */
    /* Padding to ensure content isn't hidden behind the bottom Dock */
    padding-bottom: 140px !important;
}

/* 4. Mobile Adjustment for Top Padding */
@media (max-width: 768px) {
    body.tactical-mode .guide-modal-content {
        padding-top: 110px !important;
    }
}



/* =================================================================== */
/* === FIX: IOS NOTCH PADDING & STICKY HEADER ======================== */
/* =================================================================== */

/* 1. Fix the Master Header to the top & Add Safe Area Padding */
body.tactical-mode .tactical-fixed-top {
    position: fixed !important; /* Forces it to stay at the top */
    top: 0;
    left: 0;
    width: 100%;
    z-index: 10001;
    /* BACKGROUND: Must cover the status bar area */
    background-color: #0b0c10 !important;
    /* IOS FIX: Add padding equal to the device's notch height */
    padding-top: env(safe-area-inset-top) !important;
}

/* 2. Push the Page Content down dynamically */
/* We need to add the standard header height PLUS the safe area height */
body.tactical-mode main {
    /* 
       160px = Your standard Desktop header height
       + env(...) = The extra space needed for the iPhone notch
    */
    padding-top: calc(160px + env(safe-area-inset-top)) !important;
}

/* 3. Mobile Specific Height Adjustment */
@media (max-width: 768px) {
    body.tactical-mode main {
        /* 120px = Your standard Mobile header height */
        padding-top: calc(120px + env(safe-area-inset-top)) !important;
    }
}

/* 4. Ensure Guide Modal also respects the Notch */
body.tactical-mode .guide-modal-content {
    /* Push the guide content down so it starts below the header+notch */
    padding-top: calc(150px + env(safe-area-inset-top)) !important;
}

@media (max-width: 768px) {
    body.tactical-mode .guide-modal-content {
        padding-top: calc(120px + env(safe-area-inset-top)) !important;
    }
}



/* =================================================================== */
/* === FIX: GUIDE MODAL FULL SCREEN & IOS SAFE AREA ================== */
/* =================================================================== */

/* 1. The Overlay: Fixed to Viewport, Full Height */
body.tactical-mode .guide-modal-overlay {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    width: 100vw !important;
    height: 100vh !important;
    /* Z-INDEX STRATEGY: 
       Master Header is 10001. 
       We set this to 10000 so the Header stays VISIBLE on top of the guide. 
    */
    z-index: 10000 !important;
    background-color: #0b0c10 !important; /* Solid background to hide page behind */
    padding: 0 !important;
    margin: 0 !important;
}

/* 2. The Content Container: Padded for Header + Notch */
body.tactical-mode .guide-modal-content {
    width: 100% !important;
    height: 100% !important;
    display: flex !important;
    flex-direction: column !important;
    /* BACKGROUND: Match the tactical body */
    background-color: #0b0c10 !important;
    border: none !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    /* 
       PADDING CALCULATION:
       Pushes the guide content down so it starts exactly under the header.
       Includes the iOS Safe Area (Notch).
    */
    padding-top: calc(160px + env(safe-area-inset-top)) !important;
}

/* 3. Mobile Specific Height Adjustment */
@media (max-width: 768px) {
    body.tactical-mode .guide-modal-content {
        /* Smaller header on mobile means less padding needed */
        padding-top: calc(120px + env(safe-area-inset-top)) !important;
    }
}

/* 4. The Scrollable Body: Fills remaining space */
body.tactical-mode .guide-modal-body {
    flex-grow: 1 !important;
    height: auto !important;
    overflow-y: auto !important; /* Internal scrolling only */
    -webkit-overflow-scrolling: touch; /* Smooth scroll on iOS */
    /* Bottom Padding for Navigation Dock */
    padding-bottom: 140px !important;
}

/* =================================================================== */
/* === TACTICAL MODE: FULL SCREEN GUIDE LAYOUT (PERFECT FIT) ========= */
/* =================================================================== */

/* 1. The Overlay/Container - Locked to Screen */
body.tactical-mode .guide-modal-overlay,
body.tactical-mode .guide-modal-content {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    width: 100vw !important;
    height: 100vh !important;
    margin: 0 !important;
    border: none !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    background-color: #0b0c10 !important; /* Deep Black Base */
    /* Layout Logic */
    display: flex !important;
    flex-direction: column !important; /* Stack Header -> Body */
    /* Z-INDEX: Sit just below the Master Header (10001) */
    z-index: 10000 !important;
    /* PADDING TOP: This is the "Magic Number" */
    /* It pushes the Guide Header down so it starts exactly where the Master Header ends */
    /* Desktop: ~160px + Notch */
    padding-top: calc(160px + env(safe-area-inset-top)) !important;
    padding-bottom: 0 !important;
}

/* Mobile Padding Adjustment */
@media (max-width: 768px) {
    body.tactical-mode .guide-modal-content {
        /* Mobile: ~120px + Notch */
        padding-top: calc(120px + env(safe-area-inset-top)) !important;
    }
}

/* 2. The Guide Header - Fixed Height, Full Width */
body.tactical-mode .guide-modal-header {
    flex-shrink: 0 !important; /* Never collapse */
    width: 100% !important;
    /* Visuals */
    background-color: #1f2833 !important; /* Distinct panel color */
    border-bottom: 2px solid #45a29e !important;
    padding: 15px 20px !important;
    /* Ensure it sits at the top of the content area */
    position: relative !important;
    z-index: 2 !important;
}

/* 3. The Guide Body - Fills ALL remaining space */
body.tactical-mode .guide-modal-body {
    flex-grow: 1 !important; /* Expand to fill the screen */
    height: auto !important; /* Allow flex to control height */
    /* Internal Scrolling */
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch;
    /* Content Padding */
    padding: 20px !important;
    /* Bottom Spacing for Navigation Dock */
    /* Dock is ~80px, give it 140px clearance */
    padding-bottom: 140px !important;
    background-color: #0b0c10 !important;
}



/* =================================================================== */
/* === FIX: CONTENT SPACING & SCROLLING ============================== */
/* =================================================================== */

/* 1. Reset the Main Page Wrapper */
.app-content-wrapper {
    width: 100%;
    min-height: 100vh;
    box-sizing: border-box;
}

/* 2. Adjust the Results Container to fit in the remaining space */
body.tactical-mode .operation-results-container {
    /* 
       We removed the margin/padding from here because 
       the wrapper div now handles the push-down.
       We just need to fit the remaining height.
    */
    margin-top: 0 !important;
    padding-top: 0 !important;
    /* Calculate remaining height: 100vh - Header(180px) - Footer(50px) */
    height: calc(100vh - 180px - 50px) !important;
}

/* 3. Mobile Adjustment */
@media (max-width: 768px) {
    /* Adjust wrapper padding for smaller mobile header */
    .app-content-wrapper {
        /* If using inline style in Razor, this CSS might be overridden, 
           so the Razor logic needs to be smart or we use !important here */
    }

    body.tactical-mode .operation-results-container {
        /* Mobile calculation: 100vh - MobileHeader(130px) - Footer(50px) */
        height: calc(100vh - 130px - 50px) !important;
    }
}

/* Desktop Spacing */
.tactical-spacer {
    padding-top: 180px;
}

/* Mobile Spacing */
@media (max-width: 768px) {
    .tactical-spacer {
        padding-top: 300px; /* Smaller gap for mobile header */
    }
}