/* Map stretches nicely within container */
#map {
    width: 100%;
    height: 70vh; /* adjust as you like */
    border-radius: 8px;
    border: 1px solid rgba(0,0,0,0.12);
}

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

/* Drawer positioning helper (under app bar) */
.legend-under-appbar {
    position: fixed;
    top: 108px; /* below the AppBar */
    height: calc(100vh - 108px);
}

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

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

/* Screen legend overlay (also reused for print) */
.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%;
    }

/* Color chip beside legend name */
.chip-swatch {
    min-width: 18px;
    height: 18px;
    padding: 0 !important;
    margin-right: 6px;
    opacity: .5; /* semi-transparent as requested */
}

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

.print-only {
    display: none !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 */
    .mud-appbar,
    .mud-drawer,
    .mud-paper .mud-expansion-panels,
    .legend-toggle,
    .print-btn,
    .no-print {
        display: none !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;
    }

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

    /* Make the MAP itself the positioned ancestor so the legend hugs it */
    #map {
        position: relative !important;
        width: 7.25in !important;
        height: 7.75in !important; /* fits Letter-landscape with 0.5" 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;
    }

    /* Put the legend INSIDE the map’s printable box, bottom-right */
    .print-legend.print-only {
        position: absolute !important;
        top: 0.25in;
        right:0.25in;
        width: 2.75in;
        max-height: 6.2in;
        overflow: auto;
        background: #fff;
        border-radius: 8px;
        box-shadow: 0 1px 6px rgba(0,0,0,.15);
        padding: 10px 12px;
        z-index: 10;
        page-break-inside: avoid !important;
        break-inside: avoid !important;
    }

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