/* Signed-in layout: a left sidebar and the page on the right. Used by every page whose <body class="app">. */
body.app{display:grid;grid-template-columns:264px minmax(0,1fr);min-height:100vh;background:#F6F8FD}

/* ---- sidebar ---- */
.sidebar{position:sticky;top:0;height:100vh;display:flex;flex-direction:column;background:var(--navy);color:#C9D6F5;padding:1.4rem 1rem 1rem;overflow-y:auto}
.sidebar .logo{display:block;color:#fff;font-size:1.3rem;padding:.2rem .6rem 1.4rem}
.sidebar .logo span{color:#8FB3FF}
.side-label{font-size:.75rem;letter-spacing:.08em;text-transform:uppercase;color:#7E92C4;padding:.9rem .8rem .4rem}
.side-link{display:flex;align-items:center;gap:.8rem;padding:.65rem .8rem;border-radius:10px;color:#C9D6F5;font-weight:500;margin-bottom:.15rem}
.side-link svg{width:19px;height:19px;flex:none;stroke:currentColor;fill:none;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.side-link:hover{background:rgba(255,255,255,.08);color:#fff}
.side-link.active{background:var(--blue);color:#fff}
.side-foot{margin-top:auto;padding-top:1.2rem}
.side-balance{display:block;background:rgba(255,255,255,.08);border-radius:12px;padding:.8rem 1rem;margin-bottom:.8rem;color:#C9D6F5}
.side-balance span{display:block;font-size:.8rem;color:#9FB2E6}
.side-balance strong{font:800 1.35rem var(--head);color:#fff}
.side-user{display:flex;align-items:center;justify-content:space-between;gap:.6rem;padding:.2rem .4rem}
.side-user #navUser{font-weight:600;color:#fff;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.side-user button{background:transparent;color:#C9D6F5;border:1.5px solid rgba(255,255,255,.25);border-radius:8px;padding:.35rem .8rem;font:600 .9rem var(--body);cursor:pointer}
.side-user button:hover{background:#fff;color:var(--navy)}

/* ---- page area ---- */
.app-content{min-width:0}
.app-topbar{display:none}
main.app-main{max-width:1120px;margin:0 auto;padding:2.2rem 2rem 4rem}
.app-scrim{display:none}

main.app-main .auth-sub{margin:.3rem 0 1.3rem}

/* ---- dashboard overview ---- */
.hero-card{background:linear-gradient(135deg,var(--navy),#16357E);color:#fff;border-radius:16px;padding:1.8rem 2rem;display:flex;justify-content:space-between;align-items:center;gap:1.5rem;flex-wrap:wrap;margin:1.2rem 0 1.5rem}
.hero-card span{color:#B9CBF5;font-size:.9rem}
.hero-card strong{display:block;font:800 2.6rem var(--head);line-height:1.1}
.hero-card .row-actions{margin-top:0}
.stat-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:1rem;margin-bottom:1.5rem}
.stat{background:#fff;border:1px solid var(--line);border-radius:var(--r);padding:1.1rem 1.2rem}
.stat span{display:block;color:var(--muted);font-size:.85rem}
.stat strong{font:800 1.7rem var(--head);color:var(--navy)}
.notice{background:#FFF7E0;border:1px solid #F3D88A;color:#6B4E00;border-radius:var(--r);padding:.8rem 1rem;margin-bottom:1.2rem;display:flex;justify-content:space-between;align-items:center;gap:1rem;flex-wrap:wrap}
.notice button{background:#fff;border:1.5px solid #E0B94A;border-radius:8px;padding:.3rem .8rem;font:600 .9rem var(--body);cursor:pointer;color:#6B4E00}
.panel-head{display:flex;justify-content:space-between;align-items:baseline;gap:1rem}
.panel-head a{color:var(--blue);font-weight:600}

/* ---- phones and small windows ---- */
@media(max-width:1180px){body.app .dash-grid{grid-template-columns:1fr}}
@media(max-width:900px){
  body.app{grid-template-columns:minmax(0,1fr)}
  .sidebar{position:fixed;inset:0 auto 0 0;width:min(290px,84vw);height:100vh;z-index:80;transform:translateX(-102%);transition:transform .22s ease}
  body.nav-open .sidebar{transform:none}
  body.nav-open .app-scrim{display:block;position:fixed;inset:0;background:rgba(11,31,75,.5);z-index:70}
  .app-topbar{display:flex;align-items:center;justify-content:space-between;position:sticky;top:0;z-index:60;background:#fff;border-bottom:1px solid var(--line);padding:.7rem 1rem}
  .app-topbar .logo{font-size:1.2rem;white-space:nowrap}
  .app-burger{background:none;border:0;cursor:pointer;padding:.7rem .6rem;margin:-.4rem 0 -.4rem -.6rem;min-width:44px;min-height:44px;-webkit-tap-highlight-color:transparent}
  .app-burger span{display:block;width:24px;height:2px;background:var(--navy);margin:5px 0}
  .app-topbar b{color:var(--navy);font:700 1rem var(--body)}
  main.app-main{padding:1.4rem 1rem 3rem}
  .stat-grid{grid-template-columns:repeat(2,1fr)}
  .hero-card strong{font-size:2.1rem}
}