/* Pannello info (sempre sopra la topbar e spostato sotto di essa) */
    #info-panel{
      position: absolute;
      top: calc(var(--topbarHeight, 0px) + var(--panelOffset, 12px)); /* ← ora usa --panelOffset */
      right: 12px;
      z-index: 4003; /* sopra topbar (3000), popup Leaflet (4001) e toggle (4002) */
      max-width: 360px;
      background: var(--panel);
      color: var(--text);
      border: 1px solid var(--border);
      border-radius: 10px;
      box-shadow: 0 8px 24px rgba(0,0,0,.35);
      padding: 12px 14px 10px 14px;
    }
    #info-panel.hidden { display: none; }
    @media (max-width: 640px){
      :root{ --panelOffset: 52px; } /* su mobile scende un po’ di più */
    }

    #info-panel h2 { margin: 0 28px 6px 0; font-size: 18px; }
    #info-panel p { margin: 6px 0; color: var(--muted); }
    #info-panel b { color: var(--text); }

    #tools-panel.hidden { display: none; }
    /* Titolo come “maniglia” per trascinare */

    #tool-title{
      padding-right: 22px;         /* spazio per la X */
      border-bottom: 1px solid var(--border);
      margin-bottom: 8px;
    }

    /* 
    .tool-grip {
        pointer-events: none;
    }

    .tool-grip * {
        pointer-events: auto; /* il titolo non blocca nulla 
    }  */

    #tools-close {
        pointer-events: auto; /* forza il click sempre sulla X */
    }

    #tools-hide {
        pointer-events: auto; /* forza il click sempre sulla X */
    }

    #tools-panel {
        position: absolute;
    }

    /*
    .tool-close-btn {
        position: absolute;
        top: 6px;
        right: 6px;
        background: transparent;
        border: none;
        font-size: 20px;
        cursor: pointer;
        z-index: 9999;
    } */

    #close-panel {
        pointer-events: auto; /* forza il click sempre sulla X */
    }

    #close-panel {
      position: absolute;
      top: 6px;
      right: 8px;

      font-size: 20px;
      line-height: 20px;

      padding: 4px 8px;
      border-radius: 6px;

      border: 1px solid rgba(244, 67, 54, 0.5);
      background: transparent;
      color: rgba(244, 67, 54, 0.8);

      cursor: pointer;
    }

    #close-panel:hover {
      background: rgba(244, 67, 54, 0.15);
      color: #f44336;
    }

    #tools-close {
      position: absolute;
      top: 6px;
      right: 8px;

      font-size: 20px;
      line-height: 20px;

      padding: 4px 8px;
      border-radius: 6px;

      border: 1px solid rgba(244, 67, 54, 0.5);
      background: transparent;
      color: rgba(244, 67, 54, 0.8);

      cursor: pointer;
    }

    #tools-close:hover {
      background: rgba(244, 67, 54, 0.15);
      color: #f44336;
    }


    #tools-hide {
      position: absolute;
      top: 6px;
      left: 8px;

      font-size: 14px;
      line-height: 1;

      padding: 6px 10px;
      border-radius: 6px;

      border: 1px solid rgba(33, 150, 243, 0.6);
      background: rgba(33, 150, 243, 0.12);
      color: #2196f3;

      cursor: pointer;
    }

    #tools-hide:hover {
      background: rgba(33, 150, 243, 0.25);
    }

    
    /* Drag utility */
    .draggable { cursor: move; }
    .no-select {
      user-select: none; -webkit-user-select: none; -ms-user-select: none; -moz-user-select: none;
    }


    /* Colori “d–flight like” */
    .c-red      { background:#ff2a2a; border-color:#ff2a2a; }
    .c-red-hz   {
      background:
        repeating-linear-gradient(45deg,
          rgba(255,42,42,0.15) 0 6px,
          rgba(255,42,42,0.60) 6px 12px);
      border-color:#ff2a2a;
    }
    .c-orange   { background:#ff9800; border-color:#ff9800; }
    .c-yellow   { background:#ffeb3b; border-color:#f1d302; }
    .c-celeste  { background:#29b6f6; border-color:#29b6f6; }
    .c-empty    { background:#fff; border-color:#222; }

    /* assicura che il control layers sia visibile */
    .leaflet-control-layers { display: block !important; }
    .leaflet-control { border: 1px solid var(--border) !important; background: var(--panel) !important; color: var(--text) !important; }
    .leaflet-control-layers-expanded { color: var(--text); }
    .leaflet-control a { color: var(--text); }
    .leaflet-popup-content-wrapper, .leaflet-popup-tip{ background: var(--panel); color: var(--text); border:1px solid var(--border); }

    /* Maniglia (grip) del pannello layer */
.lc-grip {
  position: sticky; top: 0;
  background: rgba(255,255,255,0.04);
  border-bottom: 1px solid var(--border);
  padding: 6px 10px;
  font-size: 12px;
  color: var(--muted);
  cursor: move;
  border-top-left-radius: 8px; border-top-right-radius: 8px;
} 

.leaflet-top {
  top: var(--safe-top);
}

/*
.leaflet-bottom {
  bottom: var(--safe-bottom);
}

.topbar-toggle {
  bottom: calc(12px + var(--safe-bottom));
} */

/*
.lc-grip {
  position: sticky;
  top: var(--safe-top);
  padding: 6px 10px;  
  background: rgba(255,255,255,0.04);
  border-bottom: 1px solid var(--border);
  font-size: 12px;
  color: var(--muted);
  cursor: move;
  border-top-left-radius: 8px;
  border-top-right-radius: 8px;
} 


@media (max-width:640px){
  .lc-grip {
    top: calc(env(safe-area-inset-top, 0px));
  }
}

*/