/* =====================================================================
   Numero Blu · Chat Intelligence — Design System (porting da styles.css)
   ===================================================================== */

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=DM+Sans:wght@500;600;700;800&family=JetBrains+Mono:wght@400;500&display=swap');

:root {
  --radius: 0.75rem;
  --background: oklch(0.985 0.005 240);
  --foreground: oklch(0.17 0.045 255);
  --surface: oklch(1 0 0);
  --card: oklch(1 0 0);
  --card-foreground: oklch(0.17 0.045 255);

  --primary: oklch(0.44 0.16 253);
  --primary-foreground: oklch(0.99 0.003 240);
  --primary-glow: oklch(0.62 0.16 250);
  --primary-deep: oklch(0.32 0.14 258);

  --secondary: oklch(0.955 0.012 240);
  --secondary-foreground: oklch(0.22 0.05 255);
  --muted: oklch(0.955 0.012 240);
  --muted-foreground: oklch(0.48 0.03 250);
  --accent: oklch(0.93 0.03 235);

  --destructive: oklch(0.62 0.24 25);
  --fraud: oklch(0.66 0.22 25);
  --fraud-foreground: oklch(0.99 0.003 240);
  --success: oklch(0.65 0.15 160);
  --success-foreground: oklch(0.99 0.003 240);
  --warning: oklch(0.78 0.15 75);
  --warning-foreground: oklch(0.17 0.045 255);

  --border: oklch(0.9 0.015 240);

  --bubble-customer: oklch(0.955 0.012 240);
  --bubble-customer-foreground: oklch(0.17 0.045 255);
  --bubble-agent: oklch(0.44 0.16 253);
  --bubble-agent-foreground: oklch(0.99 0.003 240);

  --font-sans: 'Inter', ui-sans-serif, system-ui, sans-serif;
  --font-display: 'DM Sans', 'Inter', ui-sans-serif, system-ui, sans-serif;
  --font-mono: 'JetBrains Mono', ui-monospace, monospace;

  --shadow-soft: 0 1px 3px oklch(0.17 0.045 255 / 0.06), 0 1px 2px oklch(0.17 0.045 255 / 0.04);
  --shadow-elevated: 0 10px 30px oklch(0.17 0.045 255 / 0.10);
}

* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body {
  background: var(--background);
  color: var(--foreground);
  font-family: var(--font-sans);
  line-height: 1.5;
}
a { color: inherit; text-decoration: none; }
h1, h2, h3, h4 { font-family: var(--font-display); font-weight: 700; margin: 0; }
.font-mono { font-family: var(--font-mono); }

.container { max-width: 1280px; margin: 0 auto; padding: 0 1.5rem; }
.min-h-screen { min-height: 100vh; }

/* ---------- Header / Nav ---------- */
.nb-header {
  position: sticky; top: 0; z-index: 40;
  background: color-mix(in oklab, var(--background) 80%, transparent);
  backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--border);
}
.nb-header-inner { display: flex; align-items: center; justify-content: space-between; height: 4rem; }
.nb-logo { display: flex; align-items: center; gap: 0.75rem; }
.nb-logo-mark {
  position: relative; display: flex; align-items: center; justify-content: center;
  width: 2.5rem; height: 2.5rem; border-radius: 0.75rem;
  background: linear-gradient(135deg, var(--primary), var(--primary-deep));
  color: var(--primary-foreground); font-family: var(--font-display); font-weight: 700; font-size: 1.1rem;
  box-shadow: var(--shadow-soft);
}
.nb-logo-mark .dot {
  position: absolute; bottom: -2px; right: -2px; width: 0.7rem; height: 0.7rem; border-radius: 999px;
  background: var(--success); box-shadow: 0 0 0 2px var(--background);
}
.nb-logo-text { display: flex; flex-direction: column; line-height: 1.15; }
.nb-logo-text strong { font-family: var(--font-display); font-size: 1rem; font-weight: 600; }
.nb-logo-text span { font-size: 0.62rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.12em; color: var(--muted-foreground); }
.nb-header-right { display: flex; align-items: center; gap: 1.5rem; }
.nb-nav { display: flex; gap: 1.5rem; font-size: 0.9rem; }
.nb-nav a:hover { color: var(--primary); }
.nb-account { display: flex; align-items: center; gap: 0.75rem; }
.nb-account .nb-btn { padding: 0.35rem 0.85rem; font-size: 0.8rem; }
.nb-profile-tag { display: flex; flex-direction: column; align-items: flex-end; gap: 0.2rem; line-height: 1.2; }

/* ---------- Badge ---------- */
.nb-badge {
  display: inline-flex; align-items: center; gap: 0.35rem;
  border-radius: 999px; border: 1px solid; padding: 0.15rem 0.65rem;
  font-size: 0.72rem; font-weight: 500;
}
.nb-badge--primary { background: color-mix(in oklab, var(--primary) 10%, transparent); color: var(--primary); border-color: color-mix(in oklab, var(--primary) 20%, transparent); }
.nb-badge--success { background: color-mix(in oklab, var(--success) 10%, transparent); color: var(--success); border-color: color-mix(in oklab, var(--success) 20%, transparent); }
.nb-badge--warning { background: color-mix(in oklab, var(--warning) 15%, transparent); color: var(--warning-foreground); border-color: color-mix(in oklab, var(--warning) 30%, transparent); }
.nb-badge--fraud { background: color-mix(in oklab, var(--fraud) 10%, transparent); color: var(--fraud); border-color: color-mix(in oklab, var(--fraud) 20%, transparent); }
.nb-badge--muted { background: var(--muted); color: var(--muted-foreground); border-color: var(--border); }

/* ---------- Layout helpers ---------- */
.nb-grid { display: grid; gap: 1rem; }
.nb-grid-2 { grid-template-columns: repeat(2, 1fr); }
.nb-grid-3 { grid-template-columns: repeat(3, 1fr); }
.nb-grid-4 { grid-template-columns: repeat(4, 1fr); }
@media (max-width: 900px) { .nb-grid-3, .nb-grid-4 { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 600px) { .nb-grid-2, .nb-grid-3, .nb-grid-4 { grid-template-columns: 1fr; } }

.nb-card {
  background: var(--card); border: 1px solid var(--border); border-radius: 1rem;
  box-shadow: var(--shadow-soft);
}
.nb-card--pad { padding: 1.5rem; }
.nb-section { padding: 2.5rem 0; }

/* ---------- KPI ---------- */
.nb-kpi { padding: 1.1rem 1.25rem; border-radius: 0.9rem; border: 1px solid var(--border); background: var(--card); }
.nb-kpi-label { display: flex; align-items: center; gap: 0.4rem; font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.06em; color: var(--muted-foreground); font-weight: 600; }
.nb-kpi-value { margin-top: 0.5rem; font-family: var(--font-display); font-size: 1.7rem; font-weight: 700; }
.nb-kpi-sub { margin-top: 0.2rem; font-size: 0.72rem; color: var(--muted-foreground); }
.nb-kpi--primary .nb-kpi-value { color: var(--primary); }
.nb-kpi--success .nb-kpi-value { color: var(--success); }
.nb-kpi--warning .nb-kpi-value { color: var(--warning-foreground); }
.nb-kpi--fraud .nb-kpi-value { color: var(--fraud); }

/* ---------- Buttons / links ---------- */
.nb-btn {
  display: inline-flex; align-items: center; gap: 0.5rem;
  padding: 0.6rem 1.1rem; border-radius: 0.6rem; font-weight: 600; font-size: 0.9rem;
  border: 1px solid transparent; cursor: pointer;
}
.nb-btn--primary { background: var(--primary); color: var(--primary-foreground); }
.nb-btn--primary:hover { background: var(--primary-deep); }
.nb-btn--outline { border-color: var(--border); color: var(--foreground); background: transparent; }
.nb-btn--outline:hover { border-color: var(--primary); color: var(--primary); }

/* ---------- List rows (fraud/compliance/conversations) ---------- */
.nb-list { border: 1px solid var(--border); border-radius: 1rem; background: var(--card); overflow: hidden; box-shadow: var(--shadow-soft); }
.nb-list-item {
  display: block; width: 100%; text-align: left; padding: 1.1rem 1.25rem; border: none; background: none;
  border-bottom: 1px solid var(--border); cursor: pointer; font: inherit; color: inherit;
}
.nb-list-item:last-child { border-bottom: none; }
.nb-list-item:hover, .nb-list-item.active { background: color-mix(in oklab, var(--muted) 60%, transparent); }

.nb-row-link { display: block; text-decoration: none; color: inherit; border-radius: 0.5rem; margin: 0 -0.4rem; padding: 0 0.4rem; }
.nb-row-link:hover { background: color-mix(in oklab, var(--muted) 60%, transparent); }

.nb-two-col { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(340px, 0.85fr); gap: 1.5rem; align-items: start; }
@media (max-width: 1000px) { .nb-two-col { grid-template-columns: 1fr; } }

.nb-dossier { border-radius: 1rem; border: 1px solid var(--border); background: var(--card); overflow: hidden; box-shadow: var(--shadow-soft); position: sticky; top: 6rem; }
.nb-dossier-head { padding: 1.5rem; border-bottom: 1px solid var(--border); }
.nb-dossier-body { padding: 1.5rem; display: flex; flex-direction: column; gap: 1.25rem; font-size: 0.9rem; }
.nb-detail-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 0.75rem; }
.nb-detail-tile { border-radius: 0.6rem; background: color-mix(in oklab, var(--muted) 60%, transparent); padding: 0.7rem; }
.nb-detail-tile .lbl { font-size: 0.62rem; text-transform: uppercase; letter-spacing: 0.06em; color: var(--muted-foreground); }
.nb-detail-tile .val { margin-top: 0.2rem; font-family: var(--font-display); font-weight: 600; }

/* ---------- Chat bubbles ---------- */
.nb-msg { display: flex; margin-bottom: 0.75rem; }
.nb-msg.customer { justify-content: flex-start; }
.nb-msg.agent { justify-content: flex-end; }
.nb-bubble { max-width: 75%; border-radius: 1rem; padding: 0.75rem 1rem; font-size: 0.9rem; }
.nb-msg.customer .nb-bubble { background: var(--bubble-customer); color: var(--bubble-customer-foreground); }
.nb-msg.agent .nb-bubble { background: var(--bubble-agent); color: var(--bubble-agent-foreground); }
.nb-bubble .meta { font-size: 0.62rem; text-transform: uppercase; letter-spacing: 0.06em; opacity: 0.7; margin-bottom: 0.25rem; }

/* ---------- Utility text ---------- */
.text-muted { color: var(--muted-foreground); }
.text-primary { color: var(--primary); }
.text-fraud { color: var(--fraud); }
.text-success { color: var(--success); }
.text-xs { font-size: 0.75rem; }
.text-sm { font-size: 0.875rem; }
.mt-1 { margin-top: 0.25rem; } .mt-2 { margin-top: 0.5rem; } .mt-3 { margin-top: 0.75rem; }
.mt-4 { margin-top: 1rem; } .mt-6 { margin-top: 1.5rem; } .mt-8 { margin-top: 2rem; }
.flex { display: flex; } .flex-wrap { flex-wrap: wrap; } .items-center { align-items: center; }
.justify-between { justify-content: space-between; } .gap-2 { gap: 0.5rem; } .gap-3 { gap: 0.75rem; }

/* ---------- Empty states ---------- */
.nb-empty { border-radius: 1rem; border: 1px dashed var(--border); padding: 3rem; text-align: center; color: var(--muted-foreground); }

/* ---------- Auth pages (login / recupero password) ---------- */
.nb-auth-wrap { min-height: 100vh; display: flex; align-items: center; justify-content: center; padding: 2rem 1rem; }
.nb-auth-card { width: 100%; max-width: 400px; background: var(--card); border: 1px solid var(--border); border-radius: 1rem; box-shadow: var(--shadow-elevated); padding: 2rem; }
.nb-form { display: flex; flex-direction: column; gap: 1rem; }
.nb-field { display: flex; flex-direction: column; gap: 0.4rem; font-size: 0.85rem; font-weight: 600; }
.nb-field input, .nb-field select {
  font: inherit; font-weight: 400; padding: 0.65rem 0.85rem; border-radius: 0.6rem;
  border: 1px solid var(--border); background: var(--surface); color: var(--foreground); width: 100%;
}
.nb-field input:focus, .nb-field select:focus { outline: none; border-color: var(--primary); box-shadow: 0 0 0 3px color-mix(in oklab, var(--primary) 15%, transparent); }
.nb-auth-links { text-align: center; font-size: 0.85rem; }
.nb-auth-links a:hover { color: var(--primary); }
.nb-alert { border-radius: 0.6rem; padding: 0.75rem 1rem; font-size: 0.85rem; border: 1px solid; }
.nb-alert--error { background: color-mix(in oklab, var(--destructive) 10%, transparent); color: var(--destructive); border-color: color-mix(in oklab, var(--destructive) 25%, transparent); }
.nb-alert--success { background: color-mix(in oklab, var(--success) 10%, transparent); color: var(--success); border-color: color-mix(in oklab, var(--success) 25%, transparent); }
.nb-alert--warning { background: color-mix(in oklab, var(--warning) 12%, transparent); color: var(--warning-foreground); border-color: color-mix(in oklab, var(--warning) 30%, transparent); }

/* ---------- Chart legends (pie / trend line) ---------- */
.nb-legend-dot { width: 10px; height: 10px; border-radius: 999px; display: inline-block; flex-shrink: 0; }

/* ---------- Simple bar chart ---------- */
.nb-bars { display: flex; flex-direction: column; gap: 0.6rem; }
.nb-bar-row { display: grid; grid-template-columns: 90px 1fr 48px; align-items: center; gap: 0.5rem; font-size: 0.72rem; }
.nb-bar-track { height: 8px; border-radius: 999px; background: var(--muted); overflow: hidden; }
.nb-bar-fill { height: 100%; border-radius: 999px; background: var(--primary); }