/* Shell */
:root {
    --sidebar-w: 240px;
    --sidebar-bg: #0f172a;
    --sidebar-fg: #cbd5e1;
    --sidebar-hover: #1e293b;
    --sidebar-active: #2563eb;
    --topbar-h: 56px;
}

* { box-sizing: border-box; }
body { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; background: #f8fafc; }

.app-shell { display: flex; min-height: 100vh; }

.app-sidebar {
    width: var(--sidebar-w);
    background: var(--sidebar-bg);
    color: var(--sidebar-fg);
    flex-shrink: 0;
    display: flex;
    flex-direction: column;
}
.app-sidebar .sidebar-header { color: #f1f5f9; }
.app-sidebar .nav-link {
    color: var(--sidebar-fg);
    padding: 10px 18px;
    display: flex;
    align-items: center;
    gap: 10px;
    border-left: 3px solid transparent;
    font-size: 14px;
    text-decoration: none;
}
.app-sidebar .nav-link:hover { background: var(--sidebar-hover); color: #fff; }
.app-sidebar .nav-link.active {
    background: var(--sidebar-hover);
    color: #fff;
    border-left-color: var(--sidebar-active);
    font-weight: 600;
}
.sidebar-divider { height: 1px; background: #1e293b; margin: 10px 14px; }
.sidebar-group-label { color: #64748b !important; letter-spacing: 0.05em; font-size: 0.7rem; font-weight: 600; }

.app-main { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.app-topbar { height: var(--topbar-h); }

.brand-logo, .brand-logo-sm { font-size: 28px; line-height: 1; }
.brand-logo-sm { font-size: 22px; }

.avatar-circle {
    width: 28px; height: 28px; border-radius: 50%;
    color: #fff; font-weight: 600; font-size: 13px;
    display: inline-flex; align-items: center; justify-content: center;
}

/* Card */
.card { border: 1px solid #e2e8f0; border-radius: 8px; }
.card-header { background: #f8fafc; border-bottom: 1px solid #e2e8f0; }

/* Table */
.table thead th { background: #f1f5f9; font-size: 13px; font-weight: 600; }
.table tbody td { vertical-align: middle; font-size: 14px; }

/* Stats card */
.stat-card { background: #fff; padding: 18px; border-radius: 8px; border: 1px solid #e2e8f0; }
.stat-card .stat-value { font-size: 24px; font-weight: 700; }
.stat-card .stat-label { color: #64748b; font-size: 13px; text-transform: uppercase; letter-spacing: 0.4px; }
.stat-card .stat-icon { width: 40px; height: 40px; border-radius: 8px; display: inline-flex; align-items: center; justify-content: center; font-size: 18px; }

/* Status badges */
.badge-status {
    display: inline-block; padding: 2px 8px; border-radius: 999px; font-size: 12px; font-weight: 500;
}
.badge-attivo, .badge-confermato, .badge-pagata, .badge-accettato { background: #dcfce7; color: #166534; }
.badge-programmato, .badge-bozza, .badge-non_pagata { background: #fef3c7; color: #92400e; }
.badge-annullato, .badge-rifiutato, .badge-assente, .badge-scaduta { background: #fee2e2; color: #991b1b; }
.badge-archiviato, .badge-completato { background: #e0e7ff; color: #3730a3; }
.badge-deceduto { background: #1f2937; color: #fff; }
.badge-parziale { background: #fed7aa; color: #9a3412; }

/* Odontogramma */
.odontogramma { display: grid; grid-template-columns: repeat(16, 1fr); gap: 4px; max-width: 800px; }
.tooth {
    background: #fff; border: 1px solid #cbd5e1; border-radius: 4px;
    text-align: center; padding: 6px 2px; font-size: 11px; cursor: pointer; user-select: none;
}
.tooth.assente { background: #f1f5f9; color: #94a3b8; text-decoration: line-through; }
.tooth.devitalizzato { background: #fef3c7; }
.tooth.protesi, .tooth.corona { background: #fde68a; }
.tooth.impianto { background: #c7d2fe; }
.tooth.da_estrarre { background: #fecaca; }
.tooth.sano { background: #f0fdf4; border-color: #86efac; }
.tooth-label { font-weight: 700; }

/* Form */
.form-label { font-weight: 500; font-size: 13px; color: #334155; }
.form-section-title { font-size: 13px; text-transform: uppercase; letter-spacing: 0.5px; color: #64748b; font-weight: 600; margin: 24px 0 8px; padding-bottom: 4px; border-bottom: 1px solid #e2e8f0; }

/* Auth */
.auth-wrap { background: linear-gradient(135deg,#dbeafe 0%,#e0e7ff 100%); }
.auth-card { border: none; }

/* Calendar */
.calendar-grid { display: grid; grid-template-columns: 60px repeat(auto-fit, minmax(140px, 1fr)); gap: 1px; background: #e2e8f0; border: 1px solid #e2e8f0; }
.calendar-cell { background: #fff; min-height: 30px; padding: 2px 4px; font-size: 12px; }
.calendar-cell.header { background: #f1f5f9; font-weight: 600; text-align: center; padding: 8px; }
.calendar-hour { background: #f8fafc; font-size: 11px; color: #64748b; text-align: right; padding: 2px 6px; }
.appt {
    background: #dbeafe; border-left: 3px solid #3b82f6; padding: 4px 6px; border-radius: 3px;
    margin: 1px; font-size: 12px; cursor: pointer; overflow: hidden;
}
.appt.status-confermato { background: #d1fae5; border-color: #10b981; }
.appt.status-completato { background: #e0e7ff; border-color: #6366f1; }
.appt.status-annullato { background: #fee2e2; border-color: #ef4444; text-decoration: line-through; }
.appt.status-assente { background: #fef3c7; border-color: #f59e0b; }

/* Misc */
.text-monospace { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; }
.kbd { background: #f1f5f9; padding: 1px 6px; border-radius: 3px; font-size: 12px; font-family: monospace; border: 1px solid #e2e8f0; }

@media (max-width: 768px) {
    .app-sidebar { display: none; }
}

/* Signature pad */
.signature-frame {
    background:
        linear-gradient(to right, #cbd5e1 0%, #cbd5e1 100%) no-repeat center bottom / 80% 1px,
        #fff;
    border: 2px dashed #cbd5e1;
    border-radius: 8px;
    padding: 8px;
    position: relative;
}
.signature-frame canvas {
    display: block;
    width: 100%;
    height: 180px;
    cursor: crosshair;
}
.signature-frame::before {
    content: "Firma qui ↓";
    position: absolute;
    top: 4px; left: 12px;
    font-size: 11px;
    color: #94a3b8;
    pointer-events: none;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

/* Autocomplete */
.ac-list { display: none; }
.ac-list.show { display: block; }
.ac-item.active { background: #e0e7ff; color: #1e1b4b; }
.ac-item { cursor: pointer; padding: 8px 12px; border-bottom: 1px solid #f1f5f9; }
.ac-item:last-child { border-bottom: 0; }

/* Help content */
.help-content h2 { font-size: 20pt; }
.help-content h5 { margin-top: 24px; font-size: 14pt; color: #1e293b; border-bottom: 1px solid #e2e8f0; padding-bottom: 6px; }
.help-content code { background: #f1f5f9; padding: 1px 6px; border-radius: 3px; font-size: 90%; }
.help-content table { font-size: 13px; }

/* Onboarding */
.onboarding-wrap { max-width: 900px; margin: 0 auto; }
.onboarding-wrap .card-header { background: #eff6ff; border-bottom-color: #bfdbfe; }

/* Empty states */
.empty-state { padding: 40px 20px; text-align: center; color: #94a3b8; }
.empty-state .bi { font-size: 48px; color: #cbd5e1; }
.empty-state h5 { margin-top: 12px; color: #64748b; font-weight: 500; }
.empty-state p { font-size: 14px; max-width: 320px; margin: 6px auto; }

/* Sidebar kbd */
.app-sidebar .kbd {
    background: rgba(255,255,255,0.1);
    color: #cbd5e1;
    border: 1px solid #334155;
    font-size: 11px;
}

/* Toast-style flash */
.alert {
    border: none;
    border-left: 4px solid currentColor;
    border-radius: 6px;
}

/* Form section title underline animation */
.form-section-title {
    user-select: none;
}

/* Print-friendly */
@media print {
    .app-sidebar, .app-topbar, .no-print, .btn { display: none !important; }
    .app-main { margin: 0; }
}