.marker-main {
  width: 64px;
  height: 64px;
  display: flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  position: relative;
  z-index: 10;
}

.marker-main .icon-img {
  width: 40px;
  height: 40px;
  object-fit: contain;
  display: block;
  margin: auto;
}

/* Alert border for map markers (circular, color-coded) */
.marker-main.rosso {
  border: 5px solid #d32f2f;
  border-radius: 50%;
  background: #fff;
  padding: 6px;
}

.marker-main.verde {
  border: 5px solid #4caf50;
  border-radius: 50%;
  background: #fff;
  padding: 6px;
}

.marker-main.arancione {
  border: 5px solid #ff9800;
  border-radius: 50%;
  background: #fff;
  padding: 6px;
}

.marker-main.giallo {
  border: 5px solid #ffeb3b;
  border-radius: 50%;
  background: #fff;
  padding: 6px;
}

/* Alert level badge (circular, color-coded) */
.alert-badge {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-weight: bold;
  font-size: 1.1rem;
  color: #fff;
  box-shadow: 0 2px 8px rgba(16, 24, 40, 0.10);
  margin-right: 10px;
}

.alert-badge.rosso {
  background: #d32f2f;
}

.alert-badge.verde {
  background: #4caf50;
}

.alert-badge.arancione {
  background: #ff9800;
}

.alert-badge.giallo {
  background: #ffeb3b;
  color: #222;
}

/*
  For perfect horizontal alignment of icon and description in fraction cards, use this HTML structure:

  <div class="frazione-card risk-extreme">
    <div class="frazione-info">...</div>
    <div class="frazione-card-main">
      <div class="frazione-icon">...</div>
      <div class="frazione-desc">...</div>
    </div>
    <div class="frazione-badges">...</div>
  </div>

  Ensure .frazione-card-main uses:
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 16px;
  This guarantees .frazione-icon and .frazione-desc are always horizontally aligned, regardless of badges.
*/
/* Ensure icon and description are always horizontally aligned, regardless of badges */
.frazione-card {
  display: flex;
  flex-direction: column;
}

.frazione-card-main {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 16px;
}

/* Ensure horizontal alignment for icon and description in fraction cards */
.frazione-card-main {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 16px;
}

/* IdroGeo Modal */
#idrogeo-modal.modal {
  display: none;
  position: fixed;
  z-index: 9999;
  left: 0;
  top: 0;
  width: 100vw;
  height: 100vh;
  overflow: auto;
  background: rgba(0, 0, 0, 0.45);
  animation: fadeIn 0.2s;
}

#idrogeo-modal .modal-content {
  background: #fff;
  margin: 4vh auto;
  border-radius: 12px;
  padding: 0;
  max-width: 900px;
  width: 95vw;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.18);
  animation: slideDown 0.3s;
}

#idrogeo-modal .modal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 18px 28px 12px 28px;
  border-radius: 12px 12px 0 0;
}

#idrogeo-modal .modal-body {
  padding: 0 28px 28px 28px;
  background: #f7faf7;
  border-radius: 0 0 12px 12px;
  min-height: 400px;
  display: flex;
  flex-direction: column;
}

#idrogeo-modal .close-modal {
  font-size: 2.2rem;
  font-weight: 700;
  cursor: pointer;
  margin-left: 18px;
  transition: color 0.2s;
}

#idrogeo-modal .close-modal:hover {
  color: #ffb300;
}

@media (max-width: 700px) {
  #idrogeo-modal .modal-content {
    max-width: 99vw;
    padding: 0;
  }

  #idrogeo-modal .modal-header,
  #idrogeo-modal .modal-body {
    padding-left: 10px;
    padding-right: 10px;
  }
}

/* Loading Overlay */
.loading-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(135deg, #003366 0%, #0066CC 100%);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 9999;
  opacity: 1;
  transition: opacity 0.5s ease-out;
}

.loading-overlay.hidden {
  opacity: 0;
  pointer-events: none;
}

.loading-content {
  text-align: center;
  color: white;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 15px;
  animation: fadeInUp 0.8s ease-out;
}

@keyframes fadeInUp {
  from {
    opacity: 0;
    transform: translateY(30px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.loading-logo {
  height: 120px;
  width: auto;
  object-fit: contain;
  filter: drop-shadow(0 4px 8px rgba(0, 0, 0, 0.3));
  animation: logoPulse 2s ease-in-out infinite;
}

@keyframes logoPulse {

  0%,
  100% {
    transform: scale(1);
  }

  50% {
    transform: scale(1.05);
  }
}

.loading-title {
  font-size: 3rem;
  font-weight: 800;
  line-height: 1;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: #ffffff;
  text-shadow: 0 4px 8px rgba(0, 0, 0, 0.5);
  background: linear-gradient(45deg, #ffffff, #e0e7ff);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  animation: titleGlow 3s ease-in-out infinite;
}

@keyframes titleGlow {

  0%,
  100% {
    text-shadow: 0 4px 8px rgba(0, 0, 0, 0.5);
    transform: scale(1);
  }

  50% {
    text-shadow: 0 6px 12px rgba(0, 102, 204, 0.6);
    transform: scale(1.02);
  }
}

.loading-subtitle {
  font-size: 1.5rem;
  font-weight: 400;
  opacity: 0.9;
  letter-spacing: 0.05em;
  color: #e0e7ff;
  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
  animation: subtitleFade 4s ease-in-out infinite;
}

@keyframes subtitleFade {

  0%,
  100% {
    opacity: 0.8;
  }

  50% {
    opacity: 1;
  }
}

.loading-spinner {
  width: 60px;
  height: 60px;
  border: 4px solid rgba(255, 255, 255, 0.2);
  border-top: 4px solid #ffffff;
  border-radius: 50%;
  animation: spin 1.2s linear infinite;
  box-shadow: 0 0 20px rgba(255, 255, 255, 0.1);
}

@keyframes spin {
  0% {
    transform: rotate(0deg);
  }

  100% {
    transform: rotate(360deg);
  }
}

.loading-text {
  font-size: 1.1rem;
  font-weight: 300;
  letter-spacing: 0.1em;
  color: rgba(255, 255, 255, 0.8);
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
  animation: textPulse 2.5s ease-in-out infinite;
}

@keyframes textPulse {

  0%,
  100% {
    opacity: 0.7;
  }

  50% {
    opacity: 1;
  }
}

/* Global tabs wrapper per frecce posizionamento */
.global-tabs-wrapper {
  position: relative;
  width: 100%;
  max-width: 1600px;
  margin: 0 auto;
  padding: 0 50px;
  box-sizing: border-box;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Contenitore dei tab giorni con scroll */
.global-tabs {
  display: flex;
  flex-direction: row;
  gap: 12px;
  overflow-x: auto;
  overflow-y: hidden;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
  padding: 8px 4px;
  scroll-behavior: smooth;
  scrollbar-width: none;
  -ms-overflow-style: none;
  white-space: nowrap;
  cursor: grab;
  /* Pill style container */
  mask-image: linear-gradient(to right, transparent, black 20px, black 95%, transparent);
}

.global-tabs:active {
  cursor: grabbing;
}

.global-tabs::-webkit-scrollbar {
  height: 0;
  display: none;
}

/* Tab singolo con larghezza flessibile */
.global-tab-button {
  min-width: 140px;
  max-width: 180px;
  flex: 0 0 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  position: relative;
  overflow: hidden;
  box-sizing: border-box;
  padding: 12px 16px;
  background: rgba(255, 255, 255, 0.6);
  backdrop-filter: blur(8px);
  border: 1px solid rgba(255, 255, 255, 0.4);
  border-radius: 24px;
  /* Pill shape */
  transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
}

.global-tab-button.selected {
  background: var(--dpc-blue) !important;
  /* Solid Blue */
  border: 1px solid var(--dpc-light-blue);
  color: #FFFFFF !important;
  /* White Text */
  box-shadow: 0 4px 12px rgba(0, 51, 102, 0.4);
  transform: translateY(-2px);
}

.global-tab-button.selected * {
  color: #FFFFFF !important;
  /* Ensure children are white */
}


.global-tab-button:hover:not(.selected) {
  background: rgba(255, 255, 255, 0.9);
  transform: translateY(-1px);
}

@media (max-width: 600px) {
  .global-tab-button {
    min-width: 154px;
    max-width: 180px;
  }
}

.global-tab-button>div {
  width: 100%;
  max-width: 100%;
  flex-shrink: 0;
  box-sizing: border-box;
}

/* Frecce sempre visibili */
.tabs-prev,
.tabs-next {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.98);
  border: none;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  font-size: 1.2rem;
  color: var(--dpc-blue);
  z-index: 20;
  transition: background 0.2s, box-shadow 0.2s;
}

.tabs-prev:hover:not(:disabled),
.tabs-next:hover:not(:disabled) {
  background: rgba(255, 255, 255, 1);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
}

.tabs-prev:disabled,
.tabs-next:disabled {
  opacity: 0.3;
  cursor: not-allowed;
}

.tabs-prev {
  left: 8px;
}

.tabs-next {
  right: 8px;
}

/* Centra verticalmente la pagina (opzionale, decommenta se vuoi centrare tutto)
body {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  justify-content: center;
}
*/
.icon-badge.icon-snow {
  background: #e3f2fd !important;
  border: 1px solid #90caf9;
  box-shadow: 0 1px 4px #90caf922;
}

.icon-badge.icon-snow img {
  filter: drop-shadow(0 0 2px #1976d2);
}

/* Detail view header bar: horizontal layout for back, title, icons, export */
.detail-header-bar {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
  margin-bottom: 8px;
}

.detail-header-bar h2 {
  flex: 1 1 auto;
  margin: 0 8px 0 0;
  font-size: 1.3rem;
  font-weight: 700;
  line-height: 1.2;
}

.detail-header-bar .btn-back {
  margin-right: 8px;
}

.detail-header-bar #detail-export-csv,
.detail-header-bar #detail-export-png {
  min-width: 48px;
  padding: 4px 10px;
  font-size: 0.98rem;
}

:root {
  /* AGGIORNAMENTO COLORI ISTITUZIONALI DPC */

  /* Blu Istituzionale (Pantone 294 C approx) - Colore Dominante */
  --dpc-blue: #003366;

  /* Blu Secondario (Per hover e accenti) */
  --dpc-light-blue: #0055A5;

  /* Ciano/Azzurro (Solo per dettagli secondari, meno acceso) */
  --dpc-cyan: #0072BC;

  /* Sfondi */
  --dpc-bg: #F0F2F5;
  /* Grigio chiaro istituzionale */
  --card-bg: #FFFFFF;

  /* Testi */
  --text-color: #333333;
  --text-secondary: #555555;

  /* Header */
  --header-bg: var(--dpc-blue);
  --header-color: #FFFFFF;

  /* Night Mode */
  --night-card-bg: #1e293b;
  --night-text-color: #f8fafc;

  /* Shadows - More definition, less "glow" */
  --elevation-1: 0 1px 2px rgba(0, 0, 0, 0.15);
  --elevation-2: 0 2px 4px rgba(0, 0, 0, 0.15);

  /* Glass - Reduced intensity for professional look */
  --glass-bg: rgba(255, 255, 255, 0.90);
  /* Less transparent */
  --glass-border: 1px solid rgba(0, 51, 102, 0.1);
  --glass-shadow: 0 4px 6px rgba(0, 0, 0, 0.05);
  --glass-blur: blur(10px);

  --night-glass-bg: rgba(30, 41, 59, 0.9);
  --night-glass-border: 1px solid rgba(255, 255, 255, 0.1);

  /* GRADIENTS REPLACED WITH SOLID/SUBTLE INSTITUTIONAL COLORS */
  /* No more neon/cyan mixed gradients */
  --primary-gradient: #003366;
  /* Solid DPC Blue */
  --accent-gradient: #0055A5;
  /* Solid Secondary Blue */
}

/* Glassmorphism Utility */
.glass-panel {
  background: var(--glass-bg);
  backdrop-filter: var(--glass-blur);
  -webkit-backdrop-filter: var(--glass-blur);
  border: var(--glass-border);
  border-radius: 16px;
  box-shadow: var(--glass-shadow);
}

body.night .glass-panel {
  background: var(--night-glass-bg);
  border: var(--night-glass-border);
}

/* Global Reset */
* {
  box-sizing: border-box;
  -webkit-tap-highlight-color: transparent;
}

/* === DESKTOP LAYOUT (Default) === */
html,
body {
  height: 100%;
  width: 100%;
  margin: 0;
  padding: 0;
  font-family: 'Titillium Web', 'Segoe UI', sans-serif;
  background: var(--dpc-bg);
  color: var(--text-color);
  -webkit-font-smoothing: antialiased;
  overflow: hidden;
  /* Desktop: Prevent global scroll, use internal areas */
}

.container {
  display: flex;
  flex-direction: column;
  height: 100vh;
  width: 100%;
  overflow: hidden;
  /* Desktop: Container confines the app */
  position: relative;
  background: radial-gradient(circle at top left, #f8fafc, #e2e8f0);
}

/* === MOBILE LAYOUT UPDATE (Override for screens < 900px) === */
@media (max-width: 900px) {

  html,
  body {
    height: auto !important;
    min-height: 100% !important;
    overflow-y: auto !important;
    /* Mobile: Allow native window scroll */
    overflow-x: hidden !important;
    /* Prevent horizontal scroll */
    position: static !important;
  }

  .container {
    height: auto !important;
    min-height: 100vh !important;
    overflow: visible !important;
    /* Allow content to flow naturally */
    display: flex;
    flex-direction: column;
  }

  /* Reset padding/margins that might cause shifts */
  .dashboard-grid {
    padding: 10px !important;
    margin: 0 !important;
    width: 100% !important;
    box-sizing: border-box !important;
  }
}


/* Institutional Header */
.app-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  background: var(--dpc-blue);
  /* Force solid Blue */
  /* Remove glass effects for header to match institutional style */
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  border-bottom: 2px solid rgba(255, 255, 255, 0.1);
  color: #FFFFFF !important;
  /* Force white text */
  padding: 12px 24px;
  margin: 0;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
  z-index: 1000;
  overflow: visible;
  flex-wrap: wrap;
  transition: all 0.3s ease;
  min-height: 60px;
}

/* Ensure all text inside header is white */
.app-header .main-title,
.app-header .sub-title,
.app-header h1,
.app-header h2,
.app-header span,
.app-header div {
  color: #FFFFFF !important;
}


/* Mobile Header Cleanup */
@media (max-width: 900px) {
  .app-header {
    flex-wrap: nowrap;
    padding: 8px 12px;
    gap: 8px;
    justify-content: space-between;
    height: 60px;
  }

  /* Hide non-essential header elements on mobile to prevent overlap */
  .app-header .dpc-box,
  .app-header .logo-box,
  .app-header #previsioni-last-updated-header,
  .app-header .sub-title {
    display: none !important;
  }

  .app-header-center {
    flex: 1;
    justify-content: flex-start;
    /* Align title left next to logo */
    padding-left: 0;
    overflow: hidden;
    /* Prevent title overflow */
    white-space: nowrap;
  }

  .main-title {
    font-size: 1.4rem !important;
    /* Force smaller title */
    margin: 0;
    line-height: 1;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  /* Hide bulky forecast controls on mobile, keep only refresh button if needed */
  #forecast-header-controls {
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
    padding: 0 !important;
    gap: 0 !important;
  }

  /* Hide the text labels and inputs (checkbox, select) */
  #forecast-header-controls label {
    display: none !important;
  }

  /* Make refresh button icon-only */
  #btn-refresh-data {
    padding: 0 !important;
    width: 40px !important;
    height: 40px !important;
    min-width: 40px !important;
    border-radius: 50% !important;
    justify-content: center;
    align-items: center;
    background: rgba(255, 255, 255, 0.2) !important;
    color: var(--dpc-blue) !important;
    box-shadow: none !important;
    display: flex !important;
  }

  .refresh-text {
    display: none !important;
  }

  #btn-refresh-data span:first-child {
    font-size: 1.4rem;
    margin: 0;
    line-height: 1;
    display: flex;
    align-items: center;
    justify-content: center;
  }
}

body.night .app-header {
  background: var(--night-glass-bg);
  border-bottom: var(--night-glass-border);
}

@media (max-width: 1100px) {
  .app-header {
    flex-wrap: nowrap;
    /* Prevent wrapping on mobile */
    padding: 8px 12px;
    gap: 8px;
    justify-content: space-between;
  }
}

.app-header-left {
  display: flex;
  align-items: center;
  gap: 12px;
}

@media (max-width: 1100px) {
  .app-header-left {
    justify-content: center;
    width: 100%;
    order: 2;
    /* Associations in the middle */
  }
}

.logo-box {
  width: 68px;
  height: 68px;
  background: #fff;
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 6px;
  box-sizing: border-box;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
  flex-shrink: 0;
}

.logo-box.dpc-box {
  background: rgba(255, 255, 255, 0.95);
  border: 1px solid rgba(0, 0, 0, 0.05);
}

.logo-img {
  display: block;
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
}

.dpc-logo {
  max-height: 100% !important;
}

/* keep legacy classes for any references */
/* .assoc-logo style removed (empty) */

/* ensure the textual fallback sits correctly inside the same box */
.logo-box .logo-fallback {
  display: none;
  align-items: center;
  justify-content: center;
  text-align: center;
  font-size: 0.85rem;
  font-weight: 700;
  color: #003366;
}

/* Association text sizing and alignment */
.assoc-text {
  flex: 0 1 auto;
  display: flex;
  flex-direction: column;
  justify-content: center;
  text-align: left;
  color: var(--dpc-blue);
  /* Darker text for glass header */
}

body.night .assoc-text {
  color: white;
}

.assoc-text .assoc-name {
  font-weight: 800;
  font-size: 1.2rem;
  line-height: 1.2;
}

.assoc-text .assoc-sub {
  font-size: 0.85rem;
  opacity: 0.8;
  margin-top: 2px;
}

@media (max-width: 1100px) {
  .assoc-text {
    text-align: center;
  }
}

@media (max-width: 600px) {
  .assoc-text {
    display: none;
    /* Hide text on very small screens to save space */
  }
}

@media (max-width: 768px) {
  .logo-box {
    width: 60px;
    height: 60px;
    padding: 5px;
  }
}

@media (max-width: 500px) {
  .assoc-text {
    display: none;
  }
}


.assoc-text .assoc-name {
  font-weight: 800;
  font-size: 1.6rem;
  line-height: 1;
  white-space: nowrap;
  /* keep single line */
  overflow: visible;
  /* always show full name */
  text-overflow: clip;
  display: block;
}

.assoc-text .assoc-sub {
  font-size: 1.4rem;
  opacity: 0.95;
  margin-top: 2px;
}

/* Accessible fallback: visually-hidden for screen readers */
.visually-hidden {
  position: absolute !important;
  height: 1px;
  width: 1px;
  overflow: hidden;
  clip: rect(1px, 1px, 1px, 1px);
  white-space: nowrap;
  border: 0;
  padding: 0;
  margin: -1px;
}

/* Fallback visible badge when logos fail to load */
.logo-fallback {
  display: none;
  /* shown only when image fails */
  align-items: center;
  justify-content: center;
  padding: 6px 8px;
  border-radius: 6px;
  background: rgba(255, 255, 255, 0.12);
  color: white;
  font-weight: 600;
  font-size: 0.8rem;
  text-align: center;
}

/* Ensure header children don't overlap on small screens */
.app-header-left,
.app-header-right {
  display: flex;
  align-items: center;
  gap: 8px;
}

.app-header-center {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 16px;
  color: var(--dpc-blue);
  flex: 1 1 auto;
}

body.night .app-header-center {
  color: var(--header-color);
}

@media (max-width: 1100px) {
  .app-header-center {
    order: 1;
    /* Title at the top */
    width: 100%;
  }
}

.app-logo {
  height: 60px;
  width: auto;
  object-fit: contain;
  filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.2));
}

.main-title {
  font-size: 2rem;
  font-weight: 800;
  line-height: 1;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--dpc-blue);
  /* text-shadow: 0 2px 4px rgba(0, 0, 0, 0.3); Removed for cleaner look on glass */
}

body.night .main-title {
  color: #ffffff;
  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.5);
  /* text-shadow: 0 2px 4px rgba(0, 0, 0, 0.5); Removed for cleaner look on glass */
}

.sub-title {
  font-size: 1.3rem;
  font-weight: 400;
  color: var(--dpc-blue);
  margin-top: -4px;
  white-space: nowrap;
}

body.night .sub-title {
  color: rgba(255, 255, 255, 0.9);
}

@media (max-width: 600px) {
  .main-title {
    font-size: 1.6rem;
  }

  .sub-title {
    font-size: 1.1rem;
  }

  .app-logo {
    height: 48px;
  }
}

.app-header-right {
  display: flex;
  align-items: center;
  justify-content: center;
  flex: 1 1 auto;
}

@media (max-width: 1100px) {
  .app-header-right {
    order: 3;
    /* Controls at the bottom */
    width: 100%;
  }
}

.app-header-controls {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 16px;
  flex-wrap: wrap;
}

@media (max-width: 600px) {
  .app-header-controls {
    gap: 10px;
    width: 100%;
  }
}

.dpc-logo {
  height: 70px;
  object-fit: contain;
}

/* Layout for stacked DPC buttons inside header */
.dpc-buttons {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

@media (max-width:640px) {
  .dpc-buttons {
    flex-direction: column;
  }
}

/* Make the alert level label more visible */
#dpc-alert-level {
  font-size: 1.02rem;
  font-weight: 700;
  color: var(--dpc-blue);
  background: rgba(0, 102, 204, 0.08);
  padding: 6px 10px;
  border-radius: 8px;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.06);
}

/* Standardize alert box */
#dpc-alert-container {
  border-radius: 10px !important;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1) !important;
  border: 1px solid rgba(0, 51, 102, 0.1) !important;
}

@media (max-width: 1100px) {
  .app-header-right>* {
    margin: 5px 0;
  }
}

.dashboard-grid {
  display: flex;
  flex: 1;
  gap: 20px;
  padding: 20px;
  min-height: 0;
  overflow: hidden;
  position: relative;
}

@media (max-width: 900px) {
  .dashboard-grid {
    flex-direction: column;
    padding: 10px;
    gap: 12px;
    overflow-y: auto;
    /* Allow scroll within grid on mobile */
  }

  /* Vertical Mobile Optimization */
  .dashboard-grid {
    height: 100%;
    overflow-y: auto;
    /* Allow scrolling for the whole dashboard */
    padding-bottom: 120px !important;
    /* clear bottom nav */
  }

  #mappa-container {
    flex: 0 0 45vh;
    /* Fixed height for map on mobile */
    min-height: 300px;
    width: 100%;
  }

  #previsioni-online {
    flex: 1 0 auto;
    /* Let it grow but allow scrolling */
    min-height: 400px;
  }
}

/* Global Micro-interactions */
button:active,
.btn:active,
.global-tab-button:active,
.overlay-controls button:active {
  transform: scale(0.96);
}

/* Transitions */
button,
.btn,
.global-tab-button,
.card,
.overlay-controls {
  transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
}

/* Map Column */
#mappa-container {
  flex: 1;
  display: flex;
  flex-direction: column;
  height: 100%;
  min-height: 0;
  border-radius: var(--radius);
  overflow: hidden;
  box-shadow: var(--elevation-3);
  border: none;
  background: white;
}

/* Zone list scroll area */
.frazioni-list-scroll-area {
  flex: 1 1 auto;
  overflow-y: auto;
  overflow-x: hidden;
  min-height: 0;
}

.frazioni-list-container {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

/* Zone list scroll area */
.frazioni-list-scroll-area {
  flex: 1 1 auto;
  overflow-y: auto;
  overflow-x: hidden;
  min-height: 0;
}

.frazioni-list-container {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

/* MapLib Controls - compact mode */
.maplibregl-ctrl {
  background: rgba(255, 255, 255, 0.98);
  border-radius: 8px;
  padding: 6px;
  transition: transform 180ms ease, opacity 180ms ease, box-shadow 180ms ease;
  box-shadow: var(--elevation-1);
}

.maplibregl-ctrl.compact {
  transform: scale(0.9);
  opacity: 0.9;
}

.maplibregl-ctrl button {
  padding: 6px;
  font-size: 0.95rem;
  color: var(--dpc-blue);
}

.maplibregl-ctrl.compact button {
  padding: 4px;
  font-size: 0.82rem;
}

.maplibregl-ctrl button svg,
.maplibregl-ctrl button path {
  fill: var(--dpc-blue);
  color: var(--dpc-blue);
}

/* Default compact on narrow screens */
@media (max-width: 900px) {
  .maplibregl-ctrl {
    transform: scale(0.9);
    opacity: 0.9;
  }
}

/* Ultra compact controls on very small screens */
@media (max-width: 480px) {
  .maplibregl-ctrl-group {
    margin: 8px 8px 0 0;
  }

  .maplibregl-ctrl {
    transform: scale(0.75);
    margin: 4px;
  }

  .maplibregl-ctrl-top-right {
    top: 0;
    right: 0;
  }

  .maplibregl-ctrl-bottom-right {
    bottom: 80px;
  }
}

#mappa {
  flex: 1;
  width: 100%;
  height: 100% !important;
  /* Force Leaflet to fit */
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  border: 2px solid white;
}

/* Overlay Controls positioned on the map */
.overlay-controls {
  position: absolute;
  top: 10px;
  left: 10px;
  z-index: 400;
  background: white;
  padding: 6px 10px 10px 10px;
  border-radius: var(--radius);
  box-shadow: var(--elevation-2);
  font-size: 13px;
  border: none;
  transition: box-shadow 280ms cubic-bezier(0.4, 0, 0.2, 1), width 200ms ease, padding 200ms ease;
  max-width: 320px;
}

.overlay-controls:hover {
  box-shadow: var(--elevation-3);
}

.overlay-controls .overlay-collapse-toggle {
  position: absolute;
  top: 6px;
  right: 6px;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  border: none;
  background: var(--dpc-blue);
  color: white;
  box-shadow: var(--elevation-2);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  font-weight: 700;
}

.overlay-controls .overlay-collapse-toggle[aria-expanded="false"] {
  background: rgba(0, 0, 0, 0.06);
  color: var(--text-color);
  box-shadow: var(--elevation-1);
}

.overlay-controls.collapsed {
  width: 48px;
  height: 48px;
  padding: 6px;
  overflow: visible;
}

.overlay-controls.collapsed .overlay-controls-inner {
  display: none;
}

.overlay-controls label {
  font-weight: 500;
  /* Material medium weight */
  color: var(--text-color);
  cursor: pointer;
  transition: color 200ms cubic-bezier(0.4, 0, 0.2, 1);
}

.overlay-controls label:hover {
  color: var(--dpc-light-blue);
}

.overlay-controls input[type="checkbox"] {
  transform: scale(1.05);
}

.overlay-controls button.small-btn {
  background: var(--dpc-light-blue);
  border: none;
  border-radius: var(--radius);
  cursor: pointer;
  color: white;
  font-family: inherit;
  padding: 6px 10px;
  font-weight: 500;
  text-transform: none;
  font-size: 0.8rem;
  letter-spacing: 0.2px;
  transition: box-shadow 200ms ease, background-color 200ms ease;
  box-shadow: var(--elevation-2);
}

.overlay-controls button.small-btn:hover {
  background: #0052a3;
  box-shadow: var(--elevation-3);
}

.overlay-controls button.small-btn:active {
  box-shadow: var(--elevation-4);
}

/* Small utility buttons (used for chart export in detail) */
.btn-small {
  background: #f3f4f6;
  border: 1px solid rgba(0, 0, 0, 0.06);
  color: var(--text-color);
  padding: 6px 8px;
  border-radius: var(--radius-sm);
  cursor: pointer;
  font-size: 0.9rem;
}

.btn-small:hover {
  background: #e8eef8;
}

/* App header controls (top-right) */
.app-header-controls {
  position: static;
  /* now placed inside header */
  z-index: 1200;
  display: flex;
  align-items: center;
  gap: 12px;
  margin-left: auto;
}

.app-header-controls .header-label {
  background: rgba(255, 255, 255, 0.12);
  padding: 6px 10px;
  border-radius: var(--radius);
  font-size: 0.825rem;
  color: rgba(255, 255, 255, 0.95);
  box-shadow: var(--elevation-1);
  border: none;
  font-weight: 500;
}

.app-header-controls .forecast-header-controls {
  display: flex;
  gap: 8px;
  align-items: center;
  background: rgba(15, 23, 42, 0.9);
  padding: 8px 12px;
  border-radius: var(--radius);
  box-shadow: var(--elevation-2);
  font-size: 0.85rem;
  color: #fff;
  border: 1px solid rgba(255, 255, 255, 0.1);
  font-weight: 500;
  white-space: nowrap;
}

.app-header-controls .header-error {
  background: #D32F2F;
  /* Material Red 700 */
  color: white;
  padding: 6px 12px;
  border-radius: var(--radius);
  font-weight: 500;
  box-shadow: var(--elevation-2);
  animation: pulse 2s cubic-bezier(0.4, 0, 0.2, 1) infinite;
}

@keyframes pulse {

  0%,
  100% {
    opacity: 1;
  }

  50% {
    opacity: 0.85;
  }
}

.app-header-controls select {
  font-size: 0.875rem;
  border: 1px solid rgba(255, 255, 255, 0.5);
  background: rgba(255, 255, 255, 0.95);
  border-radius: var(--radius);
  padding: 4px 8px;
  color: var(--dpc-blue);
  font-weight: 500;
}


.overlay-controls input[type="checkbox"] {
  transform: scale(1.05);
}

.overlay-controls button {
  background: var(--dpc-light-blue);
  border: none;
  border-radius: var(--radius);
  cursor: pointer;
  color: white;
  font-family: inherit;
  padding: 8px 16px;
  font-weight: 500;
  text-transform: uppercase;
  font-size: 0.875rem;
  letter-spacing: 0.5px;
  transition: box-shadow 280ms cubic-bezier(0.4, 0, 0.2, 1), background-color 280ms cubic-bezier(0.4, 0, 0.2, 1);
  box-shadow: var(--elevation-2);
}

.overlay-controls button:hover {
  background: #0052a3;
  box-shadow: var(--elevation-3);
}

.overlay-controls button:active {
  box-shadow: var(--elevation-4);
}

/* Lightning marker style fallback */
.rv-lightning-flash {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: #ffd600;
  box-shadow: 0 0 10px #ffd600;
  opacity: 0.95;
}

/* Forecast Column */
#previsioni-online {
  flex: 1;
  display: flex;
  flex-direction: column;
  height: 100%;
  min-height: 0;
}

#previsioni-online .card {
  flex: 1 1 180px;
  display: flex;
  flex-direction: column;
  margin: 0;
  min-height: 160px;
  overflow: hidden;
  padding: 1em;
  box-sizing: border-box;
}

#previsioni-online h2 {
  font-size: 1.2rem;
  margin-bottom: 10px;
  flex: 0 0 auto;
}

/* Internal components of Forecast Card */
#sel-frazione {
  margin-bottom: 10px;
  width: 100%;
  padding: 8px;
}

#online-table {
  flex: 1;
  overflow-y: auto;
  /* Scroll table internally */
  padding-right: 5px;
  /* Space for scrollbar */
}

/* Common Styles */
section.card {
  background: var(--card-bg);
  border-radius: var(--radius);
  box-shadow: var(--elevation-2);
  border: none;
  transition: box-shadow 280ms cubic-bezier(0.4, 0, 0.2, 1);
}

/* Night mode: improve contrast for readability */
body.night {
  --card-bg: var(--night-card-bg);
  --text-color: var(--night-text-color);
}

/* Night-specific popup and marker tweaks */
body.night .maplibregl-popup-content,
body.night .mapboxgl-popup-content {
  background: var(--night-popup-bg) !important;
  color: var(--night-text-color) !important;
}

body.night .custom-map-icon>div {
  background: rgba(255, 255, 255, 0.98) !important;
  box-shadow: 0 2px 14px rgba(255, 255, 255, 0.12) !important;
  color: #002 !important;
}

/* Ensure global tabs and card texts are readable at night */
body.night .global-tab-button {
  color: #e2e8f0;
  background: #1e293b;
  border-color: #475569;
}

body.night .global-tab-button:hover,
body.night .global-tab-button.active {
  background: var(--dpc-light-blue);
  border-color: var(--dpc-light-blue);
  color: #fff;
}

body.night #previsioni-online .card {
  color: var(--night-text-color);
}


select {
  padding: 8px 12px;
  border-radius: var(--radius);
  border: 1px solid rgba(0, 0, 0, 0.23);
  font-size: 1rem;
  background-color: #fff;
  cursor: pointer;
  color: var(--text-color);
  font-weight: 400;
  transition: border-color 200ms cubic-bezier(0.4, 0, 0.2, 1);
  box-shadow: none;
}

select:hover {
  border-color: rgba(0, 0, 0, 0.87);
}

select:focus {
  border-color: var(--dpc-light-blue);
  border-width: 2px;
  outline: none;
  padding: 7px 11px;
  /* Adjust for border width change */
}

/* Tabs */
.tabs {
  display: flex;
  border-bottom: 2px solid #e0e0e0;
  margin-bottom: 1em;
  gap: 5px;
  overflow-x: auto;
  flex: 0 0 auto;
  /* Don't shrink */
}

.tab-button {
  background: none;
  border: none;
  padding: 8px 15px;
  cursor: pointer;
  font-size: 0.9rem;
  font-weight: 500;
  color: #666;
  border-bottom: 3px solid transparent;
  white-space: nowrap;
}

.tab-button:hover,
.tab-button.active {
  color: var(--accent-color);
  background-color: #f9f9f9;
}

.tab-button.active {
  border-bottom-color: var(--accent-color);
}

.tab-content {
  display: none;
  animation: fadeIn 0.3s;
}

.tab-content.active {
  display: block;
}

@keyframes fadeIn {
  from {
    opacity: 0;
  }

  to {
    opacity: 1;
  }
}

/* Table Styles - Compact for split screen */
/* Enable scroll on container for sticky context */
.forecast-table-container {
  overflow: auto;
  /* Both X and Y */
  border-radius: 8px;
  background: white;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
  flex: 1;
  /* Fill parent */
  max-height: 100%;
  /* Constraint height */
  position: relative;
  /* Context */
}

.forecast-table {
  width: 100%;
  border-collapse: collapse;
  min-width: 600px;
  background: white;
  border-radius: 4px;
}

.forecast-table thead {
  position: sticky;
  top: 0;
  z-index: 10;
  background: #003366;
}

.forecast-table th {
  background: #003366;
  color: white;
  padding: 6px 4px;
  text-align: center;
  font-size: 0.75rem;
  font-weight: 500;
  position: sticky;
  top: 0;
  z-index: 10;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
  border-bottom: 2px solid #00A1B0;
}

.forecast-table td {
  padding: 8px;
  border-bottom: 1px solid #e0e0e0;
  color: #444;
  font-size: 0.9rem;
  text-align: center;
  vertical-align: middle;
}

.forecast-table tr:hover {
  background-color: #f8f9fa;
}

/* Stili per indicatori di rischio incendio e ondate di calore */
.forecast-table td[title*="Rischio"],
.forecast-table td[title*="Heat Index"] {
  font-weight: 600;
  font-size: 0.85rem;
}

/* Livelli di rischio incendio */
.rischio-incendio-molto-basso {
  color: #4CAF50 !important;
}

.rischio-incendio-basso {
  color: #90EE90 !important;
}

.rischio-incendio-moderato {
  color: #FFD700 !important;
  font-weight: bold;
}

.rischio-incendio-alto {
  color: #FF8C00 !important;
  font-weight: bold;
}

.rischio-incendio-molto-alto {
  color: #FF4444 !important;
  font-weight: bold;
}

.rischio-incendio-estremo {
  color: #8B0000 !important;
  font-weight: bold;
  text-shadow: 0 0 2px rgba(255, 255, 255, 0.5);
}

/* Livelli di rischio ondate di calore */
.rischio-calore-nessuno {
  color: #4CAF50 !important;
}

.rischio-calore-attenzione {
  color: #FFD700 !important;
  font-weight: bold;
}

.rischio-calore-cautela {
  color: #FF8C00 !important;
  font-weight: bold;
}

.rischio-calore-pericolo {
  color: #FF4444 !important;
  font-weight: bold;
}

.rischio-calore-pericolo-estremo {
  color: #8B0000 !important;
  font-weight: bold;
  text-shadow: 0 0 2px rgba(255, 255, 255, 0.5);
}

/* Sun Control */
.sun-control-panel {
  position: absolute;
  bottom: 15px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 500;
  background: rgba(255, 255, 255, 0.9);
  padding: 10px;
  border-radius: 20px;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 5px;
  width: 80%;
  max-width: 300px;
}

.sun-slider {
  width: 100%;
  -webkit-appearance: none;
  appearance: none;
  height: 4px;
  background: linear-gradient(to right, #001f3f, #ff851b, #87ceeb, #ff851b, #001f3f);
  border-radius: 2px;
}

.sun-slider::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 16px;
  height: 16px;
  background: #fff;
  border: 2px solid #ff851b;
  border-radius: 50%;
  cursor: pointer;
}

.sun-info {
  font-size: 0.8rem;
  font-weight: bold;
  display: flex;
  justify-content: space-between;
  width: 100%;
}

.custom-map-icon {
  display: flex;
  justify-content: center;
  align-items: center;
  transition: transform 0.2s;
}

/* Make the inner icon a fixed circular badge to avoid ellipses */
.custom-map-icon>div {
  width: 44px;
  height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.92);
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.15);
  font-size: 1.6rem;
  line-height: 1;
  overflow: hidden;
  position: relative;
  /* allow absolute children for badges */
}

.marker-main {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
}

.marker-main span {
  display: flex;
  align-items: center;
  justify-content: center;
}

.marker-event-badges {
  position: absolute;
  top: 0px;
  right: 4px;
  display: flex;
  gap: 4px;
  pointer-events: none;
}

.marker-event-badges .icon-badge {
  width: 18px;
  height: 18px;
  font-size: 12px;
  padding: 0;
  border-radius: 4px;
}

.marker-event-badges .icon-badge .icon-img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  border-radius: 4px;
}

.custom-map-icon:hover {
  transform: scale(1.08);
}

/* Support stacked emojis inside the circular badge */
.marker-emoji {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  line-height: 1;
  color: #073642;
}

.marker-emoji.two-icons {
  font-size: 1.05rem;
}

.marker-emoji.single {
  font-size: 1.4rem;
}

/* Selected marker highlight */
.custom-map-icon.selected>div {
  box-shadow: 0 0 16px rgba(2, 136, 209, 0.9);
  transform: scale(1.12);
  border: 2px solid rgba(2, 136, 209, 0.95);
  transition: transform 0.18s, box-shadow 0.18s;
}

/* Sun marker (small circular badge) */
.sun-marker-icon {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: rgba(255, 250, 205, 0.95);
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.12);
  pointer-events: none;
}

/* Small utility button used in overlay */
.small-btn {
  background: rgba(255, 255, 255, 0.95);
  border: 1px solid rgba(0, 0, 0, 0.08);
  padding: 4px 6px;
  font-size: 12px;
  border-radius: 4px;
  cursor: pointer;
}

.small-btn:hover {
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.12);
}

/* Slight style for sun path when dotted */
.sun-path-dotted {
  opacity: 0.9;
}

.sun-path-dashed {
  opacity: 0.8;
}

/* Responsive Mobile */
@media (max-width: 768px) {

  html,
  body {
    overflow-x: hidden !important;
    overflow-y: auto !important;
    height: auto !important;
    min-height: 100vh !important;
  }

  .container {
    height: auto !important;
    min-height: 100vh !important;
    overflow: visible !important;
  }

  .dashboard-grid {
    display: flex !important;
    flex-direction: column !important;
    height: auto !important;
    padding: 8px;
    gap: 8px;
    overflow: visible !important;
  }

  #mappa-container {
    flex: 0 0 auto;
    min-height: 300px;
    height: 350px;
    max-height: 350px;
  }

  #previsioni-online {
    flex: 0 0 auto !important;
    height: auto !important;
    min-height: auto !important;
    overflow: visible !important;
  }

  #previsioni-online .card {
    height: auto !important;
    min-height: auto !important;
    overflow: visible !important;
  }

  /* Rimuove scroll interno dalla lista frazioni */
  .frazioni-list-scroll-area {
    overflow: visible !important;
    max-height: none !important;
    height: auto !important;
    flex: 0 0 auto !important;
  }

  /* Rimuove scroll interno dalla tabella */
  #online-table {
    overflow: visible !important;
    max-height: none !important;
    height: auto !important;
  }
}

/* Global Top Tabs */
.global-tabs-wrapper {
  position: relative;
  display: flex;
  align-items: center;
  gap: var(--spacing-1);
  margin-bottom: 8px;
  overflow: hidden;
  /* Prevent arrows or content from creating a page-level horizontal scrollbar */
}

.global-tabs {
  display: flex;
  gap: 8px;
  flex: 1 1 auto;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
  padding: 4px 4px;
  scroll-behavior: smooth;
  scrollbar-width: none;
  /* Firefox */
  -ms-overflow-style: none;
  /* IE 10+ */
}

.global-tabs::-webkit-scrollbar {
  height: 0;
  display: none;
}

/* Webkit */

/* Uniforma altezza tile giorni */
.global-tab-button {
  background: white;
  border: none;
  padding: 8px;
  border-radius: var(--radius);
  color: var(--text-color);
  font-weight: 500;
  cursor: pointer;
  transition: background-color 280ms cubic-bezier(0.4, 0, 0.2, 1), box-shadow 280ms cubic-bezier(0.4, 0, 0.2, 1);
  box-shadow: var(--elevation-1);
  text-shadow: none;
  min-width: 220px;
  max-width: 220px;
  width: 220px;
  flex: 0 0 auto;
  scroll-snap-align: start;
  height: 120px;
  min-height: 120px;
  max-height: 120px;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

/* Carousel arrows */
.tabs-prev,
.tabs-next {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.98);
  border: none;
  box-shadow: var(--elevation-2);
  display: none;
  /* shown when overflow or on small screens */
  align-items: center;
  justify-content: center;
  cursor: pointer;
  font-size: 1.2rem;
  color: var(--dpc-blue);
  z-index: 20;
}

.tabs-prev {
  left: 8px;
}

.tabs-next {
  right: 8px;
}

/* Reserve padding inside the tabs container so arrows don't overlap items */
.global-tabs {
  padding: 6px 48px;
  /* left/right reserve for arrows */
}

.tabs-prev[disabled],
.tabs-next[disabled] {
  opacity: 0.45;
  pointer-events: none;
}

.tabs-prev:focus,
.tabs-next:focus {
  outline: 2px solid rgba(0, 102, 204, 0.25);
  box-shadow: var(--elevation-3);
}

/* Show arrows when container overflows */
.global-tabs-wrapper.has-overflow .tabs-prev,
.global-tabs-wrapper.has-overflow .tabs-next {
  display: flex;
}

/* On small screens always show arrows for discoverability */
@media (max-width: 900px) {

  .tabs-prev,
  .tabs-next {
    display: flex;
    width: 32px;
    height: 32px;
    font-size: 1rem;
  }

  .global-tabs {
    gap: 6px;
    padding: 6px 40px;
  }

  .global-tabs-wrapper {
    padding: 0 40px;
    margin-bottom: 6px;
  }

  .global-tab-button {
    min-width: 160px;
    gap: 6px;
    align-items: center;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: 6px;
    align-items: center;
    flex-wrap: wrap;
    justify-content: flex-end;
    width: 160px;
    height: 100px;
    padding: 6px;
    font-size: 0.85rem;
    user-select: none;
    -webkit-user-select: none;
  }

  .global-tab-button .tab-date {
    font-size: 0.85rem;
  }

  .global-tab-button .tab-temps {
    font-size: 0.8rem;
  }

  .global-tab-button .tab-icons .icon-badge {
    width: 20px !important;
    height: 20px !important;
    font-size: 10px !important;
  }
}

/* Extra small mobile - tabs ancora più compatti */
@media (max-width: 480px) {
  .app-header {
    padding: 3px 4px;
    min-height: 48px;
  }

  .logo-box {
    width: 36px;
    height: 36px;
    padding: 2px;
  }

  .logo-img {
    max-height: 32px;
  }

  .app-header-controls {
    font-size: 0.65rem;
    gap: 2px;
  }

  .global-tabs-wrapper {
    padding: 0 35px;
  }

  .tabs-prev,
  .tabs-next {
    width: 30px;
    height: 30px;
    font-size: 0.9rem;
  }

  .global-tab-button {
    min-width: 140px;
    max-width: 140px;
    width: 140px;
    height: 90px;
    padding: 5px;
    font-size: 0.8rem;
  }

  .global-tab-button .tab-date {
    font-size: 0.75rem;
  }

  .global-tab-button .tab-temps {
    font-size: 0.7rem;
  }

  .global-tab-button .tab-icons {
    gap: 2px;
  }

  .global-tab-button .tab-icons .icon-badge {
    width: 18px !important;
    height: 18px !important;
    font-size: 9px !important;
  }
}


.global-tab-button:hover {
  box-shadow: var(--elevation-2);
}

.global-tab-button.active {
  background: var(--dpc-blue);
  color: white;
  box-shadow: var(--elevation-2);
}

.global-tab-button.active .tab-temps,
.global-tab-button.active .tab-icons,
.global-tab-button.active div {
  color: white !important;
}

/* Zone Summary List */
.frozioni-list-container {
  overflow-y: auto;
  flex: 1;
  padding-right: 5px;
}

/* Icon badges */
.icon-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 22px;
  border-radius: 6px;
  background: rgba(255, 255, 255, 0.12);
  color: white;
  font-size: 14px;
  margin: 0 4px;
  padding: 2px;
}

.icon-badge[aria-label] {
  cursor: default;
}

.icon-badge.icon-rain {
  background: rgba(0, 102, 204, 0.12);
  color: #00A1B0;
}

.icon-badge.icon-snow {
  background: rgba(255, 255, 255, 0.12);
  color: #fff;
}

.icon-badge.icon-ice {
  background: rgba(240, 248, 255, 0.06);
  color: #0288d1;
}

.icon-badge.icon-hail {
  background: rgba(155, 81, 224, 0.08);
  color: #7b1fa2;
}

.icon-badge.icon-wind {
  background: rgba(255, 255, 255, 0.06);
  color: #e65100;
}

.icon-badge.icon-storm {
  background: rgba(0, 0, 0, 0.16);
  color: #ffd600;
}


/* Override icon-badge per tab-icons con maggiore specificità */
.global-tab-button .tab-icons .icon-badge {
  width: 24px !important;
  height: 24px !important;
  font-size: 12px !important;
  margin: 0 !important;
  padding: 2px !important;
  flex-shrink: 0;
  min-width: 24px;
  max-width: 24px;
  box-sizing: border-box;
}

.global-tab-button .tab-icons .icon-badge img {
  max-width: 20px !important;
  max-height: 20px !important;
  width: 20px !important;
  height: 20px !important;
  display: block;
}

.hourly-icons {
  display: flex;
  gap: 6px;
  margin-top: 6px;
}

.detail-icons {
  display: flex;
  gap: 8px;
  margin-top: 6px;
}

.frazione-card {
  background: #fff;
  border-radius: 10px;
  padding: 10px 12px;
  margin-bottom: 10px;
  cursor: pointer;
  box-shadow: 0 1px 3px rgba(16, 24, 40, 0.06);
  transition: transform 140ms ease, box-shadow 140ms ease, border-color 140ms ease;
  border-left: 14px solid transparent;
}

.frazione-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 8px 24px rgba(16, 24, 40, 0.08);
}

/* Semantic risk classes for visual border (applied on .frazione-card) */
.frazione-card.risk-low {
  border-left-color: #4caf50;
}

.frazione-card.risk-medium {
  border-left-color: #ffeb3b;
}

.frazione-card.risk-high {
  border-left-color: #ff9800;
}

.frazione-card.risk-extreme {
  border-left-color: #d32f2f;
}

.frazione-card-main {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.frazione-icon {
  font-size: 1.6rem;
  display: flex;
  gap: 8px;
  align-items: center;
  justify-content: flex-end;
}

/* Emphasize icon images for immediate recognizability */
.frazione-icon .icon-img {
  width: 36px;
  height: 36px;
  object-fit: contain;
  border-radius: 6px;
  box-shadow: 0 1px 3px rgba(2, 6, 23, 0.08);
  background: #ffffff;
  padding: 4px;
}

/* Make icon badges larger and more legible */
.frazione-icon .icon-badge {
  width: 40px;
  height: 40px;
  border-radius: 8px;
  background: #fff;
  color: #111;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 2px 6px rgba(16, 24, 40, 0.08);
}

.frazione-icon .icon-badge img {
  width: 28px;
  height: 28px;
}

/* Small icons row inside fraction cards */
.frazione-icon .small-icons {
  display: flex;
  gap: 6px;
  margin-top: 6px;
  align-items: center;
}

.frazione-icon .small-icons .icon-badge {
  width: 28px;
  height: 28px;
  border-radius: 6px;
  padding: 2px;
  box-shadow: none;
}

.frazione-icon .small-icons .icon-badge img {
  width: 20px;
  height: 20px;
}

.icon-badge.icon-rain {
  background: linear-gradient(135deg, #0288d1, #005b96);
  color: #fff;
}

.icon-badge.icon-storm {
  background: linear-gradient(135deg, #b71c1c, #d32f2f);
  color: #fff;
}

.icon-badge.icon-extreme_rain {
  background: linear-gradient(135deg, #0d47a1, #01579b);
  color: #fff;
}

.icon-badge.icon-snow {
  background: linear-gradient(135deg, #e3f2fd, #bbdefb);
  color: #0d47a1;
}

.icon-badge.icon-ice {
  background: linear-gradient(135deg, #eaf6ff, #e1f5fe);
  color: #01579b;
}

.icon-badge.icon-hail {
  background: linear-gradient(135deg, #f3e5f5, #e1bee7);
  color: #4a148c;
}

.icon-badge.icon-wind {
  background: linear-gradient(135deg, #fff3e0, #ffe0b2);
  color: #bf360c;
}

.icon-badge.icon-tornado {
  background: linear-gradient(135deg, #ffebee, #ffCDD2);
  color: #b71c1c;
}

/* Ensure frazione info is always left-aligned and occupies left column */
.frazione-info {
  flex: 1 1 auto;
  text-align: left;
}

.frazione-info h3 {
  margin: 0;
  font-size: 1.05rem;
  color: #111827;
  font-weight: 600;
}

.frazione-temps {
  font-size: 0.92rem;
  color: #475569;
  margin-top: 4px;
}

/* Badges are a row above the card, aligned right */
.frazione-badges {
  gap: 6px;
  align-items: center;
  flex-wrap: wrap;
  justify-content: flex-end;
}

.badge {
  padding: 4px 10px;
  border-radius: 14px;
  font-weight: 600;
  font-size: 0.78rem;
  background: #f3f4f6;
  color: #111827;
}

.badge.snow {
  background: #E3F2FD;
  color: #1976D2;
}

.badge.ice {
  background: #E3F2FD;
  color: #0d47a1;
}

.badge.wind {
  background: #fff7ed;
  color: #e65100;
}

.badge.hail {
  background: #f3e5f5;
  color: #7b1fa2;
}

.frazione-right {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 6px;
  min-width: 130px;
}

.frazione-desc {
  font-size: 0.86rem;
  color: #6b7280;
}

/* Small icons inline within the description (compact row) */
.frazione-desc .small-icons {
  display: inline-flex;
  gap: 6px;
  margin-left: 8px;
  align-items: center;
  vertical-align: middle;
}

.frazione-desc .small-icons .icon-badge {
  width: 22px;
  height: 22px;
  border-radius: 6px;
  padding: 1px;
  box-shadow: none;
}

.frazione-desc .small-icons .icon-badge img {
  width: 16px;
  height: 16px;
}

.rain-badge {
  font-weight: 700;
  color: #0d47a1;
  margin-left: 6px;
}

.icon-img {
  width: 28px;
  height: 28px;
  object-fit: contain;
}

.frazione-icon .icon-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  border-radius: 6px;
  background: transparent;
}

.frazione-icon .icon-badge img {
  width: 28px;
  height: 28px;
}

@media (max-width: 520px) {
  .frazione-card-main {
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
  }

  .frazione-right {
    align-items: flex-start;
    min-width: 0;
    width: 100%;
  }

  .frazione-badges {
    justify-content: flex-start;
  }
}


.badge {
  padding: 4px 12px;
  border-radius: 16px;
  /* Material Chip style */
  font-weight: 500;
  font-size: 0.75rem;
  text-transform: none;
  letter-spacing: 0;
}

.badge.snow {
  background: #E3F2FD;
  color: #1976D2;
}

/* Material Blue 50/700 */
.badge.ice {
  background: #E0F7FA;
  color: #0097A7;
}

/* Material Cyan 50/700 */

.btn-back {
  margin-bottom: var(--spacing-2);
  padding: 10px var(--spacing-2);
  background: var(--dpc-blue);
  color: white;
  border: none;
  border-radius: var(--radius);
  cursor: pointer;
  font-size: 0.875rem;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  display: inline-flex;
  align-items: center;
  gap: var(--spacing-1);
  transition: box-shadow 280ms cubic-bezier(0.4, 0, 0.2, 1), background-color 280ms cubic-bezier(0.4, 0, 0.2, 1);
  box-shadow: var(--elevation-2);
}

.btn-back:hover {
  background: #002244;
  box-shadow: var(--elevation-3);
}

.btn-back:active {
  box-shadow: var(--elevation-4);
}

/* Override tabs internal since we use global */
.tabs {
  display: none;
}

/* Hide old internal tabs */

/* Enhanced Tabs */
/* Migliora layout per allineamento icone in basso - proprietà spostate nella definizione principale */

.tab-temps {
  font-size: 0.8rem;
  font-weight: bold;
  opacity: 0.9;
}

.tab-icons {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  min-height: 24px;
  max-height: 28px;
  margin-top: 2px;
  gap: 4px;
  flex-wrap: nowrap;
  overflow: hidden;
  padding: 0;
  box-sizing: border-box;
}

.tab-icons .icon-badge {
  width: 24px !important;
  height: 24px !important;
  font-size: 12px !important;
  margin: 0 !important;
  padding: 2px !important;
  flex-shrink: 0;
  min-width: 24px;
  max-width: 24px;
  box-sizing: border-box;
}

.tab-icons .icon-badge img {
  max-width: 20px !important;
  max-height: 20px !important;
  width: 20px !important;
  height: 20px !important;
  display: block;
}

.layer-switcher {
  position: absolute;
  top: 10px;
  right: 10px;
  z-index: 400;
  background: rgba(255, 255, 255, 0.95);
  padding: 6px;
  border-radius: 8px;
  box-shadow: var(--elevation-2);
  font-size: 0.85rem;
  display: flex;
  gap: 6px;
  align-items: center;
  transition: width 220ms ease, padding 220ms ease;
}

.layer-switcher .layer-controls {
  display: flex;
  gap: 6px;
}

.layer-switcher .layer-collapse,
.layer-switcher .map-controls-toggle {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  border: none;
  background: white;
  box-shadow: var(--elevation-1);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  font-size: 0.95rem;
}

.layer-switcher.collapsed {
  padding: 6px;
}

.layer-switcher.collapsed .layer-controls {
  display: none;
}

.layer-btn {
  padding: 6px 8px;
  border: none;
  background: transparent;
  color: var(--text-color);
  border-radius: 4px;
}

.layer-btn.active {
  background: var(--dpc-blue);
  color: white;
  box-shadow: var(--elevation-1);
}

.layer-switcher .layer-btn:focus,
.layer-switcher .layer-collapse:focus,
.layer-switcher .map-controls-toggle:focus {
  outline: 2px solid rgba(0, 102, 204, 0.18);
  box-shadow: var(--elevation-3);
}

.layer-btn {
  padding: 5px 10px;
  border: 1px solid #ccc;
  background: #f9f9f9;
  cursor: pointer;
  border-radius: 3px;
  font-weight: 500;
}

.layer-btn.active {
  background: var(--dpc-blue);
  color: white;
  border-color: var(--dpc-blue);
}

.layer-btn:hover {
  background: #eee;
}

/* ========================================
   MOBILE & TABLET RESPONSIVE
   ======================================== */

/* Small Mobile Devices (max 480px) */
@media (max-width: 480px) {

  /* Sun control panel */
  .sun-control-panel {
    width: 92%;
    max-width: none;
    padding: 6px 8px;
    bottom: 8px;
    font-size: 0.7rem;
  }

  .sun-info {
    font-size: 0.65rem;
    gap: 4px;
  }

  .sun-slider {
    height: 3px;
  }

  .sun-slider::-webkit-slider-thumb {
    width: 14px;
    height: 14px;
  }

  /* Overlay controls */
  .overlay-controls {
    max-width: 200px;
    padding: 4px 6px 6px 6px;
    font-size: 0.7rem;
    top: 8px;
    left: 8px;
  }

  /* Collassa automaticamente overlay su mobile molto piccolo */
  .overlay-controls.collapsed {
    width: 40px;
    height: 40px;
  }

  .overlay-controls label {
    font-size: 0.75rem;
  }

  .overlay-controls button.small-btn {
    font-size: 0.7rem;
    padding: 4px 8px;
  }

  /* Layer switcher */
  .layer-switcher {
    top: 60px;
    right: 8px;
    font-size: 0.7rem;
    gap: 3px;
    padding: 4px;
  }

  .layer-switcher .layer-collapse,
  .layer-switcher .map-controls-toggle {
    width: 24px;
    height: 24px;
    font-size: 0.8rem;
  }

  .layer-btn {
    font-size: 0.75rem;
    padding: 4px 8px;
  }

  /* Frazione cards */
  .frazione-card {
    padding: 8px;
    margin-bottom: 6px;
  }

  .frazione-icon {
    font-size: 1.3rem;
    min-width: 40px !important;
  }

  .frazione-info h3 {
    font-size: 0.85rem;
  }

  .frazione-temps {
    font-size: 0.75rem;
  }

  /* Mappa ancora più piccola su mobile molto piccolo */
  #mappa-container {
    height: 300px !important;
    max-height: 300px !important;
    min-height: 300px !important;
  }

  /* Chart delle zone più piccolo */
  #frazioni-chart {
    max-height: 120px !important;
    height: 120px !important;
  }

  /* Detail view */
  .detail-header-bar h2 {
    font-size: 1.1rem;
  }

  .btn-back {
    padding: 8px 12px;
    font-size: 0.8rem;
  }

  /* Mappa container su mobile più piccolo */
  #mappa-container {
    max-height: 40vh;
    min-height: 250px;
  }

  /* Forecast table responsive */
  .forecast-table {
    min-width: 800px;
    /* Force scroll on container */
    font-size: 0.8rem;
  }

  .forecast-table th {
    font-size: 0.7rem;
    padding: 6px 4px;
  }

  .forecast-table td {
    font-size: 0.8rem;
    padding: 8px 6px;
  }

  .forecast-table-container {
    -webkit-overflow-scrolling: touch;
  }

  #previsioni-online h2 {
    font-size: 1rem;
  }

  #sel-frazione {
    font-size: 0.9rem;
    padding: 6px;
  }
}

/* Medium Mobile to Tablet (481px - 768px) */
@media (min-width: 481px) and (max-width: 768px) {
  .sun-control-panel {
    width: 85%;
    padding: 9px;
  }

  .overlay-controls {
    max-width: 280px;
  }

  #mappa-container {
    max-height: 45vh;
    min-height: 280px;
  }

  .app-header {
    padding: 5px 8px;
  }

  .logo-box {
    width: 50px;
    height: 50px;
  }

  .assoc-text .assoc-name {
    font-size: 1rem;
  }

  .assoc-text .assoc-sub {
    font-size: 0.85rem;
  }
}

/* Landscape Mobile */
@media (max-width: 768px) and (orientation: landscape) {

  html,
  body {
    overflow-x: hidden !important;
    overflow-y: auto !important;
    height: auto !important;
    min-height: 100vh !important;
  }

  .container {
    height: auto !important;
    min-height: 100vh !important;
    overflow: visible !important;
  }

  .dashboard-grid {
    flex-direction: column !important;
    gap: 8px;
    height: auto !important;
    overflow: visible !important;
  }

  #mappa-container {
    flex: 0 0 auto !important;
    height: 300px !important;
    max-height: 300px !important;
    min-height: 300px !important;
  }

  #previsioni-online {
    flex: 0 0 auto !important;
    height: auto !important;
    min-height: auto !important;
    overflow: visible !important;
  }

  #previsioni-online .card {
    height: auto !important;
    overflow: visible !important;
  }

  .frazioni-list-scroll-area {
    overflow: visible !important;
    max-height: none !important;
    height: auto !important;
    flex: 0 0 auto !important;
  }

  .app-header {
    padding: 3px 6px;
    min-height: 44px;
  }

  .global-tabs-wrapper {
    margin-bottom: 4px;
  }

  .logo-box {
    width: 38px;
    height: 38px;
  }

  .assoc-text {
    display: none;
  }
}

/* Tablet Portrait (769px - 1024px) */
@media (min-width: 769px) and (max-width: 1024px) {
  .dashboard-grid {
    gap: 12px;
    padding: 12px;
  }

  .global-tab-button {
    min-width: 190px;
    max-width: 190px;
    width: 190px;
  }

  .assoc-text .assoc-name {
    font-size: 1.3rem;
  }

  .assoc-text .assoc-sub {
    font-size: 1.1rem;
  }
}

/* Modal Styles for Historical Analysis (Legacy removed, using standard .modal-overlay) */

.historical-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 16px;
  margin-bottom: 24px;
}

.history-card {
  background: #f1f3f4;
  padding: 16px;
  border-radius: 12px;
  text-align: center;
}

.history-card .label {
  font-size: 0.85rem;
  color: #5f6368;
  margin-bottom: 8px;
  display: block;
}

.history-card .value {
  font-size: 1.25rem;
  font-weight: 700;
  color: #202124;
}

.history-card .anomaly {
  font-size: 0.8rem;
  margin-top: 4px;
  font-weight: 600;
}

.anomaly.positive {
  color: #d93025;
}

.anomaly.negative {
  color: #1967d2;
}

.anomaly.neutral {
  color: #188038;
}

.chart-container-modal {
  height: 350px;
  position: relative;
}

.disclaimer {
  font-size: 0.75rem;
  color: #70757a;
  margin-top: 20px;
  font-style: italic;
}

.btn-historical {
  background: #e8f0fe;
  color: #1967d2;
  border: 1px solid #d2e3fc;
  border-radius: 8px;
  padding: 6px 12px;
  font-size: 0.9rem;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s;
  display: flex;
  align-items: center;
  gap: 6px;
}

.btn-historical:hover {
  background: #d2e3fc;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

/* --- CLIMATE STATS MODAL --- */
.modal-large {
  max-width: 900px !important;
  width: 90% !important;
}

.stats-intro {
  margin-bottom: 20px;
  color: #444;
  line-height: 1.6;
}

.stats-cards-container {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 15px;
  margin-bottom: 25px;
}

.stats-card {
  background: #f8f9fa;
  border-left: 5px solid var(--dpc-light-blue);
  padding: 15px;
  border-radius: 8px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
}

.anomaly-alert {
  display: flex;
  align-items: center;
  gap: 10px;
  color: var(--dpc-blue);
  font-weight: 700;
}

.charts-scroll-area {
  display: flex;
  flex-direction: column;
  gap: 30px;
  max-height: 500px;
  overflow-y: auto;
  padding-right: 10px;
}

.chart-section {
  background: white;
  padding: 15px;
  border-radius: 12px;
  border: 1px solid #eee;
}

.chart-section h3 {
  margin-top: 0;
  margin-bottom: 15px;
  font-size: 1.1rem;
  color: #333;
}

.chart-wrapper {
  height: 300px;
  width: 100%;
}

.modal-footer-disclaimer {
  margin-top: 20px;
  font-size: 0.8rem;
  color: #888;
  text-align: center;
}

@media (max-width: 600px) {
  .modal-large {
    width: 98% !important;
  }
}

/* Frazione card: fully horizontal layout, compact height, clear visual hierarchy */
.frazione-card {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 16px;
  padding: 12px 16px;
  border-radius: 8px;
  background: var(--card-bg);
  box-shadow: var(--elevation-1);
  border: 1px solid #e0e0e0;
  min-height: 70px;
  transition: box-shadow 0.2s, transform 0.2s;
  cursor: pointer;
}

.frazione-card:hover {
  box-shadow: var(--elevation-2);
  transform: translateY(-1px);
}

/* Frazione name and temperature (wider for better space usage) */
.frazione-info {

  min-width: 200px;
}

.frazione-info h3 {
  margin: 0 0 4px 0;
  font-size: 1.1rem;
  font-weight: 600;
  letter-spacing: 0.01em;
  color: var(--text-color);
}

.frazione-temps {
  color: var(--text-secondary);
  font-size: 0.9rem;
  white-space: nowrap;
}

/* Main icon (single, prominent) */
.frazione-icon {
  flex: 0 0 56px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.frazione-icon .main-icon .icon-badge img.icon-img {
  width: 52px;
  height: 52px;
  object-fit: contain;
}

/* Description + details (horizontal flow) */
.frazione-desc {
  flex: 1 1 auto;
  font-size: 0.95rem;
  color: var(--text-color);
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}

/* Small icons (events) inline */
.small-icons {
  display: flex;
  gap: 4px;
  align-items: center;
}

.small-icons .icon-badge img.icon-img {
  width: 24px;
  height: 24px;
  object-fit: contain;
}

/* Risk badges (right side - now wider to accommodate all badges) */
/* Duplicate .frazione-badges removed for clarity */
.frazione-badges .icon-badge {
  width: 24px;
  height: 24px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.frazione-badges .icon-badge img.icon-img {
  width: 24px;
  height: 24px;
  object-fit: contain;
}

/* Badges (risk indicators like snow, wind, etc.) */
.badge {
  padding: 4px 8px;
  border-radius: 4px;
  font-size: 0.75rem;
  background: #f0f2f5;
  color: #333;
  white-space: nowrap;
  font-weight: 500;
}

.badge.wind {
  background: #fff3e0;
  color: #e65100;
}

.badge.snow {
  background: #e3f2fd;
  color: #1976d2;
}

.badge.ice {
  background: #e0f7fa;
  color: #0097a7;
}

.badge.hail {
  background: #f3e5f5;
  color: #7b1fa2;
}

.rain-badge {
  background: linear-gradient(90deg, #e3f2fd, #bbdefb);
  padding: 4px 8px;
  border-radius: 4px;
  font-size: 0.8rem;
  color: #0d47a1;
  white-space: nowrap;
  font-weight: 500;
}

/* Mobile: revert to stacked layout */
@media (max-width:800px) {
  .frazione-card {
    flex-direction: column;
    align-items: stretch;
    padding: 10px;
    gap: 10px;
    min-height: auto;
  }

  .frazione-info {
    min-width: auto;
    order: 1;
  }

  .frazione-icon {
    order: 2;
    flex: 0 0 48px;
    align-self: center;
  }

  .frazione-icon .main-icon .icon-badge img.icon-img {
    width: 44px;
    height: 44px;
  }

  .frazione-desc {
    order: 3;
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
  }

  /* Duplicate .frazione-badges removed for clarity */
  .small-icons .icon-badge img.icon-img {
    width: 20px;
    height: 20px;
  }
}

/* UI Polish: Standardized Frazioni List Components */

/* Header Container */
.frazione-card-header {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 10px 14px;
  background: #f8fafc;
  border-bottom: 1px solid #e2e8f0;
  border-radius: 8px 8px 0 0;
}

.frazione-card-title {
  font-weight: 600;
  font-size: 1rem;
  color: var(--dpc-blue);
  letter-spacing: 0.01em;
}

/* Metrics Controls Container */
.frazione-metrics {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
}

/* Standardized Select Inputs */
.frazione-metrics select {
  padding: 4px 8px;
  font-size: 0.85rem;
  min-width: 90px;
  border: 1px solid #cbd5e1;
  border-radius: 6px;
  background-color: #fff;
  color: var(--text-color);
  transition: border-color 0.2s, box-shadow 0.2s;
  cursor: pointer;
}

.frazione-metrics select:hover {
  border-color: var(--dpc-light-blue);
}

.frazione-metrics select:focus {
  border-color: var(--dpc-blue);
  outline: none;
  box-shadow: 0 0 0 2px rgba(0, 51, 102, 0.1);
}

/* Numeric Input */
.frazione-metrics input[type="number"] {
  width: 50px;
  padding: 4px 8px;
  font-size: 0.85rem;
  text-align: center;
  border: 1px solid #cbd5e1;
  border-radius: 6px;
  color: var(--text-color);
  background-color: #fff;
}

.frazione-metrics input[type="number"]:focus {
  border-color: var(--dpc-blue);
  outline: none;
}

/* Action Buttons (Export/Download) */
.btn-action {
  padding: 5px 10px;
  font-size: 0.8rem;
  font-weight: 500;
  border: none;
  border-radius: 6px;
  cursor: pointer;
  transition: transform 0.1s, box-shadow 0.2s, background-color 0.2s;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: white;
}

.btn-action:hover {
  transform: translateY(-1px);
  box-shadow: 0 3px 6px rgba(0, 0, 0, 0.1);
}

.btn-action:active {
  transform: translateY(0);
}

.btn-primary {
  background-color: var(--dpc-blue);
}

.btn-primary:hover {
  background-color: #002855;
}

.btn-accent {
  background-color: var(--dpc-cyan);
}

.btn-accent:hover {
  background-color: #008c99;
}

.btn-info {
  background-color: var(--dpc-light-blue);
}

.btn-info:hover {
  background-color: #0056b3;
}


/* Chart Area */
.frazione-chart-container {
  flex: 0 0 auto;
  padding: 10px;
  height: 160px;
  background: #fff;
  border-bottom: 1px solid #f1f5f9;
}

.frazione-chart-canvas {
  width: 100%;
  height: 100%;
  max-height: 150px;
  display: block;
}

/* Scrollable List Container */
.frazione-list-scroll-area {
  flex: 1 1 auto;
  overflow-y: auto;
  min-height: 150px;
  /* Ensure space for list */
  background: #f8fafc;
  /* Slight contrast from card bg */
  padding: 8px;
}

.frazione-list-container {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

/* Individual Zone Card (List Item) */
.frazione-list-item {
  display: flex;
  flex-direction: row;
  /* Horizontal alignment */
  align-items: center;
  justify-content: flex-start;
  gap: 16px;
  background: #ffffff;
  border: 1px solid #e2e8f0;
  border-radius: 8px;
  padding: 12px 16px;
  transition: transform 0.2s, box-shadow 0.2s, border-color 0.2s;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.02);
  cursor: pointer;
}

.frazione-list-item:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
  /* Lift effect */
  border-color: var(--dpc-light-blue);
}

/* Icon Container in List Item */
.frazione-icon-box {
  flex: 0 0 48px;
  height: 48px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #f1f5f9;
  border-radius: 50%;
  /* Circle */
  font-size: 1.5rem;
  color: var(--dpc-blue);
}

/* Content Area in List Item */
.frazione-content {
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
  /* Prevent flex overflow */
}

/* Title row: Name + Badges */
.frazione-title-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 8px;
}

.frazione-name {
  font-size: 1rem;
  font-weight: 700;
  color: var(--dpc-blue);
  margin: 0;
  line-height: 1.2;
}

/* Temperature / Description Row */
.frazione-details-row {
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: 0.9rem;
  color: var(--text-secondary);
}

.frazione-temp {
  font-weight: 600;
  color: var(--text-color);
  background: #eff6ff;
  /* Light blue tint */
  padding: 2px 6px;
  border-radius: 4px;
}

.frazione-desc {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 200px;
}


/* Metrics Badges (Rain, Wind) */
.frazione-badge-metrics {
  display: flex;
  align-items: center;
  gap: 4px;
}

.metric-pill {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 2px 8px;
  border-radius: 12px;
  font-size: 0.75rem;
  font-weight: 600;
}

.metric-pill.rain {
  background-color: #e0f2fe;
  color: #0284c7;
}

.metric-pill.wind {
  background-color: #ffedd5;
  color: #c2410c;
}

/* Alert Badges simplified */
.frazione-alert-tag {
  font-size: 0.75rem;
  padding: 2px 8px;
  border-radius: 4px;
  font-weight: 700;
  color: #fff;
  text-transform: uppercase;
  letter-spacing: 0.02em;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
  display: inline-flex;
  align-items: center;
  gap: 4px;
}

.frazione-alert-tag.landslide {
  background-color: #d32f2f;
  /* Red */
}

.frazione-alert-tag.flood {
  background-color: #0288d1;
  /* Blue */
}

/* Night Mode Overrides */
body.night .frazione-card-header {
  background: #1e293b;
  border-bottom-color: #334155;
}

body.night .frazione-card-title {
  color: #f8fafc;
}

body.night .frazione-metrics select,
body.night .frazione-metrics input {
  background-color: #0f172a;
  border-color: #334155;
  color: #f8fafc;
}

body.night .frazione-chart-container {
  background: #1e293b;
  border-bottom-color: #334155;
}

body.night .frazione-list-scroll-area {
  background: #0f172a;
}

body.night .frazione-list-item {
  background: #1e293b;
  border-color: #334155;
}

body.night .frazione-list-item:hover {
  background: #334155;
  border-color: var(--dpc-light-blue);
}

body.night .frazione-icon-box {
  background: #334155;
  color: #60a5fa;
}

body.night .frazione-name {
  color: #f8fafc;
}

body.night .frazione-details-row {
  color: #94a3b8;
}

body.night .frazione-temp {
  background: #334155;
  color: #f1f5f9;
}

/* UI Self-Review: Standardized Detail View */
.detail-view-container {
  height: 100%;
  display: flex;
  flex-direction: column;
  background: var(--card-bg, #fff);
  border-radius: 8px;
  overflow: hidden;
}

.detail-header {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
  padding: 10px;
  background: #f8fafc;
  border-bottom: 1px solid #e2e8f0;
}

.detail-title {
  flex: 1 1 auto;
  margin: 0;
  font-size: 1.25rem;
  font-weight: 700;
  color: var(--dpc-blue);
}

.detail-chart-wrapper {
  flex: 0 0 240px;
  padding: 10px;
  background: #fff;
  border-bottom: 1px solid #f1f5f9;
}

/* Sticky Header Fix: Disable wrapper scroll, let container handle it */
.detail-content-scroll {
  flex: 1;
  overflow: hidden;
  /* WAS auto */
  padding: 10px;
  display: flex;
  /* Allow child to fill */
  flex-direction: column;
}

/* Standardized Modal */
.modal-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.6);
  z-index: 9999;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.2s ease;
}

.modal-overlay.active {
  opacity: 1;
  pointer-events: auto;
}

.modal-content {
  background: white;
  width: 90%;
  max-width: 500px;
  border-radius: 8px;
  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.2);
  display: flex;
  flex-direction: column;
  max-height: 90vh;
  overflow-y: auto;
  animation: modalSlideUp 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}

@keyframes modalSlideUp {
  from {
    transform: translateY(20px);
    opacity: 0;
  }

  to {
    transform: translateY(0);
    opacity: 1;
  }
}

.modal-header {
  padding: 16px;
  border-bottom: 1px solid #e2e8f0;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.modal-title {
  margin: 0;
  font-size: 1.1rem;
  font-weight: 700;
  color: var(--dpc-blue);
}

.modal-close-btn {
  background: none;
  border: none;
  font-size: 1.5rem;
  line-height: 1;
  color: #64748b;
  cursor: pointer;
  padding: 4px;
  border-radius: 4px;
}

.modal-close-btn:hover {
  background: #f1f5f9;
  color: #ef4444;
}

.modal-body {
  padding: 20px;
}

/* Night Mode Support for Detail View */
body.night .detail-view-container {
  background: var(--card-bg);
}

body.night .detail-header {
  background: #1e293b;
  border-bottom-color: #334155;
}

body.night .detail-title {
  color: #f8fafc;
}

body.night .detail-chart-wrapper {
  background: var(--card-bg);
  border-bottom-color: #334155;
}

body.night .modal-content {
  background: #1e293b;
  color: #f8fafc;
}

body.night .modal-header {
  border-bottom-color: #334155;
}

body.night .modal-title {
  color: #f8fafc;
}

body.night .modal-body {
  color: #cbd5e1;
}

/* Overlay Controls Standardized */
.overlay-option {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 6px;
  cursor: pointer;
  font-size: 0.9rem;
  color: #333;
}

.overlay-group {
  display: flex;
  gap: 8px;
  align-items: center;
  margin: 8px 0;
  flex-wrap: wrap;
}

/* Risk Indicators (Appended from components/frazioni-list.css) */
.risk-indicator-dot {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  position: absolute;
  top: 12px;
  right: 12px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
  border: 1px solid #fff;
  z-index: 2;
}

.risk-indicator-dot.risk-low {
  background-color: #4CAF50;
  box-shadow: 0 0 4px rgba(76, 175, 80, 0.4);
}

.risk-indicator-dot.risk-medium {
  background-color: #FFEB3B;
  box-shadow: 0 0 4px rgba(255, 235, 59, 0.4);
}

.risk-indicator-dot.risk-high {
  background-color: #FF9800;
  box-shadow: 0 0 4px rgba(255, 152, 0, 0.4);
}

.risk-indicator-dot.risk-extreme {
  background-color: #F44336;
  box-shadow: 0 0 4px rgba(244, 67, 54, 0.4);
}

/* Colored Borders for Risk Levels */
.frazione-list-item.risk-low {
  border-left: 4px solid #4CAF50;
}

.frazione-list-item.risk-medium {
  border-left: 4px solid #FFEB3B;
}

.frazione-list-item.risk-high {
  border-left: 4px solid #FF9800;
}

.frazione-list-item.risk-extreme {
  border-left: 4px solid #F44336;
}

/* === PWA OFFLINE BANNER === */
.offline-banner {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 10000;
  background: linear-gradient(135deg, #ff9800 0%, #f57c00 100%);
  color: white;
  padding: 8px 16px;
  text-align: center;
  font-size: 0.9rem;
  font-weight: 600;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  animation: slideDown 0.3s ease-out;
}

.offline-banner .offline-icon {
  font-size: 1.2rem;
}

@keyframes slideDown {
  from {
    transform: translateY(-100%);
    opacity: 0;
  }

  to {
    transform: translateY(0);
    opacity: 1;
  }
}

/* Adjust body when offline banner is shown */
body.offline-mode .container {
  margin-top: 40px;
}

/* Mobile Bottom Navigation Bar Optimization */
.header-actions-group {
  display: flex;
  gap: 12px;
  align-items: center;
}

@media (max-width: 900px) {

  /* Move actions to bottom bar */
  .header-actions-group {
    position: fixed !important;
    bottom: 0 !important;
    left: 0 !important;
    right: 0 !important;
    width: 100% !important;
    height: auto;
    background: rgba(255, 255, 255, 0.85);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border-top: 1px solid rgba(255, 255, 255, 0.4);
    display: flex;
    justify-content: space-evenly;
    align-items: center;
    padding: 8px 0 20px 0;
    /* Extra padding for iOS home indicator */
    z-index: 2000;
    box-shadow: 0 -4px 20px rgba(0, 0, 0, 0.1);
  }

  body.night .header-actions-group {
    background: rgba(15, 23, 42, 0.85);
    border-top: 1px solid rgba(255, 255, 255, 0.1);
  }

  /* Reset button styles for tab bar feel */
  .header-actions-group button {
    background: transparent !important;
    box-shadow: none !important;
    color: var(--dpc-blue) !important;
    flex-direction: column;
    padding: 6px !important;
    border-radius: 12px !important;
    gap: 4px !important;
    flex: 1;
    max-width: 80px;
  }

  body.night .header-actions-group button {
    color: #e2e8f0 !important;
  }

  .header-actions-group button:active {
    background: rgba(0, 0, 0, 0.05) !important;
    transform: scale(0.95);
  }

  .header-actions-group button span:first-child {
    font-size: 1.4rem;
    margin-bottom: 2px;
  }

  .header-actions-group .btn-text {
    font-size: 0.7rem;
    font-weight: 500;
    opacity: 0.9;
  }

  /* Add padding to grid so content isn't hidden behind bottom bar */
  .dashboard-grid {
    padding-bottom: 100px !important;
  }
}

/* ====== MOBILE NAVIGATION FIX ====== */
/* Default: Hide mobile bottom nav, show header actions */
.mobile-bottom-nav {
  display: none !important;
}

@media (max-width: 900px) {

  /* Hide the header buttons on mobile */
  .header-actions-group {
    display: none !important;
  }

  /* Show the dedicated mobile bottom nav */
  .mobile-bottom-nav {
    display: flex !important;
    position: fixed;
    bottom: 0;
    left: 0;
    width: 100%;
    background: rgba(255, 255, 255, 0.95);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border-top: 1px solid rgba(0, 0, 0, 0.1);
    justify-content: space-evenly;
    align-items: center;
    padding: 8px 0 24px 0;
    /* Safe area */
    z-index: 99999;
    /* Ensure on top of everything */
    box-shadow: 0 -4px 12px rgba(0, 0, 0, 0.1);
  }

  body.night .mobile-bottom-nav {
    background: rgba(15, 23, 42, 0.95);
    border-top: 1px solid rgba(255, 255, 255, 0.1);
  }

  .mobile-nav-btn {
    background: none;
    border: none;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 4px;
    color: var(--dpc-blue);
    font-size: 1.5rem;
    padding: 8px;
    border-radius: 8px;
    flex: 1;
  }

  body.night .mobile-nav-btn {
    color: #e2e8f0;
  }

  .mobile-nav-btn:active {
    opacity: 0.7;
    transform: scale(0.95);
  }

  .nav-text {
    font-size: 0.7rem;
    font-weight: 600;
  }
}

/* ====== MOBILE VIEW SWITCHING ====== */
@media (max-width: 900px) {

  /* Default Mobile State: List Visible, Map Hidden */
  #mappa-container {
    display: none !important;
    /* Hide map by default */
  }

  #previsioni-online {
    display: flex !important;
    flex: 1 !important;
    height: 100% !important;
    min-height: 0 !important;
    overflow-y: auto !important;
  }

  /* Map View State (toggled via body class) */
  body.mobile-map-view #mappa-container {
    display: flex !important;
    flex: 1 !important;
    height: 100% !important;
    width: 100% !important;
    border-radius: 0 !important;
    padding-bottom: 80px;
    /* Space for bottom nav */
  }

  body.mobile-map-view #previsioni-online {
    display: none !important;
  }

  /* Active state for bottom nav buttons */
  .mobile-nav-btn.active {
    color: var(--dpc-light-blue);
    background: rgba(0, 102, 204, 0.1);
  }
}

/* ====== MOBILE LIST ITEM CLEANUP ====== */
@media (max-width: 600px) {

  /* Stack Content Vertically */
  .frazione-list-item {
    align-items: flex-start;
    /* Align icon top */
    padding: 10px;
  }

  .frazione-content {
    gap: 6px;
    /* Spacing between title/badges/details */
  }

  /* Title Row: Stack Name above Badges */
  .frazione-title-row {
    flex-direction: column;
    align-items: flex-start;
    gap: 4px;
    width: 100%;
  }

  .frazione-name {
    font-size: 1.1rem;
    /* Slightly larger for readability */
    width: 100%;
    margin-bottom: 2px;
  }

  /* Ensure badges wrap and don't overflow */
  .frazione-badge-metrics {
    flex-wrap: wrap;
    /* Allow badges to wrap */
    gap: 4px;
    width: 100%;
  }

  /* Details Row: Allow wrapping for Temp/Rain */
  .frazione-details-row {
    flex-wrap: wrap;
    gap: 8px;
    font-size: 0.85rem;
    margin-top: 2px;
  }

  /* Make badges smaller and pill-shaped */
  .frazione-alert-tag {
    font-size: 0.65rem;
    padding: 2px 6px;
    white-space: normal;
    /* Allow text wrap if needed */
    text-align: center;
    max-width: 100%;
    display: inline-block;
  }

  .metric-pill,
  .badge {
    font-size: 0.7rem;
    padding: 2px 6px;
  }

  /* Hide description on very small screens to save space */
  .frazione-desc {
    display: none;
  }

  /* Ensure rain badge fits */
  .metric-pill.rain {
    white-space: nowrap;
  }
}

/* ====== MOBILE STICKY HEADER FIX ====== */
@media (max-width: 900px) {

  /* Remove internal scrolling on mobile so Body scroll dominates */
  .detail-content-scroll,
  .forecast-table-container {
    overflow: visible !important;
    max-height: none !important;
    flex: none !important;
    display: block !important;
  }

  /* Ensure the table header sticks to the top of the SCREEN on mobile */
  .forecast-table thead,
  .forecast-table th {
    position: sticky !important;
    top: 0 !important;
    z-index: 1000 !important;
  }
}

/* ====== STRICT PORTRAIT ENFORCEMENT ====== */
/* Block usage on mobile landscape (phones) */
@media (max-width: 950px) and (orientation: landscape) {

  /* Hide the entire app UI */
  .container,
  .mobile-bottom-nav,
  .loading-overlay,
  .modal-overlay {
    display: none !important;
  }

  /* Show the Portrait Warning Overlay */
  #portrait-warning {
    display: flex !important;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: var(--dpc-blue);
    color: #ffffff;
    z-index: 99999;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 40px;
  }
}

/* ====== FINAL VIEWPORT LOCK ====== */
/* Force browser to respect width limits */
@media (max-width: 900px) {

  html,
  body {
    max-width: 100vw !important;
    width: 100vw !important;
    overflow-x: hidden !important;
    position: relative;
  }
}

/* ====== EMERGENCY OVERFLOW FIX ====== */
@media (max-width: 900px) {

  /* 1. Kill global scroll again */
  body,
  html {
    width: 100% !important;
    max-width: 100vw !important;
    overflow-x: hidden !important;
  }

  /* 2. Contain the Chart */
  .frazione-chart-container {
    width: 100% !important;
    max-width: 100% !important;
    overflow-x: auto !important;
    /* Scroll internally if needed */
    display: block !important;
  }

  .frazione-chart-canvas {
    max-width: 100% !important;
    height: auto !important;
  }

  /* 3. Contain Header Items */
  .app-header,
  .app-header-left,
  .app-header-center,
  .app-header-right {
    max-width: 100vw !important;
    overflow-x: hidden !important;
  }

  /* 4. Fix Tab Overflow */
  .global-tabs-wrapper {
    max-width: 100vw !important;
  }

  /* 5. Metrics/Filters Wrapping */
  .frazione-metrics {
    flex-wrap: wrap !important;
    gap: 4px !important;
  }

  .frazione-metrics select,
  .frazione-metrics input,
  .frazione-metrics button {
    max-width: 80px !important;
    /* Force small inputs */
    font-size: 0.8rem !important;
  }

  /* 6. Dashboard Grid Containment */
  .dashboard-grid {
    width: 100% !important;
    max-width: 100vw !important;
    padding: 0 !important;
    /* Remove padding that creates overflow with 100% width */
    margin: 0 !important;
    display: flex !important;
    flex-direction: column !important;
  }

  #previsioni-online,
  #mappa-container {
    width: 100% !important;
    max-width: 100% !important;
    padding: 4px !important;
  }

  /* 7. Ensure cards don't overflow */
  .card {
    max-width: 100% !important;
    margin: 0 0 10px 0 !important;
  }
}

/* ====== FINAL MOBILE POLISH (Header & Tabs) ====== */
@media (max-width: 900px) {

  /* 1. Fix Header Alignment */
  .app-header {
    justify-content: space-between !important;
    padding-left: 8px !important;
    padding-right: 8px !important;
  }

  .app-header-left {
    display: flex !important;
    align-items: center !important;
    flex: 1 !important;
    /* Take available space */
    overflow: hidden !important;
    gap: 8px !important;
  }

  .app-header-center {
    display: none !important;
    /* Remove empty center container consuming space */
  }

  .app-logo {
    height: 40px !important;
    width: auto !important;
    flex-shrink: 0 !important;
    /* Don't squash logo */
    margin-right: 0 !important;
  }

  .title-text {
    display: flex !important;
    flex-direction: column !important;
    align-items: flex-start !important;
    justify-content: center !important;
    overflow: hidden !important;
  }

  .main-title {
    font-size: 1.5rem !important;
    letter-spacing: 0.1em !important;
    /* Reduce massive desktop spacing */
    margin: 0 !important;
    text-align: left !important;
  }

  /* 2. Fix Day Tabs Truncation */
  .global-tab-button {
    padding: 6px 4px !important;
    /* Reduce padding */
  }

  .tab-probs {
    font-size: 0.7rem !important;
    /* Smaller font for mobile */
    white-space: normal !important;
    /* Allow wrapping */
    line-height: 1.1 !important;
    text-align: center !important;
  }

  .tab-rain {
    font-size: 0.8rem !important;
  }
}

/* ====== GEOLOCATION HIGHLIGHT ====== */
.frazione-list-item.current-location {
  border: 2px solid var(--dpc-blue) !important;
  background-color: #e3f2fd;
  /* Light blue tint */
  box-shadow: 0 4px 12px rgba(2, 136, 209, 0.2);
  order: -1 !important;
  /* Visual safety net if JS sorting fails */
}

/* Add a pulsing effect to show it's live */
@keyframes pulse-border {
  0% {
    box-shadow: 0 0 0 0 rgba(2, 136, 209, 0.4);
  }

  70% {
    box-shadow: 0 0 0 6px rgba(2, 136, 209, 0);
  }

  100% {
    box-shadow: 0 0 0 0 rgba(2, 136, 209, 0);
  }
}

.frazione-list-item.current-location {
  animation: pulse-border 2s infinite;
}

.frazione-alert-tag.location-tag {
  background-color: var(--dpc-blue);
  color: #fff;
  border-color: #0277bd;
  font-weight: 700;
  display: inline-flex;
  align-items: center;
  gap: 4px;
}

/* ====== MAP USER LOCATION MARKER ====== */
.user-location-marker {
  width: 20px;
  height: 20px;
  background-color: #2196F3;
  border: 3px solid #FFFFFF;
  border-radius: 50%;
  box-shadow: 0 0 10px rgba(33, 150, 243, 0.5);
  cursor: pointer;
  z-index: 999;
  /* On top of weather markers */
}

.user-location-marker::after {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  width: 40px;
  height: 40px;
  transform: translate(-50%, -50%);
  background-color: rgba(33, 150, 243, 0.3);
  border-radius: 50%;
  animation: map-pulse 2s infinite;
  pointer-events: none;
}

@keyframes map-pulse {
  0% {
    transform: translate(-50%, -50%) scale(0.5);
    opacity: 0.8;
  }

  100% {
    transform: translate(-50%, -50%) scale(1.5);
    opacity: 0;
  }
}

/* Fix DPC Alert text visibility */
#dpc-alert-level,
#dpc-alert-container,
#dpc-alert-container span,
#dpc-alert-container div {
  color: #003366 !important;
}