* { box-sizing: border-box; }
body { margin: 0; font-family: Arial, sans-serif; background: #f1f5f9; color: #0f172a; }
.container { max-width: 1500px; margin: 0 auto; padding: 18px; }
h1 { margin: 0 0 8px; font-size: clamp(24px, 3vw, 32px); }
.status-banner { margin-top: 14px; padding: 10px 14px; border-radius: 12px; font-size: 13px; display: none; }
.status-info { background: #dbeafe; color: #1e3a8a; }
.status-success { background: #dcfce7; color: #166534; }
.status-error { background: #fee2e2; color: #991b1b; }
.card { background: white; border-radius: 18px; box-shadow: 0 2px 10px rgba(15, 23, 42, 0.08); padding: 18px; margin-top: 18px; }
.stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(112px, 1fr)); gap: 10px; margin-top: 16px; }
.fb-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(130px, 1fr)); gap: 10px; }
.stat-box { background: white; border-radius: 16px; box-shadow: 0 2px 10px rgba(15, 23, 42, 0.08); padding: 14px 16px; min-height: 92px; }
.stat-label { color: black; font-size: 13px; line-height: 1.15; margin-bottom: 8px; font-weight: bold; }
.stat-value { font-size: clamp(22px, 2.3vw, 28px); font-weight: bold; color: black; }
.grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 14px; }
.field label { display: block; margin-bottom: 8px; font-size: 14px; font-weight: bold; }
.field input, .field select, .field textarea { width: 100%; padding: 12px 14px; border: 1px solid #cbd5e1; border-radius: 12px; font-size: 14px; background: white; }
.field textarea { min-height: 100px; resize: vertical; }
.span-2 { grid-column: span 2; }
.span-4 { grid-column: 1 / -1; }
.actions-row { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; }
button { border: none; border-radius: 12px; padding: 11px 16px; font-size: 13px; font-weight: bold; cursor: pointer; }
button:disabled { opacity: 0.6; cursor: not-allowed; }
.btn-primary { background: #2563eb; color: white; }
.btn-secondary { background: white; color: #0f172a; border: 1px solid #cbd5e1; }
.btn-danger { background: #dc2626; color: white; }
.search-wrap { margin-top: 20px; }
.search-wrap input { width: 100%; max-width: 360px; padding: 12px 14px; border: 1px solid #cbd5e1; border-radius: 12px; font-size: 14px; background: white; }
.table-wrap { overflow-x: auto; border-radius: 18px; margin-top: 10px; }
.daily-report-wrap { max-height: 520px; overflow-y: auto; overflow-x: auto; }
table { width: 100%; min-width: 1350px; border-collapse: collapse; background: white; }
th, td { border-bottom: 1px solid #e2e8f0; padding: 12px; text-align: left; vertical-align: top; font-size: 14px; }
th { font-weight: bold; white-space: nowrap; }
.th-name { background: #fef08a; }
.th-lead { background: #93c5fd; }
.th-connected { background: #f0abfc; }
.th-qualify { background: #bef264; }
.th-called { background: #60a5fa; }
.th-dialed { background: #86efac; }
.th-duplicate { background: #00ffff; }
.th-notes { background: #fdba74; width: 260px; max-width: 280px; white-space: normal; word-break: break-word; }
.th-property { background: #fca5a5; }
.th-handled { background: #c4b5fd; }
.pill { display: inline-block; border-radius: 999px; padding: 4px 12px; color: white; font-weight: bold; font-size: 12px; }
.pill-green { background: #15803d; }
.pill-red { background: #b91c1c; }
.pill-maybe { background: #3d3d3d; color: white; }
.pill-source { background: #047857; }
.pill-duplicate-yes { background: #00ffff; color: #0f172a; }
.icon-btn { padding: 8px 12px; font-size: 13px; }
.summary-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 14px; align-items: end; }
@media (max-width: 760px) {
  .container { padding: 12px; }
  .card { padding: 14px; border-radius: 14px; }
  .stats { grid-template-columns: repeat(auto-fit, minmax(96px, 1fr)); gap: 8px; }
  .stat-box { min-height: 82px; padding: 12px; border-radius: 14px; }
  .stat-label { font-size: 12px; }
  .field input, .field select, .field textarea { padding: 10px 12px; }
  .span-2, .span-4 { grid-column: 1 / -1; }
  table { min-width: 1150px; }
}
.modal-backdrop { position: fixed; inset: 0; background: rgba(0,0,0,0.45); display: none; align-items: center; justify-content: center; padding: 20px; z-index: 1000; }
.modal { background: white; width: 100%; max-width: 420px; border-radius: 18px; padding: 24px; box-shadow: 0 10px 30px rgba(0,0,0,0.2); }
.hidden { display: none; }