/* === BLOOD TESTS STYLES === */

/* Container principale */
.blood-tests-container {
    padding: 20px;
}

/* Header con azioni */
.blood-tests-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 30px;
    flex-wrap: wrap;
    gap: 20px;
}

.blood-tests-header h3 {
    margin: 0;
    color: var(--gradient-app-start);
}

.blood-tests-actions {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
}

.blood-test-charts-content .modal-header {
    flex-shrink: 0;
}

.blood-test-charts-content .modal-body {
    flex: 1;
    overflow-y: auto;
    padding: 20px;
    scrollbar-width: none;
}

.blood-test-charts-content .modal-footer {
    flex-shrink: 0;
}

/* Display ultimo esame */
.last-blood-test-display {
    background: var(--bg-surface-raised);
    border-radius: 15px;
    padding: 25px;
    margin-bottom: 30px;
    border-left: 5px solid var(--gradient-app-start);
}

.last-blood-test-display h4 {
    margin-bottom: 20px;
    color: var(--text-primary);
}

/* Form esami del sangue */
.blood-test-form {
    background: var(--bg-surface);
    border-radius: 15px;
    padding: 30px;
    box-shadow: 0 4px 20px var(--shadow-sm);
    margin-top: 20px;
}

.blood-test-form.hidden {
    display: none;
}

.form-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 30px;
    padding-bottom: 20px;
    border-bottom: 2px solid var(--border-medium);
}

.form-header h4 {
    margin: 0;
    color: var(--gradient-app-start);
}

/* Sezioni esami */
.exam-section {
    background: var(--bg-surface-raised);
    border-radius: 12px;
    padding: 20px;
    margin-bottom: 25px;
    border: 1px solid var(--border-medium);
}

.exam-section-title {
    color: var(--text-primary);
    margin-bottom: 20px;
    font-size: 1.2em;
    display: flex;
    align-items: center;
    gap: 10px;
}

/* Griglia campi esami */
.exam-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 20px;
}

.exam-field {
    display: flex;
    flex-direction: column;
}

.exam-field label {
    font-weight: 600;
    color: var(--text-primary);
    margin-bottom: 8px;
    font-size: 0.9em;
}

.exam-field input {
    padding: 10px;
    border: 2px solid var(--border-medium);
    border-radius: 8px;
    font-size: 1em;
    transition: all 0.3s ease;
}

.exam-field input:focus {
    outline: none;
    border-color: var(--gradient-app-start);
    box-shadow: 0 0 0 3px var(--shadow-brand-sm);
}

.exam-field input::placeholder {
    color: var(--text-hint);
    font-size: 0.9em;
}

/* Valori fuori range */
.exam-field input.out-of-range {
    border-color: var(--danger-medium);
    background-color: var(--danger-bg-lightest);
}

.exam-field input.in-range {
    border-color: var(--success);
    background-color: var(--success-bg-lightest);
}

/* Bottone info */
.btn-info {
    background: linear-gradient(135deg, var(--primary-light) 0%, var(--primary-dark) 100%);
    color: var(--text-primary);
}



/* Animazioni */
.exam-section {
    animation: fadeIn 0.3s ease;
}



/* Tooltip per range normali */
.range-tooltip {
    position: absolute;
    background: var(--text-primary);
    color: var(--text-stable-white);
    padding: 5px 10px;
    border-radius: 5px;
    font-size: 0.8em;
    display: none;
    z-index: 100;
}

.exam-field:hover .range-tooltip {
    display: block;
}

/* Risultati ultimo esame */
.blood-test-results {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 15px;
}

.result-card {
    background: var(--bg-surface);
    padding: 15px;
    border-radius: 10px;
    border: 1px solid var(--border-medium);
    transition: all 0.3s ease;
}

.result-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px var(--shadow-sm);
}

.result-value {
    font-size: 1.4em;
    font-weight: bold;
    color: var(--text-heading);
    margin-bottom: 5px;
}

.result-label {
    font-size: 0.9em;
    color: var(--text-muted);
}

.result-unit {
    font-size: 0.8em;
    color: var(--text-hint);
}

/* Indicatori valori anomali */
.result-indicator {
    display: inline-block;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    margin-left: 5px;
}

.indicator-normal {
    background-color: var(--success);
}

.indicator-low {
    background-color: var(--primary-light);
}

.indicator-high {
    background-color: var(--danger-medium);
}

/* Stili per storico esami */
/* === STAT CARD SELEZIONABILI === */

.stat-card-extended.selectable {
    cursor: pointer;
    transition: all 0.2s ease;
    position: relative;
}

.stat-card-extended.selectable:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px var(--shadow-md);
}

.stat-card-extended.selectable.selected {
    border: 2px solid var(--gradient-app-start);
    background: linear-gradient(135deg, var(--primary-bg-light) 0%, var(--violet-bg-light) 100%);
    box-shadow: 0 4px 15px var(--shadow-brand-md);
}

.stat-card-extended.selectable.selected::after {
    content: '✓';
    position: absolute;
    top: 5px;
    right: 8px;
    background: var(--gradient-app-start);
    color: var(--text-stable-white);
    width: 20px;
    height: 20px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;
    font-weight: bold;
}

.stat-card-extended.selectable .stat-label {
    user-select: none;
}

/* Contatore selezioni */
.selection-counter {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 6px 12px;
    background: var(--bg-surface-raised);
    border-radius: 20px;
    font-size: 0.85em;
    color: var(--text-muted);
}

.selection-counter.has-selection {
    background: var(--gradient-app);
    color: var(--text-stable-white);
}

.selection-counter .count {
    font-weight: 600;
}

/* Report button container */
.report-actions {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-top: 15px;
    padding: 12px 15px;
    background: var(--bg-surface-raised);
    border-radius: 8px;
    flex-wrap: wrap;
    gap: 10px;
}

.report-actions .left-actions {
    display: flex;
    align-items: center;
    gap: 10px;
}

.clear-selection-btn {
    padding: 6px 12px;
    background: transparent;
    border: 1px solid var(--danger);
    color: var(--danger);
    border-radius: 6px;
    cursor: pointer;
    font-size: 0.85em;
    transition: all 0.2s;
}

.clear-selection-btn:hover {
    background: var(--danger);
    color: var(--text-stable-white);
}

.comparative-report-btn:disabled {
    background: var(--border-strong);
    cursor: not-allowed;
    transform: none;
    box-shadow: none;
}
.blood-tests-table.enhanced .header-group {
    color: var(--text-stable-white);
}

.blood-tests-table.enhanced .header-group.emocromo {
    background: var(--danger);
}

.blood-tests-table.enhanced .header-group.lipidi {
    background: var(--warning);
}

.blood-tests-table.enhanced .header-group.metabolismo {
    background: var(--success);
}

.blood-tests-table.enhanced .header-group.tiroide {
    background: var(--violet-dark);
}

.blood-tests-table.enhanced .header-group.vitamine {
    background: var(--info);
}

.blood-tests-table.enhanced .header-group.azioni {
    background: var(--text-muted);
}

/* === TABELLA STORICO ESAMI - LINEE VERTICALI TRA CATEGORIE === */

/* Linee verticali sugli header di gruppo */
.blood-tests-table.enhanced .header-group.lipidi,
.blood-tests-table.enhanced .header-group.metabolismo,
.blood-tests-table.enhanced .header-group.tiroide,
.blood-tests-table.enhanced .header-group.vitamine,
.blood-tests-table.enhanced .header-group.azioni {
    border-left: 2px solid var(--text-hint);
}

/* Linee verticali sul subheader */
.blood-tests-table.enhanced .subheader-row th:nth-child(5),
.blood-tests-table.enhanced .subheader-row th:nth-child(8),
.blood-tests-table.enhanced .subheader-row th:nth-child(10),
.blood-tests-table.enhanced .subheader-row th:nth-child(12),
.blood-tests-table.enhanced .subheader-row th:nth-child(14) {
    border-left: 2px solid var(--text-hint);
}

/* Linee verticali sulle righe dati */
.blood-tests-table.enhanced tbody td:nth-child(5),
.blood-tests-table.enhanced tbody td:nth-child(8),
.blood-tests-table.enhanced tbody td:nth-child(10),
.blood-tests-table.enhanced tbody td:nth-child(12),
.blood-tests-table.enhanced tbody td:nth-child(14) {
    border-left: 2px solid var(--text-hint);
}

/* Bordo destro sulla colonna Data (sticky) */
.blood-tests-table.enhanced .sticky-col {
    border-right: 2px solid var(--text-hint);
}

/* === REPORT COMPARATIVO === */

.comparative-report-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: var(--overlay-heavy);
    z-index: 10001;
    opacity: 0;
    animation: fadeIn 0.2s ease forwards;
}

#formBloodTest .exam-section .exam-grid .exam-field .form-control{
    width: 70%;
}

.comparative-report-modal {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background: var(--bg-surface);
    border-radius: 12px;
    z-index: 10002;
    max-height: 90vh;
    display: none;  /* Nascosto di default */
    flex-direction: column;
    box-shadow: 0 20px 60px var(--shadow-md);
}

.comparative-report-modal.visible {
    display: flex;  /* Mostra come flex */
    animation: fadeInModal 0.2s ease;
}



.comparative-report-modal:not(.side-by-side) {
    width: 90%;
    max-width: 900px;
}

.comparative-report-modal.side-by-side {
    width: 95%;
    max-width: 1400px;
}

.comparative-report-header {
    padding: 20px 25px;
    background: var(--gradient-app);
    color: var(--text-stable-white);
    border-radius: 12px 12px 0 0;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.comparative-report-header h3 {
    margin: 0;
    font-size: 1.3em;
    color: var(--text-stable-white);
}

.comparative-report-header .modal-close {
    background: var(--bg-hover-inverse);
    border: none;
    color: var(--text-stable-white);
    width: 35px;
    height: 35px;
    border-radius: 50%;
    font-size: 1.5em;
    cursor: pointer;
    transition: background 0.2s;
}

.comparative-report-header .modal-close:hover {
    background: var(--bg-active-inverse);
}

.comparative-report-body {
    flex: 1;
    overflow-y: auto;
    padding: 20px;
}

.comparative-report-body.dual-panel {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
}

.comparative-report-body.single-panel {
    display: block;
}

.report-panel {
    background: var(--bg-surface-raised);
    border-radius: 10px;
    padding: 20px;
    border: 1px solid var(--bg-input-disabled);
}

.report-panel-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 15px;
    padding-bottom: 10px;
    border-bottom: 2px solid var(--gradient-app-start);
}

.report-panel-header h4 {
    margin: 0;
    color: var(--text-heading);
    font-size: 1.1em;
}

.report-period {
    font-size: 0.85em;
    color: var(--text-muted);
    background: var(--bg-surface);
    padding: 4px 10px;
    border-radius: 15px;
}

/* Summary cards */
.report-summary {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 10px;
    margin-bottom: 20px;
}

.summary-item {
    text-align: center;
    padding: 12px;
    border-radius: 8px;
    background: var(--bg-surface);
}

.summary-item.positive {
    border-left: 4px solid var(--success);
}

.summary-item.negative {
    border-left: 4px solid var(--danger);
}

.summary-item.neutral {
    border-left: 4px solid var(--text-muted);
}

.summary-label {
    display: block;
    font-size: 0.75em;
    color: var(--text-muted);
    margin-bottom: 4px;
}

.summary-value {
    font-size: 1.2em;
    font-weight: 700;
}

.summary-item.positive .summary-value {
    color: var(--success);
}

.summary-item.negative .summary-value {
    color: var(--danger);
}

/* Tabella comparativa */
.comparative-table {
    width: 100%;
    border-collapse: collapse;
    background: var(--bg-surface);
    border-radius: 8px;
    overflow: hidden;
    font-size: 0.85em;
}

.comparative-table thead {
    background: var(--gradient-app);
    color: var(--text-stable-white);
}

.comparative-table th {
    padding: 10px 8px;
    text-align: center;
    font-weight: 600;
    font-size: 0.9em;
}

.comparative-table th:first-child {
    text-align: left;
    padding-left: 15px;
}

.comparative-table td {
    padding: 10px 8px;
    text-align: center;
    border-bottom: 1px solid var(--bg-input-disabled);
}

.comparative-table td.metric-name {
    text-align: left;
    padding-left: 15px;
}

.comparative-table tbody tr:hover {
    background: var(--bg-surface-raised);
}

.comparative-table tbody tr:last-child td {
    border-bottom: none;
}

.delta-positive {
    color: var(--success);
    font-weight: 600;
}

.delta-negative {
    color: var(--danger);
    font-weight: 600;
}

.delta-neutral {
    color: var(--text-muted);
}

.trend-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    border-radius: 50%;
    font-weight: bold;
}

.trend-icon.up {
    background: var(--success-bg);
    color: var(--success);
}

.trend-icon.down {
    background: var(--danger-bg);
    color: var(--danger);
}

.trend-icon.stable {
    background: var(--warning-bg);
    color: var(--warning-text);
}

/* Sezione differenze */
.differences-section {
    margin-top: 20px;
    padding-top: 15px;
    border-top: 1px dashed var(--border-medium);
}

.differences-section h5 {
    margin: 0 0 12px 0;
    color: var(--text-primary);
    font-size: 0.95em;
}

.differences-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap: 10px;
}

.difference-card {
    background: var(--bg-surface);
    border-radius: 8px;
    padding: 12px;
    border: 1px solid var(--bg-input-disabled);
    text-align: center;
}

.diff-labels {
    font-size: 0.8em;
    color: var(--text-muted);
    margin-bottom: 8px;
}

.diff-values {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    margin-bottom: 6px;
}

.diff-before, .diff-after {
    font-weight: 600;
    font-size: 0.95em;
}

.diff-arrow {
    color: var(--text-hint);
}

.diff-change {
    font-size: 0.85em;
    font-weight: 600;
    padding: 3px 8px;
    border-radius: 12px;
    display: inline-block;
}

.diff-change.delta-positive {
    background: var(--success-bg);
}

.diff-change.delta-negative {
    background: var(--danger-bg);
}

.diff-change.delta-neutral {
    background: var(--bg-input-disabled);
    color: var(--text-muted);
}

/* Footer */
.comparative-report-footer {
    padding: 15px 25px;
    border-top: 1px solid var(--bg-input-disabled);
    display: flex;
    justify-content: center;
    gap: 10px;
    background: var(--bg-surface-raised);
    border-radius: 0 0 12px 12px;
}




/* === STORICO ESAMI SANGUE ENHANCED === */

.blood-tests-history-modal {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: var(--overlay-heavy);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 10000;
}

.blood-tests-history-content {
    background: var(--bg-surface);
    border-radius: 12px;
    width: 95%;
    max-width: 1400px;
    max-height: 90vh;
    display: flex;
    flex-direction: column;
    box-shadow: 0 20px 60px var(--shadow-md);
}

.blood-history-header {
    padding: 20px 25px;
    background: var(--gradient-app);
    color: var(--text-stable-white);
    border-radius: 12px 12px 0 0;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.blood-history-header h3 {
    margin: 0;
    font-size: 1.3em;
}



.blood-history-header .modal-close:hover {
    background: var(--bg-active-inverse);
}

.blood-history-body {
    flex: 1;
    padding: 20px;
    overflow: hidden;
    display: flex;
    flex-direction: column;
}

.blood-history-table-wrapper {
    flex: 1;
    overflow: auto;
    border: 1px solid var(--bg-input-disabled);
    border-radius: 8px;
}

.blood-tests-table.enhanced {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.9em;
}

.blood-tests-table.enhanced .header-row th {
    position: sticky;
    top: 0;
    z-index: 2;
    padding: 12px 8px;
    font-weight: 600;
    text-align: center;
    border-bottom: 2px solid var(--border-medium);
}



.blood-tests-table.enhanced .subheader-row th {
    position: sticky;
    top: 45px;
    z-index: 2;
    background: var(--bg-surface-raised);
    padding: 8px 6px;
    font-weight: 500;
    font-size: 0.85em;
    color: var(--text-primary);
    border-bottom: 1px solid var(--border-medium);
}

.blood-tests-table.enhanced .sticky-col {
    position: sticky;
    left: 0;
    z-index: 1;
    background: var(--bg-surface);
    border-right: 2px solid var(--border-medium);
}

.blood-tests-table.enhanced .header-row .sticky-col {
    background: var(--gradient-app);
    color: var(--text-stable-white);
    z-index: 3;
}

.blood-tests-table.enhanced .subheader-row .sticky-col {
    background: var(--bg-surface-raised);
    z-index: 3;
}

.blood-tests-table.enhanced tbody tr:hover {
    background: var(--bg-surface-raised);
}

.blood-tests-table.enhanced tbody tr:hover .sticky-col {
    background: var(--bg-surface-sunken);
}

.blood-tests-table.enhanced td {
    padding: 10px 8px;
    text-align: center;
    border-bottom: 1px solid var(--bg-input-disabled);
}

.blood-tests-table.enhanced .date-col {
    font-weight: 600;
    color: var(--text-primary);
    white-space: nowrap;
}

.blood-tests-table.enhanced .actions-col {
    white-space: nowrap;
}

.blood-tests-table.enhanced .value-normal {
    color: var(--success);
    font-weight: 600;
    border-radius: 4px;
    padding: 2px 6px;
}

.blood-tests-table.enhanced .value-high {
    color: var(--danger);
    font-weight: 600;
    border-radius: 4px;
    padding: 2px 6px;
}

.blood-tests-table.enhanced .value-low {
    color: var(--warning);
    font-weight: 600;
    border-radius: 4px;
    padding: 2px 6px;
}

.blood-tests-table.enhanced .no-value {
    color: var(--text-hint);
}

.btn-icon {
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    padding: 0 !important;
    margin: 0 2px;
}

.blood-history-legend {
    display: flex;
    gap: 20px;
    justify-content: center;
    padding: 15px;
    background: var(--bg-surface-raised);
    border-radius: 8px;
    margin-top: 15px;
}

.blood-history-legend .legend-item {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 0.85em;
    color: var(--text-muted);
}

.blood-history-legend .dot {
    width: 12px;
    height: 12px;
    border-radius: 50%;
}

.blood-history-legend .dot.normal {
    background: var(--success);
}

.blood-history-legend .dot.high {
    background: var(--danger);
}

.blood-history-legend .dot.low {
    background: var(--warning);
}

.blood-history-footer {
    padding: 15px 25px;
    border-top: 1px solid var(--bg-input-disabled);
    display: flex;
    justify-content: center;
    gap: 10px;
}



.chart-selector {
    display: flex;
    gap: 10px;
    margin-bottom: 20px;
    flex-wrap: wrap;
}

.chart-selector button {
    padding: 8px 16px;
    border: 1px solid var(--border-medium);
    background: var(--bg-surface);
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.3s ease;
}

.chart-selector button.active {
    background: var(--gradient-app-start);
    color: var(--text-stable-white);
    border-color: var(--gradient-app-start);
}

.chart-container {
    background: var(--bg-surface-raised);
    border-radius: 10px;
    padding: 20px;
    height: 400px;
    position: relative;
}

/* Summary cards */
.blood-test-summary {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 20px;
    margin-bottom: 30px;
}

.summary-card {
    background: var(--gradient-app);
    color: var(--text-stable-white);
    padding: 20px;
    border-radius: 12px;
    text-align: center;
}

.summary-card h5 {
    margin: 0 0 10px 0;
    font-size: 1.1em;
    opacity: 0.9;
}

.summary-card .value {
    font-size: 2em;
    font-weight: bold;
}

/* Loading state */
.blood-test-loading {
    text-align: center;
    padding: 40px;
}

.blood-test-spinner {
    display: inline-block;
    width: 40px;
    height: 40px;
    border: 4px solid var(--bg-surface-sunken);
    border-top: 4px solid var(--gradient-app-start);
    border-radius: 50%;
    animation: spin 1s linear infinite;
    margin-bottom: 15px;
}



/* === AGGIUNGI QUESTI STILI A main.css === */

/* Modal dettaglio esame */
.blood-test-detail-modal {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: var(--overlay-heavy);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 10000;
}

.blood-test-detail-content {
    background: var(--bg-surface);
    border-radius: 15px;
    width: 90%;
    max-width: 1200px;
    height: 90%;
    max-height: 800px;
    display: flex;
    flex-direction: column;
    box-shadow: 0 10px 40px var(--shadow-md);
    overflow: auto; 
    scrollbar-width: none;}

/* Sezioni dettaglio */
.detail-sections-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 20px;
    padding: 20px;
}

.param-select{
    scrollbar-width: none;
}

.detail-section {
    background: var(--bg-surface-raised);
    border-radius: 10px;
    padding: 20px;
    border: 1px solid var(--border-medium);
}

.detail-section.full-width {
    grid-column: 1 / -1;
}

.detail-section h4 {
    margin: 0 0 15px 0;
    color: var(--text-primary);
    font-size: 1.1em;
    border-bottom: 2px solid var(--border-medium);
    padding-bottom: 10px;
}

.detail-values {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.detail-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 8px 12px;
    background: var(--bg-surface);
    border-radius: 6px;
    transition: all 0.3s ease;
}

.detail-item:hover {
    transform: translateX(5px);
    box-shadow: 0 2px 8px var(--shadow-sm);
}

.detail-label {
    font-weight: 600;
    color: var(--text-primary);
}

.detail-value {
    display: flex;
    align-items: center;
    gap: 10px;
    font-weight: 500;
}

/* Stati valori */


.value-normal .status-icon {
    color: var(--success);
}



.value-high .status-icon {
    color: var(--danger-medium);
}



.value-low .status-icon {
    color: var(--primary-light);
}

.status-icon {
    font-weight: bold;
    font-size: 1.2em;
}

/* Modal grafici */
.blood-test-charts-modal {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: var(--overlay-heavy);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 10000;
    padding: 20px;
    box-sizing: border-box;
}

.blood-test-charts-content {
    background: var(--bg-surface);
    border-radius: 15px;
    width: 100%;
    max-width: 1000px;
    max-height: 90vh;
    display: flex;
    flex-direction: column;
    box-shadow: 0 10px 40px var(--shadow-lg);
    overflow: hidden;
}

/* Controlli grafico */
.chart-controls {
    display: flex;
    align-items: center;
    gap: 15px;
    padding: 15px;
    background: var(--bg-surface-raised);
    border-radius: 10px;
    margin-bottom: 20px;
    flex-wrap: wrap;
}

.chart-controls label {
    font-weight: 600;
    color: var(--text-primary);
    white-space: nowrap;
}

.chart-controls select {
    padding: 8px 12px;
    border: 2px solid var(--border-medium);
    border-radius: 6px;
    font-size: 1em;
    background: var(--bg-surface);
    cursor: pointer;
    color: var(--text-primary);
}

.chart-controls select:focus {
    outline: none;
    border-color: var(--gradient-app-start);
}
.parameters-bloodtest{
    scrollbar-width: none;
}

/* Container grafico */
.chart-container {
    background: var(--bg-surface);
    border-radius: 10px;
    padding: 20px;
    height: 400px;
    position: relative;
    border: 1px solid var(--border-medium);
}

/* === STATISTICHE ESTESE BLOOD TEST === */

.blood-stats-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 15px;
    padding-bottom: 10px;
    border-bottom: 1px solid var(--bg-input-disabled);
}

.blood-stats-header h4 {
    margin: 0;
    color: var(--text-heading);
}

.range-status {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px 15px;
    border-radius: 8px;
    margin-bottom: 15px;
    font-weight: 500;
}

.range-status.status-normal {
    background: var(--success-bg);
    color: var(--success-text);
    border-left: 4px solid var(--success);
}

.range-status.status-high {
    background: var(--danger-bg);
    color: var(--danger-text);
    border-left: 4px solid var(--danger);
}

.range-status.status-low {
    background: var(--warning-bg);
    color: var(--warning-text);
    border-left: 4px solid var(--warning-medium);
}

.range-status .range-label {
    flex-shrink: 0;
}

.range-status .range-value {
    font-weight: 600;
}

.range-status .range-ref {
    margin-left: auto;
    font-size: 0.85em;
    opacity: 0.8;
}

.blood-stats-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    gap: 12px;
}

.blood-stats-grid .stat-card-extended {
    background: var(--bg-surface-raised);
    padding: 12px;
    border-radius: 8px;
    border: 1px solid var(--bg-input-disabled);
    text-align: center;
}

.blood-stats-grid .stat-label {
    font-size: 0.8em;
    color: var(--text-muted);
    margin-bottom: 5px;
}

.blood-stats-grid .stat-value {
    font-size: 1.1em;
    font-weight: 600;
    color: var(--text-heading);
}

.blood-stats-grid .stat-value.small {
    font-size: 0.9em;
}

.blood-stats-grid .stat-value.trend-up {
    color: var(--success);
}

.blood-stats-grid .stat-value.trend-down {
    color: var(--danger);
}

.stat-trend {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 4px 10px;
    border-radius: 15px;
    font-size: 0.85em;
    font-weight: 600;
}

.stat-trend.up {
    background: var(--success-bg);
    color: var(--success-text);
}

.stat-trend.down {
    background: var(--danger-bg);
    color: var(--danger-text);
}

.stat-trend.stable {
    background: var(--warning-bg);
    color: var(--warning-text);
}

.btn-icon-blood {
    width: 36px;
    height: 36px;
    place-items: center;
    border-radius: 10px;
    border: 1px solid var(--border-medium);
    cursor: pointer;
    transition: all .18s ease;
    font-size: 18px;
    line-height: 1;
    justify-content: center;
}

/* Statistiche */
.chart-stats {
    margin-top: 20px;
}

.stats-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 15px;
}

.stat-card {
    background: var(--bg-surface-raised);
    padding: 15px;
    border-radius: 8px;
    text-align: center;
    border: 1px solid var(--border-medium);
}

.stat-label {
    font-size: 0.9em;
    color: var(--text-muted);
    margin-bottom: 5px;
}

.stat-value {
    font-size: 1.3em;
    font-weight: bold;
    color: var(--text-heading);
}

.trend-up {
    color: var(--danger-medium);
}

.trend-down {
    color: var(--success);
}

.comparison-modal {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: var(--overlay-heavy);
    z-index: 10000;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.2s, visibility 0.2s;
}

.comparison-modal.visible {
    opacity: 1;
    visibility: visible;
}

.comparison-modal-content {
    background: var(--bg-surface);
    border-radius: 16px;
    width: 90%;
    max-width: 700px;
    max-height: 90vh;
    display: flex;
    flex-direction: column;
    box-shadow: 0 25px 80px var(--shadow-md);
    transform: scale(0.95);
    transition: transform 0.2s;
}

.comparison-modal.visible .comparison-modal-content {
    transform: scale(1);
}

.comparison-modal-header {
    padding: 20px 25px;
    background: var(--gradient-app);
    color: var(--text-stable-white);
    border-radius: 16px 16px 0 0;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.comparison-modal-header h3 {
    margin: 0;
    font-size: 1.3em;
}

.comparison-modal-header .modal-close {
    background: var(--bg-hover-inverse);
    border: none;
    color: var(--text-stable-white);
    width: 36px;
    height: 36px;
    border-radius: 50%;
    font-size: 1.3em;
    cursor: pointer;
    transition: background 0.2s;
}

.comparison-modal-header .modal-close:hover {
    background: var(--bg-active-inverse);
}

.comparison-modal-body {
    flex: 1;
    overflow-y: auto;
    padding: 25px;
    scrollbar-width: none;
}

.comparison-section {
    margin-bottom: 25px;
}

.section-title {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 15px;
}

.section-icon {
    font-size: 1.5em;
}

.section-title h4 {
    margin: 0;
    color: var(--text-heading);
    font-size: 1.1em;
}

.section-description {
    color: var(--text-muted);
    font-size: 0.9em;
    margin-bottom: 15px;
}

/* Preset Grid */
.preset-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 12px;
}

.preset-card {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 14px 16px;
    background: var(--bg-surface-raised);
    border: 2px solid transparent;
    border-radius: 12px;
    cursor: pointer;
    transition: all 0.2s;
}

.preset-card:hover {
    background: var(--bg-surface);
    border-color: var(--gradient-app-start);
    box-shadow: 0 4px 15px var(--shadow-brand-sm);
    transform: translateY(-2px);
}

.preset-icon {
    font-size: 1.8em;
    width: 45px;
    height: 45px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--bg-surface);
    border-radius: 10px;
    box-shadow: 0 2px 8px var(--shadow-sm);
}

.preset-info {
    flex: 1;
}

.preset-name {
    font-weight: 600;
    color: var(--text-heading);
    margin-bottom: 3px;
}

.preset-params {
    font-size: 0.8em;
    color: var(--text-muted);
}

.preset-arrow {
    color: var(--gradient-app-start);
    font-size: 1.2em;
    opacity: 0;
    transform: translateX(-5px);
    transition: all 0.2s;
}

.preset-card:hover .preset-arrow {
    opacity: 1;
    transform: translateX(0);
}

/* Divider */
.comparison-divider {
    display: flex;
    align-items: center;
    margin: 30px 0;
}

.comparison-divider::before,
.comparison-divider::after {
    content: '';
    flex: 1;
    height: 1px;
    background: linear-gradient(90deg, transparent, var(--border-medium), transparent);
}

.comparison-divider span {
    padding: 0 20px;
    color: var(--text-muted);
    font-size: 0.9em;
    font-style: italic;
}

/* Custom Section */
.custom-section {
    background: linear-gradient(135deg, var(--bg-surface-raised) 0%, var(--bg-input-disabled) 100%);
    padding: 25px;
    border-radius: 16px;
    border: 1px solid var(--border-medium);
}

.custom-params-container {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin-bottom: 15px;
}

.param-row {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 15px;
    background: var(--bg-surface);
    border-radius: 10px;
    border: 1px solid var(--bg-input-disabled);
    opacity: 1;
    transform: translateY(0);
    transition: all 0.2s;
    color: var(--text-primary);
}

.param-row.visible {
    animation: slideIn 0.2s ease;
}

.param-row.removing {
    opacity: 0;
    transform: translateX(-20px);
}



.param-number {
    width: 28px;
    height: 28px;
    background: var(--gradient-app);
    color: var(--text-stable-white);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 600;
    font-size: 0.85em;
}

.param-select {
    flex: 1;
    padding: 10px 15px;
    border: 1px solid var(--border-medium);
    border-radius: 8px;
    font-size: 0.95em;
    background: var(--bg-surface);
    cursor: pointer;
    transition: border-color 0.2s;
    color: var(--text-primary);
}

.param-select:focus {
    outline: none;
    border-color: var(--gradient-app-start);
    box-shadow: 0 0 0 3px var(--shadow-brand-sm);
}

.param-color {
    width: 20px;
    height: 20px;
    border-radius: 50%;
    flex-shrink: 0;
}

.remove-param-btn {
    width: 28px;
    height: 28px;
    border: none;
    background: var(--danger-bg-light);
    color: var(--danger);
    border-radius: 50%;
    cursor: pointer;
    font-size: 1.1em;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s;
}

.remove-param-btn:hover {
    background: var(--danger);
    color: var(--text-stable-white);
}

/* Add Parameter Button */
.add-param-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    width: 100%;
    padding: 12px;
    border: 2px dashed var(--border-input);
    background: transparent;
    color: var(--text-muted);
    border-radius: 10px;
    cursor: pointer;
    font-size: 0.95em;
    transition: all 0.2s;
    margin-bottom: 20px;
}

.add-param-btn:hover {
    border-color: var(--gradient-app-start);
    color: var(--gradient-app-start);
    background: var(--primary-bg-light);
}

.add-icon {
    width: 24px;
    height: 24px;
    background: currentColor;
    color: var(--text-stable-white);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.2em;
    background: var(--text-muted);
    transition: background 0.2s;
}

.add-param-btn:hover .add-icon {
    background: var(--gradient-app-start);
}

/* Custom Options */
.custom-options {
    display: flex;
    flex-direction: column;
    gap: 12px;
    margin-bottom: 20px;
}

.checkbox-option {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 12px 15px;
    background: var(--bg-surface);
    border-radius: 10px;
    cursor: pointer;
    transition: background 0.2s;
}

.checkbox-option:hover {
    background: var(--bg-surface-raised);
}

.checkbox-option input[type="checkbox"] {
    display: none;
}

.checkmark {
    width: 22px;
    height: 22px;
    border: 2px solid var(--border-input);
    border-radius: 6px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    transition: all 0.2s;
}

.checkbox-option input:checked + .checkmark {
    background: var(--gradient-app);
    border-color: transparent;
}

.checkbox-option input:checked + .checkmark::after {
    content: '✓';
    color: var(--text-stable-white);
    font-size: 0.9em;
    font-weight: bold;
}

.option-text {
    display: flex;
    flex-direction: column;
}

.option-text strong {
    color: var(--text-heading);
    font-size: 0.95em;
}

.option-text small {
    color: var(--text-muted);
    font-size: 0.8em;
    margin-top: 2px;
}

/* Apply Button */
.apply-custom-btn {
    width: 100%;
    padding: 14px 20px;
    background: var(--gradient-app);
    color: var(--text-stable-white);
    border: none;
    border-radius: 10px;
    font-size: 1em;
    font-weight: 600;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    transition: transform 0.2s, box-shadow 0.2s;
}

.apply-custom-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 25px var(--shadow-brand-md);
}

/* Footer */
.comparison-modal-footer {
    padding: 15px 25px;
    border-top: 1px solid var(--bg-input-disabled);
    display: flex;
    justify-content: space-between;
    gap: 10px;
}

.btn-reset {
    padding: 10px 20px;
    background: var(--bg-surface-raised);
    border: 1px solid var(--border-medium);
    color: var(--text-muted);
    border-radius: 8px;
    cursor: pointer;
    font-size: 0.9em;
    transition: all 0.2s;
}

.btn-reset:hover {
    background: var(--bg-input-disabled);
    color: var(--text-primary);
}

.btn-close {
    padding: 10px 25px;
    background: var(--gradient-app-start);
    border: none;
    color: var(--text-stable-white);
    border-radius: 8px;
    cursor: pointer;
    font-size: 0.9em;
    transition: background 0.2s;
}

.btn-close:hover {
    background: var(--gradient-app-start);
}

.comparison-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 15px;
    margin: 20px 0;
}

.comparison-option {
    border: 2px solid var(--border-medium);
    border-radius: 8px;
    padding: 15px;
    cursor: pointer;
    transition: all 0.3s;
}

.comparison-option:hover {
    border-color: var(--gradient-app-start);
    background: var(--primary-bg-light);
}

.parameter-selector {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 10px;
    margin: 15px 0;
}

.comparison-stats {
    display: grid;
    gap: 15px;
}

.param-stats {
    background: var(--bg-surface-raised);
    padding: 15px;
    border-radius: 8px;
}

.stats-row {
    display: flex;
    justify-content: space-between;
    margin-top: 10px;
    font-size: 0.9em;
}

/* =============================================
   PATCH-BLOOD-TEST.CSS — Migrazione inline
   styles da blood-test.js
   ============================================= */

/* === EMPTY / ERROR MESSAGES === */
.bt-empty-msg {
    text-align: center;
    color: var(--text-muted);
}

.bt-error-msg {
    text-align: center;
    color: var(--danger);
}

.bt-no-data-msg {
    color: var(--text-muted);
    text-align: center;
}

.bt-empty-history {
    text-align: center;
    color: var(--text-muted);
    margin: 40px 0;
}

/* === NOTES BOX === */
.bt-notes-box {
    margin-top: 20px;
    padding: 15px;
    background: var(--bg-surface-raised);
    border-radius: 8px;
}

#blood-test-notes::placeholder{
    color: var(--text-primary);
}

#globuli_rossi::placeholder,
#emoglobina::placeholder,
#ematocrito::placeholder,
#volume_corpuscolare_medio::placeholder,
#emoglobina_corpuscolare_media::placeholder,
#concen_emoglob_corp_media::placeholder,
#ampiezza_distribuzione_eritrocitaria::placeholder,
#piastrine::placeholder,
#globuli_bianchi::placeholder,
#linfociti::placeholder,
#monociti::placeholder,
#eosinofili::placeholder,
#basofili::placeholder,
#glicemia::placeholder,
#azotemia::placeholder,
#creatinina::placeholder,
#hba1c::placeholder,
#sodio::placeholder,
#cloro::placeholder,
#bicarbonati::placeholder,
#calcio::placeholder,
#magnesio::placeholder,
#alt::placeholder,
#ast::placeholder,
#bilirubina_totale::placeholder,
#bilirubina_diretta::placeholder,
#albumina::placeholder,
#proteine_totali::placeholder,
#colesterolo_totale::placeholder,
#colesterolo_ldl::placeholder,
#colesterolo_hdl::placeholder,
#trigliceridi::placeholder,
#rapporto_ldl_hdl::placeholder,
#colesterolo_non_hdl::placeholder,
#vldl_stimato::placeholder,
#tsh::placeholder,
#ft4::placeholder,
#ft3::placeholder,
#cortisolo::placeholder,
#testosterone_totale::placeholder,
#estradiolo::placeholder,
#dhea_s::placeholder,
#vitamina_d::placeholder,
#vitamina_b12::placeholder,
#folati::placeholder,
#ferro_sierico::placeholder,
#ferritina::placeholder,
#tibc::placeholder,
#saturazione_transferrina::placeholder,
#zinco::placeholder,
#hs_crp::placeholder,
#potassio::placeholder,
#fosfatasi_alcalina::placeholder,
#neutrofili::placeholder{
    color: var(--text-primary);
}

/* ===== Custom Parameter Dropdown ===== */

.bt-custom-select {
    position: relative;
    min-width: 250px;
}

.bt-select-trigger {
    width: 100%;
    padding: 10px 40px 10px 14px;
    border: 2px solid var(--border-medium);
    border-radius: 10px;
    background: var(--bg-input);
    color: var(--text-primary);
    font-size: 0.95em;
    font-weight: 500;
    cursor: pointer;
    display: flex;
    justify-content: space-between;
    align-items: center;
    transition: border-color 0.3s, border-radius 0.3s;
}

.bt-select-trigger:hover {
    border-color: var(--gradient-app-start);
}

.bt-select-arrow {
    font-size: 1.2rem;
    color: var(--text-muted);
    transition: transform 0.3s ease;
    line-height: 1;
    margin-right: -30px;
}

/* Dropdown aperto: fonde bordi e ruota freccia */
.bt-custom-select:has(.bt-select-dropdown.active) .bt-select-trigger {
    border-radius: 10px 10px 0 0;
    border-bottom-color: transparent;
    border-color: var(--gradient-app-start);
}

.bt-custom-select:has(.bt-select-dropdown.active) .bt-select-arrow {
    transform: rotate(180deg);
}

.bt-select-dropdown {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    background: var(--bg-surface);
    border: 2px solid var(--gradient-app-start);
    border-top: 1px solid var(--border-light);
    border-radius: 0 0 10px 10px;
    margin-top: -2px;
    max-height: 300px;
    display: none;
    flex-direction: column;
    z-index: 100;
    box-shadow: 0 8px 24px var(--shadow-md);
    
}

.bt-select-dropdown.active {
    display: flex;
    
}

.bt-select-search {
    padding: 10px 14px;
    border: none;
    border-bottom: 1px solid var(--border-light);
    background: var(--bg-surface-raised);
    color: var(--text-primary);
    font-size: 0.9em;
    outline: none;
}

.bt-select-search::placeholder {
    color: var(--text-hint);
}

.bt-select-options {
    overflow-y: auto;
    max-height: 250px;
    scrollbar-width: none;
}

.bt-select-option {
    padding: 10px 14px;
    cursor: pointer;
    color: var(--text-primary);
    font-size: 0.9em;
    transition: background 0.15s;
    border-bottom: 1px solid var(--border-lightest);
}

.bt-select-option:last-child {
    border-bottom: none;
}

.bt-select-option:hover {
    background: var(--bg-surface-raised);
}

.bt-select-option.selected {
    background: var(--primary-bg-light);
    color: var(--gradient-app-start);
    font-weight: 600;
}

/* Group labels nel dropdown */
.bt-select-group-label {
    padding: 8px 14px;
    font-size: 0.8em;
    font-weight: 700;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    background: var(--bg-surface-raised);
    border-bottom: 1px solid var(--border-lightest);
    pointer-events: none;
}

/* Param select dentro param-row */
.param-row .bt-custom-select {
    flex: 1;
    min-width: 0;
}

.bt-param-label {
    color: var(--text-hint);
}

.bt-param-label.has-value {
    color: var(--text-primary);
}

.param-row {
    position: relative;
    z-index: 1;
}

.param-row:has(.bt-select-dropdown.active) {
    z-index: 10;
}

/* Responsive */
@media (max-width: 768px) {
    .blood-test-charts-modal {
        padding: 10px;
    }

    .blood-test-charts-content {
        max-height: 95vh;
        border-radius: 12px;
    }

    .blood-test-charts-content .modal-body {
        padding: 15px;
    }

    .chart-controls {
        flex-direction: column;
        align-items: stretch;
    }

    .bt-custom-select {
        min-width: unset;
        width: 100%;
    }

    .chart-container {
        height: 300px;
    }

    .blood-stats-grid {
        grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
        gap: 8px;
    }
}

@media (max-width: 700px) {
    .range-status {
        flex-direction: column;
        align-items: flex-start;
        gap: 4px;
    }

    .range-status .range-ref {
        margin-left: 0;
    }
}

@media (max-width: 480px) {
    .blood-test-charts-content .modal-body {
        padding: 10px;
    }

    .chart-container {
        height: 250px;
    }
}

/* NOTE: .param-color background is dynamic (from paramColors array).
   Kept as inline. */