/* KPI va reys ustamalari ekrani (static/js/views/bonus.js). Ranglar mavzu
   tokenlaridan — yorug' va to'q mavzuda bir xil o'qiladi. */
.bonus-sub { font-size: 11.5px; color: var(--ink-2); margin-top: 2px; }
.bonus-muted { color: var(--ink-3); font-size: var(--fs-table); }
.bonus-warn-text { color: var(--amber-ink); font-weight: 600; font-size: 12px; }

.bonus-prog__list { display: grid; gap: 6px; min-width: 150px; }
.bonus-prog__top { display: flex; align-items: baseline; gap: 6px; font-size: 12px; }
.bonus-prog__top b { margin-left: auto; font-variant-numeric: tabular-nums; }
.bonus-prog__ok { color: var(--green-ink); font-weight: 700; font-size: 11px; }
.bonus-prog--compact .bonus-prog__top { font-size: 11.5px; }

.bonus-status { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.bonus-status--col { flex-direction: column; align-items: flex-start; gap: 4px; }
.bonus-flag { font-size: 11px; font-weight: 700; color: var(--amber-ink);
  background: var(--amber-soft); border-radius: var(--r-pill); padding: 1px 7px; cursor: help; }
.bonus-flag--info { color: var(--blue-ink); background: var(--blue-soft); }
/* Oxirgi ustun (.table td:last-child) umumiy uslubda nowrap — sabab matni o'ralishi kerak */
.bonus-reason { font-size: 11.5px; color: var(--ink-2); max-width: 240px; line-height: 1.35;
  white-space: normal; text-align: left; }
.bonus-reason--fix { color: var(--ink-3); font-style: italic; }
.bonus-formula { font-size: 12px; color: var(--ink-2); font-variant-numeric: tabular-nums;
  display: inline-block; max-width: 230px; }
.bonus-nowrap { white-space: nowrap; }
.bonus-body .table td.num { white-space: nowrap; }

.bonus-guide { display: grid; gap: 8px; padding: 12px 14px; border-radius: var(--r-card);
  border: 1px solid var(--amber-soft); background: color-mix(in srgb, var(--amber-soft) 45%, transparent); }
.bonus-guide__title { display: flex; gap: 8px; align-items: center; color: var(--amber-ink); }
.bonus-guide__row { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; font-size: 13px; }
.bonus-guide__count { min-width: 28px; text-align: center; font-weight: 700; border-radius: var(--r-pill);
  background: var(--amber-soft); color: var(--amber-ink); padding: 1px 8px; }
.bonus-guide__text { flex: 1 1 260px; }

.bonus-bulk, .bonus-filters, .bonus-actions { display: flex; gap: 8px; flex-wrap: wrap;
  align-items: center; }
.bonus-filters .select { width: auto; min-width: 170px; }

.bonus-issues { display: grid; gap: 6px; padding: 10px 12px; border-radius: var(--r-card);
  background: var(--amber-soft); color: var(--amber-ink); font-size: 12.5px; }
.bonus-issues__row { display: flex; gap: 8px; align-items: flex-start; }
.bonus-issues__row svg { flex: none; margin-top: 2px; }

.bonus-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px 16px; }
.bonus-cell--wide { grid-column: 1 / -1; }
.bonus-cell__label { font-size: 11px; color: var(--ink-3); text-transform: uppercase;
  letter-spacing: .04em; }
.bonus-cell__value { font-size: 13.5px; font-weight: 600; margin-top: 2px; }

.bonus-gps { margin-top: 12px; padding: 10px 12px; border: 1px dashed var(--line-strong, var(--line));
  border-radius: var(--r-card); display: grid; gap: 6px; }
.bonus-gps__title { display: flex; gap: 8px; align-items: center; }

/* Yuk tarkibi (reys oynasi) va aralash yuk qatori (jadval) */
.bonus-comp { margin-top: 12px; padding: 10px 12px; border-radius: var(--r-card);
  background: var(--card-2, var(--track)); display: grid; gap: 6px; }
.bonus-comp__title { display: flex; gap: 8px; align-items: center; }
.bonus-comp__rows { display: grid; gap: 4px; }
.bonus-comp__row { display: grid; grid-template-columns: minmax(90px, 140px) 1fr auto; gap: 10px;
  align-items: baseline; font-size: 13px; font-variant-numeric: tabular-nums; }
.bonus-comp__type { font-weight: 600; }
.bonus-mix { color: var(--amber-ink); white-space: nowrap; }
.bonus-note { margin-top: 12px; display: flex; gap: 8px; align-items: flex-start; font-size: 12.5px;
  padding: 8px 12px; border-radius: var(--r-card); background: var(--blue-soft); color: var(--blue-ink); }
.bonus-note svg { flex: none; margin-top: 2px; }

/* O'tgan oy hisobi yakunlanmagan (yangi oy boshida) */
.bonus-prev { display: flex; gap: 12px; align-items: center; flex-wrap: wrap; padding: 12px 14px;
  border-radius: var(--r-card); background: var(--blue-soft); color: var(--blue-ink); }
.bonus-prev svg { flex: none; }
.bonus-prev__text { flex: 1 1 260px; display: grid; gap: 2px; }
.bonus-prev__text .bonus-sub { color: inherit; opacity: .85; }

.bonus-card-head { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.bonus-card-head__name { margin: 0; font-size: 18px; }
.bonus-sum { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 10px; }
.bonus-sum__cell { background: var(--card-2, var(--track)); border-radius: var(--r-card);
  padding: 10px 12px; }
.bonus-sum__cell--total { background: var(--blue-soft); }
.bonus-sum__cell--total .bonus-sum__value { color: var(--blue-ink); }
.bonus-sum__value { font-size: 16px; font-weight: 700; margin-top: 4px;
  font-variant-numeric: tabular-nums; }

.bonus-rules td { vertical-align: top; }
.bonus-versions { display: grid; gap: 6px; margin-top: 12px; }
.bonus-version { display: flex; gap: 10px; align-items: baseline; flex-wrap: wrap; font-size: 12.5px; }
.bonus-pending { display: grid; gap: 10px; }
.bonus-pending__row { padding-bottom: 10px; border-bottom: 1px solid var(--line); }
.bonus-pending__row:last-child { border-bottom: 0; padding-bottom: 0; }
.bonus-pending__head { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.bonus-history { display: grid; gap: 6px; }
.bonus-history__row { display: flex; gap: 10px; align-items: baseline; flex-wrap: wrap;
  font-size: 12.5px; }

@media (max-width: 720px) {
  .bonus-grid { grid-template-columns: 1fr; }
  .bonus-filters .select { min-width: 0; flex: 1 1 140px; }
}