/* user_performance.css
   Layout + polish update
   Goal: better visual balance while preserving the design language
*/

/* === Ticker === */
.tickerShell { overflow:hidden;border-radius:14px;padding:10px 12px; }
.tickerLine { display:inline-block;white-space:nowrap;animation:mmTicker 18s linear infinite; }

@keyframes mmTicker {
  0%{transform:translateX(0%);}
  100%{transform:translateX(-50%);}
}

/* === Page Stack === */
.stack{
  display:flex;
  flex-direction:column;
  gap:18px;
}

/* === Bands === */
.band{
  border-radius:18px;
  border:1px solid rgba(255,255,255,0.16);
  background:rgba(255,255,255,0.02);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.06),
    0 10px 30px rgba(0,0,0,0.20);
  padding:14px;
}

.bandHead{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  flex-wrap:wrap;
  margin-bottom:10px;
}

.bandTitle{
  display:flex;
  align-items:center;
  gap:10px;
  flex-wrap:wrap;
}

.bandSub{
  font-size:12px;
  opacity:0.85;
}

.bandBody{
  border-radius:14px;
  border:1px solid rgba(255,255,255,0.10);
  background:rgba(0,0,0,0.06);
  padding:14px;
}

/* === Section Pill === */

.sectionPill{
  background:rgba(255,255,255,0.92)!important;
  color:#111!important;
  border:1px solid rgba(255,255,255,0.55)!important;
  box-shadow:0 6px 16px rgba(0,0,0,0.18);
}

/* === KPI Grid === */

.kpiRow{
  display:grid;
  grid-template-columns:repeat(5,minmax(0,1fr));
  gap:12px;
}

@media (max-width:1200px){
  .kpiRow{
    grid-template-columns:repeat(2,minmax(0,1fr));
  }
}

.kpi{
  border-radius:16px;
  border:1px solid rgba(255,255,255,0.12);
  background:rgba(0,0,0,0.08);
  padding:12px;
  min-height:72px;

  display:flex;
  flex-direction:column;
  justify-content:space-between;

  transition:transform .15s ease, box-shadow .15s ease;
}

.kpi:hover{
  transform:translateY(-2px);
  box-shadow:0 8px 20px rgba(0,0,0,0.25);
}

.kpiLabel{
  font-size:12px;
  opacity:0.85;
}

.kpiValue{
  font-size:20px;
  font-weight:800;
}

/* === Chart Grid === */

.chartGrid{
  display:grid;
  grid-template-columns:1fr 1fr 1fr;
  gap:16px;
}

@media (max-width:1100px){
  .chartGrid{
    grid-template-columns:1fr;
  }
}

/* === Chart Cards === */

.chartCard{
  border-radius:16px;
  border:1px solid rgba(255,255,255,0.12);
  background:rgba(0,0,0,0.10);
  padding:14px;

  display:flex;
  flex-direction:column;

  transition:
    transform .18s ease,
    box-shadow .18s ease;
}

.chartCard:hover{
  transform:translateY(-3px);
  box-shadow:0 10px 24px rgba(0,0,0,0.28);
}

/* === Height Variants === */

.chartCardShort{
  height:260px;
}

.chartCard{
  height:320px;
}

.chartCardTall{
  height:420px;
}

/* === Overview-only reduction === */
/* Reduce ONLY the top 3 overview charts by about 37.5% (320 -> 200). */
/* This keeps the lower chart/table pairs aligned at the original size. */
.stack > .band:first-of-type .chartGrid .chartCard{
  height:200px;
  padding:12px;
}

/* === Canvas Fill === */

.chartCard canvas{
  flex:1 1 auto;
}

/* === Table Styling === */

table{
  font-size:13px;
}

table th{
  font-weight:600;
  opacity:.85;
}

table tr:nth-child(even){
  background:rgba(255,255,255,0.02);
}

/* === Scrollable Table Containers === */

.tableScroll{
  max-height:260px;
  overflow-y:auto;
}

/* === Subtle Section Spacing === */

.sectionSpacer{
  height:16px;
}

/* === Notice Panels === */

.notice{
  border-radius:12px;
  border:1px solid rgba(255,255,255,0.10);
  background:rgba(255,255,255,0.03);
  padding:10px 12px;
  font-size:13px;
  line-height:1.4;
}

/* === Visual polish for charts area === */

.chartCard .bandSub{
  margin-bottom:8px;
  font-size:12px;
  letter-spacing:.3px;
}