/* Android phones and narrow tablet portrait layouts. */
.mobile-nav{display:none}

@media(max-width:820px){
  body{overflow-x:hidden;touch-action:pan-y}
  .app-shell,.workspace{min-width:0;width:100%;margin-left:0}
  .sidebar{position:fixed;top:env(safe-area-inset-top,0px);bottom:0;left:0;width:min(300px,88vw);padding:22px 16px max(18px,env(safe-area-inset-bottom,0px));overflow-y:auto;overscroll-behavior:contain;transform:translateX(-105%);transition:transform .2s ease;z-index:25}
  .sidebar.open{transform:translateX(0)}
  .sidebar-overlay.show{display:block;position:fixed;inset:0;background:#17251f70;z-index:24}
  .mobile-menu{display:inline-flex;min-width:44px;min-height:44px;margin:0 7px 0 -7px}
  .topbar{position:sticky;top:0;z-index:20;height:calc(62px + env(safe-area-inset-top,0px));padding:env(safe-area-inset-top,0px) 16px 0;background:color-mix(in srgb,var(--panel) 94%,transparent);backdrop-filter:blur(12px)}
  .topbar-tools{gap:6px;min-width:0}
  .breadcrumbs{gap:6px;min-width:0;font-size:10px}
  .breadcrumbs>svg,.breadcrumbs strong,.topbar-divider,.global-search .keycap{display:none}
  .breadcrumbs span{max-width:25vw;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:var(--text)}
  .global-search{width:clamp(92px,27vw,160px);gap:5px}
  .global-search input{width:100%;font-size:14px}
  .topbar-tools .icon-button,.topbar-tools .avatar{min-width:40px;min-height:40px}
  .main-content{padding:22px 20px calc(104px + env(safe-area-inset-bottom,0px));}
  .mobile-nav{position:fixed;inset:auto 0 0;z-index:30;display:grid;grid-template-columns:repeat(5,minmax(0,1fr));align-items:center;min-height:68px;padding:7px max(10px,env(safe-area-inset-right,0px)) max(7px,env(safe-area-inset-bottom,0px)) max(10px,env(safe-area-inset-left,0px));border-top:1px solid var(--line);background:color-mix(in srgb,var(--panel) 94%,transparent);backdrop-filter:blur(16px);box-shadow:0 -8px 24px #17251f0c}
  .mobile-nav-links{display:contents}
  .mobile-nav-item{display:flex;min-width:0;min-height:48px;align-items:center;justify-content:center;flex-direction:column;gap:3px;padding:4px 2px;border-radius:10px;background:transparent;color:var(--muted);font-size:9px;font-weight:600;line-height:1.1;touch-action:manipulation}
  .mobile-nav-item.active{color:var(--mint-dark);background:var(--soft)}
  .mobile-nav-item:focus-visible,.mobile-nav-add:focus-visible{outline-offset:2px}
  .mobile-nav-add{width:48px;height:48px;min-width:48px;min-height:48px;display:grid;place-items:center;justify-self:center;border-radius:16px;background:#213b2c;color:#fff;box-shadow:0 5px 16px #213b2c30;touch-action:manipulation}
  .dark .mobile-nav-add{background:#bdebc9;color:#25422e}
  .stats-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
  .dashboard-charts,.dashboard-bottom{grid-template-columns:minmax(0,1fr);gap:16px}
  .page-header{align-items:flex-start;gap:14px}
  .header-actions{max-width:none;min-width:0;flex-wrap:wrap;justify-content:flex-end;gap:8px}
  .header-actions .button{min-height:44px}
  .page-footer{gap:12px;flex-wrap:wrap}
  .grid-2,.grid-3{grid-template-columns:repeat(2,minmax(0,1fr))}
  .table-wrap{-webkit-overflow-scrolling:touch;overscroll-behavior-x:contain}
  .modal-backdrop{align-items:flex-start;overflow-y:auto;padding:12px 12px max(16px,env(safe-area-inset-bottom,0px))}
  .modal{width:min(100%,720px);max-height:calc(100dvh - 24px - env(safe-area-inset-top,0px));overflow-y:auto;overscroll-behavior:contain}
  #toast-root{right:12px;bottom:calc(78px + env(safe-area-inset-bottom,0px));left:12px}
  .toast{justify-content:center;text-align:center}
}

@media(max-width:600px){
  .topbar{padding-left:12px;padding-right:12px}
  .topbar-left{min-width:0}
  .mobile-menu{margin-right:3px}
  .breadcrumbs span{max-width:20vw}
  .main-content{padding:20px 16px calc(104px + env(safe-area-inset-bottom,0px))}
  .page-header{flex-direction:column;gap:12px}
  .page-intro p{max-width:none}
  .header-actions{width:100%;justify-content:flex-start}
  .period-control{min-height:42px}
  .header-actions .period-control{flex:1;min-width:0;justify-content:space-between}
  .header-actions .period-control select{flex:1;min-width:0}
  .header-actions .button{flex:1 1 auto}
  .grid-2,.grid-3,.goals-list{grid-template-columns:minmax(0,1fr)}
  .stats-grid .stat-card{min-width:0;padding:14px}
  .stats-grid .stat-value{font-size:clamp(15px,5vw,22px);overflow-wrap:anywhere}
  .stats-grid .stat-label{font-size:9px}
  .panel{padding:17px}
  .transactions-panel{padding:18px 0 8px}
  input,select,textarea{min-height:44px;font-size:16px}
  button,.button{touch-action:manipulation}
  #toast-root{font-size:14px}
}

@media(max-width:380px){
  .topbar{gap:4px}
  .topbar-tools{gap:2px}
  .global-search{width:clamp(80px,25vw,100px)}
  .topbar-tools .icon-button,.topbar-tools .avatar{min-width:36px;min-height:36px}
  .main-content{padding-right:12px;padding-left:12px}
  .mobile-nav{padding-right:6px;padding-left:6px}
  .mobile-nav-item{font-size:8px}
  .page-intro h1{font-size:21px}
}

/* Short landscape phones need the same reachable navigation as portrait phones. */
@media(max-height:520px) and (orientation:landscape){
  .sidebar{position:fixed;top:env(safe-area-inset-top,0px);bottom:0;left:0;width:min(300px,55vw);padding:16px 14px;overflow-y:auto;transform:translateX(-105%);z-index:25}
  .sidebar.open{transform:translateX(0)}
  .sidebar-overlay.show{display:block;position:fixed;inset:0;background:#17251f70;z-index:24}
  .workspace{width:100%;margin-left:0}
  .mobile-menu{display:inline-flex;min-width:42px;min-height:42px}
  .topbar{position:sticky;top:0;height:54px;padding:0 20px}
  .mobile-nav{display:grid}
  .main-content{padding:16px 22px calc(96px + env(safe-area-inset-bottom,0px))}
  .page-header{flex-direction:row;align-items:center}
  .header-actions{width:auto;justify-content:flex-end}
  .stats-grid{grid-template-columns:repeat(4,minmax(0,1fr));gap:10px}
  .dashboard-charts,.dashboard-bottom{grid-template-columns:minmax(0,1.5fr) minmax(240px,1fr);gap:14px}
  .grid-2,.grid-3{grid-template-columns:repeat(2,minmax(0,1fr))}
  .goals-list{grid-template-columns:repeat(2,minmax(0,1fr))}
  .modal-backdrop{align-items:flex-start;overflow-y:auto;padding-top:10px}
  .modal{max-height:calc(100dvh - 20px);overflow-y:auto}
}

@media(prefers-reduced-motion:reduce){.sidebar,.mobile-nav-item,.mobile-nav-add{transition:none}}