/* 1) O wrapper do campo ocupa 100% */
.gesamb-collectwaste-chart .choices,
.gesamb-collectwaste-chart .choices__inner {
  width: 100%;
}

/* 2) O input clonado do Choices (aquele com width:1ch) passa a expandir */
.gesamb-collectwaste-chart .choices__input--cloned {
  width: 100% !important;   /* override ao inline */
  min-width: 0 !important;  /* ignora os 10ch */
}

/* 3) Melhor layout em múltipla seleção: chips + input em flex */
.gesamb-collectwaste-chart .choices__list--multiple {
  display: flex;
  flex-wrap: wrap;
  gap: .25rem;
}
.gesamb-collectwaste-chart .choices__list--multiple .choices__item {
  margin: 0; /* já temos gap */
}
.gesamb-collectwaste-chart .choices__list--multiple .choices__input {
  flex: 1 1 10rem;   /* ocupa o resto da linha */
  min-width: 0 !important;
  width: auto !important;
}

/* 4) “Seta” de dropdown (como um <select>) */
.gesamb-collectwaste-chart .choices {
  position: relative;
}
.gesamb-collectwaste-chart .choices__inner {
  padding-right: 2rem;  /* espaço para a seta */
}

/* seta default do Choices (select-one) pode não surgir no multi;
   criamos a nossa em qualquer modo */
.gesamb-collectwaste-chart .choices::after {
  content: "";
  position: absolute;
  top: 50%;
  right: .75rem;
  width: .45rem;
  height: .45rem;
  border: 2px solid currentColor;
  border-top: 0;
  border-left: 0;
  transform: translateY(-50%) rotate(45deg);
  pointer-events: none;
  opacity: .7;
}

/* quando a lista está aberta, roda a seta */
.gesamb-collectwaste-chart .choices.is-open::after {
  transform: translateY(-10%) rotate(225deg);
}

/* 5) Garante que o <select> de origem também ocupa 100% antes do Choices inicializar */
.gesamb-collectwaste-chart select.gesamb-concelho,
.gesamb-collectwaste-chart select.gesamb-freguesia {
  width: 100%;
}

.leaflet-attribution-flag {display: none !important;}
/* Basic, clean table styles */
.gesamb-containers { border: 1px solid #e5e7eb; padding: 12px; border-radius: 8px; background: #fff; }
.gesamb-containers.loading { opacity: 0.6; pointer-events: none; }

.gesamb-toolbar{
  display:grid;
  gap:.75rem;
  grid-template-columns: 1fr 1fr 1fr;
  grid-template-areas:
    "page search search"
    "waste concelho freguesia";
  align-items:center;
}
.gesamb-toolbar .tb-page{ grid-area:page; }
.gesamb-toolbar .tb-search{ grid-area:search; }
.gesamb-toolbar .tb-waste{ grid-area:waste; }
.gesamb-toolbar .tb-concelho{ grid-area:concelho; }
.gesamb-toolbar .tb-freguesia{ grid-area:freguesia; }

/* inputs a 100% */
.gesamb-toolbar select,
.gesamb-toolbar input[type="search"],
.gesamb-toolbar .choices { width:100%; }

/* opcional: responsivo */
@media (max-width: 720px){
  .gesamb-toolbar{
    grid-template-columns: 1fr;
    grid-template-areas:
      "page"
      "search"
      "waste"
      "concelho"
      "freguesia";
  }
}
.gesamb-toolbar input[type="search"] { padding: 6px 8px; min-width: 220px; }
.gesamb-toolbar select { padding: 6px 8px; }

.gesamb-table-wrap{
  position: relative;
  width: 100%;
  overflow-x: auto;           /* scroll horizontal só aqui */
  overflow-y: hidden;
  -webkit-overflow-scrolling: touch;
}

/* 2) Tabela ocupa 100% e distribui colunas de forma previsível */
.gesamb-table{
  width: 100%;
  border-collapse: collapse;
  table-layout: fixed;        /* permite ellipsis funcionar nas células */
}

/* 3) Células: evitar quebrar layout com textos gigantes */
.gesamb-table th,
.gesamb-table td{
  white-space: normal;
  word-break: break-word;
  overflow: visible;
  text-overflow: clip;
}

/* 4) Dar um mínimo às colunas mais compridas (Localidade/Morada) */
.gesamb-table th:nth-child(7),
.gesamb-table td:nth-child(7){ /* Localidade */
  min-width: 160px;
}
.gesamb-table th:nth-child(8),
.gesamb-table td:nth-child(8){ /* Morada */
  min-width: 260px;
}

/* 5) Números e datas podem ficar compactos */
.gesamb-table td.num,
.gesamb-table th[data-sort="dateCreated"],
.gesamb-table td:nth-child(1){ /* Bin ID */
  white-space: nowrap;
}

/* 6) Responsivo: em ecrãs pequenos, deixa quebrar linha em vez de “…” */
@media (max-width: 640px){
  .gesamb-table th,
  .gesamb-table td{
    white-space: normal;      /* pode quebrar */
    word-break: break-word;   /* quebra palavras muito longas */
    text-overflow: clip;
  }
}

.gesamb-pagination { display: flex; justify-content: center; align-items: center; gap: 10px; padding-top: 10px; }
.gesamb-pagination button { padding: 6px 10px; }
.gesamb-error { margin-top: 10px; color: #b91c1c; font-weight: 600; }

.spinner {
  border: 4px solid rgba(0,0,0,0.1);
  border-top:   4px solid #333;
  border-radius: 50%;
  width: 24px; height: 24px;
  animation: spin 1s linear infinite;
  margin: 0 auto 1em;
}
.hidden { display: none !important; }
@keyframes spin { to { transform: rotate(360deg); } }



@keyframes spin { to { transform: rotate(360deg); } }

.gesamb-pin{
  --stroke: 2px;
  position: relative;
  width: 20px; height: 20px;
  transform: rotate(-45deg);
  border-radius: 50% 50% 50% 0;
  background: #48c3b1;
}
.gesamb-pin::before{
  content:'';
  position:absolute;
  inset: calc(-1 * var(--stroke));
  background: #136f63;                /* cor da borda */
  border-radius: 50% 50% 50% 0;
  z-index: -1;                         /* atrás do pin */
}

.gesamb-pin::after{
  content:'';
  width: 10px;
  height: 10px;
  background: #fff;
  border-radius: 50%;
  position: absolute;
  top: 4px;
  left: 4px;
}

/* ---------- Filtros do mapa (responsivo, não extravasa o container) ---------- */
.gesamb-filters{
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 8px 12px;
  align-items: end;
  width: 100%;
  max-width: 100%;
  position: relative;
  z-index: 900;
}

.gesamb-filters,
.gesamb-filters > label {
  overflow: visible !important;
}

.gesamb-filters label{
  display: flex;
  flex-direction: column;
  gap: 4px;
  margin: 0;          /* evita empurrões no Elementor */
  min-width: 0;       /* permite encolher dentro do grid */
}

.gesamb-filters .choices {
  position: relative;
  z-index: 901;
}
.gesamb-filters .choices__list--dropdown,
.gesamb-filters .choices__list[aria-expanded] {
  position: absolute;   /* Choices já usa isto, aqui só garantimos */
  z-index: 902 !important;  /* força ficar acima dos panes do Leaflet */
}

/* ===== Choices.js – estilo compacto ===== */
.gesamb-filters .choices { font-size: 13px; }
.gesamb-filters .choices__inner{
  min-height: 36px; padding: 4px 6px; border-radius: 6px;
}
.gesamb-filters .choices__list--multiple .choices__item{
  margin: 2px 4px 2px 0; padding: 2px 6px;
  border-radius: 999px; line-height: 1.2;
  background: #f5f5f7; border: 1px solid #ddd;
}
.gesamb-filters .choices__button{
  margin-left: 6px; border-left: 0; opacity: .7;
}
.gesamb-filters .choices__list--dropdown .choices__item--selectable{
  padding: 6px 8px;
}
/* não queremos repetir os selecionados fora do select */
#gesamb-active-filters{ display:none !important; }

/* Se algum wrapper do tema tiver overflow escondido, liberta-o */
.gesamb-filters,
.gesamb-filters > label {
  overflow: visible !important;
}

.gesamb-filters select,
.gesamb-filters button{
  width: 100%;
  max-width: 100%;
  min-width: 0;       /* impede overflow horizontal */
  box-sizing: border-box;
}

.gesamb-filters button{
  /* no grid, o botão ocupa 1 coluna e não “salta” para fora */
  justify-self: start;
}

.gesamb-map {
  width: 100%;
  height: 600px;
  min-height: 400px;
  margin-top: 1em;
  z-index: 1;
  border: 1px solid #ccc;
  border-radius: 4px;}

/* Em ecrãs mais estreitos, deixa cair para colunas menores */
@media (max-width: 480px){
  .gesamb-filters{
    grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  }
}

#gesamb-map img.leaflet-tile { 
  max-width: none !important;
}

/* Em alguns temas, garantir que o container ocupa a altura do div */
#gesamb-map .leaflet-container { 
  height: 100% !important;
  z-index: 1; 
}

.gesamb-table {width: 100% !important;}

/* 1) Não deixar o wrapper crescer para fora do content */
#gesamb-table_wrapper{
  max-width: 100%;
  overflow-x: auto;              /* fallback: scroll horizontal se precisar */
  -webkit-overflow-scrolling: touch;
}

/* 2) Permitir que o texto quebre linha (DataTables mete nowrap por defeito) */
#gesamb-table.dataTable th,
#gesamb-table.dataTable td{
  white-space: normal !important;
  word-break: break-word;
}

/* 3) Ajudar o browser a distribuir largura pelas colunas */
#gesamb-table{
  width: 100% !important;
  table-layout: fixed;           /* substitui o inline "unset" */
}

/* 4) Empilhar os controlos length/filter em ecrãs estreitos */
#gesamb-table_wrapper .dataTables_length,
#gesamb-table_wrapper .dataTables_filter{
  float: none;
  display: block;
  margin: 8px 0;
}

.gesamb-active-filters{
  display:flex; flex-wrap:wrap; gap:6px; margin-top:4px;
}
.gesamb-chip{
  display:inline-flex; align-items:center; gap:6px;
  padding:4px 8px; border-radius:999px; background:#f2f2f2; border:1px solid #ddd;
  font-size:12px; line-height:1.2;
}
.gesamb-chip b{ font-weight:600; }
.gesamb-chip button{
  border:0; background:transparent; cursor:pointer; padding:0; font-size:14px;
}
.gesamb-filters select[multiple]{ 
  height: 34px; overflow: hidden;
}

/* ---- Choices: input “normal” e chips pequenos, brancos, com X à esquerda ---- */
.gesamb-filters .choices { font-size: 14px; }

.gesamb-filters .choices__inner{
  min-height: 36px;
  padding: 4px 8px;
  background: #fff;
  border: 1px solid #d9d9d9;
  border-radius: 6px;
  box-shadow: none;
}

.gesamb-filters .choices__list--multiple{
  display: flex; flex-wrap: wrap; gap: 6px;
  margin: 0;
}

.gesamb-filters .choices__list--multiple .choices__item{
  display: inline-flex; align-items: center; gap: 6px;
  margin: 0;
  padding: 2px 10px;
  font-size: 12px;
  line-height: 1.2;
  text-transform: uppercase;           /* como no exemplo */
  letter-spacing: .02em;
  background: #fff;                    /* branco, não “pill” cinzento */
  color: inherit;
  border: 1px solid #dcdcdc;
  border-radius: 14px;
}

/* X à ESQUERDA do texto */
.gesamb-filters .choices__list--multiple .choices__item .choices__button{
  order: -1;
  position: static;
  margin: 0;
  padding: 0 0 0 2px;
  border: 0;
  background: transparent;
  opacity: .7;
}
.gesamb-filters .choices__list--multiple .choices__item.is-highlighted{
  background: #f7f7f7; border-color: #cfcfcf;
}

/* placeholder discreto */
.gesamb-filters .choices__placeholder{ opacity: .6; }

/* input clonado (para pesquisa dentro do select) compacto */
.gesamb-filters .choices__input--cloned{
  margin: 2px 0; padding: 2px 4px; min-width: 36px;
}

/* dropdown sempre por cima do mapa (mantém a tua correção) */
.gesamb-filters .choices{ position: relative; z-index: 901; }
.gesamb-filters .choices__list--dropdown,
.gesamb-filters .choices__list[aria-expanded]{ z-index: 902 !important; }

/* não repetir os chips fora dos selects */
#gesamb-active-filters{ display: none !important; }

/* deixar os botões herdarem o tema (tamanho natural) */
.gesamb-filters button{ width: auto; }

/* toolbar em grid: 2 colunas na 1ª fila, 3 colunas na 2ª, 1 coluna datas na 3ª */
.gesamb-observations .grid-obs {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: .75rem;
}
.gesamb-observations .grid-obs .col-left { grid-column: 1 / 2; }
.gesamb-observations .grid-obs .col-right { grid-column: 2 / 3; }
.gesamb-observations .grid-obs .col-1 { grid-column: 1 / 2; }
.gesamb-observations .grid-obs .col-2 { grid-column: 2 / 3; }
.gesamb-observations .grid-obs .col-3 { grid-column: 1 / 3; }
.gesamb-observations .grid-obs .col-dates { grid-column: 1 / 3; }

@media (min-width: 900px){
  .gesamb-observations .grid-obs {
    grid-template-columns: 1fr 1fr 1fr;
  }
  .gesamb-observations .grid-obs .col-left  { grid-column: 1 / 2; }
  .gesamb-observations .grid-obs .col-right { grid-column: 2 / 4; }
  .gesamb-observations .grid-obs .col-1 { grid-column: 1 / 2; }
  .gesamb-observations .grid-obs .col-2 { grid-column: 2 / 3; }
  .gesamb-observations .grid-obs .col-3 { grid-column: 3 / 4; }
  .gesamb-observations .grid-obs .col-dates { grid-column: 1 / 4; }
}

.gesamb-observations .overflow-x { overflow-x: auto; }
.gesamb-observations .gesamb-table { min-width: 900px; width: 100%; border-collapse: collapse; }
.gesamb-observations .gesamb-table th, 
.gesamb-observations .gesamb-table td { padding: .5rem .75rem; white-space: nowrap; }
.gesamb-observations .gesamb-table .num { text-align: right; }

.gesamb-observations .date-controls { display:flex; gap:.5rem; align-items:center; flex-wrap:wrap; }
.gesamb-observations .date-controls input[type="text"] { max-width: 12rem; }

.gesamb-table th.sortable { cursor: pointer; position: relative; }
.gesamb-table th.sortable::after {
  content: ''; position: absolute; right: .5rem; top: 50%; transform: translateY(-50%);
  opacity: .4;
}
.gesamb-table th.sortable.sorted-asc::after  { content: '▲'; }
.gesamb-table th.sortable.sorted-desc::after { content: '▼'; }

/* altura estável para o gráfico */
.gesamb-chart-wrap{
  position: relative;
  height: 320px;              /* ajusta ao gosto: 260–420px costuma ser ótimo */
  /* opcional: min-height: 320px; se preferires que possa crescer */
}

/* o canvas ocupa 100% do wrapper, sem “auto-height” do conteúdo ao lado */
.gesamb-chart-wrap canvas.gesamb-bar-canvas{
  display: block;
  width: 100% !important;
  height: 100% !important;
}

/* spinner como overlay absoluto para não alterar o fluxo/altura */
.gesamb-chart-wrap .spinner{
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  pointer-events: none;    /* não apanha cliques */
  /* opcional: background: rgba(255,255,255,.3); */
}

.choices__list--multiple .choices__item {
    display: inline-block;
    vertical-align: middle;
    border-radius: 5px;
    padding: 2px;
    font-size: 12px;
    font-weight: 500;
    margin-right: 3.75px;
    margin-bottom: 3.75px;
    background-color: #48C3B1 !important;
    border: 1px solid #48C3B1 !important;
    color: #fff;
    word-break: break-all;
    box-sizing: border-box;
}

/* ===== Toolbar 3x3 ===== */
.gesamb-collectwaste-chart .grid-3x3{
  display:grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap:12px 16px;
  align-items:center;
  margin-bottom:14px;
}
.gesamb-collectwaste-chart .grid-3x3 select,
.gesamb-collectwaste-chart .grid-3x3 input[type="text"]{
  width:100%;
}

/* ===== Slim chips (Choices) — só dentro do chart ===== */
.gesamb-collectwaste-chart .choices{
  --chip-bg:#f6f7f8;
  --chip-bd:#e5e7eb;
  --chip-tx:#111827;
}
.gesamb-collectwaste-chart .choices__inner{
  min-height:36px;
  padding:4px 6px;
}
.gesamb-collectwaste-chart .choices__list--multiple .choices__item{
  margin:3px 4px 0 0;
  padding:2px 6px;
  border-radius:6px;
  background:var(--chip-bg);
  border:1px solid var(--chip-bd);
  color:var(--chip-tx);
  font-size:12px;
  line-height:1.2;
}
.gesamb-collectwaste-chart .choices__list--multiple .choices__item .choices__button{
  margin-left:6px;
  border-left:0;
  opacity:.7;
}
.gesamb-collectwaste-chart .choices__input{
  padding:3px 2px;
  font-size:13px;
}
.gesamb-collectwaste-chart .choices__list--dropdown{
  z-index:10000; /* sobrepor flatpickr */
}

.gesamb-date-start, .gesamb-date-end {max-width: 150px;}

.gesamb-color-wrap{display:flex;align-items:center;gap:.5rem;min-width:180px}
.gesamb-swatch{width:18px;height:18px;border-radius:50%;border:1px solid #ccd0d4;display:inline-block}

/* ——— utilitários (opcionais) ——— */
.loader--inline { width: 22px; }
.loader--md     { width: 36px; }
.loader--lg     { width: 64px; }

/* overlay básico para “bloquear” uma área enquanto carrega */
.gesamb-spinner-overlay {
  position: absolute; inset: 0;
  display: grid; place-items: center;
  background: rgba(83, 41, 41, 0.65);
  z-index: 5;        /* acima do conteúdo local */
  pointer-events: all;
}

/* se o contêiner não tiver position, forçamos */
.gesamb-pos-relative { position: relative; }

/* acessibilidade: respeitar utilizadores que preferem menos movimento */
@media (prefers-reduced-motion: reduce) {
  .loader, .loader::before, .loader::after {
    animation: none !important;
  }
}

/* HTML: <div class="loader"></div> */
.loader {
  width: 50px;
  aspect-ratio: 1;
  display: grid;
}
.loader::before,
.loader::after {    
  content:"";
  grid-area: 1/1;
  --c:no-repeat radial-gradient(farthest-side,#25b09b 92%,#0000);
  background: 
    var(--c) 50%  0, 
    var(--c) 50%  100%, 
    var(--c) 100% 50%, 
    var(--c) 0    50%;
  background-size: 12px 12px;
  animation: l12 1s infinite;
}
.loader::before {
  margin: 4px;
  filter: hue-rotate(45deg);
  background-size: 8px 8px;
  animation-timing-function: linear
}

@keyframes l12 { 
  100%{transform: rotate(.5turn)}
}

.gesamb-use-geolocation { display: none !important; }