/* ╔═══════════════════════════════════════════════════════════════════════════╗
   ║  SMART KITCHEN ERP — ENTERPRISE SAAS DESIGN SYSTEM                        ║
   ║  Theme: Dark Mode Only · Primary Accent: Electric Blue (#3B82F6)           ║
   ║  Navigation: Persistent Left Sidebar · Full Responsive Layout              ║
   ║  Geometry: Restrained 6-10px Radii · Zero Glowing Orbs · Clean Data Tables║
   ╚═══════════════════════════════════════════════════════════════════════════╝ */

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800&family=Plus+Jakarta+Sans:wght@400;500;600;700;800&display=swap');

:root, html, body, html.dark, body.dark, [data-theme="dark"] {
  /* Core Dark Enterprise SaaS Palette */
  --bg-app:               #0B1020;
  --bg-primary:           #0B1020;
  --bg-main:              #0B1020;
  --bg-canvas:            #0B1020;
  --canvas:               #0B1020;
  --sidebar-bg:           #0F172A;
  --header-bg:            #111827;

  --surface-primary:      #111827;
  --surface-secondary:    #172033;
  --surface-elevated:     #1E293B;
  --surface:              #111827;
  --surface-alt:          #172033;
  --surface-warm:         #172033;
  --surface-hover:        #1E293B;
  --bg-secondary:         #111827;
  --bg-muted:             #172033;
  --card:                 #111827;
  --card2:                #172033;
  --card3:                #1E293B;
  --glass-card:           #111827;
  --glass-card-h:         #172033;

  /* Typography */
  --text-main:            #F8FAFC;
  --text-primary:         #F8FAFC;
  --text:                 #F8FAFC;
  --text-secondary:       #94A3B8;
  --text-muted:           #64748B;
  --muted:                #64748B;
  --text-dim:             #475569;
  --text-light:           #FFFFFF;
  --text-on-dark:         #FFFFFF;

  /* Electric Blue Accent & Action Colors */
  --primary-blue:         #3B82F6;
  --blue-hover:           #2563EB;
  --blue-active:          #1D4ED8;
  --blue-subtle:          rgba(59, 130, 246, 0.12);
  --blue-border:          rgba(59, 130, 246, 0.30);
  
  --accent-amber:         #3B82F6;
  --accent-amber-warm:    #2563EB;
  --accent-amber-hover:   #2563EB;
  --amber:                #3B82F6;
  --amber-warm:           #3B82F6;
  --amber-deep:           #2563EB;
  --amber-bg:             rgba(59, 130, 246, 0.12);
  --amber-bg-strong:      rgba(59, 130, 246, 0.20);
  --amber-border:         rgba(59, 130, 246, 0.35);

  /* Status Colors */
  --success:              #22C55E;
  --emerald:              #22C55E;
  --emerald-bg:           rgba(34, 197, 94, 0.12);
  --emerald-border:       rgba(34, 197, 94, 0.25);
  
  --warning:              #F59E0B;
  --warning-bg:           rgba(245, 158, 11, 0.12);
  --warning-border:       rgba(245, 158, 11, 0.25);

  --danger:               #EF4444;
  --error:                #EF4444;
  --rose:                 #EF4444;
  --rose-bg:              rgba(239, 68, 68, 0.12);
  --rose-border:          rgba(239, 68, 68, 0.25);

  --info:                 #38BDF8;
  --cyan:                 #38BDF8;
  --blue:                 #3B82F6;

  /* Borders & Dividers */
  --border-color:         #263449;
  --border:               #263449;
  --border-subtle:        #1E293B;
  --border-strong:        #334155;
  --border-glass:         #263449;
  --border-active:        #3B82F6;
  --border-amber:         rgba(59, 130, 246, 0.40);

  /* Restrained Geometry (Enterprise Norms - No 24px/9999px pills) */
  --radius-xs:            4px;
  --radius-sm:            6px;
  --radius-md:            8px;
  --radius-lg:            10px;
  --radius-xl:            12px;
  --radius-pill:          6px;
  --radius-card:          8px;
  --radius-card-lg:       10px;
  --radius-input:         6px;
  --r-sm:                 4px;
  --r-md:                 6px;
  --r-lg:                 8px;
  --r-xl:                 10px;
  --r-2xl:                12px;

  /* Inputs & Controls */
  --input-bg:             #172033;
  --table-th-bg:          #172033;
  --table-hover:          #1E293B;
  --card-shadow:          0 4px 6px -1px rgba(0, 0, 0, 0.25), 0 2px 4px -2px rgba(0, 0, 0, 0.15);
  --shadow-sm:            0 1px 2px rgba(0, 0, 0, 0.20);
  --shadow-card:          var(--card-shadow);
  --shadow-elevated:      0 10px 25px -5px rgba(0, 0, 0, 0.4);
  --shadow-dark:          0 20px 40px rgba(0, 0, 0, 0.5);

  /* Transitions */
  --transition:           all 0.15s cubic-bezier(0.4, 0, 0.2, 1);
  --ease-spring:          cubic-bezier(0.4, 0, 0.2, 1);
}

*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

html {
  height: 100%;
  background: #0B1020 !important;
}

body {
  height: 100vh !important;
  max-height: 100vh !important;
  background: #0B1020 !important;
  color: #F8FAFC !important;
  font-family: 'Inter', 'Plus Jakarta Sans', system-ui, -apple-system, sans-serif !important;
  font-variant-numeric: lining-nums tabular-nums;
  overflow: hidden !important;
  margin: 0 !important;
  padding: 0 !important;
}


[dir="rtl"] body {
  font-family: 'Cairo', 'Plus Jakarta Sans', sans-serif;
}

button, .btn, .dock-nav-pill, .nav-item, .cs-stepper-btn, .cs-tab-btn, a {
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
}

/* Minimalist Scrollbars */
::-webkit-scrollbar {
  width: 6px !important;
  height: 6px !important;
}
::-webkit-scrollbar-track {
  background: rgba(0, 0, 0, 0.02) !important;
  border-radius: var(--radius-pill) !important;
}
::-webkit-scrollbar-thumb {
  background: rgba(28, 25, 23, 0.12) !important;
  border-radius: var(--radius-pill) !important;
}
::-webkit-scrollbar-thumb:hover {
  background: rgba(234, 179, 8, 0.50) !important;
}

/* Ambient Floating Background Orbs */
.aurora-orb {
  position: fixed;
  border-radius: 50%;
  pointer-events: none;
  z-index: 0;
  will-change: transform;
}
.orb-1 {
  width: 700px;
  height: 700px;
  top: -12%;
  right: -6%;
  background: radial-gradient(circle, rgba(254, 240, 138, 0.32) 0%, rgba(234, 179, 8, 0.06) 50%, transparent 70%);
  filter: blur(85px);
}
.orb-2 {
  width: 600px;
  height: 600px;
  bottom: -15%;
  left: -6%;
  background: radial-gradient(circle, rgba(244, 239, 230, 0.45) 0%, rgba(215, 195, 155, 0.08) 55%, transparent 70%);
  filter: blur(95px);
}
.orb-3 {
  width: 420px;
  height: 420px;
  top: 32%;
  left: 48%;
  background: radial-gradient(circle, rgba(254, 243, 199, 0.25) 0%, transparent 65%);
  filter: blur(75px);
}

.js-hidden, .svg-defs {
  position: absolute !important;
  width: 0 !important;
  height: 0 !important;
  opacity: 0 !important;
  pointer-events: none !important;
  overflow: hidden !important;
}

/* ══════════════════════════════════════════════════════════════════════
   3. FLUID STAGGERED ENTRANCE ANIMATIONS
══════════════════════════════════════════════════════════════════════ */
@keyframes fadeInUp {
  from {
    opacity: 0;
    transform: translateY(18px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes pulseGlow {
  0%, 100% { transform: scale(1); opacity: 0.85; }
  50% { transform: scale(1.08); opacity: 1; }
}

.top-dock-container {
  animation: fadeInUp 0.45s var(--ease-spring) 0.04s both;
}
.dashboard-greeting-header {
  animation: fadeInUp 0.5s var(--ease-spring) 0.10s both;
}
.bento-profile-card, .bento-progress-card, .bento-timer-card {
  animation: fadeInUp 0.55s var(--ease-spring) 0.16s both;
}
.bento-dark-tasks-card, .bento-timeline-card {
  animation: fadeInUp 0.6s var(--ease-spring) 0.22s both;
}

/* ══════════════════════════════════════════════════════════════════════
   4. APP CHASSIS & MAIN CONTAINER
══════════════════════════════════════════════════════════════════════ */
.app-chassis {
  position: relative;
  z-index: 10;
  max-width: 1380px;
  margin: 0 auto;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  padding: 16px 20px 48px;
  gap: 18px;
}

.main {
  width: 100% !important;
  min-width: 0 !important;
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  border-radius: 0 !important;
  display: flex !important;
  flex-direction: column !important;
  overflow: visible !important;
}

.content {
  width: 100% !important;
  max-width: 100% !important;
  padding: 0 !important;
  overflow: visible !important;
}

/* ══════════════════════════════════════════════════════════════════════
   5. A. TOP FLOATING CAPSULE DOCK (Centered #18181B)
══════════════════════════════════════════════════════════════════════ */
.top-dock-container {
  position: sticky;
  top: 14px;
  z-index: 1000;
  display: flex;
  justify-content: center;
  align-items: center;
  margin-bottom: 22px;
}

.floating-capsule-dock {
  background: rgba(24, 24, 27, 0.95);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border: 1px solid rgba(255, 255, 255, 0.10);
  border-radius: var(--radius-pill);
  padding: 6px 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  box-shadow: 0 16px 36px -6px rgba(0, 0, 0, 0.35);
  max-width: 98vw;
  flex-wrap: wrap;
}

.dock-brand-pill {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 14px;
  border-radius: var(--radius-pill);
  background: rgba(255, 255, 255, 0.06);
  cursor: pointer;
  transition: var(--transition);
}
.dock-brand-pill:hover {
  background: rgba(255, 255, 255, 0.10);
}
.dock-brand-glyph {
  color: var(--accent-amber);
  font-size: 14px;
}
.dock-brand-name {
  color: #FFFFFF;
  font-size: 13px;
  font-weight: 800;
  white-space: nowrap;
}

.dock-nav-pill-group {
  display: flex;
  align-items: center;
  gap: 3px;
}

.dock-nav-pill {
  background: transparent;
  color: #A1A1AA;
  border: none;
  padding: 8px 14px;
  border-radius: var(--radius-pill);
  font-size: 12.5px;
  font-weight: 600;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  transition: var(--transition);
  white-space: nowrap;
}
.dock-nav-pill:hover {
  color: #FFFFFF;
  background: rgba(255, 255, 255, 0.08);
}
.dock-nav-pill.active {
  background: var(--bg-secondary);
  color: #18181B;
  font-weight: 700;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.20);
}
.dock-active-dot {
  color: var(--accent-amber);
  font-size: 8px;
}

.dock-end-controls {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-inline-start: 4px;
}

.dock-search-pill {
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: var(--radius-pill);
  padding: 6px 12px;
  display: flex;
  align-items: center;
  gap: 6px;
  color: #A1A1AA;
  font-size: 12px;
  cursor: pointer;
  transition: var(--transition);
}
.dock-search-pill:hover {
  background: rgba(255, 255, 255, 0.12);
  color: #FFFFFF;
}
.dock-search-kbd {
  background: rgba(255, 255, 255, 0.10);
  border-radius: 4px;
  padding: 1px 4px;
  font-size: 9px;
  color: #D4D4D8;
}

.dock-icon-btn {
  background: transparent;
  border: none;
  color: #A1A1AA;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: var(--transition);
}
.dock-icon-btn:hover {
  background: rgba(255, 255, 255, 0.10);
  color: #FFFFFF;
}

.dock-profile-avatar {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: rgba(234, 179, 8, 0.20);
  border: 1.5px solid var(--accent-amber);
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  cursor: pointer;
  font-size: 16px;
}
.avatar-live-dot {
  position: absolute;
  bottom: 0;
  right: 0;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #10B981;
  border: 1.5px solid #18181B;
}

.dock-action-trigger {
  background: var(--accent-amber);
  color: #18181B;
  border: none;
  padding: 8px 16px;
  border-radius: var(--radius-pill);
  font-size: 12px;
  font-weight: 800;
  cursor: pointer;
  transition: var(--transition);
  white-space: nowrap;
}
.dock-action-trigger:hover {
  background: #CA8A04;
  transform: translateY(-1px);
}

/* Notifications dropdown */
.notif-bell-wrapper {
  position: relative;
  display: inline-block;
}
.notifications-dropdown {
  position: absolute;
  top: calc(100% + 10px);
  inset-inline-end: 0;
  width: 360px;
  background: var(--bg-secondary);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-card);
  box-shadow: var(--shadow-elevated);
  z-index: 1000;
  display: none;
  flex-direction: column;
  overflow: hidden;
}
.notifications-dropdown.open {
  display: flex;
}
.notif-header {
  padding: 14px 18px;
  border-bottom: 1px solid var(--border-subtle);
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.notif-header-title {
  font-size: 13px;
  font-weight: 700;
  color: var(--text-primary);
}
.notif-list {
  max-height: 300px;
  overflow-y: auto;
}
.notif-footer-actions {
  padding: 10px 16px;
  border-top: 1px solid var(--border-subtle);
  display: flex;
  justify-content: space-between;
  align-items: center;
  background: var(--surface-warm);
}
.notif-clear-btn, .notif-view-all-btn {
  background: transparent;
  border: none;
  font-size: 11.5px;
  font-weight: 700;
  color: var(--amber-deep);
  cursor: pointer;
}

/* ══════════════════════════════════════════════════════════════════════
   6. B. TOP ROW: GREETING & STATS HEADER
══════════════════════════════════════════════════════════════════════ */
.dashboard-greeting-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 24px;
  flex-wrap: wrap;
  margin-bottom: 24px;
}
.greeting-left {
  flex: 1;
  min-width: 280px;
}
.greeting-status-tag {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-size: 12px;
  font-weight: 600;
  color: var(--text-muted);
  margin-bottom: 6px;
}
.status-indicator-live {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #10B981;
  box-shadow: 0 0 8px rgba(16, 185, 129, 0.6);
  animation: pulseGlow 2s infinite;
}
.meta-separator {
  color: rgba(0, 0, 0, 0.2);
}
.greeting-heading {
  font-size: 1.85rem;
  font-weight: 800;
  color: var(--text-main);
  letter-spacing: -0.02em;
  margin-bottom: 6px;
}
.greeting-sub {
  font-size: 0.95rem;
  color: var(--text-muted);
  line-height: 1.4;
}

/* ══════════════════════════════════════════════════════════════════════
   7. C. BENTO GRID DASHBOARD CORE (Exact Video Placement)
══════════════════════════════════════════════════════════════════════ */
.bento-dashboard-grid {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: 20px;
}

.bento-card {
  background: var(--bg-secondary) !important;
  border: 1px solid var(--border-color) !important;
  border-radius: var(--radius-card);
  padding: 24px;
  box-shadow: var(--card-shadow) !important;
  transition: var(--transition);
  position: relative;
  overflow: hidden;
  color: var(--text-primary) !important;
}
.bento-card:hover {
  box-shadow: var(--shadow-card-hover);
}
.bento-card-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin-bottom: 16px;
}
.bento-card-title {
  font-size: 15px;
  font-weight: 800;
  color: var(--text-main);
  letter-spacing: -0.01em;
}
.bento-card-sub {
  font-size: 11.5px;
  color: var(--text-muted);
  margin-top: 2px;
}

/* WIDGET 1: Profile / Status Card (4 cols) */
.fill-emerald {
  background: var(--emerald);
}
.bar-fill-98 { width: 98.6%; }
.bar-fill-92 { width: 92%; }
.bar-h-52 { height: 52%; }
.bar-h-65 { height: 65%; }
.bar-h-70 { height: 70%; }
.bar-h-82 { height: 82%; }
.bar-h-88 { height: 88%; }
.bar-h-94 { height: 94%; }
.bar-h-100 { height: 100%; }

/* WIDGET 2: Weekly Progress / Bar Chart (4 cols) */
.bento-progress-card {
  grid-column: span 4;
}
@media (max-width: 1100px) { .bento-progress-card { grid-column: span 6; } }
@media (max-width: 768px) { .bento-progress-card { grid-column: span 12; } }

.badge-amber-pill {
  background: var(--amber-bg);
  border: 1px solid var(--amber-border);
  color: var(--amber-deep);
  padding: 4px 10px;
  border-radius: var(--radius-pill);
  font-size: 11px;
  font-weight: 800;
}

.weekly-bars-flex {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  height: 120px;
  padding: 10px 6px;
  margin-bottom: 14px;
}
.day-col {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  flex: 1;
}
.day-track {
  width: 14px;
  height: 80px;
  background: var(--surface-alt);
  border-radius: var(--radius-pill);
  display: flex;
  align-items: flex-end;
  overflow: hidden;
}
.day-fill {
  width: 100%;
  background: rgba(28, 25, 23, 0.20);
  border-radius: var(--radius-pill);
  transition: height 0.4s ease;
}
.day-col.active-day .day-fill {
  background: var(--accent-amber);
  box-shadow: 0 0 12px rgba(234, 179, 8, 0.5);
}
.day-tag {
  font-size: 11px;
  font-weight: 600;
  color: var(--text-muted);
}
.day-tag.active-pill {
  background: #18181B;
  color: #FFFFFF;
  padding: 2px 7px;
  border-radius: var(--radius-pill);
  font-weight: 800;
}
.bento-chart-container {
  height: 90px;
}

/* WIDGET 3: Time Tracker / Dial Gauge (4 cols) */
.bento-timer-card {
  grid-column: span 4;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}
@media (max-width: 1100px) { .bento-timer-card { grid-column: span 12; } }

.status-pulse-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 11px;
  font-weight: 700;
  color: var(--amber-deep);
  background: var(--amber-bg);
  padding: 4px 10px;
  border-radius: var(--radius-pill);
}

.dial-gauge-center {
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 12px 0;
}
.dial-circle-wrapper {
  position: relative;
  width: 140px;
  height: 140px;
}
.dial-svg-graphic {
  width: 100%;
  height: 100%;
  transform: rotate(-90deg);
}
.dial-base-circle {
  fill: none;
  stroke: var(--surface-alt);
  stroke-width: 10;
}
.dial-progress-circle {
  fill: none;
  stroke: var(--accent-amber);
  stroke-width: 10;
  stroke-dasharray: 440;
  stroke-dashoffset: 130;
  stroke-linecap: round;
}
.dial-center-body {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}
.dial-counter-digits {
  font-size: 20px;
  font-weight: 900;
  color: var(--text-main);
  letter-spacing: -0.02em;
}
.dial-batch-tag {
  font-size: 10px;
  color: var(--text-muted);
  font-weight: 600;
}
.dial-controls-row {
  display: flex;
  gap: 8px;
  justify-content: center;
}
.btn-pill-sm {
  padding: 7px 18px !important;
  font-size: 12px !important;
}

/* WIDGET 4: Dark Onboarding / Tasks Widget (#18181B) (4 cols) */
.bento-dark-tasks-card {
  grid-column: span 4;
  background: #18181B !important;
  color: #FFFFFF !important;
  border-color: rgba(255, 255, 255, 0.10) !important;
}
@media (max-width: 1100px) { .bento-dark-tasks-card { grid-column: span 12; } }

.dark-tasks-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin-bottom: 16px;
}
.dark-tasks-badge {
  font-size: 10.5px;
  font-weight: 700;
  color: var(--accent-amber);
  text-transform: uppercase;
}
.dark-tasks-title {
  font-size: 15px;
  font-weight: 800;
  color: #FFFFFF;
}
.dark-tasks-progress-pill {
  background: rgba(234, 179, 8, 0.20);
  border: 1px solid rgba(234, 179, 8, 0.35);
  color: #FEF08A;
  padding: 4px 10px;
  border-radius: var(--radius-pill);
  font-size: 11px;
  font-weight: 800;
}
.dark-tasks-checklist {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.dark-task-row {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 10px 12px;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.06);
  border-radius: 14px;
  cursor: pointer;
  transition: var(--transition);
}
.dark-task-row:hover {
  background: rgba(255, 255, 255, 0.08);
  border-color: rgba(234, 179, 8, 0.30);
}
.dark-check-box {
  width: 20px;
  height: 20px;
  border-radius: 6px;
  border: 1.5px solid rgba(255, 255, 255, 0.25);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 11px;
  font-weight: 800;
  flex-shrink: 0;
  margin-top: 2px;
  transition: var(--transition);
}
.dark-check-box.checked {
  background: var(--accent-amber);
  border-color: var(--accent-amber);
  color: #18181B;
}
.dark-check-box.in-prog {
  background: rgba(234, 179, 8, 0.20);
  border-color: var(--accent-amber);
  color: var(--accent-amber);
}
.dark-task-content {
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.task-title-text {
  font-size: 12px;
  font-weight: 600;
  color: rgba(255, 255, 255, 0.92);
}
.task-meta-time {
  font-size: 10.5px;
  color: rgba(255, 255, 255, 0.50);
}

/* WIDGET 5: Weekly Schedule & Timeline (8 cols) */
.bento-timeline-card {
  grid-column: span 8;
}
@media (max-width: 1100px) { .bento-timeline-card { grid-column: span 12; } }

.timeline-track-container {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
  margin-bottom: 20px;
}
@media (max-width: 768px) { .timeline-track-container { grid-template-columns: 1fr; } }

.timeline-schedule-block {
  border-radius: 18px;
  padding: 16px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  transition: var(--transition);
}
.timeline-schedule-block:hover {
  transform: translateY(-2px);
}
.block-dark {
  background: #18181B;
  color: #FFFFFF;
  border: 1px solid rgba(255, 255, 255, 0.08);
}
.block-amber-glow {
  background: var(--surface-warm);
  border: 1.5px solid var(--accent-amber);
  box-shadow: 0 4px 20px rgba(234, 179, 8, 0.15);
}
.block-header-info {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.block-time-range {
  font-size: 11px;
  font-weight: 700;
  color: var(--accent-amber);
}
.block-location-chip {
  font-size: 10px;
  font-weight: 700;
  padding: 2px 8px;
  border-radius: var(--radius-pill);
  background: rgba(255, 255, 255, 0.10);
  color: rgba(255, 255, 255, 0.85);
}
.block-location-chip.chip-amber {
  background: var(--amber-bg);
  color: var(--amber-deep);
}
.block-heading {
  font-size: 12.5px;
  font-weight: 700;
  line-height: 1.35;
}
.block-attendees-row {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-top: 4px;
}
.attendee-avatar-glyph {
  font-size: 14px;
}
.attendee-count-text {
  font-size: 10.5px;
  color: var(--text-muted);
}
.block-dark .attendee-count-text {
  color: rgba(255, 255, 255, 0.60);
}

.timeline-simulator-box {
  background: var(--surface-warm);
  border: 1px solid var(--border-subtle);
  border-radius: 18px;
  padding: 18px 20px;
}
.sim-box-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 12px;
}
.sim-box-title {
  font-size: 13.5px;
  font-weight: 800;
  color: var(--text-main);
}
.sim-controls-grid {
  display: grid;
  grid-template-columns: 1fr 140px 240px;
  gap: 12px;
  align-items: flex-end;
}
@media (max-width: 900px) {
  .sim-controls-grid { grid-template-columns: 1fr; }
}
.sim-input-label {
  font-size: 11.5px;
  font-weight: 600;
  color: var(--text-muted);
  margin-bottom: 4px;
  display: block;
}

/* ══════════════════════════════════════════════════════════════════════
   8. D. SECONDARY VIEWS & DATA TABLES (Borderless & Clean)
══════════════════════════════════════════════════════════════════════ */
.table-responsive-container, .tbl-wrap {
  width: 100% !important;
  overflow-x: auto !important;
  border-radius: var(--radius-card) !important;
  background: var(--surface) !important;
  border: 1px solid var(--border-subtle) !important;
  box-shadow: var(--shadow-card) !important;
  margin-bottom: 18px !important;
}

.tbl, .minimal-table {
  width: 100% !important;
  border-collapse: collapse !important;
  text-align: right !important;
  font-size: 0.92rem !important;
}

.tbl th, .minimal-table th {
  padding: 16px 20px !important;
  background: var(--surface-warm) !important;
  color: var(--text-muted) !important;
  font-weight: 600 !important;
  font-size: 0.82rem !important;
  border-bottom: 1px solid var(--border-subtle) !important;
  white-space: nowrap !important;
}

.tbl td, .minimal-table td {
  padding: 16px 20px !important;
  border-bottom: 1px solid rgba(28, 25, 23, 0.04) !important;
  color: var(--text-main) !important;
  font-weight: 500 !important;
  vertical-align: middle !important;
}

.tbl tr:hover td, .minimal-table tr:hover td {
  background: var(--surface-hover) !important;
}

.tbl tr:last-child td, .minimal-table tr:last-child td {
  border-bottom: none !important;
}

.filter-chip {
  padding: 6px 14px;
  border-radius: var(--radius-pill);
  font-size: 12px;
  font-weight: 600;
  color: var(--text-muted);
  background: var(--surface-alt);
  border: 1px solid transparent;
  cursor: pointer;
  transition: var(--transition);
}
.filter-chip:hover {
  background: var(--surface-warm);
  color: var(--text-main);
}
.filter-chip.active {
  background: #18181B;
  color: #FFFFFF;
  font-weight: 700;
}

.search-pill-input {
  background: var(--surface-alt) !important;
  border: 1px solid transparent !important;
  padding: 10px 20px !important;
  border-radius: var(--radius-pill) !important;
  font-size: 0.88rem !important;
  font-family: inherit !important;
  color: var(--text-main) !important;
  outline: none !important;
  transition: var(--transition) !important;
}
.search-pill-input:focus {
  background: var(--bg-secondary) !important;
  border-color: var(--accent-amber) !important;
  box-shadow: 0 0 0 3px rgba(234, 179, 8, 0.16) !important;
}

/* ══════════════════════════════════════════════════════════════════════
/* ══════════════════════════════════════════════════════════════════════
   10. PAGE ROUTING (Strict Single View Display)
══════════════════════════════════════════════════════════════════════ */
.page {
  display: none !important;
  width: 100% !important;
  box-sizing: border-box !important;
}
.page.active {
  display: block !important;
  animation: fadeInUp 0.35s cubic-bezier(0.16, 1, 0.3, 1) forwards !important;
  will-change: opacity, transform;
}

/* ══════════════════════════════════════════════════════════════════════
   11. WELCOME CLEAN CARD (Replacing old dark hero video)
══════════════════════════════════════════════════════════════════════ */
.welcome-clean-card {
  background: var(--bg-secondary) !important;
  border: 1px solid var(--border-color) !important;
  border-radius: var(--radius-card-lg);
  padding: 40px 36px;
  box-shadow: var(--card-shadow) !important;
  max-width: 680px;
  width: 100%;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
  animation: welcomeGlow 8s ease-in-out infinite alternate;
  color: var(--text-primary) !important;
}
.welcome-clean-badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: var(--amber-bg);
  border: 1px solid var(--amber-border);
  color: var(--amber-deep);
  padding: 6px 16px;
  border-radius: var(--radius-pill);
  font-size: 12px;
  font-weight: 800;
}
.status-pulse-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--accent-amber);
  animation: pulseGlow 2s infinite;
}
.welcome-clean-title {
  font-size: 22px;
  font-weight: 800;
  color: var(--text-primary) !important;
  line-height: 1.4;
  letter-spacing: -0.02em;
}
.welcome-clean-brand {
  display: block;
  color: var(--accent-amber-hover);
  font-size: 1.7rem;
  margin-top: 6px;
}
.welcome-clean-desc {
  font-size: 1rem;
  color: var(--text-muted);
  max-width: 640px;
  line-height: 1.6;
}
.welcome-clean-actions {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
  justify-content: center;
  margin-top: 8px;
}

/* ══════════════════════════════════════════════════════════════════════
   12. MODALS & OVERLAYS
══════════════════════════════════════════════════════════════════════ */
.modal-overlay, .modal-backdrop-custom {
  position: fixed !important;
  inset: 0 !important;
  background: rgba(24, 24, 27, 0.50) !important;
  backdrop-filter: blur(10px) !important;
  -webkit-backdrop-filter: blur(10px) !important;
  display: none !important;
  align-items: center !important;
  justify-content: center !important;
  z-index: 10000 !important;
  opacity: 0 !important;
  pointer-events: none !important;
  transition: var(--transition) !important;
}
.modal-overlay.open, .modal-overlay.active, .modal-overlay.show,
.modal-backdrop-custom.open, .modal-backdrop-custom.active, .modal-backdrop-custom.show {
  display: flex !important;
  opacity: 1 !important;
  pointer-events: auto !important;
}

/* ══════════════════════════════════════════════════════════════════════
   13. ALL COMPONENT STYLES & DUAL-PANE WORKBENCH (From ERP Engine)
══════════════════════════════════════════════════════════════════════ */
.dual-pane-workbench {
  display: grid !important;
  grid-template-columns: 1fr 400px !important;
  gap: 18px !important;
  width: 100% !important;
  margin-bottom: 20px !important;
  align-items: start !important;
}
@media (max-width: 1024px) {
  .dual-pane-workbench { grid-template-columns: 1fr !important; }
}
.pane-stream {
  background: var(--surface) !important;
  border: 1px solid var(--border-subtle) !important;
  border-radius: var(--radius-card) !important;
  padding: 22px !important;
  box-shadow: var(--shadow-card) !important;
}
.pane-inspector {
  display: flex !important;
  flex-direction: column !important;
  gap: 14px !important;
  position: sticky !important;
  top: 10px !important;
  max-height: calc(100vh - 100px) !important;
  overflow-y: auto !important;
}
.stream-card {
  background: var(--surface) !important;
  border: 1px solid var(--border-subtle) !important;
  border-radius: 14px !important;
  padding: 14px 18px !important;
  margin-bottom: 10px !important;
  cursor: pointer !important;
  transition: var(--transition) !important;
  box-shadow: var(--shadow-sm) !important;
}
.stream-card:hover {
  background: var(--surface-warm) !important;
  border-color: var(--border-amber) !important;
  transform: translateY(-2px) !important;
  box-shadow: var(--shadow-card-hover) !important;
}
.stream-card.selected-stream-card {
  background: var(--amber-bg) !important;
  border-color: var(--amber-border) !important;
  box-shadow: 0 0 16px rgba(234, 179, 8, 0.18) !important;
  transform: translateY(-2px) !important;
}

#toast {
  position: fixed !important;
  bottom: 28px !important;
  left: 50% !important;
  transform: translateX(-50%) translateY(10px) !important;
  background: #18181B !important;
  border: 1px solid rgba(255, 255, 255, 0.10) !important;
  border-radius: var(--radius-pill) !important;
  padding: 11px 26px !important;
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
  z-index: 999999 !important;
  opacity: 0 !important;
  visibility: hidden !important;
  transition: all 0.22s ease !important;
  color: #FFFFFF !important;
  box-shadow: var(--shadow-dark) !important;
}
#toast.show {
  opacity: 1 !important;
  visibility: visible !important;
  transform: translateX(-50%) translateY(0) !important;
}

/* Badge styles */
.badge {
  display: inline-flex !important;
  align-items: center !important;
  gap: 6px !important;
  padding: 4px 12px !important;
  border-radius: var(--radius-pill) !important;
  font-size: 11.5px !important;
  font-weight: 700 !important;
  letter-spacing: 0.02em !important;
  line-height: 1.3 !important;
}
.badge-green, .badge-success {
  background: var(--emerald-bg) !important;
  color: var(--emerald) !important;
  border: 1px solid var(--emerald-border) !important;
}
.badge-amber, .badge-warning {
  background: var(--amber-bg) !important;
  color: var(--amber-deep) !important;
  border: 1px solid var(--amber-border) !important;
}
.badge-purple {
  background: rgba(124, 58, 237, 0.10) !important;
  color: #7C3AED !important;
  border: 1px solid rgba(124, 58, 237, 0.25) !important;
}
.badge-slate, .badge-gray {
  background: rgba(28, 25, 23, 0.05) !important;
  color: var(--text-muted) !important;
  border: 1px solid var(--border-subtle) !important;
}

/* Mobile drawer handling */
@media (min-width: 1024px) {
  .sidebar, #sidebar-toggle-btn, .mobile-drawer-header {
    display: none !important;
  }
}
@media (max-width: 1023px) {
  .top-dock-container {
    overflow-x: auto;
    padding: 0 10px;
    justify-content: flex-start;
  }
  .floating-capsule-dock {
    width: max-content;
  }
}


/* ══════════════════════════════════════════════════════════════════════
   RECIPE CATALOG LIST
══════════════════════════════════════════════════════════════════════ */
#recipe-list .nav-item {
  width: 100% !important; min-height: 56px !important; height: auto !important;
  border-radius: 12px !important; display: flex !important; flex-direction: row !important;
  align-items: center !important; justify-content: flex-start !important;
  gap: 12px !important; padding: 12px 16px !important; margin-bottom: 7px !important;
  background: var(--surface) !important; border: 1px solid var(--border-warm) !important;
  color: var(--text-primary) !important; cursor: pointer !important;
  transition: all 0.2s ease !important; box-shadow: var(--shadow-card) !important;
  text-align: start !important; position: relative !important; box-sizing: border-box !important;
}
#recipe-list .nav-item:hover { background: var(--surface-warm) !important; border-color: var(--border-amber) !important; transform: translateX(-2px) !important; }
[dir="ltr"] #recipe-list .nav-item:hover { transform: translateX(2px) !important; }
#recipe-list .nav-item.active { background: var(--amber-bg) !important; border-color: var(--amber-border) !important; box-shadow: 0 2px 12px rgba(245,158,11,0.14) !important; }
#recipe-list .nav-item::after { display: none !important; }

/* ══════════════════════════════════════════════════════════════════════
   DUAL PANE WORKBENCH
══════════════════════════════════════════════════════════════════════ */
.dual-pane-workbench { display: grid !important; grid-template-columns: 1fr 400px !important; gap: 18px !important; width: 100% !important; margin-bottom: 20px !important; align-items: start !important; }
@media (max-width: 1024px) { .dual-pane-workbench { grid-template-columns: 1fr !important; } .pane-inspector { position: static !important; max-height: none !important; } }
.pane-stream { background: var(--surface) !important; border: 1px solid var(--border-warm) !important; border-radius: var(--r-xl) !important; padding: 20px !important; overflow: visible !important; box-shadow: var(--shadow-card) !important; }
.pane-inspector { display: flex !important; flex-direction: column !important; gap: 14px !important; min-width: 0 !important; position: sticky !important; top: 10px !important; max-height: calc(100vh - 100px) !important; overflow-y: auto !important; overflow-x: hidden !important; padding: 2px 4px 28px 2px !important; scrollbar-width: thin !important; background: transparent !important; border: none !important; box-shadow: none !important; overscroll-behavior: auto !important; }
.pane-inspector::-webkit-scrollbar  { width: 4px; }
.pane-inspector::-webkit-scrollbar-track { background: transparent; }
.pane-inspector::-webkit-scrollbar-thumb { background: rgba(0,0,0,0.12); border-radius: 99px; }
.pane-inspector::-webkit-scrollbar-thumb:hover { background: rgba(217,119,6,0.45); }
.stream-card { background: var(--surface) !important; border: 1px solid var(--border-warm) !important; border-radius: var(--r-md) !important; padding: 12px 16px !important; margin-bottom: 9px !important; cursor: pointer !important; transition: all 0.2s ease !important; box-shadow: var(--shadow-card) !important; }
.stream-card:hover { background: var(--surface-warm) !important; border-color: var(--border-amber) !important; transform: translateY(-2px) !important; box-shadow: var(--shadow-card-hover) !important; }
.selected-stream-card, .card.selected-stream-card, .stream-card.selected-stream-card { background: var(--amber-bg) !important; border-color: var(--amber-border) !important; box-shadow: 0 0 16px rgba(245,158,11,0.18) !important; transform: translateY(-2px) !important; }

/* ══════════════════════════════════════════════════════════════════════
   CENTER STOCK TABS
══════════════════════════════════════════════════════════════════════ */
#cs-stats { display: grid !important; grid-template-columns: repeat(4, minmax(0, 1fr)) !important; gap: 12px !important; margin-bottom: 16px !important; }
@media (max-width: 768px) { #cs-stats { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; } }
.cs-tab-btn { flex: 1; display: flex; align-items: center; justify-content: center; gap: 6px; padding: 8px 12px; border-radius: 10px; font-size: 12px; font-weight: 600; color: var(--text-muted); background: transparent; border: 1px solid transparent; cursor: pointer; transition: all 0.2s ease; }
.cs-tab-btn:hover { color: var(--text-primary); background: var(--surface-hover); }
.cs-tab-btn.active { color: var(--text-primary); background: var(--amber-bg); border-color: var(--amber-border); box-shadow: 0 2px 10px rgba(245,158,11,0.14); font-weight: 700; }
.cs-command-card { width: 100% !important; border-radius: 18px !important; padding: 18px 20px !important; background: var(--surface) !important; border: 1px solid var(--border-warm) !important; box-shadow: var(--shadow-card) !important; box-sizing: border-box !important; }
@media (max-width: 640px) { .cs-command-card { padding: 14px 12px !important; border-radius: 16px !important; } }

.bom-ingredients-container, #cs-raw-list { max-height: 280px !important; overflow-y: auto !important; padding-inline-end: 4px !important; display: flex !important; flex-direction: column !important; gap: 7px !important; scrollbar-width: thin !important; }
.bom-ingredients-container::-webkit-scrollbar, #cs-raw-list::-webkit-scrollbar { width: 4px; }
.bom-ingredients-container::-webkit-scrollbar-track, #cs-raw-list::-webkit-scrollbar-track { background: rgba(0,0,0,0.03); border-radius: 8px; }
.bom-ingredients-container::-webkit-scrollbar-thumb, #cs-raw-list::-webkit-scrollbar-thumb { background: rgba(0,0,0,0.12); border-radius: 8px; }
.bom-ingredients-container::-webkit-scrollbar-thumb:hover, #cs-raw-list::-webkit-scrollbar-thumb:hover { background: rgba(217,119,6,0.45); }

.bom-item-card, [data-bom-item], #cs-raw-list > div { display: flex !important; flex-direction: row !important; align-items: center !important; justify-content: space-between !important; background: var(--surface-warm) !important; border: 1px solid var(--border-warm) !important; border-radius: 11px !important; padding: 10px 14px !important; gap: 12px !important; transition: all 0.2s ease !important; box-shadow: var(--shadow-card) !important; }
.bom-item-card:hover, #cs-raw-list > div:hover { background: var(--surface-hover) !important; border-color: var(--border-amber) !important; transform: translateY(-1px) !important; }
.bom-item-card .bom-item-details, #cs-raw-list > div > div:first-child { display: flex !important; flex-direction: column !important; align-items: flex-start !important; text-align: right !important; gap: 3px !important; flex: 1 !important; min-width: 0 !important; }
.bom-item-card .bom-item-metrics, #cs-raw-list > div > div:last-child { display: flex !important; flex-direction: column !important; align-items: flex-end !important; text-align: left !important; gap: 3px !important; flex-shrink: 0 !important; }
.cs-stepper-btn { height: 36px !important; display: flex !important; align-items: center !important; justify-content: center !important; border-radius: 9px !important; background: var(--surface-warm) !important; border: 1px solid var(--border-warm) !important; color: var(--amber-deep) !important; font-size: 12px !important; font-weight: 800 !important; cursor: pointer !important; transition: all 0.18s cubic-bezier(0.4,0,0.2,1) !important; }
.cs-stepper-btn:hover, .cs-stepper-btn:active { background: var(--amber-bg) !important; border-color: var(--amber-border) !important; color: var(--text-primary) !important; box-shadow: 0 0 10px rgba(245,158,11,0.20) !important; transform: translateY(-1px) !important; }

/* ══════════════════════════════════════════════════════════════════════
   ORDERS TABS & BUTTONS
══════════════════════════════════════════════════════════════════════ */
.orders-nav-tabs { display: flex !important; gap: 6px !important; margin-bottom: 16px !important; padding: 5px !important; background: rgba(0,0,0,0.03) !important; border: 1px solid var(--border-warm) !important; border-radius: 14px !important; flex-wrap: wrap !important; }
.orders-tab-btn { display: inline-flex !important; align-items: center !important; gap: 8px !important; padding: 7px 16px !important; border-radius: 10px !important; font-size: 12.5px !important; font-weight: 600 !important; color: var(--text-muted) !important; background: transparent !important; border: 1px solid transparent !important; cursor: pointer !important; transition: all 0.2s ease !important; }
.orders-tab-btn:hover { color: var(--text-primary) !important; background: rgba(0,0,0,0.04) !important; }
.orders-tab-btn.active {
  background: var(--bg-secondary) !important;
  border-color: var(--accent-amber) !important;
  color: var(--text-primary) !important;
  font-weight: 700 !important;
  box-shadow: var(--card-shadow) !important;
}

.step-nav-buttons { display: flex !important; align-items: center !important; gap: 10px !important; flex-wrap: wrap !important; }
.btn { display: inline-flex !important; align-items: center !important; justify-content: center !important; gap: 7px !important; font-weight: 700 !important; border-radius: var(--r-md) !important; cursor: pointer !important; transition: all 0.2s ease !important; border: 1px solid transparent !important; font-family: inherit !important; }
.btn-sm { padding: 6px 14px !important; font-size: 12px !important; }
.btn-secondary { background: var(--surface-warm) !important; color: var(--text-primary) !important; border: 1px solid var(--border-warm) !important; }
.btn-secondary:hover { background: var(--surface-hover) !important; border-color: var(--border-amber) !important; }

/* ══════════════════════════════════════════════════════════════════════
   CARDS & PIPELINE
══════════════════════════════════════════════════════════════════════ */
.glass-card, .card, .tbl-wrap, .workflow-pipeline-card { background: var(--surface) !important; border: 1px solid var(--border-warm) !important; border-radius: var(--r-xl) !important; box-shadow: var(--shadow-card) !important; position: relative !important; overflow: hidden !important; transition: all 0.22s ease !important; }
.glass-card::before, .card::before, .workflow-pipeline-card::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 1px; background: linear-gradient(90deg, transparent, rgba(245,158,11,0.22), transparent); }
.glass-card:hover, .card:hover { border-color: var(--border-amber) !important; background: var(--surface-warm) !important; box-shadow: var(--shadow-card-hover) !important; }
.workflow-pipeline-card { padding: 18px 20px !important; margin-bottom: 16px !important; }
.pipeline-header { display: flex !important; justify-content: space-between !important; align-items: center !important; margin-bottom: 14px !important; }
.pipeline-title { font-size: 13.5px !important; font-weight: 700 !important; color: var(--text-primary) !important; }
.pipeline-sub   { font-size: 11px !important; color: var(--text-muted) !important; margin-top: 2px !important; }
.pipeline-steps-grid { display: grid !important; grid-template-columns: repeat(5, 1fr) !important; gap: 10px !important; }
@media (max-width: 900px) { .pipeline-steps-grid { grid-template-columns: repeat(2, 1fr) !important; } }
.pipeline-step-item { background: var(--surface-warm) !important; border: 1px solid var(--border-warm) !important; border-radius: 12px !important; padding: 14px 12px !important; cursor: pointer !important; transition: all 0.20s ease !important; display: flex !important; flex-direction: column !important; justify-content: flex-start !important; min-height: 96px !important; box-sizing: border-box !important; }
.pipeline-step-item:hover { background: var(--amber-bg) !important; border-color: var(--border-amber) !important; transform: translateY(-2px) !important; box-shadow: var(--shadow-card-hover) !important; }
.step-circle { width: 24px !important; height: 24px !important; border-radius: 50% !important; background: var(--amber-bg) !important; border: 1px solid var(--amber-border) !important; color: var(--amber-deep) !important; font-size: 10.5px !important; font-weight: 800 !important; display: flex !important; align-items: center !important; justify-content: center !important; margin-bottom: 7px !important; }
.step-label  { font-size: 12px !important; font-weight: 700 !important; color: var(--text-primary) !important; line-height: 1.3 !important; margin-bottom: 2px !important; }
.step-status { font-size: 11px !important; font-weight: 700 !important; color: var(--blue) !important; line-height: 1.2 !important; margin-top: 3px !important; }
.step-hint   { font-size: 10.5px !important; color: var(--text-dim) !important; margin-top: 2px !important; line-height: 1.2 !important; }
.middle-grid { display: grid !important; grid-template-columns: 1.55fr 1fr !important; gap: 16px !important; margin-bottom: 16px !important; }
@media (max-width: 990px) { .middle-grid { grid-template-columns: 1fr !important; } }

/* ══════════════════════════════════════════════════════════════════════
   DATA TABLES
══════════════════════════════════════════════════════════════════════ */
.tbl-wrap { border-radius: var(--r-md) !important; overflow-x: auto !important; overflow-y: auto !important; max-width: 100% !important; scrollbar-width: thin !important; scrollbar-color: rgba(217,119,6,0.30) rgba(0,0,0,0.04) !important; -webkit-overflow-scrolling: touch !important; }
.tbl-wrap::-webkit-scrollbar          { width: 6px; height: 6px; }
.tbl-wrap::-webkit-scrollbar-track    { background: rgba(0,0,0,0.03); border-radius: 4px; }
.tbl-wrap::-webkit-scrollbar-thumb    { background: rgba(0,0,0,0.12); border-radius: 4px; }
.tbl-wrap::-webkit-scrollbar-thumb:hover { background: rgba(217,119,6,0.50); }
table.tbl, .data-table { width: 100% !important; border-collapse: collapse !important; }
table.tbl th, .data-table th { position: sticky !important; top: 0 !important; z-index: 10 !important; background: #F7F5F0 !important; color: var(--text-muted) !important; font-size: 10.5px !important; font-weight: 700 !important; text-transform: uppercase !important; letter-spacing: 0.08em !important; border-bottom: 1px solid var(--border-warm) !important; padding: 11px 16px !important; text-align: start !important; box-shadow: 0 1px 4px rgba(0,0,0,0.04) !important; }
table.tbl td, .data-table td { border-bottom: 1px solid rgba(0,0,0,0.042) !important; border-left: none !important; border-right: none !important; padding: 14px 16px !important; color: var(--text-primary) !important; font-size: 13px !important; font-weight: 500 !important; transition: background 0.15s ease !important; }
table.tbl tbody tr:hover td, .data-table tbody tr:hover td { background: var(--surface-warm) !important; }

/* ══════════════════════════════════════════════════════════════════════
   FORMS & INPUTS
══════════════════════════════════════════════════════════════════════ */
input, select, textarea, .form-control, .inp, .input, .search-pill-input {
  background: var(--input-bg) !important;
  border: 1px solid var(--border-color) !important;
  color: var(--text-primary) !important;
  border-radius: var(--r-sm) !important;
  padding: 9px 14px !important;
  font-size: 13px !important;
  outline: none !important;
  font-family: inherit !important;
  font-variant-numeric: lining-nums tabular-nums !important;
  transition: border-color 0.18s ease, box-shadow 0.18s ease !important;
}
input:focus, select:focus, textarea:focus, .form-control:focus, .inp:focus { border-color: var(--amber) !important; box-shadow: 0 0 0 3px rgba(245,158,11,0.12) !important; }
select option {
  background: var(--bg-secondary) !important;
  color: var(--text-primary) !important;
}

/* ══════════════════════════════════════════════════════════════════════
   MODALS & COMMAND PALETTE
══════════════════════════════════════════════════════════════════════ */
.modal-overlay { position: fixed !important; inset: 0 !important; background: rgba(28,25,23,0.55) !important; backdrop-filter: blur(8px) !important; z-index: 2000 !important; display: none !important; align-items: center !important; justify-content: center !important; padding: 16px !important; }
.modal-overlay.open { display: flex !important; }
#modal-cmd.modal-overlay { align-items: flex-start !important; padding-top: 10vh !important; }
.cmd-palette {
  width: 100% !important;
  max-width: 600px !important;
  background: var(--bg-secondary) !important;
  border: 1px solid var(--accent-amber) !important;
  border-radius: var(--r-xl) !important;
  box-shadow: var(--shadow-dark) !important;
  overflow: hidden !important;
  color: var(--text-primary) !important;
}
.cmd-input-wrap { display: flex !important; align-items: center !important; gap: 12px !important; padding: 16px 20px !important; border-bottom: 1px solid var(--border-warm) !important; }
.cmd-input { flex: 1 !important; background: transparent !important; border: none !important; font-size: 15px !important; font-weight: 600 !important; color: var(--text-primary) !important; outline: none !important; }
.cmd-results { max-height: 380px !important; overflow-y: auto !important; padding: 10px !important; }
.cmd-item { display: flex !important; align-items: center !important; justify-content: space-between !important; padding: 10px 14px !important; border-radius: 11px !important; cursor: pointer !important; margin-bottom: 4px !important; transition: all 0.15s ease !important; color: var(--text-primary) !important; }
.cmd-item:hover { background: var(--surface-warm) !important; }
#toast { position: fixed !important; bottom: 28px !important; left: 50% !important; transform: translateX(-50%) translateY(10px) !important; background: var(--dock-bg) !important; border: 1px solid rgba(255,255,255,0.10) !important; border-radius: 9999px !important; padding: 11px 26px !important; display: flex !important; align-items: center !important; gap: 10px !important; z-index: 999999 !important; opacity: 0 !important; visibility: hidden !important; transition: all 0.22s ease !important; color: #ffffff !important; }
#toast.show { opacity: 1 !important; visibility: visible !important; transform: translateX(-50%) translateY(0) !important; }

/* ══════════════════════════════════════════════════════════════════════
   BADGES
══════════════════════════════════════════════════════════════════════ */
.badge { display: inline-flex !important; align-items: center !important; gap: 4px !important; padding: 3px 10px !important; border-radius: 9999px !important; font-size: 11px !important; font-weight: 700 !important; }
.badge-green  { background: var(--emerald-bg) !important; color: var(--emerald) !important; border: 1px solid var(--emerald-border) !important; }
.badge-red    { background: var(--rose-bg) !important; color: var(--rose) !important; border: 1px solid var(--rose-border) !important; }
.badge-purple { background: var(--amber-bg) !important; color: var(--amber-deep) !important; border: 1px solid var(--amber-border) !important; }
.badge-slate  { background: rgba(0,0,0,0.06) !important; color: var(--text-muted) !important; border: 1px solid var(--border-warm) !important; }

/* ══════════════════════════════════════════════════════════════════════
   14. NATIVE SCROLLING & RESPONSIVE CANVAS ARCHITECTURE
══════════════════════════════════════════════════════════════════════ */
html {
  height: 100%;
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
}

body {
  min-height: 100vh;
  background-color: var(--bg-main) !important;
  background-image: var(--canvas-glow) !important;
  background-attachment: fixed !important;
  color: var(--text-main) !important;
  font-family: 'Plus Jakarta Sans', 'Inter', 'Cairo', sans-serif;
  font-variant-numeric: lining-nums tabular-nums;
  -webkit-tap-highlight-color: transparent;
  overflow-x: hidden !important;
  overflow-y: auto !important;
  padding-bottom: 80px !important;
  margin: 0;
  display: block !important;
  position: static !important;
}

[dir="rtl"] body {
  font-family: 'Cairo', 'Plus Jakarta Sans', sans-serif;
}

.app-chassis {
  width: 100%;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  position: relative;
}

.content {
  width: 100% !important;
  max-width: 1440px !important;
  margin: 0 auto !important;
  padding: 12px 24px 80px !important;
  box-sizing: border-box !important;
  overflow: visible !important;
}

/* Strict single-view page display rules */
.page {
  display: none !important;
  width: 100% !important;
  box-sizing: border-box !important;
}
.page.active {
  display: block !important;
  animation: fadeInUp 0.35s cubic-bezier(0.16, 1, 0.3, 1) forwards !important;
  will-change: opacity, transform;
}

/* ══════════════════════════════════════════════════════════════════════
   15. TOP DOCK THEME TOGGLE BUTTON & FLOATING PILL (Night & Dark Mode)
══════════════════════════════════════════════════════════════════════ */
.dock-theme-btn {
  display: inline-flex !important;
  align-items: center !important;
  gap: 7px !important;
  background: rgba(255, 255, 255, 0.08) !important;
  border: 1px solid rgba(255, 255, 255, 0.12) !important;
  color: #FFFFFF !important;
  padding: 6px 14px !important;
  border-radius: var(--radius-pill) !important;
  cursor: pointer !important;
  font-size: 12px !important;
  font-weight: 700 !important;
  transition: all 0.22s cubic-bezier(0.16, 1, 0.3, 1) !important;
  outline: none !important;
  user-select: none !important;
}
.dock-theme-btn:hover {
  background: rgba(255, 255, 255, 0.16) !important;
  border-color: var(--accent-amber) !important;
  transform: translateY(-1px) scale(1.02) !important;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.25) !important;
}
.dock-theme-btn .theme-icon {
  font-size: 13px !important;
  line-height: 1 !important;
}
.dock-theme-btn .dark-icon { display: none !important; }
.dock-theme-btn .light-icon { display: inline !important; }

html.dark .dock-theme-btn,
body.dark .dock-theme-btn,
[data-theme="dark"] .dock-theme-btn {
  background: rgba(234, 179, 8, 0.15) !important;
  border-color: rgba(234, 179, 8, 0.38) !important;
  color: #FCD34D !important;
}
html.dark .dock-theme-btn:hover,
body.dark .dock-theme-btn:hover,
[data-theme="dark"] .dock-theme-btn:hover {
  background: rgba(234, 179, 8, 0.25) !important;
  border-color: rgba(234, 179, 8, 0.60) !important;
  box-shadow: 0 4px 16px rgba(234, 179, 8, 0.25) !important;
}
html.dark .dock-theme-btn .light-icon,
body.dark .dock-theme-btn .light-icon,
[data-theme="dark"] .dock-theme-btn .light-icon { display: none !important; }
html.dark .dock-theme-btn .dark-icon,
body.dark .dock-theme-btn .dark-icon,
[data-theme="dark"] .dock-theme-btn .dark-icon { display: inline !important; }

/* Floating Quick Theme Switcher Pill */
.floating-theme-switch-btn {
  position: fixed !important;
  bottom: 24px !important;
  left: 24px !important;
  z-index: 99999 !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 8px !important;
  background: var(--dock-bg) !important;
  color: var(--dock-text) !important;
  border: 1px solid rgba(255, 255, 255, 0.15) !important;
  box-shadow: 0 10px 30px -4px rgba(0, 0, 0, 0.40) !important;
  border-radius: 9999px !important;
  padding: 8px 18px !important;
  cursor: pointer !important;
  font-family: inherit !important;
  font-size: 13px !important;
  font-weight: 800 !important;
  transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1) !important;
  user-select: none !important;
}
.floating-theme-switch-btn:hover {
  transform: translateY(-2px) scale(1.03) !important;
  box-shadow: 0 14px 36px -4px rgba(0, 0, 0, 0.55) !important;
  border-color: var(--accent-amber) !important;
}
.floating-theme-switch-btn .dark-icon { display: none !important; }
.floating-theme-switch-btn .light-icon { display: inline-block !important; }

html.dark .floating-theme-switch-btn,
body.dark .floating-theme-switch-btn,
[data-theme="dark"] .floating-theme-switch-btn {
  background: #27272A !important;
  border-color: rgba(234, 179, 8, 0.40) !important;
  color: #FCD34D !important;
}
html.dark .floating-theme-switch-btn .dark-icon,
body.dark .floating-theme-switch-btn .dark-icon,
[data-theme="dark"] .floating-theme-switch-btn .dark-icon { display: inline-block !important; }
html.dark .floating-theme-switch-btn .light-icon,
body.dark .floating-theme-switch-btn .light-icon,
[data-theme="dark"] .floating-theme-switch-btn .light-icon { display: none !important; }

/* Off-canvas mobile overlay */
.mob-overlay {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.50);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  z-index: 999;
}
.mob-overlay.open, .mob-overlay.active {
  display: block !important;
}

/* ══════════════════════════════════════════════════════════════════════
   16. ULTRA-LUXURY DARK & NIGHT MODE THEME SYSTEM (Deep Glassmorphic Obsidian)
══════════════════════════════════════════════════════════════════════ */
/* Dark Mode Overrides for Bento Cards & Modules */
[data-theme="dark"] .bento-card,
[data-theme="dark"] .card,
[data-theme="dark"] .glass-card,
[data-theme="dark"] .stat-card,
[data-theme="dark"] .kpi-card,
[data-theme="dark"] .pane-stream,
[data-theme="dark"] .workflow-pipeline-card,
[data-theme="dark"] .tbl-wrap,
[data-theme="dark"] .stream-card,
[data-theme="dark"] .greeting-stat-pill {
  background: var(--surface) !important;
  border-color: var(--border-subtle) !important;
  color: var(--text-main) !important;
  box-shadow: var(--shadow-card) !important;
}

[data-theme="dark"] .bento-card:hover,
[data-theme="dark"] .card:hover,
[data-theme="dark"] .glass-card:hover,
[data-theme="dark"] .greeting-stat-pill:hover {
  background: var(--surface-warm) !important;
  border-color: var(--border-glow) !important;
  box-shadow: var(--shadow-card-hover) !important;
}

[data-theme="dark"] .bento-card-title,
[data-theme="dark"] .greeting-heading,
[data-theme="dark"] .profile-lead-name,
[data-theme="dark"] .stat-pill-num,
[data-theme="dark"] .kpi-num,
[data-theme="dark"] .kpi-number,
[data-theme="dark"] .block-heading,
[data-theme="dark"] .sim-box-title {
  color: var(--text-main) !important;
}

[data-theme="dark"] .bento-card-sub,
[data-theme="dark"] .greeting-sub,
[data-theme="dark"] .profile-lead-role,
[data-theme="dark"] .stat-pill-label,
[data-theme="dark"] .kpi-title,
[data-theme="dark"] .block-time-range,
[data-theme="dark"] .sim-input-label,
[data-theme="dark"] .field-label,
[data-theme="dark"] .card-sub-desc {
  color: var(--text-muted) !important;
}

[data-theme="dark"] .profile-location-chip,
[data-theme="dark"] .accordion-bar-track,
[data-theme="dark"] .day-track,
[data-theme="dark"] .sim-results-box,
[data-theme="dark"] .sim-empty-state {
  background: var(--surface-alt) !important;
  border-color: var(--border-subtle) !important;
  color: var(--text-secondary) !important;
}

[data-theme="dark"] .bento-dark-tasks-card {
  background: #080A0F !important;
  border-color: rgba(245, 158, 11, 0.25) !important;
}

[data-theme="dark"] .dark-task-row {
  border-bottom-color: rgba(255, 255, 255, 0.06) !important;
}
[data-theme="dark"] .dark-task-row:hover {
  background: rgba(255, 255, 255, 0.04) !important;
}

/* Dark Mode Data Tables */
[data-theme="dark"] table.tbl,
[data-theme="dark"] .minimal-table,
[data-theme="dark"] .data-table {
  background: var(--surface) !important;
  color: var(--text-main) !important;
}

[data-theme="dark"] table.tbl th,
[data-theme="dark"] .minimal-table th,
[data-theme="dark"] .data-table th {
  background: var(--surface-alt) !important;
  color: var(--text-muted) !important;
  border-bottom-color: var(--border-warm) !important;
}

[data-theme="dark"] table.tbl td,
[data-theme="dark"] .minimal-table td,
[data-theme="dark"] .data-table td {
  border-bottom-color: var(--border-subtle) !important;
  color: var(--text-primary) !important;
}

[data-theme="dark"] table.tbl tbody tr:hover td,
[data-theme="dark"] .minimal-table tbody tr:hover td,
[data-theme="dark"] .data-table tbody tr:hover td {
  background: rgba(245, 158, 11, 0.08) !important;
}

/* Dark Mode Forms & Search */
[data-theme="dark"] input,
[data-theme="dark"] select,
[data-theme="dark"] textarea,
[data-theme="dark"] .search-pill-input,
[data-theme="dark"] .form-control,
[data-theme="dark"] .inp,
[data-theme="dark"] .input {
  background: var(--surface-alt) !important;
  border-color: var(--border-warm) !important;
  color: var(--text-primary) !important;
}

[data-theme="dark"] input:focus,
[data-theme="dark"] select:focus,
[data-theme="dark"] textarea:focus,
[data-theme="dark"] .search-pill-input:focus {
  border-color: var(--accent-amber) !important;
  box-shadow: 0 0 0 3px rgba(234, 179, 8, 0.15) !important;
}

[data-theme="dark"] select option {
  background: #121622 !important;
  color: #F8FAFC !important;
}

/* Dark Mode Modals & Overlays */
[data-theme="dark"] .modal,
[data-theme="dark"] .modal-box,
[data-theme="dark"] .modal-box-custom {
  background: #121622 !important;
  border-color: var(--border-warm) !important;
  color: var(--text-primary) !important;
  box-shadow: var(--shadow-dark) !important;
}

[data-theme="dark"] .cmd-palette {
  background: #121622 !important;
  border-color: var(--accent-amber) !important;
  box-shadow: var(--shadow-dark) !important;
}

[data-theme="dark"] .cmd-item {
  color: var(--text-primary) !important;
}
[data-theme="dark"] .cmd-item:hover {
  background: var(--surface-warm) !important;
}

[data-theme="dark"] .notifications-dropdown {
  background: #121622 !important;
  border-color: var(--border-warm) !important;
}

[data-theme="dark"] .btn-secondary {
  background: var(--surface-alt) !important;
  border-color: var(--border-warm) !important;
  color: var(--text-primary) !important;
}
[data-theme="dark"] .btn-secondary:hover {
  background: var(--surface-warm) !important;
  border-color: var(--border-glow) !important;
}

/* Filter Chips in Dark Mode */
[data-theme="dark"] .filter-chip {
  background: var(--surface-alt) !important;
  border-color: var(--border-warm) !important;
  color: var(--text-secondary) !important;
}
[data-theme="dark"] .filter-chip:hover {
  background: var(--surface-warm) !important;
  color: var(--text-primary) !important;
}
[data-theme="dark"] .filter-chip.active {
  background: var(--accent-amber) !important;
  border-color: var(--accent-amber) !important;
  color: #18181B !important;
}

/* ══════════════════════════════════════════════════════════════════════
   COMPONENT & UTILITY RULES (REPLACING INLINE STYLES)
══════════════════════════════════════════════════════════════════════ */

/* SVG Definitions hide */
.svg-defs { position: absolute !important; pointer-events: none !important; opacity: 0 !important; }

/* Notification Header Group */
.notif-title-group { display: flex; align-items: center; gap: 8px; }
.notif-bell-icon { font-size: 16px; }

/* Card Headers & Titles */
.card-header-flex { display: flex; justify-content: space-between; align-items: center; margin-bottom: 12px; flex-wrap: wrap; gap: 8px; }
.card-header-flex-sm { display: flex; justify-content: space-between; align-items: center; margin-bottom: 8px; flex-wrap: wrap; gap: 8px; }
.card-title-main { font-size: 14px !important; font-weight: 800 !important; color: var(--text-primary) !important; margin: 0 !important; display: flex !important; align-items: center !important; gap: 8px !important; }
.card-sub-desc { color: var(--text-muted) !important; font-size: 11px !important; margin-top: 2px !important; }

/* Form Controls & Labels */
.field-label, label.field-label {
  font-size: 11.5px !important;
  font-weight: 700 !important;
  color: var(--text-secondary) !important;
  margin-bottom: 4px !important;
  display: block !important;
}
.field-label-sm { font-size: 11px !important; font-weight: 700 !important; color: var(--text-secondary) !important; margin-bottom: 4px !important; display: block !important; }
.field-label-lg { font-size: 12px !important; font-weight: 700 !important; color: var(--text-secondary) !important; margin-bottom: 6px !important; display: block !important; }

/* Filter Chips */
.filter-chip-group { display: flex; gap: 6px; align-items: center; }
.filter-chip {
  font-size: 11px !important;
  padding: 4px 10px !important;
  border-radius: 9999px !important;
  border: 1px solid var(--border-warm) !important;
  background: var(--surface-warm) !important;
  color: var(--text-muted) !important;
  cursor: pointer !important;
  transition: all 0.18s ease !important;
  font-weight: 600 !important;
}
.filter-chip:hover {
  background: var(--surface-hover) !important;
  color: var(--text-primary) !important;
  border-color: var(--border-amber) !important;
}
.filter-chip.active {
  background: var(--dock-bg) !important;
  color: #FFFFFF !important;
  border-color: var(--dock-bg) !important;
  font-weight: 700 !important;
  box-shadow: 0 2px 8px rgba(0,0,0,0.18) !important;
}

/* Charts Containers */
.chart-wrap-210 { height: 210px; position: relative; width: 100%; }
.chart-wrap-250 { height: 250px; position: relative; width: 100%; }
.chart-wrap-80  { height: 80px; position: relative; width: 100%; margin-bottom: 12px; }

/* Simulator Card & Components */
.sim-box {
  background: var(--amber-bg) !important;
  border: 1px solid var(--amber-border) !important;
  border-radius: var(--r-md) !important;
  padding: 10px 12px !important;
  margin-bottom: 10px !important;
}
.sim-label { color: var(--amber-deep) !important; font-size: 10.5px !important; font-weight: 700 !important; display: block !important; margin-bottom: 4px !important; }
.sim-select {
  width: 100% !important;
  background: var(--input-bg) !important;
  border: 1px solid var(--border-color) !important;
  border-radius: 8px !important;
  color: var(--text-primary) !important;
  font-size: 12px !important;
  padding: 8px 10px !important;
  outline: none !important;
}
.sim-batch-row { display: flex !important; justify-content: space-between !important; align-items: center !important; margin-top: 8px !important; }
.sim-batch-label { color: var(--text-muted) !important; font-size: 11px !important; }
.sim-qty-input {
  width: 80px !important;
  background: var(--input-bg) !important;
  border: 1px solid var(--border-color) !important;
  border-radius: 8px !important;
  color: var(--amber-deep) !important;
  font-size: 12px !important;
  padding: 8px 10px !important;
  outline: none !important;
  text-align: center !important;
  font-weight: 800 !important;
}
.sim-results-box {
  display: flex !important;
  flex-direction: column !important;
  gap: 6px !important;
  font-size: 11.5px !important;
  margin-bottom: 12px !important;
  min-height: 90px !important;
  max-height: 130px !important;
  overflow-y: auto !important;
}
.sim-empty-state { text-align: center !important; padding: 25px 10px !important; color: var(--text-muted) !important; font-size: 12px !important; }
.sim-btn-action {
  width: 100% !important;
  background: var(--dock-bg) !important;
  color: #FFFFFF !important;
  font-size: 12.5px !important;
  font-weight: 800 !important;
  padding: 10px !important;
  border-radius: 9999px !important;
  border: 1px solid rgba(255,255,255,0.08) !important;
  cursor: pointer !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 7px !important;
  box-shadow: 0 4px 14px rgba(0,0,0,0.18) !important;
  transition: all 0.18s ease !important;
}
.sim-btn-action:hover {
  background: #292524 !important;
  transform: translateY(-1px) !important;
  box-shadow: 0 6px 20px rgba(0,0,0,0.25) !important;
}

/* Peak stat card */
.stat-highlight-pill {
  margin-top: 10px !important;
  padding: 6px 12px !important;
  background: rgba(6,182,212,0.08) !important;
  border: 1px solid rgba(6,182,212,0.20) !important;
  border-radius: 10px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
}
.stat-highlight-text { font-size: 11px !important; color: #0891B2 !important; font-weight: 700 !important; }
.stat-highlight-badge {
  background: #0891B2 !important;
  color: #FFFFFF !important;
  padding: 2px 8px !important;
  border-radius: 9999px !important;
  font-size: 10.5px !important;
  font-weight: 800 !important;
  margin-inline-start: 8px !important;
}
.stat-highlight-sub { font-size: 10.5px !important; color: var(--text-muted) !important; }

/* Table Utilities */
.tbl-scroll-h280 { max-height: 280px !important; overflow-y: auto !important; }
.tbl-scroll-h480 { max-height: 480px !important; overflow-y: auto !important; border-radius: 10px !important; }
.tbl-scroll-h500 { max-height: 500px !important; overflow-y: auto !important; border-radius: 10px !important; }
.tbl-col-80  { width: 80px !important; }
.tbl-col-100 { width: 100px !important; }
.tbl-col-110 { width: 110px !important; }
.tbl-col-140 { width: 140px !important; }
.tbl-col-150 { width: 150px !important; }
.tbl-col-160 { width: 160px !important; }
.tbl-col-180 { width: 180px !important; }
.tbl-col-200 { width: 200px !important; }
.tbl-col-center { text-align: center !important; }

/* Empty Table States */
.empty-table-cell { text-align: center !important; padding: 40px 20px !important; color: var(--text-muted) !important; }
.empty-table-icon-wrap {
  width: 48px !important;
  height: 48px !important;
  margin: 0 auto 12px !important;
  border-radius: 14px !important;
  background: var(--amber-bg) !important;
  border: 1px solid var(--amber-border) !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  color: var(--amber-deep) !important;
  font-size: 1.5rem !important;
}
.empty-table-title { font-weight: 700 !important; color: var(--text-primary) !important; font-size: 14px !important; margin-bottom: 6px !important; }
.empty-table-sub   { font-size: 12px !important; color: var(--text-muted) !important; max-width: 420px !important; margin: 0 auto !important; line-height: 1.5 !important; }

/* Recipes Summary Banner */
.recipe-hero-card {
  background: var(--surface) !important;
  border: 1px solid var(--border-warm) !important;
  border-radius: var(--r-xl) !important;
  padding: 18px 22px !important;
  margin-bottom: 18px !important;
  box-shadow: var(--shadow-card) !important;
}
.recipe-hero-title { font-size: 22px !important; font-weight: 800 !important; color: var(--text-primary) !important; margin: 0 !important; }
.recipe-hero-cost  { font-size: 26px !important; font-weight: 900 !important; color: var(--amber-deep) !important; }

/* Waste Card & Highlights */
.waste-entry-card {
  padding: 20px !important;
  border-radius: var(--r-xl) !important;
  border: 1px solid var(--rose-border) !important;
  background: var(--surface) !important;
  box-shadow: var(--shadow-card) !important;
}
.waste-header-title { color: var(--rose) !important; font-size: 15px !important; font-weight: 800 !important; display: flex !important; align-items: center !important; gap: 8px !important; margin-bottom: 12px !important; }

/* Shipment Notice Banner */
.shipment-banner {
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
  padding: 10px 16px !important;
  border-radius: 12px !important;
  background: var(--amber-bg) !important;
  border: 1px solid var(--amber-border) !important;
  margin-bottom: 16px !important;
}
.shipment-banner-text { color: var(--amber-deep) !important; font-size: 13px !important; font-weight: 600 !important; }

/* Standard Dimension Utilities */
.w-full-h38 { width: 100% !important; height: 38px !important; box-sizing: border-box !important; }
.w-full-h42 { width: 100% !important; height: 42px !important; box-sizing: border-box !important; }
.w-80px-h38 { width: 80px !important; height: 38px !important; }
.w-150px    { width: 150px !important; }
.w-160px    { width: 160px !important; }
.w-180px    { width: 180px !important; }
.w-200px    { width: 200px !important; }
.w-240px    { width: 240px !important; }
.btn-h38-pill { height: 38px !important; padding: 0 16px !important; border-radius: 9999px !important; }
.btn-h40-pill { height: 40px !important; padding: 0 16px !important; border-radius: 9999px !important; }
.btn-h42-pill { height: 42px !important; padding: 0 18px !important; border-radius: 9999px !important; }

/* Flex & Alignment Helpers */
.flex-1-min-0 { flex: 1 !important; min-width: 0 !important; }
.flex-end-row { display: flex !important; justify-content: flex-end !important; gap: 10px !important; }
.flex-col-gap-8 { display: flex !important; flex-direction: column !important; gap: 8px !important; }
.flex-col-gap-12 { display: flex !important; flex-direction: column !important; gap: 12px !important; }
.grid-1fr-1fr { display: grid !important; grid-template-columns: 1fr 1fr !important; gap: 10px !important; }
.grid-3col { display: grid !important; grid-template-columns: repeat(3, 1fr) !important; gap: 12px !important; }
@media (max-width: 640px) { .grid-1fr-1fr, .grid-3col { grid-template-columns: 1fr !important; } }

/* ── Typography & Atomic Utilities ───────────────────────────────────── */
.text-center { text-align: center !important; }
.text-end { text-align: end !important; }
.cursor-pointer { cursor: pointer !important; }
.rounded-8 { border-radius: 8px !important; }
.rounded-10 { border-radius: 10px !important; }
.rounded-12 { border-radius: 12px !important; }
.rounded-14 { border-radius: 14px !important; }
.rounded-16 { border-radius: 16px !important; }
.fs-10 { font-size: 10px !important; }
.fs-10-5 { font-size: 10.5px !important; }
.fs-11 { font-size: 11px !important; }
.fs-11-5 { font-size: 11.5px !important; }
.fs-12 { font-size: 12px !important; }
.fs-13 { font-size: 13px !important; }
.fs-14 { font-size: 14px !important; }
.fs-15 { font-size: 15px !important; }
.fs-16 { font-size: 16px !important; }
.fs-17 { font-size: 17px !important; }
.fs-18 { font-size: 18px !important; }
.fs-20 { font-size: 20px !important; }
.fs-22 { font-size: 22px !important; }
.fs-24 { font-size: 24px !important; }
.fs-26 { font-size: 26px !important; }
.icon-amber { color: var(--amber-deep) !important; }
.icon-amber-box {
  width: 40px !important;
  height: 40px !important;
  border-radius: 12px !important;
  background: var(--amber-bg) !important;
  border: 1px solid var(--amber-border) !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  color: var(--amber-deep) !important;
  font-size: 1.2rem !important;
}
.kpi-amber-badge {
  background: var(--amber-bg) !important;
  border: 1px solid var(--amber-border) !important;
  color: var(--amber-deep) !important;
}
.empty-state-large {
  display: none;
  padding: 36px 20px !important;
  text-align: center !important;
  color: var(--text-muted) !important;
}
.print-invoice-title {
  font-size: 20px !important;
  font-weight: 900 !important;
  color: var(--text-primary) !important;
  margin: 0 !important;
}
.print-invoice-sub {
  font-size: 11px !important;
  color: var(--text-muted) !important;
  margin-top: 2px !important;
}
.print-invoice-num {
  font-size: 16px !important;
  font-weight: 900 !important;
  color: var(--text-primary) !important;
}
.print-invoice-date {
  font-size: 12px !important;
  color: var(--text-muted) !important;
}
.print-th-header {
  background: var(--surface-warm) !important;
  border-bottom: 2px solid var(--border-warm) !important;
  text-align: start !important;
}
.print-footer-row {
  display: flex !important;
  justify-content: space-between !important;
  margin-top: 40px !important;
  padding-top: 20px !important;
  border-top: 1px dashed var(--border-warm) !important;
  font-size: 12px !important;
}

.btn-rose {
  background: var(--rose-bg) !important;
  border: 1px solid var(--rose-border) !important;
  color: var(--rose) !important;
  font-weight: 700 !important;
}
.btn-rose:hover {
  background: rgba(220,38,38,0.14) !important;
  border-color: var(--rose) !important;
}
.icon-pill-sm {
  width: 32px !important;
  height: 32px !important;
  border-radius: 9px !important;
  background: var(--amber-bg) !important;
  border: 1px solid var(--amber-border) !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  color: var(--amber-deep) !important;
  flex-shrink: 0 !important;
}
.cs-tabs-header {
  display: flex !important;
  background: rgba(0,0,0,0.03) !important;
  padding: 4px !important;
  border-radius: 12px !important;
  gap: 4px !important;
  margin-bottom: 14px !important;
  border: 1px solid var(--border-warm) !important;
}
.cs-raw-preview-box {
  display: none;
  background: var(--surface-warm) !important;
  border: 1px solid var(--border-warm) !important;
  border-radius: 12px !important;
  padding: 12px !important;
  box-sizing: border-box !important;
}
.cs-raw-preview-header {
  display: flex !important;
  justify-content: space-between !important;
  align-items: center !important;
  margin-bottom: 8px !important;
  padding-bottom: 6px !important;
  border-bottom: 1px solid var(--border-warm) !important;
}

.manual-order-card {
  max-width: 850px !important;
  margin: 0 auto !important;
  padding: 24px 28px !important;
  border-radius: var(--r-xl) !important;
  border: 1px solid var(--border-warm) !important;
  background: var(--surface) !important;
  box-shadow: var(--shadow-elevated) !important;
}
.sub-card-box {
  background: var(--surface-warm) !important;
  border: 1px solid var(--border-warm) !important;
  border-radius: 14px !important;
  padding: 16px 18px !important;
}
.grid-110-1fr { display: grid !important; grid-template-columns: 110px 1fr !important; gap: 8px !important; }
.grid-1fr-110-auto { display: grid !important; grid-template-columns: 1fr 110px auto !important; gap: 10px !important; align-items: center !important; }
.tbl-scroll-h300 { max-height: 300px !important; overflow: auto !important; }
.tbl-scroll-h460 { max-height: 460px !important; overflow-y: auto !important; border-radius: 10px !important; }

.excel-upload-card {
  max-width: 850px !important;
  margin: 0 auto !important;
  padding: 24px 28px !important;
  border-radius: var(--r-xl) !important;
  border: 1px solid var(--border-warm) !important;
  background: var(--surface) !important;
  box-shadow: var(--shadow-elevated) !important;
}
.excel-preview-box {
  display: none;
  margin-top: 18px !important;
  background: var(--surface-warm) !important;
  border: 1px solid var(--border-warm) !important;
  border-radius: 14px !important;
  padding: 16px 18px !important;
}
.excel-upload-dropzone {
  border: 2px dashed var(--border-warm) !important;
  border-radius: 14px !important;
  padding: 28px 20px !important;
  text-align: center !important;
  cursor: pointer !important;
  background: var(--surface-warm) !important;
  transition: all 0.2s ease !important;
}
.excel-upload-dropzone:hover {
  border-color: var(--amber) !important;
  background: var(--amber-bg) !important;
}
.icon-box-lg {
  width: 52px !important;
  height: 52px !important;
  margin: 0 auto 12px !important;
  border-radius: 16px !important;
  background: var(--amber-bg) !important;
  border: 1px solid var(--amber-border) !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  color: var(--amber-deep) !important;
  font-size: 1.5rem !important;
}
.recipe-side-card {
  height: fit-content !important;
  max-height: 720px !important;
  display: flex !important;
  flex-direction: column !important;
}
.recipe-list-scroll {
  flex: 1 !important;
  overflow-y: auto !important;
  max-height: 500px !important;
  padding-inline-end: 4px !important;
}
.recipe-icon-box {
  width: 42px !important;
  height: 42px !important;
  border-radius: 10px !important;
  background: var(--amber-bg) !important;
  border: 1px solid var(--amber-border) !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  font-size: 20px !important;
  color: var(--amber-deep) !important;
  flex-shrink: 0 !important;
}
.tag-amber-badge {
  text-align: center !important;
  padding: 5px 14px !important;
  background: var(--amber-bg) !important;
  border: 1px solid var(--amber-border) !important;
  border-radius: 10px !important;
}
.tag-amber-label {
  font-size: 10.5px !important;
  color: var(--amber-deep) !important;
  font-weight: 700 !important;
  display: block !important;
}
.tag-amber-val {
  font-size: 16px !important;
  font-weight: 900 !important;
  color: var(--amber-deep) !important;
}







/* Micro-indicators & color helpers */
.kpi-cyan { color: #0891B2 !important; }
.kpi-amber { color: var(--amber-deep) !important; }
.kpi-green { color: var(--emerald) !important; }
.kpi-purple { color: #7C3AED !important; }
.unread-dot {
  position: absolute;
  top: 6px;
  right: 6px;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--accent-amber);
  box-shadow: 0 0 6px rgba(234, 179, 8, 0.7);
}
.amber-active-fill {
  background: var(--accent-amber) !important;
  box-shadow: 0 0 12px rgba(234, 179, 8, 0.5) !important;
}
.profile-avatar-emoji {
  font-size: 24px;
}
.profile-meta-info {
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.loc-icon {
  font-size: 13px;
}
.sim-icon {
  font-size: 14px;
}
.timeline-header-badges {
  display: flex;
  align-items: center;
  gap: 8px;
}
.timeline-slot-col {
  display: flex;
  flex-direction: column;
}

/* ══════════════════════════════════════════════════════════════════════
   PHASE 2 — THE UNIFIED VISUAL DESIGN SYSTEM FOUNDATION
   Warm Minimalist Luxury SaaS ERP · 60fps Native Performance
══════════════════════════════════════════════════════════════════════ */

/* ── 1. GLOBAL CANVAS & BODY ── */
html, body {
  background-color: #FAF7F2 !important;
  background: #FAF7F2 !important;
  color: #18181B !important;
  font-family: 'Plus Jakarta Sans', 'Inter', 'Cairo', sans-serif !important;
  font-variant-numeric: lining-nums tabular-nums !important;
  -webkit-font-smoothing: antialiased !important;
  -moz-osx-font-smoothing: grayscale !important;
  margin: 0 !important;
  padding: 0 !important;
}

[dir="rtl"] body {
  font-family: 'Cairo', 'Plus Jakarta Sans', sans-serif !important;
}

/* ── 2. TYPOGRAPHY HIERARCHY SCALE ── */
h1, .page-title, .greeting-heading {
  font-size: 28px !important;
  font-weight: 800 !important;
  color: #18181B !important;
  letter-spacing: -0.02em !important;
  line-height: 1.25 !important;
  margin-bottom: 6px !important;
}

h2, .section-title {
  font-size: 20px !important;
  font-weight: 700 !important;
  color: #18181B !important;
  letter-spacing: -0.01em !important;
  line-height: 1.3 !important;
  margin-bottom: 6px !important;
}

h3, h4, .card-title, .card-title-main, .bento-card-title {
  font-size: 16px !important;
  font-weight: 700 !important;
  color: #18181B !important;
  letter-spacing: -0.01em !important;
  line-height: 1.35 !important;
}

p, body, td, span, div {
  font-size: 14px;
  color: inherit;
}

.text-secondary, [class*="text-slate-400"], [class*="text-gray-400"], [class*="text-zinc-400"], .greeting-sub, .bento-card-sub, .card-sub {
  color: #71717A !important;
  font-size: 13px !important;
}

.text-muted, [class*="text-slate-500"], [class*="text-gray-500"], [class*="text-zinc-500"], .meta-text {
  color: #A1A1AA !important;
  font-size: 12px !important;
}

/* KPI Numbers */
.kpi-number, .kpi-num, .stat-pill-num, [id^="kpi-"] {
  font-size: 28px !important;
  font-weight: 800 !important;
  letter-spacing: -0.02em !important;
  font-variant-numeric: lining-nums tabular-nums !important;
  line-height: 1.1 !important;
}
.stat-pill-num {
  font-size: 22px !important;
}

/* ── 3. CARDS & BENTO GRID FOUNDATION ── */
.card, 
.bento-card, 
.glass-card, 
.kpi-card, 
.workflow-pipeline-card, 
.greeting-card-warm, 
.excel-upload-card, 
.recipe-side-card, 
.recipe-hero-card, 
.waste-entry-card, 
.manual-order-card, 
.sub-card-box, 
.notif-card,
[class*="bg-slate-"], 
[class*="bg-gray-"], 
[class*="bg-zinc-"] {
  background-color: #FFFFFF !important;
  color: #18181B !important;
  border: 1px solid rgba(28, 25, 23, 0.05) !important;
  border-radius: 24px !important;
  box-shadow: 0 10px 30px -4px rgba(28, 25, 23, 0.03) !important;
  transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease !important;
  position: relative !important;
  overflow: hidden !important;
}

.card:hover, 
.bento-card:hover, 
.glass-card:hover, 
.kpi-card:hover {
  box-shadow: 0 16px 36px -4px rgba(28, 25, 23, 0.06) !important;
  transform: translateY(-2px) !important;
  border-color: rgba(234, 179, 8, 0.25) !important;
}

/* Bento spacing scale */
.bento-dashboard-grid, .grid-bento {
  display: grid !important;
  gap: 20px !important;
}

/* ── 4. DATA TABLES & DATA GRIDS ── */
.tbl-wrap, .table-container {
  border-radius: 18px !important;
  border: 1px solid rgba(28, 25, 23, 0.06) !important;
  background: #FFFFFF !important;
  overflow-x: auto !important;
  max-width: 100% !important;
}

table, 
table.tbl, 
.data-table, 
.minimal-table,
#fg-master-table, 
#indiv-orders-table, 
#o-selected-table, 
#excel-preview-table, 
#prod-matrix-table, 
#ship-main-table {
  width: 100% !important;
  border-collapse: collapse !important;
  text-align: start !important;
}

/* Table Header */
table th, 
table.tbl th, 
.data-table th, 
.minimal-table th {
  background: #FAF8F4 !important;
  color: #71717A !important;
  font-size: 11.5px !important;
  font-weight: 700 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.06em !important;
  padding: 14px 18px !important;
  border-bottom: 1px solid rgba(28, 25, 23, 0.06) !important;
  border-top: none !important;
  border-left: none !important;
  border-right: none !important;
  text-align: start !important;
  white-space: nowrap !important;
}

/* Table Rows & Cells */
table td, 
table.tbl td, 
.data-table td, 
.minimal-table td {
  padding: 14px 18px !important;
  color: #18181B !important;
  font-size: 13.5px !important;
  font-weight: 500 !important;
  border-bottom: 1px solid rgba(28, 25, 23, 0.045) !important;
  border-top: none !important;
  border-left: none !important;
  border-right: none !important;
  text-align: start !important;
  vertical-align: middle !important;
  min-height: 48px !important;
  transition: background-color 0.15s ease !important;
}

/* Table Row Hover */
table tbody tr:hover td, 
table.tbl tbody tr:hover td, 
.data-table tbody tr:hover td, 
.minimal-table tbody tr:hover td {
  background: #FDFCF9 !important;
}

/* ── 5. INPUTS, SELECTS & FILTERS ── */
input:not([type="checkbox"]):not([type="radio"]):not([type="submit"]):not([type="button"]), 
select, 
textarea, 
.form-control, 
.inp, 
.input {
  background-color: #F5F2EB !important;
  border: 1px solid rgba(28, 25, 23, 0.08) !important;
  color: #18181B !important;
  border-radius: 12px !important;
  height: 42px !important;
  padding: 0 16px !important;
  font-size: 13.5px !important;
  font-family: inherit !important;
  font-variant-numeric: lining-nums tabular-nums !important;
  outline: none !important;
  transition: border-color 0.18s ease, box-shadow 0.18s ease !important;
  box-sizing: border-box !important;
}

textarea {
  height: auto !important;
  padding: 12px 16px !important;
  min-height: 80px !important;
}

/* Pill Search Inputs */
.search-pill-input, 
input[id*="search"], 
.dock-search-pill {
  border-radius: 9999px !important;
}

/* Amber Focus Ring */
input:focus, 
select:focus, 
textarea:focus, 
.form-control:focus, 
.inp:focus {
  border-color: #EAB308 !important;
  box-shadow: 0 0 0 3px rgba(234, 179, 8, 0.15) !important;
  outline: none !important;
}

select option {
  background: #FFFFFF !important;
  color: #18181B !important;
}

/* ── 6. BUTTONS SYSTEM ── */
.btn, 
button:not(.dock-nav-pill):not(.dock-icon-btn):not(.dock-theme-btn):not(#sidebar-toggle-btn) {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 8px !important;
  font-family: inherit !important;
  font-weight: 700 !important;
  font-size: 13px !important;
  border-radius: 12px !important;
  cursor: pointer !important;
  transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1) !important;
  border: 1px solid transparent !important;
  padding: 10px 18px !important;
  line-height: 1 !important;
  white-space: nowrap !important;
}

/* Primary Button (Dark Charcoal #18181B) */
.btn-primary, 
.btn-solid-dark {
  background: #18181B !important;
  color: #FFFFFF !important;
  border: 1px solid rgba(255, 255, 255, 0.08) !important;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.16) !important;
}
.btn-primary:hover, 
.btn-solid-dark:hover {
  background: #27272A !important;
  transform: translateY(-1px) !important;
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.24) !important;
}

/* Secondary Button (Warm Neutral #F5EFE6) */
.btn-secondary {
  background: #F5EFE6 !important;
  color: #18181B !important;
  border: 1px solid rgba(28, 25, 23, 0.08) !important;
}
.btn-secondary:hover {
  background: #EFE8DD !important;
  transform: translateY(-1px) !important;
}

/* Accent Button (Warm Amber #EAB308) */
.btn-solid-amber, 
.dock-action-trigger {
  background: #EAB308 !important;
  color: #18181B !important;
  font-weight: 800 !important;
  border: none !important;
  box-shadow: 0 4px 14px rgba(234, 179, 8, 0.32) !important;
}
.btn-solid-amber:hover, 
.dock-action-trigger:hover {
  background: #CA8A04 !important;
  transform: translateY(-1px) !important;
  box-shadow: 0 6px 18px rgba(234, 179, 8, 0.40) !important;
}

/* Pill Buttons */
.btn-pill, 
.btn-pill-sm, 
.btn-h40-pill, 
.btn-h42-pill, 
.btn-h38-pill {
  border-radius: 9999px !important;
}
.btn-sm, .btn-pill-sm {
  padding: 6px 14px !important;
  font-size: 12px !important;
}

/* Disabled State */
.btn:disabled, 
button:disabled {
  opacity: 0.5 !important;
  cursor: not-allowed !important;
  pointer-events: none !important;
}

/* ── 7. STATUS BADGES ── */
.badge, 
.status-badge, 
.chip, 
.pill-status-chip {
  display: inline-flex !important;
  align-items: center !important;
  gap: 6px !important;
  padding: 4px 12px !important;
  border-radius: 9999px !important;
  font-size: 11.5px !important;
  font-weight: 700 !important;
  white-space: nowrap !important;
  line-height: 1 !important;
}

/* Emerald / Success */
.badge-green, 
.chip-green, 
.badge-success {
  background: rgba(16, 185, 129, 0.10) !important;
  color: #059669 !important;
  border: 1px solid rgba(16, 185, 129, 0.20) !important;
}

/* Amber / Warning */
.badge-amber, 
.badge-amber-pill, 
.badge-purple, 
.chip-amber, 
.badge-warning {
  background: rgba(245, 158, 11, 0.12) !important;
  color: #D97706 !important;
  border: 1px solid rgba(245, 158, 11, 0.25) !important;
}

/* Red / Danger */
.badge-red, 
.badge-rose, 
.badge-danger {
  background: rgba(239, 68, 68, 0.10) !important;
  color: #DC2626 !important;
  border: 1px solid rgba(239, 68, 68, 0.20) !important;
}

/* Neutral / Gray */
.badge-slate, 
.badge-gray, 
.badge-neutral {
  background: rgba(113, 113, 122, 0.10) !important;
  color: #71717A !important;
  border: 1px solid rgba(113, 113, 122, 0.20) !important;
}

/* Cyan / Info */
.chip-cyan, .badge-blue {
  background: rgba(8, 145, 178, 0.10) !important;
  color: #0891B2 !important;
  border: 1px solid rgba(8, 145, 178, 0.20) !important;
}

/* Status Dot Helper */
.status-dot, .dot-indicator {
  width: 6px !important;
  height: 6px !important;
  border-radius: 50% !important;
  background: currentColor !important;
}

/* ── 8. FLOATING NAVIGATION CAPSULE DOCK ── */
.top-dock-container, 
header.top-dock-container {
  display: flex !important;
  justify-content: center !important;
  align-items: center !important;
  position: sticky !important;
  top: 14px !important;
  z-index: 9990 !important;
  width: 100% !important;
  margin-bottom: 24px !important;
  padding: 0 16px !important;
}

/* ── 9. MODALS SYSTEM ── */
.modal-overlay, 
.modal-backdrop-custom {
  position: fixed !important;
  inset: 0 !important;
  background: rgba(24, 24, 27, 0.45) !important;
  z-index: 10000 !important;
  display: none !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 20px !important;
}

.modal-overlay.open, 
.modal-overlay.active, 
.modal-overlay.show {
  display: flex !important;
}

.modal, 
.modal-box, 
.modal-box-custom {
  background: #FFFFFF !important;
  border: 1px solid rgba(28, 25, 23, 0.06) !important;
  border-radius: 24px !important;
  box-shadow: 0 20px 50px -10px rgba(0, 0, 0, 0.20) !important;
  max-width: 580px !important;
  width: 100% !important;
  padding: 28px !important;
  color: #18181B !important;
  position: relative !important;
  overflow: hidden !important;
}

.modal-header {
  display: flex !important;
  justify-content: space-between !important;
  align-items: center !important;
  margin-bottom: 20px !important;
  padding-bottom: 14px !important;
  border-bottom: 1px solid rgba(28, 25, 23, 0.06) !important;
}

.modal-close-btn, 
.modal-close {
  width: 32px !important;
  height: 32px !important;
  border-radius: 50% !important;
  background: #F5F2EB !important;
  border: none !important;
  color: #71717A !important;
  cursor: pointer !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  font-size: 14px !important;
  font-weight: 700 !important;
  transition: all 0.2s ease !important;
}
.modal-close-btn:hover, 
.modal-close:hover {
  background: #EFE8DD !important;
  color: #18181B !important;
}

/* ── 10. UNIFIED DARK MODE FOUNDATION ── */
html.dark body, 
body.dark, 
[data-theme="dark"] body {
  background-color: #0F0F12 !important;
  background: #0F0F12 !important;
  color: #F4F4F5 !important;
}

html.dark h1, html.dark h2, html.dark h3, html.dark h4,
body.dark h1, body.dark h2, body.dark h3, body.dark h4,
[data-theme="dark"] h1, [data-theme="dark"] h2, [data-theme="dark"] h3, [data-theme="dark"] h4 {
  color: #F4F4F5 !important;
}

html.dark [class*="text-white"], 
body.dark [class*="text-white"], 
html.dark [class*="text-slate-100"], 
body.dark [class*="text-slate-100"] {
  color: #F4F4F5 !important;
}

html.dark .text-secondary, 
body.dark .text-secondary,
html.dark [class*="text-slate-400"], 
body.dark [class*="text-slate-400"],
html.dark [class*="text-gray-400"], 
body.dark [class*="text-gray-400"] {
  color: #A1A1AA !important;
}

/* Dark Cards */
html.dark .card, 
html.dark .bento-card, 
html.dark .glass-card, 
html.dark .kpi-card, 
html.dark .greeting-card-warm, 
html.dark [class*="bg-slate-"], 
html.dark [class*="bg-gray-"], 
html.dark [class*="bg-zinc-"],
body.dark .card, 
body.dark .bento-card, 
body.dark .glass-card, 
body.dark .kpi-card, 
body.dark .greeting-card-warm, 
body.dark [class*="bg-slate-"], 
body.dark [class*="bg-gray-"], 
body.dark [class*="bg-zinc-"],
[data-theme="dark"] .card,
[data-theme="dark"] .bento-card {
  background-color: #18181B !important;
  color: #F4F4F5 !important;
  border-color: rgba(255, 255, 255, 0.08) !important;
  box-shadow: 0 12px 32px -4px rgba(0, 0, 0, 0.40) !important;
}

/* Dark Tables */
html.dark .tbl-wrap, 
body.dark .tbl-wrap,
[data-theme="dark"] .tbl-wrap {
  background: #18181B !important;
  border-color: rgba(255, 255, 255, 0.08) !important;
}

html.dark table th, 
body.dark table th,
[data-theme="dark"] table th {
  background: #18181B !important;
  color: #A1A1AA !important;
  border-bottom-color: rgba(255, 255, 255, 0.08) !important;
}

html.dark table td, 
body.dark table td,
[data-theme="dark"] table td {
  color: #F4F4F5 !important;
  border-bottom-color: rgba(255, 255, 255, 0.05) !important;
}

html.dark table tbody tr:hover td, 
body.dark table tbody tr:hover td,
[data-theme="dark"] table tbody tr:hover td {
  background: #1F1F23 !important;
}

/* Dark Inputs */
html.dark input:not([type="checkbox"]):not([type="radio"]):not([type="submit"]):not([type="button"]), 
html.dark select, 
html.dark textarea, 
body.dark input:not([type="checkbox"]):not([type="radio"]):not([type="submit"]):not([type="button"]), 
body.dark select, 
body.dark textarea,
[data-theme="dark"] input,
[data-theme="dark"] select,
[data-theme="dark"] textarea {
  background-color: #222226 !important;
  border-color: rgba(255, 255, 255, 0.10) !important;
  color: #F4F4F5 !important;
}

html.dark select option, 
body.dark select option {
  background: #18181B !important;
  color: #F4F4F5 !important;
}

/* Dark Buttons */
html.dark .btn-secondary, 
body.dark .btn-secondary {
  background: #27272A !important;
  color: #F4F4F5 !important;
  border-color: rgba(255, 255, 255, 0.10) !important;
}
html.dark .btn-secondary:hover, 
body.dark .btn-secondary:hover {
  background: #323238 !important;
}

/* Dark Modals */
html.dark .modal, 
html.dark .modal-box, 
body.dark .modal, 
body.dark .modal-box,
[data-theme="dark"] .modal {
  background: #18181B !important;
  border-color: rgba(255, 255, 255, 0.10) !important;
  color: #F4F4F5 !important;
}
html.dark .modal-header, 
body.dark .modal-header {
  border-bottom-color: rgba(255, 255, 255, 0.08) !important;
}
html.dark .modal-close-btn, 
body.dark .modal-close-btn {
  background: #27272A !important;
  color: #A1A1AA !important;
}

/* ── 11. RTL / LTR LOGICAL ADAPTATION ── */
[dir="rtl"] {
  text-align: right;
}
[dir="ltr"] {
  text-align: left;
}



/* ══════════════════════════════════════════════════════════════════════
   PHASE 3 — RADICAL VISUAL OVERHAUL: APPLICATION SHELL & DASHBOARD
══════════════════════════════════════════════════════════════════════ */

/* ── 1. CANVAS & SHELL ── */
html {
  background-color: #FAF7F2;
  font-family: 'Plus Jakarta Sans', system-ui, -apple-system, sans-serif;
  -webkit-font-smoothing: antialiased;
}

body {
  background-color: #FAF7F2 !important;
  color: #18181B !important;
  font-family: 'Plus Jakarta Sans', system-ui, -apple-system, sans-serif !important;
  min-height: 100vh;
  margin: 0;
  padding: 0;
  overflow-x: hidden;
  position: relative;
}

/* Warm ambient corner glow */
body::before {
  content: "";
  position: fixed;
  top: -120px;
  inset-inline-start: 10%;
  width: 600px;
  height: 400px;
  background: radial-gradient(ellipse, rgba(234, 179, 8, 0.07) 0%, transparent 70%);
  pointer-events: none;
  z-index: 0;
}

body::after {
  content: "";
  position: fixed;
  bottom: -100px;
  inset-inline-end: 5%;
  width: 500px;
  height: 400px;
  background: radial-gradient(ellipse, rgba(234, 179, 8, 0.05) 0%, transparent 70%);
  pointer-events: none;
  z-index: 0;
}

html.dark body::before {
  background: radial-gradient(ellipse, rgba(245, 158, 11, 0.08) 0%, transparent 70%);
}
html.dark body::after {
  background: radial-gradient(ellipse, rgba(124, 58, 237, 0.05) 0%, transparent 70%);
}

.app-chassis {
  position: relative;
  z-index: 10;
  max-width: 1380px;
  margin: 0 auto;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  padding-block: 16px 48px;
  padding-inline: 24px;
  gap: 20px;
  box-sizing: border-box;
}

@media (max-width: 768px) {
  .app-chassis {
    padding-block: 12px 32px;
    padding-inline: 14px;
    gap: 16px;
  }
}

.main {
  width: 100% !important;
  min-width: 0 !important;
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  border-radius: 0 !important;
  display: flex !important;
  flex-direction: column !important;
  overflow: visible !important;
}

.content {
  width: 100% !important;
  max-width: 100% !important;
  padding: 0 !important;
  overflow: visible !important;
}

/* ── 2. FLOATING CAPSULE NAVIGATION DOCK ── */
.top-dock-container,
header.top-dock-container {
  display: flex !important;
  justify-content: center !important;
  align-items: center !important;
  position: sticky !important;
  top: 14px !important;
  z-index: 9990 !important;
  width: 100% !important;
  margin-bottom: 24px !important;
  padding: 0 !important;
}

.floating-capsule-dock {
  background: #18181B !important;
  color: #FFFFFF !important;
  border-radius: 9999px !important;
  border: 1px solid rgba(255, 255, 255, 0.12) !important;
  box-shadow: 0 16px 40px -8px rgba(0, 0, 0, 0.45) !important;
  padding: 6px 12px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 8px !important;
  width: 100% !important;
  max-width: 1380px !important;
  margin: 0 auto !important;
  box-sizing: border-box !important;
  backdrop-filter: blur(12px) !important;
  -webkit-backdrop-filter: blur(12px) !important;
}

.dock-brand-pill {
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
  padding: 6px 12px !important;
  border-radius: 9999px !important;
  background: rgba(255, 255, 255, 0.08) !important;
  color: #FFFFFF !important;
  cursor: pointer !important;
  flex-shrink: 0 !important;
  transition: all 0.2s ease !important;
}
.dock-brand-pill:hover {
  background: rgba(255, 255, 255, 0.14) !important;
}
.dock-brand-glyph {
  color: #EAB308 !important;
  font-size: 14px !important;
  line-height: 1 !important;
}
.dock-brand-name {
  color: #FFFFFF !important;
  font-weight: 800 !important;
  font-size: 13px !important;
  letter-spacing: -0.01em !important;
  white-space: nowrap !important;
}

.dock-nav-pill-group {
  display: flex !important;
  align-items: center !important;
  gap: 3px !important;
  overflow-x: auto !important;
  scrollbar-width: none !important;
  -ms-overflow-style: none !important;
  padding-block: 2px !important;
  padding-inline: 4px !important;
  flex-shrink: 1 !important;
}
.dock-nav-pill-group::-webkit-scrollbar {
  display: none !important;
}

.dock-nav-pill {
  border-radius: 9999px !important;
  padding: 7px 12px !important;
  color: #A1A1AA !important;
  background: transparent !important;
  border: none !important;
  font-weight: 600 !important;
  font-size: 12px !important;
  transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1) !important;
  cursor: pointer !important;
  white-space: nowrap !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 5px !important;
  flex-shrink: 0 !important;
  line-height: 1.2 !important;
}
.dock-nav-pill:hover {
  color: #FFFFFF !important;
  background: rgba(255, 255, 255, 0.08) !important;
}
.dock-nav-pill.active {
  background: #27272A !important;
  color: #EAB308 !important;
  font-weight: 700 !important;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.35) !important;
}
.dock-nav-pill .dock-active-dot {
  display: none !important;
  color: #EAB308 !important;
  font-size: 7px !important;
  line-height: 1 !important;
}
.dock-nav-pill.active .dock-active-dot {
  display: inline-block !important;
}

.dock-end-controls {
  display: flex !important;
  align-items: center !important;
  gap: 6px !important;
  flex-shrink: 0 !important;
  margin-inline-start: 4px !important;
}

.dock-search-pill {
  background: rgba(255, 255, 255, 0.08) !important;
  border: 1px solid rgba(255, 255, 255, 0.08) !important;
  border-radius: 9999px !important;
  padding: 5px 12px !important;
  color: #A1A1AA !important;
  cursor: pointer !important;
  font-size: 11.5px !important;
  display: flex !important;
  align-items: center !important;
  gap: 6px !important;
  transition: all 0.2s ease !important;
}
.dock-search-pill:hover {
  background: rgba(255, 255, 255, 0.14) !important;
  color: #FFFFFF !important;
  border-color: rgba(255, 255, 255, 0.15) !important;
}
.dock-search-kbd {
  background: rgba(255, 255, 255, 0.12) !important;
  border-radius: 4px !important;
  padding: 1px 4px !important;
  font-size: 9px !important;
  font-weight: 700 !important;
  color: #D4D4D8 !important;
}

.dock-icon-btn {
  width: 32px !important;
  height: 32px !important;
  border-radius: 50% !important;
  background: rgba(255, 255, 255, 0.08) !important;
  border: 1px solid rgba(255, 255, 255, 0.10) !important;
  color: #A1A1AA !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  cursor: pointer !important;
  font-size: 13px !important;
  transition: all 0.2s ease !important;
}
.dock-icon-btn:hover {
  background: rgba(255, 255, 255, 0.16) !important;
  color: #FFFFFF !important;
}

.dock-theme-btn {
  background: rgba(255, 255, 255, 0.08) !important;
  border: 1px solid rgba(255, 255, 255, 0.10) !important;
  border-radius: 9999px !important;
  padding: 5px 10px !important;
  color: #FFFFFF !important;
  cursor: pointer !important;
  display: flex !important;
  align-items: center !important;
  gap: 6px !important;
  font-size: 11px !important;
  font-weight: 600 !important;
  transition: all 0.2s ease !important;
}
.dock-theme-btn:hover {
  background: rgba(255, 255, 255, 0.16) !important;
}

.dock-profile-avatar {
  width: 34px !important;
  height: 34px !important;
  border-radius: 50% !important;
  background: rgba(234, 179, 8, 0.15) !important;
  border: 1.5px solid #EAB308 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  position: relative !important;
  cursor: pointer !important;
  font-size: 16px !important;
}
.avatar-live-dot {
  position: absolute !important;
  bottom: 0 !important;
  inset-inline-end: 0 !important;
  width: 8px !important;
  height: 8px !important;
  border-radius: 50% !important;
  background: #10B981 !important;
  border: 1.5px solid #18181B !important;
}

.dock-action-trigger {
  background: #EAB308 !important;
  color: #18181B !important;
  border: none !important;
  padding: 7px 14px !important;
  border-radius: 9999px !important;
  font-size: 11.5px !important;
  font-weight: 800 !important;
  cursor: pointer !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 4px !important;
  transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1) !important;
  box-shadow: 0 4px 14px rgba(234, 179, 8, 0.35) !important;
  white-space: nowrap !important;
}
.dock-action-trigger:hover {
  background: #F59E0B !important;
  transform: translateY(-1px) !important;
  box-shadow: 0 6px 18px rgba(234, 179, 8, 0.45) !important;
}

/* ── 3. SIDEBAR & MOBILE DRAWER ── */
@media (min-width: 1024px) {
  .sidebar, #sidebar-toggle-btn, .mobile-drawer-header {
    display: none !important;
  }
}
@media (max-width: 1023px) {
  .sidebar {
    position: fixed !important;
    top: 0 !important;
    bottom: 0 !important;
    inset-inline-start: 0 !important;
    width: 280px !important;
    max-width: 85vw !important;
    background: #18181B !important;
    color: #FFFFFF !important;
    z-index: 10001 !important;
    padding: 20px 16px !important;
    box-shadow: 0 0 50px rgba(0, 0, 0, 0.6) !important;
    display: flex !important;
    flex-direction: column !important;
    transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1) !important;
    transform: translateX(100%) !important;
  }
  [dir="ltr"] .sidebar {
    transform: translateX(-100%) !important;
  }
  .sidebar.mob-open,
  .sidebar.active {
    transform: translateX(0) !important;
  }
  #sidebar-toggle-btn {
    display: flex !important;
  }
  .mobile-drawer-header {
    display: flex !important;
  }
}

/* ── 4. DASHBOARD GREETING & KPI CARDS ── */
.dashboard-greeting-header {
  display: flex !important;
  justify-content: space-between !important;
  align-items: center !important;
  gap: 20px !important;
  flex-wrap: wrap !important;
  margin-bottom: 24px !important;
}

.greeting-left {
  flex: 1 1 320px !important;
}

.greeting-status-tag {
  display: inline-flex !important;
  align-items: center !important;
  gap: 8px !important;
  font-size: 12px !important;
  font-weight: 600 !important;
  color: #71717A !important;
  margin-bottom: 6px !important;
}
html.dark .greeting-status-tag {
  color: #A1A1AA !important;
}

.status-indicator-live {
  width: 8px !important;
  height: 8px !important;
  border-radius: 50% !important;
  background: #10B981 !important;
  box-shadow: 0 0 10px rgba(16, 185, 129, 0.7) !important;
  animation: pulseGlow 2s infinite !important;
}

.greeting-heading {
  font-size: 1.85rem !important;
  font-weight: 800 !important;
  color: #18181B !important;
  letter-spacing: -0.02em !important;
  margin: 0 0 6px 0 !important;
  line-height: 1.25 !important;
}
html.dark .greeting-heading {
  color: #F4F4F5 !important;
}

.greeting-sub {
  font-size: 0.95rem !important;
  color: #71717A !important;
  margin: 0 !important;
  line-height: 1.45 !important;
}
html.dark .greeting-sub {
  color: #A1A1AA !important;
}

/* 4 Bento KPI Stat Cards */
.greeting-stats-grid {
  display: grid !important;
  grid-template-columns: repeat(4, minmax(130px, 1fr)) !important;
  gap: 14px !important;
  flex: 1 1 580px !important;
}

@media (max-width: 900px) {
  .greeting-stats-grid {
    grid-template-columns: repeat(2, 1fr) !important;
    width: 100% !important;
  }
}
@media (max-width: 480px) {
  .greeting-stats-grid {
    grid-template-columns: 1fr !important;
  }
}

.greeting-stat-pill {
  background: #FFFFFF !important;
  border: 1px solid rgba(28, 25, 23, 0.05) !important;
  border-radius: 20px !important;
  padding: 14px 18px !important;
  box-shadow: 0 8px 24px -4px rgba(28, 25, 23, 0.04) !important;
  display: flex !important;
  flex-direction: column !important;
  justify-content: center !important;
  cursor: pointer !important;
  transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1) !important;
  box-sizing: border-box !important;
}

.greeting-stat-pill:hover {
  transform: translateY(-2px) !important;
  border-color: rgba(234, 179, 8, 0.35) !important;
  box-shadow: 0 12px 32px -4px rgba(234, 179, 8, 0.12) !important;
}

html.dark .greeting-stat-pill {
  background: #18181B !important;
  border-color: rgba(255, 255, 255, 0.08) !important;
  box-shadow: 0 8px 24px -4px rgba(0, 0, 0, 0.40) !important;
}

html.dark .greeting-stat-pill:hover {
  border-color: rgba(234, 179, 8, 0.4) !important;
  box-shadow: 0 12px 32px -4px rgba(0, 0, 0, 0.60) !important;
}

.stat-pill-top {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 6px !important;
  margin-bottom: 6px !important;
}

.stat-pill-label {
  font-size: 11px !important;
  font-weight: 600 !important;
  color: #71717A !important;
}
html.dark .stat-pill-label {
  color: #A1A1AA !important;
}

.pill-status-chip {
  font-size: 9.5px !important;
  font-weight: 700 !important;
  padding: 2px 7px !important;
  border-radius: 9999px !important;
  white-space: nowrap !important;
}

.stat-pill-num {
  font-size: 22px !important;
  font-weight: 800 !important;
  font-variant-numeric: lining-nums tabular-nums !important;
  letter-spacing: -0.02em !important;
  line-height: 1.2 !important;
}

/* ── 5. BENTO GRID CORE ── */
.bento-dashboard-grid {
  display: grid !important;
  grid-template-columns: repeat(12, 1fr) !important;
  gap: 20px !important;
  margin-bottom: 24px !important;
}

.bento-card {
  background: #FFFFFF !important;
  border: 1px solid rgba(28, 25, 23, 0.05) !important;
  border-radius: 22px !important;
  padding: 24px !important;
  box-shadow: 0 8px 30px -4px rgba(0, 0, 0, 0.04) !important;
  transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1) !important;
  position: relative !important;
  overflow: hidden !important;
  box-sizing: border-box !important;
}

.bento-card:hover {
  box-shadow: 0 14px 40px -4px rgba(0, 0, 0, 0.07) !important;
}

html.dark .bento-card {
  background: #18181B !important;
  border-color: rgba(255, 255, 255, 0.08) !important;
  box-shadow: 0 12px 32px -4px rgba(0, 0, 0, 0.40) !important;
}

html.dark .bento-card:hover {
  box-shadow: 0 16px 44px -4px rgba(0, 0, 0, 0.55) !important;
}

.bento-card-header {
  display: flex !important;
  justify-content: space-between !important;
  align-items: flex-start !important;
  margin-bottom: 16px !important;
  gap: 12px !important;
}

.bento-card-title {
  font-size: 15px !important;
  font-weight: 800 !important;
  color: #18181B !important;
  letter-spacing: -0.01em !important;
  margin: 0 !important;
}
html.dark .bento-card-title {
  color: #F4F4F5 !important;
}

.bento-card-sub {
  font-size: 11.5px !important;
  color: #71717A !important;
  margin: 2px 0 0 0 !important;
}
html.dark .bento-card-sub {
  color: #A1A1AA !important;
}

/* WIDGET 1: Profile Card (span 4) */
.bento-profile-card {
  grid-column: span 4 !important;
}
@media (max-width: 1100px) {
  .bento-profile-card { grid-column: span 6 !important; }
}
@media (max-width: 768px) {
  .bento-profile-card { grid-column: span 12 !important; }
}

.profile-avatar-box {
  width: 52px !important;
  height: 52px !important;
  border-radius: 50% !important;
  background: #FAF7F2 !important;
  border: 2px solid #EAB308 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  font-size: 24px !important;
  position: relative !important;
  flex-shrink: 0 !important;
}
html.dark .profile-avatar-box {
  background: #27272A !important;
}

.profile-online-badge {
  position: absolute !important;
  bottom: 0 !important;
  inset-inline-end: 0 !important;
  width: 12px !important;
  height: 12px !important;
  border-radius: 50% !important;
  background: #10B981 !important;
  border: 2px solid #FFFFFF !important;
}
html.dark .profile-online-badge {
  border-color: #18181B !important;
}

.profile-location-chip {
  display: flex !important;
  align-items: center !important;
  gap: 6px !important;
  background: #FAF7F2 !important;
  border: 1px solid rgba(28, 25, 23, 0.05) !important;
  border-radius: 9999px !important;
  padding: 6px 14px !important;
  font-size: 11px !important;
  color: #71717A !important;
  margin-bottom: 18px !important;
}
html.dark .profile-location-chip {
  background: #222226 !important;
  border-color: rgba(255, 255, 255, 0.08) !important;
  color: #A1A1AA !important;
}

.accordion-bar-track {
  width: 100% !important;
  height: 6px !important;
  background: #FAF7F2 !important;
  border-radius: 9999px !important;
  overflow: hidden !important;
}
html.dark .accordion-bar-track {
  background: #27272A !important;
}

/* WIDGET 2: Progress & Chart Card (span 4) */
.bento-progress-card {
  grid-column: span 4 !important;
}
@media (max-width: 1100px) {
  .bento-progress-card { grid-column: span 6 !important; }
}
@media (max-width: 768px) {
  .bento-progress-card { grid-column: span 12 !important; }
}

.day-track {
  width: 14px !important;
  height: 80px !important;
  background: #FAF7F2 !important;
  border-radius: 9999px !important;
  display: flex !important;
  align-items: flex-end !important;
  overflow: hidden !important;
}
html.dark .day-track {
  background: #27272A !important;
}

/* WIDGET 3: Live Cooking Timer Card (span 4) */
.bento-timer-card {
  grid-column: span 4 !important;
  display: flex !important;
  flex-direction: column !important;
  justify-content: space-between !important;
}
@media (max-width: 1100px) {
  .bento-timer-card { grid-column: span 12 !important; }
}

.dial-base-circle {
  fill: none !important;
  stroke: #FAF7F2 !important;
  stroke-width: 10 !important;
}
html.dark .dial-base-circle {
  stroke: #27272A !important;
}
.dial-progress-circle {
  fill: none !important;
  stroke: #EAB308 !important;
  stroke-width: 10 !important;
  stroke-dasharray: 440 !important;
  stroke-linecap: round !important;
}
.dial-counter-digits {
  font-size: 22px !important;
  font-weight: 900 !important;
  color: #18181B !important;
  font-variant-numeric: tabular-nums lining-nums !important;
  letter-spacing: -0.02em !important;
}
html.dark .dial-counter-digits {
  color: #F4F4F5 !important;
}

/* WIDGET 4: Executive Matte Dark Tasks Card (span 4) */
.bento-dark-tasks-card {
  grid-column: span 4 !important;
  background: #18181B !important;
  color: #FFFFFF !important;
  border-color: rgba(255, 255, 255, 0.10) !important;
}
@media (max-width: 1100px) {
  .bento-dark-tasks-card { grid-column: span 12 !important; }
}

/* WIDGET 5: Schedule Timeline & Simulator (span 8) */
.bento-timeline-card {
  grid-column: span 8 !important;
}
@media (max-width: 1100px) {
  .bento-timeline-card { grid-column: span 12 !important; }
}

.timeline-simulator-box {
  background: #FAF7F2 !important;
  border: 1px solid rgba(234, 179, 8, 0.25) !important;
  border-radius: 20px !important;
  padding: 20px 22px !important;
  box-shadow: inset 0 2px 8px rgba(0, 0, 0, 0.02) !important;
}
html.dark .timeline-simulator-box {
  background: #141416 !important;
  border-color: rgba(234, 179, 8, 0.30) !important;
}

/* ── 6. FINISHED GOODS MASTER TABLE ── */
#fg-master-table {
  width: 100% !important;
  border-collapse: separate !important;
  border-spacing: 0 !important;
}

#fg-master-table th {
  padding: 14px 18px !important;
  background: #FAF8F4 !important;
  color: #71717A !important;
  font-weight: 700 !important;
  font-size: 12px !important;
  border-bottom: 1px solid rgba(28, 25, 23, 0.06) !important;
  white-space: nowrap !important;
  text-align: start !important;
}
html.dark #fg-master-table th {
  background: #141416 !important;
  color: #A1A1AA !important;
  border-bottom-color: rgba(255, 255, 255, 0.08) !important;
}

#fg-master-table td {
  padding: 14px 18px !important;
  border-bottom: 1px solid rgba(28, 25, 23, 0.04) !important;
  color: #18181B !important;
  font-size: 13px !important;
  vertical-align: middle !important;
  transition: background 0.15s ease !important;
}
html.dark #fg-master-table td {
  border-bottom-color: rgba(255, 255, 255, 0.05) !important;
  color: #F4F4F5 !important;
}

#fg-master-table tbody tr:hover td {
  background: #FDFCF9 !important;
}
html.dark #fg-master-table tbody tr:hover td {
  background: #1F1F23 !important;
}

.filter-chip {
  padding: 6px 14px !important;
  border-radius: 9999px !important;
  font-size: 12px !important;
  font-weight: 600 !important;
  color: #71717A !important;
  background: #F5F2EB !important;
  border: 1px solid transparent !important;
  cursor: pointer !important;
  transition: all 0.2s ease !important;
}
.filter-chip:hover {
  background: #ECE6DA !important;
  color: #18181B !important;
}
.filter-chip.active {
  background: #18181B !important;
  color: #FFFFFF !important;
  font-weight: 700 !important;
}
html.dark .filter-chip {
  background: #27272A !important;
  color: #A1A1AA !important;
}
html.dark .filter-chip:hover {
  background: #323238 !important;
  color: #FFFFFF !important;
}
html.dark .filter-chip.active {
  background: #EAB308 !important;
  color: #18181B !important;
}


/* ══════════════════════════════════════════════════════════════════════
   PHASE 4A — RADICAL VISUAL OVERHAUL: CENTER STOCK & ORDERS
══════════════════════════════════════════════════════════════════════ */

/* ── 1. COMMON WORKFLOW STEP BAR ── */
.workflow-step-bar {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  background: #FFFFFF !important;
  border: 1px solid rgba(28, 25, 23, 0.05) !important;
  border-radius: 18px !important;
  padding: 12px 20px !important;
  margin-bottom: 20px !important;
  box-shadow: 0 4px 20px -4px rgba(0, 0, 0, 0.03) !important;
  flex-wrap: wrap !important;
  gap: 12px !important;
}

html.dark .workflow-step-bar {
  background: #18181B !important;
  border-color: rgba(255, 255, 255, 0.08) !important;
  box-shadow: 0 6px 24px -4px rgba(0, 0, 0, 0.40) !important;
}

.step-badge-indicator {
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
}

.step-num-pill {
  background: rgba(234, 179, 8, 0.15) !important;
  color: #B45309 !important;
  border: 1px solid rgba(234, 179, 8, 0.30) !important;
  padding: 4px 12px !important;
  border-radius: 9999px !important;
  font-size: 11.5px !important;
  font-weight: 800 !important;
  letter-spacing: -0.01em !important;
}
html.dark .step-num-pill {
  background: rgba(234, 179, 8, 0.20) !important;
  color: #FCD34D !important;
  border-color: rgba(234, 179, 8, 0.40) !important;
}

.step-name-text {
  font-size: 14px !important;
  font-weight: 800 !important;
  color: #18181B !important;
}
html.dark .step-name-text {
  color: #F4F4F5 !important;
}

.step-nav-buttons {
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
}

.step-nav-buttons .btn {
  border-radius: 9999px !important;
  padding: 8px 18px !important;
  font-size: 12px !important;
  font-weight: 700 !important;
  transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1) !important;
}

.step-nav-buttons .btn-primary {
  background: #18181B !important;
  color: #FFFFFF !important;
  border: 1px solid rgba(255, 255, 255, 0.10) !important;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.20) !important;
}
.step-nav-buttons .btn-primary:hover {
  background: #27272A !important;
  transform: translateY(-1px) !important;
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.30) !important;
}

.step-nav-buttons .btn-secondary {
  background: #FAF7F2 !important;
  color: #18181B !important;
  border: 1px solid rgba(28, 25, 23, 0.08) !important;
}
.step-nav-buttons .btn-secondary:hover {
  background: #F5EFE6 !important;
  border-color: rgba(234, 179, 8, 0.3) !important;
}

html.dark .step-nav-buttons .btn-secondary {
  background: #27272A !important;
  color: #F4F4F5 !important;
  border-color: rgba(255, 255, 255, 0.10) !important;
}
html.dark .step-nav-buttons .btn-secondary:hover {
  background: #323238 !important;
}

/* ── 2. CENTER STOCK: DUAL PANE WORKBENCH ── */
#page-centerstock .dual-pane-workbench {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) 350px !important;
  gap: 16px !important;
  align-items: start !important;
  width: 100% !important;
}

@media (max-width: 1100px) {
  #page-centerstock .dual-pane-workbench {
    grid-template-columns: 1fr !important;
  }
  #page-centerstock .pane-inspector {
    position: static !important;
    max-height: none !important;
  }
}

/* Center Stock Stream Pane */
#page-centerstock .pane-stream {
  background: transparent !important;
  border: none !important;
  padding: 0 !important;
  box-shadow: none !important;
  overflow: visible !important;
}

/* Filter & Search Card */
#page-centerstock .pane-stream .card.mb-3\.5,
#page-centerstock .pane-stream > .card:first-child {
  background: #FFFFFF !important;
  border: 1px solid rgba(28, 25, 23, 0.05) !important;
  border-radius: 20px !important;
  padding: 14px 18px !important;
  box-shadow: 0 4px 20px -4px rgba(0, 0, 0, 0.03) !important;
  margin-bottom: 16px !important;
}
html.dark #page-centerstock .pane-stream .card.mb-3\.5,
html.dark #page-centerstock .pane-stream > .card:first-child {
  background: #18181B !important;
  border-color: rgba(255, 255, 255, 0.08) !important;
}

#cs-search, #cs-cat-filter, #cs-status-filter {
  height: 42px !important;
  border-radius: 9999px !important;
  background: #F5F2EB !important;
  border: 1px solid rgba(28, 25, 23, 0.06) !important;
  color: #18181B !important;
  font-size: 12.5px !important;
  font-weight: 600 !important;
  padding-inline: 16px !important;
  outline: none !important;
  transition: all 0.2s ease !important;
}
#cs-search {
  padding-inline-start: 36px !important;
}
#cs-search:focus, #cs-cat-filter:focus, #cs-status-filter:focus {
  background: #FFFFFF !important;
  border-color: #EAB308 !important;
  box-shadow: 0 0 0 3px rgba(234, 179, 8, 0.15) !important;
}
html.dark #cs-search, html.dark #cs-cat-filter, html.dark #cs-status-filter {
  background: #222226 !important;
  border-color: rgba(255, 255, 255, 0.08) !important;
  color: #F4F4F5 !important;
}
html.dark #cs-search:focus, html.dark #cs-cat-filter:focus, html.dark #cs-status-filter:focus {
  background: #18181B !important;
}

/* Center Stock KPI Summary Row */
#cs-stats {
  display: grid !important;
  grid-template-columns: repeat(4, 1fr) !important;
  gap: 12px !important;
  margin-bottom: 18px !important;
}
@media (max-width: 900px) {
  #cs-stats {
    grid-template-columns: repeat(2, 1fr) !important;
  }
}
@media (max-width: 480px) {
  #cs-stats {
    grid-template-columns: 1fr !important;
  }
}

#cs-stats .kpi-card {
  background: #FFFFFF !important;
  border: 1px solid rgba(28, 25, 23, 0.05) !important;
  border-radius: 20px !important;
  padding: 14px 18px !important;
  box-shadow: 0 6px 24px -4px rgba(0, 0, 0, 0.03) !important;
  display: flex !important;
  flex-direction: column !important;
  justify-content: center !important;
  transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1) !important;
}
#cs-stats .kpi-card:hover {
  transform: translateY(-2px) !important;
  border-color: rgba(234, 179, 8, 0.35) !important;
  box-shadow: 0 10px 30px -4px rgba(234, 179, 8, 0.12) !important;
}
html.dark #cs-stats .kpi-card {
  background: #18181B !important;
  border-color: rgba(255, 255, 255, 0.08) !important;
}

#cs-stats .kpi-label {
  font-size: 11px !important;
  font-weight: 600 !important;
  color: #71717A !important;
  margin-bottom: 4px !important;
}
html.dark #cs-stats .kpi-label {
  color: #A1A1AA !important;
}

#cs-stats .kpi-value {
  font-size: 24px !important;
  font-weight: 800 !important;
  font-variant-numeric: lining-nums tabular-nums !important;
  letter-spacing: -0.02em !important;
  line-height: 1.2 !important;
}

/* Force light-mode contrast on #cs-stats numbers with inline styles */
html:not(.dark) #cs-stats .kpi-card:nth-child(1) .kpi-value {
  color: #18181B !important;
}

/* Product Cards Grid */
#cs-grid {
  display: grid !important;
  grid-template-columns: repeat(auto-fill, minmax(215px, 1fr)) !important;
  gap: 14px !important;
}

#cs-grid .card {
  background: #FFFFFF !important;
  border: 1px solid rgba(28, 25, 23, 0.05) !important;
  border-radius: 20px !important;
  padding: 16px 18px !important;
  box-shadow: 0 4px 18px -2px rgba(0, 0, 0, 0.03) !important;
  transition: all 0.22s cubic-bezier(0.16, 1, 0.3, 1) !important;
  cursor: pointer !important;
  position: relative !important;
}
#cs-grid .card:hover {
  transform: translateY(-2px) !important;
  box-shadow: 0 10px 28px -4px rgba(0, 0, 0, 0.06) !important;
  border-color: rgba(234, 179, 8, 0.35) !important;
}
html.dark #cs-grid .card {
  background: #18181B !important;
  border-color: rgba(255, 255, 255, 0.08) !important;
}

#cs-grid .selected-stream-card,
#cs-grid .card.selected-stream-card {
  background: #FFFFFF !important;
  border: 2px solid #EAB308 !important;
  box-shadow: 0 0 0 3px rgba(234, 179, 8, 0.20), 0 12px 32px -4px rgba(234, 179, 8, 0.15) !important;
  transform: translateY(-2px) !important;
}
html.dark #cs-grid .selected-stream-card,
html.dark #cs-grid .card.selected-stream-card {
  background: #18181B !important;
}

/* Product Card Texts in Light Mode */
html:not(.dark) #cs-grid .card div[style*="color:#f1f5f9"],
html:not(.dark) #cs-grid .card div[style*="color: #f1f5f9"] {
  color: #18181B !important;
}
html:not(.dark) #cs-grid .card .kpi-number {
  color: #18181B !important;
  text-shadow: none !important;
  font-weight: 800 !important;
}

.stock-sufficiency-bar {
  height: 6px !important;
  background: #FAF7F2 !important;
  border-radius: 9999px !important;
  overflow: hidden !important;
  margin-top: 8px !important;
}
html.dark .stock-sufficiency-bar {
  background: #27272A !important;
}
.stock-sufficiency-fill {
  height: 100% !important;
  border-radius: 9999px !important;
}

/* ── 3. CENTER STOCK: COMMAND DECK & INSPECTOR ── */
#page-centerstock .pane-inspector {
  display: flex !important;
  flex-direction: column !important;
  gap: 16px !important;
  position: sticky !important;
  top: 80px !important;
  max-height: calc(100vh - 100px) !important;
  overflow-y: auto !important;
  padding: 0 !important;
  background: transparent !important;
}

/* Inspected Product Hero Card */
#cs-hero-card {
  background: #FFFFFF !important;
  border: 1px solid rgba(28, 25, 23, 0.05) !important;
  border-radius: 22px !important;
  padding: 20px 22px !important;
  box-shadow: 0 8px 30px -4px rgba(0, 0, 0, 0.04) !important;
}
html.dark #cs-hero-card {
  background: #18181B !important;
  border-color: rgba(255, 255, 255, 0.08) !important;
}

#cs-hero-title {
  font-size: 16px !important;
  font-weight: 800 !important;
  color: #18181B !important;
  letter-spacing: -0.01em !important;
}
html.dark #cs-hero-title {
  color: #F4F4F5 !important;
}

#cs-hero-card .grid-1fr-1fr {
  display: grid !important;
  grid-template-columns: 1fr 1fr !important;
  gap: 12px !important;
  margin-top: 14px !important;
  padding-top: 14px !important;
  border-top: 1px solid rgba(28, 25, 23, 0.06) !important;
}
html.dark #cs-hero-card .grid-1fr-1fr {
  border-top-color: rgba(255, 255, 255, 0.08) !important;
}

#cs-hero-card .sim-box {
  background: #FAF7F2 !important;
  border-radius: 14px !important;
  padding: 10px 14px !important;
  border: 1px solid rgba(28, 25, 23, 0.04) !important;
}
html.dark #cs-hero-card .sim-box {
  background: #141416 !important;
  border-color: rgba(255, 255, 255, 0.08) !important;
}

#cs-hero-stock {
  font-size: 22px !important;
  font-weight: 800 !important;
  color: #18181B !important;
  font-variant-numeric: lining-nums tabular-nums !important;
}
html.dark #cs-hero-stock {
  color: #F4F4F5 !important;
}

#cs-hero-cost {
  font-size: 20px !important;
  font-weight: 800 !important;
  color: #D97706 !important;
  font-variant-numeric: lining-nums tabular-nums !important;
}

/* Command Deck Card */
.cs-command-card {
  background: #FFFFFF !important;
  border: 1px solid rgba(28, 25, 23, 0.05) !important;
  border-radius: 22px !important;
  padding: 20px 22px !important;
  box-shadow: 0 8px 30px -4px rgba(0, 0, 0, 0.04) !important;
}
html.dark .cs-command-card {
  background: #18181B !important;
  border-color: rgba(255, 255, 255, 0.08) !important;
}

/* Segmented Tabs Header */
.cs-tabs-header {
  display: flex !important;
  background: #FAF7F2 !important;
  border: 1px solid rgba(28, 25, 23, 0.06) !important;
  border-radius: 9999px !important;
  padding: 4px !important;
  gap: 4px !important;
  margin-bottom: 16px !important;
}
html.dark .cs-tabs-header {
  background: #141416 !important;
  border-color: rgba(255, 255, 255, 0.08) !important;
}

.cs-tab-btn {
  flex: 1 !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 6px !important;
  padding: 7px 12px !important;
  border-radius: 9999px !important;
  font-size: 11.5px !important;
  font-weight: 700 !important;
  color: #71717A !important;
  background: transparent !important;
  border: none !important;
  cursor: pointer !important;
  transition: all 0.2s ease !important;
  white-space: nowrap !important;
}
.cs-tab-btn:hover {
  color: #18181B !important;
  background: rgba(0, 0, 0, 0.04) !important;
}
.cs-tab-btn.active {
  background: #18181B !important;
  color: #EAB308 !important;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.25) !important;
}
html.dark .cs-tab-btn.active {
  background: #27272A !important;
  color: #EAB308 !important;
}

/* Stepper buttons */
.cs-stepper-btn {
  height: 36px !important;
  border-radius: 9999px !important;
  background: #FAF7F2 !important;
  border: 1px solid rgba(28, 25, 23, 0.08) !important;
  color: #18181B !important;
  font-size: 12px !important;
  font-weight: 800 !important;
  cursor: pointer !important;
  transition: all 0.18s ease !important;
}
.cs-stepper-btn:hover {
  background: #EAB308 !important;
  border-color: #EAB308 !important;
  color: #18181B !important;
  transform: translateY(-1px) !important;
}
html.dark .cs-stepper-btn {
  background: #27272A !important;
  border-color: rgba(255, 255, 255, 0.10) !important;
  color: #F4F4F5 !important;
}
html.dark .cs-stepper-btn:hover {
  background: #EAB308 !important;
  color: #18181B !important;
}

/* Raw preview box */
.cs-raw-preview-box {
  background: #FAF7F2 !important;
  border: 1px solid rgba(28, 25, 23, 0.06) !important;
  border-radius: 16px !important;
  padding: 12px 14px !important;
}
html.dark .cs-raw-preview-box {
  background: #141416 !important;
  border-color: rgba(255, 255, 255, 0.08) !important;
}

/* ── 4. ORDERS: EXECUTIVE DEMAND CENTER ── */

/* Orders KPI Grid */
.orders-kpi-grid {
  display: grid !important;
  grid-template-columns: repeat(4, 1fr) !important;
  gap: 14px !important;
  margin-bottom: 22px !important;
}
@media (max-width: 900px) {
  .orders-kpi-grid {
    grid-template-columns: repeat(2, 1fr) !important;
  }
}
@media (max-width: 480px) {
  .orders-kpi-grid {
    grid-template-columns: 1fr !important;
  }
}

.orders-kpi-grid .kpi-card {
  background: #FFFFFF !important;
  border: 1px solid rgba(28, 25, 23, 0.05) !important;
  border-radius: 22px !important;
  padding: 18px 20px !important;
  box-shadow: 0 8px 30px -4px rgba(0, 0, 0, 0.04) !important;
  display: flex !important;
  flex-direction: column !important;
  justify-content: center !important;
  transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1) !important;
}
.orders-kpi-grid .kpi-card:hover {
  transform: translateY(-2px) !important;
  border-color: rgba(234, 179, 8, 0.35) !important;
  box-shadow: 0 12px 32px -4px rgba(234, 179, 8, 0.12) !important;
}
html.dark .orders-kpi-grid .kpi-card {
  background: #18181B !important;
  border-color: rgba(255, 255, 255, 0.08) !important;
}

.orders-kpi-grid .kpi-label {
  font-size: 11.5px !important;
  font-weight: 600 !important;
  color: #71717A !important;
}
html.dark .orders-kpi-grid .kpi-label {
  color: #A1A1AA !important;
}

.orders-kpi-grid .kpi-value {
  font-size: 26px !important;
  font-weight: 800 !important;
  font-variant-numeric: lining-nums tabular-nums !important;
  letter-spacing: -0.02em !important;
  line-height: 1.2 !important;
  margin-top: 4px !important;
  margin-bottom: 2px !important;
}

#orders-kpi-total { color: #18181B !important; }
html.dark #orders-kpi-total { color: #F4F4F5 !important; }
#orders-kpi-branches { color: #D97706 !important; }
#orders-kpi-units { color: #0891B2 !important; }
#orders-kpi-val { color: #059669 !important; }

/* Orders Segmented Tabs */
.orders-nav-tabs {
  display: flex !important;
  align-items: center !important;
  background: #FAF7F2 !important;
  border: 1px solid rgba(28, 25, 23, 0.06) !important;
  border-radius: 9999px !important;
  padding: 4px !important;
  gap: 4px !important;
  margin-bottom: 20px !important;
  width: max-content !important;
  max-width: 100% !important;
  overflow-x: auto !important;
}
html.dark .orders-nav-tabs {
  background: #141416 !important;
  border-color: rgba(255, 255, 255, 0.08) !important;
}

.orders-tab-btn {
  display: inline-flex !important;
  align-items: center !important;
  gap: 8px !important;
  padding: 8px 18px !important;
  border-radius: 9999px !important;
  font-size: 12.5px !important;
  font-weight: 700 !important;
  color: #71717A !important;
  background: transparent !important;
  border: none !important;
  cursor: pointer !important;
  transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1) !important;
  white-space: nowrap !important;
}
.orders-tab-btn:hover {
  color: #18181B !important;
  background: rgba(0, 0, 0, 0.04) !important;
}
.orders-tab-btn.active {
  background: #18181B !important;
  color: #EAB308 !important;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.30) !important;
}
html.dark .orders-tab-btn.active {
  background: #27272A !important;
  color: #EAB308 !important;
}

/* Orders Aggregated Table & Individual Table Cards */
#orders-pane-log .card {
  background: #FFFFFF !important;
  border: 1px solid rgba(28, 25, 23, 0.05) !important;
  border-radius: 20px !important;
  padding: 18px 20px !important;
  box-shadow: 0 6px 24px -4px rgba(0, 0, 0, 0.04) !important;
  margin-bottom: 16px !important;
}
html.dark #orders-pane-log .card {
  background: #18181B !important;
  border-color: rgba(255, 255, 255, 0.08) !important;
}

/* Orders Filter Toolbar Card */
#orders-pane-log .card:first-child,
#orders-pane-log > .card:first-child {
  background: #FFFFFF !important;
  border: 1px solid rgba(28, 25, 23, 0.05) !important;
  border-radius: 18px !important;
  padding: 12px 18px !important;
  box-shadow: 0 3px 16px -4px rgba(0, 0, 0, 0.03) !important;
  margin-bottom: 14px !important;
}
html.dark #orders-pane-log .card:first-child,
html.dark #orders-pane-log > .card:first-child {
  background: #18181B !important;
  border-color: rgba(255, 255, 255, 0.08) !important;
}

#f-branch, #f-date {
  height: 40px !important;
  border-radius: 10px !important;
  background: #F5F2EB !important;
  border: 1px solid rgba(28, 25, 23, 0.06) !important;
  color: #18181B !important;
  font-size: 12.5px !important;
  font-weight: 600 !important;
  padding-inline: 14px !important;
  outline: none !important;
}
#f-branch {
  padding-inline-end: 36px !important;
}
html.dark #f-branch, html.dark #f-date {
  background: #222226 !important;
  border-color: rgba(255, 255, 255, 0.08) !important;
  color: #F4F4F5 !important;
}

/* Orders Tables Overrides for Contrast & Breathability */
#page-orders table.tbl {
  width: 100% !important;
  border-collapse: separate !important;
  border-spacing: 0 !important;
}

#page-orders table.tbl th {
  padding: 14px 18px !important;
  background: #FAF8F4 !important;
  color: #71717A !important;
  font-weight: 700 !important;
  font-size: 12px !important;
  border-bottom: 1px solid rgba(28, 25, 23, 0.06) !important;
  white-space: nowrap !important;
  position: sticky !important;
  top: 0 !important;
  z-index: 5 !important;
}
html.dark #page-orders table.tbl th {
  background: #141416 !important;
  color: #A1A1AA !important;
  border-bottom-color: rgba(255, 255, 255, 0.08) !important;
}

#page-orders table.tbl td {
  padding: 14px 18px !important;
  border-bottom: 1px solid rgba(28, 25, 23, 0.04) !important;
  color: #18181B !important;
  font-size: 13px !important;
  vertical-align: middle !important;
  transition: background 0.15s ease !important;
}
html.dark #page-orders table.tbl td {
  border-bottom-color: rgba(255, 255, 255, 0.05) !important;
  color: #F4F4F5 !important;
}

#page-orders table.tbl tbody tr:hover td {
  background: #FDFCF9 !important;
}
html.dark #page-orders table.tbl tbody tr:hover td {
  background: #1F1F23 !important;
}

/* Force light-mode dark contrast on table spans with inline color:#fff */
html:not(.dark) #agg-body td span[style*="color:#fff"],
html:not(.dark) #agg-body td span[style*="color: #fff"],
html:not(.dark) #agg-body td span[style*="color:white"],
html:not(.dark) #orders-tbl-body td span[style*="color:#fff"],
html:not(.dark) #orders-tbl-body td span[style*="color: #fff"],
html:not(.dark) #indiv-orders-table td span[style*="color:#fff"],
html:not(.dark) #indiv-orders-table td span[style*="color: #fff"] {
  color: #18181B !important;
}

/* Manual Order Card */
.manual-order-card {
  background: #FFFFFF !important;
  border: 1px solid rgba(28, 25, 23, 0.05) !important;
  border-radius: 24px !important;
  padding: 26px !important;
  box-shadow: 0 10px 36px -4px rgba(0, 0, 0, 0.04) !important;
}
html.dark .manual-order-card {
  background: #18181B !important;
  border-color: rgba(255, 255, 255, 0.08) !important;
}

#o-branch, #o-date, #o-item-select, #o-item-qty, #o-notes {
  height: 42px !important;
  border-radius: 12px !important;
  background: #F5F2EB !important;
  border: 1px solid rgba(28, 25, 23, 0.06) !important;
  color: #18181B !important;
  font-size: 13px !important;
  padding-inline: 14px !important;
  outline: none !important;
}
html.dark #o-branch, html.dark #o-date, html.dark #o-item-select, html.dark #o-item-qty, html.dark #o-notes {
  background: #222226 !important;
  border-color: rgba(255, 255, 255, 0.08) !important;
  color: #F4F4F5 !important;
}

/* Excel Batch Importer Card */
.excel-upload-card {
  background: #FFFFFF !important;
  border: 1px solid rgba(28, 25, 23, 0.05) !important;
  border-radius: 20px !important;
  padding: 20px 22px !important;
  max-width: 720px !important;
  margin-inline: auto !important;
  box-shadow: 0 10px 36px -4px rgba(0, 0, 0, 0.04) !important;
}
html.dark .excel-upload-card {
  background: #18181B !important;
  border-color: rgba(255, 255, 255, 0.08) !important;
}

.excel-dropzone, #excel-drop-zone {
  background: #FAF7F2 !important;
  border: 2px dashed rgba(234, 179, 8, 0.45) !important;
  border-radius: 18px !important;
  padding: 22px 24px !important;
  text-align: center !important;
  cursor: pointer !important;
  transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1) !important;
}
.excel-dropzone:hover, #excel-drop-zone:hover {
  background: #F5EFE6 !important;
  border-color: #EAB308 !important;
  transform: translateY(-2px) !important;
  box-shadow: 0 10px 30px -4px rgba(234, 179, 8, 0.15) !important;
}
html.dark .excel-dropzone, html.dark #excel-drop-zone {
  background: #141416 !important;
  border-color: rgba(234, 179, 8, 0.40) !important;
}
html.dark .excel-dropzone:hover, html.dark #excel-drop-zone:hover {
  background: #1C1917 !important;
}

.excel-preview-box, #excel-preview {
  background: #FAF7F2 !important;
  border: 1px solid rgba(28, 25, 23, 0.06) !important;
  border-radius: 18px !important;
  padding: 18px 20px !important;
  margin-top: 18px !important;
}
html.dark .excel-preview-box, html.dark #excel-preview {
  background: #141416 !important;
  border-color: rgba(255, 255, 255, 0.08) !important;
}

/* ══════════════════════════════════════════════════════════════════════
   PHASE 4B — RADICAL VISUAL OVERHAUL: RECIPES & PRODUCTION
   Recipe Studio / BOM Control Center & Operations Planning Center
══════════════════════════════════════════════════════════════════════ */

/* ──────────────────────────────────────────────────────────────────────
   1. RECIPES MODULE (#page-recipes) — RECIPE STUDIO / BOM CONTROL CENTER
────────────────────────────────────────────────────────────────────── */

/* Main Responsive Layout Grid */
#page-recipes .recipes-layout {
  display: grid !important;
  grid-template-columns: 320px minmax(0, 1fr) !important;
  gap: 16px !important;
  align-items: start !important;
}

@media (max-width: 1024px) {
  #page-recipes .recipes-layout {
    grid-template-columns: 1fr !important;
    gap: 16px !important;
  }
}

/* Card Overhauls for Recipes */
#page-recipes .card {
  background: #FFFFFF !important;
  border: 1px solid rgba(28, 25, 23, 0.05) !important;
  border-radius: 18px !important;
  padding: 18px 20px !important;
  box-shadow: 0 6px 24px -4px rgba(0, 0, 0, 0.04) !important;
  transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1) !important;
}

html.dark #page-recipes .card {
  background: #18181B !important;
  border-color: rgba(255, 255, 255, 0.08) !important;
  box-shadow: 0 10px 32px -4px rgba(0, 0, 0, 0.40) !important;
}

/* Sidebar Recipe Selector */
.recipe-side-card {
  padding: 20px !important;
}

@media (min-width: 1025px) {
  .recipe-side-card {
    position: sticky !important;
    top: 96px !important;
    max-height: calc(100vh - 120px) !important;
    display: flex !important;
    flex-direction: column !important;
  }
}

#recipes-count-badge {
  background: rgba(234, 179, 8, 0.15) !important;
  color: #B45309 !important;
  border: 1px solid rgba(234, 179, 8, 0.30) !important;
  border-radius: 9999px !important;
  padding: 3px 10px !important;
  font-size: 11.5px !important;
  font-weight: 800 !important;
}

html.dark #recipes-count-badge {
  background: rgba(234, 179, 8, 0.20) !important;
  color: #FCD34D !important;
  border-color: rgba(234, 179, 8, 0.40) !important;
}

#recipe-search-input {
  height: 42px !important;
  border-radius: 12px !important;
  background: #F5F2EB !important;
  border: 1px solid rgba(28, 25, 23, 0.06) !important;
  color: #18181B !important;
  font-size: 13px !important;
  padding: 0 14px !important;
  width: 100% !important;
  transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1) !important;
}

#recipe-search-input:focus {
  background: #FFFFFF !important;
  border-color: #EAB308 !important;
  box-shadow: 0 0 0 3px rgba(234, 179, 8, 0.15) !important;
  outline: none !important;
}

html.dark #recipe-search-input {
  background: #222226 !important;
  border-color: rgba(255, 255, 255, 0.08) !important;
  color: #F4F4F5 !important;
}

html.dark #recipe-search-input:focus {
  background: #27272A !important;
  border-color: #EAB308 !important;
}

/* Recipe Scrollable List */
#recipe-list.recipe-list-scroll {
  display: flex !important;
  flex-direction: column !important;
  gap: 6px !important;
  max-height: 460px !important;
  overflow-y: auto !important;
  padding-inline-end: 4px !important;
  margin-block: 8px !important;
}

#recipe-list.recipe-list-scroll::-webkit-scrollbar {
  width: 5px !important;
}
#recipe-list.recipe-list-scroll::-webkit-scrollbar-thumb {
  background: rgba(28, 25, 23, 0.12) !important;
  border-radius: 9999px !important;
}
html.dark #recipe-list.recipe-list-scroll::-webkit-scrollbar-thumb {
  background: rgba(255, 255, 255, 0.15) !important;
}

/* Individual Recipe Nav Item */
#recipe-list .nav-item {
  display: flex !important;
  align-items: center !important;
  gap: 12px !important;
  padding: 10px 14px !important;
  border-radius: 14px !important;
  background: #FAF8F4 !important;
  border: 1px solid rgba(28, 25, 23, 0.05) !important;
  cursor: pointer !important;
  transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1) !important;
}

#recipe-list .nav-item span {
  transition: color 0.2s ease !important;
}

#recipe-list .nav-item:hover {
  background: #F3ECE0 !important;
  border-color: rgba(234, 179, 8, 0.40) !important;
  transform: translateX(-3px) !important;
}

[dir="ltr"] #recipe-list .nav-item:hover {
  transform: translateX(3px) !important;
}

html.dark #recipe-list .nav-item {
  background: #202024 !important;
  border-color: rgba(255, 255, 255, 0.05) !important;
}

html.dark #recipe-list .nav-item:hover {
  background: #27272A !important;
  border-color: rgba(234, 179, 8, 0.40) !important;
}

/* Active Recipe Item State */
#recipe-list .nav-item.active {
  background: #18181B !important;
  border-color: #EAB308 !important;
  box-shadow: 0 4px 18px -2px rgba(0, 0, 0, 0.18) !important;
  transform: none !important;
}

#recipe-list .nav-item.active div > div:first-child span:last-child {
  color: #FFFFFF !important;
  font-weight: 800 !important;
}

#recipe-list .nav-item.active div > div:last-child {
  color: #F4F4F5 !important;
}

#recipe-list .nav-item.active .badge {
  background: rgba(234, 179, 8, 0.25) !important;
  color: #FDE047 !important;
  border-color: rgba(234, 179, 8, 0.50) !important;
}

html.dark #recipe-list .nav-item.active {
  background: #27272A !important;
  border-color: #EAB308 !important;
  box-shadow: 0 4px 20px -2px rgba(234, 179, 8, 0.20) !important;
}

/* Add Recipe Product Button */
.recipe-side-card button[onclick="openModal('modal-prod')"] {
  height: 42px !important;
  border-radius: 12px !important;
  font-weight: 700 !important;
  font-size: 13px !important;
  background: #F5F2EB !important;
  color: #18181B !important;
  border: 1px solid rgba(28, 25, 23, 0.08) !important;
  transition: all 0.2s ease !important;
}
.recipe-side-card button[onclick="openModal('modal-prod')"]:hover {
  background: #ECE6DA !important;
  color: #18181B !important;
  transform: translateY(-1px) !important;
}
html.dark .recipe-side-card button[onclick="openModal('modal-prod')"] {
  background: #27272A !important;
  color: #F4F4F5 !important;
  border-color: rgba(255, 255, 255, 0.08) !important;
}
html.dark .recipe-side-card button[onclick="openModal('modal-prod')"]:hover {
  background: #323238 !important;
}

/* Recipe Identity Header in Detail Area */
.recipe-hero-title {
  font-size: 24px !important;
  font-weight: 800 !important;
  color: #18181B !important;
  margin: 0 !important;
  letter-spacing: -0.02em !important;
}
html.dark .recipe-hero-title {
  color: #F4F4F5 !important;
}

#recipe-cat-badge {
  background: rgba(234, 179, 8, 0.15) !important;
  color: #B45309 !important;
  border: 1px solid rgba(234, 179, 8, 0.30) !important;
  border-radius: 9999px !important;
  padding: 4px 12px !important;
  font-size: 11.5px !important;
  font-weight: 800 !important;
}
html.dark #recipe-cat-badge {
  background: rgba(234, 179, 8, 0.20) !important;
  color: #FCD34D !important;
  border-color: rgba(234, 179, 8, 0.40) !important;
}

.recipe-hero-cost {
  font-size: 28px !important;
  font-weight: 900 !important;
  color: #D97706 !important;
  font-variant-numeric: tabular-nums !important;
  line-height: 1.1 !important;
}
html.dark .recipe-hero-cost {
  color: #FBBF24 !important;
}

#recipe-cost-label {
  font-size: 12.5px !important;
  font-weight: 600 !important;
  color: #71717A !important;
}
html.dark #recipe-cost-label {
  color: #A1A1AA !important;
}

/* Live Branch Demand Indicator Card */
#recipe-branch-demand-card.recipe-hero-card {
  background: #FAF7F2 !important;
  border: 1px solid rgba(234, 179, 8, 0.30) !important;
  border-radius: 20px !important;
  padding: 18px 22px !important;
  margin-bottom: 20px !important;
  box-shadow: 0 6px 24px -4px rgba(234, 179, 8, 0.08) !important;
}

html.dark #recipe-branch-demand-card.recipe-hero-card {
  background: #202024 !important;
  border-color: rgba(234, 179, 8, 0.35) !important;
  box-shadow: 0 8px 28px -4px rgba(0, 0, 0, 0.40) !important;
}

.recipe-icon-box {
  width: 44px !important;
  height: 44px !important;
  border-radius: 14px !important;
  background: linear-gradient(135deg, rgba(234, 179, 8, 0.25), rgba(245, 158, 11, 0.10)) !important;
  border: 1px solid rgba(234, 179, 8, 0.35) !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  font-size: 20px !important;
  flex-shrink: 0 !important;
}

#recipe-demand-branches-count {
  background: rgba(234, 179, 8, 0.20) !important;
  color: #B45309 !important;
  border: 1px solid rgba(234, 179, 8, 0.35) !important;
  border-radius: 9999px !important;
  padding: 2px 10px !important;
  font-size: 11px !important;
  font-weight: 800 !important;
}
html.dark #recipe-demand-branches-count {
  background: rgba(234, 179, 8, 0.25) !important;
  color: #FDE047 !important;
}

.tag-amber-badge {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  background: #FFFFFF !important;
  border: 1px solid rgba(234, 179, 8, 0.35) !important;
  border-radius: 14px !important;
  padding: 6px 16px !important;
  min-width: 105px !important;
}
html.dark .tag-amber-badge {
  background: #18181B !important;
  border-color: rgba(234, 179, 8, 0.40) !important;
}

.tag-amber-label {
  font-size: 10.5px !important;
  font-weight: 700 !important;
  color: #71717A !important;
}
html.dark .tag-amber-label {
  color: #A1A1AA !important;
}

.tag-amber-val {
  font-size: 20px !important;
  font-weight: 900 !important;
  color: #D97706 !important;
  font-variant-numeric: tabular-nums !important;
}
html.dark .tag-amber-val {
  color: #FBBF24 !important;
}

#btn-apply-demand-batch {
  height: 40px !important;
  border-radius: 12px !important;
  padding: 0 18px !important;
  font-size: 13px !important;
  font-weight: 800 !important;
  background: #18181B !important;
  color: #FFFFFF !important;
  border: 1px solid rgba(255, 255, 255, 0.12) !important;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.14) !important;
  transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1) !important;
}
#btn-apply-demand-batch:hover {
  background: #27272A !important;
  transform: translateY(-2px) !important;
  box-shadow: 0 8px 22px rgba(0, 0, 0, 0.20) !important;
}
html.dark #btn-apply-demand-batch {
  background: #EAB308 !important;
  color: #18181B !important;
  border: none !important;
  box-shadow: 0 4px 16px rgba(234, 179, 8, 0.25) !important;
}
html.dark #btn-apply-demand-batch:hover {
  background: #F59E0B !important;
  box-shadow: 0 8px 24px rgba(234, 179, 8, 0.35) !important;
}

/* Branch Tags Grid Container */
#recipe-branch-demand-card .card.p-2\.5 {
  background: #FFFFFF !important;
  border: 1px solid rgba(28, 25, 23, 0.05) !important;
  border-radius: 14px !important;
  padding: 12px 16px !important;
}
html.dark #recipe-branch-demand-card .card.p-2\.5 {
  background: #18181B !important;
  border-color: rgba(255, 255, 255, 0.08) !important;
}

#recipe-demand-branches-tags .chip,
#recipe-demand-branches-tags .badge,
#recipe-demand-branches-tags > span:not(.text-muted) {
  background: #F5EFE6 !important;
  border: 1px solid rgba(28, 25, 23, 0.08) !important;
  border-radius: 9999px !important;
  padding: 4px 12px !important;
  font-size: 11.5px !important;
  font-weight: 700 !important;
  color: #18181B !important;
}
html.dark #recipe-demand-branches-tags .chip,
html.dark #recipe-demand-branches-tags .badge,
html.dark #recipe-demand-branches-tags > span:not(.text-muted) {
  background: #27272A !important;
  border-color: rgba(255, 255, 255, 0.08) !important;
  color: #F4F4F5 !important;
}

/* Recipe Sub-tabs (Base Recipe Standard vs Batch Deduction) */
#page-recipes .border-warm {
  border-color: rgba(28, 25, 23, 0.06) !important;
}
html.dark #page-recipes .border-warm {
  border-color: rgba(255, 255, 255, 0.08) !important;
}

#tab-btn-base-bom,
#tab-btn-batch-bom {
  height: 40px !important;
  border-radius: 12px !important;
  padding: 0 18px !important;
  font-size: 13px !important;
  font-weight: 700 !important;
  border: 1px solid transparent !important;
  transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1) !important;
}

#tab-btn-base-bom.btn-primary,
#tab-btn-batch-bom.btn-primary {
  background: #18181B !important;
  color: #FFFFFF !important;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.12) !important;
}
html.dark #tab-btn-base-bom.btn-primary,
html.dark #tab-btn-batch-bom.btn-primary {
  background: #EAB308 !important;
  color: #18181B !important;
  box-shadow: 0 4px 16px rgba(234, 179, 8, 0.25) !important;
}

#tab-btn-base-bom.btn-secondary,
#tab-btn-batch-bom.btn-secondary {
  background: #F5F2EB !important;
  color: #71717A !important;
  border-color: rgba(28, 25, 23, 0.05) !important;
}
#tab-btn-base-bom.btn-secondary:hover,
#tab-btn-batch-bom.btn-secondary:hover {
  background: #ECE6DA !important;
  color: #18181B !important;
}
html.dark #tab-btn-base-bom.btn-secondary,
html.dark #tab-btn-batch-bom.btn-secondary {
  background: #27272A !important;
  color: #A1A1AA !important;
  border-color: rgba(255, 255, 255, 0.08) !important;
}
html.dark #tab-btn-base-bom.btn-secondary:hover {
  background: #323238 !important;
  color: #FFFFFF !important;
}

/* BOM Standard Ingredient Table (#recipe-tbl) */

#recipe-tab-base .tbl thead th {
  background: #F7F4EE !important;
  padding: 14px 16px !important;
  font-size: 12px !important;
  font-weight: 800 !important;
  color: #71717A !important;
  border-bottom: 1px solid rgba(28, 25, 23, 0.06) !important;
}
html.dark #recipe-tab-base .tbl thead th {
  background: #18181B !important;
  color: #A1A1AA !important;
  border-bottom-color: rgba(255, 255, 255, 0.08) !important;
}

#recipe-tbl tr td {
  padding: 12px 14px !important;
  border-bottom: 1px solid rgba(28, 25, 23, 0.04) !important;
  vertical-align: middle !important;
}
html.dark #recipe-tbl tr td {
  border-bottom-color: rgba(255, 255, 255, 0.05) !important;
}

#recipe-tbl tr:hover td {
  background: #FCFAF7 !important;
}
html.dark #recipe-tbl tr:hover td {
  background: #202024 !important;
}

/* Form Controls Inside Recipe Table */
#recipe-tbl .select {
  height: 40px !important;
  border-radius: 10px !important;
  background: #FFFFFF !important;
  border: 1px solid rgba(28, 25, 23, 0.08) !important;
  color: #18181B !important;
  padding: 0 12px !important;
  font-size: 13px !important;
  font-weight: 600 !important;
  transition: all 0.2s ease !important;
}
#recipe-tbl .select:focus {
  border-color: #EAB308 !important;
  box-shadow: 0 0 0 3px rgba(234, 179, 8, 0.15) !important;
  outline: none !important;
}
html.dark #recipe-tbl .select {
  background: #222226 !important;
  border-color: rgba(255, 255, 255, 0.10) !important;
  color: #F4F4F5 !important;
}
html.dark #recipe-tbl .select:focus {
  background: #27272A !important;
  border-color: #EAB308 !important;
}

#recipe-tbl .input {
  height: 40px !important;
  border-radius: 10px !important;
  background: #FFFFFF !important;
  border: 1px solid rgba(28, 25, 23, 0.08) !important;
  color: #18181B !important;
  text-align: center !important;
  font-size: 13px !important;
  font-weight: 700 !important;
  font-variant-numeric: tabular-nums !important;
  padding: 0 8px !important;
  transition: all 0.2s ease !important;
}
#recipe-tbl .input:focus {
  border-color: #EAB308 !important;
  box-shadow: 0 0 0 3px rgba(234, 179, 8, 0.15) !important;
  outline: none !important;
}
html.dark #recipe-tbl .input {
  background: #222226 !important;
  border-color: rgba(255, 255, 255, 0.10) !important;
  color: #F4F4F5 !important;
}
html.dark #recipe-tbl .input:focus {
  background: #27272A !important;
  border-color: #EAB308 !important;
}

#recipe-tbl td:nth-child(6) {
  font-weight: 800 !important;
  font-size: 14px !important;
  color: #D97706 !important;
  font-variant-numeric: tabular-nums !important;
}
html.dark #recipe-tbl td:nth-child(6) {
  color: #FBBF24 !important;
}

#recipe-tbl .btn-danger {
  width: 34px !important;
  height: 34px !important;
  padding: 0 !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  border-radius: 10px !important;
  background: rgba(239, 68, 68, 0.08) !important;
  color: #EF4444 !important;
  border: 1px solid rgba(239, 68, 68, 0.18) !important;
  transition: all 0.2s ease !important;
}
#recipe-tbl .btn-danger:hover {
  background: #EF4444 !important;
  color: #FFFFFF !important;
  transform: scale(1.05) !important;
}

/* Add Ingredient to Recipe Button */
#recipe-tab-base button[onclick="addIngRow()"] {
  height: 40px !important;
  border-radius: 12px !important;
  padding: 0 20px !important;
  font-size: 13px !important;
  font-weight: 700 !important;
  background: #F5F2EB !important;
  color: #18181B !important;
  border: 1px solid rgba(28, 25, 23, 0.08) !important;
  transition: all 0.2s ease !important;
}
#recipe-tab-base button[onclick="addIngRow()"]:hover {
  background: #ECE6DA !important;
  transform: translateY(-1px) !important;
}
html.dark #recipe-tab-base button[onclick="addIngRow()"] {
  background: #27272A !important;
  color: #F4F4F5 !important;
  border-color: rgba(255, 255, 255, 0.08) !important;
}
html.dark #recipe-tab-base button[onclick="addIngRow()"]:hover {
  background: #323238 !important;
}

/* Tab 2: Operational Batch Panel (#recipe-tab-batch) */
#recipe-tab-batch .bg-warm {
  background: #FAF7F2 !important;
  border: 1px solid rgba(28, 25, 23, 0.06) !important;
  border-radius: 18px !important;
  padding: 18px 22px !important;
}
html.dark #recipe-tab-batch .bg-warm {
  background: #202024 !important;
  border-color: rgba(255, 255, 255, 0.08) !important;
}

#batch-prod-qty {
  height: 42px !important;
  width: 120px !important;
  border-radius: 12px !important;
  background: #FFFFFF !important;
  border: 2px solid rgba(234, 179, 8, 0.40) !important;
  color: #0284C7 !important;
  font-size: 16px !important;
  font-weight: 900 !important;
  text-align: center !important;
  font-variant-numeric: tabular-nums !important;
}
#batch-prod-qty:focus {
  border-color: #EAB308 !important;
  box-shadow: 0 0 0 3px rgba(234, 179, 8, 0.15) !important;
  outline: none !important;
}
html.dark #batch-prod-qty {
  background: #27272A !important;
  border-color: rgba(234, 179, 8, 0.50) !important;
  color: #38BDF8 !important;
}

#batch-prod-uom {
  background: rgba(234, 179, 8, 0.15) !important;
  color: #B45309 !important;
  border: 1px solid rgba(234, 179, 8, 0.30) !important;
  border-radius: 9999px !important;
  padding: 4px 12px !important;
  font-size: 12px !important;
  font-weight: 800 !important;
}
html.dark #batch-prod-uom {
  background: rgba(234, 179, 8, 0.20) !important;
  color: #FCD34D !important;
}

#recipe-tab-batch button[onclick="executeBatchDeduction()"] {
  height: 42px !important;
  border-radius: 12px !important;
  padding: 0 22px !important;
  font-size: 13.5px !important;
  font-weight: 800 !important;
  background: #18181B !important;
  color: #FFFFFF !important;
  border: 1px solid rgba(255, 255, 255, 0.12) !important;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.14) !important;
  transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1) !important;
}
#recipe-tab-batch button[onclick="executeBatchDeduction()"]:hover {
  background: #27272A !important;
  transform: translateY(-2px) !important;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.20) !important;
}
html.dark #recipe-tab-batch button[onclick="executeBatchDeduction()"] {
  background: #EAB308 !important;
  color: #18181B !important;
  border: none !important;
  box-shadow: 0 4px 16px rgba(234, 179, 8, 0.25) !important;
}
html.dark #recipe-tab-batch button[onclick="executeBatchDeduction()"]:hover {
  background: #F59E0B !important;
  box-shadow: 0 8px 24px rgba(234, 179, 8, 0.35) !important;
}

/* Batch Table Wrapper and Cells */

#recipe-tab-batch .tbl thead th {
  background: #F7F4EE !important;
  padding: 14px 16px !important;
  font-size: 12px !important;
  font-weight: 800 !important;
  color: #71717A !important;
  border-bottom: 1px solid rgba(28, 25, 23, 0.06) !important;
}
html.dark #recipe-tab-batch .tbl thead th {
  background: #18181B !important;
  color: #A1A1AA !important;
  border-bottom-color: rgba(255, 255, 255, 0.08) !important;
}

#batch-deduction-tbody tr td {
  padding: 13px 16px !important;
  border-bottom: 1px solid rgba(28, 25, 23, 0.04) !important;
  font-size: 13px !important;
  vertical-align: middle !important;
  color: #18181B !important;
}
html.dark #batch-deduction-tbody tr td {
  border-bottom-color: rgba(255, 255, 255, 0.05) !important;
  color: #F4F4F5 !important;
}

#batch-deduction-tbody tr:hover td {
  background: #FCFAF7 !important;
}
html.dark #batch-deduction-tbody tr:hover td {
  background: #202024 !important;
}

#batch-deduction-tbody td:first-child {
  font-weight: 700 !important;
}

#batch-deduction-tbody td:nth-child(3) {
  color: #0284C7 !important;
  font-weight: 800 !important;
  font-variant-numeric: tabular-nums !important;
}
html.dark #batch-deduction-tbody td:nth-child(3) {
  color: #38BDF8 !important;
}

#batch-deduction-tbody td:nth-child(5) {
  color: #059669 !important;
  font-weight: 800 !important;
  font-variant-numeric: tabular-nums !important;
}
html.dark #batch-deduction-tbody td:nth-child(5) {
  color: #34D399 !important;
}


/* ──────────────────────────────────────────────────────────────────────
   2. PRODUCTION MODULE (#page-production) — OPERATIONS PLANNING CENTER
────────────────────────────────────────────────────────────────────── */

/* Top Production KPI Stats Row */
#page-production #prod-stats.orders-kpi-grid {
  display: grid !important;
  grid-template-columns: repeat(4, 1fr) !important;
  gap: 16px !important;
  margin-bottom: 20px !important;
}

@media (max-width: 1100px) {
  #page-production #prod-stats.orders-kpi-grid {
    grid-template-columns: repeat(2, 1fr) !important;
  }
}
@media (max-width: 640px) {
  #page-production #prod-stats.orders-kpi-grid {
    grid-template-columns: 1fr !important;
  }
}

#prod-stats .stat-card {
  background: #FFFFFF !important;
  border: 1px solid rgba(28, 25, 23, 0.05) !important;
  border-radius: 20px !important;
  padding: 18px 20px !important;
  box-shadow: 0 8px 24px -4px rgba(0, 0, 0, 0.03) !important;
  transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1) !important;
}

#prod-stats .stat-card:hover {
  transform: translateY(-2px) !important;
  box-shadow: 0 12px 30px -4px rgba(0, 0, 0, 0.06) !important;
}

html.dark #prod-stats .stat-card {
  background: #18181B !important;
  border-color: rgba(255, 255, 255, 0.08) !important;
  box-shadow: 0 8px 28px -4px rgba(0, 0, 0, 0.40) !important;
}

#prod-stats .kpi-number {
  font-size: 26px !important;
  font-weight: 900 !important;
  line-height: 1.15 !important;
  margin-bottom: 4px !important;
  font-variant-numeric: tabular-nums !important;
}

#prod-stats .kpi-number.kpi-cyan {
  color: #0284C7 !important;
}
html.dark #prod-stats .kpi-number.kpi-cyan {
  color: #38BDF8 !important;
}

#prod-stats .kpi-number.kpi-amber {
  color: #D97706 !important;
}
html.dark #prod-stats .kpi-number.kpi-amber {
  color: #FBBF24 !important;
}

#prod-stats .kpi-number.kpi-green {
  color: #059669 !important;
}
html.dark #prod-stats .kpi-number.kpi-green {
  color: #34D399 !important;
}

#prod-stats .kpi-number.kpi-purple {
  color: #7C3AED !important;
}
html.dark #prod-stats .kpi-number.kpi-purple {
  color: #A78BFA !important;
}

/* Production Segmented Tab Navigation */
#page-production .orders-nav-tabs {
  display: flex !important;
  gap: 8px !important;
  padding: 6px !important;
  background: #F5F2EB !important;
  border-radius: 18px !important;
  margin-bottom: 20px !important;
  border: 1px solid rgba(28, 25, 23, 0.04) !important;
  width: fit-content !important;
  max-width: 100% !important;
  overflow-x: auto !important;
}

html.dark #page-production .orders-nav-tabs {
  background: #202024 !important;
  border-color: rgba(255, 255, 255, 0.05) !important;
}

#page-production .orders-tab-btn {
  height: 42px !important;
  padding: 0 20px !important;
  border-radius: 13px !important;
  font-size: 13.5px !important;
  font-weight: 700 !important;
  color: #71717A !important;
  background: transparent !important;
  border: none !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 8px !important;
  cursor: pointer !important;
  transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1) !important;
  white-space: nowrap !important;
}

#page-production .orders-tab-btn:hover {
  background: rgba(0, 0, 0, 0.04) !important;
  color: #18181B !important;
}

#page-production .orders-tab-btn.active {
  background: #18181B !important;
  color: #FFFFFF !important;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.12) !important;
}

html.dark #page-production .orders-tab-btn {
  color: #A1A1AA !important;
}
html.dark #page-production .orders-tab-btn:hover {
  background: rgba(255, 255, 255, 0.05) !important;
  color: #FFFFFF !important;
}
html.dark #page-production .orders-tab-btn.active {
  background: #EAB308 !important;
  color: #18181B !important;
  box-shadow: 0 4px 16px rgba(234, 179, 8, 0.25) !important;
}

/* Production Tab Panes and Cards */
.prod-tab-pane .card {
  background: #FFFFFF !important;
  border: 1px solid rgba(28, 25, 23, 0.05) !important;
  border-radius: 22px !important;
  padding: 24px !important;
  box-shadow: 0 8px 30px -4px rgba(0, 0, 0, 0.04) !important;
}

html.dark .prod-tab-pane .card {
  background: #18181B !important;
  border-color: rgba(255, 255, 255, 0.08) !important;
  box-shadow: 0 10px 32px -4px rgba(0, 0, 0, 0.40) !important;
}

/* Controls Toolbar in Monthly Matrix */
#prod-matrix-month,
#prod-matrix-search,
#prod-matrix-cat {
  height: 42px !important;
  border-radius: 12px !important;
  background: #F5F2EB !important;
  border: 1px solid rgba(28, 25, 23, 0.06) !important;
  color: #18181B !important;
  font-size: 13px !important;
  padding: 0 14px !important;
  transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1) !important;
}

#prod-matrix-month:focus,
#prod-matrix-search:focus,
#prod-matrix-cat:focus {
  background: #FFFFFF !important;
  border-color: #EAB308 !important;
  box-shadow: 0 0 0 3px rgba(234, 179, 8, 0.15) !important;
  outline: none !important;
}

html.dark #prod-matrix-month,
html.dark #prod-matrix-search,
html.dark #prod-matrix-cat {
  background: #222226 !important;
  border-color: rgba(255, 255, 255, 0.08) !important;
  color: #F4F4F5 !important;
}

html.dark #prod-matrix-month:focus,
html.dark #prod-matrix-search:focus,
html.dark #prod-matrix-cat:focus {
  background: #27272A !important;
  border-color: #EAB308 !important;
}

#btn-export-prod-matrix {
  height: 42px !important;
  border-radius: 12px !important;
  background: #F5F2EB !important;
  border: 1px solid rgba(28, 25, 23, 0.08) !important;
  color: #18181B !important;
  font-weight: 700 !important;
  padding: 0 18px !important;
  transition: all 0.2s ease !important;
}
#btn-export-prod-matrix:hover {
  background: #ECE6DA !important;
  transform: translateY(-1px) !important;
}
html.dark #btn-export-prod-matrix {
  background: #27272A !important;
  border-color: rgba(255, 255, 255, 0.08) !important;
  color: #F4F4F5 !important;
}
html.dark #btn-export-prod-matrix:hover {
  background: #323238 !important;
}

#prod-items-count-badge,
#prod-days-count-badge {
  background: rgba(234, 179, 8, 0.15) !important;
  color: #B45309 !important;
  border: 1px solid rgba(234, 179, 8, 0.30) !important;
  border-radius: 9999px !important;
  padding: 4px 12px !important;
  font-size: 12px !important;
  font-weight: 800 !important;
}
html.dark #prod-items-count-badge,
html.dark #prod-days-count-badge {
  background: rgba(234, 179, 8, 0.20) !important;
  color: #FCD34D !important;
  border-color: rgba(234, 179, 8, 0.40) !important;
}

/* ── PANE 1: MONTHLY PRODUCTION MATRIX TABLE ── */
.tbl-scroll-h480 {
  max-height: 520px !important;
  overflow: auto !important;
  border-radius: 18px !important;
  border: 1px solid rgba(28, 25, 23, 0.06) !important;
  background: #FFFFFF !important;
  position: relative !important;
}
html.dark .tbl-scroll-h480 {
  border-color: rgba(255, 255, 255, 0.08) !important;
  background: #18181B !important;
}

#prod-matrix-table {
  border-collapse: separate !important;
  border-spacing: 0 !important;
  width: 100% !important;
}

/* Sticky Thead */
#prod-matrix-head {
  position: sticky !important;
  top: 0 !important;
  z-index: 25 !important;
}

#prod-matrix-head th {
  background: #F7F4EE !important;
  border-bottom: 2px solid rgba(28, 25, 23, 0.08) !important;
  padding: 12px 6px !important;
  font-size: 11.5px !important;
  font-weight: 800 !important;
  color: #71717A !important;
  white-space: nowrap !important;
}

html.dark #prod-matrix-head th {
  background: #18181B !important;
  border-bottom-color: rgba(255, 255, 255, 0.10) !important;
  color: #A1A1AA !important;
}

/* Sticky Columns in Production Matrix */
/* Column 1 (#): fixed width 44px */
#prod-matrix-table th:first-child,
#prod-matrix-table td:first-child {
  position: sticky !important;
  right: 0 !important;
  z-index: 10 !important;
  background: #FFFFFF !important;
  width: 44px !important;
  min-width: 44px !important;
  max-width: 44px !important;
  text-align: center !important;
}
#prod-matrix-table th:first-child {
  background: #F7F4EE !important;
  z-index: 30 !important;
}

/* Column 2 (Item Name): fixed offset 44px */
#prod-matrix-table th:nth-child(2),
#prod-matrix-table td:nth-child(2) {
  position: sticky !important;
  right: 44px !important;
  z-index: 10 !important;
  background: #FFFFFF !important;
  min-width: 180px !important;
  border-left: 2px solid rgba(28, 25, 23, 0.08) !important;
}
#prod-matrix-table th:nth-child(2) {
  background: #F7F4EE !important;
  z-index: 30 !important;
  border-left-color: rgba(28, 25, 23, 0.10) !important;
}

/* LTR overrides for sticky columns */
[dir="ltr"] #prod-matrix-table th:first-child,
[dir="ltr"] #prod-matrix-table td:first-child {
  right: auto !important;
  left: 0 !important;
}
[dir="ltr"] #prod-matrix-table th:nth-child(2),
[dir="ltr"] #prod-matrix-table td:nth-child(2) {
  right: auto !important;
  left: 44px !important;
  border-left: none !important;
  border-right: 2px solid rgba(28, 25, 23, 0.08) !important;
}

/* Dark mode sticky backgrounds */
html.dark #prod-matrix-table th:first-child,
html.dark #prod-matrix-table td:first-child,
html.dark #prod-matrix-table th:nth-child(2),
html.dark #prod-matrix-table td:nth-child(2) {
  background: #18181B !important;
}
html.dark #prod-matrix-table th:nth-child(2),
html.dark #prod-matrix-table td:nth-child(2) {
  border-color: rgba(255, 255, 255, 0.10) !important;
}

/* Hover row sticky background sync */
#prod-matrix-table tbody tr:hover td {
  background: #FCFAF7 !important;
}
html.dark #prod-matrix-table tbody tr:hover td {
  background: #202024 !important;
}

/* Text color overrides for matrix rows */
#prod-matrix-table td:nth-child(2) span {
  color: #18181B !important;
  font-weight: 700 !important;
}
html.dark #prod-matrix-table td:nth-child(2) span {
  color: #F4F4F5 !important;
}

#prod-matrix-body tr td {
  border-bottom: 1px solid rgba(28, 25, 23, 0.04) !important;
  vertical-align: middle !important;
}
html.dark #prod-matrix-body tr td {
  border-bottom-color: rgba(255, 255, 255, 0.05) !important;
}

/* Active Day Quantities vs Zero */
#prod-matrix-body td[style*="color:#f1f5f9"],
#prod-matrix-body td[style*="color: #f1f5f9"] {
  color: #18181B !important;
  font-weight: 600 !important;
}
html.dark #prod-matrix-body td[style*="color:#f1f5f9"],
html.dark #prod-matrix-body td[style*="color: #f1f5f9"] {
  color: #F4F4F5 !important;
}

#prod-matrix-body td[style*="color:#475569"],
#prod-matrix-body td[style*="color: #475569"] {
  color: #A1A1AA !important;
}

/* Totals Columns in Matrix */
#prod-matrix-head th:nth-last-child(3),
#prod-matrix-body td:nth-last-child(3) {
  color: #0284C7 !important;
  font-weight: 800 !important;
  background: rgba(2, 132, 199, 0.05) !important;
  font-variant-numeric: tabular-nums !important;
}
html.dark #prod-matrix-head th:nth-last-child(3),
html.dark #prod-matrix-body td:nth-last-child(3) {
  color: #38BDF8 !important;
  background: rgba(56, 189, 248, 0.08) !important;
}

#prod-matrix-head th:nth-last-child(2),
#prod-matrix-body td:nth-last-child(2) {
  color: #D97706 !important;
  font-weight: 700 !important;
  font-variant-numeric: tabular-nums !important;
}
html.dark #prod-matrix-head th:nth-last-child(2),
html.dark #prod-matrix-body td:nth-last-child(2) {
  color: #FBBF24 !important;
}

#prod-matrix-head th:last-child,
#prod-matrix-body td:last-child {
  color: #059669 !important;
  font-weight: 800 !important;
  font-variant-numeric: tabular-nums !important;
}
html.dark #prod-matrix-head th:last-child,
html.dark #prod-matrix-body td:last-child {
  color: #34D399 !important;
}

/* ── PANE 2: DAILY BOM EXPLOSION TABLE (#prod-rm-tbl) ── */
.tbl-scroll-h500 {
  max-height: 520px !important;
  overflow: auto !important;
  border-radius: 18px !important;
  border: 1px solid rgba(28, 25, 23, 0.06) !important;
  background: #FFFFFF !important;
}
html.dark .tbl-scroll-h500 {
  border-color: rgba(255, 255, 255, 0.08) !important;
  background: #18181B !important;
}

#prod-pane-bom .tbl thead th {
  background: #F7F4EE !important;
  padding: 14px 16px !important;
  font-size: 12px !important;
  font-weight: 800 !important;
  color: #71717A !important;
  border-bottom: 1px solid rgba(28, 25, 23, 0.06) !important;
  position: sticky !important;
  top: 0 !important;
  z-index: 10 !important;
}
html.dark #prod-pane-bom .tbl thead th {
  background: #18181B !important;
  color: #A1A1AA !important;
  border-bottom-color: rgba(255, 255, 255, 0.08) !important;
}

#prod-rm-tbl tr td {
  padding: 13px 16px !important;
  border-bottom: 1px solid rgba(28, 25, 23, 0.04) !important;
  font-size: 13px !important;
  vertical-align: middle !important;
}
html.dark #prod-rm-tbl tr td {
  border-bottom-color: rgba(255, 255, 255, 0.05) !important;
}

#prod-rm-tbl tr:hover td {
  background: #FCFAF7 !important;
}
html.dark #prod-rm-tbl tr:hover td {
  background: #202024 !important;
}

/* Text overrides in BOM Explosion rows */
#prod-rm-tbl td:first-child span {
  color: #18181B !important;
  font-weight: 700 !important;
}
html.dark #prod-rm-tbl td:first-child span {
  color: #F4F4F5 !important;
}

#prod-rm-tbl td:nth-child(4) {
  color: #18181B !important;
  font-weight: 800 !important;
  font-variant-numeric: tabular-nums !important;
}
html.dark #prod-rm-tbl td:nth-child(4) {
  color: #F4F4F5 !important;
}

#prod-rm-tbl td:nth-child(6) {
  font-variant-numeric: tabular-nums !important;
}

/* Status Badges in BOM Explosion */
#prod-rm-tbl .badge-red {
  background: rgba(239, 68, 68, 0.12) !important;
  color: #DC2626 !important;
  border: 1px solid rgba(239, 68, 68, 0.25) !important;
  border-radius: 9999px !important;
  padding: 4px 12px !important;
  font-size: 11.5px !important;
  font-weight: 800 !important;
}
html.dark #prod-rm-tbl .badge-red {
  color: #F87171 !important;
}

#prod-rm-tbl .badge-green {
  background: rgba(16, 185, 129, 0.12) !important;
  color: #059669 !important;
  border: 1px solid rgba(16, 185, 129, 0.25) !important;
  border-radius: 9999px !important;
  padding: 4px 12px !important;
  font-size: 11.5px !important;
  font-weight: 800 !important;
}
html.dark #prod-rm-tbl .badge-green {
  color: #34D399 !important;
}

/* ── PANE 3: SAUCE PRODUCTION (#prod-pane-taztiki) ── */

#prod-pane-taztiki .tbl thead th {
  background: #F7F4EE !important;
  padding: 14px 16px !important;
  font-size: 12px !important;
  font-weight: 800 !important;
  color: #71717A !important;
  border-bottom: 1px solid rgba(28, 25, 23, 0.06) !important;
}
html.dark #prod-pane-taztiki .tbl thead th {
  background: #18181B !important;
  color: #A1A1AA !important;
  border-bottom-color: rgba(255, 255, 255, 0.08) !important;
}

#prod-taztiki-tbody tr td {
  padding: 13px 16px !important;
  border-bottom: 1px solid rgba(28, 25, 23, 0.04) !important;
  font-size: 13px !important;
  vertical-align: middle !important;
}
html.dark #prod-taztiki-tbody tr td {
  border-bottom-color: rgba(255, 255, 255, 0.05) !important;
}

#prod-taztiki-tbody tr:hover td {
  background: #FCFAF7 !important;
}
html.dark #prod-taztiki-tbody tr:hover td {
  background: #202024 !important;
}

#prod-taztiki-tbody td:first-child {
  color: #18181B !important;
  font-weight: 700 !important;
}
html.dark #prod-taztiki-tbody td:first-child {
  color: #F4F4F5 !important;
}

#prod-taztiki-tbody td:nth-child(2) {
  color: #7C3AED !important;
  font-weight: 800 !important;
  font-size: 14px !important;
  font-variant-numeric: tabular-nums !important;
}
html.dark #prod-taztiki-tbody td:nth-child(2) {
  color: #C084FC !important;
}

#prod-taztiki-tbody td:nth-child(3) {
  color: #475569 !important;
  font-weight: 600 !important;
}
html.dark #prod-taztiki-tbody td:nth-child(3) {
  color: #E2E8F0 !important;
}

#prod-taztiki-empty {
  background: #FAF7F2 !important;
  border: 1px dashed rgba(28, 25, 23, 0.12) !important;
  border-radius: 16px !important;
  padding: 32px 20px !important;
  text-align: center !important;
  margin-top: 16px !important;
}
html.dark #prod-taztiki-empty {
  background: #202024 !important;
  border-color: rgba(255, 255, 255, 0.12) !important;
}

#prod-pane-taztiki button[onclick="openModal('modal-taztiki')"] {
  height: 40px !important;
  border-radius: 12px !important;
  padding: 0 18px !important;
  font-size: 13px !important;
  font-weight: 800 !important;
  background: #18181B !important;
  color: #FFFFFF !important;
  border: 1px solid rgba(255, 255, 255, 0.12) !important;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.12) !important;
  transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1) !important;
}
#prod-pane-taztiki button[onclick="openModal('modal-taztiki')"]:hover {
  background: #27272A !important;
  transform: translateY(-2px) !important;
}
html.dark #prod-pane-taztiki button[onclick="openModal('modal-taztiki')"] {
  background: #EAB308 !important;
  color: #18181B !important;
  border: none !important;
  box-shadow: 0 4px 16px rgba(234, 179, 8, 0.25) !important;
}
html.dark #prod-pane-taztiki button[onclick="openModal('modal-taztiki')"]:hover {
  background: #F59E0B !important;
}

/* ══════════════════════════════════════════════════════════════════════
   PHASE 4C — RADICAL VISUAL OVERHAUL: INVENTORY, PURCHASE & INVOICES
   Raw Material Control, Procurement Control & Accounts Payable Centers
══════════════════════════════════════════════════════════════════════ */

/* ──────────────────────────────────────────────────────────────────────
   1. INVENTORY MODULE (#page-inventory) — RAW MATERIAL CONTROL CENTER
────────────────────────────────────────────────────────────────────── */

/* Top Executive KPI Grid for Inventory */
#page-inventory #inv-stats.orders-kpi-grid {
  display: grid !important;
  grid-template-columns: repeat(4, 1fr) !important;
  gap: 16px !important;
  margin-bottom: 20px !important;
}

@media (max-width: 1100px) {
  #page-inventory #inv-stats.orders-kpi-grid {
    grid-template-columns: repeat(2, 1fr) !important;
  }
}
@media (max-width: 640px) {
  #page-inventory #inv-stats.orders-kpi-grid {
    grid-template-columns: 1fr !important;
  }
}

#inv-stats .stat-card {
  background: #FFFFFF !important;
  border: 1px solid rgba(28, 25, 23, 0.05) !important;
  border-radius: 20px !important;
  padding: 18px 20px !important;
  box-shadow: 0 8px 24px -4px rgba(0, 0, 0, 0.03) !important;
  transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1) !important;
}

#inv-stats .stat-card:hover {
  transform: translateY(-2px) !important;
  box-shadow: 0 12px 30px -4px rgba(0, 0, 0, 0.06) !important;
}

html.dark #inv-stats .stat-card {
  background: #18181B !important;
  border-color: rgba(255, 255, 255, 0.08) !important;
  box-shadow: 0 8px 28px -4px rgba(0, 0, 0, 0.40) !important;
}

#inv-stats .stat-card > div:first-child {
  font-size: 26px !important;
  font-weight: 900 !important;
  line-height: 1.15 !important;
  margin-bottom: 4px !important;
  font-variant-numeric: tabular-nums !important;
}

/* Card 1: Total Raw Materials */
#inv-stats .stat-card:first-child > div:first-child {
  color: #18181B !important;
}
html.dark #inv-stats .stat-card:first-child > div:first-child {
  color: #F4F4F5 !important;
}

/* Card 2: Shortages */
#inv-stats .stat-card:nth-child(2) > div:first-child {
  color: #DC2626 !important;
}
html.dark #inv-stats .stat-card:nth-child(2) > div:first-child {
  color: #F87171 !important;
}
#inv-stats .stat-card:nth-child(2) {
  border-color: rgba(239, 68, 68, 0.18) !important;
}

/* Card 3: Low Safety Stock */
#inv-stats .stat-card:nth-child(3) > div:first-child {
  color: #D97706 !important;
}
html.dark #inv-stats .stat-card:nth-child(3) > div:first-child {
  color: #FBBF24 !important;
}
#inv-stats .stat-card:nth-child(3) {
  border-color: rgba(234, 179, 8, 0.20) !important;
}

/* Card 4: Adequate Stock */
#inv-stats .stat-card:nth-child(4) > div:first-child {
  color: #059669 !important;
}
html.dark #inv-stats .stat-card:nth-child(4) > div:first-child {
  color: #34D399 !important;
}
#inv-stats .stat-card:nth-child(4) {
  border-color: rgba(16, 185, 129, 0.18) !important;
}

/* Inventory Main Card */
#page-inventory .card {
  background: #FFFFFF !important;
  border: 1px solid rgba(28, 25, 23, 0.05) !important;
  border-radius: 22px !important;
  padding: 24px !important;
  box-shadow: 0 8px 30px -4px rgba(0, 0, 0, 0.04) !important;
}

html.dark #page-inventory .card {
  background: #18181B !important;
  border-color: rgba(255, 255, 255, 0.08) !important;
  box-shadow: 0 10px 32px -4px rgba(0, 0, 0, 0.40) !important;
}

/* Inventory Search Input */
#inv-search-input {
  height: 42px !important;
  border-radius: 12px !important;
  background: #F5F2EB !important;
  border: 1px solid rgba(28, 25, 23, 0.06) !important;
  color: #18181B !important;
  font-size: 13px !important;
  padding-inline-start: 14px !important;
  padding-inline-end: 38px !important;
  width: 100% !important;
  transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1) !important;
}

#inv-search-input:focus {
  background: #FFFFFF !important;
  border-color: #EAB308 !important;
  box-shadow: 0 0 0 3px rgba(234, 179, 8, 0.15) !important;
  outline: none !important;
}

html.dark #inv-search-input {
  background: #222226 !important;
  border-color: rgba(255, 255, 255, 0.08) !important;
  color: #F4F4F5 !important;
}

html.dark #inv-search-input:focus {
  background: #27272A !important;
  border-color: #EAB308 !important;
}

/* Inventory Category Filter Pills */
#inv-cat-filters {
  display: flex !important;
  gap: 8px !important;
  flex-wrap: wrap !important;
  margin-bottom: 20px !important;
}

.inv-cat-btn {
  height: 36px !important;
  padding: 0 16px !important;
  border-radius: 9999px !important;
  font-size: 12px !important;
  font-weight: 700 !important;
  border: 1px solid transparent !important;
  cursor: pointer !important;
  transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1) !important;
  white-space: nowrap !important;
}

.inv-cat-btn.btn-secondary {
  background: #F5F2EB !important;
  color: #71717A !important;
}
.inv-cat-btn.btn-secondary:hover {
  background: #ECE6DA !important;
  color: #18181B !important;
  transform: translateY(-1px) !important;
}

.inv-cat-btn.btn-primary {
  background: #18181B !important;
  color: #FFFFFF !important;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.12) !important;
}

html.dark .inv-cat-btn.btn-secondary {
  background: #27272A !important;
  color: #A1A1AA !important;
}
html.dark .inv-cat-btn.btn-secondary:hover {
  background: #323238 !important;
  color: #FFFFFF !important;
}
html.dark .inv-cat-btn.btn-primary {
  background: #EAB308 !important;
  color: #18181B !important;
  box-shadow: 0 4px 16px rgba(234, 179, 8, 0.25) !important;
}

/* Inventory Action Buttons */
#page-inventory button[onclick="openModal('modal-ing')"] {
  height: 42px !important;
  border-radius: 12px !important;
  padding: 0 18px !important;
  font-size: 13px !important;
  font-weight: 700 !important;
  background: #F5F2EB !important;
  color: #18181B !important;
  border: 1px solid rgba(28, 25, 23, 0.08) !important;
  transition: all 0.2s ease !important;
}
#page-inventory button[onclick="openModal('modal-ing')"]:hover {
  background: #ECE6DA !important;
  transform: translateY(-1px) !important;
}
html.dark #page-inventory button[onclick="openModal('modal-ing')"] {
  background: #27272A !important;
  color: #F4F4F5 !important;
  border-color: rgba(255, 255, 255, 0.08) !important;
}
html.dark #page-inventory button[onclick="openModal('modal-ing')"]:hover {
  background: #323238 !important;
}

#page-inventory button[onclick="genPOs()"] {
  height: 42px !important;
  border-radius: 12px !important;
  padding: 0 20px !important;
  font-size: 13.5px !important;
  font-weight: 800 !important;
  background: #18181B !important;
  color: #FFFFFF !important;
  border: 1px solid rgba(255, 255, 255, 0.12) !important;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.14) !important;
  transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1) !important;
}
#page-inventory button[onclick="genPOs()"]:hover {
  background: #27272A !important;
  transform: translateY(-2px) !important;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.20) !important;
}
html.dark #page-inventory button[onclick="genPOs()"] {
  background: #EAB308 !important;
  color: #18181B !important;
  border: none !important;
  box-shadow: 0 4px 16px rgba(234, 179, 8, 0.25) !important;
}
html.dark #page-inventory button[onclick="genPOs()"]:hover {
  background: #F59E0B !important;
  box-shadow: 0 8px 24px rgba(234, 179, 8, 0.35) !important;
}

/* Raw Material Table (#inv-tbl) */
#page-inventory .tbl-wrap {
  max-height: 560px !important;
}

#page-inventory .tbl thead th {
  background: #F7F4EE !important;
  padding: 14px 16px !important;
  font-size: 12px !important;
  font-weight: 800 !important;
  color: #71717A !important;
  border-bottom: 2px solid rgba(28, 25, 23, 0.06) !important;
  position: sticky !important;
  top: 0 !important;
  z-index: 10 !important;
  white-space: nowrap !important;
}
html.dark #page-inventory .tbl thead th {
  background: #18181B !important;
  color: #A1A1AA !important;
  border-bottom-color: rgba(255, 255, 255, 0.08) !important;
}

#inv-tbl tr td {
  padding: 13px 16px !important;
  border-bottom: 1px solid rgba(28, 25, 23, 0.04) !important;
  font-size: 13px !important;
  vertical-align: middle !important;
}
html.dark #inv-tbl tr td {
  border-bottom-color: rgba(255, 255, 255, 0.05) !important;
}

#inv-tbl tr:hover td {
  background: #FCFAF7 !important;
}
html.dark #inv-tbl tr:hover td {
  background: #202024 !important;
}

/* Text overrides in Inventory table */
#inv-tbl td:nth-child(2) span:first-child {
  color: #18181B !important;
  font-weight: 700 !important;
  font-size: 14px !important;
}
html.dark #inv-tbl td:nth-child(2) span:first-child {
  color: #F4F4F5 !important;
}

#inv-tbl td:nth-child(5) div {
  color: #71717A !important;
  font-weight: 600 !important;
  font-size: 13px !important;
}
html.dark #inv-tbl td:nth-child(5) div {
  color: #CBD5E1 !important;
}

#inv-tbl td:nth-child(6) div {
  color: #0284C7 !important;
  font-weight: 700 !important;
  font-size: 13px !important;
}
html.dark #inv-tbl td:nth-child(6) div {
  color: #60A5FA !important;
}

/* Status Badges in Inventory */
#inv-tbl .badge-red {
  background: rgba(239, 68, 68, 0.12) !important;
  color: #DC2626 !important;
  border: 1px solid rgba(239, 68, 68, 0.25) !important;
  border-radius: 9999px !important;
  padding: 4px 12px !important;
  font-size: 11.5px !important;
  font-weight: 800 !important;
}
html.dark #inv-tbl .badge-red {
  color: #F87171 !important;
}

#inv-tbl .badge-amber {
  background: rgba(234, 179, 8, 0.12) !important;
  color: #D97706 !important;
  border: 1px solid rgba(234, 179, 8, 0.25) !important;
  border-radius: 9999px !important;
  padding: 4px 12px !important;
  font-size: 11.5px !important;
  font-weight: 800 !important;
}
html.dark #inv-tbl .badge-amber {
  color: #FBBF24 !important;
}

#inv-tbl .badge-green {
  background: rgba(16, 185, 129, 0.12) !important;
  color: #059669 !important;
  border: 1px solid rgba(16, 185, 129, 0.25) !important;
  border-radius: 9999px !important;
  padding: 4px 12px !important;
  font-size: 11.5px !important;
  font-weight: 800 !important;
}
html.dark #inv-tbl .badge-green {
  color: #34D399 !important;
}

/* Progress track in Stock Level */
#inv-tbl .progress {
  height: 6px !important;
  border-radius: 9999px !important;
  background: rgba(28, 25, 23, 0.08) !important;
}
html.dark #inv-tbl .progress {
  background: rgba(255, 255, 255, 0.10) !important;
}

/* Edit icon button in Inventory */
#inv-tbl button[onclick*="openEditStock"] {
  width: 34px !important;
  height: 34px !important;
  padding: 0 !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  border-radius: 10px !important;
  background: #F5F2EB !important;
  color: #18181B !important;
  border: 1px solid rgba(28, 25, 23, 0.08) !important;
  transition: all 0.2s ease !important;
}
#inv-tbl button[onclick*="openEditStock"]:hover {
  background: #ECE6DA !important;
  transform: scale(1.05) !important;
}
html.dark #inv-tbl button[onclick*="openEditStock"] {
  background: #27272A !important;
  color: #F4F4F5 !important;
  border-color: rgba(255, 255, 255, 0.08) !important;
}
html.dark #inv-tbl button[onclick*="openEditStock"]:hover {
  background: #323238 !important;
}


/* ──────────────────────────────────────────────────────────────────────
   2. PURCHASE MODULE (#page-purchase) — PROCUREMENT CONTROL CENTER
────────────────────────────────────────────────────────────────────── */

/* Top KPI Grid for Purchase */
#page-purchase #po-stats.orders-kpi-grid {
  display: grid !important;
  grid-template-columns: repeat(3, 1fr) !important;
  gap: 16px !important;
  margin-bottom: 20px !important;
}

@media (max-width: 800px) {
  #page-purchase #po-stats.orders-kpi-grid {
    grid-template-columns: 1fr !important;
  }
}

#po-stats .stat-card {
  background: #FFFFFF !important;
  border: 1px solid rgba(28, 25, 23, 0.05) !important;
  border-radius: 20px !important;
  padding: 18px 20px !important;
  box-shadow: 0 8px 24px -4px rgba(0, 0, 0, 0.03) !important;
  transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1) !important;
}

#po-stats .stat-card:hover {
  transform: translateY(-2px) !important;
  box-shadow: 0 12px 30px -4px rgba(0, 0, 0, 0.06) !important;
}

html.dark #po-stats .stat-card {
  background: #18181B !important;
  border-color: rgba(255, 255, 255, 0.08) !important;
  box-shadow: 0 8px 28px -4px rgba(0, 0, 0, 0.40) !important;
}

#po-stats .stat-card > div:first-child {
  font-size: 26px !important;
  font-weight: 900 !important;
  line-height: 1.15 !important;
  margin-bottom: 4px !important;
  font-variant-numeric: tabular-nums !important;
}

/* Purchase Main Card */
#page-purchase .card {
  background: #FFFFFF !important;
  border: 1px solid rgba(28, 25, 23, 0.05) !important;
  border-radius: 22px !important;
  padding: 24px !important;
  box-shadow: 0 8px 30px -4px rgba(0, 0, 0, 0.04) !important;
}

html.dark #page-purchase .card {
  background: #18181B !important;
  border-color: rgba(255, 255, 255, 0.08) !important;
  box-shadow: 0 10px 32px -4px rgba(0, 0, 0, 0.40) !important;
}

/* Purchase Header Buttons */
#page-purchase button[onclick="genPOs()"] {
  height: 42px !important;
  border-radius: 12px !important;
  padding: 0 18px !important;
  font-size: 13px !important;
  font-weight: 700 !important;
  background: #F5F2EB !important;
  color: #18181B !important;
  border: 1px solid rgba(28, 25, 23, 0.08) !important;
  transition: all 0.2s ease !important;
}
#page-purchase button[onclick="genPOs()"]:hover {
  background: #ECE6DA !important;
  transform: translateY(-1px) !important;
}
html.dark #page-purchase button[onclick="genPOs()"] {
  background: #27272A !important;
  color: #F4F4F5 !important;
  border-color: rgba(255, 255, 255, 0.08) !important;
}
html.dark #page-purchase button[onclick="genPOs()"]:hover {
  background: #323238 !important;
}

#page-purchase button[onclick="sendAllDraft()"] {
  height: 42px !important;
  border-radius: 12px !important;
  padding: 0 20px !important;
  font-size: 13.5px !important;
  font-weight: 800 !important;
  background: #18181B !important;
  color: #FFFFFF !important;
  border: 1px solid rgba(255, 255, 255, 0.12) !important;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.14) !important;
  transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1) !important;
}
#page-purchase button[onclick="sendAllDraft()"]:hover {
  background: #27272A !important;
  transform: translateY(-2px) !important;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.20) !important;
}
html.dark #page-purchase button[onclick="sendAllDraft()"] {
  background: #EAB308 !important;
  color: #18181B !important;
  border: none !important;
  box-shadow: 0 4px 16px rgba(234, 179, 8, 0.25) !important;
}
html.dark #page-purchase button[onclick="sendAllDraft()"]:hover {
  background: #F59E0B !important;
  box-shadow: 0 8px 24px rgba(234, 179, 8, 0.35) !important;
}

/* Purchase Table (#po-tbl) */
#page-purchase .tbl-wrap {
  max-height: 520px !important;
}

#page-purchase .tbl thead th {
  background: #F7F4EE !important;
  padding: 14px 16px !important;
  font-size: 12px !important;
  font-weight: 800 !important;
  color: #71717A !important;
  border-bottom: 2px solid rgba(28, 25, 23, 0.06) !important;
  position: sticky !important;
  top: 0 !important;
  z-index: 10 !important;
  white-space: nowrap !important;
}
html.dark #page-purchase .tbl thead th {
  background: #18181B !important;
  color: #A1A1AA !important;
  border-bottom-color: rgba(255, 255, 255, 0.08) !important;
}

#po-tbl tr td {
  padding: 13px 16px !important;
  border-bottom: 1px solid rgba(28, 25, 23, 0.04) !important;
  font-size: 13px !important;
  vertical-align: middle !important;
}
html.dark #po-tbl tr td {
  border-bottom-color: rgba(255, 255, 255, 0.05) !important;
}

#po-tbl tr:hover td {
  background: #FCFAF7 !important;
}
html.dark #po-tbl tr:hover td {
  background: #202024 !important;
}

/* Text overrides in Purchase table */
#po-tbl td:nth-child(2) {
  color: #18181B !important;
  font-weight: 700 !important;
  font-size: 14px !important;
}
html.dark #po-tbl td:nth-child(2) {
  color: #F4F4F5 !important;
}

#po-tbl td:nth-child(3) {
  color: #0284C7 !important;
  font-weight: 800 !important;
  font-variant-numeric: tabular-nums !important;
}
html.dark #po-tbl td:nth-child(3) {
  color: #60A5FA !important;
}

#po-tbl .select {
  height: 36px !important;
  border-radius: 10px !important;
  background: #F5F2EB !important;
  border: 1px solid rgba(28, 25, 23, 0.08) !important;
  color: #18181B !important;
  font-size: 12.5px !important;
  font-weight: 700 !important;
  padding: 0 10px !important;
}
html.dark #po-tbl .select {
  background: #27272A !important;
  border-color: rgba(255, 255, 255, 0.08) !important;
  color: #F4F4F5 !important;
}

#po-tbl button[onclick*="openReceiveModal"] {
  height: 34px !important;
  border-radius: 10px !important;
  padding: 0 14px !important;
  font-size: 12px !important;
  font-weight: 700 !important;
  background: rgba(16, 185, 129, 0.12) !important;
  color: #059669 !important;
  border: 1px solid rgba(16, 185, 129, 0.25) !important;
  transition: all 0.2s ease !important;
}
#po-tbl button[onclick*="openReceiveModal"]:hover {
  background: #10B981 !important;
  color: #FFFFFF !important;
  transform: translateY(-1px) !important;
}
html.dark #po-tbl button[onclick*="openReceiveModal"] {
  color: #34D399 !important;
}

#po-tbl button[onclick*="printPO"] {
  width: 34px !important;
  height: 34px !important;
  padding: 0 !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  border-radius: 10px !important;
  background: #F5F2EB !important;
  color: #18181B !important;
  border: 1px solid rgba(28, 25, 23, 0.08) !important;
  transition: all 0.2s ease !important;
}
#po-tbl button[onclick*="printPO"]:hover {
  background: #ECE6DA !important;
  transform: scale(1.05) !important;
}
html.dark #po-tbl button[onclick*="printPO"] {
  background: #27272A !important;
  color: #F4F4F5 !important;
  border-color: rgba(255, 255, 255, 0.08) !important;
}
html.dark #po-tbl button[onclick*="printPO"]:hover {
  background: #323238 !important;
}

/* Empty State in Purchase */
#po-empty {
  background: #FAF7F2 !important;
  border: 1px dashed rgba(16, 185, 129, 0.35) !important;
  border-radius: 18px !important;
  padding: 38px 24px !important;
  text-align: center !important;
  margin-top: 16px !important;
}
html.dark #po-empty {
  background: #202024 !important;
  border-color: rgba(16, 185, 129, 0.40) !important;
}

#po-empty p {
  color: #18181B !important;
  font-weight: 700 !important;
  font-size: 15px !important;
}
html.dark #po-empty p {
  color: #F4F4F5 !important;
}


/* ──────────────────────────────────────────────────────────────────────
   3. INVOICES MODULE (#page-invoices) — ACCOUNTS PAYABLE CENTER
────────────────────────────────────────────────────────────────────── */

/* Top KPI Grid for Invoices */
#page-invoices #inv-bill-stats.g3 {
  display: grid !important;
  grid-template-columns: repeat(3, 1fr) !important;
  gap: 16px !important;
  margin-bottom: 20px !important;
}

@media (max-width: 800px) {
  #page-invoices #inv-bill-stats.g3 {
    grid-template-columns: 1fr !important;
  }
}

#inv-bill-stats .stat-card {
  background: #FFFFFF !important;
  border: 1px solid rgba(28, 25, 23, 0.05) !important;
  border-radius: 20px !important;
  padding: 18px 20px !important;
  box-shadow: 0 8px 24px -4px rgba(0, 0, 0, 0.03) !important;
  transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1) !important;
}

#inv-bill-stats .stat-card:hover {
  transform: translateY(-2px) !important;
  box-shadow: 0 12px 30px -4px rgba(0, 0, 0, 0.06) !important;
}

html.dark #inv-bill-stats .stat-card {
  background: #18181B !important;
  border-color: rgba(255, 255, 255, 0.08) !important;
  box-shadow: 0 8px 28px -4px rgba(0, 0, 0, 0.40) !important;
}

#inv-bill-stats .stat-card > div:first-child {
  font-size: 26px !important;
  font-weight: 900 !important;
  line-height: 1.15 !important;
  margin-bottom: 4px !important;
  font-variant-numeric: tabular-nums !important;
}

/* Card 1: Total Invoices */
#inv-bill-stats .stat-card:first-child > div:first-child {
  color: #18181B !important;
}
html.dark #inv-bill-stats .stat-card:first-child > div:first-child {
  color: #F4F4F5 !important;
}

/* Card 2: Total Value */
#inv-bill-stats .stat-card:nth-child(2) > div:first-child {
  color: #D97706 !important;
}
html.dark #inv-bill-stats .stat-card:nth-child(2) > div:first-child {
  color: #FB923C !important;
}

/* Card 3: Unpaid */
#inv-bill-stats .stat-card:nth-child(3) > div:first-child {
  color: #DC2626 !important;
}
html.dark #inv-bill-stats .stat-card:nth-child(3) > div:first-child {
  color: #F87171 !important;
}

/* Invoices Main Card */
#page-invoices .card {
  background: #FFFFFF !important;
  border: 1px solid rgba(28, 25, 23, 0.05) !important;
  border-radius: 22px !important;
  padding: 24px !important;
  box-shadow: 0 8px 30px -4px rgba(0, 0, 0, 0.04) !important;
}

html.dark #page-invoices .card {
  background: #18181B !important;
  border-color: rgba(255, 255, 255, 0.08) !important;
  box-shadow: 0 10px 32px -4px rgba(0, 0, 0, 0.40) !important;
}

/* Invoices Filters */
#inv-bill-sup,
#inv-bill-month {
  height: 42px !important;
  border-radius: 12px !important;
  background: #F5F2EB !important;
  border: 1px solid rgba(28, 25, 23, 0.06) !important;
  color: #18181B !important;
  font-size: 13px !important;
  padding: 0 14px !important;
  transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1) !important;
}

#inv-bill-sup:focus,
#inv-bill-month:focus {
  background: #FFFFFF !important;
  border-color: #EAB308 !important;
  box-shadow: 0 0 0 3px rgba(234, 179, 8, 0.15) !important;
  outline: none !important;
}

html.dark #inv-bill-sup,
html.dark #inv-bill-month {
  background: #222226 !important;
  border-color: rgba(255, 255, 255, 0.08) !important;
  color: #F4F4F5 !important;
}

html.dark #inv-bill-sup:focus,
html.dark #inv-bill-month:focus {
  background: #27272A !important;
  border-color: #EAB308 !important;
}

#page-invoices button[onclick*="inv-bill-sup"] {
  height: 42px !important;
  border-radius: 12px !important;
  background: #F5F2EB !important;
  border: 1px solid rgba(28, 25, 23, 0.08) !important;
  color: #71717A !important;
  font-weight: 700 !important;
  padding: 0 18px !important;
  transition: all 0.2s ease !important;
}
#page-invoices button[onclick*="inv-bill-sup"]:hover {
  background: #ECE6DA !important;
  color: #18181B !important;
}
html.dark #page-invoices button[onclick*="inv-bill-sup"] {
  background: #27272A !important;
  color: #A1A1AA !important;
  border-color: rgba(255, 255, 255, 0.08) !important;
}
html.dark #page-invoices button[onclick*="inv-bill-sup"]:hover {
  background: #323238 !important;
  color: #FFFFFF !important;
}

/* Invoices Table (#invoices-tbl) */
#page-invoices .tbl-wrap {
  max-height: 520px !important;
}

#page-invoices .tbl thead th {
  background: #F7F4EE !important;
  padding: 14px 16px !important;
  font-size: 12px !important;
  font-weight: 800 !important;
  color: #71717A !important;
  border-bottom: 2px solid rgba(28, 25, 23, 0.06) !important;
  position: sticky !important;
  top: 0 !important;
  z-index: 10 !important;
  white-space: nowrap !important;
}
html.dark #page-invoices .tbl thead th {
  background: #18181B !important;
  color: #A1A1AA !important;
  border-bottom-color: rgba(255, 255, 255, 0.08) !important;
}

#invoices-tbl tr td {
  padding: 13px 16px !important;
  border-bottom: 1px solid rgba(28, 25, 23, 0.04) !important;
  font-size: 13px !important;
  vertical-align: middle !important;
}
html.dark #invoices-tbl tr td {
  border-bottom-color: rgba(255, 255, 255, 0.05) !important;
}

#invoices-tbl tr:hover td {
  background: #FCFAF7 !important;
}
html.dark #invoices-tbl tr:hover td {
  background: #202024 !important;
}

/* Text overrides in Invoices table */
#invoices-tbl td:nth-child(3) {
  color: #18181B !important;
  font-weight: 700 !important;
  font-size: 14px !important;
}
html.dark #invoices-tbl td:nth-child(3) {
  color: #F4F4F5 !important;
}

#invoices-tbl td:nth-child(4) {
  color: #0284C7 !important;
  font-weight: 700 !important;
  font-variant-numeric: tabular-nums !important;
}
html.dark #invoices-tbl td:nth-child(4) {
  color: #60A5FA !important;
}

/* Empty State in Invoices */
#invoices-empty {
  background: #FAF7F2 !important;
  border: 1px dashed rgba(28, 25, 23, 0.12) !important;
  border-radius: 18px !important;
  padding: 38px 24px !important;
  text-align: center !important;
  margin-top: 16px !important;
}
html.dark #invoices-empty {
  background: #202024 !important;
  border-color: rgba(255, 255, 255, 0.12) !important;
}


/* ──────────────────────────────────────────────────────────────────────
   4. MODALS ENHANCEMENT: PURCHASE, INVENTORY & RECEIVING
────────────────────────────────────────────────────────────────────── */

#modal-receive .modal,
#modal-ing .modal,
#modal-print-po .modal {
  background: #FFFFFF !important;
  border: 1px solid rgba(28, 25, 23, 0.06) !important;
  border-radius: 24px !important;
  box-shadow: 0 20px 48px -8px rgba(0, 0, 0, 0.22) !important;
  padding: 24px !important;
}

html.dark #modal-receive .modal,
html.dark #modal-ing .modal,
html.dark #modal-print-po .modal {
  background: #18181B !important;
  border-color: rgba(255, 255, 255, 0.08) !important;
  box-shadow: 0 24px 54px -8px rgba(0, 0, 0, 0.60) !important;
}

#modal-receive .modal-title,
#modal-ing .modal-title,
#modal-print-po h3 {
  font-size: 18px !important;
  font-weight: 800 !important;
  color: #18181B !important;
}
html.dark #modal-receive .modal-title,
html.dark #modal-ing .modal-title,
html.dark #modal-print-po h3 {
  color: #F4F4F5 !important;
}

#modal-receive .sim-box {
  background: #FAF7F2 !important;
  border: 1px solid rgba(234, 179, 8, 0.30) !important;
  border-radius: 14px !important;
  padding: 14px 16px !important;
}
html.dark #modal-receive .sim-box {
  background: #222226 !important;
  border-color: rgba(234, 179, 8, 0.35) !important;
}

#modal-receive .input,
#modal-receive .select,
#modal-ing .input,
#modal-ing .select {
  height: 42px !important;
  border-radius: 12px !important;
  background: #F5F2EB !important;
  border: 1px solid rgba(28, 25, 23, 0.06) !important;
  color: #18181B !important;
  font-size: 13px !important;
  padding: 0 14px !important;
}
#modal-receive .input:focus,
#modal-receive .select:focus,
#modal-ing .input:focus,
#modal-ing .select:focus {
  background: #FFFFFF !important;
  border-color: #EAB308 !important;
  box-shadow: 0 0 0 3px rgba(234, 179, 8, 0.15) !important;
  outline: none !important;
}

html.dark #modal-receive .input,
html.dark #modal-receive .select,
html.dark #modal-ing .input,
html.dark #modal-ing .select {
  background: #222226 !important;
  border-color: rgba(255, 255, 255, 0.08) !important;
  color: #F4F4F5 !important;
}
html.dark #modal-receive .input:focus,
html.dark #modal-receive .select:focus,
html.dark #modal-ing .input:focus,
html.dark #modal-ing .select:focus {
  background: #27272A !important;
  border-color: #EAB308 !important;
}

/* ══════════════════════════════════════════════════════════════════════
   PHASE 4D — RADICAL VISUAL OVERHAUL: WASTE, SHIPMENTS & REPORTS
   Waste Control Center, Dispatch & Shipment Control, Management Intelligence
══════════════════════════════════════════════════════════════════════ */

/* ──────────────────────────────────────────────────────────────────────
   1. WASTE MODULE (#page-waste) — WASTE CONTROL CENTER
────────────────────────────────────────────────────────────────────── */

/* Top Bento KPI Grid for Waste */
#page-waste #waste-stats.orders-kpi-grid {
  display: grid !important;
  grid-template-columns: repeat(3, 1fr) !important;
  gap: 16px !important;
  margin-bottom: 20px !important;
}

@media (max-width: 860px) {
  #page-waste #waste-stats.orders-kpi-grid {
    grid-template-columns: 1fr !important;
  }
}

#page-waste #waste-stats .stat-card {
  background: #FFFFFF !important;
  border: 1px solid rgba(28, 25, 23, 0.05) !important;
  border-radius: 22px !important;
  box-shadow: 0 8px 24px -4px rgba(28, 25, 23, 0.03) !important;
  padding: 22px 20px !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  text-align: center !important;
  transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease !important;
  position: relative !important;
  overflow: hidden !important;
}

#page-waste #waste-stats .stat-card:hover {
  transform: translateY(-2px) !important;
  box-shadow: 0 14px 32px -4px rgba(28, 25, 23, 0.06) !important;
  border-color: rgba(234, 179, 8, 0.25) !important;
}

#page-waste #waste-stats .stat-card > div:first-child {
  font-size: 26px !important;
  font-weight: 800 !important;
  font-variant-numeric: tabular-nums !important;
  line-height: 1.2 !important;
}

/* Override KPI #fff text in light mode */
#page-waste #waste-stats .stat-card:first-child > div:first-child {
  color: #18181B !important;
}
html.dark #page-waste #waste-stats .stat-card:first-child > div:first-child {
  color: #F4F4F5 !important;
}

#page-waste #waste-stats .stat-card:nth-child(2) > div:first-child {
  color: #EF4444 !important;
}

#page-waste #waste-stats .stat-card:nth-child(3) > div:first-child {
  color: #D97706 !important;
}
html.dark #page-waste #waste-stats .stat-card:nth-child(3) > div:first-child {
  color: #F59E0B !important;
}

#page-waste #waste-stats .stat-card .text-muted {
  font-size: 13px !important;
  font-weight: 600 !important;
  color: #71717A !important;
  margin-top: 8px !important;
}

/* Two-column Modular Waste Layout */
#page-waste .waste-layout {
  display: grid !important;
  grid-template-columns: 360px 1fr !important;
  gap: 20px !important;
  align-items: start !important;
}

@media (max-width: 1040px) {
  #page-waste .waste-layout {
    grid-template-columns: 1fr !important;
  }
}

/* Left Card: Log Waste Form */
#page-waste .waste-entry-card {
  background: #FFFFFF !important;
  border: 1px solid rgba(28, 25, 23, 0.05) !important;
  border-radius: 18px !important;
  box-shadow: 0 10px 30px -4px rgba(28, 25, 23, 0.03) !important;
  padding: 18px 20px !important;
  position: sticky !important;
  top: 20px !important;
  max-height: calc(100vh - 60px) !important;
  overflow-y: auto !important;
}

#page-waste .waste-entry-card .waste-header-title {
  font-size: 16px !important;
  font-weight: 800 !important;
  color: #18181B !important;
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
  margin-bottom: 20px !important;
  padding-bottom: 12px !important;
  border-bottom: 1px solid rgba(28, 25, 23, 0.06) !important;
}
html.dark #page-waste .waste-entry-card .waste-header-title {
  color: #F4F4F5 !important;
  border-color: rgba(255, 255, 255, 0.08) !important;
}

#page-waste .waste-entry-card .field-label {
  display: block !important;
  font-size: 12px !important;
  font-weight: 700 !important;
  color: #71717A !important;
  margin-bottom: 6px !important;
  letter-spacing: 0.01em !important;
}

#page-waste .waste-entry-card .input,
#page-waste .waste-entry-card .select,
#page-waste .waste-entry-card .textarea {
  border-radius: 12px !important;
  background: #F5F2EB !important;
  border: 1px solid rgba(28, 25, 23, 0.06) !important;
  color: #18181B !important;
  font-size: 13.5px !important;
  font-weight: 500 !important;
  transition: all 0.2s ease !important;
  padding-inline: 14px !important;
}

#page-waste .waste-entry-card .input,
#page-waste .waste-entry-card .select {
  height: 42px !important;
}

#page-waste .waste-entry-card .textarea {
  padding: 10px 14px !important;
  min-height: 72px !important;
  resize: vertical !important;
}

#page-waste .waste-entry-card .input:focus,
#page-waste .waste-entry-card .select:focus,
#page-waste .waste-entry-card .textarea:focus {
  background: #FFFFFF !important;
  border-color: #EAB308 !important;
  box-shadow: 0 0 0 3px rgba(234, 179, 8, 0.15) !important;
  outline: none !important;
}

#page-waste #w-uom {
  height: 42px !important;
  border-radius: 12px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  padding-inline: 14px !important;
  font-weight: 800 !important;
  background: rgba(168, 85, 247, 0.12) !important;
  color: #9333EA !important;
  border: 1px solid rgba(168, 85, 247, 0.25) !important;
}

#page-waste .waste-entry-card button[onclick="logWaste()"] {
  height: 46px !important;
  border-radius: 14px !important;
  background: #18181B !important;
  color: #FFFFFF !important;
  font-weight: 800 !important;
  font-size: 14px !important;
  border: none !important;
  box-shadow: 0 4px 14px rgba(24, 24, 27, 0.18) !important;
  transition: all 0.2s ease !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 8px !important;
  cursor: pointer !important;
  width: 100% !important;
  margin-top: 8px !important;
}

#page-waste .waste-entry-card button[onclick="logWaste()"]:hover {
  background: #27272A !important;
  transform: translateY(-1px) !important;
  box-shadow: 0 6px 18px rgba(24, 24, 27, 0.24) !important;
}

/* Right Card: Waste Log & Analytics Table */
#page-waste .waste-layout > .card.p-5 {
  background: #FFFFFF !important;
  border: 1px solid rgba(28, 25, 23, 0.05) !important;
  border-radius: 18px !important;
  box-shadow: 0 8px 24px -4px rgba(28, 25, 23, 0.03) !important;
  padding: 18px 20px !important;
}

#page-waste .waste-layout > .card .card-title-main {
  font-size: 16px !important;
  font-weight: 800 !important;
  color: #18181B !important;
}
html.dark #page-waste .waste-layout > .card .card-title-main {
  color: #F4F4F5 !important;
}

#page-waste #w-filter-reason,
#page-waste #w-filter-month {
  height: 40px !important;
  border-radius: 12px !important;
  background: #F5F2EB !important;
  border: 1px solid rgba(28, 25, 23, 0.06) !important;
  color: #18181B !important;
  font-size: 13px !important;
  font-weight: 600 !important;
  padding-inline: 12px !important;
  transition: all 0.2s ease !important;
}

#page-waste #w-filter-reason:focus,
#page-waste #w-filter-month:focus {
  background: #FFFFFF !important;
  border-color: #EAB308 !important;
  box-shadow: 0 0 0 3px rgba(234, 179, 8, 0.15) !important;
  outline: none !important;
}

#page-waste button[onclick*="w-filter-reason"] {
  height: 40px !important;
  border-radius: 12px !important;
  background: #FAF7F2 !important;
  border: 1px solid rgba(28, 25, 23, 0.08) !important;
  color: #71717A !important;
  font-weight: 600 !important;
  font-size: 13px !important;
  padding-inline: 14px !important;
  cursor: pointer !important;
  transition: all 0.2s ease !important;
}

#page-waste button[onclick*="w-filter-reason"]:hover {
  background: #E4E4E7 !important;
  color: #18181B !important;
}

/* Waste Data Table */
#page-waste .tbl-wrap.tbl-scroll-h480 {
  border-radius: 16px !important;
  border: 1px solid rgba(28, 25, 23, 0.06) !important;
  background: #FFFFFF !important;
  overflow-x: auto !important;
  max-height: 520px !important;
  -webkit-overflow-scrolling: touch !important;
}

#page-waste .tbl {
  width: 100% !important;
  border-collapse: collapse !important;
}

#page-waste .tbl thead th {
  position: sticky !important;
  top: 0 !important;
  z-index: 10 !important;
  background: #FAF7F2 !important;
  padding: 14px 16px !important;
  font-size: 12px !important;
  font-weight: 700 !important;
  color: #71717A !important;
  text-transform: uppercase !important;
  border-bottom: 1px solid rgba(28, 25, 23, 0.06) !important;
}

#page-waste #waste-tbl tr {
  height: 52px !important;
  border-bottom: 1px solid rgba(28, 25, 23, 0.04) !important;
  transition: background 0.15s ease !important;
}

#page-waste #waste-tbl tr:hover {
  background: rgba(245, 242, 235, 0.6) !important;
}

#page-waste #waste-tbl td {
  padding: 12px 16px !important;
  font-size: 13.5px !important;
  vertical-align: middle !important;
}

/* Fix hardcoded inline text colors in waste table */
#page-waste #waste-tbl td[style*="color:#fff"],
#page-waste #waste-tbl td[style*="color: #fff"],
#page-waste #waste-tbl td[style*="color:rgb(255, 255, 255)"] {
  color: #18181B !important;
  font-weight: 700 !important;
}
html.dark #page-waste #waste-tbl td[style*="color:#fff"],
html.dark #page-waste #waste-tbl td[style*="color: #fff"],
html.dark #page-waste #waste-tbl td[style*="color:rgb(255, 255, 255)"] {
  color: #F4F4F5 !important;
}

#page-waste #waste-tbl .td-mono {
  font-family: var(--font-mono, monospace) !important;
  font-size: 12.5px !important;
  color: #71717A !important;
}

#page-waste #waste-tbl td:nth-child(3) {
  font-weight: 800 !important;
  font-variant-numeric: tabular-nums !important;
}

#page-waste #waste-tbl td:nth-child(6) span {
  font-weight: 800 !important;
  font-variant-numeric: tabular-nums !important;
  color: #EF4444 !important;
}

/* Reason Badges */
#page-waste #waste-tbl .badge {
  border-radius: 9999px !important;
  padding: 4px 12px !important;
  font-size: 11.5px !important;
  font-weight: 700 !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 4px !important;
}

#page-waste #waste-tbl .badge-red {
  background: rgba(239, 68, 68, 0.10) !important;
  color: #DC2626 !important;
  border: 1px solid rgba(239, 68, 68, 0.22) !important;
}

#page-waste #waste-tbl .badge-amber {
  background: rgba(234, 179, 8, 0.12) !important;
  color: #B45309 !important;
  border: 1px solid rgba(234, 179, 8, 0.25) !important;
}

#page-waste #waste-tbl .badge-orange {
  background: rgba(249, 115, 22, 0.10) !important;
  color: #EA580C !important;
  border: 1px solid rgba(249, 115, 22, 0.22) !important;
}

/* Waste Notes Sub-Row */
#page-waste #waste-tbl td[colspan="8"] {
  background: rgba(250, 247, 242, 0.6) !important;
  color: #52525B !important;
  font-size: 12.5px !important;
  padding: 8px 16px !important;
  border-bottom: 1px dashed rgba(28, 25, 23, 0.08) !important;
}
html.dark #page-waste #waste-tbl td[colspan="8"] {
  background: rgba(255, 255, 255, 0.03) !important;
  color: #A1A1AA !important;
  border-color: rgba(255, 255, 255, 0.08) !important;
}

/* Delete Waste Action Button */
#page-waste #waste-tbl button[onclick*="delWaste"] {
  width: 32px !important;
  height: 32px !important;
  border-radius: 10px !important;
  background: rgba(239, 68, 68, 0.08) !important;
  border: 1px solid rgba(239, 68, 68, 0.20) !important;
  color: #EF4444 !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  cursor: pointer !important;
  transition: all 0.2s ease !important;
}

#page-waste #waste-tbl button[onclick*="delWaste"]:hover {
  background: #EF4444 !important;
  color: #FFFFFF !important;
  transform: scale(1.05) !important;
}

/* Empty State */
#page-waste #waste-empty {
  background: #FAF7F2 !important;
  border: 1px dashed rgba(28, 25, 23, 0.12) !important;
  border-radius: 18px !important;
  padding: 42px 24px !important;
  text-align: center !important;
  margin-top: 16px !important;
}

#page-waste #waste-empty p {
  color: #18181B !important;
  font-weight: 700 !important;
  font-size: 14px !important;
  margin-top: 10px !important;
}
html.dark #page-waste #waste-empty p {
  color: #F4F4F5 !important;
}


/* ──────────────────────────────────────────────────────────────────────
   2. SHIPMENTS MODULE (#page-shipments) — DISPATCH & SHIPMENT CONTROL
────────────────────────────────────────────────────────────────────── */

/* Top Bento KPI Grid for Shipments */
#page-shipments #ship-stats.g4 {
  display: grid !important;
  grid-template-columns: repeat(4, 1fr) !important;
  gap: 16px !important;
  margin-bottom: 20px !important;
}

@media (max-width: 1040px) {
  #page-shipments #ship-stats.g4 {
    grid-template-columns: repeat(2, 1fr) !important;
  }
}
@media (max-width: 600px) {
  #page-shipments #ship-stats.g4 {
    grid-template-columns: 1fr !important;
  }
}

#page-shipments #ship-stats .stat-card {
  background: #FFFFFF !important;
  border: 1px solid rgba(28, 25, 23, 0.05) !important;
  border-radius: 22px !important;
  box-shadow: 0 8px 24px -4px rgba(28, 25, 23, 0.03) !important;
  padding: 22px 20px !important;
  display: flex !important;
  flex-direction: column !important;
  justify-content: space-between !important;
  transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease !important;
  position: relative !important;
  overflow: hidden !important;
}

#page-shipments #ship-stats .stat-card:hover {
  transform: translateY(-2px) !important;
  box-shadow: 0 14px 32px -4px rgba(28, 25, 23, 0.06) !important;
  border-color: rgba(234, 179, 8, 0.25) !important;
}

#page-shipments #ship-stats .kpi-number {
  font-size: 26px !important;
  font-weight: 800 !important;
  font-variant-numeric: tabular-nums !important;
  line-height: 1.2 !important;
  margin-bottom: 4px !important;
}

#page-shipments #ship-stats .kpi-number.kpi-cyan {
  color: #0284C7 !important;
}
html.dark #page-shipments #ship-stats .kpi-number.kpi-cyan {
  color: #38BDF8 !important;
}

#page-shipments #ship-stats .kpi-number.kpi-green {
  color: #059669 !important;
}
html.dark #page-shipments #ship-stats .kpi-number.kpi-green {
  color: #4ADE80 !important;
}

#page-shipments #ship-stats .kpi-number.kpi-amber {
  color: #D97706 !important;
}
html.dark #page-shipments #ship-stats .kpi-number.kpi-amber {
  color: #FBBF24 !important;
}

#page-shipments #ship-stats .kpi-number.kpi-purple {
  color: #9333EA !important;
}
html.dark #page-shipments #ship-stats .kpi-number.kpi-purple {
  color: #C084FC !important;
}

#page-shipments #ship-stats .text-muted {
  font-size: 13px !important;
  font-weight: 600 !important;
  color: #71717A !important;
}

/* Filter & Main Card */
#page-shipments > .card.mb-4,
#page-shipments > .card:not(.mb-4) {
  background: #FFFFFF !important;
  border: 1px solid rgba(28, 25, 23, 0.05) !important;
  border-radius: 24px !important;
  box-shadow: 0 10px 30px -4px rgba(28, 25, 23, 0.03) !important;
  padding: 24px !important;
  margin-bottom: 20px !important;
}

#page-shipments .card-title-main {
  font-size: 16px !important;
  font-weight: 800 !important;
  color: #18181B !important;
}
html.dark #page-shipments .card-title-main {
  color: #F4F4F5 !important;
}

#page-shipments #ship-from,
#page-shipments #ship-to {
  height: 42px !important;
  border-radius: 12px !important;
  background: #F5F2EB !important;
  border: 1px solid rgba(28, 25, 23, 0.06) !important;
  color: #18181B !important;
  font-size: 13px !important;
  font-weight: 600 !important;
  padding-inline: 12px !important;
  transition: all 0.2s ease !important;
}

#page-shipments #ship-from:focus,
#page-shipments #ship-to:focus {
  background: #FFFFFF !important;
  border-color: #EAB308 !important;
  box-shadow: 0 0 0 3px rgba(234, 179, 8, 0.15) !important;
  outline: none !important;
}

#page-shipments button[onclick="exportShipmentsExcel()"] {
  height: 40px !important;
  border-radius: 12px !important;
  background: #18181B !important;
  color: #FFFFFF !important;
  font-weight: 700 !important;
  font-size: 13px !important;
  border: none !important;
  box-shadow: 0 4px 12px rgba(24, 24, 27, 0.18) !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 8px !important;
  padding-inline: 16px !important;
  cursor: pointer !important;
  transition: all 0.2s ease !important;
}

#page-shipments button[onclick="exportShipmentsExcel()"]:hover {
  background: #27272A !important;
  transform: translateY(-1px) !important;
}

#page-shipments button[onclick="resetShipDateRange()"] {
  height: 40px !important;
  border-radius: 12px !important;
  background: #FAF7F2 !important;
  border: 1px solid rgba(28, 25, 23, 0.08) !important;
  color: #71717A !important;
  font-weight: 600 !important;
  font-size: 13px !important;
  padding-inline: 14px !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 6px !important;
  cursor: pointer !important;
  transition: all 0.2s ease !important;
}

#page-shipments button[onclick="resetShipDateRange()"]:hover {
  background: #E4E4E7 !important;
  color: #18181B !important;
}

/* Shipment Banner */
#page-shipments .shipment-banner {
  display: flex !important;
  align-items: center !important;
  gap: 12px !important;
  padding: 12px 18px !important;
  border-radius: 14px !important;
  background: linear-gradient(135deg, rgba(234, 179, 8, 0.08), rgba(168, 85, 247, 0.06)) !important;
  border: 1px solid rgba(234, 179, 8, 0.22) !important;
  margin-bottom: 20px !important;
}

#page-shipments .shipment-banner-text {
  color: #92400E !important;
  font-size: 13px !important;
  font-weight: 600 !important;
  line-height: 1.5 !important;
}
html.dark #page-shipments .shipment-banner {
  background: rgba(234, 179, 8, 0.10) !important;
  border-color: rgba(234, 179, 8, 0.25) !important;
}
html.dark #page-shipments .shipment-banner-text {
  color: #FDE68A !important;
}

/* Shipments Main Matrix Table */
#page-shipments #ship-main-table {
  width: 100% !important;
  border-collapse: separate !important;
  border-spacing: 0 !important;
}

#page-shipments #ship-thead th {
  position: sticky !important;
  top: 0 !important;
  z-index: 10 !important;
  background: #FAF7F2 !important;
  padding: 14px 16px !important;
  font-size: 12px !important;
  font-weight: 700 !important;
  color: #71717A !important;
  border-bottom: 1px solid rgba(28, 25, 23, 0.06) !important;
  text-align: center !important;
}

/* Sticky first column for Product Name */
#page-shipments #ship-thead th:first-child {
  position: sticky !important;
  inset-inline-start: 0 !important;
  z-index: 20 !important;
  background: #FAF7F2 !important;
  text-align: start !important;
  min-width: 180px !important;
}

#page-shipments #ship-tbody td:first-child {
  position: sticky !important;
  inset-inline-start: 0 !important;
  z-index: 5 !important;
  background: #FFFFFF !important;
  text-align: start !important;
  min-width: 180px !important;
}

/* Directional shadows for sticky first column */
html[dir="rtl"] #page-shipments #ship-thead th:first-child,
html[dir="rtl"] #page-shipments #ship-tbody td:first-child {
  box-shadow: -2px 0 6px rgba(0, 0, 0, 0.03) !important;
}
html[dir="ltr"] #page-shipments #ship-thead th:first-child,
html[dir="ltr"] #page-shipments #ship-tbody td:first-child {
  box-shadow: 2px 0 6px rgba(0, 0, 0, 0.03) !important;
}

#page-shipments #ship-tbody tr:hover td:first-child {
  background: #FAF7F2 !important;
}

#page-shipments #ship-tbody tr {
  height: 50px !important;
  border-bottom: 1px solid rgba(28, 25, 23, 0.04) !important;
  transition: background 0.15s ease !important;
}

#page-shipments #ship-tbody tr:hover {
  background: rgba(245, 242, 235, 0.6) !important;
}

#page-shipments #ship-tbody td {
  padding: 10px 14px !important;
  font-size: 13.5px !important;
  vertical-align: middle !important;
  border-bottom: 1px solid rgba(28, 25, 23, 0.04) !important;
}

/* Fix product text in first column */
#page-shipments #ship-tbody td:first-child span[style*="color:#f1f5f9"],
#page-shipments #ship-tbody td:first-child span {
  color: #18181B !important;
  font-weight: 700 !important;
}
html.dark #page-shipments #ship-tbody td:first-child span[style*="color:#f1f5f9"],
html.dark #page-shipments #ship-tbody td:first-child span {
  color: #F4F4F5 !important;
}

/* Date matrix values */
#page-shipments #ship-tbody td[style*="color:#e2e8f0"] {
  color: #18181B !important;
  font-weight: 600 !important;
  font-variant-numeric: tabular-nums !important;
}
html.dark #page-shipments #ship-tbody td[style*="color:#e2e8f0"] {
  color: #F4F4F5 !important;
}

#page-shipments #ship-tbody td[style*="color:#475569"] {
  color: #A1A1AA !important;
}

/* Total Column highlighting */
#page-shipments #ship-tbody td:last-child {
  background: rgba(16, 185, 129, 0.05) !important;
  color: #059669 !important;
  font-weight: 800 !important;
  font-variant-numeric: tabular-nums !important;
}
html.dark #page-shipments #ship-tbody td:last-child {
  background: rgba(16, 185, 129, 0.12) !important;
  color: #4ADE80 !important;
}

/* Taztiki Section button & table */
#page-shipments button[onclick="addTaztikiRow()"] {
  height: 38px !important;
  border-radius: 12px !important;
  background: rgba(168, 85, 247, 0.08) !important;
  border: 1px solid rgba(168, 85, 247, 0.22) !important;
  color: #9333EA !important;
  font-weight: 700 !important;
  font-size: 13px !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 6px !important;
  padding-inline: 14px !important;
  cursor: pointer !important;
  transition: all 0.2s ease !important;
}

#page-shipments button[onclick="addTaztikiRow()"]:hover {
  background: #9333EA !important;
  color: #FFFFFF !important;
}

#page-shipments #taztiki-tbody tr {
  height: 50px !important;
  border-bottom: 1px solid rgba(28, 25, 23, 0.04) !important;
}

#page-shipments #taztiki-tbody td {
  padding: 12px 16px !important;
  font-size: 13.5px !important;
}

#page-shipments #taztiki-tbody td[style*="color:#e2e8f0"] {
  color: #18181B !important;
  font-weight: 700 !important;
}
html.dark #page-shipments #taztiki-tbody td[style*="color:#e2e8f0"] {
  color: #F4F4F5 !important;
}

#page-shipments #taztiki-tbody td[style*="color:#c084fc"] {
  color: #9333EA !important;
  font-weight: 800 !important;
  font-variant-numeric: tabular-nums !important;
}

#page-shipments #taztiki-tbody button[onclick*="deleteTaztikiRow"] {
  width: 30px !important;
  height: 30px !important;
  border-radius: 9px !important;
  background: rgba(239, 68, 68, 0.08) !important;
  border: 1px solid rgba(239, 68, 68, 0.20) !important;
  color: #EF4444 !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  cursor: pointer !important;
  transition: all 0.2s ease !important;
}

#page-shipments #taztiki-tbody button[onclick*="deleteTaztikiRow"]:hover {
  background: #EF4444 !important;
  color: #FFFFFF !important;
}

#page-shipments #taztiki-empty {
  background: #FAF7F2 !important;
  border: 1px dashed rgba(28, 25, 23, 0.12) !important;
  border-radius: 16px !important;
  padding: 36px 20px !important;
  text-align: center !important;
  color: #71717A !important;
  margin-top: 14px !important;
}


/* ──────────────────────────────────────────────────────────────────────
   3. REPORTS MODULE (#page-reports) — MANAGEMENT INTELLIGENCE CENTER
────────────────────────────────────────────────────────────────────── */

/* Workflow Step Bar (Step 5 of 5) */
#page-reports .workflow-step-bar {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  flex-wrap: wrap !important;
  gap: 14px !important;
  padding: 16px 22px !important;
  border-radius: 20px !important;
  background: #FFFFFF !important;
  border: 1px solid rgba(28, 25, 23, 0.05) !important;
  box-shadow: 0 4px 18px -2px rgba(28, 25, 23, 0.03) !important;
  margin-bottom: 20px !important;
}

#page-reports .step-badge-indicator {
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
}

#page-reports .step-num-pill {
  background: #18181B !important;
  color: #FFFFFF !important;
  font-weight: 800 !important;
  font-size: 12px !important;
  padding: 5px 12px !important;
  border-radius: 9999px !important;
  letter-spacing: 0.02em !important;
}

#page-reports .step-name-text {
  font-weight: 800 !important;
  font-size: 14px !important;
  color: #18181B !important;
  margin-inline-start: 10px !important;
}
html.dark #page-reports .step-name-text {
  color: #F4F4F5 !important;
}

#page-reports .step-nav-buttons {
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
  flex-wrap: wrap !important;
}

#page-reports .step-nav-buttons .btn-secondary {
  height: 38px !important;
  border-radius: 12px !important;
  background: #FAF7F2 !important;
  border: 1px solid rgba(28, 25, 23, 0.08) !important;
  color: #71717A !important;
  font-weight: 600 !important;
  font-size: 12.5px !important;
  padding-inline: 14px !important;
  transition: all 0.2s ease !important;
}

#page-reports .step-nav-buttons .btn-secondary:hover {
  background: #E4E4E7 !important;
  color: #18181B !important;
}

#page-reports .step-nav-buttons .bridge-btn {
  height: 38px !important;
  border-radius: 12px !important;
  background: #18181B !important;
  color: #FFFFFF !important;
  font-weight: 700 !important;
  font-size: 12.5px !important;
  border: none !important;
  padding-inline: 16px !important;
  box-shadow: 0 4px 12px rgba(24, 24, 27, 0.15) !important;
  transition: all 0.2s ease !important;
}

#page-reports .step-nav-buttons .bridge-btn:hover {
  background: #27272A !important;
  transform: translateY(-1px) !important;
}

/* Comparison & Filter Toolbar Card */
#page-reports > .card.mb-4:first-of-type {
  background: #FFFFFF !important;
  border: 1px solid rgba(28, 25, 23, 0.05) !important;
  border-radius: 24px !important;
  box-shadow: 0 10px 30px -4px rgba(28, 25, 23, 0.03) !important;
  padding: 22px 24px !important;
  margin-bottom: 20px !important;
}

#page-reports .card-title-main {
  font-size: 16px !important;
  font-weight: 800 !important;
  color: #18181B !important;
}
html.dark #page-reports .card-title-main {
  color: #F4F4F5 !important;
}

#page-reports #rep-m1,
#page-reports #rep-m2,
#page-reports #rep-branch {
  height: 42px !important;
  border-radius: 12px !important;
  background: #F5F2EB !important;
  border: 1px solid rgba(28, 25, 23, 0.06) !important;
  color: #18181B !important;
  font-size: 13px !important;
  font-weight: 700 !important;
  padding-inline: 12px !important;
  transition: all 0.2s ease !important;
}

#page-reports #rep-m1:focus,
#page-reports #rep-m2:focus,
#page-reports #rep-branch:focus {
  background: #FFFFFF !important;
  border-color: #EAB308 !important;
  box-shadow: 0 0 0 3px rgba(234, 179, 8, 0.15) !important;
  outline: none !important;
}

/* VS Badge in comparison toolbar */
#page-reports .icon-amber {
  color: #D97706 !important;
}

/* Executive Comparative KPI Grid */
#page-reports #rep-kpi-stats.orders-kpi-grid {
  display: grid !important;
  grid-template-columns: repeat(4, 1fr) !important;
  gap: 16px !important;
  margin-bottom: 20px !important;
}

@media (max-width: 1040px) {
  #page-reports #rep-kpi-stats.orders-kpi-grid {
    grid-template-columns: repeat(2, 1fr) !important;
  }
}
@media (max-width: 600px) {
  #page-reports #rep-kpi-stats.orders-kpi-grid {
    grid-template-columns: 1fr !important;
  }
}

#page-reports #rep-kpi-stats .stat-card {
  background: #FFFFFF !important;
  border: 1px solid rgba(28, 25, 23, 0.05) !important;
  border-radius: 22px !important;
  box-shadow: 0 8px 24px -4px rgba(28, 25, 23, 0.03) !important;
  padding: 22px 20px !important;
  display: flex !important;
  flex-direction: column !important;
  justify-content: space-between !important;
  transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease !important;
  position: relative !important;
  overflow: hidden !important;
}

#page-reports #rep-kpi-stats .stat-card:hover {
  transform: translateY(-2px) !important;
  box-shadow: 0 14px 32px -4px rgba(28, 25, 23, 0.06) !important;
  border-color: rgba(234, 179, 8, 0.25) !important;
}

#page-reports #rep-kpi-stats .kpi-number {
  font-size: 26px !important;
  font-weight: 800 !important;
  font-variant-numeric: tabular-nums !important;
  line-height: 1.2 !important;
  margin-bottom: 6px !important;
}

#page-reports #rep-kpi-stats .kpi-number.kpi-cyan {
  color: #0284C7 !important;
}
html.dark #page-reports #rep-kpi-stats .kpi-number.kpi-cyan {
  color: #38BDF8 !important;
}

#page-reports #rep-kpi-stats .kpi-number.kpi-red {
  color: #EF4444 !important;
}

#page-reports #rep-kpi-stats .kpi-number.kpi-purple {
  color: #9333EA !important;
}
html.dark #page-reports #rep-kpi-stats .kpi-number.kpi-purple {
  color: #C084FC !important;
}

#page-reports #rep-kpi-stats .kpi-number.kpi-amber {
  color: #D97706 !important;
}
html.dark #page-reports #rep-kpi-stats .kpi-number.kpi-amber {
  color: #FBBF24 !important;
}

#page-reports #rep-kpi-stats .text-muted {
  font-size: 13px !important;
  font-weight: 600 !important;
  color: #71717A !important;
  margin-bottom: 12px !important;
}

/* Difference / Growth Indicator Pill */
#page-reports #rep-kpi-stats .stat-card > div[style*="border-radius:20px"] {
  border-radius: 9999px !important;
  font-size: 12px !important;
  font-weight: 800 !important;
  padding: 4px 12px !important;
  font-variant-numeric: tabular-nums !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 4px !important;
  width: fit-content !important;
}

/* Charts Grid Bento Layout */
#page-reports .g2 {
  display: grid !important;
  grid-template-columns: repeat(2, 1fr) !important;
  gap: 20px !important;
  margin-bottom: 20px !important;
}

@media (max-width: 960px) {
  #page-reports .g2 {
    grid-template-columns: 1fr !important;
  }
}

#page-reports .g2 .card {
  background: #FFFFFF !important;
  border: 1px solid rgba(28, 25, 23, 0.05) !important;
  border-radius: 24px !important;
  box-shadow: 0 10px 30px -4px rgba(28, 25, 23, 0.03) !important;
  padding: 22px !important;
  transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease !important;
}

#page-reports .g2 .card:hover {
  transform: translateY(-2px) !important;
  box-shadow: 0 14px 34px -4px rgba(28, 25, 23, 0.06) !important;
  border-color: rgba(234, 179, 8, 0.25) !important;
}

#page-reports .g2 .card .card-title-main {
  font-size: 14.5px !important;
  font-weight: 800 !important;
  color: #18181B !important;
}
html.dark #page-reports .g2 .card .card-title-main {
  color: #F4F4F5 !important;
}

#page-reports .chart-wrap-250 {
  height: 260px !important;
  position: relative !important;
  width: 100% !important;
  margin-top: 10px !important;
}

/* Badges on Charts */
#page-reports .g2 .badge {
  border-radius: 9999px !important;
  padding: 4px 12px !important;
  font-size: 11px !important;
  font-weight: 700 !important;
}

#page-reports .badge-purple {
  background: rgba(168, 85, 247, 0.10) !important;
  color: #9333EA !important;
  border: 1px solid rgba(168, 85, 247, 0.22) !important;
}

#page-reports .badge-red {
  background: rgba(239, 68, 68, 0.10) !important;
  color: #DC2626 !important;
  border: 1px solid rgba(239, 68, 68, 0.22) !important;
}

#page-reports .badge-blue {
  background: rgba(2, 132, 199, 0.10) !important;
  color: #0284C7 !important;
  border: 1px solid rgba(2, 132, 199, 0.22) !important;
}

#page-reports .badge-green {
  background: rgba(16, 185, 129, 0.10) !important;
  color: #059669 !important;
  border: 1px solid rgba(16, 185, 129, 0.22) !important;
}

/* Detailed Comparison Matrix Table Card */
#page-reports > .card:last-of-type {
  background: #FFFFFF !important;
  border: 1px solid rgba(28, 25, 23, 0.05) !important;
  border-radius: 24px !important;
  box-shadow: 0 10px 30px -4px rgba(28, 25, 23, 0.03) !important;
  padding: 24px !important;
}

#page-reports > .card:last-of-type h3 {
  font-size: 16px !important;
  font-weight: 800 !important;
  color: #18181B !important;
  margin-bottom: 16px !important;
}
html.dark #page-reports > .card:last-of-type h3 {
  color: #F4F4F5 !important;
}

#page-reports .tbl-wrap.tbl-scroll-h480 {
  border-radius: 16px !important;
  border: 1px solid rgba(28, 25, 23, 0.06) !important;
  background: #FFFFFF !important;
  overflow-x: auto !important;
  max-height: 520px !important;
  -webkit-overflow-scrolling: touch !important;
}

#page-reports .tbl thead th {
  position: sticky !important;
  top: 0 !important;
  z-index: 10 !important;
  background: #FAF7F2 !important;
  padding: 14px 16px !important;
  font-size: 12px !important;
  font-weight: 700 !important;
  color: #71717A !important;
  border-bottom: 1px solid rgba(28, 25, 23, 0.06) !important;
}

#page-reports #rep-th-m1 {
  color: #0284C7 !important;
  font-weight: 800 !important;
}
#page-reports #rep-th-m2 {
  color: #059669 !important;
  font-weight: 800 !important;
}

#page-reports #rep-matrix-tbl tr {
  height: 52px !important;
  border-bottom: 1px solid rgba(28, 25, 23, 0.04) !important;
  transition: background 0.15s ease !important;
}

#page-reports #rep-matrix-tbl tr:hover {
  background: rgba(245, 242, 235, 0.6) !important;
}

#page-reports #rep-matrix-tbl td {
  padding: 12px 16px !important;
  font-size: 13.5px !important;
  vertical-align: middle !important;
}

/* Branch name override */
#page-reports #rep-matrix-tbl td[style*="color:#fff"],
#page-reports #rep-matrix-tbl td[style*="color: #fff"],
#page-reports #rep-matrix-tbl td[style*="color:rgb(255, 255, 255)"] {
  color: #18181B !important;
  font-weight: 700 !important;
}
html.dark #page-reports #rep-matrix-tbl td[style*="color:#fff"],
html.dark #page-reports #rep-matrix-tbl td[style*="color: #fff"],
html.dark #page-reports #rep-matrix-tbl td[style*="color:rgb(255, 255, 255)"] {
  color: #F4F4F5 !important;
}

/* Numeric columns in Matrix */
#page-reports #rep-matrix-tbl td:nth-child(2) {
  color: #0284C7 !important;
  font-weight: 700 !important;
  font-variant-numeric: tabular-nums !important;
}
html.dark #page-reports #rep-matrix-tbl td:nth-child(2) {
  color: #38BDF8 !important;
}

#page-reports #rep-matrix-tbl td:nth-child(3) {
  color: #059669 !important;
  font-weight: 700 !important;
  font-variant-numeric: tabular-nums !important;
}
html.dark #page-reports #rep-matrix-tbl td:nth-child(3) {
  color: #4ADE80 !important;
}

#page-reports #rep-matrix-tbl td:nth-child(4) {
  font-weight: 800 !important;
  font-variant-numeric: tabular-nums !important;
}

#page-reports #rep-matrix-tbl .badge {
  border-radius: 9999px !important;
  padding: 4px 10px !important;
  font-size: 11.5px !important;
  font-weight: 800 !important;
  font-variant-numeric: tabular-nums !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 3px !important;
}

/* Waste Loss Row in Matrix */
#page-reports #rep-matrix-tbl tr[style*="rgba(248,113,113"] {
  background: rgba(239, 68, 68, 0.03) !important;
  border-top: 1px solid rgba(239, 68, 68, 0.15) !important;
}
#page-reports #rep-matrix-tbl tr[style*="rgba(248,113,113"] td:first-child {
  color: #EF4444 !important;
  font-weight: 800 !important;
}
#page-reports #rep-matrix-tbl tr[style*="rgba(248,113,113"] td:nth-child(2) {
  color: #D97706 !important;
}
html.dark #page-reports #rep-matrix-tbl tr[style*="rgba(248,113,113"] td:nth-child(2) {
  color: #FBBF24 !important;
}
#page-reports #rep-matrix-tbl tr[style*="rgba(248,113,113"] td:nth-child(3) {
  color: #DC2626 !important;
}
html.dark #page-reports #rep-matrix-tbl tr[style*="rgba(248,113,113"] td:nth-child(3) {
  color: #F87171 !important;
}


/* ──────────────────────────────────────────────────────────────────────
   4. COMPREHENSIVE DARK MODE SUPPORT FOR PHASE 4D
────────────────────────────────────────────────────────────────────── */

html.dark #page-waste #waste-stats .stat-card,
html.dark #page-waste .waste-entry-card,
html.dark #page-waste .waste-layout > .card.p-5,
html.dark #page-shipments #ship-stats .stat-card,
html.dark #page-shipments > .card.mb-4,
html.dark #page-shipments > .card:not(.mb-4),
html.dark #page-reports .workflow-step-bar,
html.dark #page-reports > .card.mb-4:first-of-type,
html.dark #page-reports #rep-kpi-stats .stat-card,
html.dark #page-reports .g2 .card,
html.dark #page-reports > .card:last-of-type {
  background: #18181B !important;
  border-color: rgba(255, 255, 255, 0.08) !important;
  box-shadow: 0 10px 30px -4px rgba(0, 0, 0, 0.40) !important;
}

html.dark #page-waste .tbl-wrap,
html.dark #page-shipments .tbl-wrap,
html.dark #page-reports .tbl-wrap {
  background: #18181B !important;
  border-color: rgba(255, 255, 255, 0.08) !important;
}

html.dark #page-waste .tbl thead th,
html.dark #page-shipments #ship-thead th,
html.dark #page-reports .tbl thead th {
  background: #202024 !important;
  border-color: rgba(255, 255, 255, 0.08) !important;
  color: #A1A1AA !important;
}

html.dark #page-shipments #ship-thead th:first-child,
html.dark #page-shipments #ship-tbody td:first-child {
  background: #18181B !important;
}

html.dark[dir="rtl"] #page-shipments #ship-thead th:first-child,
html.dark[dir="rtl"] #page-shipments #ship-tbody td:first-child {
  box-shadow: -2px 0 6px rgba(0, 0, 0, 0.40) !important;
}
html.dark[dir="ltr"] #page-shipments #ship-thead th:first-child,
html.dark[dir="ltr"] #page-shipments #ship-tbody td:first-child {
  box-shadow: 2px 0 6px rgba(0, 0, 0, 0.40) !important;
}

html.dark #page-shipments #ship-tbody tr:hover td:first-child {
  background: #222226 !important;
}

html.dark #page-waste #waste-tbl tr:hover,
html.dark #page-shipments #ship-tbody tr:hover,
html.dark #page-reports #rep-matrix-tbl tr:hover {
  background: rgba(255, 255, 255, 0.04) !important;
}

html.dark #page-waste #waste-tbl tr,
html.dark #page-shipments #ship-tbody tr,
html.dark #page-shipments #taztiki-tbody tr,
html.dark #page-reports #rep-matrix-tbl tr {
  border-color: rgba(255, 255, 255, 0.06) !important;
}

html.dark #page-waste .input,
html.dark #page-waste .select,
html.dark #page-waste .textarea,
html.dark #page-shipments .input,
html.dark #page-shipments .select,
html.dark #page-reports .input,
html.dark #page-reports .select {
  background: #222226 !important;
  border-color: rgba(255, 255, 255, 0.08) !important;
  color: #F4F4F5 !important;
}

html.dark #page-waste .input:focus,
html.dark #page-waste .select:focus,
html.dark #page-waste .textarea:focus,
html.dark #page-shipments .input:focus,
html.dark #page-shipments .select:focus,
html.dark #page-reports .input:focus,
html.dark #page-reports .select:focus {
  background: #27272A !important;
  border-color: #EAB308 !important;
}

html.dark #page-waste button[onclick*="w-filter-reason"],
html.dark #page-shipments button[onclick="resetShipDateRange()"],
html.dark #page-reports .step-nav-buttons .btn-secondary {
  background: #222226 !important;
  border-color: rgba(255, 255, 255, 0.08) !important;
  color: #A1A1AA !important;
}
html.dark #page-waste button[onclick*="w-filter-reason"]:hover,
html.dark #page-shipments button[onclick="resetShipDateRange()"]:hover,
html.dark #page-reports .step-nav-buttons .btn-secondary:hover {
  background: #27272A !important;
  color: #F4F4F5 !important;
}

html.dark #page-waste .waste-entry-card button[onclick="logWaste()"],
html.dark #page-shipments button[onclick="exportShipmentsExcel()"],
html.dark #page-reports .step-nav-buttons .bridge-btn {
  background: #FAF7F2 !important;
  color: #18181B !important;
  box-shadow: 0 4px 14px rgba(250, 247, 242, 0.15) !important;
}

html.dark #page-waste #waste-empty,
html.dark #page-shipments #taztiki-empty {
  background: #202024 !important;
  border-color: rgba(255, 255, 255, 0.12) !important;
}

html.dark #page-reports .step-num-pill {
  background: #FAF7F2 !important;
  color: #18181B !important;
}
/* ──────────────────────────────────────────────────────────────────────
   FINAL QA FIXES — LIGHT MODE CONTRAST
────────────────────────────────────────────────────────────────────── */

/* Issue 3: Dashboard Shortage Alert text contrast in light mode */
html:not(.dark) #dash-alerts span[style*="color:#ffffff"] {
  color: #18181B !important;
}

/* Issue 4: Stock Par Modal Title contrast in light mode */
html:not(.dark) #stock-modal-title span[style*="color:#fff"] {
  color: #18181B !important;
}


/* ══════════════════════════════════════════════════════════════════════
   STAGE 3B — LAYOUT FOUNDATION & MOBILE CORRECTION
   Harmonized Proportions, Spacing, Touch Targets, Mobile Navigation & Grid System
══════════════════════════════════════════════════════════════════════ */

:root {
  --ui-space-1: 4px;
  --ui-space-2: 8px;
  --ui-space-3: 12px;
  --ui-space-4: 16px;
  --ui-space-5: 20px;
  --ui-space-6: 24px;
  --ui-space-7: 32px;

  --ui-radius-sm: 8px;
  --ui-radius-md: 12px;
  --ui-radius-lg: 16px;
  --ui-radius-xl: 20px;

  --ui-control-h: 42px;
  --ui-control-h-sm: 38px;
  --ui-touch-min: 44px;

  --ui-page-pad-desktop: 20px;
  --ui-page-pad-tablet: 16px;
  --ui-page-pad-mobile: 12px;

  --ui-section-gap: 20px;
  --ui-card-gap: 14px;
}

/* 1. Global Page Chassis & Containment */
html, body {
  overflow-x: hidden !important;
  max-width: 100vw !important;
}

.app-chassis {
  max-width: 1380px !important;
  padding: 16px var(--ui-page-pad-desktop) 48px !important;
  box-sizing: border-box !important;
  overflow-x: hidden !important;
  margin: 0 auto !important;
}

.content {
  overflow-x: hidden !important;
  width: 100% !important;
  max-width: 100% !important;
}

/* 2. Radius Normalization for Major Surfaces */
.bento-card, .dash-card, .card, .workflow-pipeline-card, .recipe-side-card {
  border-radius: var(--ui-radius-lg) !important;
}

.modal, .modal-box, .modal-box-custom {
  border-radius: var(--ui-radius-xl) !important;
}

.sub-card-box, .excel-preview-box, .sim-box {
  border-radius: var(--ui-radius-md) !important;
}

/* 3. Reduce Card-in-Card Visual Clutter (Content > Container Decoration) */
.sub-card-box, .excel-preview-box {
  background: var(--surface-warm) !important;
  border: 1px solid var(--border-subtle) !important;
  box-shadow: none !important;
  padding: var(--ui-space-4) !important;
}

.dashboard-greeting-header {
  padding: var(--ui-space-5) !important;
  border-radius: var(--ui-radius-lg) !important;
}

/* 4. Controls Normalization & Touch Targets */
.input, .select, select, input[type="text"], input[type="number"], input[type="date"], input[type="search"] {
  min-height: var(--ui-control-h-sm);
  border-radius: var(--ui-radius-md) !important;
  font-size: 13px !important;
}

.filter-chip {
  min-height: 38px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 6px 14px !important;
  border-radius: 9999px !important;
  cursor: pointer !important;
}

.cs-stepper-btn {
  min-width: 38px !important;
  min-height: 38px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  border-radius: var(--ui-radius-sm) !important;
  cursor: pointer !important;
}

/* 5. Mobile Navigation & Dock Header */
.dock-mobile-menu-btn {
  display: none;
}

@media (min-width: 1024px) {
  #sidebar-toggle-btn {
    display: none !important;
  }
}

@media (max-width: 1023px) {
  .app-chassis {
    padding-inline: var(--ui-page-pad-tablet) !important;
  }
}

@media (max-width: 768px) {
  .app-chassis {
    padding-inline: var(--ui-page-pad-mobile) !important;
    padding-top: 10px !important;
    padding-bottom: 32px !important;
    gap: 14px !important;
  }

  /* Compact Mobile Header Dock (Replaces the 1,100px wide track) */
  .top-dock-container {
    padding: 0 !important;
    margin-bottom: 12px !important;
    width: 100% !important;
    overflow: visible !important;
    justify-content: center !important;
  }

  .floating-capsule-dock {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    height: 52px !important;
    padding: 6px 12px !important;
    justify-content: space-between !important;
    align-items: center !important;
    gap: 8px !important;
    border-radius: 9999px !important;
    box-sizing: border-box !important;
    position: relative !important;
  }

  /* Hide the 1,100px desktop pills on mobile screens */
  .dock-nav-pill-group {
    display: none !important;
  }

  /* Show mobile menu drawer trigger inside the compact header */
  .dock-mobile-menu-btn {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 44px !important;
    height: 44px !important;
    min-width: 44px !important;
    min-height: 44px !important;
    border-radius: 50% !important;
    background: rgba(255, 255, 255, 0.08) !important;
    border: 1px solid rgba(255, 255, 255, 0.14) !important;
    color: #FFFFFF !important;
    cursor: pointer !important;
    transition: all 0.2s ease !important;
  }
  .dock-mobile-menu-btn:active {
    background: rgba(234, 179, 8, 0.25) !important;
    border-color: #EAB308 !important;
    color: #EAB308 !important;
  }

  .dock-brand-pill {
    padding: 4px 8px !important;
    gap: 6px !important;
    cursor: pointer !important;
  }
  .dock-brand-name {
    font-size: 13px !important;
    font-weight: 800 !important;
  }

  .dock-end-controls {
    display: flex !important;
    align-items: center !important;
    gap: 6px !important;
  }

  .dock-search-pill {
    min-width: 44px !important;
    height: 44px !important;
    padding: 0 10px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
  }
  .dock-search-text, .dock-search-kbd {
    display: none !important;
  }

  .dock-theme-btn {
    min-height: 44px !important;
    padding: 0 12px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
  }
  .theme-mode-text {
    display: none !important;
  }

  /* Hide secondary desktop-only elements on mobile header to fit 360px */
  .dock-profile-avatar,
  .dock-action-trigger,
  .notif-bell-wrapper,
  .dock-icon-btn[onclick*="toggleLang"] {
    display: none !important;
  }

  /* 6. Mobile Grid System Correction */
  .grid-cols-4,
  .orders-kpi-grid,
  .greeting-stats-grid,
  .sim-controls-grid,
  .bento-dashboard-grid {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 10px !important;
  }

  .grid-110-1fr,
  .grid-1fr-110-auto {
    grid-template-columns: 1fr !important;
  }

  .dashboard-greeting-header {
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 12px !important;
    padding: var(--ui-space-4) !important;
  }

  /* 7. Tables Responsive Scrolling & Sticky Isolation */
  .tbl-wrap, .table-container {
    width: 100% !important;
    max-width: 100% !important;
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch !important;
    border-radius: var(--ui-radius-md) !important;
  }

  .tbl-wrap table, .table-container table {
    min-width: 600px;
  }

  .tbl-wrap th, .tbl-wrap td {
    padding: 10px 12px !important;
    font-size: 12px !important;
  }

  /* Sticky first column in wide matrices during horizontal swipe */
  #prod-matrix-table th:first-child,
  #prod-matrix-table td:first-child,
  #ship-main-table th:first-child,
  #ship-main-table td:first-child {
    position: sticky !important;
    inset-inline-start: 0 !important;
    background: #FFFFFF !important;
    z-index: 5 !important;
    box-shadow: 2px 0 6px rgba(0, 0, 0, 0.04) !important;
  }
  html.dark #prod-matrix-table th:first-child,
  html.dark #prod-matrix-table td:first-child,
  html.dark #ship-main-table th:first-child,
  html.dark #ship-main-table td:first-child {
    background: #18181B !important;
  }

  #sidebar-toggle-btn {
    bottom: 20px !important;
    inset-inline-end: 20px !important;
    width: 48px !important;
    height: 48px !important;
  }
}

@media (max-width: 480px) {
  /* 8. Dense Card Stacking on Small Mobile (360px - 430px) */
  .grid-cols-4,
  .orders-kpi-grid,
  .greeting-stats-grid,
  .sim-controls-grid,
  .bento-dashboard-grid,
  .grid-cols-3,
  .grid-cols-2,
  .grid-1fr-1fr {
    grid-template-columns: 1fr !important;
    gap: 8px !important;
  }

  /* Compact padding for cards on small screens to maximize data area */
  .bento-card, .dash-card, .card, .workflow-pipeline-card, .recipe-side-card {
    padding: var(--ui-space-3) var(--ui-space-4) !important;
    border-radius: var(--ui-radius-md) !important;
  }

  /* 9. Mobile Modals Full Fluidity */
  .modal, .modal-box, .modal-box-custom {
    width: calc(100% - 24px) !important;
    max-width: 100% !important;
    margin: 10px auto !important;
    padding: 18px 16px !important;
    border-radius: var(--ui-radius-lg) !important;
    max-height: 90vh !important;
  }

  .modal .grid-cols-2,
  .modal .grid-1fr-1fr,
  .modal .grid-cols-3 {
    grid-template-columns: 1fr !important;
    gap: 10px !important;
  }

  .modal-actions, .modal-footer {
    flex-direction: column-reverse !important;
    gap: 8px !important;
  }
  .modal-actions button, .modal-footer button {
    width: 100% !important;
    min-height: var(--ui-touch-min) !important;
  }

  /* Ensure modal titles are compact and legible */
  .modal h2, .modal h3, .modal-title {
    font-size: 16px !important;
  }
}


/* ══════════════════════════════════════════════════════════════════════
   STAGE 3C — VISUAL POLISH, PROPORTION REFINEMENT & PREMIUM UI TUNING
   Balanced Dimensions, De-bloated Surfaces, Refined Hierarchy & Rhythm
══════════════════════════════════════════════════════════════════════ */

/* ── 1. GLOBAL TYPOGRAPHY HARMONIZATION ── */
h1, .page-title, .greeting-heading {
  font-size: 23px !important;
  font-weight: 800 !important;
  letter-spacing: -0.015em !important;
  line-height: 1.25 !important;
  color: #18181B !important;
}

h2, .section-title {
  font-size: 17px !important;
  font-weight: 700 !important;
  line-height: 1.3 !important;
  color: #18181B !important;
  margin-bottom: 8px !important;
}

h3, .card-title, .bento-card-title, .card-title-main {
  font-size: 15px !important;
  font-weight: 700 !important;
  line-height: 1.35 !important;
  color: #18181B !important;
}

.greeting-sub, .bento-card-sub, .text-secondary, .text-muted {
  font-size: 12.5px !important;
  line-height: 1.45 !important;
  color: #71717A !important;
}

html.dark h1, html.dark .page-title, html.dark .greeting-heading,
html.dark h2, html.dark .section-title,
html.dark h3, html.dark .card-title, html.dark .bento-card-title, html.dark .card-title-main {
  color: #F4F4F5 !important;
}

html.dark .greeting-sub, html.dark .bento-card-sub, html.dark .text-secondary, html.dark .text-muted {
  color: #A1A1AA !important;
}

/* ── 2. DE-BLOATED CARDS & MAJOR CONTAINERS ── */
.bento-card, .card, .workflow-pipeline-card {
  border-radius: var(--ui-radius-lg) !important;
  border: 1px solid rgba(28, 25, 23, 0.06) !important;
  background: #FFFFFF !important;
  padding: 18px 20px !important;
  box-shadow: 0 4px 18px -2px rgba(28, 25, 23, 0.03), 0 1px 3px rgba(28, 25, 23, 0.02) !important;
  transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1) !important;
}

html.dark .bento-card, html.dark .card, html.dark .workflow-pipeline-card {
  background: #18181B !important;
  border-color: rgba(255, 255, 255, 0.07) !important;
  box-shadow: 0 6px 20px -2px rgba(0, 0, 0, 0.40) !important;
}

/* De-nesting sub-cards: clean surface contrast instead of heavy borders & shadows */
.sub-card-box, .excel-preview-box, .sim-box {
  background: #FAF7F2 !important;
  border: 1px solid rgba(28, 25, 23, 0.05) !important;
  border-radius: var(--ui-radius-md) !important;
  box-shadow: none !important;
  padding: 14px 16px !important;
}

html.dark .sub-card-box, html.dark .excel-preview-box, html.dark .sim-box {
  background: #202024 !important;
  border-color: rgba(255, 255, 255, 0.06) !important;
}

/* ── 3. DASHBOARD REFINEMENT ── */
.dashboard-greeting-header {
  padding: 16px 22px !important;
  border-radius: 18px !important;
  margin-bottom: 18px !important;
  background: #FFFFFF !important;
  border: 1px solid rgba(28, 25, 23, 0.06) !important;
  box-shadow: 0 4px 18px -2px rgba(28, 25, 23, 0.03) !important;
}

html.dark .dashboard-greeting-header {
  background: #18181B !important;
  border-color: rgba(255, 255, 255, 0.07) !important;
}

.greeting-status-tag {
  font-size: 11.5px !important;
  font-weight: 700 !important;
  padding: 3px 10px !important;
  margin-bottom: 6px !important;
}

.greeting-stats-grid {
  gap: 12px !important;
  margin-bottom: 18px !important;
}

.greeting-stat-pill {
  padding: 10px 16px !important;
  border-radius: 14px !important;
  min-height: 72px !important;
  background: #FFFFFF !important;
  border: 1px solid rgba(28, 25, 23, 0.06) !important;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.02) !important;
}

html.dark .greeting-stat-pill {
  background: #18181B !important;
  border-color: rgba(255, 255, 255, 0.07) !important;
}

.stat-pill-num, .kpi-num, .kpi-value {
  font-size: 24px !important;
  font-weight: 800 !important;
  letter-spacing: -0.01em !important;
  line-height: 1.2 !important;
}

.stat-pill-label, .kpi-label {
  font-size: 11.5px !important;
  font-weight: 600 !important;
  color: #71717A !important;
}

html.dark .stat-pill-label, html.dark .kpi-label {
  color: #A1A1AA !important;
}

/* Dashboard Bento Grid Tightening */
.bento-dashboard-grid {
  gap: 14px !important;
  margin-bottom: 18px !important;
}

.bento-card-header {
  margin-bottom: 12px !important;
}

.bento-chart-container {
  padding: 8px 10px !important;
}

/* ── 4. ORDERS & ACTION HIERARCHY ── */
.orders-kpi-grid {
  gap: 12px !important;
  margin-bottom: 16px !important;
}

/* Tab bar inside Orders */
.orders-tab-btn {
  height: 40px !important;
  padding: 0 16px !important;
  font-size: 13px !important;
  font-weight: 700 !important;
  border-radius: var(--ui-radius-md) !important;
}

/* Primary Action Buttons */
.btn-primary, .btn-solid-dark, .btn-solid-amber {
  height: 40px !important;
  padding: 0 18px !important;
  font-size: 13px !important;
  font-weight: 700 !important;
  border-radius: var(--ui-radius-md) !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 7px !important;
  transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1) !important;
}

/* Secondary Action Buttons (Neutral contrast) */
.btn-secondary {
  height: 38px !important;
  padding: 0 14px !important;
  font-size: 12.5px !important;
  font-weight: 600 !important;
  border-radius: var(--ui-radius-md) !important;
  background: #FFFFFF !important;
  border: 1px solid rgba(28, 25, 23, 0.08) !important;
  color: #18181B !important;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.02) !important;
}

html.dark .btn-secondary {
  background: #222226 !important;
  border-color: rgba(255, 255, 255, 0.10) !important;
  color: #F4F4F5 !important;
}

/* Tertiary / Minor Utility Actions */
.btn-sm, .bridge-btn {
  height: 36px !important;
  padding: 0 12px !important;
  font-size: 12px !important;
  border-radius: var(--ui-radius-sm) !important;
}

/* Sleek Excel Dropzone */
.excel-upload-card {
  max-width: 760px !important;
  padding: 20px 24px !important;
  border-radius: 18px !important;
  margin: 0 auto 18px !important;
}

.excel-upload-dropzone {
  min-height: 140px !important;
  padding: 20px 16px !important;
  border-radius: var(--ui-radius-md) !important;
  border: 1.5px dashed rgba(234, 179, 8, 0.35) !important;
  background: #FAF7F2 !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 6px !important;
}

html.dark .excel-upload-dropzone {
  background: #202024 !important;
  border-color: rgba(234, 179, 8, 0.40) !important;
}

.icon-box-lg {
  width: 44px !important;
  height: 44px !important;
  border-radius: 12px !important;
  font-size: 1.25rem !important;
  margin: 0 auto 6px !important;
}

/* ── 5. BADGES & METADATA SATURATION TAMING ── */
/* Operational status badges stay pill */
.badge-status, .status-pill {
  border-radius: 9999px !important;
  padding: 4px 10px !important;
  font-size: 11px !important;
  font-weight: 700 !important;
  letter-spacing: 0.01em !important;
}

/* Informational metadata tags (quiet neutral treatment) */
.badge-gray, .badge-slate, .tag-amber-badge,
[data-bom-item] .badge, .tbl .badge {
  border-radius: 6px !important;
  font-size: 11px !important;
  font-weight: 600 !important;
  padding: 2.5px 7px !important;
  background: #F5F2EB !important;
  color: #71717A !important;
  border: 1px solid rgba(28, 25, 23, 0.06) !important;
}

html.dark .badge-gray, html.dark .badge-slate, html.dark .tag-amber-badge,
html.dark [data-bom-item] .badge, html.dark .tbl .badge {
  background: #27272A !important;
  color: #A1A1AA !important;
  border-color: rgba(255, 255, 255, 0.08) !important;
}

/* Amber indicator strictly for highlighted active/attention states */
.badge-amber, .badge-amber-pill, .status-pulse-badge {
  background: rgba(245, 158, 11, 0.12) !important;
  color: #D97706 !important;
  border: 1px solid rgba(245, 158, 11, 0.28) !important;
}

/* ── 6. TABLE & DATA MATRIX REFINEMENT ── */
.tbl-wrap, .table-container {
  border-radius: 16px !important;
  border: 1px solid rgba(28, 25, 23, 0.06) !important;
  background: #FFFFFF !important;
  box-shadow: 0 4px 16px -2px rgba(0, 0, 0, 0.03) !important;
  margin-bottom: 16px !important;
}

html.dark .tbl-wrap, html.dark .table-container {
  background: #18181B !important;
  border-color: rgba(255, 255, 255, 0.07) !important;
  box-shadow: 0 4px 18px -2px rgba(0, 0, 0, 0.40) !important;
}

.tbl th, .data-table th, table.tbl th {
  padding: 11px 14px !important;
  font-size: 11.5px !important;
  font-weight: 700 !important;
  letter-spacing: 0.01em !important;
  background: #F7F5F0 !important;
  color: #71717A !important;
  border-bottom: 1px solid rgba(28, 25, 23, 0.08) !important;
  white-space: nowrap !important;
}

html.dark .tbl th, html.dark .data-table th, html.dark table.tbl th {
  background: #141416 !important;
  color: #A1A1AA !important;
  border-color: rgba(255, 255, 255, 0.08) !important;
}

.tbl td, .data-table td, table.tbl td {
  padding: 12px 14px !important;
  font-size: 12.5px !important;
  font-weight: 500 !important;
  color: #18181B !important;
  border-bottom: 1px solid rgba(28, 25, 23, 0.04) !important;
  vertical-align: middle !important;
}

html.dark .tbl td, html.dark .data-table td, html.dark table.tbl td {
  color: #F4F4F5 !important;
  border-color: rgba(255, 255, 255, 0.05) !important;
}

.tbl tr:hover td, .data-table tr:hover td {
  background: rgba(245, 242, 235, 0.50) !important;
}

html.dark .tbl tr:hover td, html.dark .data-table tr:hover td {
  background: rgba(255, 255, 255, 0.03) !important;
}

/* ── 7. CENTER STOCK WORKBENCH & INSPECTOR ── */
@media (min-width: 1025px) {
  .pane-inspector, #cs-inspector {
    width: 350px !important;
    max-width: 350px !important;
    padding: 18px 20px !important;
    border-radius: 18px !important;
    flex-shrink: 0 !important;
  }
}

.cs-command-card {
  padding: 14px 16px !important;
  border-radius: 14px !important;
}

.cs-stepper-btn {
  width: 36px !important;
  height: 36px !important;
  border-radius: 8px !important;
  font-size: 14px !important;
  font-weight: 800 !important;
}

/* ── 8. DESKTOP MODAL PROPORTIONS ── */
.modal, .modal-box, .modal-box-custom {
  max-width: 580px !important;
  border-radius: 20px !important;
  padding: 22px 24px !important;
  box-shadow: 0 20px 48px -8px rgba(0, 0, 0, 0.22) !important;
}

#modal-print-po .modal {
  max-width: 720px !important;
}

#modal-cmd .modal {
  max-width: 600px !important;
  padding: 16px 20px !important;
}

.modal .input, .modal .select, .modal input, .modal select {
  height: 40px !important;
  border-radius: 10px !important;
  font-size: 13px !important;
}

/* ── 9. RECIPES, PRODUCTION & REPORTS HARMONIZATION ── */
.recipe-side-card {
  border-radius: 18px !important;
  padding: 18px 20px !important;
}

.recipe-list-scroll {
  max-height: 480px !important;
}

#page-reports .bento-card, #page-reports .card {
  border-radius: 16px !important;
  padding: 18px 20px !important;
  margin-bottom: 16px !important;
}

#page-production .orders-kpi-grid {
  margin-bottom: 14px !important;
}

/* ── 10. CLEAN INPUTS & CONTROLS ── */
.search-pill-input, .input, .select, select,
input[type="text"], input[type="number"], input[type="date"], input[type="search"] {
  height: 40px !important;
  border-radius: 10px !important;
  border: 1px solid rgba(28, 25, 23, 0.08) !important;
  background: #F5F2EB !important;
  color: #18181B !important;
  padding: 0 14px !important;
  font-size: 13px !important;
  transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1) !important;
}

html.dark .search-pill-input, html.dark .input, html.dark .select, html.dark select,
html.dark input[type="text"], html.dark input[type="number"], html.dark input[type="date"], html.dark input[type="search"] {
  background: #222226 !important;
  border-color: rgba(255, 255, 255, 0.08) !important;
  color: #F4F4F5 !important;
}

.input:focus, .select:focus, select:focus,
input:focus {
  border-color: #EAB308 !important;
  box-shadow: 0 0 0 3px rgba(234, 179, 8, 0.15) !important;
  outline: none !important;
  background: #FFFFFF !important;
}

html.dark .input:focus, html.dark .select:focus, html.dark select:focus,
html.dark input:focus {
  background: #27272A !important;
}


/* ══════════════════════════════════════════════════════════════════════
   ENTERPRISE SAAS DARK SYSTEM ENGINE — MODULES 1 TO 12 REINFORCEMENT
   100% Dark Mode · Electric Blue Accent (#3B82F6) · 6-10px Restrained Radii
   ══════════════════════════════════════════════════════════════════════ */

/* 1. Global Document & Theme Enforcement */
html, body, html.dark, body.dark, [data-theme="dark"] {
  background-color: #0B1020 !important;
  background-image: none !important;
  color: #F8FAFC !important;
  font-family: 'Inter', 'Plus Jakarta Sans', system-ui, -apple-system, sans-serif !important;
  margin: 0 !important;
  padding: 0 !important;
  overflow: hidden !important;
  width: 100% !important;
  max-width: 100vw !important;
  height: 100vh !important;
  -webkit-font-smoothing: antialiased;
}

/* 2. All Enterprise Cards & Panels */
.card,
.bento-card,
.glass-card,
.kpi-card,
.stat-card,
.greeting-card-warm,
.dashboard-greeting-header,
.manual-order-card,
.excel-upload-card,
.recipe-side-card,
.recipe-hero-card,
.waste-entry-card,
.cs-command-card,
.workflow-pipeline-card,
.timeline-schedule-block,
[class*="bg-slate-"],
[class*="bg-gray-"],
[class*="bg-zinc-"] {
  background: #111827 !important;
  border-radius: 8px !important;
  border: 1px solid #263449 !important;
  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.25), 0 2px 4px -2px rgba(0, 0, 0, 0.15) !important;
  color: #F8FAFC !important;
}

/* Sub-panels & Nested Containers */
.sub-card-box,
.excel-preview-box,
.sim-box,
.timeline-simulator-box,
.cs-raw-preview-box,
.recipe-icon-box {
  background: #172033 !important;
  border: 1px solid #263449 !important;
  border-radius: 6px !important;
  color: #F8FAFC !important;
}

/* 3. Workflow Step Indicator Bar */
.workflow-step-bar {
  background: #111827 !important;
  border: 1px solid #263449 !important;
  border-radius: 8px !important;
  padding: 10px 16px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  margin-bottom: 20px !important;
}

.step-num-pill {
  background: rgba(59, 130, 246, 0.15) !important;
  color: #3B82F6 !important;
  border: 1px solid rgba(59, 130, 246, 0.3) !important;
  font-size: 11px !important;
  font-weight: 700 !important;
  border-radius: 6px !important;
  padding: 3px 8px !important;
}

.step-name-text {
  color: #F8FAFC !important;
  font-size: 13px !important;
  font-weight: 600 !important;
}

/* 4. Data Tables & Wrappers */
.tbl-wrap,
.table-container,
.responsive-table-wrapper {
  background: #111827 !important;
  border-radius: 8px !important;
  border: 1px solid #263449 !important;
  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.25) !important;
  overflow-x: auto !important;
  -webkit-overflow-scrolling: touch !important;
  width: 100% !important;
}

table,
table.tbl,
.data-table,
.minimal-table,
.enterprise-table {
  width: 100% !important;
  border-collapse: separate !important;
  border-spacing: 0 !important;
  background: #111827 !important;
  border: none !important;
}

table th,
table.tbl th,
.data-table th,
.minimal-table th,
.enterprise-table th {
  background: #172033 !important;
  color: #94A3B8 !important;
  font-weight: 600 !important;
  font-size: 11.5px !important;
  text-transform: uppercase !important;
  letter-spacing: 0.05em !important;
  padding: 10px 14px !important;
  border-bottom: 1px solid #263449 !important;
  white-space: nowrap !important;
  text-align: left !important;
}

table td,
table.tbl td,
.data-table td,
.minimal-table td,
.enterprise-table td {
  padding: 11px 14px !important;
  color: #F8FAFC !important;
  font-size: 13px !important;
  border-bottom: 1px solid #1E293B !important;
  vertical-align: middle !important;
}

table tbody tr:hover td,
table.tbl tbody tr:hover td,
.enterprise-table tbody tr:hover td {
  background: #172033 !important;
}

table tbody tr:last-child td {
  border-bottom: none !important;
}

/* 5. Modals & Dialogs */
.modal,
.modal-box,
.modal-box-custom,
.dialog-box {
  background: #111827 !important;
  border-radius: 10px !important;
  border: 1px solid #263449 !important;
  box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.7) !important;
  color: #F8FAFC !important;
}

.modal-header {
  border-bottom: 1px solid #263449 !important;
  padding-bottom: 12px !important;
}

/* 6. Typography */
h1, h2, h3, h4, h5, h6,
.card-title-main,
.bento-card-title,
.stat-pill-num,
.kpi-num,
.kpi-number,
.greeting-heading,
.font-bold,
.font-extrabold {
  color: #F8FAFC !important;
}

p,
.greeting-sub,
.bento-card-sub,
.text-muted,
.text-secondary,
.stat-pill-label,
.fs-10-5,
.accordion-stat-label,
.day-tag {
  color: #94A3B8 !important;
}

/* 7. Form Controls & Inputs */
input:not([type="checkbox"]):not([type="radio"]),
select,
textarea,
.form-input,
.form-select,
.input {
  background: #172033 !important;
  border: 1px solid #263449 !important;
  border-radius: 6px !important;
  color: #F8FAFC !important;
  padding: 8px 12px !important;
  font-size: 13px !important;
  outline: none !important;
  transition: border-color 0.15s ease, box-shadow 0.15s ease !important;
}

input:focus,
select:focus,
textarea:focus,
.form-input:focus,
.form-select:focus,
.input:focus {
  border-color: #3B82F6 !important;
  box-shadow: 0 0 0 2px rgba(59, 130, 246, 0.25) !important;
  background: #172033 !important;
}

/* 8. Restrained Buttons & Badges (6px Radius - Zero 9999px Pills) */
button,
.btn,
.btn-pill,
.btn-pill-sm,
.btn-solid-amber,
.btn-solid-dark,
.btn-secondary,
.btn-danger,
.btn-sm,
.badge,
.chip,
.dock-nav-pill,
.greeting-stat-pill,
.dock-brand-pill,
.dock-search-pill,
.status-pulse-badge,
.badge-amber-pill,
.profile-status-pill,
.day-tag.active-pill {
  border-radius: 6px !important;
}

.btn-solid-amber {
  background: #3B82F6 !important;
  color: #FFFFFF !important;
  font-weight: 600 !important;
  border: 1px solid #3B82F6 !important;
  box-shadow: 0 2px 6px rgba(59, 130, 246, 0.25) !important;
}

.btn-solid-amber:hover {
  background: #2563EB !important;
  border-color: #2563EB !important;
}

.btn-solid-dark {
  background: #172033 !important;
  color: #F8FAFC !important;
  border: 1px solid #263449 !important;
}

.btn-solid-dark:hover {
  background: #1E293B !important;
  border-color: #3B82F6 !important;
}


/* ══════════════════════════════════════════════════════════════════════
   ENTERPRISE APPLICATION SHELL & SIDEBAR OVERRIDES
══════════════════════════════════════════════════════════════════════ */
.app-chassis {
  display: flex !important;
  flex-direction: row !important;
  width: 100vw !important;
  max-width: 100vw !important;
  height: 100vh !important;
  max-height: 100vh !important;
  overflow: hidden !important;
  margin: 0 !important;
  padding: 0 !important;
  background: #0B1020 !important;
  position: static !important;
}

/* LEFT ENTERPRISE SIDEBAR */
.app-sidebar, .sidebar {
  display: flex !important;
  flex-direction: column !important;
  width: 260px !important;
  min-width: 260px !important;
  max-width: 260px !important;
  height: 100vh !important;
  background: #0F172A !important;
  border-right: 1px solid #263449 !important;
  position: relative !important;
  z-index: 50 !important;
  transition: width 0.2s cubic-bezier(0.4, 0, 0.2, 1) !important;
  overflow: hidden !important;
  transform: none !important;
  box-shadow: 2px 0 8px rgba(0, 0, 0, 0.25) !important;
}

.sidebar.collapsed {
  width: 72px !important;
  min-width: 72px !important;
  max-width: 72px !important;
}

.sidebar-brand-area {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 18px 20px;
  height: 64px;
  border-bottom: 1px solid #263449;
  background: #0F172A;
  flex-shrink: 0;
}

.brand-logo-wrap {
  display: flex;
  align-items: center;
  gap: 12px;
  cursor: pointer;
  text-decoration: none;
}

.brand-svg-icon {
  flex-shrink: 0;
}

.brand-text-col {
  display: flex;
  flex-direction: column;
}

.brand-title {
  font-size: 14.5px;
  font-weight: 700;
  color: #F8FAFC;
  letter-spacing: -0.01em;
  white-space: nowrap;
}

.brand-title-accent {
  color: #3B82F6;
  font-weight: 800;
}

.brand-version {
  font-size: 10.5px;
  font-weight: 600;
  color: #64748B;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.sidebar-mobile-close-btn {
  display: none;
  background: transparent;
  border: none;
  color: #94A3B8;
  font-size: 18px;
  cursor: pointer;
}

/* Sidebar Nav Scroll */
.sidebar-nav-scroll {
  flex: 1;
  overflow-y: auto;
  overflow-x: hidden;
  padding: 12px 10px;
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.sidebar-nav-group {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.sidebar-group-title {
  font-size: 10.5px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: #64748B;
  padding: 6px 12px 4px;
}

.sidebar .nav-item {
  display: flex !important;
  align-items: center !important;
  gap: 12px !important;
  padding: 9px 12px !important;
  border-radius: 6px !important;
  color: #94A3B8 !important;
  font-size: 13px !important;
  font-weight: 500 !important;
  cursor: pointer !important;
  transition: all 0.15s ease !important;
  background: transparent !important;
  border: 1px solid transparent !important;
  text-align: left !important;
  text-decoration: none !important;
  position: relative !important;
}

.sidebar .nav-item:hover {
  color: #F8FAFC !important;
  background: #172033 !important;
}

.sidebar .nav-item.active {
  color: #FFFFFF !important;
  background: #1E293B !important;
  border-color: rgba(59, 130, 246, 0.35) !important;
  box-shadow: inset 3px 0 0 #3B82F6 !important;
}

.sidebar .nav-item.active .nav-icon {
  stroke: #3B82F6 !important;
}

.sidebar .nav-icon {
  flex-shrink: 0;
  stroke: currentColor;
}

.sidebar .nav-label {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  flex: 1;
}

.sidebar-badge {
  font-size: 11px;
  font-weight: 700;
  padding: 1px 6px;
  border-radius: 4px;
  background: #3B82F6;
  color: #FFFFFF;
}

/* Sidebar Collapsed State */
.sidebar.collapsed .sidebar-group-title,
.sidebar.collapsed .brand-text-col,
.sidebar.collapsed .nav-label,
.sidebar.collapsed .sidebar-badge,
.sidebar.collapsed .user-meta {
  display: none !important;
}

.sidebar.collapsed .sidebar-brand-area {
  justify-content: center !important;
  padding: 18px 0 !important;
}

.sidebar.collapsed .nav-item {
  justify-content: center !important;
  padding: 10px 0 !important;
}

/* Sidebar Footer */
.sidebar-footer {
  padding: 12px 14px;
  border-top: 1px solid #263449;
  background: #0F172A;
  flex-shrink: 0;
}

.sidebar-user-card {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 6px 8px;
  border-radius: 6px;
  cursor: pointer;
  transition: background 0.15s ease;
}

.sidebar-user-card:hover {
  background: #172033;
}

.user-avatar-badge {
  width: 32px;
  height: 32px;
  border-radius: 6px;
  background: rgba(59, 130, 246, 0.20);
  border: 1px solid #3B82F6;
  color: #3B82F6;
  font-size: 11px;
  font-weight: 800;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.user-meta {
  display: flex;
  flex-direction: column;
  flex: 1;
  min-width: 0;
}

.user-name {
  font-size: 12.5px;
  font-weight: 600;
  color: #F8FAFC;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.user-role {
  font-size: 10.5px;
  color: #64748B;
  white-space: nowrap;
}

.sidebar-signout-btn {
  background: transparent;
  border: none;
  color: #94A3B8;
  padding: 4px;
  border-radius: 4px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: color 0.15s ease;
}

.sidebar-signout-btn:hover {
  color: #EF4444;
}

/* MAIN APP WRAPPER */
.main, #main-content {
  flex: 1 !important;
  display: flex !important;
  flex-direction: column !important;
  height: 100vh !important;
  max-height: 100vh !important;
  overflow: hidden !important;
  background: #0B1020 !important;
  min-width: 0 !important;
}

/* ENTERPRISE TOP HEADER */
.app-top-header, .top-dock-container {
  height: 64px !important;
  min-height: 64px !important;
  max-height: 64px !important;
  width: 100% !important;
  background: #111827 !important;
  border-bottom: 1px solid #263449 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  padding: 0 24px !important;
  position: static !important;
  top: auto !important;
  margin: 0 !important;
  z-index: 40 !important;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.25) !important;
  animation: none !important;
}

.header-left-col {
  display: flex;
  align-items: center;
  gap: 16px;
}

.header-menu-toggle-btn {
  display: none;
  background: transparent;
  border: none;
  color: #94A3B8;
  cursor: pointer;
  padding: 6px;
  border-radius: 6px;
}

.header-collapse-toggle-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  background: #172033;
  border: 1px solid #263449;
  color: #94A3B8;
  width: 32px;
  height: 32px;
  border-radius: 6px;
  cursor: pointer;
  transition: all 0.15s ease;
}

.header-collapse-toggle-btn:hover {
  color: #F8FAFC;
  border-color: #3B82F6;
}

.header-breadcrumbs {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
}

.breadcrumb-root {
  color: #64748B;
  font-weight: 500;
}

.breadcrumb-sep {
  color: #475569;
}

.breadcrumb-current {
  color: #F8FAFC;
  font-weight: 600;
}

.header-right-col {
  display: flex;
  align-items: center;
  gap: 14px;
}

.header-search-bar {
  display: flex;
  align-items: center;
  gap: 8px;
  background: #172033;
  border: 1px solid #263449;
  border-radius: 6px;
  padding: 6px 12px;
  color: #64748B;
  font-size: 12.5px;
  cursor: pointer;
  min-width: 220px;
  transition: all 0.15s ease;
}

.header-search-bar:hover {
  border-color: #3B82F6;
  color: #94A3B8;
}

.search-placeholder {
  flex: 1;
  text-align: left;
}

.search-kbd {
  background: #1E293B;
  color: #94A3B8;
  font-size: 10px;
  padding: 1px 5px;
  border-radius: 4px;
  border: 1px solid #334155;
}

.header-status-pill {
  display: flex;
  align-items: center;
  gap: 7px;
  background: rgba(34, 197, 94, 0.10);
  border: 1px solid rgba(34, 197, 94, 0.25);
  color: #22C55E;
  font-size: 11.5px;
  font-weight: 600;
  padding: 4px 10px;
  border-radius: 6px;
}

.status-live-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #22C55E;
  box-shadow: 0 0 6px rgba(34, 197, 94, 0.6);
}

.header-action-icon-btn {
  background: #172033;
  border: 1px solid #263449;
  color: #94A3B8;
  width: 34px;
  height: 34px;
  border-radius: 6px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  position: relative;
  transition: all 0.15s ease;
}

.header-action-icon-btn:hover {
  color: #F8FAFC;
  border-color: #3B82F6;
}

.header-profile-pill {
  display: flex;
  align-items: center;
  gap: 8px;
  background: #172033;
  border: 1px solid #263449;
  border-radius: 6px;
  padding: 4px 10px;
  cursor: pointer;
  position: relative;
  transition: all 0.15s ease;
}

.header-profile-pill:hover {
  border-color: #3B82F6;
}

.profile-avatar-circle {
  width: 24px;
  height: 24px;
  border-radius: 4px;
  background: #3B82F6;
  color: #FFFFFF;
  font-size: 11px;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
}

.header-user-name {
  font-size: 12.5px;
  font-weight: 600;
  color: #F8FAFC;
}

/* Dropdown Menu */
.user-dropdown-menu {
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  width: 200px;
  background: #111827;
  border: 1px solid #263449;
  border-radius: 8px;
  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.5);
  padding: 6px;
  z-index: 100;
}

.user-dropdown-header {
  padding: 8px 10px;
  display: flex;
  flex-direction: column;
}

.dropdown-user-title {
  font-size: 13px;
  font-weight: 600;
  color: #F8FAFC;
}

.dropdown-user-role {
  font-size: 11px;
  color: #64748B;
}

.user-dropdown-divider {
  height: 1px;
  background: #263449;
  margin: 4px 0;
}

.user-dropdown-item {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 10px;
  border-radius: 6px;
  font-size: 12.5px;
  color: #94A3B8;
  text-decoration: none;
  transition: all 0.15s ease;
}

.user-dropdown-item:hover {
  background: #172033;
  color: #F8FAFC;
}

.user-dropdown-item.text-danger:hover {
  color: #EF4444;
  background: rgba(239, 68, 68, 0.10);
}

/* SCROLLABLE MAIN CONTENT */
.content {
  flex: 1 !important;
  height: calc(100vh - 64px) !important;
  overflow-y: auto !important;
  overflow-x: hidden !important;
  padding: 24px 28px 48px !important;
  background: #0B1020 !important;
}

/* PAGE HEADER ROW */
.page-header-row {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin-bottom: 24px;
  gap: 16px;
  flex-wrap: wrap;
}

.page-context-badge {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  color: #64748B;
  font-weight: 500;
  margin-bottom: 4px;
}

.context-sep {
  color: #334155;
}

.page-main-heading {
  font-size: 22px;
  font-weight: 700;
  color: #F8FAFC;
  letter-spacing: -0.02em;
  margin-bottom: 4px;
}

.page-sub-heading {
  font-size: 13px;
  color: #94A3B8;
}

.page-header-actions {
  display: flex;
  align-items: center;
  gap: 10px;
}

/* 4-COLUMN ALIGNED ENTERPRISE KPI GRID */
.kpi-grid-4 {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
  margin-bottom: 24px;
}

.kpi-card {
  background: #111827;
  border: 1px solid #263449;
  border-radius: 8px;
  padding: 16px 18px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  cursor: pointer;
  transition: all 0.15s ease;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.15);
}

.kpi-card:hover {
  border-color: #3B82F6;
  transform: translateY(-1px);
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.25);
}

.kpi-card-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.kpi-card-label {
  font-size: 12.5px;
  font-weight: 600;
  color: #94A3B8;
}

.kpi-icon-wrap {
  width: 32px;
  height: 32px;
  border-radius: 6px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.kpi-card-value {
  font-size: 24px;
  font-weight: 700;
  color: #F8FAFC;
  letter-spacing: -0.02em;
}

.kpi-card-footer {
  margin-top: 4px;
}

/* DASHBOARD MAIN 2-COLUMN GRID */
.dashboard-grid-main {
  display: grid;
  grid-template-columns: 7fr 5fr;
  gap: 20px;
}

/* CARDS & PANELS */
.card {
  background: #111827 !important;
  border: 1px solid #263449 !important;
  border-radius: 8px !important;
  padding: 20px !important;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.20) !important;
}

.card-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  margin-bottom: 16px;
}

.card-title {
  font-size: 15px;
  font-weight: 700;
  color: #F8FAFC;
  letter-spacing: -0.01em;
}

.card-subtitle {
  font-size: 12px;
  color: #64748B;
  margin-top: 2px;
}

/* STATUS BADGES */
.status-badge {
  font-size: 11px;
  font-weight: 600;
  padding: 3px 8px;
  border-radius: 4px;
  display: inline-flex;
  align-items: center;
  gap: 5px;
}

.badge-success { background: rgba(34, 197, 94, 0.12); color: #22C55E; border: 1px solid rgba(34, 197, 94, 0.25); }
.badge-warning { background: rgba(245, 158, 11, 0.12); color: #F59E0B; border: 1px solid rgba(245, 158, 11, 0.25); }
.badge-danger  { background: rgba(239, 68, 68, 0.12); color: #EF4444; border: 1px solid rgba(239, 68, 68, 0.25); }
.badge-info    { background: rgba(59, 130, 246, 0.12); color: #3B82F6; border: 1px solid rgba(59, 130, 246, 0.25); }
.badge-neutral { background: rgba(100, 116, 139, 0.12); color: #94A3B8; border: 1px solid rgba(100, 116, 139, 0.25); }

/* BUTTONS */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 8px 14px;
  font-size: 13px;
  font-weight: 500;
  border-radius: 6px;
  cursor: pointer;
  transition: all 0.15s ease;
  border: 1px solid transparent;
  text-decoration: none;
}

.btn-sm {
  padding: 6px 12px;
  font-size: 12px;
}

.btn-xs {
  padding: 4px 8px;
  font-size: 11px;
}

.btn-primary {
  background: #3B82F6 !important;
  color: #FFFFFF !important;
  border-color: #3B82F6 !important;
}

.btn-primary:hover {
  background: #2563EB !important;
  border-color: #2563EB !important;
}

.btn-secondary {
  background: #172033 !important;
  color: #F8FAFC !important;
  border-color: #263449 !important;
}

.btn-secondary:hover {
  background: #1E293B !important;
  border-color: #3B82F6 !important;
}

/* FORM CONTROLS */
.form-input, .form-select, .input, .textarea {
  background: #172033 !important;
  border: 1px solid #263449 !important;
  border-radius: 6px !important;
  color: #F8FAFC !important;
  padding: 8px 12px !important;
  font-size: 13px !important;
  outline: none !important;
  transition: border-color 0.15s ease, box-shadow 0.15s ease !important;
}

.form-input:focus, .form-select:focus, .input:focus, .textarea:focus {
  border-color: #3B82F6 !important;
  box-shadow: 0 0 0 2px rgba(59, 130, 246, 0.25) !important;
}

.form-input-sm, .form-select-sm {
  padding: 5px 10px !important;
  font-size: 12px !important;
}

/* ENTERPRISE DATA TABLE */
.enterprise-table, .minimal-table {
  width: 100% !important;
  border-collapse: separate !important;
  border-spacing: 0 !important;
  font-size: 13px !important;
}

.enterprise-table thead th, .minimal-table thead th {
  background: #172033 !important;
  color: #94A3B8 !important;
  font-weight: 600 !important;
  font-size: 11.5px !important;
  text-transform: uppercase !important;
  letter-spacing: 0.05em !important;
  padding: 10px 14px !important;
  border-bottom: 1px solid #263449 !important;
  text-align: left !important;
}

.enterprise-table tbody td, .minimal-table tbody td {
  padding: 12px 14px !important;
  border-bottom: 1px solid #1E293B !important;
  color: #F8FAFC !important;
  vertical-align: middle !important;
}

.enterprise-table tbody tr:hover, .minimal-table tbody tr:hover {
  background: #172033 !important;
}

.chip-btn {
  background: #172033;
  border: 1px solid #263449;
  color: #94A3B8;
  font-size: 12px;
  font-weight: 500;
  padding: 4px 10px;
  border-radius: 4px;
  cursor: pointer;
  transition: all 0.15s ease;
}

.chip-btn.active, .chip-btn:hover {
  background: #1E293B;
  color: #F8FAFC;
  border-color: #3B82F6;
}

/* Stock Gauge Flex Layout */
.stock-gauge-wrapper {
  display: flex;
  align-items: center;
  gap: 20px;
}

.stock-gauge-details {
  flex: 1;
}

/* RESPONSIVE MEDIA QUERIES */
@media (max-width: 1280px) {
  .dashboard-grid-main {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 1024px) {
  .app-sidebar, .sidebar {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    bottom: 0 !important;
    transform: translateX(-100%) !important;
    z-index: 9999 !important;
    box-shadow: 0 0 50px rgba(0, 0, 0, 0.8) !important;
  }
  
  .app-sidebar.mob-open, .sidebar.mob-open {
    transform: translateX(0) !important;
  }
  
  .sidebar-mobile-close-btn {
    display: block !important;
  }
  
  .header-menu-toggle-btn {
    display: flex !important;
  }
  
  .header-collapse-toggle-btn {
    display: none !important;
  }
  
  .header-search-bar {
    min-width: 140px;
  }
  
  .kpi-grid-4 {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 768px) {
  .app-top-header, .top-dock-container {
    padding: 0 14px !important;
  }
  
  .header-status-pill, .header-search-bar {
    display: none !important;
  }
  
  .content {
    padding: 16px 14px 48px !important;
  }
  
  .kpi-grid-4 {
    grid-template-columns: 1fr;
  }
  
  .page-header-row {
    flex-direction: column;
    align-items: flex-start;
  }
}

@media (max-width: 390px) {
  .page-main-heading {
    font-size: 18px;
  }
  .content {
    padding: 12px 10px 48px !important;
  }
}


/* ==========================================================================
   ENTERPRISE UI REFINEMENT & CONSISTENCY OVERRIDES (PHASE 3 FINAL POLISH)
   ========================================================================== */

/* 1. App Content Container & Canvas */
.content {
  flex: 1 !important;
  width: 100% !important;
  max-width: 100% !important;
  margin: 0 !important;
  padding: 24px 32px 64px !important;
  box-sizing: border-box !important;
  overflow-y: auto !important;
  overflow-x: hidden !important;
  background: #0B1020 !important;
}

.page {
  width: 100% !important;
  max-width: 100% !important;
  box-sizing: border-box !important;
}

/* 2. Standardized Enterprise Cards */
section.page .card,
.page .card,
[id^="page-"] .card,
.card {
  background: #111827 !important;
  border: 1px solid #263449 !important;
  border-radius: 10px !important;
  padding: 24px !important;
  margin-bottom: 24px !important;
  box-shadow: 0 4px 12px -2px rgba(0, 0, 0, 0.25) !important;
  box-sizing: border-box !important;
}

/* Sub-panels, Boxes & Nested Containers */
.sub-card-box,
.excel-preview-box,
.sim-box,
.timeline-simulator-box,
.cs-raw-preview-box,
.recipe-icon-box {
  background: #172033 !important;
  border: 1px solid #263449 !important;
  border-radius: 8px !important;
  padding: 18px 20px !important;
  color: #F8FAFC !important;
  box-sizing: border-box !important;
}

/* 3. Proportional Module Layout Grids */
.dashboard-grid-main {
  display: grid !important;
  grid-template-columns: 8fr 4fr !important;
  gap: 24px !important;
  align-items: start !important;
}

.kpi-grid-4 {
  display: grid !important;
  grid-template-columns: repeat(4, 1fr) !important;
  gap: 20px !important;
  margin-bottom: 24px !important;
}

.recipes-layout {
  display: grid !important;
  grid-template-columns: 360px 1fr !important;
  gap: 24px !important;
  align-items: start !important;
}

.waste-layout {
  display: grid !important;
  grid-template-columns: 380px 1fr !important;
  gap: 24px !important;
  align-items: start !important;
}

.dispatch-layout {
  display: grid !important;
  grid-template-columns: 400px 1fr !important;
  gap: 24px !important;
  align-items: start !important;
}

/* 4. High-Clarity Enterprise Data Tables */
.tbl-wrap,
.table-container,
.responsive-table-wrapper {
  width: 100% !important;
  max-width: 100% !important;
  background: #111827 !important;
  border: 1px solid #263449 !important;
  border-radius: 8px !important;
  overflow-x: auto !important;
  -webkit-overflow-scrolling: touch !important;
  margin-bottom: 20px !important;
}

table,
table.tbl,
.data-table,
.enterprise-table {
  width: 100% !important;
  border-collapse: separate !important;
  border-spacing: 0 !important;
  background: #111827 !important;
  border: none !important;
}

table th,
table.tbl th,
.data-table th,
.enterprise-table th {
  background: #172033 !important;
  color: #94A3B8 !important;
  font-weight: 600 !important;
  font-size: 11.5px !important;
  text-transform: uppercase !important;
  letter-spacing: 0.05em !important;
  padding: 12px 18px !important;
  border-bottom: 1px solid #263449 !important;
  white-space: nowrap !important;
  text-align: left !important;
}

table td,
table.tbl td,
.data-table td,
.enterprise-table td {
  padding: 13px 18px !important;
  color: #F8FAFC !important;
  font-size: 13px !important;
  border-bottom: 1px solid #1E293B !important;
  vertical-align: middle !important;
}

table tbody tr:hover td,
table.tbl tbody tr:hover td,
.enterprise-table tbody tr:hover td {
  background: #172033 !important;
}

table tbody tr:last-child td {
  border-bottom: none !important;
}

/* 5. Enterprise Modal Dialogs & Sizing */
.modal,
.modal-box,
.modal-box-custom,
.dialog-box {
  width: 94% !important;
  max-width: 760px !important;
  padding: 28px !important;
  background: #111827 !important;
  border: 1px solid #263449 !important;
  border-radius: 12px !important;
  box-shadow: 0 25px 60px -10px rgba(0, 0, 0, 0.8) !important;
  color: #F8FAFC !important;
  box-sizing: border-box !important;
}

#modal-print-po .modal,
#modal-cmd .cmd-palette,
#modal-receive .modal {
  max-width: 920px !important;
}

#modal-prod .modal,
#modal-login .modal-box {
  max-width: 440px !important;
}

.modal-header {
  border-bottom: 1px solid #263449 !important;
  padding-bottom: 14px !important;
  margin-bottom: 20px !important;
}

/* 6. Form Controls Standard Proportions */
input:not([type="checkbox"]):not([type="radio"]),
select,
textarea,
.input,
.select,
.textarea,
.form-input {
  background: #172033 !important;
  border: 1px solid #263449 !important;
  color: #F8FAFC !important;
  border-radius: 6px !important;
  padding: 10px 14px !important;
  font-size: 13.5px !important;
  box-sizing: border-box !important;
  transition: border-color 0.15s ease, box-shadow 0.15s ease !important;
}

input:not([type="checkbox"]):not([type="radio"]):focus,
select:focus,
textarea:focus,
.input:focus,
.select:focus,
.textarea:focus,
.form-input:focus {
  border-color: #3B82F6 !important;
  box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.2) !important;
  outline: none !important;
}

/* 7. Responsive Breakpoint Refinements */
@media (max-width: 1280px) {
  .dashboard-grid-main {
    grid-template-columns: 1fr !important;
    gap: 20px !important;
  }
  .recipes-layout {
    grid-template-columns: 320px 1fr !important;
  }
}

@media (max-width: 1024px) {
  .kpi-grid-4 {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 16px !important;
  }
  .recipes-layout,
  .waste-layout,
  .dispatch-layout {
    grid-template-columns: 1fr !important;
    gap: 20px !important;
  }
}

@media (max-width: 768px) {
  .content {
    padding: 16px 14px 48px !important;
  }
  section.page .card,
  .page .card,
  [id^="page-"] .card,
  .card {
    padding: 18px 16px !important;
    margin-bottom: 16px !important;
  }
  .kpi-grid-4 {
    grid-template-columns: 1fr !important;
    gap: 12px !important;
  }
  .modal,
  .modal-box,
  .modal-box-custom,
  .dialog-box {
    padding: 20px 16px !important;
    width: 96% !important;
  }
}

@media (max-width: 375px) {
  .content {
    padding: 12px 10px 40px !important;
  }
  .page-main-heading {
    font-size: 19px !important;
  }
  table th,
  table.tbl th,
  .data-table th,
  .enterprise-table th {
    padding: 10px 12px !important;
    font-size: 11px !important;
  }
  table td,
  table.tbl td,
  .data-table td,
  .enterprise-table td {
    padding: 10px 12px !important;
    font-size: 12px !important;
  }
}

@media (max-width: 320px) {
  .content {
    padding: 10px 8px 36px !important;
  }
  section.page .card,
  .page .card,
  [id^="page-"] .card,
  .card {
    padding: 14px 12px !important;
  }
}