/* 2026-09-26: responsive finance + BUFF history actions + Giftcode code/name mapping */

/* ---------- BUFF history ---------- */
.buff-history-head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  flex-wrap:wrap;
  margin:18px 0 8px;
}
.buff-history-head .subheading{margin:0}
.buff-history-head .danger-soft{
  min-height:38px;
  padding:0 14px;
  cursor:pointer;
  white-space:normal;
  line-height:1.3;
}
.compact-note{margin:0 0 10px!important}

/* ---------- Giftcode: code <-> display name table ---------- */
.gift-item-name-panel{
  display:grid;
  gap:8px;
  padding:12px;
  border:1px solid rgba(216,173,103,.18);
  background:rgba(0,0,0,.16);
  border-radius:10px;
}
.gift-item-name-title{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:12px;
  padding-bottom:9px;
  border-bottom:1px solid rgba(216,173,103,.12);
}
.gift-item-name-title>div{min-width:0}
.gift-item-name-title b{display:block;color:#f1d08f;font-size:13px}
.gift-item-name-title small{display:block;margin-top:3px;color:#9d9a91;line-height:1.45;font-weight:400}
.gift-item-name-title>span{flex:0 0 auto;color:#8ee0a2;font-size:11px;white-space:nowrap}
.gift-item-name-table{display:grid;gap:7px;min-width:0}
.gift-item-name-empty{padding:12px;text-align:center;color:#827d74;border:1px dashed rgba(216,173,103,.12)}
.gift-item-name-row{
  display:grid;
  grid-template-columns:34px minmax(180px,1.2fr) minmax(180px,1fr) auto;
  gap:8px;
  align-items:center;
  min-width:0;
  padding:8px;
  border:1px solid rgba(216,173,103,.12);
  background:rgba(255,255,255,.025);
}
.gift-item-name-no{
  width:28px;height:28px;display:grid;place-items:center;
  border:1px solid rgba(216,173,103,.18);
  color:#d7b779;font-size:11px;
}
.gift-item-name-row code{
  display:block;
  min-width:0;
  max-width:100%;
  color:#d9cdb8;
  font:600 11px/1.45 ui-monospace,SFMono-Regular,Consolas,monospace;
  overflow-wrap:anywhere;
  word-break:break-word;
  white-space:normal;
}
.gift-item-name-row input{
  min-width:0!important;
  width:100%!important;
  height:38px!important;
  margin:0!important;
  color:#f7f1e7!important;
  background:#0d1519!important;
  border:1px solid #343b3c!important;
}
.gift-item-name-row .mini-btn{height:38px!important;white-space:nowrap}

/* ---------- Finance: remove fixed/narrow layout ---------- */
#rechargeConfigForm,
#rechargeTierForm,
#vipPointAdd{
  width:100%!important;
  max-width:none!important;
  min-width:0!important;
  overflow:visible!important;
}
[data-pane="finance-recharge-config"],
[data-pane="finance-points"],
#rechargeConfigForm *,
#rechargeTierForm *,
#vipPointAdd *{box-sizing:border-box}
#rechargeConfigForm .three-col,
#rechargeTierForm .three-col{
  display:grid!important;
  grid-template-columns:repeat(auto-fit,minmax(min(190px,100%),1fr))!important;
  gap:12px!important;
  min-width:0!important;
}
#rechargeConfigForm .two-col,
#rechargeTierForm .two-col,
#vipPointAdd .two-col{
  display:grid!important;
  grid-template-columns:repeat(auto-fit,minmax(min(230px,100%),1fr))!important;
  gap:12px!important;
  min-width:0!important;
}
#rechargeConfigForm label,
#rechargeTierForm label,
#vipPointAdd label{
  min-width:0!important;
  width:100%!important;
  overflow-wrap:anywhere;
  word-break:normal;
}
#rechargeConfigForm input,#rechargeConfigForm select,
#rechargeTierForm input,#rechargeTierForm select,
#vipPointAdd input,#vipPointAdd select{
  min-width:0!important;
  width:100%!important;
  max-width:100%!important;
}
#rechargeConfigForm label small,
#rechargeTierForm label small,
#vipPointAdd label small,
.recharge-items-editor .field-help{
  overflow-wrap:anywhere;
  word-break:normal;
  line-height:1.45!important;
}
.recharge-config-actions{
  grid-template-columns:minmax(130px,.35fr) minmax(180px,1fr)!important;
  min-width:0!important;
}
.recharge-items-editor{min-width:0!important;width:100%!important;overflow:hidden}
.recharge-items-editor .toolbar-line{
  display:flex!important;
  align-items:flex-start!important;
  justify-content:space-between!important;
  gap:10px!important;
  flex-wrap:wrap!important;
  min-width:0!important;
}
.recharge-items-editor .toolbar-line>div{min-width:0;flex:1 1 280px}
.recharge-items-editor .toolbar-line button{flex:0 0 auto;white-space:normal}
/* Rows now carry their own labels and can wrap naturally. */
.recharge-item-head{display:none!important}
.recharge-item-row{
  display:grid!important;
  grid-template-columns:repeat(auto-fit,minmax(min(170px,100%),1fr))!important;
  gap:10px!important;
  align-items:end!important;
  min-width:0!important;
  width:100%!important;
  padding:12px!important;
  margin:10px 0!important;
  border:1px solid rgba(216,173,103,.14)!important;
  background:rgba(255,255,255,.018)!important;
}
.recharge-item-row .ri-field,
.recharge-item-row .ri-remove{
  display:grid!important;
  gap:6px!important;
  min-width:0!important;
  margin:0!important;
}
.recharge-item-row .ri-field>span,
.recharge-item-row .ri-remove>span{
  display:block!important;
  color:#aaa297!important;
  font-size:10px!important;
  line-height:1.2!important;
  text-transform:uppercase;
  letter-spacing:.04em;
  overflow-wrap:anywhere;
}
.recharge-item-row input,
.recharge-item-row select{
  min-width:0!important;
  width:100%!important;
  max-width:100%!important;
  height:40px!important;
}
.recharge-item-row .ri-remove{grid-template-rows:auto 40px}
.recharge-item-row .ri-remove button{width:100%!important;height:40px!important;padding:0 12px!important}
#rechargeTierTable .admin-table td,
#depositTable .admin-table td,
#vipPointTable .admin-table td{
  max-width:280px;
  white-space:normal!important;
  overflow-wrap:anywhere;
  word-break:break-word;
  line-height:1.45;
}
#rechargeTierTable,
#depositTable,
#vipPointTable{max-width:100%!important;min-width:0!important;overflow:auto!important}

@media(max-width:980px){
  .gift-item-name-row{grid-template-columns:34px minmax(0,1fr)}
  .gift-item-name-row input,.gift-item-name-row button{grid-column:2}
  .recharge-config-actions{grid-template-columns:1fr!important}
}
@media(max-width:680px){
  .gift-item-name-title{flex-direction:column;gap:5px}
  .gift-item-name-row{grid-template-columns:1fr!important}
  .gift-item-name-no{width:100%;height:24px}
  .gift-item-name-row input,.gift-item-name-row button{grid-column:auto}
  .buff-history-head{align-items:stretch;flex-direction:column}
  .buff-history-head .danger-soft{width:100%}
  .recharge-item-row{grid-template-columns:1fr!important}
}