/* Solo regole CSS native: niente @apply (non funziona con Tailwind CDN). */

/* ----------------------------------------------------------------
   Sfondo del board (area centrale dell'app) — stile Trello classico
   ---------------------------------------------------------------- */
.app-body {
  background: #F1F2F4;
}
.board-bg {
  /* gradient blu Trello molto leggero, in modo che le card bianche risaltino */
  background:
    linear-gradient(180deg, rgba(2,106,167,0.08) 0%, rgba(2,106,167,0.00) 220px),
    #F1F2F4;
}

/* ----------------------------------------------------------------
   Login screen: sfondo blu Trello con sfumatura
   ---------------------------------------------------------------- */
.login-bg {
  background:
    radial-gradient(1200px 700px at 20% 10%, #1976D2 0%, transparent 60%),
    radial-gradient(900px 600px at 80% 90%, #5BA4CF 0%, transparent 55%),
    linear-gradient(135deg, #026AA7 0%, #0079BF 50%, #1976D2 100%);
}
.drop-shadow {
  text-shadow: 0 1px 2px rgba(0,0,0,0.15);
}

/* ----------------------------------------------------------------
   Scrollbar (coerente sia su sidebar dark che su board chiaro)
   ---------------------------------------------------------------- */
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-thumb {
  background: #c2c8d0;
  border-radius: 10px;
  border: 2px solid transparent;
  background-clip: padding-box;
}
::-webkit-scrollbar-thumb:hover { background: #94a3b8; background-clip: padding-box; border: 2px solid transparent; }
::-webkit-scrollbar-track { background: transparent; }

/* Sidebar dark: scrollbar più scura */
aside ::-webkit-scrollbar-thumb { background: #3a4148; }
aside ::-webkit-scrollbar-thumb:hover { background: #525a64; }

/* ----------------------------------------------------------------
   Loading spinner (rimane, ma con il blu Trello)
   ---------------------------------------------------------------- */
.spinner {
  width: 28px; height: 28px;
  border: 3px solid #DCDFE4;
  border-top-color: #0C66E4;
  border-radius: 50%;
  animation: spin 0.7s linear infinite;
  display: inline-block;
}
@keyframes spin { to { transform: rotate(360deg); } }

/* ----------------------------------------------------------------
   Hover lift su righe tabella cliccabili (sembrano "card sul board")
   ---------------------------------------------------------------- */
.row-clickable { transition: background 120ms, box-shadow 120ms, transform 120ms; }
.row-clickable:hover {
  background: #F7F8F9;
  cursor: pointer;
}

/* ----------------------------------------------------------------
   Effetto "card sul tavolo": leggero lift + ombra più decisa al hover
   ---------------------------------------------------------------- */
.card-lift { transition: transform 120ms, box-shadow 120ms; }
.card-lift:hover {
  transform: translateY(-1px);
  box-shadow: 0 8px 16px -4px rgba(9,30,66,0.18), 0 0 0 1px rgba(9,30,66,0.08);
}

/* ----------------------------------------------------------------
   Tabelle: header più "trello" (sticky, sfondo chiaro, uppercase)
   ---------------------------------------------------------------- */
table thead th {
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: #44546F;
  background: #F7F8F9;
}