/* Sprint 22 — Metas & Tendências */
.service-performance-head{align-items:flex-start}
.service-performance-period{
  display:grid;
  gap:4px;
  min-width:120px;
}
.service-performance-period span{
  font-size:10px;
  text-transform:uppercase;
  letter-spacing:.05em;
  color:var(--muted);
  font-weight:800;
}
.service-performance-hero{
  border:1px solid var(--border);
  border-radius:16px;
  background:var(--surface);
  padding:18px 20px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:24px;
  position:relative;
  overflow:hidden;
  margin-bottom:16px;
}
.service-performance-hero::before{
  content:"";
  position:absolute;
  inset:0 auto 0 0;
  width:5px;
  background:var(--green);
}
.service-performance-hero.watch::before{background:#d27b24}
.service-performance-hero.miss::before{background:#d53b3b}
.service-performance-hero.na::before{background:var(--muted)}
.service-performance-hero>div{display:grid;gap:4px}
.service-performance-hero span{
  color:var(--muted);
  font-size:10px;
  font-weight:800;
  text-transform:uppercase;
  letter-spacing:.05em;
}
.service-performance-hero h3{
  font-size:38px;
  margin:0;
  line-height:1;
}
.service-performance-hero h3 small{
  font-size:15px;
  color:var(--muted);
  font-weight:700;
}
.service-performance-hero p{margin:2px 0 0;color:var(--muted)}
.service-performance-hero-side{text-align:right}
.service-performance-hero-side b{font-size:22px}
.service-performance-hero-side small,
.service-performance-hero-side em{
  color:var(--muted);
  font-size:11px;
  font-style:normal;
}
.service-performance-goals{
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:12px;
  margin-bottom:16px;
}
.service-performance-goals article{
  border:1px solid var(--border);
  border-radius:14px;
  padding:14px;
  background:var(--surface);
  display:grid;
  gap:10px;
}
.service-performance-goal-head{
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:8px;
}
.service-performance-goal-head span{
  font-size:11px;
  font-weight:800;
  text-transform:uppercase;
  letter-spacing:.04em;
  color:var(--muted);
}
.service-performance-goal-head strong{
  border:1px solid var(--border);
  border-radius:999px;
  padding:4px 7px;
  font-size:10px;
}
.service-performance-goals .met .service-performance-goal-head strong{color:var(--green)}
.service-performance-goals .watch .service-performance-goal-head strong{color:#9a5518}
.service-performance-goals .miss .service-performance-goal-head strong{color:#b92f2f}
.service-performance-goals .na .service-performance-goal-head strong{color:var(--muted)}
.service-performance-goal-value{display:flex;align-items:end;justify-content:space-between;gap:8px}
.service-performance-goal-value b{font-size:24px}
.service-performance-goal-value small{color:var(--muted)}
.service-performance-progress{
  height:6px;
  border-radius:999px;
  background:color-mix(in srgb,var(--border) 70%,transparent);
  overflow:hidden;
}
.service-performance-progress i{
  display:block;
  height:100%;
  border-radius:inherit;
  background:var(--green);
}
.service-performance-goals .watch .service-performance-progress i{background:#d27b24}
.service-performance-goals .miss .service-performance-progress i{background:#d53b3b}
.service-performance-goals .na .service-performance-progress i{background:var(--muted)}
.service-performance-goals p{margin:0;color:var(--muted);font-size:11px}
.service-performance-grid{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:16px;
  margin-bottom:16px;
}
.service-performance-grid>.panel{padding:18px}
.service-performance-comparison{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:10px;
}
.service-performance-comparison article{
  border:1px solid var(--border);
  border-radius:12px;
  padding:12px;
  display:grid;
  gap:4px;
  background:color-mix(in srgb,var(--surface) 96%,var(--green) 4%);
}
.service-performance-comparison span{font-size:11px;color:var(--muted)}
.service-performance-comparison b{font-size:19px}
.service-performance-comparison small{font-size:10px;color:var(--muted)}
.service-performance-comparison strong{font-size:11px}
.service-performance-comparison strong.good{color:var(--green)}
.service-performance-comparison strong.bad{color:#b92f2f}
.service-performance-comparison strong.neutral,
.service-performance-comparison strong.flat,
.service-performance-comparison strong.na{color:var(--muted)}
.service-performance-weekly{display:grid;gap:10px}
.service-performance-weekly article{
  border-bottom:1px solid var(--border);
  padding:0 0 10px;
  display:grid;
  gap:8px;
}
.service-performance-weekly article:last-child{border-bottom:0;padding-bottom:0}
.service-performance-week-label{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:8px;
}
.service-performance-week-label span{font-size:10px;color:var(--muted)}
.service-performance-week-bars{display:grid;gap:6px}
.service-performance-week-bars>div{
  display:grid;
  grid-template-columns:72px minmax(0,1fr) 28px;
  align-items:center;
  gap:7px;
  font-size:10px;
}
.service-performance-week-bars span{color:var(--muted)}
.service-performance-week-bars i{
  height:7px;
  border-radius:999px;
  background:color-mix(in srgb,var(--border) 70%,transparent);
  overflow:hidden;
}
.service-performance-week-bars i b{
  display:block;
  height:100%;
  border-radius:inherit;
  background:var(--green);
}
.service-performance-week-bars>div:nth-child(2) i b{
  background:color-mix(in srgb,var(--green) 55%,#2e6387 45%);
}
.service-performance-table-panel{min-width:0}
.service-performance-table{min-width:680px}
.service-performance-chip,
.service-performance-score-pill{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-width:58px;
  border:1px solid var(--border);
  border-radius:999px;
  padding:5px 7px;
  font-size:10px;
  font-weight:800;
}
.service-performance-chip.met,
.service-performance-score-pill.met{color:var(--green);background:color-mix(in srgb,var(--green) 7%,var(--surface))}
.service-performance-chip.watch,
.service-performance-score-pill.watch{color:#9a5518;background:rgba(210,123,36,.08)}
.service-performance-chip.miss,
.service-performance-score-pill.miss{color:#b92f2f;background:rgba(213,59,59,.08)}
.service-performance-chip.na,
.service-performance-score-pill.na{color:var(--muted)}
.service-performance-dialog{width:min(760px,calc(100vw - 32px))}
.service-performance-target-form{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:14px;
  padding:6px 0 18px;
}
.service-performance-target-form label{
  display:grid;
  gap:6px;
  font-weight:700;
}
.service-performance-target-form small{
  color:var(--muted);
  font-weight:400;
}
@media(max-width:1450px){
  .service-performance-goals{grid-template-columns:repeat(2,minmax(0,1fr))}
  .service-performance-comparison{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media(max-width:1050px){
  .service-performance-grid{grid-template-columns:1fr}
}
@media(max-width:760px){
  .service-performance-hero{align-items:flex-start;flex-direction:column}
  .service-performance-hero-side{text-align:left}
  .service-performance-goals{grid-template-columns:1fr}
  .service-performance-comparison{grid-template-columns:1fr}
  .service-performance-target-form{grid-template-columns:1fr}
}