/* 🔁 Replace here — whole file */
/* /wp-content/plugins/stitchcore-crm/assets/css/analytics.css */

:root{
  --ink: #0f1223;
  --muted: rgba(15,18,35,.60);
  --ana-card: #fbfbfc;
  --ana-border: rgba(0,0,0,.08);
  --ana-soft: rgba(0,0,0,.04);
  --ana-shadow: 0 8px 24px rgba(0,0,0,.06);
  --ana-ready: #84d1a3;
  --ana-prog:  #b7a8ff;

  --bar-track: #f0f1f7;
  --bar-track-2: #e9eaf2;
  --bar-fill-1: #cabdff;
  --bar-fill-2: #8e87ff;
}

#analyticsSection{ padding:16px 16px 28px; color:var(--ink); }

/* Header: title + sync only (range filters removed) */
#analyticsSection .ana-head{
  display:flex; align-items:center; justify-content:space-between; margin-bottom:12px;
}
#analyticsSection .ana-title{ font-weight:800; font-size:1.35rem; letter-spacing:.2px; }
#analyticsSection .ana-actions .ana-sync{
  appearance:none; border:1px solid var(--ana-border); background:#fff; padding:8px 10px; border-radius:999px; cursor:pointer;
  display:flex; align-items:center; justify-content:center; transition: transform .15s ease, box-shadow .15s ease;
  box-shadow:0 1px 2px rgba(0,0,0,.03);
}
#analyticsSection .ana-actions .ana-sync:hover{ transform: translateY(-1px); box-shadow:0 6px 18px rgba(0,0,0,.08); }
#analyticsSection .ana-sync-icon{
  width:18px; height:18px; display:inline-block;
  background:
    conic-gradient(from 0deg,#999 0 90deg,transparent 90deg),
    conic-gradient(from 180deg,#999 0 90deg,transparent 90deg);
  -webkit-mask: radial-gradient(circle at 50% 50%, #0000 8px, #000 9px);
  mask: radial-gradient(circle at 50% 50%, #0000 8px, #000 9px);
  border-radius:50%;
}

/* Body grid */
#analyticsSection .ana-body{ display:grid; gap:14px; }
#analyticsSection .ana-kpis{
  display:grid; grid-template-columns: repeat(6, minmax(180px, 1fr)); gap:14px;
}

/* KPI cards */
#analyticsSection .kpi{
  background:var(--ana-card); border:1px solid var(--ana-border); border-radius:16px; padding:18px; min-height:110px;
  box-shadow: var(--ana-shadow); display:flex; flex-direction:column; justify-content:center; position:relative; overflow:hidden;
}
#analyticsSection .kpi.link{ cursor:pointer; transition: transform .15s ease, box-shadow .15s ease; }
#analyticsSection .kpi.link:hover{ transform: translateY(-1px); box-shadow:0 12px 22px rgba(0,0,0,.1); }
#analyticsSection .kpi .kpi-title{ font-size:.86rem; color:var(--muted); margin-top:6px; font-weight:700; }
#analyticsSection .kpi .kpi-value{ font-size:2.1rem; font-weight:800; line-height:1; color:var(--ink); }
#analyticsSection .kpi .kpi-sub{ font-size:.82rem; color:var(--muted); margin-top:4px; }

/* Donut KPI */
#analyticsSection .kpi.kpi-donut{ align-items:center; justify-content:flex-start; }
#analyticsSection .kpi.kpi-donut .donut{ display:flex; flex-direction:column; align-items:center; }
#analyticsSection .kpi.kpi-donut canvas{ display:block; }
#analyticsSection .kpi.kpi-donut .donut-legend{ margin-top:8px; display:flex; align-items:center; gap:14px; color:var(--muted); font-weight:600; }
#analyticsSection .kpi.kpi-donut .lg{ display:inline-block; width:10px; height:10px; border-radius:999px; margin-right:6px; }
#analyticsSection .kpi.kpi-donut .lg-ready{ background:var(--ana-ready); }
#analyticsSection .kpi.kpi-donut .lg-prog{  background:var(--ana-prog); }

/* Panels */
#analyticsSection .ana-panels{ display:grid; grid-template-columns: 2fr 1fr; gap:14px; }
#analyticsSection .ana-panel{
  background:var(--ana-card); border:1px solid var(--ana-border); border-radius:16px; padding:14px; min-height:260px;
  box-shadow: var(--ana-shadow);
}
#analyticsSection .panel-head{ display:flex; align-items:center; justify-content:space-between; margin-bottom:10px; }
#analyticsSection .panel-head h3{ font-size:1rem; margin:0; letter-spacing:.2px; }
#analyticsSection .panel-head h3 small{ font-weight:600; color:var(--muted); margin-left:6px; }
#analyticsSection .panel-box{ display:block; }

/* WIP by Stage — new professional style */
#analyticsSection .stages{ display:flex; flex-direction:column; gap:10px; }
#analyticsSection .stage-row{ display:grid; grid-template-columns: 120px 1fr; gap:10px; align-items:center; }
#analyticsSection .stage-row .label{ font-weight:700; color:var(--muted); font-size:.9rem; }

#analyticsSection .stage-row .track{
  position:relative; height:16px; border-radius:12px;
  background: linear-gradient(180deg, var(--bar-track), var(--bar-track-2));
  overflow:hidden; box-shadow: inset 0 1px 2px rgba(0,0,0,.04);
}
#analyticsSection .stage-row .track::before{
  /* faint diagonals for visual depth */
  content:''; position:absolute; inset:0; background:
    repeating-linear-gradient(135deg, rgba(255,255,255,.6) 0 6px, rgba(255,255,255,0) 6px 12px);
  opacity:.35; pointer-events:none;
}
#analyticsSection .stage-row .fill{
  position:absolute; left:0; top:0; bottom:0; width:var(--pct,0%);
  background: linear-gradient(90deg, var(--bar-fill-1), var(--bar-fill-2));
  border-radius:12px; box-shadow: 0 1px 0 rgba(255,255,255,.4) inset;
  transition: width .25s ease;
}
#analyticsSection .stage-row .badge{
  position:absolute; right:8px; top:50%; transform:translateY(-50%);
  background:#fff; border:1px solid var(--ana-border); box-shadow:0 4px 10px rgba(0,0,0,.06);
  padding:2px 8px; border-radius:999px; font-size:.76rem; font-weight:800; color:#222;
}

/* SLA list */
#analyticsSection .risk{
  display:grid; grid-template-columns: 120px 1fr auto; align-items:center; gap:8px;
  padding:10px 12px; border-radius:12px; border:1px dashed var(--ana-soft); margin:8px 0; cursor:pointer;
  background:#fff;
}
#analyticsSection .risk .risk-code{ font-weight:800; letter-spacing:.2px; color:var(--ink); }
#analyticsSection .risk .risk-date{ font-size:.86rem; color:var(--muted); }
#analyticsSection .risk .risk-cust{ grid-column: 1 / -1; font-size:.82rem; color:var(--muted); margin-left:2px; }
#analyticsSection .risk .risk-badge{ font-size:.75rem; padding:4px 10px; border-radius:999px; font-weight:700; }
#analyticsSection .risk .risk-badge.green{ background:#e6f7e9; color:#065f46; }
#analyticsSection .risk .risk-badge.yellow{ background:#fff8e1; color:#7c5e10; }
#analyticsSection .risk .risk-badge.red{ background:#ffe5e5; color:#7f1d1d; }

/* loading shimmer */
#analyticsSection .skeleton{
  position:relative; overflow:hidden; background:linear-gradient(180deg,#f6f7f8,#ededed);
  min-height:100px; border-radius:16px;
}
#analyticsSection .skeleton::before{
  content:''; position:absolute; inset:0;
  background:linear-gradient(90deg, transparent, rgba(255,255,255,.6), transparent);
  animation: anaShimmer 1.2s infinite;
}
@keyframes anaShimmer { from { transform: translateX(-100%); } to { transform: translateX(100%); } }

/* Responsive */
@media (max-width: 1280px){
  #analyticsSection .ana-kpis{ grid-template-columns: repeat(3, minmax(180px, 1fr)); }
}
@media (max-width: 960px){
  #analyticsSection .ana-panels{ grid-template-columns: 1fr; }
  #analyticsSection .ana-kpis{ grid-template-columns: repeat(2, minmax(160px, 1fr)); }
}