/* =====================================================================
   ПБ / Королевская битва — item stat editor, grouped layout (concept).
   Lives inside the existing light .slot-editor window (slot-editor-light.css).
   Field set, ratios, budget and the create handler are exactly the current ones;
   only the markup grouping and styles change.
   ===================================================================== */
#slotEditor.is-battle .slot-editor__dialog { width: min(1080px, 100%) !important; }
#slotEditor.is-battle .slot-editor__body { padding: 0 0 14px !important; }

/* ---------- Budget bar: sticky under the header, always visible ---------- */
.bt-budget {
  position: sticky;
  top: 0;
  z-index: 5;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 132px)) minmax(120px, 1fr) auto;
  align-items: center;
  gap: 10px 14px;
  margin: 0 0 12px !important;
  padding: 10px 14px;
  border-bottom: 1px solid #d9bd83;
  background: linear-gradient(180deg, #fffaf0 0, #f8ecd0 100%);
  box-shadow: 0 4px 8px -6px #5c3a0e55;
}
.bt-metric {
  display: grid;
  gap: 2px;
  padding: 5px 10px 6px;
  border: 1px solid #ddc08c;
  border-radius: 4px;
  background: #fffdf8;
  box-shadow: inset 0 0 0 2px #fffaf0;
}
.bt-metric small { color: #7a654a; font: 700 10.5px/1 Arial, sans-serif; letter-spacing: .08em; text-transform: uppercase; }
.bt-metric b { color: #3b2410; font: 700 21px/1.05 "Times New Roman", Times, serif; font-variant-numeric: tabular-nums; }
.bt-metric--left b { color: #2a6a2f; }
.bt-meter { position: relative; height: 10px; overflow: hidden; border: 1px solid #c9a35a; border-radius: 6px; background: #f3e6cc; box-shadow: inset 0 1px 2px #5e3b0c26; }
.bt-meter i { position: absolute; inset: 0 auto 0 0; width: var(--fill, 0%); border-radius: 6px; background: linear-gradient(180deg, #f6cf78, #c98a2e); transition: width .15s; }
.bt-budget .tool-button { min-height: 46px !important; white-space: nowrap; }
/* Over budget: bar, «Осталось» and meter turn red; the button looks blocked (handler already refuses). */
.is-over .bt-budget { border-bottom-color: #c27358; background: linear-gradient(180deg, #fff3ee, #f7dcd0); }
.is-over .bt-metric--spent, .is-over .bt-metric--left { border-color: #c96b5d; }
.is-over .bt-metric--spent b, .is-over .bt-metric--left b { color: #b3261e; }
.is-over .bt-meter { border-color: #b3261e; }
.is-over .bt-meter i { width: 100%; background: linear-gradient(180deg, #e98a7c, #b3261e); }
.is-over .bt-budget .tool-button { filter: grayscale(.55); opacity: .7; }

.bt-note { margin: 0 14px 12px !important; }

/* ---------- Two columns of sections ---------- */
.bt-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr);
  gap: 12px;
  margin: 0 14px;
  align-items: start;
}
.bt-col { display: grid; gap: 12px; min-width: 0; }
.bt-sec {
  position: relative;
  min-width: 0;
  padding: 0 14px 10px;
  border: 1px solid #d8bd86;
  border-radius: 5px;
  background: linear-gradient(180deg, #fffbf2, #fbf2e0);
  box-shadow: inset 0 0 0 2px #fffaf0, inset 0 0 0 3px #efdfbd, 0 1px 2px #5c3a0e1f;
}
.bt-sec__head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
  margin: 0 -14px 8px;
  padding: 9px 14px 7px;
  border-bottom: 1px solid #e3c890;
}
.bt-sec__head h3 { margin: 0 !important; color: #6e1410 !important; font: 700 18px/1.15 "Times New Roman", Times, serif !important; }
.bt-sec__head span { color: #8a7355; font: 400 12px/1.2 Arial, sans-serif; white-space: nowrap; }

/* A field = label + input on one line. */
.bt-field {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 88px;
  align-items: center;
  gap: 10px;
  min-height: 38px;
  color: #2f1e10;
  font: 400 15.5px/1.2 "Times New Roman", Times, serif;
}
.bt-field + .bt-field { border-top: 1px solid #f0e3c6; }
.bt-stats { display: grid; grid-template-columns: 1fr 1fr; column-gap: 22px; }
.bt-stats .bt-field:nth-child(2) { border-top: 0; }

/* Masteries & wards: own (green) and enemy (pink) in one row, like the main Item Editor. */
.bt-pairs__cols,
.bt-pair { display: grid; grid-template-columns: minmax(0, 1fr) 86px 86px; align-items: center; column-gap: 10px; }
.bt-pairs__cols { margin: -2px 0 2px; color: #7a654a; font: 700 10.5px/1 Arial, sans-serif; letter-spacing: .06em; text-transform: uppercase; }
.bt-pairs__cols b { text-align: center; }
.bt-pairs__cols b:nth-of-type(1) { color: #2a6a2f; }
.bt-pairs__cols b:nth-of-type(2) { color: #8f2f45; }
.bt-pair { min-height: 37px; color: #2f1e10; font: 400 15.5px/1.2 "Times New Roman", Times, serif; }
.bt-pair + .bt-pair { border-top: 1px solid #f0e3c6; }
.bt-pair--first-ward { border-top: 1px solid #d9bd83 !important; }
.bt-pair label { min-width: 0; }

/* ---------- Inputs ---------- */
.bt-in { position: relative; display: block; }
#slotEditor.is-battle .slot-editor__body .bt-in input {
  width: 100%;
  min-height: 0 !important;
  height: 30px;
  padding: 0 9px !important;
  border: 1px solid #d5c3ab !important;
  border-radius: 3px !important;
  background: #faf7f2 !important;
  box-shadow: inset 0 1px 1px #5e3b0c14 !important;
  color: #2b1d10 !important;
  font: 400 16px/1 Arial, sans-serif !important;
  text-align: right;
  font-variant-numeric: tabular-nums;
  -moz-appearance: textfield;
  appearance: textfield;
}
#slotEditor.is-battle .slot-editor__body .bt-in input::-webkit-inner-spin-button, #slotEditor.is-battle .slot-editor__body .bt-in input::-webkit-outer-spin-button { -webkit-appearance: none; margin: 0; }
#slotEditor.is-battle .slot-editor__body .bt-in--pct input { padding-right: 22px !important; }
.bt-in--pct::after { content: "%"; position: absolute; right: 8px; top: 50%; transform: translateY(-50%); color: #8a7355; font: 13px/1 Arial, sans-serif; pointer-events: none; }
#slotEditor.is-battle .slot-editor__body .bt-in--own input { border-color: #9fe6a0 !important; background: #e7fbe5 !important; }
#slotEditor.is-battle .slot-editor__body .bt-in--enemy input { border-color: #f19bc0 !important; background: #fde7f0 !important; }
.bt-in--enemy::before { content: "−"; position: absolute; left: 8px; top: 50%; transform: translateY(-50%); color: #8f2f45; font: 700 15px/1 Arial, sans-serif; pointer-events: none; }
/* filled: value > 0 gets the full colour, so what is spent is visible at a glance */
#slotEditor.is-battle .slot-editor__body .bt-in input.is-filled { font-weight: 700 !important; }
#slotEditor.is-battle .slot-editor__body .bt-in--own input.is-filled { background: #b1fcb2 !important; }
#slotEditor.is-battle .slot-editor__body .bt-in--enemy input.is-filled { background: #fdafd1 !important; }
#slotEditor.is-battle .slot-editor__body .bt-in--plain input.is-filled { border-color: #c9a35a !important; background: #fff6df !important; }
/* focus */
#slotEditor.is-battle .slot-editor__body .bt-in input:focus { outline: 0; border-color: #b17d2d !important; box-shadow: 0 0 0 2px #d9b87599, inset 0 1px 1px #5e3b0c14 !important; }
/* invalid (negative / not a number) — browser :invalid from min="0" */
#slotEditor.is-battle .slot-editor__body .bt-in input:invalid { border-color: #b3261e !important; background: #fff0ee !important; box-shadow: 0 0 0 2px #e98a7c55 !important; }

.bt-actions { display: flex; justify-content: flex-end; gap: 10px; margin: 12px 14px 0; }

/* ---------- Tablet ---------- */
@media (max-width: 1060px) {
  .bt-budget { grid-template-columns: repeat(3, minmax(0, 1fr)) auto; }
  .bt-meter { grid-column: 1 / -1; grid-row: 2; }
}
@media (max-width: 900px) {
  .bt-grid { grid-template-columns: 1fr 1fr; gap: 10px; margin: 0 10px; }
  .bt-sec { padding: 0 10px 8px; }
  .bt-sec__head { margin: 0 -10px 6px; padding: 8px 10px 6px; }
  .bt-stats { grid-template-columns: 1fr; }
  .bt-stats .bt-field:nth-child(2) { border-top: 1px solid #f0e3c6; }
  .bt-field { grid-template-columns: minmax(0, 1fr) 76px; }
  .bt-pairs__cols, .bt-pair { grid-template-columns: minmax(0, 1fr) 70px 70px; column-gap: 6px; }
  .bt-pair { font-size: 14.5px; }
}
/* ---------- Phone: one column, sections stacked ---------- */
@media (max-width: 700px) {
  .bt-budget { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; padding: 8px 10px; }
  .bt-metric { padding: 4px 8px; }
  .bt-metric b { font-size: 18px; }
  .bt-metric small { font-size: 9.5px; letter-spacing: .02em; }
  .bt-pairs__cols { font-size: 9.5px; letter-spacing: .02em; }
  .bt-meter { grid-column: 1 / -1; grid-row: 2; }
  .bt-budget .tool-button { grid-column: 1 / -1; grid-row: 3; width: 100%; min-height: 44px !important; }
  .bt-note { margin: 0 10px 10px !important; }
  .bt-grid { grid-template-columns: 1fr; margin: 0 10px; }
  .bt-stats { grid-template-columns: 1fr 1fr; column-gap: 14px; }
  .bt-stats .bt-field:nth-child(2) { border-top: 0; }
  .bt-field { grid-template-columns: minmax(0, 1fr) 64px; gap: 6px; min-height: 42px; font-size: 15px; }
  #slotEditor.is-battle .slot-editor__body .bt-in input { height: 34px; font-size: 16px !important; }
  .bt-pairs__cols, .bt-pair { grid-template-columns: minmax(0, 1fr) 76px 76px; column-gap: 6px; }
  .bt-pair { min-height: 42px; font-size: 15px; }
}
@media (max-width: 340px) {
  .bt-stats { grid-template-columns: 1fr; }
  .bt-stats .bt-field:nth-child(2) { border-top: 1px solid #f0e3c6; }
  .bt-field { grid-template-columns: minmax(0, 1fr) 96px; }
  .bt-pairs__cols, .bt-pair { grid-template-columns: minmax(0, 1fr) 70px 70px; }
}