/* Import THICCCBOI fonts */
@font-face {
    font-family: 'THICCCBOI';
    src: url('../fonts/THICCCBOI-BLACK.TTF') format('truetype');
    font-weight: 900;
    font-style: normal;
}

@font-face {
    font-family: 'THICCCBOI';
    src: url('../fonts/THICCCBOI-BOLD.TTF') format('truetype');
    font-weight: 700;
    font-style: normal;
}

@font-face {
    font-family: 'THICCCBOI';
    src: url('../fonts/THICCCBOI-SEMIBOLD.TTF') format('truetype');
    font-weight: 600;
    font-style: normal;
}

@font-face {
    font-family: 'THICCCBOI';
    src: url('../fonts/THICCCBOI-MEDIUM.TTF') format('truetype');
    font-weight: 500;
    font-style: normal;
}

@font-face {
    font-family: 'THICCCBOI';
    src: url('../fonts/THICCCBOI-REGULAR.TTF') format('truetype');
    font-weight: 400;
    font-style: normal;
}

@font-face {
    font-family: 'THICCCBOI';
    src: url('../fonts/THICCCBOI-LIGHT.TTF') format('truetype');
    font-weight: 300;
    font-style: normal;
}

/* Import techy fonts from Google Fonts */
@import url('https://fonts.googleapis.com/css2?family=Orbitron:wght@400;500;700;900&family=Exo+2:wght@300;400;500;600;700&family=Share+Tech+Mono&display=swap');

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html, body {
    height: 100%;
    overflow-x: hidden;
}

body {
    font-family: 'THICCCBOI', 'Exo 2', 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    background: #140F13;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    color: #ffffff;
    position: relative;
}

/* Override body background for coders page */
body.coders-page {
    background: #131530;
}

/* Override body background for account page */
body.account-page {
    background: #131530;
}

.container {
    width: 100%;
    margin: 0 auto;
    padding: 20px;
    flex: 1;
}

.header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 0px;
    position: relative;
    padding-top: 20px;
    height: auto;
}

.header-left {
    text-align: center;
    flex: 1;
    position: relative;
    left: auto;
    top: auto;
    transform: none;
    z-index: 10; /* Ensure it stays above other content */
    width: 100%;
    max-width: none;
}

.subtitle-container {
    text-align: center;
    margin-bottom: 40px;
    margin-top: 0px;
    width: 100%;
}

.header-right {
    display: flex;
    align-items: center;
}

/* Ensure header-right is visible on coders page */
.coders-page .header-right {
    display: flex !important;
    align-items: center !important;
    visibility: visible !important;
    opacity: 1 !important;
}

.user-avatar {
    position: fixed;
    top: 20px;
    right: 20px;
    display: flex;
    flex-direction: column;
    align-items: center;
    cursor: pointer;
    padding: 0.5rem;
    border-radius: 8px;
    transition: background-color 0.3s ease;
    z-index: 1000;
    text-decoration: none;
    color: inherit;
}

/* Force user avatar to be visible on desktop */
@media (min-width: 769px) {
    .user-avatar {
        display: flex !important;
        position: fixed !important;
        top: 20px !important;
        right: 20px !important;
        z-index: 1000 !important;
        visibility: visible !important;
        opacity: 1 !important;
    }
}

/* Allow scroll hiding on screens <= 1230px - OUTSIDE media query */
@media (max-width: 1230px) {
    .user-avatar-container.hidden-on-scroll {
        opacity: 0 !important;
        pointer-events: none !important;
        visibility: hidden !important;
    }
}

/* Additional override for any potential conflicts */
body .user-avatar {
    display: flex !important;
    position: fixed !important;
    top: 20px !important;
    right: 20px !important;
    z-index: 1000 !important;
    visibility: visible !important;
    opacity: 1 !important;
}

/* Removed - consolidated into media query above */

/* Specific override for coders page */
.coders-page .user-avatar {
    display: flex !important;
    position: fixed !important;
    top: 20px !important;
    right: 20px !important;
    z-index: 1000 !important;
    visibility: visible !important;
    opacity: 1 !important;
}

/* Removed - consolidated into media query above */

.user-avatar:hover {
    background-color: rgba(255, 255, 255, 0.1);
}

.avatar-circle {
    width: 50px;
    height: 50px;
    border-radius: 50%;
    background-color: #3CBBB2;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-weight: bold;
    font-size: 1.5rem;
    margin-bottom: 0.5rem;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
    position: relative;
}

.avatar-circle::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 40px;
    height: 40px;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='white'%3E%3Cpath d='M12 12c2.21 0 4-1.79 4-4s-1.79-4-4-4-4 1.79-4 4 1.79 4 4 4zm0 2c-2.67 0-8 1.34-8 4v2h16v-2c0-2.66-5.33-4-8-4z'/%3E%3C/svg%3E");
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
}

/* User Avatar Dropdown Styles */
.user-avatar-container {
    position: relative;
    display: inline-block;
}

.dropdown-menu {
    position: fixed !important;
    top: 75px !important;
    right: 20px !important;
    background-color: white;
    box-shadow: 0 8px 16px rgba(0, 0, 0, 0.1);
    border-radius: 8px;
    min-width: 280px;
    opacity: 0;
    visibility: hidden;
    transform: translateY(-10px) !important;
    transition: all 0.3s ease;
    z-index: 1001;
    border: 1px solid #e0e0e0;
    overflow: hidden;
}

.dropdown-menu.show {
    opacity: 1;
    visibility: visible;
    transform: translateY(15px) !important;
}

/* Ensure avatar dropdown appears below the avatar (dashboard and coders pages) */
.dashboard-page #dashDropdownMenu,
.coders-page #dropdownMenu {
    top: 90px !important;
}

.dropdown-item {
    display: flex;
    align-items: center;
    padding: 12px 16px;
    text-decoration: none;
    color: #333;
    font-weight: 500;
    font-size: 14px;
    transition: background-color 0.2s ease;
}

/* Dashboard avatar dropdown: only add separators after email and after settings */
#dropdownMenu .dropdown-item { border-bottom: none; }
#dropdownMenu .dropdown-item:nth-child(2),
#dropdownMenu .dropdown-item:nth-child(4) { border-bottom: 1px solid #f0f0f0; }
#dropdownMenu .dropdown-item:last-child { border-bottom: none; }

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

.dropdown-item:hover {
    background-color: #f8f9fa;
    color: #3CBBB2;
}

.dropdown-icon {
    margin-right: 10px;
    font-size: 16px;
    width: 16px;
    text-align: center;
    color: #3CBBB2;
}

.user-name {
    font-family: 'Exo 2', sans-serif;
    color: white;
    font-weight: 500;
    font-size: 0.8rem;
    text-align: center;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.5);
    letter-spacing: 0.5px;
}

.logo {
    font-family: 'THICCCBOI', 'Orbitron', monospace;
    font-size: 3.5em;
    font-weight: 900;
    color: white;
    text-shadow: 0 2px 4px rgba(0,0,0,0.3);
    margin-bottom: 10px;
    letter-spacing: 2px;
    display: flex;
    justify-content: center;
    overflow: hidden;
}



.logo-cod {
    color: #3CBBB2;
}

/* Coders page specific styles */
.coders-logo-container {
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 15px;
    width: 100%;
    max-width: none;
    margin-bottom: 10px;
}



.coders-title {
    font-family: 'THICCCBOI', 'Orbitron', monospace;
    font-size: 2.5em;
    font-weight: 900;
    color: white;
    text-shadow: 0 2px 4px rgba(0,0,0,0.3);
    letter-spacing: 8px;
    line-height: 1.2;
    width: 100%;
    max-width: none;
    white-space: nowrap;
    margin: 0;
}

.coders-subtitle {
    font-family: 'THICCCBOI', 'Exo 2', sans-serif;
    color: #3CBBB2;
    font-size: 1.5em;
    font-weight: 800;
    width: 100%;
    max-width: none;
    word-wrap: break-word;
    line-height: 1.4;
    letter-spacing: 3px;
    text-align: center;
    white-space: nowrap;
    margin: 0;
}

.logo-onix {
    color: #38b7e1;
}

.subtitle {
    font-family: 'THICCCBOI', 'Exo 2', sans-serif;
    color: rgba(255,255,255,0.9);
    font-size: 1.1em;
    font-weight: 700;
    width: 100%;
    max-width: 100%;
    word-wrap: break-word;
    line-height: 1.4;
    letter-spacing: 0.5px;
}

.card {
    background: rgba(255, 255, 255, 0.95);
    border-radius: 20px;
    box-shadow: 0 20px 40px rgba(0,0,0,0.1);
    padding: 30px;
    margin-bottom: 0px;
    backdrop-filter: blur(10px);
    color: #333;
    width: 100%;
    max-width: none;
}

.section-title {
    font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", "Liberation Sans", sans-serif;
    font-weight: 500;
    font-size: 1.75rem;
    color: #212529;
    margin-bottom: 1rem;
    text-align: center;
    position: relative;
    letter-spacing: 1px;
}

.section-title::before {
    content: '';
    width: 4px;
    height: 30px;
    background: linear-gradient(45deg, #0ddcae, #38b7e1);
    border-radius: 2px;
}

.upload-instructions {
    font-family: 'THICCCBOI', 'Exo 2', sans-serif;
    color: #140F13;
    font-size: 0.9em;
    font-weight: 400;
    text-align: center;
    margin-bottom: 40px;
    line-height: 0.6;
    letter-spacing: 0.3px;
}

.upload-area {
    border: 2px dashed #5d7ce9;
    border-radius: 15px;
    padding: 40px;
    text-align: center;
    background: white;
    transition: all 0.3s ease;
    cursor: pointer;
    margin-bottom: 20px;
}

.upload-area:hover {
    border-color: #3CBBB2;
    background: #EEF2FD;
}

.upload-area.dragover {
    border-color: #3CBBB2;
    background: #EEF2FD;
    transform: scale(1.02);
}

.upload-icon {
    font-size: 3em;
    color: #5d7ce9;
    margin-bottom: 15px;
}

.upload-text {
    font-family: 'THICCCBOI', 'Exo 2', sans-serif;
    font-size: 1.2em;
    font-weight: 700;
    color: #140F13;
    margin-bottom: 0.5rem;
    text-align: center;
}

.upload-subtext {
    font-family: 'THICCCBOI', 'Exo 2', sans-serif;
    font-size: 0.9em;
    font-weight: 400;
    color: #140F13;
    text-align: center;
}

.file-input {
    display: none;
}

.file-list {
    margin-top: 20px;
}

.coders-page .file-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 15px;
    background: #EEF2FD;
    border: 1px solid #5D7CE9;
    border-radius: 8px;
    margin-bottom: 8px;
    color: #140F13;
    font-family: 'THICCCBOI', sans-serif;
    font-weight: 400;
    min-height: 60px;
}

.file-info {
    display: flex;
    align-items: center;
    gap: 10px;
}

.file-name {
    font-weight: 600;
    color: #140F13;
}

.file-icon {
    color: #3CBBB2;
    font-size: 1.2em;
}

.remove-btn {
    background: #5D7CE9;
    color: white;
    border: none;
    border-radius: 50%;
    width: 28px;
    height: 28px;
    cursor: pointer;
    font-size: 14px;
    font-weight: bold;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    min-width: 28px;
    min-height: 28px;
}

.remove-btn:hover {
    background: #4A6BD8;
}

.coders-page .remove-file {
    background: #c55560;
    color: white;
    border: none;
    border-radius: 50%;
    width: 24px;
    height: 24px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 16px;
    font-weight: bold;
    transition: background-color 0.2s ease;
    margin-left: auto;
    text-align: center;
    line-height: 1;
    padding: 0;
    min-width: 24px;
    min-height: 24px;
    flex-shrink: 0;
}

.coders-page .remove-file:hover {
    background: #d33c4b;
}

.textarea-container {
    margin-top: 0px;
    position: relative;
}

.expand-text-btn {
    position: absolute;
    top: 10px;
    right: 10px;
    background: #5D7CE9;
    color: white;
    border: none;
    border-radius: 50%;
    width: 32px;
    height: 32px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 16px;
    transition: all 0.2s ease;
    z-index: 10;
    text-align: center;
    line-height: 1;
    padding: 0;
}

.expand-text-btn:hover {
    background: #4A6BD8;
    transform: scale(1.1);
}

/* Modal Styles */
.text-modal-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.7);
    display: none;
    justify-content: center;
    align-items: center;
    z-index: 1000;
}

.text-modal-overlay.is-visible {
    display: flex;
}

.text-modal {
    background: white;
    border-radius: 15px;
    padding: 30px;
    width: 90%;
    max-width: 1200px;
    height: 80%;
    max-height: 800px;
    display: flex;
    flex-direction: column;
    position: relative;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
}

.text-modal-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 20px;
    padding-bottom: 15px;
    border-bottom: 2px solid #5D7CE9;
}

.text-modal-title {
    font-family: 'THICCCBOI', 'Exo 2', sans-serif;
    font-size: 1.5em;
    font-weight: 700;
    color: #140F13;
}

.close-modal-btn {
    background: #5D7CE9;
    color: white;
    border: none;
    border-radius: 50%;
    width: 36px;
    height: 36px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
    transition: all 0.2s ease;
}

.close-modal-btn:hover {
    background: #4A6BD8;
    transform: scale(1.1);
}

/* Modal copy button container and button */
.modal-copy-container {
    text-align: center;
    margin-top: 12px;
}

.modal-copy-btn {
    background: #3cbbb2;
    color: white;
    box-shadow: 0 4px 15px rgba(60, 187, 178, 0.3);
    padding: 8px 14px;
    margin-top: 15px;
    border: none;
    border-radius: 6px;
    cursor: pointer;
    font-family: 'THICCCBOI', 'Exo 2', sans-serif;
}

.modal-copy-btn:hover {
    background: #0a726b;
    box-shadow: 0 6px 20px rgba(60, 187, 178, 0.4);
}

.text-modal-textarea {
    flex: 1;
    width: 100%;
    min-height: 400px;
    padding: 20px;
    border: 2px solid #5D7CE9;
    border-radius: 10px;
    font-family: 'THICCCBOI', 'Exo 2', sans-serif;
    font-size: 1em;
    font-weight: 400;
    resize: none;
    line-height: 1.6;
    letter-spacing: 0.3px;
    background: white;
    color: #140F13;
}

.text-modal-textarea:focus {
    outline: none;
    border-color: #4A6BD8;
    box-shadow: 0 0 0 3px rgba(93, 124, 233, 0.1);
}

.textarea-label {
    font-family: 'THICCCBOI', 'Exo 2', sans-serif;
    font-size: 1.1em;
    font-weight: 700;
    color: #140F13;
    margin-bottom: 0.5rem;
    display: block;
}

.text-input {
    width: 100%;
    min-height: 300px;
    max-height: 800px;
    padding: 15px;
    border: 1px solid #5D7CE9;
    border-radius: 10px;
    font-family: 'THICCCBOI', 'Exo 2', sans-serif;
    font-size: 0.95em;
    font-weight: 400;
    resize: vertical;
    transition: border-color 0.2s;
    line-height: 1.5;
    letter-spacing: 0.3px;
    background: white;
    color: #140F13;
}

.text-input:focus {
    outline: none;
    border-color: #1ECEC2;
    box-shadow: 0 0 0 3px rgba(30, 206, 194, 0.1);
}

/* Prevent body scroll when modal is open */
body.no-scroll {
    overflow: hidden;
}

/* Fallback expansion without inline styles */
.text-input.expanded,
.updated-documentation-textarea.expanded {
    height: 300px;
}

/* Centered flex wrapper for buttons */
.centered-button-container {
    display: flex;
    justify-content: center;
    margin-top: 20px;
}

/* Updated Documentation display */
.updated-documentation-display {
    margin-top: 20px;
    padding: 15px;
    border: 1px solid #dee2e6;
    border-radius: 5px;
    background-color: #f8f9fa;
    position: relative;
}

.updated-documentation-header {
    margin-bottom: 10px;
    color: #495057;
}

.updated-documentation-header.collapsible-header {
    cursor: pointer;
    user-select: none;
    transition: color 0.2s ease;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.updated-documentation-header.collapsible-header:hover {
    color: #5D7CE9;
}

.collapse-icon {
    transition: transform 0.2s ease;
    font-weight: bold;
}

.collapsible-content {
    transition: all 0.3s ease;
}

.updated-documentation-textarea {
    min-height: 300px!important;
    font-family: monospace;
    padding-bottom: 20px;
}

.char-count {
    font-family: 'THICCCBOI', 'Exo 2', sans-serif;
    text-align: right;
    font-size: 0.85em;
    font-weight: 400;
    color: #140F13;
    margin-top: 5px;
    font-style: italic;
}

.process-btn {
    font-family: 'THICCCBOI', 'Orbitron', monospace;
    background: #5D7CE9;
    color: white;
    border: none;
    padding: 15px 30px;
    font-size: 1.1em;
    font-weight: 700;
    border-radius: 10px;
    cursor: pointer;
    transition: all 0.3s ease;
    margin: 0 auto;
    display: flex;
    align-items: center;
    justify-content: center;
    width: auto;
    min-width: 400px;
    max-width: 800px;
    letter-spacing: 1px;
    text-transform: uppercase;
    position: relative;
    z-index: 1;
    line-height: 1;
}

.process-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 20px rgba(93, 124, 233, 0.3);
}

.process-btn:disabled {
    opacity: 0.6;
    cursor: not-allowed;
    transform: none;
}

.loading {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    margin: 20px 0;
}

.spinner {
    width: 20px;
    height: 20px;
    border: 2px solid rgba(255, 255, 255, 0.2);
    border-top: 2px solid #3CBBB2;
    border-radius: 50%;
    animation: spin 1s linear infinite;
}

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

.procedure-section {
    margin-bottom: 0px;
    background: white;
    border-radius: 15px;
    padding: 20px;
    box-shadow: 0 4px 6px rgba(0,0,0,0.1);
    color: #140F13;
    overflow: visible;
}

.procedure-header {
    font-family: 'THICCCBOI', 'Exo 2', sans-serif;
    font-size: 1.3em;
    font-weight: 900;
    color: #140F13;
    margin-bottom: 1rem;
    text-align: center;
    letter-spacing: 0.5px;
}

/* Make h4 and h5 elements with procedure-header class use the same styling */
h4.procedure-header,
h5.procedure-header {
    font-family: 'THICCCBOI', 'Exo 2', sans-serif;
    font-size: 1.3em;
    font-weight: 900;
    color: #140F13;
    margin-bottom: 1rem;
    text-align: center;
    letter-spacing: 0.5px;
}

/* Procedure header with expand/collapse button */
.procedure-header {
    font-family: 'THICCCBOI', 'Exo 2', sans-serif;
    font-size: 1.3em;
    font-weight: 900;
    color: #140F13;
    margin-bottom: 1rem;
    text-align: center;
    letter-spacing: 0.5px;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 15px;
    z-index: 0;
}

.procedure-header-text {
    flex: 1;
    text-align: center;
    font-size: 1.1rem;
    z-index: 0;
}

.procedure-expand-btn {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: #5D7CE9;
    color: white;
    border: none;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
    font-weight: bold;
    transition: all 0.3s ease;
    flex-shrink: 0;
    position: relative;
    z-index: 10;
}

.procedure-expand-btn:hover {
    background: #4A6BD8;
    transform: scale(1.1);
}

.procedure-expand-btn:active {
    transform: scale(0.95);
}

/* CPT + Modifier Container */
.cpt-modifier-container {
    background: #f9fafb;
    border: 1px solid rgba(0, 0, 0, 0.1);
    border-radius: 12px;
    padding: 20px;
    margin-bottom: 0px;
    transition: all 0.3s ease;
    cursor: pointer;
}

.cpt-modifier-container:hover {
    background: #f3f4f6;
    transform: translateY(-2px);
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
}

/* Collapsed state */
.cpt-modifier-container.cpt-modifier-collapsed {
    padding: 15px;
}

.cpt-modifier-container.cpt-modifier-collapsed:hover {
    background: #e9e9e9;
}

/* Collapsed badges */
.cpt-modifier-badges {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 10px;
}

/* Hide badges when container is expanded (no cpt-modifier-collapsed class) */
.cpt-modifier-container:not(.cpt-modifier-collapsed) .cpt-modifier-badges {
    display: none !important;
}

/* Hide ICD-10-PCS badges when container is expanded (no icd10-pcs-collapsed class) */
.icd10-pcs-container:not(.icd10-pcs-collapsed) .icd10-pcs-badges {
    display: none !important;
}

/* Hide ICD-10-PCS original content when container is collapsed */
.icd10-pcs-container.icd10-pcs-collapsed .icd10-pcs-original-content {
    display: none !important;
}

/* ICD-10-PCS Container */
.icd10-pcs-container {
    background: #f0f8f4;
    border: 1px solid rgba(34, 197, 94, 0.2);
    border-radius: 12px;
    padding: 20px;
    margin-top: 15px;
    margin-bottom: 20px;
    transition: all 0.3s ease;
    cursor: pointer;
}

.icd10-pcs-container:hover {
    background: #e6f7ea;
    transform: translateY(-2px);
    box-shadow: 0 4px 20px rgba(34, 197, 94, 0.1);
}

/* MSDRG Container */
.msdrg-container {
    margin: 20px 0;
    border: 1px solid #e0e7ff;
    border-radius: 8px;
    background: linear-gradient(135deg, #f8faff 0%, #e0e7ff 100%);
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.msdrg-header {
    background: linear-gradient(135deg, #4f46e5 0%, #7c3aed 100%);
    color: white;
    padding: 15px 20px;
    border-radius: 8px 8px 0 0;
    margin: 0;
}

.msdrg-header h4 {
    margin: 0;
    font-size: 1.1rem;
    font-weight: 600;
    display: flex;
    align-items: center;
    gap: 8px;
}

.msdrg-content {
    padding: 20px;
}

.msdrg-result-item {
    margin: 12px 0;
    padding: 8px 0;
    border-bottom: 1px solid #e5e7eb;
}

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

.msdrg-result-item strong {
    color: #374151;
    font-weight: 600;
    margin-right: 8px;
}

.drg-code {
    background: #dbeafe;
    color: #1e40af;
    padding: 4px 8px;
    border-radius: 4px;
    font-weight: 600;
    font-family: 'Courier New', monospace;
}

.drg-description {
    color: #374151;
    font-style: italic;
}

.drg-weight {
    background: #ecfdf5;
    color: #065f46;
    padding: 4px 8px;
    border-radius: 4px;
    font-weight: 600;
}

.drg-glos, .drg-alos, .drg-los {
    color: #7c2d12;
    font-weight: 600;
}

.drg-mdc {
    color: #6b46c1;
    font-weight: 600;
    font-style: italic;
}

.drg-ms-indicator {
    background: #fef3c7;
    color: #92400e;
    padding: 4px 8px;
    border-radius: 4px;
    font-weight: 600;
}

.drg-cc-mcc {
    color: #dc2626;
    font-weight: 600;
}

.drg-hac-status {
    color: #7c2d12;
    font-weight: 600;
}

.drg-change {
    background: #fef2f2;
    color: #dc2626;
    padding: 4px 8px;
    border-radius: 4px;
    font-weight: 600;
    font-family: 'Courier New', monospace;
}

.complications-list {
    margin: 8px 0 0 20px;
    padding: 0;
}

.complications-list li {
    margin: 4px 0;
    color: #dc2626;
}

.msdrg-success-indicator {
    margin-top: 15px;
    padding: 10px;
    background: #f0fdf4;
    border: 1px solid #bbf7d0;
    border-radius: 6px;
    color: #166534;
    font-weight: 500;
    display: flex;
    align-items: center;
    gap: 8px;
}

.msdrg-error {
    margin-top: 15px;
    padding: 10px;
    background: #fef2f2;
    border: 1px solid #fecaca;
    border-radius: 6px;
    color: #dc2626;
    font-weight: 500;
    display: flex;
    align-items: center;
    gap: 8px;
}

.msdrg-raw-section {
    margin-top: 15px;
}

.msdrg-raw-header {
    color: #6b7280;
    font-size: 0.9rem;
    font-weight: 500;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.msdrg-raw-header:hover {
    color: #374151;
}

.msdrg-raw-content {
    margin: 0;
    font-size: 11px;
    line-height: 1.4;
    white-space: pre-wrap;
    word-wrap: break-word;
}

/* Collapsed state */
.icd10-pcs-container.icd10-pcs-collapsed {
    padding: 15px;
}

.icd10-pcs-container.icd10-pcs-collapsed:hover {
    background: #d1f7d8;
}

/* Collapsed badges */
.icd10-pcs-badges {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 10px;
}

/* ICD-10-PCS Options */
.icd10-pcs-options {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.icd10-pcs-option {
    display: flex;
    align-items: center;
    padding: 10px;
    border: 1px solid rgba(5, 150, 105, 0.2);
    border-radius: 8px;
    margin-bottom: 8px;
    cursor: pointer;
    transition: all 0.2s ease;
    position: relative;
}

.icd10-pcs-option:hover {
    background-color: #f0fdf4;
    border-color: #059669;
}

.icd10-pcs-option.selected {
    background-color: #ecfdf5;
    border-color: #059669;
}

.collapse-badge {
    display: inline-flex;
    align-items: center;
    padding: 6px 12px;
    border-radius: 20px;
    font-size: 0.9rem;
    font-weight: 500;
    font-family: 'THICCCBOI', 'Exo 2', sans-serif;
}

.collapse-badge .badge-label {
    font-weight: 700;
    margin-right: 6px;
}

.collapse-badge.cpt-badge {
    background: #e3f2fd;
    color: #1976d2;
    border: 1px solid #bbdefb;
}

.collapse-badge.modifier-badge {
    background: rgba(93, 124, 233, 0.2);
    color: #5D7CE9;
    border: 1px solid rgba(93, 124, 233, 0.3);
}

.collapse-badge.icd10-pcs-badge {
    background: rgba(5, 150, 105, 0.1);
    color: #059669;
    border: 1px solid rgba(5, 150, 105, 0.3);
}

.cpt-modifier-title {
    font-family: 'THICCCBOI', 'Exo 2', sans-serif;
    font-size: 1rem;
    font-weight: 700;
    color: #5D7CE9;
    text-align: center;
    margin: 0 0 15px 0;
    letter-spacing: 0.5px;
    border-bottom: 2px solid rgba(93, 124, 233, 0.2);
    padding-bottom: 10px;
}

.icd10-pcs-title {
    font-family: 'THICCCBOI', 'Exo 2', sans-serif;
    font-size: 1rem;
    font-weight: 700;
    color: #059669;
    text-align: center;
    margin: 0 0 15px 0;
    letter-spacing: 0.5px;
    border-bottom: 2px solid rgba(5, 150, 105, 0.2);
    padding-bottom: 10px;
}

.cpt-options {
    display: flex;
    flex-direction: column;
    gap: 10px;
    overflow: visible;
    transition: all 0.3s ease;
}

/* Hide all CPT options except the selected one in collapsed state */
.cpt-options.collapsed .cpt-option {
    display: none;
}

/* Show only the selected option in collapsed state */
.cpt-options.collapsed .cpt-option.selected {
    display: flex !important;
    border: 2px solid #5D7CE9;
    background: rgba(93, 124, 233, 0.1);
    border-radius: 8px;
    padding: 8px;
    margin: 0;
    justify-content: flex-start;
    align-items: center;
}

/* Ensure radio button is visible and properly styled in collapsed state */
.cpt-options.collapsed .cpt-option.selected input[type="radio"] {
    margin-right: 12px;
    transform: scale(1.2);
    opacity: 1 !important;
    visibility: visible !important;
    display: block !important;
    accent-color: #5D7CE9;
}

/* Show all options when expanded */
.cpt-options.expanded .cpt-option {
    display: flex;
}

/* Style for collapsed CPT options when a selection is made */
.cpt-options.collapsed {
    cursor: pointer;
    border: 2px solid rgba(255, 255, 255, 0.3);
    border-radius: 8px;
    padding: 8px;
    transition: transform 0.2s ease;
    background: rgba(255, 255, 255, 0.1);
}

.cpt-options.collapsed:hover {
    transform: translateY(-1px);
}

/* Prevent individual option hover effects when container is collapsed */
.cpt-options.collapsed .cpt-option.selected:hover {
    background: rgba(93, 124, 233, 0.1);
    border-color: #5D7CE9;
    justify-content: flex-start;
    align-items: center;
}

/* Style for collapsed CPT options when a selection is made and the first option is selected */
.cpt-options.collapsed .cpt-option:first-child.selected {
    border-color: #5D7CE9;
    background: rgba(93, 124, 233, 0.1);
}

.cpt-options.collapsed .cpt-option:first-child.selected ~ .cpt-option {
    display: none;
}

.cpt-option {
    display: flex;
    align-items: center;
    padding: 12px 15px;
    border: 2px solid rgba(255, 255, 255, 0.3);
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.2s ease;
    background: rgba(255, 255, 255, 0.1);
    position: relative;
    color: #333;
    z-index: 10;
}

.cpt-option:hover {
    border-color: #5D7CE9;
    background: rgba(93, 124, 233, 0.1);
}

.cpt-option.selected {
    border-color: #5D7CE9;
    background: rgba(93, 124, 233, 0.1);
}

.cpt-option input[type="radio"] {
    margin-right: 12px;
    transform: scale(1.2);
    -webkit-appearance: radio;
    -moz-appearance: radio;
    appearance: radio;
}

.cpt-option-label {
    font-family: 'THICCCBOI', 'Exo 2', sans-serif;
    font-size: 1.1rem;
    font-weight: 400;
    line-height: 1.4;
    cursor: pointer;
    flex: 1;
}

.cpt-option .rvu-info {
    margin-top: 4px;
    font-size: 0.85rem;
    color: #666;
    font-weight: 400;
}

.cpt-option .rvu-info small {
    display: block;
    line-height: 1.3;
}

.cpt-code {
    font-family: 'Share Tech Mono', monospace;
    font-weight: 600;
    color: #5D7CE9;
    letter-spacing: 1px;
}

/* Tooltip styles */

.cpt-tooltip {
    position: absolute;
    bottom: 100%;
    left: 50%;
    transform: translateX(-50%);
    background: #2c3e50;
    color: white;
    padding: 8px 12px;
    border-radius: 6px;
    font-size: 0.85rem;
    white-space: nowrap;
    max-width: 300px;
    white-space: normal;
    text-align: center;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
    opacity: 0;
    visibility: hidden;
    transition: all 0.3s ease;
    z-index: 99999;
    pointer-events: none;
    margin-bottom: 8px;
}

.cpt-tooltip::after {
    content: '';
    position: absolute;
    top: 100%;
    left: 50%;
    transform: translateX(-50%);
    border: 6px solid transparent;
    border-top-color: #2c3e50;
}

.cpt-option:hover .cpt-tooltip {
    opacity: 1;
    visibility: visible;
    transform: translateX(-50%) translateY(-8px);
}

/* Hide tooltip when cpt-options is collapsed */
.cpt-options.collapsed .cpt-option:hover .cpt-tooltip {
    opacity: 0;
    visibility: hidden;
}

/* ICD-10-PCS Tooltip styles - same as CPT tooltips */
.icd10-pcs-tooltip {
    position: absolute;
    bottom: 100%;
    left: 50%;
    transform: translateX(-50%);
    background: #2c3e50;
    color: white;
    padding: 8px 12px;
    border-radius: 6px;
    font-size: 0.85rem;
    white-space: nowrap;
    max-width: 300px;
    white-space: normal;
    text-align: center;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
    opacity: 0;
    visibility: hidden;
    transition: all 0.3s ease;
    z-index: 99999;
    pointer-events: none;
    margin-bottom: 2px;
}

.icd10-pcs-tooltip::after {
    content: '';
    position: absolute;
    top: 100%;
    left: 50%;
    transform: translateX(-50%);
    border: 6px solid transparent;
    border-top-color: #2c3e50;
}

.icd10-pcs-option:hover .icd10-pcs-tooltip {
    opacity: 1;
    visibility: visible;
    transform: translateX(-50%) translateY(-8px);
}

/* Hide tooltip when icd10-pcs is collapsed */
.icd10-pcs-collapsed .icd10-pcs-option:hover .icd10-pcs-tooltip {
    opacity: 0;
    visibility: hidden;
}



.error-message {
    background: #fed7d7;
    color: #c53030;
    padding: 12px 16px;
    border-radius: 8px;
    margin: 10px 0;
    border-left: 4px solid #e53e3e;
}

.success-message {
    background: #c6f6d5;
    color: #2f855a;
    padding: 12px 16px;
    border-radius: 8px;
    margin: 10px 0;
    border-left: 4px solid #38a169;
}

.hidden {
    display: none !important;
}

.upload-card {
    transition: all 0.3s ease;
    cursor: pointer;
    margin-top: 20px; /* Add margin to ensure proper spacing from header */
}

.upload-card.collapsed {
    padding: 15px 30px;
    min-height: auto;
}

.upload-card.collapsed .upload-content {
    display: none;
}

.upload-card.collapsed .upload-instructions {
    display: none;
}

.upload-card.collapsed .section-title {
    margin-bottom: 0;
    font-size: 1.5em;
    color: #000000;
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100%;
    font-family: 'THICCCBOI', 'Orbitron', monospace;
    font-weight: 700;
    text-transform: none;
    letter-spacing: 1px;
}

.upload-card.collapsed .section-title::before {
    display: none;
}

.upload-card.collapsed.processing .section-title {
    color: #5D7CE9;
}

.upload-card.collapsed.processing .section-title::before {
    background: linear-gradient(45deg, #5D7CE9, #4A6BD8);
    animation: processing-pulse 1.5s infinite;
}

@keyframes processing-pulse {
    0%, 100% { opacity: 0.8; }
    50% { opacity: 1; }
}

.upload-card.collapsed:hover {
    background: #5D7CE9;
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(0,0,0,0.1);
}

.upload-card.collapsed:hover .section-title {
    color: white;
}

.connection-dots {
    display: flex;
    flex-direction: column;
    align-items: center;
    margin: 20px 0;
    gap: 8px;
}

.dot {
    width: 8px;
    height: 8px;
    background: #3CBBB2;
    border-radius: 50%;
    animation: pulse 2s infinite;
}

.dot:nth-child(2) {
    animation-delay: 0.3s;
}

.dot:nth-child(3) {
    animation-delay: 0.6s;
}

.dot.static {
    animation: none;
    opacity: 0.7;
}

/* Container-level toggle to make all dots static */
.connection-dots.static-dots .dot {
    animation: none !important;
    opacity: 0.7;
}

@keyframes pulse {
    0%, 100% { opacity: 0.3; transform: scale(0.8); }
    50% { opacity: 1; transform: scale(1.2); }
}

@media (max-width: 768px) {
    .container {
        padding: 10px;
        width: 100%;
        max-width: 90%;
        margin: 0 auto;
        min-height: 100vh;
        display: flex;
        flex-direction: column;
    }
    
    .card {
        padding: 20px;
    }
    
    .logo {
        font-size: 2em;
    }
    
    .header {
        height: auto;
        min-height: 20px;
        margin-bottom: 5px;
        padding-top: 10px;
    }
    
    /* Hide logo, title, and subtitle on mobile to save space */
    .coders-logo-container {
        display: none;
    }
    
    .subtitle-container {
        display: none;
    }
    
    .subtitle {
        font-size: 1em; /* Slightly smaller on mobile */
    }
    
    .upload-card {
        margin-top: 0;
        flex: 1;
        display: flex;
        flex-direction: column;
        min-height: auto;
    }
    
    .upload-content {
        flex: 1;
        display: flex;
        flex-direction: column;
        min-height: auto;
        padding-bottom: 20px; /* Reduced padding since button is no longer fixed */
    }
    
    .upload-grid-layout {
        display: grid !important;
        grid-template-columns: 1fr !important;
        grid-template-rows: auto auto auto !important;
        gap: 20px !important;
        margin-bottom: 20px !important;
        align-items: stretch !important;
    }
    
    .patient-section {
        grid-column: 1 !important;
        grid-row: 1 !important;
        width: 100% !important;
        min-height: 220px;
        height: 100%;
        padding: 20px;
    }
    
    .upload-section {
        grid-column: 1 !important;
        grid-row: 2 !important;
        width: 100% !important;
        min-height: 220px;
        height: 100%;
        padding: 20px;
    }
    
    .textarea-section {
        grid-column: 1 !important;
        grid-row: 3 !important;
        width: 100% !important;
        min-height: 300px;
        height: 100%;
        padding: 20px;
    }
    
    .empty-section {
        display: none !important;
    }
    
    .patient-list {
        max-height: 200px;
    }
    
    .file-upload-section {
        min-height: 400px;
        height: 100%;
        padding: 20px;
    }
}

/* Upload Grid Layout Styles */
.upload-grid-layout {
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-template-rows: auto auto;
    gap: 30px;
    margin-bottom: 30px;
    align-items: stretch;
}

/* Patient Section - Top Left */
.coders-page .patient-section {
    grid-column: 1;
    grid-row: 1;
    background: rgba(255, 255, 255, 0.95);
    border-radius: 15px;
    padding: 25px;
    box-shadow: 0 4px 6px rgba(0,0,0,0.1);
    color: #140F13;
    display: flex;
    flex-direction: column;
    min-height: 280px;
    height: 100%;
}

/* Upload Section - Top Right */
.coders-page .upload-section {
    grid-column: 2;
    grid-row: 1;
    background: rgba(255, 255, 255, 0.95);
    border-radius: 15px;
    padding: 25px;
    box-shadow: 0 4px 6px rgba(0,0,0,0.1);
    color: #140F13;
    display: flex;
    flex-direction: column;
    min-height: 280px;
    height: 100%;
}

/* Textarea Section - Bottom (spans 2 columns) */
.textarea-section {
    grid-column: 1 / -1;
    grid-row: 2;
    background: rgba(255, 255, 255, 0.95);
    border-radius: 15px;
    padding: 25px;
    box-shadow: 0 4px 6px rgba(0,0,0,0.1);
    color: #140F13;
    display: flex;
    flex-direction: column;
    min-height: 300px;
    height: 100%;
    transition: background-color 0.3s ease;
    position: relative;
}

.textarea-section.has-sufficient-data {
    background: #E0F5F0;
    color: #ffffff;
}

.textarea-section.has-sufficient-data .char-count {
    color: #ffffff;
}

.textarea-section.has-sufficient-data .text-input {
    background: white;
    color: #140F13;
    border-color: #5D7CE9;
}

.textarea-section.has-sufficient-data .text-input:focus {
    border-color: #E0F5F0;
    box-shadow: 0 0 0 3px rgba(30, 206, 194, 0.1);
}

/* Empty section for providers template */
.empty-section {
    grid-column: 2;
    grid-row: 1;
    background: transparent;
    border-radius: 15px;
    padding: 25px;
    display: flex;
    flex-direction: column;
    min-height: 400px;
    height: 100%;
}

.button-container {
    text-align: center;
    margin-top: 20px;
    display: none; /* Hidden by default, shown when criteria are met */
    gap: 20px;
    justify-content: center;
    align-items: flex-end;
    position: relative;
    bottom: 0;
    width: 100%;
}

.add-patient-btn {
    font-family: 'THICCCBOI', 'Exo 2', sans-serif;
    background: #3cbbb2;
    color: white;
    border: none;
    padding: 15px 30px;
    font-size: 1.1em;
    font-weight: 700;
    border-radius: 10px;
    cursor: pointer;
    transition: all 0.3s ease;
    letter-spacing: 1px;
    text-transform: uppercase;
    position: relative;
    z-index: 1;
    width: auto;
    min-width: 400px;
    max-width: 800px;
    height: auto;
    line-height: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto;
}

.add-patient-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 20px rgba(56, 183, 225, 0.3);
    background: #28a59d;
}

.add-patient-btn:disabled {
    opacity: 0.6;
    cursor: not-allowed;
    transform: none;
}

/* Desktop layout - consolidated */
@media (min-width: 769px) {
    /* Ensure user avatar is visible on desktop */
    .user-avatar {
        display: flex !important;
        position: fixed !important;
        top: 20px !important;
        right: 20px !important;
        z-index: 1000 !important;
    }
    
    /* Removed - consolidated into media query at top of file */
    
    .process-btn {
        position: relative;
        bottom: auto;
        left: auto;
        transform: none;
        width: auto;
        min-width: 400px;
        max-width: 800px;
        box-shadow: none;
        margin: 20px auto 0 auto;
    }
    
    .upload-content {
        padding-bottom: 20px;
    }
    
    .upload-grid-layout {
        display: grid !important;
        grid-template-columns: 1fr 1fr !important;
        grid-template-rows: auto auto !important;
        gap: 30px !important;
        margin-bottom: 0px !important;
        align-items: stretch !important;
    }
    
    .patient-section {
        grid-column: 1 !important;
        grid-row: 1 !important;
        min-height: 280px !important;
    }
    
    .upload-section {
        grid-column: 2 !important;
        grid-row: 1 !important;
        min-height: 280px !important;
    }
    
    .textarea-section {
        grid-column: 1 / -1 !important;
        grid-row: 2 !important;
        min-height: 300px !important;
    }
    
    .empty-section {
        grid-column: 2 !important;
        grid-row: 1 !important;
        min-height: 400px !important;
    }
}

/* Stack buttons vertically on smaller screens */
@media (max-width: 1010px) {
    .button-container {
        flex-direction: column;
        gap: 15px;
        align-items: center;
        padding: 0 10px;
    }
    
    .add-patient-btn {
        min-width: 400px !important;
        max-width: 800px !important;
        width: auto !important;
    }
    
    .process-btn {
        min-width: 400px !important;
        max-width: 800px !important;
        width: auto !important;
    }
}

/* Prevent overflow on very small screens */
@media (max-width: 500px) {
    .button-container {
        gap: 10px;
        padding: 0 5px;
    }
    
    .add-patient-btn {
        min-width: auto !important;
        max-width: 100% !important;
        width: 100% !important;
        padding: 12px 15px;
        font-size: 0.9em;
    }
    
    .process-btn {
        min-width: auto !important;
        max-width: 100% !important;
        width: 100% !important;
        padding: 12px 15px;
        font-size: 0.9em;
        position: relative !important;
        margin: 0 auto !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
    }
}

.subsection-title {
    font-family: 'THICCCBOI', 'Exo 2', sans-serif;
    font-size: 1.2em;
    font-weight: 700;
    color: #140F13;
    margin-bottom: 20px;
    text-align: center;
    letter-spacing: 0.5px;
}



.search-container {
    position: relative;
    margin-bottom: 20px;
}

.search-input {
    width: 100%;
    padding: 12px 40px 12px 15px;
    border: 1px solid #5D7CE9;
    border-radius: 8px;
    font-family: 'THICCCBOI', 'Exo 2', sans-serif;
    font-size: 0.9em;
    background: rgba(255, 255, 255, 0.9);
    color: #140F13;
    transition: border-color 0.2s;
}

.search-input:focus {
    outline: none;
    border-color: #3CBBB2;
    box-shadow: 0 0 0 3px rgba(13, 220, 174, 0.1);
}

.search-icon {
    position: absolute;
    right: 12px;
    top: 50%;
    transform: translateY(-50%);
    font-size: 1.1em;
    color: #5D7CE9;
    pointer-events: none;
}

.coders-page .patient-list {
    flex: 1;
    max-height: 300px;
    overflow-y: auto;
    border: 1px solid rgba(93, 124, 233, 0.3);
    border-radius: 8px;
    background: rgba(255, 255, 255, 0.8);
    margin-bottom: 20px;
}

.coders-page .patient-item {
    padding: 12px 15px;
    border-bottom: 1px solid rgba(93, 124, 233, 0.1);
    cursor: pointer;
    transition: background-color 0.2s;
    font-family: 'THICCCBOI', 'Exo 2', sans-serif;
    font-size: 0.9em;
}

.coders-page .patient-item:hover {
    background: rgba(93, 124, 233, 0.1);
}

.coders-page .patient-item.selected {
    background: rgba(93, 124, 233, 0.2);
    border-left: 3px solid #5D7CE9;
}

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

.patient-name {
    font-weight: 600;
    color: #140F13;
    margin-bottom: 4px;
}

.patient-details {
    font-size: 0.8em;
    color: #666;
    display: flex;
    gap: 15px;
}

.patient-mrn, .patient-dob {
    font-weight: 500;
}

.coders-page .selected-patient {
    background: #EEF2FD;
    border: 1px solid #5D7CE9;
    border-radius: 8px;
    padding: 15px;
    min-height: 80px;
}

.coders-page .no-patient-selected {
    color: #666;
    font-style: italic;
    text-align: center;
    font-family: 'THICCCBOI', 'Exo 2', sans-serif;
}

.patient-selected-info {
    color: #000;
    font-family: 'THICCCBOI', 'Exo 2', sans-serif;
}

.patient-selected-name {
    font-weight: 700;
    font-size: 1.1em;
    margin-bottom: 8px;
}

.coders-page .patient-selected-details {
    font-size: 0.9em;
    color: #000;
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    margin-top: 8px;
}

.coders-page .patient-badge {
    background: #5D7CE9;
    color: white;
    padding: 4px 8px;
    border-radius: 12px;
    font-size: 0.8em;
    font-weight: 600;
    display: inline-flex;
    align-items: center;
    gap: 4px;
}

.coders-page .patient-badge.mrn {
    background: #5D7CE9;
}

.coders-page .patient-badge.dob {
    background: #3cbbb2;
}

/* Date badges (From/To) in selected patient card */
.coders-page .patient-badge.date-badge {
    background: rgb(56, 183, 225);
    cursor: pointer;
    user-select: none;
}
.coders-page .patient-badge.date-badge:hover {
    filter: brightness(0.95);
}

.patient-selected-info {
    position: relative;
}

.remove-patient-btn {
    position: absolute;
    top: 50%;
    right: 5px;
    transform: translateY(-50%);
    background: #5D7CE9;
    color: white;
    border: none;
    border-radius: 50%;
    width: 24px;
    height: 24px;
    font-size: 16px;
    font-weight: bold;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background-color 0.2s ease;
}

.remove-patient-btn:hover {
    background: #4A6BD8;
}

.textarea-container {
    flex: 1;
    display: flex;
    flex-direction: column;
    min-height: 0;
}
    
.text-input {
    flex: 1;
    min-height: 200px;
    resize: none;
}
    
    /* Mobile-specific process button styling  - only for mobile devices */
@media (max-width: 768px) {
    .button-container {
        flex-direction: column;
        gap: 15px;
        align-items: center;
        position: relative;
        bottom: 0;
    }
    
    .add-patient-btn {
        min-width: 400px !important;
        max-width: 800px !important;
        padding: 12px 20px;
        font-size: 1em;
        width: auto !important;
        margin-bottom: 0;
    }
    
    .process-btn {
        margin-top: 0;
        position: relative !important;
        bottom: auto !important;
        left: auto !important;
        right: auto !important;
        transform: none !important;
        z-index: auto !important;
        width: auto !important;
        min-width: 400px !important;
        max-width: 800px !important;
        box-shadow: none !important;
        background: #5D7CE9 !important;
        border: none !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        visibility: visible !important;
        opacity: 1 !important;
        margin: 0 auto !important;
        padding: 12px 20px !important;
        font-size: 1em !important;
    }
    
    /* Hide user avatar and name on mobile */
    .user-avatar {
        display: none !important;
    }
}

/* Special handling for screens <= 1230px */
@media (max-width: 1230px) {
    .user-avatar {
        display: flex !important;
        position: fixed !important;
        top: 20px !important;
        right: 20px !important;
        transition: opacity 0.3s ease;
    }
    
    /* Removed - consolidated into media query at top of file */
    
    /* Patient group card mobile adjustments */
    .patient-card {
        padding: 10px;
        margin-bottom: 15px;
    }
    
    .patient-card .upload-grid-layout {
        gap: 10px;
        margin-bottom: 0;
    }
    
    .patient-card .patient-section,
    .patient-card .upload-section,
    .patient-card .textarea-section {
        padding: 10px;
    }
    
    .patient-card .patient-section {
        min-height: 200px;
    }
    
    .patient-card .upload-section {
        min-height: 200px;
    }
    
    .patient-card .textarea-section {
        min-height: 250px;
        padding-bottom: 0;
    }
    
    .patient-card .textarea-container {
        margin-bottom: 0;
        padding-bottom: 0;
    }
    
    .patient-card .text-input {
        margin-bottom: 0;
    }
    
    .patient-card .char-count {
        margin-bottom: 0;
    }
}
    
.upload-area {
    min-height: 120px;
    padding: 20px;
}
    
.file-list {
    max-height: 200px;
    overflow-y: auto;
}
    
.file-item {
    padding: 10px;
    margin-bottom: 8px;
}



.coders-title {
    font-size: 2.5em;
    letter-spacing: 4px;
    white-space: normal;
    word-wrap: break-word;
}

.coders-subtitle {
    font-size: 1.4em;
    letter-spacing: 2px;
    white-space: normal;
    word-wrap: break-word;
}

/* Extra small screens */
@media (max-width: 480px) {
    .container {
        padding: 5px;
        max-width: 95%;
    }
    
    .card {
        padding: 15px;
    }
    
    .upload-area {
        min-height: 100px;
        padding: 15px;
    }
    
    .text-input {
        min-height: 150px;
    }
    
    .button-container {
        gap: 10px;
        padding: 0 10px;
    }
    
    .add-patient-btn {
        min-width: auto !important;
        max-width: 100% !important;
        width: 100% !important;
        padding: 12px 15px;
        font-size: 0.9em;
    }
    
    .process-btn {
        min-width: auto !important;
        max-width: 100% !important;
        width: 100% !important;
        padding: 10px 12px;
        font-size: 0.85em;
        position: relative !important;
        margin: 0 auto !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
    }
}

/* Large desktop button positioning */
@media (min-width: 1231px) {
    /* Ensure user avatar is visible on large desktop (only for screens > 1230px) */
    .user-avatar {
        display: flex !important;
        position: fixed !important;
        top: 20px !important;
        right: 20px !important;
        z-index: 1000 !important;
        opacity: 1 !important;
    }
    
    /* Position buttons closer together near center on wider screens */
    .button-container {
        gap: 10px !important;
        justify-content: center !important;
        align-items: center !important;
        max-width: 900px !important;
        margin: 0 auto !important;
    }
    
    .add-patient-btn,
    .process-btn {
        position: relative !important;
        bottom: auto !important;
        left: auto !important;
        transform: none !important;
        z-index: auto !important;
        width: auto !important;
        min-width: 300px !important;
        max-width: 400px !important;
        margin: 0 !important;
        flex: 0 1 auto !important;
    }
}

/* Responsive container width for smaller screens */
@media (max-width: 1229px) {
    .container {
        max-width: 95%;
    }
}

/* CPT Processing Styles */
/* Loading state for collapsed-modifiers card */
.collapsed-modifiers.loading {
    display: flex;
    align-items: center;
    gap: 12px;
    background: rgba(93, 124, 233, 0.1);
    border-left: 4px solid #5D7CE9;
    color: #333;
    border-radius: 8px;
    box-shadow: 0 2px 8px rgba(93, 124, 233, 0.15);
    animation: loading-pulse 2s ease-in-out infinite;
    font-weight: 500;
    position: relative;
    overflow: hidden;
    min-height: 60px;
}

.collapsed-modifiers.loading::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(93, 124, 233, 0.1), transparent);
    animation: loading-shimmer 2s infinite;
}

.collapsed-modifiers.loading .spinner {
    width: 24px;
    height: 24px;
    border: 3px solid rgba(93, 124, 233, 0.2);
    border-top: 3px solid #5D7CE9;
    border-radius: 50%;
    animation: spin 1s linear infinite;
    flex-shrink: 0;
}

.collapsed-modifiers.loading .loading-text {
    font-weight: 500;
    color: #333;
    font-size: 0.95em;
}

/* Hide selected-modifiers content when parent card is in loading state */
.collapsed-modifiers.loading .selected-modifiers,
.collapsed-modifiers.loading .selected-list {
    display: none !important;
}

/* Smooth transition when loading state is removed */
.collapsed-modifiers {
    transition: background-color 0.3s ease, border-color 0.3s ease, box-shadow 0.3s ease;
}

.collapsed-modifiers:not(.loading) .selected-modifiers {
    animation: fadeIn 0.5s ease-in-out;
}

@keyframes fadeIn {
    from {
        opacity: 0;
        transform: translateY(10px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes loading-pulse {
    0%, 100% { 
        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
        transform: translateY(0);
    }
    50% { 
        box-shadow: 0 6px 20px rgba(93, 124, 233, 0.2);
        transform: translateY(-2px);
    }
}

@keyframes loading-shimmer {
    0% {
        left: -100%;
    }
    100% {
        left: 100%;
    }
}



.modifiers-section,
.no-modifiers-section,
.rvu-section,
.claim-section {
    margin-bottom: 20px;
}

.no-modifiers-section {
    background: rgba(255, 255, 255, 0.05);
    border-radius: 8px;
    border-left: 3px solid #5d7ce9;
    padding: 15px;
    margin-top: 15px;
}

.rvu-section {
    background: rgba(255, 255, 255, 0.05);
    border-radius: 8px;
    border-left: 3px solid #5d7ce9;
    padding: 15px;
    margin-top: 15px;
}

.rvu-section p {
    margin: 8px 0;
    font-family: 'THICCCBOI', 'Exo 2', sans-serif;
    font-size: 1rem;
    font-weight: 400;
    color: #ffffff;
    line-height: 1.5;
}

.rvu-section strong {
    color: #5D7CE9;
    font-weight: 600;
}

.modifiers-section h4,
.no-modifiers-section h4,
.rvu-section h4,
.claim-section h4 {
    font-family: 'THICCCBOI', 'Exo 2', sans-serif;
    font-size: 1.25em;
    font-weight: bolder;
    color: #140F13;
    margin-bottom: 1rem;
    position: relative;
    text-align: center;
    letter-spacing: 0.5px;
}

.modifiers-section h4::before {
    content: '🔧';
    font-size: 1.2em;
}

.no-modifiers-section h4::before {
    content: '🔧';
    font-size: 1.2em;
}

.rvu-section h4::before {
    content: '💰';
    font-size: 1.2em;
}

.claim-section h4::before {
    content: '';
    font-size: 1.2em;
}

.claim-section h4.procedure-header {
    font-family: 'THICCCBOI', 'Exo 2', sans-serif;
    font-size: 1.3em;
    font-weight: 900;
    color: #140F13;
    margin-bottom: 1rem;
    text-align: center;
    letter-spacing: 0.5px;
}

.patient-result-content .claim-section h4.procedure-header {
    font-family: 'THICCCBOI', 'Exo 2', sans-serif;
    font-size: 1.25em;
    font-weight: 900;
    color: #140F13;
    margin-bottom: 1rem;
    text-align: center;
    letter-spacing: 0.5px;
}

.modifiers-section ul {
    list-style: none;
    padding: 0;
}

.modifiers-section li {
    padding: 8px 12px;
    background: rgba(255, 255, 255, 0.05);
    border-radius: 8px;
    margin-bottom: 8px;
    border-left: 3px solid #3CBBB2;
    font-family: 'THICCCBOI', 'Courier New', monospace;
    font-size: 0.9em;
    font-weight: 400;
    color: #140F13;
}

/* Modifiers Checklist Styles */
.modifiers-checklist {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.modifier-checklist-item {
    display: flex;
    align-items: center;
    padding: 8px 12px;
    background: rgba(255, 255, 255, 0.05);
    border-radius: 8px;
    border-left: 3px solid #3CBBB2;
    transition: all 0.2s ease;
}

.modifier-checklist-item:hover {
    background: rgba(93, 124, 233, 0.1);
}

.modifier-checklist-item input[type="checkbox"]:checked + .modifier-checklist-label {
    color: #5D7CE9;
    font-weight: 600;
}

.modifier-checklist-item input[type="checkbox"]:checked {
    accent-color: #5D7CE9;
}

.modifier-checklist-item input[type="checkbox"] {
    margin-right: 12px;
    transform: scale(1.1);
    cursor: pointer;
}

.modifier-checklist-label {
    font-family: 'THICCCBOI', 'Exo 2', sans-serif;
    font-size: 1.1rem;
    font-weight: 400;
    line-height: 1.4;
    cursor: pointer;
    flex: 1;
    color: #140F13;
}

.no-modifiers-section p {
    font-family: 'THICCCBOI', 'Exo 2', sans-serif;
    font-size: 1rem;
    font-weight: 400;
    color: #140F13;
    line-height: 1.5;
    margin-bottom: 0.5rem;
}

.rvu-section p,
.ncci-section p {
    font-family: 'THICCCBOI', 'Exo 2', sans-serif;
    font-size: 1rem;
    font-weight: 400;
    color: #140F13;
    line-height: 1.5;
    margin-bottom: 0.5rem;
}

.rvu-section strong,
.ncci-section strong {
    font-family: 'THICCCBOI', 'Exo 2', sans-serif;
    font-weight: bolder;
    color: #5D7CE9;
}

.valid {
    color: #5D7CE9;
    font-weight: 600;
}

.invalid {
    color: #c55560;
    font-weight: 600;
}

.claim-valid-message {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 12px 16px;
    background: rgba(13, 220, 174, 0.1);
    border: 2px solid #3CBBB2;
    border-radius: 8px;
    margin-bottom: 15px;
    font-family: 'THICCCBOI', 'Exo 2', sans-serif;
    font-size: 1.1rem;
    font-weight: 600;
    color: #3CBBB2;
}

.claim-invalid-message {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px 16px;
    background: #ffecef;
    border: 2px solid #c55560;
    border-radius: 8px;
    margin-bottom: 15px;
    font-family: 'THICCCBOI', 'Exo 2', sans-serif;
    font-size: 1.1rem;
    font-weight: 600;
    color: #f44336;
}

.valid-checkbox {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    background: #3CBBB2;
    color: white;
    border-radius: 50%;
    font-size: 14px;
    font-weight: bold;
}

.invalid-checkbox {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    background: #c55560;
    color: white;
    border-radius: 50%;
    font-size: 14px;
    font-weight: bold;
}

.warning-triangle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    background: #f44336;
    color: white;
    border-radius: 50%;
    font-size: 16px;
    font-weight: bold;
}

.claim-section ul {
    list-style: none;
    padding: 0;
    margin-top: 10px;
}

.claim-section li {
    padding: 6px 10px;
    background: rgba(229, 62, 62, 0.1);
    border-radius: 6px;
    margin-bottom: 6px;
    border-left: 3px solid #e53e3e;
    font-family: 'Courier New', monospace;
    font-size: 0.9em;
    color: #e53e3e;
}

.claim-section {
    cursor: pointer;
    transition: all 0.3s ease;
}

.claim-section:hover {
    background: rgba(255, 255, 255, 0.1);
}

.claim-section.expanded {
    background: rgba(255, 255, 255, 0.05);
    border-radius: 8px;
    padding: 15px;
    margin-top: 15px;
}

.claim-section-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 15px;
}

.claim-section-content {
    display: none;
}

.claim-section.expanded .claim-section-content {
    display: block;
}

.ncci-header,
.medicare-header {
    font-family: 'THICCCBOI', 'Exo 2', sans-serif;
    font-size: 1.1rem;
    font-weight: 600;
    color: #140F13;
    margin: 15px 0 10px 0;
    padding-bottom: 5px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.2);
}

/* Modifier Selection Card Styles */
.modifier-selection-card {
    background: rgba(255, 255, 255, 0.05);
    border-radius: 12px;
    padding: 20px;
    margin-bottom: 20px;
    border: 2px solid rgba(255, 255, 255, 0.1);
    box-shadow: 0 2px 8px rgba(0,0,0,0.1);
    position: relative;
}

.modifier-header-container {
    position: relative;
}

.modifier-header-container .procedure-header {
    text-align: center;
    margin: 0;
}

.collapse-icon {
    position: absolute;
    top: -10px;
    right: -10px;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: #5D7CE9;
    color: white;
    border: none;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
    font-weight: bold;
    transition: all 0.3s ease;
    user-select: none;
    z-index: 10;
}

.collapse-icon:hover {
    background: #4A6BD8;
    transform: scale(1.1);
}

.collapse-icon:active {
    transform: scale(0.95);
}

.modifier-content-container {
    transition: all 0.3s ease;
}

.modifier-selection-card.modifier-collapsed .modifier-content-container {
    display: none;
}

.modifier-selection-card.modifier-collapsed .modifier-header-container {
    display: none;
}

/* Show the collapse icon in collapsed state when it's in the collapsed-modifiers container */
.modifier-selection-card.modifier-collapsed .collapsed-modifiers .collapse-icon {
    display: flex !important;
}

.modifier-selection-card.modifier-collapsed {
    padding: 0;
    position: relative;
}

.collapsed-modifiers {
    margin-top: 5px;
    padding: 15px;
    background: rgba(255, 255, 255, 0.05);
    border-radius: 6px;
    border: 1px solid rgba(255, 255, 255, 0.1);
    position: relative;
    min-height: 50px; /* Ensure minimum height for visibility */
}

/* Hide collapse icon when in loading state */
.collapsed-modifiers.loading {
    padding-right: 15px; /* Reset padding when in loading state */
}

.collapsed-modifiers.loading .collapse-icon {
    display: none !important; /* Hide collapse icon during loading */
}

.collapsed-modifiers .collapse-icon {
    position: absolute;
    top: 10px;
    right: 10px;
    z-index: 10;
}

.modifier-selection-card:not(.modifier-collapsed) .selected-list {
    display: none;
}

.modifier-selection-card h4 {
    font-family: 'THICCCBOI', 'Exo 2', sans-serif;
    font-size: 1.4em;
    font-weight: 900;
    color: #140F13;
    margin-bottom: 1rem;
    text-align: center;
    letter-spacing: 0.5px;
}

.modifier-description {
    font-family: 'THICCCBOI', sans-serif;
    color: #140F13;
    font-size: 1em;
    font-weight: 400;
    margin-bottom: 20px;
    line-height: 1.5;
    text-align: center;
}

.modifier-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 12px;
    margin-bottom: 20px;
}

.modifier-option {
    display: flex;
    align-items: flex-start;
    padding: 12px;
    border: 2px solid rgba(255, 255, 255, 0.1);
    border-radius: 8px;
    background: rgba(255, 255, 255, 0.05);
    transition: all 0.2s ease;
    cursor: pointer;
    position: relative;
}

.modifier-option:hover {
    border-color: #5D7CE9;
    background: rgba(93, 124, 233, 0.1);
}

.modifier-option.recommended {
    border-color: #5D7CE9;
    background: linear-gradient(135deg, rgba(93, 124, 233, 0.1) 0%, rgba(56, 183, 225, 0.1) 100%);
    box-shadow: 0 2px 8px rgba(93, 124, 233, 0.2);
}

.modifier-option.recommended:hover {
    border-color: #38b7e1;
    box-shadow: 0 4px 12px rgba(93, 124, 233, 0.3);
}

.modifier-option input[type="checkbox"] {
    margin-right: 12px;
    margin-top: 2px;
    transform: scale(1.1);
}

.modifier-label {
    font-family: 'THICCCBOI', 'Exo 2', sans-serif;
    font-size: 1.1rem;
    font-weight: 700;
    color: #140F13;
    cursor: pointer;
    flex: 1;
    text-align: left;
    display: flex;
    align-items: flex-start;
    padding-top: 0;
    margin-top: 0;
}

.modifier-code {
    font-family: 'Share Tech Mono', monospace;
    font-weight: 600;
    color: #5D7CE9;
    font-size: 1.2em;
    letter-spacing: 1px;
}

.modifier-desc {
    font-family: 'THICCCBOI', 'Exo 2', sans-serif;
    font-size: 1rem;
    font-weight: 400;
    color: #140F13;
    margin-top: 0.25rem;
    text-align: center;
}

.recommended-badge {
    display: inline-block;
    background: #5d7ce9;
    color: white;
    font-size: 0.7em;
    font-weight: 600;
    padding: 2px 6px;
    border-radius: 10px;
    margin-left: 8px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.rvu-info {
    color: #38b7e1;
    font-size: 0.8em;
    margin-top: 4px;
}

.rvu-info small {
    font-family: 'Courier New', monospace;
}

.selected-modifiers {
    margin-top: 20px;
    padding-top: 15px;
    border-top: 2px solid #38b7e1;
    position: relative;
}

.selected-modifiers::before {
    content: '';
    position: absolute;
    top: 0;
    left: -20px;
    right: -20px;
    height: 2px;
    background: #38b7e1;
}

.selected-modifiers h5 {
    font-family: 'THICCCBOI', 'Exo 2', sans-serif;
    font-size: 1.3em;
    font-weight: 900;
    color: #140F13;
    margin-bottom: 0.5rem;
    text-align: center;
    letter-spacing: 0.5px;
}

.selected-list {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.selected-modifier {
    background: #5D7CE9;
    color: white;
    padding: 8px 14px;
    border-radius: 20px;
    font-size: 0.9em;
    font-weight: 500;
    font-family: 'THICCCBOI', 'Exo 2', sans-serif;
    display: inline-block;
    margin: 2px 4px 2px 0;
    white-space: nowrap;
    max-width: 300px;
    overflow: hidden;
    text-overflow: ellipsis;
}

.total-rvu {
    font-family: 'THICCCBOI', 'Exo 2', sans-serif;
    font-size: 1.2em;
    font-weight: 900;
    color: #140F13;
    text-align: center;
    margin-top: 1rem;
    letter-spacing: 0.5px;
}

.bundled {
    color: #c55560;
    font-weight: 600;
}

/* Patient Group Card Styles */
.patient-card {
    background: #e9e9e9;
    border-radius: 15px;
    padding: 15px;
    margin-bottom: 15px;
    box-shadow: 0 4px 6px rgba(0,0,0,0.1);
    color: #140F13;
    position: relative;
    transition: all 0.3s ease;
    cursor: pointer;
}

/* Remove patient card button */
.patient-result-section .remove-patient-card-btn,
.patient-card .remove-patient-card-btn {
    position: absolute;
    top: 10px;
    right: 10px;
    width: 30px;
    height: 30px;
    border-radius: 50%;
    background-color: #c55560;
    border: none;
    color: white;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 10;
    transition: background-color 0.2s ease;
}

.remove-patient-card-btn:hover {
    background-color: #d33c4b;
}

.remove-icon {
    font-size: 16px;
    font-weight: bold;
    line-height: 1;
    margin-right: 0px;
    margin-top: 0px;
}

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

.patient-card.collapsed {
    padding: 20px;
    min-height: 80px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 2px solid #5D7CE9;
    background-color: #EEF2FD;
    cursor: pointer;
    position: relative;
}

.patient-card.collapsed .patient-group-content {
    display: none;
}

.patient-card.collapsed::before {
    font-family: 'THICCCBOI', 'Exo 2', sans-serif;
    font-size: 1.5em;
    font-weight: 700;
    color: #140F13;
    text-align: center;
    letter-spacing: 1px;
}

/* Remove default content for coders page */
.coders-page .patient-card.collapsed::before {
    content: attr(data-patient-title, "Patient #1");
}

/* Keep default content for other pages */
.patient-card.collapsed::before {
    content: attr(data-patient-title, "Patient #1");
}

.patient-card.collapsed::after {
    content: 'Click to expand';
    position: absolute;
    bottom: 10px;
    right: 20px;
    font-family: 'THICCCBOI', 'Exo 2', sans-serif;
    font-size: 0.8em;
    font-weight: 400;
    color: #d6d6d6;
    font-style: italic;
}

.patient-group-content {
    margin-top: 0;
}

/* Adjust the existing grid layout to work within the patient group card */
.patient-card .upload-grid-layout {
    gap: 15px;
    margin-bottom: 0;
}

.patient-card .patient-section,
.patient-card .upload-section,
.patient-card .textarea-section {
    padding: 15px;
    min-height: auto;
}

.patient-card .patient-section {
    min-height: 250px;
}

.patient-card .upload-section {
    min-height: 250px;
}

.patient-card .textarea-section {
    min-height: 280px;
    padding-bottom: 0;
}

.patient-card .textarea-container {
    margin-bottom: 0;
    padding-bottom: 0;
}

.patient-card .text-input {
    margin-bottom: 0;
}

.patient-card .char-count {
    margin-bottom: 0;
}

/* Multi-patient results styling */
.multi-patient-results {
    display: flex;
    flex-direction: column;
    gap: 30px;
    width: 100%;
}

.patient-result-section {
    background: #ffffff;
    border: 1px solid #e5e7eb;
    border-radius: 12px;
    padding: 24px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
    transition: all 0.3s ease;
    position: relative; /* anchor remove button even when header is hidden */
}

.patient-result-section:hover {
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
    transform: translateY(-2px);
}

.patient-result-section.error {
    border-color: #ef4444;
    background: #fef2f2;
}

.patient-result-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 20px;
    padding-bottom: 16px;
    border-bottom: 2px solid #f3f4f6;
    cursor: pointer;
    transition: background-color 0.2s ease;
    border-radius: 8px;
    padding: 12px 16px;
    margin: -12px -16px 20px -16px;
    position: relative; /* ensure absolute-positioned remove button is anchored */
}

.patient-result-header:hover {
    background-color: #f8f9fa;
}

.patient-label {
    font-size: 1.5rem;
    font-weight: 700;
    color: #1f2937;
    margin: 0;
    display: flex;
    align-items: center;
    gap: 12px;
}

.patient-label::before {
    content: "👤";
    font-size: 1.2rem;
}

.patient-status {
    padding: 6px 12px;
    border-radius: 20px;
    font-size: 0.875rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.patient-status.success {
    background: #2BA7D0;
    color: #fff;
    border: 1px solid #64c0df;
}

.patient-status.error {
    background: #fee2e2;
    color: #991b1b;
    border: 1px solid #fecaca;
}

.patient-result-content {
    display: flex;
    flex-direction: column;
    gap: 20px;
    overflow: visible;
}

/* Procedure sections within patient results */
.patient-result-content .procedure-section {
    background: white;
    border-radius: 15px;
    padding: 20px;
    box-shadow: 0 4px 6px rgba(0,0,0,0.1);
    margin-bottom: 20px;
    overflow: visible;
    transition: all 0.3s ease;
}

.patient-result-content .procedure-section:hover {
    background: #f3f4f6;
    transform: translateY(-2px);
    box-shadow: 0 6px 12px rgba(0,0,0,0.15);
}

.patient-result-content .procedure-header {
    font-family: 'THICCCBOI', 'Exo 2', sans-serif;
    font-size: 1.5em;
    font-weight: 900;
    color: #140F13;
    margin-bottom: 1rem;
    text-align: center;
    letter-spacing: 0.5px;
}

.patient-result-content .cpt-options {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-bottom: 16px;
    overflow: visible;
}

/* Hide all CPT options except the selected one in collapsed state for patient results */
.patient-result-content .cpt-options.collapsed .cpt-option {
    display: none;
}

/* Show only the selected option in collapsed state for patient results */
.patient-result-content .cpt-options.collapsed .cpt-option.selected {
    display: flex !important;
    border: 2px solid #5D7CE9;
    background: rgba(93, 124, 233, 0.1);
    border-radius: 8px;
    padding: 8px;
    margin: 0;
    justify-content: flex-start;
    align-items: center;
}

/* Ensure radio button is visible and properly styled in collapsed state for patient results */
.patient-result-content .cpt-options.collapsed .cpt-option.selected input[type="radio"] {
    margin-right: 12px;
    transform: scale(1.2);
    opacity: 1 !important;
    visibility: visible !important;
    display: block !important;
}

/* Show all options when expanded for patient results */
.patient-result-content .cpt-options.expanded .cpt-option {
    display: flex;
}

.patient-result-content .cpt-option {
    display: flex;
    align-items: center;
    padding: 12px 15px;
    border: 2px solid rgba(255, 255, 255, 0.3);
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.2s ease;
    background: rgba(255, 255, 255, 0.1);
    position: relative;
    color: #333;
    z-index: 10;
}

.patient-result-content .cpt-option:hover {
    border-color: #5D7CE9;
    background: rgba(93, 124, 233, 0.1);
}

/* Prevent text shifting on hover for collapsed patient result cpt options */
.patient-result-content .cpt-options.collapsed .cpt-option.selected:hover {
    background: rgba(93, 124, 233, 0.1);
    border-color: #5D7CE9;
    justify-content: flex-start;
    align-items: center;
}

.patient-result-content .cpt-option.selected {
    border-color: #5D7CE9;
    background: rgba(93, 124, 233, 0.2);
    box-shadow: 0 2px 4px rgba(93, 124, 233, 0.2);
}

.patient-result-content .cpt-option input[type="radio"] {
    margin-right: 12px;
    transform: scale(1.2);
    -webkit-appearance: radio;
    -moz-appearance: radio;
    appearance: radio;
}

.patient-result-content .cpt-option-label {
    flex: 1;
    cursor: pointer;
    font-weight: 500;
    color: #374151;
}

.patient-result-content .cpt-code {
    font-weight: 700;
    color: #5D7CE9;
    font-family: 'Courier New', monospace;
}

/* EM Logic Container Styling */
.em-logic-container {
    background: #ffffff;
    padding: 1px;
    border-radius: 8px;
    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
    font-size: 14px;
    line-height: 1.6;
}

.em-logic-expression {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    gap: 12px;
    margin: 16px 0;
}

.em-logic-group {
    padding: 8px 16px;
    border-radius: 6px;
    border: 1px solid #dee2e6;
    display: flex;
    align-items: center;
    gap: 8px;
    background-color: #f8f9fa;
}

.em-logic-group.or-group {
    background-color: #fff8f0;
    border-color: #ffcc99;
}

.em-logic-group.and-group {
    background-color: #f0f8ff;
    border-color: #b3d9ff;
}

.em-logic-term {
    background-color: #e7f3ff !important;
    color: #0066cc !important;
    padding: 6px 12px !important;
    border-radius: 20px !important;
    border: 1px solid #b3d9ff !important;
    font-weight: 500 !important;
    display: inline-block !important;
    margin: 2px 4px !important;
    font-size: 14px !important;
}

/* Make E/M logic term badges clickable and add smooth highlight transitions */
.em-logic-term {
    cursor: pointer !important;
    transition: background-color 0.15s ease, color 0.15s ease, border-color 0.15s ease, box-shadow 0.15s ease, transform 0.12s ease;
}

/* Selected state for individual term badges */
.em-logic-term.selected {
    background-color: #cfe0ff !important;
    color: #003a80 !important;
    border-color: #3b82f6 !important;
    box-shadow: 0 0 0 2px rgba(59, 130, 246, 0.35), 0 2px 8px rgba(0, 0, 0, 0.08) !important;
    font-weight: 700 !important;
    transform: scale(1.03);
    position: relative;
    padding-left: 28px !important;
}

.em-logic-term.selected::before {
    content: "\2713";
    position: absolute;
    left: 8px;
    top: 50%;
    transform: translateY(-50%);
    font-size: 16px;
    line-height: 1;
    color: #22c55e; /* green */
    font-weight: 900;
}

.em-logic-term.selected::after { content: none; }

/* Highlight entire logic group when any term inside is selected */
.em-logic-group.selected {
    background-color: #ffebd6 !important;
    border-color: #ff8c1a !important;
    box-shadow: inset 4px 0 0 0 #ff8c1a, 0 0 0 2px rgba(255, 140, 26, 0.25), 0 2px 8px rgba(0, 0, 0, 0.08) !important;
}

.em-logic-operator[data-operator="AND"] {
    background-color: #f0f8f0 !important;
    color: #006600 !important;
    border: 1px solid #99cc99 !important;
    padding: 3px 6px !important;
    border-radius: 4px !important;
    font-weight: bold !important;
    font-size: 11px !important;
    margin: 0 8px !important;
    display: inline-block !important;
}

.em-logic-operator[data-operator="OR"] {
    background-color: #fff0f0 !important;
    color: #cc0000 !important;
    border: 1px solid #ff9999 !important;
    padding: 3px 6px !important;
    border-radius: 4px !important;
    font-weight: bold !important;
    font-size: 11px !important;
    margin: 0 8px !important;
    display: inline-block !important;
}

/* Fallback for logic operators without data attributes */
.em-logic-operator {
    background-color: #fff2e6 !important;
    color: #cc6600 !important;
    padding: 3px 6px !important;
    border-radius: 4px !important;
    font-weight: bold !important;
    font-size: 11px !important;
    margin: 0 8px !important;
    border: 1px solid #ffcc99 !important;
    display: inline-block !important;
}

/* Loading state for patient-specific procedures */
.patient-result-content .cpt-loading {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 16px;
    background: rgba(255, 255, 255, 0.1);
    border: 2px solid rgba(255, 255, 255, 0.3);
    border-radius: 8px;
    margin-top: 12px;
    color: #333;
    font-weight: 500;
}

.patient-result-content .spinner {
    width: 20px;
    height: 20px;
    border: 2px solid #e5e7eb;
    border-top: 2px solid #d89c60;
    border-radius: 50%;
    animation: spin 1s linear infinite;
}

/* Results display for patient-specific procedures */


.patient-result-content .modifiers-section,
.patient-result-content .rvu-section,
.patient-result-content .claim-section,
.patient-result-content .recommended-modifiers-section {
    margin-bottom: 16px;
}

.patient-result-content .modifiers-section h4,
.patient-result-content .rvu-section h4,
.patient-result-content .claim-section h4,
.patient-result-content .recommended-modifiers-section h4 {
    font-family: 'THICCCBOI', 'Exo 2', sans-serif;
    font-size: 1.4em;
    font-weight: 900;
    color: #140F13;
    margin: 0 0 1rem 0;
    text-align: center;
    letter-spacing: 0.5px;
    border-bottom: none;
}

.patient-result-content .modifiers-section ul,
.patient-result-content .recommended-modifiers-section ul {
    list-style: none;
    padding: 0;
    margin: 0;
}

/* Patient result content modifier styling to match main result cards */
.patient-result-content .modifier-selection-card {
    background: rgba(255, 255, 255, 0.05);
    border-radius: 12px;
    padding: 20px;
    margin-bottom: 20px;
    border: 2px solid rgba(255, 255, 255, 0.1);
    box-shadow: 0 2px 8px rgba(0,0,0,0.1);
    position: relative;
}

.patient-result-content .modifier-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 12px;
    margin-bottom: 20px;
}

.patient-result-content .modifier-option {
    display: flex;
    align-items: flex-start;
    padding: 12px;
    border: 2px solid rgba(255, 255, 255, 0.1);
    border-radius: 8px;
    background: rgba(255, 255, 255, 0.05);
    transition: all 0.2s ease;
    cursor: pointer;
    position: relative;
}

.patient-result-content .modifier-option:hover {
    border-color: #5D7CE9;
    background: rgba(93, 124, 233, 0.1);
}

.patient-result-content .modifier-option.recommended {
    border-color: #5D7CE9;
    background: linear-gradient(135deg, rgba(93, 124, 233, 0.1) 0%, rgba(56, 183, 225, 0.1) 100%);
    box-shadow: 0 2px 8px rgba(93, 124, 233, 0.2);
}

.patient-result-content .modifier-option.recommended:hover {
    border-color: #38b7e1;
    box-shadow: 0 4px 12px rgba(93, 124, 233, 0.3);
}

.patient-result-content .modifier-option input[type="checkbox"] {
    margin-right: 12px;
    margin-top: 2px;
    transform: scale(1.1);
}

.patient-result-content .modifier-label {
    font-family: 'THICCCBOI', 'Exo 2', sans-serif;
    font-size: 1.1rem;
    font-weight: 700;
    color: #140F13;
    line-height: 1.4;
    cursor: pointer;
    flex: 1;
}

.patient-result-content .modifier-description {
    font-family: 'THICCCBOI', sans-serif;
    color: #140F13;
    font-size: 1em;
    font-weight: 400;
    margin-bottom: 15px;
    line-height: 1.5;
    text-align: center;
}

.patient-result-content .modifiers-section li,
.patient-result-content .recommended-modifiers-section li {
    padding: 8px 12px;
    background: rgba(255, 255, 255, 0.05);
    border-radius: 8px;
    margin-bottom: 8px;
    border-left: 3px solid #3CBBB2;
    font-family: 'THICCCBOI', 'Courier New', monospace;
    font-size: 0.9em;
    font-weight: 400;
    color: #140F13;
    border-bottom: none;
}

.patient-result-content .modifiers-section li:last-child,
.patient-result-content .recommended-modifiers-section li:last-child {
    margin-bottom: 0;
}

.patient-result-content .rvu-section p,
.patient-result-content .claim-section p {
    margin: 8px 0;
    font-family: 'THICCCBOI', 'Exo 2', sans-serif;
    font-size: 1rem;
    font-weight: 400;
    color: #140F13;
    line-height: 1.5;
}

.patient-result-content .rvu-section strong,
.patient-result-content .claim-section strong {
    font-family: 'THICCCBOI', 'Exo 2', sans-serif;
    font-weight: bolder;
    color: #5D7CE9;
}

/* Error message styling for patient results */
.patient-result-section .error-message {
    color: #991b1b;
    background: #fee2e2;
    border: 1px solid #fecaca;
    padding: 12px 16px;
    border-radius: 6px;
    font-size: 0.875rem;
    font-weight: 500;
}

/* Responsive design for multi-patient results */
@media (max-width: 768px) {
    .patient-result-header {
        flex-direction: column;
        align-items: flex-start;
        gap: 12px;
    }
    
    .patient-label {
        font-size: 1.25rem;
    }
    
    .patient-status {
        align-self: flex-end;
    }
    
    .patient-result-content .procedure-section {
        padding: 16px;
    }
    
    .patient-result-content .cpt-option {
        padding: 10px 12px;
    }
}

/* Animation for patient result sections */
@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.patient-result-section {
    animation: fadeInUp 0.5s ease-out;
    cursor: pointer;
    transition: all 0.3s ease;
}

.patient-result-section:nth-child(1) { animation-delay: 0.1s; }
.patient-result-section:nth-child(2) { animation-delay: 0.2s; }
.patient-result-section:nth-child(3) { animation-delay: 0.3s; }
.patient-result-section:nth-child(4) { animation-delay: 0.4s; }
.patient-result-section:nth-child(5) { animation-delay: 0.5s; }

/* Collapsed state for patient result sections */
.patient-result-section.collapsed {
    padding: 20px;
    min-height: 80px;
    display: block;
    border: 2px solid #5D7CE9;
    background-color: #E1E8FF;
    cursor: pointer;
    position: relative;
    transition: all 0.3s ease;
}

.patient-result-section.collapsed .patient-result-content {
    display: none;
}

.patient-result-section.collapsed .patient-result-header {
    display: none;
}

.patient-result-section.collapsed .collective-icd10-card-container {
    display: none;
}

.patient-result-section.collapsed::before {
    content: attr(data-patient-title, "Patient");
    font-family: 'THICCCBOI', 'Exo 2', sans-serif;
    font-size: 1.5em;
    font-weight: 700;
    color: #140F13;
    text-align: center;
    letter-spacing: 1px;
    display: block;
    margin-bottom: 20px;
    padding-top: 10px;
}

.patient-result-section.collapsed::after {
    content: "Date of Service: " attr(data-date-of-service, "");
    position: absolute;
    top: 20px;
    right: 20px;
    font-family: 'THICCCBOI', 'Exo 2', sans-serif;
    font-size: 0.9em;
    font-weight: 600;
    color: #3cbbb2;
    background: #E0F5F0;
    border: 1px solid #bbf7d0;
    padding: 4px 12px;
    border-radius: 20px;
    text-transform: none;
    letter-spacing: 0.5px;
}

/* Hide collapsed date badge for E/M flow cards */
.patient-result-section.em-flow.collapsed::after {
    content: none;
}

.patient-result-section.collapsed.error::after {
    color: #991b1b;
    background: #fee2e2;
    border: 1px solid #fecaca;
    top: 20px;
    right: 20px;
}



.patient-result-section.collapsed .click-to-expand {
    content: 'Click to expand';
    position: absolute;
    bottom: 10px;
    right: 20px;
    font-family: 'THICCCBOI', 'Exo 2', sans-serif;
    font-size: 0.8em;
    font-weight: 400;
    color: #666;
    font-style: italic;
    pointer-events: none;
}

.patient-result-section.collapsed:hover {
    background-color: #cad5f7;
}

/* Container for immediate cases */
.immediate-cases-container {
    display: flex;
    flex-direction: column;
    gap: 15px;
    margin-top: 20px;
}

/* Disable animation for immediate review cases */
.immediate-cases-container .patient-result-section {
    animation: none !important;
}

/* Disable load animation for review cases page */
#codersReviewView .patient-result-section {
    animation: none !important;
}

/* Hidden utility class for CSP compliance */
.hidden {
    display: none !important;
}

/* CSP-compliant utility classes to replace inline styles */
.csp-icd10-option {
    border: 1px solid rgba(5, 150, 105, 0.2);
    border-radius: 8px;
    margin-bottom: 8px;
    cursor: pointer;
    transition: all 0.2s ease;
}

.csp-icd10-option.selected {
    background-color: #ecfdf5;
    border-color: #059669;
}

.csp-icd10-option.hover {
    background-color: #f0fdf4;
    border-color: #059669;
}

.csp-radio-margin {
    margin-right: 10px;
}

.csp-flex-1 {
    flex: 1;
}

.csp-margin-bottom-5 {
    margin-bottom: 5px;
}

.csp-ms-drg-info {
    font-size: 0.85em;
    color: #059669;
}

.csp-display-none {
    display: none !important;
}

.csp-display-block {
    display: block !important;
}

.csp-margin-bottom-10 {
    margin-bottom: 10px;
}

.csp-badge-icd10pcs {
    background-color: rgba(5, 150, 105, 0.1);
    color: #059669;
    border: 1px solid rgba(5, 150, 105, 0.3);
    display: inline-flex;
    align-items: center;
    padding: 6px 12px;
    border-radius: 16px;
    font-size: 0.875rem;
    font-weight: 500;
    margin-right: 8px;
    margin-bottom: 8px;
}

.csp-badge-placeholder {
    background-color: rgba(156, 163, 175, 0.1);
    color: #6b7280;
    border: 1px solid rgba(156, 163, 175, 0.3);
    display: inline-flex;
    align-items: center;
    padding: 6px 12px;
    border-radius: 16px;
    font-size: 0.875rem;
    font-weight: 500;
}

/* Analysis summary styling for expanded review cases */
.analysis-summary {
    padding: 20px;
    background: #f9fafb;
    border-radius: 8px;
    border: 1px solid #e5e7eb;
}

.analysis-summary h4 {
    font-size: 1.1rem;
    font-weight: 600;
    color: #374151;
    margin: 0 0 12px 0;
    border-bottom: 1px solid #e5e7eb;
    padding-bottom: 8px;
}

.analysis-summary h5 {
    font-size: 1rem;
    font-weight: 500;
    color: #4b5563;
    margin: 12px 0 8px 0;
}

.analysis-summary .metadata-section,
.analysis-summary .procedures-section,
.analysis-summary .results-section,
.analysis-summary .validation-section {
    margin-bottom: 20px;
}

.analysis-summary .metadata-section:last-child,
.analysis-summary .procedures-section:last-child,
.analysis-summary .results-section:last-child,
.analysis-summary .validation-section:last-child {
    margin-bottom: 0;
}

.analysis-summary .procedure-item {
    background: #ffffff;
    border: 1px solid #e5e7eb;
    border-radius: 6px;
    padding: 16px;
    margin-bottom: 12px;
}

.analysis-summary .procedure-item:last-child {
    margin-bottom: 0;
}

.analysis-summary p {
    margin: 6px 0;
    color: #6b7280;
    font-size: 0.9rem;
}

.analysis-summary ul {
    margin: 8px 0;
    padding-left: 20px;
}

.analysis-summary li {
    margin: 4px 0;
    color: #6b7280;
    font-size: 0.9rem;
}

.analysis-summary .text-success {
    color: #059669;
    font-weight: 500;
}

.analysis-summary .text-danger {
    color: #dc2626;
    font-weight: 500;
}

/* E/M summary CSP-safe utility classes */
.em-center-text {
    text-align: center;
    padding-top: 15px;
}

.em-level-strong {
    font-size: 1.5em;
}

/* Current combinations badges (non-clickable) */
.em-condition-badge {
    background-color: #e7f3ff !important;
    color: #0066cc !important;
    padding: 6px 12px !important;
    border-radius: 20px !important;
    border: 1px solid #b3d9ff !important;
    display: inline-block !important;
    white-space: nowrap !important;
    margin: 2px 4px !important;
    font-size: 14px !important;
}

.em-current-badge {
    background-color: #e8f5e8 !important;
    color: #2d5016 !important;
    border-color: #a3c585 !important;
    font-weight: 500 !important;
}

.em-operator-badge {
    background-color: #f8f9fa !important;
    color: #6c757d !important;
    padding: 4px 8px !important;
    border-radius: 4px !important;
    border: 1px solid #dee2e6 !important;
    font-weight: bold !important;
    font-size: 12px !important;
    margin: 0 6px !important;
    display: inline-block !important;
}

.patient-result-section.collapsed:hover::after {
    color: #4A6FE3;
}






/* Insurance Rejection Risk Analysis Styles */
.insurance-rejection-risk-section {
    margin-top: 20px;
    padding: 15px;
    background: #fff8f8;
    border: 1px solid #ffebee;
    border-radius: 8px;
    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
    cursor: pointer;
    transition: all 0.3s ease;
}

.insurance-rejection-risk-section:hover {
    box-shadow: 0 4px 8px rgba(0,0,0,0.15);
}

.insurance-rejection-risk-section.collapsed {
    padding: 10px 15px;
}

.insurance-rejection-risk-section.collapsed .rejection-risk-card {
    display: none;
}

.insurance-rejection-risk-section.collapsed h4 {
    margin-bottom: 0;
    color: #d32f2f;
    font-size: 1.25rem;
    border-bottom: none;
}

.insurance-rejection-risk-section h4 {
    font-family: 'THICCCBOI', 'Exo 2', sans-serif;
    font-size: 1.3em;
    font-weight: 900;
    color: #140F13;
    margin-bottom: 1rem;
    text-align: center;
    letter-spacing: 0.5px;
    transition: color 0.3s ease;
}

.insurance-rejection-risk-section:not(.collapsed) .procedure-header {
    display: none;
}

.rejection-risk-card {
    background: #fff;
    border: 2px solid #ffcdd2;
    border-radius: 6px;
    margin-bottom: 10px;
    overflow: hidden;
    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}

.rejection-risk-card.high-risk {
    border-color: #c55560;
    background: #ffebee;
}

.rejection-risk-card .card-header {
    background: #c55560;
    color: white;
    padding: 10px 15px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-weight: 600;
}

.rejection-risk-card .risk-level {
    background: #d32f2f;
    padding: 4px 8px;
    border-radius: 4px;
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.rejection-risk-card .cpt-code {
    font-weight: 700;
    font-size: 14px;
}

.rejection-risk-card .card-body {
    padding: 15px;
}

.rejection-risk-card .rejection-reason {
    margin: 0;
    color: #333;
    line-height: 1.4;
}

.insurance-rejection-risk-section .no-risk {
    color: #4caf50;
    font-style: italic;
    margin: 0;
    text-align: center;
    padding: 20px;
}

/* Animation for new cards */
.rejection-risk-card {
    animation: slideInFromTop 0.3s ease-out;
}

@keyframes slideInFromTop {
    from {
        opacity: 0;
        transform: translateY(-10px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Responsive design for rejection risk cards */
@media (max-width: 768px) {
    .rejection-risk-card .card-header {
        flex-direction: column;
        gap: 5px;
        text-align: center;
    }
    
    .rejection-risk-card .cpt-code {
        font-size: 13px;
    }
    
    .rejection-risk-card .rejection-reason {
        font-size: 14px;
    }
}

/* Procedure section collapse/expand styles */
.procedure-section {
    position: relative;
    transition: all 0.3s ease;
}

.procedure-section.collapsed {
    background: #E1E8FF;
    border-radius: 8px;
    padding: 15px;
    margin-bottom: 15px;
    cursor: pointer;
    border: 2px solid #4A6FE3;
    position: relative;
    overflow: hidden;
}

.procedure-section.collapsed .procedure-header {
    margin-bottom: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
}

.procedure-section.collapsed .procedure-header-text {
    text-align: center;
    font-size: 1.1rem;
    font-weight: 600;
    color: #140F13;
    flex: 1;
    border-bottom: none;
}

.procedure-section.collapsed .procedure-expand-btn {
    display: none;
}

.procedure-section.collapsed .cpt-options,
.procedure-section.collapsed .cpt-results,
.procedure-section.collapsed .modifier-selection-card,
.procedure-section.collapsed .insurance-rejection-risk-section,
.procedure-section.collapsed .cpt-modifier-container {
    display: none;
}

.procedure-section.collapsed .icd10-pcs-container {
    display: none;
}


/* Hide ICD-10 codes card entirely when a procedure section is collapsed */
.procedure-section.collapsed .icd10-codes-card {
    display: none;
}



.procedure-section.collapsed:hover {
    background: #D1D8FF;
    border-color: #3A5FD3;
}

/* Ensure procedure-expand-btn has higher z-index */
.procedure-expand-btn {
    z-index: 15 !important;
    position: relative;
}

/* Validation Badges */
.validation-badges {
    display: flex;
    gap: 8px;
    margin-top: 8px;
    flex-wrap: wrap;
    justify-content: flex-end;
    text-align: center;
    flex-direction: row;
    align-items: center;
}

.badge {
    display: inline-block;
    padding: 4px 8px;
    border-radius: 12px;
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: #ffffff;
    transition: all 0.3s ease;
}

.ncci-badge {
    background: #38b7e1;
    border: 1px solid #38b7e1;
}

.medicare-badge {
    background: linear-gradient(135deg, #4CAF50, #45A049);
    border: 1px solid #4CAF50;
}

.ncci-badge.invalid {
    background: #c55560;
    border: 1px solid #c55560;
}

.medicare-badge.invalid {
    background: #c55560;
    border: 1px solid #c55560;
}

.badge:hover {
    transform: translateY(-1px);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
}

/* NCCI and Medicare Details in Rejection Cards */
.ncci-details,
.medicare-details {
    margin-top: 12px;
    padding: 8px 12px;
    border-radius: 6px;
    background: rgba(255, 255, 255, 0.05);
    border-left: 3px solid;
}

.ncci-details {
    border-left-color: #141019;
}

.medicare-details {
    border-left-color: #4CAF50;
}

.ncci-details strong,
.medicare-details strong {
    color: #000000;
    font-weight: 600;
    margin-bottom: 4px;
    display: block;
}

.ncci-details ul,
.medicare-details ul {
    margin-top: 6px;
    padding-left: 16px;
}

.ncci-details li,
.medicare-details li {
    color: #000000;
    font-size: 13px;
    margin-bottom: 2px;
}

/* Collective Analysis Card Styles */
.collective-analysis-section {
    margin: 20px 0;
    padding: 0;
}

.collective-analysis-card {
    background: white;
    border-radius: 12px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
    overflow: hidden;
    transition: all 0.3s ease;
}

.collective-analysis-card .collective-header.loading {
    background: #5d7ce9;
    color: white;
    justify-content: center;
    border-radius: 12px;
    margin: 0;
}

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

.collective-header {
    padding: 20px;
    font-family: 'THICCCBOI', 'Exo 2', sans-serif;
    font-size: 1.2em;
    font-weight: 700;
    display: flex;
    align-items: center;
    gap: 12px;
    cursor: pointer;
    transition: all 0.2s ease;
}

.collective-header:hover {
    transform: translateY(-1px);
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    background: #21a39b;
}

.collective-header.valid {
    background: #3CBBB2;
    color: white;
}

.collective-header.warning {
    background: linear-gradient(135deg, #FF9800, #F57C00);
    color: white;
}

.collective-header.invalid {
    background: #c55560;
    color: white;
}

.collective-header .valid-checkbox {
    background: white;
    color: #3CBBB2;
    border-radius: 50%;
    width: 24px;
    height: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: bold;
    font-size: 14px;
}

.collective-header .warning-triangle {
    color: white;
    font-weight: bold;
    font-size: 18px;
}

.collective-header.loading {
    background: #5d7ce9;
    color: white;
    justify-content: center;
}

.collective-header.loading .loading-spinner {
    width: 20px;
    height: 20px;
    border: 2px solid rgba(65, 31, 219, 0.3);
    border-top: 2px solid white;
    border-radius: 50%;
    animation: spin 1s linear infinite;
    margin-right: 10px;
}

.collective-summary {
    padding: 20px;
    background: #f8f9fa;
    border-bottom: 1px solid #e0e0e0;
    display: flex;
    justify-content: center;
    gap: 40px;
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.3s ease, padding 0.3s ease;
}

.collective-summary.expanded {
    max-height: 100px;
    padding: 20px;
}

.collective-summary.collapsed {
    max-height: 0;
    padding: 0 20px;
}

.summary-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    gap: 8px;
}

.summary-item .label {
    font-family: 'THICCCBOI', 'Exo 2', sans-serif;
    font-size: 0.9em;
    font-weight: 600;
    color: #666;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.summary-item .value {
    font-family: 'THICCCBOI', 'Exo 2', sans-serif;
    font-size: 1.5em;
    font-weight: 700;
    color: #333;
}

.summary-item .value.high-risk {
    color: #F44336;
}

.summary-item .value.low-risk {
    color: #3CBBB2;
}

.collective-details {
    padding: 20px;
    background: white;
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.3s ease, padding 0.3s ease;
}

.collective-details.expanded {
    max-height: 1000px;
    padding: 20px;
}

.collective-details.collapsed {
    max-height: 0;
    padding: 0 20px;
}

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

.detail-section:last-child {
    margin-bottom: 0;
}

.detail-section h4 {
    font-family: 'THICCCBOI', 'Exo 2', sans-serif;
    font-size: 1.1em;
    font-weight: 700;
    color: #333;
    margin-bottom: 12px;
    padding-bottom: 8px;
    border-bottom: 2px solid #5D7CE9;
}

.detail-section ul {
    list-style: none;
    padding: 0;
    margin: 0;
}

.detail-section li {
    font-family: 'THICCCBOI', 'Exo 2', sans-serif;
    font-size: 0.95em;
    font-weight: 400;
    color: #555;
    padding: 8px 0;
    border-bottom: 1px solid #f0f0f0;
    line-height: 1.4;
}

.detail-section li:last-child {
    border-bottom: none;
}


/* Responsive design for collective analysis card */
@media (max-width: 768px) {
    .collective-summary {
        flex-direction: column;
        gap: 20px;
    }
    
    .summary-item {
        flex-direction: row;
        justify-content: space-between;
        align-items: center;
    }
    
    .collective-header {
        font-size: 1.1em;
        padding: 15px;
    }
    
    .collective-summary {
        padding: 15px;
    }
    
    .collective-details {
        padding: 15px;
    }
}

/* ICD-10 Codes Card Styles */
.icd10-codes-card {
    background: #f9fafb;
    border-radius: 12px;
    padding: 20px;
    margin-bottom: 20px;
    border: 2px solid rgba(255, 255, 255, 0.1);
    box-shadow: 0 2px 8px rgba(0,0,0,0.1);
    position: relative;
    transition: all 0.3s ease;
    cursor: pointer;
}

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

.icd10-header-container {
    position: relative;
}

.icd10-header-container .procedure-header {
    text-align: center;
    margin: 0;
}

.icd10-content-container {
    transition: all 0.3s ease;
    text-align: center;
}

.icd10-codes-card.icd10-collapsed .icd10-content-container {
    display: none;
}

.icd10-codes-card.icd10-collapsed .icd10-header-container {
    display: none;
}

/* Show the collapse icon in collapsed state when it's in the collapsed-icd10-codes container */
.icd10-codes-card.icd10-collapsed .collapsed-icd10-codes .collapse-icon {
    display: flex !important;
}

.icd10-codes-card.icd10-collapsed {
    padding: 0;
    position: relative;
}

.collapsed-icd10-codes {
    margin-top: 5px;
    padding: 15px;
    background: rgba(255, 255, 255, 0.05);
    border-radius: 6px;
    border: 1px solid rgba(255, 255, 255, 0.1);
    position: relative;
    min-height: 50px; /* Ensure minimum height for visibility */
}

.collapsed-icd10-codes .collapse-icon {
    position: absolute;
    top: 10px;
    right: 10px;
    z-index: 10;
}

.icd10-codes-card:not(.icd10-collapsed) .selected-list {
    display: none;
}

.icd10-codes-card h4 {
    font-family: 'THICCCBOI', 'Exo 2', sans-serif;
    font-size: 1.4em;
    font-weight: 900;
    color: #140F13;
    margin-bottom: 1rem;
    text-align: center;
    letter-spacing: 0.5px;
}

.icd10-description {
    font-family: 'THICCCBOI', sans-serif;
    color: #140F13;
    font-size: 1em;
    font-weight: 400;
    margin-bottom: 0px;
    line-height: 1.5;
}

.icd10-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 15px;
    margin-top: 15px;
}

.icd10-option {
    display: block;
    text-align: left;
    padding: 12px 15px;
    border: 2px solid rgba(255, 255, 255, 0.3);
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.2s ease;
    background: rgba(255, 255, 255, 0.1);
    position: relative;
    color: #333;
    z-index: 10;
}

.icd10-option:hover {
    border-color: #5D7CE9;
    background: rgba(93, 124, 233, 0.1);
}

.icd10-option input[type="checkbox"] {
    margin-right: 12px;
    transform: scale(1.2);
    -webkit-appearance: checkbox;
    -moz-appearance: checkbox;
    appearance: checkbox;
}

.icd10-label {
    font-family: 'THICCCBOI', 'Exo 2', sans-serif;
    font-size: 1.1rem;
    font-weight: 400;
    line-height: 1.4;
    cursor: pointer;
    flex: 1;
}

.icd10-code {
    font-family: 'Share Tech Mono', monospace;
    font-weight: 600;
    color: #5D7CE9;
}

.icd10-desc {
    font-weight: 400;
    color: #333;
}

.icd10-ccir {
    font-style: italic;
    color: #666;
}

.icd10-checkbox-container {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 15px;
    margin-top: 15px;
}

.selected-icd10-code {
    display: inline-block;
    background: rgba(93, 124, 233, 0.2);
    color: #5D7CE9;
    padding: 4px 8px;
    border-radius: 20px;
    margin: 2px;
    font-size: 0.9em;
    font-weight: 500;
    border: 1px solid rgba(93, 124, 233, 0.3);
}

/* Collective ICD-10 card styles */
.collective-icd10-card-container {
    margin-top: 15px;
}

.collective-icd10-card {
    background: #f9fafb;
    border: 1px solid rgba(255, 255, 255, 0.3);
    border-radius: 8px;
    margin-bottom: 10px;
    position: relative;
    padding: 0 !important; /* Override any padding from icd10-codes-card */
    transition: all 0.3s ease;
    cursor: pointer;
}

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

.collective-icd10-card .icd10-header-container {
    padding-top: 12px;
    padding-bottom: 0px;
    padding-left: 15px;
    padding-right: 15px;
    background: #f9fafb;
    border-bottom: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: 8px 8px 0 0;
    display: flex !important; /* Override the general rule that hides headers in collapsed state */
    justify-content: center;
    align-items: center;
    cursor: pointer;
    position: relative;
    text-align: center;
}

.collective-icd10-card .icd10-content-container {
    padding-left: 15px;
    padding-right: 15px;
    padding-top: 5px;
    padding-bottom: 15px;
    display: none; /* Initially collapsed */
    border-radius: 0 0 8px 8px;
    background: rgba(255, 255, 255, 0.02);
}

.collective-icd10-card.icd10-expanded .icd10-content-container {
    display: block;
}

.collective-icd10-card .collapsed-icd10-codes {
    padding: 10px 15px;
    display: block; /* Initially visible */
    background: rgba(255, 255, 255, 0.02);
    border-radius: 0 0 8px 8px;
    border-top: none; /* No border since header is always visible */
    cursor: pointer; /* Make it clickable */
    position: relative;
}



.collective-icd10-card.icd10-expanded .collapsed-icd10-codes {
    display: none;
}

.collective-icd10-card .icd10-header-container .procedure-header {
    margin: 0;
    font-size: 1.2em;
    color: #333;
    text-align: center;
    flex: 1;
}

.collective-icd10-card .collapse-icon {
    position: absolute;
    top: 24px;
    right: 15px;
    background: #5D7CE9;
    color: white;
    border-radius: 50%;
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
    font-weight: bold;
    cursor: pointer;
    transition: all 0.3s ease;
    z-index: 10;
}

.collective-icd10-card .collapse-icon:hover {
    background: #4A6BD8;
    transform: scale(1.1);
}

.collective-icd10-card .collapse-icon:active {
    transform: scale(0.95);
}

/* CPT Codes Parent Container */
.cpt-codes-card {
    background: #f9fafb;
    border-radius: 15px;
    padding: 20px;
    box-shadow: 0 4px 6px rgba(0,0,0,0.1);
    margin-bottom: 0px;
    transition: all 0.3s ease;
    cursor: pointer;
}

.cpt-codes-card:hover {
    background: #f3f4f6;
    transform: translateY(-2px);
    box-shadow: 0 6px 12px rgba(0,0,0,0.15);
}

.cpt-codes-card.collapsed {
    background: #f9fafb;
}

.cpt-codes-card.collapsed:hover {
    background: #f3f4f6;
}

.cpt-codes-card.collapsed .cpt-codes-section {
    /* Keep the section visible but collapse all procedure sections */
    display: block;
}

.cpt-codes-card.collapsed .procedure-section {
    /* Apply collapsed state to all procedure sections */
    background: #E1E8FF;
    border-radius: 8px;
    padding: 15px;
    margin-bottom: 15px;
    cursor: pointer;
    border: 2px solid #4A6FE3;
    position: relative;
    overflow: hidden;
}

.cpt-codes-card.collapsed .procedure-section .cpt-options,
.cpt-codes-card.collapsed .procedure-section .cpt-results,
.cpt-codes-card.collapsed .procedure-section .modifier-selection-card,
.cpt-codes-card.collapsed .procedure-section .insurance-rejection-risk-section,
.cpt-codes-card.collapsed .procedure-section .cpt-modifier-container {
    display: none;
}

.cpt-codes-card.collapsed .procedure-section .icd10-pcs-container {
    display: none;
}

/* Also hide ICD-10 codes card when the whole CPT card is collapsed */
.cpt-codes-card.collapsed .procedure-section .icd10-codes-card {
    display: none;
}

.cpt-codes-card.collapsed .procedure-section .procedure-header {
    margin-bottom: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
}

.cpt-codes-card.collapsed .procedure-section .procedure-header-text {
    text-align: center;
    font-size: 1.1rem;
    font-weight: 600;
    color: #140F13;
    flex: 1;
    border-bottom: none;
}

.cpt-codes-card.collapsed .procedure-section .procedure-expand-btn {
    display: none;
}

.cpt-codes-card.collapsed .procedure-section:hover {
    background: #D1D8FF;
    border-color: #3A5FD3;
}

/* Remove margin from last procedure section to eliminate extra space */
.procedure-cards-container .procedure-section:last-child {
    margin-bottom: 0;
}

.cpt-codes-card.collapsed .procedure-section:last-child {
    margin-bottom: 0;
}

/* Alert styles for review cases */
.alert-info {
    border: 1px solid #5D7CE9;
    background: #EEF2FD;
    color: #000;
    padding: 12px 16px;
    border-radius: 8px;
    margin: 10px 0;
    font-family: 'THICCCBOI', 'Exo 2', sans-serif;
    font-size: 1rem;
    font-weight: 500;
}

/* Match 'Add Patient Data' title to API Documentation title style */
#uploadTitle {
    font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", "Liberation Sans", sans-serif;
    font-weight: 500;
    font-size: 1.75rem;
    color: #212529;
    text-align: center;
    letter-spacing: 0;
}

#uploadTitle::before {
    display: none;
}

.upload-card.collapsed #uploadTitle {
    font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", "Liberation Sans", sans-serif;
    font-weight: 500;
    font-size: 1.5rem;
    color: #212529;
    text-transform: none;
    letter-spacing: 0;
    text-align: center;
}

/* Styling for stored modifiers in review mode */
.stored-modifiers {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin: 1rem 0;
}

.modifier-badge {
    background-color: #e3f2fd;
    color: #1976d2;
    padding: 0.25rem 0.75rem;
    border-radius: 1rem;
    font-size: 0.875rem;
    font-weight: 500;
    border: 1px solid #bbdefb;
}

/* Loading spinner for async upgrade suggestions */
.loading-spinner {
    display: inline-block;
    width: 16px;
    height: 16px;
    border: 2px solid #f3f3f3;
    border-top: 2px solid #007bff;
    border-radius: 50%;
    animation: spin 1s linear infinite;
}

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

.loading-suggestions {
    padding: 12px;
    background-color: #f8f9fa;
    border-radius: 4px;
    border: 1px solid #dee2e6;
}

/* Clinical text display styling */
.clinical-text-display {
    margin-top: 15px;
    padding: 12px;
    background-color: #f8f9fa;
    border-left: 4px solid #007bff;
    border-radius: 4px;
}

.clinical-text-header {
    margin-bottom: 8px;
    color: #495057;
}

.clinical-text-content {
    color: #6c757d;
    font-style: italic;
    line-height: 1.4;
}

/* Upgrade result section styling */
#upgrade-result-section {
    border-top: 2px solid #e9ecef;
    margin-top: 20px;
    padding-top: 20px;
}

.em-level-strong {
    color: #28a745;
    font-size: 1.1em;
}