#message {
    position: absolute;
    bottom: 20px;
    left: 10px;
    background: yellow;
    opacity: 0.7;
    padding: 6px 16px;
    color: black;
    text-align: left;
    line-height: 1.5;
    border: none;
    z-index: 3000;
}

#message a {
    color: blue;
}

#title {
    position: absolute;
    width: 500px;
    min-width: 300px;
    margin: 0 auto;
    left: 0;
    right: 0;
    top: 10px;
    padding: 6px;
    border-radius: 6px;
    background-color: white;
    opacity: 0.9;
    z-index: 1000;
}

#titleview {
    text-align: center;
}

#titleinput {
    width: 100%;
    border-width: 0;
    padding: 0;
    text-align: center;
}

#titleedit {
    border: 1px #444 solid;
    padding: 2px;
}

#editraw {
    position: absolute;
    top: 0px;
    bottom: 0px;
    left: 0px;
    right: 0px;
    background-color: black;
    opacity: 0.5;
    z-index: 1001;
    /*display: none;*/
    visibility: hidden;
}

#historybox, #editrawbox {
    width: 70%;
    height: 50%;
    margin: auto;
    position: absolute;
    top: 0px;
    bottom: 0px;
    left: 0px;
    right: 0px;
    opacity: 1.0;
    background-color: white;
    z-index: 1002;
    /*display: none;*/
    visibility: hidden;
}

#editrawta {
    border: none;
    padding: 0;
    resize: none;
    width: 100%;
    height: 100%;
}

#editrawtad {
    position: absolute;
    left: 6px;
    top: 6px;
    right: 6px;
    bottom: 30px;
    border: 1px solid black;
    padding: 4px;
}

#editrawbottom {
    position: absolute;
    left: 6px;
    right: 6px;
    bottom: 0px;
    text-align: left;
    line-height: 30px;
}

#fm {
    position: absolute;
    visibility: hidden;
    width: 0;
    height: 0;
    left: 0;
    top: 0;
}

#historybox {
    width: 500px;
}

#historybox .buttons {
    text-align: center;
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    line-height: 30px;
}

#historybox h2 {
    font-size: 12pt;
    text-align: center;
    margin: 0;
    line-height: 30px;
}

#histlistcontainter {
}

#historylist {
    overflow-y: auto;
    position: absolute;
    top: 30px;
    bottom: 30px;
    left: 0;
    right: 0;
}

.history-entry {
    /*border-top: 1px solid #ddd;
    padding-top: 4px;*/
    margin: 0 8px 8px;
    text-align: left;
}

.history-entry .date {
    font-size: 10pt;
    color: #666;
}

.history-entry .edit {
    float: right;
    font-size: 10pt;
}

.history-entry .delete {
    float: right;
    font-size: 10pt;
    padding-right: 1em;
}

.history-entry .delete a {
    color: #bbf;
}

.history-entry .title {
    clear: both;
}

.history-entry .title a {
    color: black;
}

/*
    De knoppen van de tekenlaag blijven weg; onze eigen knop doet het werk.

    Marker en lijn stonden hier al. De veelhoek hoorde erbij: het scherm heeft
    zijn eigen knop "Teken (nog) een gebied", en region-selector klikt deze in
    stilte aan. Zichtbaar leverde hij alleen een grijs blokje op dat over de
    zoekbalk heen viel (melding Rick, 10 sep 2026).
*/
/*
    Het zoekveld blijft leesbaar als Google zijn sleutel weigert.

    Google plakt er dan zijn foutplaatje overheen, herhaald over de hele
    breedte: een rij grijze rondjes waar het adres achter verdwijnt (melding
    Rick, 10 sep 2026). De klasse wordt door google-maps-loader.js weggehaald;
    dit is het vangnet voor het moment daartussen en voor een pagina die die
    loader niet meeneemt.
*/
input.gm-err-autocomplete {
    background-image: none !important;
}

.leaflet-draw-draw-marker,
.leaflet-draw-draw-polyline,
.leaflet-draw-draw-polygon {
    display: none !important;
}

#mapedit {
    height: calc(100vh - 118px);
    margin: 0;
}
#mapedit .search-bar a {
    margin: 0 2px 0 12px !important;
}

#mapedit .search-bar input {
    height: 100% !important;
    background: transparent !important;
}

.leaflet-bar.leaflet-control form {
    display: flex !important;
    align-items: center;
    position: relative !important;
    z-index: 999 !important;
    margin: 0 !important;
    flex: 1 1 auto;
    min-width: 0;
    height: 100%;
}

.leaflet-bar.leaflet-control form input,
.leaflet-bar.leaflet-control form input:focus {
    border: none !important;
    outline: 0 !important;
    /*
        De zoekbalk blijft binnen zijn eigen balk.

        MapBBCode geeft dit veld een vaste breedte van ongeveer 230 pixels en zet
        het los van de rij neer. Daardoor stak het rechts uit de balk en kwamen
        de knoppen van de tekenlaag eroverheen: vier grijze blokjes in het veld,
        en typen ging niet meer omdat je op die knoppen klikte (melding Rick,
        10 sep 2026). Met een breedte van de balk zelf kan dat niet meer.
    */
    width: 100% !important;
    min-width: 0;
}

a[title='Search for a location'] {
    display: block;
    margin: 0 2px 0 12px !important;
    width: 16px !important;
    height: 16px !important;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='none' viewBox='0 0 24 24' stroke='%239CA3AF' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='M20 20l-3.5-3.5'/%3E%3C/svg%3E") !important;
    background-size: 16px 16px !important;
    background-position: center !important;
    background-repeat: no-repeat !important;
}

:root {
    /* De ruimte tussen de rand van de kaart en de knoppen erop. Staat hier
       omdat de zoekbalk absoluut gepositioneerd is en dus zijn eigen afstand
       moet aanhouden; met één getal kunnen die twee niet uit elkaar lopen. */
    --bb-kaartrand: 18px;
}

/*
    De zoekbalk staat op één rij met de plus en de min. Op elke kaart.

    Leaflet stapelt zijn besturingen standaard onder elkaar, dus zonder deze
    regel valt de zoekbalk onder de zoomknoppen. Dat is drie keer gemeld en drie
    keer per kaart opgelost: eerst voor de sub-order-editor, daarna nog eens voor
    de gebiedsplannen, en elke nieuwe kaart begon weer onderaan (melding Rick,
    2 sep 2026).

    Daarom staat hij nu ongebonden: een kaart die er morgen bij komt krijgt hem
    vanzelf mee.
*/
/*
    De ruimte tot de rand staat met .leaflet-control-container ervoor, en niet
    op .leaflet-top.leaflet-left alleen.

    Leaflet zet zelf `padding: 0` op `.leaflet-control-container .leaflet-top`.
    Dat weegt even zwaar als twee klassen en zijn stylesheet laadt erna, dus de
    padding die hier stond heeft nooit iets gedaan: de zoekbalk en de zoomknoppen
    plakten al die tijd tegen de hoek (melding Bart, 3 sep 2026). De rest van de
    regel werkte wel, want daar zet Leaflet niets tegenover.
*/
.leaflet-top.leaflet-left {
    display: flex;
    flex-direction: row;
    align-items: flex-start;
}

.leaflet-control-container .leaflet-top.leaflet-left {
    padding: var(--bb-kaartrand) 0 0 var(--bb-kaartrand);
}

.leaflet-top.leaflet-left .leaflet-control {
    margin: 0 8px 0 0 !important;
}

/*
    De zoekbalk in de sub-order-editor.

    Het vergrootglas van MapBBCode wordt hierboven met !important permanent
    opengeklapt. Die regels zijn voor de klantkaart geschreven, maar gelden
    overal — en de afwerking (.search-bar) gebeurde alleen in
    order-create-map.js. Deze editor kreeg daardoor een los icoon met een
    randloos veld eronder, 140 bij 41, tegen de tekenknop aan (melding Rick).

    Hier past de 400px brede klantbalk niet: die staat absoluut gepositioneerd
    en zou over de tekenknop heen vallen, want in deze editor staan de
    besturingen in een rij (zie het blok hierboven). Dus een smallere pil die
    in die rij meeloopt.

    region-selector.js hangt .bb-so-search op het element en zet de placeholder;
    dat laatste kan niet uit CSS komen.
*/
.bb-so-search {
    display: flex;
    align-items: center;
    /*
        Even breed als de balk in de besteltool.

        Hij stond op 260 pixels, en daar past "Erasmusbrug, Rotterdam,
        Nederland" niet in: het adres liep half uit beeld (melding Rick,
        10 sep 2026). De besteltool doet 400, en dat leest wel. Op een smal
        scherm krimpt hij mee, want de kaart is dan zelf ook smaller.
    */
    width: min(400px, calc(100vw - 120px));
    height: 30px;
    background: #fff;
    border-radius: 4px;
    overflow: hidden;
}

.bb-so-search > div {
    display: flex;
    align-items: center;
    flex: 0 0 auto;
    height: 100%;
}

/* Leaflet geeft elke knop in een balk een witte achtergrond en een lijntje
   eronder. Op een rij is dat een streep dwars onder het vergrootglas. */
.bb-so-search a[title='Search for a location'] {
    background-color: transparent !important;
    border-bottom: none !important;
}

.bb-so-search input {
    width: 100%;
    height: 100% !important;
    padding: 0 10px 0 6px !important;
    line-height: normal;
    color: #374151;
    font-size: 13px;
    background: transparent;
    /* Past het adres er alsnog niet in, dan eindigt het met puntjes in plaats
       van halverwege een letter. */
    text-overflow: ellipsis;
}

.bb-so-search input::placeholder {
    color: #9CA3AF;
    opacity: 1;
}

.leaflet-top.leaflet-right {
    display: none;
}

.leaflet-control-attribution.leaflet-control {
    display: none;
}

.leaflet-popup-content input[value="Close"] {
    display: none;
}

.leaflet-draw-section {
    visibility: hidden;
}

.leaflet-draw-tooltip.leaflet-draw-tooltip-single {
    z-index: 99999;
}
#confirm-areas {
    margin-top: 1rem;
}

/* Above sticky site header (100) and account drawers (1000/1001); below SweetAlert */
#tool-modal {
    z-index: 2000 !important;
    inset: 0 !important;
    width: 100vw !important;
    height: 100vh !important;
    max-height: none !important;
    padding: 0 !important;
    box-sizing: border-box !important;
    align-items: stretch !important;
    justify-content: stretch !important;
    overflow: hidden !important;
}

#tool-modal-content-wrapper {
    width: 100% !important;
    height: 100% !important;
    max-width: none !important;
    max-height: none !important;
    padding: 0 !important;
}

#tool-modal-content-wrapper > .relative.bg-white {
    width: 100% !important;
    height: 100% !important;
    overflow: hidden !important;
    border-radius: 0 !important;
}

#tool-modal-content-wrapper > .relative.bg-white > div:last-child {
    width: 100% !important;
    height: 100% !important;
}

#tool-modal #mapedit {
    width: 100% !important;
    height: 100% !important;
    min-height: 0 !important;
}

/*
    Rechtsboven, onder het kruisje. Stond eerst rechtsonder, waar het bij het
    tekenen in de weg zat en ver van het zoekveld lag (verzoek Rick,
    29 aug 2026). Op een telefoon blijft het onderin: daar is bovenin geen
    ruimte naast de zoekbalk.
*/
#tool-modal-content {
    position: absolute;
    top: 58px;
    right: 24px;
    bottom: auto;
    transform: none;
    display: flex;
    flex-direction: column;
    width: min(360px, calc(100% - 80px));
    height: auto;
    max-height: calc(100% - 96px);
    overflow: hidden;
}

#selected-areas {
    display: flex;
    flex-direction: column;
    flex: 1;
    min-height: 0;
    overflow: hidden;
}

#selected-areas-scroll {
    flex: 1;
    min-height: 0;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
}

#selected-areas-footer {
    flex-shrink: 0;
}

/* Mobile-only draw controls — keep hidden on desktop */
#mobile-draw-button {
    display: none !important;
}

#tool-modal .bb-map-tool-btn,
#mobile-draw-button .bb-map-tool-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    width: 100%;
    max-width: 300px;
    min-height: 46px;
    margin-top: 12px;
    padding: 12px 18px;
    border: 1px solid #f1c61c;
    border-radius: 12px;
    background: #f1c61c;
    color: #141915;
    font-family: "Hanken Grotesk", Inter, sans-serif !important;
    font-size: 14px !important;
    font-weight: 700 !important;
    line-height: 1.25 !important;
    letter-spacing: 0 !important;
    text-transform: none !important;
    text-decoration: none;
    box-shadow: none;
    cursor: pointer;
    transition: background-color .16s ease, border-color .16s ease;
}

#tool-modal .bb-map-tool-btn:hover,
#mobile-draw-button .bb-map-tool-btn:hover {
    background: #e0b510;
    border-color: #e0b510;
}

#tool-modal .bb-map-tool-btn-outline {
    background: #fff;
    color: #141915;
    border-color: #f1c61c;
}

#tool-modal .bb-map-tool-btn-outline:hover {
    background: #fff9e8;
    border-color: #f1c61c;
}

/*
    Zolang er niets getekend is, hebben de adressenlijst en de bevestiging niets
    om over te gaan: de lijst is leeg en er valt niets te bevestigen. Ze
    verschijnen zodra er een gebied ligt (verzoek Rick, 29 aug 2026).
*/
#tool-modal-content.bb-geen-gebied #show-address-list,
#tool-modal-content.bb-geen-gebied #confirm-areas {
    display: none !important;
}

/*
    Eén gele knop per stap. Zolang er niets ligt is dat "Teken
    verspreidingsgebied"; ligt er wel iets, dan is bevestigen de volgende stap
    en wordt tekenen de tweede keus.
*/
#tool-modal-content:not(.bb-geen-gebied) .add-poly {
    background: #fff;
    color: #141915;
    border-color: #f1c61c;
}

#tool-modal-content:not(.bb-geen-gebied) .add-poly:hover {
    background: #fff9e8;
    border-color: #f1c61c;
}

/*
    De regel van een gebied: naam links, aantal en kruisje rechts. Met een vaste
    tussenruimte viel het nummer achter de naam op een nieuwe regel zodra het
    paneel smal werd (melding Rick, 29 aug 2026).
*/
#coords-wrapper ul {
    display: flex !important;
    align-items: center;
    justify-content: space-between;
    gap: 16px !important;
}

#coords-wrapper ul > li:first-child {
    flex: 1 1 auto;
    min-width: 0;
}

#coords-wrapper ul > li:first-child h6 {
    display: flex;
    align-items: center;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/*
    De naam van een gebied is aan te klikken en te wijzigen, en het potlood staat
    er gewoon bij.

    Het kwam eerst pas tevoorschijn bij hover, zoals het kruisje. Dat het gebied
    te hernoemen is, is dan niet te raden: op de schermafdruk van Rick stond een
    regel zonder potlood en de vraag waar het gebleven was (melding Rick,
    9 sep 2026). Op een aanraakscherm bestaat hover trouwens helemaal niet.
*/
.bb-gebiedsnaam {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    cursor: text;
}

.bb-gebiedsnaam:hover {
    text-decoration: underline;
    text-decoration-style: dotted;
    text-underline-offset: 3px;
}

.bb-gebiedsnaam-potlood {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    margin-left: 8px;
    padding: 3px;
    border: 0;
    border-radius: 6px;
    background: none;
    color: #9aa4ab;
    cursor: pointer;
    opacity: 1;
    transition: color .12s ease;
}

/* Zweef je over de regel, dan wordt hij donkerder: dan is het ook een knop. */
#coords-wrapper ul:hover .bb-gebiedsnaam-potlood,
.bb-summary-gebied-item:hover .bb-gebiedsnaam-potlood,
.bb-gebiedsnaam-potlood:hover,
.bb-gebiedsnaam-potlood:focus-visible {
    color: #15616d;
}

/* De naam in de lijst is aanklikbaar, dus dat mag je zien. */
.bb-summary-gebied-item .bb-gebiedsnaam-tekst {
    cursor: pointer;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.bb-summary-gebied-item:hover .bb-gebiedsnaam-tekst {
    text-decoration: underline;
    text-decoration-style: dotted;
    text-underline-offset: 3px;
}

/* Het invoerveld mag de regel niet uit elkaar duwen. */
.bb-summary-gebied-item .bb-gebiedsnaam-invoer {
    max-width: 260px;
}

.bb-gebiedsnaam-potlood:hover {
    background: #f4f1ec;
    color: #15616d;
}

.bb-gebiedsnaam-invoer {
    width: 100%;
    min-width: 0;
    border: 1.5px solid #15616d;
    border-radius: 8px;
    padding: 4px 8px;
    font: inherit;
    font-size: 14px;
    background: #fff;
    outline: none;
}

#coords-wrapper ul > li:last-child {
    flex: 0 0 auto;
}

#tool-modal .bb-map-tool-btn-confirm {
    max-width: none;
    min-height: 52px;
    margin-top: 16px;
}

#tool-modal .bb-map-tool-btn-icon,
#mobile-draw-button .bb-map-tool-btn-icon {
    display: inline-block;
    flex: 0 0 auto;
    width: 16px;
    height: 16px;
    color: inherit;
}

#tool-modal .bb-map-tool-btn-icon path,
#mobile-draw-button .bb-map-tool-btn-icon path {
    stroke: currentColor;
}

/*a[title="Search for a location"]{
    display:none !important;
}*/

/*
    De brede zoekbalk van de klantkaart.

    Absoluut gepositioneerd, want 400 pixels past niet in de rij met
    besturingen. Gevolg: de padding van die rij geldt niet voor hem, want een
    absoluut gepositioneerd kind rekent vanaf de rand en niet vanaf de
    binnenkant. Hij plakte daardoor tegen de bovenrand van de kaart terwijl de
    zoomknoppen er netjes vanaf stonden (melding Rick, 2 sep 2026).

    Beide maten komen van --bb-kaartrand: de bovenkant is die rand, en links is
    diezelfde rand plus de zoomknop (26 breed) en 8 ruimte ernaast. Ze stonden
    hier als 14 en 52 vast, afgestemd op een padding die nooit werkte, en zaten
    daardoor vier pixels hoger dan de plus en de min.
*/
.search-bar {
    position: absolute !important;
    left: calc(var(--bb-kaartrand) + 34px) !important;
    top: var(--bb-kaartrand) !important;
    display: flex !important;
    align-items: center !important;
    width: 400px;
    background: #fff;
    height: 30px !important;
    line-height: 30px !important;
}

.search-bar > div {
    display: flex;
    align-items: center;
    flex: 0 0 auto;
    height: 100%;
}

.search-bar form {
    left: auto !important;
    top: auto !important;
    z-index: 1 !important;
}

.search-bar input {
    width: 100%;
    height: 100% !important;
    padding: 0 10px 0 6px !important;
    line-height: normal;
    color: #374151;
    font-size: 13px;
}

.search-bar input::placeholder {
    color: #9CA3AF;
    opacity: 1;
}

.remove-point svg{
    display:inline !important;
}
@media (min-width: 768px) {
    .remove-point-mobile{
        display:none !important;
    }
}
@media (max-width: 768px) {
    .search-bar{
        width:calc(100vw - 100px)
    }
    #mapedit {
        height: 100vh!important;
        width:100vw;
        position:fixed;
        top:0;
        left:0;
        margin: 0;
    }
    .remove-point-desktop{
        display:none !important;
    }

    #tool-modal-content-wrapper {
        padding: 0 !important;
        width:100%;
        height:100%;
    }

    #tool-modal-content {
        right: auto !important;
        top: auto !important;
        bottom: 0 !important;
        left: 0 !important;
        transform: none !important;
        position: fixed !important;
        width: 100% !important;
        max-width: 100% !important;
        height: auto !important;
        max-height: min(70vh, 520px) !important;
        overflow: hidden !important;
        border-bottom-left-radius: 0 !important;
        border-bottom-right-radius: 0 !important;
    }

    #coords-wrapper ul{
        padding:5px 0;
    }

    .toggler {
        text-align: center;
        font-size: 41px;
    }

    .toggler .arrow-down-up {
        width: 100%;
        height: 50px;
        margin-top: -20px;
        padding-top: 20px;
    }

    .toggler .arrow-down-up svg{
        margin: 0 auto;
        zoom:150%;
        margin-top:5px;
    }

    /* Collapsed: only the chevron bar peeks; actions stay on the floating draw control */
    #tool-modal-content.collapsed-content {
        bottom: 0 !important;
        max-height: none !important;
        height: auto !important;
    }

    #tool-modal-content.collapsed-content #selected-areas {
        display: none !important;
    }

    #selected-areas-footer,
    #add-poly-wrapper {
        display: flex;
        flex-direction: column;
        align-items: stretch;
        width: 100%;
        gap: 10px;
    }

    #tool-modal .bb-map-tool-btn,
    #mobile-draw-button .bb-map-tool-btn {
        width: 100%;
        max-width: none;
        margin-top: 0;
    }

    #tool-modal .bb-map-tool-btn-confirm,
    #confirm-areas {
        width: 100%;
        max-width: none;
        margin-top: 0;
    }

    /* Floating draw control only while the sheet is collapsed */
    #mobile-draw-button {
        display: flex !important;
        flex-direction: column;
        gap: 10px;
        position: absolute;
        z-index: 999;
        left: 20px;
        right: 20px;
        bottom: calc(72px + env(safe-area-inset-bottom, 0px));
        width: auto;
        max-width: none;
    }

    #mobile-draw-button.toggled {
        display: none !important;
    }

    /* Expanded sheet: keep draw/confirm in the footer stack */
    #tool-modal-content:not(.collapsed-content) #add-poly-wrapper .add-poly {
        display: flex !important;
    }

    #tool-modal .remove-point-desktop {
        display: none !important;
    }

    #selected-areas-scroll {
        overflow-y: auto;
    }
}