/* ════════════════════════════════════════════════════════════════════════
   Veriax — Direzione A · "Sobrio evoluto" — SKIN per le pagine di lavoro
   (Object: Card / Tabella / Directory · Edit: Generale).

   Stessa architettura e interazioni del prodotto: cambia SOLO il linguaggio
   visivo, allineato alla dashboard A. Profondità per strati (top-light sulle
   card), hairline precisi, motion mirato all'ingresso, glow accent solo su
   CTA + selezione. Sfondo piatto (nessuna griglia) come la home A.

   Token nuovi (ereditati da home.css): --card-toplight, --glow-accent, --live.
   ════════════════════════════════════════════════════════════════════════ */
@import url("home.css");
@import url("next-theme.css");

/* ── Profondità sulle superfici ─────────────────────────────────────────── */
.card,
.folder-card,
.idn-card,
.list-view,
.empty {
  background-image: var(--card-toplight);
}
/* FIRMA A — card "editoriali": molto arrotondate, bordo hairline, leggera
   elevazione a riposo (sembrano galleggiare sul fondo piatto). */
.card, .folder-card {
  border-radius: 18px;
  border-color: var(--border-faint);
  box-shadow: var(--shadow-sm);
}
.card { transition: border-color .14s, background .14s, transform .14s, box-shadow .14s; }
.card:hover { transform: translateY(-2px); box-shadow: var(--shadow); }
.folder-card { transition: border-color .14s, background .14s, transform .14s, box-shadow .14s; }
.folder-card:hover { transform: translateY(-2px); box-shadow: var(--shadow); }
/* Controlli a pillola — linguaggio morbido e coerente con le card */
.btn, .search, .view-switch, .view-switch button, .iconbtn { border-radius: 999px; }

/* Selezione = bordo accent + alone morbido (sobrio) */
.card.selected,
.folder-card.selected,
.list-row.selected {
  box-shadow: 0 0 0 1px var(--accent-ring), 0 6px 20px -10px rgba(78,124,255,.5);
}

/* ── Header pagina ──────────────────────────────────────────────────────── */
.page-type-badge { box-shadow: inset 0 0 0 1px color-mix(in oklab, currentColor 22%, transparent); }
.page-title { letter-spacing: -.015em; }

/* CTA principale: accent pieno, leggero glow al hover (unico elemento "vivo") */
.btn.primary { transition: background .14s, box-shadow .14s, transform .1s; }
.btn.primary:hover { box-shadow: var(--glow-accent); }
.btn.primary:active { transform: translateY(1px); }

/* ── Toolbar / ricerca / switch vista ───────────────────────────────────── */
.search { transition: border-color .14s, box-shadow .14s; }
.search:focus-within { box-shadow: 0 0 0 3px var(--accent-soft); }
.view-switch button.on { box-shadow: 0 1px 2px rgba(0,0,0,.18); }
html[data-theme="light"] .view-switch button.on { box-shadow: var(--shadow-sm); }

/* ── Tabella: header sticky, righe a hairline ───────────────────────────── */
.list-view.flat-objects { position: relative; }
.list-row.head {
  position: sticky; top: 0; z-index: 4;
  backdrop-filter: blur(6px);
  background: color-mix(in oklab, var(--bg-elev) 88%, transparent);
}
.list-row:not(.head) { transition: background .12s; }

/* tipo: pallino colorato già presente — solo rifinitura */
.card-tipo-dot { box-shadow: 0 0 0 3px color-mix(in oklab, currentColor 16%, transparent); }

/* ── Motion d'ingresso — mirato e breve (mai loop) ──────────────────────── */
@media (prefers-reduced-motion: no-preference) {
  @keyframes aCardIn { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
  .cards .card,
  .folder-grid .folder-card { animation: aCardIn .42s cubic-bezier(.2,.8,.25,1) both; }
  .cards .card:nth-child(1),.folder-grid .folder-card:nth-child(1){animation-delay:.00s}
  .cards .card:nth-child(2),.folder-grid .folder-card:nth-child(2){animation-delay:.03s}
  .cards .card:nth-child(3),.folder-grid .folder-card:nth-child(3){animation-delay:.06s}
  .cards .card:nth-child(4),.folder-grid .folder-card:nth-child(4){animation-delay:.09s}
  .cards .card:nth-child(5),.folder-grid .folder-card:nth-child(5){animation-delay:.12s}
  .cards .card:nth-child(6),.folder-grid .folder-card:nth-child(6){animation-delay:.15s}
  .cards .card:nth-child(7){animation-delay:.18s}
  .cards .card:nth-child(8){animation-delay:.21s}
  .cards .card:nth-child(9){animation-delay:.24s}
  .cards .card:nth-child(n+10){animation-delay:.27s}

  @keyframes aRowIn { from { opacity: 0; transform: translateY(5px); } to { opacity: 1; transform: none; } }
  .list-view.flat-objects .list-row:not(.head) { animation: aRowIn .3s ease both; }

  /* Identità: l'editor entra dolcemente */
  @keyframes aPanelIn { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
  .idn-card, .cap-panel { animation: aPanelIn .4s cubic-bezier(.2,.8,.25,1) both; }
}

/* ── Edit (Generale): rifinitura sobria ─────────────────────────────────── */
.idn-card-head { background: var(--card-toplight); }
.ty-card { transition: border-color .14s, background .14s, box-shadow .14s, transform .12s; }
.ty-card:hover { transform: translateY(-1px); }
.ty-card.on { box-shadow: 0 0 0 1px var(--accent-ring), 0 6px 18px -10px rgba(78,124,255,.5); }
.idn-input:focus, .idn-textarea:focus { box-shadow: 0 0 0 3px var(--accent-soft); }
.ae-tab.on::after { box-shadow: 0 0 10px -1px var(--accent-ring); }

/* Annotazione direzione (iniettata dal file HTML) */
.skin-note {
  display: flex; flex-wrap: wrap; gap: 8px 10px; align-items: center;
  margin: 22px 0 0; padding: 13px 15px;
  border: 1px dashed var(--border); border-radius: var(--r-lg);
  background: color-mix(in oklab, var(--bg-card) 70%, transparent);
}
.skin-note .nb-tag {
  font-family: var(--mono); font-size: 10.5px; letter-spacing: .05em;
  text-transform: uppercase; color: var(--accent);
  border: 1px solid var(--accent-ring); border-radius: 5px; padding: 2px 7px;
}
.skin-note .nb-txt { font-size: 12px; color: var(--text-muted); }
.skin-note .nb-txt b { color: var(--text); font-weight: 560; }
.skin-note .nb-sep { width: 1px; height: 13px; background: var(--border); }