/* ══════════════════════════════════════════════════════════════════════════
   Home Web — Design system
   Palette calda e accessibile ispirata alle carte CAA (icona + etichetta)
   già usate in tutta l'app per la comunicazione aumentativa: ogni superficie
   interattiva (tile, card, bottone) ne eredita la stessa "grammatica"
   visiva — angoli morbidi, medaglione colorato, movimento gentile al tocco.
   ══════════════════════════════════════════════════════════════════════════ */

:root {
  /* ── Palette ── */
  --paper:        #FBF6EF;
  --surface:      #FFFFFF;
  --ink:          #362A24;
  --ink-muted:    #7A6B60;
  --border-soft:  rgba(54, 42, 36, .10);

  --berry:        #B3184F;
  --berry-dark:   #8E1240;
  --honey:        #E2963A;
  --honey-dark:   #C97B22;
  --sage:         #4F7A67;
  --sage-dark:    #3C5F50;
  --sky:          #2F7DA6;
  --sky-dark:     #256485;
  --brick:        #C0563F;
  --brick-dark:   #A0452F;

  /* ── Tipografia ── */
  --font-display: 'Fraunces', Georgia, serif;
  --font-body:    'Plus Jakarta Sans', 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;

  /* ── Forme / ombre ── */
  --radius-sm: .6rem;
  --radius-md: 1rem;
  --radius-lg: 1.4rem;
  --shadow-sm: 0 2px 10px rgba(54, 42, 36, .06);
  --shadow-md: 0 10px 26px rgba(54, 42, 36, .10);
  --shadow-lift: 0 16px 36px rgba(54, 42, 36, .16);

  /* ── Rimappatura variabili Bootstrap: si propaga a tutti i componenti
     (badge, alert, form focus ring, link, utilities bg-*/text-*/border-*)
     su ogni pagina dell'app senza dover toccare i singoli template. ── */
  --bs-body-font-family: var(--font-body);
  --bs-body-bg: var(--paper);
  --bs-body-color: var(--ink);
  --bs-emphasis-color: var(--ink);
  --bs-secondary-color: var(--ink-muted);
  --bs-border-color: var(--border-soft);
  --bs-border-radius: var(--radius-sm);
  --bs-border-radius-sm: .45rem;
  --bs-border-radius-lg: var(--radius-md);
  --bs-border-radius-xl: var(--radius-lg);

  --bs-primary: var(--berry);
  --bs-primary-rgb: 179, 24, 79;
  --bs-secondary: var(--ink-muted);
  --bs-secondary-rgb: 122, 107, 96;
  --bs-success: var(--sage);
  --bs-success-rgb: 79, 122, 103;
  --bs-info: var(--sky);
  --bs-info-rgb: 47, 125, 166;
  --bs-warning: var(--honey);
  --bs-warning-rgb: 226, 150, 58;
  --bs-danger: var(--brick);
  --bs-danger-rgb: 192, 86, 63;
  --bs-light: var(--paper);
  --bs-light-rgb: 251, 246, 239;
  --bs-dark: var(--ink);
  --bs-dark-rgb: 54, 42, 36;

  --bs-link-color: var(--berry);
  --bs-link-color-rgb: 179, 24, 79;
  --bs-link-hover-color: var(--berry-dark);
  --bs-link-hover-color-rgb: 142, 18, 64;
}

/* Rispetto delle preferenze utente: nessuna animazione se richiesto */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
    scroll-behavior: auto !important;
  }
}

/* ── Base ─────────────────────────────────────────────────────────────── */

body {
  font-family: var(--font-body);
  background-color: var(--paper);
  color: var(--ink);
}

h1, h2, h3, h4, .brand-logo {
  font-family: var(--font-display);
  font-weight: 600;
  letter-spacing: -.01em;
}

a { color: var(--berry); }
a:hover { color: var(--berry-dark); }

:focus-visible {
  outline: 3px solid rgba(226, 150, 58, .55);
  outline-offset: 2px;
}

/* ── Navbar ───────────────────────────────────────────────────────────── */

.navbar.bg-dark {
  background-color: var(--ink) !important;
  box-shadow: var(--shadow-md);
}

.brand-logo {
  font-size: 1.3rem;
  color: #fff !important;
}

/* Scritta "CAAStory": stesso carattere del logo (Pacifico, script arrotondato) —
   usata solo per il nome del marchio, non per i titoli normali delle pagine. */
.brand-word {
  font-family: 'Pacifico', var(--font-display);
  font-weight: 400;
  letter-spacing: 0;
}

.navbar .dropdown-menu-dark {
  background-color: var(--ink);
  border: 1px solid rgba(255, 255, 255, .08);
  border-radius: var(--radius-md);
  padding: .5rem;
}

.navbar .dropdown-item {
  border-radius: .5rem;
  padding: .5rem .75rem;
  transition: background-color .15s ease, transform .15s ease;
}

.navbar .dropdown-item:hover,
.navbar .dropdown-item:focus {
  background-color: rgba(226, 150, 58, .18);
  transform: translateX(2px);
}

/* ── Card generiche ───────────────────────────────────────────────────── */

.card {
  border: 1px solid var(--border-soft);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-sm);
  margin-bottom: 20px;
  transition: transform .2s ease, box-shadow .2s ease;
}

.table-container {
  background: var(--surface);
  padding: 20px;
  border-radius: var(--radius-md);
}

/* ── Bottoni: retinta i varianti Bootstrap sulla nuova palette calda ──── */

.btn {
  border-radius: var(--radius-sm);
  font-weight: 600;
  transition: transform .15s ease, box-shadow .15s ease, background-color .15s ease, border-color .15s ease;
}
.btn:active { transform: translateY(1px); }

.btn-primary {
  --bs-btn-bg: var(--berry);
  --bs-btn-border-color: var(--berry);
  --bs-btn-hover-bg: var(--berry-dark);
  --bs-btn-hover-border-color: var(--berry-dark);
  --bs-btn-active-bg: var(--berry-dark);
  --bs-btn-active-border-color: var(--berry-dark);
  --bs-btn-disabled-bg: var(--berry);
  --bs-btn-disabled-border-color: var(--berry);
  --bs-btn-focus-shadow-rgb: 179, 24, 79;
}
.btn-outline-primary {
  --bs-btn-color: var(--berry);
  --bs-btn-border-color: var(--berry);
  --bs-btn-hover-bg: var(--berry);
  --bs-btn-hover-border-color: var(--berry);
  --bs-btn-active-bg: var(--berry);
  --bs-btn-active-border-color: var(--berry);
  --bs-btn-focus-shadow-rgb: 179, 24, 79;
}

.btn-secondary {
  --bs-btn-bg: var(--ink-muted);
  --bs-btn-border-color: var(--ink-muted);
  --bs-btn-hover-bg: var(--ink);
  --bs-btn-hover-border-color: var(--ink);
  --bs-btn-active-bg: var(--ink);
  --bs-btn-active-border-color: var(--ink);
}
.btn-outline-secondary {
  --bs-btn-color: var(--ink-muted);
  --bs-btn-border-color: var(--ink-muted);
  --bs-btn-hover-bg: var(--ink-muted);
  --bs-btn-hover-border-color: var(--ink-muted);
  --bs-btn-active-bg: var(--ink-muted);
  --bs-btn-active-border-color: var(--ink-muted);
}

.btn-success {
  --bs-btn-bg: var(--sage);
  --bs-btn-border-color: var(--sage);
  --bs-btn-hover-bg: var(--sage-dark);
  --bs-btn-hover-border-color: var(--sage-dark);
  --bs-btn-active-bg: var(--sage-dark);
  --bs-btn-active-border-color: var(--sage-dark);
}
.btn-outline-success {
  --bs-btn-color: var(--sage);
  --bs-btn-border-color: var(--sage);
  --bs-btn-hover-bg: var(--sage);
  --bs-btn-hover-border-color: var(--sage);
  --bs-btn-active-bg: var(--sage);
  --bs-btn-active-border-color: var(--sage);
}

.btn-warning {
  --bs-btn-bg: var(--honey);
  --bs-btn-border-color: var(--honey);
  --bs-btn-color: #fff;
  --bs-btn-hover-bg: var(--honey-dark);
  --bs-btn-hover-border-color: var(--honey-dark);
  --bs-btn-hover-color: #fff;
  --bs-btn-active-bg: var(--honey-dark);
  --bs-btn-active-border-color: var(--honey-dark);
  --bs-btn-active-color: #fff;
}
.btn-outline-warning {
  --bs-btn-color: var(--honey-dark);
  --bs-btn-border-color: var(--honey);
  --bs-btn-hover-bg: var(--honey);
  --bs-btn-hover-border-color: var(--honey);
  --bs-btn-hover-color: #fff;
  --bs-btn-active-bg: var(--honey);
  --bs-btn-active-border-color: var(--honey);
}

.btn-danger {
  --bs-btn-bg: var(--brick);
  --bs-btn-border-color: var(--brick);
  --bs-btn-hover-bg: var(--brick-dark);
  --bs-btn-hover-border-color: var(--brick-dark);
  --bs-btn-active-bg: var(--brick-dark);
  --bs-btn-active-border-color: var(--brick-dark);
}
.btn-outline-danger {
  --bs-btn-color: var(--brick);
  --bs-btn-border-color: var(--brick);
  --bs-btn-hover-bg: var(--brick);
  --bs-btn-hover-border-color: var(--brick);
  --bs-btn-active-bg: var(--brick);
  --bs-btn-active-border-color: var(--brick);
}

.btn-info {
  --bs-btn-bg: var(--sky);
  --bs-btn-border-color: var(--sky);
  --bs-btn-color: #fff;
  --bs-btn-hover-bg: var(--sky-dark);
  --bs-btn-hover-border-color: var(--sky-dark);
  --bs-btn-hover-color: #fff;
}
.btn-outline-info {
  --bs-btn-color: var(--sky);
  --bs-btn-border-color: var(--sky);
  --bs-btn-hover-bg: var(--sky);
  --bs-btn-hover-border-color: var(--sky);
  --bs-btn-hover-color: #fff;
}

/* ── Badge / alert / form / liste: stessa retinta puntuale ───────────── */

.badge.bg-primary   { background-color: var(--berry) !important; }
.badge.bg-secondary { background-color: var(--ink-muted) !important; }
.badge.bg-success   { background-color: var(--sage) !important; }
.badge.bg-warning   { background-color: var(--honey) !important; color: #fff !important; }
.badge.bg-danger    { background-color: var(--brick) !important; }
.badge.bg-info      { background-color: var(--sky) !important; }

.alert-primary { background-color: rgba(179,24,79,.10); border-color: rgba(179,24,79,.25); color: var(--berry-dark); }
.alert-success { background-color: rgba(79,122,103,.12); border-color: rgba(79,122,103,.28); color: var(--sage-dark); }
.alert-warning { background-color: rgba(226,150,58,.14); border-color: rgba(226,150,58,.30); color: var(--honey-dark); }
.alert-danger  { background-color: rgba(192,86,63,.12); border-color: rgba(192,86,63,.28); color: var(--brick-dark); }
.alert-info    { background-color: rgba(47,125,166,.12); border-color: rgba(47,125,166,.28); color: var(--sky-dark); }

.form-control:focus, .form-select:focus {
  border-color: var(--honey);
  box-shadow: 0 0 0 .2rem rgba(226, 150, 58, .25);
}

.nav-pills .nav-link.active, .nav-tabs .nav-link.active {
  background-color: var(--berry);
  border-color: var(--berry);
}

.list-group-item.active {
  background-color: var(--berry);
  border-color: var(--berry);
}

.page-link { color: var(--berry); }
.page-item.active .page-link { background-color: var(--berry); border-color: var(--berry); }

.progress-bar { background-color: var(--berry); }
.progress-bar.bg-danger  { background-color: var(--brick) !important; }
.progress-bar.bg-warning { background-color: var(--honey) !important; }
.progress-bar.bg-success { background-color: var(--sage) !important; }

/* ── Movimento d'ingresso, gentile e con priorità sul primo blocco ──── */

@keyframes rise-in {
  from { opacity: 0; transform: translateY(14px); }
  to   { opacity: 1; transform: translateY(0); }
}

.container > .row > [class*="col-"] {
  animation: rise-in .5s cubic-bezier(.22,.61,.36,1) both;
}
.tile-grid > * {
  animation: pop-in .5s cubic-bezier(.22,.61,.36,1) both;
}
.container > .row > [class*="col-"]:nth-child(1),  .tile-grid > *:nth-child(1)  { animation-delay: .02s; }
.container > .row > [class*="col-"]:nth-child(2),  .tile-grid > *:nth-child(2)  { animation-delay: .06s; }
.container > .row > [class*="col-"]:nth-child(3),  .tile-grid > *:nth-child(3)  { animation-delay: .10s; }
.container > .row > [class*="col-"]:nth-child(4),  .tile-grid > *:nth-child(4)  { animation-delay: .14s; }
.container > .row > [class*="col-"]:nth-child(5),  .tile-grid > *:nth-child(5)  { animation-delay: .18s; }
.container > .row > [class*="col-"]:nth-child(6),  .tile-grid > *:nth-child(6)  { animation-delay: .22s; }
.container > .row > [class*="col-"]:nth-child(7),  .tile-grid > *:nth-child(7)  { animation-delay: .26s; }
.container > .row > [class*="col-"]:nth-child(8),  .tile-grid > *:nth-child(8)  { animation-delay: .30s; }
.container > .row > [class*="col-"]:nth-child(9),  .tile-grid > *:nth-child(9)  { animation-delay: .34s; }
.container > .row > [class*="col-"]:nth-child(n+10),
.tile-grid > *:nth-child(n+10) { animation-delay: .38s; }

/* ── Movimento giocoso: pensato per bambini, sempre gentile ───────────
   Usato dalle superfici che i bambini toccano davvero (dashboard,
   pittogrammi CAA, comunicatore, calendario). Il blocco reduced-motion
   in cima al file azzera comunque tutto per chi lo richiede. ──────── */

@keyframes pop-in {
  0%   { opacity: 0; transform: scale(.6) translateY(8px); }
  60%  { opacity: 1; transform: scale(1.08) translateY(-2px); }
  100% { opacity: 1; transform: scale(1) translateY(0); }
}

@keyframes wiggle {
  0%, 100% { transform: rotate(0deg) scale(1); }
  20%      { transform: rotate(-10deg) scale(1.05); }
  40%      { transform: rotate(8deg) scale(1.05); }
  60%      { transform: rotate(-6deg) scale(1.03); }
  80%      { transform: rotate(4deg) scale(1.02); }
}

@keyframes breathe {
  0%, 100% { transform: scale(1); }
  50%      { transform: scale(1.07); }
}

@keyframes tap-bounce {
  0%   { transform: scale(1); }
  35%  { transform: scale(.84); }
  70%  { transform: scale(1.1); }
  100% { transform: scale(1); }
}

.pop-in { animation: pop-in .45s cubic-bezier(.34,1.56,.64,1) both; }

/* ── Sistema "carta CAA": firma visiva dell'app, usata dalla dashboard
   e riusabile ovunque serva un collegamento a una funzionalità ────────── */

.tile-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(190px, 1fr));
  gap: 1.1rem;
}

.feature-tile {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: .55rem;
  text-align: center;
  text-decoration: none;
  color: var(--ink);
  background: var(--surface);
  border: 1px solid var(--border-soft);
  border-radius: var(--radius-lg);
  padding: 1.6rem 1.1rem;
  box-shadow: var(--shadow-sm);
  transition: transform .22s cubic-bezier(.22,.61,.36,1), box-shadow .22s ease, border-color .22s ease;
}

.feature-tile:hover,
.feature-tile:focus-visible {
  transform: translateY(-6px);
  box-shadow: var(--shadow-lift);
  color: var(--ink);
  border-color: transparent;
}

.feature-tile:active {
  transform: translateY(-2px) scale(.98);
}
.feature-tile:active .feature-tile__icon {
  animation: tap-bounce .4s ease;
}

.feature-tile__icon {
  width: 60px;
  height: 60px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.5rem;
  color: #fff;
  background: var(--tile-accent, var(--berry));
  box-shadow: 0 6px 16px rgba(54, 42, 36, .18);
  transition: box-shadow .22s ease;
  animation: breathe 3.6s ease-in-out infinite;
  animation-delay: inherit;
}

.feature-tile:hover .feature-tile__icon {
  animation: wiggle .55s ease-in-out;
  box-shadow: 0 0 0 6px color-mix(in srgb, var(--tile-accent, var(--berry)) 22%, transparent),
              0 8px 20px rgba(54, 42, 36, .22);
}

.feature-tile__title {
  font-weight: 700;
  font-size: 1rem;
  margin: 0;
}

.feature-tile__desc {
  font-size: .82rem;
  color: var(--ink-muted);
  margin: 0;
  line-height: 1.35;
}

.tile-berry { --tile-accent: var(--berry); }
.tile-honey { --tile-accent: var(--honey); }
.tile-sage  { --tile-accent: var(--sage); }
.tile-sky   { --tile-accent: var(--sky); }