/* Italia Connessioni - fix mobile tabella modem + collegamento rapido modem.
   Non modifica icone/layout Serafino. */

.modem-card .modem-icon svg{
  width:34px;
  height:34px;
  display:block;
}

.modem-table-wrap{
  width:100%;
  overflow-x:auto;
  -webkit-overflow-scrolling:touch;
}

.modem-table{
  width:100%;
}

@media (min-width: 821px){
  .modem-table{
    min-width:760px;
  }
}

/* Su mobile la tabella modem diventa una lista di schede,
   così Stato, Modello modem e IP restano sempre visibili. */
@media (max-width: 820px){
  .modem-table-wrap{
    overflow:visible;
  }

  .modem-table{
    min-width:0 !important;
    border-collapse:separate;
    border-spacing:0 12px;
  }

  .modem-table thead{
    display:none;
  }

  .modem-table tbody,
  .modem-table tr,
  .modem-table td{
    display:block;
    width:100%;
  }

  .modem-table tr{
    background:#fff;
    border:1px solid #e7eef5;
    border-radius:18px;
    padding:10px 12px;
    box-shadow:0 8px 22px rgba(18,60,104,.08);
  }

  .modem-table td{
    border-bottom:1px solid #edf2f7;
    padding:9px 0;
    display:grid;
    grid-template-columns:minmax(108px, 42%) 1fr;
    gap:10px;
    align-items:start;
    font-size:.92rem;
  }

  .modem-table td:last-child{
    border-bottom:0;
  }

  .modem-table td::before{
    content:attr(data-label);
    font-weight:800;
    color:#123c68;
    text-transform:none;
  }

  .modem-table td[data-label="Riferimento"]{
    display:block;
  }

  .modem-table td[data-label="Riferimento"]::before{
    display:block;
    margin-bottom:4px;
  }

  .modem-table .badge{
    justify-self:start;
  }
}

@media (max-width: 420px){
  .modem-table td{
    grid-template-columns:1fr;
    gap:4px;
  }
}
/* Stato accesso cliente */
.status-pill.disconnected{
  background:#fff1f1;
  color:#e0001b;
}

.status-pill.connected{
  background:#ecf8f0;
  color:#239647;
}
/* Fix forte colore badge accesso cliente */
#loginStatus.status-pill.disconnected,
#loginStatus.disconnected{
  background:#fff1f1 !important;
  color:#e0001b !important;
}

#loginStatus.status-pill.connected,
#loginStatus.connected{
  background:#ecf8f0 !important;
  color:#239647 !important;
}

/* FIX DEFINITIVO mobile modem + icona card modem */
.quick-card.modem-card .icon.modem-icon{
  width:44px !important;
  height:44px !important;
  min-width:44px !important;
  max-width:44px !important;
  display:inline-grid !important;
  place-items:center !important;
  overflow:hidden !important;
}

.quick-card.modem-card .icon.modem-icon svg{
  width:32px !important;
  height:32px !important;
  min-width:32px !important;
  max-width:32px !important;
  display:block !important;
}

/* Non permettere alla tabella modem di restare larga su smartphone. */
@media (max-width: 820px){
  .modem-table-wrap{
    overflow:visible !important;
    width:100% !important;
  }

  .modem-table-wrap table,
  table.modem-table,
  .modem-table{
    width:100% !important;
    min-width:0 !important;
    max-width:100% !important;
    border-collapse:separate !important;
    border-spacing:0 12px !important;
  }

  .modem-table thead{
    display:none !important;
  }

  .modem-table tbody{
    display:block !important;
    width:100% !important;
  }

  .modem-table tbody tr{
    display:block !important;
    width:100% !important;
    max-width:100% !important;
    background:#ffffff !important;
    border:1px solid #e7eef5 !important;
    border-radius:18px !important;
    padding:10px 12px !important;
    margin:0 0 12px 0 !important;
    box-shadow:0 8px 22px rgba(18,60,104,.08) !important;
  }

  .modem-table tbody td{
    display:grid !important;
    grid-template-columns:112px minmax(0,1fr) !important;
    gap:10px !important;
    width:100% !important;
    max-width:100% !important;
    border-bottom:1px solid #edf2f7 !important;
    padding:9px 0 !important;
    white-space:normal !important;
    word-break:break-word !important;
    overflow-wrap:anywhere !important;
    align-items:start !important;
  }

  .modem-table tbody td:last-child{
    border-bottom:0 !important;
  }

  .modem-table tbody td::before{
    content:attr(data-label) !important;
    display:block !important;
    font-weight:800 !important;
    color:#123c68 !important;
    min-width:0 !important;
  }

  .modem-table tbody td[data-label="Riferimento"]{
    display:block !important;
  }

  .modem-table tbody td[data-label="Riferimento"]::before{
    margin-bottom:4px !important;
  }

  .modem-table tbody td[data-label="Stato"] .badge{
    justify-self:start !important;
    width:auto !important;
    white-space:nowrap !important;
  }
}

@media (max-width: 420px){
  .modem-table tbody td{
    grid-template-columns:1fr !important;
    gap:4px !important;
  }

  .quick-card.modem-card .icon.modem-icon{
    width:40px !important;
    height:40px !important;
    min-width:40px !important;
    max-width:40px !important;
  }

  .quick-card.modem-card .icon.modem-icon svg{
    width:30px !important;
    height:30px !important;
  }
}


/* MULTI SEDI STEP2 */
.sites-filter-card{
  padding-bottom:18px;
}

.site-filter-label{
  display:grid;
  gap:7px;
  color:#123c68;
  font-weight:800;
}

.site-filter-label select{
  width:100%;
  border:1px solid #dbe5ee;
  border-radius:16px;
  padding:13px 14px;
  background:#fff;
  color:#102033;
  font:inherit;
}

.site-billing-info{
  margin-top:10px;
}

.site-tag{
  display:inline-flex;
  align-items:center;
  gap:4px;
  margin-top:4px;
  padding:4px 8px;
  border-radius:999px;
  background:#eef4ff;
  color:#123c68;
  font-size:.78rem;
  font-weight:800;
}

.site-tag.secondary{
  background:#f7eefb;
  color:#9b2a70;
}

@media (max-width:820px){
  .sites-filter-card .section-head{
    margin-bottom:10px;
  }

  .site-tag{
    font-size:.75rem;
    white-space:normal;
  }
}


/* RADIUS STEP3: IP statico/dinamico */
.ip-type-badge{
  display:inline-flex;
  align-items:center;
  margin-top:4px;
  padding:3px 8px;
  border-radius:999px;
  font-size:.72rem;
  font-weight:900;
}

.ip-type-badge.static{
  background:#e8f7ee;
  color:#16803a;
}

.ip-type-badge.dynamic{
  background:#eef4ff;
  color:#123b8c;
}