/* Site Statistics Page Styles */
:root{
  --bg:#F5F6FB;
  --card:#FFFFFF;
  --border:#E5E7EB;
  --text:#111827;
  --muted:#6B7280;
  --brand:#E42626;
  --blue:#3b82f6;
  --red:#ef4444;
  --green:#22c55e;
  --purple:#a855f7;
  --shadow:0 10px 24px rgba(16,24,40,.08);
}
body{background:var(--bg)}

.container{width:90%;margin:0 auto}

.stats-hero{padding-top:24px}
.breadcrumb{color:#9CA3AF;font-size:13px;margin-bottom:10px;display:flex;align-items:center;gap:6px}
.breadcrumb a{color:#6B7280;text-decoration:none}
.breadcrumb a:hover{color:#E42626}
.breadcrumb .sep{color:#D1D5DB}
.page-title{font-size:22px;font-weight:800;color:#081035;margin-bottom:18px}

.stats-cards{padding:8px 0 0}
.cards-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:14px}
.stat-card{background:var(--card);border:1px solid var(--border);border-radius:16px;padding:18px 16px;box-shadow:var(--shadow)}
.stat-card .icon{font-size:20px;opacity:.9;margin-bottom:8px}
.stat-card .title{color:#374151;font-size:14px;margin-bottom:6px}
.stat-card .value{background:#F0F2F5;border-radius:10px;padding:10px 12px;min-height:44px;font-weight:800;font-size:20px;text-align:center;color:#081035}

.stat-card.bg-orange{background:#FFF7ED;border-color:#FFEDD5}
.stat-card.bg-pink{background:#FEF2F2;border-color:#FEE2E2}
.stat-card.bg-green{background:#F0FDF4;border-color:#DCFCE7}
.stat-card.bg-purple{background:#FAF5FF;border-color:#E9D5FF}

.stats-chart-section{padding:12px 0 40px;position:relative}
.chart-card{background:var(--card);border:1px solid var(--border);border-radius:16px;padding:14px;box-shadow:var(--shadow)}
.chart-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:10px}
.chart-title{font-weight:800;color:#081035;font-size:14px;margin-right:8px}
.chart-sub{font-size:12px;background:#EAF9EF;color:#16a34a;padding:4px 8px;border-radius:999px}
.chart-body{border:1px solid #E3E7EF;border-radius:12px;background:linear-gradient(180deg,#F5F8FF 0%,#FFFFFF 100%);padding:10px}
.filter-trigger{display:flex;align-items:center;gap:8px;color:#6B7280}
.btn-nav{border:1px solid var(--border);background:#fff;color:#111827;border-radius:8px;padding:4px 8px;cursor:pointer}
.legend{display:flex;gap:16px;align-items:center;margin-top:10px;color:#6B7280;font-size:12px}
.dot{display:inline-block;width:10px;height:10px;border-radius:50%;margin-left:6px}
.dot-blue{background:#3b82f6}
.dot-red{background:#ef4444}
.dot-green{background:#22c55e}
.dot-purple{background:#a855f7}

.quick-range{display:flex;gap:10px;justify-content:space-between;margin:14px 0}
.range-btn{padding:10px 16px;border-radius:10px;background:#ECEFF5;color:#555;border:none;cursor:pointer}
.range-btn.primary{background:var(--brand);color:#fff}

/* Popover */
.filter-popover{position:absolute;top:56px;right:5%;width:420px;background:#fff;border:1px solid var(--border);border-radius:16px;box-shadow:0 12px 30px rgba(16,24,40,.12);padding:14px;display:none;z-index:1000}
.filter-popover.active{display:block}
.pop-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:8px}
.pop-header .title{font-weight:800;color:#111827}
.pop-header .clear{color:#ef4444;background:none;border:none;cursor:pointer}
.pop-body .chips{display:flex;gap:6px;margin:8px 0}
.chip{border:1px solid var(--border);background:#fff;color:#374151;border-radius:8px;padding:6px 10px;font-size:12px;cursor:pointer}
.chip.active{background:#001D81;color:#fff;border-color:#001D81}
.calendar-hint{font-size:12px;color:#9CA3AF;border:1px dashed #E5E7EB;border-radius:10px;padding:8px}
.pop-footer{display:flex;justify-content:flex-end;gap:8px;margin-top:10px}
.btn-outline{padding:10px 16px;border-radius:10px;border:1px solid #D1D5DB;background:#fff;color:#111827;cursor:pointer}
.btn-primary{padding:10px 16px;border-radius:10px;border:none;background:var(--brand);color:#fff;cursor:pointer}

/* Responsive */
@media (max-width: 1024px){
  .cards-grid{grid-template-columns:repeat(2,1fr)}
  .filter-popover{right:5%;width:360px}
}
@media (max-width: 640px){
  .cards-grid{grid-template-columns:1fr}
  .container{width:94%}
  .filter-popover{right:3%;left:3%;width:auto}
}