/* ==========================================================================
   Leaflet Map Controls — Unified Button Styling
   Shared across ALL map views for consistent icon-only layout with tooltips.
   Include this CSS on every page that uses a Leaflet map.
   ========================================================================== */

/* ── Universal button sizing — ALL leaflet bar buttons ────────────────── */

.leaflet-bar a,
.leaflet-bar a:hover {
    width: 36px !important;
    height: 36px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 0 !important;
    line-height: 1 !important;
    font-size: 16px !important;
    text-decoration: none !important;
    box-sizing: border-box !important;
}

/* ── Draw toolbar spritesheet sizing & centering ─────────────────────── */
/* Icons are 30×30 cells in a 300×30 spritesheet; buttons are 36×36.
   Offset each position by +3px x/y to center the cell in the button.   */

.leaflet-draw-toolbar a,
.leaflet-draw-edit-edit,
.leaflet-draw-edit-remove {
    background-size: 300px 30px;
}

.leaflet-draw-toolbar .leaflet-draw-draw-polyline      { background-position:    3px 3px !important; }
.leaflet-draw-toolbar .leaflet-draw-draw-polygon       { background-position:  -27px 3px !important; }
.leaflet-draw-toolbar .leaflet-draw-draw-rectangle     { background-position:  -57px 3px !important; }
.leaflet-draw-toolbar .leaflet-draw-draw-circle        { background-position:  -87px 3px !important; }
.leaflet-draw-toolbar .leaflet-draw-draw-marker        { background-position: -117px 3px !important; }
.leaflet-draw-toolbar .leaflet-draw-draw-circlemarker  { background-position: -267px 3px !important; }
.leaflet-draw-toolbar .leaflet-draw-edit-edit          { background-position: -147px 3px !important; }
.leaflet-draw-toolbar .leaflet-draw-edit-remove        { background-position: -177px 3px !important; }
.leaflet-draw-toolbar .leaflet-draw-edit-edit.leaflet-disabled  { background-position: -207px 3px !important; }
.leaflet-draw-toolbar .leaflet-draw-edit-remove.leaflet-disabled { background-position: -237px 3px !important; }

.leaflet-control-fullscreen a,
.leaflet-control-fullscreen-button {
    background-size: 26px 52px;
}

/* Hide spritesheet only when FA icon was injected by JS */
.leaflet-draw-toolbar a.leaflet-ctrl-has-icon,
.leaflet-draw-edit-edit.leaflet-ctrl-has-icon,
.leaflet-draw-edit-remove.leaflet-ctrl-has-icon,
.leaflet-control-fullscreen a.leaflet-ctrl-has-icon,
.leaflet-control-fullscreen-button.leaflet-ctrl-has-icon {
    background-image: none !important;
}

/* ── CSS-only FA icon for draw-polygon on Areas map (immune to JS DOM rebuilds) */

#create-area-map .leaflet-draw-draw-polygon {
    background-image: none !important;
    font-size: 0 !important;
    color: transparent !important;
}

#create-area-map .leaflet-draw-draw-polygon::before {
    content: '\f303'; /* fa-pencil-alt */
    font-family: 'Font Awesome 5 Free';
    font-weight: 900;
    font-size: 16px;
    color: #333;
    line-height: 1;
}

/* ── Draw action buttons (Finish, Delete, Cancel) — override universal ── */

.leaflet-draw-actions a,
.leaflet-draw-actions a:hover {
    width: auto !important;
    height: 34px !important;
    display: block !important;
    background-color: #4a4a48 !important;
    color: #fff !important;
    font-size: 13px !important;
    line-height: 34px !important;
    padding: 0 14px !important;
    white-space: nowrap !important;
}

.leaflet-draw-actions a:hover {
    background-color: #333 !important;
}

/* ── Widget / custom toolbar buttons (layers, reset, search, etc.) ──── */

.leaflet-bar .leaflet-map-btn {
    background-image: none !important;
}

/* ── Icon inside control buttons ──────────────────────────────────────── */

.leaflet-ctrl-icon {
    font-size: 16px;
    color: #333;
    line-height: 1;
}

/* ── Legacy label spans — hidden; tooltips used instead ───────────────── */

.leaflet-ctrl-label {
    display: none !important;
}

/* ── GeoSearch button (button mode) ───────────────────────────────────── */

.leaflet-control-geosearch a.leaflet-bar-part,
.leaflet-control-geosearch a.leaflet-bar-part:hover {
    width: 36px !important;
    height: 36px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    position: relative;
}

.leaflet-control-geosearch a.leaflet-bar-part:before {
    top: 17px;
    left: 15px;
}

.leaflet-control-geosearch a.leaflet-bar-part:after {
    top: 10px;
    left: 10px;
}

/* ── Leaflet-search button ────────────────────────────────────────────── */

.leaflet-control-search .search-button {
    width: 36px !important;
    height: 36px !important;
    background-size: 20px 20px;
    background-position: center center;
}

/* ── GeoSearch bar alignment ──────────────────────────────────────────── */

.leaflet-geosearch-bar {
    z-index: 1000;
}

/* ── Dark mode overrides ──────────────────────────────────────────────── */

body.dark .leaflet-ctrl-icon {
    color: #ccc;
}

body.dark #create-area-map .leaflet-draw-draw-polygon::before {
    color: #d0d0d0;
}

/* [REMOVAL-070] Dark mode .leaflet-ctrl-label override removed — labels are now hidden globally (tooltip-only) */

body.dark .leaflet-bar a {
    background-color: #2C394B;
    color: #d0d0d0;
    border-bottom-color: #334756;
}

body.dark .leaflet-bar a:hover {
    background-color: #334756;
    color: #fff;
}

body.dark .leaflet-control-geosearch a.leaflet-bar-part:before {
    border-top-color: #d0d0d0;
}

body.dark .leaflet-control-geosearch a.leaflet-bar-part:after {
    border-color: #d0d0d0;
}