/* Dashboard KPI cards: high-contrast game HUD using the real desktop root id. */
#sgl-desktop-app .sgl-analytics-kpis {
  display: grid !important;
  grid-template-columns: repeat(6, minmax(150px, 1fr)) !important;
  gap: 14px !important;
}
#sgl-desktop-app .sgl-analytics-kpis > article {
  --kpi-accent: #2baeff;
  isolation: isolate;
  position: relative;
  display: grid !important;
  grid-template-columns: 54px minmax(0, 1fr) !important;
  grid-template-rows: auto auto auto !important;
  column-gap: 12px !important;
  min-width: 0 !important;
  min-height: 126px !important;
  padding: 16px !important;
  border: 2px solid color-mix(in srgb, var(--kpi-accent) 78%, #fff) !important;
  border-radius: 20px !important;
  color: #fff !important;
  background:
    radial-gradient(circle at 100% 0, color-mix(in srgb, var(--kpi-accent) 30%, transparent), transparent 44%),
    linear-gradient(145deg, #12467f, #082753 52%, #061a3a) !important;
  box-shadow:
    inset 0 2px rgba(255,255,255,.14),
    inset 0 0 0 4px rgba(2,17,42,.28),
    0 6px 0 #020e25,
    0 14px 25px rgba(0,9,30,.35),
    0 0 18px color-mix(in srgb, var(--kpi-accent) 18%, transparent) !important;
  overflow: hidden;
}
#sgl-desktop-app .sgl-analytics-kpis > article.blue { --kpi-accent: #168bff; }
#sgl-desktop-app .sgl-analytics-kpis > article.green { --kpi-accent: #25d47b; }
#sgl-desktop-app .sgl-analytics-kpis > article.cyan { --kpi-accent: #24d8ec; }
#sgl-desktop-app .sgl-analytics-kpis > article.lime { --kpi-accent: #83dd35; }
#sgl-desktop-app .sgl-analytics-kpis > article.violet { --kpi-accent: #9b67ff; }
#sgl-desktop-app .sgl-analytics-kpis > article.orange { --kpi-accent: #ff962c; }
#sgl-desktop-app .sgl-analytics-kpis > article::before {
  content: "";
  position: absolute;
  z-index: -1;
  inset: auto 10px 8px 76px;
  height: 3px;
  border-radius: 99px;
  background: linear-gradient(90deg, var(--kpi-accent), transparent);
  box-shadow: 0 0 12px var(--kpi-accent);
  opacity: .72;
}
#sgl-desktop-app .sgl-analytics-kpis > article::after {
  content: "+ XP" !important;
  position: absolute !important;
  right: 10px !important;
  top: 8px !important;
  padding: 3px 7px !important;
  border: 1px solid color-mix(in srgb, var(--kpi-accent) 65%, #fff) !important;
  border-radius: 99px !important;
  color: #071b3a !important;
  background: color-mix(in srgb, var(--kpi-accent) 70%, #fff) !important;
  font-size: 8px !important;
  font-weight: 1000 !important;
  line-height: 1 !important;
  letter-spacing: .08em !important;
  text-shadow: none !important;
}
#sgl-desktop-app .sgl-analytics-kpis > article > i {
  grid-row: 1 / 4 !important;
  align-self: center !important;
  display: grid !important;
  place-items: center !important;
  width: 50px !important;
  height: 50px !important;
  margin: 0 !important;
  border: 2px solid rgba(255,255,255,.9) !important;
  border-radius: 16px !important;
  color: #fff !important;
  background: linear-gradient(145deg, color-mix(in srgb, var(--kpi-accent) 92%, #fff), color-mix(in srgb, var(--kpi-accent) 72%, #00316c)) !important;
  box-shadow: inset 0 2px rgba(255,255,255,.45), 0 5px 0 color-mix(in srgb, var(--kpi-accent) 45%, #001b42), 0 0 16px color-mix(in srgb, var(--kpi-accent) 42%, transparent) !important;
  font-size: 20px !important;
  text-shadow: 0 2px rgba(0,30,70,.55) !important;
}
#sgl-desktop-app .sgl-analytics-kpis > article > span {
  align-self: end !important;
  min-width: 0 !important;
  padding-right: 25px !important;
  color: #e8f7ff !important;
  -webkit-text-fill-color: #e8f7ff !important;
  font-size: 11px !important;
  font-weight: 900 !important;
  line-height: 1.2 !important;
  opacity: 1 !important;
  text-shadow: 0 2px #03132d !important;
}
#sgl-desktop-app .sgl-analytics-kpis > article > strong {
  align-self: center !important;
  margin: 3px 0 !important;
  color: #fff !important;
  -webkit-text-fill-color: #fff !important;
  font-size: 31px !important;
  font-weight: 1000 !important;
  line-height: 1 !important;
  opacity: 1 !important;
  text-shadow: 0 3px 0 #020d22, 0 0 14px color-mix(in srgb, var(--kpi-accent) 45%, transparent) !important;
}
#sgl-desktop-app .sgl-analytics-kpis > article > small {
  align-self: start !important;
  color: #b9dcf6 !important;
  -webkit-text-fill-color: #b9dcf6 !important;
  font-size: 10px !important;
  font-weight: 750 !important;
  line-height: 1.2 !important;
  opacity: 1 !important;
  text-shadow: 0 1px #03132d !important;
}
@media (max-width: 1500px) {
  #sgl-desktop-app .sgl-analytics-kpis { grid-template-columns: repeat(3, minmax(160px, 1fr)) !important; }
}
@media (max-width: 720px) {
  #sgl-desktop-app .sgl-analytics-kpis { grid-template-columns: 1fr 1fr !important; }
  #sgl-desktop-app .sgl-analytics-kpis > article { min-width: 0 !important; }
}

/* v0.60: dashboard fed by real Aircall calls + validated CRM outcomes. */
#sgl-desktop-app .sgl-analytics-source{display:grid;grid-template-columns:46px minmax(0,1fr) auto;align-items:center;gap:13px;margin:15px 0;padding:13px 16px;border:2px solid #2d9fff;border-radius:17px;background:linear-gradient(145deg,#0d376a,#071f45);box-shadow:0 5px 0 #03142f,0 12px 24px #00132f44;color:#fff}
#sgl-desktop-app .sgl-analytics-source>i{display:grid;place-items:center;width:42px;height:42px;border-radius:13px;background:linear-gradient(#28c7ff,#0870eb);box-shadow:inset 0 2px #ffffff77,0 4px 0 #03418b;font-size:18px}
#sgl-desktop-app .sgl-analytics-source div{display:grid;gap:3px;min-width:0}
#sgl-desktop-app .sgl-analytics-source strong{font-size:14px}
#sgl-desktop-app .sgl-analytics-source span{color:#c5e5ff;font-size:12px;white-space:normal}
#sgl-desktop-app .sgl-analytics-source>b{padding:8px 12px;border:1px solid #54e6bc;border-radius:999px;background:#0a513f;color:#80ffd5;font-size:12px}
#sgl-desktop-app .sgl-analytics-source.is-warning{border-color:#e8ad35}#sgl-desktop-app .sgl-analytics-source.is-warning>i{background:linear-gradient(#ffc64a,#c37900)}
#sgl-desktop-app .sgl-analytics-source.is-error{border-color:#ef6071}#sgl-desktop-app .sgl-analytics-source.is-error>i{background:linear-gradient(#ff7180,#be2439)}
#sgl-desktop-app .sgl-analytics-kpis{grid-template-columns:repeat(4,minmax(170px,1fr))!important}
#sgl-desktop-app .sgl-day-bars{gap:2px}
#sgl-desktop-app .sgl-day-bars b{width:8px!important;border-radius:6px 6px 0 0;transition:height .6s}
#sgl-desktop-app .sgl-day-bars .is-aircall{border-color:#8cecff;background:linear-gradient(90deg,#075fd7,#27c7ff,#075fd7);box-shadow:0 0 11px #22bfff99}
#sgl-desktop-app .sgl-day-bars .is-answered{border-color:#9dffd1;background:linear-gradient(90deg,#078c62,#42e6a3,#078c62);box-shadow:0 0 11px #2ce59b88}
#sgl-desktop-app .sgl-day-bars .is-typed{border-color:#d2b7ff;background:linear-gradient(90deg,#6740d8,#a96dff,#6740d8);box-shadow:0 0 11px #9a65ff88}
#sgl-desktop-app .sgl-day-bars .is-effective{border-color:#fff0a8;background:linear-gradient(90deg,#d58c00,#ffd650,#d58c00);box-shadow:0 0 11px #ffce4488}
#sgl-desktop-app .sgl-aircall-detail-strip{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:9px;margin-top:16px}
#sgl-desktop-app .sgl-aircall-detail-strip span{padding:10px 12px;border:1px solid #367bb9;border-radius:12px;background:#061a39;color:#d9edff;font-size:11px;font-weight:800;text-align:center}
#sgl-desktop-app .sgl-aircall-detail-strip i{margin-right:5px;color:#39cdfd}
@media(max-width:1200px){#sgl-desktop-app .sgl-analytics-kpis{grid-template-columns:repeat(2,minmax(160px,1fr))!important}#sgl-desktop-app .sgl-aircall-detail-strip{grid-template-columns:1fr 1fr}}
@media(max-width:700px){#sgl-desktop-app .sgl-analytics-source{grid-template-columns:42px 1fr}#sgl-desktop-app .sgl-analytics-source>b{grid-column:1/-1;text-align:center}#sgl-desktop-app .sgl-analytics-kpis{grid-template-columns:1fr!important}}