.em-logic-container .em-logic-expression {
  display: flex;
  flex-wrap: wrap;
}

.em-logic-container .em-logic-group {
  display: inline-flex;
  flex-wrap: wrap;
  max-width: 95%;
  white-space: normal;
  justify-content: center; /* center badges per row */
}

.em-logic-container .em-operator-badge {
  flex: 0 0 auto;
}
/* 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: #212529;
}

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

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

.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 10px 10px rgba(0,0,0,0.1);
    padding: 20px;
    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: 20px;
    text-align: center;
    position: relative;
    letter-spacing: 1px;
}

.section-title::before {
    content: '';
    width: 4px;
    height: 30px;
    background: linear-gradient(45deg, #3CBBB2, #3cbbb2);
    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: 30px;
    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: 7px;
}

.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.1em;
    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 {
    max-height: 140px;
    overflow-y: auto;
    background-color: #EEF2FD;
    border: 1px solid #5D7CE9;
    border-radius: 8px;
    padding: 12px;
    margin-top: 12px;
}

/* Hide file-list when empty (no files uploaded) */
.file-list:empty {
    display: none;
}

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

/* Remove margin-bottom when there's only one file */
.coders-page .file-item.single-file {
    margin-bottom: 0px;
}

.file-info {
    display: flex;
    align-items: center;
    gap: 10px;
    min-width: 0; /* Allow flex children to shrink below content size */
    flex: 1; /* Take available space and shrink if needed */
}

.file-name {
    font-weight: 600;
    color: #140F13;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    min-width: 0; /* Allow text truncation in flex container */
}

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

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

/* Overlay layer used to visualize inserted text highlights under textareas (scoped to updated docs) */
#codersView .updated-documentation-display .textarea-container .highlight-layer {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    overflow: hidden;
    color: transparent; /* text color hidden; only background of spans shows */
    pointer-events: none; /* allow clicks to pass to textarea */
    white-space: pre-wrap;
    word-wrap: break-word;
    z-index: 0;
    background-color: #ffffff; /* keep visible background white behind the textarea */
}

/* Ensure translated content is clipped within the highlight layer */
#codersView .updated-documentation-display .textarea-container .highlight-layer .highlight-content {
    will-change: transform;
}

#codersView .updated-documentation-display .textarea-container .highlight-layer .added-text {
    background-color: #fff1a8; /* soft yellow highlight for additions */
    color: transparent; /* ensure caret/text comes from textarea above */
    -webkit-box-decoration-break: clone;
    box-decoration-break: clone;
}

/* Ensure the textarea sits above the highlight layer */
#codersView .updated-documentation-display .textarea-container textarea,
#codersView .updated-documentation-display .textarea-container .form-control {
    position: relative;
    background-color: transparent; /* so highlights show through */
    z-index: 1;
}

.expand-text-btn {
    position: absolute;
    top: 10px;
    right: 40px !important;
    background: #5D7CE9;
    color: white;
    border: none;
    border-radius: 50%;
    width: 24px;
    height: 24px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;
    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);
}

/* Clear text button next to expand */
.clear-text-btn {
    position: absolute;
    top: 10px;
    right: 10px !important; /* to the right of expand button */
    background: #D33C4B;
    color: white;
    border: none;
    border-radius: 50%;
    width: 24px;
    height: 24px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;
    transition: all 0.2s ease;
    z-index: 10;
    text-align: center;
    line-height: 1;
    padding: 0;
}
.clear-text-btn:hover {
    background: rgb(209, 36, 53);;
    transform: scale(1.05);
}

/* Show clear button only when there is sufficient data */
.textarea-section .clear-text-btn { display: none; }
.textarea-section.has-sufficient-data .clear-text-btn { display: flex; }

/* 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;
    display: flex;
    justify-content: center;
    align-items: center;
}

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

/* Disabled state for Submit button in modal */
.modal-submit-btn:disabled {
    background: #cbd5e1; /* slate-300 */
    color: #475569; /* slate-600 */
    cursor: not-allowed;
    box-shadow: none;
    opacity: 0.9;
}

.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;
    white-space: pre-wrap;
    word-wrap: break-word;
    text-indent: 0;
}

.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: 0px !important;
    padding: 15px;
    border: 1px solid #dee2e6;
    border-radius: 12px;
    background-color: #f8f9fa;
    position: relative;
}

.updated-documentation-header {
    margin-bottom: 10px;
    color: #140F13;
    text-align: center;
    font-family: 'THICCCBOI', 'Exo 2', sans-serif;
    font-size: 1.3em;
    font-weight: 900;
    letter-spacing: 0.5px;
    margin-top: 12px;
    padding-top: 15px;
}

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

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

/* Ensure E/M parent and Updated Documentation cards match ICD-10 base shadow, without hover effect */
.dashboard-page #codersView .em-parent-card,
.dashboard-page #codersView .updated-documentation-display {
    box-shadow: 0 2px 8px rgba(0,0,0,0.1);
}

.dashboard-page #codersView .em-parent-card:hover,
.dashboard-page #codersView .updated-documentation-display:hover {
    transform: none;
    box-shadow: 0 2px 8px rgba(0,0,0,0.1);
}

/* Mirror card shadows for review view */
.dashboard-page #codersReviewView .em-parent-card,
.dashboard-page #codersReviewView .updated-documentation-display {
    box-shadow: 0 2px 8px rgba(0,0,0,0.1);
}
.dashboard-page #codersReviewView .em-parent-card:hover,
.dashboard-page #codersReviewView .updated-documentation-display:hover {
    transform: none;
    box-shadow: 0 2px 8px rgba(0,0,0,0.1);
}

/* Hide collapse icon in updated documentation on Coders dashboard */
#codersView .updated-documentation-display .collapse-icon {
	display: none !important;
}

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

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

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

/* Normalize line-height for textarea and overlay to avoid UA 'normal' mismatches */
#codersView .updated-documentation-display .updated-documentation-textarea,
#codersView .updated-documentation-display .textarea-container .highlight-layer {
    line-height: 1.4;
}

/* Updated Documentation two-column layout */
#codersView .updated-doc-layout {
    display: flex;
    gap: 16px;
    align-items: flex-start;
}

#codersView .updated-doc-left {
    flex: 1 1 auto;
    min-width: 0;
}

#codersView .updated-doc-toc {
    width: 260px;
    background: #ffffff;
    border: 1px solid #e5e7eb;
    border-radius: 8px;
    padding: 14px 16px;
    overflow: auto;
    position: sticky;
    top: 12px;
}

#codersView .updated-doc-toc h6 {
    margin: 0 0 30px 0;
    font-weight: 900;
    color: #140F13;
    font-size: 1.15rem;
    letter-spacing: 0.3px;
}

#codersView .updated-doc-toc ul {
    list-style: none;
    margin: 0;
    padding: 0;
}

#codersView .updated-doc-toc li {
    margin: 8px 0;
}

#codersView .updated-doc-toc a {
    color: #5D7CE9;
    text-decoration: none;
    font-size: 1rem;
    font-weight: 500;
}

#codersView .updated-doc-toc a:hover {
    text-decoration: underline;
    font-weight: 800;
}

/* Make the updated doc container able to grow taller comfortably */
#codersView .updated-documentation-display {
    padding-top: 15px !important;
}

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

.copy-to-clipboard-btn {
    font-family: 'THICCCBOI', 'Orbitron', monospace;
    background: #3CBBB2;
    color: white;
    border: none;
    padding: 12px 24px;
    font-size: 0.85em;
    font-weight: 700;
    border-radius: 10px;
    cursor: pointer;
    transition: all 0.3s ease;
    display: flex;
    align-items: center;
    justify-content: center;
    letter-spacing: 0.5px;
    text-transform: uppercase;
    position: relative;
    z-index: 1;
    line-height: 1;
    white-space: nowrap;
}

.copy-to-clipboard-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 20px rgba(60, 187, 178, 0.3);
}

.copy-to-clipboard-btn:disabled {
    opacity: 0.6;
    cursor: not-allowed;
    transform: none;
}

.copy-success-message {
    color: #3CBBB2;
    font-size: 0.9em;
    font-weight: 600;
    margin-top: 8px;
    animation: fadeIn 0.3s ease-in, fadeOut 0.3s ease-out 2.7s;
}

@keyframes fadeIn {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}

@keyframes fadeOut {
    from {
        opacity: 1;
    }
    to {
        opacity: 0;
    }
}

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

/* Apply margin-bottom only when button-container is visible */
.upload-card:has(+ .button-container:not([style*="display: none"])) {
    margin-bottom: 30px;
}

.upload-card:has(+ .button-container[style*="display: flex"]),
.upload-card:has(+ .button-container[style*="display: block"]) {
    margin-bottom: 30px;
}

/* Collapse upload-grid-layout margin when no data is present */
.upload-grid-layout {
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-template-rows: auto auto;
    gap: 30px;
    margin-bottom: 0;
    align-items: stretch;
}

/* Only apply margin-bottom when there is actual content */
.upload-grid-layout:has(> .textarea-section .text-input:not(:placeholder-shown)) {
    margin-bottom: 30px;
}

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

.upload-card.collapsed .upload-content {
    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;
}

/* Remove extra whitespace below upload card while processing */
.upload-card.collapsed.processing + .connection-dots {
    margin-top: 8px;
    margin-bottom: 8px;
}

/* Add subtle spacing below collapsed processing upload card */
.upload-card.collapsed.processing {
    margin-bottom: 12px;
}

/* Add top spacing above results card while loading/extracting */
.upload-card.collapsed.processing + .connection-dots + #resultsCard {
    margin-top: 12px;
}

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

/* Stop animation when validation errors appear */
.validation-errors-notice ~ .connection-dots .dot,
.connection-dots:has(~ .validation-errors-notice) .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: 0px !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: 0;
    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;
    max-height: 220px !important;
    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;
    max-height: 220px !important;
    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: #5D7CE9;
    font-weight: 600;
}

.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-start; /* align button tops */
    position: relative;
    bottom: 0;
    width: 100%;
}

/* Normalize vertical margins for buttons inside the container to keep tops aligned */
.button-container .add-patient-btn,
.button-container .process-btn {
    margin-top: 0 !important;
    margin-bottom: 0 !important;
}

.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: 0px auto 20px auto;
    }
    
    .upload-content {
        padding-bottom: 5px;
    }
    
    .upload-grid-layout {
        display: grid !important;
        grid-template-columns: 1fr 1fr !important;
        grid-template-rows: auto auto !important;
        gap: 15px !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;
}

/* Alternate row background colors in coders dashboard patient list */
.coders-page .patient-list .patient-item:nth-child(odd) {
    background-color: #f1fff5;
}

.coders-page .patient-list .patient-item:nth-child(even) {
    background-color: #fff9f1;
}

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

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

/* 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: #D33C4B;
    color: white;
    border: none;
    border-radius: 50%;
    width: 32px;
    height: 32px;
    font-size: 24px;
    font-weight: normal;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background-color 0.2s ease;
}

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

.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: 200px;
    padding: 20px;
}
    
.file-list {
    max-height: 140px;
    overflow-y: auto;
}

/* Compact upload area when files are present */
.upload-area.has-files {
    max-height: 50px !important;
    min-height: 0 !important;
}
.upload-area.has-files .upload-icon,
.upload-area.has-files .upload-subtext {
    display: none !important;
}
.upload-area.has-files .upload-text {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    font-weight: 400; /* not bold in compact mode */
    margin-bottom: 0;
}

/* Center the compact upload area content vertically */
.upload-area.has-files {
    display: flex;
    align-items: center;
    justify-content: center;
}
    
.file-item {
    padding: 10px;
    margin-bottom: 8px;
    background-color: white;
    border: 1px solid #d0d0d0;
    border-radius: 4px;
}



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

.coders-subtitle {
    font-size: 1.5em;
    letter-spacing: 5px;
    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: #3cbbb2;
    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: #3cbbb2;
    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 #3cbbb2;
    position: relative;
}

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

.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: #F9FAFB;
    border-radius: 15px;
    padding: 15px;
    box-shadow: 0 4px 6px rgba(0,0,0,0.1);
    color: #140F13;
    position: relative;
    transition: all 0.3s ease;
    cursor: pointer;
    margin-bottom: 20px;
}

/* Apply margin-bottom only when button-container is visible */
.patient-card:has(+ .button-container:not([style*="display: none"])) {
    margin-bottom: 35px;
}

.patient-card:has(+ .button-container[style*="display: flex"]),
.patient-card:has(+ .button-container[style*="display: block"]) {
    margin-bottom: 35px;
}

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

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

/* Ensure upload-area stacks above file-list inside the card */
.patient-card .upload-section {
    display: flex;
    flex-direction: column;
}
.patient-card .upload-section .upload-area {
    flex: 0 0 auto;
}
.patient-card .upload-section .file-list {
    flex: 0 0 auto;
    margin-top: 12px;
}

.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: #3CBBB2;
    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;
    margin-top: 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: 400;
    color: #140F13;
    text-align: center;
    letter-spacing: 0.5px;
}
.patient-result-content .procedure-header .updated-documentation-header {
    margin-bottom: 35px !important;
    padding-top: 25px !important;
}

.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: #F9FAFB;
    padding: 1px;
    border-radius: 8px;
    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
    border: 1px solid #dee2e6;
    margin: 16px 0;
    font-size: 15px;
    line-height: 1.6;
    position: relative;
    z-index: 2;
}

.em-logic-container.em-logic-upgrade {
    margin-top: 24px;
}

/* Remove top margin on only the first child inside upgrade result sections */
[id^="upgrade-result-"] > .em-logic-container:first-child {
    margin-top: 0;
}

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

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

.em-logic-group.or-group { background-color: #d9e3ff; }

.em-logic-group.and-group { background-color: #d9e3ff; }

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

/* Disabled state for em-logic-term badges during loading (critical care) */
.em-logic-term.disabled {
    opacity: 0.5 !important;
    cursor: not-allowed !important;
    box-shadow: none !important;
    background-color: #f0f0f0 !important;
    color: #999999 !important;
    border-color: #d0d0d0 !important;
}

.em-logic-term.disabled:hover {
    background-color: #f0f0f0 !important;
    transform: none !important;
}

/* Highlight entire logic group when any term inside is selected */
.em-logic-group.selected {
    background-color: #c7d4fc !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: #3cbbb2;
    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;
    max-height: 100px;
    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: "Entry: " attr(data-entry-local, "");
    position: absolute;
    top: 0;
    left: 50%;
    transform: translate(-50%, -50%);
    display: inline-block;
    font-family: 'THICCCBOI', 'Exo 2', sans-serif;
    font-size: 0.95em;
    font-weight: 600;
    color: #ffffff;
    background: #5D7CE9;
    border: 1px solid #5D7CE9;
    padding: 4px 12px;
    border-radius: 20px;
    text-transform: none;
    letter-spacing: 0.5px;
    width: fit-content;
    z-index: 2;
}

.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;
	margin: 8px 12px 15px 12px;
}

/* Ensure spacing under banner text when collapsed */
.em-logic-container.em-logic-collapsed .em-center-text.em-level-achieved-banner {
	padding-bottom: 15px;
}
/* Center the time entry block and tweak input appearance */
.em-time-entry {
	text-align: center;
}
.em-time-entry + div input[type="number"] {
	margin: 0 auto;
	display: block;
	font-size: 18px;
	appearance: textfield;
	-moz-appearance: textfield;
    text-align: center;
}
.em-time-entry + div { padding-bottom: 23px; }
.em-time-entry + div input[type="number"]::-webkit-outer-spin-button,
.em-time-entry + div input[type="number"]::-webkit-inner-spin-button {
	-webkit-appearance: none;
	margin: 0;
}

/* Reporting panel: center container, left-align content */
.em-report-incorrect {
	display: flex;
	justify-content: center;
	flex-direction: column;
	align-items: center;
}
.em-report-panel {
	text-align: left;
	width: auto;
	max-width: 520px;
	margin: 0 auto;
	align-self: center;
}
.em-report-options {
	text-align: left;
}
.em-report-options > div {
	display: grid;
	grid-template-columns: 20px auto;
	gap: 8px;
	justify-content: start;
	align-items: start;
}

/* Hide E/M time UI when the parent patient card is collapsed */
.patient-result-section.collapsed .em-time-entry,
.patient-result-section.collapsed .em-time-input-row {
	display: none !important;
}

/* Hide E/M time UI when a logic container is collapsed */
.em-logic-container.em-logic-collapsed .em-time-entry,
.em-logic-container.em-logic-collapsed .em-time-input-row,
.em-logic-container.em-logic-collapsed .em-report-incorrect {
	display: none !important;
}
/* 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;
    position: relative;
}

/* Count pill for (current: X) indicator */
.em-condition-badge.em-current-badge .em-count-badge {
    position: absolute;
    top: -6px;
    right: -6px;
    background: #5D7CE9;
    color: #ffffff;
    border-radius: 10px;
    min-width: 18px;
    height: 18px;
    line-height: 18px;
    text-align: center;
    font-size: 11px;
    padding: 0 4px;
    border: 2px solid #ffffff;
}

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

/* Tooltip for Data Score badge */
.em-condition-badge.em-current-badge .em-datascore-tooltip {
    position: absolute;
    top: 100%;
    right: 0;
    transform: translateY(6px);
    background: #111827;
    color: #F9FAFB;
    border: 1px solid #374151;
    border-radius: 6px;
    padding: 8px 10px;
    font-size: 12px;
    line-height: 1.3;
    white-space: nowrap;
    box-shadow: 0 8px 16px rgba(0,0,0,0.15);
    z-index: 1000;
    display: none;
}
.em-condition-badge.em-current-badge:hover .em-datascore-tooltip {
    display: block;
}

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

/* Disable hover effects for EM flow collapsed cards and chip */
.patient-result-section.em-flow.collapsed:hover {
    background-color: #E0F5F0;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
    transform: none;
}
.patient-result-section.em-flow.collapsed:hover::after {
    color: #ffffff;
    background: #5D7CE9;
    border-color: #5D7CE9
}

.em-report-options {
    padding-bottom: 10px !important;
}

/* 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: #3cbbb2;
    border: 1px solid #3cbbb2;
}

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

/* Mirror ICD-10 hover effects for E/M containers on dashboard coders */
.dashboard-page #codersView .em-logic-container:hover,
.dashboard-page #codersView .em-grouped-wrapper:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 12px rgba(0,0,0,0.15);
}

/* Match vertical spacing to upload-card vs #resultsCard gap for parent card vs updated docs */
.dashboard-page #codersView .em-parent-card {
    margin-bottom: 0px; /* align with .upload-card margin-top for visual parity */
}

/* Match vertical spacing in review view as well */
.dashboard-page #codersReviewView .em-parent-card {
    margin-bottom: 0px;
}

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

/* Keep header visible in collapsed state so users can expand via header */
.icd10-codes-card.icd10-collapsed .icd10-header-container {
    display: block;
    padding-top: 10px;
}

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

/* Center selected ICD-10 badges within the collapsed card */
.collapsed-icd10-codes .selected-list {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
}

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

/* Hide the duplicated header inside collapsed content for E/M ICD-10 card */
.icd10-codes-card.icd10-collapsed .collapsed-icd10-codes h4 {
    display: none;
}

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

/* Hide collapsed badge view when ICD-10 card is expanded */
.icd10-codes-card:not(.icd10-collapsed) .collapsed-icd10-codes {
    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: flex;
	align-items: flex-start;
	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);
	transform-origin: top left;
	margin-top: 2px;
    -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.3;
	margin-top: -1px;
    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: 35px;
    padding: 12px;
    background-color: #E8F5E8;
    color: #2d5016 !important;
    font-weight: 500 !important;
    text-align: center;
}

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

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

/* Dashboard grouped section under clinical text */
.dashboard-page .em-grouped-wrapper {
    background: #F9FAFB;
    padding: 15px; /* internal padding around .em-group cards */
    border-radius: 8px;
    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
    border: 1px solid #dee2e6;
    margin: 25px 0 4px 0;
    position: relative;
    cursor: pointer;
    transition: all 0.3s ease;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
}

.dashboard-page .em-grouped-wrapper:hover {
    background: #f1f5f9;
    box-shadow: 0 4px 8px rgba(0,0,0,0.15);
}

/* Collapsible em-grouped-wrapper styles */
.dashboard-page .em-grouped-wrapper.collapsed {
    padding: 12px 20px;
    cursor: pointer;
}

.dashboard-page .em-grouped-wrapper.collapsed .em-grouped-section {
    display: none;
}

.dashboard-page .em-grouped-wrapper .procedure-expand-btn {
    position: absolute;
    top: 8px;
    right: 8px;
    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: 16px;
    font-weight: bold;
    transition: all 0.2s ease;
    z-index: 10;
    line-height: 1;
    padding: 0;
}

.dashboard-page .em-grouped-wrapper .procedure-expand-btn:hover {
    background: #4A6BD8;
    transform: scale(1.1);
}

.dashboard-page .em-grouped-wrapper .procedure-expand-btn:active {
    transform: scale(0.95);
}

/* Status display when collapsed */
.dashboard-page .em-grouped-wrapper .em-grouped-status {
    display: none;
    text-align: center;
    padding-top: 15px;
    margin: 8px 12px 15px 12px;
    color: #6b7280;
    font-style: italic;
}

.dashboard-page .em-grouped-wrapper.collapsed .em-grouped-status {
    display: block;
}
.dashboard-page .em-grouped-section {
    min-width: 100%;
    margin-top: 12px;
    padding-top: 5px;
    padding-left: 5px;
    padding-right: 5px;
}
.dashboard-page .em-grouped-section .em-group {
    margin-bottom: 0px;
    width: 100%;
    border-radius: 12px;
    border: 1px solid #dee2e6;
    box-shadow: 0 2px 8px rgba(16, 24, 40, 0.06);
    padding: 12px 14px;
}
.dashboard-page .em-grouped-section .em-group-header {
    font-weight: 700;
    color: #0f172a;
    margin-bottom: 10px;
    text-align: center;
    text-transform: uppercase;
}
.dashboard-page .em-grouped-section .em-group-cards {
    display: flex;
    flex-direction: column;
    gap: 12px;
    width: 100%;
}
.dashboard-page .em-grouped-section .em-group-card {
    border: 1px solid rgba(0,0,0,0.06);
    border-radius: 10px;
    background: rgba(255, 255, 255, 0.9);
    padding: 12px 14px;
    position: relative; /* anchor expand-text-btn inside card */
    width: 100%;
}
.dashboard-page .em-grouped-section .em-group-card .expand-text-btn {
    right: 48px; /* leave room for remove button on the right */
}
.dashboard-page .em-grouped-section .em-group-card .remove-card-btn {
    position: absolute;
    top: 10px;
    right: 10px; /* to the right of expand button */
    background: #D33C4B;
    color: white;
    border: none;
    border-radius: 50%;
    width: 24px; /* match expand-text-btn size */
    height: 24px; /* match expand-text-btn size */
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 12px; /* match expand-text-btn */
    transition: all 0.2s ease;
    z-index: 11;
    line-height: 1;
    padding: 0;
}
.dashboard-page .em-grouped-section .em-group-card .remove-card-btn:hover {
    background: #dc2626;
    transform: scale(1.05);
}
.dashboard-page .em-grouped-section .em-group-card-title {
    font-weight: 600;
    margin-bottom: 8px;
    color: #0f172a;
    text-align: center;
}
.dashboard-page .em-grouped-section .em-group-card-content {
    min-height: 44px;
    outline: none;
    text-align: center;
}

/* Themed backgrounds per group */
.dashboard-page .em-grouped-section .problems-group {
    background: #CFE0FF; 
    border-color: #B6E0FE;
}
.dashboard-page .em-grouped-section .problems-group .em-group-card {
    border-color: #A1D0FA;
    background: #edf4ff;
}
.dashboard-page .em-grouped-section .problems-group .em-group-header {
    color: #095ABA;
}

.dashboard-page .em-grouped-section .data-group {
    background: #D9E0F7;
    border-color: #E3F2FD;
}
.dashboard-page .em-grouped-section .data-group .em-group-card {
    border-color: #725993;
    background: #f3f6ff;
}
.dashboard-page .em-grouped-section .data-group .em-group-header {
    color: #0E4588;
}

.dashboard-page .em-grouped-section .risk-group {
    background: #CFE0FF; 
    border-color: #B6E0FE;
}
.dashboard-page .em-grouped-section .risk-group .em-group-card {
    border-color: #A1D0FA;
    background: #edf4ff;
}
.dashboard-page .em-grouped-section .risk-group .em-group-header {
    color: #095ABA;
}

/* E/M logic container collapse control */
.em-logic-container {
    position: relative;
}
.em-logic-container .procedure-expand-btn {
    position: absolute;
    top: 8px;
    right: 8px;
}
.em-logic-container.em-logic-collapsed .em-logic-expression {
    display: none !important;
}

/* Hide clinical text when E/M logic is collapsed */
.em-logic-container.em-logic-collapsed .clinical-text-display {
    display: none !important;
}

/* Hide center text and improve instruction when logic upgrade is collapsed, but keep the level achievement banner visible */
.em-logic-container.em-logic-upgrade.em-logic-collapsed .em-center-text:not(.em-level-achieved-banner):not(.em-collapse-placeholder),
.em-logic-container.em-logic-upgrade.em-logic-collapsed .em-improve-instruction {
    display: none !important;
}

/* Style the placeholder text shown when collapsed */
.em-collapse-placeholder {
    display: block !important;
    width: 100%;
    text-align: center;
    padding: 8px 0;
    line-height: 1.4;
}

/* Hide placeholder when the card is expanded */
.em-logic-container:not(.em-logic-collapsed) .em-collapse-placeholder {
    display: none !important;
}

.em-logic-container.em-logic-collapsed .em-logic-expression {
    display: none !important;
}

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

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

/* Parent card for coders dashboard E/M area */
.dashboard-page #codersView .em-parent-card {
    background: #F9FAFB;
    padding: 15px;
    border-radius: 12px;
}

/* Parent card styling for review: mirror coders */
.dashboard-page #codersReviewView .em-parent-card {
    background: #F9FAFB;
    padding: 15px;
    border-radius: 12px;
}

/* Override backgrounds for inner E/M blocks on coders dashboard */
.dashboard-page #codersView .em-logic-container,
.dashboard-page #codersView .em-grouped-wrapper {
    background: #EEF2FD !important;
}

/* Keep grouped wrapper variants consistent */
.dashboard-page #codersView .em-grouped-wrapper.collapsed,
.dashboard-page #codersView .em-grouped-wrapper:hover {
    background: #EEF2FD !important;
}

/* Updated Documentation – Coders Review view support */
#codersReviewView .updated-doc-layout {
    display: flex;
    gap: 16px;
    align-items: flex-start;
}

#codersReviewView .updated-doc-left {
    flex: 1 1 auto;
    min-width: 0;
}

#codersReviewView .updated-doc-toc {
    width: 260px;
    background: #ffffff;
    border: 1px solid #e5e7eb;
    border-radius: 8px;
    padding: 14px 16px;
    overflow: auto;
    position: sticky;
    top: 12px;
}

#codersReviewView .updated-doc-toc h6 {
    margin: 0 0 30px 0;
    font-weight: 900;
    color: #140F13;
    font-size: 1.15rem;
    letter-spacing: 0.3px;
}

#codersReviewView .updated-doc-toc ul {
    list-style: none;
    margin: 0;
    padding: 0;
}

#codersReviewView .updated-doc-toc li {
    margin: 8px 0;
}

#codersReviewView .updated-doc-toc a {
    color: #5D7CE9;
    text-decoration: none;
    font-size: 1rem;
    font-weight: 500;
}

#codersReviewView .updated-doc-toc a:hover {
    text-decoration: underline;
    font-weight: 800;
}

#codersReviewView .updated-documentation-display .updated-documentation-textarea,
#codersReviewView .updated-documentation-display .textarea-container .highlight-layer {
    line-height: 1.4;
}

#codersReviewView .updated-documentation-display .textarea-container .highlight-layer {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    overflow: hidden;
    color: transparent;
    pointer-events: none;
    white-space: pre-wrap;
    word-wrap: break-word;
    z-index: 0;
    background-color: #ffffff;
}

#codersReviewView .updated-documentation-display .textarea-container .highlight-layer .highlight-content {
    will-change: transform;
}

#codersReviewView .updated-documentation-display .textarea-container .highlight-layer .added-text {
    background-color: #fff1a8;
    color: transparent;
    -webkit-box-decoration-break: clone;
    box-decoration-break: clone;
}

#codersReviewView .updated-documentation-display .textarea-container textarea,
#codersReviewView .updated-documentation-display .textarea-container .form-control {
    position: relative;
    background-color: transparent;
    z-index: 1;
}

#codersReviewView .updated-documentation-display {
    padding-top: 0px !important;
}

/* Ensure h5 title in updated documentation header maintains styling and doesn't shrink */
.updated-documentation-header h5 {
    margin: 0;
    font-family: 'THICCCBOI', 'Exo 2', sans-serif;
    font-size: 1.3em;
    font-weight: 900;
    color: #140F13;
    letter-spacing: 0.5px;
    text-align: center;
    flex: 1;
}

/* Ensure copy button maintains consistent styling */
.updated-documentation-header .btn-outline-primary {
    flex-shrink: 0;
    white-space: nowrap;
}

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

.generate-updated-wrapper .process-btn:hover:not(:disabled) {
    transform: translateY(-2px) !important;
    box-shadow: 0 8px 20px rgba(93, 124, 233, 0.3) !important;
}

.generate-updated-wrapper .process-btn:disabled {
    opacity: 0.6 !important;
    cursor: not-allowed !important;
    transform: none !important;
}

/* E/M logic container collapse control */
.em-logic-container {
    position: relative;
}
.em-logic-container .procedure-expand-btn {
    position: absolute;
    top: 8px;
    right: 8px;
}

/* Maintain visibility when em-logic-container is collapsed */
.em-logic-container.em-logic-collapsed {
    min-height: 60px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 12px 20px !important;
}

.em-logic-container.em-logic-expression {
    display: none !important;
}

/* Hide center text and improve instruction when logic upgrade is collapsed, but keep the level achievement banner visible */
.em-logic-container.em-logic-upgrade.em-logic-collapsed .em-center-text:not(.em-level-achieved-banner):not(.em-collapse-placeholder),
.em-logic-container.em-logic-upgrade.em-logic-collapsed .em-improve-instruction {
    display: none !important;
}

/* Style the placeholder text shown when collapsed */
.em-collapse-placeholder {
    display: block !important;
    width: 100%;
    text-align: center;
    padding: 8px 0;
    line-height: 1.4;
}

/* Hide placeholder when the card is expanded */
.em-logic-container:not(.em-logic-collapsed) .em-collapse-placeholder {
    display: none !important;
}

.em-logic-container.em-logic-collapsed .em-logic-expression {
    display: none !important;
}

/* Hide center text and improve instruction when logic upgrade is collapsed, but keep the level achievement banner visible */
.em-logic-container.em-logic-upgrade.em-logic-collapsed .em-center-text:not(.em-level-achieved-banner):not(.em-collapse-placeholder),
.em-logic-container.em-logic-upgrade.em-logic-collapsed .em-improve-instruction {
    display: none !important;
}

/* Ensure level achievement banner always displays even when collapsed */
.em-logic-container.em-logic-upgrade.em-logic-collapsed .em-center-text.em-level-achieved-banner {
    display: block !important;
}

/* Validation error message styling */
.validation-error-message {
    font-weight: bold;
    color: #C32D27;
    text-align: center;
    margin: 15px auto 20px;
    font-size: 0.95em;
}

/* No patient cases message styling */
.no-patient-cases-message {
    text-align: center;
    padding: 40px 20px;
    color: #666;
    font-size: 16px;
}

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

.generate-updated-wrapper .process-btn:hover:not(:disabled) {
    transform: translateY(-2px) !important;
    box-shadow: 0 8px 20px rgba(93, 124, 233, 0.3) !important;
}

.generate-updated-wrapper .process-btn:disabled {
    opacity: 0.6 !important;
    cursor: not-allowed !important;
    transform: none !important;
}

/* Ensure generate-updated-wrapper stays visible and accessible at all times */
/* This is a safety net to prevent the wrapper from being hidden by parent collapse CSS */
.generate-updated-wrapper {
    display: flex !important;
    visibility: visible !important;
    opacity: 1 !important;
    min-height: auto !important;
    max-height: none !important;
    overflow: visible !important;
    position: relative !important;
    z-index: 10 !important;
    padding-top: 25px !important;
}

/* Ensure wrapper stays visible even when inside collapsed em-logic-container */
.em-logic-container .generate-updated-wrapper,
.em-logic-collapsed .generate-updated-wrapper {
    display: flex !important;
    visibility: visible !important;
    opacity: 1 !important;
    max-height: none !important;
    overflow: visible !important;
}

/* Ensure wrapper stays visible even when inside collapsed em-grouped-wrapper */
.em-grouped-wrapper .generate-updated-wrapper,
.em-grouped-wrapper.collapsed .generate-updated-wrapper {
    display: flex !important;
    visibility: visible !important;
    opacity: 1 !important;
    max-height: none !important;
    overflow: visible !important;
    width: 100% !important;
    flex-basis: 100% !important;
    flex-shrink: 0 !important;
}

/* Additional protection for elements marked with data-ensure-visible */
[data-ensure-visible="true"] {
    display: flex !important;
    visibility: visible !important;
    opacity: 1 !important;
    max-height: none !important;
    overflow: visible !important;
}

/* Ensure upgrade result sections have appropriate spacing from elements above */
[id^="upgrade-result-"] {
    margin-top: 0px !important;
}

/* When updated documentation is present, add spacing */
[id^="upgrade-result-"].has-updated-doc {
    margin-top: 0px !important;
}

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

.remove-patient-btn {
    border: none;
    background: none;
    cursor: pointer;
    font-size: 1.6em;
    color: #5D7CE9;
    padding: 0;
    margin-left: 8px;
    transition: color 0.2s ease;
}

.remove-patient-btn:hover {
    background: #a30909 !important;
}

/* Ensure remove button styling inside visible selected-patient card */
.selected-patient.csp-display-block .remove-patient-btn {
    background: #C55560 !important;
    color: #ffffff !important;
}
.selected-patient.csp-display-block .remove-patient-btn:hover {
    background: #a30909!important; /* keep consistent on hover */
}

/* Patient list display states */
.patient-list-active {
    display: block !important;
    max-height: 300px;
    overflow-y: auto;
}

.patient-list-hidden {
    display: none !important;
}

.patient-list {
    display: none;
}

.patient-list-empty {
    padding: 10px;
    color: #999;
    text-align: center;
    font-style: italic;
}

/* Update uploadContent to use flexbox with gap */
#uploadContent {
    display: flex;
    flex-direction: column;
    gap: 0;
}

#uploadContent .patient-card {
    margin-bottom: 20px;
}

#uploadContent .patient-card:last-of-type {
    margin-bottom: 0;
}

#uploadContent .button-container {
    margin-top: 50px;
}

/* Support em-grouped-wrapper in coders-review view */
.dashboard-page #codersReviewView .em-logic-container,
.dashboard-page #codersReviewView .em-grouped-wrapper {
    background: #EEF2FD !important;
}

/* Keep grouped wrapper variants consistent in review view */
.dashboard-page #codersReviewView .em-grouped-wrapper.collapsed,
.dashboard-page #codersReviewView .em-grouped-wrapper:hover {
    background: #EEF2FD !important;
}

/* Updated Documentation Display - Padding and Layout Adjustments */
.updated-documentation-display {
    padding-top: 0px !important;
    margin-top: 0px !important;
}

.updated-documentation-display .cpt-header-container {
    padding-top: 10px !important;
}

.updated-documentation-display .cpt-header-container .procedure-header {
    padding-top: 10px !important;
    margin-top: 0 !important;
}

/* Copy button positioning and centering */
.updated-documentation-copy-container {
    display: flex;
    justify-content: center;
    padding-top: 12px;
    padding-bottom: 8px;
    margin-top: 8px;
}

.updated-documentation-copy-container .copy-to-clipboard-btn {
    background-color: #5D7CE9;
    color: white;
    border: none;
    padding: 8px 16px;
    border-radius: 4px;
    cursor: pointer;
    font-weight: 500;
    transition: background-color 0.2s ease;
}

.updated-documentation-copy-container .copy-to-clipboard-btn:hover {
    background-color: #4A6BD8;
}

.updated-documentation-copy-container .copy-to-clipboard-btn:active {
    background-color: #3A5AC7;
}

/* Copy button wrapper - centered below documentation display */
.updated-documentation-copy-wrapper {
    display: flex;
    justify-content: center;
    padding-top: 16px;
    padding-bottom: 8px;
    margin-top: 12px;
}

/* Hide old copy container elements that may still be in the DOM */
.updated-documentation-copy-container {
    display: none !important;
}

/* Skeleton Loading Styles - Immediate visual feedback with pulsing animation */
.coders-skeleton {
    animation: fadeIn 0.3s ease-in;
}

@keyframes fadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
}

@keyframes pulse {
    0%, 100% {
        opacity: 0.4;
    }
    50% {
        opacity: 1;
    }
}

.skeleton-header {
    margin-bottom: 24px;
}

.skeleton-title {
    height: 32px;
    width: 40%;
    background: #3a3e7c;
    animation: pulse 1.5s ease-in-out infinite;
    border-radius: 8px;
    margin-bottom: 12px;
}

.skeleton-subtitle {
    height: 20px;
    width: 60%;
    background: #3a3e7c;
    animation: pulse 1.5s ease-in-out 0.2s infinite;
    border-radius: 6px;
}

.skeleton-upload-area {
    padding: 60px 20px;
    border: 2px dashed rgba(255, 255, 255, 0.15);
    border-radius: 12px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 16px;
    background: rgba(255, 255, 255, 0.02);
    animation: pulse 1.5s ease-in-out 0.1s infinite;
}

.skeleton-icon {
    height: 64px;
    width: 64px;
    border-radius: 50%;
    background: #3a3e7c;
    animation: pulse 1.5s ease-in-out 0.3s infinite;
}

.skeleton-text {
    height: 24px;
    width: 300px;
    max-width: 80%;
    background: #3a3e7c;
    animation: pulse 1.5s ease-in-out 0.4s infinite;
    border-radius: 6px;
}

.skeleton-text-sm {
    height: 16px;
    width: 200px;
    max-width: 60%;
    background: #3a3e7c;
    animation: pulse 1.5s ease-in-out 0.5s infinite;
    border-radius: 4px;
}

.skeleton-info-cards {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 20px;
    margin-top: 24px;
}

.skeleton-info-card {
    height: 120px;
    background: #3a3e7c;
    animation: pulse 1.5s ease-in-out infinite;
    border-radius: 12px;
}

.skeleton-info-card:nth-child(2) {
    animation-delay: 0.15s;
}

.skeleton-info-card:nth-child(3) {
    animation-delay: 0.3s;
}