/* Shared desktop/mobile interaction layout. */
button,input,select{letter-spacing:0}
button svg{width:20px;height:20px;flex:none;vertical-align:middle}
.ux-arrow{display:inline-flex;width:20px;height:20px}
.ux-arrow-left{transform:rotate(45deg)}
.ux-arrow-right{transform:rotate(225deg)}
#nav button,.btn{display:inline-flex;align-items:center;justify-content:center;gap:7px}
#nav{border-bottom:1px solid #dce5eb;padding-bottom:16px}
.ux-heading{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:12px;margin-bottom:16px}
.ux-heading h2,.ux-heading h3{margin:0}
.ux-tabs{display:flex;gap:4px;border-bottom:1px solid #cbd9df;margin:12px 0 20px}
.ux-tabs button{flex:1;max-width:260px;border:0;border-bottom:3px solid transparent;border-radius:0;background:transparent;color:#506273;padding:13px 10px;font-weight:650;min-height:46px}
.ux-tabs button[aria-selected=true]{border-color:#237d68;color:#175e4b;background:#edf6f2}
.ux-filter{display:flex;align-items:center;gap:12px;margin-bottom:18px}
.ux-totals{display:flex;gap:24px;flex-wrap:wrap;padding:16px 0;border-block:1px solid #e1e9ec;margin:12px 0}
.ux-totals span{display:grid;gap:7px;color:#506273}
.ux-totals b{font-size:21px;color:#183c31}
.ux-charge-row{display:grid;grid-template-columns:minmax(0,1fr) minmax(110px,auto) 44px;align-items:center;gap:12px;padding:17px 0;border-bottom:1px solid #dce5eb}
.ux-charge-row>div{min-width:0;overflow-wrap:anywhere}
.ux-charge-row>div:nth-child(2){text-align:right}
.ux-charge-row small{line-height:1.7}
.ux-row-note{grid-column:1/-1;margin:0;color:#956524}
.ux-details{margin-top:24px;padding-top:14px;border-top:1px solid #dce5eb}
.ux-details>.panel{background:none;border:0;border-radius:0;box-shadow:none;padding:20px 0}
summary{cursor:pointer;padding:8px 0;min-height:42px}
.ux-check{display:flex;gap:10px;align-items:center;margin:16px 0;line-height:1.5}
.ux-check input{width:20px;height:20px;flex:none}
#ux-dialog{position:fixed;inset:0;background:#162b4399;z-index:5000;display:flex;align-items:center;justify-content:center;padding:16px;overflow:auto}
#ux-dialog[hidden]{display:none}
#ux-dialog [hidden]{display:none!important}
.ux-archive{margin-top:20px;color:#934d43}
#ux-dialog .expense-dialog{border-radius:8px;max-height:90dvh;width:min(620px,100%)}
#ux-dialog input:disabled,#ux-dialog select:disabled{background:#edf0f2;color:#61707a}
.ux-home-links{display:flex;flex-wrap:wrap;gap:12px}
.ux-review{display:flex;align-items:center;gap:12px;flex-wrap:wrap;padding:12px 0;border-block:1px solid #e6d7b7;color:#74501b}
.ux-review>span{flex:1;min-width:150px}
.ux-card-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:24px}
.ux-card-cycle{padding:20px 0;border-bottom:1px solid #dce5eb;min-width:0}
.ux-card-total{font-size:30px;color:#226852;display:block;margin:10px 0 20px}
.ux-calculation{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:12px;margin:16px 0 24px}
.ux-calculation dt{color:#536679;overflow-wrap:anywhere}
.ux-calculation dd{margin:0;text-align:right;font-weight:700}
.ux-file{display:grid;gap:12px;padding:20px 0}
.ux-file input{width:100%;max-width:600px}
.ux-import-preview{border-top:1px solid #dce5eb;padding-top:20px}
.ux-import-preview h3{overflow-wrap:anywhere}
.ux-envelope{padding:18px 0;border-bottom:1px solid #dce5eb;display:flex;flex-wrap:wrap;align-items:center;gap:12px 24px}
.ux-envelope>.ux-heading{width:100%;margin-bottom:0}
.ux-envelope label{display:flex;align-items:center;gap:12px}
.ux-envelope span{color:#536679}
.ux-home .forecast-metric{order:1}
.ux-home .card-month-metric{order:2}
.ux-home .balance-metric{order:0}
.ux-month-envelope-table td{vertical-align:middle}
.ux-month-envelope-table .progress{margin-top:8px}
.ux-home .bank-kpis{align-items:start}
.ux-home .metric{min-height:0;border-radius:8px;box-shadow:none;padding:18px}
.ux-home .metric strong{font-size:29px;white-space:normal}
.ux-home .forecast-metric>.desktop-only{display:none!important}
.ux-home .forecast-metric details .mobile-only{display:block!important}
.ux-home .card-month-metric small:nth-of-type(n+3){display:none}
.ux-home .card-month-metric .card-link{margin-top:8px}
.ux-home .balance-metric small{line-height:1.5}
.ux-home .mobile-home-actions{display:flex;gap:12px}
.ux-home .mobile-home-actions button{display:flex;align-items:center;justify-content:center;gap:8px;background:#286be0;color:white;border:0;border-radius:8px;padding:14px 18px;font-weight:700}
.ux-home .mobile-home-actions button:first-child{background:#177661}
@media(max-width:720px){
 .month-strip>div{flex:1 1 100%}
 .month-strip>.pill{max-width:100%;white-space:normal}
 .ux-heading{align-items:flex-start}
 .ux-heading h2{font-size:21px}
 .ux-tabs button{font-size:13px;min-width:0;padding:12px 6px}
 .ux-charge-row{grid-template-columns:minmax(0,1fr) 44px;gap:8px}
 .ux-charge-row>div:nth-child(2){grid-column:1;text-align:left;display:flex;align-items:center;gap:8px;flex-wrap:wrap}
 .ux-charge-row>div:nth-child(2)>br{display:none}
 .ux-charge-row>.entry-edit{grid-column:2;grid-row:1/3}
 .ux-charge-row b{font-size:15px}
 .ux-totals{gap:16px}
 .ux-totals span{font-size:12px}
 .ux-totals b{font-size:18px}
 .ux-card-grid{grid-template-columns:1fr;gap:10px}
 .ux-card-cycle{padding:14px 0}
 .ux-card-cycle h3{font-size:20px}
 .ux-calculation{font-size:14px}
 .ux-home .mobile-home-actions{display:none}
 body.mobile-home #expense-fab,body.mobile-home #income-fab{display:flex!important}
 body.mobile-home .wrap{padding-bottom:calc(158px + env(safe-area-inset-bottom))}
 .ux-home .mobile-envelope-summary{min-height:0;padding:10px 12px;gap:3px}
 .ux-home .mobile-envelope-summary strong{font-size:26px}
 #app .ux-home .bank-kpis>.metric{padding:12px}
 #app .ux-home .bank-kpis>.forecast-metric strong,#app .ux-home .balance-metric strong{font-size:30px;margin:7px 0}
 #app .ux-home .bank-kpis>.forecast-metric{order:-2}
 #app .ux-home .bank-kpis>.balance-metric{order:-3}
 #app .ux-home .bank-kpis>.card-month-metric{order:1}
 #app .ux-home .card-month-metric strong{font-size:22px}
 #app .ux-home .forecast-metric details{padding-top:5px}
 .ux-home-links{display:none}
 .ux-envelope label{width:100%;justify-content:space-between}
 .ux-envelope>.ux-heading{font-size:14px;gap:8px}
 .ux-month-envelope-table{min-width:0;width:100%;display:block}
 .ux-month-envelope-table thead{display:none}
 .ux-month-envelope-table tbody{display:block}
 .ux-month-envelope-table tr{display:grid;grid-template-columns:1fr 1fr;gap:9px;padding:18px 0;border-bottom:1px solid #dce5eb}
 .ux-month-envelope-table td{display:flex;flex-direction:column;padding:0;border:0;text-align:left;gap:6px;min-width:0}
 .ux-month-envelope-table td:first-child{grid-column:1/-1;font-size:16px}
 .ux-month-envelope-table td:not(:first-child)::before{content:attr(data-label);font-size:12px;color:#536679}
 .ux-month-envelope-table input{width:100%!important}
 #app[data-screen=enveloppes] .scroll:has(.ux-month-envelope-table){max-height:none;overflow:visible}
 #ux-dialog{padding:10px}
 .ux-review .btn{width:100%}
}
@media(min-width:721px){body.mobile-home #expense-fab,body.mobile-home #income-fab{display:none!important}}
@media(max-width:360px){body>header h1{font-size:17px}body>header h1 span{display:none}body>header h1:before{flex-basis:26px;height:26px}}
@media print{.ux-tabs,.ux-home-links,.ux-review,#ux-dialog{display:none!important}}