/* Budget status, split responsibility, and responsive behavior. */
/* -- Error / Status Cards -- */
.bg-error-card {
  padding: 20px; text-align: center;
  background: rgba(225, 29, 72, 0.05);
  border: 1px solid rgba(225, 29, 72, 0.2); border-radius: 14px;
}
.bg-error-card-mt { margin-top: 12px; }
.bg-error-title {
  font-size: 14px; font-weight: 700;
  color: var(--accent-red, #e11d48); margin-bottom: 6px;
}
.bg-error-detail {
  font-size: 12px; color: var(--text-secondary, #64748b); font-weight: 600;
}
.bg-error-hint {
  font-size: 11px; margin-top: 10px;
  color: var(--text-secondary, #94a3b8); line-height: 1.5;
}
.bg-header-row {
  display: flex; justify-content: space-between;
  align-items: center; margin-bottom: 16px;
}
.bg-header-actions {
  display: flex; align-items: center; gap: 10px;
}
.bg-text-right { text-align: right; }

/* -- Fronting & Responsibility UI -- */
.bg-quick-preset-wrap {
  display: flex; gap: 8px; margin-bottom: 12px; flex-wrap: wrap;
}
.bg-quick-preset-btn {
  flex: 1; min-width: 130px; padding: 9px 12px; font-size: 12px; font-weight: 700;
  background: var(--bg-input, #f4f4f5); color: var(--text-primary);
  border: 1px solid var(--border, #e9ecf1); border-radius: 10px;
  cursor: pointer; text-align: center; transition: all .15s ease;
}
.bg-quick-preset-btn:hover {
  border-color: var(--accent-blue, #4f46e5);
}
.bg-quick-preset-btn.active {
  background: rgba(79, 70, 229, 0.1);
  color: var(--accent-blue, #4f46e5);
  border-color: var(--accent-blue, #4f46e5);
}
.bg-resp-group {
  display: flex; gap: 6px; flex-wrap: wrap; margin-top: 4px;
}
.bg-resp-btn {
  flex: 1; min-width: 120px; padding: 8px 10px; font-size: 12px; font-weight: 600;
  background: var(--bg-input, #f4f4f5); color: var(--text-primary);
  border: 1px solid var(--border, #e9ecf1); border-radius: 8px;
  cursor: pointer; text-align: center; transition: all .15s ease;
}
.bg-resp-btn:hover {
  border-color: var(--accent-blue, #4f46e5);
}
.bg-resp-btn.active {
  background: var(--accent-blue, #4f46e5);
  color: #ffffff;
  border-color: var(--accent-blue, #4f46e5);
  font-weight: 700;
}
.bg-outcome-summary {
  margin-top: 10px; padding: 10px 14px; font-size: 13px; font-weight: 700;
  background: rgba(79, 70, 229, 0.06); color: var(--accent-blue, #4f46e5);
  border: 1px solid rgba(79, 70, 229, 0.2); border-radius: 10px;
  line-height: 1.4;
}
.bg-txn-fronting-chip {
  font-size: 11px; font-weight: 700; padding: 2px 7px;
  border-radius: 6px; background: rgba(245, 158, 11, 0.12);
  color: var(--warn, #f59e0b);
}

/* -- B3 & B2 Additions: tabular-nums, sticky bar, mobile responsive -- */
.bg-txn-amount,
.bg-day-header,
.bg-day-sum,
.bg-stat-income,
.bg-stat-expense,
.bg-hero-amount,
.bg-group-status,
.bg-recent-amt {
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum";
}

.bg-sticky-bar, #b-sticky-bar {
  position: sticky;
  bottom: 0;
  background: var(--bg-card, #ffffff);
  padding: 12px 16px;
  border-top: 1px solid var(--border, #e9ecf1);
  box-shadow: 0 -4px 16px rgba(0,0,0,0.06);
  z-index: 50;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.bg-day-header {
  display: flex; justify-content: space-between; align-items: center;
  padding: 12px 4px 6px 4px; margin-top: 12px; font-size: 13px; font-weight: 800;
  color: var(--text-secondary, #64748b);
  border-bottom: 1px solid var(--border, #e9ecf1);
}

.bg-filtered-summary-bar {
  display: flex; justify-content: space-between; align-items: center;
  padding: 10px 14px; background: rgba(79, 70, 229, 0.06);
  border-radius: 12px; margin-bottom: 12px; font-size: 12px; font-weight: 700;
  color: var(--text-primary);
}

.bg-icon-exp { background: rgba(225, 29, 72, 0.08); color: var(--accent-red, #e11d48); }
.bg-icon-inc { background: rgba(22, 163, 74, 0.08); color: var(--accent-green, #16a34a); }
.bg-icon-trf { background: rgba(79, 70, 229, 0.08); color: var(--accent-blue, #4f46e5); }
.bg-amt-exp { color: var(--accent-red, #e11d48); }
.bg-amt-inc { color: var(--accent-green, #16a34a); }
.bg-amt-trf { color: var(--text-primary); }

.bg-txn-subline {
  display: flex; align-items: center; gap: 6px; flex-wrap: wrap; margin-top: 4px;
}
.bg-txn-rec-chip {
  font-size: 11px; padding: 2px 6px; border-radius: 6px; background: rgba(79, 70, 229, 0.1);
}
.bg-txn-menu-wrap { position: relative; }
.bg-menu-btn {
  background: none; border: none; font-size: 18px; font-weight: 800;
  color: var(--text-secondary, #64748b); cursor: pointer; padding: 4px 8px; border-radius: 8px;
}
.bg-menu-btn:hover { background: var(--bg-input, #f4f4f5); color: var(--text-primary); }
.bg-menu-popover {
  position: absolute; right: 0; top: 100%; z-index: 60; background: var(--bg-card, #ffffff);
  border: 1px solid var(--border, #e9ecf1); border-radius: 12px; box-shadow: 0 8px 24px rgba(0,0,0,0.12);
  padding: 6px; min-width: 110px; display: flex; flex-direction: column; gap: 4px;
}
.bg-menu-item {
  background: none; border: none; padding: 8px 12px; font-size: 12px; font-weight: 700;
  text-align: left; border-radius: 8px; cursor: pointer; color: var(--text-primary); width: 100%;
}
.bg-menu-item:hover { background: var(--bg-input, #f4f4f5); }
.bg-menu-item-danger { color: var(--accent-red, #e11d48); }
.bg-menu-item-danger:hover { background: rgba(225, 29, 72, 0.08); }
.bg-sr-only {
  position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%);
}

@media (max-width: 640px) {
  /* — แถบเมนูย่อย: ให้เลื่อนแนวนอนได้จริง ไม่ใช่บีบปุ่มจนตัวหนังสือทับกัน — */
  .bg-nav-wrap { max-width: 100%; }
  .bg-nav-bar {
    display: flex;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    max-width: 100%;
    white-space: nowrap;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }
  .bg-nav-bar::-webkit-scrollbar { display: none; }
  .bg-nav-btn {
    scroll-snap-align: start;
    min-height: 44px;
    flex: 0 0 auto;          /* ห้ามหด — เดิม flex item หดจนข้อความล้น */
  }

  /* — กริดฟอร์ม/ตัวกรอง: ยุบเหลือคอลัมน์เดียว —
     เดิม 2–3 คอลัมน์ตายตัว ทำให้ <select> ภาษาไทยดันจนล้นขอบจอ */
  .bg-row-2col,
  .bg-row-2col-plain,
  .bg-row-2col-filter,
  .bg-row-3col,
  .bg-row-3col-plain,
  .bg-grid-2col {
    grid-template-columns: 1fr;
  }
  .bg-filter-amt-grid { gap: 8px; }

  /* — ลดพื้นที่กินขอบ เพื่อให้เนื้อหาได้ความกว้างคืน — */
  .bg-card-main { padding: 16px; }
  .bg-card-sidebar { padding: 14px; }
  .bg-filter-bar { padding: 12px; }
  .bg-filter-panel { padding: 10px 12px; }
  .bg-fieldset { padding: 12px 12px 2px; }

  /* — ตัวกรอง: แสดงในหน้าปกติ ไม่ทำเป็นแผ่นลอยปิดจอ —
     เดิม budgetApplyClientFilters() สั่ง details.open = true อัตโนมัติ
     พอเจอ position:fixed แผ่นนี้จะค้างทับรายการโดยปิดไม่ได้ */
  .bg-filter-panel[open] .bg-filter-body {
    position: static;
    padding: 0;
    box-shadow: none;
    max-height: none;
    border-radius: 0;
    background: transparent;
  }

  /* — ปุ่ม/พื้นที่แตะขนาดนิ้ว — */
  .bg-quick-preset-btn, .bg-resp-btn, .bg-submit-btn, .bg-cancel-btn { min-height: 44px; }
  .bg-quick-preset-btn, .bg-resp-btn { min-width: 100px; }
  .bg-menu-btn { min-width: 40px; min-height: 40px; }
  .pf-pill, .subtab-pill, .tab-btn { min-height: 36px; }
  .subtab-pill { flex: 0 0 auto; }
  .bg-settle-btn, .bg-clear-filter-btn, .bg-group-mgr-btn, .bg-csv-btn,
  .bg-export-btn, .bg-mgr-archive-btn, .bg-mgr-save-btn,
  .bg-due-cancel-btn, .bg-rec-edit-btn { min-height: 36px; }

  /* — iOS Safari ซูมเองเมื่อโฟกัสช่องที่ตัวอักษร < 16px ทำให้เลย์เอาต์เพี้ยน — */
  .bg-input-select, .bg-input-sm, .bg-input-cat, .bg-input-cat-sub,
  .bg-input-note, .bg-amount-input, .bg-filter-input, .bg-filter-select,
  .bg-filter-amt, .bg-search-input, .bg-weight-input, .bg-sum-month-input,
  .bg-mgr-label-input, .bg-mgr-label-input-edit, .bg-input-text { font-size: 16px; }

  /* — แถวหัวการ์ด/รายการ: ยอมขึ้นบรรทัดใหม่แทนที่จะดันจนล้น — */
  .bg-header-row, .bg-card-header, .bg-mgr-header,
  .bg-group-header, .bg-filtered-summary-bar {
    flex-wrap: wrap; gap: 8px;
  }
  .bg-header-actions { flex-wrap: wrap; }
  .bg-recent-item, .bg-rec-card, .bg-due-item { gap: 10px; }
  .bg-rec-card-title, .bg-due-title, .bg-recent-cat { overflow-wrap: anywhere; }

  /* — เมนู ⋯ ของรายการ: กันหลุดขอบขวาและถูกแถบล่างบัง — */
  .bg-menu-popover { z-index: 70; max-width: calc(100vw - 48px); }

  /* — แถบสรุป/ปุ่มบันทึกที่ปักล่างจอ ต้องเผื่อแถบ home indicator ของ iPhone — */
  .bg-sticky-bar, #b-sticky-bar {
    padding-bottom: calc(12px + env(safe-area-inset-bottom, 0px));
  }

  .bg-donut-wrap { flex-wrap: wrap; }
}

/* — เผื่อ notch / home indicator หลังใส่ viewport-fit=cover — */
@media (max-width: 1079px) {
  .sidebar {
    padding-top: calc(10px + env(safe-area-inset-top, 0px));
    padding-left: calc(16px + env(safe-area-inset-left, 0px));
    padding-right: calc(16px + env(safe-area-inset-right, 0px));
  }
  main, #main {
    padding-left: calc(16px + env(safe-area-inset-left, 0px));
    padding-right: calc(16px + env(safe-area-inset-right, 0px));
    padding-bottom: calc(40px + env(safe-area-inset-bottom, 0px));
  }
  /* overflow-x:clip (ไม่ใช่ hidden) กันจอเลื่อนซ้ายขวาโดยไม่ทำให้ position:sticky พัง */
  body { overflow-x: clip; }
}