/* Stili di templates/_main/index_map.html */
/* ── Variabile altezza navbar ──────────────────── */
/* 10px padding-top + ~50px nav + buffer: usata da welcome card e offcanvas */
:root { --navbar-h: 72px; }

/* ── Layout pagina ─────────────────────────────── */
body { overflow: hidden; }

/* ── Navbar flottante (pill style) ─────────────── */

/* Il wrapper è il container fixed; il suo padding crea
   lo spazio tra la nav e i bordi dello schermo.        */
#fnav-wrap {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 1050;
  padding: 10px 12px 0;
  pointer-events: none;   /* i click passano alla mappa sotto il padding */
}

/* La nav vera e propria è static dentro il wrapper fixed */
#fnav-wrap > nav {
  position: static !important;
  background: rgba(18, 23, 33, 0.92) !important;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border-radius: .5rem !important;
  border-bottom: none !important;
  box-shadow: 0 4px 20px rgba(0, 0, 0, .35) !important;
  pointer-events: all;    /* re-abilita i click sulla nav */
}

/* testo link */
#fnav-wrap .navbar-brand { color: rgba(255,255,255,.9) !important; }

#fnav-wrap .nav-link,
#fnav-wrap .nav-link.dropdown-toggle { color: rgba(255,255,255,.6) !important; }

#fnav-wrap .nav-link:hover,
#fnav-wrap .nav-link:focus {
  color: rgba(255,255,255,.95) !important;
  background-color: rgba(255,255,255,.08) !important;
  border-radius: .25rem;
}

/* toggler mobile */
#fnav-wrap .navbar-toggler {
  border-color: rgba(255,255,255,.3) !important;
}
#fnav-wrap .navbar-toggler-icon {
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='rgba%28255%2c255%2c255%2c0.75%29' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e") !important;
}

/* quick search */
#fnav-wrap #quickSearchInput {
  background: rgba(255,255,255,.1) !important;
  border-color: rgba(255,255,255,.2) !important;
  color: rgba(255,255,255,.85) !important;
}
#fnav-wrap #quickSearchInput::placeholder { color: rgba(255,255,255,.35) !important; }

/* caret dei dropdown */
#fnav-wrap .dropdown-toggle::after { filter: brightness(3); }

/* ── Mappa full-viewport ───────────────────────── */
#map-wrap {
  position: relative;
  height: 100vh;
  overflow: hidden;
}

#map {
  position: absolute;
  inset: 0;
  z-index: 0;
}

/* ── Welcome card ──────────────────────────────── */
#welcome-card {
  position: absolute;
  left: 16px;
  top: calc(var(--navbar-h) + 16px);  /* sotto la navbar flottante */
  width: min(25rem, calc(100% - 32px));  /* phones: 16px gutter on both sides */
  z-index: 900;
  border-radius: .75rem;
  /* bg semi-trasparente: funziona bene su satellite */
  background: rgba(255, 255, 255, .96) !important;
  transition: opacity .28s ease, transform .28s ease;
}

#welcome-card.is-dismissed {
  opacity: 0;
  transform: translateX(-10px);
  pointer-events: none;
}

.wc-eyebrow {
  font-size: var(--fs-2xs);
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--bs-secondary-color);
  margin-bottom: .5rem;
}

.wc-title {
  font-family: var(--font-serif);
  font-size: 2.25rem;
  color: var(--bs-body-color);
  line-height: 1;
  margin-bottom: .3rem;
}

.wc-subtitle {
  /*font-size: var(--fs-xs);*/
  color: var(--bs-gray-700);
  line-height: 1.45;
  margin-bottom: .875rem;
}

.wc-desc {
  font-size: var(--fs-xs);
  color: var(--bs-secondary-color);
  line-height: 1.7;
  margin-bottom: 1.125rem;
}

.wc-footer {
  margin-top: .875rem;
  padding-top: .75rem;
  border-top: 1px solid rgba(0, 0, 0, .08);
  font-size: var(--fs-2xs);
  color: var(--bs-secondary-color);
  line-height: 1.5;
}

/* ── Offcanvas panel (parte sotto la navbar) ───── */
#site-panel {
  top: var(--navbar-h) !important;
}

/* "Go to archive": outside .offcanvas-body, so it stays pinned while charts scroll */
.sp-footer {
  padding: .75rem 1rem;
  border-top: 1px solid var(--bs-offcanvas-border-color, var(--bs-border-color-translucent));
}

/* "+ N others" / "show fewer" rows of the corpus charts */
.sp-bar-toggle { cursor: pointer; outline: none; }
.sp-bar-toggle:hover text:first-of-type,
.sp-bar-toggle:focus-visible text:first-of-type { text-decoration: underline; }

/* tablet count, top-right of the header, same size as .sp-name */
.sp-count-n {
  font-family: var(--font-serif);
  font-size: 1.75rem;
  line-height: 1.1;
  color: var(--bs-body-color);
  font-variant-numeric: tabular-nums;
}

/* close tab sticking out of the panel's left edge (.offcanvas does not clip).
   Same bg and border tokens as the panel; 1px wider so it covers the panel's
   own left border and reads as one piece with it. */
.sp-close-tab {
  position: absolute;
  top: 0;
  left: -2.25rem;
  width: calc(2.25rem + 1px);
  height: 2.5rem;
  padding: 0;
  background: var(--bs-offcanvas-bg, var(--bs-body-bg));
  border: 1px solid var(--bs-offcanvas-border-color, var(--bs-border-color-translucent));
  border-right: 0;
  border-radius: .75rem 0 0 .75rem;
  box-shadow: -.25rem .25rem .75rem rgba(0, 0, 0, .08);
  color: var(--bs-secondary-color);
  font-size: var(--fs-sm);
  cursor: pointer;
  transition: color .15s ease;
}
.sp-close-tab:hover,
.sp-close-tab:focus-visible { color: var(--bs-body-color); }

/* full-width panel on phones: the tab would be off-screen → inside the left edge */
@media (max-width: 575.98px) {
  .sp-close-tab {
    left: 0;
    border-left: 0;
    border-right: 1px solid var(--bs-offcanvas-border-color, var(--bs-border-color-translucent));
    border-radius: 0 .75rem .75rem 0;
    box-shadow: none;
  }
}

.sp-name {
  font-family: var(--font-serif);
  font-size: 1.75rem;
  color: var(--bs-body-color);
  line-height: 1.1;
  margin-bottom: .25rem;
}

.sp-modern {
  font-family: var(--font-serif);
  font-style: italic;
  font-size: var(--fs-sm);
  color: var(--bs-secondary-color);
}

/* "Corpus": section heading, one level above the .sp-label subsections */
.sp-section {
  font-family: var(--font-serif);
  font-size: var(--fs-lg);
  font-weight: 600;
  color: var(--bs-body-color);
  margin-bottom: .75rem;
}

/* panel labels: Tablets/Area boxes, corpus subsections */
.sp-label {
  font-size: var(--fs-xs);
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--bs-gray-700);
  margin-bottom: .375rem;
}

/* thin proportion bars (Provenance, Available texts): track + fills, legend dot */
.sp-bar {
  display: flex;
  height: 5px;
  border-radius: 3px;
  overflow: hidden;
  background: rgba(0,0,0,.08);
}
.sp-bar > div {
  width: 0%;
  transition: width .6s ease;
}
.sp-dot {
  display: inline-block;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  vertical-align: middle;
  margin-right: 3px;
}
.sp-ink { background: var(--bs-body-color); }

.sp-dates {
  margin-top: .25rem;
  font-family: var(--font-serif);
  font-size: var(--fs-sm);
  color: var(--bs-body-color);
  font-variant-numeric: tabular-nums;
}

/* ── Marker ────────────────────────────────────── */
/* Su satellite: contorno bianco per visibilità */
/* DAPCA archives: più grandi, amber più saturo */
.m-dapca {
  width: 18px;
  height: 18px;
  background: var(--primary-map-light);                           /* amber più luminoso */
  border: 3px solid rgba(255, 255, 255, .95);
  border-radius: 50%;
  cursor: pointer;
  box-shadow: 0 2px 8px rgba(0,0,0,.65);
  transition: transform .12s ease;
}
.m-dapca:hover  { transform: scale(1.45); }
.m-dapca.active { transform: scale(1.45); background: var(--primary-map); }

/* LBA Capitals: diamante grigio-argento — forma distinta, ben visibile */
.m-capital {
  width: 13px;
  height: 13px;
  background: rgba(245, 245, 245, .95);
  border: 2px solid rgba(50, 50, 50, .85);
  transform: rotate(45deg);
  box-shadow: 0 1px 5px rgba(0,0,0,.55);
}

/* Reference sites: piccolo ma con alone scuro */
.m-ref {
  width: 8px;
  height: 8px;
  background: rgba(210, 210, 210, .9);
  border: 2px solid rgba(255, 255, 255, .9);
  border-radius: 50%;
  box-shadow: 0 0 0 1.5px rgba(0,0,0,.45);
}

/* ── Controlli sinistra (area filter + legenda) ── */
#left-controls {
  position: absolute;
  bottom: 28px;
  left: 16px;
  z-index: 900;
  display: flex;
  flex-direction: column;
  gap: 8px;
  align-items: stretch;
}

/* ── Area filter ────────────────────────────────── */
#area-filter {
  background: rgba(255, 255, 255, .92);
  border: 1px solid rgba(0, 0, 0, .12);
  border-radius: .5rem;
  padding: .5625rem .8125rem;
  min-width: 160px;
}

.filter-section-title {
  font-size: var(--fs-2xs);
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--bs-gray-500);
  margin-bottom: 6px;
}

.area-btn {
  display: block;
  width: 100%;
  text-align: left;
  background: none;
  border: .5px solid rgba(0, 0, 0, .15);
  border-radius: .25rem;
  font-size: var(--fs-xs);
  color: var(--bs-gray-700);
  padding: 3px 8px;
  margin-bottom: 3px;
  cursor: pointer;
  transition: background .1s, color .1s, border-color .1s;
}
.area-btn:last-child { margin-bottom: 0; }
.area-btn:hover { background: var(--bs-tertiary-bg); }
.area-btn.active { background: var(--bs-body-color); color: #fff; border-color: var(--bs-body-color); }

/* ── Legenda ────────────────────────────────────── */
#map-legend {
  background: rgba(255, 255, 255, .92);
  border: 1px solid rgba(0, 0, 0, .12);
  border-radius: .5rem;
  padding: .5625rem .8125rem;
  font-size: var(--fs-xs);
  color: var(--bs-gray-700);
}

.legend-row { display: flex; align-items: center; gap: 7px; }
.legend-row + .legend-row { margin-top: 5px; }

/* ── Timeline ───────────────────────────────────── */
#timeline-panel {
  position: absolute;
  bottom: 28px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 900;
  background: rgba(255, 255, 255, .92);
  border: 1px solid rgba(0, 0, 0, .12);
  border-radius: .5rem;
  padding: 10px 18px 13px;
  width: 400px;
}

.tl-header {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  margin-bottom: 8px;
}

.tl-title {
  font-size: var(--fs-2xs);
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--bs-gray-500);
}

.tl-values {
  font-size: var(--fs-xs);
  font-weight: 500;
  color: var(--bs-body-color);
}

.tl-slider-wrap {
  position: relative;
  height: 20px;
}

.tl-track-bg {
  position: absolute;
  top: 50%; left: 0; right: 0;
  height: 4px;
  transform: translateY(-50%);
  background: var(--bs-border-color);
  border-radius: 2px;
  pointer-events: none;
}

.tl-track-fill {
  position: absolute;
  top: 50%;
  height: 4px;
  transform: translateY(-50%);
  background: var(--primary-map);
  border-radius: 2px;
  pointer-events: none;
}

.tl-slider-wrap input[type="range"] {
  position: absolute;
  left: 0; top: 0;
  width: 100%; height: 100%;
  margin: 0; padding: 0;
  background: transparent;
  -webkit-appearance: none;
  appearance: none;
  pointer-events: none;
}

.tl-slider-wrap input[type="range"]::-webkit-slider-runnable-track {
  background: transparent;
  height: 4px;
}
.tl-slider-wrap input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none;
  pointer-events: all;
  width: 16px; height: 16px;
  border-radius: 50%;
  background: var(--bs-body-color);
  border: 2.5px solid #fff;
  cursor: grab;
  box-shadow: 0 1px 5px rgba(0,0,0,.45);
  margin-top: -6px;
}
.tl-slider-wrap input[type="range"]:active::-webkit-slider-thumb {
  cursor: grabbing;
  background: var(--primary-map);
}

.tl-slider-wrap input[type="range"]::-moz-range-track {
  background: transparent;
  height: 4px;
}
.tl-slider-wrap input[type="range"]::-moz-range-thumb {
  pointer-events: all;
  width: 14px; height: 14px;
  border-radius: 50%;
  background: var(--bs-body-color);
  border: 2.5px solid #fff;
  cursor: grab;
  box-shadow: 0 1px 4px rgba(0,0,0,.4);
}

.tl-ticks {
  display: flex;
  justify-content: space-between;
  margin-top: 5px;
  font-size: var(--fs-2xs);
  color: var(--bs-gray-500);
}

/* ── Marker faded (filtro attivo) ─────────────── */
.marker-faded {
  opacity: .12 !important;
  pointer-events: none !important;
  transition: opacity .2s;
}

.ld-dapca {
  width:10px; height:10px;
  background:var(--primary-map);
  border:2px solid rgba(255,255,255,.95);
  border-radius:50%; flex-shrink:0;
  box-shadow: 0 0 0 1px rgba(0,0,0,.3);
}
.ld-capital {
  width: 10px; height: 10px;
  background: rgba(245,245,245,.95);
  border: 2px solid rgba(50,50,50,.85);
  transform: rotate(45deg);
  flex-shrink: 0;
}
.ld-ref {
  width:8px; height:8px;
  background:rgba(230,230,230,.85);
  border:1.5px solid rgba(255,255,255,.9);
  border-radius:50%; flex-shrink:0; margin:0 1px;
  box-shadow: 0 0 0 1px rgba(0,0,0,.3);
}

/* ── Leaflet top-left controls: scendi sotto la navbar ─────────────── */
.leaflet-top.leaflet-left {
  top: calc(var(--navbar-h) + 8px) !important;
}

/* ── Leaflet tweaks ─────────────────────────────── */
.leaflet-tooltip {
  background: rgba(18, 23, 33, .9) !important;
  color: #f3f4f6 !important;
  border: none !important;
  border-radius: 4px !important;
  padding: 3px 8px !important;
  font-family: var(--font-serif) !important;
  font-size: var(--fs-xs) !important;
  box-shadow: 0 1px 4px rgba(0,0,0,.3) !important;
}
.leaflet-tooltip-top::before {
  border-top-color: rgba(18, 23, 33, .9) !important;
}
.leaflet-tooltip-bottom::before {
  border-bottom-color: rgba(18, 23, 33, .9) !important;
}
.leaflet-tooltip-left::before {
  border-left-color: rgba(18, 23, 33, .9) !important;
}
.leaflet-tooltip-right::before {
  border-right-color: rgba(18, 23, 33, .9) !important;
}

/* Major LBA centres: inverted label — light plate, dark text. Same font as the
   DAPCA labels; the contrast flip is what tells corpus site from context site. */
.leaflet-tooltip.tt-capital {
  background: rgba(248, 249, 250, .94) !important;
  color: #12171f !important;
  font-size: var(--fs-xs) !important;
  box-shadow: 0 1px 4px rgba(0,0,0,.25) !important;
}
.leaflet-tooltip-top.tt-capital::before {
  border-top-color: rgba(248, 249, 250, .94) !important;
}
.leaflet-tooltip-bottom.tt-capital::before {
  border-bottom-color: rgba(248, 249, 250, .94) !important;
}
.leaflet-tooltip-left.tt-capital::before {
  border-left-color: rgba(248, 249, 250, .94) !important;
}
.leaflet-tooltip-right.tt-capital::before {
  border-right-color: rgba(248, 249, 250, .94) !important;
}
.leaflet-control-zoom {
  border: none !important;
  border-radius: 6px !important;
  overflow: hidden;
  box-shadow: 0 2px 6px rgba(0,0,0,.35) !important;
}
.leaflet-control-zoom a {
  border: none !important;
  border-bottom: 1px solid rgba(0,0,0,.1) !important;
  color: var(--bs-gray-800) !important;
}
.leaflet-control-zoom a:last-child { border-bottom: none !important; }
.leaflet-control-attribution {
  background: rgba(255,255,255,.7) !important;
  /*font-size: var(--fs-2xs) !important;*/
  font-size: var(--fs-xs) !important;
}


/* ── Bbox panel (top-right) ─────────────────────── */
#bbox-panel {
  position: absolute;
  top: calc(var(--navbar-h, 72px) + 8px);
  right: 8px;
  z-index: 900;
  width: 260px;
  background: rgba(255, 255, 255, .94);
  border: 1px solid rgba(0, 0, 0, .12);
  border-radius: .5rem;
  box-shadow: 0 2px 8px rgba(0, 0, 0, .18);
  font-family: var(--font-serif);
}
#bbox-panel-hd {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: .5625rem .8125rem;
  border-bottom: 1px solid rgba(0, 0, 0, .08);
}
.bp-title {
  font-size: var(--fs-xs);
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--bs-gray-700);
}
#bbox-toggle {
  background: none;
  border: none;
  padding: 2px 4px;
  cursor: pointer;
  color: var(--bs-gray-600);
  line-height: 1;
  font-size: var(--fs-xs);
  transition: transform .22s ease;
}
#bbox-panel.is-collapsed #bbox-toggle { transform: rotate(180deg); }
#bbox-panel-body {
  padding: .625rem .8125rem .75rem;
  max-height: 52vh;
  overflow-y: auto;
  transition: max-height .25s ease, padding .25s ease, opacity .2s ease;
  opacity: 1;
}
#bbox-panel.is-collapsed #bbox-panel-body {
  max-height: 0;
  padding-top: 0;
  padding-bottom: 0;
  overflow: hidden;
  opacity: 0;
}
#bbox-chart-inner svg { display: block; overflow: visible; }

/* bottone "Project info" (L.Control in alto a sinistra) */
.map-info-btn {
  background: rgba(18, 23, 33, .88);
  color: #f3f4f6;
  border: none;
  padding: 4px 10px;
  font-size: var(--fs-xs);
  font-weight: 700;
  letter-spacing: .05em;
  cursor: pointer;
  border-radius: 4px;
  box-shadow: 0 2px 6px rgba(0, 0, 0, .4);
  left: 5px;
}