/* ============================================================
   Zamberlan Preventivatore — shadcn-style tokens
   Primary: Zamberlan red #C80F0F → hsl(0 86% 42%)
   ============================================================ */

:root {
  --primary-h: 0;
  --primary-s: 86%;
}
:root,
[data-theme="light"] {
  --background: 0 0% 100%;
  --foreground: 0 0% 9%;

  --muted: 0 0% 96.1%;
  --muted-foreground: 0 0% 45.1%;

  --popover: 0 0% 100%;
  --popover-foreground: 0 0% 9%;

  --card: 0 0% 100%;
  --card-foreground: 0 0% 9%;

  --border: 0 0% 89.8%;
  --input: 0 0% 89.8%;

  --primary: var(--primary-h) var(--primary-s) 42%;
  --primary-foreground: 0 0% 100%;

  --secondary: 0 0% 96.1%;
  --secondary-foreground: 0 0% 9%;

  --accent: 0 0% 96.1%;
  --accent-foreground: 0 0% 9%;

  --destructive: 0 84.2% 60.2%;
  --destructive-foreground: 0 0% 100%;

  --success: 142 71% 38%;
  --warning: 38 92% 45%;
  --info: 217 91% 55%;

  --ring: var(--primary-h) var(--primary-s) 42%;
  --radius: 0.5rem;

  /* sidebar surface (slightly off-white for separation) */
  --sidebar: 0 0% 98.5%;
  --sidebar-foreground: 0 0% 9%;
  --sidebar-border: 0 0% 91%;
}

[data-theme="dark"] {
  --background: 0 0% 7%;
  --foreground: 0 0% 98%;

  --muted: 0 0% 14.9%;
  --muted-foreground: 0 0% 63.9%;

  --popover: 0 0% 9%;
  --popover-foreground: 0 0% 98%;

  --card: 0 0% 9%;
  --card-foreground: 0 0% 98%;

  --border: 0 0% 17%;
  --input: 0 0% 17%;

  --primary: var(--primary-h) var(--primary-s) 52%;
  --primary-foreground: 0 0% 100%;

  --secondary: 0 0% 14.9%;
  --secondary-foreground: 0 0% 98%;

  --accent: 0 0% 14.9%;
  --accent-foreground: 0 0% 98%;

  --destructive: 0 62.8% 50%;
  --destructive-foreground: 0 0% 98%;

  --success: 142 71% 50%;
  --warning: 38 92% 55%;
  --info: 217 91% 65%;

  --ring: var(--primary-h) var(--primary-s) 52%;

  --sidebar: 0 0% 5%;
  --sidebar-foreground: 0 0% 98%;
  --sidebar-border: 0 0% 14%;
}

/* density */
:root, [data-density="comfortable"] {
  --pad-card: 18px;
  --page-pad-x: 24px;
  --page-pad-y: 20px;
  --view-gap: 14px;
  --card-pad: 18px;
  --card-pad-sm: 14px;
  --row-h: 36px;
  --input-h: 36px;
  --btn-h: 36px;
  --btn-pad-x: 14px;
  --font-base: 14px;
  --font-sm: 13px;
  --font-xs: 12px;
  --topbar-h: 56px;
}
[data-density="compact"] {
  --pad-card: 12px;
  --page-pad-x: 16px;
  --page-pad-y: 12px;
  --view-gap: 10px;
  --card-pad: 12px;
  --card-pad-sm: 10px;
  --row-h: 30px;
  --input-h: 30px;
  --btn-h: 30px;
  --btn-pad-x: 10px;
  --font-base: 13px;
  --font-sm: 12px;
  --font-xs: 11px;
  --topbar-h: 48px;
}
html { font-size: var(--font-base); }

/* unified page wrapper — every view gets consistent padding */
.page {
  padding: var(--page-pad-y) var(--page-pad-x);
  max-width: 1500px;
  margin: 0 auto;
  width: 100%;
}
.page-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  margin-bottom: var(--view-gap);
  flex-wrap: wrap;
}
.page-header h1 {
  font-size: 18px;
  font-weight: 600;
  letter-spacing: -0.01em;
  margin: 0;
  display: flex;
  align-items: center;
  gap: 10px;
  color: hsl(var(--muted-foreground));
}
.page-header h1 strong {
  color: hsl(var(--foreground));
  font-weight: 600;
}
.page-header-actions { display: flex; gap: 8px; align-items: center; }

[data-density="compact"] .page-header h1 { font-size: 15px; }

* { box-sizing: border-box; }
html, body, #root { margin: 0; padding: 0; }

html, body {
  font-family: 'Geist', 'Inter', system-ui, -apple-system, sans-serif;
  font-feature-settings: "cv11", "ss01";
  background: hsl(var(--background));
  color: hsl(var(--foreground));
  font-size: 14px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

.mono, .font-mono { font-family: 'Geist Mono', ui-monospace, 'SF Mono', Menlo, monospace; }

::selection { background: hsl(var(--primary) / 0.2); color: hsl(var(--foreground)); }

/* scrollbar */
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: hsl(var(--border)); border-radius: 999px; border: 2px solid hsl(var(--background)); }
::-webkit-scrollbar-thumb:hover { background: hsl(var(--muted-foreground) / 0.5); }

/* utility */
.flex { display: flex; }
.inline-flex { display: inline-flex; }
.grid { display: grid; }
.items-center { align-items: center; }
.items-start { align-items: flex-start; }
.items-end { align-items: flex-end; }
.justify-between { justify-content: space-between; }
.justify-center { justify-content: center; }
.justify-end { justify-content: flex-end; }
.flex-1 { flex: 1; }
.flex-col { flex-direction: column; }
.gap-1 { gap: 4px; } .gap-2 { gap: 8px; } .gap-3 { gap: 12px; } .gap-4 { gap: 16px; } .gap-6 { gap: 24px; }
.w-full { width: 100%; }
.h-full { height: 100%; }
.text-xs { font-size: 11px; }
.text-sm { font-size: 12px; }
.text-base { font-size: 14px; }
.text-lg { font-size: 16px; }
.text-xl { font-size: 18px; }
.text-2xl { font-size: 22px; }
.text-3xl { font-size: 28px; }
.font-medium { font-weight: 500; }
.font-semibold { font-weight: 600; }
.font-bold { font-weight: 700; }
.text-muted { color: hsl(var(--muted-foreground)); }
.text-primary { color: hsl(var(--primary)); }
.text-success { color: hsl(var(--success)); }
.text-warn { color: hsl(var(--warning)); }
.tabular { font-variant-numeric: tabular-nums; }
.truncate { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tracking-tight { letter-spacing: -0.01em; }
.tracking-tighter { letter-spacing: -0.02em; }
.uppercase { text-transform: uppercase; letter-spacing: 0.05em; }
.mb-1 { margin-bottom: 4px; } .mb-2 { margin-bottom: 8px; } .mb-3 { margin-bottom: 12px; } .mb-4 { margin-bottom: 16px; } .mb-6 { margin-bottom: 24px; } .mb-8 { margin-bottom: 32px; }
.mt-1 { margin-top: 4px; } .mt-2 { margin-top: 8px; } .mt-3 { margin-top: 12px; } .mt-4 { margin-top: 16px; } .mt-6 { margin-top: 24px; } .mt-8 { margin-top: 32px; }
.mr-2 { margin-right: 8px; }
.p-2 { padding: 8px; } .p-3 { padding: 12px; } .p-4 { padding: 16px; } .p-6 { padding: 24px; }
.px-2 { padding-left: 8px; padding-right: 8px; }
.px-4 { padding-left: 16px; padding-right: 16px; }
.py-1 { padding-top: 4px; padding-bottom: 4px; }
.py-2 { padding-top: 8px; padding-bottom: 8px; }
.relative { position: relative; }
.absolute { position: absolute; }
.cursor-pointer { cursor: pointer; }
.border-b { border-bottom: 1px solid hsl(var(--border)); }
.border-t { border-top: 1px solid hsl(var(--border)); }
.rounded { border-radius: var(--radius); }
.rounded-full { border-radius: 999px; }
.text-right { text-align: right; }
.text-center { text-align: center; }

/* animation helpers */
.fade-in { animation: fadeIn .18s ease-out; }
@keyframes fadeIn { from { opacity: 0; transform: translateY(2px); } to { opacity: 1; transform: translateY(0); } }
.scale-in { animation: scaleIn .12s ease-out; }
@keyframes scaleIn { from { opacity: 0; transform: scale(0.96); } to { opacity: 1; transform: scale(1); } }
.slide-up { animation: slideUp .25s cubic-bezier(.16,.84,.44,1); }
@keyframes slideUp   { from { opacity: 0; transform: translateY(10px);  } to { opacity: 1; transform: translateY(0);     } }
@keyframes toastIn   { from { opacity: 0; transform: translateY(-12px); } to { opacity: 1; transform: translateY(0);     } }
@keyframes toastOut  { from { opacity: 1; transform: translateY(0);     } to { opacity: 0; transform: translateY(-8px);  } }