/* Desktop layout (900px and wider). Loaded last so it overrides the
   phone layout above. */

/* ---------- desktop layout ----------
   Wide screens only; phones keep the single-column layout above. The
   bottom nav becomes a left sidebar and related cards sit side by side. */
@media (min-width: 900px){
  body{flex-direction:row;}
  .bottom-nav{
    order:-1; flex-direction:column; justify-content:flex-start; gap:4px;
    width:224px; padding:24px 12px; background:var(--paper-2);
    border-top:none; border-right:1px solid var(--line); backdrop-filter:none;
  }
  .nav-btn{
    flex-direction:row; gap:12px; width:100%; padding:10px 14px; border-radius:10px;
    font-size:14.5px; text-align:left;
  }
  .nav-badge{position:static; margin-left:auto; box-shadow:none;}
  .nav-btn .ic{width:22px; height:22px; flex-shrink:0;}
  .nav-btn:hover{color:var(--ink); background:rgba(255,255,255,.5);}
  .nav-btn.active{background:var(--white); box-shadow:0 1px 2px rgba(0,0,0,.08);}

  .app{max-width:1120px; padding:0 32px;}
  .expense-row, .bar-row .budget-edit{cursor:pointer;}

  #view-add.active, #view-history.active{max-width:720px;}

  #view-report.active{display:grid; grid-template-columns:1fr 1fr; column-gap:20px; align-items:start;}
  #view-report > .month-nav, #view-report > .quick-row, #view-report > .range-row{grid-column:1 / -1;}
  #view-report > .quick-row{max-width:560px;}
  #budgetCard{grid-column:1; grid-row:span 3;}
  #overCard{grid-column:1;}
  #paycheckCard, #momCard{grid-column:1 / -1;}

  #view-bills.active{display:grid; grid-template-columns:1fr 1fr; column-gap:20px; align-items:start;}
  #addBillCard{grid-column:1 / -1; max-width:560px;}
  #billTrendCard{grid-column:1 / -1;}

  #view-income.active{display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1.2fr); column-gap:20px; align-items:start;}
  #incAddCard{grid-column:1; grid-row:1 / span 5;}
  #view-income > :not(#incAddCard){grid-column:2;}

  #view-admin.active{display:grid; grid-template-columns:1.4fr 1fr; column-gap:20px; align-items:start;}

  /* bottom sheets become centered dialogs */
  .modal-bg{align-items:center; justify-content:center;}
  .modal{max-width:480px; border-radius:20px; padding:24px;}
  .modal-handle{display:none;}

  /* Reimbursements and Admin sit in the sidebar, your account at its foot;
     the menu opens as a small pop-up above it instead of a sheet. */
  .topbar .menu-btn{display:none;}
  .bottom-nav .desk-only{display:flex;}
  .nav-account{
    align-items:center; gap:10px; width:100%; margin-top:auto; padding:10px 12px;
    background:none; border:none; border-radius:10px; text-align:left;
    font-size:14.5px; font-weight:700; color:var(--ink);
  }
  .nav-account:hover{background:rgba(255,255,255,.5);}
  .nav-account .menu-avatar{width:30px; height:30px; font-size:13px;}
  .nav-account-name{min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;}
  #menuSheetBg{align-items:flex-end; justify-content:flex-start; background:transparent;}
  #menuSheetBg .modal{
    width:270px; margin:0 0 84px 12px; padding:14px; border-radius:14px;
    border:1px solid var(--line); box-shadow:0 10px 30px rgba(0,0,0,.18);
  }
  #menuPages{display:none !important;}
}