:root{
      /*--bg:#0b0d10;
      --card:#121620;
      --card2:#0f1320;
      /*--text:#eaeef5;*/
      --muted:rgba(234,238,245,.75);
      --line:rgba(255,255,255,.10);
      --gold: rgba(255,220,120,.95);
      --r:0px;
    }

    #galleriaModalOverlay *{box-sizing:border-box}
    #galleriaModalOverlay{ background: rgba(0,0,0,.72); } /* già ce l’hai */
    #galleriaModalOverlay .wrap{ color: var(--text); }    
    .wrap{max-width:1200px; margin:0 auto; /*padding:18px;*/}

    h1{margin:0 0 12px 0; font-size:18px;}
    .panel{
      background:var(--card);
      border:1px solid var(--line);
      border-radius:var(--r);
      box-shadow:0 14px 40px rgba(0,0,0,.35);
      padding:14px;
    }

    .filters{
      display:grid;
      grid-template-columns: 1fr 1fr 1fr;
      gap:10px;
    }
    @media (max-width: 980px){ .filters{grid-template-columns:1fr 1fr;} }
    @media (max-width: 620px){ .filters{grid-template-columns:1fr;} }

    .field{display:flex; flex-direction:column; gap:6px;}
    #galleriaModalOverlay label{font-size:12px; color:var(--muted);}


    #galleriaModalOverlay button{
      border-radius:12px;
      border:1px solid var(--line);
      /*padding:10px 12px;*/
      background:var(--card2);
      color:var(--text);
      outline:none;
    }
    
    
    #galleriaModalOverlay select{
      border-radius:12px;
      border:1px solid var(--line);
      /*padding:10px 12px;*/
      background:var(--card2);
      color:var(--text);
      outline:none;
    }
    
    #galleriaModalOverlay input{
      border-radius:12px;
      border:1px solid var(--line);
      padding:10px 12px;
      background:var(--card2);
      color:var(--text);
      outline:none;
    }    
 

    .row{display:flex; gap:10px; flex-wrap:wrap; align-items:center;}
    .toolbar{display:flex; justify-content:space-between; gap:10px; margin-top:10px; flex-wrap:wrap;}
    #galleriaModalOverlay button{cursor:pointer;}
    button.primary{background:rgba(26,37,66,.95); border-color:rgba(120,170,255,.35);}
    button.ghost{background:transparent;}
    #galleriaModalOverlay button:disabled{opacity:.55; cursor:not-allowed;}

    .status{font-size:12px; color:var(--muted); max-width: 100%; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;}
    .hint{margin-top:10px; font-size:12px; color:var(--muted);}

    .sessions{margin-top:14px; display:flex; flex-direction:column; gap:14px;}

    .session-card{
      background:var(--card);
      border:1px solid var(--line);
      border-radius:var(--r);
      padding:14px;
    }

    .session-head{display:flex; justify-content:space-between; gap:12px; flex-wrap:wrap;}
    .session-title{font-weight:700; font-size:15px;}
    .session-sub{font-size:12px; color:var(--muted); margin-top:4px;}

    .badge{
      display:inline-flex;
      align-items:center;
      gap:6px;
      font-size:12px;
      padding:6px 10px;
      border-radius:999px;
      border:1px solid var(--line);
      background:rgba(255,255,255,.04);
      color:var(--muted);
      user-select:none;
      white-space:nowrap;
    }
    .badge.gold{border-color:rgba(255,220,120,.25); color:rgba(255,220,120,.95); background:rgba(255,220,120,.06);}

    .chips{display:flex; gap:6px; flex-wrap:wrap; margin-top:10px;}
    .chip{
      font-size:12px;
      padding:6px 10px;
      border-radius:999px;
      border:1px solid var(--line);
      background:rgba(255,255,255,.05);
      color:var(--muted);
    }
    .chip.tag{border-color:rgba(255,220,120,.22); background:rgba(255,220,120,.06); color:rgba(255,220,120,.92);}

    .grid{
      display:grid;
      grid-template-columns: repeat(6, 1fr);
      gap:10px;
      margin-top:12px;
    }
    @media (max-width: 980px){ .grid{grid-template-columns: repeat(4, 1fr);} }
    @media (max-width: 620px){ .grid{grid-template-columns: repeat(2, 1fr);} }
    
    .date-wrap{
      position: relative;
    }
    
    #f-date-range{
      padding-right: 44px; /* spazio per la X */
    }
    
    .date-clear{
      position: absolute;
      right: 10px;
      top: 50%;
      transform: translateY(-50%);
      width: 28px;
      height: 28px;
      border-radius: 999px;
      display: none;              /* di default nascosta */
      align-items: center;
      justify-content: center;
    
      border: 1px solid rgba(255,255,255,.12);
      background: rgba(255,255,255,.06);
      color: rgba(234,238,245,.65);
      cursor: pointer;
    }
    
    .date-clear:hover{
      background: rgba(255,255,255,.10);
      color: rgba(234,238,245,.85);
    }
    

    .actions{
      position:absolute;
      top:8px;
      right:8px;
      display:flex;
      gap:8px;
      z-index:3;
    }

    .tile{
      position:relative;
      border-radius:14px;
      overflow:hidden;
      background:#0b0f1b;
      border:1px solid var(--line);
    }
    .tile img,.tile video{
      width:100%;
      height:150px;
      object-fit:cover;
      display:block;
      background:#000;
    }

    .tile .meta{
      padding:10px 12px;
      font-size:12px;
      color:rgba(234,238,245,.75);
    }
    
    .meta-right{
      display:flex;
      align-items:center;
      gap:4px;
      /*white-space:nowrap;*/
    }
    
    /* matita "da footer", più sobria (fuori foto) */
    .icon-btn.meta-edit{
      width:30px;
      height:30px;
      background:rgba(255,255,255,.06);
      border-color:rgba(255,255,255,.14);
      backdrop-filter:none;
    }
    
    .icon-btn.meta-edit .icon{
      width:16px;
      height:16px;
      fill:rgba(255,255,255,.80);
    }




    .checklist{
      display:grid;
      gap:8px;
      padding:10px 12px;
      border-radius:12px;
      border:1px solid var(--line);
      background:var(--card2);
      max-height: 220px;
      overflow:auto;
    }
    
    .checkitem{
      display:flex;
      align-items:center;
      gap:10px;
      font-size:13px;
      color:var(--text);
      cursor:pointer;
      user-select:none;
    }
    
    .checkitem input[type="checkbox"]{
      width:18px;
      height:18px;
      accent-color: rgba(255,220,120,.9);
    }
    
    .input-with-icon {
      display: flex;
      align-items: center;
      gap: 10px;
    }
    
    .input-with-icon svg {
      flex-shrink: 0;
      opacity: .6;
    }

    .icon-btn{
      width:36px;
      height:36px;
      border-radius:999px;
      border:1px solid rgba(255,255,255,.18);
      background:rgba(0,0,0,.35);
      backdrop-filter: blur(8px);
      display:flex;
      align-items:center;
      justify-content:center;
      padding:0;
    }

    .icon-btn[hidden]{display:none !important;}

    .icon{
      width:18px;
      height:18px;
      display:block;
      fill:rgba(255,255,255,.88);
      opacity:.95;
    }

    .star.attiva{
      border-color:rgba(255,220,120,.5);
      box-shadow:0 0 0 2px rgba(255,220,120,.12);
    }
    .star.attiva .icon{ fill: var(--gold); }

    .eye.nascosto{
      opacity:.55;
      border-color:rgba(255,255,255,.12);
    }
    .eye.nascosto .icon{ fill: rgba(255,255,255,.72); }
    
    .chips-selected{ margin-top:8px; }

    .chips-selected .chip{
      display:inline-flex;
      align-items:center;
      gap:8px;
      padding-right:8px;
    }
    


    .chip-x{
      margin-left:8px;
      background:transparent;
      border:0;
      color:inherit;
      cursor:pointer;
      font-size:16px;
      line-height:1;
    }

    
    .icon-btn.meta-delete{
      width:30px;
      height:30px;
      background:rgba(255,60,60,.10);
      border-color:rgba(255,60,60,.25);
    }
    .icon-btn.meta-delete .icon{
      width:16px;
      height:16px;
      fill:rgba(255,120,120,.95);
    }
    .icon-btn.meta-delete:hover{
      background:rgba(255,60,60,.16);
    }
    
    .chip.empty{
      opacity: .45;                          /* più trasparente */
      background: rgba(255,255,255,.02);     /* meno presente */
      border-color: rgba(255,255,255,.08);
      color: rgba(234,238,245,.55);
    }

    
    /* 👁️ acceso: sfondo giallino */
    .icon-btn.eye{
      transition: background .15s ease, border-color .15s ease, opacity .15s ease;
    }
    
    /* stato ON = non ha .nascosto */
    .icon-btn.eye:not(.nascosto){
      background: rgba(255, 220, 120, .12);     /* giallino soft */
      border-color: rgba(255, 220, 120, .28);
    }
    
    /* hover quando ON */
    .icon-btn.eye:not(.nascosto):hover{
      background: rgba(255, 220, 120, .18);
      border-color: rgba(255, 220, 120, .36);
    }
    
    /* (opzionale) icona un filo più “gold” quando ON */
    .icon-btn.eye:not(.nascosto) .icon{
      fill: rgba(255, 220, 120, .92);
    }

    
    /* sessione SENZA stelle: macrocard leggermente opaca */
    .session-card.no-star{
      /*background:rgba(255,60,60,.10);*/
      /*border-color:rgba(255,60,60,.25);*/
    }
    
    /* ✅ sessione IN HOME: velo verde sullo sfondo */
    .session-card{
      position: relative;
    }
    
    /* overlay base (spento) */
    .session-card::before{
      content:"";
      position:absolute;
      inset:0;
      border-radius: inherit;
      pointer-events:none;
      z-index:0;
      opacity:0;
      transition: opacity .18s ease;
    }
    
    /* tutti i contenuti sopra l'overlay */
    .session-card > *{
      position: relative;
      z-index:1;
    }
    
    /* ✅ sessione IN HOME: velo verde sullo sfondo */
    .session-card.has-star::before{
      opacity: 1;
      background: rgba(34, 197, 94, .06); /* verde molto soft */
    }
    

    
    
    /* bottone HOME base (spento) */
        .icon-btn.star{
          width: auto;
          height: auto;
          padding: 6px 10px;
          border-radius: 999px;
        
          font-size: 11px;
          letter-spacing: .08em;
          font-weight: 500;          /* ✅ più leggero */
          text-transform: uppercase;
        
          opacity: .45;              /* ✅ spento molto meno presente */
          background: transparent;
        }
        
        /* hover: un filo più visibile */
        .icon-btn.star:hover{
          opacity: .65;
        }
        
        /* testo */
        .icon-btn.star .home-label{
          /*line-height: 1; */
        }
        
        /* acceso */
        .icon-btn.star.attiva{
          opacity: 1;
          background: rgba(255, 220, 120, .12);   /* ✅ verde soft */
          border-color: rgba(255, 220, 120, .12);
          box-shadow: 0 0 0 2px rgba(34, 197, 94, .12);
        }
        
        /* (opzionale) hover quando acceso */
        .icon-btn.star.attiva:hover{
          background: rgba(34, 197, 94, .24);
        }
    /* ===== */

    .toast{
      position:fixed;
      left:50%;
      bottom:18px;
      transform:translateX(-50%);
      background:rgba(0,0,0,.65);
      border:1px solid rgba(255,255,255,.12);
      color:var(--text);
      padding:10px 12px;
      border-radius:12px;
      font-size:12px;
      z-index:9999;
      opacity:0;
      pointer-events:none;
      transition: opacity .18s ease;
      max-width: 92vw;
      white-space:nowrap;
      overflow:hidden;
      text-overflow:ellipsis;
    }
    .toast.show{opacity:1;}
    
    .panel-head{
      display:flex;
      align-items:center;
      justify-content:space-between;
      gap:10px;
    }
    
    .filters-toggle{
      display:inline-flex;
      align-items:center;
      gap:10px;
    
      padding:10px 12px;
      border-radius:999px;
      border:1px solid var(--line);
      background:rgba(255,255,255,.03);
      color:var(--text);
      cursor:pointer;
      user-select:none;
    }
    
    .filters-toggle .chev{
      opacity:.8;
      transition: transform .18s ease, opacity .18s ease;
    }
    
    .filters-toggle:hover .chev{ opacity: 1; }
    
    .filters-toggle[aria-expanded="true"] .chev{
      transform: rotate(180deg);
    }
    
    /* sposta filtri di selezione a destra */
    #galleriaModalOverlay .panel-head{
      display: flex;
      align-items: center;
    }
    
    #galleriaModalOverlay #filtersToggle,
    #galleriaModalOverlay .filters-toggle{
      margin-left: auto !important;
    }

    /* contenitore richiudibile */
    .filters-body{
      overflow:hidden;
      max-height:0;
      opacity:0;
      transform: translateY(-6px);
      pointer-events:none;
    
      transition: max-height .26s ease, opacity .20s ease, transform .20s ease;
    }
    
    /* stato aperto */
    .filters-body.open{
      max-height: 2000px; /* abbastanza alto per contenere tutto */
      opacity:1;
      transform: translateY(0);
      pointer-events:auto;
    }
    
    /* opzionale: un po’ di respiro sopra i filtri quando si aprono */
    .filters-body .filters{ margin-top:12px; }
    
    @media (prefers-reduced-motion: reduce){
      .filters-body, .filters-toggle .chev{ transition:none; }
    }

    
    .segmented{
      display:flex;
      gap:6px;
      padding:4px;
      border-radius:999px;
      border:1px solid var(--line);
      background:rgba(255,255,255,.03);
      flex-wrap: nowrap;
    }
    
    .segmented input{
      position:absolute;
      opacity:0;
      pointer-events:none;
    }
    
    .segmented label{
      padding:8px 10px;
      border-radius:999px;
      font-size:12px;
      color:var(--muted);
      border:1px solid transparent;
      cursor:pointer;
      user-select:none;
      line-height:1;
    }
    
    .segmented label{
      flex: 1 1 0;              /* tutti uguali e comprimibili */
      text-align: center;
      white-space: nowrap;
      min-width: 0;             /* permette la compressione */
      overflow: hidden;
      /*text-overflow: ellipsis;  /* se proprio non ci sta… */
    }
    
    .segmented input:checked + label{
      color:var(--text);
      background:rgba(255,255,255,.07);
      border-color:rgba(255,255,255,.14);
    } text-overflow: ellipsis;  /* se proprio non ci sta… */
    }

@media (max-width: 768px) {
  /* Bottoni segmented più grandi su mobile */
  .segmented label {
    padding: 10px 14px;
    font-size: 13px;
  }
  
  /* Input field più alti */
  input, select {
    padding: 12px 14px;
    font-size: 14px;
  }
  
  /* Bottoni ghost più grandi */
  button.ghost {
    padding: 10px 14px;
    font-size: 13px;
  }
  
  /* Più spazio tra gli elementi nei segmented */
  .segmented {
    gap: 8px;
  }
}
    
    
    
    /* ====== GALLERIA MODALE: FORCE POPUP FULLSCREEN ====== */
#galleriaModalOverlay{
  position: fixed !important;
  inset: 0 !important;
  z-index: 99999 !important;
  display: none;                /* chiusa di default */
  align-items: center;
  justify-content: center;
  /*padding: 14px;*/
  background: rgba(0,0,0,.72);
}

#galleriaModalOverlay[aria-hidden="false"]{
  display: flex !important;     /* aperta */
}

#galleriaModalOverlay .ht-modal{
  width: min(900px, 92vw) !important;
  max-width: 900px !important;
}


/* optional: blocca click-through/scroll sotto */
html.ht-lock, body.ht-lock{
  overflow: hidden !important;
}

    
    
    
    /* =========================
   THEME SOLO PER MODALE GALLERIA
   ========================= */

/* wrapper interno della galleria (mettilo sul contenitore che hai dentro il modal) */
#galleriaModalOverlay{
  --bg:#0b0d10;
  --card:#121620;
  --card2:#0f1320;
  --text:#eaeef5;
  --muted:rgba(234,238,245,.75);
  --line:rgba(255,255,255,.10);
  --gold: rgba(255,220,120,.95);
  --r: 0px; /* o 16px se lo vuoi rounded */

  font-family: system-ui,-apple-system,Segoe UI,Roboto,Arial;
  color: var(--text);
}


/* forza colori leggibili solo dentro galleria */
#galleriaModalOverlay .wrap,
#galleriaModalOverlay .wrap *{
  color: var(--text);
}

#galleriaModalOverlay .panel,
#galleriaModalOverlay .session-card{
  background: var(--card);
  border-color: var(--line);
}

#galleriaModalOverlay input,
#galleriaModalOverlay select,
#galleriaModalOverlay button{
  background: var(--card2);
  color: var(--text);
  border-color: var(--line);
}

/* label/muted */
#galleriaModalOverlay label,
#galleriaModalOverlay .status,
#galleriaModalOverlay .hint,
#galleriaModalOverlay .session-sub,
#galleriaModalOverlay .chip,
#galleriaModalOverlay .badge{
  color: var(--muted);
}

    
    
    /* =========================
   FIX TESTI BOTTONI (HOME + MODALE)
   ========================= */

/* HOME: bottone "Galleria" nella login bar */
#open-galleria-btn{
  display:inline-flex;
  align-items:center;
  gap:8px;

  padding:8px 12px;
  border-radius: 0px;

  border:1px solid rgb(140 141 97 / 57%);
  background:rgba(255,255,255,.06);

  color: #888 !important;
  font-size:13px;
  font-weight:600;
  letter-spacing:.2px;

  cursor:pointer;
  user-select:none;
}

#open-galleria-btn .btn-ico{
  font-size:15px;
  line-height:1;
  display:inline-flex;
}

#open-galleria-btn .btn-txt{
  line-height:1;
  white-space:nowrap;
}


/* MODALE: bottone "Chiudi" */
#galleriaModalOverlay #galleriaModalClose{
  color: #eaeef5 !important;
}

/* Se usi classi comuni dei bottoni nel modale, rendile bianche lì dentro */
#galleriaModalOverlay .ht-btn-secondary,
#galleriaModalOverlay .ht-btn-primary{
  color: #eaeef5 !important;
}

/* Se nel sito hai una regola tipo button{color:#000}, questa la neutralizza */
#galleriaModalOverlay button{
  color: #eaeef5;
}



/* ===== GALLERIA MODAL: spacing + full width mobile ===== */

/* 1) meno spazio tra header ("Galleria" + "Chiudi") e sotto */
#galleriaModalBody{
  margin-top: 4px !important; /* prima era 10px inline */
}

/* opzionale: se vuoi ancora più “attaccato”, metti 0 */
 /* #galleriaModalBody{ margin-top: 0 !important; } */

/* 2) sotto 768px: popup a larghezza totale pagina */
@media (max-width: 768px){
  #galleriaModalOverlay .ht-modal{
    width: 100vw !important;     /* full width */
    max-width: none !important;  /* sblocca max-width inline */
    border-radius: 0 !important; /* più “app a schermo” */
  }

  /* (opzionale ma consigliato) un po' di respiro uniforme ai lati */
  #galleriaModalOverlay .ht-modal{
    margin: 0 !important;
  }
}


#galleriaModalClose{
  position: absolute;
  top: 12px;
  right: 12px;
  margin: 0 0 8px 0;
}


.session-card.skeleton { position:relative; overflow:hidden; }
.session-card.skeleton::after{
  content:""; position:absolute; inset:0;
  background: linear-gradient(90deg, transparent 0%, rgba(255,255,255,.06) 25%, rgba(255,255,255,.12) 50%, rgba(255,255,255,.06) 75%, transparent 100%);
  transform: translateX(-100%);
  animation: skel-shimmer 1.2s infinite;
  pointer-events:none;
}
@keyframes skel-shimmer{ 0%{transform:translateX(-100%)} 100%{transform:translateX(100%)} }

.skel{ background: rgba(255,255,255,.07); border:1px solid rgba(255,255,255,.06); border-radius:12px; }
.skel-line{ height:12px; margin:6px 0; }
.skel-line.sm{ width:45%; } .skel-line.md{ width:65%; } .skel-line.lg{ width:85%; }

.skel-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:10px; margin-top:12px; }
.skel-tile{ aspect-ratio:1/1; border-radius:14px; background: rgba(255,255,255,.06); border:1px solid rgba(255,255,255,.06); }

/* Riga input + bottone "+" nella modale etichette sessione */
#sessTagsOverlay .sess-tag-row{
  display:flex;
  gap:10px;
  align-items:center;
}

/* input occupa tutto lo spazio */
#sessTagsOverlay .sess-tag-row #sessTagsInput{
  flex:1 1 auto;
  min-width:0; /* evita overflow in flex */
}

/* bottone + */
#sessTagsOverlay .sess-tag-row #sessTagsAddBtn{
  width:44px;
  height:44px;
  flex:0 0 44px;

  display:flex;
  align-items:center;
  justify-content:center;

  border-radius:12px;
  border:1px solid rgba(255,255,255,.16);
  background: rgba(255,255,255,.06);
  color: rgba(234,238,245,.95);
 
  font-size:22px;
  font-weight:700;
  line-height:1;

  cursor:pointer;
  user-select:none;

  transition: background .15s ease, border-color .15s ease, transform .06s ease;
}

#sessTagsOverlay .sess-tag-row #sessTagsAddBtn:hover{
  background: rgba(255,255,255,.10);
  border-color: rgba(255,255,255,.22);
}

#sessTagsOverlay .sess-tag-row #sessTagsAddBtn:active{
  transform: translateY(1px);
}

#sessTagsOverlay .sess-tag-row #sessTagsAddBtn:focus-visible{
  outline:none;
  box-shadow: 0 0 0 3px rgba(255,220,120,.25);
  border-color: rgba(255,220,120,.55);
}

#sessTagsOverlay .sess-tag-row #sessTagsAddBtn:disabled{
  opacity:.5;
  cursor:not-allowed;
  transform:none;
}