/* ==========================================================
   Harmonisation DA SAT-ellites dashboards
   Surcouche de finition commune aux dashboards
   DPE public / DPE privé / vulnérabilités public / vulnérabilités privé / portrait social

   Principe :
   - garder les comportements, données, bulles, menus et cartes existants ;
   - réserver les couleurs aux données cartographiques et aux légendes ;
   - calmer l’interface : noir / blanc / gris, typographies allégées ;
   - signaler les états actifs par contraste, ombre, grisage ou couleur de donnée,
     sans surmultiplier les contours ni les effets.
   ========================================================== */

:root{
  --sat-ui-ink:#111;
  --sat-ui-text:#2f2f2f;
  --sat-ui-muted:#666;
  --sat-ui-line:#ded9d1;
  --sat-ui-line-soft:#e7e3dc;
  --sat-ui-hover:#f1f1f1;
  --sat-ui-soft:#f7f7f7;
  --sat-ui-focus:rgba(17,17,17,.30);
  --sat-ui-shadow-soft:0 8px 18px rgba(0,0,0,.08);
  --sat-ui-shadow-active:0 12px 28px rgba(0,0,0,.18);
}

/* Typographies secondaires : filtres, boutons, lignes d’interface */
.filter-title,
.filter-label,
.chip,
.multi-btn,
.multi-action,
.map-metric-toggle button,
.metric-tabs button,
.legend-all,
.row,
select,
input,
.filter-title .reset,
.filter-title button,
#reset{
  font-weight:600 !important;
  letter-spacing:.01em;
}

.filter-title{
  font-size:12px;
  color:var(--sat-ui-ink);
}

.filter-label{
  font-size:10.5px;
  color:var(--sat-ui-muted);
  text-transform:none;
}

/* Champs, menus et sélecteurs */
select,
input,
.multi-btn{
  color:var(--sat-ui-ink) !important;
  border-color:var(--sat-ui-line) !important;
  background:#fff !important;
  box-shadow:none !important;
}

select:hover,
input:hover,
.multi-btn:hover{
  border-color:#bdb8b0 !important;
  background:var(--sat-ui-hover) !important;
  box-shadow:none !important;
}

select:focus,
input:focus,
.multi-btn:focus,
.multi-btn:focus-visible{
  outline:none !important;
  border-color:#bdb8b0 !important;
  box-shadow:var(--sat-ui-shadow-soft) !important;
}

/* Boutons, chips et actions : inactif blanc/noir ; actif noir/blanc */
.map-metric-toggle button,
.metric-tabs button,
.chip,
.multi-action,
.legend-all,
.filter-title .reset,
.filter-title button,
#reset{
  background:#fff !important;
  color:var(--sat-ui-ink) !important;
  border:1px solid var(--sat-ui-line) !important;
  box-shadow:none !important;
  background-image:none !important;
}

.map-metric-toggle button:hover,
.metric-tabs button:hover,
.chip:hover,
.multi-action:hover,
.legend-all:hover,
.filter-title .reset:hover,
.filter-title button:hover,
#reset:hover{
  background:var(--sat-ui-hover) !important;
  color:var(--sat-ui-ink) !important;
  border-color:#bdb8b0 !important;
  box-shadow:none !important;
}

.map-metric-toggle button.active,
.metric-tabs button.active,
.chip.active,
.multi-action.primary{
  background:var(--sat-ui-ink) !important;
  color:#fff !important;
  border-color:transparent !important;
  background-image:none !important;
  box-shadow:none !important;
}

.map-metric-toggle button.active:hover,
.metric-tabs button.active:hover,
.chip.active:hover,
.multi-action.primary:hover{
  background:#000 !important;
  color:#fff !important;
  border-color:transparent !important;
}

/* Focus clavier : lisible mais plus discret qu’un contour noir plein */
.map-metric-toggle button:focus-visible,
.metric-tabs button:focus-visible,
.chip:focus-visible,
.multi-action:focus-visible,
.legend-all:focus-visible,
.filter-title .reset:focus-visible,
.filter-title button:focus-visible,
#reset:focus-visible,
.row:focus-visible,
.sat-card.collectif:focus-visible,
.sat-card.bailleur-button:focus-visible{
  outline:2px solid var(--sat-ui-focus) !important;
  outline-offset:3px;
  box-shadow:none !important;
}

/* Menus déroulants territoriaux */
.multi.open .multi-btn{
  border-color:#bdb8b0 !important;
  box-shadow:var(--sat-ui-shadow-soft) !important;
}

.multi-menu{
  border-color:var(--sat-ui-line) !important;
  box-shadow:0 18px 34px rgba(0,0,0,.12) !important;
}

.multi-option{
  font-weight:500 !important;
  color:var(--sat-ui-ink) !important;
}

.multi-option:hover{
  background:var(--sat-ui-hover) !important;
}

.multi-option input{
  accent-color:var(--sat-ui-ink) !important;
}

/* Légendes et lignes filtrables :
   les couleurs de données restent dans les pastilles, barres et remplissages. */
.row{
  font-weight:500 !important;
  color:var(--sat-ui-ink) !important;
  border-color:transparent !important;
}

.row:hover{
  background:var(--sat-ui-hover) !important;
  border-color:transparent !important;
  box-shadow:none !important;
}

.row.is-active{
  background:#f3f3f3 !important;
  border-color:transparent !important;
  box-shadow:none !important;
}

.letter-filter .row-label,
.row-label{
  font-weight:600 !important;
  color:var(--sat-ui-ink) !important;
}

/* Logos bailleurs / partenaires :
   actif par ombre et présence, inactif par calme ou grisage. */
.sat-card.collectif,
.sat-card.bailleur-button{
  border-color:#e2ddd4 !important;
  background:#fff !important;
  box-shadow:none !important;
}

.sat-card.collectif:hover,
.sat-card.bailleur-button:hover{
  transform:translateY(-1px);
  border-color:#bdb8b0 !important;
  background:var(--sat-ui-hover) !important;
  box-shadow:none !important;
}

.sat-card.collectif.is-active,
.sat-card.bailleur-button.is-active{
  border-color:#e2ddd4 !important;
  background:#fff !important;
  box-shadow:var(--sat-ui-shadow-active) !important;
}

.sat-card.bailleur-button.is-muted,
.sat-card.collectif.is-muted{
  opacity:.52 !important;
  background:#fff !important;
  box-shadow:none !important;
}

.sat-card.bailleur-button.is-muted .sat-logo-wrap,
.sat-card.collectif.is-muted .sat-logo-wrap{
  filter:grayscale(1);
}

/* Pastille éventuelle des cartes : discrète, jamais turquoise */
.sat-card.collectif::after,
.sat-card.bailleur-button::after{
  border-color:#cfc9c0 !important;
  background:#fff !important;
}

.sat-card.collectif.is-active::after,
.sat-card.bailleur-button.is-active::after{
  border-color:transparent !important;
  background:var(--sat-ui-ink) !important;
}

/* Notes, indications et textes secondaires */
.map-note,
.volume-hint,
.note,
.popup-meta{
  color:var(--sat-ui-muted) !important;
}

.map-note,
.volume-hint,
.note{
  background:#fbfbfb !important;
  border-color:var(--sat-ui-line-soft) !important;
}

/* Contrôles Leaflet : sobriété noir / blanc / gris */
.leaflet-bar{
  border:0 !important;
  box-shadow:var(--sat-ui-shadow-soft) !important;
}

.leaflet-bar a{
  color:var(--sat-ui-ink) !important;
}

.leaflet-bar a:hover{
  background:var(--sat-ui-hover) !important;
  color:var(--sat-ui-ink) !important;
}

/* Popups : plus éditoriales, moins applicatives */
.leaflet-popup-content-wrapper,
.leaflet-popup-tip{
  border-radius:0 !important;
  box-shadow:0 18px 38px rgba(22,34,38,.15) !important;
}

.popup-title,
.popup-subtitle{
  color:var(--sat-ui-ink) !important;
}

/* Ne pas neutraliser les éléments de données :
   - .fill
   - .dot
   - .letter-dot
   - .volume-cluster
   - bulles Leaflet / clusters / couleurs DPE-GES
   conservent leurs couleurs métier. */

/* Bascule Carte / Synthèse : hors rail gauche, bornée à la zone dashboard */
.dashboard-shell .main-grid{
  position:relative;
}

.dashboard-floating-switch{
  display:flex !important;
  align-items:center !important;
  justify-content:center !important;
  gap:8px !important;
  width:max-content !important;
  max-width:calc(100% - 28px) !important;
  padding:7px !important;
  border:1px solid #e7e3dc !important;
  border-radius:999px !important;
  background:rgba(255,255,255,.94) !important;
  box-shadow:0 12px 26px rgba(0,0,0,.08) !important;
  backdrop-filter:blur(8px) !important;
  z-index:40 !important;
}

.dashboard-view-map .dashboard-floating-switch{
  position:sticky !important;
  top:84px !important;
  margin:14px auto -58px !important;
}

.bailleur-strip ~ .dashboard-shell .dashboard-view-map .dashboard-floating-switch,
.sat-grid ~ .dashboard-shell .dashboard-view-map .dashboard-floating-switch{
  top:188px !important;
}

.dashboard-view-synth .dashboard-floating-switch{
  position:sticky !important;
  top:84px !important;
  margin:0 auto 12px !important;
}

.dashboard-floating-switch button{
  width:108px !important;
  min-width:0 !important;
  display:inline-flex !important;
  align-items:center !important;
  justify-content:center !important;
  border:1px solid #ded9d1 !important;
  border-radius:999px !important;
  background:#fff !important;
  color:#111 !important;
  padding:10px 12px !important;
  font-size:12px !important;
  font-weight:650 !important;
  letter-spacing:.01em !important;
  line-height:1 !important;
  box-shadow:none !important;
  cursor:pointer !important;
  transform:none !important;
}

a.module-pill{
  text-decoration:none !important;
}

.dashboard-floating-switch button:hover{
  background:#f1f1f1 !important;
  border-color:#bdb8b0 !important;
  color:#111 !important;
}

.dashboard-floating-switch button.active{
  background:#111 !important;
  border-color:#111 !important;
  color:#fff !important;
}

@media(max-width:1320px) and (min-width:721px){
  .bailleur-strip ~ .dashboard-shell .dashboard-view-map .dashboard-floating-switch,
  .sat-grid ~ .dashboard-shell .dashboard-view-map .dashboard-floating-switch{
    top:304px !important;
  }
}

@media(max-width:720px){
  .dashboard-floating-switch,
  .dashboard-view-map .dashboard-floating-switch,
  .dashboard-view-synth .dashboard-floating-switch{
    position:relative !important;
    top:auto !important;
    width:100% !important;
    max-width:100% !important;
    margin:0 0 10px !important;
  }

  .dashboard-floating-switch button{
    width:50% !important;
  }
}

/* Mode embarqué utilisé par la page publique unifiée. */
body.dashboard-embed{
  background:#fff !important;
}

body.dashboard-embed .topbar,
body.dashboard-embed .hero,
body.dashboard-embed .app-sidebar,
body.dashboard-embed .dashboard-left-rail,
body.dashboard-embed .back-to-top{
  display:none !important;
}

body.dashboard-embed .app{
  max-width:none !important;
  width:100% !important;
  margin:0 !important;
  padding:0 !important;
}

body.dashboard-embed .dashboard-shell{
  display:block !important;
  margin:0 !important;
  padding:0 !important;
}

body.dashboard-embed .bailleur-strip,
body.dashboard-embed .sat-grid{
  position:static !important;
  top:auto !important;
  z-index:auto !important;
  margin:0 0 10px !important;
  border-left:0 !important;
  border-right:0 !important;
}

body.dashboard-embed .dashboard-shell .main-grid{
  display:block !important;
  min-width:0 !important;
}

body.dashboard-embed .dashboard-view-map .dashboard-floating-switch{
  position:absolute !important;
  top:14px !important;
  left:50% !important;
  margin:0 !important;
  transform:translateX(-50%) !important;
}

body.dashboard-embed .dashboard-view-synth .dashboard-floating-switch{
  position:sticky !important;
  top:10px !important;
  margin:0 auto 12px !important;
}

body.dashboard-embed .dashboard-shell .main-grid.dashboard-view-map .map-card{
  height:calc(100vh - 112px) !important;
  min-height:600px !important;
}

body.dashboard-embed .dashboard-shell .main-grid.dashboard-view-map #map{
  min-height:600px !important;
}

body.dashboard-embed .dashboard-shell .main-grid.dashboard-view-synth .side-card{
  min-height:calc(100vh - 24px) !important;
}

@media(max-width:720px){
  body.dashboard-embed .dashboard-view-map .dashboard-floating-switch,
  body.dashboard-embed .dashboard-view-synth .dashboard-floating-switch{
    position:relative !important;
    top:auto !important;
    left:auto !important;
    transform:none !important;
    margin:0 0 10px !important;
  }
}