/* Tree info popup (Map/_TreePopup.razor). Reuses the AdminLTE-style card rules from mailbox.css
   (card-outline, card-header, card-title, btn-default) by sitting inside a .mailbox-page wrapper;
   only tree-specific bits live here, all scoped under .tree-popup. */

.tree-popup .card {
    display: flex;
    flex-direction: column;
    max-height: 460px;
    margin: 0;
    background: #fff;
}

.tree-popup .card-body {
    overflow-y: auto;
    padding: .75rem 1rem;
}

.tree-popup .tree-sub {
    display: block;
    font-size: .8rem;
    font-style: italic;
    color: #6c757d;
}

.tree-popup .tree-stats {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 8px;
    margin-bottom: .75rem;
}

.tree-popup .tree-stat {
    background: #f8f9fa;
    border: 1px solid #eee;
    border-radius: .25rem;
    padding: .4rem .25rem;
    text-align: center;
}

.tree-popup .tree-stat-value {
    font-size: 1.15rem;
    font-weight: 600;
    line-height: 1.2;
}

.tree-popup .tree-stat-label {
    font-size: .68rem;
    text-transform: uppercase;
    color: #6c757d;
}

.tree-popup .tree-details {
    display: grid;
    grid-template-columns: 7.5rem 1fr;
    margin: 0 0 .75rem;
    font-size: .85rem;
}

    .tree-popup .tree-details dt,
    .tree-popup .tree-details dd {
        margin: 0;
        padding: .3rem 0;
        border-bottom: 1px solid #f4f4f4;
    }

    .tree-popup .tree-details dt {
        font-weight: 600;
        color: #666;
    }

    .tree-popup .tree-details dd {
        word-break: break-word;
    }

.tree-popup .tree-section-title {
    font-size: .8rem;
    font-weight: 600;
    text-transform: uppercase;
    color: #6c757d;
    margin-bottom: .4rem;
}

.tree-popup .tree-photos {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(100px, 1fr));
    gap: 8px;
}

.tree-popup .tree-photo {
    padding: 0;
    text-align: left;
    background: #fff;
    border: 1px solid #eee;
    cursor: zoom-in;
}

    .tree-popup .tree-photo:hover {
        border-color: var(--bs-primary);
    }

    .tree-popup .tree-photo img {
        display: block;
        width: 100%;
        height: 80px;
        object-fit: cover;
    }

    .tree-popup .tree-photo span {
        display: block;
        padding: .2rem .4rem;
        font-size: .72rem;
        color: #666;
        background: #f8f9fa;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }