/* battues.bambi.lu — public map of announced battues.
   Layout: map first. Desktop: map + 400px side panel. ≤ 900px: map on top (58vh), panel below. */

:root {
    --bt-forest: #1f2a1c;
    --bt-forest-2: #2e3d29;
    --bt-moss: #5b6b3a;
    --bt-paper: #faf8f3;
    --bt-card: #ffffff;
    --bt-ink: #1d1d1b;
    --bt-ink-2: #55524a;
    --bt-line: #e4dfd3;
    --bt-orange: #e8590c;
    --bt-u0: #d7301f;
    --bt-u1: #fc8d59;
    --bt-u2: #fdcc8a;
    --bt-u3: #fef0d9;
    --bt-ok: #2f7d32;
    --bt-warn: #b45309;
    --bt-bad: #b91c1c;
    --bt-accent: #2e3d29;
    --bt-kpi: #1f2a1c;
    --bt-hover: #efeadf;
    --bt-map-bg: #e9e6dc;
    --bt-float: #fffffff0;
    --bt-float-ink: #1d1d1b;
    --bt-muted: #777;
    --bt-ok-bg: #f2f8f1; --bt-ok-line: #cfe3cf;
    --bt-warn-bg: #fff8ef; --bt-warn-line: #f2d7b4;
    --bt-bad-bg: #fdf3f3; --bt-bad-line: #f1c4c4;
    --bt-trail: #ffd400;
    --bt-trail-casing: #3d2f00;
    --bt-radius: 10px;
    --bt-top: 64px;
    --bt-font: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    color-scheme: light;
}

/* ── Dark theme (default; html.bt-dark set server-side from the bt-theme cookie) ── */
html.bt-dark {
    --bt-forest: #0b0f09;
    --bt-moss: #a3b77c;
    --bt-paper: #12170f;
    --bt-card: #1a2117;
    --bt-ink: #e8e4d8;
    --bt-ink-2: #a8a391;
    --bt-line: #2d3828;
    --bt-accent: #5d7f45;
    --bt-kpi: #dfeacd;
    --bt-hover: #232c1f;
    --bt-map-bg: #1b2018;
    --bt-float: #1a2117f2;
    --bt-float-ink: #e8e4d8;
    --bt-muted: #9a9686;
    --bt-ok: #8fd18f; --bt-ok-bg: #132519; --bt-ok-line: #24452c;
    --bt-warn: #f0b46a; --bt-warn-bg: #291c0c; --bt-warn-line: #4b3415;
    --bt-bad: #f39191; --bt-bad-bg: #2a1414; --bt-bad-line: #542424;
    color-scheme: dark;
}

html, body.bt-body { margin: 0; height: 100%; background: var(--bt-paper); color: var(--bt-ink); font-family: var(--bt-font); }
body.bt-body { font-size: 15px; line-height: 1.4; }
.bt-skip { position: absolute; left: -9999px; }
.bt-skip:focus { left: 8px; top: 8px; z-index: 2000; background: var(--bt-card); color: var(--bt-ink); padding: 6px 10px; border-radius: 6px; }

/* ── Top bar ─────────────────────────────────────────────────────────── */
.bt-topbar {
    height: var(--bt-top); box-sizing: border-box; display: flex; align-items: center; justify-content: space-between;
    gap: 12px; padding: 0 16px; background: var(--bt-forest); color: #f3efe4;
    border-bottom: 3px solid var(--bt-orange);
}
.bt-brand { display: flex; align-items: center; gap: 12px; min-width: 0; }
.bt-brand-mark {
    width: 30px; height: 30px; flex: 0 0 30px; background: var(--bt-orange);
    clip-path: polygon(50% 4%, 98% 94%, 2% 94%);
}
.bt-brand > div { min-width: 0; }
.bt-title { font-size: 18px; margin: 0; font-weight: 700; letter-spacing: .2px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.bt-tools { flex: 0 0 auto; }
.bt-subtitle { margin: 0; font-size: 12.5px; color: #c9c2ae; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.bt-tools { display: flex; align-items: center; gap: 10px; }
.bt-theme-btn {
    width: 32px; height: 28px; display: grid; place-items: center; cursor: pointer; border-radius: 6px;
    background: transparent; color: #e7e1d1; border: 1px solid #56604e;
}
.bt-theme-btn:hover, .bt-theme-btn:focus-visible { border-color: var(--bt-orange); outline: none; }
.bt-theme-btn .bt-ico-sun { display: none; }
html.bt-dark .bt-theme-btn .bt-ico-sun { display: block; }
html.bt-dark .bt-theme-btn .bt-ico-moon { display: none; }
.bt-lang .ui-selectonebutton { display: flex; flex-wrap: nowrap; }
.bt-lang .ui-selectonebutton .ui-button { padding: 3px 9px; font-size: 12px; background: transparent !important; color: #e7e1d1 !important; border-color: #56604e !important; white-space: nowrap; }
.bt-lang .ui-selectonebutton .ui-button .ui-button-text { padding: 0; }
.bt-lang .ui-selectonebutton .ui-button.ui-state-active { background: var(--bt-orange) !important; border-color: var(--bt-orange) !important; color: #fff !important; }

/* ── Main grid ───────────────────────────────────────────────────────── */
.bt-main { display: grid; grid-template-columns: 1fr 400px; height: calc(100dvh - var(--bt-top)); }
.bt-map-wrap { position: relative; min-height: 0; }
.bt-map { position: absolute; inset: 0; background: var(--bt-map-bg); }
.bt-panel { overflow-y: auto; border-left: 1px solid var(--bt-line); background: var(--bt-paper); }
.bt-panel-form { padding: 14px 16px 24px; display: flex; flex-direction: column; gap: 14px; }

@media (max-width: 900px) {
    .bt-main { display: block; height: auto; }
    .bt-map-wrap { height: 58vh; height: 58dvh; }
    .bt-panel { border-left: 0; border-top: 1px solid var(--bt-line); overflow: visible; }
    .bt-subtitle { display: none; }
}
@media (max-width: 600px) {
    .bt-topbar { padding: 0 10px; gap: 8px; }
    .bt-tools { gap: 6px; }
    .bt-theme-btn { width: 28px; }
    .bt-lang .ui-selectonebutton .ui-button { padding: 3px 6px; font-size: 11px; }
    .bt-legend { font-size: 11px; line-height: 1.35; padding: 6px 8px; }
    .bt-legend-title { display: none; }
}
@media (max-width: 420px) {
    .bt-title { font-size: 15px; }
    .bt-brand-mark { width: 22px; height: 22px; flex-basis: 22px; }
    .bt-presets .ui-button { font-size: 12px; }
    .bt-picker label { white-space: normal; }
}

/* ── Status ──────────────────────────────────────────────────────────── */
.bt-status { font-size: 13px; padding: 8px 10px; border-radius: 8px; border: 1px solid; }
.bt-status-ok { color: var(--bt-ok); border-color: var(--bt-ok-line); background: var(--bt-ok-bg); }
.bt-status-warn { color: var(--bt-warn); border-color: var(--bt-warn-line); background: var(--bt-warn-bg); }
.bt-status-stale { color: var(--bt-bad); border-color: var(--bt-bad-line); background: var(--bt-bad-bg); font-weight: 600; }

/* ── Date window ─────────────────────────────────────────────────────── */
.bt-window { display: flex; flex-direction: column; gap: 10px; }
.bt-presets.ui-selectonebutton { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); }
.bt-presets .ui-button { padding: 8px 0 !important; font-size: 13.5px; white-space: nowrap; min-width: 0;
    background: var(--bt-card) !important; color: var(--bt-ink) !important; border-color: var(--bt-line) !important; }
.bt-presets .ui-button .ui-button-text { padding: 0 2px !important; overflow: hidden; text-overflow: ellipsis; }
.bt-presets .ui-button.ui-state-active { background: var(--bt-accent) !important; border-color: var(--bt-accent) !important; color: #fff !important; }
.bt-picker { display: flex; align-items: center; justify-content: space-between; gap: 10px; font-size: 13.5px; color: var(--bt-ink-2); }
.bt-picker label { white-space: nowrap; }
.bt-picker .ui-calendar { display: inline-flex; align-items: stretch; flex: 0 0 auto; }
.bt-picker .ui-calendar input.ui-inputfield { width: 118px; min-width: 0; padding: 6px 8px; font-size: 14px; }
.bt-picker .ui-calendar input.ui-inputfield { background: var(--bt-card); color: var(--bt-ink); border-color: var(--bt-line); }
.bt-picker .ui-datepicker-trigger.ui-button {
    background: var(--bt-accent) !important; border-color: var(--bt-accent) !important; color: #fff !important; }
.bt-picked input { border-color: var(--bt-accent) !important; box-shadow: 0 0 0 2px #5d7f4540; }

/* ── Summary ─────────────────────────────────────────────────────────── */
.bt-summary { background: var(--bt-card); border: 1px solid var(--bt-line); border-radius: var(--bt-radius); padding: 12px; }
.bt-summary-range { font-weight: 600; margin-bottom: 8px; }
.bt-summary-range::first-letter { text-transform: uppercase; }
.bt-kpis { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.bt-kpi { display: flex; flex-direction: column; }
.bt-kpi strong { font-size: 24px; line-height: 1.1; font-variant-numeric: tabular-nums; color: var(--bt-kpi); }
.bt-kpi span { font-size: 12px; color: var(--bt-ink-2); }

/* ── Lists ───────────────────────────────────────────────────────────── */
.bt-tabs.ui-tabs { padding: 0; border: 0; background: transparent; }
.bt-tabs .ui-tabs-nav { background: transparent !important; border: 0 !important; border-bottom: 1px solid var(--bt-line) !important; padding: 0; }
.bt-tabs .ui-tabs-nav li, .bt-tabs .ui-tabs-nav li.ui-state-hover { border-top: 0 !important; border-left: 0 !important; border-right: 0 !important; }
.bt-tabs .ui-tabs-nav li { background: transparent !important; }
.bt-tabs .ui-tabs-nav li a { color: var(--bt-ink-2) !important; }
.bt-tabs .ui-tabs-nav li.ui-state-active a { color: var(--bt-ink) !important; }
.bt-tabs .ui-tabs-panels, .bt-tabs .ui-tabs-panel { background: transparent !important; color: var(--bt-ink) !important; }
.bt-tabs .ui-tabs-nav li.ui-state-active { border-color: var(--bt-orange) !important; }
.bt-tabs .ui-tabs-panels { padding: 0; }
.bt-tabs .ui-tabs-panel { padding: 10px 0 0 !important; }
.bt-empty { color: var(--bt-ink-2); padding: 14px 4px; font-size: 14px; }
.bt-group { border-bottom: 1px solid var(--bt-line); }
.bt-group summary {
    display: flex; justify-content: space-between; align-items: center; cursor: pointer; list-style: none;
    padding: 10px 4px; font-weight: 600;
}
.bt-group summary::-webkit-details-marker { display: none; }
.bt-group summary::before { content: "▸"; color: var(--bt-moss); margin-right: 8px; transition: transform .15s; }
.bt-group[open] summary::before { transform: rotate(90deg); }
.bt-group-name { flex: 1; }
.bt-badge { background: var(--bt-accent); color: #fff; border-radius: 999px; font-size: 12px; padding: 1px 8px; font-variant-numeric: tabular-nums; }
.bt-items { list-style: none; margin: 0; padding: 0 0 8px; }
.bt-item {
    width: 100%; display: flex; align-items: center; gap: 10px; padding: 8px 6px; border: 0; background: transparent;
    font: inherit; color: inherit; text-align: left; cursor: pointer; border-radius: 6px;
}
.bt-item:hover, .bt-item:focus-visible { background: var(--bt-hover); outline: none; }
.bt-item-main { flex: 1; }
.bt-item-date { color: var(--bt-ink-2); font-size: 13px; font-variant-numeric: tabular-nums; white-space: nowrap; }
.bt-dot { width: 12px; height: 12px; border-radius: 3px; flex: 0 0 12px; border: 1px solid #00000033; }
.urg-0 .bt-dot { background: var(--bt-u0); }
.urg-1 .bt-dot { background: var(--bt-u1); }
.urg-2 .bt-dot { background: var(--bt-u2); }
.urg-3 .bt-dot { background: var(--bt-u3); }
.bt-trail { border-bottom: 1px solid var(--bt-line); }
.bt-trail-btn {
    width: 100%; display: block; text-align: left; padding: 9px 6px; border: 0; border-radius: 6px; cursor: pointer;
    background: transparent; color: inherit; font: inherit;
}
.bt-trail-btn:hover, .bt-trail-btn:focus-visible { background: var(--bt-hover); outline: none; }
.bt-trail-btn.bt-selected { background: var(--bt-hover); box-shadow: inset 3px 0 0 var(--bt-trail); }
.bt-trail-name { display: block; font-weight: 600; }
.bt-trail-meta { display: flex; flex-wrap: wrap; gap: 6px; font-size: 13px; color: var(--bt-ink-2); margin-top: 2px; }

.bt-trail-cat { font-size: 12px; color: var(--bt-moss); margin-top: 2px; }
.bt-trail-group .bt-items { padding-left: 4px; }
.bt-trail { list-style: none; }
.bt-trail-name::before {
    content: ""; display: inline-block; width: 14px; height: 4px; margin-right: 8px; vertical-align: middle;
    background: var(--bt-trail); border-radius: 2px; box-shadow: 0 0 0 1.5px var(--bt-trail-casing);
}
.bt-trail:last-child { border-bottom: 0; }

/* ── Disclaimer ──────────────────────────────────────────────────────── */
.bt-disclaimer { font-size: 12.5px; color: var(--bt-ink-2); border-top: 1px solid var(--bt-line); padding-top: 10px; }
.bt-disclaimer p { margin: 0 0 6px; }
.bt-disclaimer a { color: var(--bt-moss); }

/* ── Map controls & popups ───────────────────────────────────────────── */
.bt-legend {
    background: var(--bt-float); border-radius: 8px; padding: 8px 10px; font-size: 12px; line-height: 1.5;
    box-shadow: 0 1px 4px #0003; color: var(--bt-float-ink);
}
.bt-legend-title { font-weight: 700; margin-bottom: 2px; }
.bt-legend-row { display: flex; align-items: center; gap: 8px; }
.bt-legend-sw { width: 14px; height: 10px; border: 1.5px solid; border-radius: 2px; }
.bt-legend-line { width: 16px; height: 4px; background: var(--bt-trail); border-radius: 2px; box-shadow: 0 0 0 1.5px var(--bt-trail-casing); }
.bt-locate {
    width: 34px; height: 34px; display: grid; place-items: center; background: #fff; color: #333; cursor: pointer;
    border: 2px solid #0003; border-radius: 4px; background-clip: padding-box;
}
.bt-locate:hover { background: #f4f4f4; }
.bt-pop { font-family: var(--bt-font); font-size: 13px; min-width: 190px; }
.bt-pop + .bt-pop { border-top: 1px solid var(--bt-line); margin-top: 8px; padding-top: 8px; }
.bt-pop-trail .bt-pop-h::before {
    content: ""; display: inline-block; width: 14px; height: 4px; margin-right: 6px; vertical-align: middle;
    background: var(--bt-trail); border-radius: 2px; box-shadow: 0 0 0 1.5px var(--bt-trail-casing);
}
.bt-pop-h { font-weight: 700; font-size: 14px; margin-bottom: 4px; }
.bt-pop-lot .bt-pop-h::before { content: ""; display: inline-block; width: 10px; height: 10px; border-radius: 2px; margin-right: 6px; vertical-align: 0; }
.bt-pop-lot.urg-0 .bt-pop-h::before { background: var(--bt-u0); }
.bt-pop-lot.urg-1 .bt-pop-h::before { background: var(--bt-u1); }
.bt-pop-lot.urg-2 .bt-pop-h::before { background: var(--bt-u2); }
.bt-pop-lot.urg-3 .bt-pop-h::before { background: var(--bt-u3); border: 1px solid var(--bt-u1); }
.bt-pop-row { display: flex; justify-content: space-between; gap: 12px; }
.bt-pop-row span:first-child { color: var(--bt-muted); }
.bt-pop-row span:last-child { text-align: right; }
.bt-pop-cat { color: var(--bt-moss); font-size: 12px; margin-top: 2px; }
.bt-pop-link {
    margin-top: 6px; padding: 0; border: 0; background: none; cursor: pointer; font: inherit; font-size: 12.5px;
    font-weight: 600; color: var(--bt-moss); text-decoration: underline; text-underline-offset: 2px;
}
.bt-pop-link:hover { color: var(--bt-orange); }
.bt-trail-card { min-width: 230px; }
.bt-trail-card .bt-pop-h { font-size: 15px; }
.bt-trail-card .bt-pop-row { padding: 1px 0; }
.bt-pop-sub { margin-top: 8px; font-size: 12px; color: var(--bt-muted); }
.bt-pop-dates { font-size: 12px; line-height: 1.45; font-variant-numeric: tabular-nums; }
/* ── Trail card: elevation profile, downloads, QR ───────────────────── */
.bt-elev-stats { display: flex; flex-wrap: wrap; gap: 4px 12px; font-size: 12.5px; font-variant-numeric: tabular-nums; margin: 2px 0 4px; }
.bt-elev { min-height: 130px; }
.bt-elev svg { display: block; max-width: 100%; height: auto; touch-action: pan-y; }
.bt-elev svg text { font: 10px var(--bt-font); fill: var(--bt-muted); }
.bt-elev svg .g { stroke: var(--bt-line); stroke-width: 1; }
.bt-elev svg .a { fill: var(--bt-trail); fill-opacity: .22; }
.bt-elev svg .l { fill: none; stroke: #e0a800; stroke-width: 1.8; stroke-linejoin: round; }
html.bt-dark .bt-elev svg .l { stroke: var(--bt-trail); }
.bt-elev svg .cur { stroke: var(--bt-ink); stroke-width: 1; stroke-dasharray: 3 2; }
.bt-elev svg .cur-t { fill: var(--bt-ink); font-weight: 600; }
.bt-elev svg .hit { fill: transparent; cursor: crosshair; }
.bt-elev-src { font-size: 10.5px; color: var(--bt-muted); margin-top: 1px; }
.bt-elev-none { font-size: 12.5px; color: var(--bt-muted); padding: 8px 0; min-height: 0; }
.bt-trail-actions { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.bt-act {
    display: inline-flex; align-items: center; gap: 4px; padding: 5px 10px; border-radius: 6px; cursor: pointer;
    font: 600 12.5px var(--bt-font); text-decoration: none; color: var(--bt-ink) !important;
    background: var(--bt-hover); border: 1px solid var(--bt-line);
}
.bt-act:hover, .bt-act:focus-visible { border-color: var(--bt-trail); outline: none; }
.bt-alldates { margin-top: 8px; font-size: 12px; }
.bt-alldates summary { cursor: pointer; color: var(--bt-muted); }
.bt-alldates summary:hover { color: var(--bt-ink); }
.bt-alldates .bt-pop-dates { margin-top: 4px; }
.bt-qr { display: flex; gap: 12px; align-items: flex-start; margin-top: 10px; }
.bt-qr[hidden] { display: none; }
.bt-qr img { width: 148px; height: 148px; flex: 0 0 148px; background: #fff; border-radius: 6px; padding: 4px; box-sizing: border-box; }
.bt-qr-side { min-width: 0; display: flex; flex-direction: column; gap: 6px; font-size: 12px; }
.bt-qr-hint { color: var(--bt-ink-2); }
.bt-qr-link { color: var(--bt-moss) !important; word-break: break-all; }
.bt-qr-btns { display: flex; flex-wrap: wrap; gap: 6px; }
.bt-trail-popup .leaflet-popup-content { width: auto !important; min-width: 300px; }
@media (max-width: 420px) {
    .bt-qr img { width: 120px; height: 120px; flex-basis: 120px; }
}
.bt-sheet {
    position: absolute; left: 8px; right: 8px; bottom: 8px; z-index: 1000; max-height: 58%; overflow-y: auto;
    background: var(--bt-card); color: var(--bt-ink); border: 1px solid var(--bt-line); border-radius: 12px;
    box-shadow: 0 6px 24px #0006; padding: 12px 14px 10px;
}
.bt-sheet[hidden] { display: none; }
.bt-sheet .bt-trail-card { min-width: 0; padding-right: 22px; }
.bt-sheet-close {
    position: absolute; top: 6px; right: 8px; width: 28px; height: 28px; border: 0; border-radius: 6px; cursor: pointer;
    background: transparent; color: var(--bt-ink-2); font-size: 20px; line-height: 1;
}
.bt-sheet-close:hover { background: var(--bt-hover); }
.bt-sheet-open .bt-legend, .bt-sheet-open .leaflet-control-scale { display: none; }
.bt-pop-loading { padding: 4px 8px; color: #888; }
.leaflet-container { font-family: var(--bt-font); }

/* ── Dark: Leaflet chrome, darkened basemap, PrimeFaces date panel ───── */
html.bt-dark .bt-base-tiles { filter: invert(1) hue-rotate(180deg) brightness(.82) contrast(.92) saturate(.55); }
html.bt-dark .leaflet-container { background: var(--bt-map-bg); }
html.bt-dark .leaflet-bar a, html.bt-dark .bt-locate {
    background: var(--bt-card); color: var(--bt-ink); border-bottom-color: var(--bt-line); }
html.bt-dark .leaflet-bar a:hover, html.bt-dark .bt-locate:hover { background: var(--bt-hover); }
html.bt-dark .leaflet-bar, html.bt-dark .bt-locate { border-color: #0008; }
html.bt-dark .leaflet-control-layers { background: var(--bt-card); color: var(--bt-ink); border-color: #0008; }
html.bt-dark .leaflet-control-layers-toggle { filter: invert(1); }
html.bt-dark .leaflet-control-layers-separator { border-top-color: var(--bt-line); }
html.bt-dark .leaflet-popup-content-wrapper, html.bt-dark .leaflet-popup-tip { background: var(--bt-card); color: var(--bt-ink); }
html.bt-dark .leaflet-container a.leaflet-popup-close-button { color: var(--bt-ink-2); }
html.bt-dark .leaflet-control-attribution { background: #12170fcc; color: var(--bt-ink-2); }
html.bt-dark .leaflet-control-attribution a { color: var(--bt-moss); }
html.bt-dark .leaflet-control-scale-line { background: #12170fcc; color: var(--bt-ink); border-color: var(--bt-ink-2); }
html.bt-dark .ui-datepicker.ui-widget, html.bt-dark .ui-datepicker .ui-datepicker-header {
    background: var(--bt-card); color: var(--bt-ink); border-color: var(--bt-line); }
html.bt-dark .ui-datepicker td a, html.bt-dark .ui-datepicker td span,
html.bt-dark .ui-datepicker .ui-datepicker-title, html.bt-dark .ui-datepicker th,
html.bt-dark .ui-datepicker .ui-datepicker-prev, html.bt-dark .ui-datepicker .ui-datepicker-next { color: var(--bt-ink) !important; }
html.bt-dark .ui-datepicker td .ui-state-disabled, html.bt-dark .ui-datepicker td.ui-state-disabled span { color: #5c5a50 !important; }
html.bt-dark .ui-datepicker td a:hover { background: var(--bt-hover) !important; }
html.bt-dark .ui-datepicker td .ui-state-active { background: var(--bt-accent) !important; color: #fff !important; }
html.bt-dark .ui-datepicker .ui-datepicker-buttonbar { background: var(--bt-card); border-color: var(--bt-line); }