/* =====================================================================
   WAREHOUSE APP — UI/UX VISUAL ENHANCEMENT
   Cara pakai: tambahkan 1 baris di <head> SETELAH semua <style> asli:
   <link rel="stylesheet" href="warehouse-ui-enhancement.css">
   
   File ini HANYA mengubah tampilan visual. Tidak ada HTML/JS yang diubah.
   ===================================================================== */

@import url('https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@400;500;600;700;800&family=JetBrains+Mono:wght@400;600&display=swap');

/* =====================================================================
   OVERRIDE DESIGN TOKENS — tambahan variabel baru
   ===================================================================== */
:root {
  --font-main: 'Plus Jakarta Sans', 'Segoe UI', sans-serif;
  --font-mono: 'JetBrains Mono', monospace;

  --radius: 10px;
  --shadow: 0 4px 16px rgba(0,0,0,0.07), 0 2px 4px rgba(0,0,0,0.04);
  --shadow-md: 0 8px 24px rgba(0,0,0,0.10), 0 4px 8px rgba(0,0,0,0.06);
  --shadow-lg: 0 16px 40px rgba(0,0,0,0.12), 0 8px 16px rgba(0,0,0,0.08);
  --primary-glow: rgba(37, 99, 235, 0.18);
  --success-glow: rgba(16, 185, 129, 0.2);
  --danger-glow:  rgba(239, 68, 68, 0.2);

  --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
  --ease-out:    cubic-bezier(0.4, 0, 0.2, 1);
  --dur-fast: 150ms;
  --dur-base: 250ms;
  --dur-slow: 400ms;
}

body.dark-mode {
  --shadow:    0 4px 16px rgba(0,0,0,0.4),  0 2px 4px rgba(0,0,0,0.3);
  --shadow-md: 0 8px 24px rgba(0,0,0,0.5),  0 4px 8px rgba(0,0,0,0.3);
  --shadow-lg: 0 16px 40px rgba(0,0,0,0.6), 0 8px 16px rgba(0,0,0,0.4);
}

/* =====================================================================
   FONT GLOBAL
   ===================================================================== */
body, input, select, textarea, button {
  font-family: var(--font-main) !important;
}

/* =====================================================================
   KEYFRAMES LIBRARY
   ===================================================================== */
@keyframes wh-fadeInUp {
  from { opacity: 0; transform: translateY(20px); }
  to   { opacity: 1; transform: translateY(0); }
}
@keyframes wh-fadeInDown {
  from { opacity: 0; transform: translateY(-18px); }
  to   { opacity: 1; transform: translateY(0); }
}
@keyframes wh-popIn {
  0%   { opacity: 0; transform: scale(0.88); }
  70%  { transform: scale(1.04); }
  100% { opacity: 1; transform: scale(1); }
}
@keyframes wh-scaleIn {
  from { opacity: 0; transform: scale(0.93); }
  to   { opacity: 1; transform: scale(1); }
}
@keyframes wh-float {
  0%, 100% { transform: translateY(0px); }
  50%       { transform: translateY(-7px); }
}
@keyframes wh-pulse-dot {
  0%   { transform: scale(0.9); opacity: 0.7; }
  50%  { transform: scale(1.2); opacity: 1; }
  100% { transform: scale(0.9); opacity: 0.7; }
}
@keyframes wh-shimmer {
  0%   { background-position: -600px 0; }
  100% { background-position:  600px 0; }
}
@keyframes wh-rowSlideIn {
  from { opacity: 0; transform: translateX(-12px); }
  to   { opacity: 1; transform: translateX(0); }
}
@keyframes wh-countUp {
  from { opacity: 0; transform: translateY(8px) scale(0.92); }
  to   { opacity: 1; transform: translateY(0)  scale(1); }
}
@keyframes wh-borderGlow {
  0%, 100% { box-shadow: 0 0 0 0 var(--primary-glow); }
  50%       { box-shadow: 0 0 0 5px var(--primary-glow); }
}
@keyframes wh-ripple {
  to { transform: translate(-50%, -50%) scale(3); opacity: 0; }
}
@keyframes wh-slideIn {
  from { transform: translateX(110%); opacity: 0; }
  to   { transform: translateX(0);    opacity: 1; }
}
@keyframes wh-topbar {
  0%   { background-position: -600px 0; }
  100% { background-position:  600px 0; }
}

/* =====================================================================
   TOP LOADING BAR
   ===================================================================== */
body::before {
  content: '';
  position: fixed;
  top: 0; left: 0; right: 0;
  height: 3px;
  background: linear-gradient(90deg,
    var(--primary) 0%, #6366f1 40%, #8b5cf6 60%, var(--primary) 100%);
  background-size: 600px 100%;
  animation: wh-shimmer 2.5s linear infinite;
  z-index: 99999;
  pointer-events: none;
}

/* Grid dot background */
body::after {
  content: '';
  position: fixed;
  inset: 0;
  background-image:
    linear-gradient(rgba(37,99,235,0.025) 1px, transparent 1px),
    linear-gradient(90deg, rgba(37,99,235,0.025) 1px, transparent 1px);
  background-size: 44px 44px;
  pointer-events: none;
  z-index: 0;
}
body.dark-mode::after {
  background-image:
    linear-gradient(rgba(59,130,246,0.04) 1px, transparent 1px),
    linear-gradient(90deg, rgba(59,130,246,0.04) 1px, transparent 1px);
}

/* pastikan konten tetap di atas background grid */
/* #app-container, #view-login { position: relative; z-index: 1; } */
#app-container { position: relative; z-index: 1; }

/* =====================================================================
   LOGIN SCREEN
   ===================================================================== */
#view-login {
  background: linear-gradient(135deg, #0a0f1e 0%, #1e3a8a 50%, #0f172a 100%) !important;
}

.login-card {
  border-radius: 20px !important;
  border: 1px solid rgba(255,255,255,0.1) !important;
  box-shadow: 0 30px 70px rgba(0,0,0,0.4), 0 0 0 1px rgba(37,99,235,0.15) !important;
  animation: wh-popIn 0.6s var(--ease-spring) both !important;
  backdrop-filter: blur(10px);
}

.login-logo {
  animation: wh-float 3s ease-in-out infinite;
  filter: drop-shadow(0 8px 24px rgba(37,99,235,0.55));
}

.login-title {
  font-weight: 800 !important;
  letter-spacing: -0.025em !important;
}

/* =====================================================================
   SIDEBAR
   ===================================================================== */
aside {
  box-shadow: 4px 0 28px rgba(0,0,0,0.18) !important;
  border-right: 1px solid rgba(255,255,255,0.04) !important;
  transition: width 0.35s var(--ease-out) !important;
}

/* Accent line di atas sidebar */
aside::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(99,102,241,0.5), transparent);
  pointer-events: none;
}

.brand {
  background: rgba(255,255,255,0.025) !important;
  border-bottom: 1px solid rgba(255,255,255,0.06) !important;
}

.brand i {
  color: #60a5fa !important;
  animation: wh-float 3.5s ease-in-out infinite;
}

/* NAV ITEMS */
.nav-item {
  border-radius: 10px !important;
  margin-bottom: 3px !important;
  transition: all var(--dur-base) var(--ease-out) !important;
  font-weight: 500 !important;
  position: relative;
  overflow: hidden;
}

/* Garis accent kiri (Ungu Gelap) */
.nav-item::before {
  content: '';
  position: absolute;
  left: 0; top: 50%;
  transform: translateY(-50%);
  width: 3px; height: 0;
  background: var(--primary); /* Warna ungu gelap utama */
  border-radius: 0 3px 3px 0;
  transition: height var(--dur-base) var(--ease-out);
}

/* FIX: Sembunyikan garis indikator KANAN (Bawaan Lama) */
.nav-item::after {
  display: none !important;
}

.nav-item:hover {
  background: rgba(255,255,255,0.07) !important;
  color: rgba(255,255,255,0.92) !important;
  transform: translateX(4px) !important;
}
.nav-item:hover::before { height: 55%; }

.nav-item.active {
  background: rgba(79, 70, 229, 0.15) !important; /* Background ungu sangat transparan */
  color: #e0e7ff !important; /* Teks ungu muda lembut */
  border: 1px solid rgba(79, 70, 229, 0.4) !important; /* Border ungu gelap transparan */
}

/* Saat aktif, garis tetap warna ungu gelap (solid) */
.nav-item.active::before { 
  height: 60%; 
  background: var(--primary); /* Sama persis dengan hover: ungu gelap */
  box-shadow: 0 0 8px rgba(79, 70, 229, 0.6); /* Sedikit glow biar 'pop' */
}

.nav-item i {
  transition: transform var(--dur-base) var(--ease-spring) !important;
}
.nav-item:hover i { transform: scale(1.18) !important; }

/* SIDEBAR STATS */
.sidebar-stats {
  background: rgba(0,0,0,0.22) !important;
  border-top: 1px solid rgba(255,255,255,0.05) !important;
}
.stat-val {
  font-family: var(--font-mono) !important;
  font-weight: 700 !important;
}

/* USER PROFILE */
.user-profile-mini {
  background: rgba(255,255,255,0.02) !important;
  border-bottom: 1px solid rgba(255,255,255,0.06) !important;
}
.user-avatar {
  background: linear-gradient(135deg, var(--primary), #6366f1) !important;
  border-radius: 10px !important;
  box-shadow: 0 4px 12px rgba(37,99,235,0.3) !important;
  font-weight: 800 !important;
}
.user-name  { font-weight: 700 !important; }
.user-role  { letter-spacing: 0.1em !important; color: rgba(99,102,241,0.75) !important; }

/* =====================================================================
   HEADER
   ===================================================================== */
header { animation: wh-fadeInDown 0.4s var(--ease-out) both; }

h1 {
  font-weight: 800 !important;
  letter-spacing: -0.025em !important;
  background: linear-gradient(130deg, var(--text-main) 0%, var(--primary) 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

/* =====================================================================
   CARD
   ===================================================================== */
.card {
  border-radius: 16px !important;
  box-shadow: var(--shadow) !important;
  border: 1px solid var(--border) !important;
  transition:
    transform var(--dur-base) var(--ease-out),
    box-shadow var(--dur-base) var(--ease-out),
    border-color var(--dur-base) var(--ease-out) !important;
  animation: wh-fadeInUp 0.45s var(--ease-spring) both;
  position: relative;
  overflow: hidden;
}

/* Gradient accent line di atas card */
.card::after {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 3px;
  background: linear-gradient(90deg, var(--primary), #6366f1, #8b5cf6);
  opacity: 0;
  transition: opacity var(--dur-base) var(--ease-out);
  pointer-events: none;
}

.card:hover {
  transform: translateY(-4px) !important;
  box-shadow: var(--shadow-md) !important;
  border-color: rgba(37,99,235,0.3) !important;
}
.card:hover::after { opacity: 1; }

/* Stagger entrance tiap card */
.card:nth-child(1) { animation-delay:   0ms; }
.card:nth-child(2) { animation-delay:  60ms; }
.card:nth-child(3) { animation-delay: 120ms; }
.card:nth-child(4) { animation-delay: 180ms; }
.card:nth-child(5) { animation-delay: 240ms; }

/* =====================================================================
   SCAN AREA
   ===================================================================== */
.scan-area {
  background: linear-gradient(135deg, #1a3578 0%, var(--primary) 55%, #3b82f6 100%) !important;
  border-radius: 20px !important;
  box-shadow: 0 10px 32px rgba(37,99,235,0.35) !important;
  animation: wh-scaleIn 0.5s var(--ease-spring) both;
  position: relative;
  overflow: hidden;
}

/* Floating decorative circles */
.scan-area::before,
.scan-area::after {
  content: '';
  position: absolute;
  border-radius: 50%;
  border: 1px solid rgba(255,255,255,0.1);
  pointer-events: none;
}
.scan-area::before {
  width: 280px; height: 280px;
  top: -110px; right: -55px;
  animation: wh-float 7s ease-in-out infinite;
}
.scan-area::after {
  width: 180px; height: 180px;
  bottom: -70px; left: -35px;
  animation: wh-float 5s ease-in-out -2.5s infinite;
}

.scan-area > * { position: relative; z-index: 1; }

/* Barcode icon float animation */
.scan-area .fa-barcode {
  animation: wh-float 3s ease-in-out infinite !important;
  filter: drop-shadow(0 4px 14px rgba(0,0,0,0.25));
}

/* Scan input — frosted glass */
.scan-input-large {
  font-family: var(--font-mono) !important;
  font-weight: 600 !important;
  border: 2px solid rgba(255,255,255,0.28) !important;
  background: rgba(255,255,255,0.14) !important;
  color: #fff !important;
  border-radius: 14px !important;
  backdrop-filter: blur(4px);
  transition: all var(--dur-base) !important;
  letter-spacing: 0.05em;
}
.scan-input-large::placeholder { color: rgba(255,255,255,0.5) !important; }
.scan-input-large:focus {
  border-color: rgba(255,255,255,0.65) !important;
  background: rgba(255,255,255,0.22) !important;
  box-shadow: 0 0 0 4px rgba(255,255,255,0.12) !important;
  outline: none !important;
}

/* =====================================================================
   BUTTONS
   ===================================================================== */
.btn {
  border-radius: 10px !important;
  font-weight: 600 !important;
  font-size: 0.875rem !important;
  transition: all var(--dur-base) var(--ease-out) !important;
  position: relative;
  overflow: hidden;
  letter-spacing: 0.01em;
}

/* Ripple effect layer */
.btn::after {
  content: '';
  position: absolute;
  border-radius: 50%;
  width: 130px; height: 130px;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%) scale(0);
  background: rgba(255,255,255,0.28);
  opacity: 0;
  pointer-events: none;
}
.btn:active::after {
  animation: wh-ripple 0.45s ease forwards;
}

.btn-primary {
  background: linear-gradient(135deg, var(--primary), #1d4ed8) !important;
  box-shadow: 0 4px 16px rgba(37,99,235,0.32) !important;
  border: none !important;
}
.btn-primary:hover {
  transform: translateY(-2px) !important;
  box-shadow: 0 8px 24px rgba(37,99,235,0.45) !important;
  background: linear-gradient(135deg, #3b82f6, var(--primary)) !important;
}
.btn-primary:active { transform: translateY(0) !important; }

.btn-success {
  background: linear-gradient(135deg, var(--success), #059669) !important;
  box-shadow: 0 4px 16px var(--success-glow) !important;
  border: none !important;
}
.btn-success:hover {
  transform: translateY(-2px) !important;
  box-shadow: 0 8px 24px rgba(16,185,129,0.45) !important;
}

.btn-danger {
  background: linear-gradient(135deg, var(--danger), #dc2626) !important;
  box-shadow: 0 4px 16px var(--danger-glow) !important;
  border: none !important;
}
.btn-danger:hover {
  transform: translateY(-2px) !important;
  box-shadow: 0 8px 24px rgba(239,68,68,0.45) !important;
}

.btn-warning {
  background: linear-gradient(135deg, var(--warning), #d97706) !important;
  box-shadow: 0 4px 16px rgba(245,158,11,0.32) !important;
  border: none !important;
  color: #fff !important;
}
.btn-warning:hover { transform: translateY(-2px) !important; box-shadow: 0 8px 24px rgba(245,158,11,0.45) !important; }

.btn-secondary {
  background: var(--bg-card) !important;
  border: 1.5px solid var(--border) !important;
  box-shadow: 0 1px 4px rgba(0,0,0,0.06) !important;
  transition: all var(--dur-base) var(--ease-out) !important;
}
.btn-secondary:hover {
  border-color: var(--primary) !important;
  color: var(--primary) !important;
  transform: translateY(-2px) !important;
  box-shadow: 0 4px 12px var(--primary-glow) !important;
  background: var(--bg-card) !important;
}

.btn-secondary-prev {
  background: var(--bg-card) !important;
  border: 1.5px solid var(--border) !important;
  transition: all var(--dur-base) var(--ease-out) !important;
}
.btn-secondary-prev:hover {
  transform: translateY(-2px) !important;
  box-shadow: 0 4px 10px rgba(0,0,0,0.1) !important;
}

.btn-sm { padding: 6px 12px !important; font-size: 0.78rem !important; border-radius: 7px !important; }

/* =====================================================================
   FORM CONTROLS
   ===================================================================== */
.form-control {
  border-radius: 10px !important;
  border: 1.5px solid var(--border) !important;
  font-size: 0.875rem !important;
  transition: all var(--dur-base) var(--ease-out) !important;
}
.form-control:hover:not(:focus):not([readonly]):not([disabled]) {
  border-color: #93c5fd !important;
}
.form-control:focus {
  border-color: var(--primary) !important;
  box-shadow: 0 0 0 3px var(--primary-glow) !important;
}

.form-label {
  font-size: 0.75rem !important;
  font-weight: 700 !important;
  text-transform: uppercase;
  letter-spacing: 0.07em;
}

/* =====================================================================
   TABLE
   ===================================================================== */
.table-container {
  border-radius: 14px !important;
  overflow: auto;
  box-shadow: 0 1px 6px rgba(0,0,0,0.05) !important;
  animation: wh-fadeInUp 0.4s var(--ease-out) both;
}

thead th {
  font-size: 0.7rem !important;
  font-weight: 700 !important;
  text-transform: uppercase;
  letter-spacing: 0.09em;
  padding: 12px 16px !important;
  border-bottom: 2px solid var(--border) !important;
  white-space: nowrap;
  position: sticky;
  top: 0;
  z-index: 2;
  background: var(--bg-body) !important;
}

tbody td {
  padding: 11px 16px !important;
  transition: background var(--dur-fast) !important;
}

tbody tr {
  animation: wh-rowSlideIn 0.3s var(--ease-out) both;
  transition: background var(--dur-fast) !important;
}
tbody tr:nth-child(1)  { animation-delay:  20ms; }
tbody tr:nth-child(2)  { animation-delay:  40ms; }
tbody tr:nth-child(3)  { animation-delay:  60ms; }
tbody tr:nth-child(4)  { animation-delay:  80ms; }
tbody tr:nth-child(5)  { animation-delay: 100ms; }
tbody tr:nth-child(n+6){ animation-delay: 120ms; }

/* =====================================================================
   BADGES
   ===================================================================== */
.badge {
  font-family: var(--font-mono) !important;
  font-size: 0.68rem !important;
  font-weight: 700 !important;
  letter-spacing: 0.06em;
  padding: 4px 10px !important;
  border-radius: 20px !important;
  display: inline-flex !important;
  align-items: center;
  gap: 5px;
  text-transform: uppercase;
  transition: all var(--dur-base) !important;
  white-space: nowrap;
}

/* Pulse dot sebelum teks badge */
.badge::before {
  content: '';
  width: 6px; height: 6px;
  border-radius: 50%;
  background: currentColor;
  opacity: 0.75;
  flex-shrink: 0;
  animation: wh-pulse-dot 2s ease-in-out infinite;
}

.badge-in {
  background: rgba(16,185,129,0.1) !important;
  color: #059669 !important;
  border: 1px solid rgba(16,185,129,0.28) !important;
}
body.dark-mode .badge-in { background: rgba(16,185,129,0.15) !important; color: #34d399 !important; }

.badge-ok {
  background: rgba(37,99,235,0.09) !important;
  color: #2563eb !important;
  border: 1px solid rgba(37,99,235,0.22) !important;
}
body.dark-mode .badge-ok { background: rgba(37,99,235,0.15) !important; color: #60a5fa !important; }

.badge-out {
  background: rgba(239,68,68,0.09) !important;
  color: #dc2626 !important;
  border: 1px solid rgba(239,68,68,0.22) !important;
}
body.dark-mode .badge-out { background: rgba(239,68,68,0.15) !important; color: #f87171 !important; }

.badge-warn {
  background: rgba(245,158,11,0.1) !important;
  color: #b45309 !important;
  border: 1px solid rgba(245,158,11,0.28) !important;
}
body.dark-mode .badge-warn { color: #fbbf24 !important; }

.badge-low {
  background: rgba(239,68,68,0.09) !important;
  color: #dc2626 !important;
  border: 1px solid rgba(239,68,68,0.2) !important;
}

.badge-pending {
  background: rgba(99,102,241,0.1) !important;
  color: #6366f1 !important;
  border: 1px solid rgba(99,102,241,0.25) !important;
}
body.dark-mode .badge-pending { background: rgba(99,102,241,0.15) !important; color: #a5b4fc !important; }

/* =====================================================================
   TABS
   ===================================================================== */
.tabs {
  border-bottom: 2px solid var(--border) !important;
  margin-bottom: 22px !important;
  gap: 4px;
}

.tab {
  border-radius: 8px 8px 0 0 !important;
  font-weight: 600 !important;
  font-size: 0.86rem !important;
  transition: all var(--dur-base) var(--ease-out) !important;
  border: 1px solid transparent;
  border-bottom: none;
  position: relative;
  bottom: -2px;
}

/* Garis bawah animasi */
.tab::after {
  content: '';
  position: absolute;
  bottom: -2px; left: 0; right: 0;
  height: 2px;
  background: var(--primary);
  transform: scaleX(0);
  transition: transform var(--dur-base) var(--ease-out);
}
.tab:hover { background: var(--bg-body) !important; }
.tab.active {
  background: var(--bg-card) !important;
  color: var(--primary) !important;
  font-weight: 700 !important;
  border-color: var(--border) var(--border) var(--bg-card) !important;
}
.tab.active::after { transform: scaleX(1); }

/* =====================================================================
   REPORT SUMMARY CARDS
   ===================================================================== */
.summary-card {
  border-radius: 16px !important;
  box-shadow: var(--shadow) !important;
  transition: all var(--dur-base) var(--ease-out) !important;
  animation: wh-popIn 0.5s var(--ease-spring) both !important;
  position: relative;
  overflow: hidden;
}
.summary-card:nth-child(1) { animation-delay:   0ms; }
.summary-card:nth-child(2) { animation-delay:  70ms; }
.summary-card:nth-child(3) { animation-delay: 140ms; }
.summary-card:nth-child(4) { animation-delay: 210ms; }

.summary-card:hover {
  transform: translateY(-5px) scale(1.01) !important;
  box-shadow: var(--shadow-md) !important;
}

.summary-title {
  font-size: 0.72rem !important;
  font-weight: 700 !important;
  text-transform: uppercase;
  letter-spacing: 0.08em;
}

.summary-value {
  font-family: var(--font-mono) !important;
  font-weight: 800 !important;
  font-size: 2rem !important;
  letter-spacing: -0.025em;
  animation: wh-countUp 0.6s var(--ease-spring) both;
}

/* =====================================================================
   PODIUM CARDS
   ===================================================================== */
.podium-card {
  border-radius: 20px !important;
  transition: all 0.35s var(--ease-spring) !important;
  animation: wh-popIn 0.6s var(--ease-spring) both !important;
  overflow: hidden;
}
.podium-card:nth-child(1) { animation-delay:  60ms; }
.podium-card:nth-child(2) { animation-delay:   0ms; }
.podium-card:nth-child(3) { animation-delay: 120ms; }

.podium-card:hover {
  transform: translateY(-12px) scale(1.02) !important;
  box-shadow: var(--shadow-lg) !important;
}

.podium-icon {
  transition: transform 0.35s var(--ease-spring) !important;
}
.gold-card   .podium-icon { animation: wh-float 3.0s ease-in-out  0.0s infinite !important; }
.silver-card .podium-icon { animation: wh-float 3.4s ease-in-out -1.0s infinite !important; }
.bronze-card .podium-icon { animation: wh-float 3.8s ease-in-out -2.0s infinite !important; }

.podium-score {
  font-family: var(--font-mono) !important;
  font-weight: 800 !important;
  letter-spacing: -0.03em;
  animation: wh-countUp 0.6s var(--ease-spring) both;
}

/* =====================================================================
   MODAL
   ===================================================================== */
.modal-overlay {
  backdrop-filter: blur(6px) !important;
  -webkit-backdrop-filter: blur(6px) !important;
  background: rgba(0,0,0,0.5) !important;
  transition: opacity 0.3s ease !important;
}

.modal {
  border-radius: 20px !important;
  box-shadow: var(--shadow-lg) !important;
  border: 1px solid var(--border);
  transform: scale(0.9) translateY(-15px);
  transition: transform 0.35s var(--ease-spring) !important;
}
.modal-overlay.active .modal {
  transform: scale(1) translateY(0) !important;
}

.modal-header {
  font-size: 1.1rem !important;
  font-weight: 700 !important;
  border-bottom: 1px solid var(--border);
  padding-bottom: 14px;
  margin-bottom: 18px !important;
}

/* =====================================================================
   TOAST
   ===================================================================== */
.toast {
  border-radius: 14px !important;
  box-shadow: var(--shadow-lg) !important;
  border: 1px solid var(--border) !important;
  padding: 14px 18px !important;
  animation: wh-slideIn 0.35s var(--ease-spring) both !important;
  min-width: 260px;
  font-size: 0.875rem !important;
}

/* =====================================================================
   TOGGLE SWITCH — premium feel
   ===================================================================== */
.slider {
  background: #cbd5e1 !important;
  box-shadow: inset 0 1px 3px rgba(0,0,0,0.15) !important;
  transition: all 0.3s ease !important;
}
input:checked + .slider {
  background: linear-gradient(135deg, var(--success), #059669) !important;
  box-shadow: 0 4px 12px rgba(16,185,129,0.4) !important;
}
.slider:before {
  box-shadow: 0 2px 6px rgba(0,0,0,0.2) !important;
  transition: all 0.3s var(--ease-spring) !important;
}

.switch-row {
  border-radius: 7px;
  padding-left: 5px !important;
  padding-right: 5px !important;
  transition: background var(--dur-fast) !important;
}
.switch-row:hover { background: rgba(37,99,235,0.04); }

.switch-label {
  font-family: var(--font-mono) !important;
  font-weight: 700 !important;
  font-size: 0.8rem !important;
}

/* =====================================================================
   STATUS POSTS (Marketplace cards)
   ===================================================================== */
.status-card {
  border-radius: 10px !important;
  box-shadow: 0 2px 8px rgba(0,0,0,0.06) !important;
  animation: wh-popIn 0.4s var(--ease-spring) both !important;
  transition: all var(--dur-base) !important;
  font-size: 0.8rem !important;
  font-weight: 700 !important;
}
.status-card:hover {
  transform: scale(1.06) !important;
  box-shadow: var(--shadow) !important;
}

/* =====================================================================
   CHAT WIDGET
   ===================================================================== */
.chat-box {
  border-radius: 20px !important;
  box-shadow: var(--shadow-lg) !important;
  border: 1px solid var(--border) !important;
  overflow: hidden !important;
}
.chat-box.active {
  animation: wh-popIn 0.35s var(--ease-spring) both;
}

.chat-header {
  background: linear-gradient(135deg, #1e3a8a, var(--primary)) !important;
  font-weight: 700 !important;
  font-size: 0.9rem !important;
}

.chat-toggle-btn {
  background: linear-gradient(135deg, var(--primary), #6366f1) !important;
  box-shadow: 0 6px 22px rgba(37,99,235,0.42) !important;
  transition: all var(--dur-slow) var(--ease-spring) !important;
}
.chat-toggle-btn:hover {
  transform: scale(1.13) rotate(-6deg) !important;
  box-shadow: 0 10px 30px rgba(37,99,235,0.55) !important;
}

.chat-msg {
  border-radius: 12px !important;
  animation: wh-fadeInUp 0.25s ease both;
}
.chat-msg.me {
  background: linear-gradient(135deg, var(--primary), #3b82f6) !important;
  box-shadow: 0 3px 10px rgba(37,99,235,0.22) !important;
}
.chat-msg.others {
  background: var(--bg-card) !important;
  border: 1px solid var(--border) !important;
  box-shadow: 0 1px 4px rgba(0,0,0,0.06) !important;
}

.chat-badge {
  font-family: var(--font-mono) !important;
  font-weight: 800 !important;
  font-size: 10px !important;
  box-shadow: 0 2px 8px rgba(239,68,68,0.5) !important;
}

/* Date separator bubble */
.date-separator span {
  border-radius: 20px !important;
  font-size: 0.72rem !important;
  font-weight: 600 !important;
  letter-spacing: 0.04em;
}

/* =====================================================================
   PREVIEW / GENERATED OUTPUT BOX
   ===================================================================== */
.preview-box {
  border-radius: 14px !important;
  transition: all var(--dur-base) !important;
}
.preview-box:not(.hidden) {
  border-color: var(--primary) !important;
  background: rgba(37,99,235,0.03) !important;
  box-shadow: 0 0 0 1px rgba(37,99,235,0.1) !important;
  animation: wh-fadeInUp 0.35s var(--ease-spring) both;
}

/* =====================================================================
   STAT HIGHLIGHT
   ===================================================================== */
.stat-highlight {
  animation: wh-countUp 0.5s var(--ease-spring) !important;
}

/* =====================================================================
   RAK LIST TABLE
   ===================================================================== */
#rak-list-table thead th {
  background: var(--bg-body) !important;
}

/* =====================================================================
   SCROLLBAR
   ===================================================================== */
::-webkit-scrollbar { width: 6px; height: 6px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb {
  background: rgba(100,116,139,0.3);
  border-radius: 3px;
  transition: background var(--dur-base);
}
::-webkit-scrollbar-thumb:hover { background: rgba(100,116,139,0.55); }

/* =====================================================================
   REPLY BAR
   ===================================================================== */
.reply-bar {
  border-radius: 8px 8px 0 0 !important;
  border-left: 3px solid var(--primary) !important;
}

/* =====================================================================
   NUMBER / MONO FIELDS
   ===================================================================== */
#wh-stock, #wh-price, #req-qty, #pj-qty,
.stock-edit, .stock-search,
.summary-value, .stat-val, .podium-score {
  font-family: var(--font-mono) !important;
}

/* =====================================================================
   RESPONSIVE ADJUSTMENTS
   ===================================================================== */
@media (max-width: 900px) {
  h1 { font-size: 1.2rem !important; -webkit-text-fill-color: var(--text-main) !important; }
  .card { padding: 16px !important; }
  .summary-value { font-size: 1.5rem !important; }
}
