@font-face {
          font-family: 'Audiowide';
           src: url('Audiowide-Regular.woff2') format('woff2');
          font-weight: normal;
          font-style: normal;
      }

      
:root {
    --firstFont: "Noto Sans", system-ui, -apple-system, BlinkMacSystemFont,
                 "Segoe UI", Arial, sans-serif;

    --secondFont: 'Audiowide', var(--firstFont);
}



    html, body {
        height: 100%;
    }

  body { 
    padding: 6px; 
    font-family: var(--firstFont);
    display: flex;
    flex-direction: column;

  }
  

  .secondFont { font-family: var(--secondFont); }


  .container { max-width: 600px; }
  /* H3: dorato con glow lampeggiante */
.textEffectLight {
    font-size: clamp(20px, 4vw, 60px);
    background: linear-gradient(45deg, #ffba00, #ff6f00);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    text-shadow: 0 0 15px rgba(255, 186, 0, 0.7);
    animation: glowingGold 2s ease-in-out infinite;
}

@keyframes glowingGold {
    0%, 100% { text-shadow: 0 0 10px rgba(255, 186, 0, 0.5); }
    50% { text-shadow: 0 0 25px rgba(255, 186, 0, 1); }
}

/* P: colore normale, solo glow lampeggiante */
.textGlow {
    color: #007bff; /* o qualsiasi colore tu voglia */
    text-shadow: 0 0 0 rgba(0,0,0,0);
    animation: glowingNormal 2s ease-in-out infinite;
}

@keyframes glowingNormal {
    0%, 100% { text-shadow: 0 0 0 rgba(0,0,0,0); }
    50% { text-shadow: 0 0 15px rgba(0,123,255,0.7); } /* glow colore del testo */
}


#infoDatetime {
    width: 160px; /* adatta in base al formato hh:mm:ss */
    display: inline-block; /* necessario per la larghezza */
    text-align: right; /* mantiene allineato a destra */
}


details[open] pre {
  animation: fadeInExpand 0.3s ease-out;
}

@keyframes fadeInExpand {
  from {
    opacity: 0;
    transform: scaleY(0.95);
  }
  to {
    opacity: 1;
    transform: scaleY(1);
  }
}



.flag-icon svg {
  display: inline-block;
  vertical-align: middle;
}


.badge-sm {
  font-size: 0.55em;
  padding: 0.35em 0.5em;
  min-width: 46px;
  text-align: center;
}

.glow-input:focus {
  border-color: #0d6efd;
  box-shadow: 0 0 0 .15rem rgba(13,110,253,.35);
}

.logo-img {
    /* width: clamp(110px, 15vw, 170px); */
     width: clamp(130px, 20vw, 200px);  /* leggermente più grande ovunque */
    height: auto;
}

/* Auto-style per tutti i campi readonly Bootstrap */
.form-control[readonly],
.form-select[readonly] {

    background-color: var(--bs-secondary-bg);
    color: var(--bs-body-color);
    border-color: var(--bs-border-color);

    pointer-events: none;
    opacity: .85;
}

/* niente effetto focus */
.form-control[readonly]:focus,
.form-select[readonly]:focus {
    box-shadow: none;
    outline: none;
}



/* ------------------ MAPPA ------------------------ */
#mapContainer {
  width: 100%;
  height: 42vh;
}

@media (min-height: 700px) {
  #mapContainer {
    height: 53vh;
  }
}

@media (min-height: 900px) {
  #mapContainer {
    height: 59vh;
  }
}

@media (min-height: 1100px) {
  #mapContainer {
    height: 62vh;
  }
}





/*   ================= LAYER CONTROL BOOTSTRAP THEME ================= */

/* ---------- ICONA ---------- */

/* light = default leaflet */
.leaflet-control-layers-toggle {
    background-color: var(--bs-body-bg);
}

/* dark mode → icona visibile */
[data-bs-theme="dark"] 
.leaflet-control-layers-toggle {
    filter: invert(1) brightness(1.4);
}


/* ---------- CONTAINER ---------- */

.leaflet-control-layers {
    background: var(--bs-body-bg);
    color: var(--bs-body-color);
    border: 1px solid var(--bs-border-color);
    border-radius: var(--bs-border-radius);
    box-shadow: var(--bs-box-shadow);
}

/* pannello aperto */
.leaflet-control-layers-expanded {
    background: var(--bs-body-bg);
    color: var(--bs-body-color);
    transition: all .2s ease;
}

.leaflet-control-layers form {
    background: var(--bs-body-bg);
    color: var(--bs-body-color);
}


/* ---------- LISTA ---------- */

.leaflet-control-layers-list {
    background: transparent;
    color: var(--bs-body-color);
}


/* ---------- LABEL ---------- */

.leaflet-control-layers label {
    color: var(--bs-body-color);
    font-size: 0.9rem;
    cursor: pointer;
    padding: 2px 4px;
    border-radius: var(--bs-border-radius-sm);
}

.leaflet-control-layers label:hover {
    background: var(--bs-tertiary-bg);
}


/* ---------- SEPARATORE ---------- */

.leaflet-control-layers-separator {
    border-top: 1px solid var(--bs-border-color);
}


/* ---------- DARK MODE HARD FIX ---------- */
/* Leaflet forza bianco in alcune versioni */

[data-bs-theme="dark"] 
.leaflet-control-layers-expanded,
[data-bs-theme="dark"] 
.leaflet-control-layers form {
    background: var(--bs-body-bg) !important;
}


/* ================= LEGEND ================= */

.legend-container {
    user-select: none;
}

.legend-tab {
    background: var(--bs-body-bg);
    color: var(--bs-body-color);
    width: 30px;
    height: 30px;
    border-radius: 50%;
    text-align: center;
    line-height: 30px;
    cursor: pointer;
    box-shadow: 0 0 5px rgba(0,0,0,0.5);
}

.legend-content {
    background: var(--bs-secondary-bg);
    color: var(--bs-body-color);
    padding: 10px;
    border: 1px solid var(--bs-border-color);
    border-radius: 5px;
    min-width: 200px  !important;
    margin-top: 5px;
    text-align: left !important;
    opacity: 0;
    transform: translateY(-10px);
    pointer-events: none;      /* non cliccabile quando nascosto */
    transition: all 1s ease;
}

.legend-content.open {
    opacity: 1;
    transform: translateY(0);
    pointer-events: auto;
}


/* ================= LEAFLET CONTROLS ================= */

/* fullscreen icon adattiva al tema */
[data-bs-theme="dark"] 
.leaflet-control-zoom-fullscreen.fullscreen-icon {
    filter: invert(1);
}


/* ================= RESPONSIVE ================= */

@media (max-width: 768px) {
    .legend-content {
        max-width: 150px;
        font-size: 0.9rem;
    }
}

@media (max-width: 480px) {
    .legend-content {
        max-width: 120px;
        font-size: 0.8rem;
    }
}




/* Cluster personalizzato */
.marker-cluster-custom {
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    color: #fff;
    font-weight: bold;
    font-size: 1rem;
    border: 2px solid #fff;
    background-color: var(--bs-primary); /* light theme default */
}

/* Dark theme */
[data-bs-theme="dark"] .marker-cluster-custom {
    background-color: var(--bs-secondary); 
    border-color: #000;
    color: #eee;
}

/* Opzionale: dimensione dinamica in base a count */
.marker-cluster-custom {
    width: 40px;
    height: 40px;
}

.markerPanel {
    font-family: var(--bs-font-sans-serif);
    user-select: none;

    background: var(--bs-secondary-bg);
    color: var(--bs-body-color);

    padding: 12px 10px 10px 10px;  /* più spazio sopra per X */
    border: 1px solid var(--bs-border-color);
    border-radius: 5px;

    /* rimuovo max-width fisso e aggiungo min/max per adattarsi al contenuto */
    width: auto;       /* lascia che cresca con il contenuto */
    min-width: 160px;  /* minimo ragionevole */
    
    display: flex;
    flex-direction: column;
    gap: 8px;
    align-items: flex-start;
    justify-content: flex-start;
    text-align: left;

    box-shadow: 0 0 8px rgba(0,0,0,0.25);

    /* animazione */
    opacity: 0;
    transform: translateY(-10px);
    pointer-events: none;
    transition: opacity 0.35s ease, transform 0.35s ease;

    /* rende il titolo e contenuto responsivo */
    white-space: normal;  /* permette al testo di andare a capo se serve */
    word-break: break-word;
}


.markerPanel.open {
    opacity: 1;
    transform: translateY(0);
    pointer-events: auto;
}

.markerPanel h3 {
    margin: 0;
}

.markerPanelTitle {
    font-family: var(--font-audiowide) !important;
    font-size: clamp(0.8rem, 4vw, 1.1rem);
    color: #ffba00;
    margin-bottom: 6px;  /* spazio sotto */
    white-space: nowrap;  /* titolo rimane in una riga se possibile */
    overflow: hidden;     /* taglia testo troppo lungo */
    text-overflow: ellipsis; /* aggiunge ... se non ci sta */
    max-width: 100%;      /* non supera il panel */
    margin-top: 10px;

}

.markerPanel button {
    width: 100%;
    font-size: clamp(0.5rem, 4vw, 0.7rem);
}

.markerPanel.closing {
    opacity: 0;
    transform: translateY(-10px);
}

.markerPanel {
    will-change: transform, opacity;
}


/* rimuove il pannello bianco leaflet */
.leaflet-popup-content-wrapper {
    background: transparent;
    box-shadow: none;
    border: none;
    padding: 0;
}

/* rimuove padding interno leaflet */
.leaflet-popup-content {
    margin: 0;
}

/* nasconde la freccia bianca */
.leaflet-popup-tip {
    background: var(--bs-secondary-bg);
    border: 1px solid var(--bs-border-color);
}

/* clinic popup specifico */
.clinicPopup .leaflet-popup-content-wrapper {
    background: transparent !important;  /* rimuove sfondo bianco */
    border: none !important;             /* rimuove bordo Leaflet */
    box-shadow: none !important;         /* rimuove ombra Leaflet */
    padding: 0 !important;               /* rimuove padding */
}

.clinicPopup .leaflet-popup-content {
    margin: 0 !important;                /* rimuove margin interno */
}

.clinicPopup .leaflet-popup-tip {
    display: none;                        /* nasconde la freccia bianca */
}

/* wrapper principale del popup */
.clinicPopup.leaflet-popup .leaflet-popup-content-wrapper {
    width: auto !important;
    min-width: 160px;
    max-width: 90vw !important;  /* popup responsivo su mobile */
}

/* contenuto interno */
.clinicPopup.leaflet-popup .leaflet-popup-content {
    width: auto !important;
    max-width: none !important;
    margin: 0 !important;
}

/* opzionale: titolo su più righe o ellipsis */
.markerPanel h5 {
    white-space: normal;  /* oppure nowrap + overflow: hidden per ellipsis */
}

/* ------------------ MAPPA ------------------------ */

/* ------------------ TABS ------------------------ */
#configTabs .nav-link {
    font-size: 0.8rem;      /* testo più piccolo */
    padding: 0.25rem 0.5rem; /* riduce altezza e spazio orizzontale */
    line-height: 1.2;       /* riduce l'altezza verticale */
}

#configTabs .nav-item {
    margin-bottom: 0;       /* niente margini extra sotto le linguette */
}

#configTabs .nav-link.active {
    font-weight: bold;       /* mantiene evidenza sul tab attivo */
}

#configTabsContent .tab-pane {
    padding: 0;     /* elimina il padding interno */
    margin: 0;      /* elimina eventuali margini */
}

#configTabsContent .tab-pane > * {
    margin: 0;
    padding: 0;
}

/* ------------------ TABS ------------------------ */

/* ------------------ MARGINI CONTENUTO TABS ------------------------ */
.tab-content {
    padding: 2px !important;   /* elimina padding interno */
    margin: 2px !important;    /* elimina margine */
}
/* ------------------ MARGINI CONTENUTO TABS ------------------------ */



/* ------------------ FOOTER ------------------------ */
#pageFooter {
    max-height: 20px;        /* altezza massima */
    height: 20px;            /* forza altezza */
    line-height: 20px;       /* centra testo verticalmente come fallback */
    font-size: 0.65rem;      /* testo molto piccolo */
    display: flex;           /* flex per centrare */
    align-items: center;     /* centra verticalmente */
    justify-content: center; /* centra orizzontalmente */
    padding: 0;              /* rimuove padding bootstrap */
}
#pageFooter .container {
    padding: 0;              /* rimuove padding del container interno */
}
/* ------------------ FOOTER ------------------------ */










.clinicPopup .leaflet-popup-content-wrapper {
    background: var(--bs-secondary-bg);
    border: 1px solid var(--bs-border-color);
    border-radius: 5px;
    box-shadow: 0 0 8px rgba(0,0,0,0.25);
    padding: 10px;
}

.clinicPopup .leaflet-popup-content {
    margin: 0;
    width: auto !important;      /* lascia che cresca col contenuto */
    max-width: none !important;  /* elimina limiti */
}

.markerPanel {
    display: flex;
    flex-direction: column;
    gap: 8px;
    min-width: 250px;           /* evita popup troppo stretto */
    max-width: 1000px;           /* opzionale */
    width: auto;
}

.markerPanel h5 {
    margin: 0;
    white-space: normal;
    word-break: break-word;
}

.markerPanel button,
.markerPanel a {
    width: 100%;
}

.markerPanel h5 {
    white-space: nowrap;      /* forza il testo su una sola riga */
    overflow: visible;        /* lascia crescere il contenitore */
    text-overflow: clip;      /* non taglia il testo */
    max-width: none !important; /* rimuove qualsiasi max-width ereditato */
    margin-top: 12px !important;
    
}



.navbar {
  position: relative;
  z-index: 1030;
}

.navbar .dropdown-menu {
  z-index: 1031;
}










/* ===============================
   intl-tel-input Bootstrap theme
   =============================== */

.iti {
    width: 100%;
}

.iti {
    width: 100%;
}

/* input coerente bootstrap */
.iti input.form-control {
    padding-left: 90px !important;
}

/* dropdown base */
.iti__country-list {
    border-radius: var(--bs-border-radius);
    border: 1px solid var(--bs-border-color);
    background-color: var(--bs-body-bg);
    color: var(--bs-body-color);
    box-shadow: var(--bs-box-shadow);
}

/* singola nazione */
.iti__country {
    color: var(--bs-body-color);
}

/* hover bootstrap style */
.iti__country:hover {
    background-color: var(--bs-tertiary-bg);
}

/* nazione selezionata */
.iti__country.iti__highlight {
    background-color: var(--bs-primary-bg-subtle);
}

/* search box */
.iti__search-input {
    background-color: var(--bs-body-bg);
    color: var(--bs-body-color);
    border: 1px solid var(--bs-border-color);
}

/* DARK MODE FIX */
[data-bs-theme="dark"] .iti__country-list {
    background-color: var(--bs-body-bg);
    color: var(--bs-body-color);
}

[data-bs-theme="dark"] .iti__country:hover {
    background-color: var(--bs-secondary-bg);
}
.iti,
.iti__country-list {
    transition: background-color .2s ease, color .2s ease, border-color .2s ease;
}
.iti__country-list {
    max-height: 260px;
    border-radius: var(--bs-border-radius);
}

.iti__country-list::-webkit-scrollbar {
    width: 8px;
}

.iti__country-list::-webkit-scrollbar-thumb {
    background: var(--bs-secondary-color);
    border-radius: 10px;
}

.iti__tel-input:focus {
    border-color: var(--bs-primary);
    box-shadow: 0 0 0 .25rem rgba(var(--bs-primary-rgb), .25);
}




.search-row {
    display: flex;
    flex-wrap: wrap;
    gap: .5rem;
}

.search-row > div {
    min-width: 40px;   /* puoi aumentare o ridurre */
    flex: 1 1 auto;

}

.map-filters-alert {
    padding: 0.35rem 0.75rem;
    font-size: 0.85rem;
    line-height: 1.2;
    margin-top: 0.5rem;

    overflow: hidden;

    transition:
        opacity 0.45s cubic-bezier(0.22,1,0.36,1),
        transform 0.45s cubic-bezier(0.22,1,0.36,1),
        max-height 0.45s cubic-bezier(0.22,1,0.36,1);

    max-height: 80px;   /* altezza visibile */
    opacity: 1;
    transform: translateY(0);

    will-change: opacity, transform, max-height;
}

/* nascosto */
.map-filters-alert.hidden {
    opacity: 0;
    transform: translateY(-10px);
    max-height: 0;
    padding-top: 0;
    padding-bottom: 0;
    margin-top: 0;
    border-width: 0;
    pointer-events: none;
}




.map-label-marker {
    position: relative;
    display: inline-block;
}

/* BOX */
.map-label-marker .label-box {
    background: #007bff;
    color: white;
    padding: 8px 14px;
    border-radius: 10px;
    font-weight: 600;
    white-space: nowrap;
    box-shadow: 0 2px 6px rgba(0,0,0,0.3);
}

/* FRECCIA */
.map-label-marker .label-arrow {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    width: 0;
    height: 0;
    border-left: 8px solid transparent;
    border-right: 8px solid transparent;
    border-top: 10px solid #007bff;
}

/* CLOSE BUTTON */
.map-label-marker .label-close {
    position: absolute;
    top: -8px;
    right: -8px;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    border: none;
    background: white;
    color: #333;
    font-size: 12px;
    cursor: pointer;
    box-shadow: 0 1px 4px rgba(0,0,0,0.4);
    line-height: 20px;
    padding: 0;
}

.map-label-marker .label-close:hover {
    background: #f1f1f1;
}

@keyframes blink {
  0%, 100% { opacity: 1; transform: scale(1); }
  50% { opacity: 0.6; transform: scale(1.2); }
}

.blinking {
  animation: blink 1s infinite;
}



#printArea {
    display:none;
}

@media print {

  body * {
    visibility: hidden;
  }

  #printArea, #printArea * {
    visibility: visible;
  }

  #printArea {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
  }

}


.collapsing {
    transition: height .5s ease;
}


.fade-out {
    opacity: 0;
    transform: translateY(-30px); /* pannello scivola leggermente verso l’alto */
    transition: opacity 1s ease, transform 1s ease; /* più lento */
}




@keyframes pulse {
    0%   { transform: scale(1); }
    50%  { transform: scale(1.05); } /* ingrandimento più leggero */
    100% { transform: scale(1); }
}

.pulse {
    animation: pulse 0.5s ease-in-out 0s 4; /* 4 cicli = 2 secondi */
}

.table-hover tbody tr:hover{
    cursor:pointer;
}



/* LIGHT */
[data-bs-theme="light"] .table thead th{
    background-color: #e9ecef;
    color: #212529;
}

/* DARK */
[data-bs-theme="dark"] .table thead th{
    background-color: #2b3035;
    color: #f8f9fa;
}



@media (max-width: 768px){

    .table-responsive table thead{
    display:none;
    }

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

    .table-responsive tr{
    border-bottom:1px solid var(--bs-border-color);
    padding:10px 0;
    }

    .table-responsive td{
    display:flex;
    justify-content:space-between;
    padding:4px 10px;
    }

    .table-responsive td::before{
    font-weight:600;
    opacity:.7;
    }
}

@media (max-width: 768px){
    .table-responsive td::before{
        content:attr(data-label);
    }
}

.table{
    font-size:0.80rem;
}


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

    /* rendiamo la cella Azioni full-width */
    td[data-label="Azioni"]{
        display:flex !important;
        flex-direction:column !important;
        align-items:stretch !important;
    }

    /* bottoni full width */
    td[data-label="Azioni"] .clinic-actions{
        display:flex;
        flex-direction:column;
        gap:4px;
        width:100%;
    }

    td[data-label="Azioni"] .clinic-actions .btn{
        width:100%;
    }
}

.table td strong{
font-weight:600;
}



th.sortable{
    cursor:pointer;
    position: relative;
}

th.sortable::after{
    content:"⇅";
    font-size:0.7rem;
    margin-left:4px;
    color:#888;
}

th.sortable.sorted-asc::after{
    content:"⬆";
}

th.sortable.sorted-desc::after{
    content:"⬇";
}


.clinic-state-badge{
    display:inline-block;
    width:14px;
    height:10px;
    border-radius:3px;
}


.btn-xs{
    font-size:0.70rem;
    padding:2px 6px;
    line-height:1.2;
}


.clinic-actions{
    display:flex;
    gap:4px;
    flex-wrap:wrap;
}




.quillWrapper .ql-toolbar{
    border:0;
    border-bottom:1px solid var(--bs-border-color);
    background:var(--bs-tertiary-bg);
}

.quillWrapper .ql-container{
    border:0;
    font-family:inherit;
}

.quillWrapper .ql-editor{
    min-height:120px;
    font-size:0.95rem;
}

[data-bs-theme="dark"] .ql-toolbar button svg{
    filter:invert(1);
}

.quillWrapper{
    background:var(--bs-body-bg);
}








/* Bottone HTML source */
.ql-html-edit-button button {
    font-size: 1rem !important;
    line-height: 1 !important;
    padding: 0.25rem 0.5rem !important;
}

/* Overlay popup */
.ql-html-edit-overlay {
    background: rgba(0,0,0,0.5) !important;
}

/* Popup dialog */
.ql-html-edit-dialog {
    background: var(--bs-body-bg) !important;
    color: var(--bs-body-color) !important;
    border: 1px solid var(--bs-border-color) !important;
    border-radius: 0.5rem !important;
    max-width: 900px !important;
    padding: 1rem !important;
    font-family: inherit !important;
}

/* Textarea */
.ql-html-edit-textarea {
    background: var(--bs-body-bg) !important;
    color: var(--bs-body-color) !important;
    font-family: monospace !important;
    border: 1px solid var(--bs-border-color) !important;
    border-radius: 0.25rem !important;
    width: 100%;
    height: 300px;
    padding: 0.5rem;
    resize: vertical;
}

/* Dark mode */
[data-bs-theme="dark"] .ql-html-edit-dialog,
[data-bs-theme="dark"] .ql-html-edit-textarea {
    background: var(--bs-dark) !important;
    color: var(--bs-light) !important;
    border-color: var(--bs-secondary) !important;
}