@import "tailwindcss";

/* Carica la config legacy (content globs + tema) — vedi tailwind.config.js */
@config "../../tailwind.config.js";

/*
 * Stile base dell'applicazione.
 * In Tailwind v4 le primitive componibili (riusate via @apply in altre classi)
 * vanno dichiarate con @utility; il resto sta in @layer components.
 */

/* Nasconde gli elementi Alpine finché il framework non è inizializzato. */
[x-cloak] { display: none !important; }

@layer base {
  html { scroll-behavior: smooth; }
  body { @apply bg-stone-50 text-stone-800 antialiased dark:bg-stone-900 dark:text-stone-100; }
  a    { @apply text-orto-600 hover:text-orto-700 dark:text-orto-400 dark:hover:text-orto-400; }
  h1   { @apply text-2xl font-bold text-stone-900 dark:text-stone-50; }
  h2   { @apply text-xl font-semibold text-stone-900 dark:text-stone-50; }
  h3   { @apply text-base font-semibold text-stone-900 dark:text-stone-100; }
}

/* ── Primitive componibili (utility custom) ───────────────────── */
@utility container-app { @apply mx-auto w-full max-w-5xl px-4; }

@utility btn {
  /* min-h-11 = 44px: area di tocco comoda su mobile. */
  @apply inline-flex min-h-11 cursor-pointer items-center justify-center gap-2
         rounded-lg px-4 py-2 text-sm font-semibold no-underline transition-colors
         disabled:cursor-not-allowed disabled:opacity-50;
}

@utility input {
  /* text-base su mobile evita lo zoom automatico di iOS; min-h-11 = tocco 44px. */
  @apply block min-h-11 w-full rounded-lg border border-stone-300 px-3 py-2 text-base
         text-stone-900 shadow-sm focus:border-orto-500 focus:outline-none
         focus:ring-2 focus:ring-orto-500/30 disabled:bg-stone-100 sm:text-sm
         dark:border-stone-600 dark:bg-stone-800 dark:text-stone-100 dark:disabled:bg-stone-700;
}

@layer components {

  /* ── Layout ───────────────────────────────────────────────── */
  .card { @apply rounded-xl border border-stone-200 bg-white p-4 shadow-sm
                 dark:border-stone-700 dark:bg-stone-800; }

  /* ── Sidebar ──────────────────────────────────────────────── */
  .sidebar { @apply flex flex-col border-r border-stone-200 bg-white
                    dark:border-stone-700 dark:bg-stone-800; }
  .side-link { @apply flex min-h-11 items-center gap-3 rounded-lg px-3 py-2 text-sm font-medium
                      text-stone-700 no-underline hover:bg-stone-100
                      dark:text-stone-300 dark:hover:bg-stone-700/60; }
  .side-link-active { @apply bg-orto-50 text-orto-700 dark:bg-stone-700 dark:text-orto-400; }
  .side-group { @apply px-3 pb-1 pt-3 text-[10px] font-semibold uppercase tracking-wide
                       text-stone-400 dark:text-stone-500; }
  .brand { @apply text-base font-bold text-orto-600 no-underline hover:text-orto-700 dark:text-orto-400; }
  .nav-user { @apply text-sm text-stone-500 dark:text-stone-400; }

  /* ── Bottoni ──────────────────────────────────────────────── */
  .btn-primary   { @apply btn bg-orto-500 text-white hover:bg-orto-600; }
  .btn-secondary { @apply btn border border-stone-300 bg-white text-stone-700 hover:bg-stone-50
                          dark:border-stone-600 dark:bg-stone-800 dark:text-stone-100 dark:hover:bg-stone-700; }
  .btn-danger    { @apply btn bg-red-600 text-white hover:bg-red-700; }
  .btn-link      { @apply inline-flex min-h-11 cursor-pointer items-center border-0 bg-transparent
                          px-2 text-sm font-medium text-stone-700 hover:text-orto-600
                          dark:text-stone-300 dark:hover:text-orto-400; }

  /* ── Form ─────────────────────────────────────────────────── */
  .field    { @apply mb-4; }
  .label    { @apply mb-1 block text-sm font-medium text-stone-700 dark:text-stone-300; }
  .select   { @apply input; }
  .textarea { @apply input min-h-24; }
  .help     { @apply mt-1 text-xs text-stone-500 dark:text-stone-400; }

  /* ── Tabelle ──────────────────────────────────────────────── */
  .table             { @apply w-full border-collapse text-sm; }
  .table th          { @apply border-b border-stone-200 bg-stone-100 px-3 py-2 text-left
                              font-semibold text-stone-700
                              dark:border-stone-700 dark:bg-stone-700/50 dark:text-stone-200; }
  .table td          { @apply border-b border-stone-100 px-3 py-2 text-stone-700
                              dark:border-stone-700 dark:text-stone-200; }
  .table tr:hover td { @apply bg-stone-50 dark:bg-stone-700/40; }

  /* ── Flash / alert ────────────────────────────────────────── */
  .flash         { @apply rounded-lg px-4 py-3 text-sm; }
  .flash-success { @apply bg-orto-100 text-orto-700 dark:bg-orto-700/30 dark:text-orto-400; }
  .flash-error   { @apply bg-red-100 text-red-800 dark:bg-red-900/40 dark:text-red-200; }
  .flash-warning { @apply bg-amber-100 text-amber-800 dark:bg-amber-900/40 dark:text-amber-200; }
  .flash-info    { @apply bg-sky-100 text-sky-800 dark:bg-sky-900/40 dark:text-sky-200; }

  /* ── Badge ────────────────────────────────────────────────── */
  .badge { @apply inline-flex items-center rounded-full bg-stone-100 px-2 py-0.5
                  text-xs font-medium text-stone-700 dark:bg-stone-700 dark:text-stone-200; }

  /* Area di tocco comoda per label con checkbox (toggle). */
  .check-row { @apply inline-flex min-h-11 items-center gap-2; }
  .check-row input[type="checkbox"] { @apply h-5 w-5; }
}

/* ── Mobile (<640px): tabelle larghe → schede impilate ─────────── */
/* Uso: <table class="table table-cards"> con data-label="…" su ogni <td>;
   la cella azioni usa class="cell-actions". Su sm+ resta tabella normale. */
@media (max-width: 639px) {
  .table-cards thead { display: none; }
  .table-cards tbody tr {
    @apply mb-3 block rounded-lg border border-stone-200 bg-white p-3 shadow-sm
           dark:border-stone-700 dark:bg-stone-800;
  }
  .table-cards tbody tr:hover td { @apply bg-transparent; }
  .table-cards td {
    @apply flex items-center justify-between gap-3 border-0 px-0 py-1.5 text-right;
  }
  .table-cards td::before {
    content: attr(data-label);
    @apply pr-2 text-left text-xs font-semibold uppercase tracking-wide text-stone-400;
  }
  .table-cards td.cell-actions {
    @apply mt-2 justify-start border-t border-stone-100 pt-3;
  }
  .table-cards td.cell-actions::before { content: none; }
}

/* ── Shell: sidebar + contenuto ───────────────────────────────── */
/* Stato iniziale reso server-side via classi su .shell (no flash / no dipendenza JS);
   Alpine fa solo il toggle di .is-collapsed (desktop) e .drawer-open (mobile). */
.app-aside { width: 16rem; }                 /* larghezza pannello/drawer */
@media (min-width: 768px) {
  .app-main { margin-left: 16rem; }
  .shell.is-collapsed .app-aside { width: 4rem; }
  .shell.is-collapsed .app-main  { margin-left: 4rem; }
  .shell.is-collapsed .side-label { display: none; }
  .shell.is-collapsed .side-link  { justify-content: center; }
  .brand-icon { display: none; }
  .shell.is-collapsed .brand-full { display: none; }
  .shell.is-collapsed .brand-icon { display: inline; }
}
@media (max-width: 767px) {
  .app-aside { transform: translateX(-100%); }
  .shell.drawer-open .app-aside { transform: translateX(0); }
  .brand-icon { display: none; }
}

/* ── Mobile: barra azioni del form fissata in basso (pollice) ─── */
@media (max-width: 639px) {
  .form-actions-sticky {
    @apply sticky bottom-0 z-10 -mx-4 -mb-4 mt-4 border-t border-stone-200
           bg-white/95 px-4 py-3 backdrop-blur
           dark:border-stone-700 dark:bg-stone-800/95;
  }
  .form-actions-sticky > * { @apply flex-1; }
}