/* ==========================================================================
   Unilever Duplicate Coordinates Detection Tool - Stylesheet
   ========================================================================== */

:root {
  --primary: #f97316; /* Industrial Safety Amber/Orange */
  --primary-hover: #ea580c;
  --primary-light: rgba(249, 115, 22, 0.15);
  --primary-dark: #c2410c;
  --secondary: #475569;
  --danger: #ef4444;
  --danger-light: rgba(239, 68, 68, 0.15);
  --danger-dark: #b91c1c;
  --warning: #f59e0b;
  --warning-light: rgba(245, 158, 11, 0.15);
  --success: #10b981;
  --success-light: rgba(16, 185, 129, 0.15);
  --accent-cyan: #0ea5e9;
  --bg-dark: #0b1120;
  --bg-slate: #0f172a;
  --panel-dark: #1e293b;
  --panel-darker: #162032;
  --border-steel: #334155;
  --border-metallic: #475569;
  --gray-50: #f8fafc;
  --gray-100: #f1f5f9;
  --gray-200: #e2e8f0;
  --gray-300: #cbd5e1;
  --gray-400: #94a3b8;
  --gray-500: #64748b;
  --gray-600: #475569;
  --gray-700: #334155;
  --gray-800: #1e293b;
  --gray-900: #0f172a;
  --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.3);
  --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.4);
  --shadow-lg: 0 8px 24px rgba(0, 0, 0, 0.5);
  --radius-sm: 4px;
  --radius-md: 8px;
  --radius-lg: 12px;
  --font-sans: 'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --font-mono: 'JetBrains Mono', monospace;
}

* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

body {
  font-family: var(--font-sans);
  background-color: var(--bg-dark);
  background-image: 
    linear-gradient(rgba(15, 23, 42, 0.94), rgba(11, 17, 32, 0.97)),
    radial-gradient(at 0% 0%, rgba(249, 115, 22, 0.08) 0px, transparent 50%),
    radial-gradient(at 100% 0%, rgba(14, 165, 233, 0.08) 0px, transparent 50%),
    radial-gradient(at 50% 100%, rgba(245, 158, 11, 0.06) 0px, transparent 50%);
  color: #f1f5f9;
  line-height: 1.5;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  position: relative;
  overflow-x: hidden;
}

/* ==========================================================================
   Unilever Products Transparent Background Collage & Ambient Video Effect
   Featuring: Dove Shampoo, Sunsilk Shampoo, Lux Soap
   ========================================================================== */
.unilever-ambient-bg {
  position: fixed;
  inset: 0;
  width: 100vw;
  height: 100vh;
  pointer-events: none;
  z-index: 0;
  overflow: hidden;
  opacity: 0.85;
}

/* Floating collage watermarks */
.collage-watermark-layer {
  position: absolute;
  inset: 0;
  background-image: url('../Assets/unilever_products_transparent.png');
  background-repeat: repeat;
  background-size: 520px auto;
  background-position: center;
  opacity: 0.038;
  filter: grayscale(15%) contrast(110%);
  animation: driftCollage 90s linear infinite alternate;
}

/* Drifting Product Feature Clusters (Dove, Sunsilk, Lux) */
.product-float-orb {
  position: absolute;
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
  pointer-events: none;
  border-radius: 50%;
  filter: drop-shadow(0 20px 40px rgba(31, 54, 199, 0.08));
}

.product-float-1 {
  top: 8%;
  right: -40px;
  width: 320px;
  height: 380px;
  background-image: url('../Assets/unilever_products_transparent.png');
  opacity: 0.055;
  animation: floatDrift1 22s ease-in-out infinite alternate;
}

.product-float-2 {
  bottom: 5%;
  left: -50px;
  width: 360px;
  height: 420px;
  background-image: url('../Assets/unilever_products_transparent.png');
  opacity: 0.05;
  animation: floatDrift2 28s ease-in-out infinite alternate;
}

.product-float-3 {
  top: 45%;
  right: 18%;
  width: 260px;
  height: 300px;
  background-image: url('../Assets/unilever_products_transparent.png');
  opacity: 0.04;
  animation: floatDrift3 32s ease-in-out infinite alternate;
}

/* Soft glowing nourishment bubbles / shine particles */
.ambient-sheen-glow {
  position: absolute;
  border-radius: 50%;
  filter: blur(60px);
  pointer-events: none;
  opacity: 0.45;
}

.sheen-blue {
  width: 450px;
  height: 450px;
  background: radial-gradient(circle, rgba(59, 130, 246, 0.15) 0%, rgba(37, 99, 235, 0) 70%);
  top: 10%;
  left: 15%;
  animation: pulseGlow 12s ease-in-out infinite alternate;
}

.sheen-gold {
  width: 500px;
  height: 500px;
  background: radial-gradient(circle, rgba(245, 158, 11, 0.1) 0%, rgba(217, 119, 6, 0) 70%);
  bottom: 12%;
  right: 10%;
  animation: pulseGlow 15s ease-in-out infinite alternate-reverse;
}

.sheen-pink {
  width: 380px;
  height: 380px;
  background: radial-gradient(circle, rgba(236, 72, 153, 0.09) 0%, rgba(219, 39, 119, 0) 70%);
  top: 55%;
  left: 40%;
  animation: pulseGlow 18s ease-in-out infinite alternate;
}

@keyframes driftCollage {
  0% { transform: scale(1) translate(0, 0) rotate(0deg); }
  50% { transform: scale(1.04) translate(-25px, 20px) rotate(1deg); }
  100% { transform: scale(1) translate(20px, -15px) rotate(-1deg); }
}

@keyframes floatDrift1 {
  0% { transform: translateY(0px) rotate(0deg) scale(1); }
  50% { transform: translateY(-30px) rotate(3deg) scale(1.05); }
  100% { transform: translateY(15px) rotate(-2deg) scale(0.98); }
}

@keyframes floatDrift2 {
  0% { transform: translateY(0px) rotate(0deg) scale(1); }
  50% { transform: translateY(35px) rotate(-4deg) scale(1.06); }
  100% { transform: translateY(-20px) rotate(2deg) scale(0.96); }
}

@keyframes floatDrift3 {
  0% { transform: translate(0, 0) scale(1); }
  50% { transform: translate(-30px, -25px) scale(1.08); }
  100% { transform: translate(25px, 20px) scale(0.95); }
}

@keyframes pulseGlow {
  0% { transform: scale(0.85); opacity: 0.3; }
  100% { transform: scale(1.25); opacity: 0.6; }
}

/* ---------------- Layout & Header ---------------- */
.app-header {
  background: linear-gradient(135deg, #090d16 0%, #0f172a 45%, #1e1b4b 100%);
  color: #fff;
  padding: 0.55rem 1.4rem;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.35);
  position: sticky;
  top: 0;
  z-index: 1000;
  border-bottom: 1px solid rgba(255, 255, 255, 0.14);
  backdrop-filter: blur(14px);
}

.header-container {
  max-width: 1600px;
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 0.65rem;
  position: relative;
  z-index: 2;
}

.brand-section {
  display: flex;
  align-items: center;
  gap: 0.75rem;
}

.brand-logo-img {
  height: 38px;
  width: auto;
  max-width: 120px;
  object-fit: contain;
  display: block;
  background: white;
  padding: 3px 7px;
  border-radius: var(--radius-sm);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.25);
  transition: transform 0.25s ease;
}

.brand-logo-img:hover {
  transform: scale(1.04);
}

.brand-title {
  font-size: 1.08rem;
  font-weight: 800;
  color: #ffffff;
  letter-spacing: -0.02em;
  line-height: 1.2;
}

.brand-subtitle {
  font-size: 0.72rem;
  color: #38bdf8;
  font-weight: 600;
  letter-spacing: 0.02em;
}

.header-center-nav {
  display: flex;
  align-items: center;
  gap: 0.45rem;
  flex-wrap: wrap;
  flex: 1;
  justify-content: center;
}

.header-actions {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  flex-wrap: wrap;
}

.header-user-block {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  margin-left: auto;
}

/* Sign-In ID without any rectangle, border, box, or container */
.user-info-section {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  background: none !important;
  border: none !important;
  box-shadow: none !important;
  padding: 0 !important;
  margin: 0 !important;
  backdrop-filter: none !important;
}

.user-email-text {
  font-size: 0.8rem;
  color: #cbd5e1;
  font-weight: 600;
  letter-spacing: 0.01em;
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.4);
}

/* Modern Eye-Catching Logout Vector Icon Button */
.btn-logout-modern {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.45rem;
  background: linear-gradient(135deg, rgba(239, 68, 68, 0.14) 0%, rgba(220, 38, 38, 0.26) 100%);
  color: #fca5a5;
  border: 1px solid rgba(239, 68, 68, 0.4);
  padding: 0.42rem 0.85rem;
  border-radius: 8px;
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.02em;
  cursor: pointer;
  outline: none;
  text-decoration: none;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.25);
  transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
  backdrop-filter: blur(8px);
}

.btn-logout-modern:hover {
  background: linear-gradient(135deg, #ef4444 0%, #dc2626 100%);
  color: #ffffff;
  border-color: #ef4444;
  box-shadow: 0 0 16px rgba(239, 68, 68, 0.55), 0 4px 12px rgba(0, 0, 0, 0.3);
  transform: translateY(-1px);
}

.btn-logout-modern:active {
  transform: translateY(0px);
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.2);
}

.btn-logout-modern .logout-icon-svg {
  width: 16px;
  height: 16px;
  stroke: currentColor;
  transition: transform 0.25s ease;
  flex-shrink: 0;
}

.btn-logout-modern:hover .logout-icon-svg {
  transform: translateX(2px);
}

.welcome-popup-box {
  background: linear-gradient(145deg, #1e293b 0%, #0f172a 100%);
  color: #f8fafc;
  border-radius: var(--radius-lg);
  max-width: 480px;
  width: 100%;
  padding: 2.25rem 2rem;
  text-align: center;
  box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.7);
  border: 2px solid #3b82f6;
  animation: popBounce 0.45s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

@keyframes popBounce {
  0% { transform: scale(0.65) translateY(20px); opacity: 0; }
  100% { transform: scale(1) translateY(0); opacity: 1; }
}

/* ---------------- Main Container ---------------- */
.main-content {
  flex: 1;
  max-width: 1600px;
  width: 100%;
  margin: 0 auto;
  padding: 1.25rem;
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
  position: relative;
  z-index: 1;
}

/* ---------------- Upload & Stats Section ---------------- */
.stats-and-upload-grid {
  display: grid;
  grid-template-columns: 360px 1fr;
  gap: 1.25rem;
}

@media (max-width: 1024px) {
  .stats-and-upload-grid {
    grid-template-columns: 1fr;
  }
}

.card {
  background: linear-gradient(145deg, #1e293b 0%, #0f172a 100%);
  backdrop-filter: blur(12px);
  border-radius: var(--radius-md);
  padding: 1.25rem;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.4), inset 0 1px 0 rgba(255, 255, 255, 0.05);
  border: 1px solid var(--border-steel);
  transition: transform 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease;
  position: relative;
  color: #f8fafc;
}

/* Metallic Edge Effect on Card Hover */
.card:hover {
  border-color: var(--primary);
  box-shadow: 0 0 22px rgba(249, 115, 22, 0.22), 0 8px 24px -4px rgba(0, 0, 0, 0.5);
  transform: translateY(-2px);
}

/* Upload Dropzone with Industrial Styling */
.dropzone {
  border: 2px dashed var(--primary);
  background: rgba(15, 23, 42, 0.75);
  backdrop-filter: blur(6px);
  border-radius: var(--radius-md);
  padding: 1.5rem 1rem;
  text-align: center;
  cursor: pointer;
  transition: all 0.25s ease;
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.4rem;
}

.dropzone:hover, .dropzone.dragover {
  background: rgba(30, 41, 59, 0.95);
  border-color: #ea580c;
  box-shadow: 0 0 24px rgba(249, 115, 22, 0.35);
  transform: translateY(-2px);
}

.dropzone-icon {
  font-size: 2.25rem;
  color: var(--primary);
}

.dropzone-title {
  font-size: 0.95rem;
  font-weight: 700;
  color: #f8fafc;
}

.dropzone-subtitle {
  font-size: 0.75rem;
  color: #94a3b8;
  font-family: var(--font-mono);
}

.file-input-hidden {
  display: none;
}

/* Stats Cards Grid with Industrial Tile Aesthetic */
.stats-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
  gap: 0.85rem;
}

.dt-overview-grid {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 0.75rem;
}

.dt-proximity-grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 0.75rem;
}

@media (max-width: 1400px) {
  .dt-overview-grid {
    grid-template-columns: repeat(3, 1fr);
  }
  .dt-proximity-grid {
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  }
}

@media (max-width: 768px) {
  .dt-overview-grid,
  .dt-proximity-grid {
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  }
}

.stat-box {
  background: linear-gradient(145deg, #1e293b 0%, #162032 100%);
  backdrop-filter: blur(8px);
  border-radius: var(--radius-md);
  padding: 0.75rem 0.85rem;
  border: 1px solid var(--border-steel);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
  display: flex;
  align-items: center;
  gap: 0.65rem;
  transition: transform 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease;
  position: relative;
  min-width: 0;
  overflow: hidden;
}

.stat-box:hover {
  border-color: var(--primary);
  box-shadow: 0 0 20px rgba(249, 115, 22, 0.25);
  transform: translateY(-2px);
}

.stat-icon-wrapper {
  width: 38px;
  height: 38px;
  border-radius: var(--radius-sm);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.15rem;
  flex-shrink: 0;
  border: 1px solid rgba(255, 255, 255, 0.1);
}

.stat-icon-blue { background: rgba(14, 165, 233, 0.15); color: #38bdf8; border-color: rgba(14, 165, 233, 0.3); }
.stat-icon-red { background: rgba(239, 68, 68, 0.15); color: #f87171; border-color: rgba(239, 68, 68, 0.3); }
.stat-icon-amber { background: rgba(249, 115, 22, 0.15); color: #fb923c; border-color: rgba(249, 115, 22, 0.3); }
.stat-icon-purple { background: rgba(168, 85, 247, 0.15); color: #c084fc; border-color: rgba(168, 85, 247, 0.3); }
.stat-icon-green { background: rgba(16, 185, 129, 0.15); color: #34d399; border-color: rgba(16, 185, 129, 0.3); }

.stat-content {
  display: flex;
  flex-direction: column;
  min-width: 0;
  overflow: hidden;
  flex: 1;
}

.stat-label {
  font-size: 0.68rem;
  font-weight: 700;
  color: #94a3b8;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  font-family: var(--font-mono);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  display: block;
}

.stat-value {
  font-size: clamp(1.15rem, 1.25vw, 1.45rem);
  font-weight: 800;
  color: #ffffff;
  line-height: 1.15;
  font-family: var(--font-mono);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  display: block;
  margin: 1px 0;
}

.stat-subtext {
  font-size: 0.65rem;
  color: #64748b;
  margin-top: 1px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  display: block;
}

/* Illuminated Status LED Indicators */
.led-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  display: inline-block;
  flex-shrink: 0;
}

.led-amber {
  background: #f97316;
  box-shadow: 0 0 8px #f97316, 0 0 14px rgba(249, 115, 22, 0.6);
  animation: pulseLed 2s infinite;
}

.led-green {
  background: #10b981;
  box-shadow: 0 0 8px #10b981, 0 0 14px rgba(16, 185, 129, 0.6);
  animation: pulseLed 2s infinite;
}

.led-blue {
  background: #0ea5e9;
  box-shadow: 0 0 8px #0ea5e9, 0 0 14px rgba(14, 165, 233, 0.6);
  animation: pulseLed 2s infinite;
}

.led-red {
  background: #ef4444;
  box-shadow: 0 0 8px #ef4444, 0 0 14px rgba(239, 68, 68, 0.6);
  animation: pulseLed 2s infinite;
}

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

/* ---------------- Tabs & Controls ---------------- */
.view-navigation {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 0.75rem;
  border-bottom: 2px solid var(--border-steel);
  padding-bottom: 0.5rem;
}

.tabs-group {
  display: flex;
  gap: 0.5rem;
}

.tab-button {
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  padding: 0.62rem 1.25rem;
  border-radius: var(--radius-sm);
  border: 1px solid var(--border-steel);
  background: #1e293b;
  color: #cbd5e1;
  font-weight: 700;
  font-size: 0.85rem;
  cursor: pointer;
  transition: all 0.2s ease;
  position: relative;
  overflow: hidden;
}

.tab-button:hover {
  background: #334155;
  color: #ffffff;
  border-color: var(--primary);
}

.tab-button.active {
  background: linear-gradient(135deg, #ea580c 0%, #f97316 100%);
  color: white;
  border-color: #f97316;
  box-shadow: 0 4px 14px rgba(249, 115, 22, 0.4);
}

.badge-tab {
  background: rgba(0, 0, 0, 0.3);
  padding: 2px 7px;
  border-radius: 9999px;
  font-size: 0.75rem;
  font-weight: 700;
  font-family: var(--font-mono);
}

.tab-button:not(.active) .badge-tab {
  background: #0f172a;
  color: #94a3b8;
}

/* ---------------- Industrial Filter Bar & Precision Dropdown ---------------- */
.filter-toolbar {
  background: linear-gradient(145deg, #1e293b 0%, #0f172a 100%);
  backdrop-filter: blur(10px);
  padding: 0.75rem 1rem;
  border-radius: var(--radius-md);
  border: 1px solid var(--border-steel);
  display: flex;
  align-items: center;
  gap: 0.75rem;
  flex-wrap: wrap;
  box-shadow: var(--shadow-md);
}

.search-input-wrapper {
  position: relative;
  flex: 1;
  min-width: 220px;
}

.search-input-wrapper input {
  width: 100%;
  padding: 0.58rem 0.85rem 0.58rem 2.3rem;
  border-radius: var(--radius-sm);
  border: 1px solid var(--border-metallic);
  font-size: 0.85rem;
  outline: none;
  background: #0f172a;
  color: #ffffff;
  transition: all 0.2s ease;
  font-family: var(--font-mono);
}

.search-input-wrapper input:focus {
  border-color: var(--primary);
  box-shadow: 0 0 0 3px rgba(249, 115, 22, 0.2);
}

.search-icon {
  position: absolute;
  left: 0.75rem;
  top: 50%;
  transform: translateY(-50%);
  color: var(--gray-400);
  font-size: 0.9rem;
}

.filter-select {
  padding: 0.58rem 0.85rem;
  border-radius: var(--radius-sm);
  border: 1px solid var(--border-metallic);
  font-size: 0.85rem;
  background: #0f172a;
  color: #f1f5f9;
  outline: none;
  cursor: pointer;
  transition: all 0.2s ease;
  font-weight: 600;
}

.filter-select:focus {
  border-color: var(--primary);
  box-shadow: 0 0 0 3px rgba(249, 115, 22, 0.2);
}

.precision-select-industrial {
  border-color: var(--primary) !important;
  background: #162032 !important;
  color: #f97316 !important;
  font-family: var(--font-mono) !important;
  font-weight: 700 !important;
}

/* ==========================================================================
   ULTRA-MODERN, ATTRACTIVE & VISUALLY APPEALING BUTTON DESIGN SYSTEM
   ========================================================================== */
.btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.55rem;
  padding: 0.58rem 1.25rem;
  border-radius: 11px;
  font-weight: 700;
  font-size: 0.85rem;
  letter-spacing: 0.015em;
  cursor: pointer;
  transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1);
  border: 1px solid transparent;
  white-space: nowrap;
  user-select: none;
  overflow: hidden;
  text-decoration: none;
  box-shadow: 0 3px 8px rgba(0, 0, 0, 0.08), 0 1px 2px rgba(0, 0, 0, 0.04);
}

/* Modern Shimmer Reflection Sweep on Hover */
.btn::before {
  content: '';
  position: absolute;
  top: 0;
  left: -130%;
  width: 60%;
  height: 100%;
  background: linear-gradient(
    90deg,
    rgba(255, 255, 255, 0) 0%,
    rgba(255, 255, 255, 0.32) 50%,
    rgba(255, 255, 255, 0) 100%
  );
  transform: skewX(-25deg);
  transition: left 0.65s cubic-bezier(0.16, 1, 0.3, 1);
  pointer-events: none;
  z-index: 1;
}

.btn:hover:not(:disabled)::before {
  left: 160%;
}

.btn:active:not(:disabled) {
  transform: translateY(1px) scale(0.975);
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12);
}

.btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
  filter: grayscale(30%);
  transform: none !important;
  box-shadow: none !important;
}

/* Primary Button: Industrial Safety Amber Orange Gradient */
.btn-primary {
  background: linear-gradient(135deg, #ea580c 0%, #f97316 50%, #c2410c 100%);
  color: #ffffff !important;
  border: 1px solid rgba(255, 255, 255, 0.28);
  box-shadow: 
    0 4px 14px -1px rgba(249, 115, 22, 0.4),
    0 2px 5px -1px rgba(249, 115, 22, 0.25),
    inset 0 1px 0 rgba(255, 255, 255, 0.35);
}

.btn-primary:hover:not(:disabled) {
  background: linear-gradient(135deg, #fb923c 0%, #ea580c 50%, #f97316 100%);
  color: #ffffff !important;
  transform: translateY(-2.5px);
  box-shadow: 
    0 10px 25px -2px rgba(249, 115, 22, 0.6),
    0 0 18px rgba(251, 146, 60, 0.5),
    inset 0 1px 0 rgba(255, 255, 255, 0.45);
}

/* Success Button: Radiant Emerald Jade Gradient with Soft Glow */
.btn-success {
  background: linear-gradient(135deg, #10b981 0%, #059669 50%, #047857 100%);
  color: #ffffff !important;
  border: 1px solid rgba(255, 255, 255, 0.28);
  box-shadow: 
    0 4px 14px -1px rgba(16, 185, 129, 0.4),
    0 2px 5px -1px rgba(16, 185, 129, 0.25),
    inset 0 1px 0 rgba(255, 255, 255, 0.35);
}

.btn-success:hover:not(:disabled) {
  background: linear-gradient(135deg, #34d399 0%, #10b981 50%, #059669 100%);
  color: #ffffff !important;
  transform: translateY(-2.5px);
  box-shadow: 
    0 10px 25px -2px rgba(16, 185, 129, 0.6),
    0 0 18px rgba(52, 211, 153, 0.5),
    inset 0 1px 0 rgba(255, 255, 255, 0.45);
}

/* Danger Button: High-Impact Ruby Crimson with Ember Glow */
.btn-danger {
  background: linear-gradient(135deg, #f43f5e 0%, #e11d48 50%, #be123c 100%);
  color: #ffffff !important;
  border: 1px solid rgba(255, 255, 255, 0.28);
  box-shadow: 
    0 4px 14px -1px rgba(225, 29, 72, 0.4),
    0 2px 5px -1px rgba(225, 29, 72, 0.25),
    inset 0 1px 0 rgba(255, 255, 255, 0.35);
}

.btn-danger:hover:not(:disabled) {
  background: linear-gradient(135deg, #fb7185 0%, #f43f5e 50%, #e11d48 100%);
  color: #ffffff !important;
  transform: translateY(-2.5px);
  box-shadow: 
    0 10px 25px -2px rgba(225, 29, 72, 0.6),
    0 0 18px rgba(251, 113, 133, 0.5),
    inset 0 1px 0 rgba(255, 255, 255, 0.45);
}

/* Warning Button: High-Visibility Amber/Gold with Radiant Sheen */
.btn-warning {
  background: linear-gradient(135deg, #f59e0b 0%, #d97706 50%, #b45309 100%);
  color: #ffffff !important;
  border: 1px solid rgba(255, 255, 255, 0.32);
  box-shadow: 
    0 4px 14px -1px rgba(245, 158, 11, 0.45),
    0 2px 5px -1px rgba(217, 119, 6, 0.3),
    inset 0 1px 0 rgba(255, 255, 255, 0.4);
}

.btn-warning:hover:not(:disabled) {
  background: linear-gradient(135deg, #fbbf24 0%, #f59e0b 50%, #d97706 100%);
  color: #ffffff !important;
  transform: translateY(-2.5px);
  box-shadow: 
    0 10px 25px -2px rgba(245, 158, 11, 0.65),
    0 0 18px rgba(251, 191, 36, 0.55),
    inset 0 1px 0 rgba(255, 255, 255, 0.5);
}

/* Secondary Button: Dark Metallic Steel */
.btn-secondary {
  background: linear-gradient(180deg, #334155 0%, #1e293b 100%);
  border: 1px solid var(--border-metallic);
  color: #f1f5f9 !important;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.3), inset 0 1px 0 rgba(255, 255, 255, 0.1);
}

.btn-secondary:hover:not(:disabled) {
  background: linear-gradient(180deg, #475569 0%, #334155 100%);
  border-color: #f97316;
  color: #ffffff !important;
  transform: translateY(-2px);
  box-shadow: 0 6px 18px -2px rgba(0, 0, 0, 0.4), 0 0 0 1px rgba(249, 115, 22, 0.25);
}

/* Header buttons specific style */
.header-actions .btn {
  padding: 0.45rem 0.95rem;
  font-size: 0.82rem;
  border-radius: var(--radius-sm);
  font-weight: 700;
}

.header-actions .btn-secondary {
  background: rgba(30, 41, 59, 0.8);
  border: 1px solid var(--border-steel);
  color: #f1f5f9 !important;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
}

.header-actions .btn-secondary:hover:not(:disabled) {
  background: linear-gradient(135deg, rgba(51, 65, 85, 0.9) 0%, rgba(249, 115, 22, 0.2) 100%);
  border-color: #f97316;
  color: #ffffff !important;
  transform: translateY(-2px);
  box-shadow: 0 0 18px rgba(249, 115, 22, 0.4);
}

/* Outline Button: Sleek Translucent Accent */
.btn-outline {
  background: rgba(249, 115, 22, 0.08);
  border: 1.5px solid #f97316;
  color: #f97316 !important;
}

.btn-outline:hover:not(:disabled) {
  background: linear-gradient(135deg, #ea580c 0%, #f97316 100%);
  color: #ffffff !important;
  border-color: transparent;
  transform: translateY(-2px);
  box-shadow: 0 8px 22px -2px rgba(249, 115, 22, 0.45);
}

/* Small Button Variant */
.btn-sm {
  padding: 0.4rem 0.85rem;
  font-size: 0.78rem;
  border-radius: var(--radius-sm);
}

/* ---------------- Map Section ---------------- */
.map-view-container {
  display: flex;
  flex-direction: column;
  height: 680px;
  background: #0f172a;
  border-radius: var(--radius-md);
  border: 1px solid var(--border-steel);
  overflow: hidden;
  position: relative;
  box-shadow: var(--shadow-md);
}

.map-header-bar {
  padding: 0.65rem 1rem;
  background: #0b1120;
  color: #f1f5f9;
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 0.85rem;
  z-index: 500;
  border-bottom: 1px solid var(--border-steel);
  font-family: var(--font-mono);
}

#map {
  flex: 1;
  width: 100%;
  height: 100%;
  z-index: 10;
}

.map-legend {
  position: absolute;
  bottom: 20px;
  left: 20px;
  background: rgba(15, 23, 42, 0.92);
  backdrop-filter: blur(8px);
  padding: 0.75rem 1rem;
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-lg);
  border: 1px solid var(--border-steel);
  z-index: 800;
  font-size: 0.75rem;
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
  color: #f1f5f9;
}

.legend-item {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-weight: 500;
}

.legend-dot {
  width: 12px;
  height: 12px;
  border-radius: 50%;
}

.dot-red { background: #ef4444; border: 2px solid #b91c1c; }
.dot-amber { background: #f59e0b; border: 2px solid #b45309; }
.dot-purple { background: #8b5cf6; border: 2px solid #6d28d9; }

/* ---------------- Side-by-Side Comparison UI ---------------- */
.comparison-container {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.comparison-card {
  background: linear-gradient(145deg, #1e293b 0%, #0f172a 100%);
  border-radius: var(--radius-md);
  border: 1px solid var(--border-steel);
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.4);
  overflow: hidden;
  transition: all 0.25s ease;
  color: #f8fafc;
}

.comparison-card:hover {
  box-shadow: 0 8px 24px rgba(249, 115, 22, 0.2);
  border-color: var(--primary);
}

.comparison-card-header {
  background: #0f172a;
  border-bottom: 1px solid var(--border-steel);
  padding: 0.75rem 1rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 0.5rem;
}

.group-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  background: rgba(239, 68, 68, 0.2);
  color: #fca5a5;
  font-weight: 700;
  font-size: 0.8rem;
  padding: 0.25rem 0.6rem;
  border-radius: 9999px;
  border: 1px solid rgba(239, 68, 68, 0.4);
}

.coord-pill {
  font-family: var(--font-mono);
  font-size: 0.8rem;
  background: #334155;
  padding: 0.2rem 0.5rem;
  border-radius: var(--radius-sm);
  color: #f8fafc;
  font-weight: 600;
}

.comparison-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  divide-x: 1px solid var(--border-steel);
}

@media (max-width: 900px) {
  .comparison-grid {
    grid-template-columns: 1fr;
  }
}

.original-panel {
  padding: 1rem;
  background: #fcfdfe;
  border-right: 1px solid var(--gray-200);
}

.duplicate-panel {
  padding: 1rem;
  background: #fffafa;
}

.panel-title {
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  font-weight: 700;
  margin-bottom: 0.75rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.title-primary {
  color: var(--primary);
}

.title-duplicate {
  color: var(--danger);
}

.outlet-record-box {
  background: white;
  border: 1px solid var(--gray-200);
  border-radius: var(--radius-sm);
  padding: 0.75rem;
  margin-bottom: 0.6rem;
  box-shadow: 0 1px 2px rgba(0,0,0,0.03);
}

.outlet-record-box.duplicate-item {
  border-left: 4px solid var(--danger);
}

.outlet-record-box.primary-item {
  border-left: 4px solid var(--primary);
}

.record-row {
  display: flex;
  justify-content: space-between;
  font-size: 0.825rem;
  margin-bottom: 0.35rem;
}

.record-label {
  color: var(--gray-500);
  font-weight: 500;
}

.record-val {
  font-weight: 600;
  color: var(--gray-900);
  text-align: right;
  word-break: break-word;
}

.dt-badge {
  display: inline-block;
  background: #e0e7ff;
  color: #3730a3;
  padding: 2px 6px;
  border-radius: 4px;
  font-size: 0.75rem;
  font-weight: 600;
}

.dt-mismatch-badge {
  background: #fee2e2;
  color: #991b1b;
  border: 1px solid #f87171;
  font-size: 0.7rem;
  padding: 2px 5px;
  border-radius: 4px;
  font-weight: 700;
}

/* ---------------- Table View ---------------- */
.table-wrapper {
  background: linear-gradient(145deg, #1e293b 0%, #0f172a 100%);
  border-radius: var(--radius-md);
  border: 1px solid var(--border-steel);
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.4);
  overflow-x: auto;
}

.data-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.85rem;
  text-align: left;
  color: #f1f5f9;
}

.data-table th {
  background: #090d16;
  color: #f8fafc;
  font-weight: 700;
  padding: 0.75rem 1rem;
  border-bottom: 1px solid var(--border-steel);
  white-space: nowrap;
}

.data-table td {
  padding: 0.65rem 1rem;
  border-bottom: 1px solid rgba(51, 65, 85, 0.6);
  color: #cbd5e1;
}

.data-table tr:hover td {
  background: rgba(249, 115, 22, 0.09);
  color: #ffffff;
}

.data-table tr.row-duplicate-cluster {
  background: rgba(239, 68, 68, 0.12);
}

/* ---------------- Map Popups ---------------- */
.leaflet-popup-content-wrapper {
  background: #1e293b !important;
  color: #f8fafc !important;
  border-radius: var(--radius-md) !important;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.7) !important;
  padding: 0 !important;
  overflow: hidden;
  border: 1px solid #334155 !important;
}

.leaflet-popup-tip {
  background: #1e293b !important;
}

.leaflet-popup-content {
  margin: 0 !important;
  line-height: 1.4 !important;
  min-width: 290px;
  max-width: 380px;
  color: #f1f5f9 !important;
}

.popup-container {
  padding: 0.85rem;
}

.leaflet-popup .popup-header,
.map-popup .popup-header,
.custom-map-popup .popup-header {
  background: linear-gradient(135deg, #0f172a, #1e293b);
  color: #ffffff;
  padding: 0.65rem 0.85rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.popup-title {
  font-weight: 700;
  font-size: 0.85rem;
  color: #ffffff;
}

.popup-badge {
  background: #ef4444;
  color: white;
  font-size: 0.75rem;
  font-weight: 700;
  padding: 2px 7px;
  border-radius: 9999px;
}

.popup-outlets-list {
  max-height: 240px;
  overflow-y: auto;
  padding: 0.5rem 0;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.popup-outlet-item {
  background: rgba(15, 23, 42, 0.85);
  border: 1px solid var(--border-steel);
  border-radius: var(--radius-sm);
  padding: 0.5rem 0.65rem;
  font-size: 0.78rem;
  color: #f1f5f9;
}

.popup-outlet-item:first-child {
  border-left: 3px solid var(--primary);
}

.popup-outlet-item:not(:first-child) {
  border-left: 3px solid var(--danger);
}

.popup-actions {
  margin-top: 0.5rem;
  border-top: 1px solid var(--border-steel);
  padding-top: 0.5rem;
  display: flex;
  gap: 0.5rem;
}

/* ---------------- Modals ---------------- */
.modal-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(11, 17, 32, 0.85);
  backdrop-filter: blur(6px);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 2000;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.2s;
  padding: 1rem;
}

.modal-overlay.active {
  opacity: 1;
  pointer-events: auto;
}

.modal-box {
  background: linear-gradient(145deg, #1e293b 0%, #0f172a 100%);
  color: #f8fafc;
  border: 1px solid var(--border-steel);
  border-radius: var(--radius-lg);
  max-width: 600px;
  width: 100%;
  box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.7);
  overflow: hidden;
  transform: translateY(20px);
  transition: transform 0.2s;
  max-height: 90vh;
  display: flex;
  flex-direction: column;
}

.modal-overlay.active .modal-box {
  transform: translateY(0);
}

.modal-header {
  padding: 1rem 1.25rem;
  border-bottom: 1px solid var(--border-steel);
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: #090d16;
}

.modal-title {
  font-size: 1.1rem;
  font-weight: 700;
  color: #f8fafc;
}

.modal-body {
  padding: 1.25rem;
  overflow-y: auto;
  flex: 1;
  color: #e2e8f0;
}

.modal-footer {
  padding: 0.85rem 1.25rem;
  border-top: 1px solid var(--border-steel);
  display: flex;
  justify-content: flex-end;
  gap: 0.5rem;
  background: #090d16;
}

/* ==========================================================================
   Unilever Progressive Vector Logo Loading Overlay & Telemetry
   ========================================================================== */
.loading-indicator {
  position: fixed;
  inset: 0;
  background: rgba(11, 17, 32, 0.88);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  z-index: 10000;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}

.loading-indicator.active {
  opacity: 1;
  pointer-events: auto;
}

.unilever-loader-card {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 2.25rem 2.25rem 1.85rem 2.25rem;
  background: linear-gradient(165deg, rgba(30, 41, 59, 0.95) 0%, rgba(15, 23, 42, 0.98) 100%);
  border: 1px solid rgba(56, 189, 248, 0.35);
  border-radius: 16px;
  box-shadow: 
    0 24px 60px rgba(0, 0, 0, 0.75),
    0 0 45px rgba(31, 54, 199, 0.3),
    inset 0 1px 0 rgba(255, 255, 255, 0.12);
  width: 90%;
  max-width: 380px;
  text-align: center;
  transform: scale(0.94);
  transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}

.loading-indicator.active .unilever-loader-card {
  transform: scale(1);
}

.unilever-loader-aura {
  position: absolute;
  top: 18%;
  left: 50%;
  transform: translateX(-50%);
  width: 150px;
  height: 150px;
  background: radial-gradient(circle, rgba(56, 189, 248, 0.35) 0%, rgba(31, 54, 199, 0.2) 50%, transparent 75%);
  pointer-events: none;
  border-radius: 50%;
  animation: auraPulse 2.4s ease-in-out infinite alternate;
}

@keyframes auraPulse {
  0% { transform: translateX(-50%) scale(0.85); opacity: 0.5; }
  100% { transform: translateX(-50%) scale(1.25); opacity: 1; }
}

.unilever-logo-vector-box {
  position: relative;
  width: 130px;
  height: 130px;
  margin-bottom: 1.4rem;
  display: flex;
  align-items: center;
  justify-content: center;
  filter: drop-shadow(0 6px 16px rgba(0, 0, 0, 0.5));
}

.unilever-logo-layer {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  mask-image: url('../Assets/logo.svg');
  -webkit-mask-image: url('../Assets/logo.svg');
  mask-size: contain;
  -webkit-mask-size: contain;
  mask-repeat: no-repeat;
  -webkit-mask-repeat: no-repeat;
  mask-position: center center;
  -webkit-mask-position: center center;
}

/* Layer 1: Blueprint Silhouette Outline */
.unilever-logo-base {
  background: rgba(255, 255, 255, 0.15);
  border-radius: 4px;
}

/* Layer 2: Progressive Gradient Liquid Fill */
.unilever-logo-fill {
  background: linear-gradient(0deg, #1f36c7 0%, #2563eb 35%, #38bdf8 75%, #00f2ff 100%);
  clip-path: inset(calc(100% - var(--fill-percent, 0%)) 0 0 0);
  -webkit-clip-path: inset(calc(100% - var(--fill-percent, 0%)) 0 0 0);
  transition: clip-path 0.2s cubic-bezier(0.4, 0, 0.2, 1);
  filter: drop-shadow(0 0 10px rgba(56, 189, 248, 0.65));
}

/* Layer 3: Luminous Wave Crest at the Fill Line */
.unilever-logo-wave {
  background: linear-gradient(90deg, transparent 0%, rgba(255, 255, 255, 0.95) 30%, #38bdf8 50%, rgba(255, 255, 255, 0.95) 70%, transparent 100%);
  clip-path: inset(calc(100% - var(--fill-percent, 0%) - 2%) 0 calc(var(--fill-percent, 0%) - 2%) 0);
  -webkit-clip-path: inset(calc(100% - var(--fill-percent, 0%) - 2%) 0 calc(var(--fill-percent, 0%) - 2%) 0);
  transition: clip-path 0.2s cubic-bezier(0.4, 0, 0.2, 1);
  filter: drop-shadow(0 0 10px #ffffff);
  opacity: 0.95;
  animation: waveShimmer 1.8s linear infinite;
}

@keyframes waveShimmer {
  0% { transform: scaleX(0.96); opacity: 0.75; }
  50% { transform: scaleX(1.04); opacity: 1; }
  100% { transform: scaleX(0.96); opacity: 0.75; }
}

.unilever-loader-details {
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
}

.unilever-loader-meta {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.04em;
}

.unilever-loader-title {
  color: #38bdf8;
  text-transform: uppercase;
}

.unilever-loader-percent {
  color: #f8fafc;
  font-family: var(--font-mono);
  font-size: 0.95rem;
  font-weight: 800;
}

.unilever-progress-track {
  width: 100%;
  height: 6px;
  background: rgba(15, 23, 42, 0.85);
  border: 1px solid #334155;
  border-radius: 9999px;
  overflow: hidden;
  box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.5);
}

.unilever-progress-bar {
  height: 100%;
  width: 0%;
  background: linear-gradient(90deg, #1f36c7 0%, #2563eb 50%, #38bdf8 100%);
  border-radius: 9999px;
  transition: width 0.2s cubic-bezier(0.4, 0, 0.2, 1);
  box-shadow: 0 0 10px rgba(56, 189, 248, 0.85);
}

.unilever-loading-status {
  font-size: 0.82rem;
  font-weight: 600;
  color: #cbd5e1;
  letter-spacing: 0.01em;
  min-height: 1.25rem;
}

/* ---------------- Pagination ---------------- */
.pagination-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.75rem 1rem;
  background: white;
  border-radius: var(--radius-md);
  border: 1px solid var(--gray-200);
  box-shadow: var(--shadow-sm);
  font-size: 0.85rem;
  flex-wrap: wrap;
  gap: 0.5rem;
}

.page-controls {
  display: flex;
  align-items: center;
  gap: 0.4rem;
}

/* ---------------- Custom Leaflet Marker Badges ---------------- */
.custom-map-marker {
  display: flex;
  align-items: center;
  justify-content: center;
  background: #dc2626;
  color: white;
  font-weight: 700;
  font-size: 11px;
  border-radius: 50%;
  border: 2px solid white;
  box-shadow: 0 2px 6px rgba(0,0,0,0.4);
  cursor: pointer;
  transition: transform 0.15s ease;
}

.custom-map-marker:hover {
  transform: scale(1.18);
}

.custom-map-marker.cluster-sm { width: 26px; height: 26px; background: #ea580c; }
.custom-map-marker.cluster-md { width: 32px; height: 32px; background: #dc2626; font-size: 12px; }
.custom-map-marker.cluster-lg { width: 38px; height: 38px; background: #991b1b; font-size: 13px; border-width: 3px; }

/* ---------------- Utilities ---------------- */
.text-muted { color: var(--gray-500); }
.text-danger { color: var(--danger); }
.text-success { color: var(--success); }
.font-mono { font-family: ui-monospace, monospace; }
.hidden { display: none !important; }

/* ==========================================================================
   Performance Tracking Dashboard Styles
   ========================================================================== */
.filter-pill-btn {
  background: var(--gray-100);
  border: 1px solid var(--gray-300);
  color: var(--gray-700);
  padding: 0.4rem 0.85rem;
  border-radius: 9999px;
  font-size: 0.8rem;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s ease;
}

.filter-pill-btn:hover {
  background: var(--gray-200);
  color: var(--gray-900);
}

.filter-pill-btn.active {
  background: var(--primary);
  color: white;
  border-color: var(--primary);
  box-shadow: 0 2px 8px rgba(31, 54, 199, 0.25);
}

.kpi-pill {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  font-size: 0.72rem;
  font-weight: 700;
  padding: 3px 8px;
  border-radius: 9999px;
  width: fit-content;
}

.kpi-pill-green {
  background: #dcfce7;
  color: #15803d;
  border: 1px solid #bbf7d0;
}

.kpi-pill-red {
  background: #fee2e2;
  color: #b91c1c;
  border: 1px solid #fecaca;
}

.kpi-pill-amber {
  background: #fef3c7;
  color: #b45309;
  border: 1px solid #fde68a;
}

.kpi-pill-blue {
  background: #eff6ff;
  color: #1d4ed8;
  border: 1px solid #bfdbfe;
}

.kpi-pill-neutral {
  background: #f1f5f9;
  color: #475569;
  border: 1px solid #cbd5e1;
}

.perf-charts-grid {
  display: grid;
  grid-template-columns: 1.6fr 1fr;
  gap: 1.25rem;
}

@media (max-width: 1024px) {
  .perf-charts-grid {
    grid-template-columns: 1fr;
  }
}

.diff-chip {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.65rem 1rem;
  border-radius: var(--radius-md);
}

.diff-chip-green {
  background: rgba(34, 197, 94, 0.15);
  border: 1px solid rgba(34, 197, 94, 0.4);
  color: #4ade80;
}

.diff-chip-red {
  background: rgba(239, 68, 68, 0.15);
  border: 1px solid rgba(239, 68, 68, 0.4);
  color: #f87171;
}

.diff-chip-amber {
  background: rgba(245, 158, 11, 0.15);
  border: 1px solid rgba(245, 158, 11, 0.4);
  color: #fbbf24;
}

.diff-chip-blue {
  background: rgba(59, 130, 246, 0.15);
  border: 1px solid rgba(59, 130, 246, 0.4);
  color: #60a5fa;
}

/* Toast Notifications */
.app-toast {
  position: fixed;
  bottom: 24px;
  right: 24px;
  background: #0f172a;
  color: white;
  padding: 0.85rem 1.25rem;
  border-radius: var(--radius-md);
  box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.5);
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.85rem;
  font-weight: 500;
  z-index: 10000;
  opacity: 0;
  transform: translateY(20px);
  pointer-events: none;
  transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
  border: 1px solid #334155;
}

.app-toast.show {
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
}

/* ==========================================================================
   Sales Module Specialized Styles
   ========================================================================== */

/* Multi-Select Cascading Dropdowns */
.sales-filters-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
  gap: 0.75rem;
  align-items: end;
}

.multi-select-container {
  position: relative;
  width: 100%;
}

.multi-select-label {
  display: block;
  font-size: 0.75rem;
  font-weight: 700;
  color: #cbd5e1;
  margin-bottom: 0.25rem;
}

.multi-select-btn {
  width: 100%;
  padding: 0.45rem 0.65rem;
  background: #1e293b;
  border: 1px solid #334155;
  border-radius: var(--radius-sm);
  font-size: 0.8rem;
  font-weight: 600;
  color: #f8fafc;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.4rem;
  transition: all 0.2s ease;
  text-align: left;
  min-height: 36px;
}

.multi-select-btn:hover {
  border-color: #38bdf8;
  background: #24344d;
}

.multi-select-btn.active {
  border-color: #38bdf8;
  box-shadow: 0 0 0 3px rgba(56, 189, 248, 0.25);
}

.multi-select-btn-text {
  flex: 1;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.multi-select-badge {
  background: rgba(56, 189, 248, 0.2);
  color: #38bdf8;
  font-size: 0.68rem;
  font-weight: 800;
  padding: 1px 6px;
  border-radius: 9999px;
  white-space: nowrap;
}

.multi-select-menu {
  position: absolute;
  top: calc(100% + 4px);
  left: 0;
  width: 100%;
  min-width: 220px;
  max-width: 320px;
  background: #1e293b;
  border: 1px solid #334155;
  border-radius: var(--radius-md);
  box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.5), 0 8px 10px -6px rgba(0, 0, 0, 0.4);
  z-index: 1200;
  display: none;
  flex-direction: column;
  overflow: hidden;
}

.multi-select-menu.open {
  display: flex;
}

.multi-select-header {
  padding: 0.45rem 0.6rem;
  background: #0f172a;
  border-bottom: 1px solid #334155;
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
}

.multi-select-search {
  width: 100%;
  padding: 0.35rem 0.55rem;
  font-size: 0.78rem;
  background: #1e293b;
  color: #f8fafc;
  border: 1px solid #334155;
  border-radius: var(--radius-sm);
  outline: none;
}

.multi-select-search:focus {
  border-color: #38bdf8;
}

.multi-select-actions {
  display: flex;
  justify-content: space-between;
  font-size: 0.72rem;
  font-weight: 700;
}

.multi-select-action-link {
  color: #38bdf8;
  cursor: pointer;
  text-decoration: none;
}

.multi-select-action-link:hover {
  text-decoration: underline;
}

.multi-select-list {
  max-height: 200px;
  overflow-y: auto;
  padding: 0.25rem 0;
}

.multi-select-item {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.35rem 0.65rem;
  font-size: 0.78rem;
  color: #f1f5f9;
  cursor: pointer;
  transition: background 0.15s ease;
  user-select: none;
}

.multi-select-item:hover {
  background: #334155;
}

.multi-select-item input[type="checkbox"] {
  cursor: pointer;
  accent-color: #38bdf8;
  width: 14px;
  height: 14px;
}

.multi-select-item-text {
  flex: 1;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.multi-select-item-count {
  font-size: 0.7rem;
  color: #94a3b8;
}

/* Pulsating Animated Sales Map Markers */
.sales-marker-wrapper {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
}

.sales-marker-pin {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  font-weight: 800;
  color: #ffffff;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.4);
  border: 2px solid #ffffff;
  position: relative;
  z-index: 2;
  cursor: pointer;
  transition: transform 0.2s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

.sales-marker-pin:hover {
  transform: scale(1.25);
}

.sales-marker-green {
  background: linear-gradient(135deg, #22c55e 0%, #15803d 100%);
}

.sales-marker-red {
  background: linear-gradient(135deg, #ef4444 0%, #b91c1c 100%);
}

.sales-marker-amber {
  background: linear-gradient(135deg, #f59e0b 0%, #b45309 100%);
}

.sales-marker-blue {
  background: linear-gradient(135deg, #3b82f6 0%, #1d4ed8 100%);
}

/* Pulsating Blinking Circles for High & Low Sales */
.sales-pulse-ring {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 34px;
  height: 34px;
  margin-top: -17px;
  margin-left: -17px;
  border-radius: 50%;
  pointer-events: none;
  z-index: 1;
}

.pulse-green {
  background: rgba(34, 197, 94, 0.45);
  animation: salesPulseGreen 1.5s infinite cubic-bezier(0.25, 0, 0, 1);
}

.pulse-red {
  background: rgba(239, 68, 68, 0.5);
  animation: salesPulseRed 1.3s infinite cubic-bezier(0.25, 0, 0, 1);
}

@keyframes salesPulseGreen {
  0% {
    transform: scale(0.85);
    opacity: 0.95;
    box-shadow: 0 0 0 0 rgba(34, 197, 94, 0.85);
  }
  70% {
    transform: scale(2.3);
    opacity: 0;
    box-shadow: 0 0 0 16px rgba(34, 197, 94, 0);
  }
  100% {
    transform: scale(2.5);
    opacity: 0;
    box-shadow: 0 0 0 0 rgba(34, 197, 94, 0);
  }
}

@keyframes salesPulseRed {
  0% {
    transform: scale(0.85);
    opacity: 0.95;
    box-shadow: 0 0 0 0 rgba(239, 68, 68, 0.9);
  }
  70% {
    transform: scale(2.4);
    opacity: 0;
    box-shadow: 0 0 0 18px rgba(239, 68, 68, 0);
  }
  100% {
    transform: scale(2.6);
    opacity: 0;
    box-shadow: 0 0 0 0 rgba(239, 68, 68, 0);
  }
}

/* Sales Map View Toggle & Legend */
.sales-map-toolbar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.75rem;
  margin-bottom: 0.75rem;
}

.sales-view-toggle {
  display: inline-flex;
  background: #f1f5f9;
  padding: 3px;
  border-radius: var(--radius-sm);
  border: 1px solid var(--gray-300);
}

.sales-view-btn {
  padding: 0.35rem 0.85rem;
  font-size: 0.8rem;
  font-weight: 700;
  color: #475569;
  border: none;
  background: transparent;
  border-radius: 4px;
  cursor: pointer;
  transition: all 0.2s ease;
}

.sales-view-btn.active {
  background: #1f36c7;
  color: #ffffff;
  box-shadow: 0 2px 4px rgba(31, 54, 199, 0.3);
}

.sales-map-legend {
  display: inline-flex;
  align-items: center;
  gap: 1rem;
  background: #ffffff;
  padding: 4px 12px;
  border-radius: var(--radius-sm);
  border: 1px solid var(--gray-200);
  font-size: 0.75rem;
  font-weight: 600;
}

.legend-item {
  display: flex;
  align-items: center;
  gap: 0.35rem;
}

.legend-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  display: inline-block;
}

.legend-dot-green {
  background: #22c55e;
  box-shadow: 0 0 0 3px rgba(34, 197, 94, 0.3);
}

.legend-dot-red {
  background: #ef4444;
  box-shadow: 0 0 0 3px rgba(239, 68, 68, 0.3);
}

.legend-dot-amber {
  background: #f59e0b;
}

/* Sales Review Tabs & Cards */
.sales-reviews-container {
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
}

.sales-bg-card {
  padding: 1rem;
  border-radius: var(--radius-md);
  background: linear-gradient(145deg, #1e293b 0%, #0f172a 100%);
  border: 1px solid #334155;
  box-shadow: var(--shadow-sm);
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
  position: relative;
  overflow: hidden;
}

.sales-bg-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 4px;
}

.sales-bg-card-blue::before { background: #38bdf8; }
.sales-bg-card-green::before { background: #22c55e; }
.sales-bg-card-purple::before { background: #a855f7; }
.sales-bg-card-amber::before { background: #f59e0b; }
.sales-bg-card-rose::before { background: #f43f5e; }

/* Custom Leaflet Popup for Sales Module */
.leaflet-popup-content-wrapper {
  border-radius: var(--radius-md) !important;
  box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.5), 0 8px 10px -6px rgba(0, 0, 0, 0.4) !important;
  border: 1px solid #334155;
  background: #1e293b !important;
  color: #f8fafc !important;
}

.leaflet-popup-content {
  margin: 12px 14px !important;
  line-height: 1.4 !important;
}

.sales-popup-box {
  min-width: 320px;
  max-width: 380px;
  font-family: var(--font-sans);
  color: #f8fafc;
}

.sales-popup-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.72rem;
  margin-top: 6px;
  background: #0f172a;
  border-radius: 4px;
  overflow: hidden;
  border: 1px solid #334155;
}

.sales-popup-table th {
  background: #1e293b;
  color: #cbd5e1;
  font-weight: 700;
  padding: 4px 6px;
  text-align: left;
  border-bottom: 1px solid #334155;
}

.sales-popup-table td {
  padding: 4px 6px;
  border-bottom: 1px solid #1e293b;
  color: #f1f5f9;
}

.sales-popup-table tr:last-child td {
  border-bottom: none;
}

.sales-popup-table tr:nth-child(even) {
  background: rgba(255, 255, 255, 0.03);
}

/* Upload Restricted Dropzone Styling */
.dropzone-restricted {
  background: rgba(15, 23, 42, 0.7) !important;
  border: 1px dashed rgba(245, 158, 11, 0.4) !important;
  cursor: not-allowed !important;
  position: relative;
  transition: all 0.3s ease;
}

.dropzone-restricted:hover {
  border-color: rgba(245, 158, 11, 0.7) !important;
  background: rgba(245, 158, 11, 0.05) !important;
}

.dropzone-restricted .dropzone-icon {
  filter: drop-shadow(0 0 8px rgba(245, 158, 11, 0.4));
}

/* ==========================================================================
   CNIC & MOBILE NUMBER IDENTITY INTEGRITY AUDIT STYLING
   ========================================================================== */
.identity-stats-section {
  width: 100%;
}

.identity-section-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 0.75rem;
  padding: 0 4px;
}

.identity-cards-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0.85rem;
}

.identity-cards-grid-7 {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 0.75rem;
  margin-bottom: 1.25rem;
}

@media (max-width: 1400px) {
  .identity-cards-grid-7 {
    grid-template-columns: repeat(4, 1fr);
  }
}

@media (max-width: 1024px) {
  .identity-cards-grid {
    grid-template-columns: repeat(2, 1fr);
  }
  .identity-cards-grid-7 {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 640px) {
  .identity-cards-grid {
    grid-template-columns: 1fr;
  }
  .identity-cards-grid-7 {
    grid-template-columns: 1fr;
  }
}

.identity-stat-card {
  position: relative;
  transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1);
  overflow: hidden;
}

.card-interactive {
  cursor: pointer;
}

.card-interactive:hover {
  transform: translateY(-3px);
  border-color: var(--primary);
  box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.5), 0 0 20px rgba(56, 189, 248, 0.2);
}

.card-dup-cnic:hover {
  border-color: #c084fc;
  box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.5), 0 0 25px rgba(168, 85, 247, 0.35);
}

.card-dummy-cnic:hover {
  border-color: #f87171;
  box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.5), 0 0 25px rgba(239, 68, 68, 0.35);
}

.card-blank-cnic:hover {
  border-color: #cbd5e1;
  box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.5), 0 0 25px rgba(148, 163, 184, 0.35);
}

.card-dup-mobile:hover {
  border-color: #60a5fa;
  box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.5), 0 0 25px rgba(59, 130, 246, 0.35);
}

.card-dummy-mobile:hover {
  border-color: #fbbf24;
  box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.5), 0 0 25px rgba(245, 158, 11, 0.35);
}

.card-blank-mobile:hover {
  border-color: #cbd5e1;
  box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.5), 0 0 25px rgba(148, 163, 184, 0.35);
}

.card-action-cue {
  position: absolute;
  top: 10px;
  right: 12px;
  font-size: 0.72rem;
  font-weight: 700;
  color: #38bdf8;
  opacity: 0.75;
  transition: all 0.2s ease;
}

.card-interactive:hover .card-action-cue {
  opacity: 1;
  transform: translateX(3px);
  color: #ffffff;
}

.stat-sub-count {
  font-size: 0.8rem;
  color: #94a3b8;
  font-weight: 600;
}

.badge-pill-cyan {
  background: rgba(56, 189, 248, 0.15);
  border: 1px solid rgba(56, 189, 248, 0.4);
  color: #38bdf8;
  font-size: 0.7rem;
  font-weight: 700;
  padding: 2px 8px;
  border-radius: 9999px;
  letter-spacing: 0.03em;
  text-transform: uppercase;
}

.badge-tab-purple {
  background: #9333ea !important;
  color: #ffffff !important;
}

/* Badge and Pill Design Tokens for Tables */
.cnic-code-pill {
  font-family: var(--font-mono);
  background: rgba(168, 85, 247, 0.18);
  border: 1px solid rgba(168, 85, 247, 0.5);
  color: #e9d5ff;
  font-weight: 700;
  padding: 3px 8px;
  border-radius: 6px;
  font-size: 0.82rem;
  display: inline-block;
  letter-spacing: 0.04em;
}

.mobile-code-pill {
  font-family: var(--font-mono);
  background: rgba(59, 130, 246, 0.18);
  border: 1px solid rgba(59, 130, 246, 0.5);
  color: #bfdbfe;
  font-weight: 700;
  padding: 3px 8px;
  border-radius: 6px;
  font-size: 0.82rem;
  display: inline-block;
  letter-spacing: 0.04em;
}

.district-badge {
  font-weight: 700;
  color: #38bdf8;
  font-size: 0.82rem;
}

.operator-badge {
  background: rgba(14, 165, 233, 0.15);
  color: #38bdf8;
  border: 1px solid rgba(14, 165, 233, 0.35);
  font-size: 0.75rem;
  font-weight: 700;
  padding: 2px 7px;
  border-radius: 4px;
}

.rejection-reason-pill {
  background: rgba(239, 68, 68, 0.15);
  border: 1px solid rgba(239, 68, 68, 0.4);
  color: #fca5a5;
  font-size: 0.78rem;
  font-weight: 600;
  padding: 3px 8px;
  border-radius: 6px;
  display: inline-block;
}

.blank-value-pill {
  font-family: var(--font-mono);
  background: rgba(148, 163, 184, 0.15);
  border: 1px dashed rgba(148, 163, 184, 0.5);
  color: #cbd5e1;
  font-weight: 700;
  padding: 3px 8px;
  border-radius: 6px;
  font-size: 0.82rem;
  display: inline-block;
}

.dummy-value-pill {
  font-family: var(--font-mono);
  background: rgba(245, 158, 11, 0.18);
  border: 1px dashed rgba(245, 158, 11, 0.5);
  color: #fde68a;
  font-weight: 700;
  padding: 3px 8px;
  border-radius: 6px;
  font-size: 0.82rem;
  display: inline-block;
}

.prefix-badge {
  font-family: var(--font-mono);
  background: #334155;
  color: #f1f5f9;
  font-weight: 700;
  padding: 2px 6px;
  border-radius: 4px;
  font-size: 0.78rem;
}

.count-badge-purple {
  background: rgba(168, 85, 247, 0.25);
  color: #d8b4fe;
  font-weight: 800;
  padding: 3px 8px;
  border-radius: 6px;
  font-size: 0.8rem;
  border: 1px solid rgba(168, 85, 247, 0.4);
}

.count-badge-blue {
  background: rgba(59, 130, 246, 0.25);
  color: #93c5fd;
  font-weight: 800;
  padding: 3px 8px;
  border-radius: 6px;
  font-size: 0.8rem;
  border: 1px solid rgba(59, 130, 246, 0.4);
}

.badge-role-ref {
  background: rgba(34, 197, 94, 0.18);
  color: #86efac;
  border: 1px solid rgba(34, 197, 94, 0.4);
  font-size: 0.72rem;
  font-weight: 700;
  padding: 2px 7px;
  border-radius: 4px;
}

.badge-role-dup {
  background: rgba(239, 68, 68, 0.18);
  color: #fca5a5;
  border: 1px solid rgba(239, 68, 68, 0.4);
  font-size: 0.72rem;
  font-weight: 700;
  padding: 2px 7px;
  border-radius: 4px;
}

.region-badge {
  background: rgba(30, 41, 59, 0.8);
  border: 1px solid #475569;
  color: #e2e8f0;
  font-size: 0.75rem;
  font-weight: 600;
  padding: 2px 7px;
  border-radius: 4px;
}

/* Identity Tab & Sub-navigation */
.identity-tab-container {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.identity-subnav-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: rgba(15, 23, 42, 0.75);
  border: 1px solid #334155;
  border-radius: 12px;
  padding: 0.5rem 0.75rem;
  flex-wrap: wrap;
  gap: 0.75rem;
}

.identity-subtabs {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  flex-wrap: wrap;
}

.subtab-btn {
  background: transparent;
  border: 1px solid transparent;
  color: #94a3b8;
  font-size: 0.82rem;
  font-weight: 700;
  padding: 0.45rem 0.95rem;
  border-radius: 8px;
  cursor: pointer;
  transition: all 0.2s ease;
}

.subtab-btn:hover {
  color: #ffffff;
  background: rgba(255, 255, 255, 0.05);
}

.subtab-btn.active {
  background: linear-gradient(135deg, #1e3a8a, #1f36c7);
  color: #ffffff;
  border-color: rgba(56, 189, 248, 0.5);
  box-shadow: 0 2px 8px rgba(31, 54, 199, 0.4);
}

.identity-export-actions {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.identity-table-wrapper {
  background: rgba(30, 41, 59, 0.7);
  border-radius: 12px;
  border: 1px solid #334155;
  padding: 1rem;
  overflow-x: auto;
}

/* Modal Wide Layout for Record Drilling */
.modal-wide-box {
  max-width: 1100px !important;
  width: 95vw !important;
}

.modal-toolbar-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  flex-wrap: wrap;
  margin-bottom: 0.75rem;
}

.empty-state-box {
  text-align: center;
  padding: 3rem 1.5rem;
  background: rgba(15, 23, 42, 0.6);
  border-radius: 10px;
  border: 1px dashed #334155;
  color: #86efac;
  font-weight: 600;
  font-size: 0.9rem;
}

/* Priority Status Badges */
.badge-priority-critical {
  background: rgba(239, 68, 68, 0.2);
  border: 1px solid rgba(239, 68, 68, 0.6);
  color: #fca5a5;
  font-weight: 800;
  font-size: 0.72rem;
  padding: 3px 8px;
  border-radius: 9999px;
  display: inline-flex;
  align-items: center;
  gap: 4px;
}

.badge-priority-moderate {
  background: rgba(245, 158, 11, 0.2);
  border: 1px solid rgba(245, 158, 11, 0.6);
  color: #fde68a;
  font-weight: 800;
  font-size: 0.72rem;
  padding: 3px 8px;
  border-radius: 9999px;
  display: inline-flex;
  align-items: center;
  gap: 4px;
}

.badge-priority-low {
  background: rgba(56, 189, 248, 0.2);
  border: 1px solid rgba(56, 189, 248, 0.5);
  color: #bae6fd;
  font-weight: 700;
  font-size: 0.72rem;
  padding: 3px 8px;
  border-radius: 9999px;
  display: inline-flex;
  align-items: center;
  gap: 4px;
}

.badge-priority-clean {
  background: rgba(34, 197, 94, 0.2);
  border: 1px solid rgba(34, 197, 94, 0.5);
  color: #86efac;
  font-weight: 700;
  font-size: 0.72rem;
  padding: 3px 8px;
  border-radius: 9999px;
  display: inline-flex;
  align-items: center;
  gap: 4px;
}

/* Export Center Grid & Cards */
.export-center-card {
  background: rgba(30, 41, 59, 0.75);
  border: 1px solid #334155;
  border-radius: 14px;
  padding: 1.25rem;
  margin-bottom: 1.25rem;
  box-shadow: var(--shadow-md);
}

.export-center-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  gap: 0.85rem;
  margin-top: 0.85rem;
}

.export-action-item {
  background: rgba(15, 23, 42, 0.6);
  border: 1px solid #334155;
  border-radius: 10px;
  padding: 0.85rem 1rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  transition: all 0.2s ease;
}

.export-action-item:hover {
  border-color: #38bdf8;
  background: rgba(30, 41, 59, 0.8);
  transform: translateY(-2px);
}

.export-action-info {
  display: flex;
  align-items: center;
  gap: 0.65rem;
}

.export-action-icon {
  font-size: 1.4rem;
  width: 38px;
  height: 38px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.05);
}

.export-action-title {
  font-weight: 700;
  font-size: 0.85rem;
  color: #f8fafc;
}

.export-action-sub {
  font-size: 0.72rem;
  color: #94a3b8;
}

.export-action-btns {
  display: flex;
  align-items: center;
  gap: 6px;
}

/* ==========================================================================
   Modern SaaS Admin Portal Design System
   Features:
   - Dark Navy Left Sidebar (#001435)
   - Clean Light Background Content Area (#f4f6fa)
   - Card-based KPI Grid UI with crisp white surfaces
   - Minimalist Flat UI with Badges & Status Icons
   - Responsive Admin Portal Design
   ========================================================================== */

body.saas-theme {
  zoom: 0.9;
  background-color: #f4f6fa;
  background-image: none;
  color: #1e293b;
  font-family: var(--font-sans);
  margin: 0;
  padding: 0;
  min-height: 100%;
  min-height: calc(100vh / 0.9);
  width: 100%;
}

body.saas-theme .unilever-ambient-bg {
  display: none !important;
}

/* Master Layout */
.saas-layout {
  display: flex;
  min-height: 100%;
  min-height: calc(100vh / 0.9);
  width: 100%;
  position: relative;
}

/* Dark Navy Sidebar - Fixed Permanently on Left */
.saas-sidebar {
  width: 240px;
  min-width: 240px;
  max-width: 240px;
  background: #001435;
  color: #f8fafc;
  display: flex;
  flex-direction: column;
  position: fixed;
  left: 0;
  top: 0;
  bottom: 0;
  height: 100%;
  height: calc(100vh / 0.9);
  min-height: 100%;
  min-height: calc(100vh / 0.9);
  z-index: 1000;
  border-right: 1px solid rgba(255, 255, 255, 0.08);
  box-shadow: 2px 0 12px rgba(0, 0, 0, 0.12);
  overflow-y: auto;
}

.saas-sidebar-brand {
  padding: 1.1rem 1.1rem;
  display: flex;
  align-items: center;
  gap: 0.7rem;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  flex-shrink: 0;
}

.saas-brand-logo {
  width: 36px;
  height: 36px;
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.15);
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 4px;
  flex-shrink: 0;
}

.saas-brand-logo img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.saas-brand-meta {
  display: flex;
  flex-direction: column;
}

.saas-brand-title {
  font-size: 1rem;
  font-weight: 800;
  color: #ffffff;
  letter-spacing: -0.2px;
  display: flex;
  align-items: center;
  gap: 4px;
}

.saas-brand-badge {
  background: #0284c7;
  color: #ffffff;
  font-size: 0.62rem;
  font-weight: 800;
  padding: 1px 5px;
  border-radius: 4px;
}

.saas-brand-subtitle {
  font-size: 0.65rem;
  font-weight: 700;
  letter-spacing: 0.6px;
  color: #94a3b8;
  margin-top: 1px;
}

.saas-sidebar-nav {
  flex: 1;
  padding: 1rem 0.75rem;
  overflow-y: auto;
}

.saas-nav-section-label {
  font-size: 0.65rem;
  font-weight: 700;
  letter-spacing: 0.8px;
  color: #64748b;
  padding: 0 0.5rem;
  margin-bottom: 0.5rem;
}

.saas-nav-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
}

.saas-nav-item a {
  display: flex;
  align-items: center;
  gap: 0.65rem;
  padding: 0.6rem 0.75rem;
  border-radius: 8px;
  color: #cbd5e1;
  text-decoration: none;
  font-size: 0.82rem;
  font-weight: 600;
  transition: all 0.18s ease;
}

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

.saas-nav-item.active a {
  background: #0284c7;
  color: #ffffff;
  font-weight: 700;
  box-shadow: 0 2px 8px rgba(2, 132, 199, 0.35);
}

.saas-nav-icon {
  width: 17px;
  height: 17px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.saas-nav-icon svg {
  width: 17px;
  height: 17px;
}

.saas-nav-text {
  white-space: nowrap;
}

.saas-sidebar-status {
  margin: auto 0.75rem 0.85rem;
  padding: 0.75rem;
  background: rgba(15, 23, 42, 0.75);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 10px;
  flex-shrink: 0;
}

.saas-status-badge {
  display: flex;
  align-items: center;
  gap: 5px;
  font-size: 0.68rem;
  font-weight: 700;
  color: #94a3b8;
  margin-bottom: 3px;
}

.saas-dot-green {
  width: 7px;
  height: 7px;
  background: #10b981;
  border-radius: 50%;
  display: inline-block;
  box-shadow: 0 0 6px #10b981;
}

.saas-status-metric {
  font-size: 0.85rem;
  font-weight: 800;
  color: #ffffff;
}

.saas-status-note {
  font-size: 0.66rem;
  color: #64748b;
  margin-top: 1px;
}

/* Main Content Area - Aligned perfectly with Sidebar */
.saas-main-wrapper {
  margin-left: 240px;
  width: calc(100% - 240px);
  min-width: 0;
  min-height: 100vh;
  background: #f4f6fa;
  display: flex;
  flex-direction: column;
}

/* Crisp White Top Navigation Bar (Single Sleek Bar, No Overflow) */
.saas-topbar {
  height: 52px;
  min-height: 52px;
  background: #ffffff;
  border-bottom: 1px solid #e2e8f0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 1.15rem;
  position: sticky;
  top: 0;
  z-index: 900;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.03);
  box-sizing: border-box;
}

.saas-topbar-left {
  display: flex;
  align-items: center;
  gap: 0.65rem;
  min-width: 0;
  flex-shrink: 0;
}

.saas-hamburger-btn {
  display: none;
  background: none;
  border: none;
  cursor: pointer;
  padding: 4px;
  flex-direction: column;
  gap: 4px;
}

.saas-hamburger-btn span {
  width: 18px;
  height: 2px;
  background: #475569;
  border-radius: 2px;
}

.saas-page-title {
  font-size: 1rem;
  font-weight: 800;
  color: #0f172a;
  letter-spacing: -0.2px;
  margin: 0;
  white-space: nowrap;
}

.saas-page-breadcrumbs {
  display: none !important;
}

.saas-pill-badge {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 3px 8px;
  background: #f1f5f9;
  border: 1px solid #e2e8f0;
  border-radius: 20px;
  font-size: 0.7rem;
  font-weight: 700;
  color: #475569;
  white-space: nowrap;
}

.saas-pill-cloud {
  background: #f0fdf4;
  border-color: #bbf7d0;
  color: #166534;
}

.saas-topbar-right {
  display: flex;
  align-items: center;
  gap: 0.38rem;
  flex-shrink: 0;
}

.saas-topbar-right .btn {
  padding: 0.35rem 0.6rem;
  font-size: 0.74rem;
  font-weight: 700;
  border-radius: 6px;
  box-shadow: none;
  white-space: nowrap;
  display: inline-flex;
  align-items: center;
  gap: 4px;
}

.saas-user-pill {
  padding: 0.32rem 0.55rem;
  background: #f8fafc;
  border: 1px solid #e2e8f0;
  border-radius: 20px;
  font-size: 0.74rem;
  font-weight: 600;
  color: #1e293b;
  display: inline-flex;
  align-items: center;
  white-space: nowrap;
  max-width: 155px;
}

.saas-user-pill #headerUserEmail {
  max-width: 115px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  display: inline-block;
}

.btn-logout-modern {
  padding: 0.35rem 0.6rem;
  font-size: 0.74rem;
  border-radius: 6px;
  display: inline-flex;
  align-items: center;
  gap: 4px;
}

/* Content Area - Balanced Padding and Clean Symmetrical Grid */
.saas-content-area {
  padding: 0.85rem 1.25rem 2rem;
  flex: 1;
  min-width: 0;
}

/* Card-Based Surfaces */
body.saas-theme .card {
  background: #ffffff;
  border: 1px solid #e2e8f0;
  border-radius: 12px;
  padding: 0.95rem;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04);
  color: #1e293b;
  box-sizing: border-box;
}

body.saas-theme .card h2,
body.saas-theme .card h3 {
  color: #1e293b !important;
}

body.saas-theme .card p {
  color: #64748b !important;
}

/* Top Section: Upload Box & Stats Grid */
body.saas-theme .stats-and-upload-grid {
  display: grid;
  grid-template-columns: 330px 1fr;
  gap: 0.75rem;
  margin-bottom: 0.65rem;
  align-items: stretch;
}

/* Modern Dropzone */
body.saas-theme .dropzone {
  background: #f8fafc;
  border: 2px dashed #cbd5e1;
  border-radius: 10px;
  padding: 0.85rem 0.65rem;
  text-align: center;
  transition: all 0.2s ease;
  cursor: pointer;
}

body.saas-theme .dropzone:hover {
  background: #f0f9ff;
  border-color: #0284c7;
}

body.saas-theme .dropzone-icon {
  font-size: 1.65rem;
  margin-bottom: 0.2rem;
}

body.saas-theme .dropzone-title {
  color: #1e293b;
  font-weight: 700;
  font-size: 0.82rem;
}

body.saas-theme .dropzone-subtitle {
  color: #64748b;
  font-size: 0.66rem;
  margin-top: 2px;
  line-height: 1.3;
}

/* Stats Summary KPI Cards Grid (3 Columns, Spacious, NO Truncation!) */
body.saas-theme .stats-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0.65rem;
}

body.saas-theme .stat-box {
  background: #ffffff;
  border: 1px solid #e2e8f0;
  border-radius: 10px;
  padding: 0.65rem 0.85rem;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  position: relative;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
  min-height: 78px;
  box-sizing: border-box;
}

body.saas-theme .stat-box:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.06);
}

body.saas-theme .stat-icon-wrapper {
  width: 34px;
  height: 34px;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.1rem;
  flex-shrink: 0;
  position: absolute;
  top: 0.75rem;
  right: 0.75rem;
}

body.saas-theme .stat-icon-blue {
  background: #eff6ff;
  color: #2563eb;
  border: 1px solid #dbeafe;
}

body.saas-theme .stat-icon-green {
  background: #f0fdf4;
  color: #16a34a;
  border: 1px solid #dcfce7;
}

body.saas-theme .stat-icon-red {
  background: #fef2f2;
  color: #dc2626;
  border: 1px solid #fee2e2;
}

body.saas-theme .stat-icon-amber {
  background: #fffbeb;
  color: #d97706;
  border: 1px solid #fef3c7;
}

body.saas-theme .stat-icon-purple {
  background: #faf5ff;
  color: #9333ea;
  border: 1px solid #f3e8ff;
}

body.saas-theme .stat-content {
  display: flex;
  flex-direction: column;
  min-width: 0;
  overflow: visible !important;
  width: calc(100% - 40px);
}

body.saas-theme .stat-label {
  font-size: 0.68rem !important;
  font-weight: 700 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.4px !important;
  color: #64748b;
  white-space: normal !important;
  overflow: visible !important;
  text-overflow: clip !important;
  line-height: 1.25 !important;
  margin-bottom: 2px !important;
  font-family: var(--font-sans) !important;
}

body.saas-theme .stat-value {
  font-size: 1.55rem !important;
  font-weight: 800 !important;
  color: #1e293b;
  line-height: 1.15 !important;
  white-space: nowrap !important;
  overflow: visible !important;
  margin: 1px 0 !important;
  font-family: var(--font-sans) !important;
}

body.saas-theme .stat-subtext {
  font-size: 0.68rem !important;
  color: #64748b;
  white-space: normal !important;
  overflow: visible !important;
  text-overflow: clip !important;
  margin-top: 2px !important;
}

/* Specific Value Colors for Light White Cards */
body.saas-theme .text-danger,
body.saas-theme .stat-value.text-danger {
  color: #dc2626 !important;
}

body.saas-theme .text-warning,
body.saas-theme .stat-value.text-warning {
  color: #d97706 !important;
}

body.saas-theme .text-success,
body.saas-theme .stat-value.text-success {
  color: #16a34a !important;
}

body.saas-theme .text-purple,
body.saas-theme .stat-value.text-purple {
  color: #9333ea !important;
}

/* ==========================================================================
   STATUS / HIGHLIGHT CARDS (For Proximity / Alerts / Priority)
   - Critical / Exact Match: Background #7F1D1D, Text #FFFFFF, Badges clear red
   - Warning / Moderate Match: Background #78350F, Text #FEF3C7
   - Success / Safe Match: Background #064E3B, Text #FFFFFF / #ECFDF5
   ========================================================================== */

/* 1. Critical / Exact Match (Red/Dark Red Theme) */
body.saas-theme .card-exact-match,
body.saas-theme #cardExactTagged,
body.saas-theme .stat-box.card-critical,
body.saas-theme .stat-box.card-exact {
  background: #7F1D1D !important;
  border: 2px solid #EF4444 !important;
  box-shadow: 0 4px 14px rgba(127, 29, 29, 0.35) !important;
}

body.saas-theme .card-exact-match .stat-value,
body.saas-theme #cardExactTagged .stat-value,
body.saas-theme .stat-box.card-critical .stat-value,
body.saas-theme .stat-box.card-exact .stat-value,
body.saas-theme #statDistributorTaggedCount {
  color: #FFFFFF !important;
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.5) !important;
}

body.saas-theme .card-exact-match .stat-label,
body.saas-theme #cardExactTagged .stat-label,
body.saas-theme .stat-box.card-critical .stat-label,
body.saas-theme .stat-box.card-exact .stat-label {
  color: #FCA5A5 !important;
}

body.saas-theme .card-exact-match .stat-subtext,
body.saas-theme #cardExactTagged .stat-subtext,
body.saas-theme .stat-box.card-critical .stat-subtext,
body.saas-theme .stat-box.card-exact .stat-subtext {
  color: #FECACA !important;
}

body.saas-theme .card-exact-match .stat-icon-wrapper,
body.saas-theme #cardExactTagged .stat-icon-wrapper {
  background: rgba(239, 68, 68, 0.35) !important;
  color: #FFFFFF !important;
  border: 1px solid rgba(239, 68, 68, 0.5) !important;
}

/* 2. Warning / Moderate Match (Amber / Yellow Theme - 5m) */
body.saas-theme .card-5m-range,
body.saas-theme #card5mRange,
body.saas-theme .stat-box.card-warning {
  background: #78350F !important;
  border: 2px solid #F59E0B !important;
  box-shadow: 0 4px 14px rgba(120, 53, 15, 0.35) !important;
}

body.saas-theme .card-5m-range .stat-value,
body.saas-theme #card5mRange .stat-value,
body.saas-theme .stat-box.card-warning .stat-value,
body.saas-theme #statDistributor5mRangeCount {
  color: #FEF3C7 !important;
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.5) !important;
}

body.saas-theme .card-5m-range .stat-label,
body.saas-theme #card5mRange .stat-label,
body.saas-theme .stat-box.card-warning .stat-label {
  color: #FDE68A !important;
}

body.saas-theme .card-5m-range .stat-subtext,
body.saas-theme #card5mRange .stat-subtext,
body.saas-theme .stat-box.card-warning .stat-subtext {
  color: #FEF3C7 !important;
}

body.saas-theme .card-5m-range .stat-icon-wrapper,
body.saas-theme #card5mRange .stat-icon-wrapper {
  background: rgba(245, 158, 11, 0.35) !important;
  color: #FEF3C7 !important;
  border: 1px solid rgba(245, 158, 11, 0.5) !important;
}

/* 3. Moderate Match (Yellow / Amber - 10m) */
body.saas-theme .card-10m-range,
body.saas-theme #card10mRange {
  background: #713F12 !important;
  border: 2px solid #EAB308 !important;
  box-shadow: 0 4px 14px rgba(113, 63, 18, 0.35) !important;
}

body.saas-theme .card-10m-range .stat-value,
body.saas-theme #card10mRange .stat-value,
body.saas-theme #statDistributor10mRangeCount {
  color: #FEF08A !important;
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.5) !important;
}

body.saas-theme .card-10m-range .stat-label,
body.saas-theme #card10mRange .stat-label {
  color: #FDE047 !important;
}

body.saas-theme .card-10m-range .stat-subtext,
body.saas-theme #card10mRange .stat-subtext {
  color: #FEF9C3 !important;
}

body.saas-theme .card-10m-range .stat-icon-wrapper,
body.saas-theme #card10mRange .stat-icon-wrapper {
  background: rgba(234, 179, 8, 0.35) !important;
  color: #FEF08A !important;
  border: 1px solid rgba(234, 179, 8, 0.5) !important;
}

/* 4. Success / Safe Match (Green Theme - 20m) */
body.saas-theme .card-20m-range,
body.saas-theme #card20mRange,
body.saas-theme .stat-box.card-success {
  background: #064E3B !important;
  border: 2px solid #10B981 !important;
  box-shadow: 0 4px 14px rgba(6, 78, 59, 0.35) !important;
}

body.saas-theme .card-20m-range .stat-value,
body.saas-theme #card20mRange .stat-value,
body.saas-theme .stat-box.card-success .stat-value,
body.saas-theme #statDistributor20mRangeCount {
  color: #ECFDF5 !important;
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.5) !important;
}

body.saas-theme .card-20m-range .stat-label,
body.saas-theme #card20mRange .stat-label,
body.saas-theme .stat-box.card-success .stat-label {
  color: #6EE7B7 !important;
}

body.saas-theme .card-20m-range .stat-subtext,
body.saas-theme #card20mRange .stat-subtext,
body.saas-theme .stat-box.card-success .stat-subtext {
  color: #A7F3D0 !important;
}

body.saas-theme .card-20m-range .stat-icon-wrapper,
body.saas-theme #card20mRange .stat-icon-wrapper {
  background: rgba(16, 185, 129, 0.35) !important;
  color: #ECFDF5 !important;
  border: 1px solid rgba(16, 185, 129, 0.5) !important;
}

/* 5. Deep Purple (30m) */
body.saas-theme .card-30m-range,
body.saas-theme #card30mRange {
  background: #3B0764 !important;
  border: 2px solid #8B5CF6 !important;
  box-shadow: 0 4px 14px rgba(59, 7, 100, 0.35) !important;
}

body.saas-theme .card-30m-range .stat-value,
body.saas-theme #card30mRange .stat-value,
body.saas-theme #statDistributor30mRangeCount {
  color: #FFFFFF !important;
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.5) !important;
}

body.saas-theme .card-30m-range .stat-label,
body.saas-theme #card30mRange .stat-label {
  color: #C084FC !important;
}

body.saas-theme .card-30m-range .stat-subtext,
body.saas-theme #card30mRange .stat-subtext {
  color: #DDD6FE !important;
}

body.saas-theme .card-30m-range .stat-icon-wrapper,
body.saas-theme #card30mRange .stat-icon-wrapper {
  background: rgba(139, 92, 246, 0.35) !important;
  color: #FFFFFF !important;
  border: 1px solid rgba(139, 92, 246, 0.5) !important;
}

/* Tabs */
body.saas-theme .view-navigation {
  margin-bottom: 0.45rem;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

body.saas-theme .tabs-group {
  display: inline-flex;
  background: #e2e8f0;
  padding: 3px;
  border-radius: 8px;
  gap: 3px;
}

body.saas-theme .tab-button {
  background: transparent;
  border: none;
  color: #475569;
  padding: 0.4rem 0.85rem;
  border-radius: 6px;
  font-size: 0.8rem;
  font-weight: 700;
  cursor: pointer;
  transition: all 0.2s ease;
  display: flex;
  align-items: center;
  gap: 6px;
}

body.saas-theme .tab-button.active {
  background: #ffffff;
  color: #0284c7;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
}

body.saas-theme .badge-tab {
  background: #ef4444;
  color: #ffffff;
  font-size: 0.68rem;
  padding: 1px 6px;
  border-radius: 10px;
}

/* Modern Clean Filter Toolbar */
body.saas-theme .filter-toolbar {
  background: #ffffff !important;
  border: 1px solid #e2e8f0 !important;
  border-radius: 12px !important;
  padding: 0.45rem 0.75rem !important;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04) !important;
  margin-bottom: 0.55rem !important;
  display: flex !important;
  flex-wrap: nowrap !important;
  align-items: center !important;
  gap: 0.45rem !important;
  width: 100% !important;
  box-sizing: border-box !important;
  overflow-x: auto !important;
}

body.saas-theme .filter-item {
  display: flex !important;
  align-items: center !important;
  gap: 0.35rem !important;
  flex-shrink: 0 !important;
}

body.saas-theme .filter-item label,
body.saas-theme .filter-toolbar label {
  color: #475569 !important;
  font-weight: 700 !important;
  font-size: 0.74rem !important;
  white-space: nowrap !important;
}

body.saas-theme .filter-select {
  background: #f8fafc !important;
  border: 1px solid #cbd5e1 !important;
  color: #1e293b !important;
  border-radius: 8px !important;
  padding: 0.35rem 0.55rem !important;
  font-size: 0.76rem !important;
  font-weight: 600 !important;
  height: 34px !important;
  box-sizing: border-box !important;
  box-shadow: none !important;
}

body.saas-theme .filter-select:focus {
  border-color: #0284c7 !important;
  outline: none !important;
  box-shadow: 0 0 0 2px rgba(2, 132, 199, 0.15) !important;
}

body.saas-theme .search-input-wrapper {
  position: relative;
  background: transparent !important;
  border: none !important;
  flex-shrink: 1 !important;
}

body.saas-theme .search-input,
body.saas-theme input[type="text"]#mapSearchInput {
  background: #f8fafc !important;
  border: 1px solid #cbd5e1 !important;
  color: #1e293b !important;
  border-radius: 8px !important;
  padding: 0.35rem 0.55rem 0.35rem 1.85rem !important;
  font-size: 0.76rem !important;
  height: 34px !important;
  box-sizing: border-box !important;
  box-shadow: none !important;
  width: 100% !important;
}

body.saas-theme input[type="text"]#mapSearchInput:focus {
  border-color: #0284c7 !important;
  outline: none !important;
  box-shadow: 0 0 0 2px rgba(2, 132, 199, 0.15) !important;
}

body.saas-theme .search-icon {
  position: absolute;
  left: 0.6rem;
  top: 50%;
  transform: translateY(-50%);
  color: #94a3b8;
  font-size: 0.78rem;
  pointer-events: none;
}

body.saas-theme .precision-select-wrapper {
  border-left: 1px solid #e2e8f0 !important;
  padding-left: 0.55rem !important;
  display: flex !important;
  align-items: center !important;
  gap: 0.35rem !important;
  flex-shrink: 0 !important;
}

body.saas-theme .precision-label {
  color: #0284c7 !important;
  font-weight: 700 !important;
  font-size: 0.74rem !important;
  white-space: nowrap !important;
  display: flex !important;
  align-items: center !important;
  gap: 4px !important;
}

body.saas-theme .precision-select-industrial {
  background: #f8fafc !important;
  border: 1px solid #cbd5e1 !important;
  color: #1e293b !important;
  box-shadow: none !important;
}

/* Map Container - 100% Width, Full Symmetry */
body.saas-theme .map-view-container {
  background: #ffffff !important;
  border: 1px solid #e2e8f0 !important;
  border-radius: 12px !important;
  overflow: hidden !important;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04) !important;
  width: 100% !important;
  box-sizing: border-box !important;
  height: auto !important;
  display: flex !important;
  flex-direction: column !important;
  margin-top: 0 !important;
}

body.saas-theme .map-header-bar {
  background: #f8fafc !important;
  border-bottom: 1px solid #e2e8f0 !important;
  color: #1e293b !important;
  padding: 0.55rem 1rem !important;
  font-size: 0.8rem !important;
  display: flex !important;
  justify-content: space-between !important;
  align-items: center !important;
  font-weight: 600 !important;
}

body.saas-theme #map {
  width: 100% !important;
  height: 480px !important;
  min-height: 480px !important;
  flex: none !important;
}

body.saas-theme .map-legend {
  background: rgba(255, 255, 255, 0.95) !important;
  border: 1px solid #e2e8f0 !important;
  color: #334155 !important;
  border-radius: 8px !important;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08) !important;
}

body.saas-theme .map-legend div:first-child {
  color: #0f172a !important;
}

/* Modern Flat Button Colors */
body.saas-theme .btn-secondary {
  background: #ffffff !important;
  color: #334155 !important;
  border: 1px solid #cbd5e1 !important;
}

body.saas-theme .btn-secondary:hover {
  background: #f8fafc !important;
  border-color: #94a3b8 !important;
  color: #0f172a !important;
}

body.saas-theme .btn-primary {
  background: #0284c7 !important;
  color: #ffffff !important;
  border: 1px solid #0284c7 !important;
  font-weight: 700 !important;
}

body.saas-theme .btn-primary:hover {
  background: #0369a1 !important;
  border-color: #0369a1 !important;
}

body.saas-theme .btn-success {
  background: #10b981 !important;
  color: #ffffff !important;
  border: 1px solid #10b981 !important;
  font-weight: 700 !important;
}

body.saas-theme .btn-success:hover {
  background: #059669 !important;
  border-color: #059669 !important;
}

body.saas-theme .btn-danger {
  background: #ef4444 !important;
  color: #ffffff !important;
  border: 1px solid #ef4444 !important;
  font-weight: 700 !important;
}

body.saas-theme .btn-danger:hover {
  background: #dc2626 !important;
  border-color: #dc2626 !important;
}

body.saas-theme .btn-warning {
  background: #f59e0b !important;
  color: #ffffff !important;
  border: 1px solid #f59e0b !important;
  font-weight: 700 !important;
}

body.saas-theme .btn-warning:hover {
  background: #d97706 !important;
  border-color: #d97706 !important;
}

/* Tables */
body.saas-theme .table-wrapper {
  background: #ffffff;
  border: 1px solid #e2e8f0;
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04);
}

body.saas-theme .data-table {
  color: #1e293b;
}

body.saas-theme .data-table th {
  background: #f8fafc;
  color: #475569;
  border-bottom: 1px solid #e2e8f0;
  font-size: 0.74rem;
  font-weight: 700;
  text-transform: uppercase;
}

body.saas-theme .data-table td {
  border-bottom: 1px solid #f1f5f9;
  color: #334155;
  font-size: 0.8rem;
}

body.saas-theme .data-table tr:hover {
  background: #f8fafc;
}

/* ==========================================================================
   Identity & DT Priority SaaS Overrides (Crisp White Surfaces & Contrast)
   ========================================================================== */
body.saas-theme .main-audit-card {
  background: #ffffff !important;
  border: 1px solid #e2e8f0 !important;
  border-radius: 12px !important;
  padding: 1.25rem !important;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04) !important;
  margin-bottom: 1.5rem !important;
}

body.saas-theme .identity-table-wrapper {
  background: transparent !important;
  border: none !important;
  padding: 0 !important;
  overflow-x: auto !important;
}

body.saas-theme .export-center-card {
  background: #ffffff !important;
  border: 1px solid #e2e8f0 !important;
  border-radius: 12px !important;
  padding: 1.25rem !important;
  margin-bottom: 1.25rem !important;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04) !important;
}

body.saas-theme .export-center-card h2 {
  color: #0f172a !important;
}

body.saas-theme .export-center-card p {
  color: #64748b !important;
}

body.saas-theme .export-action-item {
  background: #f8fafc !important;
  border: 1px solid #e2e8f0 !important;
  border-radius: 10px !important;
  transition: all 0.2s ease !important;
}

body.saas-theme .export-action-item:hover {
  background: #ffffff !important;
  border-color: #0284c7 !important;
  box-shadow: 0 4px 12px rgba(2, 132, 199, 0.08) !important;
  transform: translateY(-2px) !important;
}

body.saas-theme .export-action-title {
  color: #0f172a !important;
}

body.saas-theme .export-action-sub {
  color: #64748b !important;
}

body.saas-theme .export-action-icon {
  background: #ffffff !important;
  border: 1px solid #e2e8f0 !important;
}

/* Priority Status Badges - High Contrast SaaS Theme */
body.saas-theme .badge-priority-critical {
  background: #fef2f2 !important;
  border: 1px solid #fecaca !important;
  color: #b91c1c !important;
  font-weight: 700 !important;
  font-size: 0.72rem !important;
  padding: 3px 9px !important;
  border-radius: 9999px !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 5px !important;
  white-space: nowrap !important;
}

body.saas-theme .badge-priority-moderate {
  background: #fffbeb !important;
  border: 1px solid #fde68a !important;
  color: #b45309 !important;
  font-weight: 700 !important;
  font-size: 0.72rem !important;
  padding: 3px 9px !important;
  border-radius: 9999px !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 5px !important;
  white-space: nowrap !important;
}

body.saas-theme .badge-priority-low {
  background: #f0fdf4 !important;
  border: 1px solid #bbf7d0 !important;
  color: #15803d !important;
  font-weight: 700 !important;
  font-size: 0.72rem !important;
  padding: 3px 9px !important;
  border-radius: 9999px !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 5px !important;
  white-space: nowrap !important;
}

body.saas-theme .badge-priority-clean {
  background: #eff6ff !important;
  border: 1px solid #bfdbfe !important;
  color: #1d4ed8 !important;
  font-weight: 700 !important;
  font-size: 0.72rem !important;
  padding: 3px 9px !important;
  border-radius: 9999px !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 5px !important;
  white-space: nowrap !important;
}

body.saas-theme .region-badge {
  background: #f1f5f9 !important;
  border: 1px solid #cbd5e1 !important;
  color: #1e293b !important;
  font-size: 0.74rem !important;
  font-weight: 600 !important;
  padding: 3px 8px !important;
  border-radius: 4px !important;
  white-space: nowrap !important;
  display: inline-block !important;
}

body.saas-theme .dt-badge {
  background: #eef2ff !important;
  border: 1px solid #c7d2fe !important;
  color: #3730a3 !important;
  font-size: 0.74rem !important;
  font-weight: 700 !important;
  padding: 2px 7px !important;
  border-radius: 4px !important;
  font-family: var(--font-mono) !important;
  white-space: nowrap !important;
  display: inline-block !important;
}

body.saas-theme .count-badge-purple {
  background: #faf5ff !important;
  border: 1px solid #e9d5ff !important;
  color: #7e22ce !important;
  font-weight: 700 !important;
  font-size: 0.76rem !important;
  padding: 2px 7px !important;
  border-radius: 4px !important;
  display: inline-block !important;
}

body.saas-theme .count-badge-blue {
  background: #eff6ff !important;
  border: 1px solid #bfdbfe !important;
  color: #1d4ed8 !important;
  font-weight: 700 !important;
  font-size: 0.76rem !important;
  padding: 2px 7px !important;
  border-radius: 4px !important;
  display: inline-block !important;
}

body.saas-theme .badge-pill-cyan {
  background: #f0f9ff !important;
  color: #0284c7 !important;
  border: 1px solid #bae6fd !important;
  font-size: 0.72rem !important;
  font-weight: 700 !important;
  padding: 3px 9px !important;
  border-radius: 9999px !important;
  text-transform: uppercase !important;
  letter-spacing: 0.3px !important;
  display: inline-flex !important;
  align-items: center !important;
}

/* Priority Filter Pills */
body.saas-theme .filter-pill-btn {
  background: #ffffff;
  border: 1px solid #cbd5e1;
  color: #475569;
  padding: 0.42rem 0.9rem;
  border-radius: 9999px;
  font-size: 0.78rem;
  font-weight: 700;
  cursor: pointer;
  transition: all 0.15s ease;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.03);
}

body.saas-theme .filter-pill-btn:hover {
  background: #f8fafc;
  color: #0f172a;
  border-color: #94a3b8;
}

body.saas-theme .filter-pill-btn.active {
  background: #0284c7 !important;
  color: #ffffff !important;
  border-color: #0284c7 !important;
  box-shadow: 0 2px 6px rgba(2, 132, 199, 0.25) !important;
}

body.saas-theme .filter-pill-btn[data-priority-filter="ALL"].active {
  background: #0f172a !important;
  border-color: #0f172a !important;
}

body.saas-theme .filter-pill-btn[data-priority-filter="CRITICAL"] {
  color: #b91c1c;
  border-color: #fca5a5;
  background: #fff5f5;
}
body.saas-theme .filter-pill-btn[data-priority-filter="CRITICAL"].active {
  background: #dc2626 !important;
  border-color: #dc2626 !important;
  color: #ffffff !important;
}

body.saas-theme .filter-pill-btn[data-priority-filter="MODERATE"] {
  color: #b45309;
  border-color: #fcd34d;
  background: #fffbeb;
}
body.saas-theme .filter-pill-btn[data-priority-filter="MODERATE"].active {
  background: #d97706 !important;
  border-color: #d97706 !important;
  color: #ffffff !important;
}

body.saas-theme .filter-pill-btn[data-priority-filter="LOW"] {
  color: #15803d;
  border-color: #86efac;
  background: #f0fdf4;
}
body.saas-theme .filter-pill-btn[data-priority-filter="LOW"].active {
  background: #16a34a !important;
  border-color: #16a34a !important;
  color: #ffffff !important;
}

body.saas-theme .filter-pill-btn[data-priority-filter="CLEAN"] {
  color: #1d4ed8;
  border-color: #93c5fd;
  background: #eff6ff;
}
body.saas-theme .filter-pill-btn[data-priority-filter="CLEAN"].active {
  background: #2563eb !important;
  border-color: #2563eb !important;
  color: #ffffff !important;
}

body.saas-theme .status-indicator-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  display: inline-block;
}

body.saas-theme .dot-red {
  background: #ef4444;
}

body.saas-theme .dot-amber {
  background: #f59e0b;
}

body.saas-theme .dot-green {
  background: #10b981;
}

body.saas-theme .dot-blue {
  background: #3b82f6;
}

body.saas-theme .empty-state-box {
  background: #f8fafc !important;
  border: 1px dashed #cbd5e1 !important;
  color: #475569 !important;
  border-radius: 10px !important;
  padding: 2.5rem 1rem !important;
}

/* Responsive */
@media (max-width: 1200px) {
  body.saas-theme .stats-and-upload-grid {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 768px) {
  .saas-sidebar {
    transform: translateX(-100%);
    transition: transform 0.3s ease;
  }
  .saas-sidebar.mobile-open {
    transform: translateX(0);
  }
  .saas-main-wrapper {
    margin-left: 0;
    width: 100%;
  }
  .saas-hamburger-btn {
    display: flex;
  }
  body.saas-theme .stats-grid {
    grid-template-columns: 1fr;
  }
  .saas-topbar {
    padding: 0 0.85rem;
  }
}