/* ============================================================
  00) BASE / LAYOUT PAGINA
  Note SerstMode: base dark UI + container centrale
============================================================ */

/* SERSTMODE: wrapper pagina dashboard (dark UI + layout full height) */
.page-dashboard{
  font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  margin: 0;
  padding: 0;
  background: #050814;
  color: #f5f5f5;

  /* layout: footer in basso */
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

/* SERSTMODE: area contenuto principale (container centrale + spinge footer) */
main{
  flex: 1;
  width: 95%;
  padding: 0;                 /* tolgo padding */
  margin: 0 auto;             /* centra */
}

/* SERSTMODE: footer base */
footer{
  text-align: center;
  font-size: 11px;
  opacity: 0.5;
  margin-top: 16px;
  padding: 18px 0; /* utile: respiro */
}

/* ============================================================
  01) HEADER / NAV / LOGO / LOGOUT
  Note SerstMode: header + menu desktop + stato attivo
============================================================ */

/* SERSTMODE: header top (layout + separatore + background) */
.dash-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 24px;
  border-bottom: 1px solid rgba(255,255,255,0.08);
  background: radial-gradient(circle at top left, #1f2b4d, #050814);
  margin-bottom: 16px;
}

/* SERSTMODE: wrapper sinistra (logo + titoli) */
.dash-title-wrap {
  display: flex;
  align-items: center;
  gap: 10px;
}

/* SERSTMODE: blocco titoli (title + subtitle) */
.dash-titles .title {
  font-size: 20px;
  font-weight: 600;
}

/* SERSTMODE: sottotitolo (desktop) */
.dash-titles .subtitle {
  font-size: 12px;
  opacity: 0.8;
  margin-top: 4px;
}

/* SERSTMODE: area destra header (badge + nav + logout) */
.dash-right {
  display: flex;
  align-items: center;
  gap: 16px;
}

/* SERSTMODE: nav desktop (ul orizzontale) */
.dash-nav {
  display: flex;
  align-items: center;
  gap: 16px;
}

/* SERSTMODE: lista menu (reset list + spacing) */
.dash-menu {
  display: flex;
  align-items: center;
  gap: 16px;
  list-style: none;
  margin: 0;
  padding: 0;
}

/* SERSTMODE: item menu (dimensione testo base) */
.dash-menu-item {
  font-size: 13px;
}

/* SERSTMODE: link menu (hit area + hover) */
.dash-menu li a {
  color: #f0f0f0;
  text-decoration: none;
  padding: 6px 10px;
  border-radius: 10px;
  transition: color .2s ease, background .2s ease;
}

/* SERSTMODE: hover link menu */
.dash-menu li a:hover {
  background: rgba(255, 255, 255, 0.1);
}

/* SERSTMODE: link generico (usato fuori menu) */
.nav-link {
  color: #f5f5f5;
  text-decoration: none;
  opacity: 0.85;
}

/* SERSTMODE: hover link generico */
.nav-link:hover {
  opacity: 1;
}

/* SERSTMODE: stato attivo (pagina corrente) */
.dash-menu li.is-active > a {
  background: linear-gradient(135deg, #3ad29f, #20b386);
  color: #0d0d0d;
  font-weight: 600;
  padding: 6px 14px;
  border-radius: 14px;
}

/* SERSTMODE: logo (tondo + gradient) */
.logo {
  width: 70px;
  height: 70px;
  border-radius: 50px;
  object-fit: contain;
  background: radial-gradient(circle at 30% 30%, #7c5cff, #5ee291);
  padding: 3px;
}

/* SERSTMODE: badge (piccolo stato in header) */
.badge {
  padding: 2px 8px;
  border-radius: 999px;
  font-size: 14px;
  background: rgba(80, 200, 120, 0.1);
  color: #5ee291;
  border: 1px solid rgba(94, 226, 145, 0.4);
}

/* SERSTMODE: bottone logout (ghost) */
.logout-btn {
  border-radius: 999px;
  padding: 4px 10px;
  font-size: 14px;
  border: 1px solid rgba(255,255,255,0.25);
  background: transparent;
  color: #f5f5f5;
  cursor: pointer;
}

/* SERSTMODE: hover logout */
.logout-btn:hover {
  background: rgba(255,255,255,0.08);
}

/* ============================================================
  02) NAV MOBILE (HAMBURGER + MENU FULLSCREEN)
  Note SerstMode: regole solo responsive (<=768px)
============================================================ */

/* SERSTMODE: hamburger hidden su desktop */
.nav-toggle {
  display: none;
  width: 36px;
  height: 32px;
  border-radius: 8px;
  border: 1px solid rgba(255,255,255,0.35);
  background: transparent;
  padding: 6px 4px;
  cursor: pointer;
  flex-direction: column;
  justify-content: space-between;
  align-items: center;
  gap: 4px;
  box-sizing: border-box;
}

/* SERSTMODE: linee hamburger */
.nav-toggle span {
  display: block;
  width: 18px;
  height: 2px;
  background: #fff;
  border-radius: 999px;
}

/* SERSTMODE: breakpoint mobile */
@media (max-width: 768px){

  /* SERSTMODE: header più compatto */
  .dash-header { padding: 12px 16px; }

  /* SERSTMODE: nascondi subtitle su mobile */
  .dash-titles .subtitle { display: none; }

  /* SERSTMODE: nav desktop nascosta (si apre solo con nav-open) */
  .dash-nav { display: none; }

  /* SERSTMODE: mostra hamburger */
  .nav-toggle { display: flex; }

  /* SERSTMODE: stato "nav-open" -> overlay full screen */
  .dash-header.nav-open .dash-nav{
    display: flex;
    position: fixed;
    inset: 56px 0 0 0; /* sotto header */
    background: rgba(5, 8, 20, 0.96);
    justify-content: center;
    padding-top: 24px;
    z-index: 999;
    width: 100%;
  }

  /* SERSTMODE: menu verticale in overlay */
  .dash-header.nav-open .dash-menu{
    flex-direction: column;
    gap: 20px;
    font-size: 18px;
    width: 100%;
    padding: 0 0 40px 0;
    align-items: stretch;
  }

  /* SERSTMODE: ogni voce full-width e centrata */
  .dash-header.nav-open .dash-menu li{
    width: 100%;
    text-align: center;
  }

  /* SERSTMODE: link grandi e “touch friendly” */
  .dash-header.nav-open .dash-menu li a{
    display: block;
    width: 100%;
    padding: 18px 0;
    font-size: 20px;
    border-radius: 0;
    background: rgba(255,255,255,0.06);
    border-bottom: 1px solid rgba(255,255,255,0.10);
  }

  /* SERSTMODE: hover link overlay */
  .dash-header.nav-open .dash-menu li a:hover{
    background: rgba(255,255,255,0.15);
  }
}


/* ============================================================
  03) CARD UI (GENERICO)
  Note SerstMode: card base usata ovunque
============================================================ */

/* SERSTMODE: contenitore card standard (background + bordi + shadow) */
main .card{
  width: 100%;
  max-width: 100% !important; /* override sicuro se altrove c'è max-width:680px */
  box-sizing: border-box;
  margin-left: auto;
  margin-right: auto;
}

/* SERSTMODE: contenitore card standard (background + bordi + shadow) */
.card{
  margin-top: 20px;
  background: rgba(7, 12, 30, 0.95);
  border-radius: 12px;
  padding: 16px 20px;
  box-shadow: 0 10px 30px rgba(0,0,0,0.45);
  border: 1px solid rgba(255,255,255,0.05);
}
/* SERSTMODE: header card (titolo + azioni) */
.card-header{
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 12px;
}

/* SERSTMODE: titolo card */
.card-title{
  font-size: 16px;
  font-weight: 600;
}

/* SERSTMODE: messaggi di stato sotto header */
.status{
  font-size: 12px;
  opacity: 0.8;
  margin-bottom: 12px;
}

/* SERSTMODE: stato errore evidenziato */
.status.error{
  color: #ff7676;
  opacity: 1;
}

/* ============================================================
  04) CARD COLLASSABILI (INDEX)
  Note SerstMode: toggle via JS + chevron
============================================================ */

/* SERSTMODE: spacing extra tra card collassabili */
.card-collapsible{
  margin-bottom: 18px;
}

/* SERSTMODE: riga header cliccabile (titolo + toggle) */
.card-header-row{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  cursor: pointer;
}

/* SERSTMODE: sottotitolo card (testo piccolo sotto al titolo) */
.card-subtitle{
  font-size: 12px;
  opacity: 0.75;
  margin-top: 2px;
}

/* SERSTMODE: bottone toggle (pill) */
.card-toggle{
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 10px;
  font-size: 14px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,0.20);
  background: transparent;
  color: #f5f5f5;
  cursor: pointer;
}

/* SERSTMODE: hover toggle */
.card-toggle:hover{
  background: rgba(255,255,255,0.06);
}

/* SERSTMODE: chevron (animazione rotazione) */
.card-toggle-chevron{
  display: inline-block;
  font-size: 10px;
  transform: translateY(-1px);
  transition: transform 0.18s ease;
}

/* SERSTMODE: corpo card nascosto quando collassata */
.card-collapsed .card-body{
  display: none;
}

/* SERSTMODE: chevron ruotato quando card collassata */
.card-collapsed .card-toggle-chevron{
  transform: rotate(180deg);
}

/* ============================================================
  05) TABELLE + UTILITY (mono/pill/buttons) + RESPONSIVE
  Note SerstMode: tabella strutture/ospiti + mobile hide cols
============================================================ */

/* SERSTMODE: tabella base full-width */
table{
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
  margin-top: 8px;
}

/* SERSTMODE: header tabella (sfondo leggero) */
thead{
  background: rgba(255,255,255,0.03);
}

/* SERSTMODE: celle tabella (padding + separatori) */
th,
td{
  padding: 8px 10px;
  text-align: left;
  border-bottom: 1px solid rgba(255,255,255,0.04);
  vertical-align: top;
}

/* SERSTMODE: header colonna (uppercase, spacing) */
th{
  font-weight: 500;
  opacity: 0.9;
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

/* SERSTMODE: hover riga tabella */
tbody tr:hover{
  background: rgba(255,255,255,0.02);
}


/* SERSTMODE: testo secondario attenuato */
.muted{
  opacity: 0.7;
}

/* SERSTMODE: frammenti API key */
.api-fragment{
  opacity: 0.8;
}

/* SERSTMODE: pill generica (ID / FROM / status) */
.pill{
  display: inline-block;
  padding: 2px 7px;
  font-size: 14px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,0.14);
  opacity: 0.9;
}

/* SERSTMODE: pill ID struttura */
.pill-id{
  background: rgba(124, 92, 255, 0.1);
  border-color: rgba(124, 92, 255, 0.4);
}

/* SERSTMODE: pill FROM / origine */
.pill-from{
  background: rgba(255, 255, 255, 0.03);
}

/* SERSTMODE: bottone Dettagli / Azioni */
.details-btn{
  padding: 4px 10px;
  font-size: 14px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,0.25);
  background: transparent;
  color: #f5f5f5;
  cursor: pointer;
}

/* SERSTMODE: hover bottone Dettagli */
.details-btn:hover{
  background: rgba(255,255,255,0.08);
}

/* SERSTMODE: wrapper tabella scrollabile su mobile */
.table-responsive{
  width: 100%;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

/* SERSTMODE: larghezza minima tabella per evitare compressione */
.table-responsive table{
  min-width: 640px;
}

/* ============================================================
  06) QR CARD (WALLET STRUTTURA)
  Note SerstMode: layout QR + address
============================================================ */

/* SERSTMODE: card QR (padding + border radius + shadow leggera) */
.card.qr-card{
  margin-top: 20px;
  padding: 16px;
  border-radius: 10px;
  box-shadow: 0 2px 6px rgba(0,0,0,0.08);
}

/* SERSTMODE: label indirizzo (testo secondario) */
.qr-address-label{
  font-size: 0.9rem;
  opacity: 0.7;
  margin-bottom: 4px;
}

/* SERSTMODE: valore address (monospace + wrap) */
.qr-address-value{
  font-family: monospace;
  font-size: 0.95rem;
  word-break: break-all;
  margin-bottom: 12px;
}

/* SERSTMODE: wrapper layout QR + hint (flex + wrap) */
.qr-wrapper{
  display: flex;
  align-items: center;
  gap: 16px;
  flex-wrap: wrap;
}

/* SERSTMODE: dimensione canvas/immagine QR */
#wallet-qrcode{
  width: 160px;
  height: 160px;
}

/* SERSTMODE: hint testuale a lato QR */
.qr-hint{
  font-size: 0.85rem;
  max-width: 260px;
  opacity: 0.8;
}

/* ============================================================
  07) FORM "NUOVA STRUTTURA"
  Note SerstMode: versione pulita – mantiene solo regole effettive
============================================================ */


/* ------------------------------------------------------------
   07.1) CARD CONTENITORE
   ------------------------------------------------------------ */

/* SERSTMODE: card principale "Nuova struttura" */
.new-structure-card{
  margin-bottom: 1.5rem;
}

/* SERSTMODE: card layout form */
.create-card{
  max-width: 900px;
  margin: 0 auto 40px auto;
  padding: 20px 30px;
}


/* ------------------------------------------------------------
   07.2) STRUTTURA FORM
   ------------------------------------------------------------ */

/* SERSTMODE: form nuova struttura (full width nella card) */
.create-form{
  width: 100%;
}

/* SERSTMODE: override pagina Nuova struttura */
.create-card .create-form{
  max-width: none;
  width: 100%;
}

/* SERSTMODE: riga del form */
.create-form .form-row{
  display: flex;
  flex-direction: column;
  gap: 6px;
  width: 100%;
  margin-bottom: 18px;
}

/* ------------------------------------------------------------
   07.3) INPUT
   ------------------------------------------------------------ */

/* SERSTMODE: input standard (stile attivo) */
.create-form input{
  width: 100%;
  height: 52px;
  padding: 12px 16px;
  font-size: 15px;
  border-radius: 8px;
  background: #0e0f1a;
  border: 1px solid #2a2d41;
  color: #ffffff;
  box-sizing: border-box;
  outline: none;
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

/* SERSTMODE: focus input */
.create-form input:focus{
  border-color: #58e6b3;
  box-shadow: 0 0 0 2px rgba(88, 230, 179, 0.25);
}


/* ------------------------------------------------------------
   07.4) BOTTONI
   ------------------------------------------------------------ */
/* SERSTMODE: bottone primario standard per le card*/
.btn-primary-card{
  display: block;              /* ✅ fondamentale: width:100% ora funziona */
  width: 100%;
  padding: 14px 0;
  border: none;
  border-radius: 10px;
  cursor: pointer;

  background: linear-gradient(90deg, #90e4ff, #58e6b3);
  color: #0e0f14;
  font-size: 16.5px;
  font-weight: 600;

  text-align: center;          /* ✅ centra il testo dentro */
  text-decoration: none;       /* opzionale: toglie underline */
  transition: opacity .25s ease, transform .15s ease;
}
/* SERSTMODE: bottone primario standard */
.btn-primary-big{
  width: 100%;
  padding: 14px 0;
  border: none;
  border-radius: 10px;
  cursor: pointer;
  background: linear-gradient(90deg, #90e4ff, #58e6b3);
  color: #0e0f14;
  font-size: 16.5px;
  font-weight: 600;
  transition: opacity .25s ease, transform .15s ease;
}

.btn-primary-big:hover{
  opacity: 0.85;
}

.btn-primary-big:active{
  transform: scale(0.97);
}

/* ============================================================
  08) STATI OSPITI (PILL)
  Note SerstMode: classi status-* coerenti con guest list
============================================================ */

/* SERSTMODE: pill base stato ospite */
.status-pill{
  padding: 4px 10px;
  border-radius: 999px;
  font-size: 0.85rem;
  text-transform: lowercase;
}

/* SERSTMODE: stato attivo */
.status-attivo{
  background: rgba(88, 230, 179, 0.15);
  color: #6df2b4;
}

/* SERSTMODE: stato sospeso */
.status-sospeso{
  background: rgba(255, 193, 7, 0.15);
  color: #ffc107;
}

/* SERSTMODE: stato chiuso / sconosciuto */
.status-chiuso,
.status-unknown{
  background: rgba(255, 99, 132, 0.15);
  color: #ff6384;
}


/* ============================================================
  09) SERST TABLE + STATUS PANELS (HOME NODE/HEALTH)
  Note SerstMode: tabelle uniformi + pannelli + health dots
============================================================ */

/* -----------------------------
   09A) SERST TABLE (HOME KPI)
   ----------------------------- */

/* SERSTMODE: tabella KPI (layout fisso per colonne coerenti) */
.serst-table{
  width:100%;
  border-collapse:collapse;
  font-size:14px;
  table-layout:fixed;
}

/* SERSTMODE: celle tabella (ellipsis su overflow) */
.serst-table th,
.serst-table td{
  padding:10px 12px;
  border-bottom:1px solid rgba(255,255,255,0.08);
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}

/* SERSTMODE: header tabella */
.serst-table thead th{
  font-weight:600;
  opacity:.85;
}

/* SERSTMODE: prima colonna label (token) */
.serst-table th:first-child,
.serst-table td:first-child{
  text-align:left;
  width:120px;
}

/* SERSTMODE: colonne numeriche a destra */
.serst-table th:not(:first-child),
.serst-table td:not(:first-child){
  text-align:right;
}

/* SERSTMODE: hover riga */
.serst-table tbody tr:hover{
  background: rgba(255,255,255,0.03);
}

/* SERSTMODE: label token marcata */
.serst-table .tok{
  font-weight:700;
  letter-spacing:.5px;
}


/* -----------------------------
   09B) STATUS TILES (GRID)
----------------------------- */

/* SERSTMODE: griglia tile status (4 colonne desktop) */
.status-grid{
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:12px;
}

/* SERSTMODE: tile status base */
.status-tile{
  border:1px solid rgba(255,255,255,.08);
  border-radius:12px;
  padding:12px;
  background:rgba(255,255,255,.02);
}

/* SERSTMODE: label tile */
.tile-label{ font-size:11px; opacity:.7; letter-spacing:.08em; }

/* SERSTMODE: valore tile */
.tile-value{ font-size:22px; font-weight:700; margin-top:6px; }



/* -----------------------------
   09C) STATUS PANELS (SPLIT)
   ----------------------------- */

/* SERSTMODE: split 2 colonne (desktop) */
.status-split{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:12px;
  margin-top:12px;
}

/* SERSTMODE: pannello info (node/explorer ecc.) */
.status-panel{
  border:1px solid rgba(255,255,255,.08);
  border-radius:12px;
  padding:12px;
  background:rgba(255,255,255,.02);
}

/* SERSTMODE: titolo pannello */
.panel-title{ font-size:12px; font-weight:700; opacity:.8; margin-bottom:8px; }

/* SERSTMODE: lista pannello */
.panel-list{ font-size:12px; line-height:1.6; }

/* SERSTMODE: testo monospazio (address, hash, api key) */
.mono{
  font-family: "SF Mono", Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
  font-size: 12px;
}

/* -----------------------------
   09D) HEALTH DOTS
   ----------------------------- */

/* SERSTMODE: layout pannello health (righe) */
.panel-health{ display:flex; flex-direction:column; gap:8px; }

/* SERSTMODE: riga health (nome + pallino) */
.health-row{ display:flex; align-items:center; justify-content:space-between; }

/* SERSTMODE: nome servizio health */
.health-name{ font-size:13px; opacity:.9; }

/* SERSTMODE: pallino base (default) */
.health-dot{
  width:10px; height:10px; border-radius:999px;
  background:rgba(255,255,255,.2);
  box-shadow:0 0 0 2px rgba(0,0,0,.25) inset;
}

/* SERSTMODE: stato OK */
.health-dot.ok{ background:#22c55e; }

/* SERSTMODE: stato BAD */
.health-dot.bad{ background:#ef4444; }

/* SERSTMODE: stato WARN */
.health-dot.warn{ background:#f59e0b; }

/* ============================================================
  10) HOME KPI TILES / GRID
  Note SerstMode: cards KPI (gauge/split)
============================================================ */

/* SERSTMODE: griglia tile home (3 colonne desktop) */
.dash-grid{
  display:grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap:14px;
  padding: 10px 4px 26px;
}

/* SERSTMODE: tile base KPI */
.dash-tile{
  border-radius:14px;
  padding:14px;
  background: rgba(255,255,255,0.03);
  border: 1px solid rgba(255,255,255,0.08);
  box-shadow: 0 10px 30px rgba(0,0,0,0.25);
  min-height: 210px;
  position:relative;
  overflow:hidden;
}

/* SERSTMODE: tile “wide” (span completo) */
.dash-tile-wide{
  grid-column: span 3;
  min-height: 260px;
}

/* SERSTMODE: header tile (titolo + subtitle) */
.tile-head{
  display:flex;
  flex-direction:column;
  gap:4px;
  margin-bottom:10px;
}

/* SERSTMODE: titolo tile */
.tile-title{ font-weight:700; letter-spacing: .3px; }

/* SERSTMODE: subtitle tile */
.tile-sub{ opacity:.7; font-size:.9rem; }

/* SERSTMODE: body tile (centra contenuto) */
.tile-body{
  display:flex;
  align-items:center;
  justify-content:center;
  height: calc(100% - 52px);
}

/* SERSTMODE: gauge container (tachimetro semplice) */
.tile-gauge{
  width: 150px;
  height: 150px;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  position:relative;
}

/* SERSTMODE: ring esterno gauge */
.gauge-ring{
  position:absolute;
  inset:0;
  border-radius:50%;
  border: 2px solid rgba(255,255,255,0.14);
  box-shadow: inset 0 0 0 10px rgba(0,0,0,0.15);
}

/* SERSTMODE: valore gauge */
.gauge-value{
  font-size: 2.2rem;
  font-weight: 800;
  line-height: 1;
}

/* SERSTMODE: label gauge */
.gauge-label{
  margin-top:6px;
  opacity:.75;
  font-size:.95rem;
}

/* SERSTMODE: split KPI (3 colonne) */
.tile-split{
  width:100%;
  display:grid;
  grid-template-columns: repeat(3, 1fr);
  gap:10px;
}

/* SERSTMODE: box KPI interno */
.split-kpi{
  border-radius:12px;
  padding:12px;
  background: rgba(255,255,255,0.03);
  border: 1px solid rgba(255,255,255,0.06);
  text-align:center;
}

/* SERSTMODE: label KPI */
.split-label{ opacity:.75; font-size:.9rem; }

/* SERSTMODE: valore KPI */
.split-value{ font-size:1.6rem; font-weight:800; margin-top:6px; }

/* ============================================================
   11) MAPPA (UI + FULLSCREEN + ROMAN THEME + MARKER + CLUSTER)
   Note SerstMode: Sezione unica mappa. Base → Override Roman → Marker → Cluster
============================================================ */

/* ============================================================
   11-01) MAP UI (SHELL / TOOLBAR / POPUP / KPI / FILTRI) — BASE
============================================================ */

/* SERSTMODE: contenitore principale mappa (layout verticale) */
.map-shell{
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

/* SERSTMODE: toolbar mappa (bottoni a destra) */
.map-toolbar{
  display: flex;
  flex-wrap: wrap;              /* 🔑 consente seconda riga */
  gap: 8px;
  align-items: center;
}

/* prima 4 = controlli mappa */
.map-toolbar .map-btn,
.map-toolbar #map-fullscreen{
  flex: 0 0 auto;
}

/* filtri */
.map-toolbar .map-filter{
  flex: 0 0 auto;
}

/* SERSTMODE: bottone toolbar (zoom/reset/fullscreen) */
.map-btn{
  border-radius: 10px;
  padding: 6px 10px;
  background: rgba(255,255,255,0.06);
  border: 1px solid rgba(255,255,255,0.10);
  color: inherit;
  cursor: pointer;
}

.map-btn,
#map-fullscreen{
  min-width: 44px;              /* standard touch */
  height: 44px;
  padding: 0;
  font-size: 18px;
  border-radius: 10px;
}

/* SERSTMODE: viewport mappa (solo layout/size, niente skin qui) */
.map-viewport{
  flex: 1;
  border-radius: 12px;
  overflow: hidden;
  position: relative;
  min-height: 260px;
}

/* SERSTMODE: wrapper interno (centra/contiene Leaflet) */
.map-world{
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* SERSTMODE: hint sotto mappa */
.map-hint{
  font-size: .9rem;
  opacity: .75;
}

/* SERSTMODE: KPI mappa */
.map-kpi{
  margin-top: 6px;
  font-size: 12px;
  opacity: 0.85;
}

/* SERSTMODE: valore KPI evidenziato */
#kpi-mapped-structures{
  font-weight: 600;
  opacity: 1;
}

/* SERSTMODE: filtri mappa (base) */
.map-filter{
  padding: 6px 10px;
  border-radius: 10px;
  border: 1px solid rgba(255,255,255,0.10);
  background: rgba(255,255,255,0.06);
  color: #fff;
  font-size: 12px;
  cursor: pointer;
}

/* SERSTMODE: filtro attivo (base) */
.map-filter.is-active{
  background: rgba(125, 211, 252, 0.22);
  border-color: rgba(125, 211, 252, 0.45);
}

/* SERSTMODE: popup base mappa */
.map-popup{
  font-size: 13px;
  line-height: 1.4;
}

/* SERSTMODE: titolo popup */
.map-popup .mp-title{ font-weight: 600; margin-bottom: 2px; }

/* SERSTMODE: stato struttura popup */
.map-popup .mp-status{ font-size: 12px; margin-bottom: 2px; }

/* SERSTMODE: tipo struttura popup */
.map-popup .mp-type{ opacity: 0.85; margin-bottom: 4px; }

/* SERSTMODE: link popup */
.map-popup .mp-link{ color: #7dd3fc; text-decoration: none; }

/* SERSTMODE: hover link popup */
.map-popup .mp-link:hover{ text-decoration: underline; }



/* ============================================================
   11.02) FULLSCREEN OVERLAY (Leaflet map)
============================================================ */

/* SERSTMODE: overlay fullscreen mappa */
.map-fs-overlay{
  position: fixed;
  inset: 0;
  z-index: 9999;
  display: none;
  background: rgba(8, 12, 22, 0.92);
  backdrop-filter: blur(6px);
}

/* SERSTMODE: overlay aperto */
.map-fs-overlay.is-open{ display: block; }

/* SERSTMODE: topbar overlay */
.map-fs-topbar{
  height: 56px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 14px;
  border-bottom: 1px solid rgba(255,255,255,0.08);
}

/* SERSTMODE: titolo overlay */
.map-fs-title{ font-weight: 600; color: #fff; }

/* SERSTMODE: bottone chiusura overlay */
.map-fs-close{
  width: 40px;
  height: 36px;
  border-radius: 10px;
  border: 1px solid rgba(255,255,255,0.12);
  background: rgba(255,255,255,0.06);
  color: #fff;
  cursor: pointer;
}

/* SERSTMODE: host mappa (spazio sotto topbar) */
.map-fs-host{ height: calc(100vh - 56px); }

/* SERSTMODE: mappa full size quando dentro overlay */
.map-fs-host #leaflet-map{
  width: 100%;
  height: 100%;
}

/* ============================================================
   11.03) SERST ROMAN THEME (LEAFLET LOOK&FEEL) — OVERRIDE
   Note SerstMode: qui solo “skin”, non layout.
============================================================ */

/* SERSTMODE: variabili tema "Roma" */
:root{
  --roman-gold: #d7b46a;
  --roman-gold-2: #b8903a;
  --roman-marble-1: #f6f0e6;
  --roman-marble-2: #efe4d1;
  --roman-ink: #2b2216;
  --roman-shadow: rgba(0,0,0,0.35);
  --roman-glow: rgba(215,180,106,0.20);
}

/* SERSTMODE: cornice mappa (skin viewport) */
.map-viewport{
  background:
    radial-gradient(120% 120% at 20% 20%, rgba(255,255,255,0.12), transparent 55%),
    linear-gradient(135deg, rgba(246,240,230,0.12), rgba(239,228,209,0.06));
  border: 1px solid rgba(215,180,106,0.26);
  box-shadow:
    0 18px 50px var(--roman-shadow),
    inset 0 0 0 1px rgba(255,255,255,0.06),
    inset 0 0 28px rgba(215,180,106,0.08);
  backdrop-filter: blur(2px);
}

/* SERSTMODE: area Leaflet (skin) */
#leaflet-map{
  border-radius: 14px;
  overflow: hidden;
  box-shadow:
    inset 0 0 0 1px rgba(215,180,106,0.14),
    0 8px 22px rgba(0,0,0,0.22);
}

/* SERSTMODE: sigillo */
#leaflet-map::after{
  content: "SERST • ROMA";
  position: absolute;
  right: 10px;
  bottom: 8px;
  z-index: 500;
  padding: 4px 8px;
  font-size: 10px;
  letter-spacing: 0.22em;
  color: rgba(43,34,22,0.75);
  background: rgba(246,240,230,0.78);
  border: 1px solid rgba(215,180,106,0.35);
  border-radius: 999px;
  box-shadow: 0 6px 18px rgba(0,0,0,0.15);
  pointer-events: none;
}

/* SERSTMODE: romanizza bottoni reali (NON .map-controls) */
#map-filters .map-btn,
#map-filters .map-filter,
#map-filters #map-fullscreen{
  border-radius: 10px !important;
  border: 1px solid rgba(215,180,106,0.42) !important;
  background: linear-gradient(180deg, rgba(215,180,106,0.26), rgba(184,144,58,0.10)) !important;
  color: rgba(246,240,230,0.95) !important;
  box-shadow:
    0 10px 22px rgba(0,0,0,0.22),
    inset 0 0 0 1px rgba(255,255,255,0.06);
  backdrop-filter: blur(6px);
  cursor: pointer;
  transition: transform .12s ease, box-shadow .12s ease, border-color .12s ease;
}

/* SERSTMODE: hover bottoni */
#map-filters .map-btn:hover,
#map-filters .map-filter:hover,
#map-filters #map-fullscreen:hover{
  transform: translateY(-1px);
  border-color: rgba(215,180,106,0.65) !important;
  box-shadow:
    0 14px 26px rgba(0,0,0,0.28),
    0 0 0 4px var(--roman-glow);
}

/* SERSTMODE: active bottoni */
#map-filters .map-btn:active,
#map-filters .map-filter:active,
#map-filters #map-fullscreen:active{
  transform: translateY(0);
  box-shadow:
    0 10px 18px rgba(0,0,0,0.24),
    inset 0 0 0 1px rgba(0,0,0,0.12);
}

/* SERSTMODE: filtro attivo roman */
#map-filters .map-filter.is-active{
  border-color: rgba(215,180,106,0.85) !important;
  background: linear-gradient(180deg, rgba(215,180,106,0.40), rgba(184,144,58,0.18)) !important;
  box-shadow:
    0 14px 28px rgba(0,0,0,0.30),
    0 0 0 4px rgba(215,180,106,0.18);
}

/* SERSTMODE: popup Leaflet pergamena */
.leaflet-popup-content-wrapper{
  background: linear-gradient(180deg, rgba(246,240,230,0.96), rgba(239,228,209,0.92)) !important;
  color: var(--roman-ink) !important;
  border: 1px solid rgba(215,180,106,0.55) !important;
  border-radius: 14px !important;
  box-shadow:
    0 18px 40px rgba(0,0,0,0.30),
    inset 0 0 0 1px rgba(255,255,255,0.45);
}

/* SERSTMODE: tip popup */
.leaflet-popup-tip{
  background: rgba(246,240,230,0.95) !important;
  border: 1px solid rgba(215,180,106,0.45) !important;
}

/* SERSTMODE: link popup oro */
.map-popup .mp-link{ color: #7a551a; font-weight: 700; }

/* SERSTMODE: overlay fullscreen roman (ID reale) */
#map-fullscreen-overlay{
  background: radial-gradient(120% 120% at 50% 0%, rgba(215,180,106,0.16), rgba(0,0,0,0.82)) !important;
}

/* SERSTMODE: filtro colore tiles OSM */
#leaflet-map .leaflet-tile-pane{
  filter: sepia(0.55) saturate(0.85) contrast(1.10) brightness(1.05) hue-rotate(-8deg);
}

/* SERSTMODE: velo pergamena sopra tiles */
#leaflet-map::before{
  content:"";
  position:absolute;
  inset:0;
  z-index: 350;
  pointer-events:none;
  background:
    radial-gradient(120% 120% at 30% 15%, rgba(246,240,230,0.28), transparent 55%),
    radial-gradient(120% 120% at 70% 85%, rgba(215,180,106,0.12), transparent 55%),
    linear-gradient(180deg, rgba(239,228,209,0.10), rgba(0,0,0,0.06));
  mix-blend-mode: multiply;
  opacity: 0.55;
}



/* ============================================================
   11.04) MARKER (ROMAN) — rm-*
============================================================ */

/* SERSTMODE: divIcon wrapper */
.rm-divicon{ background: transparent !important; border: 0 !important; }

/* SERSTMODE: marker base */
.rm-marker{
  width: 34px;
  height: 34px;
  position: relative;
  border-radius: 50%;
  transform: translateY(-2px);
  filter: drop-shadow(0 6px 10px rgba(0,0,0,0.35));
  cursor: pointer;
  user-select: none;
}

/* SERSTMODE: ring oro */
.rm-marker .rm-ring{
  position: absolute;
  inset: 0;
  border-radius: 50%;
  border: 2px solid rgba(215,180,106,0.95);
  box-shadow: 0 0 0 2px rgba(0,0,0,0.22) inset;
}

/* SERSTMODE: core interno */
.rm-marker .rm-core{
  position: absolute;
  inset: 3px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 800;
  letter-spacing: 0.5px;
  line-height: 1;
  background: radial-gradient(circle at 30% 25%, rgba(255,255,255,0.9), rgba(246,240,230,0.65) 45%, rgba(235,225,205,0.55));
  border: 1px solid rgba(0,0,0,0.18);
  color: rgba(34,34,34,0.92);
}

/* SERSTMODE: ON tint */
.rm-on .rm-core{ box-shadow: 0 0 0 1px rgba(20,180,120,0.35) inset; }

/* SERSTMODE: OFF tint */
.rm-off .rm-core{ box-shadow: 0 0 0 1px rgba(220,170,40,0.28) inset; }



/* ============================================================
   11.05) CLUSTER — A) marker-cluster (lib) + B) serst-cluster (custom)
============================================================ */

/* -------------------------
   11.05.A) Cluster standard lib
------------------------- */

/* SERSTMODE: cluster esterno */
.marker-cluster{
  border-radius: 999px !important;
  background: rgba(215, 180, 106, 0.18) !important;
  box-shadow:
    0 0 0 2px rgba(215, 180, 106, 0.28),
    0 10px 26px rgba(0,0,0,0.35),
    0 0 18px rgba(215, 180, 106, 0.18) !important;
}

/* SERSTMODE: cluster interno */
.marker-cluster > div{
  border-radius: 999px !important;
  display: flex;
  align-items: center;
  justify-content: center;
  background: radial-gradient(circle at 30% 25%, rgba(255,255,255,0.92), rgba(255,245,222,0.92) 45%, rgba(244,231,195,0.92) 100%) !important;
  border: 2px solid rgba(215, 180, 106, 0.85) !important;
  color: rgba(34,34,34,0.95) !important;
  font-weight: 800 !important;
}

/* SERSTMODE: dimensioni standard coerenti */
.marker-cluster-small{ width: 44px !important; height: 44px !important; }
.marker-cluster-small > div{ width: 36px !important; height: 36px !important; }

.marker-cluster-medium{ width: 54px !important; height: 54px !important; }
.marker-cluster-medium > div{ width: 44px !important; height: 44px !important; }

.marker-cluster-large{ width: 64px !important; height: 64px !important; }
.marker-cluster-large > div{ width: 52px !important; height: 52px !important; }

/* -------------------------
   11.05.B) Cluster SERST custom
------------------------- */

/* SERSTMODE: outer SERST cluster */
.serst-cluster{
  width: 44px !important;
  height: 44px !important;
  border-radius: 999px !important;
  position: relative !important;
  background: rgba(215, 180, 106, 0.18) !important;
  box-shadow:
    0 0 0 2px rgba(215, 180, 106, 0.28),
    0 10px 26px rgba(0,0,0,0.35) !important;
}

/* SERSTMODE: core SERST cluster (assoluto → centratura garantita) */
.serst-cluster > div{
  width: 36px !important;
  height: 36px !important;
  border-radius: 999px !important;
  position: absolute !important;
  top: 50% !important;
  left: 50% !important;
  transform: translate(-50%, -50%) !important;

  display: grid !important;
  place-items: center !important;

  margin: 0 !important;
  padding: 0 !important;
  box-sizing: border-box !important;

  background: radial-gradient(circle at 30% 25%, rgba(255,255,255,0.92), rgba(255,245,222,0.92) 45%, rgba(244,231,195,0.92) 100%) !important;
  border: 2px solid rgba(215, 180, 106, 0.85) !important;

  color: rgba(34,34,34,0.95) !important;
  font-weight: 900 !important;
  font-size: 13px !important;
  line-height: 1 !important;
}

/* SERSTMODE: ALL (bordo oro più “pulito”) */
.serst-cluster.serst-all > div{
  border-color: rgba(215, 180, 106, 0.90) !important;
}

/* SERSTMODE: ON */
.serst-cluster.serst-on{
  background: rgba(61, 220, 151, 0.14) !important;
  box-shadow:
    0 0 0 2px rgba(61, 220, 151, 0.30),
    0 10px 26px rgba(0,0,0,0.35),
    0 0 22px rgba(61, 220, 151, 0.22) !important;
}
.serst-cluster.serst-on > div{ border-color: rgba(61, 220, 151, 0.65) !important; }

/* SERSTMODE: OFF */
.serst-cluster.serst-off{
  background: rgba(245, 197, 66, 0.16) !important;
  box-shadow:
    0 0 0 2px rgba(245, 197, 66, 0.32),
    0 10px 26px rgba(0,0,0,0.35),
    0 0 22px rgba(245, 197, 66, 0.22) !important;
}
.serst-cluster.serst-off > div{ border-color: rgba(245, 197, 66, 0.75) !important; }



/* ============================================================
  12) RESPONSIVE (BREAKPOINTS)
  Note SerstMode: adattamenti layout per schermi piccoli/medi
============================================================ */

/* ============================================================
  12.1) DESKTOP+ (>= 900px)
============================================================ */
@media (min-width: 900px){

  /* SERSTMODE: su desktop torna centrato senza margini extra */
  main{ margin-inline: auto; }

  /* SERSTMODE: desktop/large – mappa più alta */
  .map-viewport{ min-height: 300px; }
  #leaflet-map{ height: 300px; }
}

/* ============================================================
  12.2) TABLET (<= 900px)
============================================================ */
@media (max-width: 900px){

  /* SERSTMODE: riduce colonne in mobile/tablet */
  .status-grid{ grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .status-split{ grid-template-columns: 1fr; }
}

/* ============================================================
  12.3) TABLET WIDE / SMALL DESKTOP (<= 1100px)
============================================================ */
@media (max-width: 1100px){

  /* SERSTMODE: griglia home (2 colonne) */
  .dash-grid{ grid-template-columns: repeat(2, minmax(0, 1fr)); }

  /* SERSTMODE: wide su 2 colonne (tablet) */
  .dash-tile-wide{ grid-column: span 2; }
}

/* ============================================================
  12.4) MOBILE LARGE / SMALL TABLET (<= 700px)
============================================================ */
@media (max-width: 700px){

  /* SERSTMODE: griglia home (1 colonna) */
  .dash-grid{ grid-template-columns: 1fr; }

  /* SERSTMODE: wide su 1 colonna (mobile) */
  .dash-tile-wide{ grid-column: span 1; }

  /* SERSTMODE: i filtri vanno a capo */
  .map-toolbar .map-filter{
    flex: 1 1 auto;     /* occupano tutta la riga */
    text-align: center;}

  /* SERSTMODE: forza inizio nuova riga SOLO per i filtri */
  .map-toolbar .map-filter:first-of-type{
    margin-left: 0; }
}

/* ============================================================
  12.5) MOBILE (<= 600px)
============================================================ */
@media (max-width: 600px){

  /* SERSTMODE: card più compatte su mobile */
  .card{
    padding: 14px 14px;
    border-radius: 10px;
  }

  /* SERSTMODE: header card allineato in verticale */
  .card-header-row{
    align-items: flex-start;
  }

  /* SERSTMODE: toggle card più grande per touch */
  .card-toggle{
    font-size: 15px;
    padding: 3px 8px;
  }

  /* SERSTMODE: testo tabella più compatto */
  table{
    font-size: 12px;
  }

  /* SERSTMODE: padding celle ridotto */
  th,
  td{
    padding: 6px 8px;
  }
}

/* REGOLE INSEITE PER LA PAGINA LOG */
/* === LOG VIEWER (Logs page) === */

/* impedisce overflow della pagina */
.page-dashboard {
  overflow-x: hidden;
}

/* contenitore log */
.page-dashboard .log-box {
  display: block;
  max-width: 100%;
  box-sizing: border-box;

  /* ALTEZZA FISSA + SCROLL */
  max-height: 420px;        /* puoi regolarla */
  overflow-y: auto;         /* scrollbar verticale */
  overflow-x: auto;         /* scrollbar orizzontale */

  /* stile testo log */
  white-space: pre;         /* niente wrap */
  font-family: monospace;
  font-size: 12px;
  line-height: 1.4;
}

/* === Logs refresh button === */
.logs-refresh-row {
  display: flex;
  justify-content: center;
  margin: 24px 0;
}

.logs-refresh-row .btn-primary {
  padding: 10px 18px;
  font-size: 14px;
  cursor: pointer;
}

/* Header card: gruppo pulsanti (Espandi + Aggiorna) */
.card-header-actions {
  display: flex;
  gap: 8px;
}

/* === Logs: Auto refresh attivo === */
.card-toggle.btn-log-auto.active {
  background-color: #2ecc71;   /* verde */
  color: #ffffff;
  border-color: #27ae60;
}

.card-toggle.btn-log-auto.active:hover {
  background-color: #27ae60;
}

/* ============================================================
  13) REWARDS PAGE / MODAL EDITOR
============================================================ */

/* toolbar pagina rewards */
.rewards-toolbar{
  text-align: center;
  display: flex;
  gap: 10px;
  justify-content: center;
  flex-wrap: wrap;
}

/* bottone principale rewards */
.rewards-btn-main{
  max-width: 260px;
}

/* input file nascosto */
.hidden-file-input{
  display: none;
}

/* azioni header rewards */
.rewards-header-actions{
  display: flex;
  gap: 0.5rem;
  align-items: center;
}

/* filtri rewards */
.rewards-filters{
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  margin: 12px 0 16px 0;
  align-items: center;
}

/* input ricerca rewards */
.rewards-filter-search{
  min-width: 240px;
  padding: 8px 10px;
}

/* select filtri rewards */
.rewards-filter-select{
  padding: 8px 10px;
}

/* overlay modal reward */
.reward-modal{
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.55);
  z-index: 9999;
  align-items: center;
  justify-content: center;
  padding: 16px;
  box-sizing: border-box;
}

/* modal aperto */
.reward-modal.is-open{
  display: flex;
}

/* box interno modal */
.reward-modal-dialog{
  width: 100%;
  max-width: 680px;
  max-height: 90vh;
  overflow: auto;
  background: rgba(7, 12, 30, 0.98);
  color: #f5f5f5;
  border-radius: 14px;
  border: 1px solid rgba(255,255,255,0.08);
  box-shadow: 0 20px 50px rgba(0,0,0,0.45);
  padding: 20px;
  box-sizing: border-box;
}

/* titolo modal */
.reward-modal-title{
  margin: 0 0 14px 0;
  font-size: 20px;
  font-weight: 700;
}

/* griglia form */
.reward-form-grid{
  display: flex;
  flex-direction: column;
  gap: 12px;
}

/* input form reward */
.reward-form-input,
.reward-form-textarea{
  width: 100%;
  box-sizing: border-box;
  border-radius: 8px;
  background: #0e0f1a;
  border: 1px solid #2a2d41;
  color: #ffffff;
  outline: none;
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

/* input */
.reward-form-input{
  min-height: 46px;
  padding: 10px 14px;
  font-size: 15px;
}

/* textarea */
.reward-form-textarea{
  min-height: 110px;
  padding: 12px 14px;
  font-size: 15px;
  resize: vertical;
}

/* focus */
.reward-form-input:focus,
.reward-form-textarea:focus{
  border-color: #58e6b3;
  box-shadow: 0 0 0 2px rgba(88, 230, 179, 0.25);
}

/* checkbox row */
.reward-checkbox-row{
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 14px;
}

/* azioni modal */
.reward-modal-actions{
  margin-top: 16px;
  display: flex;
  gap: 10px;
  justify-content: flex-end;
  flex-wrap: wrap;
}

/* bottone salva nel modal */
.reward-modal-save{
  width: auto;
  min-width: 140px;
  padding-inline: 18px;
}

/* responsive modal */
@media (max-width: 600px){
  .reward-modal-dialog{
    padding: 16px;
    border-radius: 12px;
  }

  .reward-modal-actions{
    flex-direction: column;
    align-items: stretch;
  }

  .reward-modal-save{
    width: 100%;
  }
}