/* Shared device layouts. Keep financial operations and navigation handlers shared. */
html{scroll-padding-top:80px}
#appView .page,#adminApp main,#adminApp .card{min-width:0}
#appView #bottomNav{animation:none;box-sizing:border-box}
#appView .page input,#appView .page select,#appView .page textarea{max-width:100%;box-sizing:border-box}
#appView .dash-history-insights b,#appView .cash-wallet-user-head>strong{overflow-wrap:anywhere}
.flow-table-wrap{max-width:100%}

/* The existing navigation becomes a sidebar on wide screens. */
@media(min-width:1100px){
  #appView>.market-main{width:min(1380px,calc(100% - 220px));margin-right:220px;margin-left:auto;padding:28px 32px 40px!important;scroll-padding-bottom:40px}
  #appView #bottomNav{position:fixed;top:90px;right:16px;left:auto;bottom:24px;transform:none;width:188px;height:auto;display:flex;flex-direction:column;justify-content:flex-start;gap:10px;padding:16px 10px;border:1px solid var(--line);border-radius:18px;box-sizing:border-box}
  #appView #bottomNav button{flex:0 0 auto;width:100%;max-width:none;height:54px;display:flex;flex-direction:row;justify-content:flex-start;gap:12px;padding:12px;text-align:right}
  #appView #bottomNav button span{font-size:13px!important}
  #appView #bottomNav .ui-icon{flex-shrink:0;margin:0}
  #appView .mobile-buying-power{position:static!important;width:auto!important;max-width:none!important;margin:0 0 18px!important;transform:none!important}
  #appView #assets.active{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:20px}
  #appView #assets>.section-title,#appView #assets>#portfolioStatus{grid-column:1/-1}
  #appView #assets>.dash-chart-card{min-width:0;margin-top:0}
}

/* Tablet and narrow desktop windows retain navigation within easy reach. */
@media(min-width:1100px){
  #appView>.market-main:has(#home.active){padding:20px 24px 30px!important}
  #appView #home.active{grid-template-columns:minmax(0,1.1fr) minmax(0,1fr);gap:14px 18px;align-items:start}
  #appView #home>.dashboard-head{grid-column:1/-1;margin:0 0 2px}
  #appView #home>.dashboard-head h1{font-size:21px}
  #appView #home>.dashboard-head .eyebrow{margin-bottom:3px}
  #appView #home>.dashboard-head p{font-size:11px;margin-top:2px}
  #appView #home>.dash-main-card{grid-column:1;align-self:stretch;min-width:0;padding:20px!important;border-radius:17px!important}
  #appView #home .dash-main-icon{width:36px;height:36px;flex-basis:36px;border-radius:11px}
  #appView #home .dash-main-top span{font-size:13px!important}
  #appView #home .dash-main-top small{font-size:11px!important}
  #appView #home .dash-main-top em{display:none!important}
  #appView #home .dash-capital-row{grid-template-columns:minmax(0,1.55fr) minmax(0,1fr);gap:14px;margin-top:16px}
  #appView #home .dash-total-wrap strong{font-size:32px!important;line-height:1.3!important;white-space:nowrap;overflow-wrap:normal}
  #appView #home .dash-capital-row .dash-performance-result{display:grid!important;align-items:center;justify-items:stretch;gap:5px!important;text-align:left}
  #appView #home .dash-capital-row .dash-performance-result>div{width:100%;max-width:100%;white-space:nowrap}
  #appView #home .dash-performance-pct{font-size:19px!important}
  #appView #home .dash-performance-amount{font-size:11px!important}
  #appView #home>.dashboard-quick-actions{grid-column:2;align-self:stretch;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;margin:0;min-width:0}
  #appView #home .dashboard-quick-actions>.quick-banner{min-width:0;min-height:86px;padding:11px 13px;border-radius:13px;grid-template-columns:minmax(0,1fr) 38px}
  #appView #home .dashboard-quick-actions>.quick-banner>.quick-banner-art{width:38px;height:44px}
  #appView #home .dashboard-quick-actions>.quick-banner>b{font-size:12px;line-height:1.6}
  #appView #home .dashboard-quick-actions>.quick-banner>small{font-size:9px;line-height:1.6}
  #appView #home>.madsarmaye-banner-wrap{grid-column:1;margin:0;padding:0;min-width:0;border-radius:14px}
  #appView #home .madsarmaye-banner-label{margin-bottom:8px}
  #appView #home .madsarmaye-banner-viewport{padding-bottom:26px}
  #appView #home .madsarmaye-banner-slide{border-radius:14px}
  #appView #home>#dashboardNewsStrip{grid-column:2;min-width:0;margin:0;padding:14px;border-radius:14px}
  #appView #home .dashboard-news-headlines{max-height:192px}
  #appView #home>.dashboard-footnote{grid-column:1/-1;margin:0;padding:4px 0;font-size:10px}
}

@media(min-width:651px) and (max-width:1099px){
  #appView>.market-main{width:100%;padding-inline:24px!important}
  #appView .market-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  #appView .dashboard-quick-actions{grid-template-columns:repeat(2,minmax(0,1fr))}
  #appView #bottomNav{left:0;right:0;margin-inline:auto;transform:none;width:min(780px,calc(100% - 32px))}
}

@media(max-width:700px){
  #appView>.market-main{padding-bottom:calc(160px + env(safe-area-inset-bottom))!important;scroll-padding-bottom:160px}
  #appView #bottomNav{box-sizing:border-box;height:calc(76px + env(safe-area-inset-bottom));padding-bottom:calc(7px + env(safe-area-inset-bottom))}
  #appView input,#appView select,#appView textarea,#loginView input,#loginView select,#loginView textarea,#adminApp input,#adminApp select,#adminApp textarea,.audit-responsive input,.audit-responsive select{font-size:16px!important}
  #appView button:not(.madsarmaye-banner-dot):not(.monthly-sim-presets button),#adminApp .ghost,#adminApp .primary{min-height:44px}
  #appView .quick-action small,#appView .dash-history-insights span,#appView .market-card-top span,#appView .dash-performance-amount{font-size:11px!important;line-height:1.7}
  #appView .dash-range-tabs{flex-wrap:wrap;max-width:100%}
  #appView .dash-range-tabs button{flex:1 1 auto;font-size:11px}
  #appView .section-title{gap:10px;flex-wrap:wrap}
  #appView .bank-account-lines span{flex-wrap:wrap}
  #appView .bank-account-lines b{overflow-wrap:anywhere;min-width:0;max-width:100%}
  .modal:not(.image-modal):not(.growth-simulator-dialog){padding:10px;align-items:flex-end}
  .modal:not(.image-modal):not(.growth-simulator-dialog)>.modal-card{box-sizing:border-box;width:100%;max-width:100%;max-height:calc(100dvh - 20px);overflow:auto;overscroll-behavior:contain;padding:48px 16px max(20px,env(safe-area-inset-bottom));border-radius:20px 20px 12px 12px}
  .modal:not(.image-modal)>.modal-card>.close{min-width:44px;min-height:44px;top:2px;left:8px;z-index:2}
  #adminApp .admin-chart-row{grid-template-columns:minmax(0,1fr) minmax(70px,1fr);gap:8px}
  #adminApp .admin-chart-row>strong{grid-column:1/-1;text-align:start;font-size:12px;white-space:normal;overflow-wrap:anywhere}
  #adminApp .admin-chart-label b,#adminApp .admin-chart-label small{font-size:11px}
  .flow-filters{grid-template-columns:repeat(2,minmax(0,1fr))}
  .flow-table{min-width:0;white-space:normal}
  .flow-table thead{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%)}
  .flow-table,.flow-table tbody{display:block;width:100%}
  .flow-table tbody tr{display:block;margin:12px 0;padding:10px;border:1px solid #dfe9e2;border-radius:12px;background:#fff}
  .flow-table td{display:grid;grid-template-columns:minmax(90px,1fr) minmax(0,2fr);gap:12px;padding:10px 4px;overflow-wrap:anywhere}
  .flow-table td:before{content:attr(data-label);font-weight:600;color:#53675e}
  .flow-table td[colspan]{display:block}
  .flow-table td[colspan]:before{content:none}
  .flow-table td:last-child{border-bottom:0}
  body.audit-responsive{padding:12px}
  .audit-responsive .filters{grid-template-columns:repeat(2,minmax(0,1fr))}
  .audit-responsive .filters>*{min-width:0;max-width:100%;box-sizing:border-box}
  .audit-responsive #logs>.row:first-child{display:none}
  .audit-responsive #logs>.row{min-width:0;grid-template-columns:1fr;gap:0;padding:12px;margin-bottom:12px;border:1px solid #dce2e8;border-radius:12px}
  .audit-responsive #logs>.row>span{display:grid;grid-template-columns:75px minmax(0,1fr);gap:12px;padding:9px 0;overflow-wrap:anywhere}
  .audit-responsive #logs>.row>span:before{content:attr(data-label);color:#71808f;font-size:12px}
}
@media(max-width:380px){
  #appView .dash-history-insights{grid-template-columns:1fr}
  #appView .dash-history-insights>div{display:flex;justify-content:space-between;gap:10px;align-items:center}
  #appView .dash-history-insights b{max-width:65%;text-align:end}
  .flow-filters{grid-template-columns:1fr}
}
/* Asset details stay within the viewport, with the invoice scrolling inside. */
#modal:not(.image-modal)>.modal-card:has(.asset-detail-hero){box-sizing:border-box;width:calc(100vw - 32px)!important;max-width:760px!important;max-height:calc(100dvh - 32px)!important;padding:44px 18px 18px!important;overflow:auto;min-width:0;border-radius:18px!important}
#modal #modalBody:has(.asset-detail-hero) .asset-detail-hero{gap:10px!important;padding:0 0 10px!important}
#modal #modalBody:has(.asset-detail-hero) .asset-detail-hero>div:last-child{min-width:0}
#modal #modalBody:has(.asset-detail-hero) .asset-detail-icon{width:44px!important;height:44px!important;font-size:24px!important;flex:none;border-radius:12px}
#modal #modalBody:has(.asset-detail-hero) .asset-detail-icon img{width:28px;height:28px}
#modal #modalBody:has(.asset-detail-hero) .asset-detail-hero h3{font-size:18px!important;line-height:1.7;overflow-wrap:anywhere}
#modal #modalBody:has(.asset-detail-hero) .asset-detail-hero .asset-detail-owner{font:inherit!important;color:inherit}
#modal #modalBody:has(.asset-detail-hero) .asset-detail-hero span,#modal #modalBody:has(.asset-detail-hero) .asset-detail-hero small{font-size:11px!important}
#modal #modalBody:has(.asset-detail-hero) .asset-detail-grid{grid-template-columns:repeat(3,minmax(0,1fr));gap:7px!important;margin:10px 0!important}
#modal #modalBody:has(.asset-detail-hero) .asset-detail-grid div{padding:9px!important;border-radius:10px!important;min-width:0}
#modal #modalBody:has(.asset-detail-hero) .asset-detail-grid span{font-size:10px!important;margin-bottom:4px!important}
#modal #modalBody:has(.asset-detail-hero) .asset-detail-grid b{font-size:12px!important;overflow-wrap:anywhere}
#modal #modalBody:has(.asset-detail-hero) .asset-invoice-inline{padding:8px!important;border-radius:12px!important;min-width:0;max-width:100%;box-sizing:border-box}
#modal #modalBody:has(.asset-detail-hero) .invoice-inline-head{padding:7px!important;flex-wrap:wrap;gap:6px;font-size:12px!important}
#modal #modalBody:has(.asset-detail-hero) .invoice-inline-head b{font-size:13px!important}
#modal #modalBody:has(.asset-detail-hero) .invoice-inline-head small,#modal #modalBody:has(.asset-detail-hero) .invoice-page-label{font-size:11px!important}
#modal #modalBody:has(.asset-detail-hero) .invoice-table{min-width:680px!important;font-size:11px!important}
#modal #modalBody:has(.asset-detail-hero) .invoice-table th,#modal #modalBody:has(.asset-detail-hero) .invoice-table td{padding:7px 5px!important;font-size:11px!important}
#modal #modalBody:has(.asset-detail-hero) .invoice-status{font-size:10px!important;padding:3px 5px!important}
#modal #modalBody:has(.asset-detail-hero) .invoice-summary{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:6px;margin-top:8px}
#modal #modalBody:has(.asset-detail-hero) .invoice-summary>div{padding:7px}
#modal #modalBody:has(.asset-detail-hero) .invoice-summary span{font-size:10px!important}
#modal #modalBody:has(.asset-detail-hero) .invoice-summary b{font-size:12px!important;overflow-wrap:anywhere}
#modal #modalBody:has(.asset-detail-hero) .asset-detail-actions{grid-template-columns:1fr auto;gap:8px}
#modal #modalBody:has(.asset-detail-hero) .asset-detail-actions button{font-size:12px;padding:10px 14px;min-height:44px}
@media(max-width:600px){
  #modal:not(.image-modal)>.modal-card:has(.asset-detail-hero){width:calc(100vw - 20px)!important;max-height:calc(100dvh - 20px)!important;padding:44px 12px 12px!important}
  #modal #modalBody:has(.asset-detail-hero) .asset-detail-hero h3{font-size:16px!important}
  #modal #modalBody:has(.asset-detail-hero) .asset-detail-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  #modal #modalBody:has(.asset-detail-hero) .asset-detail-actions{grid-template-columns:1fr}
}
/* Keep the account page compact and centered on wide screens. */
#appView #profile{width:100%;max-width:720px;margin-inline:auto;min-width:0;box-sizing:border-box}
#appView #profile .profile-identity-card{padding:10px 12px;gap:10px;border-radius:14px;margin-bottom:10px}
#appView #profile .profile-avatar{width:40px;height:40px;border-radius:12px}
#appView #profile .profile-avatar img{width:25px;height:25px}
#appView #profile .profile-identity-main strong{font-size:15px;line-height:1.6;overflow-wrap:anywhere}
#appView #profile .profile-identity-main span{font-size:10px;margin-top:2px}
#appView #profile .profile-identity-status{padding:5px 8px;min-width:54px}
#appView #profile .profile-account-grid{grid-template-columns:repeat(4,minmax(0,1fr));gap:8px}
#appView #profile .profile-account-card{width:100%;height:100%;min-width:0;min-height:92px;padding:9px 6px;box-sizing:border-box;border-radius:12px!important}
#appView #profile .profile-card-icon{width:32px;height:32px;border-radius:10px;margin-bottom:5px}
#appView #profile .profile-card-icon img{width:20px;height:20px}
#appView #profile .profile-card-title{font-size:12px!important;line-height:1.6;overflow-wrap:anywhere}
#appView #profile .profile-account-card small{font-size:10px!important;line-height:1.6;margin-top:2px;overflow-wrap:anywhere}
#appView #profile .profile-extra-info{gap:8px;margin-top:8px}
#appView #profile .profile-extra-info>div{padding:9px 10px;min-width:0;border-radius:12px}
#appView #profile .profile-extra-info span,#appView #profile .profile-extra-info b{font-size:11px}
@media(max-width:650px){
  #appView #profile .profile-account-grid{grid-template-columns:repeat(3,minmax(0,1fr));gap:6px}
  #appView #profile .profile-account-card{min-height:86px;padding:8px 5px}
  #appView #profile .profile-card-title{font-size:11px!important}
  #appView #profile .profile-account-card small{font-size:9px!important}
  #appView #profile .profile-identity-main strong{font-size:14px}
}
@media(max-width:350px){
  #appView #profile .profile-account-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  #appView #profile .profile-extra-info{grid-template-columns:1fr}
}
/* Compact personal welcome on desktop and mobile. */
#appView #home>.dashboard-head{margin:0 0 8px;gap:6px}
#appView #home>.dashboard-head .eyebrow{font-size:9px;margin-bottom:2px}
#appView #home>.dashboard-head h1{font-size:18px;line-height:1.5;letter-spacing:-.3px}
#appView #home>.dashboard-head p{font-size:10px;line-height:1.6;margin-top:2px}
@media(max-width:650px){
  #appView #home>.dashboard-head{margin-bottom:6px}
  #appView #home>.dashboard-head h1{font-size:16px}
  #appView #home>.dashboard-head p{font-size:9px}
}
@media(max-height:500px) and (max-width:950px){
  .modal:not(.image-modal)>.modal-card{max-height:calc(100dvh - 12px)}
}

/* Keep each desktop dashboard card in its intended column. */
@media(min-width:900px){
  #appView #home.active{grid-template-areas:"heading heading" "capital actions" "notice actions" "banners news" "updated updated";align-items:start;row-gap:14px}
  #appView #home>.dashboard-head{grid-area:heading}
  #appView #home>.dash-main-card{grid-area:capital}
  #appView #home>#dashboardFundNotice{grid-area:notice;margin:0;min-width:0}
  #appView #home>.dashboard-quick-actions{grid-area:actions;grid-template-columns:repeat(2,minmax(0,1fr));margin:0;min-width:0}
  #appView #home>.madsarmaye-banner-wrap{grid-area:banners;margin:0;min-width:0}
  #appView #home>#dashboardNewsStrip{grid-area:news;margin:0;min-width:0}
  #appView #home>.dashboard-footnote{grid-area:updated}
}