/* ═══════════════════════════════════════════════════════
   BlackCow v3.0.0 — Layout: Sidebar, Grid, Header
   ═══════════════════════════════════════════════════════ */

/* ── Sidebar Nav ───────────────────────────────────────── */
#side-menu{
  position:fixed;top:0;left:-260px;width:240px;height:100%;
  background:#1a1a1a;
  box-shadow:2px 0 16px rgba(0,0,0,0.25);
  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 16px;
  border-bottom:1px solid rgba(255,255,255,0.1);
  margin-bottom:8px;
}

#side-menu .sidebar-logo h2{
  font-size:18px;color:#ffffff;
  font-family:'DM Sans',sans-serif;
  display:flex;align-items:center;gap:10px;
  font-weight:700;
}

#side-menu .sidebar-logo .logo-sub{
  font-size:11px;color:rgba(255,255,255,0.45);margin-top:3px;
  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:rgba(255,255,255,0.78);font-size:14px;font-weight:500;
  cursor:pointer;font-family:'Inter',sans-serif;
  margin-bottom:2px;
}

.menu-item:hover{background:rgba(255,255,255,0.08);color:#ffffff}

.menu-item.active{
  background:rgba(255,255,255,0.14);color:#ffffff;
  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 rgba(255,255,255,0.1);
  font-size:11px;color:rgba(255,255,255,0.35);text-align:center;
}

.sidebar-version-badge{
  display:inline-block;background:rgba(255,255,255,0.12);color:rgba(255,255,255,0.7);
  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,var(--surface) 0%,var(--surface-2) 100%);
  border-radius:var(--radius-md);padding:14px;text-align:center;
  border:1px solid var(--border);
}

.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}
}

/* ── Numbers panel mode (show only requested section) ──── */
/* Default: hide deaths/bulls — they have their own sidebar items */
#numbers-deaths-section { display:none }
#numbers-bulls-section  { display:none }
#tab-numbers[data-panel="deaths"] #numbers-stock-section  { display:none }
#tab-numbers[data-panel="deaths"] #numbers-bulls-section  { display:none }
#tab-numbers[data-panel="deaths"] #numbers-deaths-section { display:block }
#tab-numbers[data-panel="bulls"]  #numbers-stock-section  { display:none }
#tab-numbers[data-panel="bulls"]  #numbers-deaths-section { display:none }
#tab-numbers[data-panel="bulls"]  #numbers-bulls-section  { display:block }

/* ── Events single-panel mode (hide sub-tab navigation) ── */
#tab-events[data-single-panel] #evt-header-animal { display:none }
#tab-events[data-single-panel] #evt-header-land   { display:none }

/* ── Weather sidebar-nav mode (hide sub-tab bar) ────────── */
#tab-weather[data-sidebar-nav] .weather-subtabs   { display:none }

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

/* ── Sidebar group chevron ─────────────────────────────── */
.menu-item .menu-chevron{
  margin-left:auto;font-size:13px;
  opacity:0.4;transition:transform .25s cubic-bezier(0.4,0,0.2,1);
}
.menu-item.group-expanded .menu-chevron{
  transform:rotate(90deg);opacity:0.7;
}

/* ── Sidebar accordion sub-items ──────────────────────── */
.sidebar-sub{
  display:none;
  padding:2px 0 4px 0;
  overflow:hidden;
}
.sidebar-sub.open{display:block}

.menu-sub-item{
  display:flex;align-items:center;gap:8px;width:100%;
  text-align:left;background:none;border:none;
  padding:8px 12px 8px 40px;
  border-radius:var(--radius-md);
  color:rgba(255,255,255,0.62);
  font-size:13px;font-weight:400;
  cursor:pointer;font-family:'Inter',sans-serif;
  margin-bottom:1px;
  transition:background .15s,color .15s;
}
.menu-sub-item:hover{background:rgba(255,255,255,0.07);color:rgba(255,255,255,0.9)}
.menu-sub-item.active{
  background:rgba(255,255,255,0.13);
  color:#ffffff;font-weight:600;
}

/* ── Sidebar brand card ────────────────────────────────── */
.brand-card{
  background:rgba(255,255,255,0.95);
  border-radius:10px;
  padding:10px 14px;
  display:flex;align-items:center;gap:11px;
  margin-bottom:4px;
}