/* inc/css/app.css
   New CSS bucket for add-ons so we don't clutter header.php / index.php.
*/

/* --- Member Avatars --- */
.member-avatar{
  width: 34px;
  height: 34px;
  border-radius: 999px;
  object-fit: cover;
  flex: 0 0 auto;
  background: rgba(255,255,255,.08);
  border: 1px solid rgba(255,255,255,.18);
}
html[data-bs-theme="light"] .member-avatar{
  background: rgba(0,0,0,.06);
  border-color: rgba(0,0,0,.16);
}

/* Optional small size */
.member-avatar.sm{
  width: 26px;
  height: 26px;
}

/* --- Over-budget dot (smooth pulse + ring) ---
   If you already style this elsewhere, this is only for the new .blink-dot class.
*/
.blink-dot{
  width: 10px;
  height: 10px;
  border-radius: 999px;
  display: inline-block;
  position: relative;
  transform: translateZ(0);
  animation: kpiPulse 1.35s ease-in-out infinite;
  opacity: 0.95;
}
.blink-dot::after{
  content:'';
  position:absolute;
  inset:-6px;
  border-radius: 999px;
  border: 2px solid currentColor;
  opacity: .28;
  transform: scale(.75);
  animation: kpiRing 1.35s ease-in-out infinite;
}

@keyframes kpiPulse{
  0%   { transform: scale(0.92); opacity: .65; }
  50%  { transform: scale(1.00); opacity: 1.00; }
  100% { transform: scale(0.92); opacity: .65; }
}
@keyframes kpiRing{
  0%   { transform: scale(.70); opacity: .00; }
  40%  { transform: scale(1.00); opacity: .32; }
  100% { transform: scale(1.25); opacity: .00; }
}
@media (prefers-reduced-motion: reduce){
  .blink-dot, .blink-dot::after{ animation: none !important; }
}


.kpi-info-head{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:12px;
  }
  .kpi-info-grid{
    display:grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap:12px 18px;
  }
  .kpi-info-item{
    min-width:0;
  }
  .kpi-info-label{
    font-size: .82rem;
    opacity: .75;
    margin-bottom: 2px;
  }
  .kpi-info-value{
    font-weight: 600;
    line-height: 1.2;
    word-break: break-word;
  }

  /* responsive: 2 columns then 1 */
  @media (max-width: 992px){
    .kpi-info-grid{ grid-template-columns: repeat(2, minmax(0, 1fr)); }
  }
  @media (max-width: 576px){
    .kpi-info-grid{ grid-template-columns: 1fr; }
  }