/* ==========================================================================
   CloudP — Tema professionale (override del tema base)
   Caricato DOPO index-BTh2-NUB.css, quindi prevale.
   Usa selettori [class~=] (match di parola esatta) per non colpire
   le varianti Tailwind tipo hover:/focus:/data-[state].
   ========================================================================== */

:root {
  --radius: 0.75rem;

  /* Palette: indigo/violet medical-grade */
  --background: 220 33% 98%;
  --foreground: 222 30% 15%;
  --card: 0 0% 100%;
  --card-foreground: 222 30% 15%;
  --popover: 0 0% 100%;
  --popover-foreground: 222 30% 15%;

  --primary: 243 75% 59%;
  --primary-foreground: 0 0% 100%;

  --secondary: 222 20% 94%;
  --secondary-foreground: 222 25% 22%;

  --muted: 220 20% 95%;
  --muted-foreground: 220 12% 46%;

  --accent: 243 60% 96%;
  --accent-foreground: 243 55% 40%;

  --destructive: 0 78% 58%;
  --destructive-foreground: 0 0% 100%;

  --border: 220 18% 89%;
  --input: 220 18% 87%;
  --ring: 243 75% 59%;

  --chart-1: 243 75% 59%;
  --chart-2: 173 70% 42%;
  --chart-3: 32 90% 55%;
  --chart-4: 280 65% 62%;
  --chart-5: 340 75% 58%;

  --sidebar-background: 222 35% 13%;
  --sidebar-foreground: 220 15% 88%;
  --sidebar-primary: 243 75% 62%;
  --sidebar-primary-foreground: 0 0% 100%;
  --sidebar-accent: 222 30% 20%;
  --sidebar-accent-foreground: 0 0% 100%;
  --sidebar-border: 222 25% 22%;
  --sidebar-ring: 243 75% 62%;

  --shadow-soft: 0 1px 2px rgba(15, 23, 42, .04), 0 4px 16px rgba(15, 23, 42, .05);
  --shadow-card: 0 1px 3px rgba(15, 23, 42, .05), 0 10px 30px rgba(15, 23, 42, .06);
  --shadow-pop: 0 12px 40px rgba(30, 27, 75, .16);
  --gradient-brand: linear-gradient(135deg, #4f46e5 0%, #7c3aed 55%, #06b6d4 100%);
}

.dark {
  --background: 222 35% 9%;
  --foreground: 220 20% 94%;
  --card: 222 32% 12%;
  --card-foreground: 220 20% 94%;
  --popover: 222 32% 12%;
  --popover-foreground: 220 20% 94%;
  --primary: 243 80% 66%;
  --primary-foreground: 222 35% 10%;
  --secondary: 222 25% 18%;
  --secondary-foreground: 220 20% 92%;
  --muted: 222 25% 16%;
  --muted-foreground: 220 14% 62%;
  --accent: 243 40% 22%;
  --accent-foreground: 220 20% 94%;
  --destructive: 0 70% 55%;
  --destructive-foreground: 0 0% 100%;
  --border: 222 22% 22%;
  --input: 222 22% 24%;
  --ring: 243 80% 66%;
}

/* ---------------------------------- base ---------------------------------- */
html { -webkit-text-size-adjust: 100%; }

body {
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
  font-feature-settings: 'cv02', 'cv03', 'cv04', 'cv11';
  letter-spacing: -0.01em;
  background-color: hsl(var(--background));
  background-image:
    radial-gradient(900px 500px at 100% -10%, hsl(243 75% 59% / .06), transparent 60%),
    radial-gradient(700px 400px at -10% 10%, hsl(189 80% 45% / .05), transparent 55%);
  background-attachment: fixed;
}

h1, h2, h3, h4 { letter-spacing: -0.025em; font-weight: 700; }
h1 { font-weight: 800; }

::selection { background: hsl(var(--primary) / .22); }

/* scrollbar sottile e moderna */
* {
  scrollbar-width: thin;
  scrollbar-color: hsl(var(--muted-foreground) / .35) transparent;
}
*::-webkit-scrollbar { width: 10px; height: 10px; }
*::-webkit-scrollbar-track { background: transparent; }
*::-webkit-scrollbar-thumb {
  background: hsl(var(--muted-foreground) / .3);
  border-radius: 999px;
  border: 2px solid transparent;
  background-clip: content-box;
}
*::-webkit-scrollbar-thumb:hover { background: hsl(var(--muted-foreground) / .5); background-clip: content-box; }

/* ---------------------------------- header -------------------------------- */
header.sticky {
  background: hsl(var(--background) / .82) !important;
  backdrop-filter: saturate(180%) blur(14px);
  -webkit-backdrop-filter: saturate(180%) blur(14px);
  border-bottom: 1px solid hsl(var(--border) / .8);
}

/* logo nell'header con gradiente */
header.sticky .container > div:first-child > a > div {
  background: var(--gradient-brand) !important;
  color: #fff !important;
  box-shadow: 0 6px 16px rgba(79, 70, 229, .32);
}
header.sticky .container > div:first-child > a > span {
  font-weight: 700;
  letter-spacing: -0.02em;
}
header.sticky nav button { border-radius: 10px; font-weight: 500; }

/* ---------------------------------- card ---------------------------------- */
[class~="rounded-xl"][class~="border"][class~="bg-card"] {
  box-shadow: var(--shadow-card) !important;
  border-color: hsl(var(--border) / .9) !important;
}

/* ---------------------------------- bottoni ------------------------------- */
button, a[class~="inline-flex"] {
  transition: transform .15s ease, box-shadow .2s ease, background-color .2s ease, color .2s ease;
}
button:active { transform: translateY(1px); }

/* primario: gradiente brand */
button[class~="bg-primary"]:not(:disabled),
a[class~="bg-primary"] {
  background-image: var(--gradient-brand) !important;
  background-color: transparent !important;
  color: #fff !important;
  box-shadow: 0 6px 18px rgba(79, 70, 229, .26);
  border: none;
}
button[class~="bg-primary"]:not(:disabled):hover,
a[class~="bg-primary"]:hover {
  box-shadow: 0 10px 26px rgba(79, 70, 229, .36);
  filter: brightness(1.04);
}

/* ---------------------------------- input --------------------------------- */
input, select, textarea {
  transition: border-color .18s ease, box-shadow .18s ease, background-color .18s ease;
}
input:focus-visible, select:focus-visible, textarea:focus-visible {
  border-color: hsl(var(--primary)) !important;
  box-shadow: 0 0 0 4px hsl(var(--primary) / .14);
}
input::placeholder, textarea::placeholder { color: hsl(var(--muted-foreground) / .8); }

/* ---------------------------------- tabs ---------------------------------- */
[role="tablist"] {
  background: hsl(var(--muted));
  border-radius: 12px;
  padding: 4px;
  gap: 4px;
}
[role="tab"] { border-radius: 9px; font-weight: 600; }
[role="tab"][data-state="active"] {
  background: hsl(var(--card));
  box-shadow: var(--shadow-soft);
}

/* ---------------------------------- dialog -------------------------------- */
[role="dialog"] {
  border-radius: 18px !important;
  box-shadow: var(--shadow-pop) !important;
  border-color: hsl(var(--border)) !important;
}

/* ---------------------------------- tabelle ------------------------------- */
table { border-collapse: separate; border-spacing: 0; }
thead tr { background: hsl(var(--muted) / .6); }
th {
  font-weight: 600;
  letter-spacing: .04em;
  color: hsl(var(--muted-foreground));
  text-transform: uppercase;
  font-size: 11px;
}
tbody tr { transition: background-color .15s ease; }
tbody tr:hover { background: hsl(var(--accent) / .55); }

/* ---------------------------------- link ---------------------------------- */
a { transition: color .15s ease; }
a[href]:hover { color: hsl(var(--primary)); }

/* ---------------------------------- spinner ------------------------------- */
.animate-spin { border-color: hsl(var(--primary) / .25); border-top-color: hsl(var(--primary)); }

/* ---------------------------------- reveal -------------------------------- */
@keyframes cloudp-fade-up {
  from { opacity: 0; transform: translateY(8px); }
  to { opacity: 1; transform: translateY(0); }
}
main > * { animation: cloudp-fade-up .32s ease both; }

/* ---------------------------------- utility ------------------------------- */
.cloudp-gradient-text {
  background: var(--gradient-brand);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

:focus-visible { outline: none; }

/* ---------------------------------- stampa -------------------------------- */
@media print {
  body { background: #fff !important; }
  header.sticky { display: none !important; }
}