/* ============================================================================
   MHE Intelligence — Polish layer (additivo).
   Carica DOPO app.css. Override leggeri per ottenere il look 2026.
   Nessuna modifica strutturale. Disattivabile rimuovendo il <link>.
   ============================================================================ */

/* ----------------------------------------------------------------------------
   1. Design tokens estesi (depth, easing, palette tinted)
   ---------------------------------------------------------------------------- */
:root {
  /* Ombre a 2 livelli (vicino + lontano) - look Linear/Apple */
  --elev-1:
    0 1px 1px rgba(15, 23, 42, 0.04),
    0 4px 12px rgba(15, 23, 42, 0.05);
  --elev-2:
    0 1px 2px rgba(15, 23, 42, 0.06),
    0 8px 24px rgba(15, 23, 42, 0.08);
  --elev-3:
    0 2px 4px rgba(15, 23, 42, 0.06),
    0 16px 40px rgba(15, 23, 42, 0.12);
  --elev-press: 0 1px 0 rgba(15, 23, 42, 0.06);

  /* Easing premium */
  --ease-out-quart: cubic-bezier(0.25, 1, 0.5, 1);
  --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
  --ease-in-out-smooth: cubic-bezier(0.4, 0, 0.2, 1);

  /* Palette tinted: monocromatico viola con neutri freddi */
  --tint-1: color-mix(in srgb, var(--mhe) 4%, var(--card));
  --tint-2: color-mix(in srgb, var(--mhe) 8%, var(--card));
  --tint-3: color-mix(in srgb, var(--mhe) 14%, var(--card));
  --tint-ring: color-mix(in srgb, var(--mhe) 22%, transparent);

  /* Numeri tabulari + ligature stylistic */
  --font-num: "Inter", "SF Pro Display", -apple-system, system-ui, sans-serif;
  --font-display: "Inter", "SF Pro Display", -apple-system, system-ui, sans-serif;
}

:root[data-appearance="dark"] {
  --elev-1:
    0 1px 1px rgba(0, 0, 0, 0.4),
    0 4px 12px rgba(0, 0, 0, 0.3);
  --elev-2:
    0 1px 2px rgba(0, 0, 0, 0.5),
    0 8px 24px rgba(0, 0, 0, 0.35);
  --elev-3:
    0 2px 4px rgba(0, 0, 0, 0.5),
    0 16px 40px rgba(0, 0, 0, 0.45);
}

/* ----------------------------------------------------------------------------
   2. Tipografia display
   ---------------------------------------------------------------------------- */
body {
  font-feature-settings: "ss01", "cv11", "cv02";
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

h1, h2, h3, .h1, .h2, .h3,
.section-title,
.card-title,
.modal-title,
.tab-title,
.stat-value,
.cal-month-label,
#cal-month-label,
.btn-primary {
  font-family: var(--font-display);
  letter-spacing: -0.022em;
}

h1, .h1 { font-weight: 700; }
h2, .h2 { font-weight: 700; }
h3, .h3 { font-weight: 650; }

/* Numeri tabulari ovunque conta */
.cal-day-number,
.cal-cell,
.stat-value,
.stat-number,
.appt-time,
.kpi-value,
.price,
.qty,
[data-numeric],
time {
  font-variant-numeric: tabular-nums lining-nums;
  font-feature-settings: "tnum", "lnum";
}

/* ----------------------------------------------------------------------------
   3. Microinterazioni: pulsanti con spring physics + scale press
   ---------------------------------------------------------------------------- */
.btn {
  transition:
    transform 0.18s var(--ease-spring),
    filter 0.18s var(--ease-out-quart),
    background 0.2s var(--ease-out-quart),
    box-shadow 0.2s var(--ease-out-quart);
  will-change: transform;
}

.btn:active {
  transform: scale(0.965);
  transition-duration: 0.06s;
}

.btn-primary {
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.22) inset,
    0 1px 2px rgba(115, 25, 130, 0.18),
    0 4px 14px rgba(115, 25, 130, 0.22),
    0 12px 32px rgba(115, 25, 130, 0.14);
}

.btn-primary:hover {
  filter: brightness(1.06) saturate(1.05);
  transform: translateY(-0.5px);
}

.btn-primary:active {
  filter: brightness(0.95);
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.22) inset,
    0 1px 1px rgba(115, 25, 130, 0.2);
}

/* Tap ripple sottile (mobile-friendly, niente JS) */
.btn-primary,
.nav-btn,
.cal-cell {
  -webkit-tap-highlight-color: transparent;
}

/* ----------------------------------------------------------------------------
   4. Card system: ombre a 2 livelli + hover lift
   ---------------------------------------------------------------------------- */
.card {
  box-shadow: var(--elev-1);
  transition:
    box-shadow 0.24s var(--ease-out-quart),
    transform 0.24s var(--ease-out-quart);
}

.card:hover {
  box-shadow: var(--elev-2);
}

/* Card cliccabili: lift al hover */
a.card:hover,
button.card:hover,
.card[role="button"]:hover,
.card.is-interactive:hover {
  transform: translateY(-1px);
  box-shadow: var(--elev-2);
}

.calendar-card,
.modal-panel,
.agenda-aside-quick {
  box-shadow: var(--elev-2);
}

/* ----------------------------------------------------------------------------
   5. Bottom nav: indicator pill animato sulla tab attiva
   ---------------------------------------------------------------------------- */
.bottom-nav {
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.75) inset,
    0 2px 8px rgba(15, 23, 42, 0.06),
    0 12px 36px rgba(15, 23, 42, 0.10);
}

.bottom-nav .nav-btn {
  position: relative;
  transition:
    transform 0.16s var(--ease-spring),
    color 0.18s var(--ease-out-quart);
  -webkit-tap-highlight-color: transparent;
}

.bottom-nav .nav-btn:active {
  transform: scale(0.92);
}

/* Pill SCORREVOLE che si sposta tra le tab attive.
   La posizione (--pill-x) e larghezza (--pill-w) sono aggiornate da ui-polish.js
   in base alla tab attiva. */
.bottom-nav {
  position: fixed;
}
.bottom-nav::before {
  content: "";
  position: absolute;
  top: 6px;
  bottom: 6px;
  left: 0;
  width: var(--pill-w, 0px);
  transform: translateX(var(--pill-x, 0px));
  border-radius: 16px;
  background:
    radial-gradient(circle at 30% 20%, color-mix(in srgb, var(--mhe) 18%, transparent), transparent 70%),
    color-mix(in srgb, var(--mhe) 12%, transparent);
  box-shadow:
    inset 0 0 0 1px color-mix(in srgb, var(--mhe) 18%, transparent),
    0 4px 14px color-mix(in srgb, var(--mhe) 18%, transparent);
  opacity: var(--pill-opacity, 0);
  z-index: 0;
  pointer-events: none;
  transition:
    transform 0.42s var(--ease-spring),
    width 0.42s var(--ease-spring),
    opacity 0.22s var(--ease-out-quart);
  will-change: transform, width;
}

.bottom-nav .nav-btn {
  position: relative;
  z-index: 1;
}

.bottom-nav .nav-btn.active {
  color: var(--mhe);
}

:root[data-appearance="dark"] .bottom-nav::before {
  background:
    radial-gradient(circle at 30% 20%, color-mix(in srgb, var(--mhe) 40%, transparent), transparent 70%),
    color-mix(in srgb, var(--mhe) 28%, transparent);
}

/* ----------------------------------------------------------------------------
   6. Calendario: pill morbido per "oggi", heatmap dots, slide tra mesi
   ---------------------------------------------------------------------------- */

/* "Oggi" senza ring duro: solo pillola tonda piena con tinta del brand */
.cal-cell.today {
  border-color: transparent;
  background: linear-gradient(
    180deg,
    color-mix(in srgb, var(--mhe) 7%, var(--cal-cell-bg)),
    var(--cal-cell-bg) 85%
  );
  box-shadow: inset 0 0 0 1.5px color-mix(in srgb, var(--mhe) 28%, transparent);
}

.cal-cell.today .cal-day-number {
  background: var(--mhe);
  color: #fff;
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.22) inset,
    0 2px 6px color-mix(in srgb, var(--mhe) 35%, transparent);
}

.cal-cell.today.selected {
  background: linear-gradient(180deg, var(--mhe), color-mix(in srgb, var(--mhe) 88%, #000));
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.22) inset,
    0 6px 20px color-mix(in srgb, var(--mhe) 35%, transparent);
}

.cal-cell.selected {
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.22) inset,
    0 4px 14px color-mix(in srgb, var(--mhe) 28%, transparent);
}

.cal-cell {
  transition:
    background 0.22s var(--ease-out-quart),
    border-color 0.22s var(--ease-out-quart),
    box-shadow 0.22s var(--ease-out-quart),
    transform 0.14s var(--ease-spring);
}

.cal-cell:active {
  transform: scale(0.94);
}

/* Heatmap dots: scala la grandezza dei pallini in base al numero di appt */
.cal-dot {
  transition: transform 0.18s var(--ease-spring);
}

.cal-cell[data-events="2"] .cal-dot {
  transform: scale(1.18);
}
.cal-cell[data-events="3"] .cal-dot {
  transform: scale(1.3);
}
.cal-cell[data-events="many"] .cal-dot {
  transform: scale(1.35);
  background: color-mix(in srgb, var(--mhe) 70%, var(--accent));
}

/* Slide animation tra mesi */
@keyframes mhe-slide-in-right {
  from { opacity: 0; transform: translateX(14px); }
  to { opacity: 1; transform: translateX(0); }
}
@keyframes mhe-slide-in-left {
  from { opacity: 0; transform: translateX(-14px); }
  to { opacity: 1; transform: translateX(0); }
}
#calendar-body.cal-slide-next {
  animation: mhe-slide-in-right 0.28s var(--ease-out-quart) both;
}
#calendar-body.cal-slide-prev {
  animation: mhe-slide-in-left 0.28s var(--ease-out-quart) both;
}

/* Frecce mese più "tap-friendly" con press feedback */
#cal-prev,
#cal-next {
  -webkit-tap-highlight-color: transparent;
  transition: transform 0.16s var(--ease-spring), background 0.2s;
}
#cal-prev:active,
#cal-next:active {
  transform: scale(0.88);
}

/* ----------------------------------------------------------------------------
   7. Modal / Bottom sheet su mobile
   ---------------------------------------------------------------------------- */
.modal-backdrop {
  backdrop-filter: blur(16px) saturate(140%);
  -webkit-backdrop-filter: blur(16px) saturate(140%);
  background: color-mix(in srgb, #0f172a 32%, transparent);
}

.modal-panel {
  box-shadow: var(--elev-3);
  transition:
    transform 0.32s var(--ease-spring),
    opacity 0.24s var(--ease-out-quart);
}

@keyframes mhe-modal-pop {
  from { opacity: 0; transform: scale(0.96) translateY(8px); }
  to { opacity: 1; transform: scale(1) translateY(0); }
}
@keyframes mhe-sheet-up {
  from { opacity: 0; transform: translateY(28px); }
  to { opacity: 1; transform: translateY(0); }
}

.modal:not(.hidden) .modal-panel {
  animation: mhe-modal-pop 0.28s var(--ease-spring) both;
}

/* Bottom sheet sui mobile: il modale sale da sotto come iOS sheet */
@media (max-width: 768px) {
  .modal:not(.modal--onboarding):not(.hidden) .modal-panel {
    animation: mhe-sheet-up 0.32s var(--ease-spring) both;
  }
  .modal:not(.modal--onboarding) .modal-panel {
    border-top-left-radius: 22px;
    border-top-right-radius: 22px;
    border-bottom-left-radius: 0;
    border-bottom-right-radius: 0;
  }
  /* Grabber visivo iOS in cima al sheet */
  .modal:not(.modal--onboarding) .modal-panel::after {
    content: "";
    position: absolute;
    top: 8px;
    left: 50%;
    transform: translateX(-50%);
    width: 38px;
    height: 4px;
    border-radius: 999px;
    background: var(--ios-grabber);
    z-index: 2;
    pointer-events: none;
  }
}

/* ----------------------------------------------------------------------------
   8. Skeleton loaders (shimmer)
   ---------------------------------------------------------------------------- */
@keyframes mhe-skeleton-shimmer {
  0% { background-position: -240px 0; }
  100% { background-position: 240px 0; }
}

.skeleton,
[data-skeleton] {
  display: block;
  border-radius: var(--radius-sm, 10px);
  background:
    linear-gradient(
      90deg,
      var(--tint-1) 0,
      var(--tint-2) 40%,
      var(--tint-1) 80%
    ) 0 0 / 480px 100% no-repeat,
    var(--tint-1);
  animation: mhe-skeleton-shimmer 1.4s linear infinite;
  color: transparent;
  user-select: none;
  pointer-events: none;
}

.skeleton-line {
  height: 12px;
  margin: 6px 0;
}
.skeleton-line--lg { height: 18px; }
.skeleton-line--sm { height: 9px; }
.skeleton-card {
  height: 64px;
}

/* ----------------------------------------------------------------------------
   9. AI Assistant: gradient bordo animato + shimmer in attesa
   ---------------------------------------------------------------------------- */

/* Sostituisco l'effetto FAB AI con un alone più morbido e premium */
.ai-fab {
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.35) inset,
    0 6px 18px color-mix(in srgb, var(--mhe) 32%, transparent),
    0 16px 48px color-mix(in srgb, var(--mhe) 22%, transparent);
  transition:
    transform 0.2s var(--ease-spring),
    box-shadow 0.3s var(--ease-out-quart);
}

.ai-fab:hover {
  transform: translateY(-1.5px);
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.35) inset,
    0 8px 22px color-mix(in srgb, var(--mhe) 38%, transparent),
    0 22px 60px color-mix(in srgb, var(--mhe) 28%, transparent);
}

.ai-fab:active {
  transform: scale(0.96);
}

/* Alone attorno al FAB AI: visibile e in rotazione SOLO al hover desktop.
   Su mobile e in stato normale è invisibile (niente animazione perpetua). */
.ai-fab::after {
  content: "";
  position: absolute;
  inset: -6px;
  border-radius: 999px;
  padding: 2px;
  background: conic-gradient(
    from 0deg,
    color-mix(in srgb, var(--accent) 50%, transparent),
    color-mix(in srgb, var(--mhe) 80%, transparent),
    color-mix(in srgb, var(--accent) 50%, transparent),
    color-mix(in srgb, var(--mhe) 80%, transparent),
    color-mix(in srgb, var(--accent) 50%, transparent)
  );
  -webkit-mask:
    linear-gradient(#000 0 0) content-box,
    linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask:
    linear-gradient(#000 0 0) content-box,
    linear-gradient(#000 0 0);
  mask-composite: exclude;
  opacity: 0;
  transition: opacity 0.3s var(--ease-out-quart);
  pointer-events: none;
}

@media (hover: hover) and (pointer: fine) {
  .ai-fab:hover::after {
    opacity: 0.55;
    animation: mhe-ai-spin 6s linear infinite;
  }
}

@keyframes mhe-ai-spin {
  to { transform: rotate(360deg); }
}

/* Shimmer testo per la risposta in arrivo dall'AI */
.ai-thinking,
[data-ai-thinking] {
  background: linear-gradient(
    90deg,
    var(--muted) 0,
    var(--mhe) 50%,
    var(--muted) 100%
  );
  background-size: 240% 100%;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  animation: mhe-ai-shimmer 1.6s linear infinite;
}

@keyframes mhe-ai-shimmer {
  0% { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}

/* ----------------------------------------------------------------------------
   10. Toast: micro pop-in con spring
   ---------------------------------------------------------------------------- */
@keyframes mhe-toast-pop {
  0% { opacity: 0; transform: translate(-50%, 18px) scale(0.92); }
  60% { opacity: 1; transform: translate(-50%, -4px) scale(1.02); }
  100% { opacity: 1; transform: translate(-50%, 0) scale(1); }
}
#toast.visible,
.toast.visible {
  animation: mhe-toast-pop 0.42s var(--ease-spring) both;
}

/* ----------------------------------------------------------------------------
   10b. Pannello Assistente AI: niente animazioni perpetue/drammatiche all'apertura
   ---------------------------------------------------------------------------- */

/* Pannello AI: apertura semplice fade-in, senza rise / scale */
.ai-assistant-drawer:not(.hidden) .ai-assistant-panel {
  animation: mhe-ai-panel-fade 0.18s ease-out both;
}

@keyframes mhe-ai-panel-fade {
  from { opacity: 0; }
  to { opacity: 1; }
}

/* Aurora di sfondo del pannello AI: ferma. Resta visibile ma immobile. */
.ai-assistant-panel::before {
  animation: none !important;
}

/* Pulsa "breathing" del thread durante l'attesa: fermo. */
.ai-assistant-panel.is-thinking .ai-assistant-thread {
  animation: none !important;
}

/* ----------------------------------------------------------------------------
   11. Accessibilità: rispetta prefers-reduced-motion
   ---------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}