/* header.css — gaya header BERSAMA untuk dashboard/inventory/po/import/margin/evaluasi.
   Dibuat dari aturan header dashboard.html (acuan). Ubah header DI SINI SAJA.
   Awalan "html body" + !important: mengalahkan aturan header lama yang masih ada di tiap halaman. */
@import url('https://fonts.googleapis.com/css2?family=IBM+Plex+Mono:wght@400;500;600&family=IBM+Plex+Sans:ital,wght@0,300;0,400;0,500;0,600;0,700;1,400&family=JetBrains+Mono:wght@500;700&display=swap');
html body .topbar { position:static !important; top:auto !important; gap:normal !important; flex-wrap:nowrap !important; font-family:'IBM Plex Sans', sans-serif !important; font-size:13px !important; color:#1a1a2e !important; box-sizing:border-box !important; }
html body .topbar .nav { flex:0 1 auto !important; overflow:visible !important; }
html body .topbar .user-name { max-width:none !important; overflow:visible !important; text-overflow:clip !important; white-space:normal !important; }
html body .topbar .brand img { height:38px !important; width:auto !important; display:block !important; }
html body .topbar #forceSyncBtn { width:auto !important; height:auto !important; min-width:0 !important; min-height:0 !important; justify-content:normal !important; }
html body .topbar .sync-indicator { padding:0 !important; }
html body .topbar { height:56px !important; background:#ffffff !important; border-bottom:3px solid #8b1a1a !important; display:flex !important; align-items:center !important; padding:0 20px !important; box-shadow:0 2px 8px rgba(0,0,0,0.08) !important; }
html body .topbar .brand { display:flex !important; align-items:center !important; margin-right:32px !important; text-decoration:none !important; }
html body .topbar .brand-mark { width:26px !important; height:26px !important; background:#c0392b !important; display:grid !important; place-items:center !important; font-family:'Inter', sans-serif !important; font-size:10px !important; font-weight:600 !important; color:#fff !important; border-radius:4px !important; }
html body .topbar .brand-name { display:none !important; }
html body .topbar .nav { display:flex !important; align-items:center !important; gap:2px !important; }
html body .topbar .nav-item { height:56px !important; display:flex !important; align-items:center !important; padding:0 14px !important; font-size:13px !important; font-weight:500 !important; color:#555 !important; cursor:pointer !important; border-bottom:3px solid transparent !important; margin-bottom:-3px !important; transition:color 0.15s, border-color 0.15s !important; text-decoration:none !important; white-space:nowrap !important; }
html body .topbar .nav-item:hover { color:#8b1a1a !important; }
html body .topbar .nav-item.active { color:#8b1a1a !important; font-weight:700 !important; border-bottom-color:#8b1a1a !important; }
html body .topbar-right { margin-left:auto !important; display:flex !important; align-items:center !important; gap:10px !important; }
html body .topbar .user-chip { display:flex !important; align-items:center !important; gap:6px !important; padding:4px 10px 4px 5px !important; background:#f5f5f7 !important; border:1px solid #ddd !important; border-radius:20px !important; cursor:pointer !important; }
html body .topbar .user-chip:hover { border-color:#c8c8d4 !important; }
html body .topbar .user-avatar { width:24px !important; height:24px !important; border-radius:50% !important; background:#8b1a1a !important; color:#fff !important; display:grid !important; place-items:center !important; font-size:10px !important; font-weight:700 !important; }
html body .topbar .user-chip { position:relative !important; }
html body .topbar .user-menu { display:none !important; position:absolute !important; top:100% !important; right:0 !important; margin-top:4px !important; background:#fff !important; border:1px solid #e0e0e6 !important; border-radius:6px !important; box-shadow:0 4px 12px rgba(0,0,0,0.12) !important; z-index:200 !important; min-width:120px !important; overflow:hidden !important; }
html body .topbar .user-menu.open { display:block !important; }
html body .topbar .user-menu-item { display:block !important; width:100% !important; padding:8px 12px !important; border:none !important; background:none !important; text-align:left !important; font-size:11px !important; font-family:inherit !important; color:#1a1a2e !important; cursor:pointer !important; transition:background 0.1s !important; }
html body .topbar .user-menu-item:hover { background:#f0f0f3 !important; }
html body .topbar .user-menu-item.danger { color:#dc2626 !important; }
html body .topbar .user-menu-item.danger:hover { background:rgba(220,38,38,0.06) !important; }
html body .topbar .user-name { font-size:11px !important; font-weight:500 !important; color:#333 !important; }
html body .topbar .sync-indicator { display:flex !important; align-items:center !important; gap:5px !important; font-size:10px !important; color:#888 !important; font-family:'Inter', sans-serif !important; cursor:default !important; }
html body .topbar .sync-dot { width:7px !important; height:7px !important; border-radius:50% !important; background:#9999aa !important; flex-shrink:0 !important; transition:background 0.3s !important; }
html body .topbar .sync-dot.live { background:#1a9e45 !important; animation:pulse 2s infinite !important; }
html body .topbar .sync-dot.offline { background:#e74c3c !important; }
html body .topbar #forceSyncBtn { display:inline-flex !important; align-items:center !important; gap:5px !important; background:linear-gradient(135deg,#1e7e45,#22c55e) !important; border:none !important; border-radius:20px !important; padding:4px 12px !important; cursor:pointer !important; color:#fff !important; font-size:11px !important; font-weight:600 !important; letter-spacing:.3px !important; box-shadow:0 1px 4px rgba(34,197,94,.35) !important; transition:all .18s !important; line-height:1 !important; white-space:nowrap !important; }
html body .topbar #forceSyncBtn:hover { background:linear-gradient(135deg,#166534,#16a34a) !important; box-shadow:0 2px 8px rgba(34,197,94,.45) !important; transform:translateY(-1px) !important; }
html body .topbar #forceSyncBtn:active { transform:translateY(0) scale(.96) !important; box-shadow:none !important; }
html body .topbar #forceSyncBtn:disabled { opacity:.55 !important; cursor:not-allowed !important; transform:none !important; }
html body .topbar #forceSyncBtn .sync-spin { display:inline-block !important; }
html body .topbar #forceSyncBtn.syncing .sync-spin { animation:spin .7s linear infinite !important; }
@media (max-width: 768px) { html body .topbar { height:auto !important; flex-wrap:wrap !important; padding:8px 12px !important; gap:6px !important; } }
@media (max-width: 768px) { html body .topbar .brand { margin-right:8px !important; } }
@media (max-width: 768px) { html body .topbar .brand-mark { width:22px !important; height:22px !important; font-size:9px !important; } }
@media (max-width: 768px) { html body .topbar .nav { flex-wrap:wrap !important; gap:0 !important; width:100% !important; order:10 !important; } }
@media (max-width: 768px) { html body .topbar .nav-item { height:36px !important; padding:0 10px !important; font-size:11px !important; } }
@media (max-width: 768px) { html body .topbar-right { gap:6px !important; } }
@media (max-width: 768px) { html body .topbar .user-chip { padding:2px 8px 2px 4px !important; } }
@media (max-width: 768px) { html body .topbar .user-name { font-size:10px !important; } }
@media (max-width: 768px) { html body .topbar .user-avatar { width:20px !important; height:20px !important; font-size:9px !important; } }
@media (max-width: 768px) { html body .topbar #forceSyncBtn { padding:3px 8px !important; font-size:10px !important; } }
@media (max-width: 768px) { html body .topbar .sync-indicator { font-size:9px !important; } }
@media (max-width: 900px) { html body .topbar { height:auto !important; flex-wrap:wrap !important; padding:6px 12px !important; gap:6px !important; } }
@media (max-width: 900px) { html body .topbar .brand { margin-right:8px !important; } }
@media (max-width: 900px) { html body .topbar .brand img { height:26px !important; width:auto !important; display:block !important; } }
@media (max-width: 900px) { html body .topbar-right { margin-left:auto !important; } }
@media (max-width: 900px) { html body .topbar .nav { flex-wrap:nowrap !important; overflow:visible !important; width:100% !important; order:10 !important; gap:0 !important; } }
@media (max-width: 900px) { html body .topbar .nav-item { display:flex !important; align-items:center !important; justify-content:center !important; flex:1 1 0 !important; min-width:0 !important; text-align:center !important; height:38px !important; padding:0 4px !important; font-size:10.5px !important; letter-spacing:-0.1px !important; } }
@media (max-width: 900px) { html body .topbar .nav-imp { flex-direction:column !important; line-height:1.12 !important; } }
@media (max-width: 900px) { html body .topbar .nav-imp .nv-sep { display:none !important; } }
@media (max-width: 380px) { html body .topbar .nav-item { padding:0 2px !important; font-size:9.8px !important; } }
@media (max-width: 380px) { html body .topbar .brand img { height:23px !important; } }