/* ── Funeral Media: token e componenti base del rifacimento in stile Tela ──
   Unica fonte dei valori grafici (docs/RIFACIMENTO_UI_2026.md). Le pagine
   rifatte usano SOLO queste variabili e le classi .fm-* qui sotto; i fogli di
   pagina (shell, studio, archivio…) aggiungono layout, non nuovi colori.
   Caricato dopo i bundle Metronic e prima degli altri fogli dell'app. */

:root {
  --fm-bg: #f6f4f3;          /* fondo pagina */
  --fm-surface: #fff;        /* card, pannelli */
  --fm-ink: #2b1c24;         /* testo */
  --fm-muted: #78666d;       /* testo secondario */
  --fm-eyebrow: #6d535e;     /* etichette maiuscole */
  --fm-primary: #7f1f29;     /* bordeaux RIC */
  --fm-primary-dark: #5e1f29;
  --fm-primary-deep: #2b1c24;
  --fm-success: #1f6b46;     /* verde RIC */
  --fm-warning: #9d722d;
  --fm-danger: #8d2736;
  --fm-line: #e1d6d9;        /* bordo card */
  --fm-line-strong: #dfd3d6; /* bordo pulsanti/campi */
  --fm-line-soft: #e6dfe0;   /* separatori, toolbar */
  --fm-hover: #f8f1f2;
  --fm-tint: #f5e9ed;        /* voce attiva */
  --fm-tint-border: #b28e96;
  --fm-toolbar: #f9f7f6;
  --fm-well: #f4f0ef;        /* fondo miniature */
  --fm-focus: #7f1f29;
  --fm-radius: 10px;         /* card */
  --fm-radius-control: 8px;  /* pulsanti, campi */
  --fm-control-h: 44px;      /* altezza minima di pulsanti, campi, voci toccabili */
  --fm-control-h-lg: 48px;   /* azioni primarie su telefono, voci di menu */
  --fm-header-h: 72px;       /* header desktop */
  --fm-header-h-mobile: 56px;
  --fm-bottom-nav-h: 64px;
  --fm-serif: Georgia, "Times New Roman", serif;
  --fm-shadow-pop: 0 24px 80px rgba(43, 28, 36, .2);
}

[data-bs-theme="dark"] {
  --fm-bg: #17110f;
  --fm-surface: #211a1c;
  --fm-ink: #f2e9eb;
  --fm-muted: #b3a0a7;
  --fm-eyebrow: #c3aab4;
  --fm-primary: #c4505d;
  --fm-primary-dark: #e07a86;
  --fm-line: #3a2e32;
  --fm-line-strong: #4a3b40;
  --fm-line-soft: #33282b;
  --fm-hover: #2c2226;
  --fm-tint: #3a2329;
  --fm-tint-border: #7d4e58;
  --fm-toolbar: #1c1517;
  --fm-well: #2a2225;
  --fm-focus: #e07a86;
}

/* Misure in px, non in rem: su desktop Metronic forza la radice a 13px
   (html{font-size:13px!important}) e .875rem diventerebbe 11px. */

/* Sotto 992px Metronic porta la radice a 12–13px: testo illeggibile e zoom di
   iOS su ogni campo. Le pagine rifatte tornano a 16px. */
@media (max-width: 991.98px) {
  html { font-size: 16px !important; }
  .fm-shell input, .fm-shell select, .fm-shell textarea { font-size: 16px; }
  /* Schede col dito: «Orari», «Foto», «Testo» senza contatore erano larghe 30–37px */
  .fm-tabs a, .fm-tabs button { min-width: 44px; justify-content: center; }
  /* La × delle etichette dati sta dentro la riga di testo (32px): l'area
     toccabile arriva a 44px senza alzare la riga. */
  .token-chip-remove { position: relative; }
  .token-chip-remove::after { content: ""; position: absolute; inset: -6px; }
}

/* ── Pulsanti ─────────────────────────────────────────────────────────── */
.fm-btn {
  min-height: var(--fm-control-h); display: inline-flex; align-items: center; justify-content: center;
  gap: 8px; padding: 0 16px; border-radius: var(--fm-radius-control); border: 1px solid transparent;
  font-weight: 600; font-size: 14px; line-height: 1.2; white-space: nowrap; cursor: pointer;
  text-decoration: none; transition: background-color .15s, border-color .15s, color .15s;
}
.fm-btn i { font-size: 18.4px; }
.fm-btn--primary { background: var(--fm-primary); color: #fff; }
.fm-btn--primary:hover, .fm-btn--primary:focus-visible { background: var(--fm-primary-dark); color: #fff; }
.fm-btn--primary i { color: #fff; }
.fm-btn--secondary { background: var(--fm-surface); border-color: var(--fm-line-strong); color: var(--fm-primary-dark); }
.fm-btn--secondary:hover { background: var(--fm-hover); border-color: var(--fm-tint-border); color: var(--fm-primary-dark); }
.fm-btn--ghost { background: transparent; color: var(--fm-primary-dark); }
.fm-btn--ghost:hover { background: var(--fm-hover); }
.fm-btn--danger { background: transparent; color: var(--fm-danger); }
.fm-btn--danger:hover { background: #fbeef0; }
[data-bs-theme="dark"] .fm-btn--danger:hover { background: var(--fm-hover); }
/* I temi Metronic colorano ogni link ([data-bs-theme] a, specificità 0,1,1):
   i pulsanti fatti con <a> ribadiscono il loro colore. */
a.fm-btn--primary, a.fm-btn--primary:hover, a.fm-btn--primary:focus-visible { color: #fff; }
a.fm-btn--secondary, a.fm-btn--secondary:hover, a.fm-btn--ghost, a.fm-btn--ghost:hover { color: var(--fm-primary-dark); }
a.fm-btn--danger, a.fm-btn--danger:hover { color: var(--fm-danger); }
.fm-btn--sm { min-height: 36px; padding: 0 12px; font-size: 13px; }
.fm-btn--block { width: 100%; }
.fm-btn:focus-visible, .fm-icon-btn:focus-visible, .fm-tabs a:focus-visible {
  outline: 3px solid var(--fm-focus); outline-offset: 3px;
}
/* Anche i pulsanti Metronic rimasti (moduli, modali, Modelli) mostrano il
   fuoco da tastiera: da soli cambiano appena lo sfondo. */
.btn:focus-visible, .btn-close:focus-visible {
  outline: 3px solid var(--fm-focus); outline-offset: 2px; box-shadow: none;
}
.fm-icon-btn {
  width: var(--fm-control-h); height: var(--fm-control-h); display: inline-grid; place-items: center;
  border-radius: 9px; border: 1px solid var(--fm-line-strong); background: var(--fm-surface);
  color: var(--fm-primary-dark); cursor: pointer;
}
.fm-icon-btn--flat { border-color: transparent; background: transparent; }
.fm-icon-btn:hover { background: var(--fm-hover); }
.fm-icon-btn i { font-size: 20px; }

/* «⋯» e maniglia di trascinamento disegnati in CSS: i glifi Keenicons
   equivalenti escono troppo piccoli. */
.fm-more { display: inline-block; width: 22px; height: 6px; color: var(--fm-primary-dark);
  background: radial-gradient(circle, currentColor 2.6px, transparent 3px) 0 0 / 8px 6px repeat-x; }
.fm-grip { display: inline-block; width: 12px; height: 20px;
  background: radial-gradient(circle, #b8a6ad 1.8px, transparent 2px) 0 0 / 6px 6.6px; }

/* ── Card, etichette, stati ───────────────────────────────────────────── */
.fm-card { background: var(--fm-surface); border: 1px solid var(--fm-line); border-radius: var(--fm-radius); }
.fm-card--interactive { transition: background-color .15s, border-color .15s; }
.fm-card--interactive:hover { background: var(--fm-hover); border-color: var(--fm-primary); }
.fm-eyebrow { font-size: 13px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--fm-eyebrow); }
/* [data-bs-theme] ribadito: _light_css/_dark_css fissano h1–h6 con
   [data-bs-theme] h1 (0,1,1), che batteva la classe sola (titoli neri e 600). */
.fm-title, [data-bs-theme] .fm-title { font-family: var(--fm-serif); font-weight: 400; color: var(--fm-primary-dark); }
.fm-muted { color: var(--fm-muted); }
.fm-dot { width: 8px; height: 8px; border-radius: 50%; display: inline-block; background: var(--fm-success); flex: none; }
.fm-dot--warning { background: var(--fm-warning); }
.fm-dot--danger { background: var(--fm-danger); }
.fm-dot--off { background: #b9aab0; }
.fm-badge { display: inline-flex; align-items: center; gap: 6px; height: 24px; padding: 0 9px; border-radius: 12px;
  font-size: 13px; font-weight: 600; background: #eef6f1; color: var(--fm-success); }
.fm-badge--warning { background: #f8f1e4; color: var(--fm-warning); }
.fm-badge--muted { background: #f1ecee; color: #6d5a62; }
.fm-count { min-width: 24px; height: 22px; padding: 0 6px; border-radius: 10px; background: #efe8ea; color: var(--fm-eyebrow);
  font-size: 13px; font-weight: 700; display: inline-grid; place-items: center; }
/* Tema scuro: le pillole chiare diventerebbero illeggibili (testo chiaro su
   fondo chiaro). Fondo scuro e testo pieno: il colore lo dice il pallino. */
[data-bs-theme="dark"] .fm-count { background: var(--fm-line-strong); color: var(--fm-ink); }
[data-bs-theme="dark"] .fm-badge { background: var(--fm-well); color: var(--fm-ink); }

/* ── Schede con la linea bordeaux (come Cerimonia/Logistica in RIC) ───── */
.fm-tabs { display: flex; gap: 22px; border-bottom: 1px solid var(--fm-line-soft); min-height: 52px; align-items: stretch;
  overflow-x: auto; scrollbar-width: none; }
.fm-tabs::-webkit-scrollbar { display: none; }
.fm-tabs a, .fm-tabs button { display: flex; align-items: center; gap: 8px; font-size: 14px; font-weight: 550; color: var(--fm-muted);
  border: 0; border-bottom: 2px solid transparent; margin-bottom: -1px; background: none; padding: 0; white-space: nowrap;
  min-height: var(--fm-control-h); text-decoration: none; }
.fm-tabs .is-active, .fm-tabs [aria-selected="true"], .fm-tabs [aria-current="page"] { color: var(--fm-primary); border-bottom-color: var(--fm-primary); }
.fm-tabs .is-active .fm-count, .fm-tabs [aria-current="page"] .fm-count { background: var(--fm-tint); color: var(--fm-primary); }

/* ── Campi e filtri ───────────────────────────────────────────────────── */
.fm-field { min-height: var(--fm-control-h); border: 1px solid var(--fm-line-strong); border-radius: var(--fm-radius-control);
  background: var(--fm-surface); color: var(--fm-ink); padding: 0 12px; font-size: 15px; }
.fm-field:focus { outline: 3px solid rgba(127, 31, 41, .25); border-color: var(--fm-primary); }
.fm-chip { min-height: 36px; display: inline-flex; align-items: center; padding: 0 14px; border-radius: 18px;
  border: 1px solid var(--fm-line-strong); background: var(--fm-surface); font-size: 13px; font-weight: 600; color: #5c4a52; cursor: pointer; }
.fm-chip.is-active, .fm-chip[aria-pressed="true"] { background: var(--fm-primary); border-color: var(--fm-primary); color: #fff; }
@media (max-width: 991.98px) { .fm-chip { min-height: var(--fm-control-h); } }

/* Switch, radio e checkbox Bootstrap nei colori RIC (oggi escono blu). */
.form-check-input:checked { background-color: var(--fm-primary); border-color: var(--fm-primary); }
.form-check-input:focus { box-shadow: 0 0 0 4px rgba(127, 31, 41, .2); border-color: var(--fm-tint-border); }

/* ── Stato vuoto ─────────────────────────────────────────────────────── */
.fm-empty { border: 1.5px dashed #d2bcc3; background: #fcf8f9; border-radius: var(--fm-radius); padding: 28px 20px;
  display: flex; flex-direction: column; align-items: center; gap: 10px; text-align: center; color: var(--fm-primary-dark); }
.fm-empty i { font-size: 32px; color: var(--fm-primary); }
[data-bs-theme="dark"] .fm-empty { background: #241b1e; border-color: #4a3b40; }