/* ═══════════════════════════════════════════════════════════════
   Parity unified topbar — single source of truth
   Used across all 10 pages (dashboard, forecaster, POs, etc.)
   ═══════════════════════════════════════════════════════════════ */

/* Reset for body so topbar sits flush */
body { margin: 0; }

.topbar{
  background:#fff;
  border-bottom:1px solid #e5e7eb;
  position:sticky;
  top:0;
  z-index:50;
  box-shadow:0 1px 2px rgba(0,0,0,.02);
}
.topbar-inner{
  max-width:1400px;
  margin:0 auto;
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:0 16px;
  gap:14px;
  height:54px;
}
.topbar-brand{
  display:flex;
  align-items:center;
  gap:8px;
  text-decoration:none;
  flex-shrink:0;
}
.topbar-logo{
  font-weight:900;
  font-size:17px;
  color:#cc0000;
  letter-spacing:.3px;
}
.topbar-tag{
  font-size:9px;
  font-weight:700;
  letter-spacing:.1em;
  background:#1a1a1a;
  color:#fff;
  padding:2px 7px;
  border-radius:3px;
}
.topbar-nav{
  display:flex;
  align-items:center;
  gap:0;
  flex:1;
  justify-content:center;
  overflow-x:auto;
  scrollbar-width:none;
}
.topbar-nav::-webkit-scrollbar{ display:none; }
.topbar-nav-group{
  display:flex;
  align-items:center;
  gap:2px;
  padding:0 6px;
  flex-shrink:0;
}
.topbar-nav-group + .topbar-nav-group{
  border-left:1px solid #e5e7eb;
}
.topbar-nav a{
  display:flex;
  align-items:center;
  gap:5px;
  padding:7px 11px;
  border-radius:6px;
  color:#444;
  text-decoration:none;
  font-size:12px;
  font-weight:600;
  transition:all .12s;
  white-space:nowrap;
}
.topbar-nav a:hover{ background:#f4f4f6; color:#222; }
.topbar-nav a.active{
  color:#cc0000;
  background:#fbeaea;
}
.topbar-right{
  display:flex;
  align-items:center;
  gap:10px;
  font-size:11px;
  color:#666;
  flex-shrink:0;
}
.topbar-time{ color:#666; font-size:11px; white-space:nowrap; }
.topbar-btn{
  background:transparent;
  border:1px solid #e5e7eb;
  border-radius:6px;
  padding:5px 10px;
  font-size:11px;
  font-weight:600;
  color:#444;
  cursor:pointer;
  display:flex;
  align-items:center;
  gap:5px;
  white-space:nowrap;
}
.topbar-btn:hover{ background:#f4f4f6; }

/* Mobile */
@media (max-width:780px){
  .topbar-inner{ height:auto; padding:8px 12px; flex-wrap:wrap; }
  .topbar-nav{ order:3; width:100%; justify-content:flex-start; padding:6px 0; }
  .topbar-time{ display:none; }
}

/* ═══════════════════════════════════════════════════════════════
   Page header — replaces old dark .panel-hdr with a real <h1>
   ═══════════════════════════════════════════════════════════════ */
.page-header{
  display:flex;
  align-items:baseline;
  justify-content:space-between;
  flex-wrap:wrap;
  gap:12px;
  padding:18px 0 14px 0;
}
.page-header h1{
  margin:0;
  font-size:20px;
  font-weight:800;
  letter-spacing:-.01em;
  color:#1a1a1a;
}
.page-header .page-sub{
  font-size:12px;
  color:#666;
  margin-top:2px;
}
.page-actions{
  display:flex;
  align-items:center;
  gap:8px;
  flex-wrap:wrap;
}

/* ═══════════════════════════════════════════════════════════════
   Underline tabs — replaces button-style tabs across pages
   Pages can opt in by using class="tabs-underline"
   ═══════════════════════════════════════════════════════════════ */
.tabs-underline{
  display:flex;
  gap:2px;
  border-bottom:1px solid #e5e7eb;
  flex-wrap:wrap;
  margin-bottom:0;
}
.tabs-underline .tab{
  padding:8px 14px;
  font-size:12px;
  font-weight:600;
  color:#666;
  background:transparent;
  border:0;
  border-bottom:2px solid transparent;
  cursor:pointer;
  display:flex;
  align-items:center;
  gap:6px;
  margin-bottom:-1px;
  text-transform:none;
  letter-spacing:0;
}
.tabs-underline .tab:hover{ color:#222; }
.tabs-underline .tab.on,
.tabs-underline .tab.active{
  color:#cc0000;
  border-bottom-color:#cc0000;
}
.tabs-underline .tab .cnt{
  background:#eee;
  color:#555;
  padding:1px 7px;
  border-radius:10px;
  font-size:10px;
  font-weight:700;
}
.tabs-underline .tab.on .cnt,
.tabs-underline .tab.active .cnt{
  background:#fbeaea;
  color:#cc0000;
}