/* Budget App responsive fixes — current UI selectors */

*,*::before,*::after{box-sizing:border-box!important}
html,body{max-width:100%!important;overflow-x:hidden!important}
img,svg,canvas{max-width:100%}
.shell,.header,.period,.account,.menu,main,.view,.summary,.toolbar,.grid2,.panel,.entries,.entry,.spend-form,.list,.spend-row,.bottom{min-width:0!important;max-width:100%!important}
.shell,main,.view,.panel{overflow-x:hidden!important}
input,select,textarea,button{max-width:100%!important;min-width:0}

/* DESKTOP — income left, expenses right */
@media(min-width:951px){
  .grid2{
    display:grid!important;
    grid-template-columns:minmax(0,1fr) minmax(0,1fr)!important;
    gap:16px!important;
    align-items:start!important;
  }
  .grid2>.panel{width:auto!important;min-width:0!important;margin:0!important}

  .header{
    grid-template-columns:minmax(170px,auto) minmax(360px,1fr) minmax(170px,auto)!important;
  }
  .period{justify-self:center!important;max-width:520px!important;width:auto!important}
  .account{justify-self:end!important;min-width:0!important;max-width:260px!important}
  .account>button{min-width:0!important;max-width:100%!important}
  .email-mini{display:block!important;max-width:180px!important;overflow:hidden!important;text-overflow:ellipsis!important;white-space:nowrap!important}
}

/* Keep left desktop navigation from becoming a floating bottom overlay */
@media(min-width:1180px){
  .bottom{
    left:24px!important;
    right:auto!important;
    top:24px!important;
    bottom:auto!important;
    transform:none!important;
    width:220px!important;
    max-width:220px!important;
    grid-template-columns:1fr!important;
  }
}

/* TABLET */
@media(min-width:641px) and (max-width:950px){
  .header{grid-template-columns:auto minmax(0,1fr) auto!important}
  .period{justify-self:stretch!important;width:100%!important}
  .email-mini{max-width:140px!important;overflow:hidden!important;text-overflow:ellipsis!important;white-space:nowrap!important}
  .bottom{max-width:calc(100vw - 20px)!important}
}

/* MOBILE */
@media(max-width:640px){
  .shell{width:100%!important;max-width:100vw!important;padding:7px 7px 96px!important}

  .header{
    width:100%!important;
    max-width:100%!important;
    grid-template-columns:44px minmax(0,1fr) 44px!important;
    gap:6px!important;
    padding:6px!important;
    overflow:visible!important;
  }
  .brand{width:44px!important;min-width:44px!important;max-width:44px!important;overflow:hidden!important}
  .brand>span{display:none!important}
  .brand .logo-b{width:38px!important;height:38px!important;min-width:38px!important;margin:0 auto!important}

  .period{
    width:100%!important;
    max-width:100%!important;
    min-width:0!important;
    justify-self:stretch!important;
    display:grid!important;
    grid-template-columns:30px minmax(0,1fr) minmax(0,1fr) 30px!important;
    gap:3px!important;
    padding:2px!important;
    overflow:hidden!important;
  }
  .period button{width:30px!important;height:30px!important;min-width:30px!important;padding:0!important}
  .period select{width:100%!important;min-width:0!important;max-width:100%!important;font-size:11px!important;padding:4px 2px!important;text-align:center!important}

  .account{width:44px!important;min-width:44px!important;max-width:44px!important;justify-self:end!important}
  .account>button{width:44px!important;height:44px!important;min-width:44px!important;max-width:44px!important;padding:0!important;justify-content:center!important}
  .avatar{width:38px!important;height:38px!important}
  .email-mini,.caret{display:none!important}
  .menu{
    position:absolute!important;
    right:0!important;
    left:auto!important;
    width:min(250px,calc(100vw - 18px))!important;
    min-width:0!important;
    max-width:calc(100vw - 18px)!important;
    overflow:hidden!important;
  }
  .menu .mail{max-width:100%!important;overflow:hidden!important;text-overflow:ellipsis!important;white-space:nowrap!important}

  /* Spending form: first row description+amount, then category and add button full width */
  .spend-form{
    width:100%!important;
    max-width:100%!important;
    display:grid!important;
    grid-template-columns:minmax(0,1fr) 92px!important;
    gap:8px!important;
    overflow:hidden!important;
  }
  .spend-form>*{width:100%!important;min-width:0!important;max-width:100%!important}
  .spend-form select,.spend-form button{grid-column:1/-1!important}
  .spend-form .primary{width:100%!important}

  /* Budget rows */
  .entry{width:100%!important;max-width:100%!important;grid-template-columns:minmax(0,1fr) 92px!important}
  .entry>*{min-width:0!important;max-width:100%!important}
  .entry input,.entry select{width:100%!important;min-width:0!important}
  .entry-actions{max-width:100%!important;display:flex!important;flex-wrap:wrap!important;justify-content:flex-end!important;gap:6px!important}
  .entry-actions select{width:auto!important;max-width:100%!important;flex:1 1 150px!important}
  .entry-actions button{flex:0 0 auto!important}

  /* Summary cards cannot force viewport width */
  .summary{width:100%!important;max-width:100%!important;grid-template-columns:repeat(2,minmax(0,1fr))!important}
  .summary>.sum{min-width:0!important;width:auto!important}
  .summary>.sum.av{grid-column:1/-1!important}

  .panel{width:100%!important;max-width:100%!important;padding:13px!important}
  .toolbar{width:100%!important;max-width:100%!important;grid-template-columns:minmax(0,1fr) 90px!important}
  .toolbar>*{min-width:0!important}
  .tool-actions{grid-column:1/-1!important;max-width:100%!important;display:flex!important;flex-wrap:wrap!important;justify-content:flex-end!important}

  /* Bottom navigation */
  .bottom{
    left:7px!important;
    right:7px!important;
    transform:none!important;
    width:auto!important;
    max-width:calc(100vw - 14px)!important;
    grid-template-columns:repeat(4,minmax(0,1fr))!important;
    overflow:hidden!important;
  }
  .nav{min-width:0!important;max-width:100%!important;overflow:hidden!important}
  .nav span{max-width:100%!important;overflow:hidden!important;text-overflow:ellipsis!important}
}

@media(max-width:390px){
  .header{grid-template-columns:40px minmax(0,1fr) 40px!important;padding:5px!important}
  .brand,.account{width:40px!important;min-width:40px!important;max-width:40px!important}
  .brand .logo-b,.avatar{width:34px!important;height:34px!important;min-width:34px!important}
  .account>button{width:40px!important;height:40px!important;min-width:40px!important;max-width:40px!important}
  .period{grid-template-columns:28px minmax(0,1fr) minmax(0,1fr) 28px!important}
  .period button{width:28px!important;height:28px!important;min-width:28px!important}
  .spend-form{grid-template-columns:minmax(0,1fr) 80px!important}
  .entry{grid-template-columns:minmax(0,1fr) 82px!important}
}