/* Filtro per materia nella ricerca (#search-modal).
   Solo variabili di app.css (--surface-2, --line, --blue, ...): segue da solo il tema
   chiaro e quello scuro. */

/* il campo di ricerca lascia spazio alla riga dei filtri */
.mnt-sr-con-filtri .sr-input{margin-bottom:8px;}
/* .md-card scorre (overflow-y:auto) e taglierebbe il pannello con pochi risultati; qui
   scorre gia' .sr-results, quindi la scheda puo' lasciarlo uscire. */
.mnt-sr-con-filtri .sr-card{overflow:visible;}

.mnt-sr-filtri{
  position:relative;
  display:flex;align-items:center;gap:4px;
  margin-bottom:10px;min-height:30px;
}
.mnt-sr-filtri[hidden]{display:none;}

/* pulsante "Materia" */
.mnt-sr-materia{
  display:inline-flex;align-items:center;gap:6px;
  max-width:min(240px,62vw);height:30px;padding:0 10px 0 12px;
  font:inherit;font-size:12.5px;font-weight:700;color:var(--muted);
  background:transparent;border:1px solid var(--line);border-radius:999px;
  cursor:pointer;transition:color .12s ease,border-color .12s ease,background .12s ease;
}
.mnt-sr-materia:hover{color:var(--ink);background:var(--surface-2);}
.mnt-sr-materia[aria-expanded="true"]{color:var(--ink);border-color:var(--blue);}
.mnt-sr-materia.is-attivo{
  color:var(--blue-text,var(--blue));border-color:var(--blue);
  background:color-mix(in srgb,var(--blue) 12%,transparent);
}
.mnt-sr-materia__testo{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.mnt-sr-materia__freccia{
  flex:0 0 auto;width:6px;height:6px;margin-top:-3px;
  border-right:1.6px solid currentColor;border-bottom:1.6px solid currentColor;
  transform:rotate(45deg);transition:transform .15s ease;
}
.mnt-sr-materia[aria-expanded="true"] .mnt-sr-materia__freccia{transform:rotate(-135deg);margin-top:3px;}

/* "×" accanto al pulsante, solo con un filtro acceso */
.mnt-sr-azzera{
  width:26px;height:26px;padding:0;border:0;border-radius:50%;
  font:inherit;font-size:16px;line-height:1;color:var(--muted);
  background:transparent;cursor:pointer;
}
.mnt-sr-azzera:hover{color:var(--ink);background:var(--surface-2);}
.mnt-sr-azzera[hidden]{display:none;}

.mnt-sr-conta{margin-left:auto;font-size:11.5px;color:var(--muted);white-space:nowrap;}

/* pannello delle materie */
.mnt-sr-pannello{
  position:absolute;top:calc(100% + 6px);left:0;z-index:5;
  width:min(280px,100%);padding:8px;
  background:var(--surface);border:1px solid var(--line);border-radius:12px;
  box-shadow:0 14px 34px rgba(15,30,55,.18);
}
.mnt-sr-pannello[hidden]{display:none;}
.mnt-sr-pannello__cerca{
  width:100%;height:34px;padding:0 11px;margin-bottom:6px;
  font:inherit;font-size:13px;color:var(--ink);
  background:var(--surface-2);border:1px solid var(--line);border-radius:9px;outline:none;
}
.mnt-sr-pannello__cerca:focus{border-color:var(--blue);}
.mnt-sr-pannello__lista{display:flex;flex-direction:column;max-height:216px;overflow-y:auto;}

.mnt-sr-opzione{
  display:flex;align-items:center;gap:10px;
  min-height:36px;padding:0 8px;border-radius:8px;
  font-size:13px;color:var(--ink);cursor:pointer;
}
.mnt-sr-opzione:hover{background:var(--surface-2);}
.mnt-sr-opzione input{
  flex:0 0 auto;width:16px;height:16px;margin:0;
  accent-color:var(--blue);cursor:pointer;
}
.mnt-sr-opzione__nome{flex:1 1 auto;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.mnt-sr-opzione__n{font-size:11.5px;color:var(--muted);font-variant-numeric:tabular-nums;}

.mnt-sr-pannello__vuoto{margin:0;padding:8px;font-size:12.5px;color:var(--muted);}
.mnt-sr-pannello__vuoto[hidden]{display:none;}

.mnt-sr-pannello__piede{display:flex;justify-content:flex-end;padding:6px 2px 0;margin-top:4px;border-top:1px solid var(--line);}
.mnt-sr-pannello__piede[hidden]{display:none;}
.mnt-sr-pannello__piede button{
  padding:4px 8px;border:0;border-radius:6px;background:transparent;cursor:pointer;
  font:inherit;font-size:12px;font-weight:700;color:var(--blue-text,var(--blue));
}
.mnt-sr-pannello__piede button:hover{background:var(--surface-2);}

/* ---- la lente nella barra in alto ----
   In app.css la lente e' il carattere "⌕" a 17px: quasi tutti i font lo disegnano piccolo
   (circa 10px, contro i 17px della luna del tema accanto e i 32px dell'avatar). Qui il carattere
   resta nel markup ma non si vede, e al suo posto c'e' una lente disegnata, della stessa
   grandezza del simbolo del tema; il colore resta quello del pulsante (currentColor), anche
   al passaggio del mouse. #mnt-theme-btn ha la stessa classe ed e' escluso.
   Solo sopra i 760px: sotto, app.css nasconde la lente (display:none) e qui non si tocca. */
@media (min-width: 761px) {
  .nav-search:not(#mnt-theme-btn) {
    display: inline-flex; align-items: center; justify-content: center;
    width: 26px; height: 26px; padding: 4px;
    font-size: 0; line-height: 0;
  }
  .nav-search:not(#mnt-theme-btn)::before {
    content: ""; flex: 0 0 18px; width: 18px; height: 18px;
    background: currentColor;
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.4' stroke-linecap='round'%3E%3Ccircle cx='10.5' cy='10.5' r='6.5'/%3E%3Cpath d='m15.5 15.5 5 5'/%3E%3C/svg%3E") center / contain no-repeat;
            mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.4' stroke-linecap='round'%3E%3Ccircle cx='10.5' cy='10.5' r='6.5'/%3E%3Cpath d='m15.5 15.5 5 5'/%3E%3C/svg%3E") center / contain no-repeat;
  }
}