/* Stili di templates/_search/index.html */
#groupers-container .btn {
    transition: all 0.2s ease;
}

#groupers-container .btn:hover {
    transform: translateY(-1px);
}

mark {
  /*background-color: #ffeb3b;*/
  /* padding: 0.1em 0.2em; */
  padding: 0 !important;
  border-radius: 0.2em;
}

.table.cuneiform {
  font-family: "GentiumPlus", serif;
  font-size: 1rem;
}

.search_tablets {
  font-family: "GentiumPlus", serif;
  font-size: var(--fs-md);
  white-space: nowrap;
  text-decoration: none;
  /*color: #1a1a1a;*/
  padding: 0 0.15em;
}

.search_tablets:hover {
  text-decoration: underline;
}

.search_tablets small {
  font-size: 0.9em;
  letter-spacing: 0.02em;
  /*letter-spacing: 0.02em;*/
}

/*.qry-result::after {*/
.separator {
  /*content: ";";*/
  color: var(--bs-secondary-color);
  font-weight: normal;
  margin-right: 0.35em;
  margin-left: -.4em;
}

.search_lemma {
    font-style: italic;
}

.search-table {
    border-collapse: collapse;
    font-family: "GentiumPlus", serif;
    font-size: var(--fs-md);
}

.search-table th {
    border-bottom: 1px solid var(--bs-gray-800);
    font-weight: 600;
    padding: 4px 6px;
}

.search-table td {
    border-bottom: 1px solid var(--bs-border-color);
    padding: 3px 6px;
    vertical-align: top;
}

.search-table caption {
    caption-side: top;
    text-align: left;
    margin-bottom: 6px;
}

.references a {
    text-decoration: none;
}

.references a:hover {
    text-decoration: underline;
}

@media print {

    .search-table {
        font-size: 10pt;
    }

    .search-table th,
    .search-table td {
        border-color: #000;
    }

    .separator {
        color: #000;
    }

}

/* help */
.cheat-sheet {
    font-size: var(--fs-sm);
}

.cheat-sheet .map {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.35rem 0;
    white-space: nowrap;  /* 🔥 Impedisce la rottura delle righe */
}

/* Simbolo unicode */
.cheat-sheet .glyph {
    /*font-size: 1.2em;*/
    font-size: var(--fs-md);
    font-weight: 600;
    color: var(--bs-success-text-emphasis);
    min-width: 2em;  /* Allineamento consistente */
    text-align: center;
}

/* Nome del segno */
.cheat-sheet .name {
    color: var(--bs-secondary-color);
    font-size: 0.9em;
    min-width: 4.5em;  /* Allineamento frecce */
}

/* Freccia */
.cheat-sheet .arrow {
    /*color: var(--bs-secondary-color);*/
    /*color: rgb(163, 207, 187);*/
    color: rgb(94 149 124);
    font-weight: 700;
    padding: 0 0.25rem;
}

/* Input tastiera */
.cheat-sheet kbd {
    background: var(--bs-tertiary-bg);
    border: 1px solid var(--bs-border-color);
    box-shadow: none;
    padding: 2px 6px;
    font-size: 0.9em;
    color: var(--bs-gray-700);
}

/* Note opzionali */
.cheat-sheet .note {
    color: var(--bs-secondary-color);
    font-size: 0.85em;
    font-style: italic;
}

/* Separatore "or" */
.cheat-sheet .or {
    color: var(--bs-secondary-color);
    font-size: 0.8em;
    padding: 0 0.2rem;
}

/* Responsive: su mobile le colonne si impilano ma le righe restano intere */
@media (max-width: 768px) {
    .cheat-sheet .map {
        font-size: var(--fs-md);
    }

    .cheat-sheet .border-start {
        border-left: none !important;
        border-top: 1px solid var(--bs-border-color);
        margin-top: 0.5rem;
        padding-top: 0.5rem;
    }
}

/* Popover personalizzato per le opzioni di ricerca */
.search-options-popover {
    max-width: 320px;
    font-size: var(--fs-sm);
}

.search-options-popover .popover-body {
    padding: 1rem;
}

.search-options-panel .form-check {
    padding-left: 2.5em;
}

.search-options-panel .form-check-input {
    margin-left: -2.5em;
    width: 2em;
    height: 1.1em;
    cursor: pointer;
}

.search-options-panel .form-check-label {
    cursor: pointer;
    font-size: var(--fs-md);
}

.search-options-panel .form-text {
    line-height: 1.3;
    margin-top: 0.15rem;
}

/* Evidenzia il pulsante quando ci sono opzioni attive */
.btn-outline-secondary:has(+ .popover.show) {
    background-color: var(--bs-secondary-bg);
    border-color: var(--bs-secondary-color);
}

/* Animazione badge contatore */
#active-options-count {
    transition: all 0.2s ease;
}

#active-options-count.show {
    display: inline-block !important;
    animation: pulse 0.3s ease;
}

@keyframes pulse {
    0% { transform: scale(1); }
    50% { transform: scale(1.2); }
    100% { transform: scale(1); }
}

/* FILTRI */
#active-filters-count {
    transition: all 0.2s ease;
    min-width: 1.5em;
    padding: 0.25em 0.4em;
}

#active-filters-count:not([style*="display: none"]) {
    animation: popIn 0.3s ease;
}

@keyframes popIn {
    0% { transform: translate(-50%, -50%) scale(0); }
    50% { transform: translate(-50%, -50%) scale(1.2); }
    100% { transform: translate(-50%, -50%) scale(1); }
}

/* Colonna della barra di ricerca (barra e aiuto) */
.search-col {
    max-width: 900px;
    margin-inline: auto;
}

/* Filtri: ogni filtro è una mini barra (input-group) con Select2 v3 come campo,
   intonata alla barra principale; il tema bootstrap3 di flask_select2 va sovrascritto */
.filter-group .input-group-text {
    width: 9rem;
    font-size: var(--fs-sm);
    color: var(--bs-secondary-color);
    background: var(--bs-tertiary-bg);
}
.filter-group .select2-container {
    flex: 1 1 auto;
    width: 1% !important;  /* Select2 v3 scrive la larghezza inline */
}
.filter-group .select2-container-multi .select2-choices {
    min-height: calc(1.5em + .75rem + 2 * var(--bs-border-width));
    border: var(--bs-border-width) solid var(--bs-border-color);
    border-radius: 0 var(--bs-border-radius) var(--bs-border-radius) 0;
    background: var(--bs-body-bg);
    box-shadow: none;
    transition: border-color .15s ease-in-out, box-shadow .15s ease-in-out;
}
.filter-group .select2-container-multi.select2-container-active .select2-choices {
    border-color: var(--bs-primary-border-subtle);
    box-shadow: 0 0 0 .25rem rgba(var(--bs-primary-rgb), .25);
}
.filter-group .select2-choices .select2-search-field input {
    height: calc(1.5em + .75rem);
    padding: .375rem .75rem;
    font-family: inherit;
    font-size: var(--fs-sm);
    color: var(--bs-body-color);
}
.filter-group .select2-choices .select2-search-choice {
    margin: 6px 0 0 6px;
    background: var(--bs-primary-bg-subtle);
    border: var(--bs-border-width) solid var(--bs-primary-border-subtle);
    border-radius: var(--bs-border-radius-sm);
    box-shadow: none;
    color: var(--bs-primary-text-emphasis);
    font-size: var(--fs-sm);
    max-width: calc(100% - 12px);
}
/* etichette lunghe: ellipsis, il nome intero sta nel title (initFilterSelects) */
.filter-group .select2-search-choice > div {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Dropdown dei filtri (in <body>, dropdownCssClass) */
.select2-drop.filter-drop {
    border-color: var(--bs-primary-border-subtle);
    background: var(--bs-body-bg);
    color: var(--bs-body-color);
    font-size: var(--fs-sm);
    box-shadow: var(--bs-box-shadow-sm);
}
.filter-drop .select2-results .select2-highlighted {
    background: var(--bs-primary-bg-subtle);
    color: var(--bs-primary-text-emphasis);
}

/* htmx-request: la richiesta /update-filters è in corso */
#filter-container.htmx-request {
    opacity: .6;
    transition: opacity .15s;
}