/* Map stretches nicely within container */
.leaflet-map {
    width: 100%;
    height: 100%;
    border-radius: 8px;
    border: 1px solid rgba(0,0,0,0.12);
}

/* The screen shell owns viewport sizing; only content panels can scroll. */
@media screen {
    html, body {
        height: 100%;
        overflow: hidden;
    }

    .map-layout {
        height: 100vh;
        height: 100dvh;
        overflow: hidden;
    }

    .map-layout > .mud-main-content {
        /* MudBlazor includes the dense app bar as padding inside this height. */
        height: 100%;
        min-width: 0;
        display: flex;
        flex-direction: column;
        overflow: auto;
    }

    .map-page {
        flex: 1;
        min-height: 0;
        min-width: 0;
    }

    .map-page-toolbar {
        flex: 0 0 auto;
        flex-wrap: wrap;
    }

    .map-site-name {
        flex: 1 1 16rem;
        min-width: 0;
        overflow-wrap: anywhere;
    }

    .map-site-actions {
        flex: 0 0 auto;
        flex-wrap: wrap;
        min-width: 0;
        max-width: 100%;
    }

    .map-page-tools {
        flex: 0 1 auto;
        min-height: 0;
        max-height: 40%;
        overflow: auto;
        overscroll-behavior: contain;
    }

    .map-print-scope {
        flex-basis: 0;
        min-height: 0;
        min-width: 0;
    }

    .map-drawer.mud-drawer {
        max-width: 100vw;
        overflow: hidden;
    }

    .map-drawer > .mud-drawer-content {
        flex: 1 1 auto;
        min-height: 0;
    }

    .map-drawer > .mud-drawer-content > :not(.map-drawer-body) {
        flex-shrink: 0;
    }

    .map-drawer-body {
        flex: 1 1 auto;
        min-height: 0;
        overflow: auto;
        overscroll-behavior: contain;
    }
}

@media screen and (max-width: 600px) {
    .map-appbar-edit .map-appbar-title {
        display: none;
    }

    .map-appbar-edit .map-appbar-brand {
        flex: 0 1 90px;
        min-width: 0;
    }

    .map-appbar-edit .map-appbar-brand img {
        max-width: 100%;
        margin-left: 0 !important;
        object-fit: contain;
    }

    .map-appbar-edit .mud-button-root {
        min-width: 0;
        padding-inline: 8px;
        white-space: nowrap;
    }
}

/* Emoji marker styling */
.emoji-marker__inner {
    font-size: 20px;
    line-height: 20px;
    text-align: center;
}

/* Palette items */
.drag-icon {
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    margin: .25rem .5rem .25rem 0;
    cursor: grab;
}

    .drag-icon:active {
        cursor: grabbing;
    }

.leaflet-popup-content .leaflet-delete-btn {
    display: inline-block;
    padding: .35rem .6rem;
    border: 1px solid #b71c1c;
    border-radius: 6px;
    background: #ffebee;
    color: #b71c1c;
    font-weight: 600;
    cursor: pointer;
}

    .leaflet-popup-content .leaflet-delete-btn:hover {
        filter: brightness(0.97);
    }

.MPNoWrap {
    overflow: hidden !important;
}

.mud-expand-panel .mud-expand-panel-content.mud-expand-panel-gutters {
    padding-left: 4px;
    padding-right: 4px;
}

/* Ensure the map container can host absolutely positioned children */
.map-wrapper,
.map-print-scope {
    position: relative;
}

/* Floating controls over the map */
.legend-toggle {
    position: absolute;
    left: 0;
    top: 50%;
    transform: translate(-40%, -50%);
    width: 48px;
    height: 96px;
    border-radius: 0 48px 48px 0;
    border: none;
    display: grid;
    place-items: center;
    cursor: pointer;
    z-index: 400;
    color: var(--mud-palette-primary-text, #fff);
    background: var(--mud-palette-primary);
    box-shadow: 0 4px 12px rgba(0,0,0,.25);
}

    .legend-toggle:hover {
        filter: brightness(0.95);
    }

    .legend-toggle .mud-icon-root {
        pointer-events: none;
    }

/* Make toggle smaller on narrow screens */
@media (max-width: 600px) {
    .legend-toggle {
        width: 36px;
        height: 72px;
        border-top-right-radius: 36px;
        border-bottom-right-radius: 36px;
    }
}

/* Toggling map labels visibility */
.labels-hidden .leaflet-tooltip {
    display: none !important;
}

/* Area tools are independent of the established symbol palette. */
.annotation-tools { padding: 10px 12px; margin-bottom: 8px; border: 1px solid var(--mud-palette-lines-default); border-radius: 8px; }
.annotation-tool-row, .annotation-drawing-help, .annotation-publication, .map-service-toolbar {
    display: flex; align-items: center; flex-wrap: wrap; gap: 8px;
}
.map-service-toolbar { margin-bottom: 10px; flex: 0 0 auto; }
.map-service-toolbar label { display: flex; align-items: center; gap: 8px; }
.annotation-tools button, .map-service-toolbar button {
    border: 1px solid var(--mud-palette-lines-default); border-radius: 5px; padding: 6px 10px;
    background: var(--mud-palette-surface); color: var(--mud-palette-text-primary); cursor: pointer;
    min-height: 34px; font: inherit;
}
.annotation-tools button[aria-pressed="true"] { background: var(--mud-palette-primary); color: var(--mud-palette-primary-text, #fff); }
.annotation-tools button:disabled { opacity: .45; cursor: default; }
.annotation-tools button:focus-visible, .annotation-legend-select:focus-visible, .map-service-toolbar button:focus-visible {
    outline: 2px solid var(--mud-palette-primary); outline-offset: 2px;
}
.annotation-tools input, .annotation-tools select, .annotation-tools textarea, .map-service-toolbar select, .map-service-toolbar input {
    padding: 5px 8px; border: 1px solid var(--mud-palette-lines-default); border-radius: 5px;
    background: var(--mud-palette-surface); color: var(--mud-palette-text-primary); font: inherit; min-width: 0;
}
.annotation-tools input[type="color"] { min-height: 34px; width: 60px; padding: 2px; }
.annotation-properties { margin: 10px 0; }
.annotation-properties summary { cursor: pointer; padding: 4px 0; }
.annotation-fields { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 10px; margin: 8px 0; }
.annotation-fields label { display: flex; flex-direction: column; gap: 4px; }
.annotation-notes-field { grid-column: span 2; }
.annotation-help { font-size: 12px; color: var(--mud-palette-text-secondary); }
.annotation-publication { font-size: 13px; }
.annotation-drawing-help { margin-top: 8px; padding: 6px 0; }
.annotation-error { color: var(--mud-palette-error); margin-top: 6px; }
.map-share-link { flex: 1 1 300px; }
.map-share-link input { flex: 1; width: 100%; }
.annotation-legend-row { display: flex; align-items: center; gap: 6px; margin: 3px 0; }
.annotation-swatch { display: inline-block; width: 16px; height: 16px; flex: 0 0 16px; opacity: .65; border-radius: 3px; }
.annotation-legend-select { flex: 1; text-align: left; color: inherit; background: transparent; border: 0; cursor: pointer; padding: 6px 2px; overflow-wrap: anywhere; }
.annotation-legend-select span { display: block; font-size: 12px; color: var(--mud-palette-text-secondary); }
.map-annotation-label { width: auto !important; height: auto !important; overflow: visible; background: transparent; border: 0; }
.map-annotation-label__text { transform: translate(-50%, -50%); width: max-content; min-width: 60px; max-width: 220px;
    padding: 5px 8px; border: 2px solid #475569; border-radius: 5px; background: #fff; color: #111827;
    box-shadow: 0 1px 4px #0003; font: 600 12px/1.35 system-ui, sans-serif; white-space: normal; overflow-wrap: anywhere; }
.map-annotation-callout .map-annotation-label__text { min-width: 100px; padding: 8px 10px; }
.map-annotation-selected .map-annotation-label__text { outline: 2px solid #fff; box-shadow: 0 0 0 4px #2563eb; }
.map-annotation-handle { border: 2px solid #2563eb; border-radius: 50%; background: #fff; }
.leaflet-marker-icon.map-annotation-anchor { border: 2px solid #fff; border-radius: 50%; background: #475569; box-shadow: 0 0 0 1px #475569; }
.map-annotation-drawing, .map-annotation-drawing .leaflet-interactive { cursor: crosshair; }
/* Drawing is a temporary interaction mode; saved label and layer preferences stay intact. */
.map-annotation-drawing .leaflet-tooltip,
.map-annotation-drawing .leaflet-popup,
.map-annotation-drawing .map-annotation-label,
.map-annotation-drawing .map-annotation-leader { display: none !important; }
.map-annotation-drawing .leaflet-interactive,
.map-annotation-drawing .leaflet-marker-icon { pointer-events: none !important; outline: none !important; }
.map-annotation-drawing .map-polygon-close-target {
    pointer-events: auto !important; cursor: crosshair; background: transparent; border: 0;
    display: grid; place-items: center;
}
.map-polygon-close-dot {
    width: 12px; height: 12px; border: 2px solid #fff; border-radius: 50%;
    background: #2563eb; box-shadow: 0 0 0 1px #1e40af;
}
.map-polygon-close-target[aria-disabled="false"] { cursor: pointer; }
.map-polygon-close-target[aria-disabled="false"] .map-polygon-close-dot { background: #15803d; box-shadow: 0 0 0 2px #fff, 0 0 0 3px #15803d; }
.map-annotation-drawing .map-polygon-close-target:focus-visible { outline: 2px solid #2563eb !important; outline-offset: -4px; border-radius: 50%; }
.print-annotation-row { margin: 7px 0; break-inside: avoid; overflow-wrap: anywhere; }
@media (max-width: 600px) {
    .annotation-fields { grid-template-columns: 1fr 1fr; }
    .annotation-notes-field { grid-column: 1 / -1; }
    .map-service-toolbar label { flex-wrap: wrap; }
    .annotation-tool-row button { min-height: 40px; }
    .annotation-tools { padding: 8px; }
}

/* Floating print button */
.print-btn {
    position: absolute;
    right: 16px;
    top: 16px;
    width: 44px;
    height: 44px;
    border-radius: 9999px;
    border: none;
    background: white;
    box-shadow: 0 2px 10px rgba(0,0,0,.15);
    display: grid;
    place-items: center;
    cursor: pointer;
    z-index: 401;
}

/* Printed site title and measurements. */
.print-legend {
    position: absolute;
    right: 16px;
    bottom: 16px;
    width: 380px;
    max-width: calc(100% - 32px);
    background: white;
    border-radius: 8px;
    box-shadow: 0 2px 12px rgba(0,0,0,.2);
    padding: 12px 14px;
    z-index: 10;
    font: 12px/1.4 system-ui, -apple-system, Segoe UI, Roboto, sans-serif;
    color: #111;
}

.print-legend__header {
    margin-bottom: 6px;
}

.print-title {
    font-weight: 600;
    font-size: 14px;
}

.print-subtitle {
    color: #666;
    font-size: 12px;
}

.print-legend__table {
    width: 100%;
    border-collapse: collapse;
}

    .print-legend__table th,
    .print-legend__table td {
        padding: 6px 4px;
        border-bottom: 1px solid #eee;
        vertical-align: middle;
    }

    .print-legend__table .num {
        text-align: right;
        width: 40%;
    }

/* SVG swatches remain printable when the browser omits background colors. */
.chip-swatch {
    display: inline-block;
    width: 18px;
    min-width: 18px;
    height: 18px;
    margin-right: 6px;
    vertical-align: middle;
    opacity: .5; /* semi-transparent as requested */
    -webkit-print-color-adjust: exact;
    print-color-adjust: exact;
}

/* Hide/show helpers */
.no-print {
    display: initial;
}

.print-only {
    display: none !important;
}

/* Prepare the exact paper dimensions before Leaflet fits bounds and loads tiles. */
.map-print-scope.is-printing {
    display: block !important;
    flex: 0 0 auto !important;
    width: 10.5in !important;
    min-width: 10.5in !important;
    max-width: none !important;
    height: auto !important;
    min-height: 7.75in !important;
    margin: 0 !important;
    padding: 0 !important;
    overflow: visible !important;
}

.map-print-scope.is-printing > .leaflet-map {
    float: right;
    width: 7.5in !important;
    height: 7.75in !important;
}

.map-print-scope.is-printing::after {
    content: "";
    display: block;
    clear: both;
}

.map-print-scope.is-printing > .print-legend {
    display: block !important;
    position: static !important;
    width: 2.75in;
    max-width: none;
    max-height: none;
    margin: 0;
    padding: 10px 12px;
    overflow: visible;
    overflow-wrap: anywhere;
}

.map-print-scope.is-printing > .legend-toggle,
.map-print-scope.is-printing .map-annotation-handle,
.map-print-scope.is-printing .map-annotation-preview,
.map-print-scope.is-printing .map-polygon-close-target,
.map-print-scope.is-printing .print-btn,
.map-print-scope.is-printing .leaflet-control:not(.leaflet-control-attribution) {
    display: none !important;
}

.map-print-scope.is-printing .map-annotation-selected .map-annotation-label__text {
    outline: none; box-shadow: 0 1px 4px #0003;
}
.map-print-scope.is-printing .map-annotation-drawing:not(.labels-hidden) .leaflet-tooltip,
.map-print-scope.is-printing .map-annotation-drawing .map-annotation-label,
.map-print-scope.is-printing .map-annotation-drawing .map-annotation-leader { display: block !important; }

/* ===================== PRINT RULES ===================== */
@media print {

    /* Hard reset so nothing consumes a first page */
    html, body {
        margin: 0 !important;
        padding: 0 !important;
        height: auto !important;
    }

    /* Hide global chrome */
    .map-annotation-handle,
    .map-annotation-preview,
    .map-polygon-close-target,
    .mud-appbar,
    .mud-drawer,
    .mud-paper .mud-expansion-panels,
    .legend-toggle,
    .print-btn,
    .map-print-scope .leaflet-control:not(.leaflet-control-attribution),
    .no-print {
        display: none !important;
    }

    .map-annotation-selected .map-annotation-label__text {
        outline: none; box-shadow: 0 1px 4px #0003;
    }
    .map-annotation-drawing:not(.labels-hidden) .leaflet-tooltip,
    .map-annotation-drawing .map-annotation-label,
    .map-annotation-drawing .map-annotation-leader { display: block !important; }

    /* Kill MudBlazor width limits & padding so the map can span the page */
    .mud-layout,
    .mud-main-content,
    .mud-container,
    .mud-container-maxwidth-false,
    .mud-container-root,
    .mud-paper {
        padding: 0 !important;
        margin: 0 !important;
        width: 100% !important;
        max-width: none !important;
        height: auto !important;
        box-sizing: border-box !important;
    }

    .mud-container > :not(.map-print-scope) {
        display: none !important;
    }

    .map-page {
        display: block !important;
    }

    /* Ensure your wrapper participates in layout and anchors children */
    .map-print-scope {
        display: block !important;
        flex: 0 0 auto !important;
        position: relative !important;
        width: 10.5in !important;
        min-width: 10.5in !important;
        max-width: none !important;
        min-height: 7.75in !important;
        overflow: visible !important;
        page-break-before: avoid !important;
        page-break-after: avoid !important;
        break-before: avoid !important;
        break-after: avoid !important;
    }

    /* The complete property occupies the right side of the landscape page. */
    .leaflet-map {
        float: right;
        position: relative !important;
        width: 7.5in !important;
        height: 7.75in !important; /* Letter landscape has 8in available inside .25in margins. */
        page-break-inside: avoid !important;
        break-inside: avoid !important;
        background: #f8f8f8 !important; /* Leaflet canvas background */
    }

    /* Keep Leaflet background decent on paper */
    .leaflet-container {
        background: #f8f8f8 !important;
    }

    .print-only {
        display: block !important;
    }

    .map-print-scope::after {
        content: "";
        display: block;
        clear: both;
    }

    /* The left legend stays in document flow and can continue onto later pages. */
    .print-legend.print-only {
        position: static !important;
        margin: 0;
        width: 2.75in;
        max-width: none;
        max-height: none;
        overflow: visible;
        overflow-wrap: anywhere;
        background: #fff;
        border-radius: 8px;
        box-shadow: 0 1px 6px rgba(0,0,0,.15);
        padding: 10px 12px;
        z-index: 10;
        page-break-inside: auto !important;
        break-inside: auto !important;
    }

    .print-legend__table tr {
        break-inside: avoid;
    }

    /* Hide non-print UI */
    .mud-appbar,
    .mud-drawer,
    .mud-paper .mud-expansion-panels,
    .legend-toggle,
    .print-btn,
    .no-print {
        display: none !important;
    }

    @page {
        size: Letter landscape;
        margin: 0.25in;
    }
}

/* Map-first navigation and workspace. The canvas owns all remaining height. */
.map-layout > .map-header {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    align-items: center;
    gap: 20px;
    min-height: 60px;
    padding: 8px 16px;
    background: var(--mud-palette-primary, #0F2150);
    color: var(--mud-palette-primary-text, #fff);
    z-index: 1100;
    box-shadow: 0 1px 5px #0002;
}
.map-header-brand, .map-header-context, .map-header-actions {
    display: flex;
    align-items: center;
    gap: 10px;
    min-width: 0;
}
.map-header-brand { gap: 12px; }
.map-header-brand .map-appbar-brand { display: flex; align-items: center; }
.map-header-brand img { width: 106px; object-fit: contain; }
.map-header-brand .map-appbar-title { font-size: 20px; font-weight: 600; }
.map-header-actions { justify-self: end; grid-column: 3; }
.map-service-select { display: flex; align-items: center; gap: 8px; font-size: 13px; font-weight: 600; min-width: 0; }
.map-service-select select {
    min-height: 40px;
    min-width: 0;
    width: 190px;
    max-width: 100%;
    padding: 6px 28px 6px 10px;
    border: 1px solid #ffffff70;
    border-radius: 6px;
    background: #ffffff18;
    color: inherit;
    font: inherit;
}
.map-service-select select option { background: #fff; color: #1e293b; }
.map-header-button, .map-small-button, .map-copy-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    min-height: 40px;
    padding: 6px 12px;
    border: 1px solid transparent;
    border-radius: 6px;
    background: transparent;
    color: inherit;
    font: inherit;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    white-space: nowrap;
}
.map-header-button:hover { background: #ffffff20; }
.map-header-button:disabled, .map-service-select select:disabled { opacity: .6; cursor: default; }
.map-header-button:focus-visible, .map-service-select select:focus-visible, .map-header-more button:focus-visible {
    outline: 2px solid #fff; outline-offset: 2px;
}
.map-edit-button { border-color: #ffffff90; }
.map-save-button { background: #ffffff18; border-color: #ffffff50; }
.map-save-button.is-dirty { background: #fff3cd; color: #684500; border-color: #ffe69c; }
.map-save-button.has-error { background: #fff1f2; color: #9f1239; border-color: #fecdd3; }
.map-header-more > .mud-button-root { min-height: 40px; padding: 6px 8px; text-transform: none; font-size: 14px; }
.map-account-email { padding: 10px 16px; max-width: min(320px, 90vw); overflow-wrap: anywhere; color: var(--mud-palette-text-secondary); font-size: 12px; }
.map-account-email strong { color: var(--mud-palette-text-primary); font-weight: 500; }
.map-share-control { position: relative; }
.map-header-dismiss { position: fixed; inset: 0; border: 0; background: transparent; cursor: default; z-index: 1; }
.map-share-popover {
    position: absolute;
    top: calc(100% + 10px);
    right: 0;
    z-index: 2;
    width: 330px;
    max-width: calc(100vw - 24px);
    padding: 16px;
    border: 1px solid var(--mud-palette-lines-default);
    border-radius: 10px;
    background: var(--mud-palette-surface, #fff);
    color: var(--mud-palette-text-primary, #172033);
    box-shadow: 0 8px 28px #0003;
}
.map-share-heading { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.map-share-popover p { margin: 8px 0 12px; color: var(--mud-palette-text-secondary); font-size: 13px; line-height: 1.5; }
.map-share-popover label { display: block; font-size: 12px; font-weight: 600; }
.map-share-popover input { margin: 4px 0 12px; width: 100%; padding: 9px; border: 1px solid var(--mud-palette-lines-default); border-radius: 5px; color: inherit; background: transparent; font: inherit; font-size: 13px; }
.map-small-button { min-width: 36px; min-height: 36px; padding: 4px; }
.map-copy-button { background: var(--mud-palette-primary); color: var(--mud-palette-primary-text, #fff); }
.map-share-feedback { display: block; margin-top: 8px; font-size: 12px; }
.map-copy-button:focus-visible, .map-small-button:focus-visible, .map-share-popover input:focus-visible { outline: 2px solid var(--mud-palette-primary); outline-offset: 2px; }

@media screen {
    .map-layout { display: flex; flex-direction: column; }
    .map-layout > .map-header { flex: 0 0 auto; }
    .map-layout > .map-main-content {
        flex: 1 1 0;
        height: auto;
        min-height: 0;
        padding: 0 !important;
        margin: 0;
        overflow: hidden;
    }
    .map-page { display: flex; flex-direction: column; height: 100%; padding: 0 !important; }
    .map-context-strip {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 10px;
        flex: 0 0 auto;
        min-height: 40px;
        max-height: 72px;
        padding: 7px 16px;
        border-bottom: 1px solid var(--mud-palette-lines-default);
        overflow: auto;
        background: var(--mud-palette-surface);
        font-size: 14px;
    }
    .map-context-strip .map-site-name { flex-basis: auto; }
    .map-context-strip .mud-typography { font-size: inherit; line-height: 1.35; }
    .map-context-meta, .map-editing-identity { color: var(--mud-palette-text-secondary); font-size: 12px; overflow-wrap: anywhere; }
    .map-mode-label { flex: 0 0 auto; color: var(--mud-palette-text-secondary); font-size: 12px; }
    .map-status-region { flex: 0 1 auto; max-height: 25%; overflow: auto; overscroll-behavior: contain; }
    .map-status-region > .mud-alert { margin: 6px 12px !important; }
    .map-workspace { display: flex; flex: 1 1 0; min-height: 0; min-width: 0; position: relative; overflow: hidden; }
    .map-tool-rail {
        display: flex;
        flex-direction: column;
        flex: 0 0 74px;
        gap: 4px;
        padding: 10px 6px;
        border-right: 1px solid var(--mud-palette-lines-default);
        background: var(--mud-palette-surface);
        z-index: 500;
        overflow-y: auto;
        overscroll-behavior: contain;
    }
    .map-tool-rail button {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: 4px;
        flex: 0 0 auto;
        min-height: 56px;
        min-width: 0;
        padding: 8px 3px;
        border: 1px solid transparent;
        border-radius: 7px;
        color: var(--mud-palette-text-secondary);
        background: transparent;
        font: inherit;
        font-size: 11px;
        line-height: 1.2;
        cursor: pointer;
    }
    .map-tool-rail button:hover { background: var(--mud-palette-action-default-hover); }
    .map-tool-rail button[aria-pressed="true"], .map-tool-rail button.is-active, .map-tool-rail button.active {
        color: var(--mud-palette-primary);
        background: var(--mud-palette-primary-hover, #ede9fe);
        border-color: var(--mud-palette-primary);
    }
    .map-tool-rail button:disabled { opacity: .45; cursor: default; }
    .map-tool-rail button:focus-visible, .map-symbol-grid button:focus-visible, .map-active-tool button:focus-visible {
        outline: 2px solid var(--mud-palette-primary); outline-offset: -2px;
    }
    .map-tool-panel {
        display: flex;
        flex-direction: column;
        flex: 0 0 310px;
        min-width: 0;
        min-height: 0;
        max-width: 36vw;
        padding: 14px;
        border-right: 1px solid var(--mud-palette-lines-default);
        background: var(--mud-palette-surface);
        overflow: hidden;
        overscroll-behavior: contain;
        z-index: 499;
    }
    .map-tool-panel[hidden], .map-tool-panel [hidden] { display: none !important; }
    .map-tool-panel-body { flex: 1 1 auto; min-height: 0; overflow: auto; overscroll-behavior: contain; }
    .map-tool-panel-header, .map-panel-header { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 12px; flex: 0 0 auto; }
    .map-tool-panel-header h2, .map-panel-header h2 { font-size: 16px; margin: 0; font-weight: 600; }
    .map-tool-panel-header button, .map-panel-header button { min-width: 40px; min-height: 40px; border: 0; border-radius: 5px; background: transparent; color: inherit; cursor: pointer; }
    .map-panel-description, .map-tool-help { color: var(--mud-palette-text-secondary); font-size: 13px; line-height: 1.5; margin: 0 0 12px; }
    .map-canvas, .map-workspace > .map-print-scope { flex: 1 1 0; min-width: 0; min-height: 0; position: relative; }
    .map-canvas { display: flex; flex-direction: column; }
    .map-canvas > .map-print-scope { flex: 1 1 0; }
    .map-workspace .leaflet-map { border: 0; border-radius: 0; }
    .map-active-tool {
        position: absolute;
        box-sizing: border-box;
        left: 12px;
        right: auto;
        bottom: 24px;
        z-index: 500;
        width: fit-content;
        max-width: min(380px, calc(100% - 24px));
        margin-inline: 0;
        padding: 8px 10px;
        border: 1px solid var(--mud-palette-lines-default);
        border-radius: 8px;
        box-shadow: 0 3px 12px #0003;
        background: var(--mud-palette-surface);
        color: var(--mud-palette-text-primary);
        font-size: 13px;
    }
    .map-active-tool, .annotation-drawing-controls { display: grid; gap: 6px; }
    .annotation-drawing-actions { display: flex; align-items: center; flex-wrap: wrap; gap: 6px; }
    .map-active-tool button, .annotation-drawing-controls button { min-height: 36px; padding: 5px 8px; border: 1px solid var(--mud-palette-lines-default); border-radius: 5px; background: var(--mud-palette-surface); color: inherit; font: inherit; cursor: pointer; }
    .map-active-tool button:disabled { opacity: .45; cursor: default; }
    .annotation-point-count { display: inline-block; color: var(--mud-palette-text-secondary); margin-left: 4px; font-size: 11px; }
    .map-active-tool .annotation-finish-alternative { border-color: transparent; text-decoration: underline; text-underline-offset: 3px; }
    .map-symbol-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
    .map-symbol-grid .drag-icon {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: 5px;
        width: 100%;
        min-width: 0;
        min-height: 82px;
        margin: 0;
        padding: 9px 6px;
        border: 1px solid var(--mud-palette-lines-default);
        border-radius: 7px;
        background: var(--mud-palette-surface);
        color: var(--mud-palette-text-primary);
        font: inherit;
        font-size: 12px;
        line-height: 1.3;
        text-align: center;
        cursor: pointer;
    }
    .map-symbol-grid .drag-icon:hover, .map-symbol-grid .drag-icon[aria-pressed="true"] { border-color: var(--mud-palette-primary); background: var(--mud-palette-primary-hover, #f1eeff); }
    .map-symbol-grid .drag-icon > :first-child { font-size: 26px; line-height: 1.2; }
    .map-tool-panel .annotation-tools { border: 0; margin: 0; padding: 0; }
    .map-tool-panel .annotation-fields { grid-template-columns: minmax(0, 1fr); }
    .map-tool-panel .annotation-notes-field { grid-column: auto; }
    .map-tool-panel .annotation-tool-row { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .map-tool-panel .annotation-tool-row button { min-height: 42px; }
    .map-tool-panel .annotation-fields input, .map-tool-panel .annotation-fields select, .map-tool-panel .annotation-fields textarea { width: 100%; min-height: 40px; }
    .map-tool-panel .annotation-fields input[type="color"] { width: 64px; }
    .map-tool-panel .annotation-publication { align-items: stretch; flex-direction: column; }
    .annotation-primary-action { background: var(--mud-palette-primary) !important; color: var(--mud-palette-primary-text, #fff) !important; }
    .annotation-repeat { margin-top: 16px; padding-top: 12px; border-top: 1px solid var(--mud-palette-lines-default); }
    .annotation-tools .annotation-add-another { width: 100%; min-height: 44px; border-color: var(--mud-palette-primary); color: var(--mud-palette-primary); }
    .annotation-tools .annotation-add-another:hover:not(:disabled) { background: var(--mud-palette-primary-hover, #ede9fe); }
    .annotation-repeat .annotation-help { margin: 6px 0 0; }
    .annotation-secondary-settings { margin: 12px 0; }
    .annotation-history { display: flex; flex-wrap: wrap; gap: 6px; padding-top: 12px; margin-top: 12px; border-top: 1px solid var(--mud-palette-lines-default); }
    .map-layers-panel { min-width: 0; }
    .map-layers-panel .map-drawer-body { overflow: visible; }
    .map-layers-panel .mud-table-cell { padding: 8px 3px; font-size: 12px; }
    .map-layers-panel .mud-table-cell .mud-typography { font-size: 12px; overflow-wrap: anywhere; }
    .map-layers-panel .mud-table-cell .mud-stack { gap: 2px; }
    .map-layers-panel .mud-table-container { overflow-x: auto; }
}

/* Large touch targets leave the visible geometry handles small. */
.map-annotation-handle-hitbox, .leaflet-marker-icon.map-annotation-anchor-hitbox { background: transparent; border: 0; box-shadow: none; }
.map-annotation-handle-dot, .map-annotation-anchor-dot {
    position: absolute;
    width: 12px;
    height: 12px;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    border: 2px solid #2563eb;
    border-radius: 50%;
    background: #fff;
    pointer-events: none;
}
.map-annotation-anchor-dot { border-color: #fff; background: #475569; box-shadow: 0 0 0 1px #475569; }

/* Sign-in keeps the map context visible and uses the browser's focus trap. */
.map-access-dialog {
    width: min(440px, calc(100vw - 32px));
    max-width: none;
    max-height: calc(var(--map-access-viewport-height, 100dvh) - 32px);
    top: calc(var(--map-access-viewport-top, 0px) + var(--map-access-viewport-height, 100dvh) / 2);
    bottom: auto;
    transform: translateY(-50%);
    padding: 0;
    margin: 0 auto;
    border: 0;
    border-radius: 12px;
    background: var(--mud-palette-surface, #fff);
    color: var(--mud-palette-text-primary, #172033);
    box-shadow: 0 16px 64px #0005;
    overflow: hidden;
}
.map-access-dialog[open] { display: flex; flex-direction: column; }
.map-access-dialog::backdrop { background: #14203a80; }
.map-access-dialog__body { padding: 24px; min-height: 0; overflow-y: auto; overscroll-behavior: contain; }
.map-access-dialog__actions { display: flex; justify-content: flex-end; flex: 0 0 auto; border-top: 1px solid var(--mud-palette-lines-default); padding: 12px 20px; }
.map-access-dialog__actions button { min-height: 44px; }
.map-access-form { min-width: 0; }

@media screen and (max-width: 760px) {
    .map-layout > .map-header { grid-template-columns: minmax(0, 1fr) auto; gap: 6px 12px; padding: 6px 10px; }
    .map-header-brand { gap: 8px; }
    .map-header-brand img { width: 83px; height: 29px; }
    .map-header-brand .map-appbar-title { font-size: 17px; }
    .map-header-actions { grid-column: 2; grid-row: 1; gap: 3px; }
    .map-header-context { grid-column: 1 / -1; grid-row: 2; justify-content: space-between; gap: 12px; }
    .map-service-select { flex: 1 1 auto; gap: 8px; }
    .map-service-select select { width: 100%; min-height: 36px; }
    .map-header-button { padding: 6px 8px; font-size: 13px; gap: 5px; }
    .map-header-more > .mud-button-root { font-size: 13px; padding: 6px; min-width: 0; }
    .map-share-popover { left: auto; right: 0; }
    .map-context-strip { padding: 6px 10px; min-height: 36px; font-size: 12px; max-height: 62px; }
    .map-context-meta, .map-editing-identity { display: none; }
    .map-workspace:has(.map-tool-rail) { padding-bottom: calc(66px + env(safe-area-inset-bottom)); }
    .map-tool-rail {
        position: absolute;
        bottom: 0;
        left: 0;
        right: 0;
        flex-direction: row;
        justify-content: center;
        gap: 4px;
        height: calc(66px + env(safe-area-inset-bottom));
        padding: 4px 6px calc(4px + env(safe-area-inset-bottom));
        border-right: 0;
        border-top: 1px solid var(--mud-palette-lines-default);
        overflow-x: auto;
        overflow-y: hidden;
        z-index: 502;
    }
    .map-tool-rail button { flex: 1 0 48px; min-height: 56px; max-width: 90px; padding: 5px 3px; }
    .map-tool-panel {
        position: absolute;
        left: 0;
        right: 0;
        bottom: calc(66px + env(safe-area-inset-bottom));
        max-width: none;
        max-height: 40%;
        padding: 10px 14px 14px;
        border-right: 0;
        border-top: 1px solid var(--mud-palette-lines-default);
        border-radius: 14px 14px 0 0;
        box-shadow: 0 -4px 20px #0002;
        z-index: 501;
    }
    .map-tool-panel-header, .map-panel-header { margin-bottom: 6px; }
    .map-symbol-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .map-symbol-grid .drag-icon { min-height: 74px; }
    .map-active-tool { bottom: 24px; padding: 7px 9px; font-size: 12px; }
    .map-active-tool button { min-height: 44px; }
}
@media screen and (max-width: 600px) {
    .map-access-dialog { width: 100%; height: var(--map-access-viewport-height, 100dvh); max-height: var(--map-access-viewport-height, 100dvh); top: var(--map-access-viewport-top, 0px); transform: none; margin: 0; border-radius: 0; }
    .map-access-dialog__body { flex: 1 1 auto; padding: 24px 20px; }
    .map-access-dialog__actions { padding-bottom: max(12px, env(safe-area-inset-bottom)); }
}
@media screen and (max-width: 350px) {
    .map-header-brand .map-appbar-title { display: none; }
    .map-header-button { font-size: 12px; }
    .map-save-button .mud-icon-root { display: none; }
    .map-symbol-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media screen and (max-height: 450px) and (min-width: 761px) {
    .map-layout > .map-header { min-height: 48px; padding-block: 4px; }
    .map-tool-rail { padding-block: 4px; gap: 0; }
    .map-tool-rail button { min-height: 44px; }
}

@media print {
    .map-header, .map-tool-rail, .map-tool-panel, .map-active-tool, .map-context-strip, .map-status-region, .map-access-dialog { display: none !important; }
    .mud-container > .map-workspace, .map-workspace, .map-canvas { display: block !important; padding: 0 !important; height: auto !important; overflow: visible !important; }
    .map-annotation-handle-hitbox, .map-annotation-anchor-hitbox { display: none !important; }
}
.map-print-scope.is-printing .map-active-tool,
.map-print-scope.is-printing .map-annotation-handle-hitbox,
.map-print-scope.is-printing .map-annotation-anchor-hitbox { display: none !important; }

/* Drawing history stays reachable even while tool panels are closed. */
.map-history {
    position: absolute;
    top: 10px;
    left: 64px;
    z-index: 500;
    display: flex;
    flex-wrap: wrap;
    gap: 5px;
    width: fit-content;
    max-width: calc(100% - 74px);
    padding: 4px;
    border: 1px solid var(--mud-palette-lines-default);
    border-radius: 7px;
    background: var(--mud-palette-surface);
    box-shadow: 0 2px 8px #0002;
}
.map-history button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 4px;
    min-height: 36px;
    padding: 6px 9px;
    border: 1px solid transparent;
    border-radius: 4px;
    background: transparent;
    color: var(--mud-palette-text-primary);
    font: inherit;
    font-size: 12px;
    cursor: pointer;
}
.map-history button .mud-icon-root { width: 18px; height: 18px; }
.map-history button:hover:not(:disabled) { background: var(--mud-palette-action-default-hover); }
.map-history button:disabled { color: var(--mud-palette-text-disabled); cursor: default; }
.map-history button:focus-visible { outline: 2px solid var(--mud-palette-primary); outline-offset: -2px; }
.map-symbol-placement, .map-symbol-placement .leaflet-interactive { cursor: crosshair; }
.annotation-drawing-controls > .annotation-drawing-help { margin: 0; padding: 0; }
@media screen and (max-width: 760px) {
    .map-history { padding: 3px; gap: 2px; }
    .map-history button { min-height: 40px; padding: 5px 7px; font-size: 11px; }
}
@media print {
    .map-history { display: none !important; }
}
.map-print-scope.is-printing .map-history { display: none !important; }