/* ============================================================
   App social — stili condivisi (standard Chronos, rif. cer-tify)
   ============================================================ */

/* ---- Palette Maigret & Magritte — PUNTO UNICO DI SCELTA COLORI.
        Il menu (menu_left_side.html) e i bottoni bootstrap la
        consumano via variabili: per cambiare tema si tocca solo qui. ---- */
:root {
  --app-primary: #5b3da8;        /* viola del menu */
  --app-primary-dark: #432c80;
  --app-primary-hover: #4d3391;
  --app-accent: #e9b949;
  --app-on-primary: #ffffff;     /* testo/icone su fondo primario */
}

/* ---- Bottoni bootstrap: il blu di default diventa il primario di palette ---- */
.btn-primary {
  --bs-btn-bg: var(--app-primary);
  --bs-btn-border-color: var(--app-primary);
  --bs-btn-hover-bg: var(--app-primary-hover);
  --bs-btn-hover-border-color: var(--app-primary-dark);
  --bs-btn-active-bg: var(--app-primary-dark);
  --bs-btn-active-border-color: var(--app-primary-dark);
  --bs-btn-disabled-bg: var(--app-primary);
  --bs-btn-disabled-border-color: var(--app-primary);
}
.btn-outline-primary {
  --bs-btn-color: var(--app-primary);
  --bs-btn-border-color: var(--app-primary);
  --bs-btn-hover-bg: var(--app-primary);
  --bs-btn-hover-border-color: var(--app-primary);
  --bs-btn-active-bg: var(--app-primary-dark);
  --bs-btn-active-border-color: var(--app-primary-dark);
}
/* fallback per Bootstrap < 5.2 (senza variabili --bs-btn-*) */
.btn-primary { background-color: var(--app-primary); border-color: var(--app-primary); }
.btn-primary:hover, .btn-primary:focus { background-color: var(--app-primary-hover); border-color: var(--app-primary-dark); }
.btn-primary:active, .btn-primary.active { background-color: var(--app-primary-dark); border-color: var(--app-primary-dark); }
.btn-outline-primary { color: var(--app-primary); border-color: var(--app-primary); background-color: transparent; }
.btn-outline-primary:hover { background-color: var(--app-primary); border-color: var(--app-primary); color: var(--app-on-primary); }
.btn-check:checked + .btn-outline-primary { background-color: var(--app-primary-dark); border-color: var(--app-primary-dark); color: var(--app-on-primary); }

/* paginatore standard: allineato alla palette */
.paginator.page:hover,
.paginator.page-block:hover {
  background-color: var(--app-primary-hover);
  border-color: var(--app-primary-hover);
}
.paginator.page.active,
.paginator.page-block.active {
  background-color: var(--app-primary);
  border-color: var(--app-primary);
}

/* ---- Testate delle griglie: fondo scuro di palette, testo e icone bianchi ---- */
.grid-header {
  background-color: var(--app-primary);
  color: var(--app-on-primary);
  font-weight: 600;
  border-radius: 6px;
  padding-top: 0.45rem;
  padding-bottom: 0.45rem;
  margin-bottom: 0.35rem;
  margin-left: 0;
  margin-right: 0;
}
.grid-header i,
.grid-header .fas,
.grid-header .far {
  color: var(--app-on-primary);
}
.grid-header-sm {
  font-size: 0.85rem;
  padding-top: 0.3rem;
  padding-bottom: 0.3rem;
}

/* ---- Lookfor standard (record.js si aspetta #lookup_container_unit
        posizionato absolute: vedi core/js/base/record.js) ---- */
#lookup_container_unit {
  position: absolute;
  background-color: white;
  border-radius: 5px;
  box-shadow: 0 0 8px #b2b2b2;
  z-index: 1000;
  font-size: 14px;
}

#lookup_container_unit .card {
  border: none;
}

#lookup_container_unit .card-body {
  padding: 0.5rem 0.75rem;
  max-height: 400px;
  overflow-y: auto;
}

#lookup_container_unit .row {
  border-bottom: 1px solid #d1d5db;
  padding-top: 0.45rem;
  padding-bottom: 0.45rem;
  margin: 0;
}

#lookup_container_unit .header-grid.row {
  text-transform: uppercase;
  font-weight: 600;
  font-size: 12px;
  color: #6c757d;
  padding-top: 0;
  padding-bottom: 0.2rem;
}

#lookup_container_unit .genre-record.lookup-item {
  line-height: 120%;
}

.lookup-item.selectable:hover {
  background-color: #f6f3fc;
  cursor: pointer;
}

/* ============================================================
   Mobile — testata pagina, titoli, footer record (conv. Chronos)
   ============================================================ */

/* Titolo di pagina: riga intera, font fluido coerente col device
   (su desktop resta comunque limitato a 1.6rem) */
.header-page .view-title {
  width: 100%;
  text-align: center;
  margin-bottom: 0;
  font-size: clamp(1.1rem, 4vw, 1.6rem);
  line-height: 1.25;
  overflow-wrap: anywhere;
}

/* Footer del record: bottone Salva in fondo alla scheda */
.record-footer {
  background-color: transparent;
}

/* Ricerca griglie: lente (input-group-text) e input SEMPRE in linea,
   a qualsiasi larghezza. Bootstrap .input-group ha flex-wrap:wrap e in
   colonne strette (col-md-3) l'input puo' andare a capo sotto l'icona. */
.header-page .input-group {
  flex-wrap: nowrap;
}

@media (max-width: 767.98px) {
  /* Testata: le colonne (titolo, ricerca, bottoni) si impilano
     — l'ordine mobile è titolo / ricerca / bottoni (order-*) */
  .header-page > [class*="col-"] {
    margin-bottom: 0.5rem;
  }
  .header-page > [class*="col-"]:last-child {
    margin-bottom: 0;
  }

  /* Ricerca a tutta larghezza disponibile: e' il GRUPPO (lente + input)
     a occupare la riga; l'input resta in linea con l'icona.
     NB: Bootstrap .input-group ha flex-wrap:wrap -> senza nowrap
     un input a width:100% andrebbe a capo sotto la lente. */
  .header-page .input-group {
    width: 100%;
    flex-wrap: nowrap;
  }
  .header-page .filter-grid {
    flex: 1 1 auto;
    width: auto;
  }

  /* Bottone Salva a tutta larghezza nel footer del record */
  .record-footer .btn {
    display: block;
    width: 100%;
  }
}

/* ============================================================
   Lightbox foto docente (pagina Prenotazioni)
   ============================================================ */
.photo-zoom-overlay {
  position: fixed;
  inset: 0;
  z-index: 20000;
  display: none;
  align-items: center;
  justify-content: center;
  background: rgba(20, 12, 40, 0.82);
  cursor: zoom-out;
  padding: 24px;
}
.photo-zoom-overlay.show {
  display: flex;
}
.photo-zoom-fig {
  margin: 0;
  text-align: center;
  max-width: 90vw;
}
.photo-zoom-fig img {
  max-width: min(420px, 86vw);
  max-height: 80vh;
  width: auto;
  height: auto;
  border-radius: 12px;
  box-shadow: 0 8px 40px rgba(0, 0, 0, 0.5);
  object-fit: contain;
}
.photo-zoom-fig figcaption {
  margin-top: 12px;
  color: #fff;
  font-weight: 600;
  font-size: 1.05rem;
  text-shadow: 0 1px 4px rgba(0, 0, 0, 0.6);
}