/* mFree — ui-kit condiviso. Il guscio visivo è qui: nessun modulo disegna il proprio
   header, il proprio bordo o il proprio stato di caricamento. */
* { margin: 0; padding: 0; box-sizing: border-box }

body {
  font-family: var(--font-family);
  font-size: var(--font-size-md);
  background: var(--color-bg);
  color: var(--color-text-primary);
}

/* ── Telaio: sidebar + contenuto ─────────────────────────────────────────── */
.mf-app { display: flex; min-height: 100vh }

.mf-sidebar {
  width: 240px; flex-shrink: 0; background: var(--color-surface);
  border-right: 1px solid var(--color-border); display: flex; flex-direction: column;
}
.mf-brand { padding: var(--space-lg) var(--space-md); border-bottom: 1px solid var(--color-border) }
.mf-brand strong { font-size: var(--font-size-lg); color: var(--color-primary) }
.mf-brand span { display: block; font-size: var(--font-size-sm); color: var(--color-text-secondary); margin-top: var(--space-xs) }

.mf-nav { padding: var(--space-sm); display: flex; flex-direction: column; gap: 2px; flex: 1 }
.mf-nav a {
  display: flex; align-items: center; gap: var(--space-sm);
  padding: var(--space-sm) var(--space-md); border-radius: var(--radius);
  color: var(--color-text-secondary); text-decoration: none; font-size: var(--font-size-sm);
}
.mf-nav a:hover { background: var(--color-bg); color: var(--color-text-primary) }
.mf-nav a.active { background: var(--color-primary); color: #fff }
.mf-nav-vuoto { padding: var(--space-md); font-size: var(--font-size-sm); color: var(--color-text-secondary) }

.mf-sidebar-footer { padding: var(--space-md); border-top: 1px solid var(--color-border); font-size: var(--font-size-sm) }
.mf-sidebar-footer a { color: var(--color-text-secondary); text-decoration: none }
.mf-sidebar-footer a:hover { color: var(--color-danger) }

.mf-main { flex: 1; display: flex; flex-direction: column; min-width: 0 }
.mf-topbar {
  background: var(--color-surface); border-bottom: 1px solid var(--color-border);
  padding: var(--space-md) var(--space-lg); display: flex; align-items: center; gap: var(--space-md);
}
.mf-topbar h2 { font-size: var(--font-size-lg); font-weight: var(--font-weight-bold) }
.mf-topbar .mf-licenza { margin-left: auto; font-size: var(--font-size-sm); color: var(--color-text-secondary) }
.mf-content { padding: var(--space-lg); display: grid; gap: var(--space-lg); align-content: start }

/* ── ModuleCard: l'involucro obbligatorio di ogni modulo ─────────────────── */
.module-card {
  background: var(--color-surface); border: 1px solid var(--color-border);
  border-radius: var(--radius-card); box-shadow: var(--shadow-card); overflow: hidden;
}
.module-card__header {
  display: flex; align-items: center; gap: var(--space-md);
  padding: var(--space-md) var(--space-lg); border-bottom: 1px solid var(--color-border);
}
.module-card__header h3 { font-size: var(--font-size-md); font-weight: var(--font-weight-bold) }
.module-card__actions { margin-left: auto; display: flex; gap: var(--space-sm) }
.module-card__body { padding: var(--space-lg) }

/* Stati obbligatori: loading, vuoto, errore, contenuto */
.mf-stato { padding: var(--space-lg); text-align: center; font-size: var(--font-size-sm); color: var(--color-text-secondary) }
.mf-stato--errore { color: var(--color-danger) }

/* ── Componenti ──────────────────────────────────────────────────────────── */
.mf-btn {
  /* vale sia per <button> sia per <a>: un bottone non deve mai risultare sottolineato */
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  text-decoration: none; white-space: nowrap; line-height: 1.2;
  border: 1px solid var(--color-border); background: var(--color-surface);
  color: var(--color-text-primary); padding: var(--space-sm) var(--space-md);
  border-radius: var(--radius); font-size: var(--font-size-sm); font-family: inherit;
  font-weight: var(--font-weight-bold); cursor: pointer;
}
/* Bottone di sola icona: quadrato e compatto, per le azioni di riga */
.mf-btn--icona { padding: 6px; width: 30px; height: 30px }
.mf-btn--icona svg { width: 15px; height: 15px; display: block }
.mf-btn:hover { background: var(--color-bg) }
.mf-btn--primary { background: var(--color-primary); border-color: var(--color-primary); color: #fff }
.mf-btn--primary:hover { background: var(--color-primary-dark) }
.mf-btn--danger { color: var(--color-danger); border-color: var(--color-danger) }
.mf-btn--danger:hover { background: var(--color-danger); color: #fff }

.mf-table { width: 100%; border-collapse: collapse; font-size: var(--font-size-sm) }
.mf-table th {
  text-align: left; padding: var(--space-sm) var(--space-md);
  color: var(--color-text-secondary); font-weight: var(--font-weight-bold);
  border-bottom: 1px solid var(--color-border); white-space: nowrap;
}
.mf-table td { padding: var(--space-sm) var(--space-md); border-bottom: 1px solid var(--color-border) }
.mf-table tbody tr:hover { background: var(--color-bg) }

.mf-badge {
  display: inline-block; padding: 2px var(--space-sm); border-radius: 999px;
  font-size: 11px; font-weight: var(--font-weight-bold);
  background: var(--color-bg); color: var(--color-text-secondary); border: 1px solid var(--color-border);
}
.mf-badge--ok { background: var(--tint-ok-bg); color: var(--color-success); border-color: var(--tint-ok-bd) }

.mf-field { display: grid; gap: var(--space-xs); margin-bottom: var(--space-md) }
.mf-field label { font-size: var(--font-size-sm); color: var(--color-text-secondary) }
.mf-field input, .mf-field select, .mf-field textarea {
  padding: var(--space-sm) var(--space-md); border: 1px solid var(--color-border);
  border-radius: var(--radius); font-size: var(--font-size-md); font-family: inherit;
  background: var(--color-surface); color: var(--color-text-primary); width: 100%;
}
.mf-field input:focus, .mf-field select:focus, .mf-field textarea:focus {
  outline: 2px solid var(--color-primary); outline-offset: -1px; border-color: var(--color-primary);
}

/* ── Impostazioni ────────────────────────────────────────────────────────── */
.mf-inline { display: flex; align-items: flex-end; gap: var(--space-md); flex-wrap: wrap }
.mf-inline .mf-field { margin-bottom: 0; min-width: 220px }
.mf-nota { font-size: var(--font-size-sm); color: var(--color-text-secondary); margin-bottom: var(--space-md); max-width: 78ch }
.mf-avviso {
  background: var(--tint-ok-bg);
  border: 1px solid var(--tint-ok-bd);
  color: var(--color-success); padding: var(--space-sm) var(--space-md);
  border-radius: var(--radius); font-size: var(--font-size-sm); margin-bottom: var(--space-md);
}
.mf-azioni-form { margin-top: var(--space-md) }

/* Tabella delle voci: master a sinistra (sola lettura), lingua attiva a destra */
.mf-scroll { max-height: 460px; overflow: auto; border: 1px solid var(--color-border); border-radius: var(--radius) }
.mf-voci { font-size: var(--font-size-sm) }
.mf-voci thead th { position: sticky; top: 0; background: var(--color-surface); z-index: 1 }
.mf-voci td { vertical-align: middle }
.mf-voci input { width: 100%; padding: 6px var(--space-sm); border: 1px solid transparent;
  border-radius: var(--radius); background: transparent; color: var(--color-text-primary);
  font-family: inherit; font-size: var(--font-size-sm) }
.mf-voci input:hover { border-color: var(--color-border) }
.mf-voci input:focus { outline: 2px solid var(--color-primary); outline-offset: -1px; background: var(--color-surface) }
.mf-voci input.mf-tradotta { border-left: 2px solid var(--color-primary) }
.mf-chiave { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 11.5px;
  color: var(--color-text-secondary); white-space: nowrap }
.mf-master { color: var(--color-text-secondary) }
.mf-voci tr.mf-gruppo td { background: var(--color-bg); font-weight: var(--font-weight-bold);
  font-size: 11px; letter-spacing: .08em; text-transform: uppercase; color: var(--color-text-secondary) }

/* ── Vetrina dei moduli ──────────────────────────────────────────────────── */
.mf-moduli { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: var(--space-md) }
.mf-modulo {
  border: 1px solid var(--color-border); border-radius: var(--radius-card);
  padding: var(--space-md) var(--space-lg) var(--space-md);
  display: flex; flex-direction: column; gap: var(--space-sm); background: var(--color-surface);
}
.mf-modulo--attivo { border-color: var(--tint-primary-bd) }
.mf-modulo-top { display: flex; align-items: center; gap: var(--space-sm) }
.mf-modulo-top h4 { font-size: var(--font-size-md); font-weight: var(--font-weight-bold); flex: 1 }
.mf-modulo-icona { font-size: 20px }
.mf-modulo-sommario { font-size: var(--font-size-sm); color: var(--color-text-primary) }
.mf-modulo-desc { font-size: var(--font-size-sm); color: var(--color-text-secondary); flex: 1 }
.mf-dip { font-size: 12px; color: var(--color-warning) }
.mf-modulo-foot {
  display: flex; align-items: center; gap: var(--space-sm); flex-wrap: wrap;
  border-top: 1px solid var(--color-border); padding-top: var(--space-md); margin-top: var(--space-xs);
}
.mf-prezzo { font-weight: var(--font-weight-bold); font-variant-numeric: tabular-nums }
.mf-prezzo small { color: var(--color-text-secondary); font-weight: var(--font-weight-normal) }
.mf-gratis { color: var(--color-success); font-weight: var(--font-weight-bold) }
.mf-modulo-azioni { margin-left: auto; display: flex; gap: var(--space-sm) }
.mf-modulo-azioni form { display: inline }
.mf-badge--prova { background: var(--tint-warn-bg); color: var(--color-warning); border-color: var(--tint-warn-bd) }
.mf-badge--scaduto { background: var(--tint-danger-bg); color: var(--color-danger); border-color: var(--tint-danger-bd) }

/* ── Login ───────────────────────────────────────────────────────────────── */
.mf-login { min-height: 100vh; display: grid; place-items: center; padding: var(--space-md) }
.mf-login .module-card { width: min(400px, 100%) }
.mf-login .mf-logo { text-align: center; margin-bottom: var(--space-lg) }
.mf-login .mf-logo strong { font-size: 28px; color: var(--color-primary) }
.mf-login .mf-logo span { display: block; font-size: var(--font-size-sm); color: var(--color-text-secondary) }
.mf-errore {
  background: var(--tint-danger-bg); border: 1px solid var(--tint-danger-bd); color: var(--color-danger);
  padding: var(--space-sm) var(--space-md); border-radius: var(--radius);
  font-size: var(--font-size-sm); margin-bottom: var(--space-md);
}

/* ── Modale: dove ogni modulo inserisce e modifica i dati ────────────────── */
.mf-modale {
  /* centrata davvero, in orizzontale e in verticale: inset:0 + margin:auto la mette
     al centro dello schermo qualunque sia la sua altezza */
  position: fixed; inset: 0; margin: auto;
  width: min(720px, calc(100vw - 32px)); max-height: min(86vh, 900px); height: fit-content;
  padding: 0; border: 1px solid var(--color-border); border-radius: var(--radius-card);
  background: var(--color-surface); color: var(--color-text-primary);
  box-shadow: 0 24px 64px -24px rgba(0,0,0,.5); overflow: hidden;
}
.mf-modale::backdrop { background: rgba(15, 23, 42, .45) }
.mf-modale[open] { display: flex; flex-direction: column }
.mf-modale-chiudi-form { position: absolute; top: 10px; right: 12px; margin: 0 }
.mf-modale-x {
  background: none; border: 0; cursor: pointer; font-size: 22px; line-height: 1;
  color: var(--color-text-secondary); padding: 4px 8px; border-radius: var(--radius);
}
.mf-modale-x:hover { background: var(--color-bg); color: var(--color-text-primary) }
.mf-modale-testa {
  flex-shrink: 0;
  padding: var(--space-md) var(--space-lg); padding-right: 56px;
  background: var(--color-sunk); border-bottom: 1px solid var(--color-border);
}
.mf-modale-testa h3 { font-size: var(--font-size-lg); font-weight: var(--font-weight-bold) }
.mf-modale-corpo {
  padding: var(--space-lg); overflow-y: auto; flex: 1;
  min-height: 0;            /* senza questo il corpo non scorre e spinge fuori i tab */
  background: var(--color-surface);
}
.mf-modale-piede {
  padding: var(--space-md) var(--space-lg); border-top: 1px solid var(--color-border);
  display: flex; gap: var(--space-sm); align-items: center; justify-content: flex-end;
  background: var(--color-sunk); flex-wrap: wrap; flex-shrink: 0;
}
.mf-modale-piede .mf-elimina-form { margin-right: auto }

/* Tab: il primo è del modulo, gli altri li aggiungono le estensioni */
.mf-tab {
  display: flex; gap: 2px; padding: 0 var(--space-lg); overflow-x: auto; flex-shrink: 0;
  background: var(--color-sunk); border-bottom: 1px solid var(--color-border);
}
.mf-tab-btn {
  background: none; border: 0; border-bottom: 2px solid transparent; cursor: pointer;
  padding: var(--space-sm) var(--space-md); font-family: inherit; font-size: var(--font-size-sm);
  font-weight: var(--font-weight-bold); color: var(--color-text-secondary); white-space: nowrap;
}
.mf-tab-btn:hover { color: var(--color-text-primary) }
.mf-tab-btn.on { color: var(--color-primary); border-bottom-color: var(--color-primary) }
.mf-tab-pan { display: none }
.mf-tab-pan.on { display: block }

/* ── Barre di scorrimento: sottili e nei colori del tema ─────────────────── */
* { scrollbar-width: thin; scrollbar-color: var(--color-border) transparent }
*::-webkit-scrollbar { width: 8px; height: 8px }
*::-webkit-scrollbar-track { background: transparent }
*::-webkit-scrollbar-thumb {
  background: var(--color-border); border-radius: 999px;
  border: 2px solid transparent; background-clip: content-box;
}
*::-webkit-scrollbar-thumb:hover { background: var(--color-text-secondary); background-clip: content-box }
*::-webkit-scrollbar-corner { background: transparent }

/* ── Bottone screenshot (strumento di sviluppo) ──────────────────────────── */
.mf-shot {
  position: fixed; right: var(--space-md); bottom: var(--space-md); z-index: 100;
  width: 40px; height: 40px; border-radius: 50%; cursor: pointer; font-size: 17px;
  background: var(--color-surface); border: 1px solid var(--color-border);
  box-shadow: var(--shadow-card); opacity: .55; transition: opacity .15s, transform .15s;
}
.mf-shot:hover { opacity: 1; transform: translateY(-1px) }
.mf-shot:disabled { cursor: wait; opacity: 1 }
.mf-shot-toast {
  position: fixed; right: var(--space-md); bottom: 68px; z-index: 101;
  width: min(260px, calc(100vw - 32px));
  background: var(--color-surface); border: 1px solid var(--color-border);
  border-radius: var(--radius); box-shadow: var(--shadow-card);
  padding: var(--space-sm); font-size: var(--font-size-sm);
  display: flex; flex-direction: column; gap: var(--space-sm);
}
.mf-shot-toast p { margin: 0 var(--space-md) 0 var(--space-xs); word-break: break-all;
  color: var(--color-text-secondary); font-size: 12px }
.mf-shot-mini {
  width: 100%; max-height: 160px; object-fit: cover; object-position: top;
  border: 1px solid var(--color-border); border-radius: var(--radius);
  background: var(--color-bg); cursor: zoom-in; display: block;
}
.mf-shot-toast-x {
  position: absolute; top: 4px; right: 6px; background: none; border: 0; cursor: pointer;
  font-size: 16px; line-height: 1; color: var(--color-text-secondary);
}
.mf-shot-toast.errore { background: var(--tint-danger-bg); border-color: var(--tint-danger-bd); color: var(--color-danger) }

/* Copia della scheda usata solo per lo screenshot: fuori schermo e in posizione
   normale, perché il top layer di <dialog> non è catturabile. */
.mf-modale--shot {
  position: fixed; left: -10000px; top: 0; inset: auto; margin: 0;
  display: flex; flex-direction: column; max-height: none; height: auto;
  width: 720px;   /* larghezza piena della scheda: la copia deve somigliare all'originale */
}
.mf-modale--shot .mf-modale-chiudi-form, .mf-modale--shot .mf-shot,
.mf-modale--shot .mf-shot-toast { display: none }
.mf-modale--shot .mf-modale-corpo { overflow: visible }

/* Intestazione della scheda: titolo con sottotitolo a sinistra, identità a destra */
.mf-modale-testa { display: flex; align-items: center; gap: var(--space-md) }
.mf-modale-titoli { flex: 1; min-width: 0 }
.mf-modale-sub { margin-top: 4px; display: flex; align-items: center; gap: var(--space-sm);
  font-size: var(--font-size-sm); color: var(--color-text-secondary) }
.mf-modale-lato { flex-shrink: 0 }
.mf-validita { font-size: 12px; color: var(--color-text-secondary); display: flex;
  align-items: center; gap: var(--space-sm); flex-wrap: wrap }
.mf-dopo { font-size: 11px; color: var(--color-text-secondary); font-weight: var(--font-weight-normal) }
.mf-badge--promo { background: var(--tint-primary-bd); color: #fff; border-color: var(--tint-primary-bd) }