/* ════════════════════════════════════════════════════════════════════════
   Veriax — DIREZIONE E · "Sistema vivente" — SKIN per le pagine di lavoro
   (Object: Card / Tabella / Directory). Stessa architettura e interazioni:
   cambia SOLO il linguaggio visivo, allineato alla dashboard E.

   Superfici a VETRO con bordo-luce sottile, sfondo ossidiana + mesh punti +
   hairline + bloom, accent IRIDESCENTE (blu→ciano→viola) SOLO su stati
   live/attivi (max 1–2 accesi per vista). Stati semantici invariati
   (success verde, warn ambra, danger rosso). Densità e leggibilità a regime
   identiche al sistema: l'effetto sta sui bordi e sulla luce, non sul testo.

   Token NUOVI (dichiarati qui, scoped a [data-dir="e"]): --cyan, --violet,
   --irid(-soft/-text), --glass-bg(-2), --glass-edge, --glass-line,
   --glow-irid, --glow-cyan, --node-line, --bloom.
   ════════════════════════════════════════════════════════════════════════ */
@import url("home.css");
@import url("next-theme.css");

[data-dir="e"] {
  --cyan:        #5ad7ec;
  --cyan-soft:   rgba(90, 215, 236, 0.16);
  --violet:      #a78bfa;
  --irid:        linear-gradient(100deg, #4e7cff 0%, #5ad7ec 52%, #a78bfa 100%);
  --irid-soft:   linear-gradient(100deg, rgba(78,124,255,.20), rgba(90,215,236,.16) 52%, rgba(167,139,250,.18));
  --irid-text:   linear-gradient(100deg, #8fb0ff 0%, #7fe0f1 50%, #c0acff 100%);
  --glass-bg:    linear-gradient(180deg, rgba(26,29,46,.72), rgba(16,18,30,.82));
  --glass-bg-2:  linear-gradient(180deg, rgba(30,34,52,.6), rgba(18,20,34,.7));
  --glass-edge:  inset 0 0 0 1px rgba(140,165,255,.09), inset 0 1px 0 0 rgba(180,205,255,.12);
  --glass-line:  rgba(150,175,255,.12);
  --glow-irid:   0 0 0 1px rgba(90,215,236,.34), 0 16px 50px -16px rgba(78,124,255,.5);
  --glow-cyan:   0 0 22px -2px rgba(90,215,236,.55);
  --node-line:   rgba(120,150,230,.2);
  --bloom:       radial-gradient(760px 380px at 24% -4%, rgba(78,124,255,.14), transparent 66%),
                 radial-gradient(620px 420px at 96% 2%, rgba(167,139,250,.08), transparent 70%);
}

/* ── Sfondo ossidiana: bloom + mesh punti + hairline (fisso allo scroll) ──── */
[data-dir="e"].app { background: #07070c; }
[data-dir="e"] .main {
  background-color: #07070c;
  background-image:
    var(--bloom),
    linear-gradient(rgba(120,140,210,.04) 1px, transparent 1px),
    radial-gradient(rgba(120,140,210,.09) 1px, transparent 1.4px);
  background-size: 100% 100%, 100% 100%, 100% 104px, 26px 26px;
  background-attachment: fixed, fixed, scroll, scroll;
  background-position: 0 0, 0 0, 0 0, -1px -1px;
}

/* sweep/scanline discreta al primo load (motion-safe, una volta) */
[data-dir="e"] .main::before {
  content: ""; position: fixed; left: 0; right: 0; top: 0; height: 34%; z-index: 60;
  pointer-events: none;
  background: linear-gradient(180deg, transparent, rgba(90,215,236,.05) 70%, rgba(90,215,236,.1));
  border-bottom: 1px solid rgba(90,215,236,.26);
  transform: translateY(-140%);
}
@media (prefers-reduced-motion: no-preference) {
  [data-dir="e"] .main::before { animation: eSkinScan 1.5s cubic-bezier(.4,0,.2,1) .12s 1 both; }
}
@keyframes eSkinScan { from { transform: translateY(-140%); opacity: 1; } 85% { opacity: 1; } to { transform: translateY(360%); opacity: 0; } }

/* ── Card / cartelle: vetro + bordo-luce, glow ciano al hover ───────────── */
[data-dir="e"] .card, [data-dir="e"] .folder-card, [data-dir="e"] .empty {
  background: var(--glass-bg);
  border-color: transparent;
  border-radius: 16px;                 /* FIRMA E — vetro ampio e morbido */
  box-shadow: var(--glass-edge);
  backdrop-filter: blur(10px) saturate(1.05);
}
[data-dir="e"] .card { transition: transform .15s, box-shadow .15s; }
[data-dir="e"] .card:hover { transform: translateY(-2px); box-shadow: var(--glass-edge), var(--glow-irid); }
[data-dir="e"] .folder-card { transition: transform .15s, box-shadow .15s; }
[data-dir="e"] .folder-card:hover { transform: translateY(-2px); box-shadow: var(--glass-edge), var(--glow-irid); }

/* selezione = anello ciano deciso (nessun checkbox — regola di prodotto) */
[data-dir="e"] .card.selected,
[data-dir="e"] .folder-card.selected,
[data-dir="e"] .list-row.selected {
  border-color: transparent;
  box-shadow: 0 0 0 1px var(--cyan), 0 12px 38px -12px rgba(90,215,236,.5);
}

/* ── Header pagina ──────────────────────────────────────────────────────── */
[data-dir="e"] .page-type-badge {
  background-image: var(--irid-soft) !important;
  color: var(--cyan) !important;
  box-shadow: inset 0 0 0 1px rgba(140,165,255,.2);
}
[data-dir="e"] .page-title { letter-spacing: -.02em; }

/* CTA principale: riempimento accent + bordo-luce (no gradiente sparato) */
[data-dir="e"] .btn.primary {
  background: rgba(78,124,255,.18);
  border: 1px solid rgba(120,150,255,.45);
  color: #d6e4ff;
  box-shadow: inset 0 0 0 1px rgba(150,175,255,.08);
}
[data-dir="e"] .btn.primary:hover { background: rgba(78,124,255,.3); border-color: var(--accent); color: #fff; }

/* ── Toolbar / ricerca / switch vista ───────────────────────────────────── */
[data-dir="e"] .search:focus-within { border-color: var(--cyan); box-shadow: 0 0 0 3px var(--cyan-soft); }
[data-dir="e"] .view-switch button.on {
  background-image: var(--irid-soft);
  box-shadow: inset 0 0 0 1px rgba(90,215,236,.34);
  color: var(--text-strong);
}
[data-dir="e"] .iconbtn:hover { border-color: rgba(90,215,236,.4); color: var(--cyan); }

/* ── Thumbnail / avatar / icone cartella: anello sottile ────────────────── */
[data-dir="e"] .card-thumb.creator-thumb { box-shadow: inset 0 0 0 1px rgba(140,165,255,.16); }
[data-dir="e"] .folder-card .folder-icon {
  background-image: var(--irid-soft);
  box-shadow: inset 0 0 0 1px color-mix(in oklab, var(--folder) 26%, transparent);
}
/* tipo: pallino con bagliore tenue (segnale, non ornamento) */
[data-dir="e"] .card-tipo-dot { box-shadow: 0 0 8px -1px currentColor, 0 0 0 3px color-mix(in oklab, currentColor 16%, transparent); }

/* ── Tabella: header a vetro sticky + sottolineatura luce ────────────────── */
[data-dir="e"] .list-view.flat-objects { position: relative; }
[data-dir="e"] .list-row.head {
  position: sticky; top: 0; z-index: 4;
  backdrop-filter: blur(8px);
  background: color-mix(in oklab, var(--bg-elev) 80%, transparent);
  border-bottom: 1px solid transparent;
  background-image: linear-gradient(var(--bg-elev), var(--bg-elev)), var(--irid-soft);
  background-origin: border-box;
  background-clip: padding-box, border-box;
}
[data-dir="e"] .list-row:not(.head) { position: relative; transition: background .12s; }
[data-dir="e"] .list-row:not(.head)::before {
  content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 0;
  background: var(--cyan); transition: width .14s; border-radius: 0 2px 2px 0;
  box-shadow: var(--glow-cyan);
}
[data-dir="e"] .list-row:not(.head):hover::before { width: 3px; }

/* ── Dot di stato "live": pulsazione SOLO sugli attivi/ok (semantica verde) ─ */
@media (prefers-reduced-motion: no-preference) {
  @keyframes eLive {
    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; }
  }
  [data-dir="e"] .status-dot.ok,
  [data-dir="e"] .ctx-dot.on,
  [data-dir="e"] .hs-state.on .hs-dot { animation: eLive 2.6s ease-out infinite; }
}

/* ── Motion d'ingresso — fade/scale leggero (mai loop) ──────────────────── */
@media (prefers-reduced-motion: no-preference) {
  @keyframes eCardIn { from { opacity: 0; transform: translateY(12px) scale(.985); } to { opacity: 1; transform: none; } }
  [data-dir="e"] .cards .card,
  [data-dir="e"] .folder-grid .folder-card { animation: eCardIn .44s cubic-bezier(.2,.85,.25,1) both; }
  [data-dir="e"] .cards .card:nth-child(1),[data-dir="e"] .folder-grid .folder-card:nth-child(1){animation-delay:0s}
  [data-dir="e"] .cards .card:nth-child(2),[data-dir="e"] .folder-grid .folder-card:nth-child(2){animation-delay:.035s}
  [data-dir="e"] .cards .card:nth-child(3),[data-dir="e"] .folder-grid .folder-card:nth-child(3){animation-delay:.07s}
  [data-dir="e"] .cards .card:nth-child(4),[data-dir="e"] .folder-grid .folder-card:nth-child(4){animation-delay:.105s}
  [data-dir="e"] .cards .card:nth-child(5),[data-dir="e"] .folder-grid .folder-card:nth-child(5){animation-delay:.14s}
  [data-dir="e"] .cards .card:nth-child(6),[data-dir="e"] .folder-grid .folder-card:nth-child(6){animation-delay:.175s}
  [data-dir="e"] .cards .card:nth-child(n+7){animation-delay:.21s}

  @keyframes eRowIn { from { opacity: 0; transform: translateX(-6px); } to { opacity: 1; transform: none; } }
  [data-dir="e"] .list-view.flat-objects .list-row:not(.head) { animation: eRowIn .3s ease both; }
}

/* ── Popover / menu contestuale a vetro ─────────────────────────────────── */
[data-dir="e"] .ctx-menu, [data-dir="e"] .anchored-pop, [data-dir="e"] .popover {
  box-shadow: var(--glass-edge), 0 30px 80px -28px rgba(0,0,0,.85);
}

/* Annotazione direzione (iniettata dall'HTML, riusa .skin-annot di styles) */
[data-dir="e"] .skin-annot { border-color: var(--glass-line); background: var(--glass-bg-2); }
[data-dir="e"] .skin-annot .nb-tag { color: var(--cyan); background: transparent; border: 1px solid rgba(90,215,236,.4); }