/* NEW: Multi-column grid layout for the biomarker cards */
.biomarker-grid {
    display: grid;
    /* Creates a 2-column grid by default */
    grid-template-columns: repeat(2, 1fr);
    gap: var(--mobile-card-gap, 10px);
}

/* On screens wider than 380px, switch to a 3-column grid */
@media (min-width: 380px) {
    .biomarker-grid {
        grid-template-columns: repeat(3, 1fr);
    }
}


/* NEW: Redesigned styles for the individual biomarker card */
.biomarker-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    background: var(--card-bg, #ffffff);
    border-radius: 14px;
    padding: 12px 8px;
    min-height: 100px;
    border: 1px solid var(--card-border, #dee2e6);
    box-shadow: var(--card-shadow, 0 4px 12px rgba(0,0,0,0.05));
    transition: transform 0.2s ease, box-shadow 0.3s ease;
}

.biomarker-card:active {
    transform: scale(0.97);
}

/* Add colored borders for priority cards */
.biomarker-card.critical {
    border-color: var(--critical-red);
    background: var(--critical-red-bg);
}

.biomarker-card.warning {
    border-color: var(--warning-amber);
    background: var(--warning-amber-bg);
}

.card-icon {
    font-size: 24px;
    margin-bottom: 8px;
}

.card-name {
    font-size: 12px;
    font-weight: 600;
    color: var(--text-primary);
    line-height: 1.3;
    /* Ensure name doesn't take up too much space */
    flex-grow: 1;
}

.card-status {
    font-size: 10px;
    font-weight: 500;
    color: var(--text-secondary);
    display: flex;
    align-items: center;
    gap: 4px;
    margin-top: 8px;
}

.dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
}
.dot.high { background-color: var(--critical-red); }
.dot.mod { background-color: var(--warning-amber); }
.dot.ok { background-color: var(--success-green); }