/* METROPARK_GLOBAL_KPI_VISUAL_SYSTEM_V1
   Shared presentation contract only. KPI data, requests and business rules
   remain owned by their existing pages. /tariffs is the visual reference. */
:root{
  --mp-kpi-min-height:132px;
  --mp-kpi-padding:16px;
  --mp-kpi-gap:16px;
  --mp-kpi-radius:var(--mp-radius,14px);
  --mp-kpi-hover-y:-3px;
  --mp-kpi-motion:180ms ease;
}

.mp-kpi-grid{
  min-width:0;
  grid-auto-rows:1fr;
  gap:var(--mp-kpi-gap,12px);
}
.mp-kpi-grid>.mp-kpi-card{height:100%}
.mp-kpi-grid.mp-kpi-grid--six{grid-template-columns:repeat(6,minmax(0,1fr))!important}
.mp-kpi-grid--auto{grid-template-columns:repeat(auto-fit,minmax(min(100%,210px),1fr))!important}
.mp-kpi-grid--dense{--mp-kpi-gap:12px}
.mp-kpi-grid--compact{--mp-kpi-gap:10px}
.mp-kpi-grid--dashboard{--mp-kpi-gap:14px}

.mp-kpi-card{
  --mp-kpi-accent:var(--stat-accent,var(--kpi-accent,var(--mp-slate,#64748b)));
  min-width:0;
  box-sizing:border-box;
  transition:
    transform var(--mp-kpi-motion),
    box-shadow var(--mp-kpi-motion),
    border-color var(--mp-kpi-motion);
}

.mp-kpi-card.mp-kpi-card--standard{
  position:relative!important;
  display:flex!important;
  align-items:flex-start!important;
  gap:15px!important;
  width:100%;
  height:100%;
  min-height:var(--mp-kpi-min-height)!important;
  padding:var(--mp-kpi-padding)!important;
  overflow:hidden!important;
  border:1px solid var(--mp-border,#dbe5f2)!important;
  border-left:5px solid var(--mp-kpi-accent)!important;
  border-radius:var(--mp-kpi-radius)!important;
  background:linear-gradient(
    180deg,
    var(--stat-bg,var(--mp-slate-soft,#e9edf4)),
    color-mix(in srgb,var(--stat-bg,var(--mp-slate-soft,#e9edf4)) 74%,var(--mp-surface,#fff) 26%)
  )!important;
  color:var(--mp-text,#172033)!important;
  box-shadow:var(--mp-shadow-card,0 10px 25px rgba(28,56,92,.10))!important;
}
.mp-kpi-card.mp-kpi-card--compact{
  --mp-kpi-min-height:92px;
  --mp-kpi-padding:14px;
  gap:12px!important;
}

.mp-kpi-card--standard>.mp-kpi-icon{
  position:relative;
  z-index:1;
  display:grid!important;
  place-items:center;
  flex:0 0 50px!important;
  width:50px!important;
  height:50px!important;
  min-width:50px;
  border:1px solid color-mix(in srgb,var(--mp-kpi-accent) 25%,transparent)!important;
  border-radius:50%!important;
  background:color-mix(in srgb,var(--mp-kpi-accent) 14%,#fff 86%)!important;
  color:var(--mp-kpi-accent)!important;
  box-shadow:none!important;
  font-size:23px!important;
  line-height:1!important;
}
.mp-kpi-card--compact>.mp-kpi-icon{
  flex-basis:44px!important;
  width:44px!important;
  height:44px!important;
  min-width:44px;
  font-size:21px!important;
}
html[data-theme="dark"] .mp-kpi-card--standard>.mp-kpi-icon,
html.theme-dark .mp-kpi-card--standard>.mp-kpi-icon{
  background:color-mix(in srgb,var(--mp-kpi-accent) 20%,#0f172a 80%)!important;
  border-color:color-mix(in srgb,var(--mp-kpi-accent) 35%,transparent)!important;
}

.mp-kpi-card.mp-kpi-card--standard .mp-kpi-body{
  position:relative;
  z-index:1;
  display:grid!important;
  align-content:start;
  gap:8px;
  width:100%;
  min-width:0;
}
.mp-kpi-card.mp-kpi-card--standard .mp-kpi-title{
  display:block!important;
  min-width:0;
  margin:0!important;
  color:var(--mp-muted,#5f6f86)!important;
  font-size:12px!important;
  font-weight:900!important;
  line-height:1.2!important;
  overflow-wrap:anywhere;
}
.mp-kpi-value{
  display:block!important;
  min-width:0;
  max-width:100%;
  margin:0!important;
  color:var(--mp-text-strong,#0f172a)!important;
  font-size:clamp(20px,2vw,30px)!important;
  font-weight:950!important;
  line-height:1.05!important;
  font-variant-numeric:tabular-nums;
  overflow-wrap:anywhere;
}
.mp-kpi-card.mp-kpi-card--standard .mp-kpi-meta{
  display:inline-flex!important;
  align-items:center;
  justify-content:flex-start;
  justify-self:start;
  min-width:0;
  min-height:24px;
  max-width:100%;
  margin:0!important;
  padding:4px 9px;
  border:1px solid color-mix(in srgb,var(--mp-kpi-accent) 24%,var(--mp-border,#dbe5f2));
  border-radius:999px;
  background:color-mix(in srgb,var(--mp-kpi-accent) 10%,var(--mp-surface,#fff) 90%);
  color:var(--mp-text,#172033)!important;
  font-size:11px!important;
  font-weight:900!important;
  line-height:1.2!important;
  overflow:hidden;
  text-overflow:ellipsis;
}

.mp-kpi-tone-cyan{--stat-bg:#dff5fb!important;--stat-accent:#0891b2!important}
.mp-kpi-tone-slate{--stat-bg:var(--mp-slate-soft,#e9edf4)!important;--stat-accent:var(--mp-slate,#64748b)!important}
html[data-theme="dark"] .mp-kpi-tone-cyan,
html.theme-dark .mp-kpi-tone-cyan{--stat-bg:#0c2d3a!important;--stat-accent:#22d3ee!important}
.service-kpi.active{--mp-kpi-accent:#2f8f59}
.service-kpi.expired{--mp-kpi-accent:#cc4e4e}
.service-kpi.soon{--mp-kpi-accent:#e09b18}
.service-kpi.inside{--mp-kpi-accent:#1888b7}
.service-kpi.events{--mp-kpi-accent:#6b5aa8}
.problem-kpi.all{--mp-kpi-accent:#2563eb}
.problem-kpi.problem{--mp-kpi-accent:#64748b}
.problem-kpi.yellow{--mp-kpi-accent:#ca8a04}
.problem-kpi.red{--mp-kpi-accent:#dc2626}

.mp-kpi-card:is(a,button,[role="button"]){cursor:pointer}
.mp-kpi-card:is(a,button,[role="button"]):focus-visible{
  outline:3px solid color-mix(in srgb,var(--mp-kpi-accent) 58%,transparent)!important;
  outline-offset:3px;
}

@media (hover:hover) and (pointer:fine){
  .mp-kpi-card.mp-kpi-card:hover{
    transform:translateY(var(--mp-kpi-hover-y))!important;
    border-top-color:color-mix(in srgb,var(--mp-kpi-accent) 40%,var(--mp-border,#dbe5f2))!important;
    border-right-color:color-mix(in srgb,var(--mp-kpi-accent) 40%,var(--mp-border,#dbe5f2))!important;
    border-bottom-color:color-mix(in srgb,var(--mp-kpi-accent) 40%,var(--mp-border,#dbe5f2))!important;
    border-left-color:var(--mp-kpi-accent)!important;
    box-shadow:0 15px 34px color-mix(in srgb,var(--mp-kpi-accent) 14%,rgba(15,23,42,.18))!important;
  }
}

@media (hover:none),(pointer:coarse){
  .mp-kpi-card.mp-kpi-card:hover{transform:none!important}
}

@media(max-width:1400px){
  .mp-kpi-grid.mp-kpi-grid--six{grid-template-columns:repeat(3,minmax(0,1fr))!important}
}
@media(max-width:860px){
  .mp-kpi-grid.mp-kpi-grid--six{grid-template-columns:repeat(2,minmax(0,1fr))!important}
}
@media(max-width:520px){
  .mp-kpi-grid.mp-kpi-grid--six{grid-template-columns:minmax(0,1fr)!important}
  .mp-kpi-card.mp-kpi-card--standard{--mp-kpi-min-height:116px}
}

@media(prefers-reduced-motion:reduce){
  .mp-kpi-card.mp-kpi-card{
    transition:none!important;
  }
  .mp-kpi-card.mp-kpi-card:hover{
    transform:none!important;
  }
}