/* ==========================================================================
   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;
}

/* ==========================================================================
   Working Map — mockup-aligned control rail (docs/mockups/map-areas-redesign)
   --------------------------------------------------------------------------
   Restyles the existing Leaflet controls on the Working Map only (#working-map)
   to match the redesign mockup: rounded white "cards" grouped into stacks with
   subtle borders + elevation, thin line (outline) icons, and a brand-coloured
   hover/active state. Scoped to #working-map so every other map view keeps its
   current look. Additive — no existing rule is overridden destructively.
   ========================================================================== */

/* ── Grouped card containers (zoom, draw, edit, reset stacks) ──────────── */
#working-map .leaflet-bar {
    border: 1px solid var(--border-subtle, #e4e8ee) !important;
    border-radius: var(--radius-md, 8px) !important;
    box-shadow: var(--elev-2, 0 2px 6px rgba(13, 34, 53, 0.10)) !important;
    overflow: hidden;
    background: var(--surface-0, #fff);
}

/* ── Individual buttons inside a card ─────────────────────────────────── */
#working-map .leaflet-bar a,
#working-map .leaflet-bar a:hover {
    width: 40px !important;
    height: 40px !important;
    background: var(--surface-0, #fff);
    color: var(--text-secondary, #334155);
    border-bottom: 1px solid var(--border-subtle, #e4e8ee);
    border-radius: 0 !important;
    transition: background 0.15s ease, color 0.15s ease;
}
#working-map .leaflet-bar a:last-child { border-bottom: none; }

#working-map .leaflet-bar a:hover {
    background: var(--brand-50, #f0f9ff);
    color: var(--brand-600, #075985);
}
#working-map .leaflet-bar a:active,
#working-map .leaflet-bar a.leaflet-ctrl-active,
#working-map .leaflet-bar a[aria-pressed="true"] {
    background: var(--brand-50, #f0f9ff);
    color: var(--brand-700, #0c4a6e);
}
#working-map .leaflet-bar a.leaflet-disabled {
    color: var(--text-muted, #94a3b8);
    background: var(--surface-0, #fff);
}

/* Zoom +/− keep their glyphs but read as light line controls */
#working-map .leaflet-control-zoom a {
    font-size: 20px !important;
    font-weight: 400 !important;
}

/* ── Thin line (outline) icons via SVG masks ──────────────────────────── */
/* Hide the injected Font Awesome glyph and paint a stroke-style icon whose
   colour follows the button's currentColor (so hover/active tint it). */
#working-map .leaflet-draw-toolbar a .leaflet-ctrl-icon,
#working-map .leaflet-map-btn .leaflet-ctrl-icon {
    display: none !important;
}
#working-map .leaflet-draw-toolbar a,
#working-map .leaflet-bar a.leaflet-map-btn { position: relative; }

#working-map .leaflet-draw-toolbar a::after,
#working-map .leaflet-bar a.leaflet-map-btn::after {
    content: '';
    position: absolute;
    inset: 0;
    margin: auto;
    width: 19px;
    height: 19px;
    background-color: currentColor;
    -webkit-mask: var(--wm-ico) center / contain no-repeat;
    mask: var(--wm-ico) center / contain no-repeat;
}

#working-map .leaflet-draw-draw-polyline {
    --wm-ico: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%20fill='none'%20stroke='%23000'%20stroke-width='2'%20stroke-linecap='round'%20stroke-linejoin='round'%3E%3Cpath%20d='M5%2019L19%205'/%3E%3Ccircle%20cx='5'%20cy='19'%20r='2'/%3E%3Ccircle%20cx='19'%20cy='5'%20r='2'/%3E%3C/svg%3E");
}
#working-map .leaflet-draw-draw-polygon {
    --wm-ico: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%20fill='none'%20stroke='%23000'%20stroke-width='2'%20stroke-linecap='round'%20stroke-linejoin='round'%3E%3Cpath%20d='M12%203l8.5%206.2-3.2%2010H6.7l-3.2-10z'/%3E%3C/svg%3E");
}
#working-map .leaflet-draw-draw-rectangle {
    --wm-ico: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%20fill='none'%20stroke='%23000'%20stroke-width='2'%20stroke-linecap='round'%20stroke-linejoin='round'%3E%3Crect%20x='4'%20y='6'%20width='16'%20height='12'%20rx='1.5'/%3E%3C/svg%3E");
}
#working-map .leaflet-draw-edit-edit {
    --wm-ico: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%20fill='none'%20stroke='%23000'%20stroke-width='2'%20stroke-linecap='round'%20stroke-linejoin='round'%3E%3Cpath%20d='M12%2020h9'/%3E%3Cpath%20d='M16.5%203.5a2.1%202.1%200%200%201%203%203L7%2019l-4%201%201-4z'/%3E%3C/svg%3E");
}
#working-map .leaflet-draw-edit-remove {
    --wm-ico: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%20fill='none'%20stroke='%23000'%20stroke-width='2'%20stroke-linecap='round'%20stroke-linejoin='round'%3E%3Cpath%20d='M3%206h18'/%3E%3Cpath%20d='M8%206V4h8v2'/%3E%3Cpath%20d='M6%206l1%2014h10l1-14'/%3E%3C/svg%3E");
}
#working-map .leaflet-bar a.leaflet-map-btn {
    --wm-ico: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%20fill='none'%20stroke='%23000'%20stroke-width='2'%20stroke-linecap='round'%20stroke-linejoin='round'%3E%3Cpath%20d='M21%2012a9%209%200%201%201-3-6.7L21%208'/%3E%3Cpath%20d='M21%203v5h-5'/%3E%3C/svg%3E");
}