/* ════════════════════════════════════════════════════════════════════════
   Veriax — Direzione B · "Cockpit audace" — 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 B. Griglia di sfondo + bagliore accent,
   gradiente in-famiglia (accent→accent-2) su CTA e elementi chiave, glow al
   hover sulle card, header tabella con sottolineatura a gradiente, dot di
   stato pulsanti. Più energia, leggibilità a regime invariata.

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

/* ── Sfondo "control room": griglia a punti + righe tenui + glow dall'alto ── */
.main, .ae-page-scroll, body {
  background-color: var(--bg-app);
}
.main {
  background-image:
    radial-gradient(880px 380px at 22% -2%, rgba(78,124,255,.16), transparent 68%),
    radial-gradient(680px 420px at 100% 8%, rgba(122,158,255,.08), transparent 70%),
    linear-gradient(var(--grid-line) 1px, transparent 1px),
    radial-gradient(var(--grid-dot) 1px, transparent 1.4px);
  background-size: 100% 100%, 100% 100%, 100% 92px, 24px 24px;
  background-attachment: fixed, fixed, scroll, scroll;
  background-position: 0 0, 0 0, 0 0, -1px -1px;
}
/* Edit page scrolls inside .main too — same treatment already applied. */

/* ── Card: profondità marcata + glow accent al hover ────────────────────── */
.card, .folder-card, .idn-card, .list-view, .empty {
  background-image: var(--card-toplight);
}
/* FIRMA B — card "strumentali": squadrate, bordo marcato, niente ombra a
   riposo (look da pannello tecnico su griglia). Controlli squadrati. */
.card, .folder-card, .idn-card, .list-view, .empty { border-radius: 4px; }
.card, .folder-card { border-color: var(--border-strong); }
.btn, .search, .view-switch, .view-switch button, .iconbtn, .ty-card { border-radius: 4px; }
.card { transition: border-color .15s, background .15s, transform .15s, box-shadow .15s; }
.card:hover { transform: translateY(-2px); border-color: transparent; box-shadow: var(--glow-accent); }
.folder-card { transition: border-color .15s, background .15s, transform .15s, box-shadow .15s; }
.folder-card:hover { transform: translateY(-2px); border-color: transparent; box-shadow: var(--glow-accent); }

/* Selezione = alone accent deciso */
.card.selected, .folder-card.selected, .list-row.selected {
  border-color: transparent;
  box-shadow: 0 0 0 1px var(--accent), 0 10px 36px -10px rgba(78,124,255,.6);
}

/* ── Header pagina: badge tipo a gradiente, titolo deciso ───────────────── */
.page-type-badge {
  background-image: var(--grad-accent) !important;
  color: #fff !important;
  box-shadow: var(--glow-accent);
}
.page-title { letter-spacing: -.02em; font-weight: 600; }

/* CTA principale: gradiente in-famiglia + glow */
.btn.primary {
  background-image: var(--grad-accent);
  border-color: transparent;
  box-shadow: var(--glow-accent);
  transition: filter .14s, box-shadow .14s, transform .1s;
}
.btn.primary:hover { background-image: var(--grad-accent); filter: brightness(1.08); }
.btn.primary:active { transform: translateY(1px); }

/* ── Toolbar / ricerca / switch ─────────────────────────────────────────── */
.search:focus-within { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); }
.view-switch button.on {
  background-image: var(--grad-accent-soft);
  box-shadow: inset 0 0 0 1px var(--accent-ring);
  color: var(--text-strong);
}
.iconbtn:hover { border-color: var(--accent-ring); color: var(--accent); }

/* ── Thumbnail / avatar: anello accent sottile ──────────────────────────── */
.card-thumb.creator-thumb { box-shadow: inset 0 0 0 1px var(--accent-ring); }
.folder-card .folder-icon {
  background-image: var(--grad-accent-soft);
  box-shadow: inset 0 0 0 1px color-mix(in oklab, var(--folder) 28%, transparent);
}

/* tipo: pallino con bagliore */
.card-tipo-dot { box-shadow: 0 0 8px -1px currentColor, 0 0 0 3px color-mix(in oklab, currentColor 18%, transparent); }

/* ── Tabella: header con sottolineatura a gradiente + edge accent al hover ─ */
.list-view.flat-objects { position: relative; }
.list-row.head {
  position: sticky; top: 0; z-index: 4;
  backdrop-filter: blur(7px);
  background: color-mix(in oklab, var(--bg-elev) 86%, transparent);
  border-bottom: 1px solid transparent;
  background-image: linear-gradient(var(--bg-elev), var(--bg-elev)), var(--grad-accent);
  background-origin: border-box;
  background-clip: padding-box, border-box;
}
.list-row:not(.head) { position: relative; transition: background .12s; }
.list-row:not(.head)::before {
  content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 0;
  background: var(--accent); transition: width .14s; border-radius: 0 2px 2px 0;
}
.list-row:not(.head):hover::before { width: 3px; }

/* ── Dot di stato: pulsazione "live" (motion-safe) ──────────────────────── */
@media (prefers-reduced-motion: no-preference) {
  @keyframes bLive {
    0%   { box-shadow: 0 0 0 0 var(--live-ring); }
    70%  { box-shadow: 0 0 0 6px transparent; }
    100% { box-shadow: 0 0 0 0 transparent; }
  }
  .status-dot.ok, .ctx-dot.on, .hs-state.on .hs-dot { animation: bLive 2.6s ease-out infinite; }
}

/* ── Motion d'ingresso — sweep più deciso (mai loop) ────────────────────── */
@media (prefers-reduced-motion: no-preference) {
  @keyframes bCardIn { from { opacity: 0; transform: translateY(12px) scale(.985); } to { opacity: 1; transform: none; } }
  .cards .card, .folder-grid .folder-card { animation: bCardIn .44s cubic-bezier(.2,.85,.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:.035s}
  .cards .card:nth-child(3),.folder-grid .folder-card:nth-child(3){animation-delay:.07s}
  .cards .card:nth-child(4),.folder-grid .folder-card:nth-child(4){animation-delay:.105s}
  .cards .card:nth-child(5),.folder-grid .folder-card:nth-child(5){animation-delay:.14s}
  .cards .card:nth-child(6),.folder-grid .folder-card:nth-child(6){animation-delay:.175s}
  .cards .card:nth-child(7){animation-delay:.21s}
  .cards .card:nth-child(8){animation-delay:.245s}
  .cards .card:nth-child(9){animation-delay:.28s}
  .cards .card:nth-child(n+10){animation-delay:.31s}

  @keyframes bRowIn { from { opacity: 0; transform: translateX(-6px); } to { opacity: 1; transform: none; } }
  .list-view.flat-objects .list-row:not(.head) { animation: bRowIn .32s ease both; }

  @keyframes bPanelIn { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
  .idn-card, .cap-panel { animation: bPanelIn .44s cubic-bezier(.2,.85,.25,1) both; }
}

/* ── Edit (Generale): cockpit ───────────────────────────────────────────── */
.idn-card-head {
  background-image: var(--grad-accent-soft), var(--card-toplight);
}
.idn-card-head h3 .badge-ico, .ae-head-thumb {
  background-image: var(--grad-accent);
  color: #fff;
  box-shadow: var(--glow-accent);
}
.ty-card { transition: border-color .15s, background .15s, box-shadow .15s, transform .12s; }
.ty-card:hover { transform: translateY(-2px); border-color: transparent; box-shadow: var(--glow-accent); }
.ty-card.on { border-color: transparent; box-shadow: 0 0 0 1px var(--accent), 0 10px 30px -12px rgba(78,124,255,.6); }
.ty-card.on .ty-card-thumb { box-shadow: var(--glow-accent); }
.idn-input:focus, .idn-textarea:focus { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); }
.ae-tab.on::after { height: 3px; background-image: var(--grad-accent); box-shadow: 0 0 12px var(--accent-ring); }
.ae-chrome { backdrop-filter: blur(7px); background: color-mix(in oklab, var(--bg-app) 82%, transparent); }
.ae-formfoot { backdrop-filter: blur(7px); background: color-mix(in oklab, var(--bg-app) 82%, transparent); }

/* 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(--accent-ring); border-radius: var(--r-lg);
  background: var(--grad-accent-soft);
}
.skin-note .nb-tag {
  font-family: var(--mono); font-size: 10.5px; letter-spacing: .05em;
  text-transform: uppercase; color: #fff;
  background-image: var(--grad-accent); 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); }