/* =====================================================================
   A. S. BOOKBINDING ERP — V38.46 COMPLETE FORM VISIBILITY
   Keeps every form field and action reachable at every step, prevents
   clipped dropdowns, and gives Personal Finance forms a clear workflow.
   ===================================================================== */
:root{--v3844-line:#d7e2eb;--v3844-soft:#f5f8fb;--v3844-ink:#172b3f;--v3844-blue:#176fbe;--v3844-navy:#102f4b}

/* Generic modal safety for the entire ERP. */
#modal:not(.hidden){padding:12px!important;align-items:center!important;overflow:hidden!important}
#modal .modalbox{
 width:min(1120px,calc(100vw - 24px));
 max-width:calc(100vw - 24px)!important;
 height:auto;
 max-height:calc(100dvh - 24px)!important;
 display:flex;
 flex-direction:column;
 overflow:hidden!important;
 padding:0!important;
 border-radius:14px!important;
 box-shadow:0 28px 90px rgba(7,25,43,.34);
}
#modal .modalhead{
 flex:0 0 auto;
 position:sticky!important;
 top:0!important;
 z-index:40!important;
 margin:0!important;
 min-height:56px;
 padding:12px 16px!important;
 background:#fff;
 border-bottom:1px solid var(--v3844-line);
}
#modal .modalhead h2{margin:0;min-width:0;font-size:18px;line-height:1.25;overflow-wrap:anywhere}
#modal .modalhead>button{flex:0 0 auto;min-width:38px;min-height:38px}
#modal #modalBody{
 flex:1 1 auto;
 min-height:0;
 width:100%;
 padding:14px 16px 16px;
 overflow:auto!important;
 overscroll-behavior:contain;
 scrollbar-gutter:stable;
}
#modal #modalBody>.grid,
#modal #modalBody>.grid2,
#modal #modalBody .pf3844-responsive-grid{
 grid-template-columns:repeat(auto-fit,minmax(min(260px,100%),1fr))!important;
 align-items:start;
}
#modal #modalBody .field{min-width:0}
#modal #modalBody .field label{font-weight:750;color:#4a6175;line-height:1.25}
#modal #modalBody input,
#modal #modalBody select,
#modal #modalBody textarea{
 min-width:0!important;
 max-width:100%!important;
 width:100%!important;
}
#modal #modalBody textarea{resize:vertical}
#modal #modalBody small{overflow-wrap:anywhere}
#modal #modalBody .toolbar{max-width:100%;flex-wrap:wrap}
#modal .pf3844-modal-footer{
 flex:0 0 auto;
 z-index:35;
 width:100%;
 margin:0!important;
 padding:11px 16px!important;
 display:flex!important;
 gap:8px;
 align-items:center;
 justify-content:flex-end;
 flex-wrap:wrap;
 background:rgba(255,255,255,.99);
 border-top:1px solid var(--v3844-line);
 box-shadow:0 -8px 20px rgba(15,39,63,.08);
 backdrop-filter:blur(6px);
}
#modal .pf3844-modal-footer button{min-height:38px}

/* Personal Finance step layout: every box stays visible, grouped, and labeled. */
.pf3844-step-strip{
 display:grid;
 grid-template-columns:repeat(3,minmax(0,1fr));
 gap:8px;
 margin:0 0 12px;
}
.pf3844-step-strip span{
 display:flex;
 align-items:center;
 gap:8px;
 min-width:0;
 padding:8px 10px;
 border:1px solid #d7e3ec;
 border-radius:9px;
 background:#f7fafc;
 color:#4a6073;
 font-size:11px;
 font-weight:800;
}
.pf3844-step-strip b{
 display:grid;
 place-items:center;
 width:23px;
 height:23px;
 flex:0 0 auto;
 border-radius:50%;
 background:#dcecf7;
 color:#155f91;
}
.pf3844-form-layout{display:grid;gap:12px}
.pf3844-form-section{
 min-width:0;
 border:1px solid var(--v3844-line);
 border-radius:11px;
 background:#fff;
 overflow:visible;
}
.pf3844-form-section>header{
 position:static!important;
 height:auto!important;
 min-height:0!important;
 display:block!important;
 padding:10px 12px!important;
 background:linear-gradient(180deg,#f9fbfd,#f1f6f9)!important;
 border-bottom:1px solid var(--v3844-line)!important;
 box-shadow:none!important;
}
.pf3844-form-section>header h3{margin:0;color:var(--v3844-ink);font-size:13px}
.pf3844-form-section>header p{margin:3px 0 0;color:#708396;font-size:10px;line-height:1.4}
.pf3844-fields{
 display:grid;
 grid-template-columns:repeat(auto-fit,minmax(min(245px,100%),1fr));
 gap:10px 12px;
 padding:12px;
 align-items:start;
}
.pf3844-fields .field{margin:0!important;min-width:0}
.pf3844-fields .field:focus-within{position:relative;z-index:3}
.pf3844-live-summary{
 display:flex;
 align-items:center;
 gap:8px 14px;
 flex-wrap:wrap;
 margin:0 0 12px;
 padding:9px 11px;
 border:1px solid #c9dcea;
 border-left:4px solid #2479a9;
 border-radius:9px;
 background:#f4f9fd;
 color:#304a60;
 font-size:11px;
}
.pf3844-live-summary strong{font-size:12px;color:#173b58}
.pf3844-account-preview{display:flex;gap:10px;align-items:center;flex-wrap:wrap}
.pf3844-account-preview .badge{background:#e6f2fa;color:#155d8b}
.pf3844-inline-button{width:auto!important;margin-top:6px;min-height:32px!important;padding:5px 9px!important;font-size:10px!important}

/* Custom combobox — replaces browser datalists that ran off the screen. */
.pf3844-combo-field{position:relative}
.pf3844-combo-input{padding-right:38px!important}
.pf3844-combo-toggle{
 position:absolute!important;
 right:5px;
 top:24px;
 width:30px!important;
 min-width:30px!important;
 height:30px!important;
 min-height:30px!important;
 padding:0!important;
 display:grid!important;
 place-items:center;
 border:0!important;
 background:transparent!important;
 color:#526b80!important;
 font-size:15px!important;
 z-index:2;
}
.pf3844-combo-popup{
 position:fixed;
 z-index:40000;
 display:none;
 overflow:auto;
 max-width:calc(100vw - 16px);
 max-height:min(320px,48dvh);
 padding:5px;
 border:1px solid #b9ccda;
 border-radius:9px;
 background:#fff;
 box-shadow:0 18px 48px rgba(15,39,63,.28);
}
.pf3844-combo-popup.open{display:block}
.pf3844-combo-option{
 width:100%;
 min-height:34px;
 padding:7px 9px;
 border:0;
 border-radius:6px;
 background:#fff;
 color:#21384c;
 text-align:left;
 font-size:11px;
 white-space:normal;
 overflow-wrap:anywhere;
}
.pf3844-combo-option:hover,.pf3844-combo-option.active{background:#eaf4fb;color:#124f78}
.pf3844-combo-option.custom{border-bottom:1px solid #e2e9ef;border-radius:0;color:#72510d;background:#fffaf0}
.pf3844-combo-empty{padding:10px;color:#6f8191;font-size:11px}

/* Wide statement/import/reconciliation workbenches must show both panes cleanly. */
#modal.pf-pro-import-modal .modalbox,
#modal.v30-compare-modal .modalbox,
#modal.v37-import-modal .modalbox{
 width:calc(100vw - 20px)!important;
 max-width:calc(100vw - 20px)!important;
 height:calc(100dvh - 20px)!important;
 max-height:calc(100dvh - 20px)!important;
}
#modal.pf-pro-import-modal #modalBody{padding:0!important;overflow:hidden!important}
.pf-pro-workbench,.pf-pro-bill-workbench,.v30-compare-layout,.v37-review-layout{min-width:0!important;min-height:0!important}
.pf-pro-source-pane,.pf-pro-review-pane,.v30-source-pane,.v30-data-pane,.v37-source,.v37-review{min-width:0!important;min-height:0!important}
.pf-pro-pane-head,.v30-pane-head,.v37-pane-title{flex-wrap:wrap}
.pf-pro-pane-head .toolbar,.v30-pane-head .toolbar,.v37-pane-title .toolbar{max-width:100%;flex-wrap:wrap}
.pf-pro-import-table,.pf-pro-compare-transactions,.pf3839-table-wrap,.pf-table-wrap{max-width:100%;scrollbar-gutter:stable}
.pf-pro-import-table table,.pf-pro-compare-transactions table,.pf3839-audit-table,.pf-table{max-width:none}
.pf-pro-savebar{flex-wrap:wrap}
.pf3839-check{min-width:0}
.pf3839-check>*{min-width:0;overflow-wrap:anywhere}
.pf3839-audit-table td,.pf3839-audit-table th{overflow-wrap:anywhere}

/* Personal Finance pages: no cards, filters, or action boxes disappear off-screen. */
#personalFinance,#personalFinance *{min-width:0}
#personalFinance .pf-filterbar>*{max-width:100%}
#personalFinance .pf-filterbar input,#personalFinance .pf-filterbar select{width:auto;min-width:150px}
#personalFinance .pf-card-footer{flex-wrap:wrap}
#personalFinance .pf-card-footer>div{display:flex;gap:5px;flex-wrap:wrap}
#personalFinance .pf-panel-head{flex-wrap:wrap}
#personalFinance .pf-panel-head>.toolbar{max-width:100%}
#personalFinance .pf-summary-grid{grid-template-columns:repeat(auto-fit,minmax(145px,1fr))}

@media(max-width:1100px){
 .pf-pro-workbench,.pf-pro-bill-workbench,.v30-compare-layout,.v37-review-layout{grid-template-columns:1fr!important;overflow:auto!important}
 .pf-pro-source-pane,.v30-source-pane,.v37-source{min-height:46dvh!important}
 .pf-pro-source-view,.v30-source-view,.v37-source-view{height:46dvh!important;min-height:46dvh!important}
 .pf-pro-review-pane,.v30-data-pane,.v37-review{min-height:46dvh!important;overflow:visible!important}
 #personalFinance .pf-layout-2,#personalFinance .pf-layout-even{grid-template-columns:1fr!important}
}

@media(max-width:720px){
 #modal:not(.hidden){padding:0!important;align-items:stretch!important}
 #modal .modalbox{width:100vw!important;max-width:100vw!important;height:100dvh!important;max-height:100dvh!important;border-radius:0!important}
 #modal #modalBody{padding:12px 12px 16px}
 #modal .pf3844-modal-footer{margin:0!important;padding:10px 12px!important}
 .pf3844-step-strip{grid-template-columns:1fr}
 .pf3844-step-strip span{padding:6px 8px}
 .pf3844-fields{grid-template-columns:1fr;padding:10px}
 .pf3844-form-section>header{padding:9px 10px!important}
 .pf3844-sticky-actions{display:grid!important;grid-template-columns:1fr 1fr;width:100%}
 .pf3844-sticky-actions button{width:100%!important}
 .pf3844-sticky-actions .primary{grid-column:1/-1}
 .pf3844-combo-toggle{top:24px}
 #personalFinance .pf-filterbar input,#personalFinance .pf-filterbar select,#personalFinance .pf-filterbar button{width:100%!important;min-width:0!important}
 #personalFinance .pf-filterbar{display:grid;grid-template-columns:1fr}
 .pf-pro-oneclick{grid-template-columns:1fr 1fr!important}
}

@media(max-width:430px){
 .pf3844-sticky-actions{grid-template-columns:1fr!important}
 .pf3844-sticky-actions .primary{grid-column:auto}
 .pf3844-live-summary{display:grid}
 .pf-pro-oneclick{grid-template-columns:1fr!important}
}
.pf3844-combo-hint{
 display:block;
 margin-top:4px;
 padding-right:2px;
 color:#6b7f91;
 font-size:9px;
 line-height:1.35;
}
.pf3844-combo-input:focus{box-shadow:0 0 0 3px rgba(23,111,190,.15)!important;border-color:#176fbe!important}