/* ==========================================================================
   BLOCCO 1: STRUTTURA GENERALE, TESTATA E MENU
   ========================================================================== */

body {
   margin               : 0;
   padding              : 0;
   background-color     : #e2e8f0; /* Grigio cemento chiaro */
   font-family          : "Segoe UI", -apple-system, BlinkMacSystemFont, Roboto, sans-serif;
   color                : #0f172a;
   line-height          : 1.5;
}

h1 {
   font-size            : 32px; 
   color                : #1e3a8a; /* Blu aeronautico scuro */
   margin               : 20px 0;
   font-weight          : bold;
}

a img {
   border: 0;
}

/* Tooltip corretti per evitare errori di posizionamento */
a.tip {
   text-decoration      : none;
   position             : relative; 
}

a.tip span {
   display              : none;
}

a.tip:hover span {
   background           : #1e3a8a;
   opacity              : 0.95;
   border               : 1px solid #3b82f6;
   border-radius        : 6px; 
   font-size            : 14px; 
   white-space          : nowrap;
   color                : #FFFFFF;
   padding              : 8px 12px;
   display              : block;
   z-index              : 100; 
   position             : absolute;
   top                  : 25px; 
   left                 : 0;
   font-weight          : bold;
   box-shadow           : 0 4px 6px -1px rgb(0 0 0 / 0.1); 
}

#top {
   min-height           : 115px;
   background-color     : #f1f5f9;
   width                : 100%;
   background-image     : url('../img/dvc.jpg');
   background-repeat    : no-repeat;
   background-position  : calc(100% - 20px) center;
   background-size      : auto 80px;
   border-bottom        : 3px solid #1e3a8a; 
}

#menubar {
   min-height           : 50px;
   width                : 100%;
   background-color     : #1e3a8a; 
   display              : flex;
   align-items          : center;
   padding              : 5px 0;
}

/* Contenitore dei pulsanti del menu (Centrato) */
#menu {
   display              : flex;
   flex-wrap            : wrap;
   gap                  : 10px;       
   padding              : 5px 15px;
   margin               : 0 auto;     
   justify-content      : center;     
}

/* Pulsanti compatti e simmetrici */
.menulink {
   font-size            : 14px;       
   text-decoration      : none;
   white-space          : nowrap;
   border               : 1px solid #3b82f6;
   border-radius        : 5px;
   padding              : 8px 16px;   
   background-color     : #2563eb;
   color                : #ffffff;
   font-weight          : bold;
   transition           : all 0.2s ease;
   display              : inline-flex;
   align-items          : center;
   justify-content      : center;
   gap                  : 6px;        
}

.menulink:hover {
   background-color     : #3b82f6;
}

.menulinkactive {
   font-size            : 14px;       
   text-decoration      : none;
   white-space          : nowrap;
   border               : 1px solid #ffffff;
   border-radius        : 5px;
   padding              : 8px 16px;   
   background-color     : #ffffff;    
   color                : #1e3a8a;
   font-weight          : bold;
   display              : inline-flex;
   align-items          : center;
   justify-content      : center;
   gap                  : 6px;        
}

/* Icone interne ai pulsanti menu */
.menulink img, .menulinkactive img,
.menulink i, .menulinkactive i,
.menulink svg, .menulinkactive svg {
   width                : 16px !important; 
   height               : 16px !important;
   display              : inline-block;
   vertical-align       : middle;
}
/* ==========================================================================
   BLOCCO 2: CONTENUTO PRINCIPALE, TABELLE, FILTRI E MOBILE
   ========================================================================== */

#content {
   width                : calc(100% - 30px);
   max-width            : 1400px;
   margin               : 20px auto;
   padding              : 20px; 
   background           : #ffffff;
   border-radius        : 8px; 
   box-shadow           : 0 4px 10px -1px rgba(15, 23, 42, 0.08); 
   border               : 1px solid #cbd5e1;
}

/* RIPRISTINO E INTEGRAZIONE TITOLI ESISTENTI (Interconnessioni, Elenco Mondiale, Nodi) */
div[style*="font-size: 21pt"], div[style*="font-size:21pt"] {
   color                : #1e3a8a !important; /* Forza il colore Blu Aeronautico Scuro */
   font-size            : 24px !important;    /* Modernizza la dimensione su monitor */
   text-transform       : uppercase !important; 
   text-align           : center !important;  
   margin-top           : 10px !important;
   margin-bottom        : 15px !important;
   font-weight          : bold !important;
   letter-spacing       : 0.5px !important;
}

/* GESTIONE STATO ONLINE / OFFLINE DEL REFLCTOR */
.status-wrapper {
   display              : inline-flex !important;
   align-items          : center !important;
   justify-content      : center !important;
   gap                  : 8px !important; 
   font-family          : 'Segoe UI', sans-serif !important;
   font-size            : 13px !important; 
   font-weight          : 700 !important;
   text-transform       : uppercase !important;
}

.status-dot {
   width                : 10px !important;
   height               : 10px !important;
   border-radius        : 50% !important;
   display              : inline-block !important;
   box-shadow           : 0 1px 3px rgba(0, 0, 0, 0.3) !important;
   position             : relative !important;
}

.status-wrapper.online .status-text { color: #16A34A !important; }
.status-wrapper.online .status-dot { background-color: #22C55E !important; }
.status-wrapper.online .status-dot::after {
   content              : '' !important;
   position             : absolute !important;
   top                  : 0 !important;
   left                 : 0 !important;
   width                : 100% !important;
   height               : 100% !important;
   border-radius        : 50% !important;
   background-color     : #22C55E !important;
   animation            : status-pulse 2s infinite ease-in-out !important;
   opacity              : 0;
}

.status-wrapper.offline .status-text { color: #DC2626 !important; }
.status-wrapper.offline .status-dot { background-color: #EF4444 !important; }

@keyframes status-pulse {
   0% { transform: scale(1); opacity: 0.6; }
   100% { transform: scale(2.4); opacity: 0; }
}

/* DEFINIZIONE TABELLE E CELLE (FORZATE) */
.pl {
   font-size            : 14px; 
   text-decoration      : none;
   color                : #334155 !important; /* Uniformato in Grigio scuro/Nero fumo */
   font-weight          : bold;
}

.pl:hover {
   color                : #2563eb !important; 
   text-decoration      : underline;
}
  
.listingtable {
   width                : 100%;
   margin-top           : 15px;
   border-collapse      : collapse;
   font-size            : 14px;   
   border               : 1px solid #cbd5e1;
}
  
.listingtable th {
   height               : 45px; 
   text-align           : center;
   background           : #f1f5f9 !important;
   color                : #1e3a8a !important;
   font-weight          : bold;
   border-bottom        : 2px solid #1e3a8a;
   padding              : 0 8px;
}

.listingtable td {
   padding              : 12px 10px; 
   border-bottom        : 1px solid #e2e8f0;
   font-weight          : bold;
   color                : #334155;
}      

/* Forza l'alternanza dei colori scavalcando i vecchi bgcolor= del PHP */
.listingtable tr:nth-child(odd) {
   background-color     : #ffffff !important;
}

.listingtable tr:nth-child(even) {
   background-color     : #f8fafc !important;
}

.listingtable tr:hover, .listingtable tr:hover td {
   background-color     : #f1f5f9 !important; /* Riga evidenziata al passaggio del mouse */
}

/* CORREZIONE GLOBALE: Forza QUALSIASI link dentro le tabelle ad essere grigio scuro */
.listinglink, .listingtable td a, .listingtable td a * {
   font-size            : 14px !important; 
   text-decoration      : none !important;
   color                : #334155 !important; /* Forza lo stesso colore dei testi generali della tabella */
   font-weight          : bold !important;
   transition           : color 0.2s ease !important;
}

/* EFFETTO HOVER GLOBALE: Si illumina di blu elettrico solo al passaggio del mouse */
.listinglink:hover, .listingtable td a:hover, .listingtable td a:hover * {
   color                : #2563eb !important; 
   text-decoration      : underline !important;
}

/* OTTIMIZZAZIONE RIGHE FILTRI INTERNE ALLA TABELLA */
.listingtable th table {
   border               : none !important;
   background           : transparent !important;
}

.listingtable th table td {
   border               : none !important;
   padding              : 4px !important;
   background           : transparent !important;
}

.error {
   font-size         : 14px; 
   font-weight       : bold;
   color             : #b91c1c;
   background-color  : #fee2e2;
   border            : 1px solid #f87171;
   border-radius     : 6px; 
   padding           : 12px;
   margin            : 15px 0;
}

.FilterField {
   font-size         : 13px; 
   color             : #0f172a;
   background-color  : #ffffff;
   width             : 160px;
   height            : 34px; 
   padding-left      : 10px;
   border            : 1px solid #cbd5e1;
   border-radius     : 4px; 
   font-weight       : bold;
   outline           : none;
   transition        : border-color 0.2s;
}

.FilterField:focus {
   border-color      : #2563eb; 
}

.FilterSubmit {
   font-size         : 13px; 
   color             : #ffffff;
   background-color  : #1e3a8a;
   height            : 34px;
   width             : 80px;
   border            : none;
   border-radius     : 4px; 
   cursor            : pointer;
   font-weight       : bold;
   transition        : background-color 0.2s;
}

.FilterSubmit:hover {
   background-color  : #2563eb; 
}

.smalllink {
   font-size         : 14px; 
   text-decoration   : none;
   color             : #1e3a8a;
   font-weight       : bold;
}

@media (max-width: 768px) {
   #top { 
      background-position: center bottom; 
      background-size: auto 60px; 
      min-height: 140px; 
   }
   
   .listingtable { 
      display: block; 
      width: 100%;
      overflow-x: auto; 
      -webkit-overflow-scrolling: touch;
      white-space: nowrap; 
   }
}