/* ===================================================================
   Station v2 — page unifiée observations 6 min / horaires
   S'appuie sur les variables de site.css (--text, --muted, --card, .dark).
   =================================================================== */

:root {
  --sv2-accent: #2b8bfd;
  --sv2-accent-2: #00c6ff;
  --sv2-line: #00000014;
  --sv2-line-strong: #00000024;
  --sv2-row-alt: #0b508905;
  --sv2-row-hover: #2b8bfd14;
  --sv2-temp: #f97316;
  --sv2-dew: #0ea5e9;
  --sv2-wind: #3b82f6;
  --sv2-gust: #8b5cf6;
  --sv2-rain: #0284c7;
  --sv2-press: #64748b;
  --sv2-hum: #10b981;
  --sv2-warn-bg: #f59e0b24;
  --sv2-ok-bg: #22c55e1a;
  --sv2-max-bg: #ef444416;
  --sv2-min-bg: #3b82f616;
}

.dark {
  --sv2-line: #ffffff14;
  --sv2-line-strong: #ffffff26;
  --sv2-row-alt: #ffffff06;
  --sv2-row-hover: #2b8bfd22;
}

/* ---------------------------------------------------------- en-tête */

.sv2-header {
  position: relative;
  overflow: hidden;
  background: linear-gradient(135deg, #1d6fdc 0%, #2b8bfd 45%, #00b7e8 100%);
  color: #fff;
  border-radius: 22px;
  padding: 26px 28px;
  margin: 28px 0 20px;
  box-shadow: 0 20px 48px #1d6fdc38;
}

.sv2-header::after {
  content: '';
  position: absolute;
  inset: 0;
  background:
    radial-gradient(420px 200px at 88% -20%, #ffffff2e 0%, transparent 60%),
    radial-gradient(300px 170px at 8% 120%, #ffffff1c 0%, transparent 60%);
  pointer-events: none;
}

.sv2-header-row {
  position: relative;
  z-index: 1;
  display: flex;
  flex-wrap: wrap;
  gap: 14px 20px;
  align-items: flex-start;
  justify-content: space-between;
}

.sv2-title {
  flex: 1 1 340px;
  min-width: 0;
}

.sv2-title h1 {
  margin: 0 0 6px;
  font-size: 1.7rem;
  line-height: 1.25;
  color: #fff;
}

/* Colonne de droite : boutons d'action puis photo du site */
.sv2-header-side {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 10px;
}

/* Vignette photo du site de mesure (fiches Météociel) */
.sv2-photo-thumb {
  position: relative;
  width: 172px;
  height: 100px;
  padding: 0;
  border: 2px solid #ffffff66;
  border-radius: 14px;
  overflow: hidden;
  cursor: zoom-in;
  background: #ffffff22;
  box-shadow: 0 8px 22px #00000030;
}

.sv2-photo-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.sv2-photo-thumb .n {
  position: absolute;
  right: 3px;
  bottom: 3px;
  background: #000000a0;
  color: #fff;
  font-size: 0.66rem;
  font-weight: 700;
  border-radius: 6px;
  padding: 1px 5px;
}

.sv2-photo-thumb:hover { border-color: #fff; }

.sv2-lightbox {
  position: fixed;
  inset: 0;
  z-index: 90;
  display: none;
  align-items: center;
  justify-content: center;
  background: #000000c9;
  padding: 24px;
}

.sv2-lightbox.open { display: flex; }

.sv2-lightbox figure {
  margin: 0;
  max-width: min(1100px, 96vw);
  max-height: 92vh;
  display: grid;
  gap: 10px;
}

.sv2-lightbox img {
  max-width: 100%;
  max-height: calc(92vh - 60px);
  object-fit: contain;
  border-radius: 12px;
  box-shadow: 0 30px 80px #000000aa;
}

.sv2-lightbox figcaption {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  color: #fff;
  font-size: 0.92rem;
}

.sv2-lb-nav { display: flex; gap: 8px; }

.sv2-title .sv2-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 14px;
  color: #ffffffd9;
  font-size: 0.92rem;
}

.sv2-title code {
  background: #ffffff26;
  padding: 2px 8px;
  border-radius: 6px;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 0.88em;
}

.sv2-header-actions {
  position: relative;
  z-index: 1;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
}

.sv2-header-actions .btn {
  background: #ffffff22;
  border: 1px solid #ffffff42;
  box-shadow: none;
  color: #fff;
}

.sv2-header-actions .btn:hover {
  background: #ffffff36;
  transform: none;
  box-shadow: 0 6px 18px #00000022;
}

/* Bascule 6 min / horaire */
.sv2-stream-switch {
  position: relative;
  z-index: 1;
  display: inline-flex;
  margin-top: 14px;
  background: #ffffff22;
  border: 1px solid #ffffff42;
  border-radius: 999px;
  padding: 3px;
  gap: 2px;
}

.sv2-stream-switch a {
  color: #fff;
  text-decoration: none;
  font-weight: 600;
  font-size: 0.92rem;
  padding: 7px 16px;
  border-radius: 999px;
  transition: background 0.15s ease;
}

.sv2-stream-switch a:hover { background: #ffffff28; }

.sv2-stream-switch a.active {
  background: #fff;
  color: #1d6fdc;
  box-shadow: 0 4px 14px #00000030;
}

/* ------------------------------------------------- sélecteur période */

.sv2-toolbar {
  background: var(--card);
  border: 1px solid var(--sv2-line);
  border-radius: 18px;
  padding: 14px 16px;
  margin-bottom: 16px;
  box-shadow: 0 14px 36px #00000014;
  display: grid;
  gap: 12px;
}

.sv2-period-row {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 18px;
  align-items: flex-end;
}

.sv2-period-row form {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: flex-end;
  margin: 0;
}

.sv2-field {
  display: grid;
  gap: 4px;
  font-size: 0.82rem;
  font-weight: 600;
  color: var(--muted);
}

.sv2-field input,
.sv2-field select {
  padding: 8px 10px;
  border-radius: 10px;
  border: 1px solid var(--sv2-line-strong);
  background: var(--card);
  color: var(--text);
  font: inherit;
  font-size: 0.92rem;
}

.sv2-quick {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  align-items: center;
  margin-left: auto;
}

.sv2-daynav {
  display: inline-flex;
  gap: 6px;
}

/* pastilles / statistiques */
.sv2-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
}

.sv2-chip {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  background: #2b8bfd0d;
  border: 1px solid #2b8bfd26;
  border-radius: 999px;
  padding: 5px 12px;
  font-size: 0.88rem;
  font-weight: 500;
  color: var(--text);
}

.dark .sv2-chip { background: #2b8bfd1f; border-color: #2b8bfd45; }

.sv2-chip strong { font-weight: 700; }
.sv2-chip .sub { color: var(--muted); font-size: 0.82em; }

.sv2-chip.live::before {
  content: '';
  width: 8px;
  height: 8px;
  border-radius: 999px;
  background: #22c55e;
  box-shadow: 0 0 0 0 #22c55e88;
  animation: sv2pulse 2s infinite;
}

.sv2-chip.frozen::before {
  content: '';
  width: 8px;
  height: 8px;
  border-radius: 999px;
  background: #94a3b8;
}

.sv2-chip.warn { background: var(--sv2-warn-bg); border-color: #f59e0b55; }

@keyframes sv2pulse {
  0% { box-shadow: 0 0 0 0 #22c55e77; }
  70% { box-shadow: 0 0 0 7px #22c55e00; }
  100% { box-shadow: 0 0 0 0 #22c55e00; }
}

/* options d'affichage */
.sv2-display-row {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 16px;
  align-items: center;
  border-top: 1px dashed var(--sv2-line-strong);
  padding-top: 10px;
  font-size: 0.9rem;
}

.sv2-display-row .sv2-opt {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: var(--muted);
  font-weight: 500;
  cursor: pointer;
}

.sv2-display-row select {
  padding: 4px 8px;
  border-radius: 8px;
  border: 1px solid var(--sv2-line-strong);
  background: var(--card);
  color: var(--text);
  font: inherit;
  font-size: 0.88rem;
}

.sv2-display-row .spacer { flex: 1; }

/* ------------------------------------------------------- graphiques */

.sv2-charts {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(340px, 1fr));
  gap: 14px;
  margin-bottom: 18px;
}

.sv2-chart-panel {
  background: var(--card);
  border: 1px solid var(--sv2-line);
  border-radius: 18px;
  padding: 14px 14px 8px;
  box-shadow: 0 14px 36px #00000014;
  min-width: 0;
}

.sv2-chart-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 4px;
}

.sv2-chart-head h3 {
  margin: 0;
  font-size: 0.98rem;
  font-weight: 650;
}

.sv2-legend {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  font-size: 0.8rem;
  color: var(--muted);
}

.sv2-legend .dot {
  display: inline-block;
  width: 9px;
  height: 9px;
  border-radius: 999px;
  margin-right: 4px;
}

.sv2-chart-panel canvas {
  width: 100%;
  height: 240px;
  display: block;
  touch-action: pan-y;
}

.sv2-chart-tip {
  position: fixed;
  z-index: 70;
  pointer-events: none;
  background: var(--card);
  border: 1px solid var(--sv2-line-strong);
  border-radius: 10px;
  box-shadow: 0 12px 30px #00000030;
  padding: 8px 11px;
  font-size: 0.82rem;
  line-height: 1.5;
  display: none;
  max-width: 240px;
}

.sv2-chart-tip .t {
  font-weight: 700;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  margin-bottom: 2px;
}

.sv2-chart-tip .row { display: flex; gap: 8px; justify-content: space-between; }
.sv2-chart-tip .row .dot { width: 8px; height: 8px; border-radius: 99px; display: inline-block; margin-right: 4px; }

/* --------------------------------------------------------- tableau */

.sv2-table-card {
  background: var(--card);
  border: 1px solid var(--sv2-line);
  border-radius: 18px;
  box-shadow: 0 16px 42px #00000016;
  overflow: hidden;
  margin-bottom: 14px;
}

.sv2-table-scroll {
  overflow: auto;
  max-height: 78vh;
  overscroll-behavior: contain;
}

table.sv2-table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  font-size: 0.92rem;
  font-variant-numeric: tabular-nums;
}

.sv2-table thead th {
  position: sticky;
  top: 0;
  z-index: 3;
  background: #f2f8ff;
  color: var(--text);
  font-weight: 700;
  font-size: 0.84rem;
  letter-spacing: 0.2px;
  padding: 11px 10px;
  text-align: center;
  white-space: nowrap;
  border-bottom: 2px solid #2b8bfd59;
}

.dark .sv2-table thead th { background: #0d2439; }

.sv2-table thead th:first-child { text-align: left; padding-left: 16px; }
.sv2-table thead th .unit { display: block; font-weight: 500; font-size: 0.78em; color: var(--muted); }

.sv2-table tbody td {
  padding: 8px 10px;
  text-align: center;
  border-bottom: 1px solid var(--sv2-line);
  white-space: nowrap;
}

.sv2-table.compact tbody td { padding: 4px 8px; font-size: 0.88rem; }

.sv2-table tbody tr:nth-child(even) td { background: var(--sv2-row-alt); }
.sv2-table tbody tr:hover td { background: var(--sv2-row-hover); }

.sv2-table .c-time {
  text-align: left;
  padding-left: 16px;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-weight: 650;
  font-size: 0.9rem;
}

.sv2-table .c-time .d {
  color: var(--muted);
  font-weight: 500;
  font-size: 0.82em;
  margin-right: 6px;
}

.sv2-table td .main { display: block; font-weight: 650; }
.sv2-table td .sub { display: block; color: var(--muted); font-size: 0.82em; line-height: 1.35; }

.sv2-table td.v-temp .main { color: var(--sv2-temp); }
.sv2-table td.v-dew .main { color: var(--sv2-dew); font-weight: 550; }
.sv2-table td.v-rain .main { color: var(--sv2-rain); }
.sv2-table td.v-rain .main.zero { color: var(--muted); font-weight: 450; }

.sv2-arrow {
  display: inline-block;
  vertical-align: -2px;
  margin-left: 3px;
}

/* Séparateur de jour + trous de données */
.sv2-table tr.day-sep td {
  background: #2b8bfd12 !important;
  color: var(--text);
  font-weight: 700;
  font-size: 0.85rem;
  text-align: left;
  padding: 6px 16px;
  border-top: 1px solid var(--sv2-line-strong);
  border-bottom: 1px solid var(--sv2-line-strong);
}

.sv2-table tr.gap-sep td {
  background: transparent !important;
  color: var(--muted);
  text-align: center;
  font-size: 0.8rem;
  font-style: italic;
  padding: 3px 10px;
  border-bottom: 1px dashed var(--sv2-line-strong);
}

/* min / max marqués */
.sv2-table tr.is-tmax td.v-temp { background: var(--sv2-max-bg) !important; }
.sv2-table tr.is-tmin td.v-temp { background: var(--sv2-min-bg) !important; }
.sv2-table tr.is-gmax td.v-gust { background: #8b5cf61c !important; }

.sv2-badge {
  display: inline-block;
  font-size: 0.68rem;
  font-weight: 800;
  border-radius: 6px;
  padding: 1px 5px;
  margin-left: 5px;
  vertical-align: 2px;
}

.sv2-badge.bmax { background: #ef44442b; color: #b91c1c; }
.sv2-badge.bmin { background: #3b82f62b; color: #1d4ed8; }
.sv2-badge.bgust { background: #8b5cf62b; color: #6d28d9; }
.dark .sv2-badge.bmax { color: #fca5a5; }
.dark .sv2-badge.bmin { color: #93c5fd; }
.dark .sv2-badge.bgust { color: #c4b5fd; }

/* Beaufort */
.sv2-bft {
  display: inline-block;
  min-width: 26px;
  font-size: 0.72rem;
  font-weight: 800;
  border-radius: 6px;
  padding: 1px 5px;
  color: #083344;
  background: #a5f3fc;
}

.sv2-bft[data-f="4"], .sv2-bft[data-f="5"] { background: #86efac; }
.sv2-bft[data-f="6"], .sv2-bft[data-f="7"] { background: #fde047; }
.sv2-bft[data-f="8"], .sv2-bft[data-f="9"] { background: #fdba74; }
.sv2-bft[data-f="10"], .sv2-bft[data-f="11"], .sv2-bft[data-f="12"] { background: #fca5a5; color: #7f1d1d; }

.row-flash td { animation: sv2RowFlash 6s ease forwards; }

@keyframes sv2RowFlash {
  0% { background-color: #fbbf24aa; }
  60% { background-color: #fbbf2426; }
  100% { background-color: transparent; }
}

.sv2-table-foot {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 16px;
  align-items: center;
  justify-content: space-between;
  padding: 10px 16px;
  color: var(--muted);
  font-size: 0.86rem;
  border-top: 1px solid var(--sv2-line);
}

.sv2-empty {
  text-align: center;
  color: var(--muted);
  padding: 42px 16px;
}

.sv2-empty .big { font-size: 2rem; display: block; margin-bottom: 8px; }

/* ------------------------------------------------------ mode admin */

.station-admin-panel {
  position: fixed;
  right: 18px;
  bottom: 18px;
  z-index: 50;
  width: min(430px, calc(100vw - 24px));
  max-height: min(72vh, 640px);
  overflow-y: auto;
  display: grid;
  gap: 10px;
  padding: 14px;
  border-radius: 14px;
  border: 1px solid var(--sv2-line-strong);
  background: var(--card);
  backdrop-filter: blur(8px);
  box-shadow: 0 20px 56px #00000038;
}

.station-admin-panel > header {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
}

.station-admin-panel > header strong { font-size: 0.95rem; }
.station-admin-panel .muted { font-size: 0.84rem; }

.station-admin-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.admin-thresholds {
  display: grid;
  gap: 8px;
  padding-top: 8px;
  border-top: 1px solid var(--sv2-line);
}

.admin-thresholds summary {
  cursor: pointer;
  list-style: none;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 8px;
  font-size: 0.9rem;
}

.admin-thresholds summary::-webkit-details-marker { display: none; }
.admin-thresholds summary strong::before { content: '▸ '; font-size: 0.8em; }
.admin-thresholds[open] summary strong::before { content: '▾ '; }

.threshold-row {
  display: grid;
  grid-template-columns: 52px minmax(0, 1fr) minmax(0, 1fr);
  gap: 8px;
  align-items: center;
  font-size: 0.82rem;
}

.threshold-row > span { font-weight: 700; }

.threshold-row label {
  display: grid;
  gap: 3px;
  min-width: 0;
  color: var(--muted);
  font-weight: 600;
}

.threshold-control {
  display: grid;
  grid-template-columns: minmax(54px, 1fr) 58px;
  gap: 6px;
  align-items: center;
}

.threshold-row input[type="range"] { width: 100%; min-width: 0; accent-color: var(--sv2-accent); }

.threshold-row input[type="number"] {
  width: 58px;
  padding: 4px 6px;
  border: 1px solid var(--sv2-line-strong);
  border-radius: 6px;
  background: var(--card);
  color: var(--text);
  font: inherit;
  font-size: 0.84rem;
  text-align: right;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
}

.admin-status { min-height: 18px; color: var(--muted); font-size: 0.84rem; }

.editable-cell { cursor: cell; outline: 1px dashed transparent; outline-offset: -3px; }
.editable-cell:hover { outline-color: #2b8bfd73; }
.corrected-cell { background: var(--sv2-ok-bg) !important; }
.suspicious-cell { background: var(--sv2-warn-bg) !important; }

.cell-selector {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  min-width: 100%;
}

.cell-select { width: 14px; height: 14px; flex: 0 0 auto; cursor: pointer; accent-color: var(--sv2-accent); }
.cell-value { min-width: 0; }

.correction-badge {
  display: inline-block;
  margin-top: 2px;
  padding: 0 5px;
  border-radius: 999px;
  background: #22c55e29;
  color: #15803d;
  font-size: 0.7rem;
  font-weight: 700;
}

.dark .correction-badge { color: #86efac; }

.station-edit-popover {
  position: fixed;
  z-index: 60;
  right: 18px;
  bottom: 190px;
  width: min(360px, calc(100vw - 24px));
  display: none;
  gap: 10px;
  padding: 14px;
  border: 1px solid var(--sv2-line-strong);
  border-radius: 14px;
  background: var(--card);
  backdrop-filter: blur(8px);
  box-shadow: 0 20px 56px #0000003d;
}

.station-edit-popover.open { display: grid; }

.station-edit-popover label {
  display: grid;
  gap: 5px;
  font-weight: 600;
  font-size: 0.9rem;
}

.station-edit-popover input,
.station-edit-popover select {
  width: 100%;
  padding: 8px 10px;
  border: 1px solid var(--sv2-line-strong);
  border-radius: 8px;
  background: var(--card);
  color: var(--text);
  font: inherit;
}

.station-edit-actions { display: flex; flex-wrap: wrap; gap: 8px; }

.station-edit-popover > strong { user-select: none; }
.station-admin-panel > header { user-select: none; }

.sv2-qc-pill {
  position: fixed;
  right: 18px;
  bottom: 18px;
  z-index: 50;
  border: 1px solid var(--sv2-line-strong);
  border-radius: 999px;
  background: var(--card);
  color: var(--text);
  font: inherit;
  font-weight: 700;
  padding: 9px 16px;
  cursor: pointer;
  box-shadow: 0 14px 36px #00000030;
}

.sv2-qc-pill:hover { transform: translateY(-1px); }

/* ---------------------------------------------------- bilan mensuel */

.sv2-table .c-time a {
  color: inherit;
  text-decoration: none;
  display: inline-block;
  min-width: 100%;
}

.sv2-table .c-time a:hover { color: var(--sv2-accent); }

.sv2-table tr.we td { background: #2b8bfd0a; }
.dark .sv2-table tr.we td { background: #2b8bfd14; }

.sv2-table tfoot td {
  position: sticky;
  bottom: 0;
  background: #f2f8ff;
  border-top: 2px solid #2b8bfd59;
  border-bottom: 0;
  font-weight: 700;
  padding: 9px 10px;
  text-align: center;
}

.dark .sv2-table tfoot td { background: #0d2439; }
.sv2-table tfoot td.c-time { text-align: left; }

/* ------------------------------------------------------- responsive */

@media (max-width: 860px) {
  .sv2-header { padding: 20px; }
  .sv2-title h1 { font-size: 1.35rem; }
  .sv2-quick { margin-left: 0; }
  .sv2-chart-panel canvas { height: 210px; }
  .sv2-table thead th { padding: 9px 6px; font-size: 0.78rem; }
  .sv2-table tbody td { padding: 7px 6px; font-size: 0.86rem; }
  .station-admin-panel { right: 10px; bottom: 10px; }
  .station-edit-popover { right: 10px; bottom: 170px; }
}

@media (max-width: 560px) {
  .sv2-table td .sub { display: none; }
  .sv2-table .hide-sm { display: none; }
}