/* =========================================================
   Tema "Giocoso (NNM)" — da stile.txt
   Blu #0066CC, Giallo #FFD700, Corallo #FF6B6B, Teal #4ECDC4.
   Quicksand (titoli) + Plus Jakarta Sans (testo), raggi ampi,
   bottoni 3D "pressable", transizioni "pop", blob fluttuanti e dot grid.
   ========================================================= */
:root {
    --c-primary: #0066cc;
    --c-primary-dark: #004f9e;
    --c-primary-soft: #dbeafe;
    --c-accent: #ffd700;
    --c-accent-dark: #e6c200;
    --c-accent-text: #1e293b;
    --c-coral: #ff6b6b;
    --c-coral-dark: #e65252;
    --c-teal: #4ecdc4;
    --c-teal-dark: #36b0a8;
    --c-bg: #fbfcff;
    --c-surface: #ffffff;
    --c-surface-2: #f1f5fb;
    --c-text: #0f172a;
    --c-muted: #475569;
    --c-border: #e5eaf3;
    --c-sidebar: rgba(255, 255, 255, .82);
    --c-sidebar-text: #475569;

    --font-head: "Quicksand", "Plus Jakarta Sans", system-ui, sans-serif;
    --font-body: "Plus Jakarta Sans", system-ui, sans-serif;

    --radius-xl: 2.5rem;
    --radius-lg: 1.75rem;
    --radius-md: 1.25rem;
    --radius-sm: .85rem;
    --btn-depth: 6px;
    --shadow-sm: 0 2px 0 rgba(15, 23, 42, .03);
    --shadow-md: 0 12px 30px -14px rgba(0, 102, 204, .25);
    --shadow-lg: 0 25px 50px -12px rgba(0, 0, 0, .15);
    --pop: all .4s cubic-bezier(.175, .885, .32, 1.275);
}

body { font-weight: 500; }
h1, h2, h3, .brand-text, .kpi strong, .auth-title { font-weight: 800; }
h1 { letter-spacing: -.02em; line-height: .98; }

/* Sfondo: dot grid + blob sfocati che fluttuano */
body::before {
    content: ""; position: fixed; inset: 0; z-index: 0; pointer-events: none;
    background-image: radial-gradient(#0066cc 1.2px, transparent 1.2px);
    background-size: 26px 26px; opacity: .05;
}
.bg-decor { display: block; }
.blob { position: absolute; border-radius: 50%; filter: blur(70px); opacity: .55; animation: nnm-float 6s ease-in-out infinite; }
.blob-1 { width: 460px; height: 460px; background: #bfdbfe; top: -120px; right: -80px; }
.blob-2 { width: 380px; height: 380px; background: #fef08a; bottom: -120px; left: 18%; animation-delay: -2s; }
.blob-3 { width: 260px; height: 260px; background: #99f6e4; top: 40%; right: 28%; opacity: .3; animation-delay: -4s; }
@keyframes nnm-float { 0%, 100% { transform: translateY(0) scale(1); } 50% { transform: translateY(-15px) scale(1.03); } }

/* Sidebar e topbar "vetro" */
.sidebar { backdrop-filter: blur(24px); -webkit-backdrop-filter: blur(24px); border-right: 0; margin: .75rem; inset: 0 auto 0 0; height: calc(100vh - 1.5rem); border-radius: 2.5rem; box-shadow: 0 20px 45px -25px rgba(0, 102, 204, .35); border: 1px solid rgba(255, 255, 255, .8); }
.shell { margin-left: calc(var(--sidebar-w) + 1.5rem); }
.topbar { background: rgba(255, 255, 255, .8); backdrop-filter: blur(24px); margin: .75rem 1.5rem 0 0; border-radius: 2.5rem; border: 1px solid rgba(255, 255, 255, .9); box-shadow: 0 10px 30px -20px rgba(15, 23, 42, .25); }
.brand-icon { width: 2.75rem; height: 2.75rem; border-radius: 1rem; background: var(--c-primary); box-shadow: 0 5px 0 0 var(--c-primary-dark); transform: rotate(-4deg); }
.nav-link { border-radius: 1.25rem; font-weight: 700; transition: var(--pop); }
.nav-link:hover { transform: translateX(4px); }
.nav-link.active { background: var(--c-primary); color: #fff; box-shadow: 0 5px 0 0 var(--c-primary-dark); }
.nav-link.active .count { background: var(--c-accent); color: var(--c-text); }
.avatar { background: var(--c-teal); border: 3px solid #fff; box-shadow: 0 3px 0 0 var(--c-teal-dark); }

/* Pill badge per i tagline */
.pill { background: #fff; color: var(--c-primary); border: 2px solid var(--c-primary-soft); padding: .3rem 1rem; font-weight: 800; letter-spacing: .02em; }

/* Card "bouncy" */
.card { border-radius: var(--radius-xl); border: 1px solid var(--c-border); transition: var(--pop); }
.card.bouncy:hover, .card-link:hover { transform: scale(1.03) rotate(1deg); box-shadow: 0 25px 50px -12px rgba(0, 0, 0, .15); }
.table-card { border-radius: 2rem; }
.kpi { border-radius: 2rem; border: 0; box-shadow: 0 10px 30px -18px rgba(15, 23, 42, .3); transition: var(--pop); }
.kpi:hover { transform: translateY(-4px) rotate(-.5deg); }
.kpi::before { width: 100%; height: 6px; bottom: auto; }
.kpi-blue { background: #eff6ff; } .kpi-teal { background: #f0fdfa; } .kpi-yellow { background: #fefce8; } .kpi-coral { background: #fff1f2; } .kpi-dark { background: #f8fafc; }
.card-icon { border-radius: 1.5rem; }
.icon-blue { background: var(--c-primary); color: #fff; box-shadow: 0 5px 0 0 var(--c-primary-dark); }
.icon-yellow { background: var(--c-accent); color: var(--c-text); box-shadow: 0 5px 0 0 var(--c-accent-dark); }
.icon-teal { background: var(--c-teal); color: #fff; box-shadow: 0 5px 0 0 var(--c-teal-dark); }
.icon-coral { background: var(--c-coral); color: #fff; box-shadow: 0 5px 0 0 var(--c-coral-dark); }

/* Bottone 3D pressable */
.btn { border-radius: 1.5rem; font-weight: 900; padding: .7rem 1.35rem; border: 0; }
.btn-lg { padding: 1.25rem 2.5rem; font-size: 1.05rem; box-shadow: 0 12px 0 0 var(--btn-shadow); }
.btn-lg:active { transform: translateY(4px); box-shadow: none; }
.btn-accent { --btn-bg: #ffd700; --btn-shadow: #e6c200; }
.btn-ghost { border: 2px solid var(--c-border); --btn-depth: 4px; }
.btn-sm { border-radius: 1rem; --btn-depth: 4px; }
.btn-icon { border-radius: .9rem; }

/* Form */
input[type=text], input[type=email], input[type=password], input[type=number], input[type=date], input[type=search], input[type=url], select, textarea {
    border-radius: 1rem; border-width: 2px; padding: .7rem .95rem;
}
.fieldset { border-radius: 2rem; border-width: 2px; border-style: dashed; }
.badge { font-weight: 800; }
.alert { border-radius: 1.5rem; }
.stepper li { border-radius: 1.5rem; border-width: 2px; }
.cat-code { border-radius: .9rem; box-shadow: 0 4px 0 0 var(--c-accent-dark); transform: rotate(-4deg); }
.quote-box { border-radius: 1.5rem; border-left-width: 8px; }
.editor { border-radius: 2rem; }

/* Auth */
.auth-card { border-radius: 3rem; padding: 2.5rem; border: 0; }
.auth-brand .brand-icon { width: 3.5rem; height: 3.5rem; }
.auth-title { font-size: 2.2rem; line-height: .95; }
.error-code { color: var(--c-coral); text-shadow: 6px 6px 0 var(--c-accent); }

@media (max-width: 860px) {
    .sidebar { margin: 0; height: 100vh; border-radius: 0 2rem 2rem 0; background: #fff; }
    .shell { margin-left: 0; }
    .topbar { margin: .5rem; }
}

/* Barra superiore delle KPI come ombra interna: segue gli angoli arrotondati senza ritagliare i tooltip */
.kpi { box-shadow: inset 0 6px 0 var(--kpi-c, var(--c-border)), 0 10px 30px -18px rgba(15, 23, 42, .3); }