/* fh-budget.css v12.2.0 — Family budget panel
   v12: Comprehensive mobile responsiveness for all views
   v12.1: Mobile layout fix (see section at end of file) — full-screen modal
          using dynamic viewport height, single scroll surface for the budget
          tab (daily list was squeezed to 0px), compact landscape header,
          no iOS zoom on input focus, fund buttons wrap, border-box forms. */
.gp-bgt-panel { display:flex; flex-direction:column; min-height:300px; }
.gp-bgt-toolbar { display:flex; align-items:center; justify-content:space-between; gap:10px; padding:10px 20px; border-bottom:1px solid #e2e8f0; background:#f8fafc; flex-shrink:0; flex-wrap:wrap; }
.gp-bgt-toolbar-left,.gp-bgt-toolbar-right { display:flex; align-items:center; gap:8px; }
.gp-bgt-toolbar label { font-size:13px; color:#64748b; }
.gp-bgt-toolbar input[type="month"] { padding:6px 10px; border:1px solid #e2e8f0; border-radius:6px; font-size:13px; font-family:inherit; background:#fff; }
.gp-bgt-toolbar input:focus { outline:none; border-color:#4f46e5; box-shadow:0 0 0 3px rgba(79,70,229,.12); }
.gp-bgt-view-sel { padding:6px 10px; border:1px solid #e2e8f0; border-radius:6px; font-size:13px; font-family:inherit; background:#fff; color:#0f172a; cursor:pointer; }
.gp-bgt-view-sel:focus { outline:none; border-color:#4f46e5; }
.gp-bgt-content { flex:1; overflow-y:auto; padding:16px 20px; max-height:440px; }
.gp-bgt-summary-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:10px; margin-bottom:16px; }
.gp-bgt-scard { background:#f8fafc; border:1px solid #e2e8f0; border-radius:10px; padding:12px 14px; transition:box-shadow .15s; }
.gp-bgt-scard:hover { box-shadow:0 2px 8px rgba(0,0,0,.04); }
.gp-bgt-sc-label { font-size:11px; font-weight:600; color:#64748b; text-transform:uppercase; letter-spacing:.4px; margin-bottom:4px; }
.gp-bgt-sc-value { font-size:18px; font-weight:700; color:#0f172a; }
.gp-bgt-sc-value small { font-size:11px; font-weight:400; color:#94a3b8; margin-left:4px; }
.gp-bgt-pos { color:#16a34a !important; }
.gp-bgt-neg { color:#dc2626 !important; }
.gp-bgt-muted { color:#94a3b8; font-size:13px; text-align:center; padding:20px; }
.gp-bgt-section-title { font-size:13px; font-weight:600; color:#64748b; text-transform:uppercase; letter-spacing:.4px; margin:14px 0 8px; }
.gp-bgt-cat-list { margin-bottom:12px; }
.gp-bgt-cat-row { display:grid; grid-template-columns:auto 1fr 1fr auto; align-items:center; gap:8px; padding:6px 0; border-bottom:1px solid #f1f5f9; }
.gp-bgt-cat-row:last-child { border-bottom:0; }
.gp-bgt-cat-dot { display:inline-block; width:10px; height:10px; border-radius:50%; flex-shrink:0; }
.gp-bgt-cat-name { font-size:13px; color:#0f172a; }
.gp-bgt-cat-bar { background:#f1f5f9; height:7px; border-radius:4px; overflow:hidden; }
.gp-bgt-cat-bar span { display:block; height:100%; border-radius:4px; transition:width .3s ease-out; }
.gp-bgt-cat-amt { font-size:12px; font-weight:600; color:#0f172a; white-space:nowrap; }
.gp-bgt-list-header { display:flex; justify-content:space-between; align-items:center; margin-bottom:10px; flex-wrap:wrap; gap:8px; }
.gp-bgt-list-header h4 { margin:0; font-size:15px; display:flex; align-items:center; gap:6px; flex-wrap:wrap; }
.gp-bgt-list-body { border:1px solid #e2e8f0; border-radius:10px; overflow:hidden; background:#fff; }
.gp-bgt-row { display:flex; align-items:center; gap:12px; padding:10px 14px; border-bottom:1px solid #f1f5f9; transition:background .1s; }
.gp-bgt-row:last-child { border-bottom:0; }
.gp-bgt-row:hover { background:#f8fafc; }
.gp-bgt-row-main { flex:1; min-width:0; }
.gp-bgt-row-title { font-size:14px; font-weight:500; color:#0f172a; }
.gp-bgt-row-meta { font-size:12px; color:#94a3b8; margin-top:2px; display:flex; align-items:center; gap:4px; flex-wrap:wrap; }
.gp-bgt-row-amt { font-size:14px; font-weight:700; color:#0f172a; white-space:nowrap; }
.gp-bgt-del { width:26px; height:26px; border:0; background:transparent; border-radius:6px; color:#94a3b8; cursor:pointer; font-size:11px; transition:all .15s; }
.gp-bgt-del:hover { background:#fee2e2; color:#dc2626; }
.gp-bgt-prog-bar { background:#f1f5f9; height:6px; border-radius:3px; overflow:hidden; }
.gp-bgt-bar-green { background:#22c55e; height:100%; border-radius:3px; transition:width .4s ease-out; }
.gp-bgt-bar-amber { background:#f59e0b; height:100%; border-radius:3px; transition:width .4s ease-out; }
.gp-bgt-bar-red { background:#ef4444; height:100%; border-radius:3px; transition:width .4s ease-out; }
.gp-bgt-plan-header { display:flex; justify-content:space-between; align-items:center; margin-bottom:12px; flex-wrap:wrap; gap:8px; }
.gp-bgt-plan-header h4 { margin:0; font-size:15px; display:flex; align-items:center; gap:6px; flex-wrap:wrap; }
.gp-bgt-plan-summary { display:grid; grid-template-columns:repeat(4,1fr); gap:10px; padding:12px; background:#f8fafc; border-radius:10px; margin-bottom:14px; font-size:13px; }
.gp-bgt-plan-row { padding:10px 0; border-bottom:1px solid #f1f5f9; }
.gp-bgt-plan-row:last-child { border-bottom:0; }
.gp-bgt-plan-cat { display:flex; align-items:center; gap:8px; font-size:14px; font-weight:500; color:#0f172a; margin-bottom:4px; }
.gp-bgt-plan-vals { display:flex; gap:14px; font-size:12px; color:#64748b; margin-bottom:4px; }
.gp-bgt-empty-action { text-align:center; padding:40px 20px; }
.gp-bgt-target-row { padding:12px 0; border-bottom:1px solid #f1f5f9; }
.gp-bgt-target-row:last-child { border-bottom:0; }
.gp-bgt-target-info { display:flex; align-items:center; gap:8px; flex-wrap:wrap; margin-bottom:4px; }
.gp-bgt-target-period { font-size:12px; color:#94a3b8; }
.gp-bgt-target-nums { display:flex; justify-content:space-between; font-size:12px; color:#475569; margin-bottom:4px; }
.gp-bgt-fund-card { border:1px solid #e2e8f0; border-radius:10px; overflow:hidden; margin-bottom:12px; transition:box-shadow .15s; }
.gp-bgt-fund-card:hover { box-shadow:0 4px 12px rgba(0,0,0,.04); }
.gp-bgt-fund-top { padding:12px 14px; background:#f8fafc; border-bottom:1px solid #e2e8f0; display:flex; align-items:center; gap:6px; flex-wrap:wrap; }
.gp-bgt-fund-top h4 { margin:0; font-size:14px; }
.gp-bgt-fund-nums { display:grid; grid-template-columns:repeat(4,1fr); gap:10px; padding:14px; font-size:12px; text-align:center; }
.gp-bgt-fund-nums small { color:#94a3b8; }
.gp-bgt-fund-actions { display:flex; gap:6px; padding:0 14px 14px; flex-wrap:wrap; }
.gp-bgt-report-tabs { display:flex; gap:2px; border-bottom:1px solid #e2e8f0; margin-bottom:12px; }
.gp-bgt-rtab { background:none; border:0; padding:8px 14px; font-size:13px; font-weight:600; color:#94a3b8; cursor:pointer; border-bottom:2px solid transparent; margin-bottom:-1px; transition:all .15s; }
.gp-bgt-rtab:hover { color:#0f172a; }
.gp-bgt-rtab.active { color:#4f46e5; border-bottom-color:#4f46e5; }
.gp-bgt-report-tbl { width:100%; border-collapse:collapse; font-size:12px; margin-top:8px; }
.gp-bgt-report-tbl th { text-align:left; padding:8px 10px; font-size:10px; color:#64748b; text-transform:uppercase; letter-spacing:.4px; border-bottom:2px solid #e2e8f0; background:#f8fafc; }
.gp-bgt-report-tbl td { padding:8px 10px; border-bottom:1px solid #f1f5f9; color:#0f172a; }
.gp-bgt-report-tbl tr:last-child td { border-bottom:0; }
.gp-bgt-report-tbl tr:hover td { background:#fafbfc; }
.gp-bgt-form-grid { display:grid; grid-template-columns:1fr 1fr; gap:12px; }
.gp-bgt-content::-webkit-scrollbar { width:5px; }
.gp-bgt-content::-webkit-scrollbar-track { background:transparent; }
.gp-bgt-content::-webkit-scrollbar-thumb { background:rgba(0,0,0,.1); border-radius:3px; }

/* =============================================================================
   MOBILE — Primary breakpoint (≤600px)
   ============================================================================= */
@media (max-width:600px) {
  /* ── Toolbar: stack vertically, full-width controls ── */
  .gp-bgt-toolbar {
    flex-direction:column;
    align-items:stretch;
    padding:10px 12px;
    gap:8px;
  }
  .gp-bgt-toolbar-left,
  .gp-bgt-toolbar-right {
    width:100%;
  }
  .gp-bgt-toolbar-left {
    gap:6px;
  }
  /* Month input — full width, larger font, prevent truncation */
  .gp-bgt-toolbar input[type="month"] {
    flex:1;
    min-width:0;
    width:100%;
    font-size:15px;
    padding:10px 12px;
    font-weight:600;
    -webkit-appearance:none;
    appearance:none;
  }
  .gp-bgt-toolbar label {
    flex-shrink:0;
    font-size:14px;
  }
  /* View selector — full width, larger tap target */
  .gp-bgt-view-sel {
    width:100%;
    font-size:14px;
    padding:10px 12px;
    font-weight:500;
  }

  /* ── Content area ── */
  .gp-bgt-content {
    padding:12px;
    max-height:calc(100vh - 220px);
  }

  /* ── Summary cards: 2 columns ── */
  .gp-bgt-summary-grid,
  .gp-bgt-plan-summary,
  .gp-bgt-fund-nums {
    grid-template-columns:repeat(2,1fr);
    gap:8px;
  }
  .gp-bgt-sc-value { font-size:16px; }

  /* ── Form grid: single column ── */
  .gp-bgt-form-grid { grid-template-columns:1fr; }

  /* ── Category breakdown row ── */
  .gp-bgt-cat-row {
    grid-template-columns:auto 1fr auto;
  }
  .gp-bgt-cat-row .gp-bgt-cat-bar {
    grid-column:1/-1;
    order:99;
  }

  /* ── List header: wrap title & buttons ── */
  .gp-bgt-list-header {
    flex-direction:column;
    align-items:flex-start;
    gap:8px;
  }
  .gp-bgt-list-header h4 {
    font-size:14px;
    width:100%;
  }
  /* Daily expenses button group: full-width row */
  .gp-bgt-list-header > div[style*="display:flex"] {
    width:100%;
  }

  /* ── Expense rows ── */
  .gp-bgt-row {
    padding:10px 10px;
    gap:8px;
    flex-wrap:wrap;
  }
  .gp-bgt-row-main {
    flex:1 1 calc(100% - 100px);
    min-width:0;
  }
  .gp-bgt-row-title { font-size:13px; }
  .gp-bgt-row-meta { font-size:11px; }
  .gp-bgt-row-amt { font-size:13px; }
  .gp-bgt-row-actions {
    flex-wrap:wrap;
    gap:2px;
  }
  .gp-bgt-row-actions .gp-uh-icon-btn {
    min-width:32px;
    min-height:32px;
    display:inline-flex;
    align-items:center;
    justify-content:center;
  }

  /* ── Badges: slightly smaller ── */
  .gp-bgt-badge-returnable,
  .gp-bgt-badge-cancelled,
  .gp-bgt-badge-loan {
    font-size:9px;
    padding:1px 5px;
    margin-left:3px;
  }

  /* ── Plan view ── */
  .gp-bgt-plan-header {
    flex-direction:column;
    align-items:flex-start;
  }
  .gp-bgt-plan-vals {
    flex-wrap:wrap;
    gap:8px;
  }

  /* ── Fund cards ── */
  .gp-bgt-fund-top {
    padding:10px 12px;
    flex-wrap:wrap;
  }
  .gp-bgt-fund-actions {
    padding:0 12px 12px;
    gap:4px;
  }

  /* ── Targets ── */
  .gp-bgt-target-info {
    flex-direction:column;
    align-items:flex-start;
    gap:4px;
  }
  .gp-bgt-target-nums {
    flex-direction:column;
    gap:2px;
    font-size:11px;
  }

  /* ── Report tabs: scrollable ── */
  .gp-bgt-report-tabs {
    overflow-x:auto;
    -webkit-overflow-scrolling:touch;
    scrollbar-width:none;
  }
  .gp-bgt-report-tabs::-webkit-scrollbar { display:none; }
  .gp-bgt-rtab {
    white-space:nowrap;
    padding:8px 10px;
    font-size:12px;
  }

  /* ── Summary panel ── */
  .gp-bgt-summary-panel { margin-bottom:10px; }
  .gp-bgt-sum-tabs { overflow-x:auto; }
  .gp-bgt-sum-stab { padding:8px 10px; font-size:11px; }

  /* ── Category Manager Modal (dynamically created) ── */
  .gp-bgt-catmgr-row {
    gap:6px !important;
    padding:10px 4px !important;
  }
  /* Ensure action buttons don't overflow in catmgr */
  .gp-bgt-catmgr-row > span:last-child {
    flex-wrap:wrap !important;
  }
  .gp-bgt-catmgr-row .gp-btn-sm {
    min-width:32px;
    min-height:32px;
    display:inline-flex;
    align-items:center;
    justify-content:center;
  }

  /* ── Buttons: larger touch targets ── */
  .gp-btn.gp-btn-sm {
    min-height:36px;
    padding:6px 12px;
    font-size:13px;
  }

  /* ── Empty-state action ── */
  .gp-bgt-empty-action { padding:24px 12px; }

  /* ── Report content ── */
  .gp-bgt-rpt-filter-row { flex-direction:column; align-items:stretch; }
  .gp-bgt-rpt-info { flex-direction:column; gap:4px; font-size:12px; }
}

/* =============================================================================
   MOBILE — Small phones (≤420px)
   ============================================================================= */
@media (max-width:420px) {
  .gp-bgt-toolbar {
    padding:8px 10px;
  }
  .gp-bgt-toolbar input[type="month"] {
    font-size:14px;
    padding:9px 10px;
  }
  .gp-bgt-view-sel {
    font-size:13px;
    padding:9px 10px;
  }
  .gp-bgt-content {
    padding:10px 8px;
    max-height:calc(100vh - 200px);
  }
  .gp-bgt-summary-grid {
    gap:6px;
  }
  .gp-bgt-scard {
    padding:10px;
  }
  .gp-bgt-sc-value { font-size:14px; }
  .gp-bgt-sc-label { font-size:10px; }

  /* Stack expense row amount below title on tiny screens */
  .gp-bgt-row {
    padding:8px;
    gap:6px;
  }
  .gp-bgt-row-title {
    font-size:12.5px;
    word-break:break-word;
  }

  /* Fund card stats: single column on very small */
  .gp-bgt-fund-nums {
    grid-template-columns:repeat(2,1fr);
    gap:6px;
    padding:10px;
  }

  /* Category manager add form: stack inputs */
  #gp-bgt-catmgr-add > div[style*="display:flex"] {
    flex-wrap:wrap !important;
  }
  #gp-bgt-catmgr-add > div[style*="display:flex"] > div[style*="flex:1"] {
    flex:1 1 100% !important;
  }
  #gp-bgt-catmgr-add > div[style*="display:flex"] > div[style*="width:80px"] {
    width:auto !important;
    flex:1 1 45% !important;
  }
  #gp-bgt-catmgr-add > div[style*="display:flex"] > button {
    flex:1 1 45% !important;
  }
}

/* =============================================================================
   MOBILE — Landscape & medium tablets (≤768px)
   ============================================================================= */
@media (max-width:768px) {
  .gp-bgt-summary-grid { grid-template-columns:repeat(2,1fr); }
  .gp-bgt-plan-summary { grid-template-columns:repeat(2,1fr); }
  .gp-bgt-content:has(#gp-bgt-rpt-output) { max-height:calc(100vh - 160px); }
}

/* =============================================================================
   v10 Enhancements — summary panel, badges, action buttons, cancelled rows
   ============================================================================= */

/* ── Row actions (edit, duplicate, cancel, delete) ── */
.gp-bgt-row-actions { display:flex; gap:4px; padding-left:8px; flex-shrink:0; }
.gp-bgt-row-actions .gp-uh-icon-btn { background:none; border:0; cursor:pointer; padding:4px 6px; border-radius:6px;
  color:#64748b; font-size:13px; transition:background .15s, color .15s; }
.gp-bgt-row-actions .gp-uh-icon-btn:hover { background:#f1f5f9; color:#0f172a; }

/* ── Cancelled row ── */
.gp-bgt-row-cancelled { opacity:.55; background:#fef2f2 !important; }
.gp-bgt-amt-cancelled { text-decoration:line-through; color:#94a3b8 !important; }
.gp-bgt-cancelled-note { font-size:12px; color:#ef4444; font-weight:500; margin-left:6px; }

/* ── Badges ── */
.gp-bgt-badge-returnable { display:inline-flex; align-items:center; gap:3px; padding:1px 7px; border-radius:8px;
  font-size:10px; font-weight:600; background:#eff6ff; color:#3b82f6; margin-left:6px; vertical-align:middle; }
.gp-bgt-badge-cancelled { display:inline-flex; align-items:center; gap:3px; padding:1px 7px; border-radius:8px;
  font-size:10px; font-weight:600; background:#fef2f2; color:#ef4444; margin-left:6px; vertical-align:middle; }
.gp-bgt-badge-loan { display:inline-flex; align-items:center; gap:3px; padding:1px 7px; border-radius:8px;
  font-size:10px; font-weight:600; background:#f5f3ff; color:#7c3aed; margin-left:6px; vertical-align:middle; }

/* ── Summary panel (point 4) ── */
.gp-bgt-summary-panel { background:#f8fafc; border:1px solid #e2e8f0; border-radius:10px;
  margin-bottom:14px; overflow:hidden; }
.gp-bgt-sum-tabs { display:flex; gap:0; border-bottom:1px solid #e2e8f0; }
.gp-bgt-sum-stab { background:none; border:0; padding:9px 16px; font-size:12px; font-weight:600;
  color:#94a3b8; cursor:pointer; border-bottom:2px solid transparent; margin-bottom:-1px;
  transition:color .15s, border-color .15s; display:flex; align-items:center; gap:5px; }
.gp-bgt-sum-stab:hover { color:#0f172a; }
.gp-bgt-sum-stab.active { color:#4f46e5; border-bottom-color:#4f46e5; }
.gp-bgt-sum-pane { padding:10px 14px; }
.gp-bgt-sum-row { display:flex; justify-content:space-between; align-items:center;
  padding:6px 0; border-bottom:1px solid #f1f5f9; font-size:13px; color:#0f172a; }
.gp-bgt-sum-row:last-child { border-bottom:0; }
.gp-bgt-sum-row span { display:flex; align-items:center; gap:5px; }

/* ── Loan-to-name row & returnable checkbox ── */
.gp-bgt-exp-returnable-row { display:flex; flex-direction:column; gap:2px; }
.gp-bgt-checkbox-label { display:flex; align-items:center; gap:8px; cursor:pointer; font-size:13px; font-weight:500; color:#475569; margin:0; }
.gp-bgt-checkbox-label input[type="checkbox"] { width:16px; height:16px; accent-color:#4f46e5; cursor:pointer; }
.gp-bgt-hint { font-size:11px; color:#94a3b8; margin:0; padding-left:24px; }

/* =============================================================================
   v11 — Daily Report filters, info banner, placeholder
   ============================================================================= */

/* ── Report filter bar ── */
.gp-bgt-rpt-filters { background:#f8fafc; border:1px solid #e2e8f0; border-radius:10px;
  padding:12px 14px; margin-bottom:14px; }
.gp-bgt-rpt-filter-row { display:flex; gap:12px; align-items:flex-end; flex-wrap:wrap; }
.gp-bgt-rpt-filter-item { display:flex; flex-direction:column; gap:4px; }
.gp-bgt-rpt-filter-item label { font-size:11px; font-weight:600; color:#64748b;
  text-transform:uppercase; letter-spacing:.4px; }
.gp-bgt-rpt-filter-item input,
.gp-bgt-rpt-filter-item select { padding:7px 10px; border:1px solid #e2e8f0; border-radius:6px;
  font-size:13px; font-family:inherit; background:#fff; }
.gp-bgt-rpt-filter-item input:focus,
.gp-bgt-rpt-filter-item select:focus { outline:none; border-color:#4f46e5;
  box-shadow:0 0 0 3px rgba(79,70,229,.12); }

/* ── Report info banner ── */
.gp-bgt-rpt-info { display:flex; gap:14px; align-items:center; flex-wrap:wrap;
  padding:10px 14px; background:#eff6ff; border:1px solid #bfdbfe; border-radius:8px;
  font-size:13px; color:#1e40af; }

/* ── Report placeholder ── */
.gp-bgt-rpt-placeholder { text-align:center; padding:50px 20px; color:#94a3b8; }
.gp-bgt-rpt-placeholder i { font-size:2.5em; opacity:.3; display:block; margin-bottom:12px; }
.gp-bgt-rpt-placeholder p { margin:0; font-size:14px; }

/* ── Report items table wrapper — horizontal scroll on narrow screens ── */
.gp-bgt-rpt-table-wrap { overflow-x:auto; -webkit-overflow-scrolling:touch; }
.gp-bgt-rpt-table-wrap .gp-bgt-report-tbl { min-width:600px; }

/* ── When report view is active, allow taller scroll area ── */
.gp-bgt-content:has(#gp-bgt-rpt-output) { max-height:calc(100vh - 180px); }

/* ── Report output scrollable area + visible scrollbar ── */
#gp-bgt-rpt-output { scroll-behavior:smooth; }
#gp-bgt-rpt-output::-webkit-scrollbar { width:6px; }
#gp-bgt-rpt-output::-webkit-scrollbar-track { background:rgba(0,0,0,.04); border-radius:3px; }
#gp-bgt-rpt-output::-webkit-scrollbar-thumb { background:rgba(0,0,0,.25); border-radius:3px; }
#gp-bgt-rpt-output::-webkit-scrollbar-thumb:hover { background:rgba(0,0,0,.4); }

/* =============================================================================
   v12 — Additional mobile polish for expense form & global touch targets
   ============================================================================= */

/* ── Expense modal date field — adaptive on mobile ── */
@media (max-width:600px) {
  .gp-fh-modal-body .gp-uh-form-row input[type="date"] {
    font-size:15px;
    padding:10px 12px;
  }
  .gp-fh-modal-body .gp-uh-form-row input[type="text"],
  .gp-fh-modal-body .gp-uh-form-row input[type="number"],
  .gp-fh-modal-body .gp-uh-form-row select,
  .gp-fh-modal-body .gp-uh-form-row textarea {
    font-size:14px;
  }
}


/* =============================================================================
   v12.1 — MOBILE LAYOUT FIX (portrait + landscape phones)
   -----------------------------------------------------------------------------
   Problems fixed:
   1. Daily Expenses list collapsed to ~0px on most phones (all landscape,
      and portrait < 800px tall): JS sets an inline min-height of
      calc(100vh - 180px) while the summary panel / filters are pinned with
      flex-shrink:0, so the list body got no room. Now the whole budget tab
      is ONE scroll surface — no nested scroll boxes with vh maths.
   2. Modal used 100vh → on iOS Safari / Android Chrome the bottom (Save /
      Cancel footer) sat under the browser toolbar. Now uses 100dvh.
   3. Landscape phones (width 568–956px) got the desktop floating modal with
      a 2-row header, leaving ~100–200px for content. Now full screen with a
      single-row header.
   4. Inputs/selects < 16px made iOS zoom the page on focus (and stay zoomed).
   5. Special Fund action buttons overflowed the screen (inline nowrap).
   6. Form inputs (width:100% + padding) overflowed without border-box.
   7. Sub-modal close (×) rendered before the title instead of at the right.
   8. Full-screen modal hid the site header (menu / logout) and, in some
      themes, its own title row + close ×. The modal now starts below the
      site header (--gp-fh-top, set by the helper at the end of fh-budget.js).
   9. Month picker was truncated ("September 2(") and the summary tabs broke
      into 3-line words ("By Pay-er").
   ============================================================================= */

/* Forms inside the house modals must not overflow their container */
.gp-fh-modal-overlay,
.gp-fh-modal-overlay *,
.gp-fh-modal-overlay *::before,
.gp-fh-modal-overlay *::after { box-sizing:border-box; }

/* Sub-modal close button belongs on the right, after the title */
.gp-fh-modal-header > .gp-fh-modal-close { order:2; }

/* ── Phones: portrait (≤768px wide) and landscape (≤500px tall) ── */
@media (max-width:768px), (max-height:500px) and (orientation:landscape) {

  /* Full-screen modal sized to the VISIBLE viewport (dvh), vh fallback */
  /* --gp-fh-top = height of the site header (menu / logout), measured by
     fh-budget.js when a modal opens, so the header stays visible & tappable */
  .gp-fh-modal-overlay {
    padding:0 !important;
    left:0 !important;
    top:var(--gp-fh-top, 0px) !important;
    bottom:auto !important;
    height:var(--gp-fh-h, calc(100dvh - var(--gp-fh-top, 0px)));
    align-items:stretch;
    justify-content:stretch;
  }
  .gp-fh-modal-overlay .gp-fh-modal {
    width:100%;
    max-width:100% !important;
    height:100%;
    max-height:100%;
    border-radius:0;
    padding-left:env(safe-area-inset-left);
    padding-right:env(safe-area-inset-right);
  }
  .gp-fh-modal-overlay .gp-fh-modal-body { min-height:0; }
  /* Keep title + window controls on the same row (long house names used to
     push the controls onto a row of their own) */
  .gp-fh-modal-overlay .gp-fh-modal-title { flex:1 1 0; min-width:0; }
  #gp-fh-modal-maximize { display:none !important; }

  /* iOS zooms into any focused field below 16px — keep all fields at 16px */
  .gp-fh-modal-overlay input:not([type="checkbox"]):not([type="radio"]),
  .gp-fh-modal-overlay select,
  .gp-fh-modal-overlay textarea { font-size:16px !important; }

  /* Budget tab = single scroll surface */
  #gp-fh-tab-budget {
    overflow-y:auto;
    overflow-x:hidden;
    -webkit-overflow-scrolling:touch;
    overscroll-behavior:contain;
  }
  #gp-fh-tab-budget .gp-bgt-panel { min-height:0; }
  #gp-bgt-content.gp-bgt-content {
    flex:none;
    max-height:none !important;   /* beats inline style set by JS */
    min-height:0 !important;      /* beats inline calc(100vh - 180px) */
    overflow:visible !important;
    padding-bottom:max(16px, env(safe-area-inset-bottom));
  }
  #gp-bgt-content .gp-bgt-list-body { flex:none !important; overflow:visible !important; }
  #gp-bgt-rpt-output { max-height:none !important; overflow:visible !important; }
  #gp-bgt-content .gp-rec-panel { min-height:0; }
  #gp-bgt-content .gp-rec-content { max-height:none; overflow:visible; padding-left:0; padding-right:0; }

  /* Month + view selector stay pinned while the tab scrolls; one compact row */
  .gp-bgt-toolbar {
    position:sticky; top:0; z-index:5;
    flex-direction:row;
    flex-wrap:wrap;
    align-items:center;
    gap:8px;
    padding:8px 12px;
  }
  .gp-bgt-toolbar-left  { flex:1 1 170px; width:auto; min-width:0; gap:6px; }
  .gp-bgt-toolbar-right { flex:1 1 140px; width:auto; min-width:0; }
  .gp-bgt-toolbar-left > label { display:none; }  /* room for "September 2026" */
  .gp-bgt-toolbar input[type="month"] { flex:1; width:100%; min-width:0; padding:8px 10px; font-weight:600; }
  .gp-bgt-view-sel { width:100%; min-width:0; padding:8px 10px; }

  /* Special fund buttons: wrap instead of running off-screen */
  .gp-bgt-fund-actions { flex-wrap:wrap !important; }
  .gp-bgt-fund-actions .gp-btn { flex:1 1 120px !important; min-width:0; justify-content:center; }

  /* Summary tabs (Last Date By / By Payer …): one line each, swipe sideways */
  .gp-bgt-sum-tabs { overflow-x:auto; scrollbar-width:none; -webkit-overflow-scrolling:touch; }
  .gp-bgt-sum-tabs::-webkit-scrollbar { display:none; }
  .gp-bgt-sum-stab { white-space:nowrap; flex-shrink:0; }

  /* Expense row action icons sit on the right */
  .gp-bgt-row-actions { margin-left:auto; padding-left:0; }

  /* Tables that don't have their own scroll wrapper can still scroll sideways */
  #gp-bgt-content .gp-bgt-report-tbl { display:block; overflow-x:auto; -webkit-overflow-scrolling:touch; }
  #gp-bgt-content .gp-bgt-rpt-table-wrap .gp-bgt-report-tbl { display:table; overflow:visible; }
  #gp-bgt-content .gp-bgt-report-tbl th,
  #gp-bgt-content .gp-bgt-report-tbl td { white-space:nowrap; padding:7px 6px; }
}

/* Daily-report filters: the v11 base rules sit later in this file than the
   ≤600px block, so they silently overrode it (fields hugged the right edge).
   Re-assert the stacked layout here. */
@media (max-width:600px) {
  .gp-bgt-rpt-filters { padding:10px 12px; }
  .gp-bgt-rpt-filter-row { flex-direction:column; align-items:stretch; gap:10px; }
  .gp-bgt-rpt-filter-item { width:100%; align-self:stretch !important; }
  .gp-bgt-rpt-filter-item input,
  .gp-bgt-rpt-filter-item select,
  .gp-bgt-rpt-filter-item .gp-btn { width:100%; justify-content:center; }
  .gp-bgt-rpt-info { flex-direction:column; align-items:flex-start; gap:4px; }
}

/* Very narrow phones (≤340px, e.g. iPhone SE 1st gen, Galaxy Fold cover) */
@media (max-width:340px) {
  .gp-bgt-toolbar-left, .gp-bgt-toolbar-right { flex-basis:100%; }
  .gp-bgt-summary-grid, .gp-bgt-plan-summary { grid-template-columns:1fr 1fr; }
  .gp-bgt-sc-value { font-size:13px; }
}

/* ── Landscape phones: reclaim vertical space ── */
@media (max-height:500px) and (orientation:landscape) {
  /* Header in ONE row: title | scrollable tabs | window controls */
  .gp-fh-modal-overlay .gp-fh-modal-header {
    flex-wrap:nowrap;
    gap:8px;
    padding:6px 10px;
  }
  .gp-fh-modal-overlay .gp-fh-modal-title { flex:0 1 auto; max-width:30%; font-size:14px; }
  .gp-fh-modal-overlay .gp-fh-modal-tabs {
    order:2; flex:1 1 auto; width:auto; min-width:0;
    margin-top:0; padding:3px;
  }
  .gp-fh-modal-overlay .gp-fh-modal-controls { order:3; margin-left:0; }
  .gp-fh-modal-overlay .gp-fh-mtab { padding:6px 10px; font-size:12px; }
  .gp-fh-modal-overlay .gp-fh-modal-wbtn,
  .gp-fh-modal-overlay .gp-fh-modal-close { width:32px; height:32px; }
  .gp-fh-modal-overlay .gp-fh-modal-body { padding:10px 16px; }
  .gp-fh-modal-overlay .gp-fh-modal-footer { padding:8px 16px; }

  .gp-bgt-toolbar { flex-wrap:nowrap; padding:6px 16px; }
  .gp-bgt-toolbar-left, .gp-bgt-toolbar-right { flex:0 1 240px; }
  .gp-bgt-toolbar-right { margin-left:auto; }
  #gp-bgt-content.gp-bgt-content { padding:12px 16px; }

  /* Landscape is wide enough for side-by-side fields and 4 summary cards */
  .gp-bgt-form-grid { grid-template-columns:1fr 1fr; }
  .gp-bgt-summary-grid, .gp-bgt-plan-summary, .gp-bgt-fund-nums { grid-template-columns:repeat(4,1fr); }
  .gp-bgt-list-header { flex-direction:row; align-items:center; }
  .gp-bgt-list-header h4 { width:auto; }
}

/* =============================================================================
   v12.2 — Family House page shifted 22px left on phones
   gripar-dashboard/dashboard.css makes #gp-page full-bleed with
   margin-left:calc(50% - 50vw), but on phones its parent Gutenberg column is
   only 330px wide and not centred, so the page slid left: hamburger cut off,
   empty strip on the right. Let the column(s) holding #gp-page span the full
   width so the full-bleed maths lands at x = 0.
   ============================================================================= */
@media (max-width:768px) {
  .wp-block-columns:has(#gp-page),
  .wp-block-column:has(> #gp-page) {
    width:100% !important;
    max-width:none !important;
    flex-basis:100% !important;
    margin-left:0 !important;
    margin-right:0 !important;
  }
}


/* =============================================================================
   v12.3 — Daily-expense Overview: docked + collapsible
   -----------------------------------------------------------------------------
   The Overview (Last Date By / By Payer / Entered By / By Date) stays pinned to
   the bottom of the screen while the expense list scrolls, and its header bar
   shows / hides the details. At the end of the list it settles in place.
   ============================================================================= */
#gp-bgt-content > .gp-bgt-summary-panel.is-docked {
  position: sticky;
  bottom: 0;
  z-index: 4;
  flex-shrink: 0;
  margin: 10px 0 0;
  background: #fff;
  border-radius: 12px 12px 10px 10px;
  box-shadow: 0 -10px 24px -14px rgba(15, 23, 42, .35);
}
.gp-bgt-sum-head {
  display: flex; align-items: center; gap: 8px;
  width: 100%;
  padding: 10px 14px;
  background: #f8fafc;
  border: 0; border-bottom: 1px solid #e2e8f0;
  font: inherit; text-align: left; color: inherit;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.gp-bgt-sum-head:focus-visible { outline: 2px solid #6366f1; outline-offset: -2px; }
.gp-bgt-sum-head-title {
  display: flex; align-items: center; gap: 6px; min-width: 0;
  font-size: 13px; font-weight: 700; color: #0f172a;
}
.gp-bgt-sum-head-title > i { color: #6366f1; }
.gp-bgt-sum-head-tab { font-weight: 500; color: #64748b; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.gp-bgt-sum-head-meta { margin-left: auto; font-size: 12px; color: #64748b; white-space: nowrap; }
.gp-bgt-sum-head-meta strong { color: #0f172a; }
.gp-bgt-sum-chev { color: #64748b; font-size: 12px; transition: transform .2s ease; }
.gp-bgt-summary-panel.is-collapsed .gp-bgt-sum-chev { transform: rotate(180deg); }
.gp-bgt-summary-panel.is-collapsed .gp-bgt-sum-head { border-bottom: 0; }
.gp-bgt-summary-panel.is-collapsed .gp-bgt-sum-body { display: none; }

/* Details scroll inside the panel so it never covers more than ~1/3 screen */
.gp-bgt-summary-panel.is-docked .gp-bgt-sum-pane {
  max-height: min(34vh, 280px);
  overflow-y: auto;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
}
.gp-bgt-sum-row-2 { gap: 10px; }
.gp-bgt-sum-l { display: flex; flex-direction: column; min-width: 0; }
.gp-bgt-sum-l small { font-size: 11px; color: #94a3b8; margin-top: 1px; }

@media (max-width:768px), (max-height:500px) and (orientation:landscape) {
  /* The docked panel already clears the Menu pill (pill lifts above it) */
  #gp-bgt-content.gp-bgt-content:has(> .gp-bgt-summary-panel.is-docked) {
    padding-bottom: max(8px, env(safe-area-inset-bottom)) !important;
  }
  .gp-bgt-summary-panel.is-docked { margin-bottom: 0; }
  .gp-bgt-sum-head { padding: 10px 12px; }
  .gp-bgt-sum-head-tab { display: none; }   /* keep the bar to one line on phones */
}
@media (prefers-reduced-motion: reduce) { .gp-bgt-sum-chev { transition: none; } }


/* =============================================================================
   v12.5 — "Expense saved" toast (Add Expense window)
   Floats just above the Save / Cancel footer, so it is in view on phones even
   when the form is scrolled or the keyboard is open.
   ============================================================================= */
#gp-bgt-exp-modal .gp-fh-modal { position: relative; }
.gp-bgt-exp-toast {
  position: absolute;
  left: 12px; right: 12px;
  bottom: calc(var(--gp-bgt-footer-h, 64px) + 10px);
  z-index: 30;
  display: flex; align-items: center; gap: 10px;
  padding: 12px 14px;
  border-radius: 12px;
  background: #065f46;
  color: #fff;
  font-size: 14px; font-weight: 600; line-height: 1.35;
  box-shadow: 0 12px 28px -10px rgba(6, 95, 70, .55);
  opacity: 0;
  transform: translateY(10px);
  pointer-events: none;
  transition: opacity .2s ease, transform .25s cubic-bezier(.2, .8, .2, 1);
}
.gp-bgt-exp-toast i { color: #6ee7b7; font-size: 18px; flex-shrink: 0; }
.gp-bgt-exp-toast span { min-width: 0; overflow-wrap: anywhere; }
.gp-bgt-exp-toast.is-in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) { .gp-bgt-exp-toast { transition: none; } }