/* Budget recurring, operations health, and modal components. */
/* -- C2.1: Tab Recurring Component Styles (bg-rec-*) -- */
.bg-rec-section { margin-bottom: 20px; }
.bg-rec-section-title { font-weight: 700; color: var(--text-secondary, #64748b); font-size: 14px; margin-bottom: 12px; }
.bg-rec-empty { color: var(--text-secondary, #64748b); font-size: 13px; padding: 12px 0; }

.bg-due-item {
  background: var(--bg-card, #ffffff); padding: 12px 16px; border-radius: 12px;
  border: 1px solid var(--border, #e9ecf1); margin-bottom: 10px;
  display: flex; justify-content: space-between; align-items: center;
  box-shadow: 0 2px 8px rgba(0,0,0,0.02);
}
.bg-due-title { font-weight: 700; font-size: 14px; color: var(--text-primary, #0f172a); }
.bg-due-meta { font-size: 12px; color: var(--text-secondary, #64748b); margin-top: 2px; }
.bg-due-modified { color: var(--warn, #f59e0b); margin-left: 6px; font-weight: 600; }
.bg-due-right { display: flex; align-items: center; gap: 8px; }
.bg-due-amount { font-weight: 800; font-size: 15px; font-variant-numeric: tabular-nums; font-feature-settings: "tnum"; color: var(--text-primary); }
.bg-due-cancel-btn {
  font-size: 12px; padding: 4px 10px; border-radius: 8px;
  background: var(--bg-input, #f4f4f5); border: 1px solid var(--border, #e9ecf1);
  color: var(--text-primary, #0f172a); cursor: pointer; font-weight: 600;
}

.bg-rec-card {
  background: var(--bg-card, #ffffff); padding: 14px 16px; border-radius: 14px;
  border: 1px solid var(--border, #e9ecf1); margin-bottom: 10px;
  display: flex; justify-content: space-between; align-items: center;
  box-shadow: 0 2px 8px rgba(0,0,0,0.02);
}
.bg-rec-card.inactive, .bg-due-item.inactive { opacity: 0.55; }
.bg-rec-card-title { font-weight: 700; font-size: 15px; color: var(--text-primary, #0f172a); }
.bg-rec-card-inactive-tag { font-size: 12px; color: var(--accent-red, #e11d48); font-weight: 700; margin-left: 6px; }
.bg-rec-card-sub { font-size: 13px; color: var(--text-secondary, #64748b); margin-top: 4px; }
.bg-rec-card-amount { font-weight: 700; color: var(--text-primary, #0f172a); font-variant-numeric: tabular-nums; font-feature-settings: "tnum"; }

/* Settings: user-visible operational health */
.ops-health-card { padding: 20px; color: var(--text-primary); }
.ops-health-heading { display:flex; align-items:center; justify-content:space-between; gap:14px; }
.ops-health-heading .muted { margin-top:4px; font-size:11px; }
.ops-health-retry { padding:8px 14px; border:1px solid var(--line); border-radius:8px; background:var(--ink3); color:var(--gold); white-space:nowrap; }
.ops-health-retry:disabled { opacity:.55; cursor:wait; }
.ops-health-loading { min-height:110px; display:flex; align-items:center; justify-content:center; gap:10px; color:var(--text-secondary); font-size:12px; }
.ops-health-summary { display:flex; align-items:center; gap:10px; margin:16px 0 12px; padding:12px; border:1px solid var(--line); border-radius:10px; background:var(--bg-input); font-size:12px; }
.ops-health-summary .muted { font-size:10px; margin-top:2px; }
.ops-health-summary.ok .ops-health-dot { background:var(--green); box-shadow:0 0 0 4px color-mix(in srgb, var(--green) 18%, transparent); }
.ops-health-summary.attention .ops-health-dot { background:var(--accent-gold); box-shadow:0 0 0 4px rgba(200,163,91,.18); }
.ops-health-dot { width:9px; height:9px; border-radius:50%; flex:0 0 auto; }
.ops-health-grid { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:10px; }
.ops-health-metric { min-width:0; padding:13px; border:1px solid var(--line); border-radius:10px; background:var(--bg-input); }
.ops-health-metric.warn { border-color:rgba(200,163,91,.45); }
.ops-health-metric.bad { border-color:rgba(239,68,68,.45); }
.ops-health-label { color:var(--text-secondary); font-size:10px; min-height:28px; }
.ops-health-value { margin:4px 0; color:var(--text-primary); font-size:22px; font-weight:800; overflow-wrap:anywhere; }
.ops-health-metric.bad .ops-health-value { color:var(--accent-red); }
.ops-health-metric.warn .ops-health-value { color:var(--accent-gold); }
.ops-health-detail { color:var(--text-secondary); font-size:9px; line-height:1.45; }
.ops-health-history { display:grid; grid-template-columns:1fr 1fr; gap:10px; margin-top:10px; }
.ops-health-history > div { display:flex; flex-direction:column; gap:3px; padding:11px 13px; border-radius:9px; background:var(--bg-input); font-size:10px; color:var(--text-secondary); }
.ops-health-history b { color:var(--text-primary); font-size:11px; font-weight:600; }
.ops-health-unavailable { min-height:110px; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:4px; color:var(--accent-red); font-size:12px; text-align:center; }
.ops-health-unavailable span { color:var(--text-secondary); font-size:10px; }
@media (max-width: 720px) {
  .ops-health-grid { grid-template-columns:1fr 1fr; }
  .ops-health-history { grid-template-columns:1fr; }
}
.bg-rec-card-next { font-size: 12px; color: var(--text-secondary, #64748b); margin-top: 2px; }
.bg-rec-card-actions { display: flex; align-items: center; gap: 8px; }
.bg-rec-edit-btn {
  padding: 6px 12px; border-radius: 8px; background: var(--bg-input, #f4f4f5);
  border: 1px solid var(--border, #e9ecf1); color: var(--text-primary, #0f172a);
  cursor: pointer; font-size: 12px; font-weight: 700;
}

/* Modals */
.bg-modal-overlay {
  position: fixed; top: 0; left: 0; right: 0; bottom: 0;
  background: rgba(0,0,0,0.5);
  z-index: 1100;   /* ต้องสูงกว่า .sidebar (z-index 1000 ตอนอยู่บนมือถือ) ไม่งั้นแถบแท็บทับ modal */
  display: flex; align-items: center; justify-content: center;
  padding: calc(16px + var(--safe-top, 0px)) calc(16px + var(--safe-right, 0px)) calc(16px + var(--safe-bottom, 0px)) calc(16px + var(--safe-left, 0px));
}
.bg-modal-card {
  width: 90%; max-width: 500px; max-height: 90vh; max-height: 90dvh; overflow-y: auto;
  padding: 24px; border-radius: 16px; background: var(--bg-card, #ffffff);
  color: var(--text-primary, #0f172a); border: 1px solid var(--border, #e9ecf1);
  box-shadow: 0 20px 40px rgba(0,0,0,0.15);
}
.bg-modal-card-sm { max-width: 400px; }
.bg-modal-title { font-weight: 800; font-size: 18px; margin-bottom: 16px; color: var(--text-primary, #0f172a); }
.bg-modal-footer { display: flex; justify-content: flex-end; gap: 10px; margin-top: 20px; }
.bg-modal-btn-cancel {
  padding: 10px 18px; border-radius: 10px; background: var(--bg-input, #f4f4f5);
  color: var(--text-secondary, #64748b); border: 1px solid var(--border, #e9ecf1);
  cursor: pointer; font-weight: 700; font-size: 13px;
}
.bg-modal-btn-submit {
  padding: 10px 18px; border-radius: 10px; background: linear-gradient(135deg, #4f46e5, #4338ca);
  color: #ffffff; border: none; cursor: pointer; font-weight: 800; font-size: 13px;
  box-shadow: 0 4px 14px rgba(79, 70, 229, 0.3);
}
.bg-modal-btn-single {
  width: 100%; padding: 12px; border-radius: 10px; background: linear-gradient(135deg, #4f46e5, #4338ca);
  color: #ffffff; font-weight: 800; border: none; cursor: pointer; font-size: 13px;
  box-shadow: 0 4px 14px rgba(79, 70, 229, 0.3); text-align: center;
}
.bg-modal-btn-future {
  width: 100%; padding: 12px; border-radius: 10px; background: var(--bg-input, #f4f4f5);
  color: var(--text-primary, #0f172a); border: 1px solid var(--border, #e9ecf1);
  font-weight: 700; cursor: pointer; font-size: 13px; text-align: center;
}
.bg-modal-btn-text-cancel {
  padding: 8px 14px; background: none; border: none;
  color: var(--text-secondary, #64748b); font-weight: 700; font-size: 13px; cursor: pointer;
}