/* =========================================
   COMPACT MACRO CARDS (ECO-SCIENTIFIC THEME)
   ========================================= */
.macro-card {
    padding: 12px;
    transition: transform 0.15s ease, box-shadow 0.15s ease;
    width: 100%;
    overflow: hidden;
    background-color: #F1F5F3;
    color: #1F2937;
    border-radius: 8px;
    border: 1px solid #D1E7DD;
    margin-bottom: 8px; /* Base spacing */
}

/* Hover effect (Spatial depth only, prevent color washout from .bicho-item) */
div.macro-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 14px rgba(0, 0, 0, 0.15); /* Softened shadow for light theme */
    background-color: #E6F4EA;
}

/* Selected state using pure CSS without JS changes */
div.macro-card:has(input[type="checkbox"]:checked) {
    border: 2px solid #2F855A;
    background-color: #E6F4EA;
}

/* Ensure selected state background holds even on hover */
div.macro-card:has(input[type="checkbox"]:checked):hover {
    background-color: #E6F4EA;
}

.macro-header {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    justify-content: space-between;
}

/* Checkbox Customization for Field Visibility */
.macro-card .form-check-input {
    transform: scale(1.25);
    border: 2px solid #D1E7DD;
    background-color: #ffffff;
    cursor: pointer;
    margin-top: 0;
    accent-color: #2F855A;
}

.macro-card .form-check-input:checked {
    background-color: #2F855A;
    border-color: #2F855A;
}

.macro-card .form-check-input:focus {
    box-shadow: 0 0 0 0.25rem rgba(47, 133, 90, 0.25);
    border-color: #2F855A;
}

.macro-title {
    flex: 1;
    min-width: 0;
}

.macro-title label {
    margin-bottom: 0;
    cursor: pointer;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    display: block;
    color: #1F2937; /* Primary Text */
    font-weight: 600; /* Improve scientific name readability */
}

.macro-value {
    font-size: 0.85rem;
    color: var(--color-muted); /* Bootstrap default #6c757d works perfectly on light background */
}

.macro-description {
    margin-top: 8px;
    font-size: 0.9rem;
    color: #4B5563; /* Readable dark grey */
    display: none;
    padding: 10px;
    background: #ffffff; /* Clean white card inside */
    border-radius: 8px;
    border-left: 3px solid #2F855A; /* Accent green */
}

.macro-description.active {
    display: block;
}

.toggle-description {
    flex-shrink: 0;
    white-space: nowrap;
    font-weight: 500;
    font-size: 0.85rem;
    padding: 6px 10px;
    color: #4B5563;
    border-color: #D1E7DD; /* Gentle border */
}

.toggle-description:hover {
    background-color: #D1E7DD; /* Slightly darker than hover state of card to stand out */
    color: #1F2937;
}

/* Ensure images don't break layout and look integrated */
.bicho-img {
    flex-shrink: 0;
    border-radius: 4px;
    border: 1px solid #D1E7DD;
    background-color: #fff; /* Ensure transparent PNGs stay legible */
}

/* Desktop spacing adjustment for compact cards */
@media (min-width: 768px) {
    .macro-card {
        margin-bottom: 4px;
    }
}

/* Mobile wrap handling for long titles vs toggle button */
@media (max-width: 480px) {
    .macro-header {
        flex-wrap: wrap;
    }

    .toggle-description {
        width: 100%;
        margin-top: 8px;
    }
}

/* =========================================
   COMPARE UI HIGHLIGHT
   ========================================= */
.card-highlight {
    transform: scale(1.02);
    transition: 0.15s ease;
    box-shadow: 0 0 0 2px var(--bs-primary) !important;
}
.transition-transform {
    transition: transform 0.15s ease, box-shadow 0.15s ease;
}