/* =====================================================================
   Ручное рисование поля (draw mode)
   Активный зелёный: #4CAF50, линия рисования: белая.
   ===================================================================== */

/* ───── Правый вертикальный стек кнопок: ✕ / ▦ / + ───── */
/* Все одинакового размера (48×48), на одинаковом отступе от правого края (16px),
   расположены вертикально с шагом 60px (48 + 12 gap). */
.draw-field-button,
.draw-cancel-btn,
.draw-fab {
    position: fixed;
    right: 16px;
    width: 48px;
    height: 48px;
    border-radius: 50%;
    box-sizing: border-box;
    z-index: 1300;
    display: none;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: background-color .2s, border-color .2s, transform .1s;
    border: none;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.35);
}
.draw-field-button:active,
.draw-cancel-btn:active,
.draw-fab:active { transform: scale(0.95); }

/* ▦ Включить/выключить рисование — всегда виден.
   bottom = (отступ от низа bottom-nav) + (высота превью-ленты, если видна) + safe-area.
   --draw-preview-h управляется JS-observer'ом: 132px когда превью видны, 0 — когда нет. */
.draw-field-button {
    background: #fff;
    color: #222;
    display: flex;
    top: auto;
    bottom: calc(8px + 48px + 12px + 132px + env(safe-area-inset-bottom));
}
@media (min-width: 1025px) {
    .draw-field-button { bottom: 24px; }
}
.draw-field-button:hover { background: #f0f0f0; }
.draw-field-button.is-active {
    background: #4CAF50;
    color: #fff;
}
.draw-field-button button {
    background: none; border: none; padding: 0; margin: 0;
    cursor: pointer; color: inherit;
    width: 100%; height: 100%;
    display: flex; align-items: center; justify-content: center;
    font-size: 18px;
}
.draw-field-button svg { width: 18px; height: 18px; }

/* ───── ✕ Cancel — на одной горизонтали со строкой поиска (только в draw-mode) ───── */
.draw-cancel-btn {
    /* Десктоп: обычный отступ сверху */
    top: 16px;
    background: #fff;
    color: #222;
    font-size: 22px;
    line-height: 1;
}
@media (max-width: 1024px) {
    /* Мобилка: .mobile-search-container = top:0 height:50px → центрируем 48-px кнопку */
    .draw-cancel-btn { top: 1px; }
}
.draw-cancel-btn.is-visible { display: flex; }
.draw-cancel-btn:hover { background: #f2f2f2; }

/* ───── Bottom CTA с площадью ───── */
/* Геометрия копирует .bottom-nav (см. css/bottom-nav.css): та же ширина и центрирование,
   но располагается над ним с отступом 12px. */
.draw-cta {
    position: fixed;
    left: 50%;
    transform: translateX(-50%);
    bottom: calc(8px + 48px + 12px + env(safe-area-inset-bottom));
    width: calc(100% - 32px);
    max-width: 362px;
    box-sizing: border-box;
    z-index: 1290;
    display: none;
    flex-direction: column;
    align-items: stretch;
    background: #4CAF50;
    color: #fff;
    border: none;
    border-radius: 16px;
    padding: 12px 16px;
    cursor: pointer;
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.35);
    text-align: center;
    transition: background-color .2s, opacity .2s;
}
.draw-cta.is-visible { display: flex; }
.draw-cta:hover:not(:disabled) { background: #43a047; }
.draw-cta:disabled { background: #6b6b6b; opacity: 0.85; cursor: default; }
.draw-cta.is-warning { background: #e09b24; }
.draw-cta__title { font-size: 15px; font-weight: 600; line-height: 1.2; }
.draw-cta__sub   { font-size: 12px; opacity: 0.9; margin-top: 2px; line-height: 1.2; }

/* ───── Split-screen режим .field-edit-overlay (карта сверху, модалка 50vh снизу) ───── */
.field-edit-overlay.is-half {
    background: transparent !important;
    pointer-events: none;            /* клики проходят к карте, кроме самой модалки */
    /* Приподнимаем модалку над bottom-nav (8 + 48 + 8 + safe-area) */
    padding-bottom: calc(8px + 48px + 12px + env(safe-area-inset-bottom)) !important;
    box-sizing: border-box;
}
.field-edit-overlay.is-half .field-edit-modal {
    pointer-events: auto;
    max-height: 50vh !important;
    box-shadow: 0 -10px 30px rgba(0, 0, 0, 0.35);
    /* Sticky save button: всегда виден, тап не теряется в скролле модалки */
    position: relative;
}
.field-edit-overlay.is-half .field-edit-modal .field-edit-save {
    position: sticky;
    bottom: 0;
    z-index: 2;
    margin-top: 16px;
    box-shadow: 0 -8px 12px -4px rgba(255, 255, 255, 0.9);
}

/* ───── Crosshair в центре экрана (touch-режим draw) ───── */
.draw-crosshair {
    position: fixed;
    top: 50%; left: 50%;
    width: 40px; height: 40px;
    margin-left: -20px; margin-top: -20px;
    pointer-events: none;
    z-index: 1295;
    display: none;
}
.draw-crosshair.is-visible { display: block; }
.draw-crosshair__h, .draw-crosshair__v {
    position: absolute;
    background: rgba(255, 255, 255, 0.95);
    box-shadow: 0 0 4px rgba(0, 0, 0, 0.5);
}
.draw-crosshair__h {
    left: 4px; right: 4px; top: 50%;
    height: 2px; margin-top: -1px;
}
.draw-crosshair__v {
    top: 4px; bottom: 4px; left: 50%;
    width: 2px; margin-left: -1px;
}
.draw-crosshair__dot {
    position: absolute;
    top: 50%; left: 50%;
    width: 10px; height: 10px;
    margin-left: -5px; margin-top: -5px;
    border-radius: 50%;
    background: #fff;
    border: 2px solid #4CAF50;
    box-shadow: 0 0 6px rgba(0, 0, 0, 0.6);
    box-sizing: border-box;
}

/* ───── + FAB — над ▦ кнопкой рисования (только в touch-draw-mode) ───── */
.draw-fab {
    top: auto;
    /* над .draw-field-button с зазором 12 (учитывая высоту превью, если она видна) */
    bottom: calc(8px + 48px + 12px + 48px + 12px + 132px + env(safe-area-inset-bottom));
    background: #4CAF50;
    color: #fff;
    font-size: 22px;
}
.draw-fab.is-visible { display: flex; }
.draw-fab:hover { background: #43a047; }
@media (min-width: 768px) {
    /* На десктопе FAB не нужен — там тапы по карте */
    .draw-fab { display: none !important; }
    .draw-crosshair { display: none !important; }
}

/* ───── Hint "приблизьте карту" при zoom < 14 ───── */
.draw-hint {
    position: fixed;
    top: 72px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 1280;
    display: none;
    padding: 6px 12px;
    background: rgba(0, 0, 0, 0.75);
    color: #fff;
    border-radius: 999px;
    font-size: 13px;
    pointer-events: none;
}
.draw-hint.is-visible { display: block; }

/* ───── Модалка ввода имени поля после завершения ───── */
.draw-name-modal {
    position: fixed; inset: 0;
    z-index: 2000;
    display: none;
    align-items: center;
    justify-content: center;
    background: rgba(0, 0, 0, 0.5);
}
.draw-name-modal.is-visible { display: flex; }
.draw-name-modal__card {
    background: #fff;
    border-radius: 14px;
    padding: 20px;
    width: min(360px, 92vw);
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.4);
}
.draw-name-modal__title {
    font-size: 16px; font-weight: 600; margin: 0 0 12px; color: #222;
}
.draw-name-modal__area {
    font-size: 13px; color: #555; margin-bottom: 12px;
}
.draw-name-modal__label {
    display: block;
    font-size: 12px; color: #666;
    margin: 4px 0 4px;
}
.draw-name-modal__input {
    width: 100%; box-sizing: border-box;
    padding: 10px 12px; font-size: 14px;
    border: 1px solid #ccc; border-radius: 8px;
    margin-bottom: 8px;
    outline: none;
    background: #fff;
    color: #222;
    -webkit-appearance: none;
    appearance: none;
}
.draw-name-modal__input:last-of-type { margin-bottom: 16px; }
.draw-name-modal__input:focus { border-color: #4CAF50; box-shadow: 0 0 0 2px rgba(76,175,80,0.2); }
/* Горизонтальный ряд для пары полей "Дата сева / Дата уборки" */
.draw-name-modal__row {
    display: flex;
    gap: 8px;
    margin-bottom: 16px;
}
.draw-name-modal__col { flex: 1 1 0; min-width: 0; }
.draw-name-modal__col .draw-name-modal__input {
    margin-bottom: 0;   /* отступ задан у .row */
}
.draw-name-modal__select {
    background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23666' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3e%3cpolyline points='6,9 12,15 18,9'%3e%3c/polyline%3e%3c/svg%3e");
    background-repeat: no-repeat;
    background-position: right 12px center;
    background-size: 16px;
    padding-right: 36px;
    cursor: pointer;
}
.draw-name-modal__input:focus { border-color: #4CAF50; box-shadow: 0 0 0 2px rgba(76,175,80,0.2); }
.draw-name-modal__actions { display: flex; gap: 8px; justify-content: flex-end; }
.draw-name-modal__btn {
    padding: 9px 16px; border: none; border-radius: 8px;
    font-size: 14px; font-weight: 500; cursor: pointer;
    transition: background-color .2s;
}
.draw-name-modal__btn--cancel { background: #eee; color: #333; }
.draw-name-modal__btn--cancel:hover { background: #ddd; }
.draw-name-modal__btn--save { background: #4CAF50; color: #fff; }
.draw-name-modal__btn--save:hover { background: #43a047; }
.draw-name-modal__btn--save:disabled { background: #9bc89d; cursor: not-allowed; }

/* ───── Поверх mapbox-gl-draw оф. стилей: чуть пожирнее cursor в draw-mode ───── */
.mapboxgl-canvas-container.mapboxgl-interactive.mode-draw_polygon {
    cursor: crosshair;
}