/* Mobile PWA layer. Application totals and accounting rules are unchanged. */
:root{--pwa-safe-bottom:env(safe-area-inset-bottom,0px)}
.pwa-gate{position:fixed;inset:0;background:#f4f7f5;z-index:90;overflow-y:auto;padding:28px 18px calc(28px + var(--pwa-safe-bottom));display:grid;align-items:start;justify-items:center}
.pwa-welcome-card{width:min(100%,480px);padding:28px;background:#fff;border:1px solid #dce6e1;border-radius:18px;box-shadow:0 12px 48px #102b2610}
.pwa-welcome-card h1{font-size:30px;letter-spacing:-.7px;line-height:1.12}.pwa-welcome-card>p{color:#536d64}.pwa-brand{display:grid;place-items:center;background:#d7f0e2;color:#164a38;width:46px;height:46px;border-radius:12px;font-size:28px;margin-bottom:20px}.pwa-separator{display:flex;align-items:center;gap:12px;margin:22px 0;color:#6d8379;font-size:12px}.pwa-separator:before,.pwa-separator:after{content:'';height:1px;flex:1;background:#dce6e1}.pwa-check{display:flex!important;align-items:center;gap:10px;font-size:13px}.pwa-check input{width:18px;height:18px;flex-shrink:0}.pwa-feedback{margin:10px 0 0;min-height:1.4em;font-size:13px;white-space:normal}.pwa-feedback[data-error="true"]{color:#a63838}.pwa-feedback[data-error="false"]{color:#27634f}.pwa-small{font-size:12px;line-height:1.5;margin:18px 0 0}.pwa-explain{margin-top:18px;padding-top:16px;border-top:1px solid #e1e9e5;font-size:13px;color:#536d64}.pwa-explain summary{cursor:pointer;font-weight:650}.pwa-explain p{margin:12px 0}.pwa-dialog{border:1px solid #dce6e1;border-radius:16px;padding:26px;width:min(94vw,490px);max-height:90dvh;overflow-y:auto;color:#233d39;background:white;box-shadow:0 12px 58px #102b2630}.pwa-dialog::backdrop{background:#102b2680}.pwa-dialog p{font-size:13px;line-height:1.5}.pwa-dialog input{width:100%}.pwa-dialog input[type=checkbox]{width:18px}.pwa-dialog input[readonly]{font-family:ui-monospace,monospace;font-size:12px}.pwa-dialog .form-actions{flex-wrap:wrap}.pwa-environment-panel{margin-bottom:22px}.pwa-environment-panel .panel-title{align-items:start;gap:15px}.pwa-environment-panel .form-actions{flex-wrap:wrap}.pwa-environment-panel strong{overflow-wrap:anywhere}body.pwa-busy{cursor:progress}
@media(max-width:720px){input,select,textarea{font-size:16px!important}.pwa-welcome-card{padding:22px 18px}.pwa-gate{padding:16px 12px calc(18px + var(--pwa-safe-bottom))}.pwa-dialog{padding:22px 18px}.pwa-dialog .form-actions .btn,.pwa-environment-panel .form-actions .btn{width:100%;flex:auto}.pwa-environment-panel .panel-title{flex-direction:column}.topbar-controls{gap:7px}.topbar-controls input,.topbar-controls select{max-width:150px}.content main{padding-bottom:calc(28px + var(--pwa-safe-bottom))}.form-actions{flex-wrap:wrap}.form-actions .btn{white-space:normal}.metric strong{overflow-wrap:anywhere}.sidebar{max-height:100dvh;overflow-y:auto}.page-heading h1{font-size:29px}.item-row{min-width:0}.item-description{min-width:0;overflow-wrap:anywhere}.item-value{flex-shrink:0}.pwa-dialog input[type=file]{max-width:100%;font-size:13px!important}}

/* PWA application shell: readable at phone width, no desktop-width tables. */
.pwa-bottom-nav,.pwa-menu-backdrop{display:none}
.compact-list{grid-template-columns:minmax(0,1fr);min-width:0}
.item-row{min-width:0;max-width:100%}
.pwa-top-filter{display:flex;align-items:center;gap:8px;min-width:0}
@media(max-width:1020px) and (min-width:721px){
 .topbar{height:auto;min-height:70px;padding:14px 20px;flex-wrap:wrap}
 .topbar-controls{flex-wrap:wrap;min-width:0}
 .topbar-controls .reset-global{white-space:normal}
 .content main{padding:22px 20px}
 .split-form{grid-template-columns:minmax(0,1fr)}
 .panel-title{flex-wrap:wrap}
}
@media(max-width:720px){
 body{line-height:1.45}
 .app-shell,.content,.screen,.card,.field-grid>*{min-width:0;max-width:100%}
 .content{width:100%}
 .content main{padding:18px 14px calc(92px + var(--pwa-safe-bottom))}
 h1,h2,p,small,strong,.helper,.info-line,.text-soft,.pill,.stat-pill{overflow-wrap:anywhere}
 .page-heading{gap:10px;margin-bottom:20px}.page-heading h1{font-size:27px;line-height:1.16;letter-spacing:-.7px}
 .page-heading>div,.panel-title>div{min-width:0;max-width:100%}
 .panel-title{flex-direction:column;align-items:stretch;gap:10px}
 .panel-title .amount-inline{font-size:22px}
 .panel{padding:16px}.panel .panel{padding:13px}
 .topbar{padding:12px 14px;gap:10px;align-items:start}
 .menu-btn{width:44px;height:44px;flex-shrink:0;font-size:20px}
 .topbar-controls{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;min-width:0;justify-content:stretch}
 .pwa-top-filter{display:grid;gap:4px;min-width:0}
 .topbar-controls .pwa-top-filter label{margin:0;font-size:11px}
 .topbar-controls input,.topbar-controls select{width:100%;max-width:none;min-height:44px;padding:9px 6px}
 .topbar-controls .reset-global{grid-column:1/-1;width:100%;min-height:40px;white-space:normal;margin:0}
 #pwa-connectivity{width:100%;font-size:11px;margin:0}
 .metric-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
 .metric{padding:15px 12px;min-height:126px}
 .metric:first-child{grid-column:1/-1;min-height:115px}
 .metric-top{gap:8px;font-size:12px;align-items:start}
 .metric-top span{font-size:16px;flex-shrink:0}
 .metric strong{font-size:22px;line-height:1.25;letter-spacing:-.6px;margin:9px 0 6px}
 .metric.featured strong{font-size:30px}
 .metric small{display:block;font-size:11px;line-height:1.45}
 .health-values,.ux-composition{grid-template-columns:1fr;gap:10px}
 .health-values strong{white-space:normal;font-size:22px}
 .ux-status{gap:8px;padding:12px;font-size:11px}
 .onboarding,.info-line,.detect-panel,#connection-existing{padding:14px}
 .field-grid,.split-form,.two-col,.three-col{grid-template-columns:minmax(0,1fr)}
 .field-grid label,.field-stack label{font-size:12px}
 input,select,textarea{max-width:100%;min-height:44px}
 input[type=checkbox],input[type=radio]{min-height:0;flex-shrink:0}
 .btn,.tiny-btn,.link-button,.salary-actions .link-button{min-height:44px;white-space:normal;line-height:1.4;max-width:100%}
 .form-actions{display:grid;grid-template-columns:minmax(0,1fr);gap:9px}
 .form-actions .btn{width:100%;min-width:0}
 .filter-inline{display:grid;gap:8px;width:100%}.filter-inline select{width:100%;max-width:none}
 .item-row{display:grid;grid-template-columns:38px minmax(0,1fr);gap:10px;align-items:start;padding:15px 0}
 .item-description strong{white-space:normal;overflow:visible;text-overflow:clip;line-height:1.45}
 .item-description small{line-height:1.5}
 .item-value{grid-column:2;max-width:100%;text-align:left;white-space:normal;overflow-wrap:anywhere;font-size:15px}
 .item-row>.pill{grid-column:2;justify-self:start}
 .item-value small{display:flex;flex-wrap:wrap;align-items:center;gap:6px;line-height:1.5}
 .rec-bank-edit select{max-width:100%;width:100%}.rec-bank-edit{width:100%}
 .chart-area{display:flex;flex-direction:column;gap:20px;min-height:0;padding:10px 0}
 .legend{min-width:0;width:100%}.legend-row{flex-wrap:wrap;gap:7px}.legend-row b{white-space:normal}
 .history-bars{gap:5px}.bar-wrap .bar-value{font-size:9px;overflow-wrap:anywhere;max-width:100%}
 .bank-tile{padding:18px}.bank-tile strong,.bank-tile small{max-width:100%;overflow-wrap:anywhere}
 #connection-config label{min-width:0;width:100%}
 #toast{left:14px;right:14px;top:12px;max-width:none;line-height:1.5}
 /* Keep native table headers in the accessibility tree; cards repeat labels visually. */
 .table-scroller{overflow:visible;max-width:100%}
 .pwa-responsive-table{display:block;min-width:0;width:100%;font-size:13px;border-collapse:separate}
 .pwa-responsive-table thead{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap}
 .pwa-responsive-table tbody{display:grid;gap:12px;width:100%}
 .pwa-responsive-table tbody tr{display:block;padding:13px;border:1px solid #dce6e1;border-radius:12px;background:#fff;min-width:0}
 .pwa-responsive-table tbody td{display:block;width:100%;min-width:0!important;max-width:100%;padding:8px 0;border:0;text-align:left;white-space:normal;overflow-wrap:anywhere}
 .pwa-responsive-table tbody td+td{border-top:1px solid #eef3f0}
 .pwa-responsive-table td[data-label]:not([data-label=""])::before{content:attr(data-label);display:block;color:#607c6f;font-size:11px;font-weight:750;margin-bottom:5px;letter-spacing:.1px}
 .pwa-responsive-table td select,.pwa-responsive-table td input,.pwa-responsive-table .decision-label{width:100%;max-width:100%;font-size:16px}
 .pwa-responsive-table .decision-label{font-size:12px}.pwa-responsive-table td .tiny-btn{min-height:44px}
 .pwa-responsive-table .value-cell{font-size:16px}
 .sidebar{width:min(86vw,320px);height:100dvh;max-height:100dvh;z-index:51;padding-bottom:calc(25px + var(--pwa-safe-bottom))}
 .sidebar .nav-link{min-height:48px;white-space:normal}
 .pwa-menu-backdrop:not([hidden]){display:block;position:fixed;inset:0;z-index:50;border:0;border-radius:0;background:#102b2677}
 .pwa-bottom-nav{position:fixed;z-index:40;bottom:0;left:0;right:0;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:4px;padding:8px 8px calc(8px + var(--pwa-safe-bottom));background:#fff;border-top:1px solid #d8e5dd;box-shadow:0 -6px 25px #102b2608}
 .pwa-bottom-nav button{display:flex;align-items:center;justify-content:center;flex-direction:column;gap:3px;border:0;border-radius:10px;background:transparent;color:#657e72;min-height:51px;font-size:10px;font-weight:700;min-width:0;overflow-wrap:anywhere}
 .pwa-bottom-nav button span{font-size:21px;line-height:1.1}
 .pwa-bottom-nav button.active{color:#175e43;background:#eaf5ee}
}
@media(max-width:359px){.metric-grid{grid-template-columns:1fr}.metric{min-height:110px}.pwa-dialog{padding:18px 14px}}

/* The financial reset remains in Settings, away from everyday phone filters. */
@media(max-width:720px){.topbar-controls #reset-global{display:none}}

.metric-top{gap:8px;align-items:flex-start;white-space:normal}.metric-top>span:first-child{min-width:0;flex-shrink:1;overflow-wrap:anywhere}.metric-top>span:last-child{flex-shrink:0}

/* Consolidated statement is a wrapping list at every width, including landscape
   phones and tablet/desktop windows. Never conceal transaction columns. */
#view-transactions .table-scroller{overflow:visible;min-width:0;max-width:100%}
#view-transactions table{display:block;width:100%;min-width:0;table-layout:fixed;border-collapse:separate}
#view-transactions thead{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap}
#tx-table{display:grid;grid-template-columns:minmax(0,1fr);gap:12px;width:100%;min-width:0}
#tx-table tr{display:grid;grid-template-columns:minmax(0,1fr);gap:0;padding:14px;border:1px solid #dce6e1;border-radius:12px;background:#fff;min-width:0;max-width:100%}
#tx-table td{display:block;width:100%;min-width:0!important;max-width:100%;padding:9px 0;text-align:left;border:0;white-space:normal;overflow-wrap:anywhere}
#tx-table td+td{border-top:1px solid #eef3f0}
#tx-table td[data-label]:not([data-label=""])::before{content:attr(data-label);display:block;color:#607c6f;font-size:11px;font-weight:750;margin-bottom:5px}
#tx-table td strong,#tx-table td small,#tx-table td span{white-space:normal;overflow-wrap:anywhere;max-width:100%}
#tx-table td select,#tx-table td input,#tx-table td button{min-width:0;max-width:100%;min-height:44px;white-space:normal}
#tx-table td select{width:100%;font-size:16px}
@media(min-width:1050px){#tx-table{grid-template-columns:repeat(2,minmax(0,1fr))}}

/* Connection/storage status may grow after a real import. */
@media(min-width:721px){.topbar{height:auto;min-height:70px;flex-wrap:wrap;padding-top:12px;padding-bottom:12px}.topbar-controls{min-width:0;max-width:100%;flex-wrap:wrap}.topbar>span,#local-storage-status{max-width:100%;overflow-wrap:anywhere}}