/* ═══════════════════════════════════════════════════════
   Farm App v7.0 — Layout: Sidebar, Grid, Header
   ═══════════════════════════════════════════════════════ */

/* ── Sidebar Nav ───────────────────────────────────────── */
#side-menu{
  position:fixed;top:0;left:-260px;width:240px;height:100%;
  background:var(--surface);
  box-shadow:2px 0 12px rgba(0,0,0,0.12);
  transition:left .3s cubic-bezier(0.4,0,0.2,1);
  z-index:1999;
  display:flex;flex-direction:column;
  overflow-y:auto;
}

#side-menu .sidebar-logo{
  padding:20px 20px 8px;
  border-bottom:1px solid var(--border);
  margin-bottom:8px;
}

#side-menu .sidebar-logo h2{
  font-size:18px;color:var(--primary);
  font-family:'DM Sans',sans-serif;
  display:flex;align-items:center;gap:8px;
}

#side-menu .sidebar-logo .logo-sub{
  font-size:11px;color:var(--text-muted);margin-top:2px;
  font-family:'Inter',sans-serif;font-weight:400;
}

#side-menu nav{flex:1;padding:8px 12px}

.menu-item{
  display:flex;align-items:center;gap:10px;width:100%;
  text-align:left;background:none;border:none;
  padding:10px 12px;border-radius:var(--radius-md);
  color:var(--text);font-size:14px;font-weight:500;
  cursor:pointer;font-family:'Inter',sans-serif;
  margin-bottom:2px;
}

.menu-item:hover{background:var(--surface-2);color:var(--primary)}

.menu-item.active{
  background:var(--primary-light);color:var(--primary);
  font-weight:600;
}

.menu-item .menu-icon{font-size:16px;width:20px;text-align:center;flex-shrink:0}

#side-menu .sidebar-footer{
  padding:16px;border-top:1px solid var(--border);
  font-size:11px;color:var(--text-muted);text-align:center;
}

.sidebar-version-badge{
  display:inline-block;background:var(--primary-light);color:var(--primary);
  padding:2px 8px;border-radius:9999px;font-size:10px;font-weight:700;
  margin-bottom:4px;
}

/* ── Hamburger Button ──────────────────────────────────── */
#menu-button{
  display:none;
  position:fixed;top:14px;left:14px;z-index:2000;
  background:var(--primary);color:#fff;
  width:40px;height:40px;border-radius:var(--radius-md);
  border:none;cursor:pointer;font-size:18px;font-weight:700;
  box-shadow:var(--shadow-md);align-items:center;justify-content:center;
}

/* Sidebar overlay (mobile) */
#sidebar-overlay{
  display:none;position:fixed;inset:0;
  background:rgba(0,0,0,0.4);z-index:1998;
}

/* ── Main Content ──────────────────────────────────────── */
#main-content{
  margin-left:0;
  min-height:100vh;
  padding:20px 16px 80px;
  max-width:100%;
}

/* ── Tab Content ───────────────────────────────────────── */
.tab-content{display:none}
.tab-content.active{display:block}

/* ── Page Header ───────────────────────────────────────── */
.page-header{
  background:linear-gradient(135deg,var(--primary),var(--primary-dark));
  color:#fff;padding:20px;border-radius:var(--radius-lg);
  margin-bottom:20px;
  box-shadow:var(--shadow-md);
}

.page-header h1{font-size:20px;margin-bottom:4px}
.page-header p{font-size:13px;opacity:0.9}

/* ── Stats Grid ────────────────────────────────────────── */
.stats-grid{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(140px,1fr));
  gap:12px;
}

.stat-card{
  background:linear-gradient(135deg,#f0fdf4 0%,#dcfce7 100%);
  border-radius:var(--radius-md);padding:14px;text-align:center;
  border:1px solid rgba(22,163,74,0.15);
}

.stat-value{
  font-size:24px;font-weight:700;color:var(--primary);
  line-height:1;margin-bottom:4px;
}

.stat-label{
  font-size:11px;color:var(--text-muted);
  text-transform:uppercase;letter-spacing:0.5px;
}

/* ── Grid helpers ──────────────────────────────────────── */
.grid-2{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:16px}
.grid-3{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:16px}
.grid-4{display:grid;grid-template-columns:repeat(4,1fr);gap:12px}

/* ── Farm tabs (Numbers tab) ───────────────────────────── */
.farm-tabs{display:flex;gap:4px;margin-bottom:0}
.farm-tab{
  padding:9px 18px;border:none;background:var(--surface-3);
  border-radius:var(--radius-md) var(--radius-md) 0 0;
  font-weight:600;font-size:13px;cursor:pointer;
  color:var(--text-muted);transition:all .15s;
  font-family:'DM Sans',sans-serif;
}
.farm-tab.active{
  background:var(--surface);color:var(--primary);
  box-shadow:0 -2px 6px rgba(0,0,0,0.06);
}

/* ── Desktop layout ────────────────────────────────────── */
@media(min-width:1100px){
  #menu-button{display:none !important}
  #side-menu{left:0 !important}
  #main-content{margin-left:240px;padding:24px 28px 60px}
  .stats-grid{grid-template-columns:repeat(4,1fr)}
  .grid-4{grid-template-columns:repeat(4,1fr)}
}

/* ── Mobile layout ─────────────────────────────────────── */
@media(max-width:1099px){
  #menu-button{display:flex !important}
  #main-content{padding:64px 12px 80px}
  .stats-grid{grid-template-columns:repeat(2,1fr)}
  .grid-4{grid-template-columns:repeat(2,1fr)}
  .stat-value{font-size:20px}
}

@media(max-width:480px){
  .stats-grid{grid-template-columns:repeat(2,1fr)}
  .page-header h1{font-size:17px}
}

/* iOS safe area */
@supports(padding-bottom:env(safe-area-inset-bottom)){
  body{padding-bottom:env(safe-area-inset-bottom)}
}