/* ============================================================================
   layout.css — structural layout, mobile-first.
   Phone  : single column; sidebar is an off-canvas drawer.
   ≥64rem : persistent sidebar + content grid.
   ========================================================================== */

/* ---------- LOGIN (clean, centered) ---------- */
.auth{min-height:100vh;display:flex;flex-direction:column;
  background:linear-gradient(180deg,var(--surface-2),#eceef2)}
.auth-top{display:flex;align-items:center;gap:12px;padding:16px 18px;background:var(--surface);border-bottom:1px solid var(--line)}
.auth-main{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:flex-start;padding:26px 16px 40px}
.auth-card{width:100%;max-width:468px;background:var(--surface);border:1px solid var(--line);
  border-radius:10px;box-shadow:var(--shadow);padding:24px}
.auth-legal{font-size:11px;color:var(--text-3);text-align:center;margin-top:18px;letter-spacing:.3px}
@media (min-width:48rem){ .auth-main{justify-content:center;padding:40px 16px} .auth-card{padding:30px} }

/* ---------- APP SHELL ---------- */
.app{min-height:100vh;display:flex;flex-direction:column}
.backdrop{position:fixed;inset:0;background:rgba(16,26,43,.5);z-index:40;display:none}
.backdrop.show{display:block}

.sidebar{
  position:fixed;top:0;left:0;height:100vh;width:var(--sidebar-w);z-index:50;
  transform:translateX(-100%);transition:transform .2s ease;
  background:linear-gradient(180deg,#132135,#0c1524);color:#cdd7e5;
  display:flex;flex-direction:column;
}
.sidebar.open{transform:translateX(0)}

.main{display:flex;flex-direction:column;min-width:0;flex:1}
.content{padding:18px;width:100%;max-width:var(--content-max);margin:0 auto}
@media (min-width:48rem){ .content{padding:26px} }

@media (min-width:64rem){
  .app{display:grid;grid-template-columns:var(--sidebar-w) 1fr}
  .sidebar{position:sticky;transform:none;transition:none}
  .backdrop{display:none !important}
  .hamburger{display:none !important}
}

/* ---------- TOPBAR ---------- */
.topbar{
  position:sticky;top:0;z-index:20;height:var(--topbar-h);
  background:var(--surface);border-bottom:1px solid var(--line);
  display:flex;align-items:center;justify-content:space-between;gap:12px;padding:0 16px;
}
@media (min-width:48rem){ .topbar{padding:0 26px} }
.hamburger{display:inline-grid;place-items:center;width:38px;height:38px;border:1px solid var(--line);border-radius:var(--radius);background:var(--surface);color:var(--text-2)}
.hamburger .ic{width:20px;height:20px}

/* ---------- PAGE HEAD ---------- */
.page-head{display:flex;flex-direction:column;gap:12px;margin-bottom:20px}
.page-head .actions{display:flex;gap:10px;flex-wrap:wrap}
@media (min-width:48rem){
  .page-head{flex-direction:row;align-items:flex-end;justify-content:space-between}
}

/* ---------- RESPONSIVE GRIDS ---------- */
.stats{display:grid;grid-template-columns:1fr;gap:12px;margin-bottom:22px}
@media (min-width:30rem){ .stats{grid-template-columns:1fr 1fr} }
@media (min-width:64rem){ .stats{grid-template-columns:repeat(4,1fr)} }

.grid-2{display:grid;grid-template-columns:1fr;gap:16px}
@media (min-width:48rem){ .grid-2{grid-template-columns:1fr 1fr;gap:20px} }

/* table horizontal scroll wrapper for small screens */
.table-scroll{overflow-x:auto;-webkit-overflow-scrolling:touch}
.table-scroll table{min-width:640px}
@media (min-width:64rem){ .table-scroll table{min-width:0} }