/*
Template: shhh
Theme Name: Patriot Shhh
Description: Thème enfant de Shhh pour des personnalisations.
Author: FP
Version: 1.0
*/
/* ==========================================================================
   style.css : CSS
   ========================================================================== */
/* ==========================================================================
   Généralités et styles de base
   ========================================================================== */

#latitude,
#longitude {
    display: none;
}

:root {
  --cc-font-sans: var(--bop-font-sans, "Inter", system-ui, sans-serif);
  --cc-text: var(--bop-theme-text, #0f172a);
  --cc-surface: var(--bop-theme-surface, #ffffff);
  --cc-surface-soft: var(--bop-theme-surface-alt, #f8fafc);
  --cc-border-soft: var(--bop-theme-border, rgba(15, 23, 42, 0.08));
  --cc-shadow-sm: var(--bop-shadow-sm, 0 6px 16px rgba(15, 23, 42, 0.08));
  --cc-shadow-md: var(--bop-shadow-md, 0 12px 30px rgba(15, 23, 42, 0.08));
  --cc-shadow-lg: var(--bop-shadow-lg, 0 18px 40px rgba(15, 23, 42, 0.14));
  --cc-radius-sm: var(--bop-radius-sm, 8px);
  --cc-radius-md: var(--bop-radius-md, 10px);
  --cc-radius-lg: var(--bop-radius-xl, 16px);
  --cc-radius-pill: var(--bop-radius-pill, 999px);
  --cc-primary: var(--bop-color-blue-brand, #0b57d0);
  --cc-primary-strong: var(--bop-color-blue-700, #1d4ed8);
  --cc-success: var(--bop-color-success-600, #16a34a);
  --cc-danger: var(--bop-color-danger-600, #dc2626);
  --cc-danger-strong: var(--bop-color-danger-700, #b91c1c);
  --cc-map-bg: var(--bop-theme-map-bg, #e9edf2);
  --cc-overlay: rgba(15, 23, 42, 0.52);
}

/* ==========================================================================
   Styles pour la carte Panneaux
   ========================================================================== */
/* Notification toast animée */
#notification {
  position: fixed;
  top: 18px;
  left: 50%;
  transform: translateX(-50%) translateY(0);
  padding: 10px 18px;
  z-index: 10000;
  border-radius: var(--cc-radius-pill);
  color: var(--cc-text);
  font-weight: 600;
  font-size: 16px;
  border: 1px solid var(--cc-border-soft);
  background: rgba(255, 255, 255, 0.78);
  backdrop-filter: blur(12px);
  box-shadow: var(--cc-shadow-lg);
  pointer-events: auto;
  max-width: min(92%, 640px);
  text-align: left;
  overflow: hidden;
  display: flex;
  gap: 12px;
  align-items: center;
  justify-content: flex-start;
  opacity: 1;
  transition: opacity 260ms ease, transform 260ms ease;
}

/* icon wrapper */
#notification .notif-icon {
  width: 20px;
  height: 20px;
  flex: 0 0 20px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

/* success / error backgrounds */
#notification::before {
  content: '';
  width: 12px;
  height: 12px;
  border-radius: 999px;
  background: var(--cc-success);
  box-shadow: 0 0 0 4px rgba(22, 163, 74, 0.18);
}
#notification.error::before {
  background: var(--cc-danger);
  box-shadow: 0 0 0 4px rgba(239, 68, 68, 0.18);
}

/* entrance animation */
#notification.is-hidden {
  display: flex !important;
  opacity: 0;
  transform: translateX(-50%) translateY(-6px);
  pointer-events: none;
}

/* confetti simple (container) */
#confetti-container {
  position: fixed;
  pointer-events: none;
  top: 0; left: 0; right: 0; bottom: 0;
  z-index: 11000;
  overflow: visible;
}
.confetti {
  position: absolute;
  width: 8px;
  height: 12px;
  opacity: 0.95;
  will-change: transform, opacity;
  border-radius: 2px;
}

.mapboxgl-ctrl-group {
    display: flex;
    flex-direction: column;
    gap: 5px;
    padding: 5px;
}

.mapboxgl-ctrl-group button {
    background-color: #fff;
    border: none;
    border-radius: 4px;
    padding: 8px;
    font-size: 16px;
    cursor: pointer;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
    transition: background-color 0.2s;
}

.mapboxgl-ctrl-group button:hover {
    background-color: #f0f0f0;
}

.mapboxgl-ctrl-group button:active {
    background-color: #e0e0e0;
}

.mapboxgl-ctrl-group button .mapboxgl-ctrl-icon {
    font-weight: bold; /* Makes text-based icons (e.g., ✚) bolder */
}

.mapboxgl-ctrl-group button svg {
    stroke-width: 2.5; /* Increases boldness of SVG icons */
    filter: brightness(0.8); /* Slight darkening for contrast */
}

/* ... (reste du CSS existant) ... */

/* Styles pour la carte Panneaux */

.panneaux-container {
    position: relative;
    width: 100%;
    max-width: 100vw;
    margin: 0 auto;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    overflow: hidden;
}

#map {
    position: relative;
    height: 600px;
    width: 100%;
    background: var(--cc-map-bg);
    box-shadow: inset 0 0 10px rgba(0, 0, 0, 0.05);
}

.add-panel-window {
    position: absolute;
    bottom: 14px;
    left: 50%;
    transform: translateX(-50%);
    background: rgba(255, 255, 255, 0.96);
    padding: 8px 10px;
    border-radius: var(--cc-radius-sm);
    box-shadow: var(--cc-shadow-md);
    text-align: center;
    z-index: 1000;
    width: auto;
    min-width: 240px;
    white-space: nowrap;
}

.window-text {
    font-size: 12px;
}

.add-panel-window strong {
    font-weight: bold;
}

.add-panel-window .button-container {
    display: flex;
    justify-content: center;
    margin-top: 6px;
}

.add-panel-window button {
    font-size: 12px;
    padding: 6px 12px;
    margin: 0 5px;
    flex: none;
}

.rn-blue-button {
    background-color: var(--cc-primary);
    color: var(--cc-surface);
    border: none;
    padding: 8px 15px;
    border-radius: var(--cc-radius-xs, 6px);
    font-size: 16px;
    font-family: var(--cc-font-sans);
    cursor: pointer;
    transition: background-color 0.3s, transform 0.2s, box-shadow 0.2s;
    box-shadow: var(--cc-shadow-sm);
    text-decoration: none;
    display: inline-block;
    text-align: center;
    width: auto;
}

.rn-blue-button:hover {
    background-color: var(--cc-primary-strong);
    transform: translateY(-2px);
    box-shadow: var(--cc-shadow-md);
}

.rn-blue-button:active {
    background-color: #001A4D;
    transform: translateY(0);
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.rn-blue-button:disabled {
    background-color: #666;
    cursor: not-allowed;
    opacity: 0.6;
}

.rn-red-button {
    background-color: var(--cc-danger);
    color: var(--cc-surface);
    border: none;
    border-radius: var(--cc-radius-sm);
    cursor: pointer;
}

html[data-bop-theme] #notification,
html[data-bop-theme] .mapboxgl-ctrl-group button,
html[data-bop-theme] .add-panel-window,
html[data-bop-theme] .panneaux-modal,
html[data-bop-theme] .modal-content,
html[data-bop-theme] #date-filter-modal,
html[data-bop-theme] .bop-shell .bop-modal__panel,
html[data-bop-theme] .bop-shell #navigation-modal .modal-content,
html[data-bop-theme] .bop-shell #navigation-modal .bop-modal__panel,
html[data-bop-theme] .bop-shell #add-panel-window,
html[data-bop-theme] .bop-shell .bop-overlay,
html[data-bop-theme] .bop-shell .bop-geocoder .mapboxgl-ctrl-geocoder,
html[data-bop-theme] .bop-shell .bop-geocoder .mapboxgl-ctrl-geocoder input {
    background: var(--cc-surface) !important;
    color: var(--cc-text) !important;
    border-color: var(--cc-border-soft) !important;
    box-shadow: var(--cc-shadow-md) !important;
}

html[data-bop-theme] .mapboxgl-ctrl-group button:hover,
html[data-bop-theme] .mapboxgl-ctrl-group button:active,
html[data-bop-theme] .suggestion-item:hover,
html[data-bop-theme] .bop-shell #navigation-modal .nav-button:hover,
html[data-bop-theme] .bop-shell #navigation-modal .panel-nav__btn:hover {
    background: var(--cc-surface-soft) !important;
}

html[data-bop-theme] .window-text,
html[data-bop-theme] .modal-content,
html[data-bop-theme] #date-filter-modal label,
html[data-bop-theme] .bop-shell #navigation-modal .modal-subtle,
html[data-bop-theme] .bop-shell #navigation-modal .panel-detail,
html[data-bop-theme] .bop-shell #navigation-modal .undefined {
    color: var(--cc-text) !important;
}

html[data-bop-theme] .rn-blue-button,
html[data-bop-theme] .bop-shell #add-panel-window .bop-btn--primary,
html[data-bop-theme] .bop-shell #navigation-modal .button.button-primary,
html[data-bop-theme] .bop-shell #navigation-modal .bop-btn--primary {
    background: var(--cc-primary) !important;
    color: var(--bop-color-white, #ffffff) !important;
    border-color: var(--cc-primary) !important;
}

html[data-bop-theme] .bop-shell .bop-modal__backdrop,
html[data-bop-theme] .panneaux-modal,
html[data-bop-theme] .bop-modal__backdrop {
    background: var(--cc-overlay) !important;
}

.rn-red-button:hover {
    background-color: var(--cc-danger-strong);
}

.panneaux-modal {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.5);
    z-index: 2000;
}

.modal-content {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background: var(--cc-surface);
    padding: 20px;
    border-radius: var(--cc-radius-md); /* Rounded borders for the modal */
    text-align: center;
    min-width: 300px;
    opacity: 0; /* Start hidden for animation */
    transform: translate(-50%, -50%) scale(0.95); /* Start slightly zoomed out */
    transition: opacity 0.3s ease, transform 0.3s ease; /* Smooth transition */
}

@media (min-width: 768px) {
    #edit-section {
        display: flex;
        flex-wrap: wrap;
    }
    #edit-section label {
        flex: 1 0 40%;
        margin-right: 10px;
    }
    #edit-section select, #edit-section input {
        flex: 1 0 50%;
    }
}

.modal-content.visible {
    opacity: 1; /* Fade in */
    transform: translate(-50%, -50%) scale(1); /* Zoom in to normal size */
}

.modal-content #close-navigation-modal {
    position: absolute;
    top: 10px;
    right: 10px;
    font-size: 20px;
    cursor: pointer;
}

.navigation-buttons {
    display: flex;
    justify-content: center;
    margin-top: 10px;
}

.nav-button {
    color: white;
    border: none;
    padding: 10px 15px;
    font-size: 14px;
    cursor: pointer;
    border-radius: 0;
    transition: background-color 0.2s;
    display: flex;
    align-items: center;
}

.nav-button:first-child {
    border-radius: 10px 0 0 10px;
}

.nav-button:last-child {
    border-radius: 0 10px 10px 0;
}

.nav-logo {
    width: 16px;
    height: 16px;
}

#nav-waze.nav-button {
    background-color: #f90; /* Waze orange */
}

#nav-waze.nav-button .nav-logo {
    filter: brightness(0) invert(1); /* Changes non-white Waze logo to white */
}

#nav-waze.nav-button:hover {
    background-color: #e67e00; /* Darker orange */
}

#nav-google.nav-button {
    background-color: #4285f4; /* Google Maps blue */
}

#nav-google.nav-button:hover {
    background-color: #3267d6; /* Darker blue */
}

#nav-mappy.nav-button {
    background-color: #00a550; /* Mappy green (approximate) */
}

#nav-mappy.nav-button:hover {
    background-color: #00843f; /* Darker green */
}

#nav-apple.nav-button {
    background-color: #000; /* Apple black */
}

#nav-apple.nav-button:hover {
    background-color: #333; /* Darker black */
}

/* ==========================================================================
   Styles pour les nouveaux boutons d'action
   ========================================================================== */

.action-buttons {
    display: flex;
    justify-content: center;
    gap: 10px;
    margin-top: 15px;
    flex-wrap: wrap;
}

.action-button {
    padding: 10px 20px;
    font-size: 14px;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    transition: background-color 0.2s;
}

.action-button.green {
    background-color: #28a745; /* Vert */
    color: white;
}

.action-button.green:hover {
    background-color: #218838; /* Vert plus foncé */
}

.action-button.red {
    background-color: #dc3545; /* Rouge */
    color: white;
}

.action-button.red:hover {
    background-color: #c82333; /* Rouge plus foncé */
}
.action-button.orange {
    background-color: #f97316;
    color: #fff;
}
.action-button.orange:hover {
    background-color: #ea580c;
}

/* ==========================================================================
   Styles pour la carte et ses contrôles
   ========================================================================== */

/* Commenté pour éviter les conflits avec les nouvelles icônes personnalisées */
/* .leaflet-marker-icon.own-action-marker {
    filter: hue-rotate(120deg);
} */

#map:fullscreen {
    width: 100vw !important;
    height: 100vh !important;
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    z-index: 1000 !important;
}

.leaflet-control-search-button {
    margin-top: 10px;
}

.leaflet-control-search {
    margin-top: 10px;
    transition: opacity 0.3s;
}

.search-input {
    font-size: 14px;
    padding-left: 30px;
    background-color: #e0e0e0;
    transition: opacity 0.3s;
    width: 200px;
}

.search-suggestions {
    top: 100%;
    left: 0;
    transition: opacity 0.3s, max-height 0.3s;
}

.suggestion-item {
    padding: 5px;
    cursor: pointer;
}

.suggestion-item:hover {
    background-color: #f0f0f0;
}

.leaflet-control-custom button {
    font-size: 16px;
    font-family: Arial, sans-serif;
    width: 30px;
    height: 30px;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: #fff;
    border: 2px solid rgba(0, 0, 0, 0.2);
    border-radius: 4px;
    cursor: pointer;
    transition: background-color 0.2s;
}

.leaflet-control-custom button:hover {
    background-color: #f4f4f4;
}

.leaflet-control-custom button:focus {
    outline: none;
    box-shadow: 0 0 0 2px rgba(0, 0, 255, 0.3);
}

/* ==========================================================================
   Styles pour les sélecteurs de mode
   ========================================================================== */

#map-mode-selector,
#commune-mode-selector {
    margin-bottom: 10px;
    display: flex;
    gap: 10px;
    align-items: center;
    flex-wrap: wrap;
    justify-content: center; /* Centre les éléments */
}

#map-mode-selector label,
#commune-mode-selector label {
    display: flex;
    align-items: center;
    padding: 8px 15px;
    background-color: #0033A0;
    color: #FFFFFF;
    border-radius: 6px;
    cursor: pointer;
    transition: background-color 0.3s, transform 0.2s, box-shadow 0.2s;
    font-size: 16px;
    font-family: Arial, sans-serif;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
    width: auto; /* Largeur naturelle comme .rn-blue-button */
    text-align: center;
    white-space: nowrap; /* Empêche le texte de casser */
    justify-content: center;
}

#map-mode-selector input[type="radio"],
#commune-mode-selector input[type="radio"] {
    display: none;
}

#map-mode-selector input[type="radio"]:checked + label,
#commune-mode-selector input[type="radio"]:checked + label {
    background-color: #001A4D;
    transform: translateY(-2px);
    box-shadow: 0 6px 8px rgba(0, 0, 0, 0.15);
}

#map-mode-selector label:hover,
#commune-mode-selector label:hover {
    background-color: #002680;
    transform: translateY(-2px);
    box-shadow: 0 6px 8px rgba(0, 0, 0, 0.15);
}

#map-mode-selector label:active,
#commune-mode-selector label:active {
    background-color: #001A4D;
    transform: translateY(0);
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

#commune-mode-selector {
    display: none;
}

/* Ajustements responsives pour 100% de largeur sur mobile */
@media (max-width: 768px) {
    #map-mode-selector label,
    #commune-mode-selector label {
        width: 100%; /* Largeur de 100% sur mobile */
        box-sizing: border-box; /* Inclut padding dans la largeur */
        margin-bottom: 5px; /* Espacement vertical entre les labels */
    }
    #map-mode-selector,
    #commune-mode-selector {
        flex-direction: column; /* Empile les éléments en colonne sur mobile */
        align-items: stretch; /* Étire les éléments pour remplir la largeur */
    }
}

/* ==========================================================================
   Styles pour la légende
   ========================================================================== */

#legend {
    background: white;
    padding: 10px;
    border: 1px solid #ccc;
    border-radius: 5px;
    font-family: Arial, sans-serif;
    font-size: 14px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

#legend h4 {
    margin: 0 0 10px 0;
    color: #0033A0;
    font-size: 16px;
}

#legend .legend-color {
    display: inline-block;
    width: 20px;
    height: 20px;
    margin-right: 8px;
    vertical-align: middle;
    border: 1px solid #666;
    border-radius: 3px;
}

/* ==========================================================================
   Styles pour les boutons
   ========================================================================== */

.rn-blue-button {
    background-color: #0033A0;
    color: #FFFFFF;
    border: none;
    padding: 8px 15px;
    border-radius: 6px;
    font-size: 16px;
    font-family: Arial, sans-serif;
    cursor: pointer;
    transition: background-color 0.3s, transform 0.2s, box-shadow 0.2s;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
    text-decoration: none;
    display: inline-block;
    text-align: center;
    width: auto;
}

.rn-blue-button:hover {
    background-color: #002680;
    transform: translateY(-2px);
    box-shadow: 0 6px 8px rgba(0, 0, 0, 0.15);
}

.rn-blue-button:active {
    background-color: #001A4D;
    transform: translateY(0);
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.rn-blue-button:disabled {
    background-color: #666;
    cursor: not-allowed;
    opacity: 0.6;
}

/* Styles spécifiques pour les boutons dans le tableau */
.edit-action,
.delete-action,
.copy-action-btn {
    padding: 4px 8px;
    margin-right: 5px;
    font-size: 12px;
}

/* ==========================================================================
   Styles pour le modal de filtre de date
   ========================================================================== */

#date-filter-modal {
    display: none;
    position: fixed;
    top: 10px;
    right: 10px;
    width: 250px;
    background-color: white;
    padding: 15px;
    border: 1px solid #ccc;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
    z-index: 1000;
}

#date-filter-modal h3 {
    margin: 0 0 10px 0;
    font-size: 16px;
}

#date-filter-modal label {
    display: block;
    margin-bottom: 5px;
    font-size: 14px;
}

#date-filter-modal input[type="date"] {
    width: 100%;
    padding: 5px;
    margin-bottom: 10px;
    font-size: 14px;
}

#date-filter-modal button {
    padding: 6px 12px;
    font-size: 14px;
    cursor: pointer;
}

#date-filter-modal .modal-buttons {
    text-align: right;
}

#close-date-filter {
    position: absolute;
    top: 5px;
    right: 5px;
    background: none;
    border: none;
    font-size: 14px;
    cursor: pointer;
    color: #333;
}

#close-date-filter:hover {
    color: #f00;
}

/* ==========================================================================
   Styles pour le conteneur du tableau
   ========================================================================== */

#actions-table-container {
    display: none;
    margin-top: 20px;
}

/* ==========================================================================
   Styles pour le formulaire
   ========================================================================== */

#action-militante-form {
    max-height: 0;
    opacity: 0;
    overflow: hidden;
    transition: max-height 0.3s ease, opacity 0.3s ease;
}

#action-militante-form.active {
    max-height: 1000px; /* Ajuste selon la hauteur maximale nécessaire */
    opacity: 1;
}

#action-militante-form textarea {
    width: 90%;
    height: 20%;
}

/* ==========================================================================
   Styles pour la section d'aide
   ========================================================================== */

.help-section {
    display: none;
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.5s ease, opacity 0.5s ease;
    opacity: 0;
    margin-top: 20px;
    padding: 15px;
    background-color: #f9f9f9;
    border: 1px solid #ddd;
    border-radius: 5px;
    text-align: left;
}

.help-section.active {
    display: block;
    max-height: 500px;
    opacity: 1;
}

.help-section h3 {
    margin-top: 0;
    color: #0033A0;
}

.help-section ol {
    padding-left: 20px;
}

.help-section li {
    margin-bottom: 10px;
}

.help-section em {
    color: #666;
}

/* Styles pour la bulle d'aide */
#help-text {
    display: none;
    position: absolute;
    bottom: 100%; /* Positionne au-dessus du bouton */
    left: 50%;
    transform: translateX(-50%);
    background: #fff;
    padding: 10px;
    border-radius: 5px;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
    font-size: 12px;
    color: #333;
    z-index: 1000;
    width: 200px;
    text-align: center;
    opacity: 0;
    transition: opacity 0.3s ease;
}

#help-text:after {
    content: '';
    position: absolute;
    top: -10px; /* Ajuste pour aligner avec le haut de la bulle */
    left: 50%;
    transform: translateX(-50%);
    border-width: 0 10px 10px 10px;
    border-style: solid;
    border-color: #fff transparent transparent transparent; /* Flèche pointant vers le haut */
}

/* Ajustement du conteneur pour que la bulle soit positionnée correctement */
.right-panel {
    position: relative;
    padding-left: 24px;
    padding-right: 24px;
}

/* ==========================================================================
   Styles responsives
   ========================================================================== */

@media (max-width: 768px) {
    #map {
        height: 400px;
        width: 100%;
    }
    #date-filter-modal {
        width: 200px;
        padding: 10px;
    }
    #date-filter-modal input[type="date"] {
        font-size: 12px;
    }
    #date-filter-modal button {
        padding: 4px 8px;
        font-size: 12px;
    }
    .leaflet-control-custom button {
        width: 25px;
        height: 25px;
        font-size: 14px;
    }
    .rn-blue-button {
        padding: 8px 15px;
        width: auto;
    }
    .mapboxgl-ctrl-top-left {
        width: 50%; /* Adjusted search bar container width for mobile */
    }
}

/* ==========================================================================
   Styles pour les conteneurs de boutons
   ========================================================================== */

.action-buttons {
    display: flex;
    justify-content: center;
    gap: 10px;
    margin-top: 10px;
}

/* ==========================================================================
   Styles pour les pages d'approbation et de refus
   ========================================================================== */

.nav-tab-wrapper {
    margin-bottom: 20px;
}

.nav-tab {
    padding: 10px 20px;
}

.tab-content {
    padding: 20px;
    border: 1px solid #ccc;
}

.approbation-page .wp-list-table th {
    background-color: #f5f5f5;
    padding: 10px;
}

.approbation-page .wp-list-table td {
    padding: 10px;
    vertical-align: middle;
}

/* ==========================================================================
   Styles pour les galeries d'images
   ========================================================================== */

.gallery-container {
    margin-top: 20px;
    max-width: 500px;
    max-height: 400px;
    overflow: auto;
}

.gallery-carousel {
    position: relative;
    margin: 0 auto;
}

.gallery-slides {
    display: flex;
    overflow: hidden;
}

.gallery-slide {
    display: none;
    width: 100%;
}

.gallery-slide.active {
    display: block;
}



.photo-frame {
    width: 100%;
    height: auto;
    overflow: hidden;
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
}

.photo-frame img {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain; /* Assure que l'image reste dans les limites sans déformation */
}

.gallery-prev,
.gallery-next {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    background: rgba(0, 0, 0, 0.5);
    color: white;
    border: none;
    padding: 10px;
    cursor: pointer;
}

.gallery-prev {
    left: 0;
}

.gallery-next {
    right: 0;
}

.gallery-dots {
    text-align: center;
    margin-top: 10px;
}

.gallery-dot {
    height: 10px;
    width: 10px;
    background: #bbb;
    border-radius: 50%;
    display: inline-block;
    margin: 0 5px;
    cursor: pointer;
}

.gallery-dot.active {
    background: #717171;
}

.photo-badge {
    position: absolute;
    top: 8px;
    left: 8px;
    padding: 3px 8px;
    border-radius: 12px;
    font-size: 11px;
    font-weight: 600;
    color: #fff;
    background: #2ecc71;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.25);
}

.photo-badge.pending {
    background: #f39c12;
}

.photo-delete {
    position: absolute;
    top: 8px;
    right: 8px;
    border: 1px solid rgba(255, 255, 255, 0.34);
    border-radius: 999px;
    background: rgba(15, 23, 42, 0.78);
    color: #fff;
    cursor: pointer;
    font-size: 11px;
    font-weight: 700;
    padding: 4px 10px;
    box-shadow: 0 6px 16px rgba(0, 0, 0, 0.24);
    transition: background 160ms ease, border-color 160ms ease, transform 160ms ease, opacity 160ms ease;
}

.photo-delete:hover {
    background: rgba(220, 38, 38, 0.92);
    border-color: rgba(248, 113, 113, 0.72);
    transform: translateY(-1px);
}

.photo-delete:disabled,
.photo-delete.is-loading {
    cursor: wait;
    opacity: 0.72;
    transform: none;
}

/* A.3: panel marker rules removed — panels live on the GL layer now.
   panels-circle handles selected / start / hover / active via feature-state
   paint expressions, panels-official renders the 🗳 badge. Only the
   user-location marker keeps a CSS rule (single DOM marker, stays DOM). */
.panneau-marker--user {
    box-shadow: 0 0 0 2px rgba(14, 165, 233, 0.8), 0 0 0 5px rgba(14, 165, 233, 0.35);
    border-radius: 999px;
}

/* Styles pour la section édition (basé sur l'image, avec correction base64) */
#edit-section {
    display: none;
    margin-top: 20px; /* Espacement après les boutons actions */
    padding: 10px;
    border-top: 1px solid #ddd; /* Ligne séparatrice subtile */
    text-align: left; /* Labels alignés à gauche pour lisibilité */
}

#edit-section label {
    display: block;
    font-weight: bold; /* Gras comme dans l'image */
    margin-bottom: 5px;
    font-size: 16px; /* Plus grand pour matcher */
    color: #000; /* Noir pur */
}

#edit-section select,
#edit-section input[type="number"] {
    width: 100%; /* Pleine largeur comme dans l'image */
    padding: 8px;
    border: 1px solid #ccc;
    border-radius: 4px; /* Arrondi subtil */
    font-size: 14px;
    margin-bottom: 10px;
    box-sizing: border-box; /* Inclut padding dans largeur */
}

#edit-section select {
    appearance: none; /* Enlève flèche par défaut */
    background: url('data:image/svg+xml;base64,PHN2ZyB4bWxucj0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxMiIgaGVpZ2h0PSIxMiIgZmlsbD0iY3VycmVudCIgdmlld0JveD0iMCAwIDI0IDI0Ij48cGF0aCBkPSJNMTIgMTRsLTQtNC0xIDEtNSA1aDEwbC01LTV6Ii8+PC9zdmc+') no-repeat right 10px center; /* Flèche base64 valide (simple flèche vers le bas) */
    background-size: 12px; /* Taille de la flèche */
}

#edit-section button {
    padding: 8px 15px;
    margin-right: 10px;
    margin-top: 5px; /* Espacement */
    border-radius: 4px;
    cursor: pointer;
    transition: background-color 0.2s;
}

#save-edit-btn {
    background-color: #0033A0; /* Bleu comme rn-blue-button */
    color: white;
    border: none;
}

#save-edit-btn:hover {
    background-color: #002680;
}

#cancel-edit-btn {
    background-color: #ccc; /* Gris simple */
    color: #000;
    border: none;
}

#cancel-edit-btn:hover {
    background-color: #bbb;
}

/* Responsive pour #edit-section */
@media (min-width: 768px) {
    #edit-section {
        display: flex;
        flex-wrap: wrap;
        justify-content: space-between;
        margin-top: 0;
        max-height: 0;
        opacity: 0;
        overflow: hidden;
        transform: translateY(6px);
        transition: opacity 220ms cubic-bezier(.2,.8,.2,1), transform 220ms cubic-bezier(.2,.8,.2,1), max-height 220ms cubic-bezier(.2,.8,.2,1);
        pointer-events: none;
    }
    #edit-section label {
        flex: 1 0 40%;
        margin-right: 10px;
        text-align: right; /* Aligne labels à droite pour forme "label: input" */
    }
    #edit-section select,
    #edit-section input {
        flex: 1 0 50%;
    }
    #edit-section .buttons { /* Groupe les boutons */
        flex: 1 0 100%;
        text-align: center;
        margin-top: 10px;
    }
}

@media (max-width: 767px) {
    #edit-section {
        text-align: center; /* Centre tout sur mobile */
    }
    #edit-section label {
        text-align: center;
    }
    .modal-content {
        padding: 10px; /* Réduit padding sur mobile */
    }
}

@media (max-width: 767px) {
    .bop-shell #navigation-modal .panel-info-grid {
        max-height: 1000px;
        opacity: 1;
        overflow: hidden;
        transform: translateY(0);
        transition: opacity 180ms cubic-bezier(.2,.8,.2,1), transform 180ms cubic-bezier(.2,.8,.2,1), max-height 180ms cubic-bezier(.2,.8,.2,1);
    }

    .bop-shell #navigation-modal.is-editing .panel-info-grid {
        max-height: 0;
        opacity: 0;
        transform: translateY(6px);
    }

    .bop-shell #navigation-modal:not(.is-editing) .panel-info-grid {
        transition: none;
    }
}

@media (max-width: 767px) {
    .bop-shell #navigation-modal .panel-view.is-active {
        animation: bop-panel-fade 180ms cubic-bezier(.2,.8,.2,1);
    }
}

@keyframes bop-panel-fade {
    from {
        opacity: 0;
        transform: translateY(4px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes bop-collage-success {
    0% { transform: scale(1); }
    55% { transform: scale(1.04); }
    100% { transform: scale(1); }
}

@keyframes bop-collage-check {
    0% { opacity: 0; transform: translateY(-55%) rotate(45deg) scale(0.6); }
    100% { opacity: 1; transform: translateY(-55%) rotate(45deg) scale(1); }
}

/* Mise à jour pour le footer du modal (Galerie et Éditer, avec icônes) */
.modal-footer {
    display: flex;
    justify-content: space-between; /* Espace entre Galerie et Éditer */
    margin-top: 15px;
}

#gallery-toggle,
#edit-toggle {
    padding: 8px 12px;
    background-color: #0073aa; /* Bleu WP */
    color: white;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 5px; /* Espace entre icône et texte */
    font-size: 14px;
    position: relative;
}

#gallery-toggle:hover,
#edit-toggle:hover {
    background-color: #005f8a;
}

.gallery-badge {
    position: absolute;
    top: -6px;
    right: -6px;
    min-width: 18px;
    height: 18px;
    padding: 0 5px;
    border-radius: 999px;
    background: #e74c3c;
    color: #fff;
    font-size: 11px;
    font-weight: 700;
    line-height: 18px;
    text-align: center;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 0 0 2px #fff;
}

.gallery-badge.is-visible {
    animation: gallery-badge-pop 220ms cubic-bezier(.2,.9,.2,1);
}

@keyframes gallery-badge-pop {
    from { transform: scale(0.6); opacity: 0.4; }
    to { transform: scale(1); opacity: 1; }
}

@media (prefers-reduced-motion: reduce) {
    .gallery-badge.is-visible { animation: none; }
}

@keyframes spin {
    0% { transform: translate(-50%, -50%) rotate(0deg); }
    100% { transform: translate(-50%, -50%) rotate(360deg); }
}

.panel-detail.undefined {
    color: #888; /* Gris pour "Non défini" */
}
.bop-shell {
    --bg: #0d1117;
    --panel: #111827;
    --panel2: #1f2937;
    --border: #1f2937;
    --text: #e5e7eb;
    --muted: #9ca3af;
    --accent: #2563eb;
    --danger: #e11d48;
    --success: #22c55e;
    --radius: 10px;
    --shadow: 0 10px 30px rgba(0,0,0,0.25);
}

.bop-shell {
    height: 100%;
    margin: 0;
    background: var(--bg);
    color: var(--text);
    font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
}

.bop-shell {
    min-height: 100vh;
    display: grid;
    grid-template-columns: 320px 1fr;
    grid-template-rows: 60px 1fr;
    background: var(--bg);
    color: var(--text);
}

.bop-topbar {
    grid-column: 1 / -1;
    height: 60px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 18px;
    background: #0b0f14;
    border-bottom: 1px solid var(--border);
}
.bop-topbar__brand {
    display: flex;
    align-items: center;
    gap: 12px;
    font-weight: 700;
    letter-spacing: 0.2px;
}
.bop-logo {
    background: var(--accent);
    color: #fff;
    padding: 6px 10px;
    border-radius: 8px;
    font-weight: 800;
    box-shadow: var(--shadow);
}
.bop-crumbs {
    display: flex;
    gap: 6px;
    color: var(--muted);
    font-size: 13px;
}
.crumb.active { color: #fff; font-weight: 600; }
.bop-topbar__actions { display: flex; gap: 8px; }

.bop-sidebar {
    grid-row: 2;
    background: var(--panel);
    border-right: 1px solid var(--border);
    padding: 16px;
    display: flex;
    flex-direction: column;
    gap: 16px;
    overflow-y: auto;
}
.bop-nav {
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.bop-nav__item {
    color: var(--muted);
    text-decoration: none;
    padding: 10px 12px;
    border-radius: var(--radius);
    transition: background 0.2s, color 0.2s;
}
.bop-nav__item:hover { background: var(--panel2); color: #fff; }
.bop-nav__item.is-active { background: var(--panel2); color: #fff; border: 1px solid var(--border); }

.bop-panel {
    background: var(--panel2);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 14px;
    box-shadow: var(--shadow);
}
.bop-panel__title {
    font-size: 14px;
    font-weight: 700;
    margin-bottom: 10px;
}
.bop-panel__desc {
    margin: 0 0 12px;
    color: var(--muted);
    font-size: 12px;
}
.bop-filter { display: flex; flex-direction: column; gap: 10px; }
.bop-toggle { display: flex; align-items: center; justify-content: space-between; gap: 8px; color: var(--text); }
.bop-toggle--free span:first-of-type { font-weight: 700; }
.bop-badge--free {
    border-color: rgba(37, 99, 235, 0.35);
    background: rgba(37, 99, 235, 0.12);
}
.bop-toggle--official span:first-of-type { font-weight: 700; }
.bop-badge--official {
    border-color: rgba(245, 158, 11, 0.65);
    background: rgba(245, 158, 11, 0.18);
}
.bop-toggle--department span:first-of-type { font-weight: 700; }
.bop-badge--department {
    border-color: rgba(14, 165, 233, 0.4);
    background: rgba(14, 165, 233, 0.12);
}
.bop-form { display: flex; flex-direction: column; gap: 8px; }
.bop-actions { display: flex; flex-direction: column; gap: 8px; }
.bop-help p { margin: 0; color: var(--muted); font-size: 13px; }
.bop-setting {
    display: flex;
    flex-direction: column;
    gap: 6px;
    font-size: 12px;
    color: var(--muted);
    margin-bottom: 12px;
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
}
.bop-setting span {
    color: var(--text);
    font-weight: 600;
    word-break: break-word;
}
.bop-setting .bop-input {
    max-width: 100%;
    min-width: 0;
    box-sizing: border-box;
}

/* Inline checkbox variant (Phase C clustering toggle) — flex-row so the
   checkbox sits before the label instead of stacking under it. */
.bop-setting.bop-setting--toggle {
    flex-direction: row;
    align-items: center;
    gap: 10px;
    cursor: pointer;
}
.bop-setting.bop-setting--toggle input[type="checkbox"] {
    width: 18px;
    height: 18px;
    flex: 0 0 18px;
    cursor: pointer;
    margin: 0;
}
.bop-setting.bop-setting--toggle span {
    font-weight: 500;
    font-size: 13px;
}

.bop-collage-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 12px;
}
.bop-collage-step {
    display: none;
    margin-bottom: 12px;
}
.bop-collage-step.is-active {
    display: block;
}
.bop-collage-step__title {
    font-size: 13px;
    font-weight: 700;
    color: var(--text);
    margin: 0 0 6px;
}
.bop-collage-actions--below {
    margin-top: 10px;
}
.bop-collage-route-title {
    font-size: 11px;
    font-weight: 700;
    margin: 6px 0;
    color: var(--text);
}
.bop-collage-route-meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px;
    margin-bottom: 6px;
}
.bop-collage-badge--mode {
    background: #334155;
    color: #e2e8f0;
    border: 1px solid rgba(148, 163, 184, 0.4);
}
.bop-collage-badge--mode.is-optimal {
    background: #16a34a;
    color: #fff;
    border-color: rgba(34, 197, 94, 0.6);
}
.bop-collage-badge--mode.is-fast {
    background: #0f172a;
    color: #e2e8f0;
}
.bop-collage-gain {
    font-size: 11px;
    color: var(--muted);
}
.bop-btn--optimal {
    background: linear-gradient(135deg, #10b981, #22c55e);
    border: 1px solid rgba(34, 197, 94, 0.6);
    color: #fff;
}
.bop-btn--optimal:hover {
    filter: brightness(1.05);
}
.bop-btn--optimal.is-loading {
    opacity: 0.7;
    cursor: default;
}

@media (min-width: 768px) {
    .bop-shell .bop-panel--collage .bop-collage-route-title {
        text-align: right;
    }
    .bop-shell .bop-panel--collage .bop-collage-route-meta {
        justify-content: flex-end;
    }

    .bop-shell .bop-panel--collage #bop-collage-export-google {
        background: linear-gradient(135deg, #2563eb, #38bdf8);
        box-shadow: 0 0 0 1px rgba(59, 130, 246, 0.35), 0 0 18px rgba(59, 130, 246, 0.55);
        border: 1px solid rgba(59, 130, 246, 0.65);
        color: #fff;
    }

    .bop-shell .bop-panel--collage .bop-btn.is-validated {
        background: linear-gradient(135deg, #2563eb, #38bdf8);
        border: 1px solid rgba(59, 130, 246, 0.65);
        color: #fff;
        box-shadow: 0 10px 18px rgba(59, 130, 246, 0.35);
        animation: bop-collage-success 260ms cubic-bezier(.2,.8,.2,1);
    }

    .bop-shell .bop-panel--collage .bop-btn.is-success {
        position: relative;
        padding-right: 30px;
        background: linear-gradient(135deg, #16a34a, #22c55e);
        border: 1px solid rgba(34, 197, 94, 0.6);
        color: #fff;
        box-shadow: 0 10px 18px rgba(34, 197, 94, 0.35);
        animation: bop-collage-success 320ms cubic-bezier(.2,.8,.2,1);
    }

    .bop-shell .bop-panel--collage .bop-btn.is-success::after {
        content: "";
        position: absolute;
        right: 12px;
        top: 50%;
        width: 6px;
        height: 12px;
        border-right: 2px solid #fff;
        border-bottom: 2px solid #fff;
        transform: translateY(-55%) rotate(45deg);
        opacity: 0;
        animation: bop-collage-check 320ms ease-out forwards;
    }
}
.bop-collage-actions .bop-btn.is-active {
    background: #16a34a;
    color: #fff;
    border: 1px solid #16a34a;
}
.bop-collage-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.bop-collage-optimize {
    margin-top: 12px;
}
.bop-collage-optimize {
    display: flex;
    align-items: center;
    gap: 10px;
}
.bop-collage-optimize #bop-collage-optimize {
    flex: 1 1 auto;
}
.bop-collage-optimize #bop-collage-clear {
    flex: 0 0 auto;
    padding: 8px 12px;
}
.bop-btn--danger {
    background: #dc2626;
    color: #fff;
    border: 1px solid #dc2626;
}
.bop-btn--danger:hover {
    background: #b91c1c;
    border-color: #b91c1c;
}
.bop-panel--collage .bop-btn {
    transition: transform 0.1s ease, background 0.2s ease, filter 0.2s ease;
}
.bop-panel--collage .bop-btn:hover {
    filter: brightness(1.08);
    transform: translateY(-1px);
}
.bop-collage-item {
    display: flex;
    align-items: center;
    gap: 10px;
    background: #0f172a;
    border: 1px solid var(--border);
    border-radius: 12px;
    padding: 8px 10px;
    transition: background 0.2s ease, border-color 0.2s ease;
}

/* Park-and-walk cluster group: a header row + a tight indented list of
   the panels walked from that stop. Theme-aware (default dark, .bop-theme-day
   light, and a dark-page-with-day-shell variant), mirroring the existing
   .bop-collage-item theme stack so the group reads as a card surface
   regardless of the active theme. */
.bop-collage-group {
    background: #0f172a;
    border: 1px solid var(--border);
    border-radius: 12px;
    padding: 8px 10px;
    display: flex;
    flex-direction: column;
    gap: 6px;
}
.bop-collage-group:hover {
    border-color: #f59e0b;
}
.bop-collage-group__header {
    display: flex;
    align-items: center;
    gap: 10px;
    cursor: default;
}
.bop-collage-group__panels {
    list-style: none;
    padding: 0 0 0 12px;
    margin: 6px 0 0 12px;
    display: flex;
    flex-direction: column;
    gap: 4px;
    border-left: 2px solid rgba(245, 158, 11, 0.25);
}

/* Nested items: borrow the index pill style with letters in a softer
   amber, drop the card chrome so they read as sub-rows inside the group.
   We have to repeat the selector under each theme prefix because the
   theme rule on .bop-collage-item (#fff in day, slate in dark+day) has
   higher specificity than a single-class .bop-collage-item--nested. */
.bop-collage-item--nested,
.bop-shell.bop-theme-day .bop-collage-item--nested,
html[data-bop-theme="dark"] .bop-shell.bop-theme-day .bop-collage-item--nested {
    background: transparent;
    border-color: transparent;
    padding: 4px 6px;
    border-radius: 8px;
}
.bop-collage-item--nested:hover,
.bop-shell.bop-theme-day .bop-collage-item--nested:hover,
html[data-bop-theme="dark"] .bop-shell.bop-theme-day .bop-collage-item--nested:hover {
    background: rgba(245, 158, 11, 0.10);
    border-color: transparent;
}
.bop-collage-item--nested .bop-collage-index {
    background: rgba(245, 158, 11, 0.18);
    color: #f59e0b;
    width: 22px;
    height: 22px;
    flex-basis: 22px;
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
}

/* Theme-day: light card surface so the title text (which is dark on this
   theme) doesn't disappear on the previously-hardcoded dark group bg. */
.bop-shell.bop-theme-day .bop-collage-group {
    background: #ffffff;
    border-color: #d8e1ee;
}
.bop-shell.bop-theme-day .bop-collage-group:hover {
    border-color: #f59e0b;
}

/* Dark page with the bop-shell using its day theme — match the translucent
   slate the existing .bop-collage-item adopts in this mode. */
html[data-bop-theme="dark"] .bop-shell.bop-theme-day .bop-collage-group {
    background: rgba(15, 23, 42, 0.78);
    border-color: var(--border);
}
html[data-bop-theme="dark"] .bop-shell.bop-theme-day .bop-collage-group:hover {
    border-color: rgba(245, 158, 11, 0.7);
}
.bop-collage-item:hover {
    background: #111827;
    border-color: #f59e0b;
}
.bop-collage-item.is-disabled {
    opacity: 0.55;
    border-style: dashed;
}
.bop-collage-item.is-disabled:hover {
    border-color: #334155;
    background: #0b1220;
}
.bop-collage-index {
    width: 26px;
    height: 26px;
    border-radius: 999px;
    background: var(--accent);
    color: #fff;
    font-size: 12px;
    font-weight: 700;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 26px;
}
.bop-collage-meta {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}
.bop-collage-title {
    font-size: 13px;
    font-weight: 600;
}
.bop-collage-sub {
    font-size: 12px;
    color: var(--muted);
}
.bop-collage-actions-inline {
    margin-left: auto;
    display: inline-flex;
    align-items: center;
    gap: 6px;
}
.bop-collage-start-btn {
    border: 1px solid #f59e0b;
    background: transparent;
    color: #f59e0b;
    font-size: 11px;
    font-weight: 700;
    padding: 2px 8px;
    border-radius: 999px;
    cursor: pointer;
    opacity: 0;
    transform: translateY(4px);
    pointer-events: none;
    transition: opacity 0.18s ease, transform 0.18s ease, background 0.18s ease;
}
.bop-collage-item:hover .bop-collage-start-btn {
    opacity: 1;
    transform: translateY(0);
    pointer-events: auto;
}
.bop-collage-item:focus-within .bop-collage-start-btn {
    opacity: 1;
    transform: translateY(0);
    pointer-events: auto;
}
.bop-collage-start-btn:disabled {
    opacity: 0.6;
    cursor: default;
    pointer-events: none;
}
.bop-collage-start-btn:not(:disabled):hover {
    background: rgba(245, 158, 11, 0.12);
}
.bop-collage-warning {
    margin-left: auto;
    font-size: 11px;
    color: #fca5a5;
    opacity: 0;
    transform: translateY(4px);
    transition: opacity 0.18s ease, transform 0.18s ease;
    white-space: nowrap;
}
.bop-collage-item.is-disabled:hover .bop-collage-warning {
    opacity: 1;
    transform: translateY(0);
}
.bop-collage-badge {
    background: #f59e0b;
    color: #1f2937;
    padding: 2px 8px;
    border-radius: 999px;
    font-size: 11px;
    font-weight: 700;
}
.bop-collage-empty {
    color: var(--muted);
    font-size: 12px;
    text-align: center;
    padding: 10px 0;
}
.bop-collage-export {
    margin-top: 12px;
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.bop-collage-export__actions {
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.bop-shell #bop-collage-route-change {
    margin-top: 6px;
}
.bop-collage-note {
    margin: 0;
    color: var(--muted);
    font-size: 12px;
}
.bop-collage-total {
    margin-top: 10px;
    padding: 8px 10px;
    background: #0f172a;
    border: 1px solid var(--border);
    border-radius: 10px;
    font-size: 12px;
    color: var(--text);
}

.bop-main {
    grid-row: 2;
    display: flex;
    flex-direction: column;
    background: #0b0f14;
    position: relative;
}
.bop-canvas { flex: 1; position: relative; }
.bop-mapwrap { height: calc(100vh - 60px); position: relative; }
.bop-map { height: 100%; width: 100%; }
.bop-map-overlays {
    position: absolute;
    top: 12px; left: 12px;
    display: flex;
    flex-direction: column;
    gap: 8px;
    z-index: 10;
}
.bop-geocoder { min-width: 260px; }

.bop-bottombar {
    position: absolute;
    left: calc(50% + (var(--bop-sidebar-occlusion, 0px) / 2));
    bottom: 16px;
    transform: translateX(-50%);
    background: rgba(17,24,39,0.94);
    border: 1px solid var(--border);
    border-radius: 12px;
    padding: 14px;
    min-width: 320px;
    box-shadow: var(--shadow);
    display: flex;
    flex-direction: column;
    gap: 8px;
    transition: left 240ms ease;
}
.bop-bottombar__title { font-weight: 700; }
.bop-bottombar__text { font-size: 13px; color: var(--muted); }
.bop-bottombar__actions { display: flex; gap: 8px; flex-wrap: wrap; }
.is-hidden { display: none !important; }

.bop-btn {
    border: none;
    border-radius: 8px;
    padding: 8px 12px;
    font-weight: 600;
    cursor: pointer;
    transition: transform 0.1s, background 0.2s;
}
.bop-btn:active { transform: translateY(1px); }
.bop-btn--primary { background: var(--accent); color: #fff; }
.bop-btn--secondary { background: #1f2937; color: #fff; border: 1px solid var(--border); }
.bop-btn--ghost { background: transparent; color: var(--text); border: 1px solid var(--border); }
.bop-btn.is-disabled,
.bop-btn[aria-disabled="true"] {
    opacity: 0.58;
    cursor: not-allowed;
    filter: saturate(0.7);
}

.bop-input, .bop-select {
    width: 100%;
    padding: 8px 10px;
    background: #0f172a;
    color: #fff;
    border: 1px solid var(--border);
    border-radius: 8px;
}

.bop-badge {
    background: var(--panel);
    border: 1px solid var(--border);
    border-radius: 12px;
    padding: 2px 8px;
    font-size: 12px;
    color: #fff;
}

.bop-spinner {
    position: fixed;
    top: 50%; left: 50%;
    width: 48px; height: 48px;
    margin: -24px 0 0 -24px;
    border-radius: 50%;
    border: 4px solid #1f2937;
    border-top-color: var(--accent);
    animation: spin 1s linear infinite;
    z-index: 10000;
}

.bop-toast {
    position: fixed;
    top: 20px; left: 50%;
    transform: translateX(-50%);
    padding: 12px 16px;
    border-radius: 10px;
    background: #111827;
    color: #fff;
    box-shadow: var(--shadow);
    z-index: 11000;
}
.bop-toast.success { background: var(--success); }
.bop-toast.error { background: var(--danger); }
.bop-toast.has-action {
    min-width: 320px;
    max-width: min(92vw, 460px);
    padding-bottom: 14px;
}
.bop-toast__text {
    line-height: 1.4;
}
.bop-toast__actions {
    margin-top: 10px;
    display: flex;
    justify-content: flex-end;
}
.bop-toast__undo {
    border: 1px solid rgba(255, 255, 255, 0.28);
    background: rgba(255, 255, 255, 0.14);
    color: #fff;
    border-radius: 999px;
    padding: 6px 12px;
    font-size: 0.82rem;
    font-weight: 700;
    cursor: pointer;
}
.bop-toast__undo:disabled {
    opacity: 0.7;
    cursor: wait;
}
.bop-toast__progress {
    margin-top: 10px;
    width: 100%;
    height: 4px;
    background: rgba(255, 255, 255, 0.18);
    border-radius: 999px;
    overflow: hidden;
}
.bop-toast__progress-bar {
    width: 100%;
    height: 100%;
    background: rgba(255, 255, 255, 0.92);
    transform-origin: left center;
    transform: scaleX(1);
    transition: transform linear;
    transition-duration: 10s;
}

.bop-modal {
    position: fixed;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 9000;
}
.bop-modal__backdrop {
    position: absolute;
    inset: 0;
    background: rgba(0,0,0,0.55);
}
.bop-modal__panel {
    position: relative;
    background: var(--panel2);
    border: 1px solid var(--border);
    border-radius: 12px;
    padding: 16px;
    width: 520px;
    max-width: 92vw;
    box-shadow: var(--shadow);
    z-index: 1;
}
.bop-modal__close {
    position: absolute;
    top: 8px; right: 10px;
    background: transparent;
    border: none;
    color: #fff;
    font-size: 20px;
    cursor: pointer;
}
.modal-header p { margin: 4px 0; }
.modal-subtle { color: var(--muted); font-size: 12px; }
.navigation-buttons, .action-buttons, .edit-actions, .modal-footer {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    margin-top: 10px;
}
.nav-button, .action-button {
    border: none;
    border-radius: 8px;
    padding: 10px 12px;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 6px;
}
.nav-logo { width: 16px; height: 16px; object-fit: contain; }
.nav-icon { font-size: 14px; }
.nav-button { background: transparent; color: #fff; border: none; }
.action-button.green { background: var(--success); color: #fff; }
.action-button.red { background: var(--danger); color: #fff; }
.gallery-container { margin-top: 12px; }
.modal-footer { justify-content: space-between; }

.bop-map .mapboxgl-ctrl-group {
    background: #0f172a;
    border: 1px solid var(--border);
    box-shadow: var(--shadow);
    border-radius: 10px;
}
.mapboxgl-ctrl button { color: #fff; }
.mapboxgl-ctrl-icon { filter: invert(1); }

#crosshair {
    position: absolute;
    width: 24px;
    height: 24px;
    font-size: 26px;
    color: #fb7185;
    text-align: center;
    line-height: 24px;
    pointer-events: none;
    z-index: 5;
    text-shadow: 0 0 6px rgba(251, 113, 133, 0.8), 0 0 14px rgba(251, 113, 133, 0.5);
}

.bop-shell footer,
.bop-shell .site-footer,
.bop-shell #colophon {
    display: none !important;
}

body.bop-hide-footer footer,
body.bop-hide-footer .site-footer,
body.bop-hide-footer #colophon {
    display: none !important;
}

.bop-shell {
    overflow-x: hidden;
}

.bop-shell header.site-header,
.bop-shell .site-header,
.bop-shell #masthead,
.bop-shell header#header {
    display: block !important;
    position: relative;
    z-index: 200;
}

.bop-shell {
    height: calc(100dvh - var(--bop-chrome-h, 0px));
    overflow: hidden;
    position: relative;
    display: block;
}

.bop-shell--embedded {
    min-height: 0;
    display: block;
}

.bop-shell {
    --bop-sidebar-w: 320px;
    --bop-sidebar-occlusion: 320px;
}

.bop-shell.is-sidebar-collapsed {
    --bop-sidebar-w: 28px;
    --bop-sidebar-occlusion: 28px;
}

.bop-shell .bop-main,
.bop-shell .bop-canvas,
.bop-shell .bop-mapwrap {
    height: 100%;
}

.bop-shell .bop-mapwrap {
    position: relative;
}

.bop-shell .bop-main {
    position: absolute;
    inset: 0;
    z-index: 10;
}

.bop-shell #map.bop-map {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
}

@media (max-width: 767px) {
    html, body {
        height: 100%;
    }
    body.bop-no-scroll {
        overflow: hidden;
    }

    .bop-shell {
        display: block;
    }

    .bop-shell .bop-sidebar {
        display: none;
    }
    .bop-shell #bop-drawer.bop-drawer {
        display: block;
        position: fixed;
        top: 0;
        left: 0;
        height: 100dvh;
        width: min(88vw, 360px);
        transform: translateX(-110%);
        transition: transform 0.22s ease;
        z-index: 9000;
        overflow: hidden;
    }
    .bop-shell #bop-drawer.is-open {
        transform: translateX(0);
    }
    .bop-shell #bop-drawer .bop-sidebar__scroll {
        height: 100%;
        overflow: auto;
        padding-bottom: calc(16px + env(safe-area-inset-bottom));
    }
    .bop-shell #bop-drawer .bop-sidebar__sticky {
        position: sticky;
        bottom: 0;
        padding-bottom: calc(16px + env(safe-area-inset-bottom));
    }
    .bop-shell #bop-drawer-backdrop {
        position: fixed;
        inset: 0;
        background: rgba(0, 0, 0, 0.45);
        backdrop-filter: blur(3px);
        z-index: 8990;
    }

    .bop-shell #bop-mobile-bar {
        position: fixed;
        left: 0;
        right: 0;
        bottom: 0;
        padding: 10px 10px calc(10px + env(safe-area-inset-bottom));
        background: rgba(10, 12, 18, 0.88);
        border-top: 1px solid rgba(255, 255, 255, 0.08);
        backdrop-filter: blur(12px);
        z-index: 8000;
        display: grid;
        grid-template-columns: 1fr 64px 1fr;
        gap: 10px;
        align-items: center;
    }

    .bop-shell #bop-collage-mobile-bar {
        position: absolute;
        left: 50%;
        bottom: calc(12px + env(safe-area-inset-bottom) + 64px);
        transform: translate(-50%, 8px);
        width: calc(100% - 24px);
        max-width: 520px;
        min-width: 0;
        z-index: 8050;
        opacity: 0;
        transition: opacity 240ms cubic-bezier(.2,.8,.2,1), transform 240ms cubic-bezier(.2,.8,.2,1);
    }

    .bop-shell #bop-collage-mobile-bar.bop-collage-bar {
        background: rgba(15, 23, 42, 0.94);
        border: 1px solid rgba(148, 163, 184, 0.25);
        border-radius: 14px;
        box-shadow: 0 18px 40px rgba(2, 6, 23, 0.45);
        padding: 12px;
        gap: 10px;
        transition: background 220ms ease, border-color 220ms ease, box-shadow 220ms ease;
    }

    .bop-shell #bop-collage-mobile-bar.is-animating {
        animation: bop-panel-fade 180ms cubic-bezier(.2,.8,.2,1);
    }

    .bop-shell #bop-collage-mobile-bar.is-open {
        opacity: 1;
        transform: translate(-50%, 0);
    }

    .bop-shell #bop-collage-mobile-bar.is-opening,
    .bop-shell #bop-collage-mobile-bar.is-closing {
        opacity: 0;
        transform: translate(-50%, 8px);
    }

    .bop-shell #bop-collage-mobile-bar.is-optimized {
        background: linear-gradient(135deg, rgba(16, 185, 129, 0.6), rgba(59, 130, 246, 0.45)), rgba(15, 23, 42, 0.96);
        border-color: rgba(34, 197, 94, 0.5);
        box-shadow: 0 18px 40px rgba(2, 6, 23, 0.45), 0 0 24px rgba(34, 197, 94, 0.3);
    }

    .bop-shell #bop-collage-mobile-bar.is-optimized .bop-collage-bar__title {
        color: rgba(236, 253, 245, 0.95);
    }

    .bop-shell #bop-collage-mobile-bar.is-optimized .bop-collage-bar__hint {
        color: rgba(187, 247, 208, 0.85);
    }

    .bop-shell #bop-collage-mobile-bar .bop-collage-bar__meta {
        display: flex;
        align-items: baseline;
        justify-content: space-between;
        gap: 8px;
        color: rgba(255, 255, 255, 0.88);
        font-size: 13px;
    }

    .bop-shell #bop-collage-mobile-bar .bop-collage-bar__title {
        font-weight: 700;
    }

    .bop-shell #bop-collage-mobile-bar .bop-collage-bar__hint {
        color: rgba(255, 255, 255, 0.6);
        font-size: 12px;
    }

    .bop-shell #bop-collage-mobile-bar .bop-collage-bar__actions {
        display: flex;
        gap: 8px;
        flex-wrap: wrap;
        justify-content: space-between;
    }

    .bop-shell #bop-collage-mobile-bar .bop-collage-bar__actions .bop-btn {
        flex: 1 1 auto;
        min-width: 0;
    }

    .bop-shell #bop-collage-mobile-bar #bop-collage-step2-next {
        padding-right: 30px;
    }

    .bop-shell #bop-collage-mobile-bar .bop-collage-bar__actions .bop-btn.is-success {
        position: relative;
        background: linear-gradient(135deg, #16a34a, #22c55e);
        border: 1px solid rgba(34, 197, 94, 0.6);
        color: #fff;
        box-shadow: 0 10px 18px rgba(34, 197, 94, 0.35);
        animation: bop-collage-success 320ms cubic-bezier(.2,.8,.2,1);
    }

    .bop-shell #bop-collage-mobile-bar .bop-collage-bar__actions .bop-btn.is-success::after {
        content: "";
        position: absolute;
        right: 12px;
        top: 50%;
        width: 6px;
        height: 12px;
        border-right: 2px solid #fff;
        border-bottom: 2px solid #fff;
        transform: translateY(-55%) rotate(45deg);
        opacity: 0;
        animation: bop-collage-check 320ms ease-out forwards;
    }

    .bop-shell #bop-collage-mobile-bar .bop-collage-bar__actions .bop-btn.is-glow {
        background: linear-gradient(135deg, #2563eb, #38bdf8);
        box-shadow: 0 0 0 1px rgba(59, 130, 246, 0.35), 0 0 18px rgba(59, 130, 246, 0.55);
    }

    .bop-shell #bop-collage-backdrop {
        position: fixed;
        inset: 0;
        background: rgba(0, 0, 0, 0.45);
        backdrop-filter: blur(3px);
        z-index: 9100;
    }

    .bop-shell #bop-collage-intro {
        position: fixed;
        left: 0;
        right: 0;
        bottom: 0;
        z-index: 9200;
    }

    .bop-shell #bop-collage-intro .bop-sheet__content {
        background: rgba(14, 18, 26, 0.96);
        border-top: 1px solid rgba(255, 255, 255, 0.1);
        border-radius: 18px 18px 0 0;
        padding: 12px 12px calc(12px + env(safe-area-inset-bottom));
        box-shadow: 0 -18px 60px rgba(0, 0, 0, 0.55);
    }

    .bop-shell #bop-collage-intro .bop-collage-sheet__text {
        color: rgba(255, 255, 255, 0.72);
        font-size: 13px;
        line-height: 1.4;
        margin: 0 0 14px;
    }

    .bop-shell #bop-collage-intro .bop-collage-sheet__actions {
        display: flex;
        gap: 8px;
    }

    .bop-shell #bop-collage-intro .bop-collage-sheet__actions .bop-btn {
        flex: 1 1 auto;
    }
    .bop-shell .bop-mobile-btn {
        height: 42px;
        border-radius: 14px;
        font-weight: 600;
        border: 1px solid rgba(255, 255, 255, 0.1);
        background: rgba(255, 255, 255, 0.06);
        color: #fff;
    }
    .bop-shell .bop-mobile-btn.bop-primary {
        background: rgba(37, 99, 235, 0.9);
        border-color: rgba(37, 99, 235, 0.9);
        color: #fff;
    }
    .bop-shell .bop-mobile-logo {
        height: 56px;
        width: 56px;
        border-radius: 999px;
        background: rgba(255, 255, 255, 0.06);
        border: 1px solid rgba(255, 255, 255, 0.1);
        display: grid;
        place-items: center;
        box-shadow: 0 10px 30px rgba(0, 0, 0, 0.35);
    }
    .bop-shell .bop-mobile-logo img {
        width: 34px;
        height: 34px;
        opacity: 0.95;
        display: block;
    }
    .bop-shell .bop-mobile-logo__text {
        font-size: 12px;
        font-weight: 700;
        color: #fff;
    }

    .bop-shell .mapboxgl-ctrl-bottom-left,
    .bop-shell .mapboxgl-ctrl-bottom-right {
        margin-bottom: 90px;
    }

    .bop-shell #bop-geocoder {
        position: absolute;
        top: 10px;
        left: 10px;
        right: 10px;
        z-index: 7000;
    }
    .bop-shell #bop-geocoder .mapboxgl-ctrl-geocoder {
        width: 100%;
        max-width: none;
        height: 44px;
        min-height: 44px;
        border-radius: 16px;
        box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);
    }
    .bop-shell #bop-geocoder .mapboxgl-ctrl-geocoder input {
        font-size: 16px;
        padding: 0 14px 0 40px;
    }

    .bop-shell .mapboxgl-ctrl-top-right {
        margin-top: 64px;
        margin-right: 10px;
    }
    .bop-shell .mapboxgl-ctrl-group {
        border-radius: 14px;
        background: rgba(14, 18, 26, 0.55);
        backdrop-filter: blur(10px);
        border: 1px solid rgba(255, 255, 255, 0.1);
        overflow: hidden;
    }

    .bop-shell #navigation-modal {
        align-items: flex-end;
    }
    .bop-shell #navigation-modal .modal-content.bop-sheet {
        width: 100%;
        max-width: none;
        border-radius: 18px 18px 0 0;
        max-height: calc(70dvh - 70px);
        overflow: auto;
        margin: 0 0 calc(68px + env(safe-area-inset-bottom)) 0;
        box-shadow: 0 -18px 60px rgba(0, 0, 0, 0.55);
    }
    .bop-shell .bop-sheet .modal-footer {
        position: sticky;
        bottom: 0;
        background: rgba(14, 18, 26, 0.92);
        border-top: 1px solid rgba(255, 255, 255, 0.08);
        padding: 12px;
        backdrop-filter: blur(10px);
    }

    .bop-shell #bop-switcher-backdrop {
        position: fixed;
        inset: 0;
        background: rgba(0, 0, 0, 0.45);
        backdrop-filter: blur(3px);
        z-index: 9100;
    }
    .bop-shell #bop-switcher {
        position: fixed;
        left: 0;
        right: 0;
        bottom: 0;
        z-index: 9200;
    }
    .bop-shell #bop-switcher .bop-sheet__content {
        background: rgba(14, 18, 26, 0.96);
        border-top: 1px solid rgba(255, 255, 255, 0.1);
        border-radius: 18px 18px 0 0;
        padding: 12px 12px calc(12px + env(safe-area-inset-bottom));
        box-shadow: 0 -18px 60px rgba(0, 0, 0, 0.55);
    }
    .bop-shell .bop-sheet__handle {
        width: 44px;
        height: 5px;
        border-radius: 999px;
        background: rgba(255, 255, 255, 0.18);
        margin: 4px auto 10px;
    }
    .bop-shell .bop-sheet__title {
        font-weight: 700;
        margin: 0 0 10px;
        color: #fff;
    }
    .bop-shell .bop-switcher__item {
        width: 100%;
        height: 48px;
        border-radius: 14px;
        text-align: left;
        padding: 0 14px;
        background: rgba(255, 255, 255, 0.06);
        border: 1px solid rgba(255, 255, 255, 0.08);
        margin-bottom: 10px;
        color: #fff;
        cursor: pointer;
    }

    .bop-shell .mapboxgl-ctrl-group button {
        width: 44px;
        height: 44px;
    }

    .bop-shell .bop-overlay--top-left {
        left: 12px !important;
        right: 12px;
    }

    .bop-shell .is-hidden-desktop {
        display: inline-flex;
    }
}

.bop-shell .bop-overlay {
    position: absolute;
    z-index: 10;
}

.bop-shell .bop-overlay--top-left {
    top: 12px;
    left: calc(24px + var(--bop-sidebar-occlusion, 0px));
    transition: left 240ms ease;
}

.bop-shell #add-panel-window {
    z-index: 20;
    background: linear-gradient(135deg, rgba(15, 23, 42, 0.95), rgba(2, 6, 23, 0.95));
    border: 1px solid rgba(148, 163, 184, 0.25);
    border-radius: 16px;
    box-shadow: 0 18px 40px rgba(2, 6, 23, 0.45), inset 0 1px 0 rgba(255, 255, 255, 0.05);
    backdrop-filter: blur(10px);
    opacity: 0;
    transition: opacity 240ms cubic-bezier(.2,.8,.2,1);
}
.bop-shell #add-panel-window.is-open {
    opacity: 1;
}
.bop-shell #add-panel-window.is-closing,
.bop-shell #add-panel-window.is-opening {
    opacity: 0;
}
.bop-shell #add-panel-window .bop-bottombar__actions {
    opacity: 0;
    transition: opacity 240ms cubic-bezier(.2,.8,.2,1);
}
.bop-shell #add-panel-window.is-open .bop-bottombar__actions {
    opacity: 1;
}
.bop-shell #add-panel-window.is-closing .bop-bottombar__actions {
    opacity: 0;
}
.bop-shell #add-panel-window .bop-bottombar__title {
    font-size: 15px;
    letter-spacing: 0.2px;
}
.bop-shell #add-panel-window .bop-bottombar__text {
    font-size: 13px;
}
.bop-shell #add-panel-window .bop-add-mode {
    display: none;
}
.bop-shell #add-panel-window .bop-btn--primary {
    background: linear-gradient(135deg, #2563eb, #1d4ed8);
    border: 1px solid rgba(59, 130, 246, 0.6);
    box-shadow: 0 10px 20px rgba(37, 99, 235, 0.35);
}
.bop-shell #add-panel-window .bop-btn--primary:hover {
    filter: brightness(1.06);
}

@media (max-width: 767px) {
    .bop-shell #add-panel-window {
        left: 50% !important;
        right: auto;
        width: calc(100% - 24px);
        max-width: 440px;
        min-width: 0;
        bottom: calc(12px + env(safe-area-inset-bottom) + 64px);
        transform: translateX(-50%);
        z-index: 8100;
    }

    .bop-shell #add-panel-window .bop-bottombar__title,
    .bop-shell #add-panel-window .bop-bottombar__text {
        display: none;
    }

    .bop-shell #add-panel-window .bop-add-mode {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 10px;
        margin-bottom: 12px;
    }

    .bop-shell #add-panel-window .bop-add-mode__label {
        font-size: 12px;
        font-weight: 700;
        color: rgba(255, 255, 255, 0.78);
        white-space: nowrap;
    }

    .bop-shell #add-panel-window .bop-add-mode__control {
        display: inline-flex;
        align-items: center;
        gap: 6px;
        padding: 4px;
        border-radius: 999px;
        background: rgba(255, 255, 255, 0.06);
        border: 1px solid rgba(255, 255, 255, 0.08);
    }

    .bop-shell #add-panel-window .bop-add-mode__option {
        border: 0;
        border-radius: 999px;
        padding: 8px 12px;
        background: transparent;
        color: rgba(255, 255, 255, 0.72);
        font-size: 12px;
        font-weight: 700;
        line-height: 1;
        transition: transform 180ms cubic-bezier(.2,.8,.2,1), background 180ms ease, color 180ms ease, box-shadow 180ms ease;
    }

    .bop-shell #add-panel-window .bop-add-mode__option.is-active {
        background: linear-gradient(135deg, rgba(37, 99, 235, 0.95), rgba(29, 78, 216, 0.92));
        color: #fff;
        box-shadow: 0 10px 18px rgba(37, 99, 235, 0.25);
        transform: translateY(-1px) scale(1.01);
    }

    .bop-shell #add-panel-window .bop-add-mode__option.is-flashing {
        animation: bop-add-mode-pulse 240ms cubic-bezier(.2,.8,.2,1);
    }

    .bop-shell #add-panel-window .bop-bottombar__actions {
        width: fit-content;
        max-width: 100%;
        margin: 0 auto;
        justify-content: center;
    }

    .bop-shell #add-panel-window .bop-help-btn {
        width: 36px;
        height: 36px;
        border-radius: 999px;
        padding: 0;
        font-size: 16px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        position: relative;
    }

    .bop-shell #add-panel-window .bop-help-btn::after {
        content: attr(data-tooltip);
        position: absolute;
        bottom: calc(100% + 10px);
        left: 50%;
        transform: translateX(-50%);
        width: min(240px, calc(100vw - 40px));
        background: rgba(15, 23, 42, 0.95);
        color: #fff;
        padding: 8px 10px;
        border-radius: 10px;
        font-size: 12px;
        line-height: 1.3;
        text-align: center;
        opacity: 0;
        pointer-events: none;
        transition: opacity 160ms ease;
        z-index: 8200;
    }

    .bop-shell #add-panel-window .bop-help-btn.is-tooltip-open::after,
    .bop-shell #add-panel-window .bop-help-btn:focus-visible::after {
        opacity: 1;
    }

    .bop-shell #bop-mobile-filters-backdrop {
        position: fixed;
        inset: 0;
        background: rgba(0, 0, 0, 0.38);
        backdrop-filter: blur(3px);
        z-index: 9100;
        opacity: 0;
        transition: opacity 220ms cubic-bezier(.2,.8,.2,1);
    }

    .bop-shell #bop-mobile-filters {
        position: fixed;
        left: 0;
        right: 0;
        bottom: 0;
        z-index: 9200;
        opacity: 0;
        transform: translateY(14px);
        transition: opacity 220ms cubic-bezier(.2,.8,.2,1), transform 220ms cubic-bezier(.2,.8,.2,1);
    }

    .bop-shell #bop-mobile-filters.is-open {
        opacity: 1;
        transform: translateY(0);
    }

    .bop-shell #bop-mobile-filters.is-opening,
    .bop-shell #bop-mobile-filters.is-closing {
        opacity: 0;
        transform: translateY(14px);
    }

    .bop-shell #bop-mobile-filters-backdrop.is-open {
        opacity: 1;
    }

    .bop-shell #bop-mobile-filters-backdrop.is-opening,
    .bop-shell #bop-mobile-filters-backdrop.is-closing {
        opacity: 0;
    }

    .bop-shell #bop-mobile-filters .bop-sheet__content {
        background: rgba(14, 18, 26, 0.96);
        border-top: 1px solid rgba(255, 255, 255, 0.1);
        border-radius: 18px 18px 0 0;
        padding: 12px 12px calc(12px + env(safe-area-inset-bottom));
        box-shadow: 0 -18px 60px rgba(0, 0, 0, 0.55);
    }

    .bop-shell #bop-mobile-filters .bop-mobile-filters__list {
        display: flex;
        flex-direction: column;
        gap: 10px;
        margin-bottom: 14px;
    }

    .bop-shell #bop-mobile-filters .bop-mobile-filters__toggle {
        padding: 12px;
        border-radius: 14px;
        background: rgba(255, 255, 255, 0.05);
        border: 1px solid rgba(255, 255, 255, 0.08);
    }

    .bop-shell #bop-mobile-filters .bop-mobile-filters__meta {
        display: inline-flex;
        align-items: center;
        gap: 10px;
    }

    .bop-shell #bop-mobile-filters .bop-mobile-filters__actions .bop-btn {
        width: 100%;
    }
}


.bop-shell .mapboxgl-ctrl-top-right,
.bop-shell .mapboxgl-ctrl-top-left {
    z-index: 15;
}

.bop-shell .bop-modal {
    z-index: 100;
}

.bop-shell .bop-mapwrap .bop-spinner {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

.bop-shell .bop-mapwrap .bop-toast {
    position: absolute;
    top: 16px;
    left: 50%;
    transform: translateX(-50%);
}

.bop-shell #notification {
    position: absolute;
    top: 16px;
    left: 50%;
    transform: translateX(-50%) translateY(0);
    padding: 10px 18px;
    border-radius: 999px;
    border: 1px solid rgba(15, 23, 42, 0.08);
    background: rgba(255, 255, 255, 0.78);
    backdrop-filter: blur(12px);
    color: #0f172a;
    z-index: 11000;
    display: flex;
    box-shadow: 0 18px 30px rgba(15, 23, 42, 0.16);
}

.bop-shell #notification::before {
    content: '';
    width: 12px;
    height: 12px;
    border-radius: 999px;
    background: #16a34a;
    box-shadow: 0 0 0 4px rgba(22, 163, 74, 0.18);
}
.bop-shell #notification.error::before {
    background: #ef4444;
    box-shadow: 0 0 0 4px rgba(239, 68, 68, 0.18);
}
.bop-shell #notification.is-hidden {
    display: flex !important;
    opacity: 0;
    transform: translateX(-50%) translateY(-8px);
    pointer-events: none;
}

.bop-shell .bop-sidebar {
    border-right: 1px solid rgba(255, 255, 255, 0.08);
    box-shadow: 6px 0 18px rgba(0, 0, 0, 0.18);
    padding: 12px;
    gap: 12px;
    overflow: visible;
    position: relative;
    transition: padding 240ms ease, width 240ms ease;
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    width: var(--bop-sidebar-w);
    z-index: 20;
}

.bop-shell .bop-sidebar__scroll {
    overflow-y: auto;
    flex: 1;
    padding-right: 2px;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.bop-shell .bop-sidebar__sticky {
    margin-top: auto;
    padding-top: 8px;
    position: relative;
}

.bop-shell .bop-sidebar__scroll,
.bop-shell .bop-sidebar__sticky {
    transition: opacity 200ms ease, transform 200ms ease;
}

.bop-shell.is-sidebar-collapsed .bop-sidebar {
    padding-left: 8px;
    padding-right: 8px;
}

.bop-shell.is-sidebar-collapsed .bop-sidebar__scroll,
.bop-shell.is-sidebar-collapsed .bop-sidebar__sticky {
    opacity: 0;
    transform: translateX(-8px);
    pointer-events: none;
}

.bop-shell .bop-sidebar__toggle {
    position: absolute;
    top: 50%;
    right: -12px;
    transform: translateY(-50%);
    width: 24px;
    height: 44px;
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-left: none;
    border-radius: 0 12px 12px 0;
    background: rgba(17, 24, 39, 0.92);
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.25);
    cursor: pointer;
    z-index: 30;
    display: flex;
    align-items: center;
    justify-content: center;
}

.bop-shell .bop-sidebar__toggle::before {
    content: '';
    width: 0;
    height: 0;
    border-top: 7px solid transparent;
    border-bottom: 7px solid transparent;
    border-right: 10px solid rgba(255, 255, 255, 0.9);
    transform: translateX(-3px);
    filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.45));
}

.bop-shell.is-sidebar-collapsed .bop-sidebar__toggle::before {
    border-right: 0;
    border-left: 10px solid rgba(255, 255, 255, 0.9);
    transform: translateX(3px);
}

.bop-shell.is-sidebar-collapsed .bop-sidebar__toggle {
    background: rgba(17, 24, 39, 0.98);
    border-color: rgba(255, 255, 255, 0.18);
    box-shadow: 0 12px 24px rgba(0, 0, 0, 0.3);
}

.bop-shell .bop-panel {
    padding: 12px;
}

.bop-shell .bop-panel__title {
    margin-bottom: 8px;
}

.bop-shell .bop-nav__item {
    padding: 8px 10px;
    font-size: 14px;
}

.bop-shell .bop-filter {
    gap: 8px;
}

.bop-shell .bop-panel--actions {
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.25);
}

.bop-shell .bop-form label,
.bop-shell .bop-form select,
.bop-shell .bop-form .bop-select {
    font-size: 12px;
}

.bop-shell .bop-form label {
    color: var(--muted);
    letter-spacing: 0.1px;
}

.bop-shell .bop-toggle span {
    font-size: 12px;
}

.bop-shell .mapboxgl-ctrl-icon {
    filter: none;
}

.bop-shell .mapboxgl-ctrl-top-right .mapboxgl-ctrl-group {
    background: rgba(17, 24, 39, 0.88);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 12px;
    box-shadow: 0 10px 24px rgba(0, 0, 0, 0.25);
}

.bop-shell .mapboxgl-ctrl-top-right .mapboxgl-ctrl-group button {
    background: transparent;
    color: #fff;
}

.bop-shell .mapboxgl-ctrl-top-right .mapboxgl-ctrl-group button:hover {
    background: rgba(255, 255, 255, 0.08);
}

.bop-shell .mapboxgl-ctrl-top-right .mapboxgl-ctrl-icon {
    filter: invert(1);
}

.bop-shell .mapboxgl-ctrl-top-right button[title="Activer l'ajout de panneau"] {
    color: #fff;
    filter: none;
}

.bop-shell .bop-geocoder .mapboxgl-ctrl-geocoder {
    background: #fff;
    border-radius: 12px;
    box-shadow: 0 10px 24px rgba(0, 0, 0, 0.18);
}

.bop-shell .bop-geocoder .mapboxgl-ctrl-geocoder input {
    color: #111;
}

.bop-shell .bop-geocoder .mapboxgl-ctrl-geocoder input::placeholder {
    color: #6b7280;
}

.bop-shell .mapboxgl-ctrl-top-right .mapboxgl-ctrl-group button .mapboxgl-ctrl-icon {
    color: #fff;
}

.bop-shell .mapboxgl-ctrl-top-right .mapboxgl-ctrl-group button.bop-map-utility-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 36px;
    min-height: 36px;
    transition: background 180ms ease, color 180ms ease, box-shadow 180ms ease, border-color 180ms ease;
}

.bop-shell .mapboxgl-ctrl-top-right .mapboxgl-ctrl-group button.bop-map-utility-btn.is-active {
    background: rgba(37, 99, 235, 0.18);
    box-shadow: inset 0 0 0 1px rgba(59, 130, 246, 0.25);
}

/* has-overrides = at least one filter differs from the default. We
   used to tint the whole button amber, which read as a "couleur de
   vomi" against the dark Mapbox group bg. Switch to the same small
   amber dot pattern used elsewhere in carte-collage (.tool.flagged,
   .quick-btn.flagged) for visual consistency. */
.bop-shell .mapboxgl-ctrl-top-right .mapboxgl-ctrl-group button.bop-map-utility-btn.has-overrides:not(.is-active) {
    background: transparent;
    box-shadow: none;
    position: relative;
}
.bop-shell .mapboxgl-ctrl-top-right .mapboxgl-ctrl-group button.bop-map-utility-btn.has-overrides:not(.is-active)::after {
    content: "";
    position: absolute;
    top: 4px;
    right: 4px;
    width: 8px;
    height: 8px;
    border-radius: 999px;
    background: #f59e0b;
    box-shadow: 0 0 0 2px rgba(17, 24, 39, 0.92);
    pointer-events: none;
}

.bop-shell .mapboxgl-ctrl-top-right .mapboxgl-ctrl-group button.bop-map-utility-btn svg {
    width: 18px;
    height: 18px;
}

.bop-shell .mapboxgl-ctrl-top-right .mapboxgl-ctrl-group button svg {
    stroke: #fff;
}

/* Map utility button icon color — driven by a CSS variable. CRITICAL:
   the dark-mode block lower in the file (~line 4638) re-applies
   `filter: invert(1)` to every .mapboxgl-ctrl-icon, including our
   button. Without disabling the filter explicitly, any color we set
   here gets visually flipped (white → black on screen). So we force
   `filter: none` on the utility button regardless of mode and then
   trust the variable to drive the actual color. */
:root {
    --bop-map-utility-icon: #11181f;
}
html[data-bop-theme="dark"] {
    --bop-map-utility-icon: #fff;
}
.mapboxgl-ctrl-top-right .mapboxgl-ctrl-group button.bop-map-utility-btn,
html[data-bop-theme="dark"] .bop-shell.bop-theme-day .mapboxgl-ctrl-top-right .mapboxgl-ctrl-group button.bop-map-utility-btn {
    color: var(--bop-map-utility-icon, #11181f) !important;
    filter: none !important;
}
.mapboxgl-ctrl-top-right .mapboxgl-ctrl-group button.bop-map-utility-btn svg path,
html[data-bop-theme="dark"] .bop-shell.bop-theme-day .mapboxgl-ctrl-top-right .mapboxgl-ctrl-group button.bop-map-utility-btn svg path {
    stroke: var(--bop-map-utility-icon, #11181f) !important;
}

@keyframes bop-add-mode-pulse {
    0% {
        transform: translateY(0) scale(0.98);
    }
    60% {
        transform: translateY(-1px) scale(1.04);
    }
    100% {
        transform: translateY(-1px) scale(1.01);
    }
}

.bop-shell #navigation-modal .modal-content,
.bop-shell #navigation-modal .bop-modal__panel {
  color: rgba(255,255,255,0.92);
}

.bop-shell #navigation-modal .modal-content {
  position: relative;
  top: auto;
  left: auto;
  right: auto;
  bottom: auto;
  transform: none;
  opacity: 1;
  margin: 0;
}

.bop-shell #navigation-modal .modal-content.visible {
  opacity: 1;
  transform: none;
}

.bop-shell #navigation-modal .modal-content p,
.bop-shell #navigation-modal .modal-content span,
.bop-shell #navigation-modal .modal-content strong,
.bop-shell #navigation-modal .modal-content small,
.bop-shell #navigation-modal .modal-content label,
.bop-shell #navigation-modal .modal-content h1,
.bop-shell #navigation-modal .modal-content h2,
.bop-shell #navigation-modal .modal-content h3,
.bop-shell #navigation-modal .modal-content h4 {
  color: inherit;
}

.bop-shell #navigation-modal .modal-content .muted,
.bop-shell #navigation-modal .modal-content .panel-detail,
.bop-shell #navigation-modal .modal-content .undefined {
  color: rgba(255,255,255,0.65) !important;
}

.bop-shell #navigation-modal .modal-content input[type="text"],
.bop-shell #navigation-modal .modal-content input[type="number"],
.bop-shell #navigation-modal .modal-content select,
.bop-shell #navigation-modal .modal-content textarea {
  background: rgba(15, 23, 42, 0.55);
  color: rgba(255,255,255,0.92);
  border: 1px solid rgba(255,255,255,0.14);
  border-radius: 10px;
  outline: none;
}

.bop-shell #navigation-modal .modal-content input::placeholder,
.bop-shell #navigation-modal .modal-content textarea::placeholder {
  color: rgba(255,255,255,0.45);
}

.bop-shell #navigation-modal .modal-content input:focus,
.bop-shell #navigation-modal .modal-content select:focus,
.bop-shell #navigation-modal .modal-content textarea:focus {
  border-color: rgba(96, 165, 250, 0.6);
  box-shadow: 0 0 0 4px rgba(96, 165, 250, 0.15);
}

.bop-shell #navigation-modal .modal-content .button,
.bop-shell #navigation-modal .modal-content .button.button-secondary {
  background: rgba(255,255,255,0.10);
  color: rgba(255,255,255,0.92);
  border: 1px solid rgba(255,255,255,0.12);
  border-radius: 10px;
  box-shadow: none;
}
.bop-shell #navigation-modal .modal-content .button:hover {
  background: rgba(255,255,255,0.14);
}

.bop-shell #navigation-modal .modal-content .button.button-primary {
  background: rgba(59, 130, 246, 0.85);
  border-color: rgba(59, 130, 246, 0.85);
  color: white;
}
.bop-shell #navigation-modal .modal-content .button.button-primary:hover {
  background: rgba(59, 130, 246, 1);
}

.bop-shell #navigation-modal .modal-content hr,
.bop-shell #navigation-modal .modal-content .divider,
.bop-shell #navigation-modal .modal-content [style*="border-top"] {
  border-color: rgba(255,255,255,0.10) !important;
}

.bop-breadcrumbs {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 13px;
    color: var(--muted);
    margin-bottom: 12px;
}
.bop-drawer-open {
    width: 40px;
    height: 40px;
    border-radius: 10px;
    border: 1px solid rgba(255, 255, 255, 0.12);
    background: rgba(15, 23, 42, 0.7);
    color: #fff;
    font-size: 18px;
    line-height: 1;
    cursor: pointer;
}
.bop-drawer-close {
    width: 44px;
    height: 44px;
    border-radius: 12px;
    border: 1px solid rgba(255, 255, 255, 0.12);
    background: rgba(15, 23, 42, 0.7);
    color: #fff;
    font-size: 22px;
    line-height: 1;
    cursor: pointer;
    margin: 6px 0 10px;
}
.is-hidden-desktop {
    display: none;
}

.bop-breadcrumbs strong {
    color: #fff;
}

.bop-breadcrumbs .sep {
    opacity: 0.6;
}

.bop-badge--brand {
    background: var(--accent);
    color: #fff;
    border: none;
}

/* Modal panneau — Premium polish */
.bop-shell #navigation-modal .value--undefined {
    opacity: 0.65;
    font-style: italic;
}

.bop-shell #navigation-modal .bop-modal__panel input[type="text"],
.bop-shell #navigation-modal .bop-modal__panel input[type="number"],
.bop-shell #navigation-modal .bop-modal__panel select {
    height: 44px;
    padding: 0 12px;
    border-radius: 12px;
}

.bop-shell #navigation-modal .bop-modal__panel textarea {
    min-height: 44px;
    padding: 10px 12px;
    border-radius: 12px;
}

.bop-shell #navigation-modal .bop-modal__panel input:focus,
.bop-shell #navigation-modal .bop-modal__panel select:focus,
.bop-shell #navigation-modal .bop-modal__panel textarea:focus {
    border-color: rgba(96, 165, 250, 0.7);
    box-shadow: 0 0 0 5px rgba(59, 130, 246, 0.18);
}

.bop-shell #navigation-modal .bop-modal__footer {
    position: sticky;
    bottom: 0;
    padding-top: 6px;
    margin-top: 6px;

}

.bop-shell #navigation-modal .edit-actions {
    display: none;
    gap: 8px;
    flex-wrap: wrap;
    margin-bottom: 6px;
    justify-content: flex-end;
}

.bop-shell #navigation-modal.is-editing .edit-actions {
    display: flex;
}

@media (min-width: 768px) {
    .bop-shell #navigation-modal .edit-actions {
        display: flex;
        max-height: 0;
        opacity: 0;
        overflow: hidden;
        transform: translateY(6px);
        pointer-events: none;
        margin-bottom: 0;
        transition: opacity 220ms cubic-bezier(.2,.8,.2,1), transform 220ms cubic-bezier(.2,.8,.2,1), max-height 220ms cubic-bezier(.2,.8,.2,1);
    }

    .bop-shell #navigation-modal.is-editing .edit-actions {
        max-height: 120px;
        opacity: 1;
        transform: translateY(0);
        pointer-events: auto;
        margin-bottom: 6px;
        transition: none;
    }

    .bop-shell #navigation-modal.is-editing #edit-section {
        margin-top: 20px;
        max-height: 420px;
        opacity: 1;
        transform: translateY(0);
        pointer-events: auto;
        transition: none;
    }
}

.bop-shell #navigation-modal .navigation-buttons .nav-button {
    background: transparent;
    border: 1px solid rgba(255, 255, 255, 0.12);
}

/* ==========================================================================
   Modal panneau — Premium (BOP App only)
   ========================================================================== */
.bop-shell #navigation-modal {
    padding: 20px;
    align-items: flex-end;
    justify-content: flex-end;
}

.bop-shell #navigation-modal .bop-modal__backdrop {
    background: rgba(0, 0, 0, 0.55);
    opacity: 0;
    transition: opacity 180ms ease;
    backdrop-filter: blur(4px);
}

.bop-shell #navigation-modal:not(.is-hidden) .bop-modal__backdrop {
    opacity: 1;
}

.bop-shell #navigation-modal .bop-modal__panel,
.bop-shell #navigation-modal .modal-content {
    position: relative;
    width: clamp(420px, 34vw, 640px);
    max-height: calc(100dvh - var(--bop-chrome-h, 0px) - 40px);
    display: flex;
    flex-direction: column;
    overflow: hidden;
    border-radius: 18px;
    border: 1px solid rgba(255, 255, 255, 0.08);
    background: linear-gradient(160deg, rgba(31, 41, 55, 0.96), rgba(15, 23, 42, 0.92));
    box-shadow: 0 24px 60px rgba(0, 0, 0, 0.55), 0 8px 24px rgba(15, 23, 42, 0.55);
    color: rgba(255, 255, 255, 0.92);
    opacity: 0;
    transform: translateY(12px);
    transition: opacity 220ms ease, transform 220ms ease;
}

.bop-shell #navigation-modal .bop-modal__panel.visible,
.bop-shell #navigation-modal .modal-content.visible {
    opacity: 1;
    transform: translateY(0);
}

.bop-shell #navigation-modal .bop-modal__body {
    padding: 18px;
    overflow: auto;
    max-height: calc(100dvh - var(--bop-chrome-h, 0px) - 90px);
}

.bop-shell #navigation-modal .panel-body {
    position: relative;
}

.bop-shell #navigation-modal .panel-views {
    padding-right: 56px;
}

.bop-shell #navigation-modal .panel-view {
    display: none;
}

.bop-shell #navigation-modal .panel-view.is-active {
    display: block;
}

.bop-shell #navigation-modal .panel-info-grid {
    display: grid;
    gap: 12px;
    padding-right: 15px;
}

.bop-shell #navigation-modal .panel-info-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
}

.bop-shell #navigation-modal .panel-info-label {
    color: rgba(255, 255, 255, 0.6);
    font-size: 11px;
    letter-spacing: 0.12em;
    text-transform: uppercase;
}

.bop-shell #navigation-modal .panel-info-value {
    font-weight: 600;
    text-align: right;
}

.bop-shell #navigation-modal .panel-route-title {
    font-weight: 700;
    margin-bottom: 10px;
}

.bop-shell #navigation-modal .panel-view--route .navigation-buttons {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
}

.bop-shell #navigation-modal .panel-edit #gallery-desktop-btn {
    display: none;
}

@media (min-width: 768px) {
    .bop-shell #navigation-modal .panel-edit {
        width: 100%;
        justify-content: space-between;
    }

    .bop-shell #navigation-modal .panel-edit #gallery-desktop-btn {
        display: inline-flex;
    }
}

.bop-shell #navigation-modal .panel-view--route .nav-button {
    min-height: 44px;
}

.bop-shell #navigation-modal .panel-view--gallery .gallery-container {
    margin-top: 0;
    padding-top: 0;
    border-top: none;
}

.bop-shell #navigation-modal .panel-nav {
    position: absolute;
    right: 10px;
    top: 50%;
    transform: translateY(-50%);
    display: flex;
    flex-direction: column;
    gap: 10px;
    z-index: 1;
}

.bop-shell #navigation-modal .panel-nav__btn {
    width: 40px;
    height: 40px;
    border-radius: 999px;
    border: 1px solid rgba(255, 255, 255, 0.16);
    background: rgba(255, 255, 255, 0.08);
    color: rgba(255, 255, 255, 0.9);
    display: grid;
    place-items: center;
    font-size: 16px;
    position: relative;
    transition: background 160ms ease, transform 160ms ease, border-color 160ms ease;
}

.bop-shell #navigation-modal .panel-nav__btn:hover {
    background: rgba(255, 255, 255, 0.16);
    transform: translateY(-1px);
}

.bop-shell #navigation-modal .panel-nav__btn.is-active {
    background: rgba(59, 130, 246, 0.28);
    border-color: rgba(59, 130, 246, 0.7);
    box-shadow: 0 0 0 2px rgba(59, 130, 246, 0.15);
}

.bop-shell #navigation-modal .panel-nav__badge {
    position: absolute;
    top: -4px;
    right: -4px;
    min-width: 18px;
    height: 18px;
    border-radius: 999px;
    background: rgba(34, 197, 94, 0.95);
    color: #0f172a;
    font-size: 11px;
    font-weight: 700;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0 4px;
}

.bop-shell #navigation-modal.is-editing .panel-nav {
    display: none;
}

.bop-shell #navigation-modal.is-editing .action-buttons {
    display: none;
}

.bop-shell #navigation-modal .bop-modal__close {
    position: absolute;
    top: 12px;
    right: 12px;
    width: 36px;
    height: 36px;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.08);
    border: 1px solid rgba(255, 255, 255, 0.12);
    color: #fff;
    cursor: pointer;
    transition: background 160ms ease, transform 160ms ease;
    z-index: 2;
}

.bop-shell #navigation-modal .bop-modal__close:hover {
    background: rgba(255, 255, 255, 0.16);
    transform: translateY(-1px);
}

.bop-shell #navigation-modal .modal-header {
    display: flex;
    flex-direction: column;
    gap: 6px;
    padding-bottom: 12px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
    margin-bottom: 14px;
}

.bop-shell #navigation-modal .modal-header p {
    margin: 0;
}

.bop-shell #navigation-modal .modal-header strong p {
    font-size: 20px;
    font-weight: 700;
    letter-spacing: 0.2px;
}

.bop-shell #navigation-modal .modal-subtle,
.bop-shell #navigation-modal .panel-detail,
.bop-shell #navigation-modal .undefined {
    color: rgba(255, 255, 255, 0.72) !important;
}

.bop-shell #navigation-modal .navigation-buttons,
.bop-shell #navigation-modal .action-buttons,
.bop-shell #navigation-modal .edit-actions,
.bop-shell #navigation-modal .panel-edit {
    gap: 10px;
    margin-top: 12px;
}

.bop-shell #navigation-modal .panel-edit {
    display: flex;
    justify-content: flex-end;
}

.bop-shell #navigation-modal .nav-button {
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid rgba(255, 255, 255, 0.08);
    color: #fff;
    border-radius: 12px;
    padding: 10px 12px;
}

.bop-shell #navigation-modal .nav-button:hover {
    background: rgba(255, 255, 255, 0.12);
}

.bop-shell #navigation-modal .action-button {
    border-radius: 12px;
    font-weight: 600;
}

.bop-shell #navigation-modal .action-button.green {
    background: rgba(34, 197, 94, 0.9);
    color: #fff;
}

.bop-shell #navigation-modal .action-button.red {
    background: rgba(225, 29, 72, 0.9);
    color: #fff;
}
.bop-shell #navigation-modal .action-button.orange {
    background: rgba(249, 115, 22, 0.9);
    color: #fff;
}

.bop-shell #navigation-modal .action-button:hover {
    filter: brightness(1.05);
}

.panel-contested-btn {
    margin-left: 8px;
    padding: 2px 6px;
    border-radius: 999px;
    border: 1px solid rgba(249, 115, 22, 0.6);
    background: rgba(249, 115, 22, 0.12);
    color: #f97316;
    font-size: 11px;
    font-weight: 600;
    cursor: pointer;
}
.panel-contested-btn:hover {
    background: rgba(249, 115, 22, 0.2);
}

.bop-shell #navigation-modal .bop-btn,
.bop-shell #navigation-modal .button,
.bop-shell #navigation-modal .button.button-secondary {
    background: rgba(255, 255, 255, 0.08);
    color: #fff;
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 12px;
    box-shadow: none;
}

.bop-shell #navigation-modal .bop-btn:hover,
.bop-shell #navigation-modal .button:hover {
    background: rgba(255, 255, 255, 0.14);
}

.bop-shell #navigation-modal .bop-btn--primary,
.bop-shell #navigation-modal .button.button-primary {
    background: rgba(37, 99, 235, 0.9);
    border-color: rgba(37, 99, 235, 0.9);
    color: #fff;
}

.bop-shell #navigation-modal .bop-btn--primary:hover,
.bop-shell #navigation-modal .button.button-primary:hover {
    background: rgba(37, 99, 235, 1);
}

.bop-shell #navigation-modal input[type="text"],
.bop-shell #navigation-modal input[type="number"],
.bop-shell #navigation-modal select,
.bop-shell #navigation-modal textarea {
    background: rgba(15, 23, 42, 0.65);
    color: rgba(255, 255, 255, 0.92);
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 12px;
    outline: none;
}

.bop-shell #navigation-modal input::placeholder,
.bop-shell #navigation-modal textarea::placeholder {
    color: rgba(255, 255, 255, 0.5);
}

.bop-shell #navigation-modal input:focus,
.bop-shell #navigation-modal select:focus,
.bop-shell #navigation-modal textarea:focus {
    border-color: rgba(96, 165, 250, 0.7);
    box-shadow: 0 0 0 4px rgba(96, 165, 250, 0.16);
}

.bop-shell #navigation-modal .gallery-container {
    margin-top: 14px;
    padding-top: 12px;
    border-top: 1px solid rgba(255, 255, 255, 0.08);
}

.bop-shell #navigation-modal .gallery-container.is-loaded {
    animation: bop-panel-fade 180ms cubic-bezier(.2,.8,.2,1);
}

.bop-shell #navigation-modal .gallery-upload {
    display: grid;
    gap: 8px;
    margin-top: 12px;
    justify-items: center;
}

.bop-shell #navigation-modal .gallery-upload label {
    font-size: 11px;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.6);
}

.bop-shell #navigation-modal .gallery-upload input[type="file"] {
    width: min(100%, 320px);
    padding: 8px;
    border-radius: 12px;
    border: 1px dashed rgba(255, 255, 255, 0.2);
    background: rgba(15, 23, 42, 0.55);
    color: rgba(255, 255, 255, 0.9);
}

.bop-shell #navigation-modal .gallery-upload input[type="file"]::file-selector-button {
    border: 1px solid rgba(59, 130, 246, 0.55);
    background: rgba(59, 130, 246, 0.2);
    color: #fff;
    border-radius: 999px;
    padding: 6px 12px;
    margin-right: 10px;
    cursor: pointer;
    transition: background 160ms ease, border-color 160ms ease;
}

.bop-shell #navigation-modal .gallery-upload input[type="file"]::-webkit-file-upload-button {
    border: 1px solid rgba(59, 130, 246, 0.55);
    background: rgba(59, 130, 246, 0.2);
    color: #fff;
    border-radius: 999px;
    padding: 6px 12px;
    margin-right: 10px;
    cursor: pointer;
    transition: background 160ms ease, border-color 160ms ease;
}

.bop-shell #navigation-modal .gallery-upload input[type="file"]::file-selector-button:hover,
.bop-shell #navigation-modal .gallery-upload input[type="file"]::-webkit-file-upload-button:hover {
    background: rgba(59, 130, 246, 0.35);
    border-color: rgba(59, 130, 246, 0.75);
}

.bop-shell #navigation-modal .gallery-upload .upload-photo {
    justify-self: end;
    border-radius: 12px;
    padding: 8px 14px;
}

@media (min-width: 520px) {
    .bop-shell #navigation-modal .gallery-upload {
        grid-template-columns: minmax(0, 1fr) auto;
        align-items: center;
        justify-items: stretch;
    }

    .bop-shell #navigation-modal .gallery-upload label {
        grid-column: 1 / -1;
    }

    .bop-shell #navigation-modal .gallery-upload input[type="file"] {
        width: min(100%, 280px);
    }

    .bop-shell #navigation-modal .gallery-upload .upload-photo {
        justify-self: start;
        margin-left: 14px;
    }
}

@media (max-width: 767px) {
    .bop-shell #navigation-modal .gallery-upload {
        width: 100%;
        justify-items: stretch;
    }

    .bop-shell #navigation-modal .gallery-upload input[type="file"] {
        width: 100%;
        max-width: none;
        min-width: 0;
        box-sizing: border-box;
    }
}

@media (max-width: 519px) {
    .bop-shell #navigation-modal .gallery-upload input[type="file"] {
        width: 100%;
    }

    .bop-shell #navigation-modal .gallery-upload .upload-photo {
        width: 100%;
        justify-self: stretch;
    }
}

.bop-shell #navigation-modal hr,
.bop-shell #navigation-modal .divider,
.bop-shell #navigation-modal [style*="border-top"] {
    border-color: rgba(255, 255, 255, 0.1) !important;
}

@media (max-width: 900px) {
    .bop-shell #navigation-modal {
        padding: 12px;
        align-items: flex-end;
        justify-content: center;
    }

    .bop-shell #navigation-modal .bop-modal__panel,
    .bop-shell #navigation-modal .modal-content {
        width: auto;
        max-width: 100%;
        border-radius: 16px;
    }
}

@media (max-width: 520px) {
    .bop-shell #navigation-modal .bop-modal__panel,
    .bop-shell #navigation-modal .modal-content {
        border-radius: 14px;
    }

    .bop-shell #navigation-modal .bop-modal__body {
        padding: 14px;
    }
}

@media (min-width: 768px) {
    .bop-shell #navigation-modal .panel-views {
        padding-right: 0;
    }

    .bop-shell #navigation-modal .panel-view {
        display: block;
    }

    .bop-shell #navigation-modal .panel-view--route,
    .bop-shell #navigation-modal .panel-view--gallery {
        overflow: hidden;
        opacity: 1;
        transform: translateY(0);
        max-height: 1200px;
        pointer-events: auto;
    }

    .bop-shell #navigation-modal .panel-view--route {
        max-height: 1200px;
        transition: none;
    }

    .bop-shell #navigation-modal .panel-view--gallery {
        transition: opacity 240ms cubic-bezier(.2,.8,.2,1), transform 240ms cubic-bezier(.2,.8,.2,1), max-height 240ms cubic-bezier(.2,.8,.2,1);
    }

    .bop-shell #navigation-modal.is-editing .panel-view--route {
        opacity: 0;
        transform: translateY(6px);
        max-height: 0;
        pointer-events: none;
        transition: opacity 240ms cubic-bezier(.2,.8,.2,1), transform 240ms cubic-bezier(.2,.8,.2,1), max-height 240ms cubic-bezier(.2,.8,.2,1);
    }

    .bop-shell #navigation-modal:not(.is-gallery-open) .panel-view--gallery,
    .bop-shell #navigation-modal.is-editing .panel-view--gallery {
        opacity: 0;
        transform: translateY(6px);
        max-height: 0;
        pointer-events: none;
    }

    .bop-shell #navigation-modal .panel-nav {
        display: none;
    }
}

/* ==========================================================================
   BOP theme - Day mode (light)
   ========================================================================== */
.bop-shell.bop-theme-day {
    --bg: #f4f7fb;
    --panel: #ffffff;
    --panel2: #f1f5f9;
    --border: #d6e0ec;
    --text: #0f172a;
    --muted: #60708a;
    --accent: #2563eb;
    --danger: #dc2626;
    --success: #16a34a;
    --shadow: 0 12px 24px rgba(15, 23, 42, 0.08);
}

.bop-shell.bop-theme-day .bop-topbar {
    background: rgba(255, 255, 255, 0.92);
    border-bottom: 1px solid var(--border);
    box-shadow: 0 10px 22px rgba(15, 23, 42, 0.08);
}

.bop-shell.bop-theme-day .bop-crumbs,
.bop-shell.bop-theme-day .bop-breadcrumbs {
    color: var(--muted);
}

.bop-shell.bop-theme-day .crumb.active {
    color: #1e3a8a;
}

.bop-shell.bop-theme-day .bop-breadcrumbs strong {
    color: #1e3a8a;
}

.bop-shell.bop-theme-day .bop-sidebar {
    background: var(--panel);
    border-right: 1px solid var(--border);
    box-shadow: 6px 0 18px rgba(15, 23, 42, 0.08);
}

.bop-shell.bop-theme-day .bop-panel {
    background: var(--panel2);
    border-color: var(--border);
    box-shadow: var(--shadow);
}

.bop-shell.bop-theme-day .bop-nav__item {
    color: var(--muted);
}

.bop-shell.bop-theme-day .bop-nav__item:hover,
.bop-shell.bop-theme-day .bop-nav__item.is-active {
    background: #e3ecfb;
    color: #1e3a8a;
    border-color: #c7d2fe;
}

.bop-shell.bop-theme-day .bop-btn--secondary {
    background: #e2e8f0;
    color: #1f2937;
    border-color: #cbd5e1;
}

.bop-shell.bop-theme-day .bop-btn--ghost {
    background: rgba(255, 255, 255, 0.6);
    color: var(--text);
    border-color: var(--border);
}

.bop-shell.bop-theme-day .bop-input,
.bop-shell.bop-theme-day .bop-select {
    background: #ffffff;
    color: var(--text);
    border-color: #cbd5e1;
    box-shadow: inset 0 1px 2px rgba(15, 23, 42, 0.05);
}

.bop-shell.bop-theme-day .bop-input::placeholder,
.bop-shell.bop-theme-day .bop-select::placeholder {
    color: #94a3b8;
}

.bop-shell.bop-theme-day .bop-badge {
    background: #ffffff;
    color: #1f2937;
    border-color: #cbd5e1;
}

.bop-shell.bop-theme-day .bop-badge--free {
    background: rgba(37, 99, 235, 0.1);
    border-color: rgba(37, 99, 235, 0.22);
}

.bop-shell.bop-theme-day .bop-badge--official {
    background: rgba(245, 158, 11, 0.15);
    border-color: rgba(217, 119, 6, 0.55);
}

.bop-shell.bop-theme-day .bop-badge--department {
    background: rgba(14, 165, 233, 0.14);
    border-color: rgba(2, 132, 199, 0.32);
}

.bop-shell.bop-theme-day .bop-toast {
    background: #ffffff;
    color: var(--text);
    border: 1px solid var(--border);
    box-shadow: var(--shadow);
}

.bop-shell.bop-theme-day .bop-spinner {
    border-color: #e2e8f0;
    border-top-color: var(--accent);
}

.bop-shell.bop-theme-day .bop-modal__backdrop {
    background: rgba(15, 23, 42, 0.35);
}

.bop-shell.bop-theme-day .bop-modal__panel {
    background: #ffffff;
    color: var(--text);
}

.bop-shell.bop-theme-day .bop-modal__close {
    color: #1f2937;
}

.bop-shell.bop-theme-day .nav-button {
    color: var(--text);
}

.bop-shell.bop-theme-day #navigation-modal .modal-content,
.bop-shell.bop-theme-day #navigation-modal .bop-modal__panel {
    background: linear-gradient(180deg, #ffffff, #f3f6fb) !important;
    border: 1px solid #d6e0ec;
    box-shadow: 0 22px 50px rgba(15, 23, 42, 0.18);
    color: var(--text);
}

.bop-shell.bop-theme-day #navigation-modal .bop-modal__close {
    background: #f1f5f9;
    border: 1px solid #d8e1ee;
    color: #1f2937;
}

.bop-shell.bop-theme-day #navigation-modal .bop-modal__close:hover {
    background: #e2e8f0;
}

.bop-shell.bop-theme-day #navigation-modal .modal-header {
    border-bottom: 1px solid #e2e8f0;
}

.bop-shell.bop-theme-day #navigation-modal .modal-subtle,
.bop-shell.bop-theme-day #navigation-modal .panel-detail,
.bop-shell.bop-theme-day #navigation-modal .undefined,
.bop-shell.bop-theme-day #navigation-modal .panel-info-label {
    color: var(--muted) !important;
}

.bop-shell.bop-theme-day #navigation-modal .panel-info-value {
    color: var(--text);
}

.bop-shell.bop-theme-day #navigation-modal .nav-button {
    background: #f8fafc;
    border: 1px solid #d8e1ee;
    color: var(--text);
}

.bop-shell.bop-theme-day #navigation-modal .nav-logo {
    filter: none;
}

.bop-shell.bop-theme-day #navigation-modal #nav-apple.nav-button .nav-logo {
    filter: invert(1);
}

.bop-shell.bop-theme-day #navigation-modal .nav-button:hover {
    background: #e2e8f0;
}

.bop-shell.bop-theme-day #navigation-modal .panel-info-label {
    color: var(--muted);
}

.bop-shell.bop-theme-day #navigation-modal .action-button {
    border-color: rgba(15, 23, 42, 0.12);
}

.bop-shell.bop-theme-day #navigation-modal .modal-content .muted,
.bop-shell.bop-theme-day #navigation-modal .modal-content .panel-detail,
.bop-shell.bop-theme-day #navigation-modal .modal-content .undefined {
    color: var(--muted) !important;
}

.bop-shell.bop-theme-day #navigation-modal .modal-content input[type="text"],
.bop-shell.bop-theme-day #navigation-modal .modal-content input[type="number"],
.bop-shell.bop-theme-day #navigation-modal .modal-content select,
.bop-shell.bop-theme-day #navigation-modal .modal-content textarea {
    background: #f8fafc;
    color: var(--text);
    border: 1px solid #cbd5e1;
}

.bop-shell.bop-theme-day #navigation-modal input[type="text"],
.bop-shell.bop-theme-day #navigation-modal input[type="number"],
.bop-shell.bop-theme-day #navigation-modal select,
.bop-shell.bop-theme-day #navigation-modal textarea {
    background: #f8fafc;
    color: var(--text);
    border: 1px solid #cbd5e1;
}

.bop-shell.bop-theme-day #navigation-modal .modal-content input::placeholder,
.bop-shell.bop-theme-day #navigation-modal .modal-content textarea::placeholder {
    color: #94a3b8;
}

.bop-shell.bop-theme-day #navigation-modal .modal-content .button,
.bop-shell.bop-theme-day #navigation-modal .modal-content .button.button-secondary {
    background: #e2e8f0;
    color: #1f2937;
    border: 1px solid #cbd5e1;
}

.bop-shell.bop-theme-day #navigation-modal .bop-btn,
.bop-shell.bop-theme-day #navigation-modal .button,
.bop-shell.bop-theme-day #navigation-modal .button.button-secondary {
    background: #e2e8f0;
    color: #1f2937;
    border: 1px solid #cbd5e1;
}

.bop-shell.bop-theme-day #navigation-modal .modal-content .button:hover {
    background: #dbe4f0;
}

.bop-shell.bop-theme-day #navigation-modal .modal-content .button.button-primary {
    background: #2563eb;
    border-color: #2563eb;
    color: #ffffff;
}

.bop-shell.bop-theme-day #navigation-modal .bop-btn--primary,
.bop-shell.bop-theme-day #navigation-modal .button.button-primary {
    background: #2563eb;
    border-color: #2563eb;
    color: #ffffff;
}

.bop-shell.bop-theme-day #navigation-modal .gallery-upload label {
    color: var(--muted);
}

.bop-shell.bop-theme-day #navigation-modal .gallery-upload input[type="file"] {
    background: #ffffff;
    color: var(--text);
    border: 1px dashed #cbd5e1;
}

.bop-shell.bop-theme-day #navigation-modal .gallery-upload input[type="file"]::file-selector-button,
.bop-shell.bop-theme-day #navigation-modal .gallery-upload input[type="file"]::-webkit-file-upload-button {
    border: 1px solid rgba(37, 99, 235, 0.4);
    background: rgba(37, 99, 235, 0.1);
    color: #1e3a8a;
}

.bop-shell.bop-theme-day #navigation-modal .gallery-upload input[type="file"]::file-selector-button:hover,
.bop-shell.bop-theme-day #navigation-modal .gallery-upload input[type="file"]::-webkit-file-upload-button:hover {
    background: rgba(37, 99, 235, 0.18);
    border-color: rgba(37, 99, 235, 0.6);
}

.bop-shell.bop-theme-day .bop-collage-item {
    background: #ffffff;
    border-color: #d8e1ee;
}

.bop-shell.bop-theme-day .bop-collage-item:hover {
    background: #f1f5f9;
    border-color: #f59e0b;
}

.bop-shell.bop-theme-day .bop-collage-item.is-disabled {
    opacity: 0.6;
    border-style: dashed;
}

.bop-shell.bop-theme-day .bop-collage-item.is-disabled:hover {
    border-color: #cbd5e1;
    background: #f8fafc;
}

.bop-shell.bop-theme-day .bop-collage-warning {
    color: #b91c1c;
}

.bop-shell.bop-theme-day .bop-collage-total {
    background: #ffffff;
    border-color: #d8e1ee;
}

.bop-shell.bop-theme-day .bop-collage-badge--mode {
    background: #e2e8f0;
    color: #0f172a;
    border-color: #cbd5e1;
}

.bop-shell.bop-theme-day .bop-collage-badge--mode.is-optimal {
    background: #16a34a;
    color: #ffffff;
    border-color: rgba(34, 197, 94, 0.6);
}

.bop-shell.bop-theme-day .bop-collage-badge--mode.is-fast {
    background: #e2e8f0;
    color: #0f172a;
}

.bop-shell.bop-theme-day .bop-collage-gain {
    color: #475569;
}

.bop-shell.bop-theme-day .bop-btn--optimal {
    background: linear-gradient(135deg, #16a34a, #22c55e);
    border-color: rgba(34, 197, 94, 0.6);
    color: #ffffff;
}

.bop-shell.bop-theme-day #navigation-modal .modal-content .button.button-primary:hover {
    background: #1d4ed8;
}

.bop-shell.bop-theme-day #navigation-modal .modal-content hr,
.bop-shell.bop-theme-day #navigation-modal .modal-content .divider,
.bop-shell.bop-theme-day #navigation-modal .modal-content [style*="border-top"] {
    border-color: #dbe3ef !important;
}

.bop-shell.bop-theme-day #navigation-modal .panel-nav__btn {
    border: 1px solid #d8e1ee;
    background: #ffffff;
    color: #1f2937;
    box-shadow: 0 6px 14px rgba(15, 23, 42, 0.08);
}

.bop-shell.bop-theme-day #navigation-modal .panel-nav__btn:hover {
    background: #eef2f7;
}

.bop-shell.bop-theme-day #navigation-modal .panel-nav__btn.is-active {
    background: rgba(37, 99, 235, 0.12);
    border-color: rgba(37, 99, 235, 0.4);
    box-shadow: 0 0 0 2px rgba(37, 99, 235, 0.12);
}

.bop-shell.bop-theme-day #navigation-modal .panel-nav__badge {
    color: #0f172a;
    box-shadow: 0 0 0 2px #ffffff;
}

.bop-shell.bop-theme-day .bop-map .mapboxgl-ctrl-group {
    background: #ffffff;
    border: 1px solid var(--border);
    box-shadow: 0 10px 18px rgba(15, 23, 42, 0.08);
}

.bop-shell.bop-theme-day .mapboxgl-ctrl button {
    color: #1f2937;
}

.bop-shell.bop-theme-day .mapboxgl-ctrl-icon {
    filter: none;
}

.bop-shell.bop-theme-day .mapboxgl-ctrl-top-right .mapboxgl-ctrl-group button {
    background: #ffffff;
}

.bop-shell.bop-theme-day .mapboxgl-ctrl-top-right .mapboxgl-ctrl-group button:hover {
    background: #f1f5f9;
}

.bop-shell.bop-theme-day .mapboxgl-ctrl-top-right .mapboxgl-ctrl-group button .mapboxgl-ctrl-icon {
    color: #1f2937;
}

.bop-shell.bop-theme-day .mapboxgl-ctrl-top-right .mapboxgl-ctrl-group button.bop-map-utility-btn.is-active {
    background: rgba(37, 99, 235, 0.12);
    box-shadow: inset 0 0 0 1px rgba(37, 99, 235, 0.2);
}

.bop-shell.bop-theme-day .mapboxgl-ctrl-top-right .mapboxgl-ctrl-group button.bop-map-utility-btn.has-overrides:not(.is-active) {
    background: transparent;
    box-shadow: none;
}

.bop-shell.bop-theme-day .mapboxgl-ctrl-top-right .mapboxgl-ctrl-group button svg {
    stroke: #1f2937;
}

.bop-shell.bop-theme-day .mapboxgl-ctrl-top-right button[title="Activer l'ajout de panneau"] {
    color: #1f2937;
}

.bop-shell.bop-theme-day #add-panel-window {
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.96), rgba(241, 245, 249, 0.96));
    border: 1px solid rgba(148, 163, 184, 0.35);
    box-shadow: 0 18px 40px rgba(15, 23, 42, 0.12), inset 0 1px 0 rgba(255, 255, 255, 0.6);
}

@media (max-width: 767px) {
    .bop-shell.bop-theme-day .bop-sheet .modal-footer {
        background: rgba(255, 255, 255, 0.92);
        border-top: 1px solid var(--border);
        color: var(--text);
    }

    .bop-shell.bop-theme-day #bop-switcher-backdrop {
        background: rgba(15, 23, 42, 0.25);
    }

    .bop-shell.bop-theme-day #bop-switcher .bop-sheet__content {
        background: rgba(255, 255, 255, 0.98);
        border-top: 1px solid var(--border);
        box-shadow: 0 -18px 60px rgba(15, 23, 42, 0.12);
    }

    .bop-shell.bop-theme-day .bop-sheet__handle {
        background: rgba(15, 23, 42, 0.18);
    }

    .bop-shell.bop-theme-day .bop-sheet__title {
        color: var(--text);
    }

    .bop-shell.bop-theme-day .bop-switcher__item {
        background: #f1f5f9;
        border-color: #d8e1ee;
        color: var(--text);
    }

    .bop-shell.bop-theme-day #add-panel-window .bop-help-btn::after {
        background: rgba(255, 255, 255, 0.98);
        color: var(--text);
        border: 1px solid #d8e1ee;
        box-shadow: 0 12px 24px rgba(15, 23, 42, 0.12);
    }

    .bop-shell.bop-theme-day #add-panel-window .bop-add-mode__label {
        color: rgba(15, 23, 42, 0.68);
    }

    .bop-shell.bop-theme-day #add-panel-window .bop-add-mode__control {
        background: rgba(148, 163, 184, 0.12);
        border-color: rgba(148, 163, 184, 0.24);
    }

    .bop-shell.bop-theme-day #add-panel-window .bop-add-mode__option {
        color: rgba(15, 23, 42, 0.7);
    }

    .bop-shell.bop-theme-day #add-panel-window .bop-add-mode__option.is-active {
        background: linear-gradient(135deg, #2563eb, #1d4ed8);
        color: #fff;
        box-shadow: 0 10px 18px rgba(37, 99, 235, 0.16);
    }

    .bop-shell.bop-theme-day #bop-mobile-filters-backdrop {
        background: rgba(15, 23, 42, 0.22);
    }

    .bop-shell.bop-theme-day #bop-mobile-filters .bop-sheet__content {
        background: rgba(255, 255, 255, 0.98);
        border-top: 1px solid var(--border);
        box-shadow: 0 -18px 60px rgba(15, 23, 42, 0.12);
    }

    .bop-shell.bop-theme-day #bop-mobile-filters .bop-mobile-filters__toggle {
        background: #f8fafc;
        border-color: #d8e1ee;
    }

    .bop-shell.bop-theme-day #bop-mobile-bar {
        background: rgba(255, 255, 255, 0.9);
        border-top: 1px solid var(--border);
        box-shadow: 0 -12px 24px rgba(15, 23, 42, 0.08);
    }

    .bop-shell.bop-theme-day #bop-collage-mobile-bar.bop-collage-bar {
        background: rgba(255, 255, 255, 0.96);
        border-color: rgba(148, 163, 184, 0.4);
        box-shadow: 0 18px 40px rgba(15, 23, 42, 0.12);
        padding: 10px;
    }

    .bop-shell.bop-theme-day #bop-collage-mobile-bar .bop-collage-bar__meta {
        color: #1f2937;
        gap: 6px;
        flex-wrap: wrap;
    }

    .bop-shell.bop-theme-day #bop-collage-mobile-bar .bop-collage-bar__title {
        color: #0f172a;
        white-space: nowrap;
    }

    .bop-shell.bop-theme-day #bop-collage-mobile-bar .bop-collage-bar__hint {
        color: var(--muted);
    }

    .bop-shell.bop-theme-day #bop-collage-mobile-bar.is-optimized .bop-collage-bar__title {
        color: #0f172a;
    }

    .bop-shell.bop-theme-day #bop-collage-mobile-bar.is-optimized .bop-collage-bar__hint {
        color: #334155;
    }

    .bop-shell.bop-theme-day #bop-collage-backdrop {
        background: rgba(15, 23, 42, 0.25);
    }

    .bop-shell.bop-theme-day #bop-collage-intro .bop-sheet__content {
        background: rgba(255, 255, 255, 0.98);
        border-top: 1px solid var(--border);
        box-shadow: 0 -18px 60px rgba(15, 23, 42, 0.12);
    }

    .bop-shell.bop-theme-day #bop-collage-intro .bop-collage-sheet__text {
        color: var(--muted);
    }

    .bop-shell.bop-theme-day .bop-mobile-btn {
        background: #f1f5f9;
        color: #1f2937;
        border-color: #d8e1ee;
    }

    .bop-shell.bop-theme-day .bop-mobile-logo {
        background: #ffffff;
        border-color: #e2e8f0;
        box-shadow: 0 10px 30px rgba(15, 23, 42, 0.12);
    }

    .bop-shell.bop-theme-day .bop-mobile-logo__text {
        color: var(--text);
    }
}

.bop-shell.bop-theme-day .bop-drawer-open,
.bop-shell.bop-theme-day .bop-drawer-close {
    background: #ffffff;
    color: #1f2937;
    border: 1px solid var(--border);
    box-shadow: 0 8px 16px rgba(15, 23, 42, 0.1);
}

.bop-shell.bop-theme-day .bop-sidebar__toggle {
    background: #ffffff;
    border-color: var(--border);
    box-shadow: 0 10px 20px rgba(15, 23, 42, 0.12);
}

.bop-shell.bop-theme-day .bop-sidebar__toggle::before {
    border-right: 10px solid #1f2937;
    border-left: 0;
}

.bop-shell.bop-theme-day.is-sidebar-collapsed .bop-sidebar__toggle::before {
    border-right: 0;
    border-left: 10px solid #1f2937;
}

.bop-shell.bop-theme-day.is-sidebar-collapsed .bop-sidebar__toggle {
    background: #ffffff;
    border-color: var(--border);
}

.bop-bulk-import {
    margin-top: 14px;
    padding-top: 14px;
    border-top: 1px solid var(--border);
}

.bop-bulk-import__title {
    font-size: 0.92rem;
    font-weight: 700;
    color: var(--text);
}

.bop-bulk-import__desc {
    margin: 8px 0 0;
    font-size: 0.84rem;
    line-height: 1.45;
    color: var(--muted);
}

.bop-bulk-import__actions {
    display: grid;
    gap: 8px;
    margin-top: 12px;
}

.bop-bulk-import__filter {
    display: grid;
    gap: 6px;
    font-size: 0.82rem;
    color: var(--muted);
}

.bop-bulk-import__select {
    width: 100%;
}

.bop-bulk-import__input {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

.bop-bulk-import__status {
    margin-top: 10px;
    padding: 10px 12px;
    border-radius: 12px;
    font-size: 0.82rem;
    line-height: 1.4;
    border: 1px solid transparent;
    background: rgba(255, 255, 255, 0.06);
}

.bop-bulk-import__status.is-success {
    color: #d1fae5;
    border-color: rgba(16, 185, 129, 0.35);
    background: rgba(16, 185, 129, 0.14);
}

.bop-bulk-import__status.is-error {
    color: #fee2e2;
    border-color: rgba(239, 68, 68, 0.35);
    background: rgba(239, 68, 68, 0.14);
}

.bop-bulk-import .bop-btn.is-loading {
    opacity: 0.7;
    cursor: wait;
}

.bop-shell.bop-theme-day .bop-bulk-import__status {
    background: rgba(148, 163, 184, 0.12);
}

.bop-shell.bop-theme-day .bop-bulk-import__status.is-success {
    color: #065f46;
    border-color: rgba(16, 185, 129, 0.28);
    background: rgba(16, 185, 129, 0.12);
}

.bop-shell.bop-theme-day .bop-bulk-import__status.is-error {
    color: #991b1b;
    border-color: rgba(239, 68, 68, 0.24);
    background: rgba(239, 68, 68, 0.1);
}

/* ==========================================================================
   BOP theme - global dark mode overrides
   The shortcode still carries bop-theme-day for its light skin. These overrides
   let the global footer switch take precedence without changing the markup.
   ========================================================================== */
html[data-bop-theme="dark"] .bop-shell.bop-theme-day {
    --bg: var(--bop-theme-bg, #0d1117);
    --panel: rgba(15, 23, 42, 0.94);
    --panel2: rgba(17, 24, 39, 0.9);
    --border: var(--bop-theme-border, rgba(148, 163, 184, 0.24));
    --text: var(--bop-theme-text, #f8fafc);
    --muted: var(--bop-theme-text-muted, #94a3b8);
    --accent: var(--bop-theme-accent, #0b57d0);
    --danger: var(--bop-color-danger-600, #dc2626);
    --success: var(--bop-color-success-600, #16a34a);
    --shadow: var(--bop-theme-shadow, 0 18px 40px rgba(2, 6, 23, 0.38));
}

html[data-bop-theme="dark"] .bop-shell.bop-theme-day,
html[data-bop-theme="dark"] .bop-shell.bop-theme-day .bop-main {
    background: var(--bg);
    color: var(--text);
}

html[data-bop-theme="dark"] .bop-shell.bop-theme-day .bop-topbar,
html[data-bop-theme="dark"] .bop-shell.bop-theme-day .bop-sidebar,
html[data-bop-theme="dark"] .bop-shell.bop-theme-day .bop-panel,
html[data-bop-theme="dark"] .bop-shell.bop-theme-day .bop-bottombar,
html[data-bop-theme="dark"] .bop-shell.bop-theme-day #add-panel-window,
html[data-bop-theme="dark"] .bop-shell.bop-theme-day .bop-toast {
    background: linear-gradient(180deg, rgba(15, 23, 42, 0.96), rgba(17, 24, 39, 0.92));
    border-color: var(--border);
    color: var(--text);
    box-shadow: var(--shadow);
}

html[data-bop-theme="dark"] .bop-shell.bop-theme-day .bop-sidebar {
    box-shadow: 8px 0 28px rgba(2, 6, 23, 0.38);
}

html[data-bop-theme="dark"] .bop-shell.bop-theme-day .bop-panel {
    background: rgba(17, 24, 39, 0.88);
}

html[data-bop-theme="dark"] .bop-shell.bop-theme-day .bop-panel__title,
html[data-bop-theme="dark"] .bop-shell.bop-theme-day .bop-collage-step__title,
html[data-bop-theme="dark"] .bop-shell.bop-theme-day .bop-setting span,
html[data-bop-theme="dark"] .bop-shell.bop-theme-day .bop-bulk-import__title,
html[data-bop-theme="dark"] .bop-shell.bop-theme-day .bop-bottombar__title {
    color: var(--text);
}

html[data-bop-theme="dark"] .bop-shell.bop-theme-day .bop-panel__desc,
html[data-bop-theme="dark"] .bop-shell.bop-theme-day .bop-help p,
html[data-bop-theme="dark"] .bop-shell.bop-theme-day .bop-setting,
html[data-bop-theme="dark"] .bop-shell.bop-theme-day .bop-bulk-import__desc,
html[data-bop-theme="dark"] .bop-shell.bop-theme-day .bop-bulk-import__filter,
html[data-bop-theme="dark"] .bop-shell.bop-theme-day .bop-collage-note,
html[data-bop-theme="dark"] .bop-shell.bop-theme-day .bop-collage-sub,
html[data-bop-theme="dark"] .bop-shell.bop-theme-day .bop-collage-gain,
html[data-bop-theme="dark"] .bop-shell.bop-theme-day .bop-bottombar__text,
html[data-bop-theme="dark"] .bop-shell.bop-theme-day .bop-crumbs,
html[data-bop-theme="dark"] .bop-shell.bop-theme-day .bop-breadcrumbs {
    color: var(--muted);
}

html[data-bop-theme="dark"] .bop-shell.bop-theme-day .crumb.active,
html[data-bop-theme="dark"] .bop-shell.bop-theme-day .bop-breadcrumbs strong {
    color: var(--text);
}

html[data-bop-theme="dark"] .bop-shell.bop-theme-day .bop-nav__item {
    color: var(--muted);
}

html[data-bop-theme="dark"] .bop-shell.bop-theme-day .bop-nav__item:hover,
html[data-bop-theme="dark"] .bop-shell.bop-theme-day .bop-nav__item.is-active {
    background: rgba(59, 130, 246, 0.16);
    border-color: rgba(96, 165, 250, 0.32);
    color: var(--text);
}

html[data-bop-theme="dark"] .bop-shell.bop-theme-day .bop-btn--secondary,
html[data-bop-theme="dark"] .bop-shell.bop-theme-day .bop-btn--ghost,
html[data-bop-theme="dark"] .bop-shell.bop-theme-day .bop-drawer-open,
html[data-bop-theme="dark"] .bop-shell.bop-theme-day .bop-drawer-close,
html[data-bop-theme="dark"] .bop-shell.bop-theme-day .bop-mobile-btn,
html[data-bop-theme="dark"] .bop-shell.bop-theme-day .bop-switcher__item {
    background: rgba(15, 23, 42, 0.72);
    border-color: var(--border);
    color: var(--text);
}

html[data-bop-theme="dark"] .bop-shell.bop-theme-day .bop-btn--secondary:hover,
html[data-bop-theme="dark"] .bop-shell.bop-theme-day .bop-btn--ghost:hover,
html[data-bop-theme="dark"] .bop-shell.bop-theme-day .bop-mobile-btn:hover,
html[data-bop-theme="dark"] .bop-shell.bop-theme-day .bop-switcher__item:hover {
    background: rgba(31, 41, 55, 0.9);
}

html[data-bop-theme="dark"] .bop-shell.bop-theme-day .bop-btn--optimal {
    background: linear-gradient(135deg, #10b981, #22c55e);
    border-color: rgba(34, 197, 94, 0.62);
    color: #fff;
}

html[data-bop-theme="dark"] .bop-shell.bop-theme-day .bop-input,
html[data-bop-theme="dark"] .bop-shell.bop-theme-day .bop-select,
html[data-bop-theme="dark"] .bop-shell.bop-theme-day .bop-bulk-import__select,
html[data-bop-theme="dark"] .bop-shell.bop-theme-day #navigation-modal input[type="text"],
html[data-bop-theme="dark"] .bop-shell.bop-theme-day #navigation-modal input[type="number"],
html[data-bop-theme="dark"] .bop-shell.bop-theme-day #navigation-modal select,
html[data-bop-theme="dark"] .bop-shell.bop-theme-day #navigation-modal textarea {
    background: rgba(15, 23, 42, 0.86) !important;
    border-color: var(--border) !important;
    color: var(--text) !important;
    -webkit-text-fill-color: var(--text);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.04);
}

html[data-bop-theme="dark"] .bop-shell.bop-theme-day .bop-input::placeholder,
html[data-bop-theme="dark"] .bop-shell.bop-theme-day #navigation-modal input::placeholder,
html[data-bop-theme="dark"] .bop-shell.bop-theme-day #navigation-modal textarea::placeholder {
    color: rgba(203, 213, 225, 0.62);
    -webkit-text-fill-color: rgba(203, 213, 225, 0.62);
}

html[data-bop-theme="dark"] .bop-shell.bop-theme-day .bop-select option,
html[data-bop-theme="dark"] .bop-shell.bop-theme-day #navigation-modal select option {
    background: #0f172a;
    color: #f8fafc;
}

html[data-bop-theme="dark"] .bop-shell.bop-theme-day .bop-badge,
html[data-bop-theme="dark"] .bop-shell.bop-theme-day .bop-collage-total,
html[data-bop-theme="dark"] .bop-shell.bop-theme-day .bop-collage-item {
    background: rgba(15, 23, 42, 0.78);
    border-color: var(--border);
    color: var(--text);
}

html[data-bop-theme="dark"] .bop-shell.bop-theme-day .bop-collage-item:hover {
    background: rgba(30, 41, 59, 0.92);
    border-color: rgba(245, 158, 11, 0.7);
}

html[data-bop-theme="dark"] .bop-shell.bop-theme-day .bop-collage-item.is-disabled:hover {
    background: rgba(15, 23, 42, 0.66);
    border-color: rgba(148, 163, 184, 0.42);
}

html[data-bop-theme="dark"] .bop-shell.bop-theme-day .bop-badge--free {
    background: rgba(37, 99, 235, 0.18);
    border-color: rgba(96, 165, 250, 0.36);
}

html[data-bop-theme="dark"] .bop-shell.bop-theme-day .bop-badge--official {
    background: rgba(245, 158, 11, 0.18);
    border-color: rgba(245, 158, 11, 0.54);
}

html[data-bop-theme="dark"] .bop-shell.bop-theme-day .bop-badge--department {
    background: rgba(14, 165, 233, 0.18);
    border-color: rgba(56, 189, 248, 0.38);
}

html[data-bop-theme="dark"] .bop-shell.bop-theme-day .bop-collage-badge--mode,
html[data-bop-theme="dark"] .bop-shell.bop-theme-day .bop-collage-badge--mode.is-fast {
    background: rgba(15, 23, 42, 0.92);
    border-color: rgba(148, 163, 184, 0.42);
    color: var(--text);
}

html[data-bop-theme="dark"] .bop-shell.bop-theme-day .bop-collage-badge--mode.is-optimal {
    background: var(--success);
    border-color: rgba(34, 197, 94, 0.64);
    color: #fff;
}

html[data-bop-theme="dark"] .bop-shell.bop-theme-day .bop-map .mapboxgl-ctrl-group,
html[data-bop-theme="dark"] .bop-shell.bop-theme-day .mapboxgl-ctrl-top-left .mapboxgl-ctrl-group,
html[data-bop-theme="dark"] .bop-shell.bop-theme-day .mapboxgl-ctrl-top-right .mapboxgl-ctrl-group {
    background: rgba(15, 23, 42, 0.9) !important;
    border: 1px solid var(--border) !important;
    color: var(--text) !important;
    box-shadow: var(--shadow) !important;
    backdrop-filter: blur(12px);
}

html[data-bop-theme="dark"] .bop-shell.bop-theme-day .mapboxgl-ctrl button,
html[data-bop-theme="dark"] .bop-shell.bop-theme-day .mapboxgl-ctrl-top-right .mapboxgl-ctrl-group button {
    background: transparent !important;
    color: var(--text) !important;
}

html[data-bop-theme="dark"] .bop-shell.bop-theme-day .mapboxgl-ctrl button:hover,
html[data-bop-theme="dark"] .bop-shell.bop-theme-day .mapboxgl-ctrl-top-right .mapboxgl-ctrl-group button:hover {
    background: rgba(255, 255, 255, 0.1) !important;
}

html[data-bop-theme="dark"] .bop-shell.bop-theme-day .mapboxgl-ctrl-icon,
html[data-bop-theme="dark"] .bop-shell.bop-theme-day .mapboxgl-ctrl-top-right .mapboxgl-ctrl-icon {
    filter: invert(1);
}

html[data-bop-theme="dark"] .bop-shell.bop-theme-day .mapboxgl-ctrl-top-right .mapboxgl-ctrl-group button svg {
    stroke: var(--text);
}

html[data-bop-theme="dark"] .bop-shell.bop-theme-day .mapboxgl-ctrl-top-right .mapboxgl-ctrl-group button.bop-map-utility-btn.is-active {
    background: rgba(59, 130, 246, 0.22) !important;
    box-shadow: inset 0 0 0 1px rgba(96, 165, 250, 0.42), 0 0 0 3px rgba(37, 99, 235, 0.14);
}

html[data-bop-theme="dark"] .bop-shell.bop-theme-day .mapboxgl-ctrl-top-right .mapboxgl-ctrl-group button.bop-map-utility-btn.has-overrides:not(.is-active) {
    background: transparent !important;
    box-shadow: none !important;
}

html[data-bop-theme="dark"] .bop-shell.bop-theme-day .bop-geocoder .mapboxgl-ctrl-geocoder,
html[data-bop-theme="dark"] .bop-shell.bop-theme-day .bop-geocoder .mapboxgl-ctrl-geocoder input {
    background: rgba(15, 23, 42, 0.94) !important;
    border-color: var(--border) !important;
    color: var(--text) !important;
    -webkit-text-fill-color: var(--text);
}

html[data-bop-theme="dark"] .bop-shell.bop-theme-day .bop-geocoder .mapboxgl-ctrl-geocoder input::placeholder {
    color: rgba(203, 213, 225, 0.62);
    -webkit-text-fill-color: rgba(203, 213, 225, 0.62);
}

html[data-bop-theme="dark"] .bop-shell.bop-theme-day .mapboxgl-ctrl-geocoder .suggestions,
html[data-bop-theme="dark"] .bop-shell.bop-theme-day .mapboxgl-ctrl-geocoder .suggestions > li > a {
    background: rgba(15, 23, 42, 0.98) !important;
    color: var(--text) !important;
}

html[data-bop-theme="dark"] .bop-shell.bop-theme-day .mapboxgl-ctrl-geocoder .suggestions > li > a:hover,
html[data-bop-theme="dark"] .bop-shell.bop-theme-day .mapboxgl-ctrl-geocoder .suggestions > li.active > a {
    background: rgba(59, 130, 246, 0.18) !important;
    color: #fff !important;
}

html[data-bop-theme="dark"] .bop-shell.bop-theme-day .mapboxgl-ctrl-geocoder--suggestion-title {
    color: var(--text) !important;
}

html[data-bop-theme="dark"] .bop-shell.bop-theme-day .mapboxgl-ctrl-geocoder--suggestion-address {
    color: var(--muted) !important;
}

html[data-bop-theme="dark"] .bop-shell.bop-theme-day #navigation-modal .modal-content,
html[data-bop-theme="dark"] .bop-shell.bop-theme-day #navigation-modal .bop-modal__panel,
html[data-bop-theme="dark"] .bop-shell.bop-theme-day .bop-modal__panel {
    background: linear-gradient(180deg, rgba(15, 23, 42, 0.98), rgba(17, 24, 39, 0.96)) !important;
    border-color: var(--border) !important;
    color: var(--text) !important;
    box-shadow: var(--shadow) !important;
}

html[data-bop-theme="dark"] .bop-shell.bop-theme-day #navigation-modal .bop-modal__close,
html[data-bop-theme="dark"] .bop-shell.bop-theme-day .bop-modal__close {
    background: rgba(15, 23, 42, 0.82);
    border-color: var(--border);
    color: var(--text);
}

html[data-bop-theme="dark"] .bop-shell.bop-theme-day #navigation-modal .bop-modal__close:hover,
html[data-bop-theme="dark"] .bop-shell.bop-theme-day .bop-modal__close:hover {
    background: rgba(31, 41, 55, 0.96);
}

html[data-bop-theme="dark"] .bop-shell.bop-theme-day #navigation-modal .modal-header {
    border-bottom-color: var(--border);
}

html[data-bop-theme="dark"] .bop-shell.bop-theme-day #navigation-modal .modal-subtle,
html[data-bop-theme="dark"] .bop-shell.bop-theme-day #navigation-modal .panel-detail,
html[data-bop-theme="dark"] .bop-shell.bop-theme-day #navigation-modal .undefined,
html[data-bop-theme="dark"] .bop-shell.bop-theme-day #navigation-modal .panel-info-label,
html[data-bop-theme="dark"] .bop-shell.bop-theme-day #navigation-modal .modal-content .muted {
    color: var(--muted) !important;
}

html[data-bop-theme="dark"] .bop-shell.bop-theme-day #navigation-modal .panel-info-value {
    color: var(--text);
}

html[data-bop-theme="dark"] .bop-shell.bop-theme-day #navigation-modal .nav-button,
html[data-bop-theme="dark"] .bop-shell.bop-theme-day #navigation-modal .panel-nav__btn,
html[data-bop-theme="dark"] .bop-shell.bop-theme-day #navigation-modal .bop-btn,
html[data-bop-theme="dark"] .bop-shell.bop-theme-day #navigation-modal .button,
html[data-bop-theme="dark"] .bop-shell.bop-theme-day #navigation-modal .button.button-secondary {
    background: rgba(15, 23, 42, 0.78) !important;
    border-color: var(--border) !important;
    color: var(--text) !important;
}

html[data-bop-theme="dark"] .bop-shell.bop-theme-day #navigation-modal .nav-button:hover,
html[data-bop-theme="dark"] .bop-shell.bop-theme-day #navigation-modal .panel-nav__btn:hover,
html[data-bop-theme="dark"] .bop-shell.bop-theme-day #navigation-modal .bop-btn:hover,
html[data-bop-theme="dark"] .bop-shell.bop-theme-day #navigation-modal .button:hover {
    background: rgba(31, 41, 55, 0.96) !important;
}

html[data-bop-theme="dark"] .bop-shell.bop-theme-day #navigation-modal .panel-nav__btn.is-active {
    background: rgba(59, 130, 246, 0.24) !important;
    border-color: rgba(96, 165, 250, 0.5) !important;
    box-shadow: 0 0 0 2px rgba(37, 99, 235, 0.18);
}

html[data-bop-theme="dark"] .bop-shell.bop-theme-day #navigation-modal .panel-nav__badge {
    color: #0f172a;
    box-shadow: 0 0 0 2px #0f172a;
}

html[data-bop-theme="dark"] .bop-shell.bop-theme-day #navigation-modal .bop-btn--primary,
html[data-bop-theme="dark"] .bop-shell.bop-theme-day #navigation-modal .button.button-primary {
    background: var(--accent) !important;
    border-color: var(--accent) !important;
    color: #fff !important;
}

html[data-bop-theme="dark"] .bop-shell.bop-theme-day #navigation-modal hr,
html[data-bop-theme="dark"] .bop-shell.bop-theme-day #navigation-modal .divider,
html[data-bop-theme="dark"] .bop-shell.bop-theme-day #navigation-modal [style*="border-top"] {
    border-color: var(--border) !important;
}

html[data-bop-theme="dark"] .bop-shell.bop-theme-day #navigation-modal .gallery-upload input[type="file"] {
    background: rgba(15, 23, 42, 0.78);
    border-color: rgba(148, 163, 184, 0.36);
    color: var(--text);
}

html[data-bop-theme="dark"] .bop-shell.bop-theme-day #navigation-modal .gallery-upload input[type="file"]::file-selector-button,
html[data-bop-theme="dark"] .bop-shell.bop-theme-day #navigation-modal .gallery-upload input[type="file"]::-webkit-file-upload-button {
    background: rgba(59, 130, 246, 0.16);
    border-color: rgba(96, 165, 250, 0.42);
    color: var(--text);
}

html[data-bop-theme="dark"] .bop-shell.bop-theme-day .bop-modal__backdrop,
html[data-bop-theme="dark"] .bop-shell.bop-theme-day #bop-switcher-backdrop,
html[data-bop-theme="dark"] .bop-shell.bop-theme-day #bop-mobile-filters-backdrop,
html[data-bop-theme="dark"] .bop-shell.bop-theme-day #bop-collage-backdrop,
html[data-bop-theme="dark"] .bop-shell.bop-theme-day #bop-drawer-backdrop {
    background: rgba(2, 6, 23, 0.62);
}

html[data-bop-theme="dark"] .bop-shell.bop-theme-day .bop-sidebar__toggle {
    background: rgba(15, 23, 42, 0.96);
    border-color: var(--border);
    box-shadow: 0 14px 28px rgba(2, 6, 23, 0.42);
}

html[data-bop-theme="dark"] .bop-shell.bop-theme-day .bop-sidebar__toggle::before {
    border-right-color: var(--text);
}

html[data-bop-theme="dark"] .bop-shell.bop-theme-day.is-sidebar-collapsed .bop-sidebar__toggle::before {
    border-left-color: var(--text);
}

html[data-bop-theme="dark"] .bop-shell.bop-theme-day .bop-bulk-import__status {
    background: rgba(15, 23, 42, 0.68);
    border-color: var(--border);
    color: var(--muted);
}

html[data-bop-theme="dark"] .bop-shell.bop-theme-day .bop-bulk-import__status.is-success {
    color: #d1fae5;
    border-color: rgba(16, 185, 129, 0.35);
    background: rgba(16, 185, 129, 0.14);
}

html[data-bop-theme="dark"] .bop-shell.bop-theme-day .bop-bulk-import__status.is-error {
    color: #fee2e2;
    border-color: rgba(239, 68, 68, 0.35);
    background: rgba(239, 68, 68, 0.14);
}

@media (max-width: 767px) {
    html[data-bop-theme="dark"] .bop-shell.bop-theme-day #bop-mobile-bar,
    html[data-bop-theme="dark"] .bop-shell.bop-theme-day #bop-collage-mobile-bar.bop-collage-bar,
    html[data-bop-theme="dark"] .bop-shell.bop-theme-day #bop-switcher .bop-sheet__content,
    html[data-bop-theme="dark"] .bop-shell.bop-theme-day #bop-mobile-filters .bop-sheet__content,
    html[data-bop-theme="dark"] .bop-shell.bop-theme-day #bop-collage-intro .bop-sheet__content,
    html[data-bop-theme="dark"] .bop-shell.bop-theme-day .bop-sheet .modal-footer {
        background: rgba(15, 23, 42, 0.96);
        border-color: var(--border);
        color: var(--text);
        box-shadow: 0 -18px 50px rgba(2, 6, 23, 0.42);
    }

    html[data-bop-theme="dark"] .bop-shell.bop-theme-day .bop-sheet__title,
    html[data-bop-theme="dark"] .bop-shell.bop-theme-day #bop-collage-mobile-bar .bop-collage-bar__title,
    html[data-bop-theme="dark"] .bop-shell.bop-theme-day #bop-collage-mobile-bar.is-optimized .bop-collage-bar__title,
    html[data-bop-theme="dark"] .bop-shell.bop-theme-day .bop-mobile-logo__text {
        color: var(--text);
    }

    html[data-bop-theme="dark"] .bop-shell.bop-theme-day #bop-collage-mobile-bar .bop-collage-bar__hint,
    html[data-bop-theme="dark"] .bop-shell.bop-theme-day #bop-collage-mobile-bar.is-optimized .bop-collage-bar__hint,
    html[data-bop-theme="dark"] .bop-shell.bop-theme-day #bop-collage-intro .bop-collage-sheet__text {
        color: var(--muted);
    }

    html[data-bop-theme="dark"] .bop-shell.bop-theme-day .bop-mobile-logo {
        background: rgba(15, 23, 42, 0.96);
        border-color: var(--border);
        box-shadow: 0 14px 34px rgba(2, 6, 23, 0.42);
    }

    html[data-bop-theme="dark"] .bop-shell.bop-theme-day .bop-mobile-btn.bop-primary {
        background: var(--accent);
        border-color: var(--accent);
        color: #fff;
    }

    html[data-bop-theme="dark"] .bop-shell.bop-theme-day #bop-mobile-filters .bop-mobile-filters__toggle,
    html[data-bop-theme="dark"] .bop-shell.bop-theme-day #add-panel-window .bop-add-mode__control {
        background: rgba(15, 23, 42, 0.74);
        border-color: var(--border);
    }

    html[data-bop-theme="dark"] .bop-shell.bop-theme-day #add-panel-window .bop-add-mode__label,
    html[data-bop-theme="dark"] .bop-shell.bop-theme-day #add-panel-window .bop-add-mode__option {
        color: var(--muted);
    }

    html[data-bop-theme="dark"] .bop-shell.bop-theme-day #add-panel-window .bop-add-mode__option.is-active {
        background: linear-gradient(135deg, var(--accent), var(--cc-primary-strong));
        color: #fff;
        box-shadow: 0 10px 18px rgba(37, 99, 235, 0.24);
    }

    html[data-bop-theme="dark"] .bop-shell.bop-theme-day #add-panel-window .bop-help-btn::after {
        background: rgba(15, 23, 42, 0.98);
        color: var(--text);
        border-color: var(--border);
        box-shadow: var(--shadow);
    }
}

/* Replay button for the onboarding tour. Visual style comes from
   bop-tour.css (.bop-tour-restart — themeable via --bop-tour-restart-*).
   Positioned at the bottom-right of the map area: the bottom-LEFT
   would be hidden by the expanded sidebar on desktop. Sits above the
   Mapbox attribution and below modals. */
.carte-collage-tour-restart {
    position: absolute;
    right: 12px;
    bottom: calc(40px + env(safe-area-inset-bottom, 0px));
    z-index: 7;
}
@media (max-width: 767px) {
    /* Sit clearly above the mobile bottom action bar (Collage / BOP /
       Ajouter — ~120 px tall on most phones with safe-area). */
    .carte-collage-tour-restart {
        bottom: calc(140px + env(safe-area-inset-bottom, 0px));
    }
}