/*
 * De ce exista:
 * Acest fisier contine stilurile specifice picker-ului de locatii.
 *
 * Responsabilitate:
 * Stilizeaza breadcrumbs-ul si lista ierarhica de locatii canonice.
 *
 * Ce NU face:
 * Nu implementeaza harta sau nearby.
 *
 * Depinde de:
 * tpl-screen-location-picker si componentele picker-list.
 */

.v2-screen--location-picker {
    display: grid;
    gap: 14px;
    padding-bottom: 8px;
}

.v2-breadcrumbs {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.v2-location-breadcrumbs-shell {
    display: grid;
    gap: 10px;
    margin-bottom: 16px;
}

.v2-location-breadcrumbs-empty {
    display: grid;
    grid-template-columns: 36px minmax(0, 1fr);
    gap: 12px;
    align-items: start;
    padding: 14px;
    border-radius: 18px;
    border: 1px solid rgba(229, 231, 235, 0.96);
    background: rgba(249, 250, 251, 0.98);
}

.v2-location-breadcrumbs-empty strong,
.v2-location-empty-state h3,
.v2-location-option-heading h3 {
    margin: 0;
    font-size: 0.98rem;
    line-height: 1.25;
}

.v2-location-breadcrumbs-empty p,
.v2-location-empty-state p,
.v2-location-hint,
.v2-location-option-meta {
    margin: 0;
    color: #6b7280;
    font-size: 0.88rem;
    line-height: 1.5;
}

.v2-location-hint {
    padding-inline: 2px;
}

.v2-location-hint-icon,
.v2-location-empty-icon,
.v2-location-node-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: 36px;
    height: 36px;
    border-radius: 14px;
    color: var(--z-green);
    background: rgba(22, 163, 74, 0.1);
}

.v2-location-node-icon {
    width: 44px;
    height: 44px;
    border-radius: 16px;
}

.v2-location-node-icon.is-branch {
    background: linear-gradient(135deg, rgba(22, 163, 74, 0.12), rgba(245, 158, 11, 0.14));
}

.v2-location-node-icon.is-leaf {
    background: rgba(22, 163, 74, 0.08);
}

.v2-location-hint-icon svg,
.v2-location-empty-icon svg,
.v2-location-node-icon svg {
    width: 22px;
    height: 22px;
    display: block;
}

.v2-location-crumb {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    min-height: 34px;
    padding: 0 12px;
    border-radius: 999px;
    border: 1px solid rgba(22, 163, 74, 0.18);
    background: rgba(240, 253, 244, 0.96);
    color: #166534;
    font-size: 0.82rem;
    font-weight: 700;
}

.v2-location-crumb.is-root {
    padding-left: 10px;
}

.v2-location-crumb .v2-location-node-icon {
    width: 24px;
    height: 24px;
    border-radius: 10px;
}

.v2-location-crumb .v2-location-node-icon svg {
    width: 14px;
    height: 14px;
}

.v2-location-crumb-separator {
    color: #9ca3af;
    font-weight: 600;
}

.v2-location-list {
    display: grid;
    gap: 10px;
}

.v2-location-option {
    display: grid;
    gap: 12px;
    padding: 14px;
    border-radius: 20px;
    border: 1px solid rgba(229, 231, 235, 0.96);
    background: rgba(255, 255, 255, 0.99);
    box-shadow: 0 10px 22px rgba(17, 24, 39, 0.04);
}

.v2-location-option-main {
    display: grid;
    grid-template-columns: 44px minmax(0, 1fr);
    gap: 12px;
    align-items: start;
}

.v2-location-option-copy {
    display: grid;
    gap: 6px;
    min-width: 0;
}

.v2-location-option-heading {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
}

.v2-location-node-tag {
    display: inline-flex;
    align-items: center;
    min-height: 26px;
    padding: 0 9px;
    border-radius: 999px;
    font-size: 0.74rem;
    font-weight: 700;
    border: 1px solid rgba(229, 231, 235, 0.98);
    background: rgba(249, 250, 251, 0.98);
    color: #4b5563;
}

.v2-location-node-tag.is-branch {
    background: rgba(240, 253, 244, 0.98);
    border-color: rgba(22, 163, 74, 0.18);
    color: #166534;
}

.v2-location-option-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.v2-location-action {
    min-height: 38px;
    padding: 0 14px;
    border-radius: 14px;
    border: 1px solid transparent;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 0.88rem;
    font-weight: 800;
    transition:
        transform 180ms ease,
        border-color 180ms ease,
        background 180ms ease,
        box-shadow 180ms ease;
}

.v2-location-action:hover {
    transform: translateY(-1px);
}

.v2-location-action:focus-visible,
.v2-location-crumb:focus-visible {
    outline: none;
    box-shadow: 0 0 0 4px rgba(22, 163, 74, 0.12);
}

.v2-location-action--primary {
    background: linear-gradient(180deg, var(--z-green) 0%, var(--z-green-dark) 100%);
    color: #ffffff;
    box-shadow: 0 8px 18px rgba(22, 163, 74, 0.14);
}

.v2-location-action--secondary {
    background: #f9fafb;
    border-color: rgba(209, 213, 219, 0.92);
    color: #111827;
}

.v2-location-empty-state {
    display: grid;
    justify-items: start;
    gap: 10px;
    padding: 18px 16px;
    border-radius: 20px;
    border: 1px dashed rgba(22, 163, 74, 0.26);
    background: rgba(248, 250, 252, 0.98);
}

@media (min-width: 768px) {
    .v2-location-option {
        grid-template-columns: minmax(0, 1fr) auto;
        align-items: center;
    }

    .v2-location-option-actions {
        justify-content: flex-end;
    }
}