:root {
  --bg: #f4f6fb;
  --surface: #fff;
  --border: #e2e8f0;
  --text: #1f2a44;
  --muted: #6b7689;
  --accent: #4f6bed;
  --green: #15a06a;
  --amber: #c9821a;
  --red: #dc3a45;
  --wa: #25d366;
  --radius: 12px;
  --sidebar-w: 240px;
  --font: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
}

* { box-sizing: border-box; }
[hidden] { display: none !important; }
html, body { height: 100%; margin: 0; font-family: var(--font); background: var(--bg); color: var(--text); font-size: 14px; }

.app { display: flex; min-height: 100vh; }
.sidebar {
  width: var(--sidebar-w); flex: 0 0 var(--sidebar-w);
  background: var(--surface); border-right: 1px solid var(--border);
  display: flex; flex-direction: column; position: sticky; top: 0; height: 100vh;
}
.brand { display: flex; gap: 12px; padding: 20px 16px; align-items: center; }
.brand-mark {
  width: 40px; height: 40px; border-radius: 10px; background: var(--accent);
  color: #fff; display: grid; place-items: center; font-weight: 700;
}
.brand-text { display: flex; flex-direction: column; line-height: 1.2; }
.brand-text span { color: var(--muted); font-size: 12px; }
.nav { display: flex; flex-direction: column; padding: 8px; gap: 4px; flex: 1; }
.nav-item {
  padding: 10px 12px; border-radius: 8px; color: var(--text); text-decoration: none;
}
.nav-item:hover, .nav-item.active { background: rgba(79,107,237,.1); color: var(--accent); }
.sidebar-foot {
  padding: 12px 16px; border-top: 1px solid var(--border); color: var(--muted); font-size: 12px;
  display: flex; flex-direction: column; gap: 10px;
}
.sidebar-user { display: flex; gap: 8px; align-items: center; justify-content: space-between; }
.sidebar-job { display: flex; gap: 8px; align-items: center; }

.login-screen {
  min-height: 100vh; display: grid; place-items: center;
  background: linear-gradient(160deg, #eef2ff 0%, #f4f6fb 45%, #e8edf7 100%);
  padding: 24px;
}
.login-card {
  width: min(380px, 100%); background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--radius); padding: 28px; display: flex; flex-direction: column; gap: 14px;
  box-shadow: 0 12px 40px rgba(31, 42, 68, 0.08);
}
.login-brand { padding: 0 0 8px; }
.login-error { color: var(--red); margin: 0; font-size: 13px; }
.admin-actions { display: flex; flex-wrap: wrap; gap: 6px; justify-content: flex-end; }
.dot { width: 8px; height: 8px; border-radius: 50%; background: #ccc; }
.dot.running { background: var(--amber); animation: pulse 1.2s infinite; }
.dot.done { background: var(--green); }
.dot.error { background: var(--red); }
@keyframes pulse { 50% { opacity: .4; } }

.main { flex: 1; min-width: 0; }
.topbar { display: flex; gap: 12px; align-items: center; padding: 16px 20px; background: var(--surface); border-bottom: 1px solid var(--border); }
.topbar h1 { margin: 0; font-size: 20px; }
.topbar p { margin: 2px 0 0; color: var(--muted); font-size: 13px; }
.menu-btn { display: none; }
.content { padding: 20px; }
.section { display: none; }
.section.active { display: block; }

.card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: 20px; }
.card-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 16px; }
.card-head h2 { margin: 0; font-size: 18px; }
.form-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 12px; margin-bottom: 12px; }
.field { display: flex; flex-direction: column; gap: 6px; }
.field.grow { grid-column: span 2; }
label { font-size: 12px; color: var(--muted); font-weight: 600; }
input, select, textarea {
  border: 1px solid var(--border); border-radius: 8px; padding: 8px 10px; font: inherit;
}
.checks { display: flex; flex-wrap: wrap; gap: 12px; margin: 12px 0; }
.check { display: flex; gap: 6px; align-items: center; }
.form-actions { display: flex; gap: 8px; justify-content: flex-end; margin-top: 12px; }
.btn {
  border: 0; border-radius: 8px; padding: 9px 14px; font: inherit; cursor: pointer;
  background: var(--surface); color: var(--text); text-decoration: none; display: inline-block;
}
.btn.primary { background: var(--accent); color: #fff; }
.btn.danger { background: var(--red); color: #fff; }
.btn.ghost { background: transparent; border: 1px solid var(--border); }
.btn.sm { padding: 6px 10px; font-size: 12px; }
.btn:disabled { opacity: .5; cursor: not-allowed; }

.progress { height: 8px; background: #e9edf6; border-radius: 99px; overflow: hidden; margin: 12px 0; }
.progress-bar { height: 100%; background: var(--accent); width: 0; transition: width .3s; }
.stats { display: flex; flex-wrap: wrap; gap: 16px; color: var(--muted); font-size: 13px; }
.log { background: #0f172a; color: #e2e8f0; padding: 12px; border-radius: 8px; max-height: 200px; overflow: auto; font-size: 12px; }

.badge { font-size: 11px; padding: 4px 8px; border-radius: 99px; font-weight: 600; }
.badge.running { background: rgba(201,130,26,.15); color: var(--amber); }
.badge.done { background: rgba(21,160,106,.13); color: var(--green); }
.badge.error { background: rgba(220,58,69,.13); color: var(--red); }

.filters { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 12px; }
.table-wrap { overflow: auto; }
.data-table { width: 100%; border-collapse: collapse; }
.data-table th, .data-table td { padding: 10px 8px; border-bottom: 1px solid var(--border); text-align: left; vertical-align: top; }
.data-table th { font-size: 12px; color: var(--muted); }
.score-pill {
  display: inline-block; min-width: 36px; text-align: center; padding: 4px 8px;
  border-radius: 99px; font-weight: 700; font-size: 12px;
}
.score-high { background: rgba(21,160,106,.15); color: var(--green); }
.score-mid { background: rgba(201,130,26,.15); color: var(--amber); }
.score-low { background: rgba(107,118,137,.15); color: var(--muted); }
.tag { display: inline-block; font-size: 11px; padding: 2px 6px; border-radius: 6px; margin: 2px; background: #eef2ff; color: var(--accent); }
.muted { color: var(--muted); }

.kanban { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 12px; }
.kanban-col { background: #f8fafc; border: 1px solid var(--border); border-radius: 10px; padding: 10px; min-height: 200px; }
.kanban-col h4 { margin: 0 0 10px; font-size: 13px; }
.kanban-card {
  background: var(--surface); border: 1px solid var(--border); border-radius: 8px;
  padding: 8px; margin-bottom: 8px; cursor: grab;
}
.kanban-card strong { display: block; font-size: 13px; }
.kanban-card span { font-size: 11px; color: var(--muted); }

.template-item { border: 1px solid var(--border); border-radius: 8px; padding: 12px; margin-bottom: 10px; }
.template-item pre { white-space: pre-wrap; background: #f8fafc; padding: 8px; border-radius: 6px; font-size: 12px; }

.scrim { display: none; position: fixed; inset: 0; background: rgba(0,0,0,.3); z-index: 30; }
.scrim.open { display: block; }

dialog { border: 0; border-radius: 12px; padding: 20px; max-width: 560px; width: 90%; }
.lead-dialog {
  max-width: 640px;
  padding: 0;
  overflow: hidden;
}
.lead-dialog::backdrop { background: rgba(15, 23, 42, 0.45); }
.lead-dialog-form { display: flex; flex-direction: column; max-height: 90vh; }
.lead-dialog-form #dlg-body { overflow-y: auto; flex: 1; }
.lead-dialog .dlg-actions {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 8px;
  padding: 12px 20px;
  margin-top: 0;
  border-top: 1px solid var(--border);
  background: #f8fafc;
}
.dlg-actions { display: flex; justify-content: flex-end; gap: 8px; margin-top: 16px; }

.lead-detail { font-size: 14px; }
.detail-header {
  display: flex;
  gap: 16px;
  align-items: flex-start;
  padding: 20px 20px 16px;
}
.score-pill-lg {
  min-width: 48px;
  padding: 8px 12px;
  font-size: 18px;
  flex-shrink: 0;
}
.detail-header-text { min-width: 0; flex: 1; }
.detail-title { margin: 0 0 4px; font-size: 18px; line-height: 1.3; }
.detail-meta { margin: 0; color: var(--muted); font-size: 13px; }
.detail-section {
  padding: 14px 20px;
  border-top: 1px solid var(--border);
}
.detail-section h4 {
  margin: 0 0 10px;
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--muted);
}
.detail-problema { margin: 0 0 8px; line-height: 1.5; }
.detail-tags { display: flex; flex-wrap: wrap; gap: 4px; }
.detail-tags-issues { margin-top: 8px; }
.tag-issue { background: rgba(220, 58, 69, 0.1); color: var(--red); }
.detail-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px 20px;
}
.detail-grid-social { grid-template-columns: 1fr; gap: 8px; }
.detail-row { display: flex; flex-direction: column; gap: 2px; }
.detail-label { font-size: 11px; font-weight: 600; color: var(--muted); }
.detail-value { font-size: 13px; line-height: 1.4; word-break: break-word; }
.detail-value a { color: var(--accent); }
.detail-phone-value {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
}
.detail-phone-value .btn.wa {
  text-decoration: none;
}
.detail-status {
  width: 100%;
  font: inherit;
  padding: 8px 10px;
  border-radius: 8px;
  border: 1px solid var(--border);
  background: var(--surface);
}
.status-quick-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
}
.status-quick-row .detail-status {
  flex: 1;
  min-width: 140px;
  max-width: 220px;
  width: auto;
}
.detail-status.status-nuovo { border-color: rgba(79, 107, 237, 0.4); }
.detail-status.status-da_contattare { border-color: rgba(201, 130, 26, 0.5); }
.detail-status.status-contattato { border-color: rgba(21, 160, 106, 0.5); }
.detail-status.status-in_trattativa { border-color: rgba(79, 107, 237, 0.6); }
.detail-status.status-cliente { border-color: rgba(21, 160, 106, 0.7); background: rgba(21, 160, 106, 0.06); }
.detail-status.status-scartato { border-color: rgba(107, 118, 137, 0.5); color: var(--muted); }
.detail-notes { display: flex; flex-direction: column; gap: 8px; }
.detail-notes textarea { width: 100%; resize: vertical; min-height: 72px; }
.detail-notes .btn { align-self: flex-end; }
.social-ok { color: var(--green); font-weight: 600; }
.social-no { color: var(--muted); }

.outreach-btns { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 12px; }
.outreach-btns .wa { background: var(--wa); color: #fff; }
.outreach-draft { display: flex; flex-direction: column; gap: 10px; margin-top: 10px; }
.outreach-draft textarea { width: 100%; resize: vertical; min-height: 140px; font-family: inherit; }
.outreach-status { font-size: 12px; margin: 8px 0 0; }
.outreach-status.muted { color: var(--muted); }

.map-card { display: flex; flex-direction: column; }
.map-wrap {
  position: relative;
  height: calc(100vh - 280px);
  min-height: 360px;
  border-radius: 10px;
  overflow: hidden;
  border: 1px solid var(--border);
}
#map-container { width: 100%; height: 100%; }
.map-popup { cursor: pointer; line-height: 1.4; }
.map-popup strong { display: block; margin-bottom: 4px; font-size: 13px; }
.map-popup .score-pill { margin-top: 2px; }
.map-popup-hint { font-size: 11px; color: var(--muted); margin-top: 6px; }
.map-popup-badge {
  display: inline-block;
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  padding: 2px 6px;
  border-radius: 4px;
  margin-bottom: 6px;
}
.map-popup-badge-contattato { background: rgba(21, 160, 106, 0.15); color: var(--green); }
.map-popup-badge-in_trattativa { background: rgba(79, 107, 237, 0.12); color: var(--accent); }
.map-popup-badge-cliente { background: rgba(13, 122, 79, 0.15); color: #0d7a4f; }
.map-legend {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  margin-bottom: 10px;
  font-size: 12px;
  color: var(--muted);
}
.map-legend-item { display: inline-flex; align-items: center; gap: 6px; }
.map-legend-dot {
  width: 14px;
  height: 14px;
  border-radius: 50%;
  flex-shrink: 0;
}
.map-legend-dot-filled {
  background: var(--amber);
  border: 2px solid #fff;
  box-shadow: 0 0 0 1px var(--border);
}
.map-legend-dot-landline {
  background: #94a3b8;
  border: 2px dashed #64748b;
}
.map-legend-dot-ring {
  background: transparent;
  border: 3px solid var(--green);
}
.map-popup-badge-landline {
  background: rgba(100, 116, 139, 0.15);
  color: #64748b;
}
.leaflet-popup-content-wrapper { border-radius: 8px; font-family: var(--font); }
.leaflet-popup-content { margin: 10px 12px; font-size: 13px; }

/* Liste */
.lists-layout {
  display: grid;
  grid-template-columns: 280px 1fr;
  gap: 16px;
  align-items: start;
}
.lists-sidebar { display: flex; flex-direction: column; gap: 6px; margin-top: 14px; }
.list-create { display: flex; flex-direction: column; gap: 10px; }
.list-item {
  display: flex; flex-direction: column; gap: 2px; align-items: flex-start;
  width: 100%; text-align: left; border: 1px solid var(--border); border-radius: 8px;
  padding: 10px 12px; background: var(--surface); cursor: pointer; font: inherit; color: inherit;
}
.list-item:hover, .list-item.active {
  border-color: var(--accent); background: rgba(79,107,237,.06);
}
.linkish {
  border: 0; background: none; color: var(--accent); cursor: pointer; font: inherit;
  padding: 0; text-align: left;
}
.linkish:hover { text-decoration: underline; }
@media (max-width: 900px) {
  .lists-layout { grid-template-columns: 1fr; }
}

/* Report PageSpeed */
.r-scan-bar { display: flex; gap: 8px; margin-bottom: 16px; }
.r-url-input { flex: 1; }
.r-tabs { display: flex; gap: 4px; margin-bottom: 16px; border-bottom: 1px solid var(--border); padding-bottom: 8px; }
.r-tab {
  border: 0; background: transparent; padding: 8px 14px; border-radius: 8px;
  font: inherit; cursor: pointer; color: var(--muted);
}
.r-tab.active { background: rgba(79,107,237,.1); color: var(--accent); font-weight: 600; }
.r-layout { display: grid; grid-template-columns: 280px 1fr; gap: 16px; min-height: 400px; }
.r-sidebar { display: flex; flex-direction: column; gap: 8px; }
.r-list { display: flex; flex-direction: column; gap: 4px; max-height: 480px; overflow-y: auto; }
.report-list-item {
  display: flex; gap: 10px; align-items: center; width: 100%; text-align: left;
  border: 1px solid var(--border); border-radius: 8px; padding: 10px;
  background: var(--surface); cursor: pointer; font: inherit; color: inherit;
}
.report-list-item:hover, .report-list-item.active {
  border-color: var(--accent); background: rgba(79,107,237,.04);
}
.report-list-text { display: flex; flex-direction: column; min-width: 0; flex: 1; }
.report-list-text strong { font-size: 13px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.report-list-text .muted { font-size: 11px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.r-batch-btn { width: 100%; margin-bottom: 4px; }
.r-detail { border: 1px solid var(--border); border-radius: 10px; padding: 16px; background: #f8fafc; }
.r-detail-empty { padding: 40px 20px; text-align: center; }
.r-detail-head h3 { margin: 0 0 4px; font-size: 16px; }
.r-meta { font-size: 12px; }
.r-gauges { display: grid; grid-template-columns: repeat(auto-fit, minmax(90px, 1fr)); gap: 10px; margin: 16px 0; }
.r-gauge {
  text-align: center; padding: 12px 8px; border-radius: 10px;
  border: 1px solid var(--border); background: var(--surface);
}
.r-gauge-val { display: block; font-size: 24px; font-weight: 700; }
.r-gauge-lbl { display: block; font-size: 10px; color: var(--muted); margin-top: 2px; }
.r-gauge.score-high .r-gauge-val { color: var(--green); }
.r-gauge.score-mid .r-gauge-val { color: var(--amber); }
.r-gauge.score-low .r-gauge-val { color: var(--red); }
.r-vitals { margin: 12px 0; }
.r-vitals h4, .r-section h4 { margin: 0 0 8px; font-size: 12px; text-transform: uppercase; color: var(--muted); letter-spacing: 0.04em; }
.r-vital { display: inline-block; margin: 0 12px 6px 0; font-size: 13px; }
.r-section { margin: 16px 0; }
.r-issues { padding-left: 18px; line-height: 1.5; font-size: 13px; }
.r-issues li { margin-bottom: 8px; }
.r-pitch {
  white-space: pre-wrap; background: var(--surface); border: 1px solid var(--border);
  border-radius: 8px; padding: 12px; font-size: 12px; line-height: 1.5; max-height: 200px; overflow-y: auto;
}
.r-actions { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 12px; }
.r-error { color: var(--red); background: rgba(220,58,69,.08); padding: 12px; border-radius: 8px; }
.r-empty { padding: 20px; text-align: center; }

/* Dashboard */
.dash-grid { display: flex; flex-direction: column; gap: 16px; }
.dash-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 12px; }
.dash-card {
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius);
  padding: 16px; text-align: center;
}
.dash-card-accent { border-color: rgba(79,107,237,.4); }
.dash-card-warn { border-color: rgba(201,130,26,.5); }
.dash-val { display: block; font-size: 28px; font-weight: 700; }
.dash-lbl { display: block; font-size: 12px; color: var(--muted); margin-top: 4px; }
.dash-leads { display: flex; flex-direction: column; gap: 8px; }
.dash-lead-row { display: flex; align-items: center; gap: 10px; padding: 8px; border: 1px solid var(--border); border-radius: 8px; }
.dash-lead-row span { flex: 1; }

/* Nav badge */
.nav-badge {
  background: var(--red); color: #fff; font-size: 10px; font-weight: 700;
  padding: 2px 6px; border-radius: 99px; margin-left: 4px;
}

/* Follow-up */
.row-overdue { background: rgba(220,58,69,.06); }
.fu-due { color: var(--red); font-weight: 600; }
.followup-quick { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; }

/* Bulk */
.bulk-bar {
  display: flex; flex-wrap: wrap; align-items: center; gap: 8px;
  padding: 10px; background: #f8fafc; border-radius: 8px; margin-bottom: 12px;
}
.filters-adv { margin-top: 8px; padding-top: 8px; border-top: 1px dashed var(--border); }
.import-btn { cursor: pointer; }

/* Timeline */
.timeline { display: flex; flex-direction: column; gap: 8px; max-height: 200px; overflow-y: auto; }
.timeline-item {
  display: flex; flex-direction: column; gap: 2px; padding: 8px 10px;
  border-left: 3px solid var(--accent); background: #f8fafc; border-radius: 0 6px 6px 0;
}
.timeline-time { font-size: 11px; color: var(--muted); }

/* Saved searches */
.saved-search-item {
  display: flex; flex-wrap: wrap; align-items: center; gap: 8px;
  padding: 10px; border: 1px solid var(--border); border-radius: 8px; margin-bottom: 8px;
}
.section-sub { font-size: 14px; margin: 16px 0 8px; }
.template-actions { display: flex; gap: 8px; margin-top: 8px; }

.search-estimate { margin: 0 0 8px; font-size: 13px; }
.s-all-rec-label { margin-bottom: 4px; }
#s-categories { min-height: 80px; }
#s-categories:disabled { opacity: 0.5; }

.leads-pager { margin-top: 12px; }

/* Skeleton loading */
@keyframes sk-shimmer {
  0% { background-position: 100% 0; }
  100% { background-position: -100% 0; }
}
.sk-pulse {
  background: linear-gradient(90deg, #e8edf5 25%, #f4f6fb 50%, #e8edf5 75%);
  background-size: 200% 100%;
  animation: sk-shimmer 1.2s ease-in-out infinite;
  border-radius: 6px;
}
.sk-wrap { display: flex; flex-direction: column; gap: 10px; padding: 4px 0; }
.sk-row { display: flex; gap: 10px; align-items: center; }
.sk-block { height: 14px; flex: 1; }
.sk-block.sm { height: 10px; width: 40%; flex: none; }
.sk-block.lg { height: 56px; }
.sk-card {
  height: 72px; border-radius: var(--radius);
  border: 1px solid var(--border);
}
.sk-table .sk-row { padding: 10px 0; border-bottom: 1px solid var(--border); }
.sk-map {
  position: absolute; inset: 0; z-index: 500;
  display: grid; place-items: center;
  background: rgba(244, 246, 251, 0.85);
  border-radius: inherit;
}
.sk-map .sk-pulse { width: 48%; height: 12px; }

@media (max-width: 800px) {
  .sidebar { position: fixed; left: -260px; transition: left .2s; z-index: 40; }
  .sidebar.open { left: 0; }
  .menu-btn { display: inline-block; }
  .field.grow { grid-column: span 1; }
  .detail-grid { grid-template-columns: 1fr; }
  .r-layout { grid-template-columns: 1fr; }
  .r-list { max-height: 240px; }
}