/* Personalizzazioni Atena sopra Soft UI Dashboard PRO */

input.font-monospace { letter-spacing: .03em; }

.clickable-row { cursor: pointer; }

/* Prefisso telefonico con bandiera */
[data-phone-field] .input-group > .btn { border-color: #d2d6da; color: #344767; background: #f8f9fa; font-size: .875rem; }
[data-phone-field] .fi { width: 1.25em; border-radius: 2px; }
.input-group > .form-control:not(:first-child) { padding-left: .75rem !important; }
.phone-prefix-menu { max-height: 18rem; overflow-y: auto; min-width: 16rem; }
.clickable-row:hover { background-color: #f8f9fa; }

/* Autocomplete comuni */
.ac-menu {
  position: absolute;
  z-index: 1050;
  left: 0;
  right: 0;
  max-height: 16rem;
  overflow-y: auto;
  background: #fff;
  border-radius: .5rem;
  box-shadow: 0 8px 26px -4px rgba(20, 20, 20, .15), 0 8px 9px -5px rgba(20, 20, 20, .06);
}
.ac-menu button {
  display: block;
  width: 100%;
  text-align: left;
  border: 0;
  background: none;
  padding: .45rem .9rem;
  font-size: .875rem;
}
.ac-menu button:hover, .ac-menu button.active { background: #f0f2f5; }
.ac-menu small { color: #8392ab; }

.pagination { margin-bottom: 1rem; }

/* Listino: colonne fisse identiche in tutte le categorie */
.service-table { table-layout: fixed; min-width: 900px; }

/* Mandato SEPA attivo: sfondo chiaro con bordo verde */
.mandate-active { border-left: 4px solid #82d616; }

/* Nuovo contratto: offerta di connettività selezionabile */
.offer-option { transition: border-color .15s, background-color .15s; }
.offer-option .form-check-input { float: none; position: static; margin-left: 0; flex-shrink: 0; border: 1px solid #b0b7c0; }
.offer-option:hover { background-color: #f8f9fa; }
.offer-option:has(input:checked) { border-color: #62bc47 !important; background-color: #f1faec; }

/* Nuovo contratto: scelta del tipo di cliente */
.type-choice { transition: transform .15s, box-shadow .15s; color: inherit; }
.type-choice:hover { transform: translateY(-3px); box-shadow: 0 .5rem 1.5rem rgba(0,0,0,.1) !important; }

/* Colori fissi delle tecnologie di accesso: verde FTTH, giallo FTTC, blu FWA */
.badge-tech { color: #fff; }
.badge-tech-ftth { background-image: linear-gradient(310deg, #17ad37, #98ec2d); }
.badge-tech-fttc { background-image: linear-gradient(310deg, #f2b705, #ffdd4a); color: #3a2f00; }
.badge-tech-fwa { background-image: linear-gradient(310deg, #2152ff, #21d4fd); }

/* Icone delle linee con il colore della tecnologia */
.tech-icon-ftth { color: #17ad37; }
.tech-icon-fttc { color: #d39e00; }
.tech-icon-fwa { color: #2152ff; }

/* Menu laterale a gruppi */
.sidenav .nav-link[data-bs-toggle=collapse]:after { font-family: "Font Awesome 6 Free"; font-weight: 900; }
.sidenav .nav-link[aria-expanded=true] .atena-nav-badge { display: none; }
.sidenav .atena-nav-badge { margin-right: .25rem; }
.sidenav .collapse .nav-link { padding-top: .35rem; padding-bottom: .35rem; }
.sidenav .collapse .nav-link .sidenav-normal { font-size: .8125rem; }
.sidenav .collapse .nav-link.active .sidenav-normal { font-weight: 700; color: #3f8f2c; }
.sidenav .collapse .nav-link:not(.active):hover .sidenav-normal { color: #344767; }

/* ---------- Telefoni e tablet ---------- */

/* Menu delle sezioni (Impostazioni, scheda cliente): sotto i 992 px barra orizzontale scorrevole */
@media (max-width: 991.98px) {
  .section-nav .card { position: static !important; }
  .section-nav .nav { flex-direction: row !important; flex-wrap: nowrap; overflow-x: auto; padding: .5rem !important; -webkit-overflow-scrolling: touch; scrollbar-width: none; }
  .section-nav .nav::-webkit-scrollbar { display: none; }
  .section-nav .nav-link { white-space: nowrap; padding: .4rem .75rem; }
  /* ricerca in alto a tutta larghezza */
  #navbar { display: flex !important; flex-grow: 1; align-items: center; flex-basis: auto; }
  #navbar form[role=search] { flex: 1 1 auto; margin-right: .75rem; }
  #navbar .navbar-nav { flex: 0 0 auto; flex-direction: row; width: auto !important; gap: .75rem; }
  #navbar form[role=search] .input-group { width: 100%; }
}

@media (max-width: 767.98px) {
  /* sotto i 16 px l'iPhone ingrandisce la pagina a ogni tocco su un campo */
  .form-control, .form-select, .choices__input, .choices__inner { font-size: 16px !important; }
  /* titolo e pulsanti delle schede vanno a capo invece di schiacciarsi */
  .card-header.d-flex, .card-header > .d-flex, .card-header > .d-lg-flex { flex-wrap: wrap; gap: .5rem; }
  .card-header.d-flex > div:first-child, .card-header > .d-flex > div:first-child { flex: 1 1 14rem; min-width: 0; }
  /* tabelle: la prima colonna resta ferma mentre si scorre di lato */
  .table-responsive > .table > thead > tr > :first-child,
  .table-responsive > .table > tbody > tr > :first-child { position: sticky; left: 0; z-index: 1; background: #fff; box-shadow: 6px 0 6px -6px rgba(0, 0, 0, .15); }
  .table > :not(caption) > * > * { padding-left: .6rem; padding-right: .6rem; }
}

@media (max-width: 575.98px) {
  .main-content > .container-fluid { padding-left: .5rem; padding-right: .5rem; }
  #navbarBlur { margin-left: .5rem !important; margin-right: .5rem !important; }
  .card > .card-body, .card > .card-header, .card > form > .card-body { padding-left: 1rem; padding-right: 1rem; }
  .card.card-body { padding: 1rem; }
  h5, .h5 { font-size: 1.1rem; }
}

/* Paginazione: i numeri vanno a capo invece di uscire dallo schermo */
.pagination { flex-wrap: wrap; row-gap: .35rem; }

/* ---- Area clienti ---------------------------------------------------------------------------------------- */
.portal .portal-navbar .nav-link.active { background: rgba(98, 188, 71, .1); }
.portal .portal-main { max-width: 1100px; }
.portal-tabbar {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 1030; display: flex; background: #fff;
  border-top: 1px solid #e9ecef; box-shadow: 0 -4px 16px rgba(0, 0, 0, .05); padding-bottom: env(safe-area-inset-bottom);
}
.portal-tabbar a { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 8px 0 6px; font-size: .7rem; color: #67748e; }
.portal-tabbar a i { font-size: 1.1rem; }
.portal-tabbar a.active { color: #3f8f2c; font-weight: 600; }
@media (max-width: 991.98px) { .portal .portal-main { padding-bottom: 5.5rem !important; } }
.portal .stat-value { font-size: 1.6rem; font-weight: 700; line-height: 1.2; }
.portal .code-input { font-size: 1.8rem; letter-spacing: .5em; text-align: center; font-weight: 700; }
.portal .dot { display: inline-block; width: .6rem; height: .6rem; border-radius: 50%; margin-right: .35rem; vertical-align: middle; }
.portal .dot-on { background: #62bc47; box-shadow: 0 0 0 3px rgba(98, 188, 71, .2); }
.portal .dot-off { background: #ea0606; box-shadow: 0 0 0 3px rgba(234, 6, 6, .15); }
.portal .dot-unk { background: #adb5bd; }
.portal .msg { border-radius: .75rem; padding: .6rem .85rem; max-width: 85%; }
.portal .msg-in { background: #f0f9ed; margin-left: auto; }
.portal .msg-out { background: #fff; border: 1px solid #e9ecef; }