/* ═══════════════════════════════════════════════════════════ */ /* ═══ MODAL POLISH (2026-09-30) — Banking / HOA dialogs ═══ */ /* ═══════════════════════════════════════════════════════════ */ /* Gil: "go over all the screens like that and improve the GUI". One block that fixes every #hoaModalBox dialog (27 openModal() callers) instead of editing each form: - grids: `1fr 1fr` lets a date input / long placeholder push a column past the card edge (Single payment's Address / Amount / Date ran off the right side). minmax(0,1fr) + min-width:0. - .bkg-meta is a one-line ellipsis for list headers; inside a dialog it is explanatory copy and was cut mid-sentence. - .bkg-btn-primary was referenced (Create it / Send the link) but never defined, so the main action looked like Cancel. */ #hoaModalBox{line-height:1.45;} #hoaModalBox > h3{font-family:'Playfair Display',serif;font-size:19px;font-weight:700;color:#3a3428;margin:0 0 6px !important;} #hoaModalBox .bkg-meta{white-space:normal;overflow:visible;text-overflow:clip;line-height:1.5;font-size:11.5px;} #hoaModalBox [style*="grid-template-columns:1fr 1fr"]{grid-template-columns:minmax(0,1fr) minmax(0,1fr) !important;gap:14px 12px !important;} #hoaModalBox [style*="grid-template-columns:1fr 1fr 1fr"]{grid-template-columns:repeat(3,minmax(0,1fr)) !important;} #hoaModalBox label{min-width:0;font-size:10px;letter-spacing:1.2px;color:#6b6354;margin-bottom:0;} #hoaModalBox label > input,#hoaModalBox label > select,#hoaModalBox label > textarea{margin-top:5px;max-width:100%;min-width:0;} #hoaModalBox input,#hoaModalBox select,#hoaModalBox textarea{box-sizing:border-box;max-width:100%;} #hoaModalBox input::placeholder,#hoaModalBox textarea::placeholder{color:#b9b1a2;} #hoaModalBox input[type=date]{min-height:38px;} #hoaModalBox select{text-overflow:ellipsis;} #hoaModalBox .bkg-btn{padding:8px 16px;font-size:12px;border-radius:8px;} #hoaModalBox .bkg-btn-primary,.bkg-btn.bkg-btn-primary{background:#7a4e2b;border-color:#7a4e2b;color:#fff;} #hoaModalBox .bkg-btn-primary:hover{background:#6a4223;border-color:#6a4223;color:#fff;} #hoaModalBox .bkg-btn:disabled{opacity:.55;cursor:default;} @media(max-width:600px){ #hoaModalOverlay{padding:12px 8px !important;} #hoaModalBox{padding:16px 14px !important;} #hoaModalBox [style*="grid-template-columns:1fr 1fr"]{grid-template-columns:minmax(0,1fr) !important;} #hoaModalBox [style*="grid-column:1/3"]{grid-column:auto !important;} } /* ═══ Plain .modal dialogs (2026-09-30) ═══ */ /* `.form-grid{1fr 1fr}` blows out when a date input's min-content is wider than its half — Add Unit's Check-in column ran under Monthly rent and every right-hand field ended flush against the card edge. */ .modal .form-grid{grid-template-columns:minmax(0,1fr) minmax(0,1fr);} .modal .form-grid > *{min-width:0;} .modal input,.modal select,.modal textarea{max-width:100%;min-width:0;} .modal-body input[type=date]{min-height:38px;} @media(max-width:600px){.modal .form-grid{grid-template-columns:minmax(0,1fr);}} /* ROOT CAUSE of the overflowing fields in every dialog: line 1 of this file is a stray "