/**
 * GeoPicker — reusable column drill-down + map для выбора локации из bs_geo.
 * Используется в админ-странице Locations и в popup-формах
 * (object edit, objects filter).
 *
 * Все классы префиксованы .gpk- чтобы не конфликтовать с глобальными стилями.
 */

.gpk-cols     { display:flex; gap:8px; overflow-x:auto; background:#fff; border:1px solid var(--c-border, #e5e7eb); border-radius:8px; padding:8px; min-height:340px }
/* 160px на колонку: в popup 900px влезает ровно 5 столбиков (5×160 + 4×8 = 832). */
.gpk-col      { flex:0 0 160px; max-width:160px; background:#fff; border:1px solid var(--c-border, #e5e7eb); border-radius:6px; display:flex; flex-direction:column; max-height:320px; overflow:hidden }
.gpk-col-hdr  { padding:4px 6px; border-bottom:1px solid var(--c-border, #e5e7eb); background:#fafafa; display:flex; align-items:center; gap:5px }
.gpk-col-filter { flex:1; min-width:0; padding:3px 6px; border:1px solid var(--c-border-strong, #d1d5db); border-radius:4px; font-size:11px; color:var(--c-text, #111); background:#fff; box-sizing:border-box }
.gpk-col-hdr .gpk-cnt { font-family:monospace; font-size:10px; color:var(--c-muted, #6b7280); white-space:nowrap }
.gpk-col-body { overflow-y:auto; flex:1; background:#fff }
.gpk-col-item { padding:5px 8px; border-bottom:1px solid var(--c-border, #e5e7eb); cursor:pointer; font-size:12px; background:#fff }
.gpk-col-item:hover { background:#f3f6fa }
.gpk-col-item.on    { background:#e8f0fe; font-weight:600 }
.gpk-col-item.gpk-col-item-mark        { background:#dcfce7; color:#166534; font-weight:600 }
.gpk-col-item.gpk-col-item-mark:hover  { background:#bbf7d0 }
.gpk-col-item.on.gpk-col-item-mark     { background:#dcfce7 }
.gpk-col-empty,
.gpk-col-loading { padding:14px; color:var(--c-muted, #6b7280); font-size:12px; text-align:center; background:#fff }

/* Тонкие скроллбары в колонках и на горизонтальной ленте. */
.gpk-cols,
.gpk-col-body { scrollbar-width: thin; }                       /* Firefox */
.gpk-cols::-webkit-scrollbar,
.gpk-col-body::-webkit-scrollbar { width:7px; height:7px }     /* Chrome/Edge */
.gpk-cols::-webkit-scrollbar-thumb,
.gpk-col-body::-webkit-scrollbar-thumb { background:#c4cbd4; border-radius:4px }
.gpk-cols::-webkit-scrollbar-thumb:hover,
.gpk-col-body::-webkit-scrollbar-thumb:hover { background:#9aa4b1 }
.gpk-cols::-webkit-scrollbar-track,
.gpk-col-body::-webkit-scrollbar-track { background:transparent }

.gpk-bc       { margin:8px 0 4px; font-size:13px; color:var(--c-muted, #6b7280) }
.gpk-bc b     { color:var(--c-text, #111) }
.gpk-bc a     { text-decoration:none }
.gpk-bc .sub  { font-family:monospace; color:var(--c-muted, #6b7280); font-size:11px }

.gpk-map      { height:380px; margin-top:10px; border:1px solid var(--c-border, #e5e7eb); border-radius:8px }

/* Popup-обёртка — используется в форме объекта и фильтре. */
.gpk-modal    { position:fixed; inset:0; background:rgba(0,0,0,0.5); display:flex; align-items:center; justify-content:center; z-index:9999 }
.gpk-modal-box{ background:#fff; border-radius:10px; padding:16px; width:min(1080px, 96vw); max-height:86vh; overflow:auto; box-shadow:0 12px 40px rgba(0,0,0,.3) }
.gpk-modal-box.gpk-modal-wide{ width:min(1080px, 96vw) }   /* для пикеров с 5 колонками (со страной) */
/* Шапка popup'а Location: Search + Clear + Apply + ✕ — ВСЕ в один ряд, крупные кнопки (46px). */
.gpk-modal-hdr{ display:flex; align-items:center; gap:10px; margin-bottom:12px; flex-wrap:nowrap }
.gpk-modal-hdr h3 { margin:0; font-size:14px; flex:1 1 auto }
.gpk-modal-hdr .gpk-x { flex:0 0 auto; cursor:pointer; width:38px; height:38px; font-size:22px; line-height:1; color:#374151;
    background:#fff; border:1px solid #374151; border-radius:6px; padding:0;
    display:inline-flex; align-items:center; justify-content:center }
.gpk-modal-hdr .gpk-x:hover { color:#111; border-color:#111; background:#f3f4f6 }
/* Кнопки Apply / Clear в шапке popup'а локаций (десктоп). */
.gpk-modal-hdr .gpk-hbtn { padding:7px 18px }
.gpk-modal-actions { display:flex; align-items:center; justify-content:flex-end; gap:8px; flex:0 0 auto }
.gpk-modal-actions button { padding:0 18px; font-size:14px; font-weight:600; height:38px; box-sizing:border-box; line-height:1; border-radius:6px }

/* Карта внутри popup'ов — компактная, во всю ширину. */
.gpk-modal .gpk-map { height:160px; margin-top:10px }
.ssrch-pop .gpk-map { height:200px; margin-top:10px }

/* Поиск по локациям (заменяет заголовок popup'а). */
.gpk-search-wrap { flex:1 1 auto; min-width:0 }
.gpk-search {
    width:100%; box-sizing:border-box;
    height:38px; padding:0 12px; font-size:14px;
    border:1px solid var(--c-border-strong, #d1d5db); border-radius:6px;
    background:#fff; color:var(--c-text, #111);
}
.gpk-search:focus { outline:none; border-color:#2563eb; box-shadow:0 0 0 2px rgba(37,99,235,.15) }
.gpk-search-dd {
    position:absolute; top:100%; left:0; z-index:10010;
    width:min(340px, 90vw); max-height:280px; overflow-y:auto;
    background:#fff; border:1px solid #cbd5e1; border-radius:6px;
    box-shadow:0 8px 24px rgba(0,0,0,.12);
}
.gpk-search-dd[hidden] { display:none }
.gpk-search-opt { padding:6px 10px; cursor:pointer; font-size:12px; display:flex; flex-direction:column; gap:1px }
.gpk-search-opt:hover { background:#eff6ff }
.gpk-search-opt b { font-size:12px }
.gpk-search-ctx { color:#94a3b8; font-size:11px }
.gpk-search-empty { padding:10px; color:#94a3b8; font-size:12px; text-align:center }

/* Десктоп: лицо-селект скрыто, обёртка-выпадашка прозрачна (колонки как были). */
.gpk-col-sel { display:none }
.gpk-col-drop { display:contents }
.gpk-bico { display:none }   /* иконки кнопок шапки — только на мобиле */

/* === Мобайл: Location popup полноэкранный, колонки → каскад селектбоксов ===
   Верх: Search 50% + иконки Apply/Clear/Close. Без path и без стрелок.
   Селекты идут один под другим; выпадашка раскрывается ПОВЕРХ карты.
   Снизу 20% экрана — карта. */
@media (max-width: 768px) {
    .gpk-modal-box,
    .gpk-modal-box.gpk-modal-wide {
        width:100vw; height:100vh; height:100dvh; max-height:none;
        border-radius:0; padding:10px; display:flex; flex-direction:column; overflow:hidden;
    }
    .gpk-modal-hdr { display:flex; flex-wrap:nowrap; gap:6px; align-items:center; margin-bottom:8px; flex:0 0 auto }
    .gpk-modal-hdr .gpk-search-wrap { flex:1 1 50%; min-width:0 }
    .gpk-modal-hdr .gpk-hbtn {
        flex:0 0 auto; width:44px; height:40px; padding:0; font-size:20px;
        display:inline-flex; align-items:center; justify-content:center;
    }
    .gpk-modal-hdr .gpk-hbtn .gpk-btxt { display:none }
    .gpk-modal-hdr .gpk-hbtn .gpk-bico { display:inline }
    .gpk-modal-hdr .gpk-x { flex:0 0 auto }

    /* Любой mount пикера (не только попап локаций на сайте, но и Work regions)
       — колонка на всю высоту, чтобы карта тянулась до низа экрана. */
    #bsr-locpop-mount,
    .gpk-modal .gpk-root { display:flex; flex-direction:column; flex:1 1 auto; min-height:0 }
    .gpk-modal .gpk-bc { display:none }                 /* path не нужен */
    /* Колонки стопкой по высоте контента; overflow:visible — выпадашка ложится на карту */
    .gpk-modal .gpk-cols {
        display:flex; flex-direction:column; gap:8px;
        flex:0 0 auto; min-height:0; padding:0; border:0; overflow:visible;
    }
    .gpk-modal .gpk-col {
        display:block; flex:0 0 auto; width:100%; max-width:none; max-height:none;
        border:0; overflow:visible; position:relative;
    }
    /* Лицо-селект */
    .gpk-modal .gpk-col-sel {
        display:flex; align-items:center; justify-content:space-between; gap:8px;
        width:100%; height:44px; padding:0 12px; cursor:pointer; font:inherit; font-size:15px;
        background:#fff; color:var(--c-text,#111);
        border:1px solid var(--c-border-strong,#d1d5db); border-radius:8px;
    }
    .gpk-modal .gpk-col-sel[data-empty] .gpk-col-sel-val { color:var(--c-muted,#6b7280) }
    .gpk-modal .gpk-col-sel-val { overflow:hidden; text-overflow:ellipsis; white-space:nowrap }
    .gpk-modal .gpk-col-sel-caret { flex:0 0 auto; color:#94a3b8; font-size:12px }
    .gpk-modal .gpk-col.open .gpk-col-sel { border-color:#2563eb }
    /* Выпадашка — поверх карты (absolute + z-index), по умолчанию закрыта */
    .gpk-modal .gpk-col-drop {
        display:none; position:absolute; top:calc(100% + 4px); left:0; right:0; z-index:40;
        background:#fff; border:1px solid var(--c-border-strong,#d1d5db); border-radius:8px;
        box-shadow:0 12px 32px rgba(0,0,0,.18); max-height:46vh; overflow:hidden;
        flex-direction:column;
    }
    .gpk-modal .gpk-col.open { z-index:50 }
    .gpk-modal .gpk-col.open .gpk-col-drop { display:flex }
    .gpk-modal .gpk-col-body { max-height:40vh; overflow-y:auto; flex:1 1 auto }
    .gpk-modal .gpk-col-item   { font-size:15px; padding:12px }
    .gpk-modal .gpk-col-filter { font-size:14px; padding:8px }
    /* Карта занимает всё свободное место; с каждым новым select — уменьшается. */
    .gpk-modal .gpk-map { flex:1 1 auto; height:auto; min-height:20vh; margin-top:8px }
}