/**
 * css/mobile.css — Stili ESCLUSIVAMENTE mobile (max-width: 768px)
 *
 * Questo file viene caricato con media="(max-width: 768px)".
 * NON deve contenere alcun @media min-width.
 * NON deve contenere stili per componenti desktop (.hc-d, .stat-card).
 *
 * Componenti mobile usano il prefisso convenzione:
 *   hc-m__   = hero card mobile
 *   adm-     = admin dashboard mobile (donut, mini cards)
 */

/* ════════════════════════════════════════════════
   HERO CARD — MOBILE
   ════════════════════════════════════════════════ */

.hc-m {
  background: #fff;
  border-radius: 16px;
  padding: 18px 16px 14px;
  margin-bottom: var(--space-4);
  box-shadow: 0 1px 4px rgba(15,32,68,0.06);
}

.hc-m__top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.hc-m__info { flex: 1; min-width: 0; }

.hc-m__greeting {
  color: #9aa4b6;
  font-weight: 700;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}
.hc-m__name {
  color: #0f2044;
  font-size: 22px;
  font-weight: 900;
  line-height: 1.15;
  word-break: break-word;
}
.hc-m__sub {
  color: #7a869a;
  font-size: 11px;
  margin-top: 2px;
}

.hc-m__avatar {
  width: 46px;
  height: 46px;
  border-radius: 50%;
  background: linear-gradient(135deg, #1e3a6e 0%, #2a5298 100%);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 16px;
  font-weight: 900;
  color: #fff;
  border: 2.5px solid rgba(30,58,110,0.2);
  cursor: pointer;
  flex-shrink: 0;
}

.hc-m__stats {
  display: flex;
  gap: 6px;
  margin-top: 14px;
  padding-top: 12px;
  border-top: 1px solid #eef0f6;
}
.hc-m__stat {
  flex: 1;
  text-align: center;
  padding: 8px 4px;
  border-radius: 10px;
  transition: background 0.2s;
}
.hc-m__stat:active { background: #f4f6fb; }
.hc-m__stat-val {
  font-size: 20px;
  font-weight: 900;
  color: #1e3a6e;
  line-height: 1;
}
.hc-m__stat:first-child .hc-m__stat-val { color: #c9a84c; }
.hc-m__stat-label {
  font-size: 9px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: #9aa4b6;
  margin-top: 4px;
}

/* ════════════════════════════════════════════════
   STAT GRID — MOBILE (donut + mini cards)
   ════════════════════════════════════════════════ */

#admin-dash-mobile { display: block; }

.adm-card {
  background: #fff;
  border-radius: 16px;
  padding: 16px;
  box-shadow: 0 1px 4px rgba(15,32,68,0.06);
  margin-bottom: 12px;
}
.adm-card__eb {
  font-size: 11px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: #9aa4b6;
  margin-bottom: 14px;
}
.adm-students-top {
  display: flex;
  justify-content: space-around;
  align-items: center;
  gap: 8px;
}

.adm-donut {
  width: 86px;
  height: 86px;
  flex-shrink: 0;
  position: relative;
}
.adm-donut__ctr {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}
.adm-donut__n {
  font-size: 23px;
  font-weight: 900;
  color: #1e3a6e;
  line-height: 1;
}
.adm-donut__l {
  font-size: 8px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: #9aa4b6;
  text-align: center;
  margin-top: 2px;
  line-height: 1.2;
}

.adm-mini {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.adm-mc {
  display: flex;
  align-items: center;
  gap: 14px;
  background: #fff;
  border-radius: 14px;
  padding: 14px 16px;
  box-shadow: 0 1px 4px rgba(15,32,68,0.06);
  cursor: pointer;
  transition: background 0.15s;
}
.adm-mc:active { background: #f4f6fb; }
.adm-mc__n {
  font-size: 26px;
  font-weight: 900;
  line-height: 1;
  min-width: 40px;
}
.adm-mc__l {
  font-size: 12px;
  font-weight: 600;
  color: #6b7a8f;
  line-height: 1.3;
}

/* ════════════════════════════════════════════════
   NASCONDERE COMPONENTI DESKTOP SU MOBILE
   ════════════════════════════════════════════════ */
.hc-d { display: none !important; }
#stats-grid { display: none !important; }

/* ════════════════════════════════════════════════
   QUICK ACTIONS — MOBILE (2×2 tile grid)
   ════════════════════════════════════════════════ */
.qa-grid { display: none !important; }
#qa-header { display: none !important; }
#dash-search-wrap-desktop { display: none !important; }

.qa-m-section-title {
  font-size: 13px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--color-navy);
  margin-bottom: 10px;
}
.qa-m-tiles {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
}
.qa-m-tile {
  background: #fff;
  border-radius: 12px;
  padding: 16px 14px;
  box-shadow: 0 1px 4px rgba(15,32,68,0.05);
  display: flex;
  flex-direction: column;
  gap: 8px;
  border-left: 3px solid var(--tile-accent, var(--color-navy));
  transition: background 0.15s;
}
.qa-m-tile:active { background: #f4f6fb; }
.qa-m-tile-icon {
  width: 32px;
  height: 32px;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 15px;
}
.qa-m-tile-label {
  font-size: 13px;
  font-weight: 700;
  color: var(--color-text);
}

/* ════════════════════════════════════════════════
   SECTION CARDS — MOBILE (lista compatta)
   ════════════════════════════════════════════════ */
.sc-m-list {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.sc-m-section-title {
  font-size: 13px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--color-navy);
  margin-bottom: 10px;
}
.sc-m-item {
  display: flex;
  align-items: center;
  gap: 12px;
  background: #fff;
  border-radius: 14px;
  padding: 14px 14px;
  box-shadow: 0 1px 4px rgba(15,32,68,0.06);
  transition: background 0.15s;
}
.sc-m-item:active { background: #f4f6fb; }
.sc-m-icon {
  width: 36px;
  height: 36px;
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 16px;
  flex-shrink: 0;
}
.sc-m-text { flex: 1; min-width: 0; }
.sc-m-label {
  font-size: 14px;
  font-weight: 700;
  color: var(--color-text);
}
.sc-m-desc {
  font-size: 11px;
  color: var(--color-text-muted);
  margin-top: 2px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.sc-m-arrow {
  color: #c4c9d6;
  font-size: 14px;
  flex-shrink: 0;
}

/* ════════════════════════════════════════════════
   REGOLE MIGRATE DA JS INLINE @media
   Ogni blocco indica il file JS di provenienza.
   ════════════════════════════════════════════════ */

/* ── js/admin/application.js ── */
.app-field-grid { grid-template-columns: 1fr !important; }
.ap-summary-grid { grid-template-columns: 1fr 1fr !important; }

/* ── js/admin/docenti.js ── */
/* (usa max-width:900px, qui usiamo 768px come breakpoint unico) */
.doc-detail-masonry { column-count: 1 !important; }

/* Faculty detail overlay — mobile */
#doc-detail-overlay {
  padding: 0 !important;
  align-items: flex-end !important;
}
.doc-detail-card {
  max-width: 100vw !important;
  width: 100% !important;
  max-height: 96vh !important;
  border-radius: 18px 18px 0 0 !important;
  overflow-x: hidden !important;
}
/* Header compatto */
.doc-detail-card > div:first-child {
  padding: 18px 16px !important;
}
.doc-detail-card > div:first-child > div:first-of-type {
  flex-direction: column !important;
  align-items: center !important;
  text-align: center !important;
  gap: 12px !important;
}
/* Avatar più piccolo */
#doc-avatar-wrap {
  width: 68px !important;
  height: 68px !important;
}
#doc-avatar-wrap > div:first-child {
  width: 68px !important;
  height: 68px !important;
  font-size: 22px !important;
}
/* Nasconde la matita sull'avatar */
#doc-avatar-wrap > div:last-child:not(:first-child) {
  display: none !important;
}
#stu-avatar-wrap > div:last-child:not(:first-child) {
  display: none !important;
}
/* Nome più piccolo */
.doc-detail-card > div:first-child > div:first-of-type > div:nth-child(2) > div:first-child {
  font-size: 20px !important;
  justify-content: center !important;
  text-align: center !important;
  word-break: normal !important;
  overflow-wrap: anywhere !important;
}
/* Email */
.doc-detail-card > div:first-child > div:first-of-type > div:nth-child(2) > div:nth-child(2) {
  font-size: 12px !important;
  text-align: center !important;
}
/* Badge row */
.doc-detail-card > div:first-child > div:first-of-type > div:nth-child(2) > div:nth-child(3) {
  justify-content: center !important;
}
/* Toggle button */
#doc-toggle-attivo {
  top: 10px !important;
  right: 50px !important;
  font-size: 10px !important;
  height: 30px !important;
  padding: 0 10px !important;
}
/* Body */
.doc-detail-card > div:nth-child(2) {
  padding: 16px 14px !important;
}
/* Session cards inside detail */
.doc-detail-masonry .fac-sess-card,
.doc-detail-masonry [style*="grid-template-columns"] {
  grid-template-columns: 1fr !important;
}

/* Faculty card mobile — stile coerente con student cards */
.doc-card {
  background: #fff !important;
  border-radius: 14px !important;
  padding: 14px !important;
  box-shadow: 0 1px 4px rgba(15,32,68,0.05) !important;
  cursor: pointer;
  border: none !important;
  display: block !important;
  margin-bottom: 8px;
}
.doc-card:active { background: #f4f6fb !important; }

.doc-mc__top {
  display: flex;
  align-items: center;
  gap: 10px;
}
.doc-mc__avatar {
  width: 38px; height: 38px; border-radius: 50%;
  background: linear-gradient(135deg, #c9a84c, #b8923a);
  display: flex; align-items: center; justify-content: center;
  font-size: 13px; font-weight: 800; color: #0f2044;
  flex-shrink: 0; overflow: hidden;
}
.doc-mc__avatar img { width: 100%; height: 100%; object-fit: cover; }
.doc-mc__info { flex: 1; min-width: 0; }
.doc-mc__name {
  font-size: 14px; font-weight: 700; color: var(--color-text, #1a2438);
  word-break: normal; overflow-wrap: anywhere; line-height: 1.25;
}
.doc-mc__inst {
  font-size: 11px; color: var(--color-text-muted, #7a869a); margin-top: 1px;
  word-break: normal; overflow-wrap: anywhere; line-height: 1.3;
  display: flex; align-items: flex-start; gap: 4px;
}
.doc-mc__inst i { font-size: 10px; color: #c9a84c; flex-shrink: 0; margin-top: 2px; }
.doc-mc__badge { flex-shrink: 0; }

.doc-mc__bottom {
  display: flex; align-items: center; gap: 8px;
  margin-top: 8px; padding-top: 8px;
  border-top: 1px solid #f0f2f7;
  font-size: 11px; color: var(--color-text-muted, #7a869a);
}
.doc-mc__country {
  display: flex; align-items: center; gap: 3px;
}
.doc-mc__country i { font-size: 11px; }
.doc-mc__dots { margin-left: auto; }

/* ── js/admin/esporta.js ── */
#esp-table-wrapper { max-height: 58vh !important; }

/* ── js/admin/programma_griglia.js ── */
/* (usa max-width:760px per experts-list) */
.pg-experts-list { grid-template-columns: 1fr; }
.pg-field-grid2 { grid-template-columns: 1fr !important; }
.pg-weeks-grid { display: none !important; }

/* Programme Grid — Mobile tabs + session cards */
.pg-m-tabs {
  display: flex; gap: 4px;
  padding: 0 0 12px;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}
.pg-m-tabs::-webkit-scrollbar { display: none; }
.pg-m-tab {
  flex-shrink: 0;
  padding: 9px 20px; border-radius: 10px;
  font-size: 13px; font-weight: 700;
  background: #fff; color: var(--color-text-muted, #7a869a);
  border: 1.5px solid var(--color-border, #e2e6ee);
  cursor: pointer; font-family: inherit;
  transition: all 0.15s;
}
.pg-m-tab--active {
  background: var(--color-navy, #1e3a6e); color: #fff;
  border-color: var(--color-navy, #1e3a6e);
}

.pg-m-week-head {
  background: #fff;
  border-radius: 14px;
  padding: 16px;
  margin-bottom: 10px;
  box-shadow: 0 1px 4px rgba(15,32,68,0.05);
}

.pg-m-day-header {
  display: flex; align-items: center; gap: 8px;
  padding: 8px 0 4px;
  margin-top: 6px;
}
.pg-m-day-name {
  font-size: 10px; font-weight: 800;
  text-transform: uppercase; letter-spacing: 0.1em;
  color: #374151;
}
.pg-m-day-num {
  font-size: 16px; font-weight: 900;
  color: #0f2044; line-height: 1;
}

.pg-m-session {
  background: #fff;
  border-radius: 12px;
  padding: 12px;
  margin-bottom: 6px;
  box-shadow: 0 1px 3px rgba(15,32,68,0.04);
  display: flex;
  align-items: flex-start;
  gap: 10px;
  cursor: pointer;
  transition: background 0.15s;
}
.pg-m-session:active { background: #f4f6fb; }
.pg-m-session__time {
  font-size: 13px; font-weight: 800;
  color: #374151; font-variant-numeric: tabular-nums;
  min-width: 42px; flex-shrink: 0;
  padding-top: 2px;
}
.pg-m-session__body { flex: 1; min-width: 0; }
.pg-m-session__title {
  font-size: 13px; font-weight: 700; color: #111827;
  line-height: 1.3;
  word-break: normal; overflow-wrap: anywhere;
}
.pg-m-session__teacher {
  font-size: 11px; color: #6b7280;
  margin-top: 2px;
}
.pg-m-session__badge {
  flex-shrink: 0;
  font-size: 8px; font-weight: 800;
  text-transform: uppercase; letter-spacing: 0.05em;
  padding: 3px 7px; border-radius: 5px;
  white-space: nowrap;
  margin-top: 2px;
}

/* Programme Grid — Modal mobile fixes */
.pg-modal-overlay { padding: 8px !important; }
.pg-modal-card {
  max-width: 100vw !important;
  width: 100% !important;
  border-radius: 16px 16px 0 0 !important;
  max-height: 94vh !important;
  overflow-x: hidden !important;
}
.pg-modal-head { padding: 18px 16px 14px !important; border-radius: 16px 16px 0 0 !important; }
.pg-modal-body {
  padding: 16px 14px !important;
  overflow-x: hidden !important;
  word-break: normal !important;
  overflow-wrap: anywhere !important;
}
.pg-modal-body label {
  font-size: 11px !important;
  word-break: normal !important;
  overflow-wrap: anywhere !important;
}
.pg-modal-footer { padding: 14px 16px !important; }
.pg-expert-card { overflow: hidden !important; }
.pg-expert-card-head { flex-wrap: wrap !important; gap: 8px !important; }

/* ── js/admin/studenti.js ── */
#student-overlay { padding: 0 !important; align-items: flex-end !important; }
#student-overlay > div {
  width: 100vw !important; max-width: 100vw !important;
  max-height: 94vh !important;
  border-radius: 18px 18px 0 0 !important;
  overflow-x: hidden !important;
  overflow-y: auto !important;
}
#student-overlay > div > * { overflow-x: hidden !important; box-sizing: border-box !important; }
.stu-modal-header { padding: 14px 12px !important; gap: 10px !important; }
#stu-avatar-wrap, .stu-modal-avatar { width: 48px !important; height: 48px !important; min-width: 48px !important; flex-shrink: 0 !important; }
.stu-modal-body { padding: 12px 10px !important; overflow-x: hidden !important; box-sizing: border-box !important; width: 100% !important; }
.stu-2col-top, .stu-2col, .stu-row3 { display: block !important; }
.stu-2col-top > *, .stu-2col > *, .stu-row3 > * { width: 100% !important; margin-bottom: 12px !important; box-sizing: border-box !important; }
.stu-anag-grid { grid-template-columns: 1fr 1fr !important; }
.stu-stat-row { flex-direction: column !important; gap: 10px !important; }
.stu-stat-row > * { width: 100% !important; min-width: 0 !important; box-sizing: border-box !important; }
.stu-letters-row { flex-direction: column !important; gap: 10px !important; }
.stu-letters-row > * { width: 100% !important; min-width: 0 !important; box-sizing: border-box !important; }
.stu-anim-tile { min-width: 0 !important; width: 100% !important; box-sizing: border-box !important; }
.stu-letters-footer { flex-direction: column !important; align-items: stretch !important; }
.stu-letters-footer > * { width: 100% !important; box-sizing: border-box !important; }
.enrollment-stepper, .enroll-stepper { overflow-x: auto !important; }

/* ── js/faculty/dashboard.js ── */
.fac-sess-grid { grid-template-columns: 1fr !important; }
.fac-nav-grid { grid-template-columns: 1fr !important; }
.fac-sess-card-header { flex-wrap: wrap !important; gap: 6px !important; }
.spu-desk-only { display: none !important; }
.spu-mob-only { display: block !important; }
.spu-comm-grid { grid-template-columns: 1fr !important; }

/* ── js/faculty/studenti_classe.js ── */
.stu-modal-overlay { padding: 0 !important; align-items: flex-end !important; }
.stu-modal-card { max-width: 100% !important; max-height: 94vh !important; border-radius: 18px 18px 0 0 !important; }
.stu-modal-header { padding: 18px 16px !important; gap: 12px !important; }
.stu-modal-avatar { width: 54px !important; height: 54px !important; font-size: 18px !important; flex-shrink: 0; }
.stu-modal-header .ti { flex-shrink: 0; }
.stu-modal-body { padding: 16px 14px !important; }
.stu-stat-row { flex-wrap: wrap !important; gap: 10px !important; }
.stu-stat-row > div { flex: 1 1 calc(50% - 5px) !important; min-width: 0 !important; }
.stu-2col { grid-template-columns: 1fr !important; gap: 14px !important; }

/* ── js/shared/programma.js ── */
.prog-week-num { padding: 10px 12px !important; min-width: 44px !important; }
.prog-week-num span:first-child { font-size: 22px !important; }
.prog-week-title { font-size: 12px !important; padding: 10px 10px !important; }
.prog-day-header { padding: 5px 12px !important; gap: 8px !important; }
.prog-day-name { font-size: 9px !important; }
.session-row { padding: 10px 12px !important; gap: 8px 10px !important; flex-wrap: wrap !important; align-items: flex-start !important; }
.prog-sess-time { min-width: 44px !important; }
.prog-sess-time div:first-child { font-size: 12px !important; }
.prog-sess-time div:last-child { font-size: 8px !important; }
.prog-sess-titlewrap { flex: 1 1 calc(100% - 110px) !important; }
.prog-sess-title { font-size: 13px !important; white-space: normal !important; line-height: 1.3 !important; overflow: visible !important; text-overflow: clip !important; word-break: normal !important; overflow-wrap: anywhere !important; }
.prog-sess-teacher { flex: 1 1 auto !important; text-align: left !important; max-width: none !important; margin-left: 54px !important; order: 5 !important; }
.prog-sess-badge { order: 6 !important; margin-left: auto !important; }
.prog-detail-meta { flex-wrap: nowrap !important; gap: 8px !important; align-items: center !important; width: 100% !important; }
.prog-when-full { display: none !important; }
.prog-when-short { display: inline !important; }
.prog-detail-meta span { font-size: 11px !important; }
.prog-detail-luogo { margin-left: auto !important; min-width: 0 !important; overflow: hidden !important; text-overflow: ellipsis !important; }
.docente-chip { margin-top: 12px !important; border: 1px solid #c9a84c !important; }

/* Session rows — badge tipo più compatto su mobile */
.prog-sess-badge { width: auto !important; min-width: 0 !important; padding: 4px 8px !important; }
.session-row { padding: 10px 10px !important; gap: 6px 8px !important; }

/* ── js/student/peace_memo.js ── */
.memo-detail-grid { grid-template-columns: 1fr; }
#memo-cards-grid { grid-template-columns: 1fr; }

/* ── js/utils.js ── */
#spu-version-badge { display: none !important; }

/* ════════════════════════════════════════════════
   STUDENT LIST — MOBILE (card layout)
   ════════════════════════════════════════════════ */
.table-wrapper { display: none !important; }

.stu-mc-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 0;
}

.stu-mc {
  background: #fff;
  border-radius: 14px;
  padding: 14px;
  box-shadow: 0 1px 4px rgba(15,32,68,0.05);
  cursor: pointer;
  transition: background 0.15s;
  border-left: 3px solid transparent;
}
.stu-mc:active { background: #f4f6fb; }
.stu-mc--confirmed { border-left-color: #27ae60; }

.stu-mc__top {
  display: flex;
  align-items: center;
  gap: 10px;
}
.stu-mc__avatar {
  width: 38px; height: 38px; border-radius: 50%;
  background: linear-gradient(135deg, #c9a84c, #b8923a);
  display: flex; align-items: center; justify-content: center;
  font-size: 13px; font-weight: 800; color: #0f2044;
  flex-shrink: 0; overflow: hidden;
}
.stu-mc__avatar img { width: 100%; height: 100%; object-fit: cover; }
.stu-mc__info { flex: 1; min-width: 0; }
.stu-mc__name {
  font-size: 14px; font-weight: 700; color: var(--color-text);
  word-break: normal; overflow-wrap: anywhere; line-height: 1.25;
}
.stu-mc__univ {
  font-size: 11px; color: var(--color-text-muted, #7a869a); margin-top: 1px;
  word-break: normal; overflow-wrap: anywhere; line-height: 1.3;
  display: flex; align-items: flex-start; gap: 4px;
}
.stu-mc__univ i { font-size: 10px; color: #c9a84c; flex-shrink: 0; }
.stu-mc__badge { flex-shrink: 0; }

.stu-mc__bottom {
  display: flex; align-items: center; gap: 8px;
  margin-top: 8px; padding-top: 8px;
  border-top: 1px solid #f0f2f7;
  font-size: 11px; color: var(--color-text-muted, #7a869a);
}
.stu-mc__country {
  display: flex; align-items: center; gap: 3px;
}
.stu-mc__country i { font-size: 11px; }
.stu-mc__w {
  font-weight: 700; padding: 2px 6px; border-radius: 4px; font-size: 10px;
}
.stu-mc__w--2 { background: #e8f4fd; color: #2980b9; }
.stu-mc__w--4 { background: rgba(30,58,110,0.08); color: #1e3a6e; }
.stu-mc__w--na { background: #fdf0e0; color: #b8860b; }
.stu-mc__dots { margin-left: auto; }

/* Group headers mobile */
.stu-mc-group {
  background: #1e3a6e;
  color: #fff;
  border-radius: 12px;
  padding: 12px 14px;
  display: flex; align-items: center; gap: 10px;
  cursor: pointer;
  margin-top: 6px; margin-bottom: 4px;
}
.stu-mc-group__name { font-size: 13px; font-weight: 700; flex: 1; }
.stu-mc-group__count { font-size: 11px; font-weight: 600; opacity: 0.7; }

/* Hide desktop-only elements on mobile */
.stu-td-actions { display: none !important; }
.stu-td-check { display: none !important; }
#stu-bulk-bar { display: none !important; }
.page-header { padding: 12px 0 !important; }
.page-header__title { font-size: 20px !important; }
.page-header__subtitle { font-size: 11px !important; }

/* ── js/faculty/materiali.js ── */
#mat-overlay { padding: 8px !important; }
#mat-overlay > div {
  max-width: 100vw !important;
  max-height: 94vh !important;
  border-radius: 16px 16px 0 0 !important;
  overflow-y: auto !important;
  padding: 20px 16px !important;
}
#mat-overlay .grid-cols-2 { grid-template-columns: 1fr !important; }

/* ── js/faculty/sessioni.js — session cards compact ── */
#sessioni-content .card {
  padding: 12px !important;
  border-radius: 12px !important;
}

/* ════════════════════════════════════════════════
   UNIVERSITÀ DETTAGLIO — MOBILE (card list)
   ════════════════════════════════════════════════ */
.uni-mc {
  background: #fff;
  border-radius: 14px;
  padding: 14px;
  box-shadow: 0 1px 4px rgba(15,32,68,0.05);
  margin-bottom: 8px;
  transition: background 0.15s;
}
.uni-mc:active { background: #f4f6fb; }
.uni-mc__top {
  display: flex; align-items: center; gap: 10px;
}
.uni-mc__avatar {
  width: 36px; height: 36px; border-radius: 50%;
  background: linear-gradient(135deg, #c9a84c, #b8923a);
  display: flex; align-items: center; justify-content: center;
  font-size: 12px; font-weight: 800; color: #0f2044;
  flex-shrink: 0; overflow: hidden;
}
.uni-mc__avatar img { width: 100%; height: 100%; object-fit: cover; }
.uni-mc__info { flex: 1; min-width: 0; }
.uni-mc__name {
  font-size: 14px; font-weight: 700; color: var(--color-text, #1a2438);
  word-break: normal; overflow-wrap: anywhere; line-height: 1.25;
}
.uni-mc__email {
  font-size: 11px; color: var(--color-text-muted, #7a869a); margin-top: 1px;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.uni-mc__bottom {
  display: flex; align-items: center; gap: 8px;
  margin-top: 8px; padding-top: 8px;
  border-top: 1px solid #f0f2f7;
  font-size: 11px; color: var(--color-text-muted, #7a869a);
}
.uni-mc__country { display: flex; align-items: center; gap: 3px; }
.uni-mc__country i { font-size: 11px; }
.uni-mc__extra { margin-left: auto; font-weight: 600; }

/* ════════════════════════════════════════════════
   ALUMNI + OSPITI — MOBILE (card list)
   ════════════════════════════════════════════════ */
.alu-mc, .osp-mc {
  background: #fff;
  border-radius: 14px;
  padding: 14px;
  box-shadow: 0 1px 4px rgba(15,32,68,0.05);
  cursor: pointer;
  margin-bottom: 8px;
  transition: background 0.15s;
}
.alu-mc:active, .osp-mc:active { background: #f4f6fb; }
.alu-mc__top, .osp-mc__top { display: flex; align-items: center; gap: 10px; }
.alu-mc__avatar, .osp-mc__avatar {
  width: 38px; height: 38px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-size: 13px; font-weight: 800; color: #fff;
  flex-shrink: 0; overflow: hidden;
}
.alu-mc__avatar img, .osp-mc__avatar img { width: 100%; height: 100%; object-fit: cover; }
.alu-mc__info, .osp-mc__info { flex: 1; min-width: 0; }
.alu-mc__name, .osp-mc__name {
  font-size: 14px; font-weight: 700; color: var(--color-text, #1a2438);
  word-break: normal; overflow-wrap: anywhere; line-height: 1.25;
}
.alu-mc__univ, .osp-mc__univ {
  font-size: 11px; color: var(--color-text-muted, #7a869a); margin-top: 1px;
  display: flex; align-items: flex-start; gap: 4px;
  word-break: normal; overflow-wrap: anywhere; line-height: 1.3;
}
.alu-mc__univ i, .osp-mc__univ i { font-size: 10px; color: #c9a84c; flex-shrink: 0; margin-top: 2px; }
.alu-mc__bottom, .osp-mc__bottom {
  display: flex; align-items: center; gap: 8px;
  margin-top: 8px; padding-top: 8px;
  border-top: 1px solid #f0f2f7;
  font-size: 11px; color: var(--color-text-muted, #7a869a);
}
.alu-mc__country, .osp-mc__country { display: flex; align-items: center; gap: 3px; }
.alu-mc__country i, .osp-mc__country i { font-size: 11px; }
.alu-mc__dots, .osp-mc__dots { margin-left: auto; }

/* ════════════════════════════════════════════════
   DIARIO DEL BORGO — MOBILE
   ════════════════════════════════════════════════ */
#diario-content .grid-cols-2 { grid-template-columns: 1fr !important; }
#diario-overlay { padding: 8px !important; }
#diario-overlay > div {
  max-width: 100vw !important;
  max-height: 94vh !important;
  border-radius: 16px 16px 0 0 !important;
  padding: 20px 16px !important;
}
#diario-overlay .grid-cols-2 { grid-template-columns: 1fr !important; }

/* ════════════════════════════════════════════════
   FACULTY PRESENZE — MOBILE (attendance cards)
   ════════════════════════════════════════════════ */
.pres-mc-list {
  padding: 8px 12px;
  display: flex; flex-direction: column; gap: 8px;
}
.pres-mc {
  background: #fafbfe;
  border-radius: 12px;
  padding: 12px;
  border: 1px solid #eef0f6;
}
.pres-mc__top {
  display: flex; align-items: center; gap: 10px;
  margin-bottom: 10px;
}
.pres-mc__avatar {
  width: 34px; height: 34px; border-radius: 50%;
  background: linear-gradient(135deg, #c9a84c, #b8923a);
  display: flex; align-items: center; justify-content: center;
  font-size: 11px; font-weight: 800; color: #0f2044;
  flex-shrink: 0; overflow: hidden;
}
.pres-mc__avatar img { width: 100%; height: 100%; object-fit: cover; }
.pres-mc__name {
  font-size: 14px; font-weight: 700; color: #1a2438;
  word-break: normal; overflow-wrap: anywhere;
}
.pres-mc__btns {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr 1fr;
  gap: 6px;
}
.pres-mc__btn {
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  gap: 3px;
  padding: 10px 4px;
  border-radius: 10px;
  border: none; cursor: pointer;
  font-family: inherit;
  transition: all 0.15s;
}
.pres-mc__btn i { font-size: 16px; }
.pres-mc__btn span { font-size: 9px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.03em; }
.pres-mc__btn:active { transform: scale(0.95); }

/* ════════════════════════════════════════════════
   FACULTY VALUTAZIONI — MOBILE (grade cards + modal)
   ════════════════════════════════════════════════ */
.val-mc-list { display: flex; flex-direction: column; gap: 8px; }
.val-mc {
  background: #fff; border-radius: 14px; padding: 14px;
  box-shadow: 0 1px 4px rgba(15,32,68,0.05);
}
.val-mc__top { display: flex; align-items: center; gap: 10px; margin-bottom: 8px; }
.val-mc__avatar {
  width: 36px; height: 36px; border-radius: 50%;
  background: linear-gradient(135deg, #c9a84c, #b8923a);
  display: flex; align-items: center; justify-content: center;
  font-size: 12px; font-weight: 800; color: #0f2044;
  flex-shrink: 0; overflow: hidden;
}
.val-mc__avatar img { width: 100%; height: 100%; object-fit: cover; }
.val-mc__info { flex: 1; min-width: 0; }
.val-mc__name { font-size: 14px; font-weight: 700; color: #1a2438; word-break: normal; overflow-wrap: anywhere; }
.val-mc__univ { font-size: 11px; color: #7a869a; }
.val-mc__bottom {
  display: flex; align-items: center; gap: 8px;
  padding-top: 8px; border-top: 1px solid #f0f2f7;
  font-size: 11px;
}

/* Grade modal mobile */
#grade-overlay { padding: 8px !important; }
#grade-overlay > div {
  max-width: 100vw !important;
  max-height: 94vh !important;
  border-radius: 16px 16px 0 0 !important;
  padding: 20px 16px !important;
}
#grade-overlay .grid-cols-2 { grid-template-columns: 1fr !important; }

/* ════════════════════════════════════════════════
   ADMIN REPORT — MOBILE
   ════════════════════════════════════════════════ */
.rpt-mc-list { display: flex; flex-direction: column; gap: 8px; }
.rpt-mc {
  background: #fff; border-radius: 12px; padding: 12px 14px;
  box-shadow: 0 1px 4px rgba(15,32,68,0.05);
}

/* ════════════════════════════════════════════════
   SESSION DETAIL PANEL — MOBILE
   ════════════════════════════════════════════════ */

/* Video/iframe embeds: responsive 16:9 */
.session-detail-panel iframe,
#tab-content-sommario iframe,
#tab-content-video iframe {
  width: 100% !important;
  height: auto !important;
  aspect-ratio: 16 / 9 !important;
  max-height: 56vw !important;
}
.session-detail-panel video,
#tab-content-video video {
  width: 100% !important;
  max-height: 56vw !important;
}

/* Session header: stack docente chips below title */
.session-detail-panel > div:first-child > div:last-child {
  flex-direction: column !important;
}
.docente-chip {
  margin-top: 4px !important;
}

/* Tabs: scroll horizontal, compact */
.session-tab {
  font-size: 11px !important;
  padding: 8px 10px !important;
  white-space: nowrap !important;
}

/* Summary edit textarea */
#s-sommario { min-height: 160px !important; font-size: 13px !important; }

/* Exercises: full width answers */
.session-detail-panel .grid-cols-2 { grid-template-columns: 1fr !important; }

/* Faculty session detail (sessioni.js) — material embeds responsive */
.fac-detail-panel iframe {
  width: 100% !important;
  height: auto !important;
  aspect-ratio: 16 / 9 !important;
}
.fac-detail-panel video {
  width: 100% !important;
  max-height: 56vw !important;
}

/* Record video preview */
#mm-prev {
  max-height: 40vh !important;
}

/* ═══ PAGE TRANSITIONS — mobile ═══ */
.main-content {
  animation: spuPageIn 0.25s ease both;
}
@keyframes spuPageIn {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* ═══ PULL TO REFRESH indicator ═══ */
#spu-pull-indicator {
  backdrop-filter: blur(4px);
}