/* Church Database System — front-end theme (mirrors the desktop app palette) */
.cbs-app {
  --bg-base: #0D0D1A;
  --bg-panel: #13131F;
  --bg-card: #1A1A28;
  --bg-hover: #252538;
  --border: #2A2A40;
  --border-lt: #3A3A55;
  --gold: #C8A44A;
  --gold-lt: #E8C46A;
  --gold-dk: #A07828;
  --blue: #4A7FC8;
  --green: #4AC87F;
  --red: #C84A4A;
  --purple: #8A4AC8;
  --text-pri: #F0EAD6;
  --text-sec: #A09880;
  --text-mut: #605848;

  background: var(--bg-base);
  color: var(--text-pri);
  border: 1px solid var(--border);
  border-radius: 6px;
  font-family: "Segoe UI", -apple-system, BlinkMacSystemFont, Roboto, Arial, sans-serif;
  font-size: 14px;
  max-width: 1200px;
  margin: 20px auto;
  overflow: hidden;
}
.cbs-app.cbs-light {
  --bg-base: #F4F2E9; --bg-panel: #FFFFFF; --bg-card: #F1EEDF; --bg-hover: #E7E2CE;
  --border: #D6CFB6; --border-lt: #C2B996;
  --gold: #9C7A28; --gold-lt: #C8A44A; --gold-dk: #78591C;
  --blue: #2E5FA0; --green: #2E8F58; --red: #B03030; --purple: #6A34A0;
  --text-pri: #242018; --text-sec: #5A5240; --text-mut: #8C846E;
}
/* ── Theme color (accent) variants ──────────────────────────────────────
   Chosen on the Settings tab, stored in localStorage, applied via a
   data-accent attribute on the root .cbs-app element. "gold" is the
   default and needs no override block since the base variables above
   already use it. */
.cbs-app[data-accent="blue"]    { --gold: #3D7FD9; --gold-lt: #6BA3F0; --gold-dk: #2B5FA8; }
.cbs-app[data-accent="green"]   { --gold: #3FA86A; --gold-lt: #5FCB8A; --gold-dk: #2C7A4C; }
.cbs-app[data-accent="crimson"] { --gold: #C4423F; --gold-lt: #E36764; --gold-dk: #96302D; }
.cbs-app[data-accent="purple"]  { --gold: #8A4AC8; --gold-lt: #A876DE; --gold-dk: #6A34A0; }
.cbs-app[data-accent="teal"]    { --gold: #2FA79E; --gold-lt: #4FCFC4; --gold-dk: #1F7D75; }
.cbs-app[data-accent="orange"]  { --gold: #D9822B; --gold-lt: #F0A54F; --gold-dk: #A8611C; }
.cbs-app[data-accent="rose"]    { --gold: #D9508F; --gold-lt: #F07AAF; --gold-dk: #A63A6C; }
.cbs-app[data-accent="indigo"]  { --gold: #5F5FD9; --gold-lt: #8686EA; --gold-dk: #4444A8; }
.cbs-app[data-accent="slate"]   { --gold: #6B7A8F; --gold-lt: #8FA0B5; --gold-dk: #4E5A6B; }

/* Same accents, re-tuned a shade darker so they still read clearly on the light background */
.cbs-app.cbs-light[data-accent="blue"]    { --gold: #2054A0; --gold-lt: #3D7FD9; --gold-dk: #153B73; }
.cbs-app.cbs-light[data-accent="green"]   { --gold: #217A4C; --gold-lt: #3FA86A; --gold-dk: #155534; }
.cbs-app.cbs-light[data-accent="crimson"] { --gold: #A02E2B; --gold-lt: #C4423F; --gold-dk: #731F1D; }
.cbs-app.cbs-light[data-accent="purple"]  { --gold: #6A34A0; --gold-lt: #8A4AC8; --gold-dk: #4C2378; }
.cbs-app.cbs-light[data-accent="teal"]    { --gold: #1D7A72; --gold-lt: #2FA79E; --gold-dk: #125650; }
.cbs-app.cbs-light[data-accent="orange"]  { --gold: #A0611C; --gold-lt: #D9822B; --gold-dk: #764715; }
.cbs-app.cbs-light[data-accent="rose"]    { --gold: #A6386A; --gold-lt: #D9508F; --gold-dk: #78284C; }
.cbs-app.cbs-light[data-accent="indigo"]  { --gold: #4444A8; --gold-lt: #5F5FD9; --gold-dk: #313178; }
.cbs-app.cbs-light[data-accent="slate"]   { --gold: #4E5A6B; --gold-lt: #6B7A8F; --gold-dk: #38414D; }

.cbs-app * { box-sizing: border-box; }
.cbs-app a { color: var(--gold-lt); text-decoration: none; }

.cbs-header {
  background: var(--bg-panel);
  padding: 14px 20px;
  display: flex; align-items: center; justify-content: space-between;
  border-bottom: 2px solid var(--gold-dk);
}
.cbs-brand { font-family: Georgia, "Times New Roman", serif; font-weight: bold; color: var(--gold); font-size: 17px; }
.cbs-brand em { font-style: normal; color: var(--text-mut); font-size: 12px; margin-left: 6px; }
.cbs-user-box { display: flex; align-items: center; gap: 12px; }
.cbs-user-info { color: var(--text-sec); font-size: 13px; }
.cbs-user-info b { color: var(--text-pri); }
.cbs-user-info .cbs-role-badge {
  background: var(--gold-dk); color: var(--bg-base); border-radius: 3px;
  padding: 2px 6px; font-size: 10px; font-weight: bold; margin-left: 6px;
}

.cbs-nav { background: var(--bg-card); display: flex; border-bottom: 1px solid var(--border); overflow-x: auto; }
.cbs-nav-link { padding: 10px 18px; color: var(--text-sec); font-weight: 600; font-size: 13px; white-space: nowrap; border-bottom: 3px solid transparent; }
.cbs-nav-link:hover { color: var(--gold-lt); background: var(--bg-hover); }
.cbs-nav-active { color: var(--gold); border-bottom-color: var(--gold); }

.cbs-body { padding: 18px; }
.cbs-loading { text-align: center; color: var(--text-mut); padding: 40px; }

/* ── Layout helpers ─────────────────────────────────────────────────── */
.cbs-row { display: flex; gap: 16px; flex-wrap: wrap; }
.cbs-col { flex: 1; min-width: 260px; }
.cbs-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 6px 16px; align-items: start; }

/* Fixed-row form layout (used by the Church member form) — each .cbs-form-row
   holds a specific set of fields side by side so the arrangement stays
   consistent instead of auto-reflowing like .cbs-grid. */
.cbs-form-row { display: flex; gap: 16px; align-items: start; margin-bottom: 2px; }
.cbs-form-row .cbs-field { flex: 1 1 0; min-width: 0; margin-bottom: 2px; }

/* Per-field widths — Full Name and Member Since get extra room; Date Baptized,
   Gender, Civil Status, Profession, Category and Status only need to be wide
   enough to show their (short) values, so they're sized down and the space
   they free up is picked up automatically by the rest of their row. */
.cbs-form-row .cbs-mf-field-name       { flex: 2.4 1 0; }
.cbs-form-row .cbs-mf-field-since      { flex: 1.6 1 0; }
.cbs-form-row .cbs-mf-field-baptized   { flex: 1   1 0; }
.cbs-form-row .cbs-mf-field-gender     { flex: 0.6 1 0; min-width: 90px; }
.cbs-form-row .cbs-mf-field-civil      { flex: 0.7 1 0; min-width: 110px; }
.cbs-form-row .cbs-mf-field-profession { flex: 0.8 1 0; min-width: 110px; }
.cbs-form-row .cbs-mf-field-category   { flex: 0.7 1 0; min-width: 110px; }
.cbs-form-row .cbs-mf-field-status     { flex: 0.7 1 0; min-width: 110px; }

@media (max-width: 720px) {
  .cbs-form-row { flex-wrap: wrap; }
  .cbs-form-row .cbs-field { flex: 1 1 45%; min-width: 140px; }
  .cbs-form-row .cbs-mf-field-name { flex: 1 1 100%; }
}

.cbs-card {
  background: var(--bg-panel); border: 1px solid var(--border); border-radius: 6px; padding: 14px;
}
.cbs-card h3 {
  margin: 0 0 12px; font-family: Georgia, serif; color: var(--gold); font-size: 15px;
  border-bottom: 1px solid var(--border); padding-bottom: 8px;
}

/* ── Form fields ─────────────────────────────────────────────────────── */
.cbs-field { margin-bottom: 4px; }
.cbs-field label { display: block; font-size: 12px; color: var(--text-sec); margin-bottom: 3px; line-height: 1.2; }
.cbs-field input[type="text"], .cbs-field input[type="password"], .cbs-field input[type="number"],
.cbs-field input[type="date"], .cbs-field input[type="tel"], .cbs-field select, .cbs-field textarea {
  width: 100%; background: var(--bg-base); border: 1px solid var(--border); border-radius: 4px;
  color: var(--text-pri); padding: 7px 9px; font-size: 13px; font-family: inherit; box-sizing: border-box;
}
.cbs-field input:focus, .cbs-field select:focus, .cbs-field textarea:focus {
  outline: none; border-color: var(--gold);
}
.cbs-field textarea { min-height: 34px; resize: vertical; }

/* Date picker button — the browser's default calendar icon is a faint
   outline that's hard to see against the dark theme, so it's rebuilt
   here as a solid, accent-colored button that stands out and always
   matches the current theme color. */
.cbs-field input[type="date"] { color-scheme: dark; padding-right: 6px; min-width: 132px; }
.cbs-app.cbs-light .cbs-field input[type="date"] { color-scheme: light; }
.cbs-field input[type="date"]::-webkit-calendar-picker-indicator {
  background-color: var(--gold);
  border-radius: 4px;
  padding: 5px;
  margin-left: 6px;
  cursor: pointer;
  opacity: 1;
  filter: none;
  width: 18px;
  height: 18px;
  box-shadow: 0 0 0 1px var(--gold-dk);
}
.cbs-field input[type="date"]::-webkit-calendar-picker-indicator:hover {
  background-color: var(--gold-lt);
}
.cbs-field input[type="date"]::-webkit-datetime-edit { color: var(--text-pri); }

/* Date field + computed value (age / years of membership) shown side by side */
.cbs-field-inline { display: flex; align-items: center; gap: 8px; }
.cbs-field-inline input[type="date"] { flex: 1 1 auto; min-width: 0; }
.cbs-compute-badge {
  flex: 0 0 auto; white-space: nowrap; background: var(--bg-card); border: 1px solid var(--border-lt);
  border-radius: 4px; padding: 7px 10px; font-size: 12px; font-weight: 700; color: var(--gold-lt);
}

/* ── Buttons ─────────────────────────────────────────────────────────── */
.cbs-btn {
  display: inline-flex; align-items: center; gap: 6px; justify-content: center;
  background: var(--bg-card); border: 1.5px solid var(--blue); color: var(--text-pri);
  border-radius: 5px; padding: 8px 14px; font-size: 12px; font-weight: 700; cursor: pointer;
  transition: background .15s, border-color .15s;
}
.cbs-btn:hover { background: var(--bg-hover); border-color: var(--gold-lt); }
.cbs-btn:active { background: var(--bg-base); }
.cbs-btn-update  { border-color: var(--gold); }
.cbs-btn-danger  { border-color: var(--red); }
.cbs-btn-dark    { border-color: var(--purple); }
.cbs-btn-neutral { border-color: var(--border-lt); }
.cbs-btn-success { border-color: var(--green); }
.cbs-btn-primary { border-color: var(--blue); }
.cbs-btn[disabled] { opacity: .45; cursor: not-allowed; }
.cbs-btn-gold {
  background: var(--gold); border-color: var(--gold); color: var(--bg-base);
}
.cbs-btn-gold:hover { background: var(--gold-lt); }
.cbs-toolbar { display: flex; flex-wrap: wrap; gap: 8px; margin: 12px 0; }
/* Church tab toolbar — forced onto a single row; buttons shrink and the
   row scrolls horizontally on very narrow screens instead of wrapping. */
.cbs-toolbar-oneline { flex-wrap: nowrap; overflow-x: auto; }
.cbs-toolbar-oneline .cbs-btn { flex: 1 1 0; white-space: nowrap; padding-left: 8px; padding-right: 8px; }

/* ── Stats panels ────────────────────────────────────────────────────── */
.cbs-stat-box {
  background: var(--bg-panel); border: 1px solid var(--border); border-radius: 6px;
  padding: 10px 12px; text-align: center; min-width: 100px;
}
.cbs-stat-box .cbs-stat-label { font-size: 11px; color: var(--text-sec); }
.cbs-stat-box .cbs-stat-value { font-size: 24px; font-weight: bold; color: var(--gold); }

/* ── Photo box ───────────────────────────────────────────────────────── */
.cbs-photo-box {
  width: 150px; height: 150px; background: var(--bg-base); border: 1px solid var(--border);
  display: flex; align-items: center; justify-content: center; color: var(--text-mut);
  font-size: 12px; text-align: center; overflow: hidden; border-radius: 4px; margin: 0 auto 10px;
}
.cbs-photo-box img { width: 100%; height: 100%; object-fit: cover; }

/* ── Table ───────────────────────────────────────────────────────────── */
/* Rows kept short (small padding, tight line-height) so the freed-up space
   from the more compact form above lets the table itself show more rows. */
.cbs-table-wrap { overflow-x: auto; border: 1px solid var(--border); border-radius: 6px; margin-top: 10px; }
.cbs-print-area.cbs-table-wrap { min-height: 420px; }
/* Church member table — sized to show ~15 rows before it scrolls, so the
   space freed up by moving the filters into the Member Information panel
   goes straight to the table instead of empty page space. */
.cbs-m-tablewrap { max-height: 460px; overflow-y: auto; }
.cbs-m-tablewrap table.cbs-table th { background: var(--bg-panel); }
table.cbs-table { width: 100%; border-collapse: collapse; font-size: 12.5px; }
table.cbs-table th {
  background: transparent; color: var(--gold); text-align: center; padding: 6px 10px;
  position: sticky; top: 0; font-weight: 700; white-space: nowrap; line-height: 1.2;
  border-bottom: 2px solid var(--gold-dk);
}
table.cbs-table td { padding: 3px 10px; line-height: 1.2; border-bottom: 1px solid var(--border); color: var(--text-pri); white-space: nowrap; text-align: center; }
table.cbs-table tbody tr:hover { background: var(--bg-hover); cursor: pointer; }
table.cbs-table tbody tr.cbs-row-selected { background: var(--gold-dk); color: var(--bg-base); }
table.cbs-table tbody tr.cbs-row-selected td { color: inherit; }
.cbs-table-empty { padding: 20px; text-align: center; color: var(--text-mut); }

/* ── Filters bar ─────────────────────────────────────────────────────── */
.cbs-filters { display: flex; gap: 10px; flex-wrap: wrap; align-items: end; background: var(--bg-panel); border: 1px solid var(--border); border-radius: 6px; padding: 10px 12px; margin-top: 12px; }
.cbs-filters .cbs-field { margin-bottom: 0; min-width: 130px; }
.cbs-filters .cbs-field label { color: var(--gold-lt); font-weight: 600; }
/* Member Information panel — filters sit inside the card, right under the
   form, instead of as a separate full-width bar above the table. */
.cbs-card .cbs-filters { background: var(--bg-card); }
/* Forces the filter selects and the Reset button onto one row (same
   pattern as .cbs-toolbar-oneline) instead of the Reset button wrapping
   onto its own line. */
.cbs-filters-oneline { flex-wrap: nowrap; overflow-x: auto; align-items: end; }
.cbs-filters-oneline .cbs-field { flex: 1 1 0; min-width: 110px; }
.cbs-filters-oneline .cbs-mf-field-resetbtn { flex: 0 0 auto; min-width: 0; }
.cbs-filters-oneline .cbs-mf-field-resetbtn .cbs-btn { white-space: nowrap; }

/* ── Search bar ──────────────────────────────────────────────────────── */
.cbs-searchbar { display: flex; gap: 8px; align-items: center; margin-top: 14px; }
.cbs-searchbar input {
  flex: 1; background: transparent; border: 1px solid var(--border); border-radius: 4px;
  color: var(--text-pri); padding: 7px 9px; font-size: 13px; font-family: inherit; box-sizing: border-box;
}
.cbs-searchbar input:focus { outline: none; border-color: var(--gold); }

/* ── Login ───────────────────────────────────────────────────────────── */
.cbs-login-wrap { max-width: 380px; margin: 30px auto; text-align: center; }
.cbs-login-wrap .cbs-cross { color: var(--gold); font-size: 30px; }
.cbs-login-wrap h2 { font-family: Georgia, serif; color: var(--gold); margin: 4px 0 0; }
.cbs-login-wrap p.cbs-tagline { color: var(--text-mut); font-size: 12px; margin-top: 2px; }
.cbs-login-card { background: var(--bg-panel); border: 1px solid var(--border); border-radius: 6px; padding: 24px; margin-top: 18px; text-align: left; }
.cbs-login-card h3 { text-align: center; color: var(--gold); font-family: Georgia, serif; margin-top: 0; }
.cbs-login-btn { width: 100%; margin-top: 10px; padding: 11px; font-size: 13px; }
.cbs-login-alt { margin-top: 14px; text-align: center; font-size: 12px; }
.cbs-msg { font-size: 12.5px; margin: 8px 0; min-height: 16px; }
.cbs-msg-error { color: var(--red); }
.cbs-msg-success { color: var(--green); }

/* Show/Hide password toggle on the login form */
.cbs-pass-wrap { position: relative; }
.cbs-pass-wrap input[type="password"], .cbs-pass-wrap input[type="text"] { padding-right: 34px; }
.cbs-pass-toggle {
  position: absolute; right: 4px; top: 50%; transform: translateY(-50%);
  width: 26px; height: 26px; padding: 0; border: 0; background: transparent;
  color: var(--text-sec); font-size: 14px; line-height: 1; cursor: pointer;
  display: flex; align-items: center; justify-content: center; border-radius: 4px;
}
.cbs-pass-toggle:hover { color: var(--gold-lt); background: var(--bg-hover); }

/* ── Modal ───────────────────────────────────────────────────────────── */
/* The modal overlay is appended to <body>, outside the .cbs-app element,
   so it can't inherit that element's theme variables. Redeclare a solid
   dark palette here so the popup always renders fully opaque and legible
   instead of leaking the page behind it through. */
.cbs-modal-overlay {
  --bg-base: #0D0D1A; --bg-panel: #13131F; --bg-card: #1A1A28;
  --border: #2A2A40; --border-lt: #3A3A55;
  --gold: #C8A44A; --gold-lt: #E8C46A; --gold-dk: #A07828;
  --blue: #4A7FC8; --green: #4AC87F; --red: #C84A4A; --purple: #8A4AC8;
  --text-pri: #F0EAD6; --text-sec: #A09880; --text-mut: #605848;

  position: fixed; inset: 0; background: rgba(0,0,0,.75); display: flex;
  align-items: center; justify-content: center; z-index: 99999; padding: 20px;
}
.cbs-modal {
  background: var(--bg-panel); border: 1px solid var(--gold-dk); border-radius: 8px;
  max-width: 480px; width: 100%; max-height: 90vh; overflow-y: auto; padding: 20px;
  color: var(--text-pri); font-family: inherit;
  box-shadow: 0 10px 40px rgba(0,0,0,.5);
}
.cbs-modal h3 { color: var(--gold); font-family: Georgia, serif; margin-top: 0; }
.cbs-modal-actions { display: flex; gap: 8px; justify-content: flex-end; margin-top: 16px; }

/* ── Attendance checklist ───────────────────────────────────────────── */
.cbs-checklist { max-height: 340px; overflow-y: auto; border: 1px solid var(--border); border-radius: 6px; background: var(--bg-base); padding: 6px 0; }
.cbs-check-row { display: flex; align-items: center; gap: 8px; padding: 6px 12px; font-size: 13px; }
.cbs-check-row:hover { background: var(--bg-hover); }
.cbs-check-row input { width: 15px; height: 15px; }

/* Attendance tab guideline — makes the checked=Absent / unchecked=Present
   rule visible so encoding it isn't ambiguous. ─────────────────────────── */
.cbs-a-guideline {
  font-size: 11.5px; color: var(--gold-lt); background: rgba(212,175,55,.08);
  border: 1px solid var(--border); border-radius: 5px; padding: 7px 10px; margin: 6px 0 10px;
  line-height: 1.4;
}
.cbs-a-absent-tag {
  display: none; margin-left: auto; font-size: 10px; font-weight: 700; letter-spacing: .03em;
  color: var(--bg-base); background: #d9534f; border-radius: 3px; padding: 1px 6px;
}
.cbs-check-row input:checked ~ .cbs-a-absent-tag { display: inline-block; }

/* ── Appearance toggle ───────────────────────────────────────────────── */
.cbs-theme-toggle { display: flex; gap: 10px; }
.cbs-theme-btn { padding: 10px 20px; border-radius: 5px; border: 1.5px solid var(--border); background: var(--bg-card); color: var(--text-sec); font-weight: 700; cursor: pointer; }
.cbs-theme-btn.cbs-active { background: var(--gold); color: var(--bg-base); border-color: var(--gold); }

.cbs-accent-row { display: flex; gap: 12px; flex-wrap: wrap; align-items: center; }
.cbs-accent-swatch {
  width: 34px; height: 34px; border-radius: 50%; cursor: pointer; padding: 0;
  border: 3px solid transparent; box-shadow: inset 0 0 0 1px rgba(0,0,0,.3);
  transition: transform .12s ease, box-shadow .12s ease;
}
.cbs-accent-swatch:hover { transform: scale(1.12); }
.cbs-accent-swatch.cbs-active {
  border-color: var(--bg-panel);
  box-shadow: 0 0 0 2px var(--bg-panel), 0 0 0 4px var(--text-pri), inset 0 0 0 1px rgba(0,0,0,.3);
}
.cbs-accent-label { font-size: 11px; color: var(--text-sec); margin-top: 8px; }

/* ── Configuration section (Settings ▸ Configuration) ──────────────────
   Each option-list card gets a thin accent-colored top edge so the
   panel visibly follows whichever theme color is active, plus a
   selected-row highlight to match the rest of the app's tables. */
.cbs-cfg-card {
  border-top: 3px solid var(--gold);
  transition: border-color .15s;
}
.cbs-cfg-card h3 { display: flex; align-items: center; gap: 6px; }
.cbs-cfg-list tr { cursor: pointer; }
.cbs-cfg-list tr:hover { background: var(--bg-hover); }
.cbs-cfg-list tr.cbs-row-selected { background: var(--gold); }
.cbs-cfg-list tr.cbs-row-selected td { color: var(--bg-base); font-weight: 700; }

.cbs-badge { display: inline-block; padding: 2px 8px; border-radius: 3px; font-size: 11px; font-weight: 700; }
.cbs-badge-member { background: var(--green); color: #06210F; }
.cbs-badge-guest { background: var(--blue); color: #06132A; }
.cbs-badge-present { background: var(--green); color: #06210F; }
.cbs-badge-absent { background: var(--red); color: #2A0606; }
.cbs-badge-manager { background: var(--purple); color: #fff; }
.cbs-badge-staff { background: var(--border-lt); color: var(--text-pri); }

.cbs-restricted { text-align: center; padding: 50px 20px; color: var(--text-mut); }
.cbs-restricted .cbs-lock { font-size: 34px; }

.cbs-u-perms { display: flex; flex-direction: column; gap: 6px; padding: 8px 10px; border: 1px solid var(--border-lt); border-radius: 6px; background: var(--panel-bg, rgba(255,255,255,0.03)); }
.cbs-checkbox-label { display: flex; align-items: center; gap: 8px; font-size: 13px; color: var(--text-pri); cursor: pointer; margin: 0; }
.cbs-checkbox-label input[type="checkbox"] { width: 15px; height: 15px; margin: 0; cursor: pointer; accent-color: var(--gold, #C8A44A); }

.cbs-tabs-mini { display: flex; gap: 6px; margin-bottom: 14px; }
.cbs-tabs-mini button { padding: 8px 16px; border: 1px solid var(--border); background: var(--bg-card); color: var(--text-sec); border-radius: 5px 5px 0 0; cursor: pointer; font-weight: 600; font-size: 12px; }
.cbs-tabs-mini button.cbs-active { background: var(--bg-panel); color: var(--gold); border-bottom: 2px solid var(--gold); }

.cbs-total-line { text-align: right; font-weight: bold; color: var(--gold); margin-top: 8px; font-size: 14px; }

/* ── Giving tab — Month, Year, Name, Giving Type, Amount + quick-add
   buttons all sit in a single row. Month, Year and Giving Type are sized
   just wide enough to show their data; Name and Amount are left free
   to fill the remaining space. ───────────────────────────────────── */
.cbs-g-form .cbs-form-row { margin-bottom: 4px; flex-wrap: nowrap; }
.cbs-form-row .cbs-gf-field-month { flex: 0 0 128px; }
.cbs-form-row .cbs-gf-field-year { flex: 0 0 92px; }
.cbs-form-row .cbs-gf-field-name { flex: 1.2 1 0; min-width: 140px; }
.cbs-form-row .cbs-gf-field-type { flex: 0 0 130px; }
.cbs-form-row .cbs-gf-field-amount { flex: 1.6 1 0; min-width: 300px; }
.cbs-gf-field-month select, .cbs-gf-field-year select, .cbs-gf-field-type select {
  max-width: 100%;
}

@media (max-width: 900px) {
  .cbs-g-form .cbs-form-row { flex-wrap: wrap; }
  .cbs-form-row .cbs-gf-field-month, .cbs-form-row .cbs-gf-field-year, .cbs-form-row .cbs-gf-field-name,
  .cbs-form-row .cbs-gf-field-type, .cbs-form-row .cbs-gf-field-amount { flex: 1 1 100%; }
  .cbs-gf-field-month select, .cbs-gf-field-year select, .cbs-gf-field-type select { max-width: none; }
}

/* Name textbox with live-filtered member matches ─────────────────────── */
.cbs-autocomplete { position: relative; }
.cbs-autocomplete-list {
  display: none; position: absolute; top: calc(100% + 2px); left: 0; right: 0; z-index: 30;
  background: var(--bg-panel); border: 1px solid var(--border); border-radius: 4px;
  max-height: 190px; overflow-y: auto; box-shadow: 0 6px 14px rgba(0,0,0,.35);
}
.cbs-autocomplete-list.cbs-show { display: block; }
.cbs-autocomplete-item { padding: 6px 9px; font-size: 13px; cursor: pointer; color: var(--text-pri); }
.cbs-autocomplete-item:hover { background: var(--bg-card); }
.cbs-autocomplete-item mark { background: var(--gold); color: var(--bg-base); border-radius: 2px; padding: 0 1px; }
.cbs-autocomplete-empty { padding: 6px 9px; font-size: 12px; color: var(--text-mut); }

/* Amount box with its quick-add buttons (incl. the ₱1 button) all in a
   single row beside it. The box is sized to comfortably fit a large,
   comma-formatted whole-peso value with no fixed digit limit. ─────────── */
.cbs-amount-row { display: flex; align-items: center; gap: 6px; flex-wrap: nowrap; }
.cbs-amount-row input.cbs-amount-input { width: auto; flex: 1 1 110px; min-width: 110px; max-width: 220px; text-align: right; letter-spacing: .02em; }
.cbs-amount-quickbtns { display: flex; flex-wrap: nowrap; gap: 3px; margin-top: 0; }
.cbs-amount-quickbtns .cbs-btn { padding: 4px 6px; font-size: 11px; min-width: 0; flex: 0 0 auto; }

@media (max-width: 480px) {
  .cbs-amount-row { flex-wrap: wrap; }
  .cbs-amount-quickbtns { flex-wrap: wrap; }
}

/* Wider modal variant used for the Giving Summary popup, which holds a
   name / count / total table that needs more breathing room. ─────────── */
.cbs-modal.cbs-modal-wide { max-width: 660px; }
.cbs-modal.cbs-modal-wide .cbs-total-line { margin-top: 10px; }

/* ── Giving Summary popup ───────────────────────────────────────────────
   Header strip with Name / Month / Year, then either a per-Giving-Type
   breakdown (date + amount rows with a subtotal) or a single all-types
   totals table, depending on whether a specific member is selected. ─── */
.cbs-summary-header {
  display: flex; flex-wrap: wrap; gap: 10px 22px; margin: 2px 0 14px;
  padding: 10px 12px; background: var(--bg-card); border: 1px solid var(--border);
  border-left: 3px solid var(--gold); border-radius: 5px;
}
.cbs-summary-header > div { display: flex; flex-direction: column; gap: 2px; min-width: 90px; }
.cbs-summary-header span { font-size: 10.5px; text-transform: uppercase; letter-spacing: .04em; color: var(--text-mut); }
.cbs-summary-header strong { font-size: 14px; color: var(--gold-lt); font-family: Georgia, serif; }
.cbs-summary-body { max-height: 48vh; overflow-y: auto; padding-right: 2px; }
.cbs-summary-type-block { margin-bottom: 16px; }
.cbs-summary-type-block:last-child { margin-bottom: 0; }
.cbs-summary-type-block h4 {
  margin: 0 0 6px; font-family: Georgia, serif; font-size: 13px; color: var(--gold);
  border-bottom: 1px solid var(--border); padding-bottom: 4px;
}
.cbs-summary-type-count { font-family: Arial, sans-serif; font-size: 11px; font-weight: 400; color: var(--text-mut); }
.cbs-subtotal-line { text-align: right; font-weight: 700; font-size: 12.5px; color: var(--text-sec); margin-top: 4px; }
.cbs-subtotal-line span { color: var(--gold-lt); }

@media print {
  body * { visibility: hidden; }
  .cbs-print-area, .cbs-print-area * { visibility: visible; }
  .cbs-print-area { position: absolute; left: 0; top: 0; width: 100%; }
  .cbs-header, .cbs-nav, .cbs-toolbar, .cbs-filters, .cbs-searchbar { display: none !important; }
}

@media (max-width: 640px) {
  .cbs-header { flex-direction: column; align-items: flex-start; gap: 8px; }
  .cbs-body { padding: 12px; }
}