/* On-map POI category legends - ONE BOX PER POI FILE.
   Created by assets/manifold/js/POI/poi_legend.js as children of #leafmap but OUTSIDE
   .leaflet-control-container, so the easyPrint PNG download captures them while the printer
   hides the real Leaflet controls. Each box is positioned inline (left/bottom, measured from
   the container's bottom edge), so nothing here sets a position of its own.
   Only the header controls and the resize grip take pointer events; the rest of a box lets
   map panning pass through. The body is the exception - it has to receive the wheel to scroll
   the rows - and the script stops that wheel from reaching the map's zoom.
   Class names are deliberately distinct from .react-poi-category-legend (the React Mapping
   Centre's equivalent, assets/react/styles/Modules/MappingCentre/PoiCategoryLegend.css) so the
   two pages can be maintained in parallel without either stylesheet winning by accident. */
.poi-map-legend {
    position: absolute;
    /* Above Leaflet's panes, which carry their own z-index (the overlay pane is 400, the marker
       pane 600). Without an explicit one the box is z-index:auto and paints BEHIND them - it is
       in the DOM, and it measures correctly, so only looking at the map shows it is missing. */
    z-index: 1000;
    display: flex;
    flex-direction: column;
    background: #fff;
    border: 1px solid #999;
    border-radius: 3px;
    padding: 4px 8px 6px;
    max-width: 220px;
    /* The default height: as tall as the rows need, up to this. Dragging the resize grip sets
       an explicit height and lifts this cap (the script does both), which is how a file with
       many categories can be made to fit the printed map. */
    max-height: 40vh;
    box-shadow: 0 1px 5px rgba(0, 0, 0, 0.4);
    font-size: 12px;
    color: #333;
    pointer-events: none;
    user-select: none;
    /* Rows are one line each and their text is ellipsised, so there is nothing to scroll to
       sideways - clip rather than let a stray pixel of overflow put a horizontal scrollbar on
       the box or on the map container under it. */
    overflow: hidden;
}

.poi-map-legend .poi-map-legend-header {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    gap: 6px;
    margin-bottom: 2px;
}

.poi-map-legend .poi-map-legend-handle {
    pointer-events: auto;
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 16px;
    height: 16px;
    padding: 0;
    border: 1px solid #bbb;
    border-radius: 3px;
    background: #f5f5f5;
    color: #555;
    font-size: 11px;
    line-height: 1;
    cursor: move;
    touch-action: none;
}
.poi-map-legend .poi-map-legend-handle:hover {
    background: #e8e8e8;
}

.poi-map-legend .poi-map-legend-title {
    font-weight: bold;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    /* Let the title shrink so a long file name cannot push the buttons past the box's max-width.
       A flex item will not shrink below its content without min-width:0, and the ellipsis above
       only engages once it is allowed to. */
    flex: 1 1 auto;
    min-width: 0;
}

/* This file's own counts on/off, and hiding the box. Same size and shape so the header reads as
   one row of controls. */
.poi-map-legend .poi-map-legend-count-toggle,
.poi-map-legend .poi-map-legend-close {
    pointer-events: auto;
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 16px;
    height: 16px;
    padding: 0;
    border: 1px solid #bbb;
    border-radius: 3px;
    background: #f5f5f5;
    color: #555;
    font-size: 11px;
    line-height: 1;
    cursor: pointer;
}
.poi-map-legend .poi-map-legend-count-toggle {
    font-size: 9px;
}
.poi-map-legend .poi-map-legend-count-toggle:hover,
.poi-map-legend .poi-map-legend-close:hover {
    background: #e8e8e8;
}
/* Counts off: dimmed, like the Pin Category table's eye when a category is switched off. */
.poi-map-legend .poi-map-legend-count-toggle.poi-map-legend-toggle-off {
    color: #ccc;
    background: #fafafa;
}

/* The scrolling part, and the only part that takes pointer events besides the header: scrolling
   has to happen over the rows themselves. The listener that keeps the wheel away from the map is
   bound in the script. */
.poi-map-legend .poi-map-legend-body {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    overflow-x: hidden;
    pointer-events: auto;
    /* Keep the rows out from under the corner grip: the right inset clears it horizontally, and
       the bottom one keeps the last row clear of it when the box is scrolled to the end. */
    padding-right: 8px;
    padding-bottom: 14px;

    /* No scrollbar until the pointer is over the box: a permanently visible one would be
       captured into the downloaded map image and, on a short legend, costs width for nothing. */
    scrollbar-width: none;
}
.poi-map-legend .poi-map-legend-body::-webkit-scrollbar {
    width: 0;
    height: 0;
}
.poi-map-legend:hover .poi-map-legend-body {
    scrollbar-width: thin;
}
.poi-map-legend:hover .poi-map-legend-body::-webkit-scrollbar {
    width: 10px;
}
.poi-map-legend:hover .poi-map-legend-body::-webkit-scrollbar-thumb {
    background: #bbb;
    border-radius: 5px;
}

.poi-map-legend .poi-map-legend-row {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 2px 0;
    border-bottom: 1px solid gainsboro;
    white-space: nowrap;
}
.poi-map-legend .poi-map-legend-row:last-child {
    border-bottom: none;
}

/* The category's icon, and the button around it that puts the category's points on screen. The
   image is sized to match the sidebar's marker image (poi_tables_actions.js). */
.poi-map-legend .poi-map-legend-icon-button {
    pointer-events: auto;
    flex: 0 0 auto;
    display: inline-flex;
    padding: 0;
    border: none;
    background: none;
    line-height: 0;
    cursor: pointer;
}
.poi-map-legend .poi-map-legend-icon-button:hover {
    opacity: 0.65;
}

.poi-map-legend .poi-map-legend-icon {
    flex: 0 0 auto;
    width: 14px;
    height: 21px;
}

.poi-map-legend .poi-map-legend-name {
    flex: 1 1 auto;
    /* A flex item will not shrink below its content without this, so a long category name would
       push the row wider than the box and shove the count out of sight. */
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.poi-map-legend .poi-map-legend-count {
    flex: 0 0 auto;
    color: #888;
    margin-left: 2px;
}

.poi-map-legend .poi-map-legend-more {
    color: #888;
    font-style: italic;
    padding: 3px 0 0;
}

/* The resize grip: the corner triangle drawn as evenly spaced LINES, in the box's bottom-right
   corner.
   A 135deg gradient runs corner to corner, and its colour-stop lines are parallel to the OTHER
   diagonal - the triangle's hypotenuse. Bands at 50%, 62.5%, 75% and 87.5% of that axis therefore
   land on the hypotenuse and on three lines inside the triangle, each ending on the box's right and
   bottom edges. (Why those stops: a stop at fraction p crosses the square at (16p, 16p), so the chord
   from there to the two edges has legs of 32(1-p) - 16, 12, 8 and 4px, a step that halves each time.
   Stepping by a CONSTANT 12.5% of the axis is what makes the gaps between the lines equal; spacing
   the stops the other way (50/75/87.5) made the outer gap twice the inner one.)
   No clip-path: the element stays hittable as a whole square, which is a bigger target than the
   painted lines, and the empty top-left half keeps a press in the corner off the rows behind. */
.poi-map-legend .poi-map-legend-resize {
    pointer-events: auto;
    position: absolute;
    right: 0;
    bottom: 0;
    z-index: 1;
    width: 16px;
    height: 16px;
    padding: 0;
    border: none;
    background-color: transparent;
    background-image: linear-gradient(135deg,
        transparent 0 calc(50% - 0.5px),
        #a0a0a0 calc(50% - 0.5px) calc(50% + 0.5px),
        transparent calc(50% + 0.5px) calc(62.5% - 0.5px),
        #a0a0a0 calc(62.5% - 0.5px) calc(62.5% + 0.5px),
        transparent calc(62.5% + 0.5px) calc(75% - 0.5px),
        #a0a0a0 calc(75% - 0.5px) calc(75% + 0.5px),
        transparent calc(75% + 0.5px) calc(87.5% - 0.5px),
        #a0a0a0 calc(87.5% - 0.5px) calc(87.5% + 0.5px),
        transparent calc(87.5% + 0.5px));
    cursor: nwse-resize;
    touch-action: none;
}
.poi-map-legend .poi-map-legend-resize:hover {
    background-image: linear-gradient(135deg,
        transparent 0 calc(50% - 0.5px),
        #5a5a5a calc(50% - 0.5px) calc(50% + 0.5px),
        transparent calc(50% + 0.5px) calc(62.5% - 0.5px),
        #5a5a5a calc(62.5% - 0.5px) calc(62.5% + 0.5px),
        transparent calc(62.5% + 0.5px) calc(75% - 0.5px),
        #5a5a5a calc(75% - 0.5px) calc(75% + 0.5px),
        transparent calc(75% + 0.5px) calc(87.5% - 0.5px),
        #5a5a5a calc(87.5% - 0.5px) calc(87.5% + 0.5px),
        transparent calc(87.5% + 0.5px));
}