html, body {
    font-family: 'Helvetica Neue', Helvetica, Arial, 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;
}

/* --- 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: #0d6efd; /* 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: #0d6efd; /* 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 #0d6efd;*/ /* 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: #0d6efd; /* 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 */
}

.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;
    background-color: black;
    border-color: #1861ac;
}

@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 #0d6efd; /* 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%;
    font-family: 'Arial', sans-serif;
    margin: 0;
    background-color: white; /* Body background is black */
    color: #fff;
    overflow-x: hidden;
}

.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: #ffffff; /* Give it a solid background */
    box-shadow: 0 2px 4px rgba(0,0,0,0.1); /* Add a subtle shadow */
}

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

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

    .main-title {
        font-size: 1rem;
    }

    .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: 1em;
    font-weight: bold;
    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 */
}

.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 {
    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: #aaa; /* 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: 1000;
}

.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;
}

.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 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: wrap; /* Allows items to wrap to the next line on small screens */
    justify-content: space-between; /* Pushes name to the left and actions to the right */
    align-items: center;
    gap: 0.75rem; /* Adds some space between items when they wrap */
    padding: 0.75rem 1rem;
    /* ... your other existing header styles (background, border, etc.) ... */
}


.operation-resource-name {
    font-weight: 600;
    font-size: 1.1rem;
    color: #333;
    /* On desktop, allow it to grow but not shrink below its content size */
    flex: 1 1 auto;
}

.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;
}

.resource-item-actions {
    display: flex;
    align-items: center;
    gap: 0.5rem; /* Space between the buttons */
    flex-shrink: 0; /* Prevents the button group from shrinking and wrapping itself */
}

@media (max-width: 767.98px) {
    .operation-resource-header {
        /* Change the main direction to vertical */
        flex-direction: column;
        /* Align items to the start (left) of the container */
        align-items: flex-start;
    }

    .operation-resource-name {
        margin-bottom: 0.75rem; /* Add space between the name and the buttons below it */
    }

    .resource-item-actions {
        width: 100%; /* Make the button container take the full width */
        justify-content: flex-start; /* Align buttons to the start */
        flex-wrap: wrap; /* Allow the buttons themselves to wrap if needed */
    }
}

.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 #0d6efd; */
    /* color: #0d6efd; */
}

    .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;
    line-height: 1.2;
    white-space: nowrap;
    vertical-align: middle;
    background-color: black;
    color: white;
}


.get-alts-button { /* Keep */
    padding: 0.25rem 0.6rem;
    font-size: 0.8rem;
    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 {
    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: #0d6efd;
    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: #0d6efd; /* 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 #0d6efd; */
}
/* 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.75em;
    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: 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 */
}


.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: 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 */
}

.resources-required-label {
    width: 100%;
    font-size: 1.5rem; /* Adjust size as needed */
    font-weight: 600; /* 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: 1rem; /* Adjust size as needed */
    font-weight: 600; /* 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: 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: #0d6efd; /* 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: #0d6efd; /* 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;
}

.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: 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;
}

.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: #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;
}

.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: 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;
}

.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.75rem 1.5rem; /* 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: xx-small; /* Applied to labels */
    font-weight: 600;
    color: black;
    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; /* <<< 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: #6c757d; /* 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: #0d6efd;
}
/* 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: #0d6efd; */
            /* 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;
    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: 1050; /* High z-index to be on top */
}

.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);
}

.guide-modal-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-bottom: 1px solid #dee2e6;
    padding-bottom: 1rem;
}

.guide-modal-body {
    flex-grow: 1;
    overflow-y: auto; /* Make the guide content scrollable */
    padding: 1rem 0;
}

.guide-modal-footer {
    border-top: 1px solid #dee2e6;
    padding-top: 1rem;
    text-align: right;
}



/*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 */
}

/* 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-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: #ffffff;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.37);
}

.landing-title {
    font-family: 'Courier New', Courier, monospace;
    text-align: left;
    max-width: 800px;
    margin: 0 auto 2rem auto;
    font-weight: 700;
    line-height: 1.6;
    /* --- Default styles for Desktop / Tablet --- */
    width: 90%;
    padding: 1.5rem;
    font-size: clamp(1.5rem, 4vw, 2.2rem);
}

/* --- 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: 0.95rem;
        /*
         * 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: 0.85rem; /* 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: 800; /* 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;
}

/* Your existing .placeholder-container should work well here */
.placeholder-container {
    flex-grow: 1;
}

.landing-input {
    width: 100%;
    padding: 0.75rem 1.25rem;
    font-size: 1.1rem;
    background-color: rgba(255, 255, 255, 0.1);
    border: 1px solid rgba(255, 255, 255, 0.2);
    color: #ffffff;
    border-radius: 8px;
    transition: all 0.3s ease;
}

    .landing-input::placeholder {
        color: rgba(255, 255, 255, 0.5);
    }

    .landing-input:focus {
        background-color: rgba(255, 255, 255, 0.2);
        border-color: #4dabf7; /* A light blue to indicate focus */
        box-shadow: 0 0 0 3px rgba(77, 171, 247, 0.3);
        outline: none;
    }

.landing-cta-button {
    padding: 0.75rem 1.5rem;
    font-size: 1.1rem;
    font-weight: 600;
    background-color: #228be6; /* A strong, professional blue */
    color: white;
    border: none;
    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 */
}

.landing-content-overlay {
    position: relative;
    z-index: 2;
    background-color: rgba(10, 25, 41, 0.75);
    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: #ffffff;
}


.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 rgba(255, 255, 255, 0.2);
    color: #ffffff;
    border-radius: 8px;
    transition: all 0.3s ease;
}

    .landing-input:focus {
        background-color: rgba(255, 255, 255, 0.15);
        border-color: #4dabf7;
        box-shadow: 0 0 0 3px rgba(77, 171, 247, 0.3);
        outline: none;
    }

.placeholder-container .animated-placeholder {
    padding: 0.8rem 1.25rem;
    font-size: 1.1rem;
    color: rgba(255, 255, 255, 0.5);
    text-align: left;
}




/* =================================================================== */
/* Landing Page CTA Button Styles (Unified & Animated)
/* =================================================================== */

/* The container for BOTH buttons */
.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 {
    /* Layout */
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.8rem; /* Space between text and icon wrapper */
    flex-shrink: 0;
    /* Appearance */
    border-radius: 50px; /* 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: #228be6; /* Strong blue */
    color: white;
    /* Apply the blue pulse animation constantly */
    animation: pulse-blue 2s infinite;
}

    .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);
    }


/* --- 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);
    }


    /* --- '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: #2ECC71; /* Highlight with green border */
        color: #ffffff; /* 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-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 rgba(46, 204, 113, 0.4);
    }

    70% {
        box-shadow: 0 0 0 10px rgba(46, 204, 113, 0);
    }

    100% {
        box-shadow: 0 0 0 0 rgba(46, 204, 113, 0);
    }
}


/* Trusted Sources Section */
.trusted-sources-section {
    width: 100%;
    background-color: #f8f9fa; /* Light grey to separate it */
    margin-top: 10px;
    padding: 3rem 0;
    flex-shrink: 0; /* Prevent this section from shrinking */
}


.trusted-sources-title {
    text-align: center;
    font-size: clamp(1rem, 3vw, 1.25rem); /* Responsive font size */
    font-weight: 500;
    color: #6c757d;
    margin-bottom: 2rem;
    text-transform: uppercase;
    letter-spacing: 1.5px;
}

.logos-carousel {
    /* ... (Your existing carousel styles are good) ... */
    position: relative;
    width: 100%;
    mask-image: linear-gradient(to right, rgba(0,0,0,0) 0%, rgba(0,0,0,1) 10%, rgba(0,0,0,1) 90%, rgba(0,0,0,0) 100%);
    -webkit-mask-image: linear-gradient(to right, rgba(0,0,0,0) 0%, rgba(0,0,0,1) 10%, rgba(0,0,0,1) 90%, rgba(0,0,0,0) 100%);
}

.logos-slide {
    display: inline-flex;
    animation: scroll 40s linear infinite;
    align-items: center;
}


body.static-landing-page {
    background-color: #000;
    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;
}

/* 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%;
}

@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 {
    background-color: black;
    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;
        font-weight: 500;
        display: inline-block; /* Ensures padding and radius apply correctly */
        font-size:xx-small;
    }


.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: 500;
    border: 1px solid transparent;
}

.alt-context-cell {
    white-space: normal; /* Allow this column to wrap */
    font-size: 0.85rem;
    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-weight: 600;
}

.citations-in-table .citation-more-link {
    color: #6c757d;
    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;
}

/* Base style for the cell itself */
.alt-actions-cell {
    display: flex; /* Use flexbox to control button alignment */
    gap: 0.5rem; /* Default space between buttons */
}


/* --- 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: "";
        }
}


/* --- Mobile First (Default): Stacked Card View --- */
.responsive-alternatives-list {
    width: 100%;
}

.responsive-table-header {
    display: none; /* Hide desktop header on mobile */
}

.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 */
}

.alt-responsive-row .alt-cell:last-child {
    border-bottom: none;
}

/* 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 first row (name) on mobile */
.alt-name-cell {
    justify-content: flex-start;
    font-size: 1.1rem;
    font-weight: bold;
}

    .alt-name-cell::before {
        display: none; /* Don't show a "Alternative:" label */
    }


/* --- Desktop View (Wide Screens): Grid Table Layout --- */
@media (min-width: 992px) {
    .responsive-table-header {
        display: grid;
        /* UPDATED: Added a new column size for "Needs" */
        grid-template-columns: 2.5fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr;
        gap: 0.75rem;
        padding: 0.5rem 1rem;
        border-bottom: 2px solid #dee2e6;
        text-transform: uppercase;
        font-size: 0.75rem;
        font-weight: 600;
        color: #6c757d;
    }

    .alt-responsive-row {
        display: grid;
        /* CRITICAL: This MUST match the header's grid definition */
        grid-template-columns: 2.5fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr;
        gap: 0.75rem;
        border-bottom: 1px solid #dee2e6;
        align-items: center; /* Better vertical alignment */
    }

    /* Hide the mobile pseudo-labels on desktop */
    .alt-cell[data-label]::before {
        display: none;
    }

    .alt-cell {
        padding: 0.75rem;
        text-align: left;
        border-bottom: none;
        align-items: 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.5em;
        }

        .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 */
        }

        .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;
    color: #0d6efd; /* Link blue */
    text-decoration: underline;
    cursor: pointer;
    font-size: inherit;
    font-weight: 600;
}

    .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: #0d6efd;
            text-decoration: underline;
        }

    .citation-modal-list .citation-number {
        font-weight: bold;
        color: #495057;
        margin-right: 0.5rem;
    }

    .citation-modal-list .citation-link-icon {
        font-size: 0.8em;
        margin-left: 0.5rem;
        color: #6c757d;
        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;
}

    .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;
}

.actions-and-filter-toggle {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

/* 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;
}

.filter-category {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.filter-category-label {
    font-weight: 600;
    font-size: 0.9rem;
    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;
    }

    .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 */
        }
}

/*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: #f0f2f5;
}

/* --- 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.75rem 1.25rem;
    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.75rem 1.25rem;
        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.75rem 1.25rem;
    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;
    }